@charset "UTF-8";

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

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

@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Noto+Sans+JP:wght@100..900&display=swap" layer(third-party);
@import "https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide-core.min.css" layer(third-party);

@layer base {
:root {
  /* color */
  --color-blue: oklch(61.79% 0.2013 254.68deg);
  --color-sky-blue: oklch(96.71% 0.0126 228.92deg);
  --color-red: oklch(61.38% 0.2506 28.74deg);
  --color-gray: oklch(95.21% 0 0deg);
  --color-gray-dark: oklch(from var(--color-gray) calc(l - 0.1) c h);
  --color-gray-dark-x: oklch(from var(--color-gray) calc(l - 0.2) c h);
  --color-black: oklch(39.96% 0.0234 285.29deg);
  --color-black-dark: oklch(from var(--color-black) calc(l - 0.1) c h);
  --color-white: oklch(100% 0 0deg);
  --color-orange: oklch(77.88% 0.1727 66.57deg);
  --color-green: oklch(73.71% 0.1452 164.55deg);
  --color-green-dark: oklch(from var(--color-green) calc(l - 0.1) c h);
   /* viewport */
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1200;
  /* font */
  --font-barlow: "Barlow Condensed", 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%, 1450px);
  --sub-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-10: 1rem;
  --radius-20: 2rem;
  --radius-40: 4rem;
  --radius-50: 5rem;
  --radius-60: 6rem;
  --radius-80: 8rem;
  --display-property: revert;


   /* ============================================
    第0層：基準値
    1rem = 10px 前提
    ============================================ */
  /* 流体計算の共通進捗率（0〜1に正規化）
     ビューポート幅に応じた線形補間係数 */
  --space-bp: calc(
    (100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );

  /* ============================================
     第1層：流体スケール（clamp + calc）
     値はすべて rem 表記（1rem = 10px）
     ============================================ */

  /* 8px → 12px */
  --space-12-8: clamp(
    0.8rem,
    calc(0.8rem + (12 - 8) * var(--space-bp)),
    1.2rem
  );

  /* 12px → 16px */
  --space-16-12: clamp(
    1.2rem,
    calc(1.2rem + (16 - 12) * var(--space-bp)),
    1.6rem
  );

  /* 14px → 20px */
  --space-20-14: clamp(
    1.4rem,
    calc(1.4rem + (20 - 12) * var(--space-bp)),
    2rem
  );

  /* 16px → 24px */
  --space-24-16: clamp(
    1.6rem,
    calc(1.6rem + (24 - 16) * var(--space-bp)),
    2.4rem
  );

  /* 32px → 20px */
  --space-32-20: clamp(
    2rem,
    calc(2rem + (32 - 20) * var(--space-bp)),
    3.2rem
  );

  /* 24px → 40px */
  --space-40-24: clamp(
    2.4rem,
    calc(2.4rem + (40 - 24) * var(--space-bp)),
    4.0rem
  );

  /* 32px → 64px */
  --space-64-32: clamp(
    3.2rem,
    calc(3.2rem + (64 - 32) * var(--space-bp)),
    6.4rem
  );

  /* 48px → 96px */
  --space-96-48: clamp(
    4.8rem,
    calc(4.8rem + (96 - 48) * var(--space-bp)),
    9.6rem
  );

  /* 60px → 120px（セクション間用） */
  --space-120-60: clamp(
    6rem,
    calc(6rem + (120 - 60) * var(--space-bp)),
    12.0rem
  );

  /* ============================================
     第2層：セマンティック変数（用途別）
     ============================================ */
  /* コンポーネント内部 */
  --padding-button: var(--space-xs) var(--space-sm);
  --padding-card: var(--space-md);
  --padding-input: var(--space-xs) var(--space-sm);

  /* 縦積みレイアウト */
  --gap-stack-sm: var(--space-sm);
  --gap-stack-md: var(--space-md);
  --gap-stack-lg: var(--space-lg);

  /* セクション間・コンテナ */
  --gap-section: var(--space-3xl);
  --padding-container-x: var(--space-md);
  --padding-container-y: var(--space-2xl);
}

/* 各種base計算式設定 */
*,
::before,
::after{
  /* font-clampサイズ設定 */
  --clamp-root-font-size: 10;
  --cqi-content-width: 1800;
  --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;
  scrollbar-gutter: stable;
}

body {
  font-family: "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);
  /* overflow-wrap: anywhere;  収まらない場合に折り返す */
  /* line-break: strict; 禁則処理を厳格に適用 */

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

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

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

  input[type="submit"], input[type="image"]:hover {
    opacity: 0.7;
  }

}

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

@layer priority{

/* #bkm 共通パーツ */
.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 {
/* #bkm l-*******レイアウトパーツ */
.l-section {
  width: 100%;
  margin-inline: auto;
}

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

.l-section.-bg-lightblue {
  background-color: var(--color-lightblue);
}

.l-contents {
  container-type: inline-size;
  width: var(--main-width);
  padding: var(--space-120-60) 0;
  margin-inline: auto;
}

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

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

.l-outside-right{
  margin-left: var(--content-margin);

  --content-margin: calc(100vw - var(--main-width));

  .l-contents{
    padding-right: var(--content-margin);
    margin-inline: revert;
  }

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

    .l-contents{
      width: 100%;
      padding-right: revert;
    }
  }
}

.l-outside-left{
  margin-right: var(--content-margin);

  --content-margin: calc(100vw - var(--main-width));

  .l-contents{
    padding-left: var(--content-margin);
    margin-inline: revert;
  }

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

    .l-contents{
      width: 100%;
      padding-left: revert;
    }
  }

}


/* #bkm m-*******モジュールパーツ */
.m-title-block {
  width: fit-content;
  margin-inline: auto;
  font-weight: var(--fontweight-black);

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

  &.-section-bar {
      width: 100%;
      padding: 1.15rem 2.5rem;
      margin-bottom: 3.5rem;
      font-weight: var(--fontweight-bold);
      color: var(--color-white);
      letter-spacing: 0.05em;
      background-color: var(--color-green);

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

      &:not(:first-child) {
        margin-top: var(--space-40-24);
      }
    }
}

.m-title-wrap{
  margin-bottom: var(--clamp-cqi);

  --clamp-cqi-max: 72;
  --clamp-cqi-min: 40;
}

.m-title-wrap.-blue{
  color: var(--color-blue);
}

.m-title-block__sub{
  width: fit-content;
  margin-inline: auto;
  font-weight: var(--fontweight-bold);
  line-height: 2;

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

.m-tittle-block.-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60px;
    text-align: center;

  /* Fluid Typography の適用 */
  .m-tittle-block__en {
    font-weight: var(--fontweight-black);
    line-height: 1.2;
    letter-spacing: 0.05em;

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

  .m-tittle-block__ja {
    margin-top: 8px;
    font-weight: var(--fontweight-bold);
    letter-spacing: 0.1em;

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

.m-text-block {
  width: 100%;
  word-break: auto-phrase;

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

.m-text-block.-border-top{
  padding-top: 3.8rem;
  border-top: 1px solid var(--color-blue);
}

.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: 400px;
  --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: 1rem;
  --unit-inline-size: 1rem;

  position: relative;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  justify-content: center;
  width: min(80%, 253px);
  padding: var(--unit-block-size) var(--unit-inline-size);
  margin-inline: auto;
  font-weight: var(--fontweight-bold);
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  letter-spacing: 1.4px;
  background-color: var(--color-blue);
  border-radius: var(--radius-40);
  transition: var(--transition);
}

@media (any-hover: hover) {
  .m-button-parts:hover{
    color: white;
    transition: var(--transition);
  }
}

.m-button-parts.-border{
  --unit-block-size: 2.4rem;
  --unit-inline-size: 2.4rem;
  --clamp-max: 14;
  --clamp-min: 10;

  gap: var(--space-40-24);
  width: min(35%, 322px);
  font-weight: var(--fontweight-black);
  color: inherit;
  background-color: revert;
  border: 1px solid var(--color-black);
  border-radius: revert;

  &::after{
    width: 26px;
    height: 26px;
    content: "";
    background-color: transparent;
    background-image: url('../images/common/btn_arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

  }
}

@media (any-hover: hover) {
  .m-button-parts.-border:hover{
    color: var(--color-blue);
    letter-spacing: var(--wide-letter);
    border: 1px solid var(--color-blue);
    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-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);
  }

}

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

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

.m-wbr {
  display: contents;

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

.m-float-bnr{
  position: fixed;
  right: 0;
  z-index: 1;
  transition: transform var(--transition);
  transform: translateX(40px);
  transform-origin: right center;
}

.ellipse-bnr{
  display: flex;
  column-gap: 1.8rem;
  align-items: center;
  width: min(35vw, 350px);
  padding: 1.8rem 2.7rem;
  margin-inline: auto;
  color: var(--color-white);
  word-break: auto-phrase;
  border-radius: var(--radius-60);

}

.ellipse-bnr.-red{
  bottom: 168px;
  background-color: var(--color-red);
}

.ellipse-bnr.-blue{
  bottom: 70px;
  background-color: var(--color-blue);
}

.m-float-bnr__tittle{
  display: grid;
  row-gap: .3rem;
  font-weight: var(--fontweight-black);

  --clamp-max: 20;
  --clamp-min: 10;

  & span{
    display: inline-block;

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

@media (any-hover: hover) {
  .m-float-bnr:hover{
    opacity: .8;
    transform: translateX(0);
  }
}

/* パンくず */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0;
  margin-bottom: 6.4rem;
  list-style: none;
}

.breadcrumb li + li::before {
  margin-right: 1rem;
  content: '>';
}

.breadcrumb a {
  color: var(--color-blue);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}


/* #bkm gsap関連 */
.js-text-flow > *{
  visibility: hidden;
  opacity: 0;
}


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


@layer utility {

/* #bkm header */
.l-header {
  position: absolute;
  top: 4rem;
  left: 0;
  z-index: 9;
  width: 100%;
  container-type: inline-size;
  background-color: var(--color-white);
}

.l-header.-lower{
  top: 1rem;
}

.header-inner {
  display: flex;
  column-gap: .8rem;
  align-items: center;
  padding: 1.4rem 0;
  margin-inline: auto;

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

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

}

.header-logo{
  margin-left: 2%;

  a{
    display: block;
    aspect-ratio: 320 / 55;

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

.header-navi{
  margin-right: min(6vw, 12rem);
  margin-left: auto;

  @container (width <= 930px){
    margin-left: revert;
  }
}

.header-naviList {
  display: grid;
  grid-template-columns: repeat(4, auto);
  column-gap: var(--space-20-14);
  align-items: center;
  width: min(70vw, 875px);

  @container (width <= 900px){
    width: 90vw;
  }

}

.header-naviList__data {
  position: relative;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1rem;
  align-items: center;
  font-weight: var(--fontweight-medium);
  line-height: 1.2;
  color: var(--color-blue);

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

  a{
    width: 100%;
    height: 100%;
  }

}

.tel-icon{
  width: 4.5rem;
  height: 4.5rem;
}

.header-naviList__tel{
  display: block;
  font-family: var(--font-barlow);
  line-height: 1;
  color: var(--color-black);
  letter-spacing: 0.84px;

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


/* ////#bkm navi///// */
#navTgl {
  display: none;
}

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

.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: 17.5%;
    bottom: 0;
    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: 57%;
  content: "";
  border-bottom: 2px solid var(--color-black);
  border-radius: 5px;
  transition: transform 0.3s cubic-bezier(0.76, 0.52, 0.29, 1.25);
}

.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: 57%;
  transform: rotate(30deg);
}

#navTgl:checked + .open::after { top: calc(40% - 1px);
  width: 57%;
  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;
  place-items: flex-start flex-end;
  width: 100%;
  height: 100vh;
  height: calc((1vh * 105) + 2rem);
  padding: 2rem 0 3rem;
  visibility: hidden;
  background-color: oklch(from var(--color-black) calc(l - 0.32) c h / 0.7);
  opacity: 0;
}

.slide-navi{
  width: min(80%, 450px);
  height: 100dvh;
  background-color: white;
}

.slide-navi-list {
  --scroll-gutter: 12.5rem;

  width: min(100%, 380px);
  height: 100%;
  padding: 0 1rem var(--scroll-gutter) 0;
  margin-top: var(--scroll-gutter);
  margin-right: 0;
  margin-left: 6rem;
  overflow-y: scroll;
  font-weight: var(--fontweight-bold);
  background-color: var(--color-white);

  .ellipse-bnr{
    & + .ellipse-bnr{
      margin-top: 1rem;
    }
  }
}

.slide-navi-list__data {
  --clamp-max: 24;
  --clamp-min: 20;

  width: 100%;
  padding: 2.4rem 0;
  overflow: hidden;
  color: var(--color-black);

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

  & a{
    display: flex;
    column-gap: 1.6rem;
    align-items: center;
  }
}

.slide-navi-list__title{
  --clamp-max: 22;
  --clamp-min: 18;

  padding: 1.2rem 1.8rem;
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-blue);
}

.slide-navi-list__sublist{
  margin-top: 2.2rem;
}

.slide-navi-list__sublist-item{
  padding: 1.2rem 0;

  & a{
    display: flex;
    column-gap: 1.2rem;
    align-items: center;
  }

  & a::before{
    display: inline-block;
    width: 1.7rem;
    height: 1.7rem;
    content: '';
    border-color: transparent transparent transparent var(--color-blue);
    border-style: solid;
    border-width: 8px 0 8px 16px;
  }
}


/* #bkm mainvisual */
.mv-top{
  position: relative;
  width: 100%;
  height: 100vh;
  aspect-ratio: 1920 / 1080;
  clip-path: inset(0);

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

.mv-top.-lower{
  height: 485px;
  aspect-ratio: 1920 / 485;
  overflow: hidden;

  picture:has(.js-parallax) {
    display: block;
    width: 100%;
    height: min(74vw, 485px);
  }

  :is(picture,.m-fixed-bg) img{
    object-position: center 40px;
  }

  .mv-top-lead{
    top: 60%;
    left: 50%;
    gap: .3rem;
    color: revert;
    text-align: center;
    letter-spacing: revert;
    transform: translate(-50%, -50%);
  }

  .mv-top-lead__main{
    padding-inline: revert;
    font-weight: var(--fontweight-black);

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

  .mv-top__sub-lead{
    width: revert;
    padding-inline: revert;

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

  .m-fixed-bg{
    top: 8rem;
    height: 42vh;
  }

  @media (width <= 1200px){
    .m-fixed-bg{
      height: 60vh;
    }
  }

}


/* === 元のCSS構造 === */
.mv-top-lead {
  position: absolute;
  top: min(28vw, 368px);
  left: 0;
  display: grid;
  row-gap: var(--space-24-16);
  width: fit-content;
  line-height: 1.2; /* ※9remは広すぎる可能性があるため調整推奨 */
  color: var(--color-white);
  letter-spacing: 4px;
}

/* === 🌟 GSAPアニメーションのための拡張設定 === */
.js-block-reveal {
  position: relative;
  /* 元の背景色はJSで疑似要素に任せるため透明化 */
  /* background-color: transparent; */
  z-index: 1;
  /* GSAPで操作するためのカスタムプロパティ */
  --reveal-scale: 0;
}

/* 背景のブロックリビールを担う疑似要素 */
.js-block-reveal::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  /* 元の背景指定をここに適用 */
  background-color: oklch(from var(--color-blue) calc(l - .08) c h / 0.8);
  transform: scaleX(var(--reveal-scale));
  transform-origin: left center;
  will-change: transform;
}

.mv-top-lead__main {
  --clamp-max: 70;
  --clamp-min: 22;

  width: min(70vw, 1000px);
  padding-block: 1.6rem;
  padding-right: var(--space-40-24);
  padding-left: var(--space-120-60);
  line-height: 1;
}

.mv-top-lead__main > span:not(.js-text-reveal) {
  --clamp-max: 90;
  --clamp-min: 70;
}

.mv-top__sub-lead {
  --clamp-max: 40;
  --clamp-min: 22;

  width: fit-content;
  padding-block: 1.3rem;
  padding-right: var(--space-40-24);
  padding-left: var(--space-120-60);
  line-height: 1;
}

span.mv-top-lead__sub {
  --clamp-max: 18;
  --clamp-min: 16;

  display: block;
  margin-top: 1.5rem;
  line-height: 1;
}

/* === 🌟 テキストスライドアップ用の設定 === */
.js-text-reveal {
  display: block;
  clip-path: inset(0 0 100% 0);
  /* 初期状態: 下方向にずらし、下側100%をマスクして見えなくする */
  transform: translateY(120%);
  will-change: transform, clip-path;
}





/* #bkm scroll-down */
.scroll-down {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: fit-content;
  height: 100vh;
  transform: translateX(-50%);

  --scroll-length: 220px;
}

.scroll-down span {
  position: absolute;
  right: -40px;
  bottom: 0;
  z-index: 2;
  display: inline-block;
  width: fit-content;
  padding: 0 0 152px 20px; /* テキスト線の距離等 */
  overflow: hidden;
  font-family: var(--font-barlow);
  line-height: 1;
  color: white;
  text-transform: uppercase;
  letter-spacing: .2em;
  writing-mode: vertical-lr;

  --clamp-max: 18;
}

.scroll-down span::before {
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 1px;
  height: var(--scroll-length);
  content: '';
  background: white;
}

.scroll-down span::after {
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 1px;
  height: var(--scroll-length);
  content: '';
  background: var(--color-black-dark);
  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%;
  }
}

/* #bkm Slide設定 */
/* 矢印のクリック範囲など */
.button {
  z-index: 1;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color: transparent; /* ボタンの背景を透明にする */
  border: none;
  transition: 0.2s;
}
/* 矢印共通のスタイル */
.button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 35px;
  margin: auto;
  content: "";
  background-color: var(--color-white);
  border-radius: 50%;
}
/* 前の矢印 */
.splide .prev::after {
  position: absolute;
  top: 50%;
  left: 10px;
  content: "";
  border-color: transparent #A8A8A8 transparent transparent;
  border-style: solid;
  border-width: 6px 12px 6px 0;
  transform: translateY(-50%);
}
/* 次の矢印 */
.splide .next::after {
  position: absolute;
  top: 50%;
  left: 13px;
  content: "";
  border-color: transparent transparent transparent #A8A8A8;
  border-style: solid;
  border-width: 6px 0 6px 12px;
  transform: translateY(-50%);
}

.splide .prev {
  position: absolute;
  top: 40%;
  left: 2%;
}

.splide .next {
  position: absolute;
  top: 40%;
  right: 2%;
}


/* /////#bkm HOUSING///// */
.housing{
  .l-contents{
    width: var(--full-width);
    padding-top: revert;
  }

  .m-title-block{
    line-height: 1;
  }

  :is(.m-title-block, .m-title-block__sub){
    margin-inline: revert;
  }

  .m-title-wrap{
    --clamp-cqi-max: 16;
    --clamp-cqi-min: 10;

    display: flex;
    column-gap: var(--space-24-16);
    align-items: center;

    &::before{
      display: inline-block;
      width: 9.8rem;
      height: 9.8rem;
      content: '';
      background-image: url('../images/common/housing-icon_b.svg');
      background-repeat: no-repeat;
      background-size: contain;
    }
  }


}

.housing-search-wrapper{
  background-color: var(--color-gray);
}

.housing-search{
  display: grid;
  grid-template-columns: minmax(280px, 760px) minmax(0, 590px);
  column-gap: var(--space-96-48);
  align-items: center;
  width: var(--main-width);
  padding: var(--space-120-60) 0;
  margin-inline: auto;

  @container (width <= 1000px){
    grid-template-columns: 1fr;
    row-gap: var(--space-64-32);
    justify-items: center;
  }
}

.housing-search-list{
  --column: 1;
}

.housing-search-list__item{
  padding: var(--space-20-14) 0;
  border-bottom: 1px solid var(--color-black);

  & a{
    display: flex;
    gap: var(--space-24-16);
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
  }
}

.housing-search-list__title{
  --clamp-max: 30;
  --clamp-min: 24;

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

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

    display: block;
  }
}

.map-container{
  width: min(100%, 760px);
  height: auto;
  aspect-ratio: 760 / 627;


  & p{
    --clamp-max: 16;
    --clamp-min: 14;

    padding-top: 1rem;
  }
}


.purpose-search-list{
  gap: var(--clamp-cqi);
  width: var(--main-width);
  margin-inline: auto;
  margin-top: calc(var(--space-40-24) * 2);

  --clamp-cqi-max: 10;
  --clamp-cqi-min: 8;
  --column: 4;

  @container (width <= 1179px){
    --column: 2;
  }
}

/* /////#bkm MAP///// */
.map-svg{
  border: 10px solid var(--color-white);
}

.st0 {
  fill: #3e3a39;
}

.st1 {
  fill: #595757;
}

.st2 {
  stroke: #006934;
}

.st2, .st3 {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3px;
}

.st2, .st3, .st4, .st5 {
  fill: none;
}

.st6, .st7, .st8, .st9 {
  fill: #fff;
}

.st10 {
  fill: #ff9d00;
}

.st3 {
  stroke: #036eb8;
}

.st11 {
  fill: var(--color-green);
  transition: fill .8s ease;
}

.map-link:hover{
  opacity: 1;

  & > .st11 {
    fill: var(--color-green-dark);
    transition: fill .8s ease;
  }
}

.st12 {
  letter-spacing: .3em;
}

.st13 {
  fill: #006934;
}

.st14 {
  clip-path: url("#clippath-1");
}

.st7 {
  & > * {
    font-size: 8.7px;
  }
}

.st15 {
  fill: #0184fd;
}

.st5 {
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 1px;
}

.st8 {
  font-size: 11px;
  font-weight: 500;

  & > * {
    font-size: 11px;
  }
}

.st16 {
  fill: #efefef;
}

.st9 {
  font-weight: 700;

  & > * {
    font-size: 13px;
  }
}

.st17 {
  clip-path: url("#clippath-2");
}

.st18 {
  fill: #bbdced;
}

.st19 {
  fill: #dcdddd;
}

.st20 {
  clip-path: url("#clippath");
}

.st21 {
  fill: #036eb8;
}

.map-wrapper {
  --accent-yellow: #ff9d00;
  --easing-expo: cubic-bezier(0.16, 1, 0.3, 1); /* 高級感のある急激な減速 */
  --easing-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* わずかにバウンドする心地よい動き */

  position: relative;
  width: 100%;
  max-width: 800px;
  /* SVGの viewBox="0 0 500 250" と同じ比率（2:1）を自動キープ */
  aspect-ratio: var(--view-w) / var(--view-h);
}

/* 円のホバー時のアニメーション */
.st10 {
  fill: var(--accent-yellow);
  transition: transform 0.4s var(--easing-back), fill 0.3s;
  transform-origin: center;
  transform-box: fill-box;
}

a:hover .st10 {
  fill: var(--accent-yellow);
  transform: scale(1.5);
}

[id^="trigger-"]:hover{
  opacity: 1;
}

/* =================================================================
    2. ツールチップの座標自動計算（全ブラウザ完全互換）
    ================================================================== */
.html-tooltip {
  position: absolute;
  top: calc((var(--y) / var(--view-h)) * 100%);

  /*
    ★ 魔法の計算式：
    HTML側で指定した円のX, Y座標を、全体の幅・高さで割って%の位置を割り出します。
    これで画面幅がどれだけ変化しても、円の真上の座標と完全に一致し続けます。
  */
  left: calc((var(--x) / var(--view-w)) * 100%);
  z-index: 10;
  padding: 2px 8px 7px;
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
  pointer-events: none; /* ホバーしていないときはマウスをスルー */

  /* デザイン：高級感のあるグラスモフィズム */
  background: rgb(10 14 23 / 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 6px;
  opacity: 0;
  transition:
    opacity 0.4s var(--easing-expo),
    transform 0.4s var(--easing-back);

  /*
    基準位置をツールチップの下部中央にし、
    translateY(-12px) で円の直径とマージン分を真上に浮かせてぴったり配置します。
  */
  transform: translate(-40%, -100%) translateY(-2px) scale(0.9);

  .title{
    font-size: 1.4rem;
  }
}

/* =================================================================
    3. ホバー連動表示 (:has を使ってCSSだけで確実に紐付け)
    ================================================================== */
.map-wrapper:has([id^="trigger-"]:hover) [id^="tip-"] {
  display: none;  /* 初期状態が非表示の場合 */
  opacity: 1;
  transform: translate(-40%, -100%) translateY(-14px) scale(1);
}

.map-wrapper:has(#trigger-01:hover) #tip-01 { display: block; }
.map-wrapper:has(#trigger-02:hover) #tip-02 { display: block; }
.map-wrapper:has(#trigger-03:hover) #tip-03 { display: block; }
.map-wrapper:has(#trigger-04:hover) #tip-04 { display: block; }
.map-wrapper:has(#trigger-05:hover) #tip-05 { display: block; }
.map-wrapper:has(#trigger-06:hover) #tip-06 { display: block; }
.map-wrapper:has(#trigger-07:hover) #tip-07 { display: block; }
.map-wrapper:has(#trigger-08:hover) #tip-08 { display: block; }
.map-wrapper:has(#trigger-09:hover) #tip-09 { display: block; }
.map-wrapper:has(#trigger-10:hover) #tip-10 { display: block; }
.map-wrapper:has(#trigger-11:hover) #tip-11 { display: block; }
.map-wrapper:has(#trigger-12:hover) #tip-12 { display: block; }
.map-wrapper:has(#trigger-13:hover) #tip-13 { display: block; }
.map-wrapper:has(#trigger-14:hover) #tip-14 { display: block; }
.map-wrapper:has(#trigger-15:hover) #tip-15 { display: block; }
.map-wrapper:has(#trigger-16:hover) #tip-16 { display: block; }
.map-wrapper:has(#trigger-17:hover) #tip-17 { display: block; }
.map-wrapper:has(#trigger-18:hover) #tip-18 { display: block; }
.map-wrapper:has(#trigger-19:hover) #tip-19 { display: block; }
.map-wrapper:has(#trigger-20:hover) #tip-20 { display: block; }
.map-wrapper:has(#trigger-21:hover) #tip-21 { display: block; }
.map-wrapper:has(#trigger-22:hover) #tip-22 { display: block; }
.map-wrapper:has(#trigger-23:hover) #tip-23 { display: block; }
.map-wrapper:has(#trigger-24:hover) #tip-24 { display: block; }
.map-wrapper:has(#trigger-25:hover) #tip-25 { display: block; }
.map-wrapper:has(#trigger-26:hover) #tip-26 { display: block; }



.purpose-search-list__item{
  --row-num:2;

  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-20-14);
  align-items: center;
  padding: var(--space-40-24) 1.3rem;
  text-align: center;
  background-color: var(--color-gray);

  &::before{
    position: absolute;
    bottom: -1.5cqi;
    left: 1cqi;
    z-index: 1;
    font-weight: var(--fontweight-bold);
    color: white;


    --clamp-max: 58;
    --clamp-min: 44;
  }



  &:nth-of-type(1){
    &::before{
      content: 'BUY';
    }

    .purpose-search-subtitle-list__title.-main{
      border-bottom: 2px solid var(--color-blue);
    }

    .purpose-search-subtitle-list__link{
      &::before{
        border-left: 0.5em solid var(--color-blue);
      }
    }

  }

  &:nth-of-type(2){
    &::before{
      content: 'LEND';
    }


    .purpose-search-subtitle-list__title.-main{
      border-bottom: 2px solid var(--color-red);
    }
  }

  &:nth-of-type(3){
    &::before{
      content: 'RENT';
    }


    .purpose-search-subtitle-list__title.-main{
      border-bottom: 2px solid var(--color-orange);
    }

    .purpose-search-subtitle-list__link{
      &::before{
        border-left: 0.5em solid var(--color-orange);
      }
    }

  }

  &:nth-of-type(4){
    &::before{
      content: 'SELL';
    }


    .purpose-search-subtitle-list__title.-main{
      border-bottom: 2px solid var(--color-green);
    }
  }

}

.purpose-search-subtitle-list__title{
  position: relative;
  margin-bottom: var(--space-20-14);
  font-weight: var(--fontweight-bold);

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

}

.purpose-search-subtitle-list__link{
  display: flex;
  column-gap: 1rem;
  align-items: center;
  justify-content: center;

  &::before{
    width: 0;
    height: 0;
    margin-left: 0.5rem;
    vertical-align: middle;
    content: '';
    border-top: 0.35em solid transparent;
    border-bottom: 0.35em solid transparent;
  }
}


.purpose-search-subtitle-list__title.-main{
  --clamp-max: 30;
  --clamp-min: 24;

  align-self: flex-start;
  line-height: 1.8;
}


/* /////#bkm top-COMPLETEPROJECTS///// */
.complete-projects{
  .l-contents{
    width: var(--full-width);
    padding-top: revert;
  }

  .m-text-block{
    line-height: 5.4rem;
    text-align: center;
  }
}

.projects-slide{
  margin-bottom: calc(var(--space-40-24) * 2 );
}

.projects-slide__tittle{
  --clamp-max: 18;
  --clamp-min: 14;

  margin-top: 1.2rem;
  font-weight: var(--fontweight-medium);

  & span{
    --clamp-max: 13;
    --clamp-min: 10;

    display: block;
    width: fit-content;
    padding: 0.3rem 0.6rem;
    color: var(--color-white);
    background-color: var(--color-blue);
  }
}

/* /////#bkm top-CONTENTS///// */
.contents{
  background-color: var(--color-sky-blue);
  background-image: url("../images/top/contents_bg.svg");
  background-repeat: no-repeat;
  background-position: center bottom -5px;
  background-size: 100% auto;

  .l-contents{
    --cqi-content-width: 1450;
    --clamp-cqi-max: 180;
    --clamp-cqi-min: 120;

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

  .m-title-wrap{
    margin-bottom: var(--space-40-24);
  }

  .m-text-block{
    line-height: 5.4rem;
    text-align: center;
  }
}

.contents-list{
  --column: 3;
  --cqi-content-width: 1450;
  --clamp-cqi-max: 28;
  --clamp-cqi-min: 20;

  gap: var(--clamp-cqi);

  .m-title-block{
    --clamp-max: 40;
    --clamp-min: 20;

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

  .m-title-block__sub{
    --clamp-max: 13;
    --clamp-min: 10;

     color: var(--color-blue);
  }

  @container (width <= 1199px){
    --column: 2;
  }

}

.contents-list__item{
  place-items: center;
}

.contents-list__content{
  --clamp-cqi-max: 80;
  --clamp-cqi-min: 40;

  width: min(80%, 325px);
  padding: var(--clamp-cqi) 0 var(--clamp-cqi);
  background-color: oklch(from var(--color-white) l c h / .85);
}


/* /////#bkm topLINK-AREA///// */
.link-area{
  .m-text-block{
    padding-top: 5rem;
    line-height: 3.3rem;
    text-align: center;
  }

}

.link-area-list{
  --column: 3;

  column-gap: var(--space-24-16);

  .m-subgrid-item{
    --row-num: 1;
  }
}

.link-area-list.-col2{
  gap: var(--space-12-8);
  width: min(100%, 1000px);
  margin-inline: auto;

  --column: 2;

  .link-area-list__item{
    grid-template-columns: minmax(auto,150px) minmax(100px, 1fr) ;

    .m-title-block{
      --clamp-max: 35;
      --clamp-min: 26;

      margin-inline: auto;
    }

    .m-title-block__sub{
      --clamp-max: 20;
      --clamp-min: 14;

      margin-inline: auto;
    }

  }

}

.link-area-list__item{
  display: grid;
  grid-template-columns: minmax(auto,127px) minmax(100px, 1fr);
  column-gap: var(--space-16-12);
  place-items: center center;
  padding: calc(var(--space-32-20) - .2rem) var(--space-32-20);
  border: 1px solid var(--color-gray-dark);

  .m-title-block{
    --clamp-max: 27;
    --clamp-min: 20;

    margin-inline: revert;
    font-weight: var(--fontweight-bold);
  }

  .m-title-block__sub{
    --clamp-max: 16;
    --clamp-min: 14;

    margin-inline: revert;
  }
}

/* #bkm 都市開発 */
.projects{
  .m-text-block{
    font-weight: var(--fontweight-bold);
    line-height: 3rem;
    text-align: center;
  }
}

.projects-filter {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: calc(var(--space-40-24) * 2);
  margin-bottom: 30px;
}

.projects-filter__label {
  margin-right: 8px;
  font-weight: bold;

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

.projects-filter__button {
  display: inline-block;
  padding: 8px 14px;
  color: var(--color-gray-dark-x);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--color-gray-dark-x);

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

.projects-filter__button:hover {
  color: #fff;
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  opacity: 1;
}

.projects-filter__button.is-active {
  color: #fff;
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

.projects-list{
  --column: 3;

  gap: var(--space-40-24) 2rem;
  margin-top: var(--space-40-24);
}

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

  gap: .5rem;
}

.projects-list__wrapper{
  position: relative;
}

.projects-list__tag{
  position: absolute;
  top: -15px;
  left: 0;
  display: inline-block;
  width: fit-content;
  padding: .6rem .8rem;
  margin-bottom: .3rem;
  color: white;
  background-color: var(--color-blue);

  --clamp-max: 13;
  --clamp-min: 10;

  &:empty{
    visibility: hidden;
  }
}

.projects-list__img{
  width:100%;
  aspect-ratio: 680 / 340;
  object-fit: cover;
}

.projects-list__title{
  --clamp-max: 22;
  --clamp-min: 18;

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

.projects-list__cate{
  padding: .8rem;
  text-align: center;
  border: 1px solid var(--color-gray-dark);

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

  &:empty{
    visibility: hidden;
  }
}

.pager{
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-24-16);
  align-items: center;
  width: fit-content;
  margin-inline: auto;
  margin-top: 4rem;

  & span{
    display: grid;
    place-items: center;
    width: 35px;
    aspect-ratio: 1;
    color: var(--color-white);
    background-color: var(--color-blue);
    border-radius: var(--radius-80);
  }

  & a{
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
}

/* #bkm 前回閲覧履歴 */
.history-wrapper{
  --column:2;

  column-gap: var(--space-20-14);
}

.history_box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-20-14) var(--space-24-16);
  background-color: var(--color-gray);
  border: 1px solid var(--color-black);
}

.history-image{
  width: min(100%, 170px);
  height: 100%;
  object-fit: cover;
}

.history-contents{
  display: grid;
  grid-template-rows: max-content max-content max-content auto;

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

.history-contents__name{
 font-weight: var(--fontweight-bold);
}

.history-contents__btn{
  width: fit-content;
  margin-top: var(--space-40-24);
}

/* #bkm おすすめ物件 用スタイル */

.osusume{
.l-contents{
  width: var(--sub-width);
}

table.pagemove {
  margin-block: 1.6rem;
  border-collapse: collapse;
}

table.pagemove td.pl5 {
  padding-left: 5px;
}

table.pagemove td.pr5 {
  padding-right: 5px;
}

table.pagemove select {
  padding: 0.5rem 0.8rem;
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 4px;
}

table.pagemove input[type="submit"] {
  padding: 0.5rem 1.2rem;
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  background-color: #0083FA;
  border: none;
  border-radius: 4px;
  transition: opacity 0.3s;
}

table.pagemove input[type="submit"]:hover {
  opacity: 0.75;
}

/* ── おすすめ物件一覧（reco_ichiran） ── */
table.reco_ichiran {
  width: 100%;
  margin-bottom: 3rem;
  border-collapse: collapse;
  background-color: var(--color-gray); /* cellspacing 代わり */
  border: 1px solid var(--color-gray-dark);
}

/* reco_top：物件ヘッダー行テーブル */
table.reco_top {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-gray);
}

table.reco_top th {
  padding: 0.8rem 1rem;
  font-size: clamp(1.3rem, 1.6vw, 1.6rem);
  font-weight: bold;
  color: #fff;
  text-align: left;
}

/* 物件タイトル行（最上部のth） */
table.reco_top > tbody > tr:first-child > th {
  background-color: var(--color-gray);
  border-bottom: 1px solid var(--color-gray-dark);
}

/* ヘッダーラベル行（物件番号・種別・交通・価格…） */
table.reco_top > tbody > tr:not(:first-child) > td {
  padding: 0.6rem 0.8rem;
  text-align: center;
  border-bottom: 1px solid var(--color-gray-dark);


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

  &:not(:last-child) {
    border-right: 1px solid var(--color-gray-dark);
  }

}

table.reco_top > tbody > tr:nth-child(2) > td{
  border-bottom: 1px solid var(--color-gray-dark);
}


/* データセル（.white） */
table.reco_top td.white {
  padding: 0.8rem 1rem;
  font-size: clamp(1.3rem, 1.5vw, 1.5rem);
  color: #333;
  background-color: #fff;
  /* border-right: 2px solid var(--color-gray-dark); */
}

/* 価格セル */
table.reco_top td.white strong {
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  color: #0083FA;
}

/* NEWバッジ等 */
table.reco_top .new {
  display: block;
  width: fit-content;
  padding: 5px;
  margin-inline: auto;
  margin-bottom: 0.4rem;
  font-weight: var(--fontweight-bold);
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  background-color: oklch(73.71% 0.1452 164.55deg);
  border-radius: .5rem;

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

/* reco_bottom：画像・担当者コメントエリア */
table.reco_bottom {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}

table.reco_bottom > tbody > tr > td {
  padding: 1rem;
  background-color: #fff;
}

/* 物件画像エリア */
#shousai_pic {
  margin: 0;
}

#shousai_pic td {
  padding: 0.6rem;
  background-color: #fff;
}

#shousai_pic img {
  display: block;
  max-width: 160px;
  height: auto;
  border-radius: 2px;
  transition: opacity 0.25s;
}

#shousai_pic img:hover {
  opacity: 0.8;
}

/* 営業担当コメントテーブル */
table.reco_comment {
  width: 100%;
  overflow: hidden;
  border-collapse: collapse;
  border-radius: 4px;
}

table.reco_comment th {
  padding: 0.8rem 1rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: var(--color-blue);
}

table.reco_comment td {
  padding: 1rem 1.2rem;
  line-height: 1.7;
  background-color: #f5f7fb;

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

/* 担当者写真 */
table.reco_comment .person img {
  display: block;
  max-width: 120px;
  height: auto;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

table.reco_comment .name {
  margin: 0;
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
}

/* 会社名 */
.r_company {
  --clamp-max: 14;
  --clamp-min: 12;

  color: #555;
}

/* 詳細ボタン（history-desc-btn.svg） */
table.reco_top img[onclick] {
  vertical-align: middle;
  cursor: pointer;
  transition: opacity 0.25s;
}

table.reco_top img[onclick]:hover {
  opacity: 0.75;
}

}

/* /////#bkm 資料請求カート///// */

.cart{

  /* カートコンテンツのレイアウト調整 */
  #top_contents {
    width: var(--sub-width);
    padding-block: 0 var(--space-96-48) var(--space-40-24);
    margin-inline: auto;
  }

  #top_contents h2 {
    margin-bottom: 2rem;
  }

  #top_contents .mt15 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  #top_contents p {
    line-height: 1.6;
    color: var(--color-black);

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


  /* テーブルスタイル (#seach_ichiran) を item-list-table と同様にする */
  #seach_ichiran {
    width: 100% !important;
    margin-bottom: 2rem;
    border-collapse: collapse !important;
    background-color: var(--color-gray-dark) !important;
    border: 1px solid var(--color-gray-dark) !important;
  }

  /* ヘッダーセル */
  #seach_ichiran th {
    padding: 1.5rem 1rem !important;
    font-weight: var(--fontweight-bold) !important;
    color: var(--color-black) !important;
    text-align: center !important;
    vertical-align: middle !important;
    background-color: var(--color-gray) !important;
    border: 1px solid var(--color-gray-dark) !important;

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

  /* ボディ行のホバー */
   #seach_ichiran tr:not(:has(th)) {
    background-color: var(--color-white) !important;
    transition: background-color 0.2s;
  }
/*
  #seach_ichiran tr:not(:has(th)):hover {
    background-color: var(--color-sky-blue) !important;
  } */

  /* データセル */
  #seach_ichiran td {
    padding: 1.2rem 1rem !important;
    color: var(--color-black);
    vertical-align: middle !important;
    background-color: transparent !important; /* 行のホバー色を活かすため */
    border: 1px solid var(--color-gray-dark) !important;

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

  /* 削除ボタンセル (1番目のtd) */
  #seach_ichiran td:first-child {
    text-align: center !important;
  }

  #seach_ichiran td:first-child a {
    display: inline-block;
    transition: opacity 0.3s;
  }

  /* #seach_ichiran td:first-child a:hover {
    opacity: 0.75;
  } */

  /* 物件番号と写真セル (2番目のtd) */
  #seach_ichiran td:nth-child(2) {
    font-weight: var(--fontweight-regular);
    line-height: 1.4;
    text-align: center !important;
  }

  #seach_ichiran td:nth-child(2) img {
    display: inline-block;
    max-width: 99px;
    height: auto;
    margin-top: 0.5rem;
    object-fit: cover;
    border-radius: 2px;
    transition: opacity 0.3s;
  }

  /* #seach_ichiran td:nth-child(2) a:hover img {
    opacity: 0.75;
  } */

  /* 物件種別/所在地と交通情報 (3番目のtd) */
  #seach_ichiran td:nth-child(3) {
    line-height: 1.6;
    text-align: left !important;
  }

  #seach_ichiran td:nth-child(3) .koushin {
    display: block;
    margin-bottom: 0.8rem;
    font-weight: var(--fontweight-bold) !important;
    color: var(--color-black);
  }

  /* 価格/更新日と物件情報 (4番目のtd) */
  #seach_ichiran td:nth-child(4) {
    line-height: 1.7;
    text-align: left !important;
  }

  #seach_ichiran td:nth-child(4) .koushin {
    display: inline-block;
    margin-bottom: 0.8rem;
    font-weight: var(--fontweight-bold) !important;
    color: var(--color-blue) !important; /* 青色 */

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

  /* 下部アクションボタンエリア */
  #top_contents .btn {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 3.2rem;
    margin-bottom: 3.2rem;
  }

  #top_contents .btn input[type="image"] {
    padding: revert;
    cursor: pointer;
    background-color: revert;
    transition: transform 0.2s, opacity 0.2s;
  }
}


/* /////#bkm 貸す///// */
.lend{
  .l-contents{
    width: var(--sub-width);
  }
}

#lend_main{
  line-height: 1.8;

  & h3{
    width: revert;
    margin-bottom: 1.25rem;
    font-weight: var(--fontweight-bold);
    color: var(--color-green);
    letter-spacing: 0.03em;

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

  & h4{
    /* margin-bottom: var(--space-24-16); */
    font-weight: var(--fontweight-bold);
    color: var(--color-black);

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

  & dl{
    margin-top: var(--space-20-14);
  }

  & dt{
    display: flex;
    gap:1rem;
    align-items: center;
    font-weight: var(--fontweight-bold);

    --clamp-max: 24;
    --clamp-min: 20;

    &::before{
      content: '';
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 12px solid var(--color-green);
    }
  }

  & dd{
    margin-bottom: var(--space-24-16);
  }

  .inner{
    margin-bottom: var(--space-40-24);
  }

  .green-box{
    padding: 3.2rem 3.6rem;
    margin-top: var(--space-40-24);
    background-color: var(--color-gray);
    border-left: 6px solid var(--color-green);
    border-radius: 4px;
  }

  .m-button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    width: fit-content;
    margin-inline: auto;
    margin-top: calc(var(--space-40-24) * 2);
  }

  .m-button-parts {
    width: min(100%, 420px);
    padding: 3.2rem;
    font-weight: var(--fontweight-bold);
    color: var(--color-white);
    text-align: center;
    letter-spacing: 0.05em;
    cursor: pointer;
    background-color: var(--color-green);
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.2s ease;

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

}

/* /////#bkm 売却する///// */
.sell{
  .l-contents{
    width: var(--sub-width);
  }
}


/* /////#bkm 資産活用///// */
.moneyplan {
  .l-contents {
    max-width: var(--sub-width);
  }

  /* Titles & Text Blocks */
  .m-title-block {
    &.-main {
      margin-bottom: 2.5rem;
      font-size: 2.25rem;
      font-weight: var(--fontweight-bold);
      color: var(--color-green);
      text-align: center;
      letter-spacing: 0.05em;
    }

    &.-h3 {
      width: revert;
      margin-bottom: 1.25rem;
      font-weight: var(--fontweight-bold);
      color: var(--color-green);
      letter-spacing: 0.03em;


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

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

  /* Points List Section */
  .m-point-list {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
  }

  .m-point-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
  }

  .m-tittle-wrap {
    display: flex;
    flex-shrink: 0;
    gap: 1.25rem;
    align-items: center;
    width: 280px;
  }

  .m-point-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: var(--color-green);
    transform: rotate(-10deg);
  }

  .m-point-card__header {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .m-point-card__label {
    font-weight: var(--fontweight-bold);
    color: var(--color-green);
    letter-spacing: 0.05em;

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

  .m-point-card__tittle {
    font-weight: var(--fontweight-bold);
    line-height: 1.2;
    color: var(--color-green);

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

  .m-point-card__text {
    line-height: 1.85;
    letter-spacing: 0.02em;
  }

  /* Flow Chart Visualizer */
  .m-flow-chart {
    display: flex;
    flex-direction: column;
    margin: var(--space-40-24) 0;
  }

  /* Content Explanations Block */
  .m-detail-block {
    margin-bottom: 4.5rem;
    line-height: 1.8;
  }

  /* Bottom Menu Grid */
  .m-button-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .m-button-parts {
    width: min(100%, 390px);
    padding: 3.2rem 1rem;
    font-weight: var(--fontweight-bold);
    color: var(--color-white);
    text-align: center;
    letter-spacing: 0.05em;
    cursor: pointer;
    background-color: var(--color-green);
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.2s ease;

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



}

/* /////#bkm 相続について///// */
.succession{

    /* ---------- セクション・コンテンツ幅 ---------- */
    .l-contents {
      box-sizing: border-box;
      width: min(95%, 1200px);
      max-width: 1200px;
      padding-top: 6rem;
      padding-bottom: 8rem;
      margin-inline: auto;
    }

    /* ---------- #main_contents ラッパー ---------- */
    #main_contents {
      width: 100%;
    }

    /* ---------- パンくずリスト ---------- */
    .pankuzu {
      margin-bottom: 2.4rem;
      font-size: 1.4rem;
      color: #555;
    }

    .pankuzu a {
      color: var(--color-blue);
      text-decoration: none;
    }

    /* ---------- ページタイトル画像 ---------- */
    #main_contents > h2 {
      margin-bottom: 3.6rem;
    }

    #main_contents > h2 img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    /* ---------- r_contents ---------- */
    #r_contents {
      display: flex;
      flex-direction: column;
    }

    /* ---------- blue_box（説明文エリア） ---------- */
    .blue_box {
      padding: 3.2rem 3.6rem;
      background-color: var(--color-gray);
      border-left: 6px solid var(--color-green);
      border-radius: 4px;
    }

    .blue_box table {
      width: 100%;
      border-collapse: collapse;
    }

    .blue_box td {
      padding: 0;
      font-size: 1.6rem;
      line-height: 1.85;
      color: var(--color-black);
      letter-spacing: 0.02em;
      word-break: auto-phrase;
      vertical-align: top;
    }

    .blue_box td p {
      margin: 0;
    }

    /* ---------- report（バードレポート実例集） ---------- */
    .report {
      padding: 3.2rem 3.6rem;
      background-color: var(--color-gray);
      border-radius: 4px;
    }

    .report h3 {
      margin-bottom: 2rem;
    }

    .report h3 img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    .report p {
      font-size: 1.6rem;
      text-align: center;
    }
  }


/* /////#bkm 不動産売買の疑問///// */
.faq{
  .l-contents{
    width: var(--sub-width);
  }

  .search-section-heading{
    margin-bottom: revert;
  }

}

.faq_box{
padding:20px 0 0;
margin:20px 0 0;
}

.faq_box.-blue{
  --color-green: var(--color-blue);
}

.faq_box h3{
padding:0;
margin:0 0 10px;
font-size:14px;
}

.faq_box dt{
display: flex;
gap: var(--space-20-14);
align-items: center;
padding:7px 0 5px;
margin:0;
font-weight:bold;
color:var(--color-green);

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

.faq_box dt::before{
  width: 40px;
  height: 40px;
  font-weight:bold;
  color:var(--color-white);
  text-align: center;
  content: "Q";
  background-color: var(--color-green);

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


.faq_box dd{
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--space-20-14);
align-items: center;
padding:1rem 0;
margin:0 0 20px;
border-bottom: 1px solid var(--color-gray);
}

.faq_box dd::before{
  align-self: flex-start;
  width: 40px;
  height: 40px;
  font-weight:bold;
  color:var(--color-white);
  text-align: center;
  content: "A";
  background-color: var(--color-green);

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

.faq-link-list{
  column-gap: var(--space-20-14);
  margin-bottom: var(--space-40-24);

  .m-title-wrap{
    --clamp-cqi-max: 20;
    --clamp-cqi-min: 16;
  }

  .m-title-block{
    --clamp-max: 40;
    --clamp-min: 32;

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

  .m-title-block__sub{
    --clamp-max: 12;
    --clamp-min: 10;

    color:var(--color-blue);
  }

  & p{
    text-align: center;
  }

}

.faq-link-list__item{
  place-items: center;
}

.faq-link-list__content{
    --clamp-cqi-max: 28;
    --clamp-cqi-min: 20;

    width: min(80%, 485px);
    padding: var(--clamp-cqi) 0 var(--clamp-cqi);
    background-color: oklch(from var(--color-white) l c h / .85);
}

/* /////#bkm プライバシーポリシー///// */
.policy .l-contents {
  width: min(95%, 1200px);
  max-width: 1200px;
}

/* ページタイトル画像 */
.policy #main_contents > h2 {
  margin-bottom: 3.6rem;
}

.policy #main_contents > h2 img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* コンテンツラッパー */

.policy #width915 {
  width: 100%;
  line-height: 1.8;
}

/* 定義リスト */
.policy .policy_box dt {
  display: flex;
  gap: var(--space-20-14);
  align-items: center;
  padding: 7px 0 5px;
  margin: 0;
  font-weight: bold;
  color: var(--color-green);

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

.policy .policy_box dd {
  padding: 1rem 0;
  margin: 0 0 20px;
}


/* dd内のulリスト */
.policy .policy_box dd ul {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin-top: var(--space-12-8);
  list-style: none;
}

.policy .policy_box dd ul li {
  position: relative;
  padding-left: 2.4rem;
  line-height: 1.75;
}

.policy .policy_box dd ul li::before {
  position: absolute;
  top: .8rem;
  left: 0;
  width: 0;
  height: 0;
  font-size: 1rem;
  content: "●";
}


/* /////#bkm info-CONTACT US///// */
.info {
  .l-contents{
    width: var(--sub-width);
  }

  .contact__lead {
    margin-bottom: calc(var(--space-40-24) * 2);
    font-weight: var(--fontweight-bold);
    line-height: 1.8;
    text-align: center;

    p {
      --clamp-min: 16;
      --clamp-max: 20;

      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

/* 6つのコンタクトグリッド */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16-12);
  margin-bottom: 100px;

  @media (width <= 1100px) {
    gap: 15px;
  }

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

  @media (width <= 599px) {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 60px;
  }
}

/* コンタクトボタン */
.contact-btn {
  display: flex;
  align-items: center;
  height: 100%;
  padding: var(--space-40-24) 20px;
  color: var(--color-white);
  cursor: pointer;
  background-color: var(--color-green);
  border-radius: var(--radius-10);
  transition:  transform var(--transition);

  &:hover {
    transform: translateY(-2px);
  }

  .contact-btn__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-right: 15px;
    border-radius: 50%;

    @media (width <= 1100px) {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
  }

  .contact-btn__text {
    font-weight: var(--fontweight-bold);

    --clamp-min: 22;
    --clamp-max: 26;

    line-height: 1.4;
    letter-spacing: 0.02em;
  }
}

/* 3つの店舗情報レイアウト */
.contact-stores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-40-24);

  @media (width <= 1000px) {
    gap: 20px;
  }
}

.contact-store {
  display: flex;
  flex-direction: column;

  /* 店舗タイトル部 */
  .contact-store__tittle {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-black);
  }

  /* 緑色の吹き出し風アイコン */
  .contact-store__icon {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background-color: var(--color-green);
    border-radius: 50%;

    /* 左下の突起 */
    &::after {
      position: absolute;
      bottom: -2px;
      left: 2px;
      width: 0;
      height: 0;
      content: "";
      border-color: var(--color-green) transparent transparent transparent;
      border-style: solid;
      border-width: 10px 10px 0 0;
      transform: rotate(15deg);
    }

    svg {
      width: 32px;
      height: 32px;
      fill: var(--color-white);
    }

    @media (width <= 1100px) {
      width: 44px;
      height: 44px;

      &::after {
        border-width: 8px 8px 0 0;
      }

      svg {
        width: 24px;
        height: 24px;
      }
    }
  }

  .contact-store__tittle-text {
    font-weight: var(--fontweight-bold);

    --clamp-min: 17;
    --clamp-max: 23;

    line-height: 1.4;
    letter-spacing: .2rem;


    span{
      --clamp-min: 16;
      --clamp-max: 20;
    }
  }

  /* 店舗画像（黒塗りプレースホルダー） */
  .contact-store__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: .8rem;
    margin-bottom: 24px;
    border: 1px solid var(--color-black);

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

  /* 詳細情報 */
  .contact-store__info {
    text-align: center;
  }

  .contact-store__name {
    margin-bottom: 20px;
    font-weight: var(--fontweight-bold);
    line-height: 1.4;

    --clamp-min: 20;
    --clamp-max: 24;

    .contact-store__subname {
      display: inline-block;
      margin-top: 6px;
      font-weight: var(--fontweight-regular);
      letter-spacing: 0.1em;

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

  /* 連絡先情報リスト */
  .contact-store__meta {
    border-top: 1px solid var(--color-gray-dark);
  }

  .contact-store__meta-item {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-gray-dark);
  }

  .contact-store__meta-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .contact-store__meta-text {
    font-weight: var(--fontweight-bold);

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

    letter-spacing: 0.05em;
  }
}




.contact{
  --contact-width: min(100%, 1135px);

  .l-contents{
    width: var(--sub-width);
  }

  .m-title-wrap{
    color: white;
  }

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

    margin: 3.2rem 0 0;
    font-weight: var(--fontweight-bold);
    color: white;
    text-align: center;
  }

  table, div#wpcf7cpcnf table{
    width: min(100%, 1135px);
    margin-inline: auto;

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

  tr , div#wpcf7cpcnf tr{
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  th{
    font-weight: var(--fontweight-bold);
    text-align: left;

    --clamp-max: 20;
    --clamp-min: 15;

  }


  td{
    margin-bottom: 3.2rem;
    container-type: inline-size;

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


}


/* ////formまわり//// */
/* .form-wrapper{
  width: var(--contact-width);
  margin-inline: auto;


  .m-button-parts{
    --unit: 2.4rem;

    width: min(75%, 309px);
    margin-top: 3.2rem;
    font-weight: var(--fontweight-bold);
    color: revert;
    background-color: var(--color-yellow);
    border-radius: 20rem;

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

.required{
  display: flex;
  align-items: center;

  &::after {
  padding: 0 0.8rem .2rem;
  margin-left: 1.2rem;
  font-weight: var(--fontweight-medium);
  color: white;
  content: "必　須";
  background-color: var(--color-blue);

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

  @media (width <= 599px){
    &::after {
      color: white;
    }
  }
}

::placeholder {
  color: #999;
}

input,
textarea,
#wpcf7cpcnf td {
  width: var(--contact-width);
  padding: 1.5rem 1.4rem;
  background-color: var(--color-gray);
  border: none;

  --clamp-min: 12;

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

textarea {
  --min-rows: 9.4lh;
  --max-rows: 24lh;

  box-sizing: border-box;
  width: var(--contact-width);
  min-block-size: var(--min-rows);
  max-block-size: var(--max-rows);
  field-sizing: content;
  resize: block;
}

input[type="reset"],
input[type="submit"],
input[value="送信"] {
  line-height: 1.8;
  cursor: pointer;
}

.wpcf7-checkbox{
  display: grid;
  gap: 1.2rem;
  justify-content: start;
}

span[data-name="your-code"]{
  display: inline-block;
  width: 210px;
  margin-bottom: 1.2rem;
} */


/* 同意ボタン */
/* .wpcf7-acceptance{
  display: grid;

  .wpcf7-list-item{
    display: block;
    margin: revert !important;

      label{
        display: flex;
        gap: 1rem;
        align-items: center;

        input[type="checkbox"]{
          width: 20px;
        }

      }
  }

  a{
    color: revert;
    text-decoration: underline;
  }

  @media (width <= 599px){
    margin-left: .8rem;
  }

}


.wpcf7-spinner {
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    visibility: hidden;
    background-color: #23282d;
    border: none;
    border-radius: 100%;
    opacity: 0.75;
}

.wpcf7 .wpcf7-submit:disabled{
  filter: grayscale(1);
} */


/* 確認画面(Confirm Plus Contact Form 7 */
/* div#wpcf7cpcnf{
  z-index: 1 !important;
  padding: 5rem 0 6rem;
}

div.wpcf7cp-btns{
  display: flex;
  gap: 3.2rem;
  width: min(90%, 640px);
  margin-inline: auto;
  margin-top: 8rem;

  button{
    --unit-block-size: 2.4rem;
    --unit-inline-size: 2.4rem;
    --clamp-max: 20;
    --clamp-min: 14;

    position: relative;
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: center;
    width: min(90%, 360px);
    padding: var(--unit-block-size) var(--unit-inline-size);
    margin-inline: auto;
    font-weight: var(--fontweight-bold);
    line-height: 1;
    text-align: center;
    letter-spacing: 3.20px;
    cursor: pointer;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 20rem;
    transition: var(--transition);
  }

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

}

@media (any-hover: hover){
  div.wpcf7cp-btns button:hover{
    opacity: .8;
  }
} */

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

.l-footer__inner{
  display: flex;
  column-gap: 1.6rem;
  width: var(--main-width);
  padding: var(--space-120-60) 0;
  margin-inline: auto;
}

.footer-logo{
  display: block;
  align-self: flex-start;
  aspect-ratio: 460 / 80;
  mix-blend-mode: multiply;
}

.footer-sun-o-group-list{
  display: grid;
  gap: var(--space-32-20);
  margin-top: var(--space-40-24);
}

.footer-sun-o-group-list__data{
  display: grid;

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

  & span{
    font-weight: var(--fontweight-bold);
    color:var(--color-blue);

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

.footer-menu {
  width: min(100%, 640px);
  margin-left: auto;

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

.footer-navi-list {
  display: grid;
  grid-template-columns: minmax(0,323px) minmax(0,215px);
  gap: 0 var(--clamp-cqi);
  color: white;

  --clamp-cqi-max: 110;
  --clamp-cqi-min: 50;
}

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

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

.footer-navi-child-list{
  --clamp-max: 20;
  --clamp-min: 18;

  display: grid;
  row-gap: var(--space-24-16);
  margin-top: var(--space-32-20);
  font-weight: var(--fontweight-bold);
  color: var(--color-black)
}


.footer-bottom {
  position: relative;
  padding: var(--space-32-20) 0 var(--space-40-24);
}

.footer-bottom__copy-right{
  --clamp-max: 14;
  --clamp-min: 12;

  padding-right: var(--space-32-20);
  text-align: end;
}

.footer-bottom__page-top{
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 5.4rem;
  height: 100%;
  background-color: var(--color-yellow);
}

/* フローティングバナー */
.float-btnArea {
  position: fixed;
  right: 1.5%;
  bottom: 5%;
  z-index: 9;
  display: grid;
  row-gap: 1rem;
  place-content: center;
  width: min(17vw, 90px);
  aspect-ratio: 1 / 1;
  line-height: 1.2;
  text-align: center;
  visibility: hidden;
  background-color: rgb(255 255 255 / .7);
  border-radius: calc(infinity * 1px);
  box-shadow: 1px 1px 3px #333;
  opacity: 0;
  transition: opacity var(--transition), visibility var(--transition);

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

  /* &.m-rotate-link{
    --rotate-length: 8;
  } */

  @media (width <= 599px){
    bottom: 11%;
    row-gap: revert;
  }
}

.float-btnArea.show {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s ease, visibility 1s ease;
}

@media (any-hover: hover) {
  .float-btnArea:hover{
    opacity: .7;
  }
}

/* リキャプチャ */
.grecaptcha-badge{
  @media (width <= 599px){
      visibility: hidden;
  }
}


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