@charset "UTF-8";

/* ========================================
	Founfation (id推奨)
========================================= */

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
  font-family: "Helvetica","Arial",YuGothic,"Yu Gothic","Yu Gothic UI",sans-serif;
  color: #171c61;
  letter-spacing: .05em;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

picture {
  display: block;
  width: 100%;
  height: auto;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a,
button {
  -webkit-transition: .3s;
  transition: .3s;
  cursor: pointer;
}

a:hover,
button:hover {
  opacity: .6;
}

/* ========================================
	Layout (id推奨)
	命名規則: #id-
========================================= */

/* ========================================
	Project(コンテンツを構成する具体的な要素)
	命名規則: .p-
========================================= */

/*----- TOP FVカスタマイズ -----*/

.l-fv {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
}

.p-fv__img {
  width: 100%;
  height: auto;
}

.p-fv__string {
  position: absolute;
  bottom: 0;
  left: 3.0625rem;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  font-size: 7.5rem;
  font-weight: 400;
  color: #171c61;
  letter-spacing: -.045em;
}

/*----- TOP ABOUTカスタマイズ -----*/

.l-about {
  width: 100%;
  height: auto;
  padding: 19.875rem 0 7.5rem;
  background-color: #ebebe7;
}

.p-about__sliders {
  width: 100%;
  height: auto;
}

.p-about__slider:nth-child(odd) {
  padding-right: 3.75rem;
}

.p-about__slider__text {
  height: 10rem;
}

.p-about__slider__text img {
  width: auto;
  height: 100%;
}

.p-about__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 30rem;
  margin: 14.375rem auto 0;
  padding: 0 .9375rem;
  font-size: .875rem;
  color: #00223c;
  line-height: 1.7;
  white-space: nowrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-font-feature-settings: initial;
  font-feature-settings: initial;
  text-orientation: upright;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.p-about__text span {
  text-combine-upright: all;
}

.p-about__collage {
  display: block;
  width: 95%;
  max-width: 1200px;
  height: auto;
  margin: 12rem auto 0;
  text-decoration: none;
  text-align: center;
}

.p-about__collage:hover {
  opacity: 1;
}

.p-about__collage__text {
  font-size: .875rem;
  font-weight: 700;
  color: #171c61;
  line-height: 1;
}

.p-about__collage__icon {
  width: .875rem;
  height: auto;
  margin: 1.625rem auto 0;
}

.p-about__collage__moviebox {
  width: 100%;
  height: auto;
  margin: 1.875rem auto 0;
}

.p-about__collage__movie {
  width: 100%;
  height: auto;
}

/*----- TOP ITEMSカスタマイズ -----*/

.l-items {
  width: 100%;
  height: auto;
  padding: 8.125rem 0 12.125rem;
}

.p-items__sliders {
  width: 100%;
  height: auto;
}

.p-items__slider:nth-child(odd) {
  padding-right: 3.75rem;
}

.p-items__slider__text {
  height: 10rem;
}

.p-items__slider__text img {
  width: auto;
  height: 100%;
}

.p-items__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 9.375rem auto 0;
  padding: 0 15px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 12.25rem;
}

.p-items__boxes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  height: auto;
  gap: 15px;
}

.p-items__boxes.c-flexend {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.p-items__box {
  width: calc( 100% / 3 - 15px * 2 / 3);
  height: auto;
}

.p-items__box.c-grouped {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  gap: 15px;
}

.p-items__box.c-grouped .p-items__box {
  width: calc( 100% / 2 - 15px / 2);
}

.p-items__box.c-double {
  width: calc(100% / 3 * 2 - 30px / 3 / 2);
}

.p-items__box__img {
  width: 100%;
  height: auto;
}

.p-items__box__pricelist {
  width: 100%;
  height: auto;
  margin: .625rem auto 0;
}

.p-items__box__pricelistitem {
  font-size: .75rem;
  font-weight: 300;
  color: #171c61;
  line-height: calc( 20 / 12);
}

.p-items__box__pricelistitem a {
  text-decoration: none;
  font-size: .75rem;
  font-weight: 300;
  color: #171c61;
  line-height: calc( 20 / 12);
}

/*----- カスタマイズ -----*/

.p-collage__body {
  background-color: #ebebe7;
}

#p-collage__layer {
  width: 100vw;
  max-width: 2400px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  -ms-overflow-style: none;
  pointer-events: all !important;
  scrollbar-width: none;
}

#p-collage__layer::-webkit-scrollbar {
  display: none;
}

.p-collage__img {
  position: relative;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.p-collage__img>img {
  position: relative;
  z-index: 1;
  width: 120%;
  height: auto;
}

.p-collage__img a {
  position: absolute;
  z-index: 2;
}

.p-collage__img a:nth-of-type(1) {
  top: 2%;
  left: 8%;
  width: 18.4%;
  aspect-ratio: 448 / 615;
}

.p-collage__img a:nth-of-type(2) {
  top: 1.5%;
  left: 30.3%;
  width: 10.6%;
  aspect-ratio: 258 / 346;
}

.p-collage__img a:nth-of-type(3) {
  top: 1.5%;
  left: 40.8%;
  width: 10.6%;
  aspect-ratio: 258 / 346;
}

.p-collage__img a:nth-of-type(4) {
  top: 1%;
  left: 52%;
  width: 12.5%;
  aspect-ratio: 308 / 410;
}

.p-collage__img a:nth-of-type(5) {
  top: .8%;
  left: 64.5%;
  width: 12.5%;
  aspect-ratio: 308 / 411;
}

.p-collage__img a:nth-of-type(6) {
  top: 10.6%;
  left: 77.7%;
  width: 15.6%;
  aspect-ratio: 384 / 513;
}

.p-collage__img a:nth-of-type(7) {
  top: 10.6%;
  left: 93.25%;
  width: 15.6%;
  aspect-ratio: 384 / 513;
}

.p-collage__img a:nth-of-type(8) {
  top: 24.8%;
  left: -10%;
  width: 12%;
  aspect-ratio: 296 / 343;
}

.p-collage__img a:nth-of-type(9) {
  top: 23.1%;
  left: 27%;
  width: 26.25%;
  aspect-ratio: 647 / 485;
}

.p-collage__img a:nth-of-type(10) {
  top: 27.4%;
  left: 59.4%;
  width: 13.65%;
  aspect-ratio: 329 / 247;
}

.p-collage__img a:nth-of-type(11) {
  top: 45.3%;
  left: -9.9%;
  width: 17%;
  aspect-ratio: 418 / 559;
}

.p-collage__img a:nth-of-type(12) {
  top: 42%;
  left: 8%;
  width: 22.7%;
  aspect-ratio: 557 / 419;
}

.p-collage__img a:nth-of-type(13) {
  top: 67.6%;
  left: 8%;
  width: 15.1%;
  aspect-ratio: 375 / 282;
}

.p-collage__img a:nth-of-type(14) {
  top: 67.45%;
  left: 23.1%;
  width: 7.5%;
  aspect-ratio: 183 / 239;
}

.p-collage__img a:nth-of-type(15) {
  top: 53%;
  left: 31.2%;
  width: 13.7%;
  aspect-ratio: 333 / 250;
}

.p-collage__img a:nth-of-type(16) {
  top: 53%;
  left: 45.1%;
  width: 7.7%;
  aspect-ratio: 187 / 250;
}

.p-collage__img a:nth-of-type(17) {
  top: 68.9%;
  left: 31.1%;
  width: 7.4%;
  aspect-ratio: 180 / 240;
}

.p-collage__img a:nth-of-type(18) {
  top: 68.9%;
  left: 38.9%;
  width: 13.8%;
  aspect-ratio: 341 / 256;
}

.p-collage__img a:nth-of-type(19) {
  top: 84.5%;
  left: 38.9%;
  width: 13.8%;
  aspect-ratio: 342 / 257;
}

.p-collage__img a:nth-of-type(20) {
  top: 44.6%;
  left: 55%;
  width: 14.3%;
  aspect-ratio: 349 / 465;
}

.p-collage__img a:nth-of-type(20) {
  top: 44.6%;
  left: 55%;
  width: 14.3%;
  aspect-ratio: 349 / 465;
}

.p-collage__img a:nth-of-type(21) {
  top: 44.7%;
  left: 75%;
  width: 7.9%;
  aspect-ratio: 195 / 260;
}

.p-collage__img a:nth-of-type(22) {
  top: 44.8%;
  left: 83.6%;
  width: 7.9%;
  aspect-ratio: 195 / 260;
}

.p-collage__img a:nth-of-type(23) {
  top: 61.3%;
  left: 75%;
  width: 5.1%;
  aspect-ratio: 126 / 169;
}

.p-collage__img a:nth-of-type(24) {
  top: 61.3%;
  left: 80.3%;
  width: 5.2%;
  aspect-ratio: 127 / 168;
}

.p-collage__img a:nth-of-type(25) {
  top: 54.1%;
  left: 92.3%;
  width: 8.6%;
  aspect-ratio: 210 / 280;
}

.p-collage__img a:nth-of-type(26) {
  top: 54.3%;
  left: 100.9%;
  width: 8.6%;
  aspect-ratio: 212 / 282;
}

.p-collage__img a:nth-of-type(27) {
  top: 74.4%;
  left: 69.3%;
  width: 13.1%;
  aspect-ratio: 323 / 242;
}

.p-collage__img a:nth-of-type(28) {
  top: 74.4%;
  left: 83%;
  width: 13.1%;
  aspect-ratio: 321 / 240;
}

.p-collage__img a:hover {
  opacity: 1;
}

.lightboxOverlay {
  max-width: 100vw;
  background: #fff;
}

.lightbox {
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.lb-prev,
.lb-next {
  position: absolute;
  bottom: -1.25rem;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  width: 10px;
  height: 20px;
}

.lb-next {
  right: 0;
  background: url(../img/icon-lightbox_next.svg) 50% 50% no-repeat;
  background-size: cover;
}

.lb-prev {
  right: 3rem;
  background: url(../img/icon-lightbox_prev.svg) 50% 50% no-repeat;
  background-size: cover;
}

.lightboxOverlay {
  opacity: 1;
}

/*----- カスタマイズ -----*/

/*----- カスタマイズ -----*/

@media screen and (max-width: 768px) {
  html {
    font-size: 100%;
  }

  .p-fv__string {
    left: .9375rem;
    font-size: 3.4375rem;
  }

  .l-about {
    padding: 12.5rem 0 12.1875rem;
  }

  .p-about__slider:nth-child(odd) {
    padding-right: 1.875rem;
  }

  .p-about__slider__text {
    font-size: 4.0625rem;
  }

  .p-about__text {
    width: 17.875rem;
    margin: 11.875rem auto 0;
    font-size: .6875rem;
    line-height: 1.15;
  }

  .p-about__collage {
    width: 100%;
    margin: 12.125rem auto 0;
  }

  .p-about__collage__text {
    font-size: .625rem;
  }

  .p-about__collage__icon {
    width: .375rem;
    margin: .75rem auto 0;
  }

  .p-about__collage__moviebox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 1rem auto 0;
  }

  .p-about__collage__movie {
    width: 160%;
  }

  .l-items {
    padding: 8.3125rem 0 9.125rem;
  }

  .p-items__slider:nth-child(odd) {
    padding-right: 1.875rem;
  }

  .p-items__slider__text {
    font-size: 4.0625rem;
  }

  .p-items__wrapper {
    margin: 8.4375rem auto 0;
    gap: 5.9375rem;
  }

  .p-items__boxes {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 5.9375rem;
  }

  .p-items__box {
    width: 100%;
  }

  .p-items__box.c-grouped {
    gap: 10px;
  }

  .p-items__box.c-grouped .p-items__box {
    width: calc( 100% / 2 - 10px / 2);
  }

  .p-items__box.c-double {
    width: 100%;
  }

  .p-items__box.u-sp_right {
    width: calc( 100% / 2 - 10px / 2);
    margin-left: auto;
  }

  .p-items__box.u-sp_left {
    width: calc( 100% / 2 - 10px / 2);
    margin-right: auto;
  }

  .p-items__box__pricelistitem {
    line-height: calc( 42 / 24);
    letter-spacing: 0;
  }

  .p-items__box__pricelistitem a {
    line-height: calc( 42 / 24);
    letter-spacing: 0;
  }

  #p-collage__layer {
    overflow: scroll;
  }

  .p-collage__img {
    display: block !important;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: 130vh;
  }

  .p-collage__img>img {
    width: auto;
    height: 100%;
  }

  .p-collage__img a:nth-of-type(1) {
    top: 2%;
    left: 15%;
    width: 15.4%;
  }

  .p-collage__img a:nth-of-type(2) {
    top: 1.7%;
    left: 33.5%;
    width: 8.8%;
  }

  .p-collage__img a:nth-of-type(3) {
    top: 1.7%;
    left: 42.3%;
    width: 8.8%;
  }

  .p-collage__img a:nth-of-type(4) {
    top: 1.1%;
    left: 51.8%;
    width: 10.28%;
  }

  .p-collage__img a:nth-of-type(5) {
    left: 62.1%;
    width: 10.4%;
  }

  .p-collage__img a:nth-of-type(6) {
    top: 10.7%;
    left: 73.1%;
    width: 12.9%;
  }

  .p-collage__img a:nth-of-type(7) {
    top: 10.6%;
    left: 86%;
    width: 13%;
  }

  .p-collage__img a:nth-of-type(8) {
    top: 24.7%;
    left: 0;
    width: 10.1%;
  }

  .p-collage__img a:nth-of-type(9) {
    top: 23.1%;
    left: 30.9%;
    width: 21.8%;
  }

  .p-collage__img a:nth-of-type(10) {
    top: 27.4%;
    left: 57.5%;
    width: 11.35%;
  }

  .p-collage__img a:nth-of-type(11) {
    top: 45.4%;
    left: 0;
    width: 14.2%;
  }

  .p-collage__img a:nth-of-type(12) {
    top: 42.1%;
    left: 15%;
    width: 19%;
  }

  .p-collage__img a:nth-of-type(13) {
    top: 67.6%;
    left: 15%;
    width: 12.5%;
  }

  .p-collage__img a:nth-of-type(14) {
    top: 67.6%;
    left: 27.7%;
    width: 6.2%;
  }

  .p-collage__img a:nth-of-type(15) {
    top: 53%;
    left: 34.3%;
    width: 11.3%;
  }

  .p-collage__img a:nth-of-type(16) {
    top: 53%;
    left: 46%;
    width: 6.3%;
  }

  .p-collage__img a:nth-of-type(17) {
    top: 69%;
    left: 34.3%;
    width: 6.1%;
  }

  .p-collage__img a:nth-of-type(18) {
    top: 69%;
    left: 40.8%;
    width: 11.4%;
  }

  .p-collage__img a:nth-of-type(19) {
    top: 84.6%;
    left: 40.8%;
    width: 11.4%;
  }

  .p-collage__img a:nth-of-type(20) {
    top: 44.6%;
    left: 54.1%;
    width: 11.96%;
  }

  .p-collage__img a:nth-of-type(20) {
    top: 44.6%;
    left: 54.1%;
    width: 11.96%;
  }

  .p-collage__img a:nth-of-type(21) {
    top: 44.7%;
    left: 70.8%;
    width: 6.7%;
  }

  .p-collage__img a:nth-of-type(22) {
    top: 44.7%;
    left: 77.8%;
    width: 6.7%;
  }

  .p-collage__img a:nth-of-type(23) {
    top: 61.2%;
    left: 70.8%;
    width: 4.3%;
  }

  .p-collage__img a:nth-of-type(24) {
    top: 61.2%;
    left: 75.2%;
    width: 4.3%;
  }

  .p-collage__img a:nth-of-type(25) {
    top: 54.2%;
    left: 85.3%;
    width: 7.1%;
  }

  .p-collage__img a:nth-of-type(26) {
    top: 54.2%;
    left: 92.4%;
    width: 7.1%;
  }

  .p-collage__img a:nth-of-type(27) {
    top: 74.4%;
    left: 66.1%;
    width: 10.9%;
  }

  .p-collage__img a:nth-of-type(28) {
    top: 74.4%;
    left: 77.5%;
    width: 10.9%;
  }

  .lb-prev,
  .lb-next {
    bottom: -1rem;
  }

  .lb-prev {
    right: 3.3125rem;
  }
}

@media screen and (max-width: 360px) {
  html {
    font-size: 90%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
  html {
    font-size: 100%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1300px) {
  html {
    font-size: 100%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  html {
    font-size: 100%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
  html {
    font-size: 95%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  html {
    font-size: 90%;
  }
}

@media screen and (min-width: 769px) and (max-width: 900px) {
  html {
    font-size: 85%;
  }
}

@media screen and (min-width: 769px) and (max-width: 800px) {
  html {
    font-size: 80%;
  }
}

@media screen and (min-width: 421px) and (max-width: 768px) {
  html {
    font-size: 100%;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  html {
    font-size: 110%;
  }
}

@media screen and (min-width: 601px) and (max-width: 768px) {
  html {
    font-size: 120%;
  }
}