@charset "UTF-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css");
html,
body {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: lighter;
  font-size: 62.5%;
  /* 10px / 16px * 100 */
  background-color: white;
  color: #232323;
}
@media screen and (max-width: 768px) {
  html,
  body {
    font-size: 2.666vw;
    /* 10px / 375px * 100 */
  }
}

body {
  height: 200%;
  left: 0px;
  top: 0px;
  margin: 0;
  overflow-x: hidden;
}

a:hover,
a:active,
a.active {
  color: rgb(113, 112, 112);
}

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

i {
  font-style: normal;
}

form,
section,
p,
div,
ul,
li,
dl,
dt,
dd,
a,
span,
input,
textarea {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  list-style: none;
}

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

a:hover {
  text-decoration: none;
}

.item-d-none {
  display: none;
}
.item-d-none a {
  pointer-events: none;
  display: none !important;
}

.swiper-container {
  position: relative;
  overflow: hidden;
}

.swiper-wrapper {
  height: -moz-fit-content;
  height: fit-content;
}

.swiper-slide {
  height: -moz-fit-content;
  height: fit-content;
  width: 100% !important;
}
.swiper-slide img {
  height: auto;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  /* アクティブでないスライドが邪魔しないように */
  transition-property: opacity;
}

.swiper-fade .swiper-slide-active {
  pointer-events: auto;
  opacity: 1 !important;
}

.js-inview {
  opacity: 0;
  transform: translate(0, 0px);
  transition: all 1s ease 0.4s;
}

.js-inview.is-inview {
  opacity: 1;
  transform: translate(0, 0);
}

/*-------------------------container-------------------------*/
#container .kvsec {
  width: 100%;
  margin-bottom: calc(48 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .kvsec {
    margin-bottom: calc(24 / 375 * 100vw);
  }
}
#container .kvsec-img {
  margin-bottom: calc(40 / 1280 * 100vw);
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
@media screen and (max-width: 768px) {
  #container .kvsec-img {
    margin-bottom: calc(20 / 375 * 100vw);
  }
}
#container .kvsec-img_1 {
  width: calc(700 / 1280 * 100vw);
  animation-delay: 0.2s;
}
@media screen and (max-width: 768px) {
  #container .kvsec-img_1 {
    width: calc(245 / 375 * 100vw);
  }
}
#container .kvsec-img_2 {
  width: calc(290 / 1280 * 100vw);
  animation-delay: 0.4s;
}
#container .kvsec-img_3 {
  width: calc(290 / 1280 * 100vw);
  animation-delay: 0.6s;
}
#container .kvsec-img_4 {
  width: calc(290 / 1280 * 100vw);
  animation-delay: 0.8s;
}
#container .kvsec-img_5 {
  width: calc(290 / 1280 * 100vw);
  animation-delay: 1s;
}
#container .kvsec-img_6 {
  width: calc(700 / 1280 * 100vw);
  animation-delay: 1.2s;
}
#container .kvsec-img_7 {
  display: none;
  animation-delay: 0.2s;
}
@media screen and (max-width: 768px) {
  #container .kvsec-img_7 {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  #container .kvsec-img_2 {
    width: calc(130 / 375 * 100vw);
  }
  #container .kvsec-img_3 {
    width: calc(130 / 375 * 100vw);
  }
  #container .kvsec-img_4 {
    width: calc(245 / 375 * 100vw);
  }
  #container .kvsec-img_5 {
    width: calc(103 / 375 * 100vw);
  }
  #container .kvsec-img_6 {
    width: calc(169 / 375 * 100vw);
  }
  #container .kvsec-img_7 {
    width: calc(103 / 375 * 100vw);
    animation-delay: 1.4s;
  }
}
#container .kvsec-ttl {
  width: calc(494 / 1280 * 100vw);
  margin: 0 auto;
  animation-delay: 1.4s;
}
@media screen and (max-width: 768px) {
  #container .kvsec-ttl {
    width: calc(355 / 375 * 100vw);
    animation-delay: 1.6s;
  }
}
#container .look {
  border-top: 1px solid #232323;
  padding: calc(120 / 1280 * 100vw) 0 calc(80 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .look {
    padding: calc(64 / 375 * 100vw) 0 calc(48 / 375 * 100vw);
  }
}
#container .look:nth-of-type(even) {
  background: #F5F5F2;
}
#container .look-inner {
  max-width: 1180px;
  margin: 0 auto;
}
#container .look.look01 .flex {
  align-items: center;
  justify-content: center;
  gap: min(110 / 1280 * 100vw, 110px);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #container .look.look01 .flex {
    width: calc(335 / 375 * 100vw);
    flex-direction: column;
    gap: calc(20 / 375 * 100vw);
  }
}
#container .look.look01 .flex .left {
  width: min(380 / 1280 * 100vw, 380px);
}
@media screen and (max-width: 768px) {
  #container .look.look01 .flex .left {
    width: calc(160 / 375 * 100vw);
    margin: 0 auto auto 0;
  }
}
#container .look.look01 .flex .right {
  width: min(510 / 1280 * 100vw, 510px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(10 / 1280 * 100vw, 10px);
}
@media screen and (max-width: 768px) {
  #container .look.look01 .flex .right {
    width: calc(256 / 375 * 100vw);
    gap: calc(5 / 375 * 100vw);
    margin: auto 0 auto auto;
  }
}
#container .look.look01 .flex .right div:nth-of-type(1), #container .look.look01 .flex .right div:nth-of-type(2) {
  width: min(250 / 1280 * 100vw, 250px);
}
@media screen and (max-width: 768px) {
  #container .look.look01 .flex .right div:nth-of-type(1), #container .look.look01 .flex .right div:nth-of-type(2) {
    width: calc(125 / 375 * 100vw);
  }
}
#container .look.look01 .flex .right div:nth-of-type(3) {
  width: min(510 / 1280 * 100vw, 510px);
}
@media screen and (max-width: 768px) {
  #container .look.look01 .flex .right div:nth-of-type(3) {
    width: 100%;
  }
}
#container .look.look02 .flex {
  justify-content: center;
}
#container .look.look02 .flex-1 {
  gap: min(60 / 1280 * 100vw, 60px);
  margin-bottom: calc(100 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .look.look02 .flex-1 {
    gap: calc(12 / 375 * 100vw);
    margin-bottom: calc(40 / 375 * 100vw);
  }
}
#container .look.look02 .flex-1 .left {
  width: min(550 / 1280 * 100vw, 550px);
  margin-top: calc(201 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .look.look02 .flex-1 .left {
    width: calc(215 / 375 * 100vw);
    margin-top: calc(80 / 375 * 100vw);
  }
}
#container .look.look02 .flex-1 .right {
  width: min(286 / 1280 * 100vw, 286px);
}
@media screen and (max-width: 768px) {
  #container .look.look02 .flex-1 .right {
    width: calc(108 / 375 * 100vw);
  }
}
#container .look.look02 .flex-2 {
  gap: min(10 / 1280 * 100vw, 10px);
}
@media screen and (max-width: 768px) {
  #container .look.look02 .flex-2 {
    gap: calc(5 / 375 * 100vw);
  }
}
#container .look.look02 .flex-2 .left {
  width: min(306 / 1280 * 100vw, 306px);
}
@media screen and (max-width: 768px) {
  #container .look.look02 .flex-2 .left {
    width: calc(114 / 375 * 100vw);
  }
}
#container .look.look02 .flex-2 .right {
  width: min(684 / 1280 * 100vw, 684px);
}
@media screen and (max-width: 768px) {
  #container .look.look02 .flex-2 .right {
    width: calc(256 / 375 * 100vw);
  }
}
#container .look.look03 .flex, #container .look.look04 .flex {
  justify-content: flex-start;
  gap: min(10 / 1280 * 100vw, 10px);
}
@media screen and (max-width: 768px) {
  #container .look.look03 .flex, #container .look.look04 .flex {
    gap: calc(5 / 375 * 100vw);
    width: calc(335 / 375 * 100vw);
    margin: 0 auto;
  }
}
#container .look .modal_thumb {
  width: min(287 / 1280 * 100vw, 287px);
}
@media screen and (max-width: 768px) {
  #container .look .modal_thumb {
    width: calc(165 / 375 * 100vw);
  }
}
#container .look .modal_thumb a {
  display: block;
  position: relative;
  overflow: hidden;
}
#container .look .modal_thumb a img.forHover {
  transition: scale 0.3s linear;
}
#container .look .modal_thumb a:hover img.forHover {
  scale: 1.1;
}
#container .look .modal_thumb a .plus {
  position: absolute;
  width: min(21 / 1280 * 100vw, 21px);
  right: 3%;
  bottom: 2%;
}
@media screen and (max-width: 768px) {
  #container .look .modal_thumb a .plus {
    width: calc(14 / 375 * 100vw);
  }
}
#container .lastWrap {
  border-top: 1px solid #232323;
  padding: calc(120 / 1280 * 100vw) 0 calc(20 / 1280 * 100vw);
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #container .lastWrap {
    padding: calc(80 / 375 * 100vw) 0 calc(20 / 375 * 100vw);
  }
}
#container .lastWrap .staff {
  font-size: calc(11 / 1280 * 100vw);
  text-align: center;
  line-height: 1.5;
  margin-bottom: calc(32 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .lastWrap .staff {
    font-size: calc(10 / 375 * 100vw);
    margin-bottom: calc(20 / 375 * 100vw);
  }
}
#container .lastWrap .offimg {
  width: min(550 / 1280 * 100vw, 550px);
  margin: 0 auto calc(80 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .lastWrap .offimg {
    width: 100%;
    margin: 0 auto calc(56 / 375 * 100vw);
  }
}
#container .lastWrap [class*=linkWrap] ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10 / 1280 * 100vw);
  font-size: calc(12 / 1280 * 100vw);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  #container .lastWrap [class*=linkWrap] ul {
    gap: calc(10 / 375 * 100vw);
    font-size: calc(11 / 375 * 100vw);
  }
}
#container .lastWrap [class*=linkWrap] ul li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
#container .lastWrap [class*=linkWrap] .logo {
  margin: 0 auto calc(24 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .lastWrap [class*=linkWrap] .logo {
    margin: 0 auto calc(20 / 375 * 100vw);
  }
}
#container .lastWrap .linkWrap-jsf {
  margin-bottom: calc(40 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .lastWrap .linkWrap-jsf {
    margin-bottom: calc(32 / 375 * 100vw);
  }
}
#container .lastWrap .linkWrap-jsf .logo {
  width: calc(180 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .lastWrap .linkWrap-jsf .logo {
    width: calc(160 / 375 * 100vw);
  }
}
#container .lastWrap .linkWrap-acme {
  margin-bottom: calc(48 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .lastWrap .linkWrap-acme {
    margin-bottom: calc(65 / 375 * 100vw);
  }
}
#container .lastWrap .linkWrap-acme .logo {
  width: calc(80 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .lastWrap .linkWrap-acme .logo {
    width: calc(63 / 375 * 100vw);
  }
}
#container .lastWrap .copyright {
  color: #a5a5a5;
  text-align: right;
  font-size: calc(10 / 1280 * 100vw);
  padding-right: calc(20 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .lastWrap .copyright {
    font-size: calc(9 / 375 * 100vw);
    text-align: center;
    padding-right: unset;
  }
}

.imgMain {
  width: 100%;
  margin-bottom: calc(80 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  .imgMain {
    margin-bottom: calc(24 / 375 * 100vw);
  }
}

div[class*=flex] {
  display: flex;
  flex-wrap: wrap;
}

.look-ttl {
  font-family: "Times New Roman", Times, serif;
  font-size: 400;
  margin: 0 auto calc(20 / 1280 * 100vw) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: calc(72 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  .look-ttl {
    flex-direction: column;
    gap: calc(5 / 375 * 100vw);
    align-items: flex-start;
    margin: 0 auto calc(10 / 375 * 100vw) calc(20 / 375 * 100vw);
  }
}
.look-ttl p:nth-of-type(1) {
  font-size: calc(26 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  .look-ttl p:nth-of-type(1) {
    font-size: calc(20 / 375 * 100vw);
  }
}
.look-ttl p:nth-of-type(2) {
  font-style: italic;
  color: #524D44;
  position: relative;
  font-size: calc(14 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  .look-ttl p:nth-of-type(2) {
    font-size: calc(13 / 375 * 100vw);
    padding-left: calc(30 / 375 * 100vw);
  }
}
.look-ttl p:nth-of-type(2)::before {
  display: block;
  content: "";
  position: absolute;
  width: calc(48 / 1280 * 100vw);
  height: 1px;
  background-color: #524D44;
  left: calc(-58 / 1280 * 100vw);
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .look-ttl p:nth-of-type(2)::before {
    left: calc(2 / 375 * 100vw);
    width: calc(24 / 375 * 100vw);
  }
}

.credit {
  width: min(1000 / 1280 * 100vw, 1000px);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: calc(8 / 1280 * 100vw);
  margin-top: calc(24 / 1280 * 100vw);
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(11 / 1280 * 100vw);
  text-align: right;
}
@media screen and (max-width: 768px) {
  .credit {
    width: calc(335 / 375 * 100vw);
    margin: calc(20 / 375 * 100vw) calc(20 / 375 * 100vw) auto auto;
    font-size: calc(10 / 375 * 100vw);
    gap: calc(8 / 375 * 100vw);
  }
}
.credit-each {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(10 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  .credit-each {
    gap: calc(13 / 375 * 100vw);
  }
}
.credit-each a {
  display: block;
  text-decoration: underline;
  font-weight: 500;
}

/*-------------------------modal-------------------------*/
section#modals {
  background-color: #FFF;
  width: 100%;
  height: 100vh;
  padding: 0 0 220px 0;
  margin: 0px;
  position: fixed;
  left: 0px;
  top: -100vh;
  z-index: 999;
  overflow: scroll;
  opacity: 0;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}
@media (max-width: 768px) {
  section#modals {
    padding: 0 0 60px 0;
    box-sizing: border-box;
  }
}
section#modals.active {
  top: 0px;
  pointer-events: all;
}
@media (max-width: 768px) {
  section#modals.active {
    pointer-events: visible;
  }
}
section#modals .close {
  z-index: 9999;
  width: calc(37.5 / 1280 * 100vw);
  height: calc(37.5 / 1280 * 100vw);
  position: fixed;
  top: calc(66 / 1280 * 100vw);
  right: calc(66 / 1280 * 100vw);
  cursor: pointer;
}
@media (max-width: 768px) {
  section#modals .close {
    width: calc(37 / 375 * 100vw);
    height: calc(37 / 375 * 100vw);
    top: calc(18 / 375 * 100vw);
    right: calc(18 / 375 * 100vw);
  }
}
section#modals .modal {
  border-top: 1px solid #232323;
  padding: calc(120 / 1280 * 100vw) 0 calc(80 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  section#modals .modal {
    padding: calc(64 / 375 * 100vw) 0 calc(48 / 375 * 100vw);
  }
}
section#modals .modal:nth-of-type(even) {
  background: #F5F5F2;
}
section#modals .modal .credit {
  margin-top: calc(40 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  section#modals .modal .credit {
    margin-top: calc(20 / 375 * 100vw);
  }
}
section#modals .modal .look-ttl {
  width: min(1000 / 1280 * 100vw, 1000px);
  margin: 0 auto calc(20 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  section#modals .modal .look-ttl {
    width: calc(335 / 375 * 100vw);
    margin: 0 auto calc(10 / 375 * 100vw) calc(20 / 375 * 100vw);
  }
}
section#modals .modal .imgMain {
  width: min(1000 / 1280 * 100vw, 1000px);
  margin: 0 auto calc(80 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  section#modals .modal .imgMain {
    width: 100%;
    margin: 0 auto calc(24 / 375 * 100vw);
  }
}
section#modals .modal .imgSub {
  width: min(680 / 1280 * 100vw, 680px);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  section#modals .modal .imgSub {
    width: calc(305 / 375 * 100vw);
  }
}
section#modals .modal .flex-A {
  justify-self: center;
  gap: min(10 / 1280 * 100vw, 10px);
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  section#modals .modal .flex-A {
    gap: calc(5 / 375 * 100vw);
  }
}
section#modals .modal .flex-A div {
  width: min(400 / 1280 * 100vw, 400px);
}
@media screen and (max-width: 768px) {
  section#modals .modal .flex-A div {
    width: calc(165 / 375 * 100vw);
  }
}
section#modals .modal .flex-B {
  width: min(872 / 1280 * 100vw, 872px);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  section#modals .modal .flex-B {
    width: calc(355 / 375 * 100vw);
  }
}
section#modals .modal .flex-B div {
  width: min(560 / 1280 * 100vw, 560px);
}
@media screen and (max-width: 768px) {
  section#modals .modal .flex-B div {
    width: calc(215 / 375 * 100vw);
  }
}
section#modals .modal .flex-B div:last-of-type {
  margin: calc(40 / 1280 * 100vw) 0 auto auto;
}
@media screen and (max-width: 768px) {
  section#modals .modal .flex-B div:last-of-type {
    margin: calc(10 / 375 * 100vw) 0 auto auto;
  }
}
section#modals .modal .flex-C {
  justify-content: center;
  gap: min(40 / 1280 * 100vw, 40px);
}
@media screen and (max-width: 768px) {
  section#modals .modal .flex-C {
    gap: calc(10 / 375 * 100vw);
  }
}
section#modals .modal .flex-C .left {
  width: min(512 / 1280 * 100vw, 512px);
  margin-top: calc(260 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  section#modals .modal .flex-C .left {
    width: calc(202 / 375 * 100vw);
    margin-top: calc(100 / 375 * 100vw);
  }
}
section#modals .modal .flex-C .right {
  width: min(320 / 1280 * 100vw, 320px);
}
@media screen and (max-width: 768px) {
  section#modals .modal .flex-C .right {
    width: calc(123 / 375 * 100vw);
  }
}
section#modals .modal .flex-D {
  justify-content: center;
  gap: min(102 / 1280 * 100vw, 102px);
}
@media screen and (max-width: 768px) {
  section#modals .modal .flex-D {
    gap: calc(30 / 375 * 100vw);
  }
}
section#modals .modal .flex-D div:first-of-type {
  width: min(350 / 1280 * 100vw, 350px);
}
@media screen and (max-width: 768px) {
  section#modals .modal .flex-D div:first-of-type {
    width: calc(140 / 375 * 100vw);
  }
}
section#modals .modal .flex-D div:last-of-type {
  width: min(420 / 1280 * 100vw, 420px);
  margin-top: calc(156 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  section#modals .modal .flex-D div:last-of-type {
    width: calc(165 / 375 * 100vw);
    margin-top: calc(60 / 375 * 100vw);
  }
}/*# sourceMappingURL=style.css.map */