/* お問い合わせ：門の表札と、その横の連絡先。背骨＝本文の枠の中央＋12px（12列・列間24pxの7列目の左端） */
#contact.ct{padding-top:0;padding-bottom:var(--gap);--lg-num:24px;}
.ct a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* ---- A 頭：左＝題・リード／（間）／番号・台帳　右＝社名碑（上と右は裁ち落とし） ---- */
.ct-head{position:relative;}
.ct-head-txt{display:flex;flex-direction:column;width:calc(50% - 12px);min-height:clamp(600px,calc(100vh - 140px),760px);min-height:clamp(600px,calc(100svh - 140px),760px);padding-top:var(--gap);}
.ct-head-txt .sec-head{margin-bottom:24px;}
.ct-head-txt .lead{max-width:30em;text-wrap:balance;word-break:auto-phrase;}
.ct-tel{margin-top:auto;padding-top:32px;}
.ct-tel .tel-big{margin-top:0;}
/* 上の罫（g5）は site.css の .rv-rule::before が左から引く。ここで色を付けると最初から線が見えて動きが消えるので、席（1px）だけ取る */
.ct-ledger{margin-top:28px;border-top:1px solid transparent;}
.ct-lg{display:grid;grid-template-columns:176px minmax(0,1fr);column-gap:24px;align-items:baseline;align-content:center;min-height:64px;padding:12px 0;border-bottom:1px solid var(--line);}
.ct-lg dt{font-size:14px;line-height:1.7;color:var(--note);}
.ct-lg dd{margin:0;font-size:16px;line-height:1.7;color:var(--ink);}
.ct-lg .num-en{font-size:var(--lg-num);line-height:1.7;letter-spacing:.04em;color:var(--ink);}
.ct-lg a.num-en{display:inline-block;margin:-12px 0;padding:12px 0;text-decoration:none;}
.ct-lg .nw,.ct-who{display:inline-block;white-space:nowrap;}
.ct-who{font-size:14px;color:var(--note);}
.ct-lg address{font-style:normal;word-break:keep-all;overflow-wrap:anywhere;}
.ct-plate{position:absolute;top:0;bottom:0;right:0;left:calc(50% + 12px);margin:0;overflow:hidden;background:var(--lb);}
.ct-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;}
.ct-plate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(0deg,rgba(22,26,32,.85),rgba(22,26,32,0));pointer-events:none;}
.ct-plate figcaption{position:absolute;left:24px;bottom:24px;z-index:2;font-size:14px;line-height:1.7;color:var(--ink);text-shadow:0 1px 8px rgba(0,0,0,.7);}

/* ---- B〜D 共通：左に題・問い／右に中身。右の左端＝背骨 ---- */
.ct-block{padding-top:var(--gap);}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:start;}

/* B 加工のご相談・お見積り */
.ct-guide-row{align-items:baseline;padding-top:24px;border-top:1px solid transparent;}
.ct-guide .lead{font-size:16px;max-width:none;word-break:auto-phrase;}
.ct-guide .note{margin-top:16px;max-width:33.5em;word-break:auto-phrase;}

/* C よくあるご質問：開いた問答表 */
.ct-faq>.h3{margin-bottom:24px;}
/* build.py の faq_ld() は <dl class="ct-qa"> の完全一致で探すので、罫を引く役（rv rv-rule）は外側の div に持たせる */
.ct-qa-rule{border-top:1px solid transparent;}
.ct-qa{margin:0;}
.ct-qa-row{align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line);}
.ct-qa dt{padding-right:48px;font-size:20px;font-weight:700;line-height:1.45;color:var(--ink);font-feature-settings:"palt";}
.ct-qa dd{margin:0;}
.ct-qa dd p{font-size:16px;line-height:1.7;color:var(--ink-2);text-wrap:pretty;word-break:auto-phrase;}
.ct-to{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:4px;}
.ct-qa dd .ct-to a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong);}
.ct-to a span{transition:transform .2s var(--ease);}
.ct-to a:hover{color:#fff;text-decoration-color:var(--ink);}
.ct-to a:hover span{transform:translateX(4px);}

/* D フォーム（試作）：飾らない。欄の並びだけ直す */
.ct-rail{position:sticky;top:100px;padding-right:48px;}
.ct-rail .h3{word-break:keep-all;overflow-wrap:anywhere;}
.ct-rail .note{margin-top:12px;text-wrap:balance;word-break:auto-phrase;}
.ct-form .fi.half{grid-column:1;}

/* 1000〜1119px：左列が狭く、24px の FAX 2番号（幅 250px）が値の列（238px〜）に収まらないので、この幅だけ 20px */
@media (min-width:1000px) and (max-width:1119px){#contact.ct{--lg-num:20px;}}
@media (max-width:999px){
  .ct-head-txt{width:auto;min-height:0;display:block;padding-bottom:48px;}
  .ct-plate{position:relative;inset:auto;left:auto;aspect-ratio:3/2;border-block:1px solid var(--line);}
  .ct-plate img{object-position:60% 45%;}
  .ct-plate figcaption{left:var(--pad);}
  .ct-row{grid-template-columns:1fr;row-gap:16px;}
  .ct-qa-row{row-gap:8px;padding:20px 0;}
  .ct-qa dt{padding-right:0;}
  .ct-rail{position:static;padding-right:0;}
  .ct-form{row-gap:24px;}
}
@media (max-width:599px){
  .ct-plate{aspect-ratio:4/5;}
  .ct-plate img{object-position:60% 50%;}
  .ct-lg{grid-template-columns:1fr;row-gap:0;}
  .ct-qa dt{font-size:16px;}
  .ct-qa dd p{font-size:14px;}
}
/* 374px 以下：いちばん長いリンク（海外拠点…）が2行に折れる幅。flex のままだと「→」だけが右端へ離れるので、文の続きとして流す（押せる高さは上下の padding で確保） */
@media (max-width:374px){
  .ct-qa dd .ct-to a{display:block;min-height:0;padding:12px 0;}
  .ct-to a span{display:inline-block;margin-left:8px;}
}
@media (max-width:640px){.ct-form .fi.half{width:calc(50% - 8px);}}
@media (max-height:660px) and (min-width:1000px){.ct-rail{position:static;}}
/* スマホ下の固定バー：このページでは右半分が自分自身へのリンクになるので隠し、電話を全幅にする */
@media (max-width:760px){
  .sp-bar{grid-template-columns:1fr;}
  .sp-bar a[aria-current="page"]{display:none;}
}

/* ---- のっぺり対策（2026-09-21・あきと指摘）：色は足さない。A案の3つの床（g1/g2/g3）の切り替え・表頭の面・台帳の縞だけ（共通＝site.css「面の段」） ---- */
.ct-faq.floor{margin-top:var(--gap);padding-bottom:var(--gap);}
.ct-faq.floor+.ct-block{padding-top:var(--gap);}

/* ---- 画像と動きの底上げ（2026-10-02）。共通部品（[data-tilt]・video[data-auto]・figure[data-ai]）は site.css。ここは置き場所と社名碑の2層だけ ---- */
/* move の説明（.ai-note）を、動画が再生されていない時は隠す。共通側（site.css）の「figure[data-ai] figcaption .ai-note{display:block}」が
   「figure[data-ai="move"] .ai-note{display:none}」より強く、?qa=1・reduced・JS無効でも説明が出てしまうための手当て（company／policy と同じ1行）。
   再生中に出す指定（.js:not(.qa)… .ai-on .ai-note）はこれより強いのでそのまま効く。site.css が直ったら、この1行は消してよい */
figure[data-ai="move"] figcaption .ai-note{display:none;}
/* contact-01：社名碑を実写のまま2層（背景・前景の透過）に分けた奥行き（生成なし・札なし）。2層は contact.js が素材を読めた時だけ、
   今の写真の上に「同じ位置・同じ大きさ」で重ねて 0.4秒で切り替える（素材が無い時・?qa=1・動きを止める設定・データ節約では足さない＝今の1枚のまま）。
   位置と大きさは JS が今の写真の切り出し（cover・object-position）から計算して入れる。銘板の文字は前景＝実写の画素のまま */
.ct-plate img.ct-l{inset:auto;max-width:none;object-fit:fill;object-position:0 0;opacity:0;pointer-events:none;transition:opacity .4s linear,clip-path .5s var(--ease);}
.ct-plate.is-layered img.ct-l{opacity:1;}
.ct-plate.is-layered .ct-bg{will-change:transform;}
.ct-head.is-3d{overflow-x:clip;}   /* ポインタで面を傾けた時、裁ち落としの右端が画面の外へ出て横にはみ出さないように */
@media print{.ct-plate img.ct-l{display:none;}}

/* contact-02：「加工のご相談・お見積り」の材料の棒材（2018年の実写に、光が渡る動きを付けたループ）。
   PC は左列の見出しの下（一文と注記は右列のまま）。999px以下は一文と注記の後ろに幅いっぱい。見出しと一文の間には挟まない。
   静止画（実写を焼いた 16:9）と動画（同じ切り出しの中央 3:2）は、どちらも枠 3:2 の中央で切る */
.ct-guide-row>.ct-guide-body{grid-column:2;grid-row:1 / span 2;}
.ct-guide-fig{grid-column:1;grid-row:2;align-self:start;margin:24px 0 0;}
.ct-guide-fig .sx-frame{background:transparent;}   /* シャッターが開く前に枠の地（g1）を見せない */
.ct-guide-fig figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:var(--note);}
.ct-guide-fig .ai-note{text-wrap:balance;word-break:auto-phrase;}
:root:not(.js) .ct-guide-fig video{display:none;}
/* 説明は下に流れる位置にあるので、動画が始まった瞬間に2行増えて下の文が押し下がらないよう、動く設定の時だけ最初から席を取っておく（見えない）。
   ?qa=1・動きを止める設定・JS無効では席も取らない（今のまま） */
.js:not(.qa):not(.still):not(.sx-off) .ct-guide-fig[data-ai="move"] figcaption .ai-note{display:block;visibility:hidden;}
.js:not(.qa):not(.still):not(.sx-off) .ct-guide-fig[data-ai="move"].ai-on figcaption .ai-note{visibility:visible;}
@media (max-width:999px){
  .ct-guide-row>.ct-guide-body,.ct-guide-fig{grid-column:auto;grid-row:auto;}
  .ct-guide-fig{margin-top:8px;}
}

/* ---- E 個人情報の取り扱い（2026-10-29・§8-8 12-7）：今のサイトの文面を逐語で、畳まずに全文。組みは policy の条文（.pl-art＝h3 20px＋本文 16px・38em・g7）に合わせる。
   左＝題（フォームと同じ縦の背骨）／右＝文書。上の罫は rv-rule が左から引く（席だけ透明で取る）。文字は 13/14/16/20 だけ・色は g7/g8 だけ・赤は使わない ---- */
.ct-privacy-rail{position:sticky;top:100px;padding-right:48px;}
.ct-privacy-rail .h3{word-break:keep-all;overflow-wrap:anywhere;}
.ct-privacy-doc{border-top:1px solid transparent;}
.ct-privacy-art{padding:24px 0 40px;border-top:1px solid var(--line);}
.ct-privacy-art:first-child{border-top:0;}
.ct-privacy-art h3{font-size:20px;line-height:1.45;margin-bottom:16px;color:var(--ink);font-feature-settings:"palt";}
.ct-privacy-art p{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:38em;text-wrap:pretty;}
.ct-privacy-art p+p{margin-top:16px;}
.ct-privacy-t{font-weight:700;color:var(--ink);}   /* 「1）」「2）」「１．〜６．」の行だけ。文字は元のまま（.pl-cs dt と同じ 16px・700・g8） */
.ct-privacy-addr{color:var(--ink);}
@media (max-width:999px){.ct-privacy-rail{position:static;padding-right:0;}}
@media (max-width:760px){
  .ct-privacy-art{padding:20px 0 32px;}
  .ct-privacy-art h3{font-size:16px;margin-bottom:12px;}
}
@media (max-height:660px) and (min-width:1000px){.ct-privacy-rail{position:static;}}

/* ==== 2026-11-06 70周年型（旧 contact-show.css を移した） ==== */
/* お問い合わせの見本だけの見た目（共通は src/show.css）。入口の電話番号は大きく */
.ct-hero { --hn: clamp(52px, 10.5vw, 168px); }
.ct-hero .show-l2 > span { flex-wrap: wrap; }
.ct-hero .show-n { white-space: nowrap; }
.ct-hero .show-l2 .w { font-size: clamp(22px, 2.6vw, 38px); }
@media (max-width: 560px) { .ct-hero { --hn: clamp(44px, 13.4vw, 60px); } }