@charset "UTF-8";
/* ==========================================================================
   GLOW WAY — common.css
   全ページ共通のリセット / トークン / ベース / ユーティリティ / 共通部品

   ------------------------------------------------------------------------
   目次
   ------------------------------------------------------------------------
   01. RESET
   02. TOKENS            :root（ブランド色 + 刷新トークン）
   03. BASE              html / body / 見出し / 本文 / リンク / 表
   04. UTILITY           .sr-only .inr .sec .grid .stripes .table-scroll .inview
   05. SHAPE             .slant（斜めカット色ブロック）
   06. LABEL             .dq（引用符）/ .eyebrow（括弧ラベル）/ .numcircle / .numbadge
   07. BUTTON            .btn 一式 / .btn__arrow / .btn--icon
   08. CARD / SEC-HEAD   .card / .sec-head
   09. VTEXT             .vtext（縦書きパネル）
   10. MOTION            .marquee / .marquee--xl / .imgloop
   11. SLIDER            .slider 一式
   12. LOADER            .loader
   13. HEADER            .head / .gnav
   14. HAMBURGER         .hamburger
   15. DRAWER            .drawer / .drawer__overlay
   16. PAGE HEAD         .page-head / .breadcrumb
   17. BRIDGE            .bridge
   18. FOOTER            .footer / .pagetop
   19. RESPONSIVE        1200 / 1024 / 768 / 480（広い順 → 狭い順）
   20. PREFERENCES       prefers-reduced-motion / print
   ========================================================================== */


/* ==========================================================================
   01. RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ol, ul,
fieldset, legend {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
}

fieldset {
  border: 0;
  min-inline-size: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  border-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

address {
  font-style: normal;
}

[hidden] {
  display: none !important;
}


/* ==========================================================================
   02. TOKENS
   ========================================================================== */

:root {
  /* --- brand color（名刺『GLOW WAY名刺.pdf』の印刷データから実測） ----------
     名刺の色：ティール #00A28C / チャコール #231F20 / グレー #58585B /
              ミント #A6D6C6 / セージ #C8D9CF / 淡ミント #E9F0EC
     名刺のティールは白地で 3.2:1 しかないため、文字やボタンに使う色は
     同じ色相（172°）のまま明度を下げ、WCAG AA（4.5:1）を満たす段階を作っている。 */
  --brand: #005C4F;         /* 濃ティール。見出し・大きな色面・塗りボタン・リンク（白文字 7.9:1） */
  --charcoal: #231F20;      /* 名刺の文字色。最も濃い色。本文・枠線・ドロワーの地（塗りボタンは --btn-dark） */
  --gray: #58585B;          /* 名刺ロゴのグレー */
  --teal-strong: #007061;   /* 白文字を乗せられるティール。ピル・反転セクション・番号円（白文字 6.0:1） */
  --teal: #00A18D;          /* ロゴのティール（logo.svg / mark.svg と同じ値）。大きな色面・図形に使う */
  --on-teal: var(--charcoal); /* ロゴのティールの面に乗せる文字色（白は 3.2:1 で小さな文字に使えないため） */
  --btn-dark: var(--brand);   /* 塗りボタン（お問い合わせ・view more など）の地。濃い緑（白文字 7.9:1） */
  --btn-dark-hover: #00473E;  /* 塗りボタンのホバー（一段濃い緑） */
  --brand-ink: #006658;     /* 明るい面の上の小さなラベル（括弧ラベル等）。濃い背景上でも 5.2:1 */
  --mint: #A6D6C6;          /* 名刺裏面の罫線。装飾の線・ストライプ */
  --mint-light: #CDE9DF;    /* 濃色面の上のラベル・ロゴ */
  --sage-pale: #E9F0EC;     /* 名刺裏面の透かし。淡い面 */
  --sage-lt: #F5F8F6;
  --tint: #F2F6F4;          /* 白に近い淡色面 */
  --line: #D6E0DB;
  --line-form: #707875;     /* フォームコントロールの境界。白地 4.5:1 */
  --ink: #231F20;
  --ink-mid: #3F4442;
  --ink-sub: #58585B;
  --white: #FFFFFF;
  --on-dark: #D8E6E0;       /* 濃色地の上の本文色 */

  /* --- HitoArk（別サイトのインタビューメディア）の色 ---------------------
     バナーの参考画像の色そのもの。文字はチャコール、赤・サーモン・黄は面と飾りに使う
     （赤 #F1604D は白文字 3.2:1 のため、赤の面に乗せる文字はチャコール 5.1:1） */
  --hk-red: #F1604D;
  --hk-salmon: #F2AA99;
  --hk-yellow: #F1B33F;
  --hk-gray: #F0F0F0;

  /* --- 刷新トークン（03-REDESIGN §C） ---------------------------------- */
  --bg: #FFFFFF;            /* ページ背景。body に適用（白） */
  --bg-deep: #D9E2DE;       /* 淡グレーの一段濃い面（page-head 等） */
  --panel: var(--tint);     /* 白い地の上に置くカード・パネルの面（白地と区別できる淡い色） */
  --radius: 10px;
  --radius-lg: 20px;
  --btn-h: 76px;
  --btn-h-lg: 80px;
  --btn-h-sm: 56px;
  --inr: 1360px;
  --sec-pad: clamp(80px, 9vw, 180px);

  /* 斜めカットの落差 */
  --slant-cut: 170px;
  --slant-cut-kv: 190px;

  /* --- typography ------------------------------------------------------- */
  --font-base: "Zen Kaku Gothic New", "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-en: "Inter", "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-h1: clamp(2.375rem, 5.2vw, 4.75rem);
  --fs-h2: clamp(1.6rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-h4: clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body: clamp(0.94rem, 1.05vw, 1rem);
  --fs-sm: 0.8125rem;
  --fs-en: 0.75rem;

  --lh-head: 1.5;
  --lh-body: 1.95;
  --ls-ja: .02em;

  /* --- layout ----------------------------------------------------------- */
  --gutter: clamp(20px, 5.8vw, 84px);   /* 1440px 時に内容幅 1272px 相当 */
  --w: var(--inr);
  --head-h: clamp(76px, 9vw, 132px);
  --head-h-min: 76px;
  --pagetop-w: 56px;

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .4s;

  /* --- decoration ------------------------------------------------------- */
  --stripe-color: var(--mint);
  --stripe-opacity: .16;

  color-scheme: light;
}


/* ==========================================================================
   03. BASE
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h-min) + 24px);
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-ja);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  display: block;
  padding-top: var(--head-h);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--brand);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: .01em;
  font-feature-settings: "palt" 1;
  text-wrap: balance;
  word-break: auto-phrase;
}

/* 本文・リード文も日本語の文節で折り返す */
p, li, dd, dt, figcaption {
  word-break: auto-phrase;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5, h6 { font-size: 1rem; }

p {
  color: var(--ink-mid);
}

p + p {
  margin-top: 1.4em;
}

small {
  font-size: var(--fs-sm);
  line-height: 1.7;
}

strong, b {
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

a:hover {
  color: var(--teal-strong);
}

/* a:hover（詳細度 0,1,1）がボタンの文字色（0,1,0）を上書きしてしまうため、
   濃色・白ボタンではホバー時の文字色を明示して打ち消す */
.btn--dark:hover,
.btn--dark:hover .btn__label,
.kv__scroll:hover,
.footer__contact a:hover,
.drawer .btn--light:hover {
  color: var(--white);
}

.btn--light:hover,
.btn--light:hover .btn__label {
  color: var(--brand);
}

/* --- フォーカスリング ---------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--teal-strong);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 濃色地（ドロワーの黒・フッターのお問い合わせカードの濃い緑）の上では白いリング */
.drawer :focus-visible,
.footer__contact :focus-visible {
  outline-color: var(--white);
}

/* ロゴのティールの縦書きパネルの上では濃色のリング */
.vtext :focus-visible {
  outline-color: var(--on-teal);
}

/* pagetop はティールの帯そのもの。リングは帯の内側へ落とし込む */
.pagetop:focus-visible {
  outline: 2px solid var(--on-teal);
  outline-offset: -6px;
  border-radius: 0;
}

ul, ol {
  padding-left: 1.4em;
}

ul[class],
ol[class] {
  padding-left: 0;
}

li {
  line-height: 1.9;
}

dl, dd {
  margin: 0;
}

figure img {
  width: 100%;
}

blockquote {
  margin: 0;
}

time {
  font-family: var(--font-en);
  letter-spacing: .06em;
}

hr {
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--line);
}

::selection {
  background-color: var(--brand);
  color: var(--white);
}

/* --- 表（共通ベース） ---------------------------------------------------- */
table {
  width: 100%;
  font-size: var(--fs-body);
}

caption {
  text-align: left;
}

th, td {
  padding: 1.1em 1.4em;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.9;
}

th {
  width: 26%;
  color: var(--brand);
  font-weight: 500;
  white-space: nowrap;
}

thead th {
  background-color: var(--tint);
  white-space: normal;
}


/* ==========================================================================
   04. UTILITY
   ========================================================================== */

/* --- 視覚的に非表示（支援技術には読ませる） ------------------------------ */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 語の途中で改行させないまとまり（例：キャッチの "人"を） */
.nowrap {
  white-space: nowrap;
}

/* --- 新しいタブで開くリンクのアイコン ------------------------------------
   リンク文字色（currentColor）で描くため、どの背景でも自動で色が合う。
   読み上げ用の説明は各リンク内の .sr-only「（新しいタブで開きます）」が担う。 */
.ext-icon {
  display: inline-block;
  flex: none;
  width: .78em;
  height: .78em;
  margin-left: .35em;
  vertical-align: -.02em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2.5h4v4'/%3E%3Cpath d='M13.5 2.5 7.5 8.5'/%3E%3Cpath d='M12 9.5v3a1 1 0 0 1-1 1H3.5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2.5h4v4'/%3E%3Cpath d='M13.5 2.5 7.5 8.5'/%3E%3Cpath d='M12 9.5v3a1 1 0 0 1-1 1H3.5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- コンテナ ------------------------------------------------------------ */
.inr {
  width: min(100% - var(--gutter) * 2, var(--w));
  margin-inline: auto;
}

.inr--w1000 { --w: 1000px; }
.inr--w1120 { --w: 1120px; }
.inr--w1260 { --w: 1260px; }
.inr--w1400 { --w: 1400px; }

/* --- セクション余白（汎用ラッパー） -------------------------------------- */
.sec {
  padding-block: var(--sec-pad);
}

/* --- グリッド ------------------------------------------------------------ */
.grid {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- 斜めストライプ（19°のバー） ---------------------------------------- */
.stripes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.stripes::before {
  content: "";
  position: absolute;
  inset: -30% -20%;
  background-image: repeating-linear-gradient(
    109deg,
    var(--stripe-color) 0,
    var(--stripe-color) 7px,
    transparent 7px,
    transparent 30px
  );
  opacity: var(--stripe-opacity);
}

/* --- 横スクロールする表のラッパー ---------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.table-scroll > table {
  min-width: 760px;
}

/* --- スクロール表示アニメーション ---------------------------------------- */
/* コンテンツは opacity のみで制御（display:none / visibility:hidden 禁止）。
   さらに html.js が付いているときだけ初期状態を透明にすることで、
   JavaScript が無効・読み込み失敗のときも本文が確実に見えるようにする。 */
.js .inview {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.inview.is-in,
.is-in {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   05. SHAPE — .slant（斜めにカットした色ブロック）
   親要素に position:relative が必要。中身は z-index で上に置く。
   ========================================================================== */

.slant {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--slant-color, var(--brand));
  pointer-events: none;
}

/* KV：右上が --slant-cut-kv だけ下がる */
.slant--kv {
  clip-path: polygon(0 0, 100% var(--slant-cut-kv), 100% 100%, 0 100%);
}

/* 下端の左側が上がる（色面がそこで終わる） */
.slant--down {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slant-cut)));
}

/* 下端の右側が上がる */
.slant--up {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant-cut)), 0 100%);
}

/* 上下とも斜めにカット */
.slant--both {
  clip-path: polygon(0 0, 100% var(--slant-cut), 100% calc(100% - var(--slant-cut)), 0 100%);
}


/* ==========================================================================
   06. LABEL — .dq / .eyebrow / .numcircle / .numbadge
   ========================================================================== */

/* --- 引用符アイコン（CSSのみで描画） ------------------------------------- */
.dq {
  position: relative;
  display: block;
  width: 31px;
  height: 25px;
  color: var(--brand);
  flex: none;
}

.dq::before,
.dq::after {
  content: "";
  position: absolute;
  top: 0;
  width: 13px;
  height: 25px;
  background-color: currentColor;
  border-radius: 50% 50% 50% 0 / 46% 46% 58% 0;
}

.dq::before { left: 0; }
.dq::after  { right: 0; }

.dq--lg {
  width: 44px;
  height: 36px;
}

.dq--lg::before,
.dq--lg::after {
  width: 19px;
  height: 36px;
}

/* 濃色地の上 */
.dq--pale {
  color: var(--mint-light);
}

/* --- 括弧ラベル ---------------------------------------------------------- */
.eyebrow {
  display: block;
  color: var(--brand-ink);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "(";
  margin-right: 1.2em;
}

.eyebrow::after {
  content: ")";
  margin-left: 1.2em;
}

.eyebrow--lg {
  font-size: 14px;
  letter-spacing: .2em;
}

/* 濃色地の上 */
.eyebrow--pale,
.eyebrow--mint {
  color: var(--mint-light);
}

/* ピル型タグ（ティール地・白文字・括弧なし） */
.eyebrow--pill {
  display: inline-block;
  padding: .5em 1.35em;
  background-color: var(--teal-strong);
  color: var(--white);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .14em;
}

.eyebrow--pill::before,
.eyebrow--pill::after {
  content: "";
  margin: 0;
}

/* --- ナンバーサークル ---------------------------------------------------- */
.numcircle {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  background-color: var(--teal);
  color: var(--on-teal);
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
}

/* --- カードに重なる番号バッジ -------------------------------------------- */
.numbadge {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--brand);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
}


/* ==========================================================================
   07. BUTTON — .btn（大きな楕円ボタン + 42px の円形矢印）
   ========================================================================== */

.btn {
  --arrow-size: 42px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: var(--btn-h);
  padding: 0 24px 0 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--brand);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12em;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn__label {
  white-space: nowrap;
}

/* --- 変種 ---------------------------------------------------------------- */
.btn--dark {
  background-color: var(--btn-dark);
  color: var(--white);
}

.btn--light {
  background-color: var(--white);
  color: var(--brand);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--brand);
  color: var(--brand);
}

.btn--outline:hover {
  background-color: var(--brand);
  color: var(--white);
}

/* --- サイズ -------------------------------------------------------------- */
.btn--lg {
  min-height: var(--btn-h-lg);
  padding-left: 56px;
}

.btn--sm {
  --arrow-size: 34px;
  min-height: var(--btn-h-sm);
  gap: 18px;
  padding: 0 12px 0 26px;
  font-size: 12px;
}

/* --- 丸だけのボタン ------------------------------------------------------ */
.btn--icon {
  min-height: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 50%;
}

.btn--icon .btn__arrow {
  width: 100%;
  height: 100%;
  border-color: transparent;
}

.btn--dark:hover,
.btn--dark.btn--icon:hover,
a:hover .btn--dark.btn--icon {
  background-color: var(--btn-dark-hover);
}

.btn--light.btn--icon:hover,
a:hover .btn--light.btn--icon {
  background-color: var(--tint);
}

/* --- 矢印（CSSのみで描画。.btn の外でも単独で使用される） ---------------- */
.btn__arrow {
  position: relative;
  flex: none;
  display: inline-block;
  width: var(--arrow-size, 42px);
  height: var(--arrow-size, 42px);
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* 横棒 */
.btn__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
}

/* 山形 */
.btn__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translate(-4px, -50%) rotate(45deg);
}

.btn--sm .btn__arrow::before { width: 12px; }
.btn--sm .btn__arrow::after  { transform: translate(-5px, -50%) rotate(45deg); }

/* hover：右へ 4px 移動し、丸が塗りつぶされる */
.btn:hover .btn__arrow,
a:hover > .btn__arrow,
a:hover .btn--icon .btn__arrow,
button:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--dark:hover .btn__arrow,
a:hover .btn--dark:not(.btn--icon) .btn__arrow {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--btn-dark);
}

.btn--light:hover .btn__arrow,
a:hover .btn--light:not(.btn--icon) .btn__arrow {
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.btn:focus-visible .btn__arrow,
a:focus-visible .btn__arrow,
button:focus-visible .btn__arrow {
  transform: translateX(4px);
}


/* ==========================================================================
   08. CARD / SEC-HEAD
   ========================================================================== */

.card {
  position: relative;
  background-color: var(--panel);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 64px);
}

.card__title {
  font-size: var(--fs-h3);
  line-height: 1.6;
}

.card__title + .card__text {
  margin-top: 1em;
}

.card__text {
  color: var(--ink-mid);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* リンク化カード */
a.card,
.card--link {
  display: block;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

a.card:hover,
.card--link:hover {
  transform: translateY(-4px);
  color: inherit;
}

/* --- セクション見出し ---------------------------------------------------- */
.sec-head {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.sec-head > * + * {
  margin-top: 18px;
}

.sec-head .dq {
  margin-bottom: 22px;
}

.sec-head__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
}

.sec-head__lead {
  color: var(--ink-mid);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* 濃色地の上のセクション見出し */
.sec-head--light .sec-head__title {
  color: var(--white);
}

.sec-head--light .sec-head__lead {
  color: var(--on-dark);
}


/* ==========================================================================
   09. VTEXT — 縦書きパネル
   ========================================================================== */

.vtext {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
  width: 234px;
  min-height: 590px;
  padding: 50px 0 0;
  background-color: var(--vtext-bg, var(--teal));
  border-radius: var(--radius);
  color: var(--on-teal);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.vtext p {
  margin: 0;
}

.vtext__title {
  color: var(--on-teal);
  font-size: clamp(1.1rem, 1.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .08em;
  font-feature-settings: "palt" 1;
}

.vtext__text {
  color: var(--on-teal);
  font-size: .875rem;
  line-height: 2;
  letter-spacing: .06em;
}


/* ==========================================================================
   10. MOTION — .marquee / .imgloop
   ========================================================================== */

/* --- テキストマーキー ---------------------------------------------------- */
.marquee {
  --marquee-dur: 38s;
  width: 100%;
  overflow: hidden;
  user-select: none;
}

.marquee__row {
  display: flex;
  width: max-content;
  animation: marquee-l var(--marquee-dur) linear infinite;
}

.marquee__row > span {
  flex: none;
  padding-right: .8em;
  color: var(--brand);
  font-family: var(--font-en);
  font-size: clamp(2rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: .12;
}

/* 巨大版（フッター手前） */
.marquee--xl {
  --marquee-dur: 46s;
}

.marquee--xl .marquee__row > span {
  color: var(--charcoal);
  font-size: clamp(3rem, 8.8vw, 7.875rem);
  font-weight: 700;
  line-height: 1.1;
  opacity: 1;
}

.marquee--rev .marquee__row {
  animation-name: marquee-r;
}

@keyframes marquee-l {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-r {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* --- 画像ループ ---------------------------------------------------------- */
.imgloop {
  --imgloop-dur: 60s;
  width: 100%;
  overflow: hidden;
}

.imgloop__row {
  display: flex;
  width: max-content;
  gap: clamp(12px, 1.6vw, 24px);
  animation: imgloop-l var(--imgloop-dur) linear infinite;
}

.imgloop__row > figure {
  flex: none;
  width: clamp(220px, 26vw, 380px);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

.imgloop__row > figure > img {
  width: 100%;
  height: clamp(140px, 15vw, 220px);
  object-fit: cover;
}

/* gap 分を含めて 2 セット目の先頭に戻す */
@keyframes imgloop-l {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - clamp(6px, .8vw, 12px))); }
}


/* ==========================================================================
   11. SLIDER — .slider
   （スライド幅は site.js が付与する --slide-w を使用。
     全スライドは初期HTMLに存在し、JSは移動のみを行う）
   ========================================================================== */

.slider {
  --slide-w: 100%;
  --slide-gap: 0px;
  position: relative;
}

/* 複数枚表示のスライダーだけ既定でスライド間の余白を持たせる */
.slider[data-slider-per] {
  --slide-gap: clamp(16px, 2vw, 40px);
}

.slider__viewport {
  overflow: hidden;
}

.slider__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .8s var(--ease);
  will-change: transform;
}

.slider__slide {
  flex: 0 0 var(--slide-w);
  min-width: 0;
  padding-inline: calc(var(--slide-gap) / 2);
}

.slider__slide > img,
.slider__slide > figure > img {
  width: 100%;
}

.slider.is-dragging .slider__track {
  transition: none;
}

.slider.is-dragging {
  cursor: grabbing;
}

/* --- UI ------------------------------------------------------------------ */
.slider__ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

/* --- 矢印 ---------------------------------------------------------------- */
.slider__arrow {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--brand);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.slider__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.slider__arrow--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

.slider__arrow--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.slider__arrow:hover {
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.slider__arrow[disabled],
.slider__arrow[aria-disabled="true"] {
  opacity: .35;
  cursor: default;
}

/* --- ドット（JS が button を生成） --------------------------------------- */
.slider__dots {
  display: flex;
  align-items: center;
  gap: 12px;
}

.slider__dots button,
.slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--brand);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.slider__dots button:hover,
.slider__dot:hover {
  background-color: var(--brand);
}

.slider__dots button[aria-selected="true"],
.slider__dots button.is-current,
.slider__dot[aria-selected="true"],
.slider__dot.is-current {
  background-color: var(--brand);
  transform: scale(1.35);
}

/* 濃色地に置かれた UI 用 */
.slider--light .slider__arrow {
  background-color: transparent;
  border-color: rgba(255, 255, 255, .6);
  color: var(--white);
}

.slider--light .slider__dots button,
.slider--light .slider__dot {
  border-color: var(--white);
}

.slider--light .slider__dots button[aria-selected="true"],
.slider--light .slider__dot[aria-selected="true"],
.slider--light .slider__dots button.is-current,
.slider--light .slider__dot.is-current {
  background-color: var(--white);
}


/* ==========================================================================
   12. LOADER
   （JS が無くても必ず消えるよう CSS アニメーションで退場させる）
   ========================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--charcoal);
  animation: loader-out .8s var(--ease) 1.05s forwards;
}

.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: loader-in .9s var(--ease) both;
}

.loader__inner img {
  width: 56px;
  height: auto;
}

.loader__type {
  width: 190px !important;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}

.loader.is-hidden,
.loader.is-loaded,
body.is-loaded .loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes loader-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes loader-out {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}


/* ==========================================================================
   13. HEADER — .head / .gnav
   淡グレーの不透明バー。KV はこの下から始まる。
   ========================================================================== */

.head {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 44px);
  width: 100%;
  height: var(--head-h);
  padding-inline: clamp(20px, 3.4vw, 48px);
  background-color: var(--bg);
  transition: height var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.head.is-scrolled {
  height: var(--head-h-min);
  box-shadow: 0 1px 0 var(--line);
}

.head.is-hidden {
  transform: translateY(-100%);
}

.head__logo {
  flex: none;
  line-height: 1;
}

.head__logo a {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
}

.head__mark {
  width: clamp(40px, 3.6vw, 56px);
  height: auto;
  transition: width var(--dur) var(--ease);
}

.head__type {
  width: clamp(136px, 13vw, 190px);
  height: auto;
  transition: width var(--dur) var(--ease);
}

.head.is-scrolled .head__mark { width: 38px; }
.head.is-scrolled .head__type { width: 134px; }

/* スクロール後の低いヘッダー（76px）に2段のナビとCTAが収まるよう詰める */
.head.is-scrolled .gnav {
  row-gap: 4px;
}

.head.is-scrolled .btn--xs {
  min-height: 30px;
}

.head.is-scrolled .gnav__main a {
  padding-block: 3px;
}

.head.is-scrolled .gnav__cta .btn {
  min-height: 52px;
}

/* ナビは上段（会社情報）・下段（メニュー）の2段組。CTA は右端で2段ぶんの高さ */
.gnav {
  display: grid;
  grid-template-areas:
    "sub  cta"
    "main cta";
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: clamp(14px, 1.8vw, 30px);
  row-gap: clamp(10px, 1.2vw, 18px);
}

.gnav__sub  { grid-area: sub; justify-self: end; }
.gnav__cta  { grid-area: cta; }

.gnav__main {
  grid-area: main;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 1.8vw, 34px);
  margin: 0;
}

.gnav__main a {
  position: relative;
  display: block;
  padding-block: 6px;
  color: var(--brand);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
}

.gnav__main a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}

.gnav__main a:hover::after,
.gnav__main a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.gnav__main a[aria-current="page"] {
  color: var(--teal-strong);
}

.gnav__sub,
.gnav__cta {
  flex: none;
}

/* ヘッダー内のボタン */
.head .btn {
  --arrow-size: 32px;
  min-height: 46px;
  gap: 12px;
  padding: 0 10px 0 22px;
  font-size: 12px;
  letter-spacing: .06em;
}

/* 会社情報は上段の小さいピル */
.head .btn--xs {
  --arrow-size: 24px;
  min-height: 38px;
  gap: 8px;
  padding: 0 8px 0 16px;
  font-size: 11px;
}

/* 右端：HitoArk（別サイト・別タブ。赤）+ お問い合わせ（濃い緑）。どちらも2段ぶんの高さを持つ大きなピル */
.gnav__cta {
  display: flex;
  align-items: center;
  gap: clamp(8px, .8vw, 12px);
}

/* HitoArk（別サイト）へのボタン。HitoArk の赤の面にチャコールの文字（5.1:1）。
   ホバーでチャコールの面に白文字。ヘッダーと別トップページで使う */
.btn--hitoark {
  background-color: var(--hk-red);
  color: var(--charcoal);
}

.btn--hitoark:hover,
.btn--hitoark:hover .btn__label {
  background-color: var(--charcoal);
  color: var(--white);
}

.btn--hitoark:hover .btn__arrow {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--charcoal);
}

.btn--hitoark .ext-icon {
  width: .85em;
  height: .85em;
}

.gnav__cta .btn {
  --arrow-size: 34px;
  min-height: clamp(56px, 5.4vw, 78px);
  padding: 0 12px 0 26px;
  font-size: 13px;
}

.head .btn__arrow::before { width: 10px; }
.head .btn__arrow::after  { transform: translate(-5px, -50%) rotate(45deg); }

/* 1024px 超ではハンバーガーを出さない（同じリンクは footer に常時存在） */
.hamburger {
  display: none;
}


/* ==========================================================================
   14. HAMBURGER
   ========================================================================== */

.hamburger {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 120;
  width: 76px;
  height: 76px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background-color: var(--teal);
  color: var(--on-teal);
  transition: background-color var(--dur) var(--ease);
}

.hamburger__lines {
  position: relative;
  display: block;
  width: 22px;
  height: 9px;
}

.hamburger__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.hamburger__lines span:nth-child(1) { top: 0; }
.hamburger__lines span:nth-child(2) { bottom: 0; }

.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(1) {
  transform: translateY(4px) rotate(20deg);
}

.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(2) {
  transform: translateY(-4px) rotate(-20deg);
}

.hamburger__text {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}

.hamburger:hover {
  background-color: var(--btn-dark);
  color: var(--white);
}


/* ==========================================================================
   15. DRAWER
   ========================================================================== */

/* ドロワー展開中は背面のスクロールを止める（site.js が body に付与） */
body.is-scroll-locked {
  overflow: hidden;
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 115;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--charcoal);
  color: var(--white);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

/* JS が hidden を外した時点で必ず表示される（.is-open は演出用の追加フック） */
.drawer:not([hidden]),
.drawer.is-open {
  opacity: 1;
}

.drawer__inner {
  width: min(100% - var(--gutter) * 2, 1100px);
  margin-inline: auto;
  padding: clamp(90px, 12vh, 140px) 0 clamp(60px, 9vh, 110px);
}

.drawer__logo {
  margin-bottom: 34px;
}

.drawer__logo img {
  width: 200px;
  height: auto;
  /* 濃色の面なので logo-white.svg（白＋ティールの O）を使う。filter で白く塗ると O が消えるため使わない */
}

.drawer .eyebrow {
  color: var(--mint-light);
  margin-bottom: 22px;
}

.drawer__list {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.drawer__list > li {
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.drawer__list > li > a {
  --arrow-size: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  color: var(--white);
  font-size: clamp(1.05rem, 2vw, 1.375rem);
  font-weight: 500;
  letter-spacing: .04em;
}

/* 新しいタブのアイコンは文字のすぐ後ろに置き、矢印だけを右端へ */
.drawer__list > li > a > .ext-icon {
  margin-left: calc(.35em - 20px);
  margin-right: auto;
}

.drawer__list > li > a:hover,
.drawer__list > li > a[aria-current="page"] {
  color: var(--mint-light);
}

.drawer__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0 4px 22px;
}

.drawer__sub a {
  position: relative;
  padding-left: 18px;
  color: var(--on-dark);
  font-size: .9375rem;
}

.drawer__sub a::before {
  content: "";
  position: absolute;
  top: .85em;
  left: 0;
  width: 10px;
  height: 1px;
  background-color: var(--mint-light);
}

.drawer__sub a:hover,
.drawer__sub a[aria-current="page"] {
  color: var(--white);
}

.drawer__contact {
  margin-top: clamp(40px, 6vh, 72px);
  padding: clamp(28px, 4vw, 48px);
  background-color: rgba(255, 255, 255, .06);
  border-radius: var(--radius);
}

.drawer__contact > * + * {
  margin-top: 18px;
}

.drawer__contact-title {
  color: var(--white);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
}

.drawer__contact-text {
  color: var(--on-dark);
  font-size: .9375rem;
  line-height: 1.95;
}

.drawer__overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background-color: rgba(35, 31, 32, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.drawer__overlay.is-open,
body.is-drawer-open .drawer__overlay {
  opacity: 1;
  pointer-events: auto;
}


/* ==========================================================================
   16. PAGE HEAD — 下層ページ見出し帯（淡グレー地 + 斜めカット）
   ========================================================================== */

.page-head {
  position: relative;
  z-index: 0;
  padding: clamp(44px, 6vw, 96px) 0 clamp(70px, 8vw, 130px);
  overflow: hidden;
}

/* 淡グレーの面。下端が斜めにカットされてページ背景へ続く */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--bg-deep);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(40px, 5vw, 96px)), 0 100%);
}

.page-head__deco {
  --stripe-color: var(--brand);
  --stripe-opacity: .06;
  z-index: -1;
}

.page-head > .inr {
  position: relative;
  z-index: 1;
}

.page-head .dq {
  margin-bottom: 20px;
}

.page-head__title {
  font-size: clamp(1.9rem, 4.4vw, 3.5rem);
  line-height: 1.4;
}

.page-head__title + .eyebrow {
  margin-top: 16px;
}

/* --- パンくず ------------------------------------------------------------ */
/* nav 直下に .inr がある場合と、直接 .breadcrumb__list がある場合の両方に対応 */
.breadcrumb {
  position: relative;
  z-index: 1;
  margin-top: clamp(28px, 4vw, 52px);
}

.breadcrumb > .breadcrumb__list {
  width: min(100% - var(--gutter) * 2, var(--w));
  margin-inline: auto;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-mid);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  width: 10px;
  height: 1px;
  background-color: var(--ink-mid);
}

.breadcrumb__item a {
  color: var(--ink-mid);
}

.breadcrumb__item a:hover {
  color: var(--teal-strong);
}

.breadcrumb__item [aria-current="page"],
.breadcrumb__item[aria-current="page"],
.breadcrumb__item--current {
  color: var(--brand);
  font-weight: 500;
}


/* ==========================================================================
   17. BRIDGE — フッター手前（道路画像 + 巨大ループテキスト）
   ========================================================================== */

.bridge {
  position: relative;
  margin-top: clamp(80px, 10vw, 160px);
  overflow: hidden;
}

/* 写真の斜めカットの外側に見える淡い面 */
.bridge::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: clamp(48px, 8.9vw, 128px);
  left: 0;
  background-color: var(--bg-deep);
}

/* 写真は左が低く右が高い平行四辺形に切り抜く */
.bridge__img {
  position: relative;
  margin: 0;
  clip-path: polygon(0 22%, 100% 0, 100% 78%, 0 100%);
}

.bridge__img img {
  width: 100%;
  height: clamp(260px, 50vw, 720px);
  object-fit: cover;
}

.bridge__stripes {
  --stripe-color: var(--white);
  --stripe-opacity: .12;
}

/* 巨大ループ文字は写真の下部に重ねる */
.bridge .marquee {
  position: absolute;
  bottom: clamp(8px, 3.2vw, 46px);
  left: 0;
  z-index: 1;
}


/* ==========================================================================
   18. FOOTER — 3カラム（左ブランド / 中リンク2列 / 右に濃色カード）
   ========================================================================== */

.footer {
  position: relative;
  /* 下の余白は小さくし、最下段（規約リンク・コピーライト）をページの一番下に寄せる */
  padding: clamp(64px, 7vw, 105px) 0 clamp(16px, 1.6vw, 24px);
  padding-right: var(--pagetop-w);
  background-color: var(--bg);
}

.footer__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 420px);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

/* --- 左：ブランド -------------------------------------------------------- */
.footer__logo {
  margin-bottom: 22px;
}

.footer__logo img {
  width: 200px;
  height: auto;
}

.footer__addr {
  color: var(--ink-sub);
  font-size: var(--fs-sm);
  line-height: 2;
}

/* 会社名・住所・電話（会社情報ページの表示と同じ値。変更時は全ページを直す） */
.footer__info {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-style: normal;
}

.footer__company {
  color: var(--charcoal);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
}

.footer__info-row {
  margin-top: 8px;
  color: var(--ink-mid);
  font-size: var(--fs-sm);
  line-height: 1.9;
}

.footer__info-row a:hover {
  color: var(--teal-strong);
}

/* --- 中：リンク2列 ------------------------------------------------------- */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: clamp(20px, 3vw, 48px);
  /* 行の高さいっぱいに伸ばし、HitoArk のバナーを列の一番下へ置く。
     横に並ぶお問い合わせカードと下端がそろう */
  align-self: stretch;
}

/* 別サイトのインタビューメディア HitoArk へのバナー。リンク2列の下に全幅で置き、別タブで開く。
   淡いグレーの地に、右側を斜めに切った赤の面・斜線入りの短い帯・字間の広い英字ロゴを重ねる
   （色は HitoArk の --hk-* を使う）。
   高さは中身（英字ロゴ2行 + 名前とキャッチ）で決まる横長の形。
   文字・飾り・余白の大きさはバナーの幅（cqw・%）に比例させる */
.footer__banner {
  position: relative;
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 5% 0 4.5%;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  border: 1px solid #E2E2E2;
  border-radius: var(--radius);
  background-color: var(--hk-gray);
  color: var(--charcoal);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}

/* 右側の斜めの色面 */
.footer__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--hk-red);
  clip-path: polygon(93% 0, 100% 0, 100% 100%, 71% 100%);
  transition: clip-path .6s var(--ease);
}

.footer__banner:hover {
  border-color: var(--hk-red);
  color: var(--charcoal);
}

.footer__banner:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
}

/* ホバーで赤の面を少しだけ広げる（文字には掛からない幅。タッチ端末ではホバーのまま残るので行わない） */
@media (hover: hover) {
  .footer__banner:hover::before {
    clip-path: polygon(90% 0, 100% 0, 100% 100%, 67% 100%);
  }
}

/* --- 斜線入りの短い帯（飾り） -------------------------------------------- */
.footer__banner-deco {
  position: absolute;
  z-index: -1;
  height: max(6px, 2.4cqw);
}

/* 帯の右上に「／／／／／」を重ねる */
.footer__banner-deco::after {
  content: "";
  position: absolute;
  top: -70%;
  left: 30%;
  width: 90%;
  height: 150%;
  background-image: repeating-linear-gradient(
    120deg,
    transparent 0,
    transparent 5px,
    var(--charcoal) 5px,
    var(--charcoal) 7px
  );
}

.footer__banner-deco--a {
  top: 6.4cqw;
  left: 8%;
  width: 16%;
  background-color: var(--hk-salmon);
}

.footer__banner-deco--b {
  top: 6cqw;
  left: 70%;
  width: 11%;
  background-color: var(--hk-yellow);
}

.footer__banner-deco--c {
  bottom: 8.5cqw;
  left: 80%;
  width: 14%;
  height: max(10px, 4.4cqw);
  background-color: var(--white);
}

.footer__banner-deco--c::after {
  top: -45%;
  left: 20%;
  height: 90%;
}

/* --- 字間の広い英字ロゴ（HITO / ARK） ------------------------------------- */
.footer__banner-logo {
  position: relative;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  margin-left: 41%;
  color: var(--charcoal);
  font-family: var(--font-en);
  font-size: clamp(14px, 4.8cqw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .62em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer__banner-row {
  position: relative;
  display: block;
}

.footer__banner-row + .footer__banner-row {
  padding-left: .5em;
}

/* 2行目の頭に赤い丸（参考画像のアイコンの位置） */
.footer__banner-mark {
  position: absolute;
  top: 50%;
  left: -1.05em;
  width: .72em;
  height: .72em;
  border-radius: 50%;
  background-color: var(--hk-red);
  transform: translateY(-50%);
}

/* --- 左下のメディア名とキャッチ ------------------------------------------ */
.footer__banner-text {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 57%;
  margin: 2.5% 0 0 8%;
  font-size: clamp(12px, 3.5cqw, 15px);
  line-height: 1.5;
}

.footer__banner-name {
  display: flex;
  align-items: center;
  gap: .3em;
  color: var(--charcoal);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.footer__banner-name .ext-icon {
  width: .85em;
  height: .85em;
  margin-left: 0;
}

.footer__banner-catch {
  color: var(--ink-mid);
  font-size: .95em;
  letter-spacing: .02em;
  word-break: auto-phrase;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__link {
  color: var(--brand);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  /* 狭い列でも「サイトのご利用に／ついて」のように文節で折り返す */
  word-break: auto-phrase;
}

.footer__sublink {
  position: relative;
  padding-left: 18px;
  color: var(--ink-sub);
  font-size: .8125rem;
}

.footer__sublink::before {
  content: "";
  position: absolute;
  top: .9em;
  left: 0;
  width: 10px;
  height: 1px;
  background-color: var(--ink-sub);
}

.footer__link:hover,
.footer__sublink:hover,
.footer__link[aria-current="page"],
.footer__sublink[aria-current="page"] {
  color: var(--teal-strong);
}

/* --- 最下段：左に規約系リンク、右下にコピーライト ---------------------- */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 40px;
  margin-top: clamp(48px, 5.6vw, 80px);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__legal a {
  color: var(--ink-mid);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .06em;
}

.footer__legal a:hover {
  color: var(--teal-strong);
}

.footer__bottom .footer__copy {
  margin-left: auto;
}

.footer__copy {
  display: block;
  color: var(--ink-sub);
  font-family: var(--font-en);
  font-size: .6875rem;
  letter-spacing: .06em;
}

/* --- 右：濃色の角丸カード ------------------------------------------------ */
.footer__contact {
  align-self: stretch;
  padding: clamp(32px, 3.6vw, 56px);
  background-color: var(--btn-dark);
  border-radius: var(--radius);
  color: var(--white);
}

.footer__contact .dq {
  margin-bottom: 20px;
}

.footer__contact-title {
  margin-top: 16px;
  color: var(--white);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.6;
}

.footer__contact-text {
  margin-top: 16px;
  color: var(--on-dark);
  font-size: .9375rem;
  line-height: 2;
}

.footer__contact .btn {
  margin-top: 30px;
}

/* --- ページトップ（右端の縦書き帯） -------------------------------------- */
.pagetop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: var(--pagetop-w);
  background-color: var(--teal);
  color: var(--on-teal);
  transition: background-color var(--dur) var(--ease);
}

.pagetop__arrow {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease);
}

.pagetop__text {
  color: inherit;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
}

.pagetop:hover {
  background-color: var(--btn-dark);
  color: var(--white);
}

.pagetop:hover .pagetop__arrow {
  transform: rotate(-45deg) translate(3px, -3px);
}


/* ==========================================================================
   19. RESPONSIVE（広い順 → 狭い順）
   ========================================================================== */

/* --- 1200px 以下 --------------------------------------------------------- */
@media (max-width: 1200px) {
  :root {
    --slant-cut: 130px;
    --slant-cut-kv: 140px;
    --btn-h: 70px;
    --btn-h-lg: 74px;
  }

  .gnav__main {
    gap: 16px;
  }

  .gnav__main a {
    font-size: .8125rem;
  }

}

/* --- 1280px 以下：フッターを2列に ------------------------------------------
   3列だと中央のリンク列が狭くなり語の途中で折り返すため、
   お問い合わせカードを下の段へ回す（1024px 以下と同じ組み方） */
@media (max-width: 1280px) {
  .footer__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }

  .footer__contact {
    grid-column: 1 / -1;
  }
}

/* --- 1366px 未満：CTA が2つ並ぶため、ヘッダーを詰めて1行に収める --------- */
@media (max-width: 1365px) {
  .gnav {
    column-gap: 14px;
  }

  .gnav__main {
    gap: clamp(10px, 1vw, 14px);
  }

  .gnav__main a {
    font-size: .78125rem;
    letter-spacing: .02em;
  }

  /* CTA は丸矢印を外して文字だけのピルにする */
  .gnav__cta {
    gap: 8px;
  }

  .gnav__cta .btn {
    gap: 0;
    padding: 0 20px;
    font-size: 12px;
    letter-spacing: .04em;
  }

  .gnav__cta .btn__arrow {
    display: none;
  }
}

/* --- 1024px 以下（タブレット）：gnav を閉じ hamburger を表示 -------------- */
@media (max-width: 1024px) {
  :root {
    --head-h: 76px;
    --head-h-min: 68px;
  }

  /* ナビゲーションはドロワーへ集約。同じリンクはフッターに常時表示されている */
  .gnav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .head {
    padding-right: 96px;
  }

  .head__mark { width: 42px; }
  .head__type { width: 150px; }

  .head.is-scrolled .head__mark { width: 36px; }
  .head.is-scrolled .head__type { width: 138px; }

  .footer {
    padding-right: 48px;
  }

  .footer__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__contact {
    grid-column: 1 / -1;
  }

  .vtext {
    width: 200px;
    min-height: 480px;
  }
}

/* --- 768px 以下（SP） ---------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --slant-cut: 70px;
    --slant-cut-kv: 80px;
    --btn-h: 64px;
    --btn-h-lg: 68px;
    --btn-h-sm: 52px;
    --pagetop-w: 44px;
    --sec-pad: clamp(64px, 12vw, 100px);
  }

  .btn {
    --arrow-size: 36px;
    gap: 18px;
    padding: 0 16px 0 28px;
    font-size: 12px;
  }

  .btn--lg {
    padding-left: 34px;
  }

  .btn--icon {
    width: 40px;
    height: 40px;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .dq--lg {
    width: 36px;
    height: 30px;
  }

  .dq--lg::before,
  .dq--lg::after {
    width: 15px;
    height: 30px;
  }

  th, td {
    padding: .9em 1em;
  }

  th {
    width: 34%;
  }

  .slider__ui {
    margin-top: 24px;
  }

  .vtext {
    width: 100%;
    min-height: 0;
    padding: clamp(24px, 6vw, 36px);
    writing-mode: horizontal-tb;
    flex-direction: column;
    gap: 14px;
  }

  .bridge__img img {
    height: 240px;
  }

  .footer {
    padding-right: 36px;
  }

  .footer__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer__contact {
    grid-column: auto;
  }

  .pagetop {
    gap: 12px;
  }

  .imgloop__row > figure {
    width: 220px;
  }

  .imgloop__row > figure > img {
    height: 140px;
  }
}

/* --- 480px 以下 ---------------------------------------------------------- */
@media (max-width: 480px) {

  /* 規約系リンク3つを1行に収める */
  .footer__legal {
    gap: 6px 14px;
  }

  .footer__legal a {
    font-size: .6875rem;
    letter-spacing: .04em;
  }
  :root {
    --slant-cut: 52px;
    --slant-cut-kv: 60px;
    --gutter: 20px;
  }

  .btn {
    --arrow-size: 34px;
    gap: 14px;
    padding: 0 14px 0 22px;
  }

  .btn--lg {
    padding-left: 26px;
  }

  .card {
    padding: 26px 22px;
  }

  .footer__nav {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .hamburger {
    width: 68px;
    height: 68px;
  }

  .head {
    padding-right: 82px;
  }

  .head__mark { width: 34px; }
  .head__type { width: 124px; }

  .drawer__list > li > a {
    font-size: 1.0625rem;
  }
}


/* ==========================================================================
   20. PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .marquee__row,
  .imgloop__row {
    animation: none !important;
    transform: none !important;
  }

  .inview {
    opacity: 1;
    transform: none;
  }

  .loader {
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media print {
  .loader,
  .hamburger,
  .drawer,
  .drawer__overlay,
  .pagetop,
  .marquee,
  .imgloop,
  .slider__ui {
    display: none !important;
  }

  body {
    background-color: #fff;
    color: #000;
  }

  .head {
    position: static;
    height: auto;
  }

  main {
    padding-top: 0;
  }

  .inview {
    opacity: 1;
    transform: none;
  }

  a {
    text-decoration: underline;
  }
}