@charset "UTF-8";
/* ==========================================
   ■ 設定値（ここだけ触ればOK）
   ========================================== */
html {
  scroll-behavior: smooth;
}

:root {
  --limitSizeNum: 100vw;
  --spSize: 750;
  --pcSize: 1400;
  --spSizeInPc: 500;
}

.f-container {
  --pc-width: 1400; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 500; /*SP共通デザイン幅*/
  --sp-artboard-width: 750; /*PC共通デザイン幅*/
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1400以上は固定*/
}

/* PC画面幅 768～1400px 可変 */
html {
  font-size: calc(100vw / (140));
}

.f-container {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
}

/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  :root {
    --spSizeInPc: 750;
    --pcSize: 750;
  }
  html {
    font-size: calc(100vw / (75));
  }
  .f-container {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
  .f-right,
  .f-left {
    display: none !important;
  }
}
.l-container {
  width: 100%;
}

.l-footer {
  padding-top: 0;
}
.l-footer .pc-footer {
  margin-top: 0;
}

.f-container {
  opacity: 0;
}
.f-container.show {
  opacity: 1;
}
.f-container {
  scroll-margin-top: 80px;
  width: 100%;
  overflow: clip;
  display: flex;
  position: relative;
}
.f-container * {
  box-sizing: border-box;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.f-container {
  color: #4f4f4f;
  font-feature-settings: "palt";
}
.f-container img,
.f-container video {
  width: 100%;
  height: auto;
  vertical-align: top;
  pointer-events: none;
}
.f-container svg {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}
.f-container a {
  color: #4f4f4f;
  display: block;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease-in-out;
}
.f-container a:hover {
  opacity: 0.7;
}
@media (max-width: 768px) {
  .f-container a:hover {
    opacity: 1;
  }
}
.f-container figure {
  display: block;
}
.f-container .f-left, .f-container .f-right {
  width: calc((100% - 750 * var(--formula)) / 2);
  height: calc(100vh - 80px);
  overflow: clip;
  position: sticky;
  top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.f-container .f-left__mv {
  width: 100%;
  height: 100%;
}
.f-container .f-left__mv img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.f-container .f-left__title {
  height: 74.6378378378%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8.8421621622%;
}
.f-container .f-left__title img {
  width: auto;
  height: 100%;
}
.f-container .f-right {
  background-color: #edede8;
}
.f-container .f-right__btn {
  width: 21.9rem;
}
.f-container .f-main {
  width: calc(750 * var(--formula));
  overflow: clip;
}
.f-container .f-main-wrap {
  max-width: calc(750 * var(--formula));
  width: 100%;
  margin: 0 auto;
}
.f-container .f-main-wrap a::after {
  display: inline-block;
  content: "";
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.f-container .f-main-wrap a:hover {
  opacity: 1;
}
.f-container .f-main-wrap a:hover::after {
  opacity: 1;
}
@media (max-width: 768px) {
  .f-container .f-main-wrap a:hover {
    opacity: 1;
  }
  .f-container .f-main-wrap a:hover::after {
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .f-container .f-main {
    width: 100%;
  }
}
.f-container .fadeIn {
  opacity: 0;
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.f-container .fadeIn.showed {
  opacity: 1;
}
.f-container .fadeUp {
  opacity: 0;
  transform: translateY(4rem);
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.f-container .fadeUp.showed {
  opacity: 1;
  transform: translateY(0);
}
.f-container .hero {
  background-color: #f7f7f5;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.f-container .hero__box {
  position: relative;
  padding-top: calc(58 * var(--formula));
  padding-bottom: calc(58 * var(--formula));
}
.f-container .hero__box .title01 {
  width: calc(540.898 * var(--formula));
  margin: 0 auto;
}
.f-container .hero__box .time01 {
  font-family: "contralto-small", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(26 * var(--formula));
  line-height: calc(31.83 * var(--formula));
  text-align: center;
  color: #353535;
  text-decoration: underline;
  margin-top: calc(30 * var(--formula));
}
.f-container .hero__mv {
  margin-bottom: calc(55.34 * var(--formula));
}
.f-container .hero .title02 {
  width: calc(476 * var(--formula));
  margin-bottom: calc(93 * var(--formula));
}
.f-container .hero__text {
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  font-size: calc(24 * var(--formula));
  line-height: calc(40 * var(--formula));
  text-align: center;
}
.f-container .hero__text span {
  display: inline-block;
  display: inline-block;
}
.f-container .hero__text span.txt01 {
  letter-spacing: 0;
  padding-right: calc(2 * var(--formula));
}
.f-container .hero__text span.txt02 {
  letter-spacing: 0;
}
.f-container .hero__text span.img-usagi {
  width: calc(28 * var(--formula));
  padding: 0 calc(3 * var(--formula)) 0 calc(5 * var(--formula));
  box-sizing: content-box;
}
.f-container .hero__text span.img-usagi img {
  margin-top: calc(7 * var(--formula));
}
.f-container .hero .text01 {
  margin-bottom: calc(25 * var(--formula));
}
.f-container .hero .deco01 {
  width: calc(92 * var(--formula));
  margin-bottom: calc(19 * var(--formula));
}
.f-container .hero .text02 {
  padding-bottom: calc(124 * var(--formula));
}
.f-container .navi {
  padding-bottom: calc(123 * var(--formula));
  background: no-repeat url(../img/navi_bg.svg) bottom left/100% auto;
  margin-bottom: calc(72 * var(--formula));
}
.f-container .navi__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-left: calc(40 * var(--formula));
  padding-right: calc(40 * var(--formula));
  -moz-column-gap: calc(60 * var(--formula));
       column-gap: calc(60 * var(--formula));
  row-gap: calc(65 * var(--formula));
}
.f-container .navi__each {
  width: calc(164 * var(--formula));
}
.f-container .navi__each a {
  position: relative;
  height: 100%;
  padding-bottom: calc(20 * var(--formula));
}
.f-container .navi__each a::before {
  display: inline-block;
  content: "";
  width: calc(24.2732 * var(--formula));
  height: calc(13.2522 * var(--formula));
  background: no-repeat url(../img/navi_arrow.svg) 0 0/contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(19 * var(--formula));
}
.f-container .navi__each.ac a::before {
  bottom: 0;
}
.f-container .navi__each.ac .navi__text {
  width: calc(180 * var(--formula));
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(20 * var(--formula));
}
.f-container .navi__img {
  margin-bottom: calc(20 * var(--formula));
}
.f-container .navi__text {
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-weight: bold;
  font-size: calc(24 * var(--formula));
  line-height: calc(30 * var(--formula));
  letter-spacing: -0.025em;
  text-align: center;
}
.f-container .fixed__all-btn {
  height: calc(130 * var(--formula));
  width: calc(130 * var(--formula));
  margin-left: auto;
  position: sticky;
  top: calc(100dvh - 130 * var(--formula));
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  pointer-events: none;
}
.f-container .fixed__all-btn a {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
  margin-bottom: calc(30 * var(--formula));
}
.f-container .fixed__all-btn a img {
  transition: filter 0.3s ease;
}
.f-container .fixed__all-btn a::after {
  display: none;
}
.f-container .fixed__all-btn a.showed {
  opacity: 1;
  pointer-events: all;
}
.f-container .sec .poa {
  position: absolute;
}
.f-container .sec__area {
  position: relative;
  margin-bottom: calc(242 * var(--formula));
}
.f-container .sec__num {
  width: calc(96.46 * var(--formula));
  margin: 0 auto;
  margin-bottom: calc(30 * var(--formula));
}
.f-container .sec__title {
  text-align: center;
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  font-size: calc(44 * var(--formula));
  line-height: calc(60 * var(--formula));
  margin-bottom: calc(9 * var(--formula));
}
.f-container .sec__credit {
  display: flex;
  justify-content: center;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(26 * var(--formula));
  line-height: calc(46 * var(--formula));
  margin-bottom: calc(17 * var(--formula));
}
.f-container .sec__text {
  text-align: center;
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(24 * var(--formula));
  line-height: calc(46 * var(--formula));
  letter-spacing: 0.12em;
}
.f-container .sec__text span.emoji {
  display: inline-block;
}
.f-container .sec__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: calc(117 * var(--formula));
}
.f-container .sec__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.f-container .sec__item-color {
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(26 * var(--formula));
  line-height: calc(21 * var(--formula));
}
.f-container .sec__deco {
  position: absolute;
  z-index: 1;
  transition-delay: 0.2s;
  pointer-events: none;
}
.f-container .sec__deco.d0 {
  transition-delay: 0s;
}
.f-container .sec__box {
  position: relative;
}
.f-container .sec__img {
  position: relative;
  z-index: 2;
}
.f-container .sec__img.tempo::after {
  content: "仮データ";
  display: inline-block;
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(30 * var(--formula));
  left: calc(56 * var(--formula));
  font-weight: bold;
  position: absolute;
  left: calc(10 * var(--formula));
  top: calc(20 * var(--formula));
  pointer-events: none;
}
.f-container .sec__slide {
  position: relative;
  margin-bottom: 0;
  z-index: 2;
}
.f-container .sec__slide .splide {
  position: relative;
}
.f-container .sec__slide .splide .sec__img {
  margin-bottom: 0;
}
.f-container .sec__slide .splide .splide__pagination {
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0;
}
.f-container .sec__slide .splide .splide__pagination li {
  height: calc(16 * var(--formula));
}
.f-container .sec__slide .splide .splide__pagination li button {
  padding-inline: 0;
  padding-block: 0;
  vertical-align: top;
}
.f-container .sec__slide .splide .splide__pagination .splide__pagination__page {
  transform: scale(1);
  width: calc(16 * var(--formula));
  height: calc(16 * var(--formula));
  border-radius: 0%;
  opacity: 1;
  background: no-repeat url(../img/inactive-pagenation.svg) 0 0/contain;
  margin: 0;
}
.f-container .sec__slide .splide .splide__pagination .splide__pagination__page.is-active {
  transform: scale(1);
  width: calc(16 * var(--formula));
  height: calc(16 * var(--formula));
  background: no-repeat url(../img/active-pagenation.svg) 0 0/contain;
}
.f-container .sec__slide.cb .splide .splide__pagination {
  padding-top: calc(14.62 * var(--formula));
  box-sizing: content-box;
  -moz-column-gap: calc(16 * var(--formula));
       column-gap: calc(16 * var(--formula));
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
}
.f-container .sec__slide.rb .splide .splide__pagination {
  padding-top: calc(14.62 * var(--formula));
  box-sizing: content-box;
  -moz-column-gap: calc(16 * var(--formula));
       column-gap: calc(16 * var(--formula));
  position: absolute;
  right: 0;
  bottom: 0;
  margin-left: auto;
  transform: translateY(100%);
}
.f-container .sec__slide.crb .splide .splide__pagination {
  flex-direction: column;
  padding-left: calc(20 * var(--formula));
  box-sizing: content-box;
  row-gap: calc(16 * var(--formula));
  position: absolute;
  right: 0;
  bottom: 0;
  margin-left: auto;
  transform: translateX(100%);
}
.f-container .sec__slide.clb .splide .splide__pagination {
  flex-direction: column;
  padding-right: calc(20 * var(--formula));
  box-sizing: content-box;
  row-gap: calc(16 * var(--formula));
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-100%);
}
.f-container .sec01 .text01 {
  margin-bottom: calc(45 * var(--formula));
}
.f-container .sec01 .list01 {
  -moz-column-gap: calc(16 * var(--formula));
       column-gap: calc(16 * var(--formula));
}
.f-container .sec01 .list01 .sec__item {
  width: calc(164 * var(--formula));
}
.f-container .sec01 .img01 {
  width: calc(500 * var(--formula));
  margin: 0 auto calc(61 * var(--formula));
}
.f-container .sec01 .img02 {
  width: calc(574 * var(--formula));
}
.f-container .sec01 .img03 {
  width: calc(480 * var(--formula));
  margin-left: auto;
}
.f-container .sec01 .sec__deco {
  width: calc(20.7603 * var(--formula));
  transition-delay: 0.2s;
}
.f-container .sec01 .deco01 {
  top: calc(-310 * var(--formula));
  left: calc(50 * var(--formula));
}
.f-container .sec01 .deco02 {
  top: calc(150 * var(--formula));
  left: calc(677 * var(--formula));
}
.f-container .sec01 .deco03 {
  top: calc(568 * var(--formula));
  left: calc(35 * var(--formula));
}
.f-container .sec01 .deco04 {
  top: calc(866 * var(--formula));
  left: calc(681 * var(--formula));
}
.f-container .sec01 .deco05 {
  bottom: calc(863 * var(--formula));
  left: calc(616 * var(--formula));
}
.f-container .sec01 .deco06 {
  bottom: calc(430 * var(--formula));
  left: calc(75 * var(--formula));
}
.f-container .sec01 .deco07 {
  bottom: calc(-138 * var(--formula));
  left: calc(446 * var(--formula));
}
.f-container .sec02 .num01 {
  margin-bottom: calc(25 * var(--formula));
}
.f-container .sec02 .text01 {
  margin-bottom: calc(46 * var(--formula));
}
.f-container .sec02 .text01 span {
  display: inline-block;
  padding: 0 calc(8 * var(--formula));
}
.f-container .sec02 .list01 {
  -moz-column-gap: calc(20 * var(--formula));
       column-gap: calc(20 * var(--formula));
}
.f-container .sec02 .list01 .sec__item {
  width: calc(148 * var(--formula));
}
.f-container .sec02 .list01 .sec__item-color {
  margin-top: calc(8 * var(--formula));
}
.f-container .sec02 .slide01 {
  width: calc(520 * var(--formula));
  margin: 0 auto calc(121 * var(--formula));
}
.f-container .sec02 .img02 {
  width: calc(390 * var(--formula));
  margin-left: calc(42 * var(--formula));
  margin-bottom: calc(79 * var(--formula));
}
.f-container .sec02 .deco01 {
  width: 100%;
  top: calc(310 * var(--formula));
  left: 0;
}
.f-container .sec02 .img03 {
  width: calc(520 * var(--formula));
  margin-left: auto;
  z-index: 5;
}
.f-container .sec02 .img04 {
  width: calc(420 * var(--formula));
}
.f-container .sec03 .text01 {
  margin-bottom: calc(39 * var(--formula));
}
.f-container .sec03 .list01 {
  -moz-column-gap: calc(19 * var(--formula));
       column-gap: calc(19 * var(--formula));
}
.f-container .sec03 .list01 .sec__item {
  width: calc(149 * var(--formula));
}
.f-container .sec03 .slide01 {
  width: calc(660 * var(--formula));
  margin: 0 auto calc(154 * var(--formula));
}
.f-container .sec03 .deco01 {
  width: calc(58.716 * var(--formula));
  top: calc(483 * var(--formula));
  left: calc(515 * var(--formula));
  z-index: 3;
}
.f-container .sec03 .slide02 {
  width: calc(450 * var(--formula));
  margin-bottom: calc(150 * var(--formula));
}
.f-container .sec03 .img03 {
  width: calc(590 * var(--formula));
  margin-left: auto;
}
.f-container .sec04 {
  margin-bottom: calc(250 * var(--formula));
}
.f-container .sec04 .num01 {
  margin-bottom: calc(25 * var(--formula));
}
.f-container .sec04 .text01 .emoji {
  width: calc(17.1657 * var(--formula));
}
.f-container .sec04 .text01 .emoji img {
  transform: translateY(calc(8 * var(--formula)));
}
.f-container .sec04 .text01 {
  margin-bottom: calc(12 * var(--formula));
}
.f-container .sec04 .list01 {
  -moz-column-gap: calc(14 * var(--formula));
       column-gap: calc(14 * var(--formula));
}
.f-container .sec04 .list01 .sec__item {
  width: calc(190 * var(--formula));
}
.f-container .sec04 .list01 .sec__item-color {
  margin-top: calc(-6 * var(--formula));
  margin-left: calc(-13 * var(--formula));
}
.f-container .sec04 .list01 .item02 img {
  transform: translateY(calc(3 * var(--formula)));
}
.f-container .sec04 .box01 {
  margin-bottom: calc(120 * var(--formula));
}
.f-container .sec04 .box01 .img01 {
  margin-bottom: calc(8 * var(--formula));
}
.f-container .sec04 .box01 .text02 span {
  display: inline-block;
  width: calc(24 * var(--formula));
}
.f-container .sec04 .box01 .text02 span img {
  transform: translateY(calc(12 * var(--formula)));
}
.f-container .sec04 .box01 .text02 span.emoji01 {
  padding-right: calc(3 * var(--formula));
}
.f-container .sec04 .box01 .text02 span.emoji02 {
  padding-left: calc(3 * var(--formula));
}
.f-container .sec04 .box01 .deco01 {
  z-index: 3;
  width: calc(181 * var(--formula));
  top: calc(-103 * var(--formula));
  left: calc(17 * var(--formula));
}
.f-container .sec04 .slide01 {
  width: calc(580 * var(--formula));
  margin-bottom: calc(80 * var(--formula));
}
.f-container .sec04 .box02 .slide02 {
  width: calc(580 * var(--formula));
  margin-left: auto;
}
.f-container .sec04 .box02 .deco02 {
  width: calc(51.5129 * var(--formula));
  top: calc(318 * var(--formula));
  left: calc(52 * var(--formula));
}
.f-container .sec05 {
  margin-bottom: calc(185 * var(--formula));
}
.f-container .sec05 .text01 {
  margin-bottom: calc(40 * var(--formula));
}
.f-container .sec05 .list01 {
  -moz-column-gap: calc(83 * var(--formula));
       column-gap: calc(83 * var(--formula));
}
.f-container .sec05 .list01 .sec__item {
  width: calc(134 * var(--formula));
}
.f-container .sec05 .list01 .sec__item-color {
  margin-top: calc(6 * var(--formula));
}
.f-container .sec05 .box01 {
  margin-bottom: calc(88 * var(--formula));
}
.f-container .sec05 .box01 .slide01 {
  width: calc(600 * var(--formula));
  margin: 0 auto;
  margin-bottom: calc(48 * var(--formula));
}
.f-container .sec05 .box01 .slide01 .splide__pagination {
  padding-top: calc(20 * var(--formula)) !important;
}
.f-container .sec05 .box01 .text02 span {
  display: inline-block;
  width: calc(22.5 * var(--formula));
}
.f-container .sec05 .box01 .text02 span img {
  transform: translateY(calc(12 * var(--formula)));
}
.f-container .sec05 .box01 .text02 span.emoji01 {
  padding-right: calc(3 * var(--formula));
}
.f-container .sec05 .box01 .text02 span.emoji02 {
  padding-left: calc(3 * var(--formula));
}
.f-container .sec05 .box01 .deco01 {
  z-index: 3;
  width: calc(154 * var(--formula));
  top: calc(-93 * var(--formula));
  right: calc(39 * var(--formula));
}
.f-container .sec05 .img02 {
  width: calc(464 * var(--formula));
  margin-left: calc(47 * var(--formula));
}
.f-container .sec05 .box02 {
  margin-bottom: calc(160 * var(--formula));
}
.f-container .sec05 .box02 .img03 {
  width: calc(550 * var(--formula));
  margin-left: auto;
}
.f-container .sec05 .box02 .deco02 {
  width: calc(52 * var(--formula));
  top: calc(315 * var(--formula));
  left: calc(77 * var(--formula));
}
.f-container .sec05 .img04 {
  width: calc(600 * var(--formula));
  margin: 0 auto;
  margin-bottom: calc(183 * var(--formula));
}
.f-container .all__btn {
  width: calc(365.19 * var(--formula));
  margin: 0 auto;
  padding-bottom: calc(180 * var(--formula));
}