@charset "UTF-8";

@layer reset, base, third-party, components, utility, priority;

@import './reset.min.css' layer(reset);

@import "https://use.typekit.net/gyl6odq.css" layer(third-party);
@import "https://fonts.googleapis.com/css2?family=Anton+SC&family=Noto+Sans+JP:wght@100..900&display=swap" layer(third-party);

@layer base {
:root {
  /* color */
  --color-yellow: #fcff2b;
  --color-blue: #1f68a8;
  --color-deepblue: #00295e;
  --color-white: white;
  --color-black: #464654;
  --color-gray: #E8E8E8;
  --color-orange: #FF8102;

   /* viewport */
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1440;

  /* font */
  --font-museo-sans: "museo-sans-condensed", sans-serif;
  --font-anton: "Anton SC", sans-serif;
  /* font-weight */
  --fontweight-regular: 400;
  --fontweight-medium: 500;
  --fontweight-bold: 700;
  --fontweight-black: 900;
  /* contents-mainWidth */
  --full-width: min(100%, 1920px);
  --main-width: min(95%, 1200px);
  --sub-width: min(90%, 1280px);
  /* letter-spacing */
  --wide-letter: .2em;
  /* easing */
  --easing: cubic-bezier(0.2, 1, 0.2, 1);
  --transition: 0.8s var(--easing);
  /* border-radius */
  --radius-20: 2rem;
  --radius-30: 3rem;
  --radius-40: 4rem;
  --radius-50: 5rem;
  --radius-60: 6rem;
  --radius-80: 8rem;
  --radius-full: 999em;
  --display-property: revert;
}

/* 各種base計算式設定 */
*,
::before,
::after{
  /* font-clampサイズ設定 */
  --clamp-root-font-size: 10;
  --cqi-content-width: 1290;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --intercept: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --preffered-value: calc(
    var(--intercept) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );
   /* clamp-余白サイズ設定 */
  --one-cqi-px: calc(var(--cqi-content-width) / 100);
  --cqi-value: calc(var(--clamp-cqi-max) / var(--one-cqi-px));
  --cqi-calculated: calc(var(--cqi-value) * 1cqi);
  --clamp-cqi: clamp(
                calc(var(--clamp-cqi-min) / var(--clamp-root-font-size) * 1rem),
                var(--cqi-calculated),
                calc(var(--clamp-cqi-max) / var(--clamp-root-font-size) * 1rem)
  );

  font-size: var(--clamp);
}

:where(:root) {
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  line-break: strict; /* 禁則処理を厳格に適用 */
}


html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* Noto Sans JPを @font-face でローカルフォントを優先 */
@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
}

body {
  position: relative;
  font-family: "Local Noto Sans JP", "Noto Sans JP", Arial, Meiryo, "Yu Gothic", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: var(--fontweight-regular);
  line-height: 1.5;
  color: var(--color-black);
  background-color: var(--color-yellow);

  --clamp-min: 14;
  --clamp-max: 16;
}

a{
  transition: var(--transition);
}

@media (any-hover: hover) {
  a:hover {
    opacity: 0.8;
    transition: var(--transition);
  }
}


}
/* /////@layer base */

@layer priority{

/* 共通パーツ */
.pc-only {
  display: var(--display-property);

  @media (width <= 599px) {
    display: none;
  }
}

.sp-only {
  display: none;

  @media (width <= 599px) {
    display: var(--display-property);
  }
}

.over-flow-clip {
  overflow-x: clip;
}

/* gsap設定用 */
.js-fixed{
  height: 100vh;

  @media (width <= 599px){
    height: 170vh;
  }
}

.js-fixed__inner{
  display: grid;
  place-content: center;
  height: 100%;
}

.js-sticky {
  position: sticky;
  top: var(--offset);
  height: calc(var(--visual-contents-height) - var(--offset));
  overflow: hidden;
}

/* スマホ画像全幅 */
.m-sp-full-width{
  @media (width <= 599px){
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

}

}

/* /////@layer priority */


@layer components {
/* l-*******レイアウトパーツ */
.l-section {
  width: 100%;
  margin-inline: auto;
}

.l-section.-gray{
  --deco-height: 10.5vw;

  position: relative;
  margin-top: var(--deco-height);
  background-color: var(--color-gray);

  &::before{
    position: absolute;
    top: calc(var(--deco-height) * -1);
    left: 0;
    width: 100%;
    height: var(--deco-height);
    content: "";
    background-image: url("../images/section_deco_top.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }

  &::after{
    position: absolute;
    bottom: calc(var(--deco-height) * -1);
    left: 0;
    width: 100%;
    height: var(--deco-height);
    content: "";
    background-image: url("../images/section_deco_bottom.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
}

.l-contents {
  container-type: inline-size;
  width: var(--main-width);
  padding: var(--clamp-cqi) 0;
  margin-inline: auto;

  --clamp-cqi-max: 170;
  --clamp-cqi-min: 85;

  @media (width <= 599px){
    --main-width: 90%;
  }
}

.l-contents__inner{
  width: min(90%, 1135px);
  margin-inline: auto;
}

.l-inline-size{
  container-type: inline-size;
}

/* m-*******モジュールパーツ */
.m-tittle-block {
  position: relative;
  z-index: 2;
  width: fit-content;
  font-family: var(--font-fira-sans);
  font-weight: var(--fontweight-black);
  letter-spacing: .3rem;

  --clamp-min: 40;
  --clamp-max: 60;
}

.m-tittle-wrap{
  position: relative;
  margin-bottom: var(--clamp-cqi);

  --clamp-cqi-max: 42;
  --clamp-cqi-min: 38;
}

.m-tittle-wrap.-center{
  width: fit-content;
  margin-inline: auto;

  .tittle-deco{
    left: -11%;
    width: min(110px, 50%);
  }

  @media (width <= 599px){
    .tittle-deco{
      left: -10%;
      width: min(70px, 35%);
    }
  }

}

.m-tittle-block__sub{
  position: relative;
  z-index: 2;
  width: fit-content;
  margin-top: 2.4rem;
  font-weight: var(--fontweight-black);
  line-height: 2.5rem;
  letter-spacing: .25rem;

  --clamp-max:25;
  --clamp-min:14;

  @media (width <= 599px){
    margin-top: 0;
  }
}

.m-section-title {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center; /* コンテンツ全体を中央寄せ */
  width: 100%;
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(1.6rem, 3vw, 3rem);
}

.m-section-title__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  width: min(70%, 500px); /* 背景帯の左端(右端)の開始位置を決める幅 */

  --tittle-overlap: 2;

  @media (width <= 599px) {
    width: 85%;
  }
}

.m-section-title__wrapper.-en {
  z-index: 2;
  padding-block: clamp(0.8rem, 1.5vw, .8rem);

}

.m-section-title__wrapper.-ja {
  z-index: 1;
  padding-block: clamp(0.6rem, 1vw, 0.8rem);
  margin-top: calc(var(--tittle-overlap) * -1rem); /* 英タイトルと重なるように上に移動 */
}

/* 疑似要素で背景を画面端まで描画する */
.m-section-title__wrapper::before {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 100vw; /* 画面端まで確実に届くように伸ばす */
  content: "";
}

/* 右から出てくるパターン (-from-right) */
.m-section-title.-from-right .m-section-title__wrapper::before {
  left: 0; /* wrapperの左端から右へ伸ばす */
  border-radius: 100vmax 0 0 100vmax; /* 左側だけ半円 */
}

/* 左から出てくるパターン (-from-left) ※他セクションでの利用想定 */
.m-section-title.-from-left .m-section-title__wrapper::before {
  right: 0; /* wrapperの右端から左へ伸ばす */
  left: auto;
  border-radius: 0 100vmax 100vmax 0; /* 右側だけ半円 */
}

/* 背景色の適用 */
.m-section-title__wrapper.-en::before {
  background-color: var(--color-blue);
}

.m-section-title__wrapper.-ja::before {
  background-color: white;
}

.m-section-title.m-section-title.-from-right .m-section-title__wrapper.-ja::before {
  left: 7% ;
}

.m-section-title.m-section-title.-from-left .m-section-title__wrapper.-ja::before {
  right: 7% ;
}

/* テキストスタイル */
.m-section-title__en {
  font-family: var(--font-museo-sans);
  font-weight: var(--fontweight-black);
  line-height: 1.2;
  color: white;
  text-align: center;
  letter-spacing: 0.02em;
  word-break: keep-all;


  --clamp-max: 48;
  --clamp-min: 32;
}

.m-section-title__ja {
  padding-top: calc(var(--tittle-overlap) * .8rem); /* 英タイトルと重なるように下に移動 */
  font-weight: var(--fontweight-black);
  color: var(--color-blue);
  text-align: center;
  letter-spacing: 0.05em;

  --clamp-max: 24;
  --clamp-min: 18;
}

.m-section-title__lead {
  width: min(70%, 640px);
  font-weight: var(--fontweight-bold);
  color: white;
  /* filter: drop-shadow(30px 30px 15px rgb(0 0 0 / 0.8)); */
  text-shadow: 0 0 10px #333,
               0 0 10px #333,
               0 0 10px #333,
               0 0 10px #333,
               0 0 10px #333;
  letter-spacing: 0.32rem;

  --clamp-max:32;
  --clamp-min:20;

  & span{
    --clamp-max:40;
    --clamp-min:30;
  }

  @media (width <= 599px){
      width: 100%;
      padding-left: 1em;
      letter-spacing: revert;
  }
}

.m-text-block {
  width: 100%;
  font-weight: var(--fontweight-bold);
  line-height: 1.8;
  text-align: center;

  --clamp-max:16;
  --clamp-min:14;
}

.m-text-block.-tittle-sub{

  @media (width <= 599px){
    word-break: keep-all;
  }
}

.m-column-list {
  display: grid;
  grid-template-columns: repeat(var(--column), 1fr);

  --column: 2;

  @media (width <= 599px){
    --column: 1;
  }
}

.m-subgrid-item{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--row-num);
}

.m-flex-2col-item{
  --breakpoint: 599px;
  --static-column: 302px;
  --fluid-column: calc(var(--breakpoint) - var(--static-column));

  display: block flex;
  reading-flow: flex-visual;
  flex-wrap: wrap;

  & > :nth-child(even) {
    flex-basis: var(--fluid-column);
    flex-grow: 9999;
  }

  & > :nth-child(odd) {
    flex-basis: var(--static-column);
    flex-grow: 1;
    text-align: center;
  }

}

.m-parts-wrap {
  position: relative;
}

.m-button-parts {
  --unit-block-size: 2rem;
  --unit-inline-size: 2rem;
  --clamp-max:20;
  --clamp-min:16;

  position: relative;
  display: flex;
  /* gap: 1.2rem; */
  align-items: center;
  justify-content: center;
  width: min(65%, 260px);
  padding: var(--unit-block-size) var(--unit-inline-size);
  margin-inline: auto;
  font-family: var(--font-fira-sans);
  font-weight: var(--fontweight-black);
  line-height: 1;
  color: white;
  text-align: center;
  letter-spacing: 1.25px;
  border: 2px solid white;
  transition: var(--transition);

  @media (width <= 599px){
    --unit-block-size: 1.4rem;
    --unit-inline-size: 1.4rem;
  }
}

/* @media (any-hover: hover) {
  .m-button-parts:hover{
    color: white;
    background-color: var(--color-blue);
    opacity: 1;
    transition: var(--transition);
    transform: scale(1.08);
  }

  .m-button-parts.-blue:hover{
    color: var(--color-blue);
    background-color: white;
    border: 2px solid var(--color-blue);
    border-radius: var(--radius-40);
    opacity: 1;
    transition: var(--transition);
  }

} */


.m-stack-block{
  display: grid;
  grid-template-areas: 'stack';

  > *{
    grid-area: 1 / 1;
  }
}

.m-grid-text{
  display: grid;
  grid-template-columns: max-content 1fr;
}


/* 画像が背景のコンテンツ */
.m-visual-wrap{
  position: relative;
  width: 100%;

  --visual-contents-height: calc( 1px * var(--visual-height));

  height: var(--visual-contents-height);
  aspect-ratio: 1920 / var(--visual-height);
  overflow: hidden;

  picture{
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &:has(.m-fixed-bg){
    clip-path: inset(0);
  }

  @media (width <= 599px){
    aspect-ratio: 390 / var(--visual-contents-height);
  }
}

.m-visual-wrap__center-contents{
  position: absolute;
  inset: 0;
  margin: auto;
}

.m-broken-grid-layout{
  --layout-width: 1290;
  --fluid-ratio: calc(1 / var(--layout-width) * 100cqi);

  container-type: inline-size;
  display: grid;
  grid-template-areas: 'stack';

  & > *{
    grid-area: stack;
    inline-size: calc(var(--box-w) * var(--fluid-ratio));
    /* aspect-ratio: 16 / 9;の場合付与 */
    aspect-ratio: var(--box-r, 16 / 9);
    margin-block-start: calc(var(--box-y, 0) * var(--fluid-ratio));
    margin-inline-start: calc(var(--box-x, 0) * var(--fluid-ratio));
    object-fit: cover;
  }
}

.m-fixed-bg {
  position: fixed;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}


.m-radius{
  --radius: var(--radius-80);

  &.-top-right{
  border-top-right-radius: var(--radius);
  }

  &.-top-left{
  border-top-left-radius: var(--radius);
  }

  &.-bottom-right{
  border-bottom-right-radius: var(--radius);
  }

  &.-bottom-left{
  border-bottom-left-radius: var(--radius);
  }

  @media (width <= 599px){
    --radius: var(--radius-40);
  }

}

/* line-clamp */
.m-line-clamp {
  display: -webkit-box;
  overflow-block: clip;
  -webkit-box-orient: block-axis;
  -webkit-line-clamp: var(--line-clamp--limit, 3);

  @supports not (overflow-block: clip) {
    overflow-y: clip;
  }
}

.m-orange{
  color: var(--color-orange);
}

.horse-obi{
  width: min(70%, 725px);
  padding: .5rem 1em;
  margin-inline: auto;
  font-weight: var(--fontweight-bold);
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-blue);
  border-radius: var(--radius-full);

  --clamp-max: 33;
  --clamp-min: 18;
}

.horse-text{
  font-weight: var(--fontweight-black);
  color: var(--color-blue);
  text-align: center;
  word-break: keep-all;

  --clamp-max: 33;
  --clamp-min: 18;
}

/* 手動改行 */
.m-br {
  display: contents;

  &:lang(ja) {
    display: block flow;
  }
}

.m-wbr {
  display: contents;

  &:lang(ja) {
    display: inline flow-root;
  }
}

.c-copy-right{
  width: fit-content;
  margin-left: auto;

  --clamp-max: 14;
  --clamp-min: 10;
}

/* gsap関連 */

.js-text-flow > *{
  visibility: hidden;
  opacity: 0;
}

.js-change-color {
  background-color: #176bb8;
}

.js-horizontal-scroll_wrapper {
  overflow: clip;

  --scroll-content-height: 60dvh;

  @media (width <= 599px){
    --scroll-content-height: 75svh;
  }
}

.js-horizontal-scroll_content {
  display: flex;
  /* width: max-content;  *//* 重要 */
  padding: revert;
  margin-inline: revert;

  & > * {
    height: var(--scroll-content-height);
  }
}

/* @media (any-hover: hover) {
  .js-text-hover:hover {
    opacity: revert;
  }
} */

.js-infinite-slider {
  width: 100%;
  overflow: hidden;
}

.js-infinite-slider_track {
  display: flex;
  gap: 1.2rem;          /* アイテム間の余白はCSSで管理 */
  width: 100%; /* 中身に合わせて広がる */
  will-change: transform;
}

.js-infinite-slider_item {
  flex-shrink: 0;
  width: min(50%, 500px);
}

}
/* /////@layer components */


@layer utility {

/* header */
.l-header {
  position: fixed;
  top: 1.8rem;
  left: 0;
  z-index: 99;
  width: 100%;
  container-type: inline-size;

  @media (width <= 599px){
    position: fixed;
    top: 1.6rem;
    left: 0;
    z-index: 999;
    width: 100%;
    overflow-x: clip;

    &::before{
      top: -20px;
      height: 195%;
    }
  }
}

.header-inner {
  --split: clamp(195px, 27vw, 300px);

  display: flex;
  align-items: center;
  width: min(95%, 1800px);
  padding-right: 2vw;
  margin-inline: auto;
  /* background-color: rgb(255 255 255 / 0.7); */
  background: linear-gradient(105deg, oklch(from var(--color-blue) calc(l - 0.12) c h / 0.8) 0 var(--split), rgb(255 255 255 / .6) var(--split) 100%);
  border-radius: var(--radius-40);

  @media (width <= 599px) {
    --split: clamp(180px, 27vw, 300px);

    width: 98%;
    height: min(50px, 12vw);
    padding: 0 1.4rem;
  }

  /* @container (600px <= width <= 930px){
    flex-wrap: wrap;
    row-gap: 1.6rem;
    justify-content: center;
  } */

}

.header-logo{
  position: absolute;
  display: grid;
  place-items: center;
  width: min(25%, 234px);
  margin-left: 1%;

  a{
    display: grid;
    margin-top: -.5vw;

    @media (width <= 599px){
      display: revert;
      flex: 0 1 40%;
    }
  }

  @container (width <= 1750px){
    & a{
      margin-top: 0;
    }
  }

  @media (width <= 599px){
    z-index: 999;
    width: 35%;
    margin-left: revert;
  }
}

.header-navi{
  width: min(64vw, 1200px);
  margin-left: auto;
}

.header-naviList {
  /* display: grid;
  grid-template-columns: repeat(9, auto); */
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--clamp-cqi);
  align-items: center;
  justify-content: flex-end;
  container-type: inline-size;

  --clamp-cqi-max: 24;
  --clamp-cqi-min: 16;
  --cqi-content-width: 1500;


  @container (width <= 1750px){
    justify-content: center;
  }

}

.header-naviList__data {
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--font-museo-sans);
  font-weight: var(--fontweight-black);
  /* padding: 2.4rem 0; */
  line-height: 30px;
  color: var(--color-blue);
  text-align: center;

  --clamp-max: 22;
  --clamp-min: 18;

  a{
    width: 100%;
    height: 100%;
    padding: 2.6rem 0;

    /* --clamp-cqi-max: 26;
    --clamp-cqi-min: 16;
    --cqi-content-width: 1200; */
  }

  @container (width <= 1100px){
    & a{
      padding: .8rem 0;
    }
  }


}


/* ////スマホnavi///// */
#navTgl {
  display: none;
}

@media (width <= 599px) {
  /* ハンバーガーボタンのスタイル（頂いたものそのまま + z-index強化） */
  .open,
  .close {
    position: fixed;
    top: 17px;
    right: 0;
    /* ★修正: メニュー展開時もボタンが最前面に来るよう大きく設定 */
    z-index: 9999;
    cursor: pointer;
  }

  .open {
    width: 70px;
    height: 50px;
    margin: 0;
    transition: background 0.5s, transform 0.5s cubic-bezier(0.76, 0.52, 0.29, 1.25);
    /* ボタンの文字などのスタイルはそのまま維持 */
    & i {
      position: absolute;
      right: 27%;
      bottom: 5%;
      font-family: var(--font-fira-sans);
      font-size: 1.2rem;
      font-style: normal;
      font-weight: var(--fontweight-bold);
      color: white;
      /* 背景色が変わっても見えるように反転色指定を推奨 */
      mix-blend-mode: difference;
    }
    .off-menu { display: none; }
  }

  /* ハンバーガーの線のアニメーション（頂いたものそのまま） */
  .open span, .open::before, .open::after {
    position: absolute;
    top: 40%;
    left: 30%;
    width: 40%;
    content: "";
    border-bottom: 2px solid var(--color-deepblue);
    border-radius: 5px;
    transition: transform 0.3s cubic-bezier(0.76, 0.52, 0.29, 1.25);
    /* transform: translateX(20%); */
  }

  .open::before {
    top: calc(32%);
    transform: translateY(-4px);
  }

  .open::after {
    top: calc(48%);
    transform: translateY(4px);
   }

  .close { z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: background 0.5s;
  }
  #navTgl:checked + .open span { transform: scaleX(0); }
  #navTgl:checked + .open .on-menu { display: none; }
  #navTgl:checked + .open .off-menu { display: block; }

  #navTgl:checked + .open::before { top: calc(40% - 1px);
    width: 40%;
    border-color: white;
    transform: rotate(30deg);
  }

  #navTgl:checked + .open::after { top: calc(40% - 1px);
    width: 40%;
    border-color: white;
    transform: rotate(-30deg);
  }


  /* ドロワーメニュー */
  .menu {
    position: fixed;
    top: -2rem;
    right: 0;
    z-index: 99;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto;
    grid-auto-columns: 1fr;
    gap: 3rem;
    place-items: flex-start flex-end;
    width: 100%;
    height: 100vh;
    height: calc((1vh * 105) + 2rem);
    padding: 2rem 0 3rem;
    margin: auto;
    overflow-y: scroll;
    color: white;
    text-align: center;
    visibility: hidden;
    background-color: oklch(from var(--color-blue) calc(l - 0.32) c h / 0.8);
    opacity: 0;
  }

  .header-naviList {
    gap: 0 3rem;
    width: 80%;
    padding: 0;
    margin-top: 24vw;
    /* overflow-y: scroll; */
  }

  .header-naviList__data {
    width: 100%;
    padding: 1.8rem 0 .8rem;
    overflow: hidden;
    color: white;

    --clamp-min: 24;

    &:not(:last-of-type) {
      border-bottom: 1px solid white;
    }

    a{
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      padding: revert;
    }
  }
}

/* mainvisual */
.mv-top{
  position: relative;
  width: 100%;
  height: 638px;
  aspect-ratio: 1920 / 638;
  overflow: clip;
  clip-path: inset(0);

  @media (width <= 599px){
    height: 59vh;
  }

  picture{
    display: block;
    width: 100%;
    height: min(94vw, 638px);

    @media (width <= 599px){
       height: min(130vw, 405px);
    }
  }

  :is(picture,.m-fixed-bg) img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 28% center;
  }

}

.mv-top__logo{
  width: 100%;
  aspect-ratio: 515 / 276;

  .mv-top__svg{
    fill: white;
  }

  @media (width <= 599px){
    top: 30%;
  }
}

.mv-lead-list{
  display: grid;
  row-gap: .8rem;
  align-self: center;
  width: min(36vw, 540px);
  margin-top: 30rem;

  @media (width <= 599px){
    width: 45vw;
    margin-top: -2rem;
  }
}

.mv-lead-list__lead{
  --clamp-max: 24;
  --clamp-min: 14;

  position: relative;
  padding: 1.2rem 0;
  font-weight: var(--fontweight-black);
  color: var(--color-blue);
  text-align: center;
  background-color: rgb(255 255 255 / 0.75);
  opacity: 0; /* Block Reveal中は文字は見えない */

  @media (width <= 599px){
    padding: 1rem 0;
  }
}


/* Slide設定 */
/* 矢印のクリック範囲など */
.button {
  z-index: 1;
  width: 33px;
  height: 33px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  transition: 0.2s;
}
/* 矢印共通のスタイル */
.button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 33px;
  height: 33px;
  margin: auto;
  content: "";
}

.button::after {
  transition: opacity 0.5s;
}
/* 前の矢印 */
.splide .prev::after {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50px;
  height: 40px;
  content: "";
  background-image: url("../images/top/prev.svg");
  background-repeat: no-repeat;
  background-size: contain;

  @media (width <= 599px){
    left: -85%;
    width: 40px;
  }
}
/* 次の矢印 */
.splide .next::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 40px;
  content: "";
  background-image: url("../images/top/next.svg");
  background-repeat: no-repeat;
  background-size: contain;

  @media (width <= 599px){
    width: 40px;
  }
}


.splide{
  .slide-media {
    position: relative;
    overflow: clip;
  }

  .slide-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.button:disabled::after {
  opacity: .5;
  transition: opacity 0.5s;
}

/* ANCHOR: TOP */
.top{
  position: relative;
  /* background: linear-gradient(0deg, #FFFF40 10%, #1BEDB1 62%); */

  .m-section-title{
    width: 72%;
    padding-top: revert;
    /* margin-top: min(-1vw, -40px); */
    margin-top: min(-5vw, -150px);
    word-break: keep-all;
  }

  &::before{
    position: absolute;
    top: -17vw;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    content: "";
    background:url("../images/main_back.svg"),linear-gradient(0deg, #FFFF40 10%, #1BEDB1 62%) ;
    background-repeat: no-repeat;
    background-position: center -280px;
    background-size: 100%;
  }

  .m-section-title__en{
    width: min(92%, 690px);
    line-height: .8;
    letter-spacing: 3px;

    --clamp-max: 30;
    --clamp-min: 24;

    & span{
      --clamp-max: 38;
      --clamp-min: 28;
    }

    @media (width <= 599px){
      --clamp-min: 18;


    }
  }

  .m-section-title__ja{
    width: min(86%, 630px);
  }

  .m-section-title__wrapper{
    width: min(80%, 750px);
  }

  .m-section-title__wrapper.-en{
    padding-block: 1.8rem;
  }

  .m-section-title__wrapper.-ja{
    margin-top: revert;
  }

  .m-section-title__wrapper.-ja::before{
    background-color: rgb(255 255 255 / .8);
  }

  .m-section-title.m-section-title.-from-left .m-section-title__wrapper.-ja::before{
    right: 0;
  }

  .main-character{
    position: absolute;
    top: -10vw;
    right: 4vw;
    width: min(720px, 40%);
    aspect-ratio: 658 / 525;

    & img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .js-infinite-slider{
    margin-top: 10rem;;
  }

  @media (width <= 599px){
    .m-section-title{
      align-items: flex-start;
      width: 100%;
      margin-top: -40vw;
    }

    .m-section-title__wrapper{
      width: 95%;
    }

    .js-infinite-slider{
      margin-top: 5rem;;
    }

  }


}

.sponsor__text{
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(70%, 566px);
  margin-top: .5rem ;
  margin-left: -3vw;
  font-weight: var(--fontweight-bold);
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-orange);
  border-radius: var(--radius-full);

  --clamp-max: 20;
  --clamp-min: 12;

  & img{
    width: min(40%, 173px);
  }

  @media (width <= 599px){
      width: 90%;
      padding: .5rem;
      margin-inline: auto;
  }
}

.top-inner{
  display: flex;
  align-items: center;
  margin-inline: auto;

  @media (width <= 1699px){
      justify-content: space-between;
  }

  @media (width <= 1200px){
      flex-direction: column;
  }

  @media (width <= 599px){
      gap: 2rem;
  }
}

.main-stage{
  /* position: absolute;
  top: 9vw;
  right:calc(50% - 600px); */
  /* right: calc(1% + (1920px - 100vw) * -0.11); */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  width: fit-content;
  margin-left: -14vw;
}

.main-stage__tittle{
  display: block;
  width: min(223px, 100%);
  padding: 0.2rem 1rem;
  font-weight: var(--fontweight-bold);
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-blue);

  --clamp-max: 18;
  --clamp-min: 13;
}

.main-stage__text{
  --clamp-max: 33;
  --clamp-min: 24;

  font-weight: var(--fontweight-black);
  color: var(--color-blue);
}


/* セクション固有: event-overview */
.event-overview {
  padding-bottom: clamp(6rem, 10vw, 10rem);
  overflow-x: clip; /* 100vwに伸ばした背景による横スクロールを防止 */
  background-color: var(--color-yellow);

  .l-contents{
    padding-top: 3.2rem;
  }
}

.m-visual-wrap.-event{
  /* --visual-height: 735; */

  margin-top: -6vw;

  @media (width <= 599px){
    --visual-height: 260;

    & img{
      object-position: 85% center;
    }
  }
}

.event-overview__hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.85fr 1fr;
  column-gap: 3rem;
  align-items: end;
  width: var(--main-width);
  margin-inline: auto;
  margin-top: -4vw;
}

.event-overview__hero img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.event-overview__title-area {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.event-overview__silhouette {
  position: absolute;
  /* 写真の下部に被さるように上方向へ移動 */
  top: calc(clamp(3rem, 6vw, 5rem) * -1);
  width: min(25%, 260px);

  &.-left {
    left: 0;
  }

  &.-right {
    right: 0;
  }

  @media (width <= 599px) {
    top: calc(clamp(2rem, 4vw, 3rem) * -1);
    width: min(35%, 150px);
  }
}

.event-overview__main-title {
  color: var(--color-blue);
  text-align: center;
}

.event-overview__main-title-jp {
  display: block;
  font-size: clamp(2.8rem, 4.5vw, 5.2rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.event-overview__main-title-en {
  display: block;
  margin-top: 1rem;
  font-size: clamp(1rem, 1.5vw, 1.8rem);
  font-weight: bold;
  letter-spacing: 0.08em;
}

.event-overview__content-wrapper {
  position: relative;
  z-index: 2;

  @media (width <= 599px){
    padding-bottom: 4rem;
  }
}

.event-overview__content {
  padding-block: clamp(4rem, 8vw, 8rem);
  padding-inline: clamp(2rem, 4vw, 4rem);
  text-align: center;
  background-color: white;
}

.event-overview__text {
  font-weight: var(--fontweight-bold);
  line-height: 1.8;
  color: var(--color-black);
  word-break: keep-all;

  --clamp-max: 32;
  --clamp-min: 18;

  &.-bold {
    margin-top: clamp(2rem, 3vw, 3rem);
    font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  }

  @media (width <= 599px){
      word-break: normal;
  }
}

.event-overview__content-image{
  display: block;
  width: 100%;
  height: auto;
  margin: var(--clamp-cqi) 0;

  --clamp-cqi-max: 54;
  --clamp-cqi-min: 32;

}

.event-desc{
  display: grid;
  grid-template-columns: 4fr auto 4fr;
  gap: 1.6rem;
  place-items: center;
  margin-bottom: 6rem;

  @media (width <= 599px){
    grid-template-columns: 1fr;

    & > :nth-child(2){
      width: 10%;
    }
  }
}


/* ANCHOR: information */
.information{
  position: relative;

  &::before{
    position: absolute;
    top: 9vw;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background:url("../images/information_back.svg"),linear-gradient(0deg, #FFFF40 17%, #1BEDB1 73%) ;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
  }

  .l-contents{
    width: min(95%, 1340px);
  }

  .m-section-title{
    margin-bottom: 7rem;
  }

  @media (width <= 599px){
    .m-section-title{
      margin-bottom: 3rem;
    }
  }

}

.performer-list-wrapper{
  padding: 4rem 7rem;

  @media (width <= 599px){
    padding: 4rem 2rem;
  }
}

.performer-list-wrapper.-bg-blue{
  margin-bottom: 2.4rem;
  background-color: rgb(104 186 241 / 0.9);

  & > * {
    color: var(--color-white);
  }
}

.performer-list-wrapper.-bg-orange{
  background-color: rgb(255 147 39 / 0.9);

  & > * {
    color: var(--color-white);
  }
}

.performer-list{
  --column: 4;

  gap: var(--clamp-cqi);

  --clamp-cqi-max: 40;
  --clamp-cqi-min: 24;

  @media (width <= 599px){
    --column: 2;
    --clamp-cqi-min: 16;

    .character-stack__child{
      right: -16cqi;
      bottom: -5cqi;
    }

    .performer-list__data.-sp-col1{
      grid-column: 1 / -1;
          justify-self: center;
          width: 47%;
    }
  }
}

.performer-list.-col3{
  --column: 3;

  width: min(100%, 900px);
  margin-inline: auto;

  @media (width <= 599px){
     grid-template-columns: repeat(2,1fr);
  }
}



.performer-list.-col1{
  --column: 1;

  width: min(100%, 295px);
  margin-inline: auto;
}

.performer-list__name{
  font-weight: var(--fontweight-bold);

  --clamp-max: 24;
  --clamp-min: 16;

  & span{
    display: block;

    --clamp-max: 16;
    --clamp-min: 12;
  }

  & span.name-mini{
    display: inline-block;

    --clamp-max: 20;
    --clamp-min: 12;
  }


}

.performer-list-tittle-wrapper{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 2.4rem;
  align-items: center;
  margin-bottom: 4rem;

  & figure{
    width: min(100%, 162px);
  }

  .performer-list-tittle{
    margin-bottom: 0;
  }

  .performer-list__name{
    --clamp-max: 24;
    --clamp-min: 18;

    & span{
      display: inline-block;

      --clamp-max: 16;
      --clamp-min: 14;
    }
  }

  @media (width <= 599px){
    grid-template-columns: 1fr;
    row-gap: 1rem;
    justify-items: center;

    & figure{
      width: 50%;
      text-align: center;
    }
  }
}

.performer-list-tittle{
  margin-bottom: 4rem;
  font-weight: var(--fontweight-black);
  text-align: center;

  --clamp-max: 40;
  --clamp-min: 18;
}

.character-stack{
  position: relative;
}

.character-stack__child{
  position: absolute;
  right: -9.5cqi;
  bottom: -2.5cqi;
}

.section-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}

/* *汎用モジュールパーツ */
.timetable-title {
  /* 3. 表示・ボックス */
  display: flex;
  flex-direction: column;
  gap: clamp(5.6rem, 8vw, 10rem);
  align-items: center;
  margin-top: 8rem;

  @media (width <= 599px){
      margin-top: 4rem;
  }
}

.timetable-title__en {
  /* 6. タイポグラフィ */
  font-family: var(--font-anton);
  line-height: 1;
  color: var(--color-blue);
  letter-spacing: 0.05em;

  --clamp-max: 50;
  --clamp-min: 32;
}

.timetable-title__date-wrap {
  /* 3. 表示・ボックス */
  display: flex;
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
  justify-content: center;
  /* 4. サイズ */
  width: min(100%, 958px);
  margin-bottom: 2rem;
}

.timetable-title__date-wrap::before,
.timetable-title__date-wrap::after {
  /* 3. 表示・ボックス */
  flex-grow: 1;
  /* 4. サイズ */
  max-width: 280px;
  height: 3px;
  margin-top: 2rem;
  /* 9. その他 */
  content: "";
  /* 7. 背景・境界 */
  background-color: var(--color-blue);
}

.timetable-title__date {
  /* 3. 表示・ボックス */
  display: flex;
  align-items: baseline;
  /* 6. タイポグラフィ */
  font-family: var(--font-number);
  font-weight: var(--fontweight-bold);
  color: var(--color-blue);
}

.timetable-title__year {
  font-family: var(--font-anton);
  /* 6. タイポグラフィ */
  letter-spacing: 0.02em;

  --clamp-max: 50;
  --clamp-min: 40;
}

.timetable-title__day {
  /* 5. 余白 */
  margin-inline: 0.8rem;
  font-family: var(--font-anton);
  /* 6. タイポグラフィ */
  letter-spacing: 0.02em;

  --clamp-max: 75;
  --clamp-min: 54;
}

.timetable-title__badge {
    position: relative;
    top: -1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.4rem, 4vw, 5rem);
    height: clamp(2.4rem, 4vw, 5rem);
    padding-right: .3rem;
    color: var(--color-white);
    letter-spacing: -0.2em;
    background-color: var(--color-blue);
    border-radius: var(--radius-full);

    --clamp-max: 14;
    --clamp-min: 8;

    @media (width <= 599px){
      top: -1rem;
    }
}

.timetable-title__badge.-big{
  --clamp-max: 20;
  --clamp-min: 16;
}

.timetable-image {
  /* 3. 表示・ボックス */
  display: block;
  width: fit-content;
  margin-inline: auto;
  margin-top: clamp(3.2rem, 4vw, 5.8rem) ;
  margin-bottom: 3.2rem;

}

.timetable-note{
  font-weight: var(--fontweight-bold);
  text-align: center;

  --clamp-max: 24;
  --clamp-min: 14;
}

.mini-cast{
  align-self: flex-end;

  & figure{
    width: min(60%, 160px);
    aspect-ratio: 1 / 1;
  }

  .performer-list__name{
    --clamp-max: 16;
    --clamp-min: 14;

    text-align: center;
  }
}


/* 料金テーブル */
  .price-table {
    /* 4. サイズ */
    width: 100%;
    /* min-width: 940px; SP時はスクロールさせる */
    /* 3. 表示・ボックス */
    table-layout: fixed;
  }

  .price-table__th,
  .price-table__td {
    /* 5. 余白 */
    padding: 2.4rem 1rem;
    /* 6. タイポグラフィ */
    text-align: center;
    /* 9. その他 */
    vertical-align: middle;
    /* 7. 背景・境界 */
    border: 1px solid var(--color-black);

    @media (width <= 599px) {
      padding: 1.6rem 0.5rem;
    }
  }

  .price-table__td{
    background-color: var(--color-white);

    & span{
      --clamp-max: 20;
      --clamp-min: 8;

      display: block;
      padding: .6rem;
      word-break: keep-all;
    }
  }

  .price-table__th{
    background-color: var(--color-white);


  }

  .price-table__th.-empty {
    /* 4. サイズ */
    width: 35%;
    /* 7. 背景・境界 */
    background-color: var(--color-blue);

    @media (width <= 599px){
        width: 30%;
    }
  }

  .price-table__td.-blue {
    /* 6. タイポグラフィ */
    font-weight: var(--fontweight-black);
    color: var(--color-white);
    /* 7. 背景・境界 */
    background-color: var(--color-blue);

    --clamp-max: 28;
    --clamp-min: 16;
  }

  .price-table__th.-date {
    /* 6. タイポグラフィ */
    font-weight: var(--fontweight-bold);
    color: var(--color-blue);
    white-space: nowrap;
  }

  .price-table__year {
    /* 6. タイポグラフィ */
    font-family: var(--font-anton);
    letter-spacing: 0.02em;
    /* 9. その他 */
    vertical-align: baseline;

    --clamp-max: 40;
    --clamp-min: 20;

    @media (width <= 799px){
        display: block;
    }
  }

  .price-table__day {
    /* 5. 余白 */
    margin-inline: 0.4rem;
    /* 6. タイポグラフィ */
    font-family: var(--font-anton);
    letter-spacing: 0.02em;
    /* 9. その他 */
    vertical-align: baseline;

    --clamp-max: 55;
    --clamp-min: 24;
  }

  .price-table__badge-day {
    /* 2. 位置 */
    position: relative;
    top: -.6em;
    /* 3. 表示・ボックス */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 4. サイズ */
    width: 8rem;
    height: 5rem;
    /* 6. タイポグラフィ */
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: var(--fontweight-bold);
    color: var(--color-white);
    /* 9. その他 */
    vertical-align: baseline;
    /* 7. 背景・境界 */
    background-color: var(--color-blue);
    border-radius: 50%;

    @media (width <= 599px){
        top: -0.5em;
        width: 4rem;
        height: 3rem;
        font-size: 1rem;
    }
  }

  .price-table__badge-day.-mini{
    top: -1em;
    font-size: .8rem;
  }

  .price-table__price {
    /* 5. 余白 */
    margin-bottom: 1.2rem;
    /* 6. タイポグラフィ */
    font-weight: var(--fontweight-black);

    --clamp-max: 32;
    --clamp-min: 18;
  }

  .price-table__price span {
    display: inline-block;
    margin-left: .2rem;
    /* 6. タイポグラフィ */
    font-weight: var(--fontweight-bold);

    --clamp-max: 22;
    --clamp-min: 10;

    @media (width <= 599px){
        padding: 0;
    }
  }

  .price-table__badge {
    /* 3. 表示・ボックス */
    display: inline-block;
    /* 5. 余白 */
    padding: 0.6rem 2.4rem;
    /* 6. タイポグラフィ */
    font-weight: var(--fontweight-black);
    color: var(--color-white);
    white-space: nowrap;
    /* 7. 背景・境界 */
    background-color: #B3B3B3;
    border-radius: var(--radius-full);

    --clamp-max: 22;
    --clamp-min: 16;

    @media (width <= 599px) {
      padding: 0.4rem 1.6rem;
      font-size: 1.2rem;
    }
  }

  /* スケジュールリスト */
  .schedule-list {
    /* 3. 表示・ボックス */
    display: flex;
    flex-direction: column;
  }

  .schedule-list__item {
    /* 3. 表示・ボックス */
    display: flex;
    gap: clamp(2rem, 5vw, 6rem);
    justify-content: center;
    /* 5. 余白 */
    padding-block: 2.4rem;
    /* 6. タイポグラフィ */
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: var(--fontweight-bold);
    /* 7. 背景・境界 */
    background-color: var(--color-white);

    --clamp-max: 24;
    --clamp-min: 18;

    @media (width <= 599px) {
      padding-block: 1.6rem;
    }
  }

  .schedule-list__item.-blue {
    /* 6. タイポグラフィ */
    color: var(--color-white);
    /* 7. 背景・境界 */
    background-color: var(--color-blue);
  }

  .schedule-list__date {
    /* 4. サイズ */
    width: 36rem;
    /* 6. タイポグラフィ */
    /* text-align: right; */

    @media (width <= 599px) {
      width: 18rem;
    }
  }

  .schedule-list__text {
    /* 4. サイズ */
    width: 10rem;
    /* 6. タイポグラフィ */
    text-align: left;

    @media (width <= 599px) {
      width: 10rem;
    }
  }

  /* 条件・注意リスト */
  .note-list {
    display: grid;
    justify-items: center;
    /* 4. サイズ */
    width: fit-content;
    /* 5. 余白 */
    margin-inline: auto;
    /* 6. タイポグラフィ */
    font-weight: var(--fontweight-bold);
    line-height: 2;

    --clamp-max: 32;
    --clamp-min: 24;
  }

  .note-list li {
    /* 2. 位置 */
    position: relative;
    /* 5. 余白 */
    padding-left: 1.5em;
  }

  .note-list li::before {
    /* 2. 位置 */
    position: absolute;
    left: 0;
    /* 9. その他 */
    content: "・";
  }

  .note-list ul {
    /* 5. 余白 */
    padding-left: 3em; /* 子リストのインデント */

    @media (width <= 599px) {
      padding-left: 1.5em;
    }
  }

  /* キャンセル不可バッジ */
  .cancel-badge {
    /* 3. 表示・ボックス */
    display: inline-block;
    /* 5. 余白 */
    padding: 1.6rem 8rem;
    /* 6. タイポグラフィ */
    font-weight: var(--fontweight-bold);
    color: var(--color-white);
    text-align: center;
    /* 7. 背景・境界 */
    background-color: var(--color-blue);
    border-radius: var(--radius-full);

    --clamp-max: 40;
    --clamp-min: 30;

    @media (width <= 599px) {
      padding: 1.2rem 4rem;
    }
  }


/* ANCHOR: チケット情報セクション固有スタイル */
.ticket{
  .l-contents{
    padding-top: 15cqi;
  }

  .horse-obi{
    margin-top: 8rem;
    margin-bottom: 7rem;
  }

  .horse-text{
    padding: 4rem;
    margin-bottom: 10rem;
    background-color: var(--color-white);
    border-radius: var(--radius-30);
  }

  @media (width <= 599px){
    .horse-obi{
      margin-top: 4rem;
      margin-bottom: 3.2rem;
    }

    .horse-text{
      padding: 4rem 2rem;
      margin-bottom: 5rem;
    }
  }
}

.ticket-info__lead {
  margin-top: 4rem;
  /* 5. 余白 */
  margin-bottom: 4rem;
  /* 6. タイポグラフィ */
  font-weight: var(--fontweight-bold);
  text-align: center;

  --clamp-max: 32;
  --clamp-min: 24;

  @media (width <= 599px){
    margin: 2rem 0;
  }
}

.ticket-info__lead.m-orange{
  margin-top: 8rem;

  @media (width <= 599px){
    margin-top: 4rem;

    --clamp-min: 18;
  }
}

.ticket-info__lead.-blue{
  margin-top: 10rem;
  margin-bottom: 3rem;
  color: var(--color-blue);

  --clamp-max: 40;
  --clamp-min: 24;

  @media (width <= 599px){
      margin-top: 4rem;
  }
}

.ticket-info__table-wrapper {
  /* 4. サイズ */
  width: 100%;
  /* 5. 余白 */
  margin-bottom: 1.6rem;
  /* 8. 視覚効果 */
  overflow-x: auto;
}

.ticket-info__annotation {
  /* 5. 余白 */
  margin-top: 1.6rem;
  /* 6. タイポグラフィ */
  font-weight: var(--fontweight-bold);

  --clamp-max: 24;

  -clamp-min: 18;
}

.ticket-info__badge-wrapper {
  /* 5. 余白 */
  margin-top: 6rem;
  /* 6. タイポグラフィ */
  text-align: center;
}

.ticket-info__dummy-image {
  /* 5. 余白 */
  margin-bottom: 6rem;
}

/*  ANCHOR: Other */

.other{
  .l-contents{
    --clamp-cqi-max: 30;
    --clamp-cqi-min: 20;
  }

  .horse-obi{
    margin: 6rem auto;
  }
}

.other-tittle{
  --clamp-max: 48;
  --clamp-min: 24;

  margin-bottom: 6rem;
  font-weight: var(--fontweight-black);
  color: var(--color-blue);
  text-align: center;
  letter-spacing: 0.05em;

  @media (width <= 599px){
      margin-top: 3.2rem;
      margin-bottom: 3.2rem;
  }
}

.other-note{
  --clamp-max: 24;
  --clamp-min: 14;

  font-weight: var(--fontweight-bold);
  text-align: center;
}

.clearfile{
  display: block;
  margin-inline: auto;
  margin-bottom: 5.4rem;

  @media (width <= 599px){
    margin-bottom: 2.4rem;
  }
}

.post-card{
  display: block;
  width: min(100%, 600px);
  margin-inline: auto;
  margin-bottom: 6rem;

  @media (width <= 599px){
    margin-bottom: 3.2rem;
  }
}

/* ANCHOR: Partners & Sponsors */
.partners{
  .l-contents{
    position: relative;
    z-index: 1;
    padding-top: 2rem;

    --clamp-cqi-max: 240;
  }

}

.partners__bg-deco{
  position: absolute;
  object-fit: cover;

  &.-l{
    top: -6cqi;
    left: 0;
    width: min(40vw, 650px);
  }

  &.-r{
    right: 0;
    bottom: 1cqi;
    width: min(40vw, 645px);
  }
}

.partners__desc-wrapper{
  padding: 1rem 6rem 6rem;
  background-color: var(--color-white);
  border-radius: var(--radius-30);

  @media (width <= 599px){
    padding: 1rem 3rem 3rem;
  }
}

.partners__desc{
  display: grid;
  row-gap: var(--clamp-cqi);
  place-items: center;
  margin-top: calc(var(--clamp-cqi) + 2rem);

  --clamp-cqi-max: 60;
  --clamp-cqi-min: 40;

  &:nth-of-type(2){
    margin-top: 12cqi;
  }

  @container (width <= 1200px){
    &:nth-of-type(2){
    margin-top: 4cqi;
   }
  }

}

.partners__desc-text{
  --clamp-max: 30;
  --clamp-min: 18;
}


.partners__desc-logo{
  display: block;
  width: min(100%, 350px);
  margin-inline: auto;
}

.partners__desc-logo-wrapper{
  display: flex;
  /* flex-wrap: wrap; */
  column-gap: var(--clamp-cqi);
  align-items: center;
  justify-content: center;
  margin-bottom: 6rem;

  --clamp-cqi-max: 50;
  --clamp-cqi-min: 30;

  & a:nth-of-type(1){
    width: 25%;
  }

  & a:nth-of-type(2){
    width: 30%;
  }

  & a:nth-of-type(3){
    width: 8%;
  }

  & a:nth-of-type(4){
    width: 15%;
  }

  & a:nth-of-type(5){
    width: 20%;
  }

  @media (width <= 599px){
    flex-wrap: wrap;
    gap: 3.2rem;
    margin-top: 3.2rem;
    margin-bottom: 3.2rem;

    & a:nth-of-type(-n+2){
      width: 40%;
    }

    & a:nth-of-type(3){
      width: 22%;
    }

    & a:nth-of-type(4){
      width: 40%;
    }

    & a:nth-of-type(5){
      width: 40%;
    }
  }
}

.partners__desc-title{
  display: flex;
  gap: clamp(1.6rem, 4vw, 6rem);
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: var(--fontweight-bold);
  color: var(--color-blue);

  --clamp-max: 40;
  --clamp-min: 18;

  &::before{
    flex-grow: 1;
    /* max-width: 280px; */
    height: 3px;
    content: "";
    background-color: var(--color-blue);
  }

  &::after{
    flex-grow: 1;
    /* max-width: 280px; */
    height: 3px;
    content: "";
    background-color: var(--color-blue);
  }
}

.partners__desc-data{
  font-weight: var(--fontweight-bold);
  line-height: 1.8;
  color: var(--color-black);
  text-align: center;
  word-break: keep-all;

  --clamp-max: 32;
  --clamp-min: 18;

}

/* ANCHOR: Access */
.access {
  .l-contents{
    padding-bottom: revert;

    & picture{
      display: block;
      width: fit-content;
      margin-inline: auto;

      &:not(:last-child){
        margin-bottom: 5rem;
      }
    }



  }
}

.g-map{
  width: 100%;
  aspect-ratio: 1600 / 580;
  margin-inline: auto;
  margin-top: 7rem;

  & a{
    display: flex;
    align-items: center;
    width: fit-content;
    margin-top: 1.2rem;
    margin-left: 14vw;
    color: var(--color-black);
    text-decoration: underline;

    &::before{
      display: inline-block;
      margin-right: 0.8rem;
      content: '';
      border-top: 8px solid transparent;
      border-right: 0;
      border-bottom: 8px solid transparent;
      border-left: 12px solid currentcolor;
    }
  }

  @media (width <= 599px){
    aspect-ratio: 428 / 320;
    margin-top: 3.2rem;

    & a{
      margin-left: 4vw;
    }
  }

}


/* /////Caution///// */
.caution{
  .m-section-title{
    padding-top: 12vw;
  }
}

.caution-title{
  width: fit-content;
  padding: 1rem 4rem;
  margin-top: 6rem;
  font-weight: var(--fontweight-bold);
  color: var(--color-white);
  background-color: var(--color-blue);
  border-radius: var(--radius-full);

  --clamp-max: 32;
  --clamp-min: 20;

  @media (width <= 599px){
      /* margin-inline: auto; */
      margin-top: 3.2rem;
  }
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  margin-top: 5.6rem;
  color: var(--color-blue);

  @media (width <= 599px) {
    gap: 3.2rem;
    margin-top: 3.2rem;
  }
}

.notice-list__item {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.notice-list__header {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--color-blue);


}

.notice-list__number {
  display: grid;
  place-items: center;
  width: min(5.6rem, 7vw);
  aspect-ratio: 1 / 1;
  font-weight: var(--fontweight-bold);
  line-height: 1;
  color: white;
  background-color: var(--color-blue);
  border-radius: var(--radius-full);

  --clamp-max: 32;
  --clamp-min: 18;

  @media (width <= 599px) {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.8rem;
  }
}

.notice-list__title {
  font-weight: var(--fontweight-bold);

  --clamp-max: 32;
  --clamp-min: 18;

  @media (width <= 599px) {
    font-size: 2rem;
  }
}

.notice-list__content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  color: var(--color-black);

  --clamp-max: 18;
  --clamp-min: 16;
}

.notice-list__text {
  position: relative;
  padding-left: 2.4rem;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "・";
  }

  & span{
    font-weight: var(--fontweight-black);
  }
}

.notice-list__sub-text {
  margin-top: 0.4rem;
  font-size: 1.6rem;
}

/* /////Q & A///// */
.faq{
  .l-contents{
    padding: revert;
  }
}

.faq.-gray {
  &::before{
    background-image: url("../images/section_deco_top2.webp");
  }
}

/* FAQリスト ブロック */
.faq-list {
  /* 3. 表示・ボックス */
  display: grid;
  gap: 4.8rem;
  margin-top: 4rem;;



  @media (width <= 599px) {
    /* 3. 表示・ボックス */
    gap: 3.2rem;
  }
}

.faq-list__item {
  /* 3. 表示・ボックス */
  display: grid;
  gap: 2.4rem;

  @media (width <= 599px) {
    /* 3. 表示・ボックス */
    gap: 1.6rem;
  }
}

.faq-list__question {
  /* 3. 表示・ボックス */
  display: flex;
  gap: 1.6rem;
  align-items: center;
  /* 5. 余白 */
  padding-block-end: 1.2rem;
  /* 7. 背景・境界 */
  border-bottom: 2px solid var(--color-blue);
}

.faq-list__answer {
  /* 3. 表示・ボックス */
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
}

.faq-list__icon {
  /* 2. 位置 */
  position: relative;
  z-index: 1;
  /* 3. 表示・ボックス */
  display: grid;
  flex-shrink: 0;
  place-items: center;
  /* 4. サイズ (横長の楕円形に調整) */
  width: 8rem;
  height: 6rem;
  /* 6. タイポグラフィ */
  font-weight: var(--fontweight-bold);
  /* 7. 背景・境界 */
  border-radius: 50%; /* 50%指定により楕円を描画 */

  --clamp-max: 32;
  --clamp-min: 18;

  /* 吹き出しのしっぽ */
  &::after {
    /* 2. 位置 */
    position: absolute;
    bottom: -4px;
    left: 6px;
    z-index: -1;
    /* 4. サイズ */
    width: 0;
    height: 0;
    /* 9. その他 */
    content: "";
    /* 7. 背景・境界 */
    border-style: solid;
    border-width: 14px 14px 0 0;
    /* 8. 視覚効果 */
    transform: rotate(20deg);
  }

  &.-q {
    /* 6. タイポグラフィ */
    color: var(--color-white);
    /* 7. 背景・境界 */
    background-color: var(--color-blue);

    &::after {
      /* 7. 背景・境界 */
      border-color: var(--color-blue) transparent transparent transparent;
    }
  }

  &.-a {
    /* 6. タイポグラフィ */
    color: var(--color-blue);
    /* 7. 背景・境界 */
    background-color: var(--color-white);

    &::after {
      /* 7. 背景・境界 */
      border-color: var(--color-white) transparent transparent;
    }
  }

  @media (width <= 599px) {
    /* 4. サイズ */
    width: 5.2rem;
    height: 3.6rem;
    /* 6. タイポグラフィ */
    font-size: 1.8rem;

    &::after {
      /* 2. 位置 */
      bottom: -3px;
      left: 4px;
      /* 7. 背景・境界 */
      border-width: 12px 12px 0 0;
    }
  }
}

.faq-list__question-text {
  font-weight: var(--fontweight-bold);
  line-height: 1.4;
  color: var(--color-blue);

  --clamp-max: 32;
  --clamp-min: 18;
}

.faq-list__answer-text {
  /* 5. 余白 */
  padding-block-start: 0.8rem;
  /* 6. タイポグラフィ */
  line-height: 1.8;

  --clamp-max: 18;
  --clamp-min: 14;
}

/* /////CONTACT///// */
.contact{
  .l-contents{
    --clamp-cqi-max: 50;
    --clamp-cqi-min: 30;

    padding-bottom: 32rem;
  }

  .m-text-block{
    --clamp-max: 32;
    --clamp-min: 18;

    margin-top: 4rem;
    font-weight: var(--fontweight-bold);
  }

  @media (width <= 599px){
    .l-contents{
      padding-bottom: 10rem;
    }
  }

}

.contact.-gray{
    margin-bottom: calc(var(--deco-height) * -1);

    &::after{
      background-image: none;
    }
  }


.contact_mail{
  --clamp-max: 60;
  --clamp-min: 18;

  margin-top: 1.6rem;
  font-family: var(--font-museo-sans);
  font-weight: var(--fontweight-bold);
  color: var(--color-blue);
  text-align: center;
}

/* /////footer///// */
.footer-image{
  position: relative;
  display: block;
}


.l-footer {
  --deco-height: 8.2vw;

  position: relative;
  color: white;
  background-color: #17679e;
  container-type: inline-size;

  &::before{
    position: absolute;
    top: calc(var(--deco-height) * -1);
    left: 0;
    width: 100%;
    height: var(--deco-height);
    content: "";
    background-image: url("../images/footer_deco.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }

  @media (width <= 599px){
     &::before{
      top: -8vw;
     }
  }
}

.footer-inner{
  display: grid;
  gap: var(--clamp-cqi);
  place-items: center;
  width: var(--main-width);
  padding-top: 2rem;
  padding-bottom: 3.4rem;
  margin-inline: auto;

  --clamp-cqi-max: 50;
  --clamp-cqi-min: 30;

  @media (width <= 599px){
    width: 85%;
    padding-bottom: 3rem;

    --clamp-cqi-min: 38;
  }

}

.footer-logo{
  width: min(695px, 70vw);

  @media (width <= 599px){
    width: 100%;
    margin-top: 4rem;
  }
}

.footer-menu {
  grid-area: menu;
}

.footer-navi-list {
  display: flex;
  column-gap: 5.6rem;
  justify-content: space-between;

  @media (width <= 599px){
      align-items: center;
      width: 100%;
      padding: 0;
  }
}

.footer-navi-list__data {
  font-weight: var(--fontweight-black);

  --clamp-max: 30;
  --clamp-min: 20;


    @media (width <= 599px){
      padding: 1.5rem 0;
    }

}


.footer-bottom__copy-right{
  width: 95%;
  padding: 2.6rem 0;
  margin-inline: auto;
  text-align: center;
  word-break: keep-all;

  --clamp-max: 18;
  --clamp-min: 12;

  @media (width <= 599px){
    padding: 1.6rem 0;
  }
}

}
/* /////@layer utility */