@charset "UTF-8";

:root {
  /* color */
  --color-font: #333333;
  --color-font-wh: #ffffff;
  --color-font-gr: #595757;
  --color-font-or: #f97f06;

  --color-primary: #f97f06;
  --color-secondary: ;
  --color-tertiary: ;
  --color-quaternary: ;
  --color-fifth: ;
  --color-accent: ;
  --color-bg: #f97f06;
  --color-bg-wh: #ffffff;
  --color-bg-gr: #9fa0a0;
  --color-bg-lgr: #e6e6e6;
  --color-hover: ;
  --color-border: #9fa0a0;
  --color-border-or: #f97f06;
  --color-border-bk: #333333;
  --color-border-wh: #ffffff;
  --backdrop: rgb(32 32 32 / 30%);

  /* font family */
  --ff-jp: "Noto Sans JP", sans-serif;
}

*,
::before,
::after {
  --clamp-root-font-size: 16;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --clamp-preffered-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--clamp-preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );

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

/* bodyにデフォルト値を設定する */
body {
  container-type: inline-size;
  container-name: root;
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1200;
  --clamp-min: 14;
  --clamp-max: 16;
  color: var(--color-font);
  line-height: 1.6;
}

.fv {
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1920;
  --clamp-min: 14;
  --clamp-max: 16;
}

:root {
  --fz-special30-115: clamp(30px, 8.43px + 5.53vw, 115px);
  /* ==========================================
     【実務向けclamp余白設定】
     ・基準幅：最大 1280px 〜 最小 390px
     ========================================== */

  /* 【基準値】PC: 60px (3.75rem) / SP: 30px (1.875rem)
  ・推奨値（計算式）：1.05rem + 3.371vw
  ※アクセシビリティを阻害しない rem + vw 計算値です。
  */
  --spc-base: clamp(1.875rem, 1.05rem + 3.371vw, 3.75rem);

  /* --spc-base（60px-30px）を元にスケーリング（実務向け倍率） */
  --spc-600-300: calc(var(--spc-base) * 10);    /* PC: 600px    / SP: 300px */
  --spc-400-200: calc(var(--spc-base) * 6.667); /* PC: 約400px / SP: 約200px */
  --spc-160-80: calc(var(--spc-base) * 2.667); /* PC: 約160px / SP: 約80px */
  --spc-120-60: calc(var(--spc-base) * 2);     /* PC: 120px    / SP: 60px */
  --spc-100-50: calc(var(--spc-base) * 1.667); /* PC: 約100px / SP: 約50px */
  --spc-80-40:  calc(var(--spc-base) * 1.333); /* PC: 約80px  / SP: 約40px */
  --spc-60-30:  var(--spc-base);               /* PC: 60px     / SP: 30px */
  --spc-50-25:  calc(var(--spc-base) * 0.833); /* PC: 約50px  / SP: 約25px */
  --spc-40-20:  calc(var(--spc-base) * 0.667); /* PC: 約40px  / SP: 約20px */
  --spc-30-15:  calc(var(--spc-base) * 0.5);   /* PC: 30px     / SP: 15px */
  --spc-20-10:  calc(var(--spc-base) * 0.333); /* PC: 約20px  / SP: 約10px */
  --spc-16-8: calc(var(--spc-base) * 0.267); /* PC: 約16px / SP: 約8px */
  --spc-10-5:   calc(var(--spc-base) * 0.167); /* PC: 約10px  / SP: 約5px */
  --spc-8-4:    calc(var(--spc-base) * 0.133); /* PC: 約8px   / SP: 約4px */
  --spc-4-2:    calc(var(--spc-base) * 0.067); /* PC: 約4px   / SP: 約2px */

/* ==========================================
     【実務向けclamp余白設定】
     ・基準幅：最大 1280px 〜 最小 390px
     ========================================== */

  /* ------------------------------------------
     ① 50%縮小グループ（PC:SP = 2:1）
     基準値 PC: 60px / SP: 30px
     ------------------------------------------ */
  --spc-base: clamp(1.875rem, 1.05rem + 3.371vw, 3.75rem);

  /* --spc-base を元にスケーリング */
  --len-950-475: calc(var(--spc-base) * 15.833); /* PC: 約950px / SP: 約475px */
  --len-850-425: calc(var(--spc-base) * 14.167); /* PC: 約850px / SP: 約425px */
  --len-700-350: calc(var(--spc-base) * 11.667); /* PC: 約700px / SP: 約350px */
  --len-620-310: calc(var(--spc-base) * 10.333);/* PC: 620px / SP: 310px */
  --len-500-250: calc(var(--spc-base) * 8.333); /* PC: 約500px / SP: 約250px */
  --len-400-200: calc(var(--spc-base) * 6.667); /* PC: 約400px / SP: 約200px */
  --len-340-170: calc(var(--spc-base) * 5.667); /* PC: 340px / SP: 170px */
  --len-250-125: calc(var(--spc-base) * 4.167); /* PC: 約250px / SP: 約125px */
  --len-200-100: calc(var(--spc-base) * 3.333); /* PC: 約200px / SP: 約100px */
  --len-130-65:  calc(var(--spc-base) * 2.167); /* PC: 約130px / SP: 約65px */
  --len-110-55:  calc(var(--spc-base) * 1.833); /* PC: 約110px / SP: 約55px */
  --len-100-50:  calc(var(--spc-base) * 1.667); /* PC: 約100px / SP: 約50px */
  --len-80-40:   calc(var(--spc-base) * 1.333); /* PC: 約80px  / SP: 約40px */
  --len-70-35:   calc(var(--spc-base) * 1.167); /* PC: 約70px  / SP: 約35px */
  --len-60-30:   var(--spc-base);               /* PC: 60px   / SP: 30px */
  --len-40-20:   calc(var(--spc-base) * 0.667); /* PC: 約40px  / SP: 約20px */
  --len-30-15:   calc(var(--spc-base) * 0.5);   /* PC: 30px    / SP: 15px */
  --len-24-12:   calc(var(--spc-base) * 0.4);   /* PC: 24px   / SP: 12px */
  --len-20-10:   calc(var(--spc-base) * 0.333); /* PC: 約20px  / SP: 約10px */
  --len-16-8:    calc(var(--spc-base) * 0.267); /* PC: 約16px  / SP: 約8px */
  --len-4-2:     calc(var(--spc-base) * 0.067); /* PC: 約4px   / SP: 約2px */
  --len-2-1:     calc(var(--spc-base) * 0.033); /* PC: 約2px   / SP: 約1px */


  /* ------------------------------------------
     ② 比率が異なるグループ（個別定義）
     ※すべて基準幅「1280px〜390px」で計算
     ------------------------------------------ */
  /* PC: 600px / SP: 200px (1:0.333) 【追加】 */
  --len-600-200: clamp(12.5rem, -1.573rem + 57.73vw, 37.5rem);
  
  /* PC: 48px / SP: 16px (1:0.33) */
  --len-48-16: clamp(1rem, 0.326rem + 2.753vw, 3rem);

  /* PC: 24px / SP: 14px (1:0.58) */
  --len-24-14: clamp(0.875rem, 0.601rem + 1.124vw, 1.5rem);

  /* PC: 10px / SP: 6px (1:0.6) */
  --len-10-6: clamp(0.375rem, 0.264rem + 0.449vw, 0.625rem);

  /* PC: 4px / SP: 2px (50%ですが、数値が小さいため個別推奨) */
  --len-4-2: clamp(0.125rem, 0.07rem + 0.225vw, 0.25rem);

}

/* デフォルト（スマホ向け：まずはPC用を消し、SP用を出す） */
.is-pc {
  display: none;
}
.is-sp {
  display: revert;
}

/* PC向け（全体コンテナ 'root' の幅が 768px を超えたとき） */
@container root (width > 768px) {
  .is-sp {
    display: none;
  }
  .is-pc {
    display: revert; /* 元の表示状態（blockやinline等）に戻す */
  }
}

body:has(dialog[open]) {
  /* 背景ページのスクロールを止める */
  overflow: hidden;
}

.u-ib {
  display: inline-block;
}

button {
  /* OSやブラウザ特有のUIを無効化 */
  appearance: none;
  
  /* 背景とボーダーを初期化 */
  background: transparent;
  border: none;
  
  /* 余白の初期化 */
  margin: 0;
  padding: 0;
  
  /* フォント関連を親要素に合わせる */
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  
  /* クリック可能な要素として明示 */
  cursor: pointer;
}

/* アクセシビリティ対策 */
button:focus-visible {
  outline: 2px auto Highlight;
  outline-offset: 2px;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===========================================
 * Forms (kiso.cssの補完と共通ベーススタイル)
 * ======================================== */

/* -------------------------------------------
   input (テキスト系), textarea, select
------------------------------------------- */
input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"]),
textarea,
select {
  /* kiso.cssでリセットしきれないOS標準のUI（iOSの角丸や影など）を完全に無効化 */
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background-color: var(--color-bg-wh);
  border: 1px solid var(--color-border);
  color: var(--color-font);
  padding: var(--spc-10-5); 
  border-radius: 4px;
  
  /* フォーカス時の変化を滑らかにする */
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* -------------------------------------------
   フォーカス（選択）時のアクセシビリティ対応
------------------------------------------- */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(249, 127, 6, 0.2);
}

/* -------------------------------------------
   labelの共通スタイル
------------------------------------------- */
label {
  display: inline-block;
  color: var(--color-font);
  
  /* 入力欄との間に少し余白を設ける（PC: 10px / SP: 5px） */
  margin-bottom: var(--spc-10-5);
}


/* ===========================================
 * 00. common parts
 * ======================================== */
.c-inner {
  padding: var(--spc-60-30) var(--spc-40-20);
  max-width: 1600px;
  width: 100%;
  margin-inline: auto;
}


/* ===========================================
 * 01. header
 * ======================================== */
.header {
  container-type: inline-size;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: var(--color-bg-wh);
}

/* 通常時のスタイル */
.header__inner {
  max-width: 1780px;
  width: 100%;
  padding-top: var(--spc-20-10);
  padding-bottom: var(--spc-20-10);
}

@container (width <= 768px) {
  .header__inner {
    padding-top: var(--spc-20-10);
    padding-bottom: var(--spc-20-10);
  }
}

.header__content-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  width: var(--len-340-170);
  height:auto;
}

/* navi(PC) */
/* ======================================== */
.header__nav-wrap {
  display: flex;
  gap: var(--spc-30-15);
}
.header__nav-title {
  display: flex;
  align-items: center;
  gap: var(--spc-10-5);
}
.header__nav-title::after {
  content: '';
  display: block;
  flex-grow: 1; /* 余白を線で埋める */
  height: 1px;
  background: var(--color-bg-gr);
}
.header__nav-text {
  --clamp-min: 13;
  --clamp-max: 15;
  font-weight: bold;
}

.header__nav-lists {
  display: flex;
  align-items: center;
  gap: var(--spc-20-10);
}
.header__nav-lists > li {
  display: flex;
  align-items: center;
  position: relative;
}
.header__nav-lists > li > a {
  --clamp-min: 16;
  --clamp-max: 20;
  font-weight: bold;
  display: block;
  position: relative;
  overflow: hidden;
  color: transparent;
  text-shadow: 0 -1.5em 0 var(--color-font), 0 0 0 var(--color-font);
  transition: text-shadow 0.3s ease;
}
@media (hover: hover) {
  .header__nav-lists > li > a:hover {
    text-shadow: 0 0 0 var(--color-font), 0 1.5em 0 var(--color-font);
  }
}
.header__nav-btn-link {
  --clamp-min: 16;
  --clamp-max: 20;
  font-weight: bold;
  padding: var(--spc-10-5) var(--spc-20-10);
  color: var(--color-font-wh);
  background: var(--color-primary);
  border: 1px solid transparent;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: var(--spc-10-5);
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .header__nav-btn-link:hover {
    opacity: 0.7;
  }
}
.header__nav-icon {
  display: inline-block;
  width: var(--len-24-12);
  height: auto;
}
.header__nav-btn > a span,
.header__nav-btn > a span img {
  display: block; 
}
@container (width <= 768px) {
  .header__nav-icon {
    width: var(--len-40-20);
  }
}

/* hamburger menu(SP) */
/* ======================================== */
/* ===========================================
 * Dialog Menu (スマホ向けドロワーメニュー)
 * ======================================== */
@container (width <= 1300px) {
  .header__nav-wrap {
    display: none;
  }
  /* PCと共通クラス */
  .header__nav-lists {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spc-40-20);
  }
  .header__nav-title {
    padding-bottom: var(--spc-20-10);
  }
    .header__nav-btn {
    display: flex;
    justify-content: center;
  }
  .header__nav-btn-link {
    width: 100%;
    max-width: 250px;
    justify-content: center;
  }


  /* アイコンボタン */
  .button-icon {
    position: relative;
    display: grid;
    flex: 0 0 48px;
    place-items: center;
    inline-size: 48px;
    block-size: 48px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    outline: transparent;
  }
  /* ×アイコン */
  .button-icon::before,
  .button-icon::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 20px;
    background: var(--color-font-gr);
    background-color: var(--color-font);
  }

  /* 三本線 */
  .button-menu::before {
    width: 24px;
    height: 2px;
    border-radius: 20px;
    background: var(--color-font-gr);

    /* 上下の線 */
    box-shadow:
      0 -6px 0 var(--color-font-gr),
      0 6px 0 var(--color-font-gr);
  }
  .button-menu::after {
    /* 三本線：不要な二本目疑似要素 */
    content: none;
  }

  /* ×印の角度 */
  .button-close::before {
    rotate: 45deg;
  }
  .button-close::after {
    rotate: -45deg;
  }
  .menu__dialog {
    --menu-interaction-delay: 0s;
    position: fixed;
    /* [open]外のレイアウト指定 */
    display: grid;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    background: var(--color-bg-wh);
    interactivity: inert;
    pointer-events: none;
    transition:
      opacity 0.4s,
      translate 0.4s ease,
      display 0.4s allow-discrete,
      overlay 0.4s allow-discrete,
      interactivity 0s var(--menu-interaction-delay) allow-discrete,
      pointer-events 0s var(--menu-interaction-delay) allow-discrete;
      transition-behavior: allow-discrete;
  }

  .menu__dialog:not([open]):not(:popover-open) {
    display: none;
  }

  .menu__dialog::backdrop {
    background: var(--backdrop);
    opacity: 0;
    transition: opacity 0.4s;
  }

  .menu__dialog[open],
  .menu__dialog:popover-open {
    --menu-interaction-delay: 0.4s;

    interactivity: auto;
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;
  }

  .menu__dialog[open]::backdrop,
  .menu__dialog:popover-open::backdrop {
    opacity: 1;
  }

  @starting-style {
    .menu__dialog[open],
    .menu__dialog:popover-open {
      interactivity: inert;
      opacity: 0;
      pointer-events: none;
    }

    .menu__dialog[open]::backdrop,
    .menu__dialog:popover-open::backdrop {
      opacity: 0;
    }
  }

  .menu__header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .menu__list {
    /* リスト側スクロール */
    display: grid;
    align-content: start;
    gap: var(--spc-60-30);
    min-height: 0;
    overflow-y: auto;
    /* スクロール連鎖の内側管理 */
    overscroll-behavior-y: contain;
  }

  .menu__list-link{
    --clamp-min: 18;
    --clamp-max: 24;
    color: var(--color-font);
    font-weight: bold;
    display: flex;
    align-items: center;
    padding-inline: var(--spc-20-10);
  }
  
  .menu__drawer {
    --spring: linear(0, 0.0107, 0.0398, 0.0834, 0.138, 0.2003, 0.2677, 0.3379, 0.4089, 0.4791, 0.5471, 0.612, 0.6731, 0.7297, 0.7815, 0.8283, 0.87, 0.9068, 0.9388, 0.9662, 0.9892, 1.0083, 1.0237, 1.0357, 1.0449, 1.0514, 1.0556, 1.058, 1.0587, 1.0581, 1.0563, 1.0538, 1.0506, 1.0469, 1.043, 1.0388, 1.0347, 1.0306, 1.0266, 1.0228, 1.0192, 1.0159, 1.0128, 1.0101, 1.0076, 1.0055, 1.0036, 1.002, 1.0006, 0.9995, 0.9986, 0.9979, 0.9974, 0.997, 0.9967, 0.9966, 0.9966, 0.9966, 0.9967, 0.9968, 0.997, 0.9972, 0.9975, 0.9977, 0.998, 0.9982, 0.9984, 0.9987, 0.9989, 0.9991, 0.9992, 0.9994, 0.9996, 0.9997, 0.9998, 0.9999, 1, 1, 1.0001, 1.0001, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1);

    inset: 0 0 0 auto;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: var(--spc-40-20);
    width: 70%;
    inline-size: 70%;
    height: 100dvh;
    block-size: 100dvh;
    overflow: visible;
    padding: var(--spc-20-10);

    background: var(--color-bg-wh);
    translate: 100vw 0;
    transition:
      translate 1s var(--spring),
      display 1s allow-discrete,
      overlay 1s allow-discrete;
    inset-inline-start: 64px;
    width: auto;
    inline-size: auto;
  }

  .menu__drawer::backdrop {
    background: var(--backdrop);
    opacity: 0;
    transition: opacity 0.4s;
  }

  /* スプリング時の右端の白い受け */
  .menu__drawer::after {
    position: absolute;
    inset-block: 0;
    right: -128px;
    inline-size: 128px;
    background: var(--color-bg-wh);
    content: "";
    pointer-events: none;
  }
  .menu__drawer[open] {
    --menu-interaction-delay: 1s;

    display: grid;
    translate: 0 0;
  }
  @starting-style {
    .menu__drawer[open] {
      translate: 70% 0;
    }
  }

  .menu__drawer[open]::backdrop {
    opacity: 1;
  }
  @starting-style {
    .menu__drawer[open]::backdrop {
      opacity: 0;
    }
  }
}



/* ===========================================
 * 0X. footer
 * ======================================== */
.footer {
  container-type: inline-size;
  background: var(--color-bg-gr);
}
.footer__inner {
  padding-block: var(--spc-100-50);
}
.footer__content {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  color: var(--color-font-wh);
  gap: var(--spc-40-20);
  align-items: center;
}
@container (width <= 768px) {
  .footer__content {
    grid-template-columns: 1fr;
    gap: var(--spc-80-40);
    justify-items: center;
  }
}
.footer__logo-wrap {
  max-width: var(--len-500-250);
  width: 100%;
  display: grid;
  place-items: center;
}

.footer__nav-wrap {
  display: flex;
  gap: var(--spc-80-40);
}

.footer__nav-lists {
  --clamp-min: 14;
  --clamp-max: 20;
  display: flex;
  gap: var(--spc-20-10);
}
@container (width <= 768px) {
  .footer__nav-lists {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--spc-40-20) var(--spc-80-40);
    padding-bottom: var(--spc-60-30);
  }
}
.footer__nav-lists > li > a {
  padding-bottom: 3px;
  background-image: linear-gradient(var(--color-font-wh), var(--color-font-wh));
  background-repeat: no-repeat;
  background-position: bottom right; /* 下線の初期位置 */
  background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
  transition: background-size 0.3s;
}
@media (hover: hover) {
  .footer__nav-lists > li > a:hover {
    background-position: bottom left;
    background-size: 100% 1px;
  }
}

.footer__copy {
  --clamp-min: 12;
  --clamp-max: 14;
}

/* ===========================================
 * フローティングメニュー
 * ======================================== */
.floating {
  display: none;
}
@container (width <= 1300px) {
  .floating {
    display: revert;
    container-type: inline-size;
    position: fixed;
    width: 100%;
    bottom: 1%;
  }
  .floating__items {
    display: flex;
    justify-content: center;
    gap: var(--spc-20-10);
  }
  .floating__item > a {
    --clamp-min: 16;
    --clamp-max: 18;
    font-weight: bold;
    border: 1px solid var(--color-border-bk);
    padding: var(--spc-20-10) var(--spc-20-10);
  }
  .floating__owner > a {
    color: var(--color-font-wh);
    background: var(--color-bg);
  } 
  .floating__user > a {
      background: var(--color-bg-wh);
  }
}