/* 風つむぎ ― スタイル v1（和紙・藍・金糸） */
:root{
  --washi:#f4efe2;        /* 和紙 */
  --washi-2:#efe7d6;      /* 和紙やや濃い */
  --ink:#21384f;          /* 藍墨 */
  --ink-soft:#3c5670;
  --gold:#bb9a66;         /* 金糸（装飾＝線・枠・塗りはこのまま明るい金） */
  --gold-ink:#7c6033;     /* 金"文字"用の濃い金。和紙でAA4.5:1以上。明るい金#bb9a66は文字だと約2.3:1で読みづらいため文字だけ濃く（検品2026-06-26） */
  --muted:#6f6552;        /* 薄茶（本文・注記・キャプション用）。和紙背景でAA4.5:1を満たすよう一段濃く（検品2026-06-26） */
  --line:#ded4be;        /* 罫線をひと段やわらかく */
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{color-scheme:light}
body{
  font-family:"Zen Old Mincho",serif;
  color:var(--ink);
  background:var(--washi);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  /* 日本語の改行：既定の禁則(line-break:strict)に任せて自然に折り返す。
     keep-all を外したので、長文が語の途中で強制的に割れることがなくなる。
     対応ブラウザ(Chrome系)では下の auto-phrase が文節単位でさらに整える。 */
  word-break:normal;
  overflow-wrap:break-word;
  line-break:strict;
  text-wrap:pretty;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
::selection{background:rgba(187,154,102,.22);color:var(--ink)}

/* ヘッダー */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,5vw,48px);
  background:rgba(244,239,226,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:10px}
.logo-mark{
  width:26px;height:14px;align-self:center;
  border-top:2px solid var(--gold);
  border-radius:50%/100% 100% 0 0;
  transform:rotate(-4deg);opacity:.9;
}
.logo-ja{font-weight:700;font-size:1.35rem;letter-spacing:.12em}
.logo-en{font-family:"Cormorant Garamond",serif;font-size:.7rem;letter-spacing:.28em;color:var(--muted)}
nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px)}
nav a{font-size:.92rem;letter-spacing:.06em;color:var(--ink-soft);white-space:nowrap}
nav a:hover{color:var(--gold-ink)}
.nav-cta{
  border:1px solid var(--gold);border-radius:999px;
  padding:6px 16px;color:var(--gold-ink)!important;
}
.nav-cta:hover{background:var(--gold);color:#fff!important}

/* ヒーロー */
.hero{
  position:relative;text-align:center;
  padding:clamp(90px,16vw,170px) 20px clamp(70px,11vw,120px);
  overflow:hidden;
  /* 引き算版：富士の雲海(IMG_5744)を白で薄く敷く。静かな下地に雲の気配だけ残す */
  background-image:linear-gradient(rgba(244,239,226,.66),rgba(244,239,226,.80)),url('hero-clouds.jpg');
  background-size:cover;
  background-position:center 42%;
}
.hero .thread{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hero .thread svg{width:min(840px,96vw);height:175px}
.wl{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:1600;stroke-dashoffset:1600}
/* 引き算版：3本線は一度描いて静止（永続スウェイは止める＝死守は「線の存在」） */
.wl1{stroke:var(--gold);opacity:.6;animation:draw 3s ease .70s forwards, windSway1 7.3s ease-in-out 4.32s infinite}
.wl2{stroke:var(--ink-soft);opacity:.26;animation:draw 3.5s ease 1.0s forwards, windSway2 9.1s ease-in-out 4.92s infinite}
.wl3{stroke:var(--gold);opacity:.34;animation:draw 3.2s ease 1.30s forwards, windSway3 6.2s ease-in-out 4.02s infinite}
@keyframes draw{to{stroke-dashoffset:0}}
/* 3本の糸＝それぞれ別の周期・位相で微かに泳ぐ（一斉でなく個別＝風）。translateはSVGユーザ単位(600×160)で数px相当 */
@keyframes windSway1{0%,100%{transform:translate(0,0)}26%{transform:translate(-2px,-4px)}55%{transform:translate(2px,2px)}80%{transform:translate(-1px,-1px)}}
@keyframes windSway2{0%,100%{transform:translate(0,0)}32%{transform:translate(3px,3px)}60%{transform:translate(-2px,-3px)}85%{transform:translate(1px,1px)}}
@keyframes windSway3{0%,100%{transform:translate(0,0)}20%{transform:translate(-2px,3px)}50%{transform:translate(2px,-3px)}78%{transform:translate(-1px,1px)}}
.hero-title{
  position:relative;font-size:clamp(3rem,11vw,6rem);font-weight:700;
  letter-spacing:.16em;text-indent:.16em;margin-bottom:.4em;
  animation:blowin 1.5s cubic-bezier(.2,.7,.2,1) .3s both;
}
.hero-sub{animation:fadeup 1.1s ease 1s both}
.hero-cat{animation:fadeup 1.1s ease 1.15s both}
.hero-lead{animation:fadeup 1.1s ease 1.3s both}
@keyframes blowin{from{opacity:0;transform:translateX(-46px) skewX(7deg)}to{opacity:1;transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.logo-img{height:clamp(60px,9.5vw,88px);width:auto;display:block}
.hero-logo{position:relative;z-index:2;width:min(560px,84vw);margin:0 auto}
.hero-logo img{display:block;width:100%;height:auto;margin:0 auto}
/* 結ばれて立った“後”に、風がひと撫でするよう一度だけ揺れて止まる（旦那指示・無限ループにしない） */
@keyframes breatheOnce{
  0%{transform:translateY(0)}
  40%{transform:translateY(-8px)}
  72%{transform:translateY(-1px)}
  100%{transform:translateY(0)}
}
/* ───────── ヒーローのロゴ演出（紐結び復活版 2026-06-22） ─────────
   方針：前の「金=左→右／藍=右→左のフェードワイプで淡路結びが編み上がる」を復活。
   ただし旦那の指示で永続スウェイ(揺れ続け)は全廃＝一度編み上がって静止する。
   layer-navy は logo-illust から藍成分を抽出して再生成（不具合で欠品していた）。 */
.logo-illust-wrap{position:relative;display:block;width:100%;z-index:2}
/* 結びの各糸(藍・金・風)を、わずかにズレた別周期で個別に泳がせる＝風（旦那指示2026-06-23）。ズレは小さく＝絡みが崩れない */
@keyframes knotSwayA{0%,100%{transform:translate(0,0)}33%{transform:translate(-1px,-3px)}66%{transform:translate(1px,1px)}}
@keyframes knotSwayB{0%,100%{transform:translate(0,0)}30%{transform:translate(2px,2px)}64%{transform:translate(-1px,-2px)}}
@keyframes knotSwayC{0%,100%{transform:translate(0,0)}28%{transform:translate(-1px,2px)}60%{transform:translate(1px,-2px)}}
@keyframes logoSwayText{0%,100%{transform:translate(0,0)}36%{transform:translate(2px,-4px)}66%{transform:translate(-1px,2px)}}
.logo-sizer{width:100%;height:auto;display:block;opacity:0}      /* レイアウト用の場所取り（不可視） */
.layer{position:absolute;top:0;left:0;width:100%;height:auto;display:block}

/* 金＝左→右のフェードワイプ（編み上がり・一度きり・揺れ無し） */
.lyr-gold{opacity:0;will-change:mask-position,opacity;
  -webkit-mask-image:linear-gradient(90deg,#000 0 49%,transparent 52%);
          mask-image:linear-gradient(90deg,#000 0 49%,transparent 52%);
  -webkit-mask-size:200% 100%;mask-size:200% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  animation:fwGold 2.3s cubic-bezier(.4,.6,.25,1) 1.54s forwards, knotSwayB 9.4s ease-in-out 4.92s infinite}
/* 藍＝右→左のフェードワイプ（編み上がり・一度きり・揺れ無し） */
.lyr-navy{opacity:0;will-change:mask-position,opacity;
  -webkit-mask-image:linear-gradient(90deg,transparent 0 48%,#000 51%);
          mask-image:linear-gradient(90deg,transparent 0 48%,#000 51%);
  -webkit-mask-size:200% 100%;mask-size:200% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0% 0;mask-position:0% 0;
  animation:fwNavy 2.3s cubic-bezier(.4,.6,.25,1) 1.54s forwards, knotSwayA 8.2s ease-in-out 4.52s infinite}
@keyframes fwGold{
  0%  {opacity:0;-webkit-mask-position:100% 0;mask-position:100% 0}
  10% {opacity:1}
  100%{opacity:1;-webkit-mask-position:0% 0;mask-position:0% 0}
}
@keyframes fwNavy{
  0%  {opacity:0;-webkit-mask-position:0% 0;mask-position:0% 0}
  10% {opacity:1}
  100%{opacity:1;-webkit-mask-position:100% 0;mask-position:100% 0}
}

/* 風(sky-wind)＝左上から定位置へ一度だけ舞い降りる（揺れ無し） */
.lyr-wind{opacity:0;will-change:transform,opacity,filter;
  animation:windIn 1.3s cubic-bezier(.22,.9,.32,1) 3.22s forwards, knotSwayC 7.1s ease-in-out 4.92s infinite}
@keyframes windIn{
  from{opacity:0;transform:translate3d(-40px,-26px,0);filter:blur(5px)}
  to  {opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}

/* 文字「風つむぎ」＝右下から一度だけ運ばれてくる（行きつ戻りつ禁止） */
.logo-text{will-change:transform,opacity,filter;
  animation:textIn 1.3s cubic-bezier(.22,.9,.32,1) 3.22s both, logoSwayText 8.4s ease-in-out 5.12s infinite}
@keyframes textIn{
  from{opacity:0;transform:translate3d(22px,12px,0);filter:blur(5px)}
  to  {opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}

/* 風の渦＝開幕に左→右へ数本さっと流す（3本線と一緒に・一度きり） */
.gusts{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.gust{position:absolute;left:0;opacity:0;width:clamp(240px,36vw,480px);height:auto;will-change:transform,opacity}
@keyframes gustFlow{
  0%  {opacity:0;transform:translate3d(-40vw,0,0) scale(var(--s,1)) rotate(var(--r,0deg))}
  18% {opacity:var(--o,.5)}
  82% {opacity:var(--o,.5)}
  100%{opacity:0;transform:translate3d(130vw,0,0) scale(var(--s,1)) rotate(var(--r,0deg))}
}
.g1{top:24%;--s:.95;--o:.62;--r:-3deg;animation:gustFlow 2.2s ease-in .00s 1}
.g2{top:50%;--s:1.35;--o:.50;--r:2deg; animation:gustFlow 2.7s ease-in .35s 1}
.g3{top:37%;--s:.70;--o:.66;--r:-1deg;animation:gustFlow 1.9s ease-in .70s 1}
.g4{top:60%;--s:1.10;--o:.45;--r:3deg; animation:gustFlow 2.4s ease-in 1.05s 1}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* 引き算版：背景が和紙の無地グラデになったので、文字の光彩(ハロー)は撤去 */
.hero-sub{position:relative;font-size:clamp(1.15rem,3.4vw,1.7rem);font-weight:600;margin-bottom:1.1em}
.hero-cat{position:relative;color:var(--ink-soft);font-weight:600;font-size:clamp(.9rem,2.4vw,1.12rem);letter-spacing:.04em;margin-bottom:1.6em}
.hero-cat strong{color:var(--gold-ink);font-weight:700;letter-spacing:.06em}
.hero-lead{position:relative;color:var(--ink-soft);font-weight:600;font-size:clamp(.92rem,2.4vw,1.05rem);margin-bottom:2em}
/* 主役(hero-sub)に従える小さなメタ行：肩書と射程を控えめに。テレビ20年はメインから外し独立扱いへ（旦那の意） */
.hero-meta{position:relative;font-size:clamp(.92rem,2.2vw,1.02rem);letter-spacing:.07em;color:var(--ink-soft);margin-bottom:1.5em}
.hero-meta .dot{color:var(--ink-soft);margin:0 .7em}
.hero-cred .en-num{font-family:"Zen Old Mincho",serif;color:var(--gold-ink);font-size:1.12em;letter-spacing:.04em;margin:0 .1em;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
/* 主役CTA＝金の一滴をここに集約（憲法5条/tone五）。文字は読みやすく藍、枠と矢印で金を効かせ、hoverでふわっと満ちる */
.btn{
  position:relative;display:inline-block;border:1px solid var(--gold);
  padding:12px 34px;border-radius:999px;letter-spacing:.12em;font-size:.95rem;
  color:var(--ink);
  background:rgba(244,239,226,.62);backdrop-filter:blur(2px);
  transition:background .35s ease,color .35s ease;
}
.btn::after{content:"→";margin-left:.5em;color:var(--gold-ink);display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1),color .35s ease}
.btn:hover{background:var(--gold);color:var(--washi);text-shadow:none}
.btn:hover::after{color:var(--washi);transform:translateX(4px)}
/* CTA直下の安心注記（ボタンは短く保ち、得は控えめに添える＝tone一・静けさ） */
.btn-note{margin-top:.85em;font-size:.82rem;color:var(--muted);letter-spacing:.06em}

/* スマホ追従CTA（PCは非表示。スマホはナビが畳まれるので常時下部に固定） */
.sticky-cta{display:none;white-space:nowrap;position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:60;background:var(--ink);color:var(--washi)!important;padding:13px 40px;border-radius:999px;letter-spacing:.12em;font-size:.95rem;box-shadow:0 6px 20px rgba(33,56,79,.25);transition:opacity .3s ease,transform .3s ease,background .35s ease}
.sticky-cta:hover{background:var(--gold)}
/* 相談セクション/フッターが視界に入ったら引っ込める＝フッター末尾の氏名・PPリンクを覆わせない（検品2026-06-26） */
.sticky-cta.is-hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(14px)}

/* 金糸の栞 ― 読み進むほどに、一本の金糸が上から紡がれていく（さりげない進捗の糸）。
   PCのみ・控えめ・動きを抑える設定の人には出さない。 */
.kinshi{position:fixed;top:0;right:clamp(10px,2vw,22px);width:1px;height:100vh;z-index:40;pointer-events:none;
  background:linear-gradient(180deg,rgba(187,154,102,.12),rgba(187,154,102,.12))}
.kinshi::before{content:"";position:absolute;top:0;left:0;width:100%;height:var(--read,0%);
  background:linear-gradient(180deg,rgba(187,154,102,.5),rgba(187,154,102,.8));transition:height .12s linear}
.kinshi::after{content:"";position:absolute;top:var(--read,0%);left:50%;width:5px;height:5px;border-radius:50%;
  background:var(--gold);transform:translate(-50%,-50%);box-shadow:0 0 7px rgba(187,154,102,.55);transition:top .12s linear}

/* セクション共通 */
.section{padding:clamp(76px,12vw,136px) clamp(20px,6vw,48px)}
.section.alt{background:var(--washi-2)}

/* スクロールで章が静かに立ち上がる（風のたゆたい）。動きを抑える設定の人には無効 */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
}
/* カード・料金に触れると、ふわりと浮く（品のある手触り） */
.card,.price-item{transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease}
.card:hover,.price-item:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(33,56,79,.09);border-color:var(--gold)}
.section-title{
  font-size:clamp(1.5rem,4vw,2.1rem);font-weight:700;letter-spacing:.10em;
  text-align:center;margin-bottom:2.1em;
}
.section-title span{display:block;font-size:.55em;font-weight:400;color:var(--muted);letter-spacing:.2em;margin-top:.5em}
.section-title::after{content:"";display:block;width:2.6em;height:2px;margin:.9em auto 0;border-radius:2px;
  background:linear-gradient(90deg,rgba(187,154,102,0),var(--gold) 50%,rgba(187,154,102,0))}
/* 「風つむぎとは？」だけ、金線の代わりに金の風スワール＝風の署名（要所に一箇所） */
.title-wind::after{width:clamp(66px,9vw,90px);height:clamp(22px,3vw,30px);margin:1.05em auto 0;
  border-radius:0;background:url('sky-wind_swirl_gold.png') center/contain no-repeat;opacity:.35}
/* セクション見出しの金線が、章の立ち上がりに合わせて中央から静かに引かれる（さりげない・一度きり） */
@media(prefers-reduced-motion:no-preference){
  .reveal .section-title:not(.title-wind)::after{transform:scaleX(0);transform-origin:center;transition:transform 1.05s cubic-bezier(.2,.7,.2,1) .3s}
  .reveal.in .section-title:not(.title-wind)::after{transform:scaleX(1)}
}
.prose{max-width:660px;margin:0 auto;line-height:2.02}
.prose p{margin-bottom:1.45em}
.prose.center{text-align:center}

/* 風つむぎとは：背景に水彩の気配をうっすら敷く（文字優先で淡く） */
#about{
  background-image:linear-gradient(rgba(244,239,226,.70),rgba(244,239,226,.82)),url('kt-bg.png');
  background-size:cover;background-position:center;
}

/* 風つむぎとは：英語サブ見出し・由来文・署名 */
.title-en{font-style:italic;letter-spacing:.04em;text-transform:none;font-size:.4em;margin-top:.2em;color:var(--muted);opacity:.7}
.about-origin{text-align:center;color:var(--ink-soft);max-width:600px;margin:0 auto 2.4em;line-height:2.2;font-size:1.04rem}.about-sign{text-align:right;color:var(--muted);font-size:.95rem;letter-spacing:.1em;margin-top:1.8em}
.wind-accent{width:clamp(150px,20vw,215px);height:auto;margin:2.2em 0 0 auto;opacity:.5}
.wind-divider{width:clamp(120px,16vw,168px);height:auto;margin:clamp(30px,5vw,52px) auto 0;opacity:.4}

/* 掛け算の帯 */
.combo-band{
  max-width:840px;margin:clamp(46px,6vw,72px) auto 0;
  padding:clamp(30px,4vw,44px) clamp(22px,4vw,46px);
  background:var(--washi);border:1px solid var(--line);border-radius:12px;text-align:center;
}
.combo-band h3{font-size:clamp(1.2rem,3vw,1.55rem);letter-spacing:.06em;margin-bottom:.8em;color:var(--ink)}
.combo-band p{color:var(--ink-soft);max-width:700px;margin:0 auto}
.combo-band p + p{margin-top:1.1em}   /* 段落分け時の間（旦那指示 2026-06-24） */

/* 日本語の改行を文節単位に（語の途中で切れるデタラメ改行を防ぐ） */
/* 日本語の折り返しを文節単位で整える。本文だけでなく見出し・凡例・
   キャプション・FAQまで漏れなく対象にし、語の途中で割れるのを防ぐ。
   auto-phrase 非対応ブラウザでは body の word-break:normal にフォールバックされる。 */
.prose p, .card p, .card li, .card h3, .card-note, .work p, .work h3,
.flow-step h3, .flow-step p, .hero-sub, .hero-lead, .hero-cat, .made .prose p,
.genba figcaption p, .genba figcaption h3,
.section-title, .section-lead, .combo-band h3, .combo-band p,
.faq-item h3, .faq-item p, .price-note, .contact-lead,
.ind-body h3, .ind-pain li, .ind-do, .ind-aside,
.panel-intro, .panel-foot, .gallery-lead, .sample-cap,
.show-item h4, .show-item p, .show-list li, .show-sub,
.app-card li,
.assure-lead, .assure-col h3, .assure-col p, .assure-list li, .assure-guide,
.price-item h3, .price-item p{
  word-break: auto-phrase;   /* Chrome/Edge：意味のまとまりで折り返す（見出しの語中割れ＝"伝わ／る"を防ぐ） */
  text-wrap: pretty;          /* 行末に1文字だけ孤立するのを抑える */
}

/* できること */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.2vw,36px);max-width:var(--maxw);margin:0 auto}
.card{
  background:var(--washi);border:1px solid var(--line);border-radius:10px;
  padding:clamp(28px,4.4vw,44px);
}
.section.alt .card{background:var(--washi)}
.card h3{font-size:1.34rem;margin-bottom:.9em;letter-spacing:.06em;font-weight:700}
.card h3::after{content:"";display:block;width:5em;height:2px;margin-top:.5em;border-radius:2px;
  background:linear-gradient(90deg,var(--gold) 6%,rgba(187,154,102,0))}
.card p{color:var(--ink-soft);margin-bottom:1em}
.card ul{list-style:none;border-top:1px dashed var(--line);padding-top:1em}
.card li{position:relative;padding-left:1.2em;color:var(--muted);font-size:.95rem;margin-bottom:.4em}
.card li::before{content:"・";position:absolute;left:0;color:var(--muted)}
/* 職種の見出し列（カード1：詳細はpanel-appへ預け、ここは名前だけ簡潔に。金で見出しとして立てる＝gold-inkは和紙でAA4.5:1） */
.card-roles{margin-top:1em;padding-top:1em;border-top:1px dashed var(--line);text-align:center;font-size:1.02rem;font-weight:700;color:var(--gold-ink);letter-spacing:.03em;line-height:1.9}
.card-note{margin-top:.7em;font-size:.92rem;color:var(--ink-soft)}
.card-note a{color:var(--gold-ink);border-bottom:1px solid var(--gold)}
/* 3本柱（映像/Web/AI）＝3列。1024以下は1列に畳む */
.cards.three{grid-template-columns:repeat(3,1fr)}
/* 3カードの下端を揃える＝実証/物証を各カードの底へ寄せ、左カードだけ重く見える不揃いを解消 */
.cards.three .card{display:flex;flex-direction:column}
.cards.three .card-proof{margin-top:auto}
@media(max-width:1024px){.cards.three{grid-template-columns:1fr}}
/* 安心ブロック（会社PCにAI怖い／守秘／何を入れればいいか分からない＝二つの声に答える 2026-06-27） */
.assure{max-width:940px;margin:0 auto;background:var(--washi);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:clamp(24px,3.6vw,40px)}
.assure > p{color:var(--ink-soft);line-height:1.95;margin-bottom:1.3em}
.assure strong{color:var(--ink)}
.assure-lead{text-align:center;font-size:1.04rem;color:var(--ink);max-width:700px;margin:0 auto 1.9em!important;line-height:1.95}
.assure-lead strong{color:var(--gold-ink)}
.assure-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.2vw,40px)}
.assure-col h3{font-size:1.08rem;font-weight:700;color:var(--ink);margin-bottom:.8em;letter-spacing:.03em;line-height:1.6;padding-bottom:.55em;border-bottom:1px solid var(--line)}
.assure-col > p{color:var(--ink-soft);line-height:1.95;margin-bottom:1em}
.assure-col strong{color:var(--ink)}
.assure-guide{font-size:.92rem}
.assure-guide a{color:var(--gold-ink);border-bottom:1px solid var(--gold)}
@media(max-width:760px){.assure-two{grid-template-columns:1fr}}
.assure-list{list-style:none;margin:0;padding-top:1.2em;border-top:1px dashed var(--line);display:grid;gap:.85em}
.assure-list li{position:relative;padding-left:1.6em;color:var(--ink-soft);font-size:.97rem;line-height:1.85}
.assure-list li::before{content:"✓";position:absolute;left:0;color:var(--gold-ink);font-weight:700}
.assure-foot{max-width:840px;margin:1.9em auto 0;padding-top:1.5em;border-top:1px solid var(--line);text-align:center;color:var(--ink-soft);font-size:.97rem;line-height:1.95;word-break:auto-phrase;text-wrap:pretty}
.assure-foot strong{color:var(--ink)}
/* 業種別サンプル下の「こんな仕組みも提案」枠 */
.ind-app{margin-top:16px;background:var(--washi-2);border:1px dashed var(--gold);border-radius:10px;padding:18px 20px}
.ind-app h4{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.7em;letter-spacing:.03em;line-height:1.6}
.ind-app-note{font-size:.74em;font-weight:400;color:var(--muted);margin-left:.3em}
.ind-app ul{list-style:none;margin:0;padding:0;display:grid;gap:.5em}
.ind-app li{position:relative;padding-left:1.2em;font-size:.9rem;color:var(--ink-soft);line-height:1.8}
.ind-app li::before{content:"→";position:absolute;left:0;color:var(--gold-ink)}
.ind-app li strong{color:var(--ink)}
.ind-app-soon{margin-top:.9em;font-size:.82rem;color:var(--muted);line-height:1.7}

/* これまで */
.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,26px);max-width:var(--maxw);margin:0 auto}
.work{background:var(--washi);border:1px solid var(--line);padding:26px 28px 28px;border-radius:10px;box-shadow:none}
.section.alt .work{background:var(--washi-2)}
.work-tag{display:inline-block;font-size:.72rem;letter-spacing:.22em;color:var(--gold-ink);margin-bottom:.7em;padding-bottom:.55em;border-bottom:1px solid var(--line)}
.work p{color:var(--ink-soft);font-size:.97rem}
.work strong{color:var(--ink)}
.works-bridge{font-size:1rem;color:var(--ink-soft)}
.works-bridge strong{color:var(--ink)}

/* ── 業種別できること（制作サンプル） ── */
.ind{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(22px,3.6vw,46px);align-items:center;max-width:var(--maxw);margin:0 auto clamp(40px,6vw,66px)}
.ind.rev .ind-body{order:2}
.industries-intro p{text-wrap:balance}
.ind-body h3{font-size:1.18rem;font-weight:700;letter-spacing:.04em;color:var(--ink);margin:.2em 0 .9em;line-height:1.7}
.ind-pain{list-style:none;margin:0 0 1.2em;padding:0}
.ind-pain li{position:relative;padding-left:1.25em;color:var(--ink-soft);font-size:.95rem;margin-bottom:.55em;line-height:1.8}
.ind-pain li::before{content:"";position:absolute;left:0;top:.7em;width:.5em;height:.5em;border:1px solid var(--gold);border-radius:50%}
.ind-do{color:var(--ink);font-size:.96rem;padding-top:1.1em;border-top:1px solid var(--line);line-height:1.9}
.ind-do strong,.ind-aside strong{color:var(--gold-ink)}
.ind-aside{margin-top:1em;font-size:.92rem;color:var(--ink-soft);line-height:1.85}
.ind-samples{display:grid;gap:18px}
.sample{background:var(--washi);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease}
.section.alt .sample{background:var(--washi-2)}
.sample:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(33,56,79,.10);border-color:var(--gold)}
.sample-thumb{display:block;position:relative}
.sample-img{aspect-ratio:16/10;background:var(--washi-2) center/cover no-repeat}
.sample-badge{position:absolute;top:10px;left:10px;background:rgba(33,56,79,.86);color:var(--washi);font-size:.66rem;letter-spacing:.12em;padding:.3em .85em;border-radius:4px}
.sample figcaption{padding:14px 17px 16px}
.sample-cap{font-size:.9rem;color:var(--ink-soft);line-height:1.82;margin-bottom:.7em}
.sample-cap strong{color:var(--ink)}
.sample-links{font-size:.86rem;letter-spacing:.04em}
.sample-links a{color:var(--gold-ink);border-bottom:1px solid var(--line);padding-bottom:1px}
.sample-links a:hover{border-color:var(--gold)}
.ind-extra{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.6vw,46px);max-width:var(--maxw);margin:clamp(8px,2vw,20px) auto 0}
.ind-ex .work-tag{margin-bottom:1em}
.ind-note{max-width:var(--maxw);margin:1.4em auto 0;text-align:center;color:var(--muted);font-size:.88rem;line-height:1.8}
.ind-close p{color:var(--ink-soft)}
.ind-close a{color:var(--gold-ink);border-bottom:1px solid var(--line);padding-bottom:1px}
.ind-close a:hover{border-color:var(--gold)}
@media(max-width:760px){
  .ind{grid-template-columns:1fr}
  .ind.rev .ind-body{order:0}
  .ind-extra{grid-template-columns:1fr}
}

/* 料金 */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);max-width:var(--maxw);margin:0 auto}
.price-item{background:var(--washi);border:1px solid var(--line);border-radius:10px;padding:clamp(20px,2.8vw,30px);text-align:center}
.price-item h3{font-size:1.05rem;margin-bottom:.4em;letter-spacing:.04em}
.price-num{font-family:"Zen Old Mincho",serif;font-size:1.8rem;color:var(--gold-ink);margin:.2em 0 .6em;line-height:1.1;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.price-item p:not(.price-num){font-size:.95rem;color:var(--ink-soft);line-height:1.78;margin:0}   /* 数字に対し説明が小さすぎて飛ぶのを是正（検品2026-06-26） */
.price-note{font-size:.95rem;color:var(--ink-soft)}

/* カード内の実証注記 */
.card-proof{margin-top:.9em;padding-top:.8em;border-top:1px dashed var(--line);font-size:.86rem;color:var(--muted)}

/* 実証カードの“物証”サムネ（クリックで原寸が別タブ） */
.proof-shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:.7em}
.proof-shot{display:block;text-decoration:none}
.proof-shot img{width:100%;height:170px;object-fit:cover;object-position:top center;
  border:1px solid var(--line);border-radius:6px;display:block;background:#1c1c1e;
  transition:filter .2s ease,box-shadow .2s ease}
.proof-shot:hover img{filter:brightness(1.06);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.proof-shot span{display:block;font-size:.78rem;color:var(--muted);margin-top:.35em;text-align:center}

/* お客様の声（立ち上げ期＝正直な開示＋協力者特別価格） */
.voice-offer{margin-top:1.6em;padding-top:1.2em;border-top:1px dashed var(--line);color:var(--ink-soft);font-size:.95rem}
/* お悩み3つを左寄せの枠で1つずつ立てる＝中央寄せで一塊に溶けるのを解消（検品2026-06-26） */
.voice-pains{list-style:none;max-width:640px;margin:0 auto 1.2em;display:grid;gap:14px}
.voice-pains li{text-align:left;background:var(--washi-2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;padding:15px 20px;color:var(--ink-soft);font-size:1.02rem;line-height:1.8}
.voice-pains li strong{color:var(--ink);font-weight:700}

/* FAQ（申し込み前の不安を先回り） */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{padding:1.3em 0;border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item h3{font-size:1.08rem;font-weight:600;color:var(--ink);margin-bottom:.6em;letter-spacing:.04em;line-height:1.7}
.faq-item h3::before{content:"Q.";color:var(--gold-ink);font-weight:700;margin-right:.4em}
.faq-item p{color:var(--ink-soft);line-height:1.95;margin:0}

/* このサイト */
.made{background:linear-gradient(180deg,var(--washi),var(--washi-2))}
.made .section-title{font-size:clamp(1.3rem,3.2vw,1.65rem)}
.made .prose p{font-size:.92rem;color:var(--ink-soft);max-width:560px;margin:0 auto}
/* このサイト：実演＋詩×数字の一行と、閉じの一息（金スワール） */
.made-line{margin-top:1.5em;font-size:.92rem;color:var(--ink-soft);line-height:2.05}
.made-line strong{color:var(--gold-ink)}
.made-swirl{width:clamp(150px,22vw,228px);height:auto;margin:clamp(26px,4vw,44px) auto 0;opacity:.55}

/* 相談 */
.contact-mail{margin-top:1.4em;font-size:1.2rem}
.contact-mail a{color:var(--gold-ink);border-bottom:1px solid var(--gold)}
.contact-mail .note{display:block;font-size:.8rem;color:var(--muted);margin-top:.6em}

/* 相談フォーム ― 和紙・藍・金糸に馴染ませる */
.contact-form{max-width:640px;margin:2.6em auto 0;text-align:left}
.cf-field{border:none;margin:0 0 1.6em}
.cf-field legend{
  font-size:1.06rem;font-weight:700;letter-spacing:.04em;color:var(--ink);
  text-align:center;width:100%;margin-bottom:1.1em;
}
.cf-field legend .cf-hint{display:block;font-size:.8rem;font-weight:400;color:var(--muted);letter-spacing:.04em;margin-top:.4em}
.cf-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cf-opt{
  position:relative;display:flex;align-items:flex-start;gap:.7em;cursor:pointer;
  background:var(--washi);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.cf-opt:hover{border-color:var(--gold)}
.cf-opt input{position:absolute;opacity:0;width:0;height:0}
.cf-box{
  flex:0 0 auto;width:20px;height:20px;margin-top:.15em;border-radius:6px;
  border:1.5px solid var(--gold);background:var(--washi);
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.cf-box::after{content:"";width:10px;height:10px;border-radius:3px;background:var(--gold);transform:scale(0);transition:transform .18s ease}
.cf-opt input:checked ~ .cf-box::after{transform:scale(1)}
.cf-opt input:checked ~ .cf-opt-text{color:var(--ink)}
.cf-opt:has(input:checked){border-color:var(--gold);background:rgba(187,154,102,.07);box-shadow:0 4px 16px rgba(33,56,79,.06)}
.cf-opt input:focus-visible ~ .cf-box{box-shadow:0 0 0 3px rgba(187,154,102,.3)}
.cf-opt-text{font-size:.98rem;color:var(--ink-soft);line-height:1.5}
.cf-opt-text small{display:block;font-size:.78rem;color:var(--muted);margin-top:.15em;letter-spacing:.02em}

.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-label{display:block;font-size:.9rem;color:var(--ink-soft);letter-spacing:.04em;margin-bottom:1.1em}
.cf-tag{font-size:.7rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:.4em;letter-spacing:.06em}
.cf-tag.cf-req{color:var(--gold-ink);border-color:var(--gold)}
.cf-label input,.cf-label textarea{
  width:100%;margin-top:.5em;
  font-family:inherit;font-size:1rem;color:var(--ink);line-height:1.7;
  background:var(--washi);border:1px solid var(--line);border-radius:8px;
  padding:.7em .9em;transition:border-color .2s ease,box-shadow .2s ease;
}
.cf-label textarea{resize:vertical;min-height:110px}
.cf-label input:focus,.cf-label textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(187,154,102,.16)}
.cf-label input::placeholder,.cf-label textarea::placeholder{color:#b6ac98}

.cf-gotcha{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.cf-submit-wrap{text-align:center;margin-top:1.8em}
.cf-submit{cursor:pointer;font-family:inherit}
.cf-submit:disabled{opacity:.5;cursor:default}
.cf-note{font-size:.8rem;color:var(--muted);margin-top:1.2em;line-height:1.8}
.cf-note a{color:var(--gold-ink);border-bottom:1px solid var(--line)}

.cf-status{text-align:center;margin-top:1em;font-size:.9rem;min-height:1.2em}
.cf-status-err{color:#a8442f}

.cf-thanks{text-align:center;padding:1.5em 0}
.cf-thanks-ttl{font-size:1.2rem;font-weight:700;color:var(--ink);letter-spacing:.04em;margin-bottom:.8em}
.cf-thanks p{color:var(--ink-soft)}
.cf-thanks a{color:var(--gold-ink);border-bottom:1px solid var(--gold)}

/* フッター */
.site-footer{text-align:center;padding:46px 20px;border-top:1px solid var(--line);color:var(--muted)}
.footer-brand{font-weight:700;letter-spacing:.12em;color:var(--ink)}
.footer-note{font-size:.82rem;margin-top:.4em;letter-spacing:.1em}

/* 現場ギャラリー（写真＋下の文章枠） */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.6vw,28px);max-width:var(--maxw);margin:0 auto}
.genba{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--washi);border:1px solid var(--line);border-radius:10px;
  transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
}
.genba:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(33,56,79,.09);border-color:var(--gold)}
.genba-img{aspect-ratio:16/9;background:var(--washi-2) center/cover no-repeat}
.genba figcaption{padding:clamp(16px,2.4vw,24px)}
.genba figcaption h3{font-size:1.12rem;font-weight:700;letter-spacing:.04em;margin-bottom:.7em;color:var(--ink)}
.genba figcaption h3 span{font-size:.74em;font-weight:400;color:var(--ink-soft);letter-spacing:.06em;margin-left:.5em}
.genba figcaption p{font-size:.92rem;color:var(--ink-soft);line-height:1.85}
.genba figcaption p + p{margin-top:.9em}   /* 段落分け時の間（旦那指示 2026-06-24） */

/* ───────── アコーディオン（6枠のうち3枠＝クリックで下にフル幅で開く 2026-06-27 嫁レビュー反映） ───────── */
.gallery-lead{max-width:680px;margin:0 auto clamp(22px,3vw,36px);color:var(--ink-soft);font-size:.98rem;line-height:1.9}
.gallery-lead strong{color:var(--gold-ink)}
.genba.is-exp figcaption{display:flex;flex-direction:column}
/* 「詳しく見る」トグル＝金線のピル。hoverで金が満ちる（CTAの作法に揃える） */
.genba-toggle{margin-top:1.1em;width:100%;display:flex;align-items:center;justify-content:center;gap:.6em;cursor:pointer;
  font-family:inherit;font-size:.9rem;letter-spacing:.08em;color:var(--gold-ink);
  background:rgba(187,154,102,.06);border:1px solid var(--gold);border-radius:999px;padding:.62em 1.2em;
  transition:background .3s ease,color .3s ease}
.genba-toggle:hover{background:var(--gold);color:var(--washi)}
.gt-icon{position:relative;width:13px;height:13px;flex:0 0 auto}
.gt-icon::before,.gt-icon::after{content:"";position:absolute;background:currentColor;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.gt-icon::before{top:50%;left:0;width:100%;height:1.6px;transform:translateY(-50%)}          /* 横棒 */
.gt-icon::after{left:50%;top:0;height:100%;width:1.6px;transform:translateX(-50%)}            /* 縦棒（合わせて＋） */
.genba-toggle[aria-expanded="true"] .gt-icon::after{transform:translateX(-50%) scaleY(0)}     /* 開くと－ */

/* パネル＝gridのフル幅行として、0fr→1frで高さを滑らかに開く（masonryの隙間を作らない） */
.ind-panel{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.ind-panel.is-open{grid-template-rows:1fr}
.ind-panel-inner{overflow:hidden;min-height:0}
.ind-panel-pad{padding:clamp(22px,3vw,38px) clamp(2px,2vw,18px) clamp(6px,1.5vw,14px)}
.panel-intro{max-width:760px;margin:0 auto 1.9em;text-align:center;color:var(--ink-soft);font-size:.98rem;line-height:1.95}
.panel-intro strong{color:var(--ink)}
.panel-foot{max-width:720px;margin:1.7em auto 0;text-align:center;color:var(--ink-soft);font-size:.92rem;line-height:1.9}
.panel-foot a{color:var(--gold-ink);border-bottom:1px solid var(--line)}

/* 自社自動化ショーケース（上位3＋羅列＋締め） */
.show3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,22px);max-width:var(--maxw);margin:0 auto}
.show-item{background:var(--washi);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:10px;padding:clamp(18px,2.6vw,28px)}
.show-item h4{font-size:1.04rem;font-weight:700;color:var(--ink);margin-bottom:.6em;line-height:1.6;letter-spacing:.02em}
.show-item p{font-size:.92rem;color:var(--ink-soft);line-height:1.85;margin:0}
.show-item strong{color:var(--gold-ink)}
/* show-item の物証ショット（クリックで原寸が別タブ） */
.show-shot{display:block;margin-top:1.1em;text-decoration:none}
.show-shot .img-frame, .show-shot img{border-radius:8px;display:block;width:100%}
.show-shot img{border:1px solid var(--line);transition:filter .2s ease,box-shadow .2s ease}
.show-shot:hover img{filter:brightness(1.04);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.show-shot.doc img{height:200px;object-fit:cover;object-position:top center;background:#1c1c1e}
.show-shot.graphic img{height:auto;background:var(--washi)}
.show-shot span{display:block;font-size:.78rem;color:var(--muted);margin-top:.4em;text-align:center}
/* 短い文節の孤立改行を防ぐ（塊で折り返す） */
.nobr{white-space:nowrap}
/* 長めの決め台詞：PC/中間幅だけ塊で折り返し、SP幅は自然な折り返しに戻す（2026-08-08） */
.nobr-pc{white-space:nowrap}
@media(max-width:720px){.nobr-pc{white-space:normal}}
/* 物証ライトボックス（原寸どまり＝引き伸ばさない＝荒れない） */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(20,16,10,.82);padding:4vmin;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);background:#1c1c1e;cursor:default}
.lightbox-close{position:fixed;top:14px;right:22px;color:#fff;font-size:2.1rem;line-height:1;
  background:none;border:none;cursor:pointer;opacity:.85}
.lightbox-close:hover{opacity:1}
/* 安全装置の「具体例」ボタン＋ターミナル風ポップアップ */
.ex-btn{display:inline-block;margin-left:.3em;padding:.1em .8em;font-size:.82rem;
  color:var(--gold-ink);background:none;border:1px solid var(--gold);border-radius:999px;cursor:pointer;
  white-space:nowrap;transition:background .2s,color .2s}
.ex-btn:hover{background:var(--gold);color:#fff}
.popup{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(20,16,10,.82);padding:5vmin;overflow-y:auto}
.popup.open{display:flex}
.popup-inner{position:relative;max-width:560px;width:100%}
.popup-close{position:absolute;top:-2.2em;right:0;color:#fff;font-size:1.9rem;line-height:1;
  background:none;border:none;cursor:pointer;opacity:.85}
.popup-close:hover{opacity:1}
.term-card{background:#1c1c1e;border-radius:10px;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.5);text-align:left}
.term-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;background:#2a2a2d}
.term-dot{width:11px;height:11px;border-radius:50%;background:#555}
.term-dot:first-child{background:#e2655b}
.term-dot:nth-child(2){background:#e0b44e}
.term-dot:nth-child(3){background:#5db36a}
.term-title{margin-left:8px;color:#9a9a9a;font-size:.76rem;letter-spacing:.1em}
.term-body{margin:0;padding:17px 18px;color:#d6d6d6;font-size:.85rem;line-height:1.95;
  font-family:"SFMono-Regular",Consolas,"Courier New",monospace;white-space:pre-wrap;word-break:break-word}
.term-prompt{color:#5db36a;margin-right:.4em}
.term-alert{color:#ef7a70}
.term-stop{color:#fff;font-weight:700}
.term-foot{margin:0;padding:0 18px 16px;color:#a8a8a8;font-size:.78rem;line-height:1.7}
/* “仕事の型”の実物ポップアップ（実証行の「実際の画面を見る」から） */
.popup-buki-inner{max-width:980px}
.buki-shots{display:flex;gap:16px;justify-content:center;align-items:flex-start}
.buki-shots figure{margin:0;max-width:46%}
.buki-shots img{display:block;width:100%;height:auto;max-height:74vh;object-fit:contain;
  border-radius:8px;border:1px solid rgba(255,255,255,.16);background:#1c1c1e}
.buki-shots figcaption{margin-top:.6em;text-align:center;color:#cfcabb;font-size:.82rem;line-height:1.5}
.buki-lead{max-width:760px;margin:0 auto clamp(16px,2.4vw,24px);text-align:center}
.buki-lead h3{color:#f4efe2;font-size:1.05rem;font-weight:700;letter-spacing:.04em;line-height:1.7;margin-bottom:.7em}
.buki-lead p{color:#cfcabb;font-size:.9rem;line-height:1.95}
@media(max-width:760px){
  .buki-shots{flex-direction:column;align-items:center;gap:18px}
  .buki-shots figure{max-width:88%}
  .buki-shots img{max-height:40vh}
}
.show-list{list-style:none;max-width:780px;margin:clamp(20px,3vw,30px) auto 0;display:grid;gap:.7em}
.show-list li{position:relative;padding-left:1.5em;color:var(--ink-soft);font-size:.95rem;line-height:1.85}
.show-list li::before{content:"\25B8";position:absolute;left:0;color:var(--gold-ink)}
.show-list strong{color:var(--ink)}
.show-list-lead{max-width:780px;margin:clamp(22px,3vw,30px) auto 0;color:var(--ink);font-weight:700;font-size:.97rem;letter-spacing:.03em}
.show-list-lead + .show-list{margin-top:.7em}
.show-list-foot{max-width:780px;margin:1em auto 0;color:var(--ink-soft);font-size:.95rem;line-height:1.85}
.show-close{font-size:1rem;color:var(--ink)}
.show-close strong{color:var(--gold-ink)}
/* AI枠：自社の道具(show3/list)の後に「お客様の領域でも」の実績2枚を仕切る小見出し */
.show-sub{max-width:var(--maxw);margin:clamp(28px,3.8vw,42px) auto .9em;text-align:center;font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:.04em;line-height:1.6}

/* 業種別アプリ提案カタログ（画面は準備中・テキスト提案） */
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,26px);max-width:var(--maxw);margin:0 auto}
.app-card{background:var(--washi-2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:clamp(18px,2.6vw,28px)}
.app-card .work-tag{margin-bottom:1em}
.app-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.app-card li{position:relative;padding-left:1.3em;font-size:.92rem;color:var(--ink-soft);line-height:1.8}
.app-card li::before{content:"\2192";position:absolute;left:0;color:var(--gold-ink)}
.app-card li strong{color:var(--ink);display:block;margin-top:.2em}  /* 決め台詞は独立行に追い出し1行に収める（行末でのぶら下がり割れを防ぐ・事故防止§6） */
/* 全幅の「会社の事務全般」カード：業種別の前に置く土台。リストは2列、カテゴリ名はインライン */
.app-card-wide{grid-column:1 / -1;border-left-color:var(--gold-ink)}
.app-card-wide .app-card-lead{color:var(--ink-soft);font-size:.93rem;line-height:1.85;margin:0 0 1.1em}
.app-card-wide .app-card-lead strong{color:var(--ink)}
.app-card-wide ul{grid-template-columns:1fr 1fr;gap:.6em 2.2em}
.app-card-wide li strong{display:inline;margin:0;color:var(--gold-ink)}
.app-card-wide .app-card-foot{margin:1.1em 0 0;color:var(--ink-soft);font-size:.9rem;line-height:1.8}

/* パネル末尾の「閉じる」＝長く開いた後、上のトグルまで戻らず畳んで元のカードへ帰れる（旦那要望 2026-06-27） */
.panel-close{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;
  margin-top:clamp(24px,3.4vw,38px);cursor:pointer;font-family:inherit;
  font-size:.86rem;letter-spacing:.14em;color:var(--gold-ink);
  background:rgba(187,154,102,.05);border:1px dashed var(--gold);border-radius:999px;padding:.72em 1.2em;
  transition:background .25s ease,color .25s ease}
.panel-close::before{content:"\25B2";font-size:.72em;position:relative;top:-.05em}
.panel-close:hover{background:var(--gold);color:var(--washi)}

@media(max-width:760px){
  .show3{grid-template-columns:1fr}
  .app-grid{grid-template-columns:1fr}
  .app-card-wide ul{grid-template-columns:1fr}
}

/* ご相談の流れ */
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);max-width:var(--maxw);margin:0 auto}
.flow-step{text-align:center;padding:8px;min-width:0}
.flow-num{
  width:46px;height:46px;margin:0 auto .9em;border-radius:50%;border:1px solid var(--gold);
  color:var(--gold-ink);display:flex;align-items:center;justify-content:center;
  font-family:"Zen Old Mincho",serif;font-size:1.35rem;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;
}
.flow-step h3{font-size:1.05rem;margin-bottom:.5em;letter-spacing:.04em}
.flow-step p{font-size:.9rem;color:var(--ink-soft)}

/* レスポンシブ */
@media(max-width:1000px){
  nav a:not(.nav-cta){display:none}   /* 中間幅で項目が2行に折れるのを防ぐ。ロゴ＋相談ボタンだけ残す */
}
@media(max-width:560px){
  .hide-sp{display:none}              /* スマホでは固定改行を外し、自然な折り返しに任せる */
}
@media(max-width:720px){
  .sticky-cta{display:block}
  body{padding-bottom:86px}   /* 追従CTAの居場所を確保し、フッター末尾(氏名・PPリンク)を覆わせない（検品2026-06-26） */
  .cards,.works-grid,.gallery{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr 1fr}
  .flow-steps{grid-template-columns:1fr 1fr}
  .cf-options{grid-template-columns:1fr}
  .cf-row{grid-template-columns:1fr}
  .logo-en{display:none}
  .kinshi{display:none}
}
@media(max-width:480px){
  /* スマホ狭幅：価格カードは1列に（大きな価格数字を1行で収め、数字割れ・首つり・横はみ出しを防ぐ・2026-07-16） */
  .price-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .kinshi{display:none}
  .wl{animation:none;stroke-dashoffset:0}
  .hero .thread{animation:none;transform:none}
  .hero-sub,.hero-cat,.hero-lead,.hero-logo,.logo-illust-wrap,.logo-text,.layer{animation:none;opacity:1;filter:none;transform:none}
  .lyr-gold,.lyr-navy{-webkit-mask-image:none;mask-image:none}
  .gusts{display:none}
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* セクション末尾の受け皿への導線（2026-08-08 C8） */
.sec-cta{margin:40px 0 0;text-align:left}
.sec-cta a{display:inline-block;padding:16px 24px;border:1px solid var(--gold);color:var(--ink);text-decoration:none;font-size:1rem;transition:background .2s ease}
.sec-cta a:hover,.sec-cta a:focus-visible{background:var(--washi-2)}

/* 料金の保証（2026-08-08 C4） */
.price-hosho{margin:32px 0 0;padding:24px;background:var(--washi-2);line-height:1.9}