/* テーマ「大胆」。値は tokens.css だけから取る。
   正本はページ全体の方向画像 directions/topalpha/ta-4-bold.png。寸法はそれを横1440pxに換算して測った値
   （目標の高さ：ヘッダー81・FV617・事業341・強み282・ご相談の例341・流れ225・私たちについて248・相談の帯147・フッター205）。
   ★パーツ画像の余白を padding に写さない。帯の高さは「中身＋方向画像で測った上下の差」で決まる。 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ds-footer); }  /* 画面より短いページ（404・送信後）で、フッターの下に白が出ないように */
body { margin: 0; background: var(--ds-white); color: var(--ds-ink); font-family: var(--ds-font-sans); font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; word-break: auto-phrase; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 12px 20px; background: var(--ds-white); }
:focus-visible { outline: 3px solid var(--ds-blue); outline-offset: 3px; }

.arrow { position: relative; display: inline-block; width: 16px; height: 2px; background: currentColor; flex: none; transition: transform .16s; }
.arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.chev { display: inline-block; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); flex: none; }
/* 下線つきの文字リンク（方向画像の「私たちについて ＞」「会社情報を見る ＞」） */
/* 押せる範囲は上に13px広げて高さ44px（見た目の位置は margin で戻す） */
.text-link { display: inline-flex; align-items: center; gap: 20px; padding: 13px 0 5px; margin-top: -13px; border-bottom: 1.5px solid currentColor; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; }
.text-link:hover .chev { transform: translateX(3px) rotate(45deg); }

/* 帯の横幅：1440px を超える画面では中身を中央に寄せ、写真と飾りだけ端まで伸ばす */
.band { --wide: max(0px, (100% - 1440px) / 2); padding-left: var(--wide); padding-right: var(--wide); }

/* ---------------------------------------------------------------- ヘッダー（方向：高さ81、ロゴ左61、右にオレンジの丸いボタン） */
.site-header { position: relative; z-index: 10; display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 84px; padding: 0 40px 0 52px; background: var(--ds-white); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* ロゴの印は仮（正式なロゴをもらったら差し替え）：黒とオレンジの三角を重ねた A */
.logo-mark { position: relative; width: 52px; height: 44px; flex: none; }
.logo-mark::before, .logo-mark::after { content: ""; position: absolute; bottom: 0; }
.logo-mark::before { left: 0; width: 34px; height: 44px; background: var(--ds-ink); clip-path: polygon(50% 0, 100% 0, 42% 100%, 0 100%); }
.logo-mark::after { left: 20px; width: 32px; height: 30px; background: var(--ds-orange); clip-path: polygon(46% 0, 100% 100%, 0 100%); }
.logo-text { display: grid; line-height: 1.15; }
.logo-en { font-size: 25px; font-weight: 900; letter-spacing: 0.02em; }
.logo-ja { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.logo--white { color: var(--ds-white); }
.logo--white .logo-mark::before { background: var(--ds-white); }
.nav { display: flex; justify-content: center; gap: 44px; padding-left: 80px; }
.nav a { font-size: 15px; font-weight: 700; text-decoration: none; letter-spacing: 0.04em; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--ds-orange); }
.cta-pill { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-width: 240px; height: 52px; padding: 0 30px; border-radius: var(--ds-radius-pill);
  background: var(--ds-orange); color: var(--ds-white); font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cta-pill:hover { background: var(--ds-orange-hover); }
.cta-pill:hover .arrow, .btn:hover .arrow { transform: translateX(4px); }
.menu-button { display: none; }

/* ---------------------------------------------------------------- ファーストビュー（方向：高さ617） */
.p-hero { position: relative; isolation: isolate; height: 640px; overflow: hidden; background: var(--ds-white); }
.p-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; }
.p-hero-body { position: relative; padding: 30px 0 0 max(42px, (100% - 1440px) / 2 + 42px); }
.p-hero-hand { margin-left: 170px; font-family: var(--ds-font-hand); font-size: 32px; line-height: 1.4; transform: rotate(-10deg) skewX(-10deg); transform-origin: left top; }
/* 方向の見出しは縦長の極太で、2行まとめて右上がりに傾いている（左下を軸に回すと、1行目が2行目より左に出るのも方向どおりになる） */
.p-hero-title { display: grid; justify-items: start; margin-top: 46px; font-size: min(124px, 8.6vw); font-weight: 900; line-height: 1.0; letter-spacing: -0.06em; white-space: nowrap; transform: rotate(-7deg) scale(1, 1.14) skewX(-6deg); transform-origin: left bottom; text-shadow: 0 0 24px var(--ds-white), 0 0 8px var(--ds-white); }
.p-hero-l1 { font-size: 1.2em; }
.p-hero-l2 { font-size: 1.04em; margin-left: 0.12em; }
.p-hero-lead { margin-top: 8px; font-size: 18px; font-weight: 500; line-height: 1.65; text-shadow: 0 0 10px var(--ds-white), 0 0 4px var(--ds-white); }
.p-hero-actions { display: flex; align-items: center; gap: 44px; margin-top: 26px; }
.p-hero-actions .text-link { background: color-mix(in srgb, var(--ds-white) 70%, transparent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 40px; height: 58px; border-radius: var(--ds-radius-pill); font-size: 17px; font-weight: 700; text-decoration: none; }
.btn--orange { min-width: 290px; background: var(--ds-orange); color: var(--ds-white); }
.btn--orange:hover { background: var(--ds-orange-hover); }
.p-hero-script { position: absolute; right: max(20px, (100% - 1440px) / 2 + 20px); top: 100px; z-index: 1; font-family: var(--ds-font-script); font-size: 118px; line-height: 0.9; color: var(--ds-white); transform: rotate(-17deg); text-shadow: 0 2px 12px color-mix(in srgb, var(--ds-card-shade) 30%, transparent); pointer-events: none; }
.p-hero-tag { position: absolute; left: max(83%, (100% - 1440px) / 2 + 1194px); top: 392px; display: grid; font-family: var(--ds-font-en); font-size: 11px; font-weight: 600; line-height: 1.72; letter-spacing: 0.3em; color: var(--ds-white); text-shadow: 0 1px 6px color-mix(in srgb, var(--ds-card-shade) 60%, transparent); }

/* ---------------------------------------------------------------- 左の見出し欄（どの帯も共通） */
.sec-head { align-self: center; padding-left: 61px; }
.sec-en { font-family: var(--ds-font-en); font-size: 30px; font-weight: 800; font-style: italic; line-height: 1.1; letter-spacing: 0.01em; }
.sec-title { margin-top: 2px; font-size: 25px; font-weight: 900; line-height: 1.35; letter-spacing: 0.02em; }
.sec-rule { display: block; width: 26px; height: 2px; margin: 16px 0 18px; background: currentColor; }
.sec-lead { font-size: 14.5px; font-weight: 500; line-height: 1.75; }
.sec-head .text-link { margin-top: 9px; }
.sec-head--dark { color: var(--ds-white); }
.p-strength .sec-en { font-size: 25px; white-space: nowrap; }

/* ---------------------------------------------------------------- 事業のカード（方向：帯341、見出し欄306、カード260×298、間10）
   写真は文字なし版から切ったもの。色の層と斜めの切り込みは CSS で重ねる。カードの中の寸法はカードの幅に比例（cqi） */
.p-service-cards { position: relative; isolation: isolate; display: grid; grid-template-columns: 306px minmax(0, 1fr); padding-top: 17px; padding-bottom: 22px;
  padding-right: calc(var(--wide) + 43px); background: linear-gradient(115deg, var(--ds-band) 0%, var(--ds-paper) 35%, var(--ds-band) 100%); }
.p-service-cards::before { content: ""; position: absolute; z-index: -1; left: max(150px, var(--wide) + 150px); bottom: 0; width: 160px; height: 96px; background: var(--ds-blue); clip-path: polygon(100% 0, 100% 34%, 22% 100%, 0 100%); }
.svc-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.svc-list > li { container-type: inline-size; }
.svc-card { --tone: var(--ds-blue); position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 260 / 298; padding: 0 7.3cqi 5.8cqi; border-radius: var(--ds-radius-card); overflow: hidden;
  /* 方向のカードは上半分に写真の主役（握手・画面）がはっきり見え、下へ向かって事業の色に沈む。
     写真は縦長なので、主役の高さを写真ごとに --pos で合わせる（parts.py の SVC_PHOTO_POS） */
  background: linear-gradient(205deg, transparent 12%, color-mix(in srgb, var(--tone) 70%, transparent) 50%, var(--tone) 74%), var(--photo) center var(--pos, 34%) / cover no-repeat, var(--ds-card-shade);
  color: var(--ds-white); text-decoration: none; }
.svc-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: color-mix(in srgb, var(--ds-card-shade) 22%, transparent); clip-path: polygon(100% 30%, 100% 100%, 40% 100%); }
.svc-card--orange { --tone: var(--ds-orange); }
.svc-card--dark { --tone: var(--ds-ink); }
.svc-no { font-family: var(--ds-font-en); font-size: 6.6cqi; font-weight: 600; line-height: 1; }
.svc-name { margin-top: 2.6cqi; font-size: 10.8cqi; font-weight: 900; line-height: 1.25; letter-spacing: -0.02em; white-space: nowrap; transform: scale(var(--fit, 1), 1); transform-origin: left top; }
.svc-text { margin-top: 3.4cqi; font-size: 5.4cqi; font-weight: 500; line-height: 1.75; white-space: nowrap; }
.svc-arrow { position: absolute; right: 5.4cqi; bottom: 5.4cqi; display: grid; place-items: center; width: 11.9cqi; height: 11.9cqi; border: 2px solid var(--ds-white); border-radius: 50%; }
.svc-arrow .arrow { width: 12px; }
.svc-card:hover .svc-arrow { background: var(--ds-orange); border-color: var(--ds-orange); }

/* ---------------------------------------------------------------- 強みの帯（方向：高さ282、黒地、斜めに切った写真4枚） */
.p-strength { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 282px; padding-right: 0; background: var(--ds-ink); color: var(--ds-white); }
.str-photos { position: relative; margin-right: calc(-1 * var(--wide)); padding-right: var(--wide);
  background: linear-gradient(0deg, color-mix(in srgb, var(--ds-card-shade) 40%, transparent), color-mix(in srgb, var(--ds-card-shade) 30%, transparent)), var(--photo) center / cover no-repeat; }
.str-photos { container-type: inline-size; }
.str-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 100%; }
/* 写真の切れ目は斜めなので、文字の書き出しも右へ行くほど左へ寄せる。
   書き出しと大きな言葉は写真の幅に比例させる（1150px のとき 73/64/50/34px と 36px。幅1382pxで「ワンストップ」がはみ出したため） */
.str-item { display: flex; flex-direction: column; padding: 42px 0 24px 6.35cqi; }
.str-item:nth-child(2) { padding-left: 5.57cqi; }
.str-item:nth-child(3) { padding-left: 4.35cqi; }
.str-item:nth-child(4) { padding-left: 2.96cqi; }
.str-no { font-family: var(--ds-font-en); font-size: 16px; font-weight: 600; line-height: 1; }
.str-title { margin-top: 12px; font-size: 19px; font-weight: 900; line-height: 1.3; color: var(--ds-yellow); }
.str-pre { margin-top: 26px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.str-big { margin-top: 6px; font-size: min(36px, 3.08cqi); font-weight: 900; line-height: 1.15; letter-spacing: -0.02em; color: var(--ds-yellow); white-space: nowrap; }
.str-post { margin-top: 8px; font-size: 18px; font-weight: 900; line-height: 1.3; }

/* ---------------------------------------------------------------- ご相談の例（方向の WORKS：帯341、見出し欄364、カード249×287） */
.p-consult { display: grid; grid-template-columns: 364px minmax(0, 1fr); padding-top: 27px; padding-bottom: 28px; padding-right: calc(var(--wide) + 51px);
  background: linear-gradient(125deg, var(--ds-paper) 0%, var(--ds-white) 45%, var(--ds-paper) 100%); }
.cs-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cs-card { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 287px; padding: 0 17px 16px; background: var(--ds-white); border-radius: var(--ds-radius-card);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-card-shade) 8%, transparent), 0 6px 18px color-mix(in srgb, var(--ds-card-shade) 6%, transparent); text-decoration: none; }
.cs-photo { display: block; height: 135px; margin: 0 -17px; border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0; background: var(--photo) center / cover no-repeat, var(--ds-paper); }
.cs-tag { align-self: flex-start; margin-top: -14px; padding: 0 14px; height: 28px; border-radius: var(--ds-radius-pill); font-size: 12px; font-weight: 700; line-height: 28px; color: var(--ds-white); background: var(--ds-blue); }
.cs-tag--orange { background: var(--ds-orange); }
.cs-tag--dark { background: var(--ds-ink); }
.cs-title { margin-top: 10px; font-size: 16.5px; font-weight: 900; line-height: 1.45; }
.cs-text { margin-top: 8px; padding-right: 24px; font-size: 12.5px; line-height: 1.75; color: var(--ds-ink-soft); }
.cs-arrow { position: absolute; right: 14px; bottom: 16px; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--ds-ink); border-radius: 50%; }
.cs-arrow .arrow { width: 11px; }
.cs-card:hover .cs-arrow { background: var(--ds-orange); border-color: var(--ds-orange); color: var(--ds-white); }

/* ---------------------------------------------------------------- ご依頼の流れ（方向：高さ225、空と山の写真に白い札4枚） */
.p-flow { position: relative; display: grid; grid-template-columns: 272px minmax(0, 830px) 1fr; align-items: center; min-height: 225px; padding-top: 30px; padding-bottom: 30px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-blue-deep) 55%, transparent) 0%, transparent 40%), var(--photo) center 40% / cover no-repeat, var(--ds-blue-deep); }
.fl-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.fl-step { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 165px; padding: 70px 14px 14px 22px; text-align: center; }
.fl-step::before { content: ""; position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, var(--ds-white) 94%, transparent); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.fl-step > * { position: relative; }
.fl-step:not(:last-child)::after { content: ""; position: absolute; right: 2px; top: 76px; width: 10px; height: 10px; border-top: 2px solid var(--ds-ink-soft); border-right: 2px solid var(--ds-ink-soft); transform: rotate(45deg); }
.fl-icon { position: absolute; left: 30px; top: 6px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ds-blue); color: var(--ds-white); }
.fl-step > .fl-icon, .fl-step > .fl-no { position: absolute; }
.fl-no { left: 106px; top: 28px; font-family: var(--ds-font-en); font-size: 14px; font-weight: 600; color: var(--ds-blue); }
.fl-title { font-size: 18px; font-weight: 900; line-height: 1.3; white-space: nowrap; }
.fl-text { margin-top: 10px; font-size: 13px; line-height: 1.75; color: var(--ds-ink-soft); }
.fl-hand { justify-self: end; align-self: start; margin-right: 70px; font-family: var(--ds-font-hand); font-size: 30px; line-height: 1.35; color: var(--ds-ink); transform: rotate(-12deg); }

/* ---------------------------------------------------------------- 私たちについて（方向：高さ248、右に斜めに切った写真） */
.p-about { position: relative; display: grid; grid-template-columns: 268px minmax(0, 560px) 1fr; min-height: 248px; overflow: hidden; background: var(--ds-white); }
.p-about .sec-head { padding-top: 32px; padding-bottom: 28px; }
.ab-body { align-self: center; padding: 20px 0; }
.ab-catch { font-family: var(--ds-font-hand); font-size: 31px; line-height: 1.35; letter-spacing: 0.02em; }
.ab-text { margin-top: 16px; font-size: 14px; line-height: 1.95; }
/* 写真は本文の列（268+560px）の右から始める。1440px 未満で写真を 590px のままにすると本文と手書き文字に重なった（1280px で確認） */
.ab-photo { position: absolute; top: 0; bottom: 0; right: 0; width: min(590px + var(--wide), 100% - 848px); }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%); }
.ab-photo::before { content: ""; position: absolute; z-index: 1; left: 0; bottom: 0; width: 120px; height: 70px; background: var(--ds-blue); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.ab-hand { position: absolute; z-index: 1; left: 30px; top: 70px; font-family: var(--ds-font-hand); font-size: 25px; line-height: 1.4; color: var(--ds-blue); transform: rotate(-10deg);
  text-shadow: 0 0 8px var(--ds-white), 0 0 3px var(--ds-white); }

/* ---------------------------------------------------------------- 相談の帯（方向：高さ147、夕焼けの街） */
.p-cta { --wide: max(0px, (100% - 1440px) / 2); position: relative; display: grid; grid-template-columns: 257px auto 1fr auto; align-items: center; gap: 0; min-height: 147px; padding: 14px calc(var(--wide) + 40px) 14px calc(var(--wide) + 54px); overflow: hidden; color: var(--ds-white);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-card-shade) 55%, transparent) 0%, color-mix(in srgb, var(--ds-card-shade) 25%, transparent) 60%, color-mix(in srgb, var(--ds-card-shade) 10%, transparent) 100%), var(--photo) center 55% / cover no-repeat, var(--ds-ink); }
.cta-hand { font-family: var(--ds-font-hand); font-size: 23px; line-height: 1.5; transform: rotate(-8deg); }
.cta-hand::after { content: ""; display: block; width: 150px; height: 2px; margin-top: 4px; background: var(--ds-white); transform: rotate(-4deg); }
.cta-title { font-size: 33px; font-weight: 900; line-height: 1.3; letter-spacing: 0.02em; }
.cta-text { margin-top: 8px; font-size: 14px; line-height: 1.8; }
.cta-button { justify-self: start; display: inline-flex; align-items: center; gap: 28px; min-width: 382px; height: 62px; margin-left: 56px; padding: 0 36px 0 0; border-radius: var(--ds-radius-pill);
  background: var(--ds-orange); color: var(--ds-white); font-size: 17px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.cta-button:hover { background: var(--ds-orange-hover); }
.cta-button:hover .arrow { transform: translateX(4px); }
.cta-badge { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 40px 0 -2px; border-radius: 50%; background: var(--ds-white); color: var(--ds-orange); font-size: 14px; font-weight: 900; line-height: 1.15; text-align: center; }
.cta-script { font-family: var(--ds-font-script); font-size: 42px; line-height: 0.95; transform: rotate(-24deg); white-space: nowrap; }

/* ---------------------------------------------------------------- フッター（方向：高さ205、黒地、ロゴ・5列・縦線・会社の情報） */
.site-footer { background: var(--ds-footer); color: var(--ds-white); }
.ft-inner { display: grid; grid-template-columns: 297px minmax(0, 1fr) auto; column-gap: 0; max-width: 1440px; margin: 0 auto; padding: 30px 61px 18px; }
.ft-inner .logo { align-self: start; }
.ft-nav { display: flex; padding-right: 36px; border-right: 1px solid color-mix(in srgb, var(--ds-white) 25%, transparent); }
.ft-col { display: grid; align-content: start; min-width: 128px; padding-right: 22px; font-size: 13px; line-height: 2.05; }
.ft-col a { color: color-mix(in srgb, var(--ds-white) 72%, transparent); text-decoration: none; white-space: nowrap; }
.ft-col a:hover { color: var(--ds-white); text-decoration: underline; }
.ft-col .ft-head { color: var(--ds-white); font-weight: 700; }
.ft-address { display: grid; align-content: start; padding-left: 36px; font-size: 13px; font-style: normal; line-height: 2; color: color-mix(in srgb, var(--ds-white) 78%, transparent); }
.ft-address strong { color: var(--ds-white); }
.ft-address a { display: inline-block; padding: 3px 0; margin: -3px 0; color: inherit; }  /* マウスの幅でも押せる高さ24px以上（見た目の行はそのまま） */
.ft-copy { grid-column: 1 / -1; justify-self: end; margin-top: 6px; font-size: 12px; color: color-mix(in srgb, var(--ds-white) 70%, transparent); }
.nowrap { white-space: nowrap; }
.mobile-menu[hidden] { display: none; }

/* 1200〜1439px：フッターの5列が住所に重なった（1280px で「個人情報の取り扱い」が住所の上に出た）。ロゴの列を詰め、列の最小幅を外す */
@media (max-width: 1439px) {
  .ft-inner { grid-template-columns: 236px minmax(0, 1fr) auto; column-gap: 24px; padding-left: 40px; padding-right: 40px; }
  .ft-inner .logo-text { white-space: nowrap; }
  .ft-nav { justify-content: space-between; padding-right: 24px; }
  .ft-col { min-width: 0; padding-right: 18px; }
  .ft-address { padding-left: 24px; }
}

/* ---------------------------------------------------------------- 横が狭いとき（スマホの正本に合わせるのは次の段階。ここでは崩れと横スクロールを出さない） */
/* menu.js が 1200px 以上でメニューを閉じるので、境目はそれに合わせて 1199px */
@media (max-width: 1199px) {
  .nav { display: none; }
  .menu-button { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-left: 12px; border: 0; background: none; cursor: pointer; }
  .menu-button .bars, .menu-button .bars::before, .menu-button .bars::after { display: block; width: 24px; height: 2px; background: var(--ds-ink); content: ""; }
  .menu-button .bars { position: relative; }
  .menu-button .bars::before { position: absolute; top: -7px; }
  .menu-button .bars::after { position: absolute; top: 7px; }
  /* ★グリッドの欄で並べていたときは、ナビと相談ボタンを消すとハンバーガーが「1fr の欄の左端」＝ロゴの真横に寄った。
     横並び（flex）にしてロゴの右を空け、ハンバーガーは常に右端に置く */
  .site-header { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 24px; }
  .site-header > .logo { margin-right: auto; }
  .site-header > .cta-pill { justify-self: end; min-width: 0; }
  .mobile-menu { position: fixed; inset: 0; z-index: 50; padding: 20px 24px; background: var(--ds-white); overflow-y: auto; }
  .mobile-menu-top { display: flex; justify-content: space-between; align-items: center; }
  .mobile-menu .close { position: relative; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; }
  .mobile-menu .close::before, .mobile-menu .close::after { content: ""; position: absolute; left: 12px; top: 23px; width: 24px; height: 2px; background: var(--ds-ink); transform: rotate(45deg); }
  .mobile-menu .close::after { transform: rotate(-45deg); }
  .mobile-menu ul { margin: 24px 0; }
  .mobile-menu > .cta-pill { width: 100%; }
  .mobile-menu li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--ds-rule); font-size: 17px; font-weight: 700; text-decoration: none; }
  .p-service-cards, .p-strength, .p-consult, .p-flow, .p-about { grid-template-columns: 1fr; padding: var(--space-section) 20px; row-gap: var(--space-block); }
  .sec-head { padding-left: 4px; }
  .svc-list, .cs-list, .str-list, .fl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .str-photos { margin-right: -20px; padding: 0; }
  .str-item, .str-item:nth-child(n) { padding: 28px 16px 24px 24px; }
  .str-big { font-size: min(36px, 6.2cqi); }
  .fl-list { row-gap: 12px; }
  .fl-hand { justify-self: center; margin: 0; }
  .ab-photo { position: relative; width: auto; height: 260px; margin: 0 -20px calc(-1 * var(--space-section)); }
  .ab-photo img { clip-path: none; }
  /* 縦に積むと、区画の padding と見出し・本文それぞれの上下の余白が足し算になり、字の無い行が 60px を超えていた */
  .p-about .sec-head { padding-top: 0; padding-bottom: 0; }
  .ab-body { padding: 0; }
  .p-cta { grid-template-columns: 1fr; row-gap: 18px; padding: var(--space-section) 20px; }
  .cta-hand { justify-self: start; margin-bottom: 14px; transform: rotate(-6deg); transform-origin: left bottom; }  /* 傾けた分が見出しに重なっていた */
  .cta-button { margin-left: 0; min-width: 0; }
  .cta-script { display: none; }
  .ft-inner { grid-template-columns: 1fr; row-gap: 24px; padding: 32px 20px; }
  .ft-nav { flex-wrap: wrap; border-right: 0; padding-right: 0; }
  .ft-address { padding-left: 0; }
  .ft-copy { justify-self: start; }
  .p-hero-tag { display: none; }
  .fl-step:not(:last-child)::after { display: none; }  /* 2列・1列では「次へ」の向きが合わない */
  .fl-hand { color: var(--ds-white); text-shadow: 0 1px 8px color-mix(in srgb, var(--ds-card-shade) 70%, transparent); }
  .ft-col a { padding: 8.5px 0; line-height: 27px; }  /* 指で押す幅では1行44px */
  .ft-address a { padding: 9px 0; margin: 0; }  /* 電話番号も44px。上下の行に重ねず行を広げる */
}

/* ---------------------------------------------------------------- ファーストビュー（スマホ・タブレット）
   1100px 以下（1024px でも PC の組み方では説明文が握手の写真に重なった）。正本は images/themes/tp-2-hero-sp-1.png：上に手書きと大見出し、その下に写真、写真の下の白地に説明文とボタン。
   写真の上に文字を重ねない（人物の顔に重なって読めなかった）。 */
@media (max-width: 1100px) {
  .p-hero { display: flex; flex-direction: column; height: auto; padding-bottom: 20px; }
  .p-hero-body { display: contents; }
  .p-hero-hand { order: 1; margin: 22px 0 0 34px; font-size: clamp(22px, 6vw, 34px); }
  .p-hero-title { order: 2; position: relative; z-index: 1; margin: 6px 0 0 calc(4.5vw + 3px); font-size: min(13.4vw, 104px);
    line-height: 1.02; letter-spacing: -0.05em; transform: scale(1, 1.2) skewX(-9deg); transform-origin: left top; }
  .p-hero-l1, .p-hero-l2 { font-size: 1em; margin-left: 0; }  /* スマホの正本 tp-2 の見出しは傾けない（PC の右上がりは縦積みでは写真にかぶる） */  /* 斜体の傾き分だけ左に余白（字の大きさに比例） */
  .p-hero-bg { order: 3; position: relative; inset: auto; z-index: 0; height: min(92vw, 440px); margin-top: 6vw; object-position: 82% 20%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  /* 筆記体は写真の右下に重ねる。上へ引き上げた分と自分の高さ（2行×0.9）の差を下の余白で戻し、説明文を写真に潜らせない */
  .p-hero-script { order: 4; position: relative; right: auto; top: auto; align-self: flex-end; margin: calc(-1 * min(46vw, 250px)) 5vw max(0px, min(46vw, 250px) - min(30.6vw, 198px)) 0; font-size: min(17vw, 110px); line-height: 0.9; }
  .p-hero-lead { order: 5; position: relative; z-index: 1; margin: 26px 20px 0; font-size: 15px; text-shadow: none; }
  .p-hero-actions { order: 6; flex-direction: column; align-items: stretch; gap: 12px; margin: 22px 20px 0; }
  .btn--orange { min-width: 0; height: 56px; padding: 0 28px; justify-content: space-between; }
  .btn--orange::before { content: ""; width: 16px; }
  /* 「私たちについて」はスマホの正本どおり枠つきのボタンにする */
  .p-hero-actions .text-link { justify-content: space-between; height: 56px; margin: 0; padding: 0 28px; border: 1.5px solid var(--ds-ink); border-radius: var(--ds-radius-pill); background: var(--ds-white); font-size: 16px; }
  .p-hero-actions .text-link::before { content: ""; width: 8px; }
}

@media (max-width: 640px) {
  .site-header { height: 68px; padding: 0 8px 0 16px; }
  .logo-mark { transform: scale(0.8); transform-origin: left center; margin-right: -10px; }
  .logo-en { font-size: 21px; }
  .logo-ja { font-size: 12px; }
  .site-header > .cta-pill { display: none; }
  .p-service-cards, .p-strength, .p-consult, .p-flow, .p-about { padding: var(--space-section) 16px; row-gap: var(--space-block); }
  .p-service-cards::before { display: none; }
  /* 事業のカード：1列。縦長のままだと4枚で1600pxになるので、横長にして文字は px で持つ */
  .svc-list, .cs-list, .fl-list { grid-template-columns: 1fr; }
  .svc-card { aspect-ratio: auto; min-height: 236px; padding: 0 20px 22px; }
  .svc-no { font-size: 16px; }
  .svc-name { margin-top: 6px; font-size: 26px; transform: none; }
  .svc-text { margin-top: 10px; padding-right: 44px; font-size: 14px; white-space: normal; }
  .svc-text br { display: none; }
  .svc-arrow { width: 38px; height: 38px; right: 16px; bottom: 20px; }
  /* 強みの帯：1列だと縦に長すぎるので2列 */
  .str-photos { margin-right: -16px; margin-left: -16px; }
  .str-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .str-item, .str-item:nth-child(n) { padding: 20px 10px 20px 16px; }
  .str-no { font-size: 14px; }
  .str-title { margin-top: 8px; font-size: 14px; }
  .str-pre { margin-top: 14px; font-size: 13px; }
  .str-big { margin-top: 4px; font-size: 6.2cqi; }
  .str-post { margin-top: 4px; font-size: 14px; }
  /* 流れ：1列。丸いアイコンを左、文字を右に */
  .fl-step { align-items: flex-start; min-height: 0; padding: 16px 18px 16px 90px; text-align: left; }
  .fl-step::before { clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%); }
  .fl-step > .fl-icon { left: 20px; top: 50%; width: 54px; height: 54px; transform: translateY(-50%); }
  .fl-step > .fl-no { position: relative; left: auto; top: auto; }  /* static にすると白い札（::before）の下に潜って見えなくなる */
  .fl-title { margin-top: 2px; }
  .fl-text { margin-top: 4px; }
  .fl-text br { display: none; }
  .fl-hand { font-size: 26px; }
  .ab-photo { margin: 0 -16px calc(-1 * var(--space-section)); }
  .p-cta { padding: var(--space-section) 16px; }
  .cta-button { width: 100%; padding-right: 22px; gap: 14px; font-size: 16px; }
  .cta-badge { margin-right: 6px; }
  .svc-text, .cs-title, .cs-text, .ab-text, .sec-lead, .cta-text { white-space: normal; }
  .ab-text br, .cta-text br { display: none; }
  .ft-inner { padding: 28px 16px; }
}

/* =====================================================================================================
   下層ページ（方向画像 ta-4-bold のトーン：太いイタリックの英字見出し・斜めの帯・オレンジと青）
   ★帯は白と灰色（--ds-band）を交互にし、区画の境目を地の色で見せる。余白は --space-* の段階で持つ（検査の閾値に合わせて削らない）。
   ★押せるものは高さ44px以上（文中のリンクを除く）。見た目の行間を変えたくない所は padding を広げて margin で戻す。
   ===================================================================================================== */
.lx { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.lx--narrow { max-width: 900px; }
/* ★白い区画の端を灰青に塗って「空白の帯」の検査を通した時期があった。空白は空白のまま残るので差し戻した。
   空白は塗らずに詰める（検査は「インクが無い行」で数えるので、塗っても通らない） */
.lx-band, .p-service-rows, .p-toc, .p-article, .p-points, .p-thanks, .p-page-hero, .p-article-head { background: var(--ds-white); }
/* 区画の上下は --space-section（PC 80／タブレット 64／スマホ 52）。★以前ここを 16px にして「ぎちぎち」になった
   （空白の検査が60pxで区画の間の呼吸まで捕まえていたのに、検査の側でなく余白を詰めて合わせた）。
   白い区画が続くのを避けるのは、隣り合う区画の地の色（白／--ds-band）を交互にすることで行う */
.lx-band { padding: var(--space-section) 0; }
.lx-band--gray { background: var(--ds-band); }
.lx-band--ink { background: var(--ds-ink); color: var(--ds-white); }
.lx-band--blue { background: var(--ds-blue); color: var(--ds-white); }
.lx-en { font-family: var(--ds-font-en); font-size: 30px; font-weight: 800; font-style: italic; line-height: 1.1; letter-spacing: 0.01em; }
.lx-head { margin-bottom: var(--space-block); }
.lx-title { margin-top: 2px; font-size: 26px; font-weight: 900; line-height: 1.4; }
.lx-lead { font-size: 15px; line-height: 1.8; }
.lx-head .text-link { margin-top: 12px; }
.lx-head--row { display: grid; grid-template-columns: auto 1fr auto; column-gap: 24px; align-items: end; }
.lx-head--row .sec-rule { display: none; }
.lx-head--row .lx-en { grid-column: 1 / -1; }
.lx-head--row .text-link { grid-column: 3; justify-self: end; margin: 0; }
.lx-head--center { text-align: center; }
.lx-head--center .sec-rule { margin-left: auto; margin-right: auto; }
.lx-head--dark { color: var(--ds-white); }
.two-col { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 56px; }
.two-col > .lx-head { margin-bottom: 0; }
.note { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--ds-muted); }
.lx-band--ink .note, .lx-band--blue .note { color: inherit; }
.btn--sm { min-width: 0; height: 52px; padding: 0 28px; gap: 20px; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 14px; border: 1.5px solid var(--ds-ink); border-radius: var(--ds-radius-pill); font-size: 13px; font-weight: 700; line-height: 1.5; }
.chips--light li { border-color: var(--ds-white); }
.chev-down { display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }

/* 斜めの帯（ページの頭・相談の帯などの飾り） */
.ph-stripe { position: absolute; z-index: 0; pointer-events: none; }
.ph-stripe--o { left: -40px; bottom: 26px; width: 360px; height: 56px; background: var(--ds-orange); clip-path: polygon(0 55%, 100% 0, 86% 36%, 0 100%); }
.ph-stripe--b { left: -40px; bottom: -10px; width: 460px; height: 80px; background: var(--ds-blue); clip-path: polygon(0 70%, 100% 0, 80% 45%, 0 100%); }

/* ---------------------------------------------------------------- 下層のファーストビュー */
.p-page-hero { position: relative; isolation: isolate; min-height: 340px; overflow: hidden; }
.ph-photo { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 48%; background: linear-gradient(90deg, color-mix(in srgb, var(--ds-blue) 25%, transparent), transparent 40%), var(--photo) center / cover no-repeat;
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%); }
.ph-photo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 44%; background: var(--ds-orange); clip-path: polygon(62% 0, 100% 0, 38% 100%, 0 100%); opacity: .92; }
.ph-body { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 22px 61px 104px; }  /* 下の斜めの帯（高さ約90px）が説明文に重ならない余白 */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; font-size: 13px; line-height: 1.5; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px 0 4px; border-top: 1.5px solid var(--ds-muted); border-right: 1.5px solid var(--ds-muted); transform: rotate(45deg); }
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-weight: 700; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ds-muted); }
.ph-en { margin-top: 8px; font-family: var(--ds-font-en); font-size: min(92px, 7.4vw); font-weight: 900; font-style: italic; line-height: 0.95; letter-spacing: -0.02em; white-space: nowrap; }
.ph-no { margin-right: 18px; font-size: 0.5em; color: var(--ds-orange); vertical-align: 0.5em; }
.ph-title { margin-top: 12px; font-size: 36px; font-weight: 900; line-height: 1.3; letter-spacing: 0.02em; }
.ph-lead { max-width: 560px; margin-top: 14px; font-size: 15.5px; font-weight: 500; line-height: 1.85; }

/* ページ内の目次・事業の切り替え・コラムの分野（横に並ぶ丸いボタン） */
.p-anchor-nav, .p-service-switch, .p-column-filter { background: var(--ds-ink); }
.p-anchor-nav ul, .p-service-switch ul, .p-column-filter ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1240px; margin: 0 auto; padding: 16px 40px; }
.p-anchor-nav a, .p-service-switch a, .p-column-filter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border: 1.5px solid color-mix(in srgb, var(--ds-white) 60%, transparent); border-radius: var(--ds-radius-pill);
  color: var(--ds-white); font-size: 14px; font-weight: 700; text-decoration: none; }
.p-anchor-nav a:hover, .p-service-switch a:hover, .p-column-filter a:hover { border-color: var(--ds-white); }
.p-service-switch a[aria-current], .p-column-filter a[aria-current] { background: var(--ds-orange); border-color: var(--ds-orange); }
.sw-no { margin-right: 10px; font-family: var(--ds-font-en); font-style: italic; font-weight: 800; color: var(--ds-yellow); }
.p-service-switch a[aria-current] .sw-no { color: var(--ds-white); }

/* ---------------------------------------------------------------- 事業内容の一覧 */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: center; }
.intro-catch { margin-top: 10px; font-size: 32px; font-weight: 900; line-height: 1.5; }
.intro-body p + p { margin-top: 14px; }
.intro-body { font-size: 15.5px; line-height: 1.95; }
.pg-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pg-item { position: relative; display: grid; align-content: start; gap: 8px; min-height: 220px; padding: 26px 22px; overflow: hidden; border-radius: var(--ds-radius-card); background: var(--ds-blue); color: var(--ds-white); }
.pg-item--1 { background: var(--ds-orange); }
.pg-item--3 { background: var(--ds-ink); }
.pg-item::after { content: ""; position: absolute; right: -30px; bottom: -20px; width: 150px; height: 90px; background: color-mix(in srgb, var(--ds-white) 14%, transparent); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }
.pg-no { font-family: var(--ds-font-en); font-size: 34px; font-weight: 900; font-style: italic; line-height: 1; }
.pg-name { font-size: 22px; font-weight: 900; line-height: 1.35; }
.pg-text { font-size: 13.5px; line-height: 1.8; }
.p-service-rows { padding: var(--space-section) 0; }
.sr-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 56px; align-items: center; padding: 22px 0; scroll-margin-top: 20px; }
.sr-row + .sr-row { border-top: 1px solid var(--ds-rule); }
.sr-row--flip .sr-photo { order: 2; }
.sr-photo { position: relative; }
.sr-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); border-radius: var(--ds-radius-card); }
.sr-row--flip .sr-photo img { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.sr-en { position: absolute; left: 16px; bottom: 10px; font-family: var(--ds-font-en); font-size: 40px; font-weight: 900; font-style: italic; line-height: 1; color: var(--ds-white); text-shadow: 0 2px 14px color-mix(in srgb, var(--ds-card-shade) 60%, transparent); }
.sr-no { font-family: var(--ds-font-en); font-size: 18px; font-weight: 800; font-style: italic; color: var(--ds-orange); }
.sr-name { font-size: 34px; font-weight: 900; line-height: 1.3; }
.sr-catch { margin-top: 10px; font-size: 19px; font-weight: 900; line-height: 1.6; color: var(--ds-blue); }
.sr-row--orange .sr-catch { color: var(--ds-orange-hover); }  /* 明るいオレンジは白地で2.8しかなかった */
.sr-row--dark .sr-catch { color: var(--ds-ink-soft); }
.sr-lead { margin-top: 12px; font-size: 15px; line-height: 1.9; }
.sr-text .chips { margin: 16px 0 22px; }
.p-marquee { overflow: hidden; background: var(--ds-orange); color: var(--ds-white); }
.mq-track { display: flex; gap: 48px; width: max-content; padding: 14px 0; font-family: var(--ds-font-en); font-size: 42px; font-weight: 900; font-style: italic; line-height: 1.1; white-space: nowrap; }
.mq-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--ds-white); }
@media (prefers-reduced-motion: no-preference) {
  .mq-track { animation: mq 40s linear infinite; }
  @keyframes mq { to { transform: translateX(-50%); } }
}
.st-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: st; }
.st-item { position: relative; display: grid; align-content: start; gap: 8px; padding: 16px 22px 14px; background: var(--ds-white); clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%); }
.st-item:last-child { clip-path: none; }
.st-no { font-family: var(--ds-font-en); font-size: 28px; font-weight: 900; font-style: italic; line-height: 1; color: var(--ds-blue); }
.st-title { font-size: 18px; font-weight: 900; }
.st-text { padding-right: 18px; font-size: 13.5px; line-height: 1.8; color: var(--ds-ink-soft); }

/* ---------------------------------------------------------------- 事業ごとのページ */
.ms-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: center; }
.ms-catch { margin: 10px 0 18px; font-size: 32px; font-weight: 900; line-height: 1.45; }
.ms-text p:not(.lx-en) { font-size: 15.5px; line-height: 1.95; }
.ms-text p + p { margin-top: 12px; }
.ms-photo { position: relative; margin: 0; }
.ms-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
.ms-photo::before { content: ""; position: absolute; z-index: 1; left: 0; bottom: -12px; width: 160px; height: 60px; background: var(--ds-orange); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }
.pb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 980px; margin: 0 auto; }
.pb-list li, .cl-list li { position: relative; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 16px 22px; background: var(--ds-white); border-left: 5px solid var(--ds-orange); font-size: 15.5px; font-weight: 700; line-height: 1.6; }
.pb-check { flex: none; width: 22px; height: 12px; margin-top: -6px; border-left: 3px solid var(--ds-orange); border-bottom: 3px solid var(--ds-orange); transform: rotate(-45deg); }
.pb-bridge { margin-top: 28px; font-size: 20px; font-weight: 700; text-align: center; }
.pb-bridge strong { font-weight: 900; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--ds-yellow) 80%, transparent) 62%); }
.cap-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cap-item { display: grid; align-content: start; gap: 10px; padding: 26px 22px; border: 1px solid color-mix(in srgb, var(--ds-white) 22%, transparent); border-radius: var(--ds-radius-card); }
.cap-no { font-family: var(--ds-font-en); font-size: 44px; font-weight: 900; font-style: italic; line-height: 1; color: var(--ds-yellow); }
.cap-title { font-size: 19px; font-weight: 900; }
.cap-text { font-size: 14px; line-height: 1.85; color: color-mix(in srgb, var(--ds-white) 86%, transparent); }
.rows > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--ds-rule); }
.rows > div:first-child { border-top: 2px solid var(--ds-ink); }
.p-company-table .rows { margin-bottom: 0; }  /* 表の最後の行の下の余白＋帯の余白＋次の帯の余白が足し算で 65px になっていた */
.rows dt { font-weight: 900; }
.rows dd { margin: 0; line-height: 1.8; }
.kw-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; align-items: center; }
.kw-title { font-size: 22px; font-weight: 900; }
.faq-list { display: grid; gap: 10px; }
.faq-item { background: var(--ds-paper); border-radius: var(--ds-radius-card); }
.lx-band--gray .faq-item { background: var(--ds-white); }
.faq-item summary { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 20px; font-weight: 900; line-height: 1.6; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ds-blue); color: var(--ds-white); font-family: var(--ds-font-en); font-weight: 800; }
.faq-q--a { background: var(--ds-orange); }
.faq-text { flex: 1; }
.faq-toggle { position: relative; flex: none; width: 16px; height: 16px; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; transition: transform .2s; }
.faq-toggle::after { transform: rotate(90deg); }
.faq-item[open] .faq-toggle::after { transform: rotate(0); }
.faq-a { display: flex; gap: 14px; padding: 0 20px 12px; line-height: 1.85; }
/* 閉じた質問の答えは、はっきり表示しないことにする（Chrome は閉じた答えにも箱を残し、ページの下の方に重ねて置いていた） */
.faq-item:not([open]) .faq-a { display: none; }
.col-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.col-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--ds-white); border-radius: var(--ds-radius-card); text-decoration: none;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-card-shade) 8%, transparent), 0 6px 18px color-mix(in srgb, var(--ds-card-shade) 6%, transparent); }
.col-photo { display: block; aspect-ratio: 16 / 9; background: var(--photo) center / cover no-repeat, var(--ds-paper); }
.col-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px 0; font-size: 12.5px; }
.col-cat { padding: 3px 12px; border-radius: var(--ds-radius-pill); background: var(--ds-blue); color: var(--ds-white); font-weight: 700; }
.col-cat--ads { background: var(--ds-orange); }
.col-cat--system { background: var(--ds-ink); }
.col-min { color: var(--ds-muted); }
.col-title { padding: 10px 20px 0; font-size: 17px; font-weight: 900; line-height: 1.55; }
.col-lead { padding: 8px 20px 12px; font-size: 13.5px; line-height: 1.8; color: var(--ds-ink-soft); }
.col-card:hover .col-title { text-decoration: underline; }
.lc-title { margin-bottom: 14px; font-size: 22px; font-weight: 900; line-height: 1.4; }
.lc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lc-card { position: relative; display: flex; align-items: flex-end; gap: 14px; min-height: 150px; padding: 18px 22px; overflow: hidden; border-radius: var(--ds-radius-card); color: var(--ds-white); text-decoration: none;
  background: linear-gradient(200deg, color-mix(in srgb, var(--ds-blue) 25%, transparent) 10%, color-mix(in srgb, var(--ds-card-shade) 82%, transparent) 75%), var(--photo) center / cover no-repeat, var(--ds-ink); }
.lc-no { font-family: var(--ds-font-en); font-size: 18px; font-weight: 800; font-style: italic; color: var(--ds-yellow); }
.lc-name { flex: 1; font-size: 21px; font-weight: 900; }
.lc-arrow { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--ds-white); border-radius: 50%; }
.lc-card:hover .lc-arrow { background: var(--ds-orange); border-color: var(--ds-orange); }

/* 相談の帯（下層） */
.p-cta-simple { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-section) 0; background: linear-gradient(115deg, var(--ds-blue-deep) 0%, var(--ds-blue) 100%); color: var(--ds-white); }
.p-cta-simple .ph-stripe--o { left: auto; right: -40px; bottom: 16px; transform: scaleX(-1); }
.cs2-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: center; }
.cs2-title { margin-top: 6px; font-size: 28px; font-weight: 900; line-height: 1.45; }
.cs2-text { margin-top: 8px; font-size: 14.5px; line-height: 1.8; }
.cs2-actions { display: grid; gap: 12px; justify-items: stretch; }
.cs2-tel { display: grid; justify-items: center; padding: 6px 0; color: var(--ds-white); text-decoration: none; }
.cs2-tel span { font-size: 12.5px; }
.cs2-tel strong { font-family: var(--ds-font-en); font-size: 26px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; }

/* ---------------------------------------------------------------- 会社情報 */
.p-statement { position: relative; padding: var(--space-section) 0; background: linear-gradient(90deg, var(--ds-white) 0%, color-mix(in srgb, var(--ds-white) 88%, transparent) 42%, color-mix(in srgb, var(--ds-white) 0%, transparent) 70%), var(--photo) right 30% / cover no-repeat, var(--ds-paper); }
.stm-hand { font-family: var(--ds-font-hand); font-size: 24px; line-height: 1.4; color: var(--ds-blue); transform: rotate(-6deg); transform-origin: left bottom; }
.stm-title { margin-top: 18px; font-size: 38px; font-weight: 900; line-height: 1.45; }
.rep-card { position: relative; overflow: hidden; padding: 34px 36px; background: var(--ds-white); border-left: 6px solid var(--ds-orange); }
.rep-mark { position: absolute; right: -20px; bottom: -10px; width: 180px; height: 70px; background: var(--ds-blue); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); opacity: .9; }
.rep-role { font-size: 14px; font-weight: 700; color: var(--ds-muted); }
.rep-name { margin-top: 6px; font-size: 32px; font-weight: 900; letter-spacing: 0.12em; }
.val-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.val-item { display: grid; align-content: start; gap: 6px; padding: 26px 24px; border-top: 3px solid var(--ds-orange); background: color-mix(in srgb, var(--ds-white) 6%, transparent); }
.val-no { font-family: var(--ds-font-en); font-size: 15px; font-weight: 800; color: var(--ds-yellow); }
.val-en { font-family: var(--ds-font-en); font-size: 28px; font-weight: 900; font-style: italic; line-height: 1.1; }
.val-title { margin-top: 4px; font-size: 19px; font-weight: 900; }
.val-text { font-size: 14px; line-height: 1.85; color: color-mix(in srgb, var(--ds-white) 86%, transparent); }
.purpose-list { display: grid; gap: 8px; }
.purpose-list li { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: var(--ds-band); font-weight: 700; }
.purpose-list .pp-no { flex: none; }
.purpose-list .pp-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ds-ink); color: var(--ds-white); font-family: var(--ds-font-en); font-size: 14px; font-weight: 800; }
.tl-list li { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; padding: 14px 0; border-top: 2px solid var(--ds-ink); border-bottom: 1px solid var(--ds-rule); }
.tl-list time { padding-left: 12px; border-left: 4px solid var(--ds-orange); font-family: var(--ds-font-en); font-weight: 800; }  /* オレンジの字は灰色の地でコントラスト2.9しかなかった */
.acc-card { position: relative; overflow: hidden; padding: 16px 34px 40px; background: var(--ds-band); }
.acc-card > :not(.ph-stripe) { position: relative; z-index: 1; }
.acc-card .ph-stripe--b { left: auto; right: -40px; bottom: -10px; transform: scaleX(-1); width: 300px; }
.acc-name { font-size: 18px; font-weight: 900; }
.acc-addr { margin-top: 8px; font-size: 16px; line-height: 1.8; }
.acc-contact { margin: 16px 0 22px; }
.acc-contact div { display: flex; align-items: center; gap: 16px; }
.acc-contact dt { width: 4em; font-weight: 700; }
.acc-contact dd { margin: 0; }
.acc-contact a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------------------------------------------------------------- コラム・記事 */
.cf-list { margin-top: 14px; }
.col-card--big { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.col-card--big .col-photo { grid-row: 1 / 5; aspect-ratio: auto; min-height: 300px; }
.col-card--big .col-meta { padding-top: 24px; align-self: end; }
.col-card--big .col-title { padding: 12px 32px 0; font-size: 24px; }
.col-card--big .col-lead { padding: 12px 32px 20px; font-size: 15px; }
.col-card--big .col-meta { padding-left: 32px; }
.p-article-head { position: relative; isolation: isolate; overflow: hidden; padding: 16px 0 56px; }
.p-article-head .ph-stripe { z-index: -1; }
.ah-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 48px; align-items: center; }
.p-article-head .col-meta { padding: 16px 0 0; }
.ah-title { margin-top: 14px; font-size: 32px; font-weight: 900; line-height: 1.5; }
.ah-lead { margin-top: 14px; font-size: 15.5px; line-height: 1.9; }
.ah-photo { aspect-ratio: 16 / 10; background: var(--photo) center / cover no-repeat; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
.p-toc { padding: 40px 0 0; }
.toc-title { font-size: 15px; font-weight: 900; }
.p-toc ol { margin-top: 8px; padding: 14px 24px; background: var(--ds-band); border-left: 5px solid var(--ds-blue); }
.p-toc a { display: flex; align-items: center; gap: 14px; min-height: 44px; font-weight: 700; text-decoration: none; }
.p-toc a:hover { text-decoration: underline; }
.p-toc a span { font-family: var(--ds-font-en); font-style: italic; font-weight: 800; color: var(--ds-blue); }
.p-article { padding: 28px 0 8px; }
.article-body { font-size: 16px; line-height: 2; }
.article-body h2 { display: flex; align-items: baseline; gap: 14px; margin: 40px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ds-ink); font-size: 23px; font-weight: 900; line-height: 1.5; scroll-margin-top: 20px; }
.article-body h2:first-child { margin-top: 0; }
.article-body h2 span { font-family: var(--ds-font-en); font-size: 20px; font-style: italic; font-weight: 900; color: var(--ds-orange); }
.article-body p + p { margin-top: 14px; }
.article-body ul { margin: 12px 0 0; padding-left: 1.4em; list-style: disc; }
.article-body li + li { margin-top: 4px; }
.p-points { padding: 20px 0 20px; }
.pt-box { position: relative; padding: 26px 30px; border: 2px solid var(--ds-orange); border-radius: var(--ds-radius-card); }
.pt-title { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 900; }
.pt-title span { padding: 2px 12px; background: var(--ds-orange); color: var(--ds-white); font-family: var(--ds-font-en); font-style: italic; font-size: 14px; }
.pt-box ul { margin-top: 12px; }
.pt-box li { position: relative; padding-left: 26px; line-height: 1.9; font-weight: 700; }
.pt-box li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 12px; height: 6px; border-left: 2.5px solid var(--ds-orange); border-bottom: 2.5px solid var(--ds-orange); transform: rotate(-45deg); }
.p-article-nav { padding: 18px 0; background: var(--ds-band); }
.an-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; }
.an-link { display: grid; gap: 4px; padding: 16px 20px; background: var(--ds-white); border-radius: var(--ds-radius-card); text-decoration: none; }
.an-link--next { text-align: right; }
.an-label { font-size: 12.5px; font-weight: 700; color: var(--ds-orange); }
.an-link strong { font-size: 14.5px; line-height: 1.6; }
.an-link:hover strong { text-decoration: underline; }
.an-all { display: grid; place-items: center; min-height: 44px; padding: 0 24px; border-radius: var(--ds-radius-pill); background: var(--ds-ink); color: var(--ds-white); font-weight: 700; text-decoration: none; white-space: nowrap; }
.p-article-head--news { padding-bottom: 8px; }
.p-article-head--news + .p-article { padding-top: 12px; }

/* ---------------------------------------------------------------- お知らせ */
.nl-list { border-top: 2px solid var(--ds-ink); }
.nl-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 20px; align-items: center; min-height: 72px; padding: 14px 4px; border-bottom: 1px solid var(--ds-rule); text-decoration: none; }
.nl-row time, .p-article-head time { font-family: var(--ds-font-en); font-weight: 700; }
.nl-tag { padding: 2px 12px; border-radius: var(--ds-radius-pill); background: var(--ds-blue); color: var(--ds-white); font-size: 12px; font-weight: 700; }
.nl-title { font-weight: 700; }
.nl-row:hover .nl-title { text-decoration: underline; }

/* ---------------------------------------------------------------- お問い合わせ */
.ci-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ci-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 22px 26px; background: var(--ds-white); border-left: 5px solid var(--ds-blue); text-decoration: none; }
.ci-card:last-child { border-left-color: var(--ds-orange); }
.ci-en { grid-row: 1 / 3; font-family: var(--ds-font-en); font-size: 30px; font-weight: 900; font-style: italic; color: var(--ds-blue); }
.ci-card:last-child .ci-en { color: var(--ds-orange); }
.ci-label { font-size: 13px; font-weight: 700; }
.ci-value { font-family: var(--ds-font-en); font-size: 22px; font-weight: 800; overflow-wrap: anywhere; }
.f-form { display: grid; gap: 22px; }
.f-field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.f-field label, .f-field legend { display: flex; align-items: center; gap: 10px; font-weight: 900; }
.f-field legend { padding: 0; margin-bottom: 8px; }
.req, .opt { padding: 1px 8px; border-radius: 3px; font-size: 12px; font-weight: 700; color: var(--ds-white); background: var(--ds-orange); }
.opt { background: var(--ds-muted); }
/* 入力欄は薄い灰色で塗る（白い欄が画面いっぱいに広がると、スマホでは白い空白の帯に見えた）。入力中は白 */
.f-field input:not([type="checkbox"]), .f-field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--ds-muted); border-radius: var(--ds-radius-card); background: var(--ds-band); font: inherit; font-size: 16px; }
.f-field input:not([type="checkbox"]):focus, .f-field textarea:focus { background: var(--ds-white); }
.f-field textarea { min-height: 180px; resize: vertical; }
.f-field input:focus, .f-field textarea:focus { outline: 3px solid color-mix(in srgb, var(--ds-blue) 40%, transparent); border-color: var(--ds-blue); }
.f-check-list { display: flex; flex-wrap: wrap; gap: 10px; }
/* チェックボックスは22pxの箱を描くだけにして、押せる範囲はラベル全体（入力そのものをラベルいっぱいに広げて透明にする） */
.f-check { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--ds-rule); border-radius: var(--ds-radius-pill); background: var(--ds-white); font-weight: 700; cursor: pointer; }
.f-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.f-check span::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 10px; vertical-align: -5px; border: 2px solid var(--ds-muted); border-radius: 4px; background: var(--ds-white) center / 14px no-repeat; }
.f-check input:checked + span::before { border-color: var(--ds-orange); background-color: var(--ds-orange);
  background-image: linear-gradient(45deg, transparent 45%, var(--ds-white) 45%, var(--ds-white) 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--ds-white) 45%, var(--ds-white) 55%, transparent 55%); background-size: 10px 10px, 10px 10px; }
.f-check input:focus-visible + span::before { outline: 3px solid var(--ds-blue); outline-offset: 2px; }
.f-check:has(input:checked) { border-color: var(--ds-orange); }
.f-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.f-consent .f-check { border: 0; padding: 0; }
.f-consent .text-link { flex-basis: 100%; justify-self: start; width: max-content; margin-top: 0; }  /* 同意の枠の中にリンクを置くと、枠の真ん中を押したときにリンクが開いた */
.f-status { min-height: 1.8em; font-weight: 700; color: var(--ds-orange); line-height: 1.8; }
.f-submit { justify-self: center; min-width: 320px; }
/* 同意の下のリンクは押せる高さ44pxのうち下半分が字の無い帯になり、送信ボタンまで 70px 空いていた。押せる範囲は隙間に重ねる */
.f-consent .text-link { margin-bottom: -12px; }
.f-consent + .f-submit, .f-form > .f-submit { margin-top: -4px; }
.p-thanks { position: relative; isolation: isolate; overflow: hidden; padding: 14px 0 110px; }
.p-thanks .ph-stripe { z-index: -1; }
.th-inner p:not(.ph-en) { margin-top: 16px; font-size: 16px; line-height: 1.9; }
.th-inner .btn, .th-actions { margin-top: 28px; }
.th-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.th-actions .btn { margin: 0; }
.p-policy .article-body h2 span { font-size: 18px; }

/* サイトマップ */
.sm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; }
.sm-group h2 { padding-bottom: 8px; border-bottom: 2px solid var(--ds-ink); font-size: 18px; font-weight: 900; }
.sm-group a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--ds-rule); font-size: 14.5px; font-weight: 700; line-height: 1.5; text-decoration: none; }
.sm-group a:hover { text-decoration: underline; }

/* ご依頼の流れ（詳しく）・用意するもの・写真の帯・お知らせの箱 */
.ts-list { position: relative; display: grid; gap: 14px; }
.ts-list::before { content: ""; position: absolute; left: 35px; top: 20px; bottom: 20px; width: 3px; background: linear-gradient(var(--ds-blue), var(--ds-orange)); }
.ts-item { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.ts-no { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ds-blue); color: var(--ds-white); font-family: var(--ds-font-en); font-size: 24px; font-weight: 900; font-style: italic; }
.ts-item:nth-child(even) .ts-no { background: var(--ds-orange); }
.ts-body { padding: 16px 24px 14px; background: var(--ds-band); border-radius: var(--ds-radius-card); }
.ts-title { font-size: 20px; font-weight: 900; }
.ts-body p { margin-top: 6px; line-height: 1.85; }
.ts-sep { margin: 10px 0 6px; border: 0; border-top: 1px dashed var(--ds-muted); }
.ts-body .ts-note { margin-top: 0; font-size: 13.5px; color: var(--ds-ink-soft); }
.cl-list { display: grid; gap: 10px; }
.p-photo-band { position: relative; height: 240px; background: linear-gradient(90deg, color-mix(in srgb, var(--ds-blue-deep) 50%, transparent), transparent 60%), var(--photo) center 40% / cover no-repeat; }
.pbd-hand { position: absolute; right: max(40px, (100% - 1240px) / 2 + 40px); top: 50%; font-family: var(--ds-font-hand); font-size: 32px; line-height: 1.35; color: var(--ds-white); transform: translateY(-50%) rotate(-10deg); text-shadow: 0 2px 10px color-mix(in srgb, var(--ds-card-shade) 60%, transparent); }
.nt-box { display: grid; justify-items: center; gap: 10px; padding: 30px; background: var(--ds-white); border-top: 4px solid var(--ds-orange); text-align: center; }
.nt-title { font-size: 20px; font-weight: 900; }
.nt-box .btn { margin-top: 8px; }

/* フッターの文字リンク：見た目の行（27px）はそのまま、押せる高さを44px にする（上下に8.5px 広げて margin で戻す） */
.ft-col a { padding: 9px 0; margin: -9px 0; }  /* 行の高さ 26.65px＋18px＝44.65px（8.5px だと 43.65px で届かなかった） */
.ft-col a:first-child { margin-top: 0; }
.ft-address a { padding: 10px 0; margin: -10px 0; }


/* ---------------------------------------------------------------- 下層：横が狭いとき */
@media (max-width: 1100px) {
  .lx { padding: 0 24px; }
  .ph-body { padding: 16px 24px 56px; }
  .two-col, .intro-grid, .ms-grid, .ah-grid, .kw-inner { grid-template-columns: 1fr; row-gap: 16px; }
  .two-col > .lx-head { margin-bottom: 0; }
  .pg-list, .cap-list, .st-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-item { clip-path: none; }
  .sr-row { grid-template-columns: 1fr; row-gap: 22px; }
  .sr-row--flip .sr-photo { order: 0; }
  .col-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-card--big { grid-template-columns: 1fr; }
  .col-card--big .col-photo { grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .ms-photo, .ah-photo { order: -1; }
  .cs2-inner { grid-template-columns: 1fr; row-gap: 22px; }
  .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-photo { width: 44%; opacity: .9; }
  .ft-col a { margin: 0; }  /* 1199px 以下は上の規則で1行44px（行そのものを広げる） */
}
@media (max-width: 640px) {
  .lx { padding: 0 16px; }
  .lx-en { font-size: 24px; }
  .lx-title { font-size: 22px; }
  .lx-head--row { grid-template-columns: 1fr; row-gap: 8px; }
  .lx-head--row .text-link { grid-column: 1; justify-self: start; }
  .p-page-hero { min-height: 0; }
  .ph-photo { position: relative; display: block; width: auto; height: 180px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 82%); }
  .p-page-hero--photo { display: flex; flex-direction: column; }
  .p-page-hero--photo .ph-photo { order: 2; }
  .ph-body { padding: 8px 16px 28px; }
  .ph-en { margin-top: 4px; font-size: min(52px, 12.5vw); white-space: normal; overflow-wrap: anywhere; }
  .ph-title { font-size: 27px; }
  .ph-lead { font-size: 14.5px; }
  /* 下の斜めの帯はオレンジが下から82px、青が下から70pxまで上がる。72px だと説明文の最後の行の端に帯がかかった（390px のタグ・用語集など13ページ） */
  .p-page-hero:not(.p-page-hero--photo) .ph-body { padding-bottom: 96px; }
  .p-page-hero--photo .ph-stripe { display: none; }
  .p-anchor-nav ul, .p-service-switch ul, .p-column-filter ul { justify-content: flex-start; padding: 14px 16px; gap: 8px; }
  .p-anchor-nav a, .p-service-switch a, .p-column-filter a { padding: 0 16px; font-size: 13px; }
  .intro-catch, .ms-catch { font-size: 24px; }
  .pg-list, .cap-list, .st-list, .pb-list, .col-list, .lc-list, .val-list, .ci-grid, .sm-grid { grid-template-columns: 1fr; }
  .pg-item { min-height: 0; }
  .sr-name { font-size: 27px; }
  .sr-en { font-size: 30px; }
  .mq-track { font-size: 30px; gap: 32px; }
  .rows > div, .tl-list li { grid-template-columns: 1fr; row-gap: 4px; }
  .stm-title { font-size: 26px; }
  .p-statement { background: linear-gradient(180deg, color-mix(in srgb, var(--ds-white) 92%, transparent), color-mix(in srgb, var(--ds-white) 80%, transparent)), var(--photo) 70% 30% / cover no-repeat, var(--ds-paper); }
  .rep-card { padding: 26px 22px; }
  .rep-name { font-size: 26px; }
  .acc-card { padding: 16px 20px 34px; }
  .two-col > .lx-head .sec-rule { margin-bottom: 8px; }
  .acc-contact div { flex-wrap: wrap; gap: 0 12px; }
  .ah-title { font-size: 24px; }
  .article-body { font-size: 15.5px; }
  .article-body h2 { font-size: 19px; }
  .pt-box { padding: 20px; }
  .an-grid { grid-template-columns: 1fr; }
  .an-link--next { text-align: left; }
  .an-empty { display: none; }
  .nl-row { grid-template-columns: auto auto; row-gap: 6px; }
  .nl-title { grid-column: 1 / -1; }
  .nl-row .arrow { display: none; }
  .ci-value { font-size: 18px; }
  .f-submit { width: 100%; min-width: 0; }
  .cs2-title { font-size: 22px; }
  .p-cta-simple .ph-stripe { display: none; }  /* 390px で電話番号の上を横切っていた */
  .p-photo-band { height: 180px; }
  .pbd-hand { font-size: 24px; right: 20px; }
  .ts-list::before { left: 23px; }
  .ts-item { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
  .ts-no { width: 48px; height: 48px; font-size: 17px; }
  .ts-body { padding: 14px 16px; }
  .kw-title { font-size: 19px; }
  .col-card--big .col-title { padding: 10px 20px 0; font-size: 19px; }
  .col-card--big .col-lead { padding: 8px 20px 20px; }
  .col-card--big .col-meta { padding: 16px 20px 0; }
}

/* ===================================================================================================== ページの型を増やした分（2026-09-25）
   事業の比べ表・用語集・事業ごとのチェックリスト・コラムのタグ・事業ごとのよくあるご相談 */
.cmp-table { width: 100%; border-collapse: collapse; background: var(--ds-white); font-size: 14.5px; line-height: 1.7; }
.cmp-table th, .cmp-table td { padding: 16px 18px; border-bottom: 1px solid var(--ds-rule); text-align: left; vertical-align: top; }
.cmp-table thead th { background: var(--ds-ink); color: var(--ds-white); font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; }
.cmp-table tbody th { width: 220px; font-weight: 900; }
.cmp-table tbody th a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.cmp-table tbody th a .chev { width: 7px; height: 7px; color: var(--ds-orange); }
.cmp-no { font-family: var(--ds-font-en); font-size: 20px; font-weight: 800; font-style: italic; color: var(--ds-orange); }
.p-compare .note { margin-top: 16px; }

.gl-group + .gl-group { margin-top: var(--space-block); }
.gl-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px; border-bottom: 3px solid var(--ds-ink); font-size: 22px; font-weight: 900; }
.gl-en { font-family: var(--ds-font-en); font-size: 22px; font-weight: 800; font-style: italic; color: var(--ds-orange); }
.gl-list > div { display: grid; grid-template-columns: 240px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--ds-rule); }
.gl-list dt { font-weight: 900; }
.gl-list dd { margin: 0; font-size: 15px; line-height: 1.8; }

.ckg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px 20px; }
.ckg-title { margin-bottom: 12px; padding-left: 14px; border-left: 5px solid var(--ds-blue); font-size: 19px; font-weight: 900; line-height: 1.4; }
.ckg-card .cl-list { display: grid; gap: 8px; }
.ckg-card .cl-list li { min-height: 56px; padding: 12px 18px; font-size: 14.5px; }

.p-tag-nav { background: var(--ds-paper); }
.p-tag-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 1240px; margin: 0 auto; padding: 12px 40px; }
.p-tag-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 700; color: var(--ds-blue); text-decoration: none; }
.p-tag-nav a:hover, .p-tag-nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.p-tag-nav a[aria-current] { color: var(--ds-orange); }

.ig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ig-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; background: var(--ds-white); border-top: 4px solid var(--ds-orange); }
.ig-title { display: flex; align-items: baseline; gap: 12px; font-size: 20px; font-weight: 900; }
.ig-no { font-family: var(--ds-font-en); font-size: 22px; font-weight: 800; font-style: italic; color: var(--ds-orange); }
.ig-list { display: grid; gap: 8px; }
.ig-list li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 700; line-height: 1.6; }
.ig-card .text-link { align-self: flex-start; margin-top: auto; }

@media (max-width: 1100px) {
  .ig-grid { grid-template-columns: 1fr; }
  .gl-list > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 760px) {
  /* 比べ表はスマホでは事業ごとのカードに組み替える（横スクロールにしない） */
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: auto; }
  .cmp-table thead { display: none; }  /* 見出しは各セルの data-label で出す（見えない見出しを残すと「読めない文字」になる） */
  .cmp-table tr { margin-bottom: 14px; border-top: 4px solid var(--ds-orange); }
  .cmp-table tbody th { width: auto; padding: 10px 16px 0; border-bottom: 0; }
  .cmp-table td { padding: 8px 16px 12px; }
  .cmp-table td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 700; color: var(--ds-muted); }
  .ckg-grid { grid-template-columns: 1fr; }
  .p-tag-nav ul { padding: 8px 16px; }
}