@charset "UTF-8";
@media screen and (max-width: 768px) { .pc { display: none !important; } }
@media screen and (min-width: 769px) { .sp { display: none !important; } }
/* --------------------------------------------------
Lb Default
-------------------------------------------------- */
.lb-loader, .lightbox { text-align: center; line-height: 0; }
body:after { display: none; }
.lb-dataContainer:after, .lb-outerContainer:after { content: ""; clear: both; }
body.lb-disable-scrolling { overflow: hidden; }
.lightboxOverlay { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #000; filter: alpha(Opacity=80); opacity: .8; display: none; }
.lightbox { position: absolute; left: 0; width: 100%; z-index: 10000; font-weight: 400; }
.lightbox .lb-image { display: block; height: auto; max-width: inherit; border-radius: 3px; }
.lightbox a img { border: none; }
.lb-outerContainer { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; border-radius: 4px; }
.lb-loader, .lb-nav { position: absolute; left: 0; }
.lb-outerContainer:after { display: table; }
.lb-container { padding: 4px; }
.lb-loader { top: 43%; height: 25%; width: 100%; }
.lb-cancel { display: block; width: 32px; height: 32px; margin: 0 auto; }
.lb-nav { top: 0; height: 100%; width: 100%; z-index: 10; }
.lb-container > .nav { left: 0; }
.lb-nav a { outline: 0; }
.lb-next, .lb-prev { height: 100%; cursor: pointer; display: block; }
.lb-nav a.lb-prev { width: 34%; left: 0; float: left; filter: alpha(Opacity=0); opacity: 0; -webkit-transition: opacity .6s; transition: opacity .6s; }
.lb-nav a.lb-prev:hover { filter: alpha(Opacity=100); opacity: 1; }
.lb-nav a.lb-next { width: 64%; right: 0; float: right; filter: alpha(Opacity=0); opacity: 0; -webkit-transition: opacity .6s; transition: opacity .6s; }
.lb-nav a.lb-next:hover { filter: alpha(Opacity=100); opacity: 1; }
.lb-dataContainer { margin: 0 auto; padding-top: 5px; width: 100%; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.lb-dataContainer:after { display: table; }
.lb-data { padding: 0 4px; color: #ccc; }
.lb-data .lb-details { width: 85%; float: left; text-align: left; line-height: 1.1em; }
.lb-data .lb-caption { font-size: 13px; font-weight: 700; line-height: 1em; }
.lb-data .lb-number { display: block; clear: left; padding-bottom: 1em; font-size: 12px; color: #999; }
.lb-data .lb-close { display: block; float: right; width: 30px; height: 30px; text-align: right; outline: 0; filter: alpha(Opacity=70); opacity: .7; -webkit-transition: opacity .2s; transition: opacity .2s; }
.lb-data .lb-close:hover { cursor: pointer; filter: alpha(Opacity=100); opacity: 1; }

.mia {
  margin-inline: auto !important;
}

/* .r075 { aspect-ratio: 0.75; }
.r130 { aspect-ratio: 1.3; }
.opt0 { object-position: 50% 0; }
.opt45 { object-position: 50% 45%; }
.opt100 { object-position: 50% 100%; } */

/* --------------------------------------------------
Contents
-------------------------------------------------- */
body #content {
  padding: 80px 0 0; margin: 0; font-family: "Roboto", "ヒラギノ角ゴ Pro W3", "メイリオ", "Hiragino Kaku Gothic Pro", Meiryo, Verdana, sans-serif; margin: 0 auto 400px; max-width: 700px;
}
body #content #lead { padding: 105px 0 65px; text-align: center; }
body #content #lead h3 { font-size: 27.5px; font-weight: 300; letter-spacing: .25em; margin: 0 0 10px; }
body #content #lead h2 { font-size: 11px; letter-spacing: .25em; font-weight: 300; }
body #content #look_wrapper .credit { text-align: left; margin-top: 10px; font-size:1.0rem; }
body #content #look_wrapper .credit p { font-size: 8px; letter-spacing: .06em; font-weight: 300; line-height: 1; margin: 0 0 10px; }
body #content #look_wrapper .credit ul li { line-height: 1.6; }
body #content #look_wrapper .credit.credit_staff p { font-size: 13px; line-height: 2; text-align: center; margin: 100px auto -300px; width: fit-content; }
body #content #look_wrapper .credit.credit_staff .staff_role { display:inline-flex; width: 13em; justify-content: flex-end; }
body #content #look_wrapper .credit.credit_staff .staff_name { display:inline-flex; width: 15em; text-align: left; margin-left: 1.2em; }
body #content #look_wrapper img { width: 100%; object-fit: initial; }
body #content #look_wrapper .single { margin: 0 37px 52px; opacity: 0; }
/* body #content #look_wrapper .single .imagearea { margin: 0 0 10px; } */
body #content #look_wrapper .single.is-show { opacity: 1; transition: opacity .6s ease 0s; }
body #content #look_wrapper .double { margin: 0 auto 52px; }
body #content #look_wrapper .double .imagewrap { margin: 0 10px 15px;  display: flex; justify-content: space-between; }
body #content #look_wrapper .double .imagewrap .imagearea { width: calc(50% - 5px); }
body #content #look_wrapper .group { margin: 0 0 52px; }
body #content #look_wrapper .group .imagewrap { position: relative; }
body #content #look_wrapper .group .imagewrap .imagearea { position: absolute; opacity: 0; }
/* body #content #look_wrapper .group .imagewrap .imagearea img { width: 100%; margin: 0 0 10px; }
body #content #look_wrapper .group .imagewrap .credit { opacity: 0; } */

body #content #look_wrapper .group.group2 .imagewrap {
  margin: 0 10px 10px;  display: grid;
  grid-template-columns: calc(50% - 5px) 10px calc(50% - 5px);
  grid-template-rows: 25vw 44vw calc(25vw + 7vw);
}
body #content #look_wrapper .group.group2 .imagewrap .imagearea:nth-child(1) { grid-area: 1/1/3/2; }
body #content #look_wrapper .group.group2 .imagewrap .imagearea:nth-child(2) { grid-area: 2/3/4/4; }


body #content #look_wrapper .group3 .imagewrap {
  margin: 0 10px 10px; display: grid;
  grid-template-columns: calc(54% - 5px) 10px calc(46% - 5px);
  grid-template-rows: 33vw 23.4vw calc(14vw + 7vw);
}
body #content #look_wrapper .group3 .imagewrap .imagearea:nth-of-type(1) { grid-area: 2/1/4/2; }
body #content #look_wrapper .group3 .imagewrap .imagearea:nth-of-type(2) { grid-area: 1/3/3/4; }

body #content #look_wrapper .group.group4 .imagewrap {
  margin: 0 10px 10px;  display: grid;
  grid-template-columns: calc(50% - 5px) 10px calc(50% - 5px);
  grid-template-rows: 10vw 51.4vw calc(10vw + 7vw);
}
body #content #look_wrapper .group.group4 .imagewrap .imagearea:nth-child(1) { grid-area: 1/1/3/2; }
body #content #look_wrapper .group.group4 .imagewrap .imagearea:nth-child(2) { grid-area: 2/3/4/4; }


/* @media screen and (max-width: 768px) {
  body #content #look_wrapper :-moz-any(.double, .group) .credit { margin: 0 10px; }
  body #content #look_wrapper :-webkit-any(.double, .group) .credit { margin: 0 10px; }
  body #content #look_wrapper :is(.double, .group) .credit { margin: 0 10px; }
} */
body #content #look_wrapper :-moz-any(.double, .group) .imagearea { opacity: 0; }
body #content #look_wrapper :-webkit-any(.double, .group) .imagearea { opacity: 0; }
body #content #look_wrapper :is(.double, .group) .imagearea { opacity: 0; }
body #content #look_wrapper :-moz-any(.double, .group).is-show .imagearea { opacity: 1; transition: opacity .6s ease 0s; }
body #content #look_wrapper :-moz-any(.double, .group).is-show .imagearea:nth-child(2) { transition-delay: .4s; }
body #content #look_wrapper :-moz-any(.double, .group).is-show .imagearea:nth-child(3) { transition-delay: .8s; }
body #content #look_wrapper :-webkit-any(.double, .group).is-show .imagearea { opacity: 1; transition: opacity .6s ease 0s; }
body #content #look_wrapper :-webkit-any(.double, .group).is-show .imagearea:nth-child(2) { transition-delay: .4s; }
body #content #look_wrapper :-webkit-any(.double, .group).is-show .imagearea:nth-child(3) { transition-delay: .8s; }
body #content #look_wrapper :is(.double, .group).is-show .imagearea { opacity: 1; transition: opacity .6s ease 0s; }
body #content #look_wrapper :is(.double, .group).is-show .imagearea:nth-child(2) { transition-delay: .4s; }
body #content #look_wrapper :is(.double, .group).is-show .imagearea:nth-child(3) { transition-delay: .8s; }

body #content #look_wrapper .is-show .credit { opacity: 1; transition: opacity 1.2s ease .6s; }
body #content #look_wrapper :is(.double, .group).is-show .credit { opacity: 1; transition: opacity 1.2s ease .6s; }
body footer { border: none; }

body #content #top img { width: 100%; }
@media screen and (max-width: 768px) {
  /* body #content #top img { height: 100%; object-fit: cover; object-position: center; } */
  /* body #content #top img { object-fit: cover; object-position: center; } */
}
@media screen and (min-width: 769px) {
  body #content { padding: 226px 0 0; }
  body #content #top { width: 650px; margin: 0 auto; }
  body #content #lead { padding: 170px 0 100px; }
  body #content #lead h3 { font-size: 38px; }
  body #content #lead h2 { font-size: 15px; }
  body #content #look_wrapper .credit p { font-size: 11px; }
  body #content #look_wrapper .credit ul li { font-size: 13px; line-height: 1.8; }
  body #content #look_wrapper .credit.credit_staff .staff_role { white-space: nowrap; }
  body #content #look_wrapper .credit.credit_staff .staff_name { white-space: nowrap; }
  body #content #look_wrapper .single { width: 460px; margin: 0 auto 127px; }
  body #content #look_wrapper .single.wide { width: 650px; }
  body #content #look_wrapper .single.full { width: 100%; }
  /* body #content #look_wrapper .single .imagearea { margin: 0 0 15px; } */
  body #content #look_wrapper .double { margin: 0 auto 127px; }
  body #content #look_wrapper .double .imagewrap { margin: 0 auto 15px; display: flex; justify-content: space-between;}
  body #content #look_wrapper .double .imagewrap .imagearea { width: 335px; }
  body #content #look_wrapper .double .imagewrap .imagearea img { width: 100%;}

  body #content #look_wrapper .group.group2 { margin: 127px 0 127px; }
  body #content #look_wrapper .group.group2 .imagewrap {
    margin: 0 0 15px;
    display: grid;
    grid-template-columns: 330px 40px 330px;
    grid-template-rows: 175px 320px calc(175px + 25px);
  }

  body #content #look_wrapper .group3 { margin: 127px 0; }
  body #content #look_wrapper .group3 .imagewrap {
    margin: 0 auto 15px;
    display: grid;
    grid-template-columns: 375px 25px 300px;
    grid-template-rows: 230px 170px calc(115px + 25px);
  }

  body #content #look_wrapper .group.group4 { margin: 127px 0 127px; }
  body #content #look_wrapper .group.group4 .imagewrap {
    margin: 0 0 15px;
    display: grid;
    grid-template-columns: 330px 40px 330px;
    grid-template-rows: 75px 365px calc(75px + 25px);
  }

}

@media screen and (max-width: 385px) {
  body #content #look_wrapper .single.mia { margin-inline: 15px !important; }
  body #content #look_wrapper .credit.credit_staff .staff_role { width: 100%; justify-content: flex-start; }
  body #content #look_wrapper .credit.credit_staff .staff_name { width: 100%; justify-content: flex-end; margin-left: 0;}
}

/* --------------------------------------------------
Lb
-------------------------------------------------- */
body.lb-disable-scrolling { overflow: hidden !important; }

#lightboxOverlay { background: #fff; opacity: 1; z-index: 999; }

#lightbox { position: fixed; top: 0px !important; left: 0 !important; right: 0; bottom: 0; overflow: auto; z-index: 9999; }
#lightbox .lb-outerContainer { background: none; border-radius: 0; width: 100% !important; height: 100% !important; display: flex; align-items: center; justify-content: center; }
#lightbox .lb-outerContainer .lb-nav { display: none !important; }
#lightbox .lb-outerContainer .lb-closeContainer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
#lightbox .lb-outerContainer .lb-closeContainer a { display: block; height: 100%; }
#lightbox .lb-outerContainer .lb-container { padding: 0; margin: 0 52px; }
#lightbox .lb-outerContainer .lb-container .lb-image { border-radius: 0; margin: 0 auto 10px; width: 100% !important; height: auto !important; }
#lightbox .lb-dataContainer { padding: 0; width: 100% !important; }
#lightbox .lb-dataContainer .lb-data .lb-details { width: 100%; }
#lightbox .lb-dataContainer .lb-data .lb-details .lb-caption { text-align: left; font-family: "Roboto", "ヒラギノ角ゴ Pro W3", "メイリオ", "Hiragino Kaku Gothic Pro", Meiryo, Verdana, sans-serif; }
#lightbox .lb-dataContainer .lb-data .lb-details .lb-caption p { font-size: 8px; letter-spacing: .06em; font-weight: 300; line-height: 1; margin: 0 0 10px; }
#lightbox .lb-dataContainer .lb-data .lb-details .lb-caption ul li { font-size: 10px; letter-spacing: .06em; font-weight: 300; }
#lightbox .lb-dataContainer .lb-data .lb-details .lb-number { display: none !important; }

@media screen and (min-width: 769px) { #lightbox .lb-outerContainer .lb-container .lb-image { height: calc(100vh - 230px) !important; width: auto !important; margin: 0 auto 15px; }
  #lightbox .lb-dataContainer .lb-data { margin: 0; }
  #lightbox .lb-dataContainer .lb-data .lb-details { max-width: none; width: auto; }
  #lightbox .lb-dataContainer .lb-data .lb-details .lb-caption p { font-size: 11px; }
  #lightbox .lb-dataContainer .lb-data .lb-details .lb-caption ul li { font-size: 13px; }
}