/* ***************************************

  variables

*************************************** */
:root {
  /* gutter */
  --gutter-half: 4rem;
  --gutter1: 8rem;
  --gutter2: 16rem;
  --gutter3: 24rem;
  --gutter4: 32rem;
  --gutter5: 40rem;
  --gutter6: 48rem;
  --gutter7: 56rem;
  --gutter8: 64rem;
  --gutter9: 72rem;
  --gutter10: 80rem;
  --gutter11: 88rem;
  --gutter12: 96rem;
  --gutter13: 104rem;
  --gutter14: 112rem;
  --gutter15: 120rem;
  --gutter16: 128rem;
  --gutter17: 136rem;
  --gutter18: 144rem;
  --gutter19: 152rem;
  --gutter20: 160rem;

  /* color */
  --c-white: #fff;
  --c-red: #E6003E;
  --c-blue: #00AFEC;
  --c-dark-blue: #1A2478;
  --c-f-default: #0F0F0F;
  --c-f-sub: #707070;
  --c-bd: #DEDEDE;
  --c-bd-dark: #B5B5B5;
  --c-bg: #F2F1EB;
  --c-bg-dark: #E6E4D9;
  --c-bg2: #25293D;
  --c-bg3: #E5E5E5;

  /* container */
  --container-min: 375rem;
  --container-inner: 1352rem;
  --container-max: 1512rem;

  /* border */
  --border-radius-sm: 4rem;
  --border-radius-md: 8rem;
  --border-radius-lg: 24rem;
  --border-radius-full: 9999rem;

  /* font */
  --font-size-sm: 14rem;
  --font-size-md: 16rem;
  --font-size-default: 18rem;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  --font-family-jp: "Noto Sans JP", sans-serif;
  --font-family-en: "Inter", sans-serif;

  /* line-height */
  --line-height-sm: 1.45;
  --line-height-md: 1.75;
  --line-height-lg: 2;
}

/* ***************************************

  base

*************************************** */
html {
  font-size: calc(100vw / 390);
  scroll-behavior: smooth;
  scroll-padding-top: calc(66 * (100vw / 390));
}

body {
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-jp);
  line-height: var(--line-height-md);
  letter-spacing: .08em;
  font-feature-settings: "palt";
  background: url(../img/bg.png) repeat;

}

img {
  max-width: 100%;
  height: auto;
}

@media (width >=768px) {
  html {
    font-size: calc(100vw / 1512);
    scroll-padding-top: calc(103 * (100vw / 1512));
  }

  .pc-none {
    display: none;
  }
}

@media (width < 768px) {
  body {
    font-size: var(--font-size-md);
  }

  .sp-none {
    display: none;
  }
}

/* ***************************************

  page wrapper

*************************************** */
.page-wrapper {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

/* 1400px以上の画面では固定サイズに */
@media (min-width: 1400px) {
  html {
    font-size: calc(1400px / 1512);  /* 1400px基準で固定 */
    scroll-padding-top: calc(103 * (1400px / 1512));
  }
}

/* ***************************************

  component

*************************************** */
/* =======================================
  ttl
======================================= */
/* ttl1
--------------------------------------- */
.c-ttl1 {
  display: flex;
  justify-content: center;
  gap: var(--gutter1);
  margin-bottom: var(--gutter7);
  font-size: 44rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-sm);
}

.c-ttl1::before,
.c-ttl1::after {
  content: "";
  display: block;
  width: 28rem;
  aspect-ratio: 1 / 1;
  background: url(../img/ttl-deco1.svg) no-repeat center/contain;

}

.c-ttl1::after {
  transform: scaleX(-1);
}

@media (width < 768px) {
  .c-ttl1 {
    margin-bottom: var(--gutter4);
    font-size: 28rem;
  }

  .c-ttl1::before,
  .c-ttl1::after {
    width: 20rem;
  }
}

/* ttl2
--------------------------------------- */
.c-ttl2 {
  margin-bottom: var(--gutter3);
  padding-left: var(--gutter3);
  background: url(../img/ttl-deco2.svg) no-repeat;
  background-position: left top;
  background-size: 10rem auto;
  font-size: 36rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-sm);

}

@media (width < 768px) {
  .c-ttl2 {
    margin-bottom: var(--gutter2);
    padding-left: var(--gutter2);
    background-size: 6rem auto;
    background-position: left 1rem;
    font-size: 24rem;
  }
}

/* c-ttl3
--------------------------------------- */
.c-ttl3 {
  font-weight: var(--font-weight-bold);
}

.c-ttl3__sub::before {
  content: "";
  display: inline-block;
  width: 14rem;
  height: 14rem;
  transform: translateY(1rem);
  margin-right: var(--gutter1);
  background-color: var(--c-red);
}

.c-ttl3__main {
  font-size: 40rem;
}

@media (width < 768px) {
  .c-ttl3__main {
    font-size: 32rem;
  }
}


/* =======================================
  btn
======================================= */
.c-btn {
  display: inline-block;
  padding: var(--gutter3) var(--gutter4);
  border-radius: var(--border-radius-full);
  background-color: var(--c-white);
  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.10);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

/* c-btn-arrow
--------------------------------------- */
.c-btn--arrow {
  display: inline-flex;
  gap: var(--gutter1);
  align-items: center;
}

.c-btn--arrow::after {
  display: inline-block;
  content: "";
  width: 8rem;
  height: 13rem;
  aspect-ratio: 1 / 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M4.66216 6.50049L0 1.90049L1.41892 0.500488L7.5 6.50049L1.41892 12.5005L0 11.1005L4.66216 6.50049Z' fill='%23D51C45'/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* c-btn-line
--------------------------------------- */
.c-btn--line {
  border: 1px solid var(--c-red);
  transition: background-color .3s ease-in-out;
  color: var(--c-red);
  line-height: 1;
}

/* c-btn-sm
--------------------------------------- */
.c-btn--sm {
  padding: 14rem 20rem;
  font-size: 16rem;
}

@media (width < 768px) {
  .c-btn--sm {
    font-size: 14rem;
  }
}

/* ***************************************

  utility

*************************************** */
/* =======================================
  bg
======================================= */
.u-bg {
  background-color: var(--c-bg);
}

/* =======================================
list
======================================= */
.u-list-disc {
  margin-left: 1.5em;
  list-style-type: disc;
}

.u-list-decimal {
  margin-left: 1.5em;
  list-style-type: decimal;
}

.u-list-annotation {
  margin-left: 1em;
}

.u-list-annotation li::before {
  content: "※";
  margin-left: -1em;
}

/* =======================================
  link
======================================= */
.u-link a {
  color: var(--c-blue);
}

/* =======================================
  text
======================================= */
.u-annotation::before {
  content: "※";
}

.u-text--sm {
  font-size: 16rem;
}

.u-text-area p+* {
  margin-top: 1em;
}

.u-text-color-sub {
  color: var(--c-f-sub);
}

@media (width < 768px) {
  .u-text--sm {
    font-size: 14rem;
  }
}

/* ***************************************

  cover

*************************************** */
.cover {
  opacity: 0;
  pointer-events: none;
  content: "";
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  transition: opacity .3s;
}

.cover.open {
  opacity: 1;
}

/* ***************************************

  header

*************************************** */
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rem 40rem;
}

.header.bg-blur {
  background-color: rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px);
}

.header__logo {
  position: relative;
  z-index: 101;
}

.header__logo img {
  height: 40rem;
}

@media (width < 768px) {
  .header {
    padding: var(--gutter1) var(--gutter2);
  }

  .header__logo img {
    height: 30rem;
  }
}

@media (min-width: 1400px) {
  .header {
    max-width: 1400px;
    margin-inline: auto;
  }
}

/* =======================================
  header__nav
======================================= */
.header__nav {
  display: flex;
  gap: var(--gutter4);
}

.header__nav-list--global {
  display: flex;
  align-items: center;
  gap: var(--gutter4);
  font-weight: var(--font-weight-bold);
}

@media (width < 768px) {
  .header__nav {
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    padding-top: var(--gutter12);
    transition: opacity .3s ease-in-out;
    overflow-y: auto;
  }

  .header.open .header__nav {
    opacity: 1;
    pointer-events: auto;
  }

  .header__nav-list--global {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100dvh;
    min-height: 490rem;
    gap: var(--gutter4);
    font-size: 18rem;
  }
}


/* cta
--------------------------------------- */
.header__nav-list--cta {
  display: flex;
  gap: var(--gutter2);
}

.header__nav-link--cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gutter1);
  padding: var(--gutter2) var(--gutter3);
  border-radius: var(--border-radius-full);
  background-color: var(--c-red);
  color: var(--c-white);
}

.header__nav-link--cta.map {
  background-color: var(--c-dark-blue);
}

.header__nav-link--cta img {
  width: 20rem;
}

@media (width < 768px) {
  .header__nav-list--cta {
    display: none;
  }
}

/* =======================================
    btn-menu
======================================= */
.btn-menu {
  --bg-color: var(--c-red);
  --line-color: #ffffff;
  --icon-size: 26rem;
  --line-height: 1px;
  --line-space: 6rem;
  --transition-time: 0.3s;
  --rotate-angle: 45deg;
  --border-color: transparent;
  --radius-size: var(--border-radius-full);

  background-color: var(--bg-color);
  border: none;
  border-radius: 0;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50rem;
  height: 50rem;
  padding: 0;
  border-width: var(--border-width);
  border-style: solid;
  border-color: var(--border-color);
  border-radius: var(--radius-size);
}

.btn-menu__icon {
  width: var(--icon-size);
  height: calc(var(--line-height) * 3 + var(--line-space) * 2);
  position: relative;
  display: flex;
  align-items: center;
}

.btn-menu__line,
.btn-menu__line::before,
.btn-menu__line::after {
  width: var(--icon-size);
  height: var(--line-height);
  background-color: var(--line-color);
  position: absolute;
  transition: all var(--transition-time) ease;
}

.btn-menu__line::before,
.btn-menu__line::after {
  content: '';
  left: 0;
}

.btn-menu__line::before {
  top: calc(var(--line-space) * -1 - var(--line-height));
}

.btn-menu__line::after {
  bottom: calc(var(--line-space) * -1 - var(--line-height));
}

.btn-menu__text {
  font-size: var(--font-size);
  color: var(--line-color);
  transition: opacity var(--transition-time) ease;
  margin-top: var(--text-margin-top);
  line-height: 1;
  transform: translateY(1px);
}

.btn-menu[aria-expanded="true"] .btn-menu__line {
  background-color: transparent;
}

.btn-menu[aria-expanded="true"] .btn-menu__line::before {
  transform: translateY(calc(var(--line-space) + var(--line-height))) rotate(var(--rotate-angle));
}

.btn-menu[aria-expanded="true"] .btn-menu__line::after {
  transform: translateY(calc((var(--line-space) + var(--line-height)) * -1)) rotate(calc(var(--rotate-angle) * -1));
}

@media (width >=768px) {
  .btn-menu {
    display: none;
  }
}

/* ***************************************

  main

*************************************** */
.main {
  position: relative;
  max-width: 1800px;
}

/* ***************************************

  mv

*************************************** */
.mv {
  position: absolute;
  top: -40rem;
  right: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.mv__inner {
  position: relative;
  width: 1700rem;
  aspect-ratio: 200 / 175;
  left: 50%;
  transform: translateX(-50%);

}

.mv__player {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.mv__player--1 {
  z-index: 1;
}

.mv__player--2 {
  display: none;
  z-index: 2;
}

@media (width < 768px) {
  .mv {
    top: 10rem;
  }

  .mv__inner {
    width: 800rem;
  }
}



/* ***************************************

  about

*************************************** */
.sec-about {
  --about-photo-size: 500rem;

  position: relative;
  z-index: 1;
  padding-top: 390rem;
  overflow: hidden;

}

.about__bg-top {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  margin-bottom: -1rem;
  vertical-align: bottom;
}

.about__inner {
  position: relative;
  z-index: 2;
  padding-block: 250rem 280rem;
  background-color: var(--c-bg);
}

.about__contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 100rem;
}

@media (width < 768px) {
  .sec-about {
    --about-photo-size: 280rem;
    padding-top: 210rem;
  }

  .about__inner {
    padding-block: 160rem 120rem;
  }

  .about__contents {
    flex-direction: column;
    gap: 80rem;
    padding-top: 40rem;
  }
}

/* =======================================
about__content
======================================= */
.about__content {
  padding-left: var(--gutter10);
  line-height: var(--line-height-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: .12em;
}

.about__content p {
  font-size: 28rem;
}

.about__content p+p {
  padding-top: var(--gutter3);
}

@media (width < 768px) {
  .about__content {
    width: 100%;
    padding-inline: var(--gutter4);
    line-height: var(--line-height-md);
  }

  .about__content p {
    font-size: 16rem;
  }
}

/* =======================================
  about__photos
======================================= */
.about__photos {
  position: relative;
  z-index: 2;
  container-type: size;
  width: var(--about-photo-size);
  aspect-ratio: 4 / 3;
  margin-right: var(--gutter20);

}

@media (width < 768px) {
  .about__photos {
    margin-right: var(--gutter4);
  }
}

/* about__photo-list
--------------------------------------- */
.about__photo-list {
  position: relative;
  width: 100%;
  height: 100%;
}

.about__photo-item {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: right bottom;
}

.about__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--c-white);
  border: 4cqw solid var(--c-white);
  border-radius: var(--border-radius-md);
  box-shadow: 1rem 1rem 10rem rgba(0, 0, 0, .2);
}

.about__photo-item--1 {
  rotate: 6deg;
  z-index: 2;
}

.about__photo-item--2 {
  z-index: 1;
}

.about__photo-item--flip-up-1 {
  animation: about__photo-item--flip-up-1 1s ease-in-out forwards;
}

.about__photo-item--flip-up-2 {
  animation: about__photo-item--flip-up-2 1s ease-in-out forwards;
}

@keyframes about__photo-item--flip-up-1 {
  0% {
    rotate: 0deg;
    z-index: 2;
    opacity: 1;
  }

  50% {
    rotate: 25deg;
    z-index: 2;
    opacity: 0;
  }

  51% {
    z-index: 1;
  }

  100% {
    rotate: 6deg;
    z-index: 1;
    opacity: 1;
  }
}

@keyframes about__photo-item--flip-up-2 {
  0% {
    z-index: 1;
    opacity: 1;
  }

  50% {
    rotate: 25deg;
    z-index: 1;
    opacity: 0;
  }

  51% {
    z-index: 0;
  }

  100% {
    z-index: 0;
    opacity: 1;
  }
}

/* about-photo-text
--------------------------------------- */
.about__photo-text {
  position: absolute;
  top: -18cqh;
  right: -22cqw;
  z-index: 11;
  width: 56cqw;
}

/* about-photo-hand
--------------------------------------- */
.about__photo-hand {
  position: absolute;
  right: calc(var(--gutter20) * -1);
  top: 80cqh;
  z-index: 10;
  width: 48.4cqw;
}

.about__photo-hand img {
  width: 100%;
}

@media (width < 768px) {
  .about__photo-hand {
    right: calc(var(--gutter10) * -1);
  }
}

/* =======================================
  移動テキストのスタイル
======================================= */

/* コンテナ設定 */
.about__move-text {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 127rem;
  overflow: hidden;
  z-index: 1;
  will-change: transform;
}

/* 画像共通設定 */
.about__move-text img {
  flex-shrink: 0;
  width: auto;
  max-width: initial;
  height: 100%;
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}

/* アニメーションの定義 */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* スマートフォン対応 */
@media (width < 768px) {
  .about__move-text {
    height: 60rem;
  }
}

/* ***************************************

  feature

*************************************** */
.sec-feature {
  display: flex;
  flex-direction: column;
  padding: var(--gutter15) var(--gutter20);
}

.feature-item {
  display: flex;
  align-items: center;
  padding: var(--gutter3);
  border-radius: var(--border-radius-lg);
  background-color: var(--c-white);
}

.feature-item+.feature-item {
  margin-top: var(--gutter10);
}

.feature-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.feature-item>* {
  width: 50%;
}

.feature-item__img img {
  width: 100%;
  border: 3px solid var(--c-bd);
  border-radius: var(--border-radius-lg);
}

.feature-item__container {
  padding-left: var(--gutter10);
  padding-right: var(--gutter5);
}

.feature-item__btn {
  margin-top: var(--gutter2);
}

.feature-item__text .u-list-annotation {
  padding-top: var(--gutter1);
}

@media (width < 768px) {
  .sec-feature {
    padding: var(--gutter5) var(--gutter2);
  }

  .feature-item {
    flex-direction: column-reverse;
    padding-block: var(--gutter4);
  }

  .feature-item+.feature-item {
    margin-top: var(--gutter5);
  }

  .feature-item:nth-child(odd) {
    flex-direction: column-reverse;
  }

  .feature-item>* {
    width: 100%;
  }

  .feature-item__container {
    margin-bottom: var(--gutter4);
    padding-left: initial;
    padding-right: initial;
  }

  .feature-item__text br {
    display: none;
  }
}

/* ***************************************

  cta

*************************************** */
.sec-cta {
  padding: var(--gutter12) var(--gutter20);
  background-color: var(--c-bg-dark);
}

.cta-container {
  display: flex;
  gap: var(--gutter10);
  max-width: 1240rem;
  margin-inline: auto;
}

.cta-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gutter3);
  width: 50%;
  padding-block: var(--gutter6);
  border: 1px solid var(--c-red);
  border-radius: var(--border-radius-lg);
  background: var(--bg-white, #FFF);
  box-shadow: 8rem 8rem 0 #D1CFC0;
}

.cta-btn::before {
  content: "";
  display: block;
  position: absolute;
  left: 5rem;
  top: 5rem;
  width: calc(100% - 10rem);
  height: calc(100% - 10rem);
  border: 1px dashed var(--c-red);
  border-radius: 20rem;
}

.cta-btn::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 124rem;
  height: 64rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 36'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.3314 1.00374C17.2101 0.125057 18.6347 0.125057 19.5134 1.00374L34.5134 16.0037C35.392 16.8824 35.392 18.307 34.5134 19.1857L19.5134 34.1857C18.6347 35.0644 17.2101 35.0644 16.3314 34.1857C15.4527 33.307 15.4527 31.8824 16.3314 31.0037L27.4904 19.8447H2.92236C1.67972 19.8447 0.672363 18.8374 0.672363 17.5947C0.672363 16.3521 1.67972 15.3447 2.92236 15.3447H27.4904L16.3314 4.18572C15.4527 3.30704 15.4527 1.88242 16.3314 1.00374Z' fill='white'/%3E%3C/svg%3E") var(--c-red) no-repeat center / 34.5rem auto;
  border-radius: 23rem 0;
}

.cta-btn__img {
  width: 110rem;
  margin-left: -20rem;
}

.cta-btn:nth-child(2) .cta-btn__img {
  width: 90rem;
}

.cta-btn__text {
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.cta-btn__text--main {
  font-size: 36rem;
  line-height: var(--line-height-sm);
}

.cta-btn__text--sub {
  margin-bottom: 0.2em;
  font-size: 20rem;
  letter-spacing: initial;
  line-height: 1;
}

.cta-btn__text--sub span {
  font-family: var(--font-family-en);
  font-size: 30rem;
}

@media (width < 768px) {
  .sec-cta {
    padding: var(--gutter10) var(--gutter3);
  }

  .cta-container {
    flex-direction: column;
    gap: var(--gutter5);
  }

  .cta-btn {
    gap: var(--gutter2);
    padding-block: initial;
    width: 100%;
    height: 160rem;
  }

  .cta-btn::after {
    width: 80rem;
    height: 44rem;
    background-size: 20rem auto;
  }

  .cta-btn__img {
    width: 80rem;
  }

  .cta-btn:nth-child(2) .cta-btn__img {
    width: 70rem;
  }

  .cta-btn__text--main {
    font-size: 28rem;
  }

  .cta-btn__text--sub {
    font-size: 16rem;
  }

  .cta-btn__text--sub span {
    font-size: 18rem;
  }
}

/* ***************************************

  flow

*************************************** */
.sec-flow {
  padding-block: var(--gutter20);
  overflow: hidden;
}

.flow__type--light {
  margin-top: var(--gutter15);
}

.sec-flow__type-ttl {
  position: relative;
  margin-bottom: var(--gutter5);
  text-align: center;
}

.sec-flow__type-ttl::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 31rem;
  left: 10%;
  width: 80%;
  height: 2rem;
  background-color: var(--c-red);
}

.flow__type--light .sec-flow__type-ttl::before {
  background-color: var(--c-blue);
}

.sec-flow__type-ttl::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 220rem;
  height: 100%;
  background-color: var(--c-white);
  transform: translateX(-50%);
}

.sec-flow__type-ttl img {
  width: 200rem;
}

@media (width < 768px) {
  .sec-flow {
    padding-block: var(--gutter10);
  }

  .flow__type--light {
    margin-top: var(--gutter10);
  }

  .sec-flow__type-ttl {
    margin-bottom: var(--gutter2);
  }

  .flow__type--light .sec-flow__type-ttl {
    margin-bottom: var(--gutter1);
  }

  .sec-flow__type-ttl::before {
    top: 22rem;
  }

  .sec-flow__type-ttl::after {
    width: 160rem;
  }

  .sec-flow__type-ttl img {
    width: 140rem;
  }
}

/* =======================================
  flow-tab
======================================= */
/* flow-tab
--------------------------------------- */
.flow-tab {
  display: flex;
  justify-content: center;
  gap: var(--gutter5);
  margin-bottom: var(--gutter5);
  font-weight: var(--font-weight-bold);
  text-align: center;
  line-height: 1;
}

.flow-tab li {
  container-type: size;
  display: flex;
  align-items: center;
  position: relative;
  height: 80rem;
  width: 280rem;
  border-radius: var(--border-radius-full);
  background-color: var(--c-bg3);
  white-space: nowrap;
  cursor: pointer;
  transition: .3s ease-in-out;
  transition-property: background-color, color;
}

.flow-tab li.current {
  background-color: var(--c-red);
  color: var(--c-white);
}

.flow-tab .type {
  display: grid;
  place-items: center;
  height: 80cqh;
  width: 80cqh;
  margin-right: calc(-50cqh + var(--gutter2));
  margin-left: 10cqh;
  border-radius: var(--border-radius-full);
  background-color: var(--c-white);
  font-size: 18cqh;
  transition: color .3s ease-in-out;
}

.flow-tab li.current .type {
  color: var(--c-red);
  border-color: var(--c-red);
}

.flow-tab .text {
  flex-grow: 1;
  font-size: 10cqw;
}

@media (width < 768px) {
  .flow-tab {
    gap: var(--gutter2);
    padding-top: var(--gutter2);
    margin-bottom: initial;
    padding-inline: var(--gutter4);
  }

  .flow-tab li {
    height: 60rem;
    width: 100%;
  }

  .flow-tab .type {
    position: absolute;
    top: -13rem;
    left: 50%;
    width: auto;
    height: 26rem;
    margin: initial;
    padding-inline: 10rem;
    border: 2px solid var(--c-bg3);
    font-size: 12rem;
    transform: translateX(-50%);
  }

  .flow-tab .text {
    font-size: 20rem;
  }
}

/* =======================================
  flow-container
======================================= */
.flow-container.is-show {
  display: block;
}

.flow-container.is-hidden {
  display: none;
}

/* flow-item
--------------------------------------- */
.flow-item {
  width: 100%;
  display: flex;
  align-items: center;
  box-shadow: 0 0 20rem rgba(0, 0, 0, .1);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--c-white);
  overflow: hidden;
}

@media (width < 768px) {
  .flow-item {
    flex-direction: column;
  }
}

/* flow-item__container
--------------------------------------- */
.flow-item__container {
  display: flex;
  flex-direction: column;
  gap: var(--gutter3);
  padding: var(--gutter3);
}

@media (width < 768px) {
  .flow-item__container {
    gap: var(--gutter1);
    width: 100%;
    padding: var(--gutter2) var(--gutter3);
  }
}

@media (width >=768px) {

  .flow-item__img,
  .flow-item__container {
    width: 50%;
  }
}

/* flow-item__ttl
--------------------------------------- */
.flow-item__ttl {
  display: flex;
  align-items: center;
  gap: var(--gutter3);
  font-size: 34rem;
  font-weight: var(--font-weight-bold);
}

.flow-item__ttl--num {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60rem;
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius-full);
  border: 2rem solid var(--c-red);
  color: var(--c-red);
  font-family: var(--font-family-en);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

.flow__type--light .flow-item__ttl--num {
  border-color: var(--c-blue);
  color: var(--c-blue);
}

.flow-item__ttl--num .type {
  font-size: 20cqw;
}

.flow-item__ttl--num .num {
  margin-bottom: -4rem;
  font-size: 50cqw;
}

@media (width < 768px) {
  .flow-item__ttl {
    gap: var(--gutter1);
    font-size: 24rem;
  }

  .flow-item__ttl--num {
    width: 50rem;
  }
}

/* flow-item__text
--------------------------------------- */
.flow-item__text a {
  color: var(--c-blue);
}

.flow-item__text--sm {
  font-size: 14rem;
}

@media (width < 768px) {
  .flow-item__text {
    font-size: 14rem;
    line-height: 1.6;
  }

  .flow-item__text--sm {
    font-size: 12rem;
    line-height: 1.45;
  }
}

/* =======================================
  slides
======================================= */
.track-wrapper {
  padding: 20rem 80rem;
}

.splide__track {
  overflow: visible;
}

.splide__pagination {
  bottom: -30rem;
}

.splide__pagination__page {
  margin: 8rem;
  width: 8rem;
  height: 8rem;
  opacity: 1;
}

.splide__pagination__page.is-active {
  background: var(--c-red);
}

.flow__type--light .splide__pagination__page.is-active {
  background: var(--c-blue);
}

@media (width < 768px) {
  .track-wrapper {
    padding: 20rem;
  }

  .splide__pagination {
    bottom: -15rem;
  }
}

@media (width >=768px) {
  .splide__arrow {
    width: 50rem;
    height: 50rem;
  }

  .splide__arrow--prev {
    left: 85rem;
  }

  .splide__arrow--next {
    right: 85rem;
  }
}

/* ***************************************

  faq

  *************************************** */
.sec-faq {
  padding-block: var(--gutter20);
}

@media (width < 768px) {
  .sec-faq {
    padding-block: var(--gutter10);
  }
}

/* =======================================
  tab
======================================= */
.faq-tab-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gutter2);
  font-size: 16rem;
}

.faq-tab-list li {
  padding: var(--gutter2) var(--gutter3);
  border: 1px solid var(--c-bd-dark);
  border-radius: var(--border-radius-full);
  line-height: 1;
  cursor: pointer;
}

.faq-tab-list li.current {
  border-color: var(--c-red);
  background-color: var(--c-red);
  color: var(--c-white);
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}

.faq-tab-contents {
  max-width: 1160rem;
  margin-inline: auto;
  padding-inline: var(--gutter10);
}

.faq-tab-contents__item {
  display: none;
}

.faq-tab-contents__item.is-show {
  display: block;
}

@media (width < 768px) {
  .faq-tab-list {
    gap: var(--gutter1);
    font-size: 14rem;
  }

  .faq-tab-contents {
    padding-inline: var(--gutter3);
  }
}

/* =======================================
  faq list
======================================= */
.faq-list__item {
  margin-top: var(--gutter4);
  padding-inline: var(--gutter4);
  border-radius: var(--border-radius-lg);
  background-color: var(--c-bg);
  overflow: hidden;
}

.faq-list__item a {
  color: var(--c-blue);
  text-decoration: underline;
}

.faq-list__q,
.faq-list__a {
  position: relative;
  padding-block: var(--gutter3);
  padding-left: var(--gutter5);
}

.faq-list__q::before,
.faq-list__a::before {
  position: absolute;
  left: 2rem;
  font-family: var(--font-family-en);
  font-size: 30rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.faq-list__q {
  padding-right: 30rem;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.faq-list__q::before {
  content: "Q";
  color: var(--c-red);
}

.faq-list__q::after {
  content: "";
  display: block;
  position: absolute;
  top: 26rem;
  right: 0;
  width: 25rem;
  height: 25rem;
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius-full);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M7 14H21M14 7V21' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") var(--c-red) no-repeat center / 80%;
  transition: transform .3s ease-out;
}

.faq-list__item.open .faq-list__q::after {
  transform: rotate(135deg);
  background-color: var(--c-bd-dark);
}

.faq-list__a {
  height: 0;
  padding-block: 0;
  transition: height .3s ease-out, padding .3s ease-out;
  font-size: 16rem;
}

.faq-list__a {
  scroll-behavior: smooth;
  line-height: 1.6;
  font-weight: 400;
}

.faq-list__a h1,
.faq-list__a h2,
.faq-list__a h3,
.faq-list__a h4,
.faq-list__a h5,
.faq-list__a h6 {
  font-weight: var(--font-weight-bold);
  margin-top: 2em;
  margin-bottom: .8em;
  color: var(--c-f-default);
  scroll-margin-top: 20rem;
}

.faq-list__a h1 {
  font-size: 18rem;
}

.faq-list__a h2 {
  padding: var(--gutter2);
  background-color: #fff;
  border-left: 3rem solid var(--c-red);
  font-size: 18rem;
}

.faq-list__a * + h2 {
  margin-top: var(--gutter5);
}

.faq-list__a h3 {
  font-size: 17rem;
}

.faq-list__a h4 {
  font-size: 16rem;
  color: var(--c-red);
}

.faq-list__a h5 {
  font-size: 15rem;
}

.faq-list__a h6 {
  font-size: var(--font-size-md);
}

.faq-list__a > :first-child {
  margin-top: 0;
}

.faq-list__a p {
  margin: 0 0 1em 0;
}

.faq-list__a p:last-child {
  margin-bottom: 0;
}

.faq-list__a ul,
.faq-list__a ol {
  margin: 1em 0;
  padding-left: 1.5em;
}

.faq-list__a ul {
  list-style-type: disc;
}

.faq-list__a ol {
  list-style-type: decimal;
}

.faq-list__a li {
  margin-bottom: .5em;
  line-height: 1.5;
}

.faq-list__a li strong {
  font-weight: var(--font-weight-bold);
}

.faq-list__a a {
  color: var(--c-red);
  text-decoration: underline;
}

.faq-list__a a:hover {
  text-decoration: none;
}

.faq-list__a img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--gutter3) 0;
}

.faq-list__a code {
  background-color: var(--c-bg);
  padding: 2rem 6rem;
  border-radius: var(--border-radius-sm);
  font-family: monospace;
  font-size: 0.9em;
}

.faq-list__a pre {
  background-color: var(--c-bg);
  padding: var(--gutter3);
  border-radius: var(--border-radius-md);
  overflow-x: auto;
  margin: var(--gutter3) 0;
}

.faq-list__a pre code {
  background-color: transparent;
  padding: 0;
}

.faq-list__a table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--gutter3) 0;
}

.faq-list__a table th,
.faq-list__a table td {
  border: 1rem solid var(--c-bd);
  padding: var(--gutter1) var(--gutter3);
  text-align: left;
}

.faq-list__a table th {
  background-color: var(--c-bg);
  font-weight: 600;
}

.faq-list__a blockquote {
  border-left: 4rem solid var(--c-red);
  padding-left: var(--gutter3);
  margin: var(--gutter3) 0;
  color: var(--c-f-sub);
  font-style: italic;
}

.faq-list__a hr {
  border: none;
  border-top: 1rem solid var(--c-bd);
  margin: var(--gutter4) 0;
}

.faq-list__a figure {
  margin: 0;
}

.faq-list__a figure img {
  border: 1rem solid var(--c-bd);
  border-radius: var(--border-radius-md);
}

.faq-list__a .alert_info {
  display: block;
  position: relative;
  background-color: rgba(0, 175, 236, 0.1);
  margin: var(--gutter3) auto;
  padding: var(--gutter3);
  padding-left: calc(var(--gutter3) + 18rem);
  border-radius: var(--border-radius-md);
  border: 1rem solid var(--c-blue);
}

.faq-list__a .alert_info::before {
  content: '';
  display: inline-block;
  width: 20rem;
  height: 20rem;
  position: absolute;
  left: var(--gutter1);
  top: var(--gutter3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%230ea5e9' d='M11.5 16.5h1V11h-1zm.5-6.923q.262 0 .439-.177t.176-.439t-.177-.438T12 8.346t-.438.177t-.177.439t.177.438t.438.177M12.003 21q-1.867 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.faq-list__a .btn_anchor_link,
.faq-list__a .btn_link {
  display: inline-block;
  position: relative;
  margin-top: 8rem;
  margin-right: 8rem;
  padding: 2rem 10rem 2rem 26rem;
  font-weight: var(--font-weight-bold);
  border: 1rem solid var(--c-red);
  border-radius: 100rem;
  background-color: #fff;
  box-shadow: 0 2rem 0 rgba(0, 0, 0, 0.1);
  color: var(--c-red);
}

.faq-list__a .btn_anchor_link::before,
.faq-list__a .btn_link::before {
  content: '';
  position: absolute;
  left: 4rem;
  top: 50%;
  width: 24rem;
  height: 24rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23E6003E' d='M12 14.708L6.692 9.4l.708-.708l4.6 4.6l4.6-4.6l.708.708z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.faq-list__a .btn_anchor_link::before {
  transform: translateY(-50%);
}

.faq-list__a .btn_link::before {
  transform: translateY(-50%) rotate(-90deg);
}

.faq-list__item.open .faq-list__a {
  padding-block: var(--gutter3);
  border-top: 1rem solid var(--c-bd);
  height: auto;
  transition: height .3s ease-out, padding .3s ease-out;
}

.faq-list__a::before {
  content: "A";
  color: var(--c-dark-blue);
}

[class^="faq-list__a--ttl"] span {
  font-size: .7em;
}



@media (width < 768px) {
  .faq-list__item {
    padding-inline: var(--gutter2);
    font-size: 14rem;
  }

  .faq-list__q,
  .faq-list__a {
    position: relative;
    padding-left: var(--gutter4);
  }

  .faq-list__q::before,
  .faq-list__a::before {
    font-size: 26rem;
  }

  .faq-list__a {
    font-size: max(13px,12rem);
  }
}

/* =======================================
  CTA Container
======================================= */
.cta-container {
  display: flex;
  gap: var(--gutter10);
  max-width: 1240rem;
  margin-inline: auto;
}

.faq__btn {
  margin-top: var(--gutter4);
  text-align: center;
}

@media (width < 768px) {
  .cta-container {
    flex-direction: column;
    gap: var(--gutter5);
  }
}

/* ***************************************

  corporation

*************************************** */
.sec-corporation {
  padding: var(--gutter10) var(--gutter8);
}

@media (width < 768px) {
  .sec-corporation {
    padding: var(--gutter6) var(--gutter2);
  }
}

/* =======================================
  corporation__container
======================================= */
.corporation__container {
  display: flex;
  gap: var(--gutter5);
}

.corporation__container>div {
  width: 50%;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

@media (width < 768px) {
  .corporation__container {
    flex-direction: column;
    gap: var(--gutter3);
  }

  .corporation__container>div {
    width: 100%;
  }
}

/* corporation__contents
--------------------------------------- */
.corporation__contents {
  display: flex;
  flex-direction: column;
  gap: var(--gutter5);
  padding: var(--gutter8);
  background-color: var(--c-white);
}

@media (width < 768px) {
  .corporation__contents {
    gap: var(--gutter3);
    padding: var(--gutter4) var(--gutter3);
  }
}

/* corporation__img
--------------------------------------- */
.corporation__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* corporation__btn
--------------------------------------- */
@media (width < 768px) {
  .corporation__btn {
    text-align: center;
  }
}


/* ***************************************

  vision

*************************************** */
.sec-vision {
  padding: var(--gutter10) var(--gutter19) 800rem;
  background: url("../img/bg-vision.png") no-repeat center bottom / contain;
}

.vision-ttl {
  margin-bottom: var(--gutter5);
}

@media (width < 768px) {
  .sec-vision {
    padding: var(--gutter5) var(--gutter3) 240rem;
  }

  .vision-ttl {
    margin-bottom: var(--gutter3);
  }
}


/* ***************************************

  footer

*************************************** */
.footer {
  padding: var(--gutter10);
  background-color: var(--c-bg2);
  color: var(--c-white);
}

.footer-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.footer-container {
  display: flex;
  justify-content: space-between;
}

.footer-logo {
  margin-bottom: var(--gutter5);
}

.footer-logo img {
  height: 40rem;
}

.footer-address {
  font-size: 14rem;
}

.footer-copy {
  margin-top: var(--gutter6);
  padding-top: var(--gutter6);
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-size: 14rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter4);
  font-weight: var(--font-weight-bold);
}

@media (width < 768px) {
  .footer {
    padding: var(--gutter5) var(--gutter3) var(--gutter12);
  }

  .footer-container {
    flex-direction: column;
  }

  .footer-logo {
    margin-bottom: var(--gutter3);
  }

  .footer-logo img {
    height: 30rem;
  }

  .footer-copy {
    margin-top: var(--gutter4);
    padding-top: var(--gutter4);
    font-size: 12rem;
  }

  .footer-nav {
    gap: var(--gutter3);
    margin-top: var(--gutter4);
  }
}

/* ***************************************

  modal

*************************************** */
.modal-contents {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-block: var(--gutter3);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}

.modal-contents.is-show {
  display: flex;
}

.modal-contents__inner {
  position: relative;
  width: 90%;
  max-width: 600rem;
  max-height: 90dvh;
  background: var(--c-white);
  border-radius: var(--border-radius-lg);
}

.modal-contents__close {
  position: absolute;
  top: -10rem;
  right: -10rem;
  width: 50rem;
  height: 50rem;
  cursor: pointer;
}

.modal-contents__text {
  max-height: 90dvh;
  padding: var(--gutter5) var(--gutter4);
  overflow-y: auto;
}

/* =======================================
  モーダルセクション
======================================= */
.modal-section {
  margin-bottom: var(--gutter5);
}

.modal-section:last-child {
  margin-bottom: 0;
}

.modal-section__title {
  font-size: 24rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--gutter3);
  text-align: center;
}

.modal-section__text {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  margin-bottom: var(--gutter2);
}

.modal-section__note {
  font-size: var(--font-size-sm);
  color: var(--c-f-sub);
  line-height: var(--line-height-sm);
}

/* =======================================
  ランクリスト
======================================= */
.rank-list {
  margin-top: var(--gutter3);
}

.rank-item {
  display: flex;
  align-items: center;
  padding: var(--gutter3);
  margin-bottom: var(--gutter2);
  border: 1px solid var(--c-bd);
  border-radius: var(--border-radius-md);
}

.rank-item:last-child {
  margin-bottom: 0;
}

.rank-item__icon {
  width: 80rem;
  flex-shrink: 0;
  margin-right: var(--gutter3);
}

.rank-item__icon img {
  width: 100%;
  height: auto;
}

.rank-item__content {
  flex: 1;
}

.rank-item__point {
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-bold);
}

.rank-item__point em {
  font-size: 24rem;
  color: var(--c-red);
  font-style: normal;
}

.rank-item__condition {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  color: var(--c-f-default);
}

/* =======================================
  レスポンシブ対応
======================================= */
@media screen and (max-width: 768px) {
  .modal-contents__text {
    padding: var(--gutter4) var(--gutter3);
  }

  .modal-section__title {
    margin-bottom: var(--gutter2);
    font-size: 24rem;
  }

  .rank-item {
    padding: var(--gutter2);
  }

  .rank-item__icon {
    width: 60rem;
    margin-right: var(--gutter2);
  }

  .rank-item__point {
    font-size: var(--font-size-md);
  }

  .rank-item__point em {
    font-size: 20rem;
  }
}

/* ***************************************

  sp-fixed-cta

*************************************** */
.sp-fixed-cta {
  display: none;
}

@media (width < 768px) {
  .sp-fixed-cta {
    display: flex;
    position: fixed;
    z-index: 200;
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0;
  }

  .sp-fixed-cta .header__nav-item {
    width: 50%;
  }

  .sp-fixed-cta a {
    border-radius: 0;
  }
}