@charset "UTF-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

/* change colours to suit your needs */
ins { background-color: #ff9; color: #000; text-decoration: none; }

/* change colours to suit your needs */
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

/* change border colour to suit your needs */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, button, textarea, select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* --------------------------------------------------
Common
-------------------------------------------------- */
html { height: 100%; font-size: 5px; }
@media screen and (min-width: 768px) { html { font-size: 10px; } }

body { -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; height: 100%; font-family: 'Helvetica','Arial', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; overflow-y: scroll !important; font-weight: bold; }

input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; position: relative; }

select::-ms-expand { display: none; }

img, video { vertical-align: bottom; max-width: 100%; height: auto; }

img[src$=".svg"] { width: 100%; }

li { list-style: none; }

a { color: inherit; text-decoration: none; }

@media screen and (max-width: 767px) { .pc { display: none !important; } }
@media screen and (min-width: 768px) { .sp { display: none !important; } }
/* --------------------------------------------------
Contents
-------------------------------------------------- */
#sms_wrapper { overflow: hidden; height: 100%; opacity: 0;  }
#sms_wrapper header { padding: 40px 18px 0; position: fixed; top: 0; right: 0; left: 0; z-index: 9; transition: transform .7s ease 0s; }
#sms_wrapper header .title { width: 100%; transform-origin: bottom left; transition: transform .7s ease 0s; margin: 0 0 7px; }
#sms_wrapper header .num { position: relative; width: 5.6%; margin: 0 0 0 4%; }
#sms_wrapper header .num li { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 95%; opacity: 0; transition: opacity .5s ease 0s; padding: 0 0 1px; overflow: hidden; }
#sms_wrapper header .num li::after { display: block; content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #000; transition: transform .4s ease .35s; transform: translate(-101%, 0); }
#sms_wrapper #content { padding: 32vw 0 0; position: relative; z-index: 1; }
#sms_wrapper #content #top { margin: 0 0 125px; }
#sms_wrapper #content #top .inner { padding: 138% 0 0; position: relative; }
#sms_wrapper #content #top .inner .mark { position: absolute; top: -3%; left: 7.5%; width: 30%; }
#sms_wrapper #content #top .inner .imagearea { position: absolute; opacity: 0; }
#sms_wrapper #content #top .inner .imagearea img { width: 100%; }
#sms_wrapper #content #top .inner .imagearea.imagearea1 { top: 24%; left: 5%; width: 59.5%; z-index: 2; }
#sms_wrapper #content #top .inner .imagearea.imagearea2 { top: 0; right: 0; width: 44.5%; }
#sms_wrapper #content #top .inner .imagearea.imagearea3 { top: 68.7%; left: 53.3%; width: 40.5%; z-index: 2; }
#sms_wrapper #content #top .inner .imagearea.imagearea4 { top: 56%; left: 0; width: 44.5%; }
#sms_wrapper #content #top .inner .imagearea.imagearea5 { top: 47%; right: 0; width: 38%; }
#sms_wrapper #content #top .inner .imagearea.imagearea6 { bottom: 0; left: 23%; width: 33%; }
#sms_wrapper #content #look_wrapper { padding: 0 17px; width: 100%; max-width: 680px; margin: 0 auto; box-sizing: border-box; }
#sms_wrapper #content #look_wrapper .look { padding: 22.5vw 0 0; margin: 0 0 135px; }
#sms_wrapper #content #look_wrapper .look .main { margin: 0 0 40px; }
#sms_wrapper #content #look_wrapper .look .main .imagearea { margin: 0 0 12px; opacity: 0; }
#sms_wrapper #content #look_wrapper .look .main .credit { opacity: 0; }
#sms_wrapper #content #look_wrapper .look .main .credit li { font-size: 1.8rem; letter-spacing: .075em; line-height: 1; margin: 0 0 5px; }
#sms_wrapper #content #look_wrapper .look .main .credit li span { opacity: .6; }
#sms_wrapper #content #look_wrapper .look .main.is-show .imagearea, #sms_wrapper #content #look_wrapper .look .main.is-show .credit { opacity: 1; transition: opacity 1s ease 0s; }
#sms_wrapper #content #look_wrapper .look .main.is-show .credit { transition-delay: .2s; }
#sms_wrapper #content #look_wrapper .look .sub { display: flex; justify-content: space-between; }
#sms_wrapper #content #look_wrapper .look .sub .imagearea { width: 49.6%; opacity: 0; }
#sms_wrapper #content #look_wrapper .look .sub.is-show .imagearea { opacity: 1; transition: opacity 1s ease 0s; }
#sms_wrapper #content #look_wrapper .look .sub.is-show .imagearea:nth-child(2) { transition-delay: .3s; }
#sms_wrapper footer { padding: 0 0 10px; }
#sms_wrapper footer h2 { width: 145px; margin: 0 auto 55px; }
#sms_wrapper footer small { display: block; font-size: 2rem; letter-spacing: .075em; text-align: center; transform: scale(0.75); transform-origin: top; }
#sms_wrapper footer #to_top { position: fixed; right: 0; bottom: 0; transform: translate(0, 101%); width: 38px; transition: transform .5s ease 0s; z-index: 9; }
#sms_wrapper footer #to_top a { padding: 10px 0 10px 10px; display: block; }
#sms_wrapper.is-loaded { opacity: 1 !important; transition: opacity 1s ease 0s; }
#sms_wrapper.is-loaded #content #top .inner .imagearea { opacity: 1; transition: opacity .5s 1.2s; }
#sms_wrapper.is-loaded #content #top .inner .imagearea.imagearea2 { transition-delay: 1.35s; }
#sms_wrapper.is-loaded #content #top .inner .imagearea.imagearea3 { transition-delay: 1.5s; }
#sms_wrapper.is-loaded #content #top .inner .imagearea.imagearea4 { transition-delay: 1.65s; }
#sms_wrapper.is-loaded #content #top .inner .imagearea.imagearea5 { transition-delay: 1.8s; }
#sms_wrapper.is-loaded #content #top .inner .imagearea.imagearea6 { transition-delay: 1.95s; }
#sms_wrapper.animation-end { overflow: visible; height: auto; }
#sms_wrapper.header-animation header { transform: translate(0, -50px); }
#sms_wrapper.header-animation header .title { transform: scale(0.41); }
#sms_wrapper.header-animation footer #to_top { transform: none; }
#sms_wrapper.header-animation.show-0 header .num li:nth-child(1) { opacity: 1; }
#sms_wrapper.header-animation.show-0 header .num li:nth-child(1)::after { transform: translate(101%, 0); }
#sms_wrapper.header-animation.show-1 header .num li:nth-child(2) { opacity: 1; }
#sms_wrapper.header-animation.show-1 header .num li:nth-child(2)::after { transform: translate(101%, 0); }
#sms_wrapper.header-animation.show-2 header .num li:nth-child(3) { opacity: 1; }
#sms_wrapper.header-animation.show-2 header .num li:nth-child(3)::after { transform: translate(101%, 0); }
#sms_wrapper.header-animation.show-3 header .num li:nth-child(4) { opacity: 1; }
#sms_wrapper.header-animation.show-3 header .num li:nth-child(4)::after { transform: translate(101%, 0); }
#sms_wrapper.header-animation.show-4 header .num li:nth-child(5) { opacity: 1; }
#sms_wrapper.header-animation.show-4 header .num li:nth-child(5)::after { transform: translate(101%, 0); }
#sms_wrapper.header-animation.show-5 header .num li:nth-child(6) { opacity: 1; }
#sms_wrapper.header-animation.show-5 header .num li:nth-child(6)::after { transform: translate(101%, 0); }
#sms_wrapper.header-animation.show-6 header .num li:nth-child(7) { opacity: 1; }
#sms_wrapper.header-animation.show-6 header .num li:nth-child(7)::after { transform: translate(101%, 0); }
#sms_wrapper.header-animation.show-7 header .num li:nth-child(8) { opacity: 1; }
#sms_wrapper.header-animation.show-7 header .num li:nth-child(8)::after { transform: translate(101%, 0); }
#sms_wrapper.header-animation.show-8 header .num li:nth-child(9) { opacity: 1; }
#sms_wrapper.header-animation.show-8 header .num li:nth-child(9)::after { transform: translate(101%, 0); }
#sms_wrapper.header-animation.show-9 header .num li:nth-child(10) { opacity: 1; }
#sms_wrapper.header-animation.show-9 header .num li:nth-child(10)::after { transform: translate(101%, 0); }


@media screen and (min-width: 768px) { #sms_wrapper header { padding: 63px 0 0 51px; right: auto; width: 42.8%; }
  #sms_wrapper header .title { margin: 0 0 13px; }
  #sms_wrapper header .num { width: 6.6%; margin: 0 0 0 5.3%; }
  #sms_wrapper header .num li { width: 92.5%; }
  #sms_wrapper #content { padding: 0; }
  #sms_wrapper #content #top { margin: 0 0 300px; }
  #sms_wrapper #content #top .inner { padding: 62.2% 0 0; }
  #sms_wrapper #content #top .inner .mark { top: 19.9%; left: 6.5%; width: 10.6%; }
  #sms_wrapper #content #top .inner .imagearea.imagearea1 { top: 29.4%; left: 22.4%; width: 35.1%; }
  #sms_wrapper #content #top .inner .imagearea.imagearea2 { top: 0; right: auto; left: 55%; width: 31.2%; }
  #sms_wrapper #content #top .inner .imagearea.imagearea3 { top: auto; bottom: 0; left: 39%; width: 22.6%; }
  #sms_wrapper #content #top .inner .imagearea.imagearea4 { top: 69.5%; width: 23.1%; }
  #sms_wrapper #content #top .inner .imagearea.imagearea5 { top: 60.3%; width: 21.2%; z-index: 2; }
  #sms_wrapper #content #top .inner .imagearea.imagearea6 { bottom: auto; top: 42.9%; left: 64%; width: 19.7%; }
  #sms_wrapper #content #look_wrapper { padding: 50px 0 0; max-width: 720px; }
  #sms_wrapper #content #look_wrapper .look { padding: 0; margin: 0 0 300px; }
  #sms_wrapper #content #look_wrapper .look .main { width: 100%; max-width: 535px; margin: 0 auto 75px; }
  #sms_wrapper #content #look_wrapper .look .main .imagearea { margin: 0 0 25px; }
  #sms_wrapper #content #look_wrapper .look .main .credit li { font-size: 1rem; }
  #sms_wrapper #content #look_wrapper .look .main .credit li a { transition: opacity .4s ease 0s; position: relative; overflow: hidden; display: inline-block; padding: 0 0 1px; }
  #sms_wrapper #content #look_wrapper .look .main .credit li a::after { display: block; content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #000; transform: translate(-101%, 0); }
  #sms_wrapper #content #look_wrapper .look .main .credit li a:hover { opacity: .6; }
  #sms_wrapper #content #look_wrapper .look .main .credit li a:hover::after { transform: translate(101%, 0); transition: transform .4s ease 0s; }
  #sms_wrapper #content #look_wrapper .look .main .credit li span { display: inline-block; padding: 0 0 1px; }
  #sms_wrapper #content #look_wrapper .look .sub .imagearea { width: 37.5%; }
  #sms_wrapper footer { padding: 0 0 15px; }
  #sms_wrapper footer h2 { width: 179px; margin: 0 auto 105px; }
  #sms_wrapper footer small { font-size: 1rem; transform: scale(0.8); }
  #sms_wrapper footer #to_top a { padding: 20px 0; transition: opacity .4s ease 0s; }
  #sms_wrapper footer #to_top a:hover { opacity: .6; }
  #sms_wrapper.header-animation header { transform: translate(0, -70px); }
  #sms_wrapper.header-animation header .title { transform: scale(0.48); } }