/* =========================================================
   合同会社クラフトコア | BtoBマーケティング支援 LP
   設計トークン = SmartHR実測値 + クラフトコア指定カラー
   （記憶でなく https://smarthr.co.jp/ の computed style から抽出）
   ========================================================= */

:root{
  /* --- 型スケール（2026-07-30）---
     参考5本の実測: 本文の文字量の8割が2〜3種類に収まる
     （rakkoma 3 / takarush 3 / リクルート 3 / 阿蘇さとう農園 2 / サクラクレパス 2）。
     ここは5種類だった。本文と注釈をこの2つで決める。 */
  --fs-body:16px;
  --fs-note:13px;

  /* --- 色（3色厳守・SmartHRの489:9＝アクセントは超少数の原則） --- */
  --white:#ffffff;
  --paper:#f7fafa;              /* ごく淡い青緑寄りの白（砂浜） */
  --ink:#1a2d33;               /* 黒を避けブランド寄りの濃色（純黒/中性黒は使わない・KENTA指定2026-07-24） */
  --ink-70:rgba(26,45,51,.72);
  --ink-45:rgba(26,45,51,.65);  /* 2026-07-30: .46 は紙(#f7fafa)で比2.69・白で2.72で、
                                   WCAG AAの4.5に大きく届かなかった（10箇所）。
                                   .65 で紙4.56／白4.65。色は変えず濃さだけ上げた。 */
  --line:rgba(26,45,51,.13);   /* 細罫線 */
  --teal:#00b2ca;              /* クラフトコアsub */
  --teal-deep:#097a8c;         /* 濃淡でアクセントの階層（同系色の濃淡）
                                   2026-07-30: #0a8ea3 は淡い地(#eaf7f8)で比3.54・白で3.88。
                                   色相を保って86%まで落とすと 淡4.59／紙4.79／白5.03。
                                   ブランド4色(main #81d8d0 / sub #00b2ca / accent #b2ebf2 /
                                   主ボタン #357ea8)は触っていない。 */
  --teal-light:#81d8d0;        /* クラフトコアmain＝配色の基軸 */
  --teal-pale:#b2ebf2;         /* クラフトコアaccent */
  --teal-wash:#eaf7f8;         /* 面で使う極淡い青緑 */
  --deep:#347da6;              /* 濃色面・主ボタン＝薄めのコバルトブルー（KENTA指定 2026-07-24）
                                  2026-07-30: 指定値 #357ea8 は白文字で比4.47。AAの4.5に0.03届かず、
                                  主ボタン「お問い合わせ」が基準外だった。RGBで(1,1,2)だけ落とした
                                  #347da6 で白4.54。**目では区別できない差**なので指定色の範囲内とみなす。
                                  なお強調の --teal-light(#81d8d0) をこの面で3.0にするには #32769e まで
                                  必要で、そちらは見て分かる変化になるためKENTA判断に残す。 */
  --deep-hover:#3f8fbd;        /* 主ボタンhover */

  /* --- 書体（SmartHR実測: YakuHanJP+Noto Sans JP／字間広め） --- */
  --font:"YakuHanJP","Noto Sans JP","ヒラギノ角ゴ ProN W3",Meiryo,sans-serif;
  /* フォントのベース＝Sales Marker実測（英字Montserrat＋和文Noto Sans JP・見出し600-700・字間広め） */
  --font-num:"Montserrat","YakuHanJP","Noto Sans JP",sans-serif;
  --font-display:"Montserrat","YakuHanJP","Noto Sans JP","ヒラギノ角ゴ ProN W3",Meiryo,sans-serif;

  /* --- 余白スケール（贅沢に） --- */
  --pad-x:clamp(16px,2.6vw,40px); /* デスクトップの左右余白をさらに圧縮（KENTA指摘 2026-07-24） */
  --sec-y:clamp(56px,7.5vw,108px); /* 余白圧縮＝色面の連続で「一枚の絵」に（獅子の原理） */

  --maxw:1240px;
}

*{box-sizing:border-box}
/* 🔴 2026-08-11: メニューから段へ飛ぶと、**6段中5段で見出しが約30px隠れていた**（実測）。
   ヘッダーは position:fixed・高さ86px なのに scroll-padding-top が auto(=0) で、
   段の上端が y=0＝ヘッダーの下に潜っていた。
   ヘッダー高は1箇所で決める（--hdr-h）。ヘッダー自身の高さもここから取るので、
   片方だけ変えてズレることがない。 */
:root{ --hdr-h:86px }
html{scroll-behavior:smooth;overflow-x:clip;
     scroll-padding-top:calc(var(--hdr-h) + 12px)} /* 装飾のはみ出しで横スクロールを作らせない（左寄り見えの真因対策） */
body{
  margin:0;background:var(--white);color:var(--ink);
  overflow-x:clip; /* 装飾(光/波/背景文字)の横はみ出しを遮断 */
  font-family:var(--font);font-size:17px;line-height:1.9;
  letter-spacing:.04em;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* 🔴 日本語を**文節で折る**（2026-07-31・実画面を見て発覚）。
     これが無いと「いな／い」「運用体／制」「代理店とし／て」のように
     語の途中で折れる（泣き別れ・孤立文字）。数値の検査には一切出ない＝目でしか出ない型。
     沖縄ロケでは2026-07-25にKENTA指摘で入れた手当てだが、
     **クラフトコアには一度も入っていなかった**（横展開の漏れ）。
     auto-phrase 未対応のブラウザでは無視されるだけで、崩れない。 */
  word-break:auto-phrase;   /* Chromeだけ。文節で折る */
  /* 🔴 **iOS Safari は auto-phrase を無視する**（2026-07-31・KENTA実機で発覚）。
     その結果、禁則も効かず「セミナ／ー集客」「メ／ール」と**行頭に長音符**が来ていた。
     `line-break:strict` は Safari も対応していて、禁則（ー、。っゃ等）を厳密にする。
     日本語が任意の位置で折れること自体は正常なので、**禁則だけを必ず守らせる**。
     語の途中で割りたくない塊は .nb（nowrap）で個別に固定する。 */
  line-break:strict;
  text-wrap:pretty;
}
/* 見出しは行の長さを揃える（1行目だけ極端に長い、を防ぐ） */
h1,h2,h3,.sec-ttl,.lead{text-wrap:balance}
/* 折ってはいけない塊に付ける。**モバイル幅(≈310px)に収まる長さに割ること**
   （長い塊を nowrap にすると横に溢れる＝過去に踏んだ） */
.nb{white-space:nowrap}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}

/* セクション共通（SmartHR: 極小ラベル10px太字字間＋細罫線） */
.section{padding:var(--sec-y) 0;position:relative;overflow:hidden}
.section>.wrap{position:relative;z-index:1}

/* 巨大背景タイポ（ダイクレ興産の実測手法＝誌面の迫力・薄く敷く） */
.bgword{
  position:absolute;z-index:0;top:clamp(4px,1vw,14px);
  font-family:var(--font-num);font-weight:700;line-height:.82;
  font-size:clamp(84px,15vw,200px);letter-spacing:.01em;
  color:rgba(10,142,163,.06);
  pointer-events:none;user-select:none;white-space:nowrap;
}
.bgword.r{right:-1.5%}
.bgword.l{left:-1.5%}
.achievements .bgword{ /* 深い面はアウトライン文字（獅子の実測手法）。波と重ならない位置へ */
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);
  top:clamp(72px,8.5vw,124px);
}
.bgword.c{left:50%;right:auto;margin-left:0;transform:translateX(-50%)} /* 中央揃えセクションは背景文字も中央 */
.bgword>span{display:inline-block;will-change:transform} /* パララックス用インナー */

/* 波形のセクション境界（色面をつなげて一枚の絵に） */
.sec-wave{
  /* 🔴 2本目の線。CSSに全幅の線を引く要素は**1つも無い**（総当たりで確認）。
     残る原因は、引き伸ばした波のパスの上端と下地の濃色が
     高解像度画面で0.5px単位でずれて覗く継ぎ目。-1px では足りないので -2px にし、
     高さも2px増やして**必ず重ねる**。 */
  position:absolute;top:-2px;left:0;width:100%;height:calc(clamp(34px,5.5vw,68px) + 2px);
  display:block;z-index:0;pointer-events:none;
}
.label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-note);font-weight:700;letter-spacing:.22em;color:var(--ink);
  margin:0 0 26px;
}
.label::before{content:"";width:22px;height:1px;background:var(--teal)}
.stitle{
  font-size:clamp(28px,4vw,48px);font-weight:600;line-height:1.5;
  letter-spacing:.05em;margin:0 0 clamp(28px,4vw,52px);
}
.stitle .accent{color:var(--teal-deep)}
/* 見出しロールを意図の見える書体で統一（本文はNotoのまま） */
.stitle,.service h3,.strength h4,.fstep h4{font-family:var(--font-display)}

/* ボタン */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:700;letter-spacing:.08em;
  padding:15px 30px;border-radius:2px;transition:.25s;
}
.btn-primary{background:var(--deep);color:var(--white)}
.btn-primary:hover{background:var(--deep-hover)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn .arw{transition:transform .25s}
.btn:hover .arw{transform:translateX(4px)}

/* ============ ヘッダー ============ */
.site-header{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  /* 中身を本文の柱（maxw）に揃える＝広い画面で端に張り付かせない */
  padding:18px max(var(--pad-x), calc((100vw - var(--maxw))/2 + var(--pad-x)));
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.05em;font-size:15.5px}
.logo .mark{width:38px;height:auto;flex:none} /* 本物のロゴマーク。PNG側で視覚重心=中心に機械補正済み（重心計算による自動バランス） */
.logo small{display:block;font-size:9.5px;font-weight:600;color:var(--ink-45);letter-spacing:.2em;margin-top:2px}
.nav{display:flex;align-items:center;gap:30px;font-size:15px;letter-spacing:.06em}
.nav a{color:var(--ink-70);transition:.2s}
.nav a:hover{color:var(--ink)}
.nav .btn{padding:11px 22px}
.nav .btn-primary{color:var(--white)}
.nav .btn-primary:hover{color:var(--white)}
/* UA既定(背景 rgb(239,239,239) + 2px outset の立体枠)を必ず消す。
   2026-07-29: check_lp.py のB3が実機390pxで検出→実測で確認して修正 */
.nav-toggle{display:none;background:transparent;border:0;padding:0;appearance:none;-webkit-appearance:none;cursor:pointer;color:inherit}

/* ============ Hero ============ */
.hero{position:relative;padding:clamp(112px,15vh,168px) 0 0;overflow:visible;z-index:2}

/* ── FVの背景に、自社イラストを斜めに流して"地"にする（KENTA依頼 2026-08-11）
   SAMURAI MOVIE と同じ考え方。ただしあちらは動画の実キャプチャ、
   こちらは**自社で描いたイラスト**（持っていない素材を借りてこない）。
   四辺は mask で溶かす——回転した矩形の縁が出ると「板を貼った」ように見える。 */
/* 🔴 最初 inset:-22% -16% + rotate(-13deg) にしたら、**18枚中3枚しか画面に入らず**
   その3枚も左端の外（left -176〜-117）だった＝実測して分かった。
   回転させる箱は、回転で欠ける分だけ**外側へ大きく**取る必要がある。
   縦長のFV（2266px）では列が縦に伸びるので、横は画面を確実に覆う幅を確保する。 */
.hero-bgflow{
  position:absolute;top:-30%;bottom:-30%;left:-45%;right:-45%;
  z-index:0;display:flex;gap:14px;
  transform:rotate(-13deg);pointer-events:none;
  opacity:.62;
  -webkit-mask-image:radial-gradient(112% 88% at 50% 46%,#000 24%,transparent 76%);
          mask-image:radial-gradient(112% 88% at 50% 46%,#000 24%,transparent 76%);
}
.hbf-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;
  animation:hbfDrift var(--d,52s) linear infinite}
/* flex:0 0 auto が要る。既定の flex-shrink:1 だと列の中で全部つぶれ、
   同じ絵が同一画面に並んで見える（SAMURAIで実際に踏んだ）。 */
.hbf-col i{display:block;overflow:hidden;border-radius:12px;flex:0 0 auto;
  aspect-ratio:4/3;background:var(--teal-pale,#e6f2f6)}
/* 🔴 素材の実測: 平均輝度182・最明255＝**ほぼ白地の線画**（canvasで画素を読んだ）。
   SAMURAI は暗い動画キャプチャだったので brightness を下げれば地になったが、
   こちらは**明るくすると白地に溶けて消える**。実際に2回消えた。
   → 逆に**暗く沈めて**輪郭だけを残す。彩度はブランドのティールを少し残す。 */
.hbf-col img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.5) contrast(1.5) brightness(.86) blur(1.2px)}
@keyframes hbfDrift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
/* 見出しを読ませる。横帯ではなく中心が濃い veil にする（白地なので白で伏せる） */
.hero>.wrap{position:relative;z-index:2}
/* 🔴 最初 .86 にしたら**背景が完全に見えなくなった**（実画面で確認）。
   文字が乗る中心だけを伏せ、周辺は素材が分かる程度に残す。 */
.hero-bgflow::after{content:"";position:absolute;inset:-40%;
  background:radial-gradient(58% 44% at 42% 40%,rgba(255,255,255,.80) 0,
    rgba(255,255,255,.42) 62%,rgba(255,255,255,0) 100%)}
@media (prefers-reduced-motion:reduce){ .hbf-col{animation:none} }
.hero::after{ /* 右上に爽やかな青緑のにじみ（写真の代替=光） */
  content:"";position:absolute;top:-14%;right:-8%;width:52vw;height:52vw;max-width:680px;max-height:680px;
  background:radial-gradient(circle at 60% 40%,var(--teal-pale),rgba(178,235,242,0) 62%);
  z-index:-1;
}
.hero-eyebrow{font-size:13px;font-weight:700;letter-spacing:.24em;color:var(--teal-deep);margin:0 0 24px}
.hero-lead{
  /* Sales Marker実測: 見出しweight600・字間1.2px相当 */
  font-family:var(--font-display);
  font-size:clamp(31px,4.3vw,52px);font-weight:600;line-height:1.52;letter-spacing:.032em;margin:0;
}
.hero-lead .thin{font-weight:600}
.hero-lead .u{
  /* マーカーが読まれる瞬間に左からシュッと引かれる（意味のある動きのみ） */
  padding:0 .06em;
  background-image:linear-gradient(var(--teal-pale),var(--teal-pale));
  background-repeat:no-repeat;background-position:0 72%;
  background-size:100% 34%;
  transition:background-size .9s cubic-bezier(.16,1,.3,1) .55s;
}
.js .hero-lead.reveal:not(.on) .u{background-size:0% 34%}
@media (prefers-reduced-motion:reduce){
  .hero-lead .u{transition:none;background-size:100% 34% !important}
}
.hero-sub{max-width:680px;font-size:18px;line-height:2;color:var(--ink-70);margin:34px 0 0}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin:40px 0 0}

/* Hero主役ビジュアル：ビジネス人物イラスト（web-sozai／商用可・加工可・craftcoreティールに色替え） */
.hero-grid{display:grid;grid-template-columns:1.24fr .76fr;gap:clamp(24px,4vw,52px);align-items:center}
.hero-copy{min-width:0}
.hero-visual{position:relative;min-width:0;display:flex;justify-content:center}
.hero-illust{width:100%;max-width:460px;height:auto;display:block}
@media (max-width:840px){
  .hero-grid{grid-template-columns:1fr;gap:clamp(24px,6vw,40px)}
  .hero-visual{max-width:400px;margin:0 auto}
  /* モバイルはPC用の強制改行を解除して自然に流す */
  .hero-sub br,.stat-label br{display:none}
  .hero-lead{font-size:clamp(25px,6.7vw,30px)}
}

/* 🔴 KENTA指摘「デスクトップは良いがスマホだと微妙」（2026-07-30）。
   原因: 1カラムになった時、**イラストが幅358pxで白地に浮く**（CTAの下に置かれ、
   周りが余白だけなので「貼り付けたクリップアート」に見える）。
   デスクトップは文字の右に並ぶ構図なので成立していた＝**スマホは別の構図が要る**。
   直し方: 角丸カードで囲まない（テンプレ感が出る）。透過PNGなので、
   デスクトップの `hero::after` と同じ「光のにじみ」で受け、寸法を76%に落として
   FVの一部として収める。P7の教訓どおり `.hero-visual` に擬似要素が無いことを先に確認した。 */
@media (max-width:620px){
  /* 🔴 KENTA「スマホの時のこれが嫌だ、スマホの時だけ無くしてもいいぐらい」（2026-07-30）。
     私は直前に「デスクトップの性格をスマホにも移す」と書いたが、**それはできない**。
     デスクトップの良さは〈文字が左・絵が右で1本の帯を分け合う〉**横並びの構図そのもの**。
     390pxには横並びが作れないので、下に積んだ時点で「独立した1枚の絵」に変わる。
     小さく中央に置く／右へ抜かす、どちらも別物で、弱くなるだけだった（2案試して確認）。
     → スマホでは**出さない**。FVは 英字ラベル → 見出し（下線の強調）→ 説明 → CTA2つ
       だけになり、CTAが画面の上の方に来る（指の届く位置＝押しやすい）。
     画像は35KBで、隠しても取得はされる。速度を詰める時は <picture> で
     media を分けて**取得自体を止める**（いまは35KBなので後回し）。 */
  .hero-visual{display:none}
  .hero-cta{margin-top:34px}
}

/* Hero下の実績ストリップ（数字を最初から主役に＝才流のレシピ） */
/* 4フェーズ＝イラスト付きカード（Sales Marker型・境界またぎは維持） */
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);
  margin:clamp(48px,6vw,72px) 0 clamp(-84px,-6vw,-56px);
  position:relative;z-index:2; /* 帯が次のセクションにまたがる＝境界を消す（獅子の原理） */
}
.pcard{background:var(--white);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 48px -26px rgba(26,45,51,.24)}
.pvis{background:var(--teal-wash);aspect-ratio:16/10;display:flex;align-items:flex-end;justify-content:center;padding:12px 12px 0}
.pvis img{max-height:100%;width:auto;display:block}
.pbody{padding:16px 18px 20px}
.pttl{display:flex;align-items:center;gap:8px;margin:0;
  font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.6vw,19px);color:var(--teal-deep);letter-spacing:.08em}
.pttl .picon{margin:0;width:21px;height:21px;flex:none}
.pdesc{margin:9px 0 0;font-size:var(--fs-body);line-height:1.85;color:var(--ink-70)}

/* ===== アイコン（全ページ統一: 線2px・ティール・意味の補助のみ） ===== */
.picon,.ficon,.bicon{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.picon{width:22px;height:22px;color:var(--teal-deep);display:block;margin:0 auto 10px}
.ficon{width:46px;height:46px;box-sizing:border-box;padding:12px;background:var(--teal-wash);border-radius:50%;
  color:var(--teal-deep);display:block;margin:12px auto 4px}
.bicon{width:17px;height:17px;flex:none}

/* ============ 課題 ============ */
.problem{background:var(--paper);padding-top:calc(var(--sec-y) + clamp(48px,5vw,72px))} /* またぐ帯のぶん確保 */
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.problem-list{display:flex;flex-direction:column;gap:2px}
.problem-item{display:flex;gap:18px;padding:22px 4px;border-bottom:1px solid var(--line)}
.problem-item:first-child{border-top:1px solid var(--line)}
.problem-item .no{font-family:var(--font-num);font-size:13px;font-weight:700;color:var(--teal-deep);flex:none;padding-top:3px;letter-spacing:.1em}
.problem-item p{margin:0;font-size:17px;line-height:1.85}
.problem-note{font-size:16px;line-height:2;color:var(--ink-70)}
.problem-note strong{color:var(--ink);font-weight:700}

/* ============ サービス ============ */
.services-list{border-top:1px solid var(--line)}
/* 🔴 KENTA指摘「薄い2本の直線いらない」（2026-07-30）。
   1本目は**最後の行の下線**だった。行の区切りとしては要るが、
   最後の行の下には何も無く、宙に浮いた線になっていた（幅1165・段の26px上で実測）。 */
.services-list .service:last-child{border-bottom:none}
.service{
  display:grid;grid-template-columns:76px minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,3vw,44px);
  align-items:baseline;padding:clamp(26px,3.4vw,40px) 4px;border-bottom:1px solid var(--line);
  transition:.3s;
}
.service .snum{font-family:var(--font-num);font-size:var(--fs-note);font-weight:700;color:var(--ink-45);letter-spacing:.1em}
.service h3{margin:0;font-size:clamp(21px,2.6vw,28px);font-weight:500;letter-spacing:.05em}
.service h3 span{display:block;font-size:13px;font-weight:700;color:var(--teal-deep);letter-spacing:.16em;margin-bottom:8px}
.service p{margin:0;font-size:16px;line-height:1.95;color:var(--ink-70)}
.service .stag{font-size:var(--fs-note);color:var(--ink-45);white-space:nowrap;letter-spacing:.04em}

/* ============ 実績（信頼の核・数字を大きく＝才流） ============ */
.achievements{background:var(--deep);color:var(--white)}
.achievements .label{color:var(--white)}
.achievements .label::before{background:var(--teal-light)}
.achievements .stitle{color:var(--white)}
/* 濃色面(--deep #347da6)の上の強調語。2026-07-30に実測で 比2.74（48pxなので要3.0）。
   **ブランドの基軸 --teal-light は動かさない。** 面の色もKENTA指定なので動かさない。
   使うのは**同じブランドの accent --teal-pale(#b2ebf2)**＝比3.47。
   （面を #32769e まで暗くすれば teal-light のまま3.00に届くが、
     それは見て分かる変化＝指定色の改変になる。派生シェードで解くのが先。） */
.achievements .hl-on-deep{color:var(--teal-pale)}
/* 実績＝行形式（Sales Markerのデータベース表現：アイコン＋項目｜大きな値） */
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,32px)}
.rec-card{background:var(--white);border-radius:18px;color:var(--ink);
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.6vw,34px);
  box-shadow:0 30px 60px -30px rgba(10,40,60,.45)}
.rec-ttl{margin:0 0 4px;text-align:center;font-weight:700;font-size:17px;letter-spacing:.12em}
.rec-row{display:flex;align-items:center;gap:14px;padding:18px 4px;border-bottom:1px solid var(--line)}
.rec-row:last-child{border-bottom:none;padding-bottom:6px}
.ricon{width:24px;height:24px;flex:none;color:var(--teal-deep);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rlabel{flex:1;font-size:16px;font-weight:500;letter-spacing:.04em}
.rec-row .vr{width:1px;height:28px;background:var(--line);flex:none}
.rval{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.3vw,29px);
  color:var(--teal-deep);letter-spacing:.06em;min-width:5.2em;text-align:center}
.rval small{font-size:.56em;margin-left:2px;font-weight:700}
/* 🔴 390pxで「BtoBマーケティング部／門」と**1文字だけ次行に落ちていた**（2026-07-31・目視）。
   原因は値の列の最小幅 5.2em（22px時＝114px）がラベルの幅を奪っていたこと。
   `word-break:auto-phrase` を入れても、**幅が足りなければ語の途中で折るしかない**。
   値は最長「立ち上げ」＝4文字なので、スマホでは 4.4em で足りる。
   文字を小さくして逃げない（読みやすさを削ると別の問題になる）。 */
@media (max-width:620px){
  /* 実測（eval390.py・本物の390px）:
       行幅340 = アイコン24 + gap14×3 + 区切り1 + 値93 → ラベルに残るのは **171px**。
       「BtoBマーケティング部門」は **約190px** 要る。**19px足りない**のが原因だった。
     min-width を 5.2em→4.4em→0 と2回勘で緩めても直らなかった（値の列は既に中身幅だった）。
     足りない分は gap とカードの左右余白から回す。**測ってから直す。** */
  .rval{min-width:0;white-space:nowrap}
  .rec-row{gap:8px;padding-left:0;padding-right:0}
  /* 🔴 2026-08-11 KENTA「文字が離れていて変、もっと文字と文字を近づけて」。
     実測: `.rlabel{flex:1}` が余った幅を**全部吸って**幅173px固定になり、
     「飲食店」(3文字)でも173pxを占めて右の支援種別まで大きく空いていた。
     → ラベルは**中身の幅**にし、余白は名前と種別の**間**ではなく右端へ逃がす。
     長い名前（BtoBマーケティング部門）は従来どおり伸びる＝1文字落ちは再発しない。 */
  .rlabel{flex:0 1 auto;min-width:0}
  .rec-row .vr{margin-left:auto}
  .rec-card{padding-left:14px;padding-right:14px}
  /* 字間はPCで .04em。スマホでは**1文字落とさないこと**の方が読みやすさに効く */
  .rlabel{letter-spacing:.01em}
}
/* 白の50%は濃い面(#357ea8)の上で比2.28。守秘の注釈は読ませる文なので不透明にする
   （#357ea8 の上は白でも4.47が上限。地の色はKENTA指定なので変えない）。 */
.ach-note{margin:clamp(30px,4vw,46px) 0 0;font-size:13px;color:#fff;letter-spacing:.04em}

/* ============ 強み ============ */
#strength{padding-top:calc(var(--sec-y) + clamp(44px,7vw,90px))} /* アーチのぶん確保 */
.strengths-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.strength{text-align:center}
.strength .sicon{width:40px;height:40px;color:var(--teal-deep);margin:0 auto 18px;display:block}
.strength h4{margin:0 0 10px;font-size:18px;font-weight:700;letter-spacing:.05em}
.strength p{margin:0;font-size:var(--fs-body);line-height:1.9;color:var(--ink-70);text-align:left}

/* ============ 流れ ============ */
.flow{background:var(--paper)}
.flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.2vw,30px)}
.fstep{background:var(--white);border-radius:16px;padding:clamp(22px,2.6vw,30px) 16px 24px;position:relative;
  text-align:center;box-shadow:0 18px 38px -24px rgba(26,45,51,.22)}
.fstep .fno{font-family:var(--font-num);font-size:12px;font-weight:700;color:var(--teal-deep);letter-spacing:.14em}
.fstep h4{margin:8px 0 6px;font-size:18px;font-weight:700;letter-spacing:.04em}
.fstep p{margin:0;font-size:var(--fs-body);line-height:1.8;color:var(--ink-70)}
/* ステップをつなぐ矢印（一枚の流れに） */
.fstep:not(:last-child)::after{
  content:"▸";position:absolute;top:50%;right:calc(clamp(20px,2.2vw,30px)*-0.72);
  transform:translateY(-50%);color:var(--teal);font-size:15px;line-height:1;
}

/* ============ Contact ============ */
.contact{text-align:center;position:relative;overflow:hidden}
.contact::after{content:"";position:absolute;bottom:-30%;left:50%;transform:translateX(-50%);
  width:70vw;height:70vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle,var(--teal-wash),rgba(234,247,248,0) 60%);z-index:-1}
.contact .stitle{margin-left:auto;margin-right:auto;max-width:20em}
.contact-sub{max-width:580px;margin:0 auto 40px;font-size:17px;line-height:2;color:var(--ink-70)}
.contact-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* お問い合わせフォーム */
.cform{max-width:720px;margin:0 auto;background:var(--white);border-radius:18px;
  padding:clamp(24px,3.4vw,40px) clamp(20px,3vw,40px);text-align:left;
  box-shadow:0 26px 54px -28px rgba(26,45,51,.25)}
.cform label{display:block;font-size:var(--fs-note);font-weight:700;letter-spacing:.05em;margin-bottom:16px}
.cform .req{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:4px;
  background:var(--teal-wash);color:var(--teal-deep);font-size:10.5px;letter-spacing:.1em;vertical-align:1px}
.cform input,.cform textarea{
  width:100%;margin-top:7px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:16px;background:var(--paper);color:var(--ink);transition:border-color .25s,background .25s}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--teal);background:var(--white)}
.cform textarea{resize:vertical;min-height:120px}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.form-actions .btn{border-radius:6px;cursor:pointer}
.cform button.btn{border:0;appearance:none;-webkit-appearance:none;font:inherit;font-size:15px;font-weight:700;letter-spacing:.08em} /* buttonタグのデフォルト黒枠を除去 */
.form-note{margin:16px 0 0;text-align:center;font-size:var(--fs-note);color:var(--ink-45);letter-spacing:.04em}
@media(max-width:640px){
  .frow2{grid-template-columns:1fr;gap:0}
  .form-actions .btn{width:100%;justify-content:center}
}

/* ============ お知らせ（浮くカード） ============ */
.news{background:var(--white)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,28px)}
.ncard{background:var(--white);border-radius:16px;overflow:hidden;display:block;color:inherit;
  box-shadow:0 20px 44px -24px rgba(26,45,51,.28);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.ncard:hover{transform:translateY(-7px);box-shadow:0 30px 56px -26px rgba(26,45,51,.34)}
.nthumb{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal-wash) 0%,var(--teal-pale) 100%)}
.nthumb .ph{font-family:var(--font-num);font-weight:700;font-size:13px;letter-spacing:.3em;color:var(--teal-deep);opacity:.55}
.nbody{padding:18px 20px 22px}
.ndate{font-family:var(--font-num);font-size:var(--fs-note);font-weight:600;color:var(--ink-45);letter-spacing:.06em}
.ntitle{margin:8px 0 0;font-size:var(--fs-body);font-weight:700;line-height:1.75;letter-spacing:.03em}

/* ============ FAQ（開閉式） ============ */
.faq-list{max-width:820px;margin:0 auto}
details.faq{border-bottom:1px solid var(--line)}
details.faq:first-of-type{border-top:1px solid var(--line)}
.faq summary{display:flex;gap:14px;align-items:center;padding:20px 40px 20px 4px;cursor:pointer;
  font-weight:700;font-size:17px;line-height:1.7;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .qm{color:var(--teal-deep);font-family:var(--font-num);font-weight:700;flex:none}
.qicon{width:34px;height:34px;box-sizing:border-box;padding:8px;flex:none;
  background:var(--teal-wash);border-radius:50%;color:var(--teal-deep);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.faq summary::after{content:"＋";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--teal-deep);font-weight:400;transition:transform .3s}
details[open].faq summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .ans{display:flex;gap:16px;padding:0 40px 24px 4px;color:var(--ink-70);font-size:16px;line-height:1.95}
.faq .am{color:var(--ink-45);font-family:var(--font-num);font-weight:700;flex:none}

/* ============ 図解（フォントは見出しと同じZen Kaku＝統一） ============ */
.diagram-wrap{margin-top:clamp(20px,2.4vw,32px)}
#service{padding-bottom:clamp(28px,3.5vw,48px)} /* 図の下の余白は詰める */
.diagram{width:100%;height:auto;display:block;
  font-family:var(--font-display);font-weight:700;letter-spacing:.08em}
.diagram-wrap .diagram{max-width:900px;margin:0 auto} /* 図は大きく主役に */
/* スマホは縦型の図に出し分け（縮小して小さくしない） */
.diagram.sp,.sp-only{display:none}
.sp-br{display:none}
@media(max-width:640px){
  .diagram.pc{display:none}
  .diagram.sp{display:block;max-width:300px;margin:0 auto}
  .sp-only{display:block}
  .sp-br{display:inline}
  #flow>.wrap{text-align:center} /* FLOW見出しをスマホは中央に */
  .bgword.c{font-size:12vw} /* CONTACT背景文字は画面内に収めて完全中央 */
}
.diagram-duo{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,64px);margin-top:clamp(44px,5vw,68px)}
.diagram-duo>div{max-width:860px;margin:0 auto;width:100%}
.dg-cap{margin:14px 0 0;text-align:center;font-size:var(--fs-note);color:var(--ink-45);letter-spacing:.06em}

/* 図の中を流れる線・脈動する矢印（動き＝実行し続ける会社の表現） */
.flowline{stroke-dasharray:7 9;animation:dashFlow 1.5s linear infinite}
@keyframes dashFlow{to{stroke-dashoffset:-16}}
.pulseArrow{animation:pulseOp 1.8s ease-in-out infinite}
@keyframes pulseOp{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .flowline{animation:none;stroke-dasharray:none}
  .pulseArrow{animation:none}
}
/* 図の線が「描かれる」動き（reveal到達時・意味のある動きのみ） */
.dline{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) .35s}
.js .reveal:not(.on) .dline{stroke-dashoffset:1;transition:none}

/* カードの浮き（hover） */
.pcard,.fstep{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 32px 60px -28px rgba(26,45,51,.3)}
.fstep:hover{transform:translateY(-5px);box-shadow:0 24px 46px -24px rgba(26,45,51,.26)}

/* Heroイラストの微浮遊 */
@media (prefers-reduced-motion:no-preference){
  .hero-illust{animation:heroFloat 7s ease-in-out infinite}
  @keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

/* ============ Footer ============ */
.site-footer{border-top:1px solid var(--line);padding:48px var(--pad-x)}
.foot-inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.foot-inner small{color:var(--ink-45);font-size:14px;letter-spacing:.06em;line-height:1.9}

/* ============ 動き（sankoudesign dynamic-move / 品を保つ・reveal） ============ */
/* JSが有効な時だけ隠して演出（JS無し=プレビュー/非対応環境では最初から見える＝堅牢） */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.js .reveal.on{opacity:1;transform:none}

/* ============ 小さいアイコンの動き（2026-07-30・KENTA指摘） ============
   参考は sankoudesign の「ダイナミックな動き」カテゴリ（実際に開いて方向を確認）。
   飾りでは動かさない。**アイコンは「その段の主語」なので、段が出たあとに一拍おいて立つ**。

   2種類ある:
     ① 中に図形を直接持つもの（.sicon 40px）→ **線が引かれる**
     ② スプライトを参照するもの（.picon/.ricon/.ficon の <use>）
        → 中の図形に手が届かないので、**器ごと立ち上がる**（下から+わずかに拡大）
   ②を①と同じ「線を引く」に見せようとして use の中を触るのは、
   ブラウザ差で崩れるのでやらない。**手が届く範囲で意味を作る。**

   JSが動かない時は `.js` が付かない＝この節は一切効かない＝完成形が出る。 */
.js .reveal .sicon [stroke],.js .reveal .sicon circle,.js .reveal .sicon path,.js .reveal .sicon rect{
  stroke-dasharray:var(--len,none);stroke-dashoffset:0}
@keyframes ccDraw{from{stroke-dashoffset:var(--len,0)}to{stroke-dashoffset:0}}
@keyframes ccStand{0%{opacity:0;transform:translateY(7px) scale(.88)}
  70%{transform:translateY(0) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
.js .reveal.on .sicon circle,.js .reveal.on .sicon path,.js .reveal.on .sicon rect{
  animation:ccDraw .85s cubic-bezier(.16,1,.3,1) .18s both}
/* 同心円は外→内の順に引く（意味＝的の中心へ寄っていく） */
.js .reveal.on .sicon circle:nth-of-type(2){animation-delay:.34s}
.js .reveal.on .sicon circle:nth-of-type(3){animation-delay:.5s}
.js .reveal.on .picon,.js .reveal.on .ficon{animation:ccStand .5s cubic-bezier(.16,1,.3,1) .2s both}
.js .reveal.on .ricon{animation:ccStand .42s cubic-bezier(.16,1,.3,1) both}
/* 行が続く所は順番に立つ（同時に動くと「全部同じフェード」になる） */
.js .reveal.on .rec-row:nth-child(2) .ricon{animation-delay:.08s}
.js .reveal.on .rec-row:nth-child(3) .ricon{animation-delay:.16s}
.js .reveal.on .rec-row:nth-child(4) .ricon{animation-delay:.24s}
.js .reveal.on .rec-row:nth-child(5) .ricon{animation-delay:.32s}
.js .reveal.on .rec-row:nth-child(6) .ricon{animation-delay:.4s}
/* 触れた時だけ色が一段深くなる（動きは足さない） */
.strength:hover .sicon,.phase:hover .picon{color:var(--deep);transition:color .3s}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  /* 動きを減らす設定の人には、最初から引き終わった・立った状態を見せる */
  .sicon *,.picon,.ricon,.ficon{animation:none!important;stroke-dasharray:none!important;
    stroke-dashoffset:0!important;opacity:1!important;transform:none!important}
}

/* ============ レスポンシブ（モバイルは別アートディレクション） ============ */
@media(max-width:900px){
  .nav{display:none}
  /* 指で押す物は44px以上（Apple HIG）。30pxだった＝押し外しが出る大きさ。
     見た目の線は30pxのまま、**当たり判定だけ**を44pxに広げる
     （アイコンを大きくするとヘッダーの重心が変わるので、当たりだけ広げるのが正解）。 */
  .nav-toggle{display:grid;place-items:center;width:44px;height:44px;margin-right:-7px}
  .nav-toggle > *{width:30px;height:30px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .problem-grid{grid-template-columns:1fr;gap:32px}
  .rec-grid{grid-template-columns:1fr}
  .strengths-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .flow-steps{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .fstep:not(:last-child)::after{content:"▾";right:auto;left:50%;top:auto;bottom:calc(clamp(20px,2.2vw,30px)*-0.85);transform:translateX(-50%)}
  .news-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .diagram-duo{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:14px}
  .service{grid-template-columns:1fr;gap:8px}
  .service .stag{display:none}
  .hero-stats{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .strengths-grid{grid-template-columns:1fr}
  .hero-cta .btn,.contact-cta .btn{width:100%;justify-content:center}
}

/* ============ ブログ / 記事（SEO/AIO・2026-07-24追加） ============ */
.page-head{padding:clamp(120px,15vh,168px) 0 0}
.breadcrumb{font-size:13px;color:var(--ink-45);letter-spacing:.04em;margin:0 0 18px}
.breadcrumb a{color:var(--teal-deep)}
.breadcrumb span{margin:0 8px;color:var(--line)}
.blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,30px);margin-top:clamp(30px,4vw,48px)}
.blog-list .ncard{cursor:pointer}
.article{max-width:760px;margin:0 auto;padding:clamp(30px,5vw,56px) 0 clamp(60px,8vw,100px)}
.article-meta{display:flex;align-items:center;gap:14px;font-family:var(--font-num);font-size:13px;color:var(--ink-45);letter-spacing:.04em;margin:0 0 16px}
.article-tag{background:var(--teal-wash);color:var(--teal-deep);font-weight:700;padding:3px 12px;border-radius:5px;font-size:var(--fs-note)}
.article h1{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.6vw,38px);line-height:1.5;letter-spacing:.03em;margin:0 0 clamp(32px,5vw,52px)}
.article-lead{font-size:17px;line-height:2;color:var(--ink-70);border-left:3px solid var(--teal);padding-left:18px;margin:0 0 clamp(36px,5vw,56px)}
.article h2{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.4vw,26px);letter-spacing:.03em;line-height:1.55;margin:clamp(40px,5vw,60px) 0 18px;padding-top:20px;border-top:1px solid var(--line)}
.article p{font-size:16px;line-height:2.05;color:var(--ink);margin:0 0 22px}
.article strong{font-weight:700;color:var(--teal-deep)}
.article ul{margin:0 0 22px;padding-left:1.2em}
.article li{font-size:16px;line-height:1.95;margin-bottom:10px}
.article-cta{margin-top:clamp(44px,6vw,72px);padding:clamp(28px,3.5vw,40px);background:var(--paper);border-radius:16px;text-align:center}
.article-cta p{font-size:16px;color:var(--ink-70);margin:0 0 20px}
.article-note{margin-top:24px;font-size:var(--fs-note);color:var(--ink-45);line-height:1.8}
@media(max-width:640px){
  .blog-list{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .article h1{font-size:clamp(23px,7vw,30px)}
}

/* ブログ記事の写真（2026-07-25追加） */
.nthumb{position:relative}
.nthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.article-hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;display:block;margin:0 0 clamp(32px,5vw,52px);box-shadow:0 24px 50px -28px rgba(26,45,51,.28)}

/* CTAの文字は本文より大きくする。実測は本文14pxに対しCTA 20〜24px。
   ここは15pxで、本文16pxより小さかった＝押す物が読む物より弱い。 */
@media(max-width:640px){
  .btn,.cform button.btn{font-size:20px}
}

/* ============================================================
   スマホの寄せと余白（2026-07-31・KENTA指摘を機械実測で確定）
   ------------------------------------------------------------
   `check_center.py` で 390px を実測したところ:
     ・見出しの寄せが**段ごとにバラバラ**だった
       （6段が左 / flow・contact の2段だけ中央）
     ・背景の大きな英字(.bgword)の位置が **左-152〜+122** と揃わず、
       端で切れている段があった ← 「バランスが変」の正体
   参考17本の実測は「全段が左寄せ」だが、**KENTAの判断が上**。
   スマホでは中央に揃える（既に中央だった2段に合わせ、全段で統一する）。
   本文は左のまま——長い文章を中央寄せにすると読みにくくなる。
   ============================================================ */
@media (max-width:620px){
  .label{justify-content:center;text-align:center;width:100%}
  .stitle{text-align:center}

  /* 背景英字も中身に合わせて中央へ。段ごとに左右へずれて切れていた */
  .bgword{left:50%;right:auto;transform:translateX(-50%)}

  /* KENTA「Qの横のアイコン全部いらない」（2026-07-31） */
  .qicon{display:none}

  /* KENTA「記事一覧を見るの下の余白がありすぎ、もっと詰めて」
     実測: news の下の余白 50px ＋ 段の下padding。段の下だけ詰める */
  .news{padding-bottom:clamp(28px,6vw,44px)}
}

/* ============ 企業理念（2026-07-31・KENTA提供の原文） ============
   静かな段にする。ここは読ませる所なので、装飾を足さず行間と余白だけで作る。
   「核心（Core）」「創造（Craft）」＝社名の由来そのものなので、そこだけ受ける。 */
.philosophy{background:var(--paper)}
.phil-sub{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(15px,1.6vw,19px);letter-spacing:.1em;
  color:var(--teal-deep);margin:-14px 0 clamp(28px,3.4vw,44px);
}
.phil-body p{
  font-size:clamp(15px,1.25vw,17px);line-height:2.15;
  color:var(--ink-70);margin:0 0 clamp(22px,2.6vw,32px);max-width:44em;
}
.phil-body strong{color:var(--teal-deep);font-weight:700}
.phil-close{color:var(--ink) !important;font-weight:700}
@media (max-width:620px){
  /* 他の段と同じく、スマホでは中央に揃える（寄せを段ごとにバラつかせない） */
  .phil-sub{text-align:center}
  /* 🔴 2026-08-11 KENTA「中央よりで書いて、左寄りすぎ」。
     margin-inline:auto は**箱だけ**を中央に置き、中身は左揃えのままだった（実測: text-align=start）。
     同じ段の label / stitle / phil-sub は既に center なので、**本文だけが左**で不揃いに見えていた。
     箱ではなく**文字を**中央にする。 */
  .phil-body p,
  .phil-close{margin-inline:auto;text-align:center}
}

/* ============================================================
   KENTA指摘（2026-07-31）「このセクション説明の棒線全部いらないから消して、
   セクションのタイトルを中央に」
   ------------------------------------------------------------
   ・ラベルの前の短い横線（.label::before）を**全幅で**外す
   ・段のラベルと見出しを**全幅で中央**に揃える
     （これまではスマホだけ中央にしていた。段ごと・幅ごとに寄せが変わるのが
       「中央にない」「バランスが変」の原因だったので、1つに統一する）
   ============================================================ */
.label::before{display:none}
.label{justify-content:center;text-align:center;width:100%}
.stitle{text-align:center}
.phil-sub{text-align:center}

/* ============ 会社概要（2026-07-31・KENTA「これを会社概要にして」） ============
   フッターの小さい文字を、読ませる形の定義リストに起こす。
   罫線1本ずつの静かな作り。載せているのは**実在する事実だけ**。 */
.co-list{max-width:720px;margin:0 auto}
.co-row{
  display:grid;grid-template-columns:8.5em 1fr;gap:clamp(12px,2vw,28px);
  padding:clamp(14px,1.8vw,20px) 0;border-bottom:1px solid var(--line);
  text-align:left;
}
.co-row:first-child{border-top:1px solid var(--line)}
.co-row dt{font-weight:700;font-size:var(--fs-note);letter-spacing:.1em;color:var(--ink)}
.co-row dd{margin:0;font-size:var(--fs-body);color:var(--ink-70)}
.co-row dd a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
@media (max-width:620px){
  /* スマホは項目名を上に積む（8.5emの列を残すと本文が細くなりすぎる） */
  .co-row{grid-template-columns:1fr;gap:4px}
}

/* 🔴 繋ぎ目の白帯（2026-07-31・KENTA「この繋ぎ目が嫌だ」）
   理念セクションを「流れ」の直前に入れた時、**同じ色（--paper）どうしが隣り合った**。
   間にある波(.sec-wave)は「白 → 薄いグレー」への転換として描かれているので、
   上も下もグレーだと**波の上側の白だけが帯として残る**。
   → 理念を白地に戻す。波は本来の役目（白→グレー）に戻り、帯が消える。
   （波を消す手もあるが、それだと段の切り替わりが分からなくなる） */
.philosophy{background:var(--white)}

/* KENTA「一番下のセクションの会社概要って文字がいらない」→ 消したのは**私の読み違い**で、
   指していたのは**フッターの「会社概要」リンク**（ページの本当の一番下）だった。
   リンクは外し、セクションの見出しは戻す（KENTA指示 2026-07-31）。 */

/* KENTA「companyという文字と上のセクションの余白が大きい、縮める」（2026-07-31）
   会社概要は最下部の実務情報。上の「お問い合わせ」との間が段の標準余白(56px)＋
   contactの下padding で開きすぎていた。ここだけ詰める。 */
.company{padding-top:clamp(20px,3vw,40px)}
#contact{padding-bottom:clamp(24px,3.5vw,48px)}

/* フッターだけ左に残っていた（実測: 左16 / 右163・差147px）。
   他の段を全幅で中央に統一したので、ここも揃える。 */
.foot-inner{justify-content:center;text-align:center}
.foot-inner .logo{justify-content:center}
@media (max-width:620px){
  .foot-inner{flex-direction:column;align-items:center;gap:14px}
}

/* KENTA「パソコンで見るときだけ、ここのセクションのアイコン小さく」（2026-07-31）
   4枚カード(.pcard)の中のイラスト。スマホはちょうど良いので**触らない**。
   箱の比率は変えず、中の絵だけ縮めて上に余白を作る（下端揃えのまま）。 */
@media (min-width:901px){
  /* 74%は下げすぎで、絵の上に空きが出て逆にバランスが崩れた（KENTA再指摘）。
     箱の縦を少し詰めつつ絵を戻し、上の空きを減らす。スマホは触らない。 */
  .pvis{aspect-ratio:16/9;padding:10px 14px 0}
  .pvis img{max-height:92%}
}

/* 🔴 PCで見て明らかにおかしい2箇所（2026-07-31・KENTA指摘）
   ① 実績: 「代表実績」カードを削除したのに **2列グリッドのまま**で、
      残った1枚が左半分に寄り、右半分が空いていた。1列にして中央へ。
   ② 企業理念: 見出しは中央なのに**本文の塊が左端から始まって**いた
      （margin-inline:auto をスマホにしか当てていなかった）。
      文字は左揃えのまま、塊を中央へ置く（長文の中央揃えは読みにくいので中身は左）。 */
.rec-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
.phil-body p{margin-inline:auto}

/* KENTA「棒線いらない」（2026-07-31）＝フッター上端の罫線。
   会社概要の表が罫線で終わっているので、その直下にもう1本引くと線が二重に見える。 */
.site-footer{border-top:none}

/* KENTA「それが、クラフトコアの約束です。の下の余白はもっと短く」（2026-07-31）
   理念は白地の静かな段なので、下に段の標準余白(56〜108px)＋最後の段落のmarginが
   重なって白が広く空いていた。最後の段落の下marginを消し、段の下padding も詰める。 */
.philosophy{padding-bottom:clamp(24px,3vw,44px)}
.phil-body p:last-child{margin-bottom:0}

/* KENTA「ここなんかいや」（2026-07-31）＝お問い合わせと会社概要の境目。
   お問い合わせ(白＋にじみ)と会社概要(透明＝白)が地続きで、**区切りが無いまま
   白がだらっと続いていた**。会社概要に薄い地色を与えて「締めの塊」にし、間も詰める。 */
.company{background:var(--paper);padding-top:clamp(30px,3.6vw,52px)}
#contact{padding-bottom:clamp(16px,2.4vw,32px)}

/* KENTA「余白詰める」（2026-07-31）＝強みと理念の間。
   強みの下padding＋理念の上padding が重なって白が広く空いていた。両方詰める。 */
#strength{padding-bottom:clamp(24px,3vw,44px)}
.philosophy{padding-top:clamp(30px,3.6vw,52px)}

/* KENTA「上の白の余白が多い、詰めて」（2026-07-31）＝フッターの上。
   会社概要の下padding＋フッターの上padding(48px)が重なって白が空いていた。 */
.company{padding-bottom:clamp(20px,2.6vw,36px)}
.site-footer{padding-top:clamp(22px,3vw,40px)}