/* --------------------------------------------------
Top
-------------------------------------------------- */
body #wrapper #top .image-container { position: relative; }
body #wrapper #top .image-container .imagearea img { height: 100svh; object-fit: cover; object-position: center; }
body #wrapper #top .image-container .titlearea { width: 86.05%; position: absolute; left: 0; right: 0; margin: 0 auto; top: 53.47%; transform: translate(0, -50%); }
body #wrapper #top .image-container .titlearea h2 { opacity: 0; }
body #wrapper #top .image-container .titlearea h2 img { aspect-ratio: 592 / 98; }
body #wrapper #top .textarea { padding: 40px 6.05% 80px; }
body #wrapper #top .textarea .staff-credit { margin: 0 0 64px; }
body #wrapper #top .textarea .staff-credit p { font-weight: 300; font-size: 0.87rem; line-height: 1.8; letter-spacing: .08em; }
body #wrapper #top .textarea .lead-text p { text-align: justify; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 300; font-size: 1.31rem; line-height: 1.87; letter-spacing: .03em; }
body.is-loaded #wrapper #top .image-container .titlearea h2 { opacity: 1; transition: opacity 1.4s ease 1s; }
body.is-loaded #wrapper #top .image-container .titlearea .line-image { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path .6s ease .8s; }

@media screen and (orientation: landscape) { body #wrapper #top .image-container .imagearea img { height: 100vh; }
  body #wrapper #top .image-container .titlearea { width: 41.04%; left: 53.82%; right: auto; margin: 0; top: 85%; } }
@media screen and (min-width: 768px) { body #wrapper #top .textarea { padding: 60px 0 117px; width: 80.56%; margin: 0 auto; display: flex; }
  body #wrapper #top .textarea .staff-credit { margin: 0; width: 42.24%; }
  body #wrapper #top .textarea .staff-credit p { font-size: 1rem; }
  body #wrapper #top .textarea .lead-text { flex: 1; }
  body #wrapper #top .textarea .lead-text p { font-size: 1.5rem; } }
/* --------------------------------------------------
header
-------------------------------------------------- */
body #wrapper:not(.menu-open) header .header-inner #menu-toggle a i::before, body #wrapper:not(.menu-open) header .header-inner #menu-toggle a i::after { background: #9A9A9A; }
body #wrapper:not(.menu-open) header .header-inner #menu-toggle a::before { background: #9A9A9A; }

@media screen and (min-width: 768px) { body #wrapper header .header-inner #menu-wrapper .menu-inner .level-1 > li { color: #000000; }
  body #wrapper header .header-inner #menu-wrapper .menu-inner .level-1 > li .level-2 > li { color: #000000; } }
/* --------------------------------------------------
Contents
-------------------------------------------------- */
@keyframes hoverline { 0% { transform: scale(1); transform-origin: right; }
  33.3% { transform: scale(0, 1); transform-origin: right; }
  66.6% { transform: scale(0, 1); transform-origin: left; }
  100% { transform: scale(1); transform-origin: left; } }
body { background: #F0EFEB; }
body #wrapper #look-wrapper { padding: 0 0 23.26%; }
body #wrapper #look-wrapper .inner { display: flex; flex-direction: column; row-gap: 23.26vw; }
body #wrapper #look-wrapper .inner .layout-container { display: flex; flex-direction: column; row-gap: 23.26vw; }
body #wrapper #look-wrapper .inner .look { display: flex; flex-direction: column; row-gap: 4.65vw; }
body #wrapper #look-wrapper .inner .look .image-container .imagearea { opacity: 0; filter: brightness(0); transform: translate(0, 20px); }
body #wrapper #look-wrapper .inner .look .image-container .imagearea img { aspect-ratio: 550 / 825; }
body #wrapper #look-wrapper .inner .look .image-container .imagearea.is-show { opacity: 1; filter: brightness(1); transform: none; transition: opacity 2s ease 0s, filter 3s ease 0s, transform 2s ease 0s; }
body #wrapper #look-wrapper .inner .look .image-container .textarea { padding: 4.65% 4.65% 0; }
body #wrapper #look-wrapper .inner .look .image-container .textarea .credit { font-weight: 300; font-size: 1.13rem; line-height: 1.62; letter-spacing: .08em; }
body #wrapper #look-wrapper .inner .look .image-container .textarea .credit ul { display: flex; flex-direction: column; row-gap: 0.61rem; }
body #wrapper #look-wrapper .inner .look .image-container .textarea .credit ul li { display: flex; flex-wrap: wrap; column-gap: .5em; }
body #wrapper #look-wrapper .inner .look .image-container .textarea .credit ul li .name { font-weight: 400; }
body #wrapper #look-wrapper .inner .look .image-container .textarea .credit ul li .text-group { display: flex; flex-wrap: wrap; column-gap: .5em; }
body #wrapper #look-wrapper .inner .look .image-container .textarea .credit ul li .text-group a { display: inline-block; position: relative; }
body #wrapper #look-wrapper .inner .look .image-container .textarea .credit ul li .text-group a::after { display: block; content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-bottom: solid 1px; }
body #wrapper #look-wrapper .inner .look .image-container .textarea .credit ul li .text-group .arrival { font-family: noto-sans-cjk-jp, sans-serif; font-weight: 300; }
body #wrapper #look-wrapper .inner .look .image-container.size-s { width: 73.26%; }
body #wrapper #look-wrapper .inner .look .image-container.size-m { width: 81.4%; }
body #wrapper #look-wrapper .inner .look .image-container.size-l { width: 100%; }
body #wrapper #look-wrapper .inner .look.look03 { align-items: flex-end; }
body #wrapper #look-wrapper .inner .look.look04 { align-items: center; row-gap: 9.3vw; }
body #wrapper #look-wrapper .inner .look.look08 { align-items: center; row-gap: 0; }
body #wrapper #look-wrapper .inner .look.look08 .image-container:nth-child(1) { display: contents; }
body #wrapper #look-wrapper .inner .look.look08 .image-container:nth-child(1) .imagearea { width: 100%; margin: 0 0 4.65vw; }
body #wrapper #look-wrapper .inner .look.look08 .image-container:nth-child(1) .textarea { order: 100; align-self: flex-start; }
body #wrapper #look-wrapper .btnarea { display: flex; flex-direction: column; align-items: center; row-gap: 1.74rem; margin: 23.26% 0 0; }
body #wrapper #look-wrapper .btnarea .all-link { width: 87.91%; height: 7.15rem; text-align: center; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 500; font-size: 1.31rem; line-height: 1.6; letter-spacing: .05em; }
body #wrapper #look-wrapper .btnarea .all-link a { height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 3.58rem; border: solid 1px #000000; }

@media screen and (min-width: 768px) { body #wrapper #look-wrapper { padding: 0 0 9.03%; }
  body #wrapper #look-wrapper .inner { row-gap: 0; }
  body #wrapper #look-wrapper .inner .layout-container { flex-direction: row; column-gap: 4.44%; margin: 0 0 9.03%; }
  body #wrapper #look-wrapper .inner .look { flex-direction: row; column-gap: 1.39%; }
  body #wrapper #look-wrapper .inner .look .image-container .textarea { padding: 1.82% 0 0; }
  body #wrapper #look-wrapper .inner .look .image-container .textarea .credit { font-size: 1.1rem; line-height: 1.45; letter-spacing: .08em; }
  body #wrapper #look-wrapper .inner .look .image-container .textarea .credit ul li .text-group a:hover::after { animation: hoverline .6s linear 0s forwards; }
  body #wrapper #look-wrapper .inner .look .image-container.size-s { width: 31.25%; }
  body #wrapper #look-wrapper .inner .look .image-container.size-m { width: 27.78%; }
  body #wrapper #look-wrapper .inner .look .image-container.size-l { width: 38.19%; }
  body #wrapper #look-wrapper .inner .look.look01 { flex-direction: row-reverse; margin: 0 0 7.5%; }
  body #wrapper #look-wrapper .inner .look.look01 .image-container:nth-child(1) { margin: 0 9.72% 0 0; }
  body #wrapper #look-wrapper .inner .look.look02 { margin: 0 0 8.33%; }
  body #wrapper #look-wrapper .inner .look.look03 { align-items: flex-start; column-gap: 6.94%; flex-direction: row-reverse; margin: 0 0 6.32%; }
  body #wrapper #look-wrapper .inner .look.look03 .image-container:nth-child(1) { margin: 0 13.19% 0 0; }
  body #wrapper #look-wrapper .inner .look.look04 { column-gap: 6.94%; margin: 0 0 13.54%; }
  body #wrapper #look-wrapper .inner .look.look04 .image-container:nth-child(1) { margin: 0 0 0 13.89%; }
  body #wrapper #look-wrapper .inner .look.look04 .image-container:nth-child(2) { position: relative; }
  body #wrapper #look-wrapper .inner .look.look04 .image-container:nth-child(2) .textarea { position: absolute; left: 0; right: 0; top: 100%; }
  body #wrapper #look-wrapper .inner .look.look05, body #wrapper #look-wrapper .inner .look.look06 { width: 38.19%; }
  body #wrapper #look-wrapper .inner .look.look05 .image-container, body #wrapper #look-wrapper .inner .look.look06 .image-container { width: 100%; }
  body #wrapper #look-wrapper .inner .look.look05 { margin: 0 0 0 9.44%; }
  body #wrapper #look-wrapper .inner .look.look06 { margin: 33.13% 0 0; }
  body #wrapper #look-wrapper .inner .look.look07 { margin: 0 0 8.96%; justify-content: center; }
  body #wrapper #look-wrapper .inner .look.look08 { align-items: flex-start; column-gap: 8.33%; margin: 0 0 10.42%; }
  body #wrapper #look-wrapper .inner .look.look08 .image-container:nth-child(1) { display: block; margin: 0 0 0 7.29%; }
  body #wrapper #look-wrapper .inner .look.look08 .image-container:nth-child(1) .imagearea { margin: 0; }
  body #wrapper #look-wrapper .inner .look.look09 { column-gap: 8.33%; margin: 0 0 10.42%; }
  body #wrapper #look-wrapper .inner .look.look09 .image-container:nth-child(1) { margin: 0 0 0 7.29%; }
  body #wrapper #look-wrapper .inner .look.look10 { justify-content: center; }
  body #wrapper #look-wrapper .btnarea { flex-direction: row; justify-content: center; column-gap: 8rem; margin: 9.38% 0 0; }
  body #wrapper #look-wrapper .btnarea .all-link { width: 37rem; height: 7.8rem; font-size: 1.3rem; }
  body #wrapper #look-wrapper .btnarea .all-link a { border-radius: 3.9rem; transition: background .4s ease 0s, color .4s ease 0s; }
  body #wrapper #look-wrapper .btnarea .all-link a:hover { background: #000000; color: #F0EFEB; } }