@charset "UTF-8";
/*
Theme Name: CLEAR CORPORATION
Theme URI: https://
Author: 株式会社大和
Description: 株式会社クリアコーポレーション コーポレートサイトのテーマ。css/common.css（共通クラス）→ このファイル（サイトのスタイル）の順に読み込みます。サイトのスタイルはこのファイルに書いてください。
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: clear-corp
*/
/* ============================================================
   株式会社クリアコーポレーション  コーポレートサイト TOP
   Figma "Frame 1" (1920 x 23958) 準拠

   単位の考え方
   - PC (1025px〜) : 1rem = 10px @1920px。画面幅に比例して縮小、1920px 以上は固定
                    → Figma の px 値 ÷ 10 = rem
   - SP (〜1024px) : 1rem = 10px @414px。580px 以上は 14px で固定
   ============================================================ */

:root {
  --ink: #333;
  --black: #000;
  --white: #fff;
  --gray-bg: #f3f3f3;
  --gray-footer: #f2f2f2;
  --line: #ccc;
  --muted: #707070;
  --rule: #797979;

  --sans: "Noto Sans JP", sans-serif;
  --serif: "Noto Serif JP", serif;
  --en: "Old Standard TT", serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: min(calc(100vw / 192), 10px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--ink);
  background: var(--white);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
small { font-size: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sp { display: none; }
.ib { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 共通パーツ ---------- */
.inner { width: 120rem; margin-inline: auto; }

/* 英字見出し＋和文 */
.sec-head { font-weight: 400; color: var(--black); }
.sec-head .en { display: block; font-family: var(--en); font-size: 8rem; line-height: 9.9rem; }
.sec-head .ja { display: block; font-size: 2rem; line-height: 2.4rem; letter-spacing: .1em; }
.sec-head--white { color: var(--white); }

/* 見出し（明朝） */
.h-serif { font-family: var(--serif); font-weight: 700; font-size: 5rem; line-height: 7rem; }
.h-serif--medium { font-weight: 500; }
.h-serif--center { text-align: center; }
.catch { font-family: var(--serif); font-weight: 700; font-size: 4.2rem; line-height: 5.8rem; letter-spacing: .1em; white-space: nowrap; }

/* 本文 */
.lead { font-size: 2rem; line-height: 4rem; letter-spacing: .1em; }
.lead--center { text-align: center; }
.lead--medium { font-weight: 500; }

/* 見出し（左）＋リード（右） */
.sec-row { display: flex; justify-content: space-between; align-items: flex-end; }
.sec-row .lead { width: 79.5rem; }

/* ピルボタン */
.pill {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40rem; height: 5.3rem; border-radius: 6rem;
  background: var(--ink); color: var(--white);
  font-family: var(--en); font-size: 2.2rem; line-height: 1;
  transition: opacity .3s;
}
.pill svg { position: absolute; right: 3.2rem; top: 50%; width: 3rem; height: 1.8rem; margin-top: -.9rem; overflow: visible; transition: transform .3s var(--ease); }
.pill--center { margin-inline: auto; }
.pill--white { background: var(--white); color: var(--ink); }
.pill--white svg { color: var(--black); }

/* ノイズ（Figma: Noise effect） */
.noise { position: relative; }
.noise::before { content: ""; position: absolute; inset: 0; background: url(assets/img/noise.png); opacity: .25; pointer-events: none; }
.noise--light::before { opacity: .1; }
.noise > * { position: relative; }

@media (hover: hover) {
  .pill:hover svg { transform: translateX(.6rem); }
  .pill:hover { opacity: .85; }
}

/* ============================================================
   header
   ============================================================ */
.header { position: absolute; z-index: 100; top: 3rem; left: 5rem; right: 5rem; display: flex; align-items: center; color: var(--white); }
.header__logo img { width: 25rem; }
.header__toggle { display: none; }
.gnav { display: flex; align-items: center; margin-left: auto; }
.gnav__list { display: flex; gap: 6rem; font-family: var(--serif); font-weight: 700; font-size: 1.8rem; line-height: 2.6rem; letter-spacing: .05em; }
.gnav__list a { position: relative; display: block; }
.gnav__list a::after { content: ""; position: absolute; left: 0; right: .05em; bottom: -.4rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.gnav__contact {
  display: flex; align-items: center; justify-content: center;
  width: 11rem; height: 4rem; margin-left: 20rem; border-radius: .2rem;
  background: var(--white); color: var(--ink);
  font-family: var(--en); font-weight: 700; font-size: 1.8rem; line-height: 1;
  transition: opacity .3s;
}
@media (hover: hover) {
  .gnav__list a:hover::after { transform: scaleX(1); }
  .gnav__contact:hover { opacity: .8; }
}

/* ============================================================
   01 メインビジュアル
   ============================================================ */
.mv { position: relative; height: 108rem; overflow: hidden; color: var(--white); text-align: center; }
.mv::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.mv__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv__copy { position: absolute; z-index: 1; top: 18rem; left: 0; width: 100%; }
.mv__title { font-family: var(--serif); font-weight: 700; font-size: 7rem; line-height: 11.5rem; letter-spacing: .1em; text-shadow: .5rem .5rem 1rem rgba(0, 0, 0, .2); }
.mv__title b { font-size: 9rem; font-weight: 700; line-height: 1; }
.mv__line { display: block; height: 11.5rem; }
.mv__lead { margin-top: 3rem; font-weight: 500; font-size: 2.4rem; line-height: 3.5rem; letter-spacing: .1em; text-shadow: .5rem .5rem 1rem rgba(0, 0, 0, .3); }
.mv__logo { position: absolute; z-index: 1; top: 66.2rem; left: 50%; width: 120rem; max-width: none; transform: translateX(-50%); }

/* ============================================================
   02 4つの空間づくり
   ============================================================ */
.spaces { padding: 20rem 0 20.2rem; background: var(--ink); color: var(--white); }
.spaces__lead { margin-top: 5.8rem; }
.spaces__body { position: relative; min-height: 63.5rem; margin-top: 14rem; }
.spaces__photos { position: absolute; left: 5rem; top: 0; width: 91rem; height: 63.5rem; overflow: hidden; }
.spaces__photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.spaces__photos img.is-active { opacity: 1; }
.spaces__list { width: 50rem; margin-left: 106rem; border-top: 1px solid var(--white); }
.spaces__item { border-bottom: 1px solid var(--white); transition: background-color .4s; }
.spaces__item.is-open { background: var(--black); }
.spaces__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 4rem 0; transition: padding .4s var(--ease); }
.spaces__item.is-open .spaces__head { padding: 4rem 2rem 0 3rem; }
.spaces__name { font-size: 3rem; line-height: 3.6rem; }
.spaces__close { display: none; font-weight: 500; font-size: 1.2rem; text-decoration: underline; text-underline-offset: .2em; }
.spaces__arrow { width: 3rem; height: 1.8rem; overflow: visible; transition: transform .3s var(--ease); }
.spaces__item.is-open .spaces__close { display: block; }
.spaces__item.is-open .spaces__arrow { display: none; }
.spaces__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.spaces__item.is-open .spaces__panel { grid-template-rows: 1fr; }
.spaces__panel-in { overflow: hidden; visibility: hidden; transition: visibility .4s; }
.spaces__item.is-open .spaces__panel-in { visibility: visible; }
.spaces__links { padding: 4rem 3rem; font-size: 1.6rem; line-height: 1.9rem; }
.spaces__photo-sp { display: none; }   /* SP のみ表示（項目内の写真） */
.spaces__links li + li { margin-top: 1rem; }
.spaces__links a { text-underline-offset: .2em; }
@media (hover: hover) {
  .spaces__links a:hover { text-decoration: underline; }
  .spaces__item:not(.is-open) .spaces__head:hover .spaces__arrow { transform: translateX(.6rem); }
}

/* ============================================================
   03 クリアが考える空間デザイン
   ============================================================ */
.design { position: relative; padding-top: 20rem; margin-bottom: 20rem; }
.design__bg { position: absolute; top: 0; right: 0; width: 130rem; height: 73.1rem; max-width: none; object-fit: cover; }
.design__img { position: absolute; top: 10rem; left: 5rem; width: 71.4rem; height: 90rem; object-fit: cover; }
.design__box { position: relative; width: 79.6rem; min-height: 98rem; margin-left: 76.4rem; padding: 10rem 10rem 7.9rem; background: var(--white); }
.design__sub { margin-top: 10rem; font-weight: 500; font-size: 3rem; line-height: 4rem; letter-spacing: .1em; }
.design__box .lead { margin-top: 4.1rem; }

/* ============================================================
   04 4つの強み
   ============================================================ */
.strength { padding-bottom: 24.1rem; overflow-x: clip; }   /* 飛び込む前のカードで横スクロールが出ないように（clip は sticky を妨げない） */
.strength__list { margin-top: 15rem; }
.strength__item { position: relative; }
.strength__item:nth-child(2) { margin-top: 32.6rem; }
.strength__item:nth-child(3) { margin-top: 24.7rem; }
.strength__item:nth-child(4) { margin-top: 19.6rem; }
.strength__text { width: 64.6rem; }
.strength__label { display: flex; align-items: center; font-size: 2rem; line-height: 2.4rem; letter-spacing: .1em; color: var(--black); }
.strength__num { margin-right: 2rem; font-family: var(--en); font-size: 4rem; line-height: 4.9rem; letter-spacing: 0; }
.strength__en { position: relative; margin-top: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); font-family: var(--en); font-weight: 400; font-size: 8rem; line-height: 9.9rem; color: var(--black); }
.strength__en::after { content: ""; position: absolute; left: 0; bottom: -2px; width: var(--bar, 25%); height: 3px; background: var(--line); }
.strength__text .lead { margin-top: 7rem; }
.strength__card { position: absolute; top: var(--card-top, 0); left: 77.5rem; width: 37.5rem; height: 43rem; transform: rotate(var(--rot, 0deg)); box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, .2); color: var(--white); font-family: var(--en); }
.strength__card img { width: 100%; height: 100%; object-fit: cover; }
.strength__card-en { position: absolute; top: 2.1rem; left: 2.1rem; font-size: 3rem; line-height: 3.7rem; }
.strength__card-num { position: absolute; right: 2rem; bottom: 2rem; font-size: 6rem; line-height: 7.4rem; }

/* スクロール演出（参考：penguin-capital.co.jp の Business セクション）
   PC：JS が .strength に .is-pin を付けると、区間（.strength__track）の間 .strength__sticky を画面に固定。
       カードは JS が transform を直接書き換え、文字は .is-current の項目だけ表示
   SP：JS が .is-reveal を付け、画面に入った項目（.is-in）のカードが回転しながら飛び込む */
.strength__en-clip { display: block; overflow: hidden; }
.strength__en-clip .char { display: inline-block; white-space: pre; }
.strength.is-pin .strength__list { margin-top: 0; }
.strength.is-pin .strength__track { position: relative; margin-top: 15rem; }
.strength.is-pin .strength__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.strength.is-pin .strength__list { position: relative; width: 100%; height: 56rem; }
.strength.is-pin .strength__item { position: absolute; inset: 0; margin: 0; }
.strength.is-pin .strength__text { position: absolute; z-index: 2; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.strength.is-pin .strength__item.is-current .strength__text { pointer-events: auto; }
.strength.is-pin .strength__card { z-index: 1; top: 50%; margin-top: -21.5rem; will-change: transform; }
.strength.is-pin .strength__en::after { width: calc(var(--prog, 0) * 100%); }
/* 文字の切り替え：出ていく項目はすっと消え、入ってくる項目は 番号・見出し → 英字（1文字ずつ）→ 本文 の順に出る */
.strength.is-pin .strength__label,
.strength.is-pin .strength__text .lead { opacity: 0; transform: translateY(1.6rem); transition: opacity .3s, transform .3s; }
.strength.is-pin .strength__en-clip .char { transform: translateY(105%); transition: transform .3s; }
.strength.is-pin .strength__en { border-bottom-color: transparent; transition: border-color .3s; }
.strength.is-pin .strength__en::after { opacity: 0; transition: opacity .3s; }
.strength.is-pin .is-current .strength__label,
.strength.is-pin .is-current .strength__text .lead { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1); }
.strength.is-pin .is-current .strength__text .lead { transition-delay: .25s; }
.strength.is-pin .is-current .strength__en-clip .char { transform: none; transition: transform .7s cubic-bezier(.22, .61, .36, 1) calc(.08s + var(--i, 0) * .025s); }
.strength.is-pin .is-current .strength__en { border-bottom-color: var(--line); }
.strength.is-pin .is-current .strength__en::after { opacity: 1; }
/* SP：画面に入ったらカードが回転しながら飛び込む */
.strength.is-reveal .strength__card { transition: transform 1s cubic-bezier(.22, .61, .36, 1), opacity .6s; }
.strength.is-reveal .strength__item:not(.is-in) .strength__card { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--sr, 0deg)); }
.strength.is-reveal .strength__text { transition: opacity .8s, transform .8s cubic-bezier(.22, .61, .36, 1); }
.strength.is-reveal .strength__item:not(.is-in) .strength__text { opacity: 0; transform: translateY(2rem); }

/* ============================================================
   05 ワンストップの空間づくり
   ============================================================ */
.onestop { padding: 20rem 0 20.2rem; background: var(--ink); color: var(--white); }
.onestop__title { width: 81.2rem; margin-inline: auto; }
.onestop__lead { margin-top: 9.1rem; }
.onestop__logo { width: 40rem; margin: 5.6rem auto 0; }

/* 比較図のスクロール演出（参考：Claude Design「Frame2 Scroll」）
   JS が進行度に応じて --left / --dupe / --cap-l / --right / --wedge / --payoff / --cap-r（0〜1）を書き換える。
   JS が動かない環境では初期値（すべて表示）のまま静止表示になる */
.compare-track { margin-top: 4.6rem; }
.compare {
  --accent: #fffb79;
  --left: 1; --dupe: 0; --cap-l: 1; --right: 1; --wedge: 1; --payoff: 1; --payoff-o: 1; --kicker: .85; --cap-r: 1;
  display: flex; align-items: flex-end;
}
.compare-track.is-scroll { height: 300vh; }
.compare-track.is-scroll .compare-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; }
.compare-track.is-scroll .compare { flex: none; width: 100%; transform: scale(var(--fit, 1)); transform-origin: center center; }
.compare__col { width: 48rem; }
.compare__logo { display: none; }
.compare__head { margin-bottom: 3.1rem; font-weight: 500; font-size: 2.4rem; line-height: 4rem; text-align: center; }
.compare__col--split .compare__head { opacity: var(--left); transform: translateY(calc((1 - var(--left)) * 1.4rem)); }
.compare__col--one .compare__head { opacity: var(--right); transform: translateY(calc((1 - var(--right)) * 1.4rem)); }
.compare__split { opacity: var(--left); transform: translateY(calc((1 - var(--left)) * 1.8rem)); }
.compare__one ul { opacity: var(--right); transform: translateY(calc((1 - var(--right)) * 1.8rem)); }
.compare__col--split .compare__note { opacity: var(--cap-l); transform: translateY(calc((1 - var(--cap-l)) * 1.2rem)); }
.compare__col--one .compare__note { opacity: var(--cap-r); transform: translateY(calc((1 - var(--cap-r)) * 1.2rem)); }
.compare__note { margin-top: 3.9rem; font-weight: 700; font-size: 2rem; line-height: 3rem; text-align: center; }
.compare__bridge { width: 24rem; height: 72rem; margin-bottom: 9.9rem; opacity: calc(var(--wedge) * .9); }
.compare__bridge svg { width: 100%; height: 100%; overflow: visible; }

/* 罫線は Figma の center stroke に合わせて outline で重ねる */
.compare__split > li { display: grid; grid-template-columns: 1fr 1fr; height: 18rem; }
.compare__company { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: .8rem; background: rgba(255, 255, 255, .5); outline: 1px solid var(--white); outline-offset: -.5px; font-weight: 500; }
.compare__tag { display: block; width: 10rem; height: 2.3rem; background: var(--white); color: var(--ink); font-size: 1.6rem; line-height: 2.3rem; letter-spacing: .1em; text-align: center; }
.compare__company b { margin-top: .9rem; font-weight: 500; font-size: 2.6rem; line-height: 4rem; }
.compare__company small { margin-top: -1rem; font-size: 1.6rem; line-height: 4rem; }
.compare__split ul li,
.compare__one li { position: relative; height: 6rem; outline: 1px solid var(--white); outline-offset: -.5px; font-weight: 500; font-size: 2rem; line-height: 6rem; text-align: center; }
/* 重複している「営業」「バックオフィス」を一時的にハイライト */
.compare__split .is-dupe::before,
.compare__split .is-dupe::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; pointer-events: none; background: var(--accent); }
.compare__split .is-dupe::before { right: 0; opacity: calc(var(--dupe) * .22); }
.compare__split .is-dupe::after { width: 3px; opacity: calc(var(--dupe) * 20); }
.compare__merit {
  position: relative; height: 36rem; padding-top: 9.6rem; border: 2px solid var(--accent); text-align: center;
  box-shadow: 0 0 calc(var(--payoff) * 6rem) rgba(255, 251, 121, .2) inset, 0 0 calc(var(--payoff) * 4rem) rgba(255, 251, 121, .15);
  opacity: var(--payoff-o); transform: scale(calc(.94 + .06 * var(--payoff))); transform-origin: 50% 100%;
}
.compare__merit-main { font-family: var(--serif); font-weight: 500; font-size: 5rem; line-height: 7.5rem; }
.compare__merit-main em { font-style: normal; color: var(--accent); }
.compare__merit-rule { position: absolute; left: 50%; top: 26.8rem; width: 12rem; height: 2px; background: var(--accent); transform: translateX(-50%) scaleX(var(--payoff)); }
.compare__merit-kicker { position: absolute; left: 0; right: 0; top: 28.4rem; font-weight: 500; font-size: 1.8rem; line-height: 3.2rem; letter-spacing: .08em; opacity: var(--kicker); }

/* ============================================================
   06 パララックス（spiral）
   ============================================================ */
/* spiral-fv-sample.html を移植。スクロール区間（.spiral）の中で表示領域（.spiral__sticky）を
   画面に固定し、スクロール量に応じて画像が奥から手前へ流れる。
   ※ position: sticky を効かせるため、.spiral とその祖先に overflow: hidden を付けないこと */
.spiral {
  --spiral-bg: #e9ebee;
  --card-w: 220px;   /* JS から実サイズを上書き */
  --card-h: 147px;   /* 3:2 */
  --persp: 1000px;   /* JS から上書き */
  position: relative; height: 300vh; background: var(--spiral-bg);
}
.spiral__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.spiral__logo { position: absolute; z-index: 0; top: 15%; left: 10%; width: 62%; max-width: none; pointer-events: none; }   /* 画像の奥に重ねるロゴ */
.spiral__stage { position: absolute; z-index: 1; inset: 0; perspective: var(--persp); perspective-origin: 50% 50%; }
.spiral__axis { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.spiral__item { position: absolute; left: 0; top: 0; width: var(--card-w); height: var(--card-h); margin-left: calc(var(--card-w) / -2); margin-top: calc(var(--card-h) / -2); opacity: 0; will-change: transform, opacity; backface-visibility: hidden; }
.spiral__item img { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 24px rgba(19, 26, 36, .16); }

/* ============================================================
   07 流れ
   ============================================================ */
.flow { padding: 20rem 0; background: var(--gray-bg); }
.flow__body { display: grid; grid-template-columns: 40.5rem 1fr; align-items: start; margin-top: 10rem; }
.flow__nav { position: sticky; top: 10rem; }
.flow__nav li + li { margin-top: 3rem; }
.flow__nav a { display: inline-flex; align-items: center; gap: 2rem; font-size: 1.6rem; line-height: 1.9rem; letter-spacing: .1em; color: var(--black); }
.num { flex: none; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; font-family: var(--en); font-weight: 400; font-size: 2rem; line-height: 1; letter-spacing: 0; }
.flow__nav .num { background: var(--white); color: var(--black); transition: background-color .3s, color .3s; }
.flow__nav a.is-current .num { background: var(--ink); color: var(--white); }
.flow__list { display: grid; gap: 3rem; }
.flow__card { display: flex; justify-content: space-between; min-height: 19.6rem; padding: 3rem; background: var(--white); color: var(--black); scroll-margin-top: 10rem; }
.flow__text { width: 46.5rem; }
.flow__title { display: flex; align-items: center; gap: 2rem; font-weight: 500; font-size: 2.2rem; line-height: 2.6rem; letter-spacing: .1em; }
.flow__title .num { background: var(--ink); color: var(--white); }
.flow__text p { margin-top: 2rem; font-size: 1.6rem; line-height: 1.9rem; letter-spacing: .1em; }
.flow__img { flex: none; display: flex; align-items: center; justify-content: center; width: 24rem; height: 13.6rem; background: var(--gray-bg); }
.flow__img--bottom { align-items: flex-end; }
#flow-1 .flow__img img { width: 14.2rem; }
#flow-2 .flow__img img { width: 7.1rem; }
#flow-3 .flow__img img { width: 15.6rem; }
#flow-4 .flow__img img { width: 16.1rem; }
#flow-5 .flow__img img { width: 7.8rem; }
#flow-6 .flow__img img { width: 10.4rem; }
#flow-7 .flow__img img { width: 14.6rem; }
#flow-8 .flow__img img { width: 19.3rem; }

/* ============================================================
   08 / 15 CTA
   ============================================================ */
.cta { padding: 3rem 0; background: var(--ink); color: var(--white); text-align: center; scroll-margin-top: 0; }
.cta__title { font-family: var(--en); font-weight: 400; font-size: 20rem; line-height: 24.7rem; }
.cta__body { display: flex; justify-content: center; margin-top: -2rem; }
.cta__bracket { flex: none; width: 23.7rem; height: 32.8rem; }
.cta__bracket--right { transform: scaleX(-1); }
.cta__list { display: flex; gap: 1rem; padding-top: 6.3rem; }
.cta__list li { width: 35.8rem; }
.cta__label { font-size: 1.6rem; line-height: 4rem; letter-spacing: .05em; }
.cta__btn { display: flex; align-items: center; justify-content: center; gap: 1.5rem; height: 10rem; margin-top: 1.1rem; border: 1px solid var(--white); border-radius: .5rem; font-weight: 500; font-size: 2.4rem; line-height: 4rem; letter-spacing: .05em; transition: background-color .3s, color .3s; }
.cta__btn img { width: 2.5rem; transition: filter .3s; }
.cta__btn--tel { font-family: var(--en); font-weight: 400; font-size: 4rem; line-height: 4.9rem; letter-spacing: -.05em; }
.cta__btn--tel img { width: 2rem; }
/* 開く演出（PC のみ・JS が .is-anim → .is-open を付ける）：閉じた括弧（ロゴの形）→ 開く → 中身がフェードイン */
@media (min-width: 1025px) {
  .cta.is-anim .cta__bracket { transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); }
  .cta.is-anim .cta__bracket--left { transform: translateX(34.9rem); }
  .cta.is-anim .cta__bracket--right { transform: translateX(-34.9rem) scaleX(-1); }
  .cta.is-anim .cta__list li { opacity: 0; transform: translateY(2rem); transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
  .cta.is-open .cta__bracket--left { transform: none; }
  .cta.is-open .cta__bracket--right { transform: scaleX(-1); }
  .cta.is-open .cta__list li { opacity: 1; transform: none; transition-delay: .7s; }
  .cta.is-open .cta__list li:nth-child(2) { transition-delay: .9s; }
}
@media (hover: hover) {
  .cta__btn:hover { background: var(--white); color: var(--ink); }
  .cta__btn:hover img { filter: brightness(.2); }
}

/* ============================================================
   09 事業内容
   ============================================================ */
.service { padding-top: 20rem; }
.service__group { margin-top: 8rem; }
.sec-row + .service__group { margin-top: 10.1rem; }
.service__title { font-family: var(--serif); font-weight: 700; font-size: 4rem; line-height: 3rem; letter-spacing: .05em; }
.service__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 4.1rem; }
.service__card { position: relative; display: block; aspect-ratio: 1; overflow: hidden; color: var(--white); }
.service__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.service__card::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); transition: background-color .4s; }
.service__card span { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 2.4rem; line-height: 2.4rem; letter-spacing: .1em; }
.service__dots { display: none; }
@media (hover: hover) {
  .service__card:hover img { transform: scale(1.06); }
  .service__card:hover::after { background: rgba(0, 0, 0, .25); }
}

/* ============================================================
   10 施工実績ギャラリー
   ============================================================ */
.gallery { padding-top: 20rem; }
.gallery__lead { margin-top: 6rem; }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8.1rem; }
.gallery__grid li { aspect-ratio: 1; overflow: hidden; }
.gallery__grid img { width: 100%; height: 100%; object-fit: cover; }
.gallery__grid li:nth-child(1) { grid-area: 1 / 1; }
.gallery__grid li:nth-child(2) { grid-area: 1 / 2; }
.gallery__grid li:nth-child(3) { grid-area: 1 / 3 / 3 / 5; }
.gallery__grid li:nth-child(4) { grid-area: 2 / 1 / 4 / 3; }
.gallery__grid li:nth-child(5) { grid-area: 3 / 3; }
.gallery__grid li:nth-child(6) { grid-area: 3 / 4; }
.gallery .pill { margin-top: 8rem; }

/* ============================================================
   11 よくある質問
   ============================================================ */
.faq { padding-top: 20rem; }
.faq__list { margin-top: 10rem; }
.faq__item summary { display: flex; align-items: center; height: 10.9rem; padding: 0 3rem; border-bottom: 1px solid var(--line); background: var(--white); }
.faq__mark { flex: none; display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; margin-right: 3rem; border-radius: 50%; background: var(--ink); color: var(--white); font-family: var(--en); font-size: 2rem; line-height: 1; }
.faq__q { font-size: 1.6rem; line-height: 1.9rem; letter-spacing: .1em; }
.faq__icon { flex: none; position: relative; width: 4rem; height: 4rem; margin-left: auto; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--rule); transition: transform .3s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { display: flex; align-items: center; min-height: 10.9rem; padding: 2rem 3rem; background: var(--ink); color: var(--white); }
.faq__a .faq__mark { background: var(--white); color: var(--ink); }
.faq__a p { font-size: 1.6rem; line-height: 2rem; letter-spacing: .1em; }
.faq .pill { margin-top: 8rem; }
/* 開閉アニメーション（対応ブラウザのみ。非対応は即時開閉） */
@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content { height: 0; overflow: hidden; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
  .faq__item[open]::details-content { height: auto; }
}

/* ============================================================
   12 お知らせ
   ============================================================ */
.news { padding-top: 20rem; }
.news__inner { display: flex; justify-content: space-between; align-items: flex-start; }
.news__main { width: 90.4rem; }
.news__list li + li { margin-top: 3rem; }
.news__item { display: flex; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.news__thumb { flex: none; width: 20rem; height: 15rem; object-fit: cover; }
.news__text { width: 54rem; margin-left: 3rem; padding-top: 1.5rem; }
.news__meta { display: flex; align-items: center; gap: 1.5rem; font-size: 1.4rem; line-height: 2rem; letter-spacing: .1em; }
.news__cat { padding: 0 .3rem; border: 1px solid var(--muted); color: var(--muted); line-height: calc(2rem - 2px); }
.news__title { margin-top: 1.1rem; font-weight: 500; font-size: 2rem; line-height: 3rem; letter-spacing: .1em; }
.news__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 1rem; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: .1em; }
.news__arrow { flex: none; align-self: center; width: 1.95rem; height: 1.2rem; margin-left: auto; overflow: visible; color: var(--black); transition: transform .3s var(--ease); }
.news__all { display: block; width: fit-content; margin: 4rem 0 0 auto; font-family: var(--en); font-size: 2.2rem; line-height: 2.7rem; color: var(--black); }
@media (hover: hover) {
  .news__item:hover .news__arrow { transform: translateX(.5rem); }
  .news__item:hover .news__title { text-decoration: underline; text-underline-offset: .25em; }
  .news__all:hover { text-decoration: underline; text-underline-offset: .2em; }
}

/* ============================================================
   13 会社概要
   ============================================================ */
.company { padding-top: 20rem; }
.company__photos { position: relative; height: 106rem; margin-top: 5rem; }
.company__photo { position: absolute; object-fit: cover; }
.company__photo--1, .company__photo--2, .company__photo--5, .company__photo--6 { width: 28.5rem; height: 33.5rem; }
.company__photo--3, .company__photo--4 { width: 38.5rem; height: 51.5rem; }
.company__photo--1 { left: 0; top: 10rem; }
.company__photo--2 { left: 0; top: 46.5rem; }
.company__photo--3 { left: 40.7rem; top: 0; }
.company__photo--4 { left: 40.7rem; top: 54.5rem; }
.company__photo--5 { left: 91.5rem; top: 26rem; }
.company__photo--6 { left: 91.5rem; top: 62.5rem; }
/* 写真が「重なった状態 → フワッと広がる」動き（参考：jyuutaku-family.co.jp の top-recruit）
   JS が .is-ready を付けると重なった状態、画面に入ると .is-visible で並び位置へ。
   重なり位置（--gx / --gy）と傾き（--gr）は JS が各写真の並び位置から計算 */
.company__photos.is-ready { transform: scale(.68); transition: transform .6s cubic-bezier(.215, .61, .355, 1); }
.company__photos.is-ready .company__photo { transform: translate(calc(var(--ox, 0px) + var(--gx, 0px)), calc(var(--oy, 0px) + var(--gy, 0px))) rotate(var(--gr, 0deg)); transition: transform .6s cubic-bezier(.215, .61, .355, 1); }
.company__photos.is-ready.is-visible { transform: none; }
.company__photos.is-ready.is-visible .company__photo { transform: translate(var(--ox, 0px), var(--oy, 0px)) rotate(0deg); }
.company__photo--3 { z-index: 6; }
.company__photo--4 { z-index: 5; }
.company__photo--1 { z-index: 4; }
.company__photo--5 { z-index: 3; }
.company__photo--2 { z-index: 2; }
.company__photo--6 { z-index: 1; }
.company .catch { margin-top: 5rem; }
.company__bottom { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 16.8rem; }
.company__bottom .pill { margin-top: 14.9rem; }

/* ============================================================
   14 求人情報
   ============================================================ */
.recruit { position: relative; min-height: 80.4rem; margin-top: 20.3rem; padding: 15rem 0; color: var(--white); }
.recruit__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recruit::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.recruit__inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; }
.recruit__head .pill { margin-top: 8rem; }
.recruit__text { width: 64.2rem; }
.recruit__text .lead { margin-top: 4.8rem; }

/* ============================================================
   16 footer
   ============================================================ */
.footer { position: relative; padding-top: 10rem; background: var(--gray-footer); }
.footer__logo { display: block; width: 30rem; margin-inline: auto; }
.footer__logo img { width: 100%; }
.fnav { display: flex; gap: 5rem; margin-top: 8rem; font-weight: 500; font-size: 1.6rem; letter-spacing: .05em; }
.fnav__col { width: 21.2rem; }
.fnav__col--wide { width: 44.4rem; }
.fnav__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--ink); font-family: var(--serif); font-weight: 700; font-size: 2.2rem; line-height: 3.2rem; }
.fnav__head svg { width: 2rem; height: 2rem; transition: transform .3s var(--ease); }
.fnav__head ~ .fnav__head { margin-top: 2.9rem; }
.fnav__sub { margin-top: 2rem; line-height: 1.9rem; }
.fnav__sub li + li { margin-top: 2rem; }
.fnav__sub--loose { margin-top: 1.65rem; line-height: 2.4rem; }
.fnav__sub--loose li + li { margin-top: 2rem; }
.fnav__sub--loose li:first-child { margin-bottom: -.25rem; }
.fnav__services { display: grid; grid-template-columns: 23.4rem 1fr; row-gap: 4rem; margin-top: 2rem; line-height: 1.9rem; }
.fnav__services dd { margin-top: 1rem; font-weight: 400; }
.fnav__services dt + dd { margin-top: 2rem; }
.footer__btns { display: flex; justify-content: center; gap: 2rem; margin-top: 5rem; }
.footer__btns a { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 29rem; height: 4.5rem; border-radius: .5rem; background: var(--white); font-weight: 500; font-size: 2rem; line-height: 2.4rem; letter-spacing: .05em; }
.footer__btns svg { width: 1.95rem; height: 1.2rem; overflow: visible; color: var(--black); transition: transform .3s var(--ease); }
.footer__pagetop { position: absolute; right: 5rem; top: 64.3rem; display: flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; border: 1px solid var(--ink); border-radius: 50%; color: var(--black); transition: background-color .3s, color .3s; }
.footer__pagetop svg { width: 3rem; height: 1.8rem; overflow: visible; transform: rotate(-90deg); }
.footer__bottom { position: relative; height: 5.5rem; margin-top: 8rem; padding-top: 1.5rem; border-top: 1px solid #b3b3b3; font-weight: 500; font-size: 1.2rem; line-height: 2.4rem; letter-spacing: .05em; text-align: center; }
.footer__policy { position: absolute; left: calc(50% - 60rem); top: 1.5rem; }
.footer__copy { display: block; }
@media (hover: hover) {
  .fnav a:hover, .footer__policy:hover { text-decoration: underline; text-underline-offset: .25em; }
  .fnav__head:hover { text-decoration: none !important; }
  .fnav__head:hover svg { transform: translateX(.4rem); }
  .footer__btns a:hover svg { transform: translateX(.5rem); }
  .footer__pagetop:hover { background: var(--ink); color: var(--white); }
}

/* ============================================================
   SP / タブレット（〜1024px）
   ※ Figma に SP デザインが無いため、PC デザインを基に 414px 基準で再構成
   ============================================================ */
@media (max-width: 1024px) {
  html { font-size: min(calc(100vw / 41.4), 14px); }
  body { font-size: 1.4rem; }
  .pc { display: none; }
  .sp { display: inline; }
  html.is-nav-open { overflow: hidden; }

  .inner { width: auto; padding-inline: 2.4rem; }
  .sec-head .en { font-size: 4.4rem; line-height: 1.2; }
  .sec-head .ja { margin-top: .4rem; font-size: 1.3rem; line-height: 1.6; }
  .h-serif { font-size: 2.4rem; line-height: 1.6; }
  .catch { font-size: 2.2rem; line-height: 1.6; letter-spacing: .06em; white-space: normal; }
  .lead { font-size: 1.4rem; line-height: 2; letter-spacing: .08em; }
  .lead--center { text-align: left; }
  .sec-row { display: block; }
  .sec-row .lead { width: auto; margin-top: 2.4rem; }
  .pill { width: 100%; max-width: 32rem; height: 5rem; margin-inline: auto; font-size: 1.8rem; }
  .pill svg { right: 2.4rem; width: 2.4rem; }

  /* header */
  .header { top: 1.6rem; left: 2.4rem; right: 2.4rem; }
  .header__logo img { width: 16rem; }
  .header__toggle { position: fixed; z-index: 120; top: 1.2rem; right: 1.2rem; display: block; width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--ink); }
  .header__toggle span { position: absolute; left: 1.4rem; width: 2rem; height: 1px; background: var(--white); transition: transform .3s var(--ease), opacity .3s; }
  .header__toggle span:nth-child(1) { top: 1.7rem; }
  .header__toggle span:nth-child(2) { top: 2.4rem; }
  .header__toggle span:nth-child(3) { top: 3.1rem; }
  .is-nav-open .header__toggle span:nth-child(1) { transform: translateY(.7rem) rotate(45deg); }
  .is-nav-open .header__toggle span:nth-child(2) { opacity: 0; }
  .is-nav-open .header__toggle span:nth-child(3) { transform: translateY(-.7rem) rotate(-45deg); }
  .gnav { position: fixed; z-index: 110; inset: 0; flex-direction: column; justify-content: center; margin: 0; background: rgba(51, 51, 51, .97); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .is-nav-open .gnav { opacity: 1; visibility: visible; }
  .gnav__list { flex-direction: column; align-items: center; gap: 2.8rem; font-size: 2rem; line-height: 1.5; }
  .gnav__contact { width: 20rem; height: 5rem; margin: 4.8rem 0 0; font-size: 2rem; }

  /* 01 MV */
  /* Figma「Frame 4」：414×700、左揃え */
  .mv { height: 70rem; text-align: left; }
  .mv__bg { inset: 0 auto auto -64.6rem; width: 170.5rem; height: 95.9rem; max-width: none; }   /* Figma と同じ切り抜き位置 */
  .mv__copy { top: 17.1rem; left: 4rem; width: auto; }
  .mv__title { font-size: 2.8rem; line-height: 5.2rem; letter-spacing: .12em; }
  .mv__title b { font-size: 3.7rem; }
  .mv__line { height: auto; }
  .mv__lead { margin-top: 1.5rem; font-size: 1.4rem; line-height: 2.4rem; letter-spacing: .24em; white-space: nowrap; }
  .mv__logo { top: 47.6rem; left: 4rem; width: 33.4rem; transform: none; }

  /* 02 4つの空間づくり */
  .spaces { padding: 8rem 0; }
  .spaces__lead { margin-top: 3.2rem; }
  .spaces__body { min-height: 0; margin-top: 4.8rem; padding-inline: 2.4rem; }
  .spaces__photos { display: none; }   /* SP では左の写真を消し、開いた項目の中に表示 */
  .spaces__list { width: auto; margin: 0; }
  .spaces__head { padding: 2.4rem 0; }
  .spaces__item.is-open .spaces__head { padding: 2.4rem 1.6rem 0 2rem; }
  .spaces__name { font-size: 2rem; line-height: 2.8rem; }
  .spaces__arrow { width: 2.4rem; }
  .spaces__links { padding: 2rem; font-size: 1.4rem; line-height: 2rem; }
  .spaces__photo-sp { display: block; width: calc(100% - 3.2rem); height: auto; margin: 2rem auto 0; aspect-ratio: 910 / 635; object-fit: cover; }

  /* 03 空間デザイン */
  .design { padding-top: 4rem; margin-bottom: 8rem; }
  .design__bg { width: 100%; height: 30rem; }
  .design__img { position: relative; top: 0; left: 0; width: calc(100% - 4.8rem); height: auto; margin-inline: auto; aspect-ratio: 714 / 760; }
  .design__box { width: auto; min-height: 0; margin: -6rem 2.4rem 0 4.8rem; padding: 3.2rem 0 0 2.4rem; }
  .design__sub { margin-top: 2.4rem; font-size: 1.7rem; line-height: 2.8rem; letter-spacing: .06em; }
  .design__box .lead { margin-top: 2rem; }

  /* 04 4つの強み */
  .strength { padding-bottom: 8rem; }
  .strength__list { margin-top: 5.6rem; }
  .strength__item:nth-child(n + 2) { margin-top: 7.2rem; }
  .strength__text { width: auto; }
  .strength__label { font-size: 1.4rem; line-height: 2rem; }
  .strength__num { margin-right: 1.2rem; font-size: 2.6rem; line-height: 1.2; }
  .strength__en { margin-top: 1.2rem; padding-bottom: 1.6rem; font-size: 4.2rem; line-height: 1.2; }
  .strength__text .lead { margin-top: 2.4rem; }
  .strength__card { position: relative; top: 0; left: 0; width: 26rem; height: 29.8rem; margin: 4.8rem auto 0; }
  .strength__card-en { top: 1.4rem; left: 1.4rem; font-size: 2.2rem; line-height: 1.2; }
  .strength__card-num { right: 1.4rem; bottom: 1rem; font-size: 4.4rem; line-height: 1.2; }

  /* 05 ワンストップ */
  .onestop { padding: 8rem 0; }
  .onestop__title { width: auto; }
  .onestop__lead { margin-top: 3.2rem; }
  .onestop__logo { display: none; }
  /* 比較図（Figma「Frame 3」：414px 幅基準） */
  .compare-track { margin: 6rem -.4rem 0; }
  .compare { flex-direction: column; align-items: stretch; }
  .compare__col { width: 100%; padding: 1rem 1.5rem 3rem; background: rgba(255, 255, 255, .1); outline: 1px solid var(--white); outline-offset: -.5px; }
  .compare__col--one { padding-top: 3rem; background: rgba(255, 251, 121, .36); outline: 2px solid rgba(255, 251, 121, .9); outline-offset: -1px; }
  .compare__logo { display: block; width: 28rem; margin: 0 auto 1rem; opacity: var(--right); }
  .compare__head { margin-bottom: .5rem; font-size: 1.8rem; line-height: 4rem; }
  .compare__split > li { grid-template-columns: 14rem 1fr; height: 12rem; }
  .compare__company { padding-top: 0; }
  .compare__tag { width: 8rem; height: 2.3rem; font-size: 1.4rem; line-height: 2.3rem; }
  .compare__company b { margin-top: .7rem; font-size: 2rem; line-height: 3rem; }
  .compare__company small { margin-top: 0; font-size: 1rem; line-height: 1.2rem; }
  .compare__split ul li { height: 4rem; background: var(--ink); font-size: 1.6rem; line-height: 4rem; }
  .compare__one li { height: 5rem; background: var(--ink); font-size: 1.8rem; line-height: 5rem; }
  .compare__merit { display: flex; flex-direction: column; justify-content: center; height: 20rem; padding: 0 1rem; border: 0; outline: 1px solid var(--white); outline-offset: -.5px; background: var(--ink); box-shadow: none; }
  .compare__merit-main em { color: inherit; }
  .compare__merit-main { font-size: 3rem; line-height: 4.5rem; }
  .compare__merit-rule, .compare__merit-kicker { display: none; }
  .compare__note { margin-top: 3rem; font-size: 1.8rem; line-height: 2.7rem; }
  .compare__bridge { width: 21.4rem; height: 6rem; margin: 2rem auto 3rem; background: linear-gradient(#fffb79, #fff); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .compare__bridge svg { display: none; }

  /* 06 パララックス：スマホは画面に固定せず、高さ 300px の帯として通過中にアニメーション */
  .spiral { height: auto; }
  .spiral__sticky { position: relative; height: 300px; min-height: 0; }
  .spiral__logo { top: 12%; left: 6%; width: 70%; }

  /* 07 流れ */
  .flow { padding: 8rem 0; }
  .flow__body { display: block; margin-top: 4rem; }
  .flow__nav { display: none; }
  .flow__list { gap: 1.6rem; }
  .flow__card { display: block; min-height: 0; padding: 2rem; }
  .flow__text { width: auto; }
  .flow__title { gap: 1.2rem; font-size: 1.7rem; line-height: 2.4rem; letter-spacing: .06em; }
  .flow__title .num { width: 3.2rem; height: 3.2rem; font-size: 1.6rem; }
  .flow__text p { margin-top: 1.2rem; font-size: 1.3rem; line-height: 2.2rem; letter-spacing: .06em; }
  .flow__img { width: 100%; margin-top: 1.6rem; }

  /* 08 / 15 CTA */
  .cta { padding: 4.8rem 2.4rem 5.6rem; }
  .cta__title { font-size: 6.4rem; line-height: 1.2; }
  .cta__body { margin-top: 1.6rem; }
  .cta__bracket--left, .cta__bracket--right { display: none; }
  .cta__list { flex: 1; flex-direction: column; gap: 1.6rem; max-width: 48rem; margin-inline: auto; padding-top: 0; }
  .cta__list li { width: 100%; }
  .cta__label { font-size: 1.3rem; line-height: 2.4rem; }
  .cta__btn { height: 6.4rem; margin-top: .4rem; font-size: 1.8rem; line-height: 1.5; }
  .cta__btn--tel { font-size: 2.8rem; line-height: 1.2; }

  /* 09 事業内容 */
  .service { padding-top: 8rem; overflow: hidden; }
  .service__group, .sec-row + .service__group { margin-top: 4.8rem; }
  .service__title { font-size: 2.2rem; line-height: 1.4; }
  .service__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; gap: 1.2rem; margin: 1.6rem -2.4rem 0; padding-inline: 2.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2.4rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .service__grid::-webkit-scrollbar { display: none; }
  .service__grid li { scroll-snap-align: start; }
  .service__card span { font-size: 1.6rem; }
  .service__dots { display: flex; justify-content: center; gap: 1rem; margin-top: 1.6rem; }
  .service__dot { width: .8rem; height: .8rem; padding: 0; border: 0; border-radius: .4rem; background: var(--ink); opacity: .2; cursor: pointer; transition: width .3s, opacity .3s; }
  .service__dot.is-active { width: 2.4rem; opacity: 1; }

  /* 10 ギャラリー */
  .gallery { padding-top: 8rem; }
  .gallery__lead { margin-top: 2.4rem; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); margin-top: 4rem; }
  .gallery__grid li:nth-child(n) { grid-area: auto; }
  .gallery__grid li.is-large { grid-column: span 2; }
  .gallery .pill { margin-top: 4rem; }
  .gallery > .pill { width: calc(100% - 4.8rem); }

  /* 11 FAQ */
  .faq { padding-top: 8rem; }
  .faq__list { margin-top: 4rem; }
  .faq__item summary { height: auto; min-height: 7.2rem; padding: 1.6rem 1.2rem; }
  .faq__mark { width: 3.6rem; height: 3.6rem; margin-right: 1.2rem; font-size: 1.6rem; }
  .faq__q { font-size: 1.4rem; line-height: 2.2rem; letter-spacing: .06em; }
  .faq__icon { width: 2rem; height: 2rem; margin-left: 1.2rem; }
  .faq__a { align-items: flex-start; min-height: 0; padding: 1.6rem 1.2rem; }
  .faq__a p { font-size: 1.4rem; line-height: 2.2rem; letter-spacing: .06em; }
  .faq .pill { margin-top: 4rem; }

  /* 12 お知らせ */
  .news { padding-top: 8rem; }
  .news__inner { display: block; }
  .news__main { width: auto; margin-top: 3.2rem; }
  .news__list li + li { margin-top: 2rem; }
  .news__item { padding-bottom: 2rem; }
  .news__thumb { width: 11rem; height: 8.25rem; }
  .news__text { flex: 1; width: auto; min-width: 0; margin-left: 1.6rem; padding-top: 0; }
  .news__meta { gap: .8rem; font-size: 1.1rem; line-height: 1.8rem; letter-spacing: .06em; }
  .news__cat { line-height: calc(1.8rem - 2px); }
  .news__title { margin-top: .6rem; font-size: 1.5rem; line-height: 2.2rem; letter-spacing: .06em; }
  .news__excerpt { margin-top: .4rem; font-size: 1.2rem; line-height: 1.9rem; letter-spacing: .06em; }
  .news__arrow { display: none; }
  .news__all { margin-top: 2.4rem; font-size: 1.8rem; }

  /* 13 会社概要 */
  .company { padding-top: 8rem; }
  .company__photos { display: grid; grid-template-columns: 1fr 1.35fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; gap: 1rem; height: auto; margin-top: 3.2rem; padding-bottom: 6rem; }
  .company__photo { position: relative; left: auto; top: auto; width: 100% !important; height: auto !important; aspect-ratio: 285 / 335; transform: translate(var(--ox, 0px), var(--oy, 0px)); }
  .company__photo--3, .company__photo--4 { aspect-ratio: 385 / 515; }
  .company__photo--1, .company__photo--2 { --oy: 3rem; }
  .company__photo--5, .company__photo--6 { --oy: 6rem; }
  .company .catch { margin-top: 4rem; }
  .company__bottom { display: block; margin-top: 3.2rem; }
  .company__bottom .pill { margin-top: 3.2rem; }

  /* 14 求人情報 */
  .recruit { min-height: 0; margin-top: 8rem; padding: 6.4rem 0; }
  .recruit__inner { flex-direction: column; align-items: stretch; }
  .recruit__head { display: contents; }
  .recruit__text { order: 2; width: auto; margin-top: 3.2rem; }
  .recruit__text .lead { margin-top: 2.4rem; }
  .recruit__head .pill { order: 3; margin-top: 3.2rem; }

  /* 16 footer */
  .footer { padding-top: 5.6rem; }
  .footer__logo { width: 20rem; }
  .fnav { display: block; margin-top: 4rem; font-size: 1.3rem; }
  .fnav__col, .fnav__col--wide { width: auto; }
  .fnav__col + .fnav__col { margin-top: 2.9rem; }
  .fnav__head { font-size: 1.7rem; line-height: 2.6rem; }
  .fnav__sub, .fnav__sub--loose { line-height: 2rem; }
  .fnav__services { grid-template-columns: 1fr 1fr; row-gap: 2.8rem; line-height: 2rem; }
  .footer__btns { gap: 1.2rem; margin-top: 4rem; }
  .footer__btns li { flex: 1; }
  .footer__btns a { width: 100%; height: 4.8rem; font-size: 1.5rem; }
  .footer__pagetop { position: static; width: 4.8rem; height: 4.8rem; margin: 3.2rem 2.4rem 0 auto; }
  .footer__pagetop svg { width: 2.4rem; }
  .footer__bottom { height: auto; margin-top: 3.2rem; padding: 1.6rem 2.4rem 2rem; font-size: 1.1rem; line-height: 2rem; }
  .footer__policy { position: static; display: inline-block; margin-bottom: .4rem; }
}


/* ============================================================
   common.css との調整
   common.css の「a:hover で透過（opacity: .7）」「a:hover の下線を消す（!important）」
   「a の transition: .5s」を、ホバー演出をデザイン済みのパーツでだけ打ち消す。
   投稿本文など、それ以外のリンクは common.css の挙動のまま
   ============================================================ */
:is(.header__logo, .gnav__list a, .spaces__links a, .cta__btn, .service__card, .news__item, .news__all, .fnav a, .footer__logo, .footer__btns a, .footer__pagetop, .footer__policy):hover,
:is(.header__logo, .footer__logo, .cta__btn, .service__card, .news__item):hover :is(img, p) { opacity: 1; }
a:is(.pill, .gnav__contact) { transition: opacity .3s; }
a:is(.cta__btn, .footer__pagetop) { transition: background-color .3s, color .3s; }
@media (hover: hover) {
  :is(.spaces__links a, .news__all, .fnav__sub a, .fnav__services a, .footer__policy):hover { text-decoration: underline !important; }
}

/* ============================================================
   下層ページ（お知らせ一覧・詳細、よくある質問一覧、固定ページ、404）
   ============================================================ */
.subpage-head { padding: 18rem 0 8rem; background: var(--ink); }
.sec-head--title .ja { font-family: var(--serif); font-weight: 700; font-size: 4.2rem; line-height: 1.4; letter-spacing: .08em; }   /* 英字見出しのない固定ページ */
.subpage { padding: 10rem 0 14rem; }
.subpage.faq { padding-top: 10rem; }
.subpage .news__list,
.subpage .faq__list { max-width: 90.4rem; margin: 0 auto; }
.subpage__empty { font-size: 1.6rem; line-height: 2; letter-spacing: .05em; text-align: center; }
.subpage .pill { margin: 6rem auto 0; }
.faq__body { flex: 1; }
.faq__body p + p { margin-top: 1em; }

.entry { max-width: 90.4rem; margin: 0 auto; }
.entry__title { margin-top: 1.6rem; font-family: var(--serif); font-weight: 700; font-size: 3.2rem; line-height: 1.5; letter-spacing: .05em; }
.entry__thumb { margin-top: 4rem; }
.entry__thumb img { width: 100%; }
.entry__body { margin-top: 4rem; font-size: 1.6rem; line-height: 2; letter-spacing: .05em; }
.subpage > .inner > .entry__body { max-width: 90.4rem; margin: 0 auto; }
.entry__body > * + * { margin-top: 1.6em; }
.entry__body h2 { margin-top: 2.4em; padding-bottom: .6em; border-bottom: 1px solid var(--line); font-size: 2.4rem; font-weight: 700; line-height: 1.5; }
.entry__body h3 { margin-top: 2em; font-size: 2rem; font-weight: 700; line-height: 1.5; }
.entry__body ul { padding-left: 1.5em; }
.entry__body ul li { list-style: disc; }
.entry__body ol { padding-left: 1.5em; }
.entry__body ol li { list-style: decimal; }
.entry__body a { text-decoration: underline; text-underline-offset: .2em; }
.entry__body img { height: auto; }
.entry__nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 90.4rem; margin: 8rem auto 0; font-size: 1.4rem; }
.entry__prev, .entry__next { flex: 1; }
.entry__next { text-align: right; }
.entry__nav .pill { flex: none; width: 32rem; margin: 0; }

.nav-links { display: flex; justify-content: center; gap: 1rem; margin-top: 6rem; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 4rem; height: 4rem; padding: 0 1rem; border: 1px solid var(--line); font-family: var(--en); font-size: 1.6rem; }
.page-numbers.current { border-color: var(--ink); background: var(--ink); color: var(--white); }
.page-numbers.dots { border: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

@media (max-width: 1024px) {
  .subpage-head { padding: 12rem 0 4.8rem; }
  .sec-head--title .ja { font-size: 2.4rem; }
  .subpage, .subpage.faq { padding: 5.6rem 0 8rem; }
  .subpage .pill { margin-top: 4rem; }
  .entry__title { font-size: 2.2rem; }
  .entry__thumb, .entry__body { margin-top: 2.4rem; }
  .entry__body { font-size: 1.5rem; line-height: 1.9; }
  .entry__body h2 { font-size: 1.9rem; }
  .entry__body h3 { font-size: 1.7rem; }
  .entry__nav { flex-wrap: wrap; margin-top: 4.8rem; font-size: 1.3rem; }
  .entry__nav .pill { order: 3; width: 100%; }
}