@charset "UTF-8";
.fr-page {
  --pc-width: 1400;
  --sp-width: 750;
  --pc-artboard-width: 400;
  --sp-artboard-width: 750;
  --formula: calc(var(--variable) * var(--ratio));
  --formula_pc: calc(var(--variable) * 1);
}
@media (max-width: 767px) {
  .fr-page {
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width));
  }
}
@media (min-width: 1400px) {
  .fr-page {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: 1px;
  }
}
@media (min-width: 768px) {
  .fr-page {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: calc(100vw / var(--pc-width));
  }
}
@media (max-width: 767px) {
  .fr-page {
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width));
  }
}

.fr-page {
  --font-ogg: ogg, sans-serif;
  --font-century: century-gothic, sans-serif;
  --font-ja: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
}

.fr-page {
  font-feature-settings: "palt";
}
.fr-page * {
  box-sizing: border-box;
}
.fr-page img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.fr-page picture,
.fr-page img {
  display: block;
}
.fr-page button {
  cursor: pointer;
  appearance: none;
  background-color: unset;
}

@media (min-width: 768px) {
  .fr-main-layout {
    display: grid;
  }
}
@media (min-width: 768px) {
  .fr-main-layout--col-2 {
    grid-template-columns: 1fr 1fr;
  }
}
.fr-main-layout--col-3 {
  grid-template-columns: 1fr calc(var(--sp-artboard-width) * var(--formula)) 1fr;
}
@media (min-width: 768px) {
  .fr-main-layout--col-3 {
    grid-template-columns: 1fr calc(var(--pc-artboard-width) * var(--formula_pc)) 1fr;
  }
}
.fr-main-layout__primary {
  overflow-x: clip !important;
}
@media (min-width: 768px) {
  .fr-main-layout__sub--sticky {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    overflow: hidden;
    position: sticky;
    left: 0;
    top: 0;
  }
}

.fr-inner {
  width: calc(var(--sp-artboard-width) * var(--formula));
  margin-inline: auto;
}
@media (min-width: 768px) {
  .fr-inner {
    width: calc(var(--pc-artboard-width) * var(--formula_pc));
  }
}

.fr-ani-fade {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1.1s ease-in-out, visibility 1.1s ease-in-out;
}
.fr-ani-fade.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 1.1s ease-in-out, visibility 1.1s ease-in-out;
}

.fr-page {
  font-family: var(--font-ja);
  font-weight: 400;
  font-style: normal;
  color: #000;
}
@media (min-width: 768px) {
  .fr-page {
    --header-container-height: 120px;
  }
}

@media (min-width: 768px) {
  .fr-main-layout__sub {
    position: sticky;
    top: var(--header-container-height);
    width: auto;
    height: calc(100vh - (var(--header-container-height, 0px)));
    overflow: hidden;
    display: flex;
    align-items: center;
  }
}
@media (min-width: 768px) {
  .fr-main-layout__sub .fr-mv {
    height: 100%;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .fr-main-layout__sub .fr-mv__container {
    height: 100%;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .fr-main-layout__sub .fr-mv__image {
    height: 100%;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .fr-main-layout__sub .fr-mv__image a {
    height: 100%;
    width: 100%;
    display: block;
  }
}
@media (min-width: 768px) {
  .fr-main-layout__sub .fr-mv__image a picture {
    height: 100%;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .fr-main-layout__sub .fr-mv__image a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% top;
  }
}
.fr-main-layout__primary {
  padding-bottom: calc(153 * var(--formula));
}

.fr-mv__image {
  position: relative;
}
.fr-mv__on-title {
  position: absolute;
  top: 48.9%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 768px) {
  .fr-mv__on-title {
    top: 49.3%;
  }
}
.fr-mv__on-title img {
  width: calc(695 * var(--formula));
  margin-inline: auto;
}
@media (min-width: 768px) {
  .fr-mv__on-title img {
    width: calc(582 * var(--formula_pc));
  }
}

.fr-image {
  position: relative;
}
.fr-image__decoration {
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.fr-image__image {
  width: calc(690 * var(--formula));
  margin-inline: auto;
  position: relative;
}
.fr-image__image .fr-item-credit {
  position: absolute;
  z-index: 1;
  width: fit-content;
  height: fit-content;
  right: calc(29 * var(--formula));
  bottom: calc(27 * var(--formula));
  text-align: right;
}
.fr-image__title, .fr-image__on-title {
  font-family: var(--font-ogg);
  font-size: calc(44 * var(--formula));
  line-height: 1.0909090909;
  letter-spacing: 0.04em;
  font-weight: 400;
}
.fr-image__text, .fr-image__on-text {
  font-family: var(--font-century);
  font-size: calc(20 * var(--formula));
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: 400;
}
.fr-image__title {
  pointer-events: none;
}
.fr-image__on-title {
  position: absolute;
  pointer-events: none;
}
.fr-image__text {
  pointer-events: none;
}
.fr-image__on-text {
  position: absolute;
  pointer-events: none;
}
.fr-image .fr-item-credit {
  font-family: var(--font-century);
  font-weight: 400;
  font-size: calc(20 * var(--formula));
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.fr-look--intro .fr-look__container {
  padding-block: calc(110 * var(--formula)) calc(110 * var(--formula));
}
.fr-look--intro .fr-text {
  font-size: calc(26 * var(--formula));
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.025em;
  text-align: center;
  font-family: var(--font-ja);
}

.fr-look--01 {
  margin-top: calc(34 * var(--formula));
}
.fr-look--01 .fr-image--01 .fr-image__decoration {
  width: calc(750 * var(--formula));
  height: calc(1150 * var(--formula));
  background-color: #fffbeb;
  top: calc(520 * var(--formula));
  left: 0;
}
.fr-look--01 .fr-image--01 .fr-image__image {
  width: calc(690 * var(--formula));
  margin-inline: auto;
}
.fr-look--01 .fr-image--01 .fr-image__title {
  width: calc(690 * var(--formula));
  margin-inline: auto;
  margin-top: calc(59 * var(--formula));
}
.fr-look--01 .fr-image--01 .fr-image__text {
  width: calc(690 * var(--formula));
  margin-inline: auto;
  margin-top: calc(22 * var(--formula));
}
.fr-look--01 .fr-image--01 .fr-image .fr-item-credit {
  bottom: calc(25 * var(--formula));
}
.fr-look--01 .fr-image--02 {
  margin-top: calc(54 * var(--formula));
}
.fr-look--01 .fr-image--02 .fr-image__image {
  width: calc(510 * var(--formula));
  margin-inline: auto 0;
}
.fr-look--02 {
  margin-top: calc(160 * var(--formula));
}
.fr-look--02 .fr-image--01 .fr-image__decoration {
  width: calc(750 * var(--formula));
  height: calc(1540 * var(--formula));
  background-color: #f3fbff;
  top: calc(200 * var(--formula));
  left: 0;
}
.fr-look--02 .fr-image--01 .fr-image__image {
  width: calc(560 * var(--formula));
  margin-inline: 0 auto;
}
.fr-look--02 .fr-image--01 .fr-image__on-title {
  left: calc(720 * var(--formula));
  top: calc(0 * var(--formula));
  transform: rotate(90deg) translate(0, 0%);
  transform-origin: left top;
  width: 100%;
}
.fr-look--02 .fr-image--01 .fr-image__on-text {
  left: calc(646 * var(--formula));
  top: calc(0 * var(--formula));
  transform: rotate(90deg) translate(0, 0%);
  transform-origin: left top;
  width: 100%;
  line-height: 1.5;
}
.fr-look--02 .fr-image--02 {
  margin-top: calc(49 * var(--formula));
}
.fr-look--02 .fr-image--02 .fr-image__image {
  width: calc(700 * var(--formula));
  margin-inline: auto 0;
}
.fr-look--02 .fr-image--02 .fr-image__image .fr-item-credit {
  bottom: calc(24 * var(--formula));
}
.fr-look--03 {
  margin-top: calc(160 * var(--formula));
}
.fr-look--03 .fr-image--01 .fr-image__decoration {
  width: calc(220 * var(--formula));
  height: calc(1418 * var(--formula));
  background-color: #f3fbff;
  top: calc(520 * var(--formula));
  right: 0;
  left: unset;
}
.fr-look--03 .fr-image--01 .fr-image__main {
  margin-top: calc(57 * var(--formula));
}
.fr-look--03 .fr-image--01 .fr-image__main .fr-item-credit {
  text-align: right;
  width: calc(690 * var(--formula));
  margin-inline: auto;
  margin-top: calc(22 * var(--formula));
}
.fr-look--03 .fr-image--01 .fr-image__main .fr-item-credit__item {
  display: inline-block;
  margin-left: calc(13 * var(--formula));
}
.fr-look--03 .fr-image--01 .fr-image__image {
  width: calc(750 * var(--formula));
  margin-inline: auto;
}
.fr-look--03 .fr-image--01 .fr-image__title {
  width: calc(690 * var(--formula));
  margin-inline: auto;
}
.fr-look--03 .fr-image--01 .fr-image__text {
  width: calc(690 * var(--formula));
  margin-inline: auto;
  font-size: calc(20 * var(--formula));
  line-height: 1.5;
  margin-top: calc(29 * var(--formula));
  left: calc(1.5 * var(--formula));
  position: relative;
}
.fr-look--03 .fr-image--02 {
  margin-top: calc(153 * var(--formula));
}
.fr-look--03 .fr-image--02 .fr-image__image {
  width: calc(570 * var(--formula));
  margin-inline: auto;
}
.fr-look--04 {
  margin-top: calc(232 * var(--formula));
}
.fr-look--04 .fr-image--01 .fr-image__decoration {
  width: calc(540 * var(--formula));
  height: calc(964 * var(--formula));
  background-color: #fffbeb;
  top: calc(-71 * var(--formula));
  left: 0;
}
.fr-look--04 .fr-image--01 .fr-image__main {
  margin-top: calc(-65 * var(--formula));
}
.fr-look--04 .fr-image--01 .fr-image__image {
  width: calc(600 * var(--formula));
  margin-inline: auto 0;
}
.fr-look--04 .fr-image--01 .fr-image__title {
  width: calc(690 * var(--formula));
  margin-inline: auto;
  line-height: 1.5;
}
.fr-look--04 .fr-image--01 .fr-image__text {
  width: calc(690 * var(--formula));
  margin-inline: auto;
  margin-top: calc(16 * var(--formula));
  line-height: 1.5;
  z-index: 1;
  position: relative;
}
.fr-look--04 .fr-image--02 {
  margin-top: calc(50 * var(--formula));
}
.fr-look--04 .fr-image--02 .fr-image__image {
  width: calc(750 * var(--formula));
  margin-inline: auto;
}
.fr-look--04 .fr-image--02 .fr-image__image .fr-item-credit {
  right: unset;
  left: calc(30 * var(--formula));
  bottom: calc(25 * var(--formula));
  text-align: left;
}
.fr-look--foot {
  margin-top: calc(160 * var(--formula));
}
.fr-look--foot .fr-button {
  font-family: var(--font-ogg);
  width: fit-content;
  margin-inline: auto;
  display: block;
  font-size: calc(60 * var(--formula));
  line-height: 1.1;
  letter-spacing: 0.04em;
  font-weight: 400;
  text-align: center;
  position: relative;
  padding-bottom: calc(23 * var(--formula));
}
.fr-look--foot .fr-button::after {
  content: "";
  display: block;
  height: max(1 * var(--formula), 1px);
  width: calc(100 * var(--formula));
  background-color: #000;
  bottom: calc(0 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}
.fr-look--foot .fr-staff-credit {
  text-align: center;
  font-family: var(--font-century);
  font-size: calc(20 * var(--formula));
  line-height: 1.75;
  letter-spacing: 0.04em;
  font-weight: 400;
  margin-top: calc(151 * var(--formula));
}/*# sourceMappingURL=style.css.map */