@charset "UTF-8";
/* --------------------------------------------------
Top
-------------------------------------------------- */
body #wrapper .fixed-logoarea { position: absolute; z-index: 2; width: 69.07%; left: 0; right: 0; margin: 0 auto; top: 81.33vw; transition: top .1s linear 0s; pointer-events: none; }
body #wrapper .fixed-logoarea .fixed-logoinner { position: absolute; top: 50%; left: 0; right: 0; transform: translate(0, -50%); }
body #wrapper #top { position: relative; }
body #wrapper #top h2 { position: absolute; width: 64.4%; left: 0; right: 0; margin: 0 auto; top: 96vw; z-index: 2; }

@media screen and (orientation: landscape) { body #wrapper .fixed-logoarea { width: 35.51%; top: 7.32vw; }
  body #wrapper #top h2 { width: 35.14%; top: 13.54vw; } }
/* --------------------------------------------------
Contents
-------------------------------------------------- */
body #wrapper #contents { background: #E0E0E0; padding: 40px 0; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 500; }
body #wrapper #contents .look { padding: 40px 0; position: relative; z-index: 9; }
body #wrapper #contents .look .inner { padding: 0 10px; }
body #wrapper #contents .look .inner .image-container { position: relative; margin: 0 0 18px; }
body #wrapper #contents .look .inner .image-container .imagearea { filter: grayscale(1); transition: filter 1s ease 0s; }
body #wrapper #contents .look .inner .image-container .textarea { position: absolute; left: 8px; top: 8px; transition: opacity .4s ease 1s; }
body #wrapper #contents .look .inner .image-container .textarea .credit ul li { color: #FFFFFF; font-size: 1.6rem; letter-spacing: -.005em; line-height: 1; }
body #wrapper #contents .look .inner .image-container .textarea .credit ul li + li::before { display: block; content: "–"; }
body #wrapper #contents .look .inner .text-container .textarea .credit ul li { display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; letter-spacing: -.005em; line-height: 2; }
body #wrapper #contents .look .inner .text-container .textarea .credit ul li .detail { display: flex; align-items: center; column-gap: 10px; }
body #wrapper #contents .look .inner .text-container .textarea .credit ul li .detail .link-btn { width: 45px; height: 16px; font-size: 1.1rem; line-height: 1; }
body #wrapper #contents .look .inner .text-container .textarea .credit ul li .detail .link-btn a { height: 100%; display: flex; align-items: center; justify-content: center; border: solid 1px #211613; box-sizing: border-box; padding: 1px 0 0; }
body #wrapper #contents .look .inner .text-container .textarea .credit ul li .detail .cs { margin: 0 55px 0 0; color: #6C6C6C; }
body #wrapper #contents .look.is-show .inner .image-container .imagearea { filter: grayscale(0); }
body #wrapper #contents .look.is-show .inner .image-container .textarea { opacity: 0; }

@media screen and (min-width: 768px) { body #wrapper #contents { padding: 20px 0; }
  body #wrapper #contents .look { padding: 75px 0; }
  body #wrapper #contents .look .inner { padding: 0; width: 94.14%; margin: 0 auto; position: relative; } }
@media screen and (min-width: 768px) and (max-width: 1000px) { body #wrapper #contents .look .inner { width: 96%; } }
@media screen and (min-width: 768px) { body #wrapper #contents .look .inner .image-container { margin: 0; width: 35.46%; margin: 0 auto; } }
@media screen and (min-width: 768px) and (max-width: 1000px) { body #wrapper #contents .look .inner .image-container { width: 45%; } }
@media screen and (min-width: 768px) { body #wrapper #contents .look .inner .image-container .textarea { left: 10px; top: 10px; }
  body #wrapper #contents .look .inner .image-container .textarea .credit ul li { font-size: 2rem; } }
@media screen and (min-width: 768px) and (max-width: 1000px) { body #wrapper #contents .look .inner .image-container .textarea .credit ul li { font-size: 1.6rem; } }
@media screen and (min-width: 768px) { body #wrapper #contents .look .inner .text-container { position: fixed; left: 5.86%; bottom: 8.33%; opacity: 0; transition: opacity .6s ease 0s; pointer-events: none; } }
@media screen and (min-width: 768px) and (max-width: 1000px) { body #wrapper #contents .look .inner .text-container { left: 2%; } }
@media screen and (min-width: 768px) { body #wrapper #contents .look .inner .text-container .textarea .credit ul li { display: block; line-height: 1.29; } }
@media screen and (min-width: 768px) and (max-width: 1000px) { body #wrapper #contents .look .inner .text-container .textarea .credit ul li { font-size: 1.2rem; } }
@media screen and (min-width: 768px) { body #wrapper #contents .look .inner .text-container .textarea .credit ul li .detail .link-btn { width: 40px; height: 14px; font-size: 1rem; }
  body #wrapper #contents .look .inner .text-container .textarea .credit ul li .detail .link-btn a { padding: 2px 0 0; transition: background .2s ease 0s, color .2s ease 0s; }
  body #wrapper #contents .look .inner .text-container .textarea .credit ul li .detail .link-btn a:hover { background: #211613; color: #E0E0E0; }
  body #wrapper #contents .look .inner .text-container .textarea .credit ul li + li { margin: 1.29em 0 0; }
  body #wrapper #contents .look.credit-show .inner .text-container { opacity: 1; pointer-events: auto; } }