@charset "UTF-8";

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

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

@import "https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;700;900&family=Noto+Sans+JP:wght@100..900&display=swap" layer(third-party);
@import "https://unpkg.com/lenis@1.3.17/dist/lenis.css" layer(third-party);
@import "https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide-core.min.css" layer(third-party);
@import "https://unpkg.com/scroll-hint@latest/css/scroll-hint.css" layer(third-party);

@layer base {
:root {
  /* color */
  --color-blue: #1B4086;
  --color-lightblue: #036EB8;
  --color-mediumblue: #2F4E87;
  --color-deepblue: #0a336d;
  --color-xtrablue: #021261;
  --color-2xtrablue: #040f44;
  --color-green: #02A283;
  --color-black: #464654;

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

  /* font */
  --font-fira-sans: "Fira Sans", 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%, 1290px);
  --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;
  --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%;

  /* ローディングカクつき対策 */
  /* scrollbar-gutter: stable; */
}

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

body {
  position: relative;
  overflow: hidden;
  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;
  background-color: var(--color-lightblue);

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

body.is-loaded {
  overflow: clip auto;
}

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);
  }

}

/* ローディングアニメーション関連 */
.loader {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100dvh;
  overscroll-behavior: none;
  background: #000;
}

.loader__video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.loader__skip {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 10000;
  display: none;
  padding: 10px 20px;
  font-family: var(--font-fira-sans);
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.1em;
  cursor: pointer;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(5px);
  border: 1px solid rgb(255 255 255 / 0.3);
  transition: background 0.3s ease, transform 0.3s ease;
}

.loader__skip:hover {
    background: rgb(2 18 97 / 0.8);
    transform: scale(1.05);
}

.title-mask {
    display: block;
    overflow: hidden;
}

/* アニメーション対象のテキスト（初期位置：マスクの下） */
.js-mask-text {
    display: block;
    transform: translateY(110%);
}

.noise-overlay{
  position: relative;
  pointer-events: none;

  &::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998; /* 最前面に配置 */
    width: 100%;
    height: 100lvh;
    pointer-events: none;
    /* 下にある要素をクリックできるようにする */
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    /* 重要: 画像を引き伸ばさず、小さいサイズでリピートさせる */
    background-size: 200px 200px;
    mix-blend-mode: multiply;
    /* オーバーレイ合成（お好みでmultiply等）  */
    opacity: 0.7; /* 薄く調整（お好みで） */
  }

  @media (width <= 599px){
    &::before{
      height: 105lvh;
      opacity: 0.5;
    }
  }

}


.water-overlay{
  filter: url('#water-flow');
  will-change: filter;
  contain: layout paint style;

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


}

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


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

.l-section.-blue{
  background-color: var(--color-deepblue);
}


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

  --clamp-cqi-max: 240;
  --clamp-cqi-min: 120;

  @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-tittle{
  position: relative;
  z-index: 2;
  width: var(--main-width);
  margin-inline: auto;
  margin-bottom: -14rem;
  color: white;

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

    margin-bottom: -9rem;
  }
}


.tittle-deco{
  position: absolute;
  top: -10px;
  left: -2.2%;
  width: min(110px, 20%);
  height: auto;
  aspect-ratio: 1 / 1;
}

.tittle-deco.-fish{
  top: -4.2vw;
  left:calc(-24% + (1920px - 100vw) * 0.1);
  width: min(367px, 70%);
  height: auto;
  aspect-ratio: 367 / 133;

  @media (width <= 599px){
    left:calc(-13% + (599px - 100vw) * 0.1);
  }
}

.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-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-br {
  display: contents;

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

.m-wbr {
  display: contents;

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

.noise {
  position: relative;
  margin-top: -2px;
}

.ruby{
  display: block;
  margin-top: 1lh;
  /* --clamp-max: 20;
  --clamp-min: 13; */
  font-size: 85%;
}


/* 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;
  }
} */


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


@layer utility {

/* header */
.l-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  container-type: inline-size;

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

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

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

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

.header-navi{
  margin: 5% 5% 0 auto;
}

.header-naviList {
  display: grid;
  grid-template-rows: max-content;
  grid-template-columns: 1fr;
  align-items: center;
}

.header-naviList__data {
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--font-fira-sans);
  font-weight: var(--fontweight-black);
  line-height: 1;
  color: white;
  letter-spacing: .15rem;
  opacity: 0; /* 初期状態：非表示 */
  transform: translateY(20px);

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

  a{
    width: 100%;
    height: 100%;
    padding: .8rem 0;
  }

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

/* @media (any-hover: hover) {
  .header-naviList__data:hover{
    color: black;
    transition: color var(--transition);

    & a:hover{
      opacity: 1;
    }
  }

  .scroll-header .header-naviList__data:hover{
    color: var(--color-lightblue);
    transition: color var(--transition);
  }
} */


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

@media (width <= 599px) {
  /* ハンバーガーボタンのスタイル（頂いたものそのまま + z-index強化） */
  .open,
  .close {
    position: fixed;
    top: 8px;
    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 white;
    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%;
    transform: rotate(30deg);
  }

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


  /* ▼▼▼ ここからが重要な修正箇所です ▼▼▼ */

  /* ドロワーメニューのコンテナ */
  .menu {
    position: fixed;
    inset: 0; /* top:0; left:0; right:0; bottom:0; と同義 */

    /* ★修正3: z-indexを正の値に。ボタン(9999)よりは下 */
    z-index: 100;
    display: grid;
    grid-template-rows: auto;
    align-items: center;
    width: 100%;
    height: 100dvh;
    padding: 2rem revert;
    margin: auto;
    color: white;
    text-align: center;
    pointer-events: none; /* 閉じてる時はクリック無効 */

    /* ★修正2: 初期状態は隠すが、JSで制御しやすいように設定 */
    visibility: hidden;

    /* ★修正1: コンテナ自体の背景は透明にする（レイヤーを見せるため） */
    background: transparent;
    opacity: 0; /* JSで1にします */
  }

  /* メニューリスト（テキスト部分） */
  .header-naviList {
    position: relative;
    /* ★修正4: 水面レイヤー(z-index: 1~3)より上に表示させる */
    z-index: 10;
    grid-template-columns: 1fr;
    gap: 0 3rem;
    width: 100%;
    padding: 0;
    margin-inline: auto;
    overflow-y: scroll;
  }

  .header-naviList__data {
      position: relative;
      width: 100%;
      padding: 5rem 0 0;
      overflow: hidden;

      /* GSAP制御用変数の初期化 */
      --deco-scale: 0;
      --deco-opacity: 0;
    }

    /* 上の線 (::before) */
    .header-naviList__data::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 35px;
      content: "";
      background-image: url("../images/common/sp-menu_line.svg");
      background-repeat: no-repeat;
      background-size: 100%;

      /* 変数による制御 */
      opacity: var(--deco-opacity);
      transform: scaleX(var(--deco-scale));
      transform-origin: center;
      will-change: transform, opacity;
    }

    .header-naviList__data:last-child {
      padding-bottom: 3rem;
    }

    /* 下の線 (::after) */
    .header-naviList__data:last-child::after {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 35px;
      content: "";
      background-image: url("../images/common/sp-menu_line.svg");
      background-repeat: no-repeat;
      background-size: 100%;

      /* 変数による制御 */
      opacity: var(--deco-opacity);
      transform: scaleX(var(--deco-scale));
      transform-origin: center;
      will-change: transform, opacity;
    }

    .header-naviList__data a {
      display: block;
      color: white;
      text-decoration: none;
      opacity: 0;
      transform: translateY(100%);
    }

  /*
   * アニメーション用の水面レイヤー
   * ※HTML側に <div class="bg-layer layer-1"></div> 等を追加してください
   */
  .bg-layer {
    --layer-overlap: 600px;

    position: absolute;
    inset: 0;
    top: calc(var(--layer-overlap) * -1);
    width: 100%;
    height: calc(100% + var(--layer-overlap));
    /* 角丸の初期設定（液体の膨らみ） */
    border-radius: 50% 50% 0 0;
    transform: translateY(110%); /* 初期位置：画面下外 */
    will-change: transform, border-radius;
  }

  .layer-1 {
    z-index: 1;
    background-color: #bfdbfe;
  } /* 一番奥：薄い色 */
  .layer-2 { z-index: 2;
    background-color: var(--color-lightblue, #60a5fa);
  } /* 中間 */

  /* 一番手前：濃い色（ここに元の背景画像を設定すると綺麗です） */
  .layer-3 {
    z-index: 3;
    /* 元の.menuにあった背景画像をここに適用 */
    background-image: url("../images/top/main/mv-bg_sp.webp");
    background-repeat: no-repeat;
    background-position: center 400px;
    background-size: cover;
    background-blend-mode: overlay; /* 画像と色をなじませる */
  }
}

/* mainvisual */
.mv-top{
  position: relative;
  width: 100%;
  height: 150lvh;
  overflow: clip;
  clip-path: inset(0);

  /* @media (width <= 599px){
    height: 92vh;
  } */
}

#hero-section{
  background-image: url("../images/top/main/mv-bg.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  > *:not(canvas){
    z-index: 2;
  }

  @media (width <= 599px){
    background-image: url("../images/top/main/mv-bg_sp.webp");
  }

}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;

  @media (width <= 599px){
    touch-action: revert !important;
  }
}

.mv-top-contents{
  place-self: center center;
  width: min(49vw, 515px);
  height: fit-content;
  padding-bottom: 36rem;
  color: white;

  .m-tittle-block{
    --clamp-max: 43;
    --clamp-min: 18;

    padding-top: 2.8rem;
    margin-inline: auto;
    font-weight: var(--fontweight-bold);
    letter-spacing: 8.6px;
    white-space: nowrap;

    @media (width <= 599px){
      letter-spacing: 4px;
    }
  }

  .m-tittle-block__sub{
    --clamp-max: 20;
    --clamp-min: 13;

    width: revert;
    padding-top: 0;
    margin-top: revert;
    font-weight: var(--fontweight-bold);
    line-height: 3.5rem;
    text-align: center;
  }

  @media (width <= 599px){
    width: 60vw;
    padding-bottom: 50rem;

    .m-tittle-block{
      padding-top: 1.4rem;
    }

    .m-tittle-block__sub{
      padding-top: revert;
      line-height: 2em;
      letter-spacing: 2.6px;
      word-break: keep-all;
    }

  }

}


.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;
  }
}

.contact-btn{
  position: fixed;
  right: 0;
  bottom: 12%;
  z-index: 3;
  width: min(16vw, 205px);
  opacity: 0;

  @media (width <= 599px){
    bottom: 14%;
    width: 25vw;
  }
}


/* scroll-down */
.scroll-down {
  justify-self: center;
  width: fit-content;
  height: 100vh;
}


/* .scroll-down span {
  position: absolute;
  bottom: 50px;
  z-index: 2;
  display: inline-block;
  width: fit-content;
  padding: 18px 18px 308px;
  overflow: hidden;
  font-family: var(--font-fira-sans);
  line-height: 1;
  color: white;
  text-transform: uppercase;
  letter-spacing: .2em;
  writing-mode: vertical-lr;

  --clamp-max: 13;
} */

/* .scroll-down span::before {
  position: absolute;
  bottom: 170px;
  left: 20%;
  width: 1px;
  height: 202px;
  content: '';
  background: white;
}

.scroll-down span::after {
  position: absolute;
  bottom: 170px;
  left: 20%;
  width: 1px;
  height: 202px;
  content: '';
  background: var(--color-darkgray);
  animation: sdl01 2s cubic-bezier(1, 0, 0, 1) infinite;
} */

/* @keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }

  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
} */

.scroll-down_text {
  position: absolute;
  bottom: 37%;
  left: 50%;
  z-index: 2;
  width: fit-content;
  font-family: var(--font-fira-sans);
  font-weight: var(--fontweight-medium);
  line-height: 1;
  color: white;
  text-transform: uppercase;
  letter-spacing: .1em;
  transform: translateX(-50%);

  --clamp-max: 16;

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

.wavy-text span {
  position: relative;
  display: inline-block;
  animation: wave 3s infinite;
  animation-delay: calc(0.1s * var(--i));
}

.wavy-text_arrow {
  width: 20px;
  height: 20px;
  margin-inline: auto;
  margin-top: 1rem;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
  animation: float 3s infinite;
}

@keyframes wave {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(-20%) rotate(-45deg);
  }

  50% {
    transform: translateY(20%) rotate(-45deg);
  }
}


/* 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;
}


/* /////top-NEWS///// */
.news{
  .l-contents{
    padding-top: 8rem;
  }
}

.news-list{
  display: grid;
  row-gap: 3.6rem;

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

.news-list__item{
  display: block grid;
  grid-template-columns: 1fr;
  padding-bottom: 1rem;
  border-bottom: 1px solid white;

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

  a{
    display: block grid;
    grid-template-columns: subgrid;
    grid-row: span 2;
    grid-column: 1 / -1;
    gap: 1rem 2.6rem;
    align-items: center;
    padding: .8rem 0 ;
  }
}

.news-list__tittle{
  display: flex;
  align-items: center;

  @media (width <= 599px){
      flex-direction: column;
      align-items: flex-start;
  }
}

.new-tab{
  width: 4rem;
  aspect-ratio: 1 / 1;
  background-color: white;
  mask-image: url('../images/common/arr_hoso.svg');
  mask-size: contain;

  @media (width <= 599px){
    align-self: flex-end;
  }
}


/* /////top-SERVICE///// */
.service{
  .l-contents{
    padding-top: revert;
  }

  .m-text-block.-tittle-sub{
    text-align: revert;
  }

  .m-button-parts{
    margin-inline: revert;
  }

  @media (width <= 599px){
    .m-text-block.-tittle-sub{
      word-break: normal;
    }

    .m-button-parts{
      margin-inline: auto;
    }

  }

}

.service-list{
  margin-inline: auto;
  margin-top: 5rem;
  border-top: 1px solid white;

  .m-text-block{
    font-weight: revert;
    text-align: revert;
  }
}

.service-list__item{
  column-gap: 5rem;
  align-items: center;
  padding: 4rem 0;
  border-bottom: 1px solid white;

  &:nth-child(even){
    flex-direction: row-reverse;
  }
}

.service-list__image{
  @media (width <= 599px){
    & img{
      width: 60%;
    }
  }
}

.service-list__contents{
  display: grid;
  row-gap: var(--clamp-cqi);

  --cqi-content-width: 1290;
  --clamp-cqi-max: 28;
  --clamp-cqi-min: 14;
}

.service-list__tittle{
  display: flex;
  column-gap: .8rem;
  align-items: baseline;
  padding-top: 1rem;
  font-weight: var(--fontweight-bold);
  white-space: nowrap;

  --clamp-max: 40;
  --clamp-min: 17;

  & span{
    --clamp-max: 20;
    --clamp-min: 12;
  }


  @media (width <= 599px){
    text-align: center;
  }
}

.service-tag-list{
  display: flex;
  flex-wrap: wrap;
  gap: 0 .8rem;
  width: fit-content;
  padding: 1.2rem 2.6rem;
  font-weight: var(--fontweight-bold);
  background-color: var(--color-blue);
  border-radius: var(--radius-30);

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


/* /////top-WHY-AXL///// */
.why{
  position: relative;
  margin-top: 24rem;

  .l-contents{
    position: relative;
    z-index: 2;
    padding-top: var(--clamp-cqi);
    padding-bottom: calc( var(--clamp-cqi) * 2);

    --clamp-cqi-max: 100;
    --clamp-cqi-min: 56;
  }


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

}

.why-bg{
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 48vw;
    /* height: min(140vw, 1650px); */
    aspect-ratio: 2285 / 1614;
    transform: translateX(-50%);


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

    @media (width <= 599px){
      width: 190vw;
      /* height: min(264vw, 1050px); */
    }
}

.why-list{
  margin-top: var(--clamp-cqi);

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

  & > :nth-child(1) {
    --box-w: 360;
    --box-x: 0;
    --box-y: 105;
  }

  & > :nth-child(2) {
    --box-w: 396;
    --box-x: 442;
    --box-y: 0;
  }

  & > :nth-child(3) {
    --box-w: 390;
    --box-x: 900;
    --box-y: 105;
  }

  & > :nth-child(4) {
    --box-w: 374;
    --box-x: 0;
    --box-y: 555;
  }

  & > :nth-child(5) {
    --box-w: 380;
    --box-x: 442;
    --box-y: 462;
  }

  & > :nth-child(6) {
    --box-w: 410;
    --box-x: 900;
    --box-y: 555;
  }

  @media (width <= 599px){
    & > :nth-child(1) {
    --box-w: 540;
    --box-x: 0;
    --box-y: 0;
    }

    & > :nth-child(2) {
      --box-w: 594;
      --box-x: 650;
      --box-y: -50;
    }

    & > :nth-child(3) {
      --box-w: 585;
      --box-x: 50;
      --box-y: 694;
    }

    & > :nth-child(4) {
      --box-w: 560;
      --box-x: 770;
      --box-y: 637;
    }

    & > :nth-child(5) {
      --box-w: 595;
      --box-x: 0;
      --box-y: 1382;
    }

    & > :nth-child(6) {
      --box-w: 615;
      --box-x: 662;
      --box-y: 1410;
    }
  }

}

.why-list__image{
  display: grid;
  row-gap: var(--clamp-cqi);

  --cqi-content-width: 1920;
  --clamp-cqi-max: 26;
  --clamp-cqi-min: 5;
}

.why-list__caption{
  --clamp-max: 18;
  --clamp-min: 10;

  font-weight: var(--fontweight-black);
  /* color: var(--color-blue); */
  text-align: center;
  word-break: keep-all;
}

/* /////top-WORKS///// */
.works{
  overflow-x: clip !important;

  .m-button-parts{
    margin-top: auto;
  }

  @media (width <= 599px){
    min-height: 100dvh !important;
    padding-top: 4rem !important;

    .l-contents{
      /* width: 100%; */
    }
  }

}

.works-inner{
  display: grid;
  /* height: calc((100dvh - var(--scroll-content-height)) / 2); */

  .m-tittle-wrap{
    margin-top: 3vw;
    color: white;
  }

  @media (width <= 599px){
    .m-tittle-wrap{
      margin-top: -4vw;
    }
  }
}

.works-inner.-top{
  position: relative;
  height: 30dvh;
  /* background: linear-gradient(180deg, transparent 0%, transparent 35%, var(--color-deepblue) 35%, var(--color-deepblue) 100%); */

  &::before{
    position: absolute;
    top: 6.5cqi;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-image: url("../images/top/works/line.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90%;
  }

  @media (width <= 599px){
    height: 15svh;
    /* background: linear-gradient(180deg, transparent 0%, transparent 13%, var(--color-deepblue) 13%, var(--color-deepblue) 100%); */

    &::before{
      top: 33%;
    }
  }
}

.works-inner.-bottom{
  position: relative;
  height: 10dvh;
  /* background-color: var(--color-deepblue); */

  &::before{
    position: absolute;
    bottom: 18%;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-image: url("../images/top/works/line_double.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90%;
  }

  @media (width <= 599px){
    height: 10svh;

    &::before{
      bottom: 30%;
    }
  }
}

.works-inner__line{
  width: var(--main-width);
  margin-inline: auto;

}

.works-list{
  display: flex;
  column-gap: calc(var(--clamp-cqi) / 2);
  align-items: center;
  padding: 0 var(--clamp-cqi);
  /* background-color: var(--color-deepblue); */

  --cqi-content-width: 1190;
  --clamp-cqi-max: 260;
  --clamp-cqi-min: 50;

  .m-text-block{
    padding: 2.4rem 0;
    font-weight: var(--fontweight-regular);
    text-align: revert;

    --clamp-min: 12;
  }

  @media (width <= 599px){
    column-gap: var(--clamp-cqi);

    --clamp-cqi-min: 75;


    .m-text-block{
      padding: revert;
    }
  }

}

.works-list__data{
  display: grid;
  grid-template-columns: minmax(0, 630px) minmax(0, 495px);
  column-gap: var(--clamp-cqi);
  width: min(73vw , 1190px);

  --cqi-content-width: 1190;
  --clamp-cqi-max: 67;
  --clamp-cqi-min: 18;

  @media (width <= 599px){
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    column-gap: 1rem;
    min-height: 450px;
  }
}

.works-list__image {
  align-self: center;
  width: 100%;
  height: auto;

  img {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: cover;
  }

  @media (width <= 599px) {
    margin-bottom: revert;

    & img{
      width: 90%;
    }
  }
}


.works-list__desc{
  display: grid;
  grid-template-rows: max-content max-content max-content 1fr;
  row-gap: 1.3rem;
  width: min(100% , 495px);

  @media (width <= 599px){
    row-gap: .6rem;
  }
}

.works-list__category{
  word-break: auto-phrase;

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

.works-list__client{
  --clamp-max: 22;
  --clamp-min: 12;

  letter-spacing: 2.4px;
  word-break: auto-phrase;

  & span{
    --clamp-max: 16;
    --clamp-min: 12;

    display: block;
    padding-bottom: 1rem;
    font-weight: var(--fontweight-regular);
  }

  @media (width <= 599px){
    & span{
      padding-bottom: .5rem;
    }
  }

}

.works-list__lead{
  --clamp-min: 12;
}

.scroll-hint-icon-white{
    display: grid;
    grid-auto-rows: max-content;
    place-items: center;
    align-content: center;
    aspect-ratio: 1;
    background-color: rgb(255 255 255 / 0.8);
    border-radius: calc(infinity * 1px);
}



/* /////top-PROCESS///// */
.process{
  .process-inner{
    position: relative;
    width: min(100%,1500px);
    aspect-ratio: 1500 / 1048;
    margin-inline: auto;

    @media (width <= 599px){
       width: 95%;
       aspect-ratio: 599 / 1600;
    }
  }

  .l-contents{
    position: relative;
  }

  .m-tittle-block{
    margin-inline: auto;
    color: var(--color-xtrablue);
  }

  .m-tittle-block__sub{
     color: var(--color-xtrablue);
  }

  .tittle-deco{
    left: 2%;
  }

  @media (width <= 599px){
    padding-top: 8rem;

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

}

.process-bg{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);

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

.process-list{
  --column: 3;
  --clamp-cqi-max: 54;
  --clamp-cqi-min: 20;

  column-gap: var(--clamp-cqi);
  padding-top: 4rem;
  color: var(--color-black);

  .m-text-block{
    font-weight: var(--fontweight-regular);
    line-height: revert;
    color: revert;
    text-align: revert;

    --clamp-min: 12;
  }

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

    row-gap: 2.4rem;
    width: 90%;
    padding-top: revert;
    margin-inline: auto;
  }

}

.process-list__data{
  --row-num: 4;

  row-gap: 2rem;
  justify-items: center;

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

.process-list__image{
  @media (width <= 599px){
      width: 85%;
  }
}

.process-list__step{
  font-family: var(--font-fira-sans);
  font-weight: var(--fontweight-black);
  color: var(--color-xtrablue);
  letter-spacing: .2rem;

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

.process-list__tittle{
  position: relative;
  padding-bottom: 15px;
  font-weight: var(--fontweight-bold);


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

  &::before{
    position: absolute;
    top: min(36px, 3.6cqi);
    left: 0;
    display: block;
    width: 100%;
    height: 20px;
    content: '';
    background-image: url("../images/top/process/maker_image.svg");
    background-repeat: repeat-x;
    background-size: cover;
  }

  @media (width <= 1350px){
    --clamp-max: 20;
    --clamp-min: 10;

    &::before{
      top: 7cqi;
    }
  }

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

    &::before{
      top: 7cqi;
    }
  }
}

/* /////top-COMPANY///// */
.company{
  --layout-width: 1920;

  padding: 14rem 0 0;

  .l-contents{
    display: grid;
    place-items: center;
    aspect-ratio: 1244 / 998;
    padding: revert;
    padding: var(--clamp-cqi) 3.2rem;
    background-color: var(--color-xtrablue);

    --clamp-cqi-max: 120;
    --clamp-cqi-min: 60;
  }

  .m-tittle-wrap{
    margin-bottom: revert;
  }

  .tittle-deco{
    left: -5%;
  }

  .company-inner{
    width: min(80%, 800px);
    /* margin-right: 4.8rem; */

    .m-text-block{
      font-weight: var(--fontweight-regular);
      text-align: revert;
    }

    .m-button-parts{
      margin-top: 8rem;
    }

  }

  & > :nth-child(1) {
    --box-w: 1244;
    --box-x: 0;
    --box-y: 105;
  }

  & > :nth-child(2) {
    --box-w: 860;
    /* --box-x: 1059; */
    --box-y: 0;

    justify-self: flex-end;
    aspect-ratio: 860 / 600;
  }

  & > :nth-child(3) {
    --box-w: 313;
    --box-x: 1548;
    --box-y: 575;

    aspect-ratio: 1 / 1;

    & img{
      aspect-ratio: 1 / 1;
    }
  }

  & > :nth-child(4) {
    --box-w: 473;
    --box-x: 1059;
    --box-y: 697;

    aspect-ratio: 473 / 328;
  }



  @media (width <= 599px){
    --layout-width: 599;

    padding: 10rem 0 0;

    .company-inner{
      width: 100%;
      margin-right: revert;

      .m-button-parts{
        margin-top: 4rem;
      }
    }

    .tittle-deco{
      left: -5%;
      width: min(70px, 35%);
    }


    .m-text-block{
      word-break: normal;
    }

    & > :nth-child(1) {
      --box-w: 530;
      --box-x: 35;
      --box-y: 105;

    }

    & > :nth-child(2) {
      --box-w: 350;
      --box-x: 0;
      --box-y: -110;

      justify-self: start;
    }

    & > :nth-child(3) {
      --box-w: 180;
      --box-x: 400;
      --box-y: 0;
    }

    & > :nth-child(4) {
      --box-w: 200;
      --box-x: 5;
      --box-y: 1450;
    }

  }

}

.company-image{
  position: relative;
  display: block;
  overflow: clip;
  border-radius: var(--radius-30);

  & img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    will-change: transform;
  }

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

.company-profile-tittle{
  --clamp-max: 18;
  --clamp-min: 14;

  width: fit-content;
  padding: .8rem 1.8rem;
  margin-top: 4rem;
  font-weight: var(--fontweight-bold);
  color:var(--color-xtrablue);
  background-color: white;
  border-radius: var(--radius-20) var(--radius-20) var(--radius-20) 0;
}

.company-profile-list{
  --breakpoint: 599px;
  --static-column: min(38%, 350px);
  --fluid-column: calc(var(--breakpoint) - var(--static-column));

  display: block grid;
  grid-template-columns: var(--static-column) 1fr;
  margin-top: 1.6rem;
  border-top: 1px solid white;

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

  & > :nth-child(even) {
    /* flex-basis: calc(100% - var(--static-column));
    flex-grow: 9999; */
    padding: 1rem 0 1rem 1em;
    border-bottom: 1px solid white;
  }

  & > :nth-child(odd) {
    /* flex-basis: var(--static-column);
    flex-grow: 1; */
    padding: 1rem 0;
    font-weight: var(--fontweight-bold);
    border-bottom: 1px solid white;
  }

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

}

.company-profile-list__data{
  word-break: auto-phrase;

  & ul{
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;

    &:not(:first-of-type) {
      border-top: 2px solid var(--color-gray);
    }
  }

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

    & ul{
      flex-direction: column;
      word-break: normal;

      &:not(:first-of-type) {
        padding-top: 1.4rem;
        margin-top: 1.4rem;
      }
    }

    .flex-sp-column{
      flex-direction: column;
    }

  }
}



/* /////top-TEAM///// */
.team{
  /* padding: var(--clamp-cqi) 0 24rem; */
  margin-top: -11rem;

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

  .l-contents{
    --contents-margin: calc(100vw - min(95%, 700px));
    --clamp-cqi-max: 90;
    --clamp-cqi-min: 70;

    position: relative;
    box-sizing: content-box;
    /* min-height: 583px; */
    min-height: min(514px, 80vw);
    padding: var(--clamp-cqi) var(--contents-margin) var(--clamp-cqi) 12rem;
    margin:0 calc(var(--contents-margin) / 2);
    content: '';
    background-image: url("../images/top/team/team_back.svg");
    background-repeat: no-repeat;
    background-size: contain;

    @media (width <= 1100px){
        background-size: cover;
    }

  }

  .m-tittle-wrap{
    --clamp-cqi-min: 12;
  }

  .m-tittle-block{
    margin-inline: revert;
    color: var(--color-xtrablue);
  }

  .m-tittle-block__sub{
    color: var(--color-xtrablue);
  }

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

    .l-contents{
      --contents-margin: calc(100vw - 85%);
      --clamp-cqi-min: 40;

      padding: var(--clamp-cqi);
    }

  }

}

.staff-slide{
  position: relative;
  padding-top: 5rem;

  .splide__track{
    overflow: visible;
  }

  .splide__arrows{
    position: absolute;
    top: -5rem;
    left: 50vw;
  }

  .splide__slide {
    filter: grayscale(85%);
    transition: filter var(--transition);

      &.is-active {
        filter: grayscale(0%);
        transition: filter var(--transition);
      }
  }

  .slide{
    grid-template-rows: max-content;
    aspect-ratio: 530 / 355;
    transition: var(--transition);
  }

  .slide-media img {
    height: 100%;
    transform: translateY(-16px) scale(1.1);
  }

  .slide img {
    transition: var(--transition);
  }

  @media (width <= 599px){
    .splide__arrows{
      top: -9rem;
      left: 64vw;
    }

    .slide{
      --column: 2;

      place-items: start;
    }
  }

}

.splide__slide.is-active{
  .slide {
    filter: drop-shadow(5px 10px 8px rgb(0 0 0 / 0.5));
    transform: translateY(-16px) ;
  }

  .slide img {
    transform: translateY(0) scale(1.001);
  }

}

/* @media (any-hover: hover) {
  .slide:hover {
    transform: translateY(-16px) ;
  }

  .slide:hover img {
    transform: translateY(0) scale(1.001);
  }

} */

.staff-slide__image{
  --radius: var(--radius-30);

  width: 100%;
  height: 100%;

}

.staff-slide__content{
  --radius: var(--radius-30);

  display: grid;
  grid-auto-rows: max-content;
  row-gap: 1rem;
  align-items: center;
  padding: 2rem 2.3rem;
  background-color: var(--color-green);

  .m-text-block{
    --clamp-max: 20;
    --clamp-min: 13;

    padding-top: 2rem;
    line-height: 3rem;
    text-align: revert;
  }

  @media (width <= 599px){
    row-gap: .5rem;
    padding: 1.6rem 1rem;

    .m-text-block{
      padding-top: .8rem;
      line-height: 1.5;
    }
  }

}

.staff-slide-title{
  --clamp-max: 25;
  --clamp-min: 14;

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

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

.staff-slide-title__sub{
  --clamp-max: 12;
  --clamp-min: 10;

  font-weight: var(--fontweight-bold);
}

.staff-slide-designation{
  --clamp-max: 12;
  --clamp-min: 10;

  line-height: 2rem;

  @media (width <= 599px){
      line-height: 1.5;
  }
}

.staff-slide-skill{
  --clamp-max: 12;
  --clamp-min: 10;

  margin-top: 2.5rem;

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

/* ▼ カスタムカーソルのCSS  */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  font-family: var(--font-fira-sans);
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-align: center;
  pointer-events: none;   /* 重要：これを忘れるとクリックできなくなります */
  background-color: rgb(3 110 184 / 0.7);
  border-radius: 50%;

  /* 初期状態は非表示 */
  opacity: 0;
  transition: transform 0.1s, opacity 0.2s;
  transform: translate(-50%, -50%) scale(0);

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

/* アクティブ時のスタイル */
.custom-cursor.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (any-hover: hover) {
  /* スライダー上では本来のカーソルを消す */
  .splide:hover .staff-slide {
    cursor: none;
  }
}


/* /////top-ACCESS///// */
.access{
  .l-contents{
    padding: revert;
  }
}

.g-map{
  position: relative;
  top: 8px;
  left: -8px;
  width: calc(100% + 16px);
  /* width: 100%; */
  aspect-ratio: 1920 / 635;
  clip-path: inset(8px);
  filter: grayscale(1);
  transition: filter var(--transition);

  & iframe{
    filter: url('#water-flow');
  }


  @media (width <= 599px){
    aspect-ratio: 428 / 520;
  }

}

@media (any-hover: hover) {
  .g-map:hover{
    filter: grayscale(0);
    transition: filter var(--transition);

    & iframe{
      filter: revert;
    }
  }
}

/* /////footer///// */
.l-footer {
  color: white;
  background-color: var(--color-2xtrablue);
  container-type: inline-size;
}

.footer-inner{
  display: grid;
  grid-template-areas:
      "logo blank"
      "info menu";
  grid-template-columns: 30% auto;
  gap: 3.6rem var(--clamp-cqi);
  width: var(--main-width);
  padding-top: 14rem;
  padding-bottom: 6.4rem;
  margin-inline: auto;

  --clamp-cqi-max: 134;
  --clamp-cqi-min: 80;

  @media (width <= 599px){
    grid-template-areas:
      "menu menu menu"
      "logo logo blank"
      "info info blank";
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem var(--clamp-cqi);
    width: 85%;
    padding-bottom: 3rem;

    --clamp-cqi-min: 38;
  }

}

.footer-logo__svg{
  width: min(323px, 30vw);
  aspect-ratio: 323 / 197;
  fill: white;

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

.footer-logo{
  display: block;
  grid-area: logo;
  width: 100%;

  @media (width <= 599px){
      width: min(100%, 212px);
      margin-inline: auto;
  }
}

.footer-info{
  grid-area: info;
  line-height: 3.4rem;

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

.footer-info__map{
  display: flex;
  column-gap: .8rem;
  align-items: center;
  margin-top: 1.6rem;
  text-decoration: underline;

  &::before{
  display: inline-block;
  width: 17px;
  height: 23px;
  content: '';
  background-image: url("../images/top/map-ico.svg");
  background-repeat: no-repeat;
  background-size: contain;/* 何も入れない *//* 画像の幅 *//* 画像の高さ */
  }
}

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

.footer-navi-list {
  display: grid;
  grid-template-columns: repeat(var(--column), max-content);
  justify-content: space-between;
  color: white;

  --column: 3;

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

.footer-navi-list__data {
  padding: 0 0 1.5rem;
  font-weight: var(--fontweight-black);

  --clamp-max:30;
  --clamp-min: 16;

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

}


.footer-bottom {
  text-align: end;
  border-top: 1px solid white;

  @container (width <= 1290px){
    text-align: center;
  }

}

.footer-bottom__copy-right{
  width: var(--main-width);
  padding: 2rem 0 5.6rem;
  margin-inline: auto;
  text-align: center;

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

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

.page-top{
  position: absolute;
  right: 10vw;
  bottom: 0;
  display: flex;
  gap: 1.2rem;
  place-items: center;
  padding: 3rem 1.5rem;
  font-family: var(--font-fira-sans);
  font-weight: var(--fontweight-black);
  line-height: 2.5rem;
  color: white;
  background-color: var(--color-lightblue);
  border-radius: 5rem 5rem 0 0;
  writing-mode: vertical-lr;

  --clamp-max: 24;
  --clamp-min: 5;

  &::before {
    display: inline-block;
    width: 0;
    height: 0;
    content: '';
    border-right: 0.75rem solid transparent;
    border-bottom: 1rem solid white;
    border-left: 0.75rem solid transparent;
  }

  @media (width <= 599px){
    gap: .8rem;
    padding: 2.4rem 1rem 2rem;

    &::before {
      border-right: 0.5rem solid transparent;
      border-bottom: .75rem solid white;
      border-left: 0.5rem solid transparent;
    }
  }
}


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