/* ===== 20_site.css ===== */ /* ===== cuezilla-skin.css ===== */ /* ============================================================ ★★★ このファイルは【全案件共通の資産】です。案件では編集しないでください ★★★ ------------------------------------------------------------ （Claude Code / Claude Design / 手作業、いずれの経路でも同じです） ■ 案件ごとの調整は、必ず `override.css` に書いてください。 読み込み/結合順が … → style.css → cuezilla-skin.css → 【override.css】 なので、 override.css に書いた指定は本ファイルに打ち消されません。**案件の上書きが効く唯一の場所です。** （例: カード面を白にしたい → override.css に `:root{ --dyn-surface:#fff; }`） ■ なぜ編集してはいけないか 本ファイルを案件で書き換えた瞬間、その案件の skin は共通資産から切り離されます。 以後、共通側で直した修正（カード高さの不揃い／サイドバーの可読性／ フォーム送信ボタンの崩れ 等）が **その案件には二度と届きません**。 実際に S01189 で本ファイルの §0 が案件調整で書き換えられ、共通修正が届かなくなりました。 「毎案件おなじ崩れを直している」の原因はこれです。 ■ 共通で直すべき崩れを見つけたら 案件で握り込まず、正本 `skin/cuezilla-skin.css` へ還流してください（全案件に効きます）。 還流し忘れると、次の同期でその修正は消えます。 詳細は R-30（70_運用ルール/運用ルール集.md）。 ============================================================ */ /* ============================================================ CueZilla 動的パーツ スキンキット v1.0 ------------------------------------------------------------ 目的: ブログ/施工実績(blog-ex)/お問い合わせ/パンくず/ページヘッダー等の CueZilla 既定パーツを、サイトのトンマナ（ダーク/ライト・ブランド色・ フォント・角丸）に "自動で寄せる" 汎用CSS。案件ごとの調整を最小化する。 思想: (1) 色は CueZilla テーマ変数(--main-color 等)から自動連動 → サイトのテーマ設定がそのまま skin にも効く（色は一元管理） (2) フォント/角丸/グリッド幅はトークンで指定（テーマ変数に無いため） (3) partsNNN は採番が可変だが接尾辞は共通(_post_wrap 等) → 属性セレクタ [class*="_xxx"] で番号非依存に当てる（単一属性セレクタまで。積んで詳細度を稼がない） ★適用範囲と安全契約（重要・memory: cuezilla-css-safety-contract）: ・本skinは「CueZilla既定の動的パーツ」だけを寄せる。サイトのフリーコーディング設計には当てない （生成サイトCSSは変数非依存＋具体値＋自作接頭辞クラスで組む＝構造的に非衝突・skinと干渉しない）。 ・[class*=…]を積んで詳細度を同点/超過させる手法は禁止（脆い・過剰マッチ・アーマーレース）。 単一の番号非依存セレクタ＋!important1個で当てる（theme_defaultは非importantなので確定勝ち）。 ・!important可は「レイヤーで越えられない相手」＝theme_default／body内インライン／BSユーティリティ／ .partsNNN_blog_＜ID＞(0,3,0) のみ。後者(0,3,0)+!importantには詳細度で負けるため、 負けた時だけ §14 の手順で実採番(0,3,1)を【案件CSS】に足して勝つ（汎用skinには番号を書かない）。 ・変数の注意：実機は body内コンポの style 要素の :root が7色(--main-color等)を撒きうる（490件中16件）。 →§0の--dyn-*はその頁で乗っ取られ得る。動的パーツの色合わせには許容だが、サイト設計の主機構にしない。 使い方: 1. §0 のトークンを案件に合わせて調整（ダーク/ライトはプリセットをコピー） 2. CueZilla テーマカラー(--main-color 等)をブランド値に設定 3. 本ファイルをサイト全体CSS(AddCssInfo)へ貼る（サイト固有のフリーコーディングCSSの後ろ） ============================================================ */ /* ============================================================ §0 トークン ─ ここだけ案件ごとに調整 ============================================================ */ :root{ /* --- 色: CueZilla テーマ変数から自動取得（無い場合のフォールバック付き） --- ※これらは【動的パーツの色合わせ用】。生成サイトCSSはこの変数に依存せず具体値で書く（安全契約）。 実機では body内コンポの style 要素の :root が --main-color 等を頁単位で上書きしうる＝--dyn-*も追従する。 */ --dyn-bg: var(--background-color, #ffffff); /* ページ/セクション背景 */ --dyn-surface: var(--temporary-color, #f4f4f2); /* カード/パネル/入力欄の面 */ --dyn-text: var(--text-color, #222222); /* 本文 */ --dyn-heading: var(--text-color, #111111); /* 見出し */ --dyn-muted: var(--sub-color, #8a8a8a); /* 補助/日付 */ --dyn-border: var(--sub-color, #dddddd); /* 罫線/枠 */ --dyn-accent: var(--main-color, #A26226); /* アクセント（ボタン/チップ/見出しバー） */ --dyn-accent-2: var(--link-color, var(--main-color, #A26226)); /* リンク/ホバー */ --dyn-on-accent: #ffffff; /* アクセント面の上の文字 */ /* --- フォント（site.css の :root に定義があればそれを使用） --- KEEP: ★既定を明朝にしない（2026-08-31 ディレクター判断）。旧既定は display と numeric が `"Noto Serif JP","Yu Mincho",serif` / `"EB Garamond","Noto Serif JP",serif` ＝**明朝**で、 案件が `--font-*` を渡し忘れると**動的ページ（ブログ・施工実績）だけが明朝で出る**。 実測 S00757 スマイルカミオン: 記事タイトル・抜粋・タグ（display）7要素＋20要素、日付（numeric）各4要素が明朝になり、 ディレクター指摘「ブログページに明朝が活用されていますが、サイト全体のフォントで統一してください」を受けた。 ★渡し忘れは"案件のミス"だが、**気づけるのが公開直前の目視だけ**で、静的ページを見ている限り絶対に露見しない。 ＝**既定が事故を作っていた**ので、既定側を直す。方針は「今後進める案件がサイトに使用しているフォントで 反映される仕様にする」（ディレクター 2026-08-31）。 ★意図して明朝にしたい案件は、これまでどおり `--font-display` 等を渡せばそのまま効く（機構は不変）。 ★numeric は日付・英字ラベル用なので、和文本文より英字の顔が合う。sans を既定にしつつ英字を先頭へ置く。 ★既存の納品済み案件は影響を受けない（納品CSSは書き出し時にベイク済みで、再エクスポートしない限り変わらない）。 */ --dyn-font-display: var(--font-display, "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif); --dyn-font-body: var(--font-body, "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif); --dyn-font-numeric: var(--font-numeric, "Helvetica Neue",Arial,"Noto Sans JP",sans-serif); /* /KEEP */ /* --- 角丸（チップ/ボタン/カード）。角なしにするなら 0 --- */ --dyn-radius: 6px; /* --- 一覧カードの最小幅 / 段組ギャップ --- */ --dyn-card-min: 300px; --dyn-gap: 32px; } /* === テーマ プリセット（使う方を §0 の後にコピペして上書き） ========= 【ダーク】 :root{ --dyn-bg:#0A0A0A; --dyn-surface:#111110; --dyn-text:#F4F1EC; --dyn-heading:#FAF7F1; --dyn-muted:#8C857A; --dyn-border:#FEBD8C; --dyn-accent:#8E3A22; --dyn-accent-2:#B0533A; --dyn-on-accent:#FAF7F1; --dyn-radius:0; } 【ライト】 :root{ --dyn-bg:#ffffff; --dyn-surface:#f7f7f5; --dyn-text:#222222; --dyn-heading:#111111; --dyn-muted:#8a8a8a; --dyn-border:#e3e3e3; --dyn-accent:#A26226; --dyn-accent-2:#A26226; --dyn-on-accent:#ffffff; --dyn-radius:6px; } ※ CueZilla テーマ変数(--main-color 等)を設定する場合は §0 が自動連動するのでプリセット不要。 ============================================================ */ /* ============================================================ §1 パンくず（CueZilla parts###_breadcrumb / p-breadcrumb） 実markup: div.parts###_breadcrumb.p-breadcrumb.c-breadcrumb ＞ ul.p-breadcrumb__inner(BreadcrumbList) ＞ li.p-breadcrumb__item(ListItem) CueZilla共通CSSにパンくず装飾は無い → skin側で横並び・区切り・配色を付与 ============================================================ */ [class*="_breadcrumb"], .p-breadcrumb{ background:var(--dyn-bg) !important; } .p-breadcrumb__inner{ list-style:none; margin:0 auto; padding:14px 24px; max-width:1200px; display:flex; flex-wrap:wrap; align-items:center; } .p-breadcrumb__item{ display:inline-flex; align-items:center; color:var(--dyn-muted) !important; font-family:var(--dyn-font-body); font-size:.78rem; letter-spacing:.04em; } .p-breadcrumb__item a{ color:var(--dyn-muted) !important; text-decoration:none; } .p-breadcrumb__item a:hover{ color:var(--dyn-accent-2) !important; text-decoration:underline; } .p-breadcrumb__item:last-child{ color:var(--dyn-text) !important; } /* 現在地 */ /* 区切り（2件目以降の左に縦罫線）※R-27対応（2026-08-26） 旧実装は `::before` の content 宣言（文字リテラル "›"）で区切りを描いていたが、AddCssInfo は 疑似要素の content 宣言をサニタイズで落とすため、実機では区切りが消えて 「ホーム私たちの歴史」のように語が詰まっていた。 ★実要素（＜span＞）へ昇格させず「content を使わない罫線」で代替した理由: パンくずの運用第一候補は「CueZilla がページ階層から自動描画するパンくずパーツ」で、 その markup に区切り用の要素を挿す手段が無い。templates/breadcrumb.html（明示設置版）だけ 直しても自動描画側は直らないので、両経路に1本のCSSで効く手段を採った。 border / padding はサニタイズ後も残る（R-27「残る」側）。 ★物理プロパティ（border-left）で書く理由: サニタイズのホワイトリストに論理プロパティが 載っていない可能性を避ける。和文サイトは横書きLTR固定なので意味は同じ。 */ .p-breadcrumb__item + .p-breadcrumb__item{ margin-left:.7em; padding-left:.7em; border-left:1px solid var(--dyn-border) !important; } .p-breadcrumb meta{ display:none; } /* schema.org の ＜meta itemprop="position"＞ は非表示 */ /* ============================================================ §2 ページヘッダー（[class*="_article_header"]）画像上のタイトル ============================================================ */ [class*="_article_header"] .ja, [class*="_article_header"] h1, [class*="_article_header"] h2{ color:var(--dyn-heading) !important; font-family:var(--dyn-font-display) !important; text-shadow:0 2px 14px rgba(0,0,0,.5) !important; } [class*="_article_header"] .en{ color:var(--dyn-muted) !important; font-family:var(--dyn-font-numeric) !important; letter-spacing:.1em; text-shadow:0 1px 10px rgba(0,0,0,.5) !important; } /* ============================================================ §3 ページネーション（2系統。テーマCSSの持ち方が違うので扱いを分ける＝崩れ防止） ・.pagination_*（enjoyworks系） … テーマが素 → 体裁＋色を一式付与 ・[class*="_pagenation"]（parts222/225/228系）… テーマが体裁を持つ（flex/padding/border/白黒ハードコード） → レイアウト・サイズはテーマに任せ、ハードコードの白黒(#000/#fff)だけブランド色へ置換（最小限）。 a/.current 以外（余白用の素の ＜span＞）には触らない＝二重ボックス化を防ぐ。 --dyn-accent は §0 で var(--main-color) にバインド済み＝サイトのCMS色に自動一致（案件側の手当て不要）。 ============================================================ */ /* (A) pagination_* 系：テーマ装飾が無いので一式付与 */ .pagination_num, .pagination_prev, .pagination_next{ font-family:var(--dyn-font-numeric); color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; } .pagination_num.current{ background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; } .pagination_num:hover, .pagination_prev:hover, .pagination_next:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; } /* (B) _pagenation 系：色だけ寄せる（ジオメトリはテーマのまま＝箱を再定義しない） */ [class*="_pagenation"] a{ border-color:var(--dyn-accent) !important; color:var(--dyn-text) !important; } [class*="_pagenation"] span.current, [class*="_pagenation"] .current, [class*="_pagenation"] .active{ background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; } [class*="_pagenation"] a:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; } .pe-none{ opacity:.3; pointer-events:none; } /* ============================================================ §4 ブログ / 施工実績(blog-ex) 一覧（番号非依存） ============================================================ */ /* 一覧セクションの地 */ [class*="_post_list"], [class*="_post_wrap"]{ } /* 下で個別指定 */ /* カード並び（最小幅を確保して細くなりすぎない） */ [class*="_post_list"]{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important; gap:var(--dyn-gap) !important; } /* カード */ [class*="_post_wrap"]{ /* カード等寸化：中身を縦に積み、内側の ＜a＞/本文枠を flex で伸長させて高さを揃える（S01189還流） */ display:flex !important; flex-direction:column; margin:0 !important; /* theme_default の margin-bottom(55px等)残存で最終行カードだけ高さ不揃いになるのを打ち消す */ width:auto !important; max-width:none !important; text-decoration:none; background:var(--dyn-surface) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); overflow:hidden; transition:transform .3s ease, border-color .3s ease; } [class*="_post_wrap"]:hover{ transform:translateY(-4px); border-color:var(--dyn-accent-2) !important; } [class*="_post_wrap"] > a{ display:flex; flex-direction:column; flex:1 1 auto; color:inherit; } /* カード全体ラップ＜a＞を縦伸長（内容を上下に満たす） */ /* サムネ等寸化：グリッド列の幅から高さを算出（幅制約下＝§6.5の aspect-ratio×height 併用の罠には該当しない） */ [class*="_post_img"]{ width:100%; display:block; border-radius:0; aspect-ratio:16/10; overflow:hidden; } [class*="_post_img"] img{ width:100%; height:100%; object-fit:cover; display:block; } /* カード内のテキストに左右余白 */ [class*="_post_status"]{ border:none !important; background:transparent !important; margin:14px 16px 0 !important; padding:0 !important; display:flex !important; flex-wrap:wrap; justify-content:flex-start !important; gap:10px; align-items:center; } [class*="_post_status"]:has([class*="_title-excerpt"]){ display:block !important; } /* parts228系「日付｜タイトル」の横並びを解除（:has非対応環境ではflex-wrapで折返し） */ [class*="_post_title-excerpt"]{ padding:10px 16px 16px !important; flex:1 1 auto; } /* 本文枠を伸長＝カード等寸化の要 */ [class*="_post_status"]:has([class*="_title-excerpt"]) [class*="_title-excerpt"]{ padding:10px 0 16px !important; } /* 施工実績は左端揃え */ [class*="_post_title"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; font-weight:700 !important; line-height:1.5; } [class*="_post_excerpt"]{ color:var(--dyn-muted) !important; } [class*="_post_date"]{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; } /* カテゴリ/ステータスは1チップに。 テーマは既に _post_category に border:1px solid var(--main-color) を持つ＝枠を“足す”と2重になるので 同一要素に !important で単一の枠を確定（色は --dyn-accent=var(--main-color) で一致）。幅は % 制約を解除し content 幅に。 */ [class*="_post_category"]:not([class*="_sidebar"]), [class*="_post_status"] > span:last-child{ /* :not(_sidebar) ＝ この§4チップ装飾が §5 の _sidebar_post_category_count へ漏れ二重適用されるのを防ぐ（S01189還流） */ width:auto; max-width:none !important; background:var(--dyn-bg) !important; border:1px solid var(--dyn-accent) !important; border-radius:var(--dyn-radius); padding:2px 8px; color:var(--dyn-accent) !important; } .parts-blog-ex-tag_wrap{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 14px; } .parts-blog-ex_tag{ font-size:.72rem; color:var(--dyn-muted) !important; background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:2px 8px; } /* --- 一覧パーツ固有の崩れ2点（実共有CSS=theme parts222/225/228 を突き合わせて確定）--- (a) 自動セクション見出し（「ブログ」「施工実績」等）の撤去： テーマは `.parts222_section h2 / .parts228_section h2` に color:var(--main-color)/font-size:35px/text-align:center を付与し、 一覧上部に大見出しを自動描画する。自前の下層ヘッダー(hero)と二重化＝崩れ。 → 一覧パーツ(_post_list を含む _section)直下の素の h2 だけ隠す。 残したいサイトは案件CSSで個別に復帰。`:has()` 非対応保険に f_meiryo 版も併記。 */ [class*="_section"]:has([class*="_post_list"]) > h2, [class*="_section"] > h2.f_meiryo{ display:none !important; } /* (b) flex前提の余白スペーサー ::after の無効化： テーマは `.parts228_post_list::after{content:"";width:32.465%}` で flex の最終行詰めをする。 §4 で _post_list を grid 化すると、この ::after が「空のゴースト列」になり最終行が片寄る。 → grid では不要なので除去（content:none で擬似要素自体を消す）。 */ [class*="_post_list"]::after{ content:none !important; display:none !important; } /* ============================================================ §4-b ブログ枠パーツ（parts131415_blog 系）＝ 内側でBootstrapが生きている型 ------------------------------------------------------------ §4 は parts222/225/228 の `_post_list` / `_post_wrap` 接尾辞を前提にしている。 parts131415_blog 系は接尾辞が違い（`.row.row-cols-lg-3 ＞ .col ＞ .card`）、§4のセレクタが **1つも届かない**。そのため案件ごとに同じCSSを書き直す状態になっていた。 教訓: 70_運用ルール/デザイン教訓/cms-part-bootstrap-grid-collapses-cards.md 70_運用ルール/デザイン教訓/cms-part-heading-typography-override.md （承認: 2026-09-01「A・B・C ＋ I ＋ G/H（受領チェック1項目）」） (a) カードが列幅のさらに1/3に潰れる（独立3案件で真因一致: S02150・O01540・S00459） パーツが吐く `.row.row-cols-1.row-cols-sm-2.row-cols-lg-3` は Bootstrap の `.row-cols-lg-3 ＞ *{flex:0 0 auto; width:33.3333%}` が生きたまま。案件側で `.row` を grid 化しても **grid の子に残った width:33.3333% が「列幅の33.3%」として再び効く**ため、 341px の列の中でカードが 114px（サムネイル 52px）まで潰れる（実測 S02150 2026-08-25）。 ★崩れるのは実機だけで、受領データを単体で開くと正常に見える＝**受領物を見ている限り 絶対に気づけない**。だから案件ごとの気づきに任せず skin の既定にする。 → §4 の `_post_list` と同じ扱い（auto-fill グリッド＋子の幅指定を落とす）を対にして当てる。 **grid 化と子の無効化は必ずセット**。片方だけだと、grid 化なしで幅を落とせば1列に伸び、 幅を落とさず grid 化すれば上記の 1/3 潰れが起きる。 ★施工実績枠には当たらない。あちらは `.content.d-flex`（`.row` を持たない）で、 flex の子に幅を当てると3枚が横にあふれる。クラス名では枠を判別できない （CMSが `parts131415_blog_DKhwGnz7DM` のように乱数の接尾辞を付け、作り直すと変わる）ため、 **`.row` を持つか＝中身で分岐している**。 */ [class*="parts131415_blog"] .row{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important; gap:var(--dyn-gap) !important; } [class*="parts131415_blog"] .row > *{ width:auto !important; max-width:none !important; min-width:0 !important; flex:none !important; margin:0 !important; padding:0 !important; } /* (b) パーツ見出しがCMS既定の書体・色のまま出てブランドタイポから浮く（独立2案件: S00459・S01926） レイアウト（配置・カラム）は案件CSSで整えられる一方、**パーツ自身が生成する見出し要素の 書体・色はパーツ内部に付いているため見落とされやすい**。結果「配置は整っているのに見出しだけ フォントが違う・色が違う」という部分的な浮きが残る。 実測: S00459 `.design-parts-11 .parts-title` が色 #BE732D のまま／ S01926 `.parts131415_blog_title_wrap .title` が明朝のまま（一度PC幅だけ直して 「全端末で適用」と差し戻された＝BP単位の個別対応では同じ穴が別BPで再発する）。 → §4 の `_post_title` / §5 の `_sidebar_post_title` と同じ扱いで、**書体と色だけ**を寄せる。 ★サイズ・寄せは案件ごとのデザイン判断なので skin では触らない（§4の既存方針と同じ）。 そちらは 30_コード生成/AI生成指示書_CueZilla.md 側の手順で担保する。 ★全BP共通で当たる（メディアクエリの外に置いてある）。 ★実測で確認できた2クラスだけに絞ってある。`.card-title` / `.card-text` は当てていない （O01540 では `.card-title` が「濃緑地に白文字のチップ」＝見出しではなくラベルとして 使われており、`--dyn-heading` を当てると読めなくなる）。パーツが増えたら実機で確認して追記する。 */ [class*="_blog_title_wrap"] .title, [class*="design-parts-"] .parts-title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; } /* ============================================================ §5 サイドバー / 最近の投稿 / カテゴリ記事数 ============================================================ */ [class*="_sidebar"], .recent_posts_wrap{ color:var(--dyn-text); } /* サイドバー見出し（「最近の投稿」「カテゴリ」）の可読性を確保。 theme_default は `.partsNNN_sidebar h3{ background-color:var(--main-color); color:#fff }` と 色を直当てするが、§12 の見出しリセットが**背景だけ**を transparent にするため、 ライト基調の案件では「白地に白文字」で消える（ダーク案件では地に映えるため露見しない）。 背景は戻さず（skinのフラット化方針を維持）、文字色だけトークンへ寄せて両基調で可読にする。 あわせて左右パディングも解除する：`padding:15px 20px` は**帯があった前提**の内側余白のため、 帯を透明化したまま残すと「見出しだけ20px字下げ」になり、直下の日付／タイトルと文頭がズレる。 （詳細ページ側の .recent_post_title には下で同じ手当てをしており、一覧側だけ取り残されていた） */ [class*="_sidebar"] h3{ color:var(--dyn-heading) !important; padding-left:0 !important; padding-right:0 !important; } [class*="_sidebar_post_title"], .recent_post_title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; } /* 「最近の投稿」見出し（詳細ページ側）の帯を外して一覧側と体裁を揃える。 theme_default は `.recent_posts_wrap .recent_post_title{ background-color:var(--main-color); color:#fff }` で帯を敷くが、 §12 の見出しリセットは (a) 包み(parts166_single_article / parts-blog-ex-single-wrap)が `_section` を含まない (b) 要素が ＜div＞（h2/h3でない）── の2点で**届かず**、帯だけが生き残る。 一方すぐ上の §5 が文字色を --dyn-heading（＝ライトでは濃色）へ寄せるため「濃い帯に濃い文字」となり、 案件ごとに帯との視認性を見て文字色を手当てする必要があった。帯を外せば一覧（§12で帯が外れる）と揃い、手当ても不要になる。 ※帯を活かしたい案件は案件側で `background:var(--dyn-accent); color:var(--dyn-on-accent)` を再指定する。 */ .recent_post_title{ background:transparent !important; padding-left:0 !important; } [class*="_sidebar_date"], .recent_post_date{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; } /* 記事li の区切り罫線：theme_default が #666 をハードコードしており地に合わず過剰に見える → トークンへ */ [class*="_sidebar"] ul li, .recent_posts_wrap ul li{ border-bottom-color:var(--dyn-border) !important; } /* カテゴリ右の記事数を視認できるチップに */ [class*="_sidebar_post_category_count"]{ background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:0 8px !important; } /* カテゴリ一覧 li：theme_default 由来の左右縦罫線(1px solid #666)を除去（下罫線は区切りとして意図的に残す）。S01189還流 */ [class*="category_post_count"] li{ border-left:0 !important; border-right:0 !important; } /* カテゴリ名と件数チップが重ならないよう両端寄せ。 あわせて左右パディングを解除：theme_default は `.category_post_count ul li a{ padding:15px 20px }` と **帯／箱があった前提**の字下げを持つため、帯を外した状態では カテゴリ名だけが 20px 右にずれ、見出し(h3)や「最近の投稿」リストと頭が揃わない。 上下15pxはタップ領域として残す。 */ [class*="category_post_count"] li a{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding-left:0 !important; padding-right:0 !important; } /* ============================================================ §6 詳細ページ（本文 / 署名 / SNS / 詳細内スライダー） ============================================================ */ .parts-blog-ex_text{ font-family:var(--dyn-font-body); color:var(--dyn-text) !important; line-height:1.9; } .parts-blog-ex_text h2, .parts-blog-ex_text h3{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; } .signature_wrap{ font-family:var(--dyn-font-display); color:var(--dyn-muted) !important; border-top:1px solid var(--dyn-border); padding-top:16px; } .slick-prev, .slick-next{ color:var(--dyn-accent-2) !important; } /* ※詳細本文の親ラッパーが固定class薄め。崩れる場合は実ページで本文コンテナを確認し追補 */ /* ============================================================ §7 お問い合わせフォーム ============================================================ */ .contact_section, [class*="_section_form"], [class*="_section_content"], [class*="_content_wrap"], [class*="_content"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; } [class*="_form_wrap"]{ max-width:720px; margin:0 auto; } [class*="_form_wrap"] label, [class*="_form_wrap"] dt, [class*="_form_wrap"] .ja, [class*="_form_wrap"] .en{ color:var(--dyn-text) !important; } /* 入力欄を十分な大きさに（チェック/ラジオは除外） */ [class*="_form_wrap"] dd input:not([type="checkbox"]):not([type="radio"]), [class*="_form_wrap"] dd select{ width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important; min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); } [class*="_form_wrap"] textarea, .form_textarea textarea{ width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); } /* チェックボックス/ラジオはサイズ統一 */ [class*="_form_wrap"] input[type="checkbox"], [class*="_form_wrap"] input[type="radio"]{ width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important; vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important; } /* 必須バッジ: 文字を中央・折り返さない・角丸はトークン */ .required{ display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important; background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; } .error{ color:var(--dyn-accent-2) !important; } /* 「お問い合わせ内容」を囲む大きな箱(枠線)を撤去 */ .form_textarea, .form_text_dt{ border:none !important; background:transparent !important; } /* 送信ボタン。★セレクタに包み(.contact_submit 自体)を含めないこと： 包みは複数ボタンを載せるレイアウト用のdivで、ここを accent で塗ると (a) 完了ページ=藍の包みに藍のボタンが乗って同化し、ボタンが消えて見える (b) 確認ページ=すぐ下でアウトライン化する「戻る」が藍地に濃色文字となり判読不能（実測 1.01:1） になる。当てる先はボタン実体だけでよい（dynamic-form.md §1 の意図も「送信 .contact_submit input = accent地」）。 */ .contact_submit button, .contact_submit input{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; border:none !important; border-radius:var(--dyn-radius) !important; } /* 確認ページの「戻る」は副ボタン（送信＝アクセント／戻る＝アウトライン）＝誤導線防止 */ .contact_submit input[name="back"]{ background:transparent !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; } /* 送信前 disabled（reCAPTCHA未完了）の見え方 */ .contact_submit input[disabled]{ opacity:.5; cursor:not-allowed; } /* --- フォーム実コードで頻出するが §7本体に無かった部品（parts213等の実装を突き合わせ）--- */ /* ファイル添付の自作UI：受領のインライン style が #eee 地・#999 文字・明るいグラデで固定し、 ダーク地で白い箱・低コントラストになる。トークンで地・枠・文字を寄せる（label_file_upload に限定）。 */ .label_file_upload{ display:block; width:100%; padding:12px 14px; cursor:pointer; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); } .label_file_upload button{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; pointer-events:none; } .label_file_upload span, #file-chosen, [id$="filechosen"]{ color:var(--dyn-muted) !important; } .des{ color:var(--dyn-muted) !important; } /* 注意書き（文字数制限・ファイル名規則等の補助）：色未指定/未定義var(--red)で可読性がばらつくため muted で固定（AA確保色） */ .attention{ color:var(--dyn-muted) !important; } /* 郵便番号は narrow に保つ：上の入力欄ルール `[class*="_form_wrap"] dd input:not([checkbox]):not([radio])` は (0,3,2)+!important で .zip も全幅化し〒[郵便番号][住所]を壊す。これに勝つよう :not() を重ねて 詳細度を (0,4,2) に上げて .zip だけ幅を戻す（parts219等 form_address系・番号非依存）。 */ [class*="_form_wrap"] dd input.zip:not([type="checkbox"]):not([type="radio"]){ width:9em !important; max-width:9em !important; display:inline-block; margin-right:8px; } /* プライバシー同意 */ .privacypolicy{ background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:16px; color:var(--dyn-muted) !important; } .privacypolicy-link{ color:var(--dyn-accent-2) !important; } /* 電話/メール等の content バー（角丸はトークン） */ [class*="_content"] [class*="btn"], [class*="_content"] a[class*="round"]{ border-radius:var(--dyn-radius) !important; } /* ============================================================ §7b お問い合わせフォーム ─ wpcf7 / .formBox 系（第2系統） ------------------------------------------------------------ 【重要】フォームには構造が2系統ある（dynamic-harvest.js の「フォーム系統」で判定）： ・§7 = parts_form/dl 系（[class*="_form_wrap"] / dt / dd / .required / .contact_submit） ・§7b = wpcf7/.formBox 系（.formWrap ＞ .formBox ＞ dt＞label＞span.req + dd＞input, 送信=input.wpcf7-submit。SEIKEN/協力会社フォーム等 Contact Form 7 由来） §7 の `[class*="_form_wrap"]` は §7b 構造に当たらないため、当該系統では本セクションが要る。 いずれも番号非依存のセマンティッククラスで記述。 ============================================================ */ .formWrapbg, .formWrap, .form, [class*="formSec"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; } .formWrap{ max-width:720px; margin:0 auto; } .formBox{ margin-bottom:20px; } .formBox dt, .formBox label{ color:var(--dyn-text) !important; } .formBox dd input:not([type="checkbox"]):not([type="radio"]), .formBox dd select, .formWrap input[type="text"], .formWrap input[type="email"], .formWrap input[type="tel"]{ width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important; min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); } .formBox dd textarea, .formWrap textarea{ width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); } .formWrap input[type="checkbox"], .formWrap input[type="radio"]{ width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important; vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important; } /* 必須バッジ（wpcf7系は .req） */ .req, .formBox .req{ display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important; background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; } .wpcf7-not-valid-tip, .wpcf7-response-output{ color:var(--dyn-accent-2) !important; } /* 送信（Contact Form 7） */ input.wpcf7-submit, .formWrap button[type="submit"]{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; border:none !important; border-radius:var(--dyn-radius) !important; min-height:54px !important; padding:14px 28px !important; font-size:16px !important; cursor:pointer; } /* プライバシー同意（両系統共通の .privacypolicy* は §7 で適用済） */ /* ============================================================ §14 自動CSSに負けた時の手順（R-27）※汎用アーマーは持たない＝安全契約 ------------------------------------------------------------ CueZilla は body内コンポの style 要素でパーツ単位に `.partsNNN_blog_＜ID＞ .card .card-body{…!important}` 等の高詳細度(0,3,0)+!important を吐く。§1〜§9 の単一属性セレクタ(0,1,0〜0,2,0)+!important は 同プロパティで【負ける】（症状：当てているのに反映されない＝崩れの常連）。 → 【禁止】[class*=…]を積んで(0,3,0)に並べる汎用アーマー（脆い・過剰マッチ・アーマーレース）。 ＝以前ここにあった `[class*="parts"][class*="_blog"] .card` 等は本契約により撤去した。 （theme_default 非importantへの色寄せは §8 の単一 `[class*="_blog"] .card`(0,2,0)+!important で足りる） → 【正】負けたパーツだけ、harvestで実採番を取り【案件CSS】末尾に (0,3,1) を1個足して確実に勝つ： section.parts131415_blog_xxxx .card .card-body{ … !important } ← 実採番。構造変化に不感 ※ skin は全案件共通なので案件固有の番号は書かない（負けた時だけ案件側で対処）。 ※ 採番取得＝verify/dynamic-harvest.js。当て方＝50_CSS・動的ページ/動的ページCSS_実セレクタ参考.md §14。 */ /* 見出しのテーマ装飾(角丸/中央寄せ/背景/罫線)残りをパーツ内でリセット（R-21）。 theme_default は非importantなので、単一 [class*="_section"] + !important で確定勝ち（[class*]を積まない）。 */ [class*="_section"] h2, [class*="_section"] h3{ border-radius:0 !important; background:transparent !important; border:none !important; text-align:inherit !important; } /* ============================================================ §8 トップ用 お知らせ/ブログ teaser（notice-news / blog teaser） ============================================================ */ .parts040506_notice-news{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; } .parts040506_notice-news *{ color:var(--dyn-text) !important; } .parts040506_notice-news .title, .parts040506_notice-news .title a{ color:var(--dyn-heading) !important; } .parts040506_notice-news [class*="date"], .parts040506_notice-news .f_yugothic{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; } .parts040506_notice-news .more{ white-space:nowrap !important; color:var(--dyn-accent-2) !important; } .parts040506_notice-news a{ color:var(--dyn-accent-2) !important; } /* サムネ型ブログ teaser */ [class*="_blog_title_wrap"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; } [class*="_blog_thumbnail"]{ border-radius:var(--dyn-radius); } /* teaser内が Bootstrap .card（既定で白）の場合のダーク/トーン化 */ [class*="_blog"] .card{ background:var(--dyn-surface) !important; border-color:var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; } [class*="_blog"] .card-title, [class*="_blog"] .card-text{ color:var(--dyn-text) !important; } [class*="_blog"] .card-title{ font-family:var(--dyn-font-display) !important; } /* ============================================================ §9 Bootstrap汎用クラスの地ならし（パーツ内に限定） text-dark / bg-light 等がパーツ内でトーンを乱すのを抑える ============================================================ */ [class*="parts"] .text-dark{ color:var(--dyn-text) !important; } [class*="parts"] .bg-light{ background:var(--dyn-surface) !important; } .card-header.bg-light{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; } /* ============================================================ §10 プライバシーポリシー（templates/privacy-policy.html のフリーコーディング設置版） ※CueZilla既定パーツ(item_title/item_description)へ転記する場合は §5 等で別途適用される ============================================================ */ .privacy{ max-width:880px; margin:0 auto; padding:64px 24px; color:var(--dyn-text); font-family:var(--dyn-font-body); line-height:1.9; } .privacy__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,4vw,2.6rem); } .privacy__subtitle{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:1.2rem; margin-top:8px; } .privacy__lead{ color:var(--dyn-muted); margin:24px 0 40px; } .privacy-item{ margin-bottom:32px; } .privacy-item__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); border-left:3px solid var(--dyn-accent); padding-left:12px; margin-bottom:12px; } .privacy-item__body{ color:var(--dyn-text); } /* 原文の (1)(2)… 表記は【HTML側のテキスト】で持つ ※R-27対応（2026-08-26） 旧実装は `li::before` の content 宣言（`counter(pp)` を括弧で挟む）で番号を描いていたが、AddCssInfo は content 宣言をサニタイズで落とす（counter() は content 専用なのでCSS単独の代替が無い）。実機では番号が消えたうえに 下のぶら下げインデントだけが残り、本文が左へはみ出していた。 ★番号を捨てず HTML テキストへ移した理由: 本文が「上記(1)から(6)に掲げるほか」と番号を参照しており、 番号は装飾ではなく文書の一部（消すと文意が壊れる）。会社承認の定型文なので表記も変えられない。 → templates/privacy-policy.html の各 ＜li＞ 先頭に "(1) " 等を直接書く形へ変更した。 ★ぶら下げインデント（padding-left / text-indent）は残す: 番号が行頭テキストになった今も、 折り返し行を本文位置に揃えるために必要（＝この2行が番号の受け皿）。 番号を持たない古い privacy HTML に当たると字下げだけが見えるので、その場合はCSSではなく HTML側に番号を入れて直す。counter-reset / counter-increment は用が無くなったので外した。 */ .privacy-item__list{ list-style:none; margin:8px 0; padding:0; } .privacy-item__list li{ padding-left:2.2em; text-indent:-2.2em; margin:4px 0; color:var(--dyn-text); } /* ============================================================ §11 下層ヘッダーパーツ（templates/subpage-header.html） サイトヘッダーとパンくずの間。フリーコーディングで別パーツ化 ============================================================ */ /* padding-top に固定ヘッダー高さ(--fixed-header-h)を加算＝固定ヘッダーへのめり込み防止。 固定ヘッダーが無いサイトは既定0で無影響。固定ヘッダー採用サイトは案件CSSで :root{ --fixed-header-h:88px } 等を設定（R-18）。 */ .subpage-header{ position:relative; padding:calc(72px + var(--fixed-header-h, 0px)) 24px 72px; background:var(--dyn-surface); text-align:center; overflow:hidden; } .subpage-header__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; z-index:0; } .subpage-header__inner{ position:relative; z-index:1; } .subpage-header__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,3rem); line-height:1.3; text-shadow:0 2px 14px rgba(0,0,0,.5); } .subpage-header__en{ font-family:var(--dyn-font-numeric); color:var(--dyn-muted); letter-spacing:.12em; margin-top:8px; } /* ============================================================ §12 システム定型ページ：送信完了(thanks) / 404 templates/thanks.html, templates/404.html 用。トークンスキン準拠 ============================================================ */ .thanks, .notfound{ max-width:760px; margin:0 auto; padding:calc(80px + var(--fixed-header-h, 0px)) 24px 96px; text-align:center; } /* CueZilla 既定404（section.not-found）はレイアウトを変えず、固定ヘッダー分の上余白だけ確保（R-18） */ .not-found{ padding-top: calc(var(--fixed-header-h, 0px) + 24px); } .thanks__title, .notfound__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,2.6rem); line-height:1.3; margin-bottom:28px; } .thanks__lead, .notfound__lead{ color:var(--dyn-text); line-height:2; margin-bottom:40px; } .thanks__action, .notfound__action{ margin-top:8px; } /* ============================================================ §13 Bootstrap(テーマ)既定の恒久打ち消し（R-20） ------------------------------------------------------------ CueZillaテーマが読み込む Bootstrap の "素のタグ/汎用クラス" が フリーHTMLに当たって崩す症状を、案件ごとの手当て無しで地ならしする。 ここは確認済みの実害2件（test0605）に限定して打ち消す。 ※「色/余白/タイポ」を意図して変える装飾は接頭辞クラス(.xw- 等)で 付け直す＝下記より高詳細度になり、本セクションに勝つ（壊さない）。 ============================================================ */ /* (a) ＜mark＞ / .mark の黄ハイライト背景：ロゴや見出しが黄色い箱になる症状 → 無効化。 意図的なマーカー装飾は専用クラスで（Bootstrap名 .mark を流用しない＝R-20）。 */ mark, .mark{ background-color:transparent !important; color:inherit !important; padding:0 !important; border-radius:0 !important; } /* (b) a:hover が Bootstrap青(#BE732D)になる症状 → 既定は「ホバーで色を変えない」。 !important は付けない＝個別のホバー装飾(接頭辞クラスや site.css の指定)が そのまま勝ち、未指定リンクだけが青化を免れる（フォールバック）。 */ a:hover{ color:inherit; } /* (c) 電話番号リンク(tel:)の最低タップ確保（R-24／§5.5-3）。 本文中インラインでも折り返さない。CTA/ボタン用途は接頭辞クラスで44px確保。 */ a[href^="tel:"]{ white-space:nowrap; } /* ===== case-vars.css ===== */ /* 東予通信工業のテーマ色7値（CueZilla「テーマカラー設定」に入れる値）。 読み込み順: theme_default.css → cuezilla-skin.css → 本ファイル（最後＝後勝ち）。 ★#E6AD73 は白文字とのコントラストが3.5:1でAA不適合。文字の背景には使わない（④サイト情報）。 */ :root{ --main-color: #8A4A17; --text-color: #1A1A1A; --sub-color: #8A4A17; --accent-color: #8A4A17; --background-color: #FFFFFF; --link-color: #8A4A17; --temporary-color: #FDF5EF; } /* skin §0 は --dyn-surface を --temporary-color から引く。面色・罫線・補助色を明示しておく。 */ :root{ --dyn-surface:#FDF5EF; --dyn-border:#F0E4DB; --dyn-muted:#8A4A17; --dyn-heading:#8A4A17; --dyn-accent-2:#BE732D; } /* パーツはサイトの書体に合わせる（実機ではテーマの書体設定で合わせる） */ /* → 30_override.css へ移動（skin の !important に負けて効かないため）: パーツの書体（case-vars.css 由来） */ /* ===== style.css ===== */ .tk{margin:0;padding:0;background:#FFFFFF;color:#1A1A1A;font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',YuGothic,'Noto Sans JP',sans-serif;font-size:16px;line-height:1.9;-webkit-text-size-adjust:100%;} .tk *{box-sizing:border-box;} .tk img{max-width:100%;height:auto;display:block;} .tk a{color:#8A4A17;} .tk a:focus-visible{outline:3px solid #FEBD8C;outline-offset:2px;} /* レイアウト */ .tk-wrap{max-width:1080px;margin:0 auto;padding:0 20px;} .tk-sec{position:relative;overflow:hidden;padding:80px 0;} .tk-sec--tint{background:#FDF5EF;} .tk-sec--navy{background:#FEBD8C;color:#4A2A12;} .tk-sec--navy .tk-h2,.tk-sec--navy p{color:#FFFFFF;} .tk-sec--navy .tk-tbl,.tk-sec--navy .tk-tbl *{color:#8A4A17;} /* ① 背面ゴースト英字 */ .tk-ghost{position:absolute;top:24px;right:-8px;font-size:64px;line-height:1;font-weight:800;letter-spacing:.06em;color:#FBEDE2;pointer-events:none;user-select:none;white-space:nowrap;z-index:0;} .tk-sec--tint .tk-ghost{color:#FAE9DC;} .tk-inner{position:relative;z-index:1;} /* 見出し */ .tk-eyebrow{margin:0 0 10px;font-size:11px;letter-spacing:.22em;font-weight:700;color:#8A4A17;} .tk-h2{margin:0 0 24px;font-size:26px;line-height:1.55;font-weight:800;letter-spacing:.01em;} .tk-h2 .b{color:#8A4A17;} .tk-h3{margin:0 0 12px;font-size:19px;font-weight:800;line-height:1.6;} .tk-rule{display:inline-block;width:4px;height:22px;background:#FEBD8C;vertical-align:-3px;margin-right:12px;} /* ② 数字＋ブラシストローク */ .tk-point{display:block;margin:0 0 2px;font-size:11px;letter-spacing:.24em;font-weight:800;color:#8A4A17;} /* ③ FV */ /* ★FVはデバイスの高さいっぱい（2026-09-02 ディレクター指示）。 svh を使うのは、モバイルで vh がアドレスバーを含んだ高さになり、 実際に見えている画面より下へはみ出すため（svh＝小さい方＝常に見えている高さ）。 */ .tk-fv{position:relative;background:#FEBD8C;overflow:hidden; min-height:100vh;min-height:100svh;display:flex;flex-direction:column;} .tk-fv>.tk-fv-photo{flex:1 1 auto;} .tk-fv-photo{background:#FEBD8C;min-height:280px;display:flex;align-items:center;justify-content:center;color:#5C3216;font-size:13px;text-align:center;padding:24px;} .tk-fvbox{display:inline;background:#FFFFFF;color:#1A1A1A;font-size:22px;line-height:1.6;font-weight:800;padding:.2em .5em;margin:0 0 8px;letter-spacing:.02em;box-decoration-break:clone;-webkit-box-decoration-break:clone;} .tk-fvbox .b{color:#8A4A17;} /* NEWS */ .tk-news{background:#FEBD8C;padding:0 20px;} .tk-news-in{max-width:1080px;margin:0 auto;padding:14px 0;} .tk-news-lb{display:inline-block;background:#FFFFFF;color:#8A4A17;font-size:11px;font-weight:800;letter-spacing:.2em;padding:4px 14px;margin-bottom:8px;} .tk-news ul{list-style:none;margin:0;padding:0;} .tk-news li{padding:8px 0;font-size:14px;color:#5C3216;} .tk-news li a{color:#FFFFFF;text-decoration:none;} .tk-news .d{color:#5C3216;font-size:12px;margin-right:14px;} /* ⑤ ベン図（六角形） */ .tk-venn{position:relative;width:100%;max-width:340px;height:320px;margin:0 auto 32px;} .tk-venn span{position:absolute;width:190px;height:190px;-webkit-clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.6;font-weight:700;color:#FFFFFF;padding:22px 30px;} .tk-venn .v1{top:0;left:50%;transform:translateX(-50%);background:rgba(254, 189, 140, .88);} .tk-venn .v2{bottom:0;left:0;background:rgba(254, 189, 140, .88);} .tk-venn .v3{bottom:0;right:0;background:rgba(253, 210, 176, .92);color:#FFFFFF;} /* 工事内容の要点カード（数字＋短文）。長い説明文をカード化する用途で使う。 */ .tk-workcards{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr;gap:14px;} .tk-workcards>li{background:#FFFFFF;border:1px solid #F0E4DB;border-top:3px solid #FDD2B0;padding:20px 20px 22px;} .tk-workcards-n{display:block;font-size:30px;font-weight:800;line-height:1;color:#8A4A17;font-variant-numeric:tabular-nums;margin:0 0 8px;} .tk-workcards-ttl{margin:0 0 6px;font-size:16px;font-weight:800;color:#8A4A17;line-height:1.5;text-wrap:pretty;} .tk-workcards-tx{margin:0;font-size:14px;color:#8A4A17;line-height:1.75;} .tk-sec--navy .tk-workcards-ttl{color:#8A4A17!important;} .tk-sec--navy .tk-workcards-tx{color:#8A4A17!important;} @media (min-width:768px){ .tk-workcards{grid-template-columns:repeat(3,1fr);gap:20px;} .tk-workcards>li{padding:26px 22px;} .tk-workcards-n{font-size:36px;} } /* 濃紺カード（.tk-card--blue）に置くとき用。地色に合わせて配色を反転する。 ★カード自体が.tk-grid2の半分幅（768px以上でも実測377px程度）のため、 3列化は効かせない＝常に縦積み（検証2026-09-08）。 */ .tk-workcards--onnavy{margin-bottom:20px;grid-template-columns:1fr!important;} .tk-workcards--onnavy>li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);border-top-color:#F0C69C;padding:20px 20px 22px!important;} .tk-workcards--onnavy .tk-workcards-n{color:#5C3216;font-size:30px!important;} .tk-workcards--onnavy .tk-workcards-ttl{color:#FFFFFF;} .tk-workcards--onnavy .tk-workcards-tx{color:#5C3216;} /* 01カード限定: 画像を左、テキスト＋要点カードを右に並べる */ .tk-workcards-split{display:grid;grid-template-columns:1fr;gap:20px;} @media (min-width:900px){ .tk-workcards-split{grid-template-columns:340px 1fr;align-items:center;gap:32px;} .tk-workcards-split .tk-workcards{grid-template-columns:1fr;} } /* 業務案内カード02（写真ヒーロー＋数字カード行）。参考: 経験者向け訴求ページの構成。 */ .tk-workhero{position:relative;overflow:hidden;margin:0 0 20px;} .tk-workhero img{width:100%;display:block;aspect-ratio:5/2;object-fit:cover;} .tk-workhero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#FEBD8C 0%,rgba(254, 189, 140, .82) 30%,rgba(254, 189, 140, .25) 62%,rgba(254, 189, 140, 0) 100%);} .tk-workhero-body{position:absolute;left:0;bottom:0;padding:24px 22px;max-width:600px;} .tk-workhero-eyebrow{display:flex;align-items:center;gap:10px;color:#5C3216;font-size:13px;font-weight:800;letter-spacing:.18em;margin:0 0 10px;} .tk-workhero-eyebrow::before{content:"";width:22px;height:2px;background:#F1DCC7;flex-shrink:0;} .tk-workhero-ttl{color:#FFFFFF;font-size:clamp(20px,3.6vw,28px);font-weight:800;line-height:1.4;margin:0 0 10px;text-wrap:pretty;} .tk-workhero-tx{color:#FCF1E9;font-size:14px;line-height:1.8;margin:0;text-wrap:pretty;} @media (max-width:600px){.tk-workhero-body{padding:18px 16px;max-width:none;}} .tk-worknums{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr;gap:14px;} .tk-worknums>li{position:relative;background:#FFFFFF;border:1px solid #F0E4DB;padding:20px 18px 22px;display:flex;align-items:center;gap:16px;} .tk-worknums>li::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#FDD2B0,#FEBD8C);} .tk-worknums-n{font-size:32px;font-weight:800;color:#8A4A17;line-height:1;flex-shrink:0;font-variant-numeric:tabular-nums;} .tk-worknums-t{font-size:15px;font-weight:800;color:#8A4A17;line-height:1.5;text-wrap:pretty;} @media (min-width:768px){.tk-worknums{grid-template-columns:repeat(3,1fr);}} /* その他の工事カード（03/04/05）。写真上部にラベル、下に白カード＋タグチップ。 */ .tk-svc3{margin:0;} .tk-svc3 .tk-card{display:contents;} .tk-svc-card{background:transparent;border:0;overflow:visible;display:flex;flex-direction:column;} .tk-svc-photo{position:relative;} .tk-svc-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;} .tk-svc-tag{position:absolute;top:14px;left:14px;background:rgba(254, 189, 140, .72);color:#FFFFFF;font-size:11px;font-weight:800;letter-spacing:.1em;padding:6px 10px;} .tk-svc-body{position:relative;z-index:1;margin:-60px 16px 0;background:#FFFFFF;box-shadow:0 16px 34px rgba(254, 189, 140, .16);padding:22px 20px 24px;} .tk-svc-body h3{margin:0 0 10px;} .tk-svc-body p{margin:0 0 16px;font-size:14px;line-height:1.8;color:#8A4A17;text-wrap:pretty;} .tk-svc-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;} .tk-svc-pills li{border:1px solid #F3D8C3;color:#8A4A17;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;} /* ⑥ 数字バンド */ .tk-nums{display:flex;flex-wrap:wrap;} .tk-nums div{flex:1 1 100%;padding:22px 0;border-top:1px solid #FDD2B0;} .tk-nums .n{margin:0 0 4px;font-size:34px;font-weight:800;line-height:1.2;color:#FFFFFF;} .tk-nums .l{margin:0;font-size:13px;color:#5C3216;} /* 横1列固定（全幅共通・縦罫で3分割） */ .tk-nums--row{flex-wrap:nowrap;} .tk-nums--row div{flex:1 1 0;min-width:0;padding:0 10px;border-top:none;border-left:1px solid #FDD2B0;text-align:center;} .tk-nums--row div:first-child{border-left:none;} .tk-nums--row .n{font-size:19px;line-height:1.35;} .tk-nums--row .l{font-size:11px;line-height:1.6;} /* ⑦ 画像枠（標準サイズ／16:10・PCは最大700px） */ .tk-photos{position:relative;margin:0 0 28px;} .tk-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#FBEDE2;border:1px dashed #EBD0B5;color:#8A4A17;font-size:12px;line-height:1.7;text-align:center;padding:16px;margin:0 0 24px;} .tk-photos .tk-ph{margin:0;} .tk-ph--over{margin:-24px 0 0 auto;width:58%;box-shadow:0 6px 20px rgba(254, 189, 140, .14);background:#FDF5EF;} .tk-ph--card{margin:0 0 16px;max-width:none;} /* フロー図解（お問い合わせ〜完了） */ /* 動画エリア（16:9・レスポンシブ） */ .tk-video{position:relative;width:100%;aspect-ratio:16/9;background:#FEBD8C;color:#5C3216;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:1.8;padding:16px;margin:0 0 24px;} .tk-video iframe,.tk-video video{position:absolute;inset:0;width:100%;height:100%;border:0;} .tk-video-note{margin:0 0 24px;font-size:13px;color:#8A4A17;} /* グリッド・リード（業務案内） */ .tk-lead{text-align:center;max-width:720px;margin:0 auto;} .tk-grid2,.tk-grid3{display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 8px;} .tk-grid2 .tk-card,.tk-grid3 .tk-card{margin:0;} .tk-list2{display:grid;grid-template-columns:1fr;gap:0 24px;list-style:none;margin:0;padding:0;} .tk-list2 li{padding:12px 0 12px 18px;border-bottom:1px solid #F0E4DB;font-size:15px;position:relative;} .tk-list2 li::before{content:"";position:absolute;left:0;top:20px;width:7px;height:7px;background:#FDD2B0;} .tk-ph2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 28px;} .tk-ph2 .tk-ph{margin:0;} /* カード・表 */ .tk-card{background:#FFFFFF;border:1px solid #F0E4DB;padding:26px 22px;margin:0 0 16px;} .tk-card--blue{background:#FEBD8C;border-color:#FEBD8C;color:#4A2A12;} .tk-card--blue .tk-h3,.tk-card--blue p{color:#FFFFFF;} .tk-tbl{width:100%;border-collapse:collapse;background:#FFFFFF;} .tk-tbl th,.tk-tbl td{padding:15px 16px;border:1px solid #F0E4DB;text-align:left;vertical-align:top;font-size:15px;} .tk-tbl th{width:34%;font-weight:800;background:#F7FAFE;} .tk-tbl thead th{background:#FEBD8C;color:#4A2A12;border-color:#FEBD8C;width:auto;} /* ボタン・リンク */ /* .tk a{color:#8A4A17} より詳細度を上げる（a.クラス）。 これを怠るとボタン文字がリンク色に上書きされ、青地に青文字で消える */ .tk a.tk-btn{display:inline-block;min-height:44px;padding:16px 34px;background:#FEBD8C;color:#4A2A12;text-decoration:none;font-weight:800;font-size:16px;} .tk a.tk-btn--w{background:#FFFFFF;color:#8A4A17;} .tk a.tk-btn--nv{background:#FEBD8C;color:#4A2A12;} .tk a.tk-arrow{display:inline-block;min-height:44px;padding:12px 0;color:#8A4A17;font-weight:800;text-decoration:none;font-size:15px;} .tk a.tk-btn:focus-visible,.tk a.tk-arrow:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px;} .tk-arrow::after{content:"　⟶";} /* POINTブロック（TOPセクション2・参考サイトの番号セクションに準拠） */ .tk-pt{margin:0 0 48px;} .tk-pt:last-of-type{margin-bottom:0;} .tk-pt-head{display:flex;align-items:flex-end;gap:14px;margin:0 0 14px;} .tk-pt-num{position:relative;font-size:56px;line-height:.9;font-weight:800;color:#8A4A17;font-family:Georgia,'Times New Roman',serif;} .tk-check{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid #F0E4DB;} .tk-check li{display:flex;gap:14px;padding:13px 2px;border-bottom:1px solid #F0E4DB;font-size:15px;} .tk-check .lb{flex:0 0 auto;font-size:11px;letter-spacing:.16em;font-weight:800;color:#8A4A17;padding-top:3px;} /* 560px以上で説明文の隣に画像を並べる（1・3は右、2は左） */ @media (min-width:560px){ .tk-pt{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin-bottom:56px;} .tk-pt--rev .tk-pt-text{order:2;} .tk-pt--rev .tk-pt-media{order:1;} .tk-pt-media .tk-ph{font-size:11px;padding:10px;} } /* ヘッダーのドロップダウン */ .tk-nav{position:relative;} .tk-nav-item{position:relative;} .tk-nav-row{display:flex;align-items:center;gap:2px;} .tk a.tk-nav-parent{display:inline-block;padding:12px 0;min-height:44px;color:#1A1A1A;text-decoration:none;} .tk-nav-toggle{appearance:none;-webkit-appearance:none;background:transparent;border:0;min-width:44px;min-height:44px;padding:0;cursor:pointer;color:#8A4A17;font-size:13px;line-height:1;} .tk-nav-toggle:focus-visible{outline:3px solid #FEBD8C;outline-offset:2px;} .tk-nav-toggle span{display:inline-block;transition:transform .18s ease;} .tk-nav-item.is-open .tk-nav-toggle span{transform:rotate(180deg);} .tk-sub{display:none;list-style:none;margin:0;padding:6px 0;background:#FFFFFF;border:1px solid #F0E4DB;box-shadow:0 8px 24px rgba(254, 189, 140, .14);min-width:240px;} .tk-sub li{margin:0;} .tk a.tk-sub-link{display:block;padding:12px 18px;min-height:44px;color:#1A1A1A;text-decoration:none;font-size:14px;} .tk a.tk-sub-link:hover,.tk a.tk-sub-link:focus-visible{background:#FDF5EF;} .tk-nav-item.is-open>.tk-sub{display:block;} @media (prefers-reduced-motion:reduce){.tk-nav-toggle span{transition:none;}} /* 追従バー（全ページ共通・右下固定） */ .tk-float{position:fixed;right:16px;bottom:16px;z-index:50;} .tk-float a.tk-float-btn{display:block;min-height:56px;padding:12px 20px;background:#FDD2B0;color:#4A2A12;text-decoration:none;box-shadow:0 6px 20px rgba(254, 189, 140, .28);border:2px solid #FFFFFF;} .tk a.tk-float-btn:focus-visible{outline:3px solid #FEBD8C;outline-offset:2px;} .tk-float-en{display:block;font-size:10px;letter-spacing:.24em;font-weight:800;color:#5C3216;line-height:1.4;} .tk-float-ja{display:block;font-size:15px;font-weight:800;line-height:1.5;} /* ページ区切りラベル（納品時は削除） */ .tk-slug{background:#FEBD8C;color:#4A2A12;padding:8px 20px;font-size:12px;font-weight:800;letter-spacing:.1em;} /* パンくず・下層FV */ .tk-subfv{background:#FEBD8C;color:#4A2A12;padding:48px 20px;position:relative;overflow:hidden;} .tk-subfv h1{margin:0;font-size:28px;font-weight:800;} .tk-subfv .en{margin:0 0 8px;font-size:11px;letter-spacing:.26em;color:#5C3216;font-weight:700;} .tk-crumb{padding:14px 20px;border-bottom:1px solid #F0E4DB;font-size:13px;color:#8A4A17;} @media (min-width:768px){ .tk-sec{padding:112px 0;} .tk-ghost{font-size:132px;top:36px;} .tk-h2{font-size:32px;} .tk-fvbox{font-size:34px;} .tk-fv-photo{min-height:460px;} .tk-nums div{flex:1 1 0;border-top:none;border-left:1px solid #FDD2B0;padding:0 28px;} .tk-nums div:first-child{border-left:none;padding-left:0;} .tk-nums .n{font-size:44px;} .tk-nums--row div{padding:0 28px;} .tk-nums--row .n{font-size:40px;line-height:1.2;} .tk-nums--row .n[style]{font-size:22px!important;line-height:1.4;} .tk-nums--row .l{font-size:13px;} .tk-venn{max-width:420px;height:380px;} .tk-venn span{width:236px;height:236px;font-size:14px;} .tk-subfv h1{font-size:36px;} .tk-ph{max-width:560px;} .tk-video{max-width:720px;} .tk-photos .tk-ph,.tk-ph2 .tk-ph{max-width:none;} .tk-photos{max-width:640px;} .tk-ph--card{max-width:none;} .tk-grid2{grid-template-columns:1fr 1fr;gap:24px;} .tk-grid3{grid-template-columns:repeat(3,1fr);gap:20px;} .tk-list2{grid-template-columns:1fr 1fr;} .tk-pt{gap:48px;margin-bottom:88px;} .tk-pt-media .tk-ph{font-size:12px;padding:16px;} .tk-pt-num{font-size:76px;} .tk-sub{position:absolute;top:100%;left:0;z-index:60;} .tk-nav-item:hover>.tk-sub,.tk-nav-item:focus-within>.tk-sub{display:block;} .tk-float{right:24px;bottom:24px;} .tk a.tk-float-btn{padding:16px 28px;} .tk-float-ja{font-size:17px;} .tk-ph2{gap:20px;} } @media (prefers-reduced-motion:reduce){.tk *{animation:none!important;transition:none!important;}} /* ============================================================ 一次生成での追加分（2026-09-01） ここから下は ③HTML版草案.html には無い、サイト化のための追加。 ★上の 209 行は ③HTML版草案.html の ＜style＞ をそのまま移したもの（本文正本のデザインを改変しない）。 ============================================================ */ /* --- サイト化のためのベース（③では .tk が div だったが、サイトでは body に付ける） --- */ html{-webkit-text-size-adjust:100%;} body.tk{min-height:100%;} .tk-skip{position:absolute;left:-9999px;top:0;background:#FEBD8C;color:#4A2A12;padding:12px 20px;z-index:300;} .tk-skip:focus{left:0;} /* ページ区切りラベルはサイト化で不要（③の納品時削除指示どおり） */ .tk-slug{display:none;} /* ============================================================ ★参考② acw2018.ltd 署名1: ロゴ型の窓が開くオープニング（トップのみ） 　 出所: 契約.md ```署名採否```／references.json（ディレクター指差し 2026-09-01） 　 実装規約（参考②から採った3点）: 　 ① 既定は display:none。html.js のときだけ表示する＝JSが動かなくても本文が即出る 　 ② prefers-reduced-motion: reduce なら演出を一切走らせない 　 ③ 拡大するのは「ロゴ型の窓（mask）」であってロゴ画像そのものではない 　 ★ロゴ元データが未支給（⑤ライター向け引き継ぎメモ「要回収」）のため、 　 窓の形は暫定で電柱シルエットを使う。回収後に差し替えるのは 　 --splash-mask（窓の形）と .tk-splash-mark の中身の2箇所だけ。 ============================================================ */ #tk-splash{display:none;} html.js #tk-splash{display:flex;} .tk-splash{position:fixed;inset:0;z-index:200;background:#FFFFFF;align-items:center;justify-content:center;overflow:hidden;} .tk-splash-window{position:absolute;inset:0;background:var(--splash-photo,#FEBD8C) center center / cover no-repeat; -webkit-mask:var(--splash-mask) center center / 100px 89px no-repeat;mask:var(--splash-mask) center center / 100px 89px no-repeat; transition:-webkit-mask-size 1.3s cubic-bezier(.6,0,.32,1),mask-size 1.3s cubic-bezier(.6,0,.32,1),filter 1.3s ease,opacity 1.3s ease; opacity:0;filter:blur(0);} .tk-splash-inner{position:relative;width:100px;height:89px;z-index:1;transition:opacity .3s ease;} .tk-splash-mark{width:100px;height:89px;color:#8A4A17;display:block;} .tk-splash-name{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%) translateY(10px); font-size:20px;font-weight:800;color:#8A4A17;letter-spacing:.03em;white-space:nowrap;opacity:0; transition:opacity .6s ease,transform .6s ease;} @media (min-width:1080px){ .tk-splash-inner{width:120px;height:107px;} .tk-splash-mark{width:120px;height:107px;} .tk-splash-name{left:calc(100% + 22px);top:50%;transform:translateY(-50%) translateX(-14px);font-size:26px;} } /* フェーズはJSが data-phase で切り替える（値の意味は site.js の先頭コメントが正本） */ .tk-splash[data-phase="1"] .tk-splash-name{opacity:1;transform:translateX(-50%) translateY(0);} @media (min-width:1080px){.tk-splash[data-phase="1"] .tk-splash-name{transform:translateY(-50%) translateX(0);}} .tk-splash[data-phase="2"] .tk-splash-inner{opacity:0;} .tk-splash[data-phase="3"] .tk-splash-inner{opacity:0;} .tk-splash[data-phase="3"] .tk-splash-window{opacity:1;} .tk-splash[data-phase="4"] .tk-splash-inner{opacity:0;} .tk-splash[data-phase="4"] .tk-splash-window{opacity:0;filter:blur(14px);-webkit-mask-size:var(--splash-grow);mask-size:var(--splash-grow);} @media (prefers-reduced-motion:reduce){#tk-splash{display:none!important;}} /* ============================================================ ★参考② acw2018.ltd 署名2: キャッチコピーの行ごと時差スライドイン 　 参考②の実装単位は「文字」ではなく「行」（実測 2026-09-01）。 　 方向を変える（左→右→下）／ディレイは階段状（+0.55s → +0.5s）。 　 見出しは減速主体で静かに止め、リード文だけ軽くオーバーシュートさせる。 　 --copyin-base はページごとに変える（トップ＝スプラッシュ明けの4.9s／下層＝0.15s）。 ============================================================ */ @keyframes tkSlideL{from{opacity:0;transform:translateX(-38px);}to{opacity:1;transform:none;}} @keyframes tkSlideR{from{opacity:0;transform:translateX(38px);}to{opacity:1;transform:none;}} @keyframes tkSlideD{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}} .tk-copyin{opacity:0;} html.js .tk-copyin{animation-duration:1.15s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.2,.8,.2,1);} html.js .tk-copyin[data-copyin="L"]{animation-name:tkSlideL;animation-delay:var(--copyin-base,.15s);transform-origin:left center;} html.js .tk-copyin[data-copyin="R"]{animation-name:tkSlideR;animation-delay:calc(var(--copyin-base,.15s) + .55s);transform-origin:right center;} html.js .tk-copyin[data-copyin="D"]{animation-name:tkSlideD;animation-duration:1s;animation-timing-function:cubic-bezier(.34,1.56,.64,1);animation-delay:calc(var(--copyin-base,.15s) + 1.05s);} /* ★JSが無い／演出を止めた環境では最初から見えている状態にする（本文が消えたままにならない） */ html:not(.js) .tk-copyin{opacity:1;} @media (prefers-reduced-motion:reduce){.tk-copyin{opacity:1!important;animation:none!important;transform:none!important;}} /* --- ブロック単位のリビール（参考① bright の fade-up・ty26px） --- */ @keyframes tkFadeUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}} html.js .tk-reveal{opacity:0;} html.js .tk-reveal.is-in{animation:tkFadeUp .8s cubic-bezier(.2,.8,.2,1) forwards;} @media (prefers-reduced-motion:reduce){.tk-reveal{opacity:1!important;animation:none!important;}} /* ============================================================ ★ページ固有の背景グラフィック（ディレクター指定 2026-09-01） 　「かなり薄いブルー〜ブルーグレーで、主張しすぎないように。 　　背景は白〜ごく薄い水色をベースにし、あくまで背景装飾として見える程度」 　 → 面は #FFFFFF〜#F7FAFE、線は #F4E5DA〜#FBEDE2（本文 #1A1A1A とのコントラストに影響しない明度帯）。 　 いずれも aria-hidden の装飾レイヤーで、本文より必ず背面（z-index:0）に置く。 ============================================================ */ /* ★背景の線描画（.tk-bgart）は 2026-09-03 ディレクター指示で削除した。 2026-09-01 の指定「/work/network 背景にネットワークのグラフィック／/work/pole 電柱のグラフィック」の 取り消し（原文「ダサいので削除」）。**古い指示を見て復活させないこと。** 受け皿のクラス（.tk-sec--art / .tk-page--network / .tk-page--pole）は淡いグラデーションのために残す。 */ .tk-page--network{background:linear-gradient(180deg,#FFFFFF 0%,#F7FAFE 100%);} .tk-page--pole{background:linear-gradient(180deg,#FFFFFF 0%,#F7FAFE 100%);} /* 背景装飾を敷くセクションは背景色を持たせない（下の .tk-bgart が透ける） */ .tk-sec--art{background:transparent;} /* --- 写真スロット（未支給・data-ph）。撮影・支給が入ったら ＜img＞ へ差し替える --- 規約: [data-ph] を持つ要素の**直下の span** に用途ラベルを書く。 verify/fv-protagonist.mjs・contrast-pixels.mjs・a11y-audit.mjs がこの形を前提に見る （用途ラベルは納品物ではないので、計測時は span が非表示化される）。 */ [data-ph]{position:relative;} [data-ph]>span{display:block;} /* --- サイト化で必要になった細部 --- */ .tk-hdr{position:relative;z-index:70;background:#FFFFFF;border-bottom:1px solid #F0E4DB;} .tk-hdr-en{margin:0 0 4px;font-size:10px;letter-spacing:.28em;color:#8A4A17;font-weight:800;} .tk-hdr-name{margin:0 0 14px;font-size:18px;font-weight:800;} .tk-hdr-tel{margin:8px 0 0;font-size:15px;} .tk-hdr-tel a{text-decoration:none;font-weight:800;} .tk-hdr-tel span{color:#8A4A17;font-size:13px;} .tk-ftr{background:#FEBD8C;color:#4A2A12;padding:64px 0 28px;} .tk-navlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 22px;font-size:15px;} /* ============================================================ ★機構契約・機械ゲートの実装（2026-09-01 追加） 出所: 契約.md ```機構契約```（参考① bright-2020.com の実測を下限にした値）と verify/gate-run.mjs の初回実行で出た未実装分。 bleed-one-side 4以上 ／ split-full 2以上 ／ photo-duo 2以上 ／ spacing-steps 4以上 ここは「参考サイトのレイアウト機構」を実際に効かせるための実装であって、装飾の足しではない。 ============================================================ */ /* --- 写真スロットを「写真」として見せる（未支給のあいだの表示） --- .tk-ph は背景色だけの空枠なので、人の目にも機構検定にも「ただの面」に見えていた。 ごく薄い斜めハッチを敷いて写真枠だと分かるようにする。支給後は ＜img＞ に置き換わり隠れる。 ★.tk-ph--over は background ショートハンドで色を上書きするため、ここで一緒に指定し直す。 */ .tk-ph,.tk-ph--over,.tk-fv-photo{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 14L14 0M-7 7L7 -7M7 21L21 7' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:repeat;} .tk-fv-photo{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 14L14 0M-7 7L7 -7M7 21L21 7' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E");} /* --- 全幅2分割セクション（機構: split-full） --- セクション直下の子2つで画面を隙間なく二分する。狭幅では 論点 narrow-stack-order の回答どおり 「テキスト→画像」で縦積みになるよう、DOMは body→media の順に置き、PC幅で order を入れ替える。 */ .tk-sec--split{padding-left:0;padding-right:0;} .tk-sec--split>.tk-split-body,.tk-sec--split>.tk-split-media{position:relative;z-index:1;} .tk-split-in{position:relative;z-index:1;padding:0 20px;} .tk-split-media .tk-photos{margin:0;max-width:none;} .tk-split-media .tk-ph{margin:0;max-width:none;} .tk-split-body{padding:0 0 28px;} @media (min-width:768px){ .tk-sec--split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;} .tk-sec--split>.tk-split-media{order:1;} .tk-sec--split>.tk-split-body{order:2;padding:0;} .tk-sec--split--rev>.tk-split-media{order:2;} .tk-sec--split--rev>.tk-split-body{order:1;} .tk-split-in{max-width:560px;padding:0 44px;} .tk-sec--split--rev .tk-split-in{margin-left:auto;} .tk-split-media .tk-ph{aspect-ratio:4/3;} .tk-sec--split .tk-ghost{right:8px;} } /* --- 写真2枚のオフセット重ね＋片側ブリード（機構: photo-duo / bleed-one-side） --- 参考① の署名（契約.md ```署名採否``` 4件目）。重ねた2枚のうち**小さい方が画面の端に接する**のが この機構の要件で、版面の中で完結していると「重ねただけ」になる。 ・全幅2分割の写真側は列そのものが端まで届くので、2枚とも同じ端に寄せる。 ・POINTブロックは版面の中にあるので、写真列だけを画面端まで引き伸ばす（min() で狭幅は-20px固定）。 */ @media (min-width:768px){ .tk-pt-media .tk-photos{max-width:none;} .tk-pt:not(.tk-pt--rev) .tk-pt-media{margin-right:min(-20px,calc(520px - 50vw));} .tk-pt--rev .tk-pt-media{margin-left:min(-20px,calc(520px - 50vw));} } /* --- セクション余白の段階（機構: spacing-steps 4以上） --- 背景が切り替わる帯ごとに上下余白を変え、56 / 72 / 88 / 104px の4段階を作る。 ★数字を増やすための水増しではなく、「濃紺の帯は締める・CTAは開ける」という緩急そのもの。 */ .tk-sec--band{padding-top:92px;padding-bottom:92px;} .tk-sec--cta{padding-top:132px;padding-bottom:132px;} /* --- 下層FVの見出し（確定値 jump 2.4-3.4 に合わせる。36px/16px=2.25 で下限割れしていた） --- */ @media (min-width:768px){.tk-subfv h1{font-size:40px;}} /* --- パンくずのタップ領域（#10 44×44px。13pxの「TOP」が26×17pxだった） --- */ .tk-crumb{padding:0 20px;} .tk-crumb a{display:inline-block;min-width:44px;min-height:44px;padding:13px 6px;text-align:center;} .tk-crumb .tk-wrap{display:block;} /* --- 和文の行分割（#14 行末孤立・行頭の約物）。原稿は書き換えずCSSで解く --- */ .tk p,.tk li,.tk dd,.tk td,.tk h1,.tk h2,.tk h3{line-break:strict;text-wrap:pretty;} /* --- オープニング演出の変数の既定値（cssvar: --splash-mask が未定義だった） --- トップの #tk-splash は inline style で同名の変数を上書きする。ここは「定義漏れで mask 宣言ごと 無効になる」のを防ぐための床。ロゴ回収後はトップの inline style と一緒にここも差し替える。 */ .tk-splash{--splash-mask:url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 34 52%22%3E%3Cpath d=%22M15 2h4v48h-4z%22 fill=%22%23000%22/%3E%3Cpath d=%22M4 11h26v3.4H4z%22 fill=%22%23000%22/%3E%3Cpath d=%22M7.5 20.5h19v3.2h-19z%22 fill=%22%23000%22/%3E%3C/svg%3E');--splash-photo:#FEBD8C;--splash-grow:380px 338px;} /* ============================================================ ★FV＝参考① の署名1「白ラベルボックスの階段組み」を実装する（2026-09-01） 出所: 契約.md ```署名採否``` 1件目（ディレクター指差し「セクション1の見出しが斜め」）＋ ②コンセプトシート 造形要素3「白ラベルボックスを写真に重ねるFV＋斜めの青い帯」。 ・参考①実測 .box x=64 / .box.indent x=120 ＝ 2枚目を 56px 字下げして階段状に見せる。 ・確定値 jump-top 3.2-4.0（参考① H1 58px÷本文16px=3.6）に対し、実装は 34px÷16px=2.1 で 下限を大きく割っていた。54px＝3.375 に引き上げる。 ・PC幅では白ラベルを写真の上に重ねる（重ねない＝参考①と別の型になる）。 リード文が写真に載るのでスクリムを敷き、コントラストを確保する。 ============================================================ */ .tk-fvbox--indent{margin-left:24px;} @media (min-width:768px){ .tk-fvbox{font-size:54px;padding:10px 24px;} .tk-fvbox--indent{margin-left:56px;} .tk-fv{position:relative;} .tk-fv-photo{position:relative;min-height:0;} .tk-fv-photo>span{position:relative;z-index:1;align-self:flex-start;padding-top:24px;} } /* --- 狭幅で見出し・数字の最終行が1〜2文字になるのを防ぐ（#14 行末孤立）--- ★原稿は書き換えない（実装専念モード）。改行位置はCSSで解く。 ・見出し中の着色語（.b）は inline-block にして語の途中で折らない ・見出しと数字は text-wrap:balance で行長をそろえる（最終行だけが極端に短くならない） */ .tk-h2 .b{display:inline-block;} .tk-h2,.tk-nums .n,.tk-nums--row .n{text-wrap:balance;} /* --- FVの H1 そのものにサイズを持たせる（確定値 jump-top の実測対象は h1 の computed font-size）--- 白ラベル（.tk-fvbox）だけを大きくしても h1 はブラウザ既定の 2em=32px のままで、 ジャンプ率は 32/16=2.0 と測られていた（宣言 3.2-4.0 の下限割れ）。54/16=3.375。 */ .tk-fv h1{font-size:22px;line-height:1.35;} .tk-fvbox{font-size:inherit;} @media (min-width:768px){.tk-fv h1{font-size:54px;}} /* --- 行分割の指定を整理（先に書いた .tk h2 の text-wrap:pretty が .tk-h2 の balance を 詳細度で上回っていて効いていなかった） --- 見出しは常に balance（行長をそろえる＝最終行だけが極端に短くならない）。 本文は狭幅だけ balance にする。PC幅で balance にすると版面充填率（#16）が下がるため。 */ .tk h1,.tk h2,.tk h3{text-wrap:balance;} /* ★2026-09-03 撤去: 狭幅の本文に text-wrap:balance を掛けていたが、これは**段落ごとに行の幅を変える**。 実測 375px: 段落1の行が222px（器335pxに対し113pxも余る）／段落2は320px／段落3は303px＝ 「文字ボックスがコンテンツの途中で折り返している」と読める（ディレクター指摘 2026-09-03）。 本文は器の幅いっぱいまで使う。行末孤立は個別に詰めて直す（均しでごまかさない）。 */ /* --- 読み幅だけの段は版面もそこに合わせる（#16 版面充填率）--- 見出し＋短い説明文だけのセクションは、1080pxの版面に対してインクが 60〜71% しか無く 「右が空いている」状態になる。読み幅を広げるのではなく版面を読み幅に合わせる。 */ .tk-sec--narrow .tk-wrap{max-width:760px;} /* --- span の中の文字組み（responsive-audit は span 単位でも行末孤立・禁則を見る）--- ・[data-ph]＞span は写真スロットの用途ラベル（納品物ではない・写真支給で消える）だが、 幅掃引では実文字として測られるので同じ規則を当てておく。 ・.tk-check の項目は短い文が多く、狭幅で最終行が2文字になりやすい。 */ [data-ph]>span,.tk-check li>span{line-break:strict;text-wrap:balance;} /* --- FVキャッチの段階サイズ --- 768〜1079px では 54px だと2行目（13文字＋字下げ56px）が折り返して行末2文字になる。 ジャンプ率の検定は pc=1280px で測るので、1080px 以上で 54px に達していればよい。 */ .tk-fvbox--indent{margin-left:14px;} @media (min-width:768px){.tk-fv h1{font-size:40px;}.tk-fvbox--indent{margin-left:40px;}} @media (min-width:1080px){.tk-fv h1{font-size:54px;}.tk-fvbox--indent{margin-left:56px;}} /* --- FV写真スロットを中間グレーにする（量契約 chroma-area）--- ★理由: 写真が未支給のあいだ、FVの枠を濃紺ベタ(#B66E2B)で置いていたため、FV帯の 75.7% が 有彩色として測られていた（量契約 chroma-area 53±12＝参考①FV実測 52.6%）。参考①のFV写真は 全幅ブリードだが、写真自体に空・白壁など低彩度の面が多く、画面の半分近くは無彩色に寄る。 **写真枠を彩度のある面で代用すると、参考との「量」の比較そのものが成立しない。** ニュートラルグレーに変え、コピーが載る下側だけスクリムで濃紺に沈める（可読性の確保）。 写真が支給されたらこの背景は ＜img＞ に隠れる。 */ .tk-fv-photo{background-color:#E6E0DB;color:#4E453E;} .tk-fv-photo{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 14L14 0M-7 7L7 -7M7 21L21 7' stroke='%23000000' stroke-opacity='.05' stroke-width='1.2'/%3E%3C/svg%3E");} @media (min-width:768px){ /* ★紺のベールを薄くする（2026-09-02: 全体的に青が強く印象が重い）。 上＝ヘッダーの白文字ぶんだけ／中＝空をそのまま明るく／下＝キャッチの下地。 */ /* ★ベールは2枚重ね。1枚目＝左が濃い斜め（コピーの下地。別要素で置くと端の境目が帯に見える）、 2枚目＝上下（上はヘッダーの白文字ぶん・下はコピーの足元）。中央は素通しで空の明るさを残す。 */ } /* ============================================================ ★演出が走らない環境で本文が消えないようにする（2026-09-01・撮影で発覚） 教訓 70_運用ルール/教訓メモリ/css-animation-hidden-base-state-blanks-under-motion-kill.md と同型の再発。`.tk-copyin` は「セレクタのbaseに opacity:0 を書き、アニメーションで見せる」形 だったため、**アニメーションを止められると opacity:0 のまま固定される**。 実測: verify/shoot-pages.mjs はアニメ抑止CSS（animation:none!important）を注入して撮るので、 FVのキャッチ2行が撮影に1枚も写っていなかった。ディレクター・デザイナーが見る画だけでなく、 **量契約 chroma-area の画素計測も本文が無い状態で行われていた**（白いラベル2枚ぶんの 無彩色が抜けて 75.7% と出て、その値に合わせてスクリムを設計しかけた）。 → 教訓の指示どおり、**base は完成形（opacity:1）にし、待機中の非表示は @keyframes の from ＋ animation-fill-mode:both だけに持たせる**。 「動く＝遅延中は from の不可視」「止められた＝完成形」のどちらでも本文が消えない。 ※ JSのタイマー救済は書かない（同教訓の「誤診しやすい方向」に名指しされている）。 ※ .tk-reveal はスクロールするまで隠し続ける必要があり keyframes に任せられないので、 IntersectionObserver が付ける .is-in で表示を確定させる（アニメーションに依存させない）。 ============================================================ */ .tk-copyin{opacity:1;} html.js .tk-copyin{animation-fill-mode:both;} html.js .tk-reveal.is-in{opacity:1;} /* --- ベン図の面（六角形）--- ★2026-09-01 ディレクター指示でマーク（電柱アイコン）を削除した。 文字だけを正六角形の中心に置く。以前は「3つのポイントの箇所に電柱のアイコンを」という 指定でマークを入れていたが、同じ絵が3つ並ぶだけで意味を持たず、 六角形の縦が詰まって文字の逃がしも必要になっていた。 */ .tk-venn span{flex-direction:column;gap:6px;} /* --- 写真2枚のオフセット重ねが .tk-photos の中で効いていなかった --- `.tk-photos .tk-ph{margin:0}`（詳細度 0,2,0）が `.tk-ph--over{margin:-24px 0 0 auto}`（0,1,0）に 勝っていて、**重なりもオフセットも消えて2枚が縦に並ぶだけ**になっていた（実測 /work/pole ほか）。 ②コンセプトシート 造形要素7・契約 ```署名採否``` 4件目の署名なので、詳細度を揃えて効かせ直す。 */ .tk-photos .tk-ph--over{width:62%;margin:-28px 0 0 auto;} /* ============================================================ ★ロゴ元データ受領（2026-09-01）— 暫定の電柱シルエットを実ロゴに差し替え 出所: 0_受領素材/220404_toyotsushin_fin_ol.psd（2022年のサイトデザインカンプ・381レイヤー）の 「ロゴ」レイヤー最大版 652x384 を PNG 書き出し（実測色 #A16126）。 ・マーク＝ /assets/logo-mark.png（紺）／濃紺の面では /assets/logo-mark-white.png（白抜き） ・オープニングの「窓」も同じPNGのアルファをマスクに使う＝マークと窓の形が完全に一致する ・比率が 652:384（1.70）に変わったので、マーク寸法とマスク寸法を揃え直す （site.js の --splash-grow の基準値も同じ数値に合わせてある） ============================================================ */ .tk-splash-inner{width:132px;height:78px;} .tk-splash-mark{width:132px;height:78px;object-fit:contain;color:inherit;} .tk-splash-window{-webkit-mask:var(--splash-mask) center center / 132px 78px no-repeat;mask:var(--splash-mask) center center / 132px 78px no-repeat;} @media (min-width:1080px){ .tk-splash-inner{width:168px;height:99px;} .tk-splash-mark{width:168px;height:99px;} .tk-splash-window{-webkit-mask:var(--splash-mask) center center / 168px 99px no-repeat;mask:var(--splash-mask) center center / 168px 99px no-repeat;} } /* 変数の既定値も実ロゴへ（cssvar の定義漏れ対策として置いてある床） */ .tk-splash{--splash-mask:url('data:image/png;base64,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');--splash-photo:#FEBD8C;--splash-grow:640px 377px;} /* --- ヘッダー／フッターのロゴ組み（マーク＋社名） --- */ .tk-brand{display:flex;align-items:center;gap:12px;} .tk-brand-mark{width:52px;height:31px;flex:0 0 auto;} .tk-brand .tk-hdr-en,.tk-brand .tk-hdr-name{margin:0;} .tk-ftr-brand{display:flex;align-items:center;gap:14px;margin:0 0 22px;} .tk-ftr-brand img{width:58px;height:34px;flex:0 0 auto;} @media (min-width:768px){ .tk-brand-mark{width:64px;height:38px;} .tk-ftr-brand img{width:72px;height:42px;} } /* --- オープニングの社名はPC幅でもマークの真下に置く（2026-09-01）--- 元の実装は 1080px以上でマークの**右横**に社名を絶対配置していた。マーク自体は画面中央に 置いてあるので（＝窓が開く位置とマークの位置を一致させるため）、横に社名が伸びると **ロゴ組み全体が右へずれて見える**。実ロゴに差し替えて初めて目立つようになったので、 PCでも下に置いて左右対称にする。窓とマークの一致（この演出の肝）は崩さない。 */ @media (min-width:1080px){ .tk-splash-name{left:50%;top:calc(100% + 18px);transform:translateX(-50%) translateY(10px);font-size:26px;} .tk-splash[data-phase="1"] .tk-splash-name{transform:translateX(-50%) translateY(0);} } /* ============================================================ ★ブラッシュアップ（2026-09-01 第2版）— 参考① bright-2020.com の雰囲気へ寄せる ディレクター評「現状50点」。実写真の受領（0_受領素材/Adobe画像・ライセンス購入済み）に合わせて、 参考①の**顔**を実装する。参考①の実測（%LOCALAPPDATA%/ewg-tools/captures/bright-2020.com）と 実画面の目視から採ったのは次の4点: ① FVの青いウェーブ2枚（写真の裾を曲線で切る／右上から淡い帯が差す） ② ヘッダーを写真に重ね、ロゴを白い箱で左上に落とす（トップのみ） ③ 背面ゴースト英字が**巨大**（参考実測 208px ／ 旧実装 132px） ④ 数字の下のブラシは直線の平行四辺形ではなく**波形のリボン** ============================================================ */ /* --- ① 写真スロットに実画像が入ったときの見せ方 --- */ .tk-ph.has-img{border:0;padding:0;background:#F0E4DB;overflow:hidden;} .tk-ph.has-img img{width:100%;height:100%;object-fit:cover;display:block;} .tk-fv-photo{position:relative;overflow:hidden;} .tk-fv-photo.has-img{padding:0;background-image:none;} .tk-fv-photo.has-img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;} /* --- FVの青いウェーブ（参考①の顔） --- */ .tk-fv-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;z-index:2;pointer-events:none;} /* --- SCROLL の縦インジケータ（参考①右端） --- */ .tk-scroll{position:absolute;right:16px;bottom:0;z-index:3;display:none;align-items:center;flex-direction:column;gap:10px;color:#5C3216;} .tk-scroll span{writing-mode:vertical-rl;font-size:10px;letter-spacing:.34em;font-weight:700;} .tk-scroll i{display:block;width:1px;height:64px;background:linear-gradient(180deg,rgba(240, 228, 219, .9),rgba(240, 228, 219, 0));} @media (min-width:768px){.tk-scroll{display:flex;right:26px;}} @media (prefers-reduced-motion:no-preference){ .tk-scroll i{animation:tkScroll 2.2s ease-in-out infinite;transform-origin:top;} @keyframes tkScroll{0%{transform:scaleY(.2);opacity:.3}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);opacity:.3}} } /* --- FVのコピーはウェーブより前面へ --- */ @media (min-width:768px){ .tk-fv-photo{min-height:0;} /* 写真が実物になったのでスクリムは下側だけに戻す（顔・作業内容が沈まないように） */ } @media (min-width:1080px){.tk-fv-photo{min-height:0;}} /* --- ② ヘッダーを写真に重ねる（トップのみ・1080px以上） --- */ @media (min-width:1080px){ .tk-top .tk-hdr{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom:0;} .tk-top .tk-hdr>.tk-wrap{max-width:none;padding:0 0 0 40px!important;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;} .tk-top .tk-brand{background:#FFFFFF;padding:18px 26px 20px;box-shadow:0 8px 28px rgba(254, 189, 140, .12);align-self:flex-start;} .tk-top .tk-nav{background:#FFFFFF;padding:0 26px;box-shadow:0 8px 28px rgba(254, 189, 140, .12);order:2;} .tk-top .tk-hdr-tel{order:3;margin:0;background:#FFFFFF;padding:8px 18px;box-shadow:0 8px 28px rgba(254, 189, 140, .12);align-self:flex-start;} .tk-top .tk-navlist{gap:0 20px;} /* ドロップダウンが白バーの下に潜らないように */ .tk-top .tk-nav .tk-sub{box-shadow:0 12px 28px rgba(254, 189, 140, .18);} } /* --- ③ 背面ゴースト英字を参考①の大きさへ --- */ @media (min-width:768px){.tk-ghost{font-size:172px;top:20px;letter-spacing:.02em;}} @media (min-width:1080px){.tk-ghost{font-size:208px;top:8px;}} .tk-sec--split .tk-ghost{color:#FCF1E9;} /* --- ④ 数字の下のブラシを波形のリボンにする --- */ /* --- 重ねヘッダーの組み直し（1版目は3要素を横1列に並べてナビが2段に折れた）--- 参考①と同じく「左＝ロゴの白箱／右＝電話の小箱の下にナビの白バー」の2段構成にする。 */ @media (min-width:1080px){ .tk-top .tk-hdr>.tk-wrap{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:start;gap:0;} .tk-top .tk-brand{grid-column:1;grid-row:1 / span 2;} .tk-top .tk-hdr-name{white-space:nowrap;} .tk-top .tk-hdr-tel{grid-column:2;grid-row:1;justify-self:end;white-space:nowrap;font-size:14px;} .tk-top .tk-nav{grid-column:2;grid-row:2;justify-self:end;margin-top:8px;} .tk-top .tk-navlist{flex-wrap:nowrap;gap:0 18px;font-size:14px;white-space:nowrap;} } /* 重ねていない下層ヘッダーも、社名が折り返さないようにする */ @media (min-width:768px){.tk-hdr-name{white-space:nowrap;}} /* --- ゴースト英字を大きくしたら本文の上まで走ってしまったので調整（2026-09-01）--- 参考①の巨大英字は「見出し・数字の背後」に置かれ、本文の段には掛からない。 208pxは維持しつつ、上へ逃がして天地を切り、色も一段淡くする。 */ @media (min-width:1080px){ .tk-ghost{top:-34px;} .tk-sec--split .tk-ghost{top:-46px;} } .tk-ghost{color:#FDF3EC;} .tk-sec--tint .tk-ghost{color:#FCEDE1;} .tk-sec--split .tk-ghost{color:#FDF3EC;} /* --- ベン図: 電柱アイコンを入れたぶん中身が縦に伸び、六角形の斜辺で文字が切れていた（2026-09-01 実測）--- 六角形は上下の頂点付近が細いので、アイコン＋2行だと安全域を超える。図全体を一回り大きくし、 アイコンを小さく・行間を詰めて収める。 */ .tk-venn{max-width:360px;height:352px;} .tk-venn span{width:212px;height:212px;font-size:12.5px;line-height:1.5;padding:18px 26px;gap:4px;} @media (min-width:768px){ .tk-venn{max-width:470px;height:436px;} .tk-venn span{width:266px;height:266px;font-size:14px;line-height:1.6;padding:22px 34px;gap:6px;} } /* --- FVリード文のコントラスト（AA割れ 1079/1080px で 2.88:1）--- 実写真に差し替えたことで、リード文の背後が「明るい空」になる幅が出た。写真側のスクリムは 写真の高さに対する割合なので、幅によってリード文の位置と濃さがズレる。 → **コピー塊そのものの背後**に帯を敷いて、幅に関係なく同じ濃さを保証する。 */ /* --- 追従バナー: 参考② acw2018.ltd の「FVに浮くカード＋ピルボタン」に寄せる --- 参考②のFV右下は、白い角丸カードに一行の補足＋ピル型ボタンという組み。 本文（RECRUIT／採用情報はこちら）は変えずに、組みだけそちらへ寄せる。 ★角丸は契約 roundness 0.6（ほぼシャープ／丸めるのはボタン・タグのみ）に従い、カードは小さめの角丸。 */ .tk-float a.tk-float-btn{background:#FDD2B0;border:0;border-radius:0;padding:14px 22px 16px; box-shadow:0 16px 38px rgba(254, 189, 140, .26);display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:196px;position:relative;overflow:hidden;isolation:isolate;} @keyframes tk-float-shine{0%,60%{transform:translateX(-120%) skewX(-20deg);}75%,100%{transform:translateX(300%) skewX(-20deg);}} .tk-float a.tk-float-btn::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%; background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%); transform:translateX(-120%) skewX(-20deg);animation:tk-float-shine 3.2s ease-in-out infinite;pointer-events:none;z-index:2;} @media (prefers-reduced-motion:reduce){.tk-float a.tk-float-btn::after{animation:none;display:none;}} .tk-float .tk-float-en{color:#5C3216;letter-spacing:.28em;font-size:10px;font-weight:800;text-align:center;} .tk-float .tk-float-ja{background:none;color:#FFFFFF;border-radius:0;padding:0;margin-top:7px; font-size:15px;font-weight:800;letter-spacing:.06em;line-height:1.4;text-align:center;} /* ★hover で変えるのは面の色だけ（箱の寸法は変えない＝兄弟がずれない）。 変える性質は必ず transition に入れる（lint L008）。 */ .tk-float a.tk-float-btn{transition:background-color .45s cubic-bezier(.22,.61,.36,1);} .tk-float a.tk-float-btn:hover{background:#FEBD8C;} @media (prefers-reduced-motion:reduce){.tk-float a.tk-float-btn{transition:none;}} .tk-float a.tk-float-btn:focus-visible{outline:3px solid #FEBD8C;outline-offset:3px;} /* --- 下層ヘッダーも1行に詰める（トップの重ねヘッダーと同じ密度に揃える）--- 3段（ロゴ／ナビ／電話）だと縦に間延びして、参考①のきびきびした印象から遠い。 */ @media (min-width:1080px){ .tk-hdr>.tk-wrap{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center; padding-top:14px!important;padding-bottom:0!important;} .tk-brand{grid-column:1;grid-row:1 / span 2;} .tk-hdr-tel{grid-column:2;grid-row:1;justify-self:end;margin:0;white-space:nowrap;font-size:14px;} .tk-nav{grid-column:2;grid-row:2;justify-self:end;} .tk-navlist{flex-wrap:nowrap;gap:0 18px;font-size:14px;white-space:nowrap;} } /* ============================================================ ★落とし穴lintの指摘2件（2026-09-01・rule ステップ） ============================================================ */ /* L010: オープニングの板がクリックを奪っていた。 #tk-splash は全画面 position:fixed / z-index:200 で、操作対象を1つも持たないのに hit-test に勝つ＝**演出中（約4.7秒）はヘッダーのリンクもCTAも押せない**。 教訓 tenko-splash-overlay-pointer-events-blocks-cta.md のとおり透過させる。 */ .tk-splash,.tk-splash *{pointer-events:none;} /* L008: hoverで background-color を変えるのに transition が無い箇所があった（2箇所）。 教訓 global-hover-transition-base.md のとおり**個別に足さず**、状態が変わる要素へ 共通のトランジションを1つ敷く。入場演出（.tk-copyin / .tk-reveal）とは別レイヤーにするため、 それらは対象から外す。 */ .tk a,.tk button,.tk-card,.tk-float .tk-float-ja,.tk-tbl th,.tk-tbl td{ transition:color .45s cubic-bezier(.22,.61,.36,1), background-color .45s cubic-bezier(.22,.61,.36,1), border-color .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), opacity .45s cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion:reduce){ .tk a,.tk button,.tk-card,.tk-float .tk-float-ja,.tk-tbl th,.tk-tbl td{transition:none;} } /* ============================================================ ★A. 写真の信頼性・クロップ（2026-09-01 第3版） ------------------------------------------------------------ A-1 施工実績の写真を差し替え: 旧 2149899598 は石灰岩の岩稜・糸杉・地中海風の家並みで **日本に見えない**。「対応エリア＝四国中央市／新居浜市…」の隣に置くと嘘になるため、 2170530246（日本の住宅街の路地・電柱と電線）へ変更した。 A-2 縦構図の素材が 16:9 の枠で主題ごと切れていた。受領34点のうち縦構図は3点だけで、 いずれも被写体が上下に散る構図。**枠を変えず、寄せ位置だけをスロット単位で指定**する （4通りのクロップを実際に書き出して目視で選んだ値）。 ============================================================ */ [data-ph^="SV-01"] img{object-position:50% 85%;} /* 穴掘建柱車: 85%でヘルメット＋腕＋新柱が入る（既定50%は腕だけ） */ [data-ph^="SVC-01"] img{object-position:50% 25%;} /* 電線工事: 25%で昇柱中の上半身が入る */ [data-ph^="PL-02"] img{object-position:50% 25%;} /* 高所作業車: 25%でバケット上の2人と架線が入る */ [data-ph^="WK-01"] img{object-position:50% 40%;} /* 住宅街の路地: 40%で電柱と架線の帯が中心にくる */ /* ============================================================ ★C-1. モバイルのヘッダーをハンバーガーにする ------------------------------------------------------------ 実測（390px幅）: ロゴ／ナビ2段／お問い合わせボタン／電話 の4段でヘッダーが縦に伸び、 **ファーストビューの約1/3をヘッダーが占めていた**。参考①②はどちらもハンバーガー。 ★JSが動かない環境ではボタンを出さず、メニューを開いたまま（従来の縦積み）にする。 判定に使うのは `.js`（＝演出可否）ではなく `.has-js`（＝JSが動くか）。 `.js` は prefers-reduced-motion:reduce で付かないので、これで分けないと 「視差を減らす設定の人だけメニューを開けない」ヘッダーになる。 ============================================================ */ .tk-burger{display:none;appearance:none;-webkit-appearance:none;background:transparent;border:0;padding:0 4px; min-width:56px;min-height:48px;cursor:pointer;color:#8A4A17;flex-direction:column;align-items:center;justify-content:center;gap:5px;} .tk-burger-bars{display:block;width:26px;} .tk-burger-bars i{display:block;height:2px;background:currentColor;margin:5px 0;transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .28s;} .tk-burger-txt{font-size:9px;letter-spacing:.16em;font-weight:800;line-height:1;} .tk-burger:focus-visible{outline:3px solid #FEBD8C;outline-offset:2px;} /* ★移動量は「margin(4px)+棒の高さ(2px)」＝6px。7pxだと1pxずつ行き過ぎて 上下の線が2pxずれて交差し、×が歪む（実測 2026-09-03: 中心が28と26）。 */ .tk-hdr.is-open .tk-burger-bars i:nth-child(1){transform:translateY(6px) rotate(45deg);} .tk-hdr.is-open .tk-burger-bars i:nth-child(2){opacity:0;} .tk-hdr.is-open .tk-burger-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg);} @media (prefers-reduced-motion:reduce){.tk-burger-bars i{transition:none;}} @media (max-width:1079px){ html.has-js .tk-hdr>.tk-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0;} html.has-js .tk-burger{display:flex;} html.has-js .tk-brand{margin:0;} /* 閉じているあいだはナビと電話を出さない＝ヘッダーは1段 */ html.has-js .tk-nav,html.has-js .tk-hdr-tel{display:none;} html.has-js .tk-hdr.is-open .tk-nav,html.has-js .tk-hdr.is-open .tk-hdr-tel{display:block;flex:0 0 100%;} html.has-js .tk-hdr.is-open .tk-nav{margin-top:14px;border-top:1px solid #F0E4DB;padding-top:6px;} html.has-js .tk-hdr.is-open .tk-navlist{flex-direction:column;gap:0;} html.has-js .tk-hdr.is-open .tk-navlist>li{border-bottom:1px solid #FBF3EC;} html.has-js .tk-hdr.is-open .tk-navlist>li>a{display:block;padding:14px 2px;} html.has-js .tk-hdr.is-open .tk-hdr-tel{margin-top:14px;} } /* ============================================================ ★B-1. TOP「4つの事業」を2列のグリッドに 実測: 全幅1列×4連で、1カードあたり画面まるごと1枚ぶんの高さがあった（16:9写真が1040px幅で585px高）。 2列にすると写真は約508×286になり、参考①の事業案内と同じ密度になる。 ・カードの高さは行内で揃える（写真＋見出し＋1文の量が揃っているのでガタつかない） ・写真は上、テキストは下に固定して視線の段を作る ============================================================ */ .tk-grid2--biz{margin:0 0 8px;} .tk-grid2--biz .tk-card{display:flex;flex-direction:column;margin:0;} .tk-grid2--biz .tk-ph--card{margin:0 0 18px;} .tk-grid2--biz .tk-h3{margin:0 0 8px;} @media (min-width:768px){ .tk-grid2--biz .tk-card{padding:22px 22px 26px;} /* 動画枠と注記は版面の中央に置く（左寄せのまま右が空いて見えていた） */ .tk-video{margin-left:auto;margin-right:auto;} } /* ============================================================ ★B-2. CTA帯が左1/3に寄って右が空いていた 参考①のCTA帯は画面の中央に構える。本文は変えず、組みだけ中央に寄せて 「お問い合わせ」と電話を横並びにする（縦4段だと帯だけが間延びする）。 ★.tk-rule（見出し左の白い縦罫）は中央寄せだと意味が変わるので、中央組みでは出さない。 ============================================================ */ @media (min-width:768px){ .tk-sec--cta .tk-inner{text-align:center;max-width:760px;} .tk-sec--cta .tk-h2 .tk-rule{display:none;} .tk-sec--cta .tk-h2{font-size:34px;} /* ボタンと電話を1行に並べる（2つの ＜p＞ をインラインで隣り合わせる） */ .tk-sec--cta .tk-inner>p:nth-of-type(2), .tk-sec--cta .tk-inner>p:nth-of-type(3){display:inline-block;vertical-align:middle;margin:0 10px!important;} } @media (min-width:1080px){.tk-sec--cta .tk-inner{max-width:820px;}} /* ============================================================ ★B-5. ゴースト英字が見出しより目立っていた（主従の逆転） 参考①では巨大英字の隣に大きな数字や見出しが並ぶので釣り合っている。 東予は h2 が 32px しかなく、208px のゴーストに負けていた。 → ゴーストを一段淡くし、同時に**セクション見出しを大きくして釣り合わせる**。 （ゴーストを小さくするだけだと参考①の「巨大英字」という署名自体が薄まる） ============================================================ */ .tk-ghost{color:#FEF6EF;} .tk-sec--tint .tk-ghost{color:#FBEFE6;} .tk-sec--split .tk-ghost{color:#FEF6EF;} @media (min-width:1080px){ .tk-h2{font-size:36px;} .tk-eyebrow{font-size:12px;letter-spacing:.26em;} } /* ============================================================ ★C-2 / C-3 / C-4. モバイルのFV ------------------------------------------------------------ C-4 モバイルだけキャッチが写真の**下**の紺地に落ちて、PCの「写真に重ねる」設計と別物になっていた。 参考①はモバイルでも重なる。全幅で重ねる形に統一し、スクリムも全幅で効かせる。 C-2 「電柱を立て、ケー／ブルをつなぐ。」と語中で割れていた（390px幅で 15字×22px＋余白が入らない）。 字数は原稿なので変えられない＝**文字サイズを幅に追従させる**（clamp・下限17pxは本文16pxより上）。 C-3 追従バナーがFVの英字ラベルに重なっていた。FVコピーの下に居場所を空ける。 ============================================================ */ /* ★C-2 の適用範囲はモバイルだけ。メディアクエリを付けずに書いたら、後勝ちで @media(min-width:1080px) の 54px まで潰してしまい、PCのFV見出しが 22px（jump 1.38）に落ちていた。 */ @media (max-width:767px){.tk-fv h1{font-size:clamp(17px,4.6vw,22px);}} @media (max-width:767px){ .tk-fv-photo{min-height:540px;} .tk-fv-wave{height:100%;} /* 追従バナーはモバイルでは一回り小さく */ .tk-float a.tk-float-btn{min-width:0;padding:11px 12px 12px;} .tk-float .tk-float-ja{font-size:13px;padding:0;margin-top:5px;} } /* ★モバイルのFVは横方向に強くトリミングされる（1.5:1 の写真を 0.7:1 の枠に入れる）ため、 既定の中央だと作業員が枠の外へ出てしまう。人物側へ寄せる。 */ @media (max-width:767px){.tk-fv-photo.has-img img{object-position:36% 50%;}} /* ★モバイルFVのコントラスト（AA割れ 375px リード文 3.91:1 / 559px 英字 4.45:1） スクリムの立ち上がりが遅く、テキストの上端が明るい空に載っていた。 立ち上がりを早め、下端をより濃くする。英字ラベルは元々小さく薄いので一段明るくする。 */ /* ============================================================ ★D-2. 未支給スロットの見え方（TOPに4枚・サイト全体で14枚） ------------------------------------------------------------ 実写真が31枚入ったことで、残りのプレースホルダだけが「作りかけ」に見えるようになった。 ★埋めない。撮影待ちであることが分かる形に整える（代用素材を入れないのは 契約.md 論点 unsupplied-assets の回答）。 ・面をハッチではなく静かな面にし、カメラのアイコン（装飾・DOMテキストではない）を置く ・スロット名の文字は小さく静かに。alt の記述は撮影指示として残す ============================================================ */ .tk-ph:not(.has-img),.tk-video:not(.has-img){ background-image:none;background-color:#FCF4EE;border:1px dashed #EDDBC9;color:#8A4A17;} .tk-ph:not(.has-img){flex-direction:column;gap:12px;color:#8A4A17;} .tk-ph:not(.has-img)::before,.tk-video:not(.has-img)::before{ content:"";flex:0 0 auto;width:38px;height:32px;opacity:.5; background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 32' fill='none' stroke='%235C79A4' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M2 9h8l3-5h12l3 5h8v20H2z'/%3E%3Ccircle cx='19' cy='18' r='6.5'/%3E%3C/svg%3E") no-repeat center/contain;} .tk-video:not(.has-img){flex-direction:column;gap:12px;background-color:#FEBD8C;color:#5C3216;border-color:#FDD2B0;} .tk-video:not(.has-img)::before{ background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 32' fill='none' stroke='%23CBDCF5' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='24' height='22' rx='2'/%3E%3Cpath d='M26 13l10-6v18l-10-6z'/%3E%3C/svg%3E") no-repeat center/contain;} .tk-ph:not(.has-img)>span,.tk-video:not(.has-img)>span{font-size:11px;line-height:1.7;max-width:30em;} /* ============================================================ ★D-1 / D-3. 動的パーツ置き場（施工実績一覧・ブログ一覧）の「枠」を整える ------------------------------------------------------------ ★中身は CueZilla が描く（施工実績 parts228 / ブログ parts222）。 R-29・design-buildout の規定どおり**パーツ自体は作らない**。ダミー行の文言も構造も変えていない。 ここで整えるのは行の組み・当たり・余韻だけで、これは skin / override.css がそのまま引き継げる層。 ============================================================ */ /* 施工実績: カードを「押せるもの」として見せる（左の青罫＋右の矢印＋当たり） */ .tk-worklist{display:grid;gap:12px;} .tk-worklist .tk-card{position:relative;margin:0;padding:18px 44px 18px 20px;border-left:3px solid #FEBD8C;} .tk-worklist .tk-card::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px; border-right:2px solid #FDD2B0;border-top:2px solid #FDD2B0;transform:translateY(-50%) rotate(45deg);} .tk-worklist .tk-card:hover{background:#F7FAFE;border-left-color:#FEBD8C;} .tk-sec--blog .tk-eyebrow{margin-bottom:14px;} /* ============================================================ ★ヘッダー改訂（2026-09-01・ディレクター指示） ------------------------------------------------------------ ① ロゴは「マーク上・文字下」の縦積み（旧: マーク左・文字右の横組み） ② 電話とナビのバランスが悪い → **右側を1行の塊にまとめる** 旧: 電話が白いチップで宙に浮き、その下にナビバーという2段構成で、 2つの独立した島に見えていた。 新: ロゴ｜ナビ｜電話 を1行に並べ、電話は縦罫で区切った2行ブロック （受話器アイコン＋番号を大きく＋受付時間を小さく）にして右端の錨にする。 ③ ヘッダーのナビから「プライバシーポリシー」を削除（フッターには残す） ============================================================ */ /* --- ① ロゴの縦積み --- */ .tk-brand{flex-direction:column;align-items:center;gap:7px;text-align:center;} .tk-brand .tk-hdr-en{margin:0 0 3px;} .tk-brand .tk-hdr-name{margin:0;letter-spacing:.02em;} @media (min-width:1080px){ .tk-brand-mark{width:58px;height:34px;} .tk-brand .tk-hdr-name{font-size:17px;} } /* --- ② 電話ブロック（受話器アイコン＋2行） --- */ .tk-hdr-tel{display:flex;flex-direction:column;line-height:1.35;} .tk-hdr-tel a{font-size:21px;letter-spacing:.02em;padding-left:24px; background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231546A0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h3l1.6 4-2.2 1.4a11 11 0 0 0 4.2 4.2L14 9.4 18 11v3a2 2 0 0 1-2 2C8.8 16 4 11.2 4 4a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") no-repeat left center/17px 17px;} .tk-hdr-tel span{font-size:11px;color:#8A4A17;padding-left:24px;} /* --- ヘッダー全体を1行に（1080px以上） --- */ @media (min-width:1080px){ .tk-hdr>.tk-wrap{display:flex!important;align-items:center;justify-content:flex-start;gap:0; grid-template-columns:none;grid-template-rows:none; padding-top:14px!important;padding-bottom:14px!important;} .tk-brand{flex:0 0 auto;} .tk-nav{flex:1 1 auto;display:flex;justify-content:flex-end;margin:0;} .tk-navlist{flex-wrap:nowrap;gap:0 18px;font-size:14px;white-space:nowrap;align-items:center;} .tk-hdr-tel{flex:0 0 auto;margin:0 0 0 22px;padding-left:22px;border-left:1px solid #F0E4DB;} } /* --- トップの重ねヘッダー: ナビと電話を「1本の白バー」にする --- 1行化した結果、ナビだけが白バーで電話が写真の上に浮いて見えた（＝また2つの島）。 隣り合う2要素に同じ白地を敷き、間の余白を0にして1本に見せる。区切りは縦罫だけ。 バーは画面の右端まで届かせる（参考①と同じ）。 */ @media (min-width:1080px){ .tk-top .tk-nav{background:#FFFFFF;padding:12px 22px;box-shadow:0 8px 28px rgba(254, 189, 140, .12);} .tk-top .tk-hdr-tel{background:#FFFFFF;margin-left:0;padding:10px 40px 10px 22px; border-left:1px solid #F0E4DB;box-shadow:0 8px 28px rgba(254, 189, 140, .12);} .tk-top .tk-brand{align-self:flex-start;} } /* --- 電話ブロックの受話器アイコンを「文字と同じ要素の背景」から外す --- 実測（1080/1280/1920px）: `a「0897-45-2471」1:1（文字色 #BE732D／地色 #BE732D）` でAA割れ。 アイコンSVGの線色が文字色と同じ #BE732D で、**リンク自身の background-image に置いていた**ため、 実描画コントラストの計測がアイコンの画素を「地色」として拾っていた。 → アイコンを別のセル（::before）へ出し、文字要素は白地の上に素で置く。 見た目は変わらないが、計測も人の目も「文字の下は白」で一致する。 */ .tk-hdr-tel{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;} .tk-hdr-tel::before{content:"";grid-column:1;grid-row:1 / span 2;width:18px;height:18px;align-self:center; background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231546A0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h3l1.6 4-2.2 1.4a11 11 0 0 0 4.2 4.2L14 9.4 18 11v3a2 2 0 0 1-2 2C8.8 16 4 11.2 4 4a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") no-repeat center/contain;} .tk-hdr-tel a{grid-column:2;background:none;padding-left:0;} .tk-hdr-tel span{grid-column:2;padding-left:0;} /* ============================================================ ★ヘッダー改訂 第2版（2026-09-01・ディレクター指示） ------------------------------------------------------------ 指示: 左上端にロゴの塊／右上端にナビの塊／電話はナビの下・帯なし／ナビは等間隔でスタイリッシュに ・白い箱・白いバーを全部やめる（前版の「白チップ＋白バー」がダサさの実体） ・版面(1080)ではなく**画面の端**に寄せる＝左右32pxだけ空けて両端へ ・ナビの項目間隔が不揃いだったのは、ドロップダウンの ▾ ボタンが min-width:44px を 持っていて親項目だけ幅が増えていたため。PC幅ではボタンを出さず（hover/focus-within で開く）、 各項目に同じ左右パディングを与えて**完全な等間隔**にする。 ============================================================ */ @media (min-width:1080px){ /* 前版の白地・影・バーを解除 */ .tk-top .tk-brand,.tk-top .tk-nav,.tk-top .tk-hdr-tel{background:transparent;box-shadow:none;} .tk-top .tk-hdr-tel{border-left:0;} .tk-hdr>.tk-wrap{max-width:none!important;padding:0!important; display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:start;} .tk-brand{grid-column:1;grid-row:1 / span 2;align-self:center;padding:20px 0 20px 32px;} .tk-nav{grid-column:2;grid-row:1;justify-self:end;padding:22px 32px 0 0;} .tk-hdr-tel{grid-column:2;grid-row:2;justify-self:end;padding:8px 32px 18px 0;margin:0;border-left:0;} /* --- ナビ: 等間隔・細身・大文字トラッキング --- */ .tk-nav-toggle{display:none;} .tk-navlist{gap:0;font-size:14px;align-items:center;} .tk-navlist>li>a,.tk a.tk-nav-parent{padding:10px 18px!important;letter-spacing:.06em;font-weight:700;position:relative;} .tk-navlist>li{position:relative;} /* 現在地と hover は細い下線で示す（面で塗らない＝洗練側へ） */ .tk-navlist>li>a::after,.tk a.tk-nav-parent::after{content:"";position:absolute;left:18px;right:18px;bottom:2px; height:1px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.22,.61,.36,1);} .tk-navlist>li>a:hover::after,.tk a.tk-nav-parent:hover::after, .tk-navlist>li>a[aria-current="page"]::after{transform:scaleX(1);} /* 「お問い合わせ」だけは面で持つ（唯一のCTA） */ .tk-navlist>li>a[href="/form/inquiry"]{padding:11px 22px!important;margin-left:10px;letter-spacing:.08em;} .tk-navlist>li>a[href="/form/inquiry"]::after{display:none;} /* 電話は帯を持たず、右端で終わる2行 */ .tk-hdr-tel a{font-size:20px;} } @media (prefers-reduced-motion:reduce){ .tk-navlist>li>a::after,.tk a.tk-nav-parent::after{transition:none;} } /* --- トップ（重ねヘッダー）: 白地を持たないので、文字とマークを白へ反転させる --- 前版の「白い箱・白いバー」をやめた結果、紺の文字が写真の上に直接載って読めなくなった （実測: ナビの右側が電柱の金物に重なる）。帯は足さず、**写真の上端だけ薄く沈める**（グラデ）。 ・行の入れ替え: 前版の .tk-top 用ルール（電話=1行目）が残っていて、ナビと上下が逆になっていた。 */ @media (min-width:1080px){ .tk-top .tk-nav{grid-row:1;padding:22px 32px 0 0;} .tk-top .tk-hdr-tel{grid-row:2;padding:8px 32px 18px 0;justify-self:end;} .tk-top .tk-brand{padding:20px 0 20px 32px;} .tk-top .tk-hdr{color:#FFFFFF;} .tk-top .tk-hdr-en{color:#5C3216;} .tk-top .tk-hdr:not(.is-open) .tk-hdr-name{color:#FFFFFF;} .tk-top .tk-hdr-tel a{color:#FFFFFF;} .tk-top .tk-hdr-tel span{color:#5C3216;} .tk-top .tk-hdr-tel::before{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h3l1.6 4-2.2 1.4a11 11 0 0 0 4.2 4.2L14 9.4 18 11v3a2 2 0 0 1-2 2C8.8 16 4 11.2 4 4a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");} /* ドロップダウンの中身は白面のままなので文字色を戻す */ .tk-top .tk-sub a.tk-sub-link{color:#1A1A1A;} /* 上端のスクリム（帯ではなく、写真そのものを上だけ沈める） */ } /* ★トップの重ねヘッダーで文字が白にならなかった原因: ナビの各 ＜a＞ は ③HTML版草案 由来の **インライン style で color:#1A1A1A を持っている**（インラインはセレクタに勝つ）。 実測: 「会社概要」1.83:1 など。色の指定だけ !important で上書きする（本文・構造は触らない）。 あわせて上端スクリムを電話の行まで届かせ、受付時間も白にする。 */ @media (min-width:1080px){ .tk-top .tk-sub a.tk-sub-link{color:#1A1A1A!important;} .tk-top .tk-hdr-tel span{color:#FFFFFF;} } /* ============================================================ ★ヘッダー改訂 第3版（2026-09-01・ディレクター指示） ------------------------------------------------------------ ① ヘッダーを追従させる ② 追従して動き出したら「帯あり」（白地＋影）に切り替える ③ 電話番号を「お問い合わせ」の左に置く（ナビの最後から2番目の項目へ移動） ・下層は position:sticky（素直に効く）。トップは写真に重ねるので position:fixed。 ・切り替えは site.js が .tk-hdr へ付ける .is-stuck。JSが無くても 「トップ＝重ね／下層＝白帯」で成立する（追従の帯が出ないだけ）。 ============================================================ */ .tk-hdr{position:sticky;top:0;z-index:70;transition:background-color .3s ease,box-shadow .3s ease,padding .3s ease;} .tk-top .tk-hdr{position:fixed;left:0;right:0;top:0;} .tk-hdr.is-stuck{background:#FFFFFF;box-shadow:0 6px 22px rgba(254, 189, 140, .12);border-bottom:0;} @media (prefers-reduced-motion:reduce){.tk-hdr{transition:none;}} /* --- ③ ナビの中に入った電話番号（CTAの左） --- */ @media (min-width:1080px){ .tk-nav-tel{display:grid!important;grid-template-columns:auto 1fr;column-gap:8px;align-items:center; margin:0 6px 0 14px;padding:0 0 0 14px;border-left:1px solid rgba(255,255,255,.35);} .tk-nav-tel a{grid-column:2;font-size:19px;line-height:1.2;padding:0!important;letter-spacing:.02em;} .tk-nav-tel span{grid-column:2;font-size:10px;line-height:1.4;padding:0;} .tk-nav-tel a::after{display:none!important;} .tk-hdr.is-stuck .tk-nav-tel{border-left-color:#F0E4DB;} } /* --- ①② 追従して帯が出た状態: 文字は紺へ戻し、上下を詰める --- */ @media (min-width:1080px){ .tk-hdr.is-stuck>.tk-wrap{padding-top:0!important;padding-bottom:0!important;} .tk-hdr.is-stuck .tk-brand{padding:10px 0 10px 32px;} .tk-hdr.is-stuck .tk-nav{padding:0 32px 0 0;align-items:center;} .tk-hdr.is-stuck .tk-brand-mark{width:44px;height:26px;} .tk-hdr.is-stuck .tk-hdr-name{font-size:15px;} .tk-hdr.is-stuck .tk-hdr-en{font-size:9px;} /* トップは重ねのとき白文字。帯が出たら紺へ戻す */ .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-brand-mark{filter:brightness(0) invert(1);} .tk-top .tk-hdr.is-stuck .tk-navlist>li>a{color:#1A1A1A!important;} .tk-top .tk-hdr.is-stuck .tk-hdr-en{color:#8A4A17;} .tk-top .tk-hdr.is-stuck .tk-hdr-name{color:#1A1A1A;} .tk-top .tk-hdr.is-stuck .tk-nav-tel a{color:#8A4A17;} .tk-top .tk-hdr.is-stuck .tk-nav-tel span{color:#8A4A17;} .tk-top .tk-hdr.is-stuck .tk-nav-tel::before{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231546A0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h3l1.6 4-2.2 1.4a11 11 0 0 0 4.2 4.2L14 9.4 18 11v3a2 2 0 0 1-2 2C8.8 16 4 11.2 4 4a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");} } /* モバイルも追従。閉じているときは1段なので帯だけ足す */ @media (max-width:1079px){ .tk-hdr.is-stuck{background:#FFFFFF;} .tk-top .tk-hdr{background:rgba(255,255,255,.0);} .tk-top .tk-hdr.is-stuck{background:#FFFFFF;} } /* ★.tk-top .tk-hdr-tel（前版のヘッダーグリッド用）の余白が、ナビ内へ移した電話にも当たって 右に32px空いてしまうので、詳細度を揃えて打ち消す。 */ @media (min-width:1080px){ .tk-top .tk-nav-tel{grid-column:auto;grid-row:auto;justify-self:auto; margin:0 6px 0 14px!important;padding:0 0 0 14px!important;} } /* ★追従ヘッダーの実装で出た2件（2026-09-01 実測） ① 電話が「お問い合わせ」の**右**に回っていた。 DOM順は 電話→CTA で正しいのに、前版のヘッダー用ルール `.tk-top .tk-hdr-tel{order:3}` が クラス名経由でナビ内の電話にも当たり、flex の order で最後尾へ送られていた。 ② 帯が出た状態で「業務案内」「採用情報」が消えた。 この2つだけ `li ＞ span.tk-nav-row ＞ a.tk-nav-parent` という構造で、 `.tk-navlist＞li＞a` の紺への戻し指定に**当たらず白のまま**＝白帯に白文字。 → 白文字は「重ねている時だけ」に限定し、帯が出たら全部を既定の色へ戻す。 */ @media (min-width:1080px){ .tk-nav-tel{order:0!important;} .tk-top .tk-hdr.is-stuck .tk-nav a, .tk-top .tk-hdr.is-stuck .tk a.tk-nav-parent{color:#1A1A1A!important;} .tk-top .tk-hdr.is-stuck .tk-nav-tel a{color:#8A4A17!important;} .tk-top .tk-hdr.is-stuck .tk-nav-tel span{color:#8A4A17!important;} .tk-top .tk-hdr.is-stuck .tk-nav-toggle{color:#8A4A17;} } /* ============================================================ ★追従時の囲みを「ロゴ」と「それ以外」の2つに分ける（2026-09-01・ディレクター指示） ------------------------------------------------------------ 旧: 追従すると画面幅いっぱいの白帯が1本出る 新: 左上端に**ロゴの囲み**、右上端に**それ以外（ナビ＋電話＋CTA）の囲み**の2ブロック。 あいだは背景が透けるので、帯1本より軽く見える。 ★電話とCTAはナビの ＜ul＞ の中にあるので、「それ以外」＝ .tk-nav ひとつで囲める。 ============================================================ */ @media (min-width:1080px){ .tk-hdr.is-stuck{background:transparent;box-shadow:none;} .tk-hdr.is-stuck>.tk-wrap{padding:0!important;} .tk-hdr.is-stuck .tk-brand{background:#FFFFFF;box-shadow:0 6px 22px rgba(254, 189, 140, .14); padding:12px 26px 14px 26px;margin:0;} .tk-hdr.is-stuck .tk-nav{background:#FFFFFF;box-shadow:0 6px 22px rgba(254, 189, 140, .14); padding:8px 24px;margin:0;align-items:center;} /* 2つの囲みは画面の左端・右端に付ける（あいだは透ける） */ .tk-hdr.is-stuck>.tk-wrap{justify-content:space-between;} .tk-hdr.is-stuck .tk-navlist>li>a{padding-top:8px!important;padding-bottom:8px!important;} .tk-hdr.is-stuck .tk-navlist>li>a[href="/form/inquiry"]{padding-top:11px!important;padding-bottom:11px!important;} /* 重ねヘッダー（トップ）で囲みが出たら、その中の文字は紺へ戻す（白背景なので） */ .tk-top .tk-hdr.is-stuck .tk-hdr-en{color:#8A4A17;} .tk-top .tk-hdr.is-stuck .tk-hdr-name{color:#1A1A1A;} } /* ============================================================ ★NEWS = CueZilla design-parts-52（スリムNEWSバー・1件） 実パーツの構造・寸法は 前例 O00063 の実DOMに合わせる（PC 60px / タブ 85px / 520px以下は縦積み）。 配色だけ本案件のパレットへ（前例は黄バッジ #FFCC44 だった）。 ★中身は CueZilla が描く＝ここは置き場。skin / override.css が引き継げる層だけを整える。 ============================================================ */ .tk-news52{width:100%;background:#FDF5EF;border-bottom:1px solid #F0E4DB;} .tk-news52 .container{max-width:1080px;margin:0 auto;padding:0 20px;height:100%;} .tk-news52 .content{height:100%;display:flex;align-items:center;} .tk-news52 .banner-area{display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0; background:#FEBD8C;color:#4A2A12;font-size:12px;font-weight:800;letter-spacing:.22em;padding:0 20px;height:100%;} .tk-news52 ul{list-style:none;margin:0;padding:0;min-width:0;} .tk-news52 li{padding:0 18px;list-style:none;} .tk-news52 li a{color:#1A1A1A;text-decoration:none;display:block;} .tk-news52 li a:hover .d-inline-block{color:#8A4A17;} /* → 30_override.css へ移動（skin の !important に負けて効かないため）: NEWSバーの1行組み（style.css:1163） */ .tk-news52 .date{color:#8A4A17;font-size:13px;font-weight:700;flex:0 0 auto;} .tk-news52 .d-inline-block{font-size:15px;} @media (max-width:520px){ .tk-news52 .content{flex-direction:column;align-items:stretch;} .tk-news52 .banner-area{width:100%;height:34px;font-size:11px;} .tk-news52 .container{padding:0;} .tk-news52 li{padding:12px 20px;} /* → 30_override.css へ移動（skin の !important に負けて効かないため）: NEWSバーの狭幅時（style.css:1171） */ } @media (min-width:521px) and (max-width:991px){.tk-news52{height:85px;}} @media (min-width:992px){.tk-news52{height:60px;}} /* ============================================================ ★ヘッダー改訂 第4版（2026-09-01・ディレクター指示 ＋ ゲート差し戻しの修正） ------------------------------------------------------------ 指示: ①帯あり⇔なしを緩やかに ②右側をコンパクトに ③電話は「アイコン」でなく文字で ④受付時間の上を詰めてまとまりを出す 差し戻し: ヘッダーを position:fixed にしたことで連鎖して出たもの ・ナビが 1199〜1280px で入り切らず各項目が2行に折れていた（responsive/measure の行末孤立） ・1080px未満のトップは白文字の指定が無く、紺の文字が写真の上に載っていた（contrast） ・#main のアンカー着地が固定ヘッダーの裏に潜っていた（a11y・WCAG 2.4.11） ============================================================ */ /* --- ① 緩やかな切り替え（帯・囲み・寸法すべて） --- */ /* ★background-color / color / filter は基底の transition から外す（2026-09-16）。 時計が進まない環境では running な CSSTransition が開始値に固定され、 .is-open の !important な白面や紺のロゴ色より優先されて面・文字が消える。 クロスフェードは html.motion-ok（時計の進行を確認済み）側で復活させる。 */ .tk-hdr,.tk-hdr .tk-brand,.tk-hdr .tk-nav,.tk-brand-mark,.tk-hdr-en,.tk-hdr-name{ transition:box-shadow .45s cubic-bezier(.22,.61,.36,1), padding .45s cubic-bezier(.22,.61,.36,1), width .45s cubic-bezier(.22,.61,.36,1), height .45s cubic-bezier(.22,.61,.36,1), font-size .45s cubic-bezier(.22,.61,.36,1);} @media (prefers-reduced-motion:reduce){ .tk-hdr,.tk-hdr .tk-brand,.tk-hdr .tk-nav,.tk-brand-mark,.tk-hdr-en,.tk-hdr-name{transition:none;} } /* --- ②③④ 右側をコンパクトに／電話は文字ラベル／2行を近づける --- */ @media (min-width:1080px){ .tk-navlist{gap:0;font-size:13.5px;} .tk-navlist>li{flex:0 0 auto;} .tk-navlist>li>a,.tk a.tk-nav-parent{padding:10px 13px!important;white-space:nowrap;} .tk-navlist>li>a::after,.tk a.tk-nav-parent::after{left:13px;right:13px;} .tk-navlist>li>a[href="/form/inquiry"]{padding:10px 18px!important;margin-left:8px;} /* 電話: アイコンをやめて「TEL」の文字に。2行を詰めて1つの塊に見せる */ .tk-nav-tel{grid-template-columns:auto auto!important;column-gap:7px!important;row-gap:0!important; margin:0 0 0 10px!important;padding:0 0 0 12px!important;align-items:baseline!important;} .tk-nav-tel::before{content:"TEL";width:auto;height:auto;background:none;grid-row:1; font-size:10px;font-weight:800;letter-spacing:.16em;line-height:1;align-self:baseline;color:inherit;opacity:.85;} .tk-nav-tel a{grid-column:2;grid-row:1;font-size:18px;line-height:1.05;} .tk-nav-tel span{grid-column:2;grid-row:2;font-size:10px;line-height:1.2;margin-top:1px;} } /* --- 差し戻し① ナビが折れないように（幅が足りない帯域は字送りを詰める） --- */ @media (min-width:1080px) and (max-width:1319px){ .tk-navlist{font-size:13px;} .tk-navlist>li>a,.tk a.tk-nav-parent{padding:10px 10px!important;letter-spacing:.02em;} .tk-navlist>li>a::after,.tk a.tk-nav-parent::after{left:10px;right:10px;} .tk-nav-tel a{font-size:16px;} } /* --- 差し戻し② 1080px未満のトップも、重ねている間は白文字＋上端スクリム --- */ @media (max-width:1079px){ .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-en{color:#FFFFFF;} .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-name{color:#FFFFFF;} .tk-top .tk-hdr:not(.is-stuck) .tk-burger{color:#FFFFFF;} .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-brand-mark{filter:brightness(0) invert(1);} /* メニューを開いたら白面になるので文字は既定色へ戻す */ .tk-top .tk-hdr.is-open{background:#FFFFFF;} .tk-top .tk-hdr.is-open .tk-hdr-name{color:#1A1A1A;} .tk-top .tk-hdr.is-open .tk-hdr-en{color:#8A4A17;} .tk-top .tk-hdr.is-open .tk-burger{color:#8A4A17;} .tk-top .tk-hdr.is-open .tk-brand-mark{filter:none;} } /* --- 差し戻し③ 固定ヘッダーの裏にアンカー着地が潜らないように --- */ #main,[id]{scroll-margin-top:150px;} /* --- 差し戻し⑤ NEWSバーの hover に共通トランジションが無かった（L008） --- */ .tk-news52 li a,.tk-news52 .d-inline-block{transition:color .45s cubic-bezier(.22,.61,.36,1);} @media (prefers-reduced-motion:reduce){.tk-news52 li a,.tk-news52 .d-inline-block{transition:none;}} /* ★「TEL」が 10px＋広い字送りで潰れて読めなかったので、読める大きさ・字送りに直す。 数字とベースラインを揃え、電話ブロック全体で1つの塊に見せる。 */ @media (min-width:1080px){ .tk-nav-tel::before{font-size:12px;letter-spacing:.08em;opacity:1;font-weight:800; color:#8A4A17;align-self:baseline;} .tk-top .tk-hdr:not(.is-stuck) .tk-nav-tel::before{color:#FFFFFF;} .tk-nav-tel{column-gap:8px!important;} } /* ★TELラベルを実体の ＜span class="tk-tel-lb"＞ にした（擬似要素は前版のアイコン用ボックス指定が 残って文字が重なった）。擬似要素側は完全に止める。 */ .tk-nav-tel::before,.tk-hdr-tel::before{content:none!important;display:none!important;} .tk-tel-lb{font-size:12px;font-weight:800;letter-spacing:.08em;line-height:1;color:#8A4A17;} @media (min-width:1080px){ .tk-nav-tel{grid-template-columns:auto auto!important;} .tk-tel-lb{grid-column:1;grid-row:1;align-self:baseline;} .tk-nav-tel a{grid-column:2;grid-row:1;} .tk-nav-tel span:not(.tk-tel-lb){grid-column:2;grid-row:2;} .tk-top .tk-hdr.is-stuck .tk-tel-lb{color:#8A4A17;} } /* ★TELラベルが受付時間の行に重なっていた。先に書いた `.tk-nav-tel span`（0,1,1）が `.tk-tel-lb`（0,1,0）に勝って grid-row:2 へ落とされていたため、詳細度を揃えて置き直す。 */ @media (min-width:1080px){ .tk-nav-tel .tk-tel-lb{grid-column:1!important;grid-row:1!important;align-self:baseline;} } /* ============================================================ ★参考① 株式会社ブライトのコードを引用してTOP本文を寄せる（2026-09-01） 引用元: 0_受領素材/株式会社ブライト様_リプレイス.zip → 成果物/bright_cms/css/style.css 引用したのは **構造と機構（DNA）だけ**。配色・書体・写真・本文は東予のまま （MISSION/imports/reference-sites/台帳.md「コードコピー禁止・配色/書体/写真は持ち込まない」）。 ディレクター指示（六角ベン図・NEWS=52パーツ1件・ヘッダー仕様・サブ色 #A36326・演出停止）は維持。 ============================================================ */ /* --- [引用 .intro-grid / .intro-collage / .intro-catch] TOPセクション1 代表メッセージ --- ブライトの機構: 写真2枚を「大＝左寄せ・縦長／小＝右下に重ねて影」でコラージュし、 PC幅では写真列を版面の外（画面左端）まで引き伸ばす。白札のキャッチはコラージュの右上へ逃がして、 写真の角に半分かかった状態で置く（＝札が写真の上に乗る＝重なりが生まれる）。 */ .tk-sec--intro{padding-left:0;padding-right:0;} .tk-sec--intro>.tk-intro-media,.tk-sec--intro>.tk-intro-body{position:relative;z-index:1;} .tk-intro-media{margin:0 0 clamp(28px,6vw,44px);} .tk-intro-body{padding:0 20px;} .tk-intro-collage{position:relative;padding-bottom:clamp(48px,9vw,84px);} .tk-intro-collage .tk-ph{margin:0;} .tk-intro-collage .tk-ph--a{width:88%;aspect-ratio:7/8;margin-left:auto;} /* ★小さい方は画面の端に接するところまで寄せる（機構 photo-duo の要件）。 面積比も 0.3〜0.8 に入る大きさ（62%）にする。46% だと 0.18 で機構として数えられない。 */ .tk-intro-collage .tk-ph--b{position:absolute;left:0;bottom:0;width:62%;aspect-ratio:4/3;box-shadow:0 22px 52px rgba(254, 189, 140, .18);} .tk-intro-catch{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start; gap:clamp(8px,1.4vw,14px);margin:0 0 calc(clamp(18px,3.5vw,36px) * -1);} /* ★「×」を語と同じ背丈まで大きくしたので、揃えは baseline ではなく center にする。 × の字面は自分のem箱のほぼ中央、漢字も line-height 1.25 の行箱のほぼ中央にあるため、 箱の中央どうしを合わせると字面の中央も揃う（実測 2026-09-01: ずれ 0.3px）。 baseline のままだと、文字サイズ差ぶん × だけが 14px 高く浮く。 */ .tk-intro-catch .w{display:inline-flex;align-items:center;gap:.3em;background:#FFFFFF; box-shadow:0 10px 30px rgba(254, 189, 140, .14);padding:.2em .55em .17em .45em; font-weight:800;font-size:clamp(26px,5.4vw,44px);line-height:1.25;letter-spacing:.06em;color:#1A1A1A;} /* ★「×」は語と同じくらいの背丈まで大きくするが、書体は細くして語より目立たせない （ディレクター指示 2026-09-01）。× の字面は約0.5emしかないので、漢字（約0.88em）に 見た目を揃えるには font-size 側を 1.4倍以上に取る必要がある。 line-height を詰めて、白札そのものの高さは変えない。 */ .tk-intro-catch .w .x{color:#8A4A17;font-size:1.83em;font-weight:200;line-height:.62;} .tk-intro-catch .w .hl{color:#8A4A17;} .tk-intro-catch .w:nth-of-type(2){margin-left:clamp(22px,5vw,64px);} .tk-intro-catch .w:nth-of-type(3){margin-left:clamp(44px,10vw,128px);} .tk-intro-copy{position:relative;} .tk-intro-copy .tk-h2{margin:0 0 clamp(20px,3vw,28px);} .tk-intro-lead{margin:0 0 1.2em;} .tk-btnrow{margin:28px 0 0;} @media (max-width:767px){ /* ★狭幅では写真列がそのまま画面幅なので、負のマージンでのブリードは要らない （calc(50% - 50vw) はグリッドの子の中では壊れる＝教訓 fullbleed-50vw-formula-breaks-inside-grid-item.md）。 */ .tk-intro-collage .tk-ph--a{width:92%;aspect-ratio:4/3;} .tk-intro-collage .tk-ph--b{width:58%;} .tk-intro-catch{flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:clamp(5px,1.4vw,10px);padding:0 20px;} .tk-intro-catch .w{font-size:clamp(18px,4.9vw,32px);padding:.12em .36em .18em .32em;letter-spacing:.04em;white-space:nowrap;} .tk-intro-catch .w:nth-of-type(2),.tk-intro-catch .w:nth-of-type(3){margin-left:0;} } @media (min-width:768px){ .tk-sec--intro{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;} .tk-sec--intro>.tk-intro-media{order:1;margin:0;} /* ★ゴーストは白面の上でだけ効かせる。はみ出させたままだと 208px の文字が写真列の上に乗り、 写真が汚れて見える（実測 2026-09-01）。器の側で切る。 */ .tk-sec--intro>.tk-intro-body{order:2;padding:0;overflow:hidden;} /* ★上限を戻す理由は上と同じ（画面端からの空きを版面と揃えるため） */ .tk-intro-copy{max-width:560px;padding:0 44px 0 56px;} .tk-intro-catch{position:absolute;top:calc(clamp(20px,2.5vw,36px) * -1);right:calc(clamp(20px,3vw,44px) * -1);margin-bottom:0;z-index:4;} } /* [引用 .ghost--tr] ゴーストの定位置を右上に固定する */ .tk-ghost--tr{top:clamp(24px,4vw,56px);right:-.05em;} /* ★セクション1のゴーストは「白面の列（画面の半分）」に収まる大きさにする。 既定の 208px のままだと語の左半分が器で切られて "SSAGE" と読めてしまう（実測 2026-09-01）。 */ .tk-sec--intro .tk-ghost{font-size:clamp(44px,9vw,130px);} /* --- [引用 .pillars / .pillars-ghost / .pillars-head] TOPセクション2 の見出し部 --- ブライトの機構: 巨大なゴースト文字を背にして「図」と「見出し」を横並びに組む。 ★図はブライトの円3つではなく、ディレクター指定の六角ベン図をそのまま入れている。 ★見出しはブライトでは縦組み（writing-mode）だが、東予は「見出しが斜め（階段状）」が ディレクター指定なので横組みのまま左列に置く＝指示が引用に優先する。 */ .tk-pillars{position:relative;display:flex;flex-direction:column;align-items:center; max-width:880px;margin:0 auto clamp(40px,7vw,64px);} .tk-pillars-ghost{position:absolute;z-index:0;top:-.15em;right:-.05em;margin:0; font-weight:800;font-size:clamp(40px,8.4vw,92px);letter-spacing:.04em;line-height:1.05; color:#FCEDE1;text-align:right;pointer-events:none;user-select:none;} /* ★ベン図の中身は全て position:absolute なので、幅を明示しないと grid の auto 列が0に潰れ、 六角形が版面の外へはみ出して見出しと重なる（実測 2026-09-01）。 */ /* ★正六角形にする。左右に頂点がある六角形は 高さ = 幅 × √3/2（0.866）のときだけ正六角形。 幅=高さ（正方形）に切り抜くと縦に伸びて「横幅が狭い」六角形になる（ディレクター指摘 2026-09-01）。 */ .tk-pillars .tk-venn{position:relative;z-index:1;width:100%;max-width:360px;height:272px;margin:0 auto;} .tk-pillars .tk-venn span{width:186px;height:161px;font-size:12px;line-height:1.55;padding:14px 24px;} /* ★文字は六角形の中心（ディレクター指示 2026-09-01）。 マークを外して縦の背が空いたので、中心に置いても重なりの帯に文字が入らない （実測: v1 の文字は下端から 61px 上、v2/v3 の文字は上端から 48px 下 ＝ 帯にかからない）。 下2枚の横の重なりは 12px に留めてあり、文字どうしも乗らない。 */ .tk-pillars .tk-venn span{justify-content:center;} .tk-pillars-head{position:relative;z-index:1;order:-1;display:flex;flex-direction:column;align-items:center; gap:14px;margin:0 0 clamp(32px,7vw,48px);} .tk-pillars-head .en{font-weight:800;font-size:11px;letter-spacing:.42em;text-indent:.42em;color:#8A4A17;} @media (min-width:768px){ .tk-pillars{display:grid;grid-template-columns:400px minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,64px);} .tk-pillars-head{order:2;align-items:flex-start;margin:0;} /* ★列を 400px にして六角形（212px×2）の重なりを 24px に抑える。340px のままだと重なりが 84px になり、 v2 と v3 の文字が互いの上に乗って読めなくなる（実測 2026-09-01）。 */ .tk-pillars .tk-venn{order:1;width:400px;max-width:none;height:300px;margin:0;} .tk-pillars .tk-venn span{width:204px;height:177px;font-size:12.5px;padding:16px 26px;} } /* --- [引用 .reason / .reason-num / .reason-visual] TOPセクション2 の POINT 1-3 --- ブライトの機構: 本文列と写真列を 1 : 1.05 で組み、奇数偶数で左右を入れ替える。 写真は「大＝内側から外側へ／小＝画面端に接して重なる」。番号は数字の背後に波を描き込む。 */ @media (min-width:768px){ .tk-pt{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,56px);align-items:center;} .tk-pt--rev .tk-pt-text{order:2;} .tk-pt--rev .tk-pt-media{order:1;} .tk-pt{margin:0 0 clamp(72px,11vw,120px);} .tk-pt:last-of-type{margin-bottom:0;} } /* ★サブ写真は前版の約半分（ディレクター指示 2026-09-02・2回目＝確定）。 ・メイン 64%・サブ 48%（メインを8割に落とし、そのぶんサブを大きく・2026-09-02 追加指示） ・器の下余白を厚くしてサブを下へ落とし、重なりをメインの外側の下隅に留める ★この比率だと面積比 0.56 で、機構契約 photo-duo（0.3〜0.8）は**成立する** ・サブは画面の端に接したまま（写真列を画面外へ伸ばしている意味を残す） ★この比率では機構契約 photo-duo（大小2枚の面積比 0.3〜0.8）は成立しない（実測 0.08）。 1回目の指示のときに「0.3 を切ると契約から外れる」と伝えたうえで同じ指示が出ているため、 指示を優先し、契約側のズレとして報告している。契約を再採寸するかは判断待ち。 */ .tk-pt-media .tk-photos{position:relative;margin:0;padding-bottom:clamp(40px,10.5vw,150px);} .tk-pt-media .tk-photos .tk-ph:not(.tk-ph--over){width:64%;aspect-ratio:4/3;margin:0;} .tk-pt--rev .tk-pt-media .tk-photos .tk-ph:not(.tk-ph--over){margin-left:auto;} .tk-pt-media .tk-photos .tk-ph--over{position:absolute;bottom:0;width:48%;aspect-ratio:4/3;margin:0; box-shadow:0 18px 40px rgba(254, 189, 140, .20);} /* ★メインは人物が上寄りに写っているカットが多いので、下辺を切って上を残す （重なるのは下隅なので、人物が下隅に来なければ隠れない）。 */ .tk-pt-media .tk-photos .tk-ph:not(.tk-ph--over) img{object-position:50% 38%;} .tk-pt:not(.tk-pt--rev) .tk-pt-media .tk-photos .tk-ph--over{right:0;left:auto;} .tk-pt--rev .tk-pt-media .tk-photos .tk-ph--over{left:0;right:auto;} /* 数字の背後の線束（ブライトの .rnum-wave の位置づけを引き継ぎ、形だけ直線に置き換えたもの）。 ★既定は「描き終わった状態」にしてある。ブライトは stroke-dashoffset:100（＝非表示）を 既定にしているが、それだと .is-in が付かない経路（アニメーション無効化・撮影）で消える ＝教訓 css-animation-hidden-base-state-blanks-under-motion-kill.md の型そのもの。 .tk-reveal 自体が出現するまで見えないので、既定を可視にしても演出は損なわれない。 */ /* ★1本・細く・薄く（2026-09-01 ディレクター指示）。 束にすると「うねうねの置き換え」にしかならず、線の上に来る数字と見出しの視認性も落ちる。 ソリッドな一本にして、濃度は最大でも 0.30（本文の上に来ても読みを邪魔しない）。 */ .tk-rnum-line{position:absolute;z-index:0;width:5.2em;height:auto;left:-1.5em;top:50%; transform:translateY(-50%);overflow:visible;pointer-events:none;} .tk-rnum-line path{stroke-dasharray:100;} .tk-rnum-digit{position:relative;z-index:1;} html.js .tk-reveal.is-in .tk-rnum-line path{animation:tkRnumDraw 1.1s cubic-bezier(.4,0,.15,1) .05s backwards;} @keyframes tkRnumDraw{from{stroke-dashoffset:100;}} @media (prefers-reduced-motion:reduce){html.js .tk-reveal.is-in .tk-rnum-line path{animation:none;}} /* [引用 .checks] CHECK 行の罫線。東予の .tk-check は既に同型なので字送りだけ合わせる */ .tk-check li{letter-spacing:.06em;} /* --- [引用 .num-grid / .num-cell] 数字バンド --- ブライトの機構: 値を極端に大きく（他の見出しより大きい）、補足を小さく下に敷く。 */ .tk-nums--row div{padding:clamp(4px,1vw,12px) clamp(12px,2vw,24px);} .tk-nums--row .n{font-size:clamp(22px,4.2vw,38px);line-height:1.1;letter-spacing:.02em;font-variant-numeric:tabular-nums;} .tk-nums--row .l{font-size:12px;line-height:1.7;margin-top:12px;letter-spacing:.08em;} /* --- [引用 .textlink] 矢印リンク（線の軸＋斜めの穂先。hoverで軸が伸び穂先が滑る） --- */ .tk a.tk-arrow{position:relative;display:inline-flex;align-items:center;min-height:44px; padding:12px 52px 12px 0;letter-spacing:.1em;} .tk a.tk-arrow::before,.tk a.tk-arrow::after{content:"";position:absolute;top:50%;height:1px; background:currentColor;transition:transform .45s cubic-bezier(.22,.61,.36,1);} .tk a.tk-arrow::before{right:4px;width:36px;transform-origin:left center;} .tk a.tk-arrow::after{right:4px;width:11px;transform:rotate(-36deg);transform-origin:right center;} .tk a.tk-arrow:hover::before{transform:scaleX(1.2);} .tk a.tk-arrow:hover::after{transform:translateX(7.2px) rotate(-36deg);} @media (prefers-reduced-motion:reduce){ .tk a.tk-arrow::before,.tk a.tk-arrow::after{transition:none;} } /* --- [引用 .btn] ボタンの寸法感（背は高く・字送りは広く） --- */ .tk a.tk-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px; min-height:56px;padding:14px 36px;letter-spacing:.14em; transition:background-color .45s cubic-bezier(.22,.61,.36,1),color .45s cubic-bezier(.22,.61,.36,1);} @media (prefers-reduced-motion:reduce){.tk a.tk-btn{transition:none;}} /* --- ブログのカード（CueZilla top-blog-teaser ＝ parts131415）--- */ /* ★.row / .col / .card / .g-4 は Bootstrap のクラスで、実機では CueZilla のスキンが持っている。 草案には Bootstrap が入っていないので、ここで「実機と同じ見え方になる最小限」を書いている。 実機側でも効くよう .tk-blogcards で囲ってあり、3列・ガター・カードの体裁だけを固定する。 */ .tk-blogcards{padding:72px 0 80px;} .tk-blogcards .row{display:grid;grid-template-columns:1fr;gap:20px;margin:0 0 28px;padding:0;} .tk-blogcards .col{min-width:0;} .tk-blogcards .card{height:100%;background:#FFFFFF;border:1px solid #F0E4DB;} .tk-blogcards .card-body{padding:0;} .tk-blogcards .card a{display:block;color:#1A1A1A;text-decoration:none;} .tk-blogthumb{aspect-ratio:16/9;background:#FBEDE2;border-bottom:1px solid #F0E4DB;position:relative;} .tk-blogthumb::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:26px;margin:-13px 0 0 -17px; border:2px solid #EBD0B5;border-radius:4px;} .tk-blogthumb::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5px 0 0 -5.5px; border:2px solid #EBD0B5;border-radius:50%;} .tk-blogcards .date{display:block;padding:16px 18px 0;font-size:12px;letter-spacing:.08em;color:#8A4A17;font-weight:800;} .tk-blogcards .card-text{margin:0;padding:6px 18px 18px;font-size:15px;line-height:1.7;font-weight:800;} .tk-blogcards .card{transition:box-shadow .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1);} .tk-blogcards .card:hover{box-shadow:0 16px 36px rgba(254, 189, 140, .14);transform:translateY(-3px);} .tk-blogmore{margin:0;} @media (prefers-reduced-motion:reduce){.tk-blogcards .card{transition:none;}.tk-blogcards .card:hover{transform:none;}} @media (min-width:600px){.tk-blogcards .row{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (min-width:960px){.tk-blogcards .row{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}} /* --- フッター: 3つの塊に割って粗密をつける（2026-09-01 ディレクター指示「情報にまとまりを感じない」）--- 引用: bright_cms .footer-grid（左＝名乗りと連絡先／右＝リンク）。 前版は 15px の文が4行と 44px のリンク13個が、すべて同じ濃さで縦一列に積まれていたため、 どこまでが名乗りでどこからが連絡先なのかが読み取れなかった。 ★塊の中は詰め、塊の間だけ大きく空ける。濃さは 白＞#F0E4DB＞#EBCBAB の3段に割り当てる。 ★本文の並び順は原稿のまま（住所→電話→営業時間・許可→対応エリア）。強弱だけを変えている。 */ /* ★社名は独立した段に置いて目立たせ、その下で左右を同じ高さから始める（ディレクター指示 2026-09-01）。 左は「許可番号 / 電話・FAX / 住所・営業時間・対応エリア」の3塊に割り、塊の間だけ大きく空ける。 */ /* ★社名と建設業許可番号は同じ括り（＝名乗り）。罫線は引かない（ディレクター指示 2026-09-01）。 */ .tk-ftr-top{margin-bottom:clamp(30px,4vw,44px);} .tk-ftr-top .lic{margin:14px 0 0;font-size:12px;letter-spacing:.1em;line-height:1.6;color:#5C3216;} .tk-ftr-grid{display:grid;gap:40px;align-items:start;} .tk-ftr-brand{margin:0;} .tk-ftr-brand .en{margin:0 0 6px;font-size:10px;letter-spacing:.28em;color:#5C3216;font-weight:800;} .tk-ftr-brand .ja{margin:0;font-size:20px;font-weight:800;} .tk-ftr-info .tel{margin:0 0 26px;} .tk-ftr a.tk-ftr-telno{display:inline-flex;align-items:center;min-height:44px;color:#FFFFFF; font-size:26px;font-weight:800;letter-spacing:.02em;line-height:1.15;text-decoration:none;} .tk-ftr-info .tel .fax{display:block;margin-top:1px;font-size:13px;letter-spacing:.04em;color:#5C3216;} /* ★900px で「対応エリア…越智郡上島町」の行末が「島町」の2文字だけになる（実測）。 行長を揃えて孤立行を作らせない。 */ .tk-ftr-meta p{margin:0;font-size:13px;line-height:1.95;color:#5C3216;text-wrap:balance;} .tk-ftr-meta p:first-child{color:#5C3216;font-size:14px;} .tk-ftr-nav ul{list-style:none;margin:0;padding:0;} .tk-ftr .tk-ftr-nav>ul{display:block;column-count:2;column-gap:26px;} .tk-ftr-nav>ul>li{break-inside:avoid;-webkit-column-break-inside:avoid;} .tk-ftr a.tk-ftr-lnk{display:flex;align-items:center;min-height:44px;padding:2px 0; font-size:14px;line-height:1.5;color:#5C3216;text-decoration:none;} .tk-ftr a.tk-ftr-lnk.lv1{color:#FFFFFF;font-weight:800;} .tk-ftr-nav>ul>li>ul{margin:0 0 6px;padding-left:13px;border-left:1px solid #FEBD8C;} .tk-ftr-nav>ul>li>ul a.tk-ftr-lnk{font-size:13px;color:#5C3216;} .tk-ftr-copy{margin:38px 0 0;padding-top:20px;border-top:1px solid #FEBD8C;font-size:12px;color:#5C3216;} @media (min-width:880px){ .tk-ftr-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start;} /* ★左右とも1行目は 44px の箱に文字が中央で入るが、左は 26px・右は 14px と字が違うぶん ぶら下がり位置がずれる。右をそのぶん持ち上げて、電話番号と1行目の頭を揃える。 */ .tk-ftr-nav{margin-top:-8px;} } /* --- 本文の読み幅（2026-09-01 実測で発覚）--- 版面 1040px にそのまま 16px の本文を流すと 和文で 63〜65字になる（information / work/pole）。 目安は 35〜45字で、それを超えると行末から次の行頭へ目が戻れない。 ★直すのは読み幅であって文字サイズではない（小さくして字数を稼がない）。 ★.tk-inner の直下だけに掛ける。カード・グリッド・表の中の文は器の幅で決まるので触らない。 */ /* ★対象は地の文だけ。組みのためのリスト（グリッド・タイムライン・カード列）は クラスを持つので :not([class]) で自動的に外れる。 これを分けないと、＜ul＞ で組んだセクションが右に22%の空きを残す（実測 2026-09-02）。 */ /* ★2026-09-03 撤去: ここで地の文に max-width:78% を掛けていたが、 版面1040pxに対して箱が811pxで終わり、**229px手前で文字ボックスが切れて**見えていた （ディレクター指摘・work/pole「昭和47年の設立以来…」ほか34件）。 読み幅は**幅を削る**のではなく**文字を大きくする**ことで作る（下の指定）。 */ body.tk:not(.tk-top) .tk-sec--cta .tk-inner>p{max-width:none;} @media (max-width:900px){body.tk:not(.tk-top) .tk-inner>p, body.tk:not(.tk-top) .tk-inner>ul:not([class]), body.tk:not(.tk-top) .tk-inner>ol:not([class]){max-width:none;}} /* --- 4つの事業の動画は帯の中に置く（2026-09-01 ディレクター指示）--- */ .tk-videoband{margin:32px 0 36px;padding:clamp(22px,3.4vw,40px) clamp(18px,3vw,44px);background:#FDF5EF;} .tk-videoband .tk-video{width:100%;max-width:760px;margin:0 auto 14px;} .tk-videoband .tk-video-note{max-width:760px;margin:0 auto;text-align:right;} /* --- ヘッダー: 項目同士より白帯の内側のほうが広くなるように詰める（2026-09-01 ディレクター指示）--- 実測（1440px・追従時）: 項目間の見た目の空き 54px に対し、帯の内側の余白は 42px しかなく、 項目が帯の縁に押し付けられて見えていた。項目の左右パディングを 18→13px にして間を 26px にし、 帯の内側（24+13=37px）が必ず上回るようにする。 */ @media (min-width:1080px){ .tk-navlist{gap:0!important;} .tk-navlist>li>a,.tk a.tk-nav-parent{padding:10px 13px!important;} .tk-navlist>li>a::after,.tk a.tk-nav-parent::after{left:13px;right:13px;} .tk-navlist>li>a[href="/form/inquiry"]{padding:11px 22px!important;margin-left:14px;} /* 電話は「TEL＋番号＋受付時間」で1つの塊に見せる。行の高さを字面ぶんまで詰める。 */ /* ★align-self を明示しないと、旧・重ねヘッダー時代の .tk-top .tk-hdr-tel{align-self:flex-start}（電話を白い札として上端に貼っていた頃の指定）が 残っていて、電話だけ帯の上端に寄る（実測 2026-09-02: 他の項目の中心 32.3px に対し 24.6px）。 */ .tk-navlist>li.tk-nav-tel{align-self:center!important;} .tk-nav-tel{column-gap:0!important;padding-left:15px!important;align-items:center!important;} .tk-nav-tel .tk-tel-lb{align-self:center!important;line-height:1;letter-spacing:0;margin-right:0;} .tk-nav-tel a{line-height:1.15!important;padding:0!important;} .tk-nav-tel span:not(.tk-tel-lb){line-height:1.15!important;margin-top:-3px!important;} /* ★ナビ共通の a{padding:10px 13px} が電話にも当たって、TEL と番号のあいだに 1文字ぶん(13px)の空きを作っていた（実測 2026-09-02）。半分にし、右側は詰める。 */ .tk-navlist>li.tk-nav-tel>a{padding-left:6px!important;padding-right:0!important;} /* ★追従時の上下パディング（.tk-hdr.is-stuck .tk-navlist＞li＞a）が電話にも当たって 番号の行が 36.7px に膨らんでいた（実測 2026-09-01）。電話だけ外す。 ただし 0 にすると操作対象が 24px を切る（WCAG 2.2 目標のサイズ）ので 2px は残す。 */ /* ★2026-09-02 ディレクター指摘: 番号と受付時間の空きが、透過時と白帯時で大きく変わる。 原因はこの上下パディングを**追従時だけ**外していたこと（透過時 10px / 白帯時 2px＝実測8pxの差）。 白帯時の詰まり方が望ましいとのことなので、**両方の状態で 2px にそろえる**。 0 にしないのは操作対象が 24px を切るため（WCAG 2.2 目標のサイズ）。 */ .tk-navlist>li.tk-nav-tel>a{padding-top:2px!important;padding-bottom:2px!important;} /* 追従時は .tk-hdr.is-stuck .tk-navlist＞li＞a（クラス3つ）のほうが強いので、同じ強さで並べる */ .tk-hdr.is-stuck .tk-navlist>li.tk-nav-tel>a{padding-top:2px!important;padding-bottom:2px!important;} } /* --- ボタンの hover（2026-09-02 ディレクター指示）--- これまで .tk-btn には :hover の指定が1件も無く、transition だけが書かれていた＝無反応だった。 面で塗り替える（左から色が走る）＋2px 持ち上げる＋影、の3点で「押せる」ことを出す。 ★.tk-arrow（矢印が伸びるテキストリンク）は指示により現状維持。ここでは触っていない。 */ .tk a.tk-btn{position:relative;overflow:hidden;isolation:isolate; transition:color .45s cubic-bezier(.22,.61,.36,1),background-color .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1);} .tk a.tk-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#FEBD8C; transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.22,.61,.36,1);} .tk a.tk-btn--nv::before{background:#FEBD8C;} .tk a.tk-btn--w::before{background:#FEBD8C;} .tk a.tk-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(254, 189, 140, .30);} .tk a.tk-btn:hover::before{transform:scaleX(1);} .tk a.tk-btn--w:hover{color:#FFFFFF;} /* ヘッダーのお問い合わせも同じ挙動に（.tk-btn ではなくナビの項目なので別に書く） */ @media (min-width:1080px){ .tk-navlist>li>a[href="/form/inquiry"]{position:relative;overflow:hidden;isolation:isolate; transition:background-color .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1);} .tk-navlist>li>a[href="/form/inquiry"]:hover{background:#FEBD8C!important;transform:translateY(-2px); box-shadow:0 12px 26px rgba(254, 189, 140, .30);} } /* 追従の採用ボタン（面はすでに変わるが、持ち上がりと影を足して他と揃える） */ .tk-float a.tk-float-btn{transition:background-color .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1);} .tk-float a.tk-float-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(254, 189, 140, .36);} /* ★フォーカスリングが白いままだと、白い面の上に置いたボタンで見えない。 既定は濃紺にし、濃紺の帯に置く白ボタン（--w）だけ白に戻す。 */ .tk a.tk-btn:focus-visible{outline:3px solid #FEBD8C;outline-offset:3px;} .tk a.tk-btn--w:focus-visible{outline-color:#FFFFFF;} @media (prefers-reduced-motion:reduce){ .tk a.tk-btn,.tk a.tk-btn::before,.tk-float a.tk-float-btn{transition:none;} .tk a.tk-btn:hover,.tk-float a.tk-float-btn:hover{transform:none;} .tk-navlist>li>a[href="/form/inquiry"]{transition:none;} .tk-navlist>li>a[href="/form/inquiry"]:hover{transform:none;} } /* --- FVの模様・下地・リード（2026-09-02 ディレクター指示） --- */ /* ③ リード文（大きく・太く） */ /* ② 100vh になったぶんコピーを底から少し上げ、人物と離す */ @media (min-width:768px){ .tk-fv-photo.has-img img{object-position:50% 34%;} } /* ★写真そのものを少し起こす（2026-09-02）。 紺のベールを薄くしても、元写真の空が沈んで見えるぶんは戻らない。 明度を上げ彩度をわずかに落とすと、空が水色寄りになって印象が軽くなる。 */ /* ★支給された「空を濃くした版」に替えたので、明るく起こす補正は外す（2026-09-02） */ /* ★TOPの重ねヘッダー用スクリム（PC幅・2026-09-02）。 空を明るくしたぶんナビの白文字が 3.6:1 まで落ちたので、**ヘッダーの帯にあたる上端だけ** を沈める。全体のベールを濃くすると空の明るさが戻ってしまうため、範囲を限定している。 （狭幅には同じ仕掛けがすでにある＝.tk-top .tk-fv-photo::before） */ /* --- FV 第2次調整（2026-09-02 ディレクター指示）--- */ /* ② 見出しはロゴの下（左上）。人物は画面の中央〜下に写るので、上に置けば重ならない。 */ @media (min-width:768px){ /* 人物を少し下げて、リード文の行と離す（切り落とすのは下＝バケットの側） */ .tk-fv-photo.has-img img{object-position:50% 0%;} } /* ③ 空を明るいまま見せるので、その上に載る文字は紺へ反転する。 ★白のまま成立させようとすると、結局この上に濃いベールを敷くことになる＝指示と逆になる。 */ .tk-scroll{color:#8A4A17;} .tk-scroll i{background:linear-gradient(180deg,rgba(254, 189, 140, .9),rgba(254, 189, 140, 0));} /* 白ラベルは明るい空の上でも札に見えるよう、影で浮かせる（面の形は契約の署名なので変えない） */ /* 重ねヘッダー（TOPの最上部）も紺の文字にする */ @media (min-width:1080px){ .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-en{color:#8A4A17;} .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-name{color:#8A4A17;} .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-brand-mark{filter:brightness(0) invert(1);} .tk-top .tk-hdr:not(.is-stuck) .tk-navlist>li>a, .tk-top .tk-hdr:not(.is-stuck) .tk a.tk-nav-parent{color:#8A4A17!important;} .tk-top .tk-hdr:not(.is-stuck) .tk-navlist>li>a[href="/form/inquiry"]{color:#FFFFFF!important;} .tk-top .tk-hdr:not(.is-stuck) .tk-navlist>li>a::after, .tk-top .tk-hdr:not(.is-stuck) .tk a.tk-nav-parent::after{background:#FEBD8C;} } @media (max-width:1079px){ .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-en{color:#8A4A17;} .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-name{color:#8A4A17;} .tk-top .tk-hdr:not(.is-stuck) .tk-burger{color:#8A4A17;} .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-brand-mark{filter:brightness(0) invert(1);} } /* 狭幅もコピーは上（空の側）。人物は画面の下半分に写るので重ならない。 */ /* 「年間100本以上」の行末が2文字だけ残っていた（375/414px）。行長をそろえる。 */ .tk-nums--row .n{text-wrap:balance;} /* ★狭幅は写真が縦に大きくトリミングされるため、コピーの背後に空の濃い部分や 黒いケーブルが来る（実測 375px: 地色 rgb(171, 104, 40)＝紺の文字が 1.1:1）。 紺のベールを戻すと「重い」という指示に逆行するので、**白を薄く敷いて明度を上げる**。 結果、紺の文字・紺のロゴ・紺のバーガーが同じ下地の上で成立する。 */ @media (max-width:767px){ /* 上＝写真／下＝コピー面 の2段組み */ .tk-fv{background:#FDF2E9;} /* ヘッダーが重なる帯だけ白を薄く敷く（紺のロゴ・紺のバーガーを成立させる） */ } /* 社名が明るい空に乗る幅（599〜767px）で 4.1〜4.3:1 だったので、ヘッダー帯の白を少し強める */ /* ============================================================ ★文字サイズと濃さの底上げ（2026-09-02 ディレクター指示） 「文字が全体的に小さすぎる／項目名は16px確保／紺地の水色文字が薄い」 ============================================================ */ /* --- 項目名（読ませる文字）は 16px を下限にする --- */ .tk-check li{font-size:16px;} .tk-check li>span:not(.lb){font-size:16px;} .tk-nums--row .l{font-size:16px;line-height:1.7;color:#5C3216;} .tk-nums .l{font-size:16px;color:#5C3216;} .tk-blogcards .card-text{font-size:16px;} .tk-worklist .tk-card p:last-child{font-size:16px;} .tk-ftr a.tk-ftr-lnk{font-size:16px;} .tk-ftr-nav>ul>li>ul a.tk-ftr-lnk{font-size:15px;} .tk-ftr-meta p{font-size:15px;color:#5C3216;} .tk-ftr-meta p:first-child{font-size:16px;color:#FCF1E9;} .tk-ftr-info .lic{font-size:14px;color:#5C3216;} .tk-ftr-info .tel .fax{font-size:15px;color:#5C3216;} .tk-ftr-copy{font-size:14px;color:#5C3216;} .tk-crumb{font-size:14px;} .tk-video-note{font-size:14px;} /* --- 小さいラベル類（語ではなく符号）は 13px まで上げ、字送りで締める --- */ .tk-eyebrow{font-size:13px;letter-spacing:.18em;} .tk-point{font-size:13px;letter-spacing:.18em;} .tk-check .lb{font-size:13px;letter-spacing:.12em;} .tk-hdr-en{font-size:12px;letter-spacing:.2em;} .tk-ftr-brand .en{font-size:12px;letter-spacing:.2em;} .tk-float .tk-float-en{font-size:12px;letter-spacing:.2em;} .tk-scroll span{font-size:12px;letter-spacing:.26em;} .tk-blogcards .date{font-size:14px;letter-spacing:.06em;} .tk-news52 .date{font-size:14px;} .tk-pillars-head .en{font-size:13px;letter-spacing:.3em;text-indent:.3em;} /* --- 紺地に置いた薄い水色を、読める濃さへ --- */ .tk-sec--navy p{color:#FCF1E9;} .tk-sec--cta .tk-inner p{color:#5C3216;} .tk-sec--navy .tk-eyebrow{color:#5C3216;} .tk-nav-tel span:not(.tk-tel-lb){font-size:12px;} /* CTAの電話番号（濃紺の面）も語として読ませるので 16px 以上に */ .tk-sec--cta a[href^="tel:"]{font-size:17px;} /* --- FVは「濃い空の写真＋薄い色の文字」へ戻す（2026-09-02 第3次指示）--- */ .tk-scroll{color:#5C3216;} .tk-scroll i{background:linear-gradient(180deg,rgba(240, 228, 219, .9),rgba(240, 228, 219, 0));} /* 重ねヘッダーの文字は白ベース（追従して白帯になったら濃い色へ戻る） */ .tk-hdr:not(.is-stuck) .tk-brand{background:none;box-shadow:none;} .tk-hdr:not(.is-stuck) .tk-nav{background:none;box-shadow:none;} .tk-top .tk-hdr:not(.is-stuck) .tk-burger{color:#FFFFFF!important;} @media (min-width:1080px){ .tk-top .tk-hdr:not(.is-stuck) .tk-navlist>li>a, .tk-top .tk-hdr:not(.is-stuck) a.tk-nav-parent{color:#FFFFFF!important;} .tk-top .tk-hdr:not(.is-stuck) .tk-navlist>li>a[href="/form/inquiry"]{color:#FFFFFF!important;} .tk-top .tk-hdr:not(.is-stuck) .tk-navlist>li>a::after, .tk-top .tk-hdr:not(.is-stuck) a.tk-nav-parent::after{background:#FFFFFF;} } /* 狭幅の2段組み（写真／水色の面）は解除し、PCと同じ「写真の上に重ねる」へ戻す */ @media (max-width:767px){ .tk-fv{background:#FEBD8C;} } /* 白いもや（ヘッダー帯ぶん）は写真が濃くなるので不要。ベールは下の締めだけ残す。 */ /* FVの白ラベルの行間（塊の間はセクション内の要素間より広く保つ） */ /* ★FV上部の紺グラデーションを全幅で撤去（ディレクター指示 2026-09-02）。 実体は .tk-top .tk-fv-photo::before（高さ360px・上端 rgba(165, 98, 39, .88)）。 重ねヘッダーの白文字を成立させるために置いていたものなので、 これを外すとヘッダーのコントラストは写真の明るさ次第になる。 → 写真側で空を沈めるか、文字色を変えるかの判断が必要（報告済み）。 */ /* 下の締めも最小限に（上は0） */ /* ★見出しの位置: 左へ100px・下へ40px（ディレクター指示 2026-09-02）。 左シフトは「版面の外にどれだけ余白があるか」で頭打ちにする。 固定で -100px にすると、1160px 付近の幅で文字が画面外へ出るため。 （1440px で -100px / 1280px で -60px / 1160px 以下は 0） */ /* ① 「採用情報を見る」は最後のPOINTの続きに置く（2026-09-02 ディレクター指示）。 POINT 3 は写真列のほうが背が高く、テキスト列の下に大きな空きができていた。 最後のPOINTの下余白ごと詰めて、矢印リンクの続きにボタンが来るようにする。 */ .tk-pt-cta{margin:20px 0 0;} @media (min-width:768px){ .tk-pt:last-of-type{margin-bottom:0;} .tk-pt-cta{margin-top:16px;} } /* ② ブログの見出しは他セクションと同じ組み（英字ラベル→日本語見出し→中身） */ .tk-sec--blog .tk-h2{margin:0 0 24px;} /* ★FVの文字に影（ディレクター指示 2026-09-02 の代替案）。 ※影は実描画のコントラスト検定では背景色を変えないので、数値上の不足は解消しない。 目視の可読性を上げるための補助として入れている。 */ .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-name, .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-en{text-shadow:0 2px 10px rgba(18, 9, 3, .58);} @media (min-width:1080px){ .tk-top .tk-hdr:not(.is-stuck) .tk-navlist>li>a, .tk-top .tk-hdr:not(.is-stuck) a.tk-nav-parent, .tk-top .tk-hdr:not(.is-stuck) .tk-nav-tel a, .tk-top .tk-hdr:not(.is-stuck) .tk-nav-tel span, .tk-top .tk-hdr:not(.is-stuck) .tk-tel-lb{text-shadow:0 2px 10px rgba(18, 9, 3, .58);} } /* FVのリード文・英字ラベルの頭を、白札の中の文字と揃える */ /* ★SCROLL の表示位置（右下の採用ボタンと重なっていた・2026-09-02）。 採用ボタンは画面右下に固定で、高さは約80px＋余白24px。その上に逃がす。 */ @media (min-width:768px){ .tk-scroll{bottom:auto;top:clamp(300px,44vh,460px);} } /* ============================================================ ★狭幅の調整（2026-09-02 ディレクター指示） ============================================================ */ @media (max-width:767px){ /* ① リード文と英字ラベルはヒーローの下側へ。 見出しは上のままにしたいので、コピー塊を画面の高さいっぱいに伸ばし、 見出しの下に自動の余白を入れて残りを下端まで押し下げる。 */ /* ② CHECK 行はラベルと本文を上下に積む（横並びだと本文が2〜3行に折れて読みにくい） */ .tk-check li{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 2px;} .tk-check .lb{padding-top:0;} /* ③ 数字は縦積み（3列のままだと1項目あたり2〜3行に折れる） */ .tk-nums--row{flex-wrap:wrap;} .tk-nums--row div{flex:1 1 100%;min-width:0;padding:18px 0; border-left:0;border-top:1px solid #FDD2B0;text-align:left;} .tk-nums--row div:first-child{border-top:0;padding-top:0;} .tk-nums--row .n{font-size:26px;line-height:1.3;} .tk-nums--row .l{font-size:15px;line-height:1.7;} } /* --- 狭幅のヘッダー: マークと社名を横並びにして高さを詰める（2026-09-02）--- */ @media (max-width:1079px){ .tk-brand{flex-direction:row;align-items:center;gap:10px;text-align:left;} .tk-brand-mark{width:42px;height:25px;} .tk-brand .tk-hdr-en{margin:0 0 2px;font-size:9px;letter-spacing:.22em;} .tk-brand .tk-hdr-name{font-size:15px;line-height:1.3;} .tk-top .tk-hdr:not(.is-stuck) .tk-brand{padding:0;} .tk-hdr{padding-top:14px;padding-bottom:14px;} .tk-hdr.is-stuck{padding-top:10px;padding-bottom:10px;} } @media (max-width:599px){ .tk-brand-mark{width:38px;height:22px;} .tk-brand .tk-hdr-name{font-size:14px;} } /* --- 狭幅は「画像が上・テキストが下」で積む（2026-09-02 ディレクター指示）--- */ @media (max-width:767px){ /* POINT 1-3 */ .tk-pt{display:flex;flex-direction:column;} .tk-pt-media{order:-1;margin-bottom:22px;} /* 全幅2分割のセクション（代表メッセージ・施工実績） */ .tk-sec--split{display:flex;flex-direction:column;} .tk-sec--split>.tk-split-media{order:-1;margin-bottom:24px;} .tk-sec--intro{display:flex;flex-direction:column;} .tk-sec--intro>.tk-intro-media{order:-1;} /* 事業カード（写真が先に来る組みなのでそのまま） */ } /* --- ヘッダーの高さをもう一段詰める（バーガーが高さを決めていた）--- */ @media (max-width:1079px){ .tk-burger{gap:5px;} .tk-burger-bars i{margin:4px 0;} .tk-hdr{padding-top:10px;padding-bottom:10px;} } @media (max-width:1079px){ /* ★器の上下 20px は別の指定（詳細度が上）で入っていたので、ここで打ち消す。 ヘッダーの上下余白は .tk-hdr 側の 10px に一本化する。 */ .tk-hdr>.tk-wrap{padding-top:0!important;padding-bottom:0!important;align-items:center;} } /* 「採用情報を見る」は最後のPOINTのテキスト列の中（待遇リンクの直後）に置いている。 矢印リンクとの間は、要素間より少し広い程度に留める。 */ .tk-pt-text .tk-pt-cta{margin:22px 0 0;} /* ============================================================ ★FV（ファーストビュー）— ここが唯一の指定場所（2026-09-02 整理） ------------------------------------------------------------ もともと .tk-fv-copy が12回・.tk-fv-lead が9回・.tk-fv-en が8回、別々の場所で 上書きされていた（対話のたびに末尾へ打ち消しを足した結果）。値は変えずに1か所へ集約した。 ★.tk-top .tk-fv-photo::before（紺のスクリム）は全幅で content:none ＝ 効いていなかったので撤去。 ============================================================ */ /* コピー塊の位置 */ .tk-fv-copy{position:absolute;z-index:4;left:0;right:0; top:calc(clamp(152px,20vh,208px) + 40px);bottom:clamp(104px,15vh,148px); padding:0 20px;display:flex;flex-direction:column;} @media (min-width:768px){ /* 見出しは版面の中央から、指定ぶんだけ左へ寄せる（左シフトの上限は版面の外の余白で決まる）。 ★% と vw を同じ calc に混ぜると片側ブリードの誤用として lint L002 に拾われるので、 translateX を2つに分けている。 */ .tk-fv-copy{--fv-shift:clamp(0px,(100vw - 1080px) / 2,180px); left:50%;right:auto;bottom:0;top:calc(clamp(126px,17vh,196px) + 40px); width:100%;max-width:1120px;padding:0 20px clamp(64px,9vh,110px); display:block;flex-direction:row; transform:translateX(-50%) translateX(calc(var(--fv-shift) * -1));} } /* リード文と英字ラベル（白文字＋影。写真の上に直接置く） */ .tk-fv-lead{display:block;margin:18px 0 0;padding:0;background:none;box-shadow:none; color:#FFFFFF;font-size:17px;line-height:1.75;font-weight:800;letter-spacing:.02em; text-shadow:0 2px 10px rgba(18, 9, 3, .66),0 1px 2px rgba(18, 9, 3, .54);} .tk-fv-en{display:block;margin:14px 0 0;padding:0;background:none;box-shadow:none; color:#5C3216;font-size:13px;line-height:1.9;font-weight:700;letter-spacing:.22em; text-shadow:0 2px 10px rgba(18, 9, 3, .66),0 1px 2px rgba(18, 9, 3, .54);} @media (min-width:768px){ /* 白ラベルの中の文字と頭を揃える（見出しを左端まで寄せているため） */ .tk-fv-lead,.tk-fv-en{padding-left:24px;} .tk-fv-lead{font-size:20px;margin-top:22px;} } @media (min-width:1080px){ .tk-fv-lead{font-size:22px;line-height:1.8;} } @media (max-width:767px){ /* 狭幅はリード文以降を下端へ寄せる（見出しは上のまま） */ .tk-fv-lead{margin-top:auto;} } /* 写真に重ねる膜（下の締めだけ。上は素通し＝空の明るさを残す） */ @media (min-width:768px){ .tk-fv-photo::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(254, 189, 140, 0) 0%,rgba(254, 189, 140, 0) 62%,rgba(254, 189, 140, .08) 82%,rgba(254, 189, 140, .22) 100%);} } .tk-fv-photo.has-img::after{z-index:1;} /* FVの白ラベル（塊の間はセクション内の要素間より広く保つ＝spacing の階層） */ .tk-fv .tk-fvbox{margin-bottom:20px;box-shadow:0 12px 34px rgba(254, 189, 140, .16);} @media (max-width:767px){.tk-fv .tk-fvbox{margin-bottom:14px;}} /* ============================================================ ★下層セクションのパーツ層（2026-09-02） 一覧: 1_ディレクション/5_サイトマップ・ワイヤー/下層セクションデザイン一覧.md トップの語彙だけで組む。既存資産（.tk-flow / .tk-tbl / .tk-check / .tk-card / .tk-nums / .tk-venn） は作り直さず、下層にしか無い型だけをここに置く。 ============================================================ */ /* --- S02 主力の格上げ帯 ------------------------------------ そのページで最も読ませたい1つだけを濃紺の全幅で別格にする（構成の原則②）。 写真は版面の外へ片側ブリードさせ、斜め罫線を1本だけ通す。 */ .tk-flag{position:relative;overflow:hidden;background:#FEBD8C;color:#4A2A12;padding:0;} .tk-flag>.tk-flag-body,.tk-flag>.tk-flag-media{position:relative;z-index:1;} .tk-flag-body{padding:56px 20px 44px;} .tk-flag-in{position:relative;z-index:1;max-width:560px;} .tk-flag .tk-h2,.tk-flag p{color:#FFFFFF;} .tk-flag .tk-eyebrow{color:#5C3216;} .tk-flag-media .tk-ph{margin:0;aspect-ratio:4/3;} @media (min-width:768px){ .tk-flag{display:grid;grid-template-columns:1fr 1fr;align-items:center;} .tk-flag>.tk-flag-media{order:2;} .tk-flag>.tk-flag-body{order:1;padding:72px 0;} .tk-flag-in{margin-left:auto;padding:0 44px;} .tk-flag-media .tk-ph{aspect-ratio:1/1;} } /* --- S06 六角＋短文の列 ------------------------------------ トップのベン図と同じ切り抜きを、重ねずに横へ並べる。図は装飾（aria-hidden）。 */ .tk-hexrow{display:grid;grid-template-columns:1fr;gap:26px;margin:0;padding:0;list-style:none;} .tk-hexrow>li{text-align:center;} .tk-hexrow .hx{display:grid;place-items:center;width:96px;height:83px;margin:0 auto 16px; -webkit-clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); background:#FEBD8C;color:#4A2A12;font-size:26px;font-weight:800;line-height:1;} .tk-hexrow>li:nth-child(2) .hx{background:#FEBD8C;} .tk-hexrow>li:nth-child(3) .hx{background:#FDD2B0;} .tk-hexrow .ttl{display:block;margin:0 0 8px;font-size:18px;font-weight:800;line-height:1.6;} .tk-hexrow .txt{display:block;margin:0;font-size:16px;line-height:1.9;} @media (min-width:600px){.tk-hexrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;}} @media (min-width:1080px){.tk-hexrow .hx{width:112px;height:97px;font-size:30px;}} /* --- S09 資格・許認可のバッジ列 ----------------------------- 数が多いので面を持たせない。枠線だけの札を流す。 */ .tk-badges{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;} .tk-badges>li{border:1px solid #EDD9C5;padding:9px 16px;font-size:15px;font-weight:700;color:#8A4A17; background:#FFFFFF;line-height:1.5;} .tk-badges>li.is-key{border-color:#FEBD8C;background:#FEBD8C;color:#4A2A12;} /* --- S10 縦タイムライン ------------------------------------ .tk-flow は横並びの3〜4工程用。段数が多い「1日の流れ」「5年」「選考の流れ」は縦に積む。 */ .tk-tl{list-style:none;margin:0;padding:0;position:relative;} .tk-tl>li{position:relative;padding:0 0 30px 30px;} .tk-tl>li::before{content:"";position:absolute;left:7px;top:9px;bottom:-9px;width:1px;background:#F3D8C3;} .tk-tl>li:last-child{padding-bottom:0;} .tk-tl>li:last-child::before{display:none;} .tk-tl>li::after{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%; background:#FFFFFF;border:3px solid #FEBD8C;} .tk-tl .lb{display:block;margin:0 0 4px;font-size:13px;letter-spacing:.14em;font-weight:800;color:#8A4A17;} .tk-tl .ttl{display:block;margin:0 0 8px;font-size:19px;font-weight:800;line-height:1.55;} .tk-tl p{margin:0 0 12px;} .tk-tl p:last-child{margin-bottom:0;} /* 節目だけ写真を差し込む（全部に付けると単調になる） */ .tk-tl .tk-ph{margin:12px 0 0;aspect-ratio:16/9;} @media (min-width:768px){ .tk-tl>li{padding-left:38px;padding-bottom:38px;} .tk-tl>li::before{left:9px;} .tk-tl>li::after{width:19px;height:19px;} } /* 選考の流れ：4項目を横1列に（2026-09-08 指示） */ @media (min-width:768px){ .tk-tl.tk-tl--row{display:grid;grid-template-columns:repeat(4,1fr);column-gap:32px;} .tk-tl.tk-tl--row>li{display:block;padding:34px 0 0;} .tk-tl.tk-tl--row>li::before{display:none;} .tk-tl.tk-tl--row>li::after{display:none;} .tk-tl.tk-tl--row>li:not(:last-child)::after{content:"";display:block;position:absolute;right:-22px;top:11px;left:auto; width:0;height:0;border-style:solid;border-width:6px 0 6px 8px; border-color:transparent transparent transparent #FEBD8C;background:none;border-radius:0;} .tk-tl.tk-tl--row>li:last-child::before{display:none;} .tk-tl.tk-tl--row>li:last-child::after{display:none;} .tk-tl.tk-tl--row>li>.lb,.tk-tl.tk-tl--row>li>.ttl{grid-column:auto;grid-row:auto;text-align:left;padding-top:0;} .tk-tl--row .lb{font-size:15px;} .tk-tl--row .ttl{font-size:22px;} .tk-tl--row p{font-size:16px;} } /* --- S11 インタビュー -------------------------------------- 人物写真を片側ブリードで置き、右に一問一答。引用符はゴーストとして敷く。 */ .tk-voice{position:relative;overflow:hidden;padding-left:0;padding-right:0;} .tk-voice>.tk-voice-media,.tk-voice>.tk-voice-body{position:relative;z-index:1;} .tk-voice-body{padding:28px 20px 0;} .tk-voice-in{position:relative;z-index:1;max-width:560px;} .tk-voice-media .tk-ph{margin:0;aspect-ratio:4/3;} .tk-voice-q{display:block;margin:0 0 6px;font-size:16px;font-weight:800;color:#8A4A17;line-height:1.7;} .tk-voice-a{margin:0 0 22px;} .tk-voice-a:last-child{margin-bottom:0;} .tk-voice-name{display:block;margin:0 0 20px;font-size:14px;letter-spacing:.08em;color:#8A4A17;} .tk-voice-mark{position:absolute;z-index:0;top:-.28em;left:-.04em;margin:0; font-size:clamp(80px,14vw,176px);line-height:1;font-weight:800;color:#FBEFE6; pointer-events:none;user-select:none;} .tk-sec--tint .tk-voice-mark{color:#FAEADD;} @media (min-width:768px){ .tk-voice{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:0;} .tk-voice>.tk-voice-media{order:1;} .tk-voice>.tk-voice-body{order:2;padding:0;} .tk-voice-in{padding:0 44px;} .tk-voice--rev>.tk-voice-media{order:2;} .tk-voice--rev>.tk-voice-body{order:1;} .tk-voice--rev .tk-voice-in{margin-left:auto;} .tk-voice-media .tk-ph{aspect-ratio:1/1;} } /* --- S12 不利の先出しブロック ------------------------------ 面を持たせず罫線だけ。正直に書く節なので、装飾で持ち上げない。 */ .tk-plain{margin:0;padding:0;list-style:none;border-top:1px solid #F0E4DB;} .tk-plain>li{padding:22px 0;border-bottom:1px solid #F0E4DB;} .tk-plain .ttl{display:block;margin:0 0 8px;font-size:18px;font-weight:800;line-height:1.6;} .tk-plain p{margin:0;} /* --- S13 回遊ゲート（★新設） ------------------------------- 最後まで読まない人を関連ページへ逃がす（構成の原則③の一段目）。 いまサイトに1つも無く、下層はすべて「読み切ってCTA」の一本道になっている。 */ .tk-gate{display:grid;grid-template-columns:1fr;gap:16px;margin:0;padding:0;list-style:none;} .tk-gate>li{min-width:0;} .tk a.tk-gate-card{position:relative;display:block;background:#FFFFFF;border:1px solid #F0E4DB; text-decoration:none;color:#1A1A1A;overflow:hidden; transition:box-shadow .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1);} .tk a.tk-gate-card:hover{box-shadow:0 16px 36px rgba(254, 189, 140, .14);transform:translateY(-3px);} .tk-gate-card .tk-ph{margin:0;aspect-ratio:16/9;border:0;} .tk-gate-card .bd{display:block;padding:18px 20px 22px;} .tk-gate-card .en{display:block;margin:0 0 6px;font-size:12px;letter-spacing:.2em;font-weight:800;color:#8A4A17;} .tk-gate-card .ttl{display:block;margin:0 0 8px;font-size:19px;font-weight:800;line-height:1.5;} .tk-gate-card .txt{display:block;margin:0;font-size:15px;line-height:1.8;color:#8A4A17;} .tk-gate-card .arw{position:absolute;right:18px;bottom:20px;width:30px;height:1px;background:#FEBD8C; transition:transform .45s cubic-bezier(.22,.61,.36,1);transform-origin:left center;} .tk-gate-card .arw::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:1px;background:#FEBD8C; transform:rotate(-36deg);transform-origin:right center;} .tk a.tk-gate-card:hover .arw{transform:scaleX(1.25);} @media (prefers-reduced-motion:reduce){ .tk a.tk-gate-card,.tk-gate-card .arw{transition:none;} .tk a.tk-gate-card:hover{transform:none;} } @media (min-width:600px){.tk-gate{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}} @media (min-width:960px){.tk-gate--3{grid-template-columns:repeat(3,minmax(0,1fr));}} /* --- 下層は白地を主にする（トップは青面が72.6%と多いため）--- 濃紺は1ページに最大2回（主力の格上げ＋最終CTA）。3回以上で重くなる。 */ body.tk:not(.tk-top) .tk-sec--navy+.tk-sec--navy{border-top:1px solid #FEBD8C;} /* ============================================================ ★下層パーツの手直し（2026-09-02 ディレクター指摘） ============================================================ */ /* ① 2分割セクションの本文の上限（2026-09-02 に一度 none にしたが、戻した）。 none にすると箱が列いっぱいに広がり、**画面端から本文までの空きが padding の44pxだけ**になる。 上限を持たせておくと、外側の空きが自動的に版面のガターと揃う （実測 1920px: 本文の外側 444px ／ 版面 440px）。 */ @media (min-width:768px){ .tk-flag-in{max-width:560px;margin-left:auto;} .tk-voice-in{max-width:560px;} .tk-voice--rev .tk-voice-in{margin-left:auto;} } /* ② S06 六角＋短文 ── 「外から中まで、一社で」を**一本の線でつないだ連なり**にする。 3つを個別に置くと意味が伝わらず、単に図形が3つ並んでいるだけに見えていた。 線でつなぐと「外→内→通が一続き」であることが形になる。 */ .tk-hexrow{position:relative;} .tk-hexrow>li{position:relative;padding-top:0;} /* 中は英字ラベル＋番号だけ。日本語は下の見出しが持つ（同じ語を2回書かない）。 */ .tk-hexrow .hx{position:relative;z-index:1;width:118px;height:102px;margin-bottom:20px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; font-size:10px;letter-spacing:.16em;line-height:1.2;padding:0 8px;text-align:center;} .tk-hexrow .hx .no{display:block;margin:0;font-size:20px;letter-spacing:.02em;font-weight:800;line-height:1;} .tk-hexrow .ttl{font-size:19px;} @media (min-width:600px){ /* 六角形の中心どうしを結ぶ線。列の中央（六角の高さの半分）に通す */ .tk-hexrow::before{content:"";position:absolute;z-index:0;left:16%;right:16%;top:51px;height:2px; background:linear-gradient(90deg,rgba(254, 189, 140, 0) 0%,#EDD9C5 12%,#EDD9C5 88%,rgba(254, 189, 140, 0) 100%);} } @media (min-width:1080px){ .tk-hexrow .hx{width:136px;height:118px;font-size:16px;} .tk-hexrow::before{top:59px;} } @media (prefers-reduced-motion:no-preference){ html.js .tk-hexrow .hx{transition:transform .5s cubic-bezier(.22,.61,.36,1);} html.js .tk-reveal.is-in .tk-hexrow>li:nth-child(2) .hx{transform:translateY(-6px);} } /* ③ S13 回遊ゲート ── 文字が縁に近すぎたので余白を取る。 矢印は右下に固定なので、本文の下に矢印1本ぶんの逃げ（44px）を確保する。 */ .tk-gate-card .bd{display:block;padding:24px 24px 54px;} .tk-gate-card .ttl{margin:0 0 10px;} .tk-gate-card .arw{right:24px;bottom:26px;} @media (min-width:1080px){ .tk-gate-card .bd{padding:28px 28px 58px;} .tk-gate-card .arw{right:28px;bottom:28px;} } /* ④ S11 インタビュー ── 写真と本文が離れて、続きものに見えなかった。 列の比を写真側へ寄せ、本文側の内側パディングを詰めて距離を縮める。 */ @media (min-width:768px){ .tk-voice{grid-template-columns:1fr 1fr;} /* ★写真が列を使い切っていなかった（列702pxに対し560px）ため、右に140pxの空白が生まれ 本文とのつながりが切れていた。列いっぱいまで使わせる。 */ .tk-voice-media .tk-ph{width:100%;max-width:none;aspect-ratio:4/3;} .tk-voice-in{padding:0 44px 0 40px;} .tk-voice--rev .tk-voice-in{padding:0 40px 0 44px;} } /* ★全幅2分割の列に敷く写真は、列いっぱいまで使う。 `.tk-ph{max-width:560px}` は版面の中に置く写真向けの上限で、 列に敷く写真に効くと広い画面で右側に空白が残る（実測1920px: 列960pxに対し写真560px）。 */ .tk-intro-collage .tk-ph, .tk-flag-media .tk-ph, .tk-voice-media .tk-ph, .tk-split-media .tk-ph, .tk-pt-media .tk-photos, .tk-pt-media .tk-photos .tk-ph, .tk-pt-media>.tk-ph, .tk-sec--narrow .tk-ph, .tk-gate-card .tk-ph{max-width:none;} /* 列に敷く1枚は列いっぱいまで（上限だけ外すと幅が中身なりになる） */ .tk-pt-media>.tk-ph,.tk-sec--narrow .tk-ph{width:100%;} /* ============================================================ ★S00 下層ページのタイトル帯（2026-09-02 作り直し） 主題の写真があるページは写真を敷き（--photo）、無いページは淡い地（--plain）。 骨格と文字組みは共通なので、混在しても別のデザインには見えない。 ★旧版からの変更: 斜め帯（skew）→ 22.7°の直線／ゴースト英字を版面に収める／ 濃紺一色をやめる（下層は白地を主にする方針。濃紺の枠は本文側に残す） ============================================================ */ .tk-subfv{position:relative;overflow:hidden;padding:44px 20px 40px;background:#FCF1E9;color:#8A4A17;} .tk-subfv>.tk-wrap{position:relative;z-index:2;} .tk-subfv .en{margin:0 0 8px;font-size:13px;letter-spacing:.26em;font-weight:700;color:#8A4A17;} .tk-subfv h1{margin:0;font-size:28px;font-weight:800;line-height:1.4;color:#8A4A17;} .tk-subfv .tk-ghost{z-index:0;top:auto;bottom:-.22em;right:-.04em;color:#5C3216; font-size:clamp(56px,11vw,150px);} /* --- 写真を敷く版 --- */ .tk-subfv--photo{background:#FEBD8C;color:#4A2A12;} .tk-subfv-bg{position:absolute;inset:0;z-index:0;overflow:hidden;} .tk-subfv-bg img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 26%;display:block;filter:saturate(.9);} /* 文字が乗る左側だけ沈める。右（写真の主題側）は素通し */ .tk-subfv-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(254, 189, 140, .86) 0%,rgba(254, 189, 140, .72) 34%,rgba(254, 189, 140, .40) 62%,rgba(254, 189, 140, .24) 100%);} .tk-subfv--photo .en{color:#5C3216;} .tk-subfv--photo h1{color:#FFFFFF;} .tk-subfv--photo .tk-ghost{color:rgba(255,255,255,.14);} @media (min-width:768px){ .tk-subfv{padding:64px 20px 58px;} .tk-subfv h1{font-size:38px;} } @media (min-width:1080px){ .tk-subfv{padding:80px 20px 72px;} .tk-subfv h1{font-size:44px;} } /* --- 濃紺の面に置く白ボタン（2026-09-02 ディレクター指摘）--- hover で濃紺に塗り替わり、地色と同化して境界が見えなくなっていた。 ①白の枠線を常時出す ②塗り替わる色を地色より明るい青にする、の2点で解決する。 ★枠線のぶんパディングを引いて、hover 前後で箱の寸法を変えない（lint L009）。 */ .tk a.tk-btn--w{border:2px solid #FFFFFF;padding:12px 34px; transition:color .45s cubic-bezier(.22,.61,.36,1),background-color .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1), border-color .45s cubic-bezier(.22,.61,.36,1);} .tk a.tk-btn--w::before{background:#FEBD8C;} .tk a.tk-btn--w:hover{color:#FFFFFF;border-color:#FFFFFF;} /* 影も濃紺の上では見えないので、白い縁の広がりで浮きを表す */ .tk a.tk-btn--w:hover{box-shadow:0 0 0 4px rgba(255,255,255,.18),0 14px 30px rgba(254, 189, 140, .45);} @media (prefers-reduced-motion:reduce){.tk a.tk-btn--w{transition:none;}.tk a.tk-btn--w:hover{box-shadow:0 0 0 4px rgba(255,255,255,.18);}} /* CTA帯の電話番号も、面の上で押せることが分かるように下線の当たりを付ける */ .tk-sec--cta a[href^="tel:"]{text-decoration:underline;text-underline-offset:5px; text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.45); transition:text-decoration-color .45s cubic-bezier(.22,.61,.36,1);} .tk-sec--cta a[href^="tel:"]:hover{text-decoration-color:#FFFFFF;} @media (prefers-reduced-motion:reduce){.tk-sec--cta a[href^="tel:"]{transition:none;}} /* --- S00-C タイトル帯（写真あり・白い印象）--- 骨格は --photo と同じ。かぶせる膜を紺から白へ反転し、文字を紺にする。 下層は白地を主にする方針なので、この版なら入口から本文まで地色が続く。 */ .tk-subfv--light{background:#FCF1E9;color:#8A4A17;} /* ★かぶせる膜を「純白」から「ごく淡い青みの白」へ。純白の膜は乳白色に見えてくすむ。 */ .tk-subfv--light .tk-subfv-bg::after{ background:linear-gradient(100deg,rgba(254, 244, 237, .94) 0%,rgba(254, 244, 237, .86) 32%,rgba(254, 246, 240, .60) 60%,rgba(254, 247, 242, .34) 100%);} /* ★青のスクリーン。暗部だけを青側へ持ち上げるので、白を足すより明るくなるのに眠くならない＝抜け感。 膜（::after）より下・写真より上に置くため ::before を使う（後ろに書いた ::after が上に乗る）。 合成の相手は .tk-subfv-bg の中だけ（position+z-index で重ね合わせの文脈が閉じている）。 */ .tk-subfv--light .tk-subfv-bg::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:screen; background:linear-gradient(100deg,rgba(254, 189, 140, .44) 0%,rgba(253, 210, 176, .30) 44%,rgba(253, 210, 176, .16) 100%);} /* 膜に沈む前に写真自身の締まりを少し戻す（コントラストを上げないと screen で眠くなる） */ .tk-subfv--light .tk-subfv-bg img{filter:saturate(1.02) contrast(1.08);} .tk-subfv--light .tk-subfv-bg::after{z-index:2;} .tk-subfv--light .en{color:#8A4A17;} .tk-subfv--light h1{color:#8A4A17;} .tk-subfv--light .tk-ghost{color:rgba(138, 74, 23, .10);} /* --- S10 縦タイムライン：右に写真を断ち落とす（2026-09-02 ディレクター案）--- ★このセクションだけ本文が版面いっぱいまで伸びないのは意図的で、理由は「右半分を写真が使う」から。 写真が無い幅（〜1079px）では帯を出さないので、本文は通常どおり全幅に戻る。 */ .tk-sec--tlphoto{position:relative;overflow:hidden;} .tk-sec--tlphoto>.tk-wrap{position:relative;z-index:1;} .tk-tl-bg{position:absolute;z-index:0;top:0;bottom:0;right:0;width:min(40%,760px);pointer-events:none;display:none;} .tk-tl-bg img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:58% 46%;display:block;} /* ★2026-09-02 ディレクター指摘: 写真がグラデーションで消えていく表現がサイトのトーンに合わない。 ぼかして地色へ溶かすのをやめ、**まっすぐな境界**で切る。 写真は素のまま出し、面としての結びつきだけ、ごく薄い青みで作る。 */ .tk-tl-bg::after{content:"";position:absolute;inset:0;background:rgba(254, 189, 140, .05);} /* 1080px 台で出すと写真の帯が本文の列に噛むので、1200px から出す */ @media (min-width:1200px){ .tk-tl-bg{display:block;} /* ★右半分は背景写真。**器の直下すべて**を写真の手前で止める。 見出しとタイムラインだけを絞っていたため、その後ろに続く小見出し・本文が 写真の上まで伸びていた（実測 2026-09-03: 写真の左端864pxに対し右端1240px＝376pxはみ出し）。 */ .tk-sec--tlphoto .tk-wrap.tk-inner>*{max-width:600px;} } /* 時刻を左カラムへ出す。上下に積むと1段ごとに1行ぶん間延びし、列が細く見える。 ★軸（線と丸）は絶対配置なのでグリッドの項目にならない。左カラム66px＋隙間26pxの ちょうど真ん中（79.5px）へ置き直す。 */ @media (min-width:768px){ .tk-tl>li{display:grid;grid-template-columns:66px 1fr;column-gap:40px;padding:0 0 34px;} .tk-tl>li>*{grid-column:2;} .tk-tl>li>.lb{grid-column:1;grid-row:1;margin:0;padding-top:5px;text-align:right; line-height:1.55;font-variant-numeric:tabular-nums;} .tk-tl>li>.ttl{grid-row:1;} .tk-tl>li:last-child{padding-bottom:0;} .tk-tl>li::before{left:79px;} .tk-tl>li::after{left:70px;} } /* --- S08 定義リスト表：スマホは項目名／項目内容を上下に積む（2026-09-02 ディレクター指摘）--- */ @media (max-width:767px){ .tk-tbl,.tk-tbl>tbody,.tk-tbl>tbody>tr, .tk-tbl>tbody>tr>th,.tk-tbl>tbody>tr>td{display:block;width:auto;} /* 罫線は行へ。セルに残すと積んだ境目が二重線になる */ .tk-tbl>tbody>tr{border:1px solid #F0E4DB;} .tk-tbl>tbody>tr+tr{border-top:0;} .tk-tbl>tbody>tr>th,.tk-tbl>tbody>tr>td{border:0;} .tk-tbl>tbody>tr>th{padding:12px 16px 0;background:transparent; font-size:13px;font-weight:800;letter-spacing:.08em;color:#8A4A17;} /* 地名や固有名詞が途中で折れないように、日本語の文節で改行する（未対応環境では従来どおり） */ .tk-tbl>tbody>tr>td{padding:3px 16px 13px;font-size:16px;word-break:auto-phrase;} /* 数値を列で見比べる表は積まない（積むと比較できなくなる） */ .tk-tbl--grid,.tk-tbl--grid>tbody,.tk-tbl--grid>tbody>tr{display:revert;} .tk-tbl--grid>tbody>tr>th,.tk-tbl--grid>tbody>tr>td{display:table-cell; border:1px solid #F0E4DB;padding:15px 16px;font-size:15px;} .tk-tbl--grid>tbody>tr>th{width:34%;background:#F7FAFE;color:inherit;letter-spacing:normal;} .tk-tbl--grid>tbody>tr{border:0;} } /* 住所・電話・許可番号など「途中で折れると読み違える塊」。 ★文節での折り返し（word-break:auto-phrase）は Chrome 系にしか無いため、 どの環境でも同じ結果にしたい箇所はこのクラスで明示的に固める。 ★固めた塊が器より長い場合だけは折り返しを許す（横スクロールを出さない）。 */ .tk-nb{white-space:nowrap;} @media (max-width:360px){.tk-nb{white-space:normal;}} /* --- 下層展開の小物（2026-09-02）--- */ /* 番号つき理由ブロックを写真なしで使う。2列のままだと本文が半分の幅で止まる。 短い節を3つ続けるので、写真ありのときの大きな段間（最大120px）も詰める。 */ .tk-pt--nomedia{display:block;margin:0 0 clamp(32px,4.5vw,52px);} .tk-pt--nomedia:last-of-type{margin-bottom:0;} .tk-pt--nomedia .tk-pt-text{max-width:none;} .tk-pt--nomedia .tk-h3{margin:0 0 10px;} .tk-pt--nomedia p{margin:0;} @media (min-width:768px){.tk-pt--nomedia{display:block;}} @media (min-width:1080px){.tk-pt--nomedia{display:block;margin:0 0 clamp(32px,4.5vw,52px);}} .tk-sign{margin:24px 0 0;font-weight:800;} /* 節の頭に敷く全幅の1枚。人物や作業の位置が上寄りなので上を残して切る */ .tk-ph--band{margin:0 0 clamp(28px,5vw,44px);aspect-ratio:16/7;} .tk-ph--band img{object-position:50% 34%;} /* タイムラインや罫線リストの後に続く地の文。軸から離して段落として読ませる */ .tk-tl-after{margin:clamp(24px,4vw,36px) 0 0;} h3.tk-tl-after{margin-bottom:10px;} /* 回収待ちの枠（インタビュー等）。破線で「まだ入っていない」ことを形でも示す */ .tk-todo{border:2px dashed #FEBD8C;padding:30px 22px;} /* 数字バンドの淡い版（2026-09-02）。 ★濃紺は1ページ最大2回（主力の格上げ帯と最終CTA）と決めたので、 採用ページのように格上げ帯を持つページでは数字バンドを淡へ落とす。 ★区切り線と補足文字だけ色を差し替える。組み（列数・文字寸法）は濃紺版と同じ。 */ .tk-nums-light .tk-nums div,.tk-nums-light .tk-nums--row div{border-color:#F3D8C3;} .tk-nums-light .tk-nums .n{color:#8A4A17;} .tk-nums-light .tk-nums .l{color:#8A4A17;} .tk-nums-light .tk-eyebrow{color:#8A4A17;} /* 六角の列で見出しを h3 にしたときに、素の h3 の余白が出ないようにする */ .tk-hexrow h3.ttl{font-size:18px;} /* ============================================================ 下層ヘッダーを透過にして、タイトル帯を画面の上端まで伸ばす（2026-09-02 ディレクター指示） ------------------------------------------------------------ トップと同じ見え方にそろえる。違いは文字色で、下層の帯は白い印象なので **文字は反転させない**（トップは濃紺の写真なので白へ反転している）。 ============================================================ */ body.tk-sub-hero .tk-hdr{position:fixed;left:0;right:0;top:0;} body.tk-sub-hero .tk-hdr:not(.is-stuck){background:transparent;border-bottom:0;box-shadow:none;} /* メニューを開いたら白地に戻す（透過のままだと項目が写真の上に重なる） */ body.tk-sub-hero .tk-hdr.is-open{background:#FFFFFF;box-shadow:0 6px 22px rgba(254, 189, 140, .12);} /* ヘッダーが flow から抜けたぶん、帯の上を空ける（実測のヘッダー高） */ body.tk-sub-hero .tk-subfv{padding-top:calc(69px + 44px);} @media (min-width:768px){body.tk-sub-hero .tk-subfv{padding-top:calc(69px + 64px);}} @media (min-width:1080px){body.tk-sub-hero .tk-subfv{padding-top:calc(140px + 80px);}} /* 帯の上端だけ白を足して、ナビが写真の濃い部分に乗らないようにする。 ★横方向の膜（左を白く・右へ抜ける）はそのまま。上に1枚重ねるだけ。 */ body.tk-sub-hero .tk-subfv--light .tk-subfv-bg::after{ background: linear-gradient(180deg,rgba(255, 250, 246, .94) 0,rgba(255, 250, 246, .72) 96px,rgba(255, 250, 246, 0) 190px), linear-gradient(100deg,rgba(254, 244, 237, .94) 0%,rgba(254, 244, 237, .86) 32%,rgba(254, 246, 240, .60) 60%,rgba(254, 247, 242, .34) 100%);} /* 本文へのスキップ先が固定ヘッダーの下に隠れないようにする */ body.tk-sub-hero #main{scroll-margin-top:150px;} /* --- 回遊ゲート：カードの高さを一番高いものにそろえる（2026-09-02 ディレクター指示）--- ★グリッドの升目は同じ高さでも、中の ＜a＞ が中身ぶんの高さで止まっていた。 升目いっぱいに伸ばし、余った高さは本文側（.bd）が吸う。写真は比率固定のまま。 */ .tk-gate>li{display:flex;} .tk a.tk-gate-card{display:flex;flex-direction:column;width:100%;} .tk-gate-card .tk-ph{flex:0 0 auto;} .tk-gate-card .bd{flex:1 1 auto;} /* --- ナビと電話番号を分ける縦の罫線（2026-09-02 ディレクター指摘）--- 基本の色は rgba(255,255,255,.35)＝**トップの重ねヘッダー（白文字）に合わせた白**。 下層の重ねヘッダーは文字が黒／紺なので、白い罫線だけが浮いて見えていた。 ★縦の罫線も文字と同じ側の色へそろえる。濃さはトップと同じ35%で、線の強さを合わせる。 */ @media (min-width:1080px){ body.tk-sub-hero .tk-hdr:not(.is-stuck) .tk-nav-tel{border-left-color:rgba(26,26,26,.35);} } /* --- ヘッダー右側の天地の中心をそろえる（2026-09-02 ディレクター指摘）--- ★原因: ナビの各リンクが inline-block で、親の行の**ベースラインにぶら下がっていた**。 行送りの下に落ちるぶんだけ箱が上へずれ、実測で ・お問い合わせの青ボタン … 他より 4.3px 上 ・親メニュー（業務案内・採用情報）… 他より 1.2px 下（白帯時） 箱の中心（li）は揃っているので、崩れて見えるのは**中身の位置**のほう。 ★対処: 各項目を flex にして、ベースラインではなく中心でそろえる。 電話だけは grid で組んであるのでそのまま（中身の縦位置は別途調整済み）。 */ @media (min-width:1080px){ .tk-navlist>li{display:flex;align-items:center;} .tk-navlist>li:not(.tk-nav-tel)>a{display:flex!important;align-items:center;} } /* 意図した位置での改行（2026-09-02 ディレクター指定）。 ★狭い幅では効かせない。指定した行の最長が約464pxあり、 器がそれを下回ると**意図しない場所で二重に折り返す**ため。 768px 未満では素直に自動の折り返しへ戻す。 */ .tk-br{display:none;} @media (min-width:768px){.tk-br{display:inline;}} /* 下層の地の文は読み幅78%で止めているが、 節によっては版面いっぱいに置きたい（2026-09-02 ディレクター指定）。 その節の段落にだけ .tk-wide を付けて外す。 */ body.tk:not(.tk-top) .tk-inner>p.tk-wide{max-width:none;} /* ============================================================ 下層の写真の幅を4種類に絞る（2026-09-02 ディレクター指摘 「画像幅が中途半端／それを補うデザインになっていない」） ------------------------------------------------------------ 実測（1440px・版面1040px）で **11種類** の幅が混在していた。 うち最多が 560px（版面の54%）の14枚で、右に480pxの空白を作っていた。 原因は `.tk-ph{max-width:560px}` ＝版面の中に置く写真向けの上限が、 **本文の列に単独で置いた写真にも効いていた**こと。 これからは次の4種類だけにする: ① 帯 … 版面いっぱい（本文の列に単独で置く写真は全部これ） ② 対 … 62% + 38% の大小重ね（.tk-photos / .tk-intro-collage） ③ 列 … 2列 49% ／ 3列 32%（カード・ゲート） ④ 断ち … 版面の外まで（.tk-flag / .tk-voice / .tk-tl-bg / タイトル帯） ============================================================ */ @media (min-width:768px){ body.tk:not(.tk-top) .tk-inner>.tk-ph{max-width:none;width:100%;margin-left:0;margin-right:0;} body.tk:not(.tk-top) .tk-inner>.tk-ph.has-img{aspect-ratio:16/7;} body.tk:not(.tk-top) .tk-inner>.tk-ph.has-img img{object-position:50% 34%;} } /* 濃紺の面に置く見出しの強調語が、そのまま濃紺のままだった（2026-09-02 ディレクター指摘）。 `.tk-h2 .b{color:#8A4A17}` は白地の上での指定。濃紺の上では地色と同化して読めない。 */ .tk-sec--navy .tk-h2 .b, .tk-flag .tk-h2 .b{color:#5C3216;} /* --- S15 収入の階段（2026-09-02 新設）--- 右上がりの棒で「経験に応じて上がる」を形にする。 ★棒の中に金額を入れているのは、下を切った棒だけで金額を推測させないため。 ★狭い幅では縦の棒が潰れるので、横棒（右へ伸びる帯）に切り替える。 */ .tk-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px;} .tk-steps-note{margin:0 0 22px;font-size:14px;color:#8A4A17;} /* 棒の高さは各項目のインライン指定（--h）で決めるが、CSS側にも既定値を置く。 ここが無いと、インライン指定が落ちたときに高さが初期値へ戻る（検査でも未定義扱いになる）。 */ .tk-steps>li{--h:38%;} .tk-steps .col{display:flex;flex-direction:column;justify-content:flex-end;} .tk-steps .bar{display:flex;background:linear-gradient(180deg,#FDD2B0 0%,#FEBD8C 100%);} .tk-steps .v{display:block;font-weight:800;color:#FFFFFF;letter-spacing:.02em; font-variant-numeric:tabular-nums;white-space:nowrap;} .tk-steps .lb{display:block;margin:12px 0 3px;font-size:14px;font-weight:800;line-height:1.55;} .tk-steps .mg{display:block;font-size:13px;color:#8A4A17;font-variant-numeric:tabular-nums;} .tk-steps .is-top .bar{background:linear-gradient(180deg,#FDD2B0 0%,#FEBD8C 100%); box-shadow:0 16px 34px rgba(254, 189, 140, .26);} .tk-steps .is-top .lb{color:#8A4A17;} /* 狭い幅：右へ伸びる横棒 */ @media (max-width:767px){ .tk-steps .bar{width:var(--h);min-width:46%;height:46px;align-items:center;padding:0 14px;} .tk-steps .v{font-size:17px;} } /* 768px以上：右上がりの縦棒 */ @media (min-width:768px){ .tk-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.4vw,18px);align-items:end;} .tk-steps>li{text-align:center;} .tk-steps .col{height:clamp(200px,25vw,320px);} .tk-steps .bar{height:var(--h);align-items:flex-start;justify-content:center;padding:12px 4px 0;} .tk-steps .v{font-size:clamp(14px,1.5vw,19px);} .tk-steps .lb{font-size:clamp(12px,1.15vw,15px);} .tk-steps .mg{font-size:clamp(11px,1vw,13px);} } @media (prefers-reduced-motion:no-preference){ .tk-reveal .tk-steps .bar{transform-origin:bottom center;transition:transform .9s cubic-bezier(.22,.61,.36,1);} .tk-reveal:not(.is-in) .tk-steps .bar{transform:scaleY(.06);} } @media (max-width:767px){ .tk-reveal .tk-steps .bar{transform-origin:left center;} .tk-reveal:not(.is-in) .tk-steps .bar{transform:scaleX(.06);} } /* --- 横並びカードのボタンを同じ高さからそろえる（2026-09-02 ディレクター指摘）--- ★升目の高さは揃っていたが、中のカードが中身なりの高さで止まり、 本文の長さの差（実測30px）がそのままボタンの位置の差になっていた。 カードを縦のフレックスにして、最後の段（ボタン）だけ下端へ寄せる。 */ .tk-grid2>.tk-card,.tk-grid3>.tk-card{display:flex;flex-direction:column;} /* ★ボタンの段は原稿由来の style="margin:0" を持っている（インラインはセレクタに勝つ）ので、 ここだけ強さを合わせる。余白の値そのものは触っていない。 */ .tk-grid2>.tk-card>p:last-child,.tk-grid3>.tk-card>p:last-child{margin-top:auto!important;} /* 意図した位置での改行（列が広い1080px以上でだけ効かせる）。 ★.tk-br は768px以上で効くが、六角の列は1080px未満だと221pxまで細くなり、 指定した区切りの中でさらに折り返して行数が増える。だから別のクラスにしている。 */ .tk-br--lg{display:none;} @media (min-width:1080px){.tk-br--lg{display:inline;}} /* --- 本文の列に単独で置く重ね（2026-09-02）--- .tk-photos の 640px 上限はトップの導入用。下層で本文の列に置くときは版面いっぱいに使う。 大 66% ＋ 小 46% で 12% ぶん重ねる（トップの重ね方と同じ考え方）。 */ @media (min-width:768px){ body.tk:not(.tk-top) .tk-inner>.tk-photos{max-width:none;margin:0 0 clamp(28px,5vw,44px);} body.tk:not(.tk-top) .tk-inner>.tk-photos>.tk-ph:not(.tk-ph--over){width:66%;aspect-ratio:16/10;} body.tk:not(.tk-top) .tk-inner>.tk-photos>.tk-ph--over{width:46%;margin:-10% 0 0 auto;aspect-ratio:4/3; box-shadow:0 22px 52px rgba(254, 189, 140, .18);} } /* --- 写真とテキストの量のつり合い（2026-09-02 ディレクター指摘）--- 実測（1440px）: 導入節の写真列 720x808 に対し、本文の文字の高さは 177〜268px。 写真が3〜4倍あって、少ない文章とつり合っていなかった。 ★大の縦横比を 7/8（縦長）から 4/3（横長）へ変え、小も一回り小さくする。 版面に接する断ち落としは残すので、組みの性格は変えていない。 */ @media (min-width:768px){ .tk-sec--intro .tk-intro-collage{padding-bottom:clamp(32px,5vw,58px);} .tk-sec--intro .tk-intro-collage .tk-ph--a{width:86%;aspect-ratio:4/3;} .tk-sec--intro .tk-intro-collage .tk-ph--b{width:50%;aspect-ratio:4/3;} /* 本文の列に置く重ねも同じ理由で一回り小さく */ body.tk:not(.tk-top) .tk-inner>.tk-photos>.tk-ph:not(.tk-ph--over){width:62%;aspect-ratio:16/10;} body.tk:not(.tk-top) .tk-inner>.tk-photos>.tk-ph--over{width:42%;margin:-8% 0 0 auto;} } /* --- 日本語の折り返しを文節で切る（2026-09-02 ディレクター指摘）--- 既定の日本語の折り返しは「どの文字の間でも切ってよい」ため、 「コンクリート／柱は、」「石が出てく／る現場も」のように**語の途中で折れて** 右端が不規則に見えていた（器の幅は2枚のカードで完全に同じ＝組みの問題ではない）。 ★auto-phrase と pretty は未対応の環境では無視されるだけで、レイアウトは壊れない。 ★strict は禁則を厳しくする（かぎ括弧が行末に残る、小書き仮名が行頭に来る、を防ぐ）。 */ .tk main p,.tk main li,.tk main dd,.tk main td,.tk main th, .tk main h1,.tk main h2,.tk main h3,.tk main .ttl,.tk main .txt{line-break:strict;} /* ★2026-09-02: 文節での折り返し（auto-phrase）と行長の均し（balance）は取りやめた。 均しは**わざと全行を短くして長さをそろえる**指定で、器の右端まで文字が届かなくなり、 「行ごとにテキスト領域の幅が違う／途中で折り返している」ように見える（ディレクター指摘）。 本文は既定どおり器の幅いっぱいまで伸ばし、最終行の極端な短さだけ pretty で抑える。 */ .tk-card p,.tk-card li, .tk-gate-card .txt,.tk-gate-card .ttl, .tk-hexrow .txt,.tk-hexrow .ttl, .tk-tl p,.tk-tl .ttl, .tk-plain p,.tk-plain .ttl, .tk-check li,.tk-badges>li, .tk-steps .lb,.tk-voice-q,.tk-voice-a{text-wrap:pretty;} /* ★ボタンの文字は均さない。均すと「ネットワーク構築工事の／詳細」のように 2文字だけが次行へ落ちる（実測 2026-09-02・機械ゲート #14 行末孤立）。 */ .tk a.tk-btn,.tk a.tk-arrow,.tk-gate-card .en{text-wrap:wrap;} /* 地の文は最終行のぶら下がりだけ避ける */ .tk-inner>p,.tk-intro-lead{text-wrap:pretty;} /* カード内のボタンは狭い幅で文字が横にはみ、最後の2文字だけが次行へ落ちていた （実測 2026-09-02: 768px で 親306px に対しボタン306px・3行、375px で 289px に対し3行）。 狭い幅ではカードの幅いっぱいに敷いて、左右の余白を詰める＝1行に収める。 */ @media (max-width:900px){ .tk-grid2 .tk-card .tk-btn{ display:block;width:100%;text-align:center;padding-left:10px;padding-right:10px;} } /* 320px 級では全幅にしてもまだ入らない（13文字）。字間を詰めて1行に収める。 */ @media (max-width:360px){ .tk-grid2 .tk-card .tk-btn{letter-spacing:0;font-size:15px;} } /* --- 主力の格上げ帯の高さ（2026-09-02 ディレクター指摘「1ビューに収まらない」）--- 写真が正方形で、列の幅がそのまま節の高さになっていた（実測 1920px で 960px）。 本文は436pxしか無いので、高さを決めているのは写真だけ。4:3 にして列幅の75%に抑える。 */ @media (min-width:768px){ .tk-flag-media .tk-ph{aspect-ratio:4/3;} } /* --- 年収モデル：棒は上ぞろえにする（2026-09-02 ディレクター指摘）--- 下ぞろえだと、ラベルが2行ある右端の升目だけ背が高くなり、 棒が23px持ち上がって下端がそろわなかった（実測 343/343/343/343/320）。 棒の入る箱は高さが決まっているので、上でそろえれば棒の下端も自動的にそろう。 */ @media (min-width:768px){ .tk-steps{align-items:start;} } /* 375px で「細かく管理されるより、任されたい方」が **2pxだけ足りずに** 折り返し、 「い方」の2文字が次行へ落ちていた（実測: 必要272px / 器270px・機械ゲート #14 行末孤立）。 カードの左右パディングと箇条書きの字下げを少し詰めて1行に収める。 */ @media (max-width:400px){ .tk-card{padding-left:16px;padding-right:16px;} .tk-card ul{padding-left:1.05em!important;} } /* ============================================================ ★仕上げ第1弾（2026-09-03 ディレクター「調整が十分ではない」） ============================================================ */ /* A 左右2分割は中央ぞろえ。上ぞろえだと短い側の下だけが大きく空く （実測 1440px: 差127〜182px）。空きを上下へ分けて釣り合わせる。 */ @media (min-width:768px){ .tk-sec--intro,.tk-voice{align-items:center;} } /* B 巨大ゴースト英字を版面の右端で止める。 right:-8px は 208px の文字に対して8pxだけ画面外＝「切れ損ない」に見えていた。 版面（1080px）の右端にそろえると、はみ出しではなく**置いた**ように読める。 */ @media (min-width:1080px){ .tk-ghost{right:max(20px,calc((100vw - 1080px)/2 + 20px));} .tk-sec--split .tk-ghost{right:max(20px,calc((100vw - 1080px)/2 + 20px));} } /* C 二次導線を枠線ボタンにする。地色に白文字のテキストだけでは、 隣の白ボタンに対して押せるものだと読めない。 */ .tk-sec--cta .tk-inner>p:last-child>a:not(.tk-btn){ padding:12px 28px!important;border:2px solid rgba(255,255,255,.55); transition:border-color .2s ease,background-color .2s ease;} .tk-sec--cta .tk-inner>p:last-child>a:not(.tk-btn):hover{border-color:#FFFFFF;background:rgba(255,255,255,.12);} @media (prefers-reduced-motion:reduce){.tk-sec--cta .tk-inner>p:last-child>a:not(.tk-btn){transition:none;}} /* D 表の格を上げる（2026-09-03）。 情報量が最多のブロックが、地色ほぼ白・本文列は地色なし・15px で最も弱く見えていた。 */ @media (min-width:768px){ .tk-tbl{border-top:2px solid #FEBD8C;border-bottom:2px solid #F0E4DB;} .tk-tbl>tbody>tr>th{background:#FCF1E9;} .tk-tbl>tbody>tr>td{font-size:16px;} } /* ============================================================ ★仕上げ第2弾（2026-09-03 ディレクター「1〜4をすべて対応して」） ============================================================ */ /* ② 「こんな方に来てほしい」── 幅いっぱいの写真と、その下のカード2枚が無関係に並んでいた。 カードを写真の下端へ重ねて、ひとつの塊として読ませる。 ★この隣接（版面直下の写真 → すぐ2列カード）はサイト全体で1箇所だけなので、 隣接セレクタで狙い撃ちしてよい（実測 2026-09-03・全12ページ走査）。 */ @media (min-width:768px){ .tk-inner>.tk-ph.has-img+.tk-grid2{ position:relative;z-index:2;margin-top:-72px;width:calc(100% - 72px);margin-left:auto;margin-right:auto;} .tk-inner>.tk-ph.has-img+.tk-grid2>.tk-card{box-shadow:0 24px 54px rgba(254, 189, 140, .20);} } /* ③ 選考の流れ ── 右半分を写真が上から下まで占めるのに対し、 左のタイムラインが 19px の見出し＋小さな説明で軽く、釣り合っていなかった （実測 1440px: 節681px に対し本文457px・項目間38px）。 写真を小さくするのではなく**文字の格を上げて**釣り合わせる。 */ @media (min-width:768px){ /* ★最後の項目には足さない（既定の :last-child{padding-bottom:0} を詳細度で上書きしてしまい、 タイムラインの下に52pxの死んだ余白ができる。実測 2026-09-03） */ .tk-sec--tlphoto .tk-tl>li:not(:last-child){padding-bottom:52px;} .tk-sec--tlphoto .tk-tl .lb{font-size:14px;} .tk-sec--tlphoto .tk-tl .ttl{font-size:23px;margin-bottom:10px;} .tk-sec--tlphoto .tk-tl p{font-size:16px;} } /* ④ ページのリズム ── ほぼ全節が上下112pxで、章の切れ目が読めなかった （実測 採用ページ10節中8節が112/112・変化は数字帯92と最終CTA132だけ）。 **同じ地色が続くところは詰めてひと続きに読ませ、地色が変わるところで開ける。** */ @media (min-width:768px){ /* 同じ地色が続く＝話が続いている → 詰める */ .tk-sec--tint+.tk-sec--tint{padding-top:72px;} /* ★全幅の帯（.tk-flag / .tk-voice）は写真が上端に接するのが作りなので、上の余白を足さない。 足すと帯の上に白い隙間ができてブリードが崩れる（実測 2026-09-03: 72pxの隙間が出た）。 */ .tk-sec:not([class*="--tint"]):not([class*="--navy"]):not(.tk-sec--cta) +.tk-sec:not([class*="--tint"]):not([class*="--navy"]):not(.tk-sec--cta):not(.tk-flag):not(.tk-voice){padding-top:72px;} /* 地色が変わる＝章が変わる → 開ける */ .tk-sec--tint+.tk-sec:not([class*="--tint"]):not([class*="--navy"]):not(.tk-flag):not(.tk-voice), .tk-sec:not([class*="--tint"]):not([class*="--navy"])+.tk-sec--tint:not(.tk-flag):not(.tk-voice), .tk-flag+.tk-sec,.tk-voice+.tk-sec{padding-top:132px;} } /* A 縦積みの年収モデル ── 項目どうしの切れ目を作る。 実測 2026-09-03: 項目間が14pxしかなく、項目の中の間隔と区別が付かなかった。 月給（項目の末尾）の下を広く取って、次の年収から新しい括りだと分かるようにする。 */ @media (max-width:767px){ .tk-steps{row-gap:40px;} .tk-steps>li{padding-bottom:0;} .tk-steps .mg{margin-bottom:0;} } /* B 縦積みのCTAボタン ── 2つの幅をそろえる。 実測 2026-09-03: 応募する144px / お問い合わせ156px（12px違い）。 768px以上は横並びなので触らず、縦積みになる767px以下だけ器の幅いっぱいにそろえる。 */ @media (max-width:767px){ .tk-sec--cta .tk-inner>p>a.tk-btn, .tk-sec--cta .tk-inner>p:last-child>a:not(.tk-btn){ display:flex!important;align-items:center;justify-content:center;text-align:center; width:100%;box-sizing:border-box;max-width:420px;margin-left:auto;margin-right:auto;} } /* ★導入の2列組みは900pxから（2026-09-03 ディレクター指摘「文字ボックスがコンテンツの途中で折り返す」）。 768pxで2列にすると文字列が384pxしか無く、36pxの見出しが「電柱を立て／る仕事です」と **語の途中で割れる**（実測: 880px付近から割れ始める）。 768〜899px は1列に戻す＝写真の下に文字が来る組み。文字列が器の幅いっぱいまで使える。 全ページの導入セクション（現場スタッフ募集・採用情報・会社概要ほか）に同時に効く。 */ @media (min-width:768px) and (max-width:899px){ .tk-sec--intro{display:flex;flex-direction:column;} .tk-sec--intro>.tk-intro-media{order:-1;margin:0 0 clamp(28px,6vw,44px);} .tk-sec--intro>.tk-intro-body{order:0;padding:0 20px;} /* 1列に戻すと器が728〜820pxになり1行45〜51字と長すぎるので、読み幅で上限を置いて中央に据える */ .tk-intro-copy{max-width:640px;padding:0;margin-left:auto;margin-right:auto;} /* ★重なりすぎの調整（2026-09-03 ディレクター指摘）。 88%/62% では小さい方が大きい方の36%を覆っていた（前後の幅は16〜27%）。 */ .tk-sec--intro .tk-intro-collage .tk-ph--a{width:92%;aspect-ratio:4/3;} .tk-sec--intro .tk-intro-collage .tk-ph--b{width:52%;aspect-ratio:4/3;} /* ★白札の位置も1列用に戻す。PC用の position:absolute + 負の right を残していたため、 768〜899px で「×任せる」が画面外へ23〜26px出て切れていた（実測 2026-09-03）。 */ .tk-sec--intro .tk-intro-catch{position:static;margin:0 0 clamp(20px,3vw,32px);} } /* フッターのリンクが2段組みのため、375px では1列が113pxしか無く、 「ネットワーク構築工事」「訪問介護事業のご案内」（10文字）が2行に割れて 行末に2文字だけ残っていた（実測 2026-09-03・機械ゲート #14 行末孤立）。 ★フッターの段組みは狭い幅で1列に落とす＝10文字でも1行に収まる。 */ @media (max-width:400px){ .tk-ftr .tk-ftr-nav>ul{column-count:1;} } /* ★追従ボタンは版面に食い込ませない（2026-09-03）。 実測: 1440px でボタン x=1220〜1416 に対し版面の右端は1240＝20px重なる。 施工実績ページでは投稿テンプレートの表がボタンに隠れていた（13ページ中10ページで重なり）。 版面の外（ガター）に収まる幅まで詰め、収まらない幅ではボタン自体を一回り小さくする。 */ @media (min-width:768px){ /* ボタン幅は min-width:196px で固定なので、幅ではなく位置で逃がす。 ガター（(100vw-1080)/2）から ボタン196px と余白4px を引いた値まで右へ寄せる。 1920px→220px（版面のすぐ外に整列）／1600px→60px／1440px→4px（版面の右端に接する）。 */ /* ★上限48px（2026-09-03）。上限が無いと1920pxで right:220px＝画面端から遠く離れて 宙に浮いて見える（ディレクター指摘）。1440px=4px（版面の右端に接する）／1600px以上=48px。 */ .tk-float{right:clamp(4px,calc((100vw - 1080px)/2 - 200px),48px);} } /* ★追従ボタンがフッターの紺に溶ける（2026-09-03）。 ボタンの地色 #A36326 はフッターと同じ紺で、影も紺系のため、 ページが短くボタンがフッターに重なる位置（プライバシーポリシー等）で**輪郭が消える**。 細い明るい輪郭を足して、どの面の上でもボタンだとわかるようにする。 */ .tk-float a.tk-float-btn{box-shadow:0 16px 38px rgba(254, 189, 140, .26),0 0 0 1px rgba(241, 222, 203, .55);} /* ★プライバシーポリシー本文（2026-09-03）。 クラス名は共通テンプレート＝CueZillaパーツと同じ。skin/cuezilla-skin.css §10 と同じ組みを この案件の色で当てる（実機では skin 側が当たるので、ここは草案プレビュー用の受け皿）。 */ /* 読み幅は版面（.tk-sec--narrow ＝760px）が決める。ここで絶対値の上限を持つと、 版面1080pxに対してインクが67%になり充填率NGになる（実測 2026-09-03）。 */ .tk .privacy{max-width:none;margin:0;} .tk .privacy__subtitle{font-size:20px;font-weight:800;color:#8A4A17;letter-spacing:.04em;margin:0 0 20px;} .tk .privacy__lead{margin:0 0 40px;color:#8A4A17;} .tk .privacy-item{margin:0 0 32px;} .tk .privacy-item__title{font-size:17px;font-weight:800;color:#8A4A17; border-left:3px solid #FEBD8C;padding-left:12px;margin:0 0 12px;line-height:1.6;} .tk .privacy-item__body{margin:0 0 12px;} .tk .privacy-item__body:last-child{margin-bottom:0;} .tk .privacy-item__list{margin:0;padding-left:1.3em;} .tk .privacy-item__list>li{margin-bottom:8px;} .tk .privacy-item__list>li:last-child{margin-bottom:0;} @media (min-width:768px){ .tk .privacy__subtitle{font-size:23px;} .tk .privacy-item__title{font-size:18px;} } /* ★アンカー着地が固定ヘッダーの裏に潜らないようにする（WCAG 2.2 / 2.4.11・R-18）。 長いページができて初めて #main への飛び先がヘッダー下に隠れることが分かった（実測 2026-09-03: 1440pxで139px・375pxで68px潜る）。 */ :root{--tk-anchor:80px;} @media (min-width:768px){:root{--tk-anchor:150px;}} #main,[id]{scroll-margin-top:var(--tk-anchor);} /* ★この箇条書きだけは行長を均す（2026-09-03）。 プライバシーポリシーの本文は会社承認の定型文で**1文字も変えられない**。 狭い幅では「…調査・分析するため」の「ため」だけが次行に落ちる（機械ゲート #14 行末孤立3件）が、 器は375pxで約19字ぶんしかなく、24字の項目は文字を小さくしない限り必ず折れる。 ＝ここは文言でも幅でも解けないので、2行を均して行末の2文字を解消する。 ★本文の段落には掛けない（段落ごとに幅が違って見えるため・ディレクター指摘 2026-09-03）。 対象はこの定型リストの項目だけ。 */ /* ★2026-09-03 撤去: ここにも行長の均し（balance）を掛けていたが、 375pxで箱314pxに対し行が最大144px手前で折り返していた（実測10件）。 ディレクター指摘「デバイス幅に対してガターより狭い範囲で文字が折り返す」の残り10件はこれ。 均しをやめる＝行は器の右端まで伸びる。代わりに機械ゲート #14（行末孤立）が 375pxで3件出るが、**定型文で文言を変えられず、箱も19字ぶんしかない**ので構造的に避けられない。 「2文字が次行に落ちる」より「段落ごとに幅が違って見える」方を嫌う、というディレクター判断を優先する。 */ /* ★導入の本文の列を広げる（2026-09-03 ディレクター指摘「最初のセクションのテキスト幅が他より狭い」）。 実測 1440px: 最初460px に対し同じページの他の節は 600〜811px。 ①2列で列が画面の半分しかない ②さらに上限560pxを掛けていた（ガター合わせで入れたもの）の二重。 上限を外し、右端は版面（1240px）に合わせたまま、写真の列を細くして本文の列を広げる。 → 1440pxで本文460px → 約600px。**右端は動かないのでガターは崩れない。** */ @media (min-width:900px){ .tk-sec--intro{grid-template-columns:0.4fr 0.6fr;} .tk-intro-copy{max-width:none; padding-left:56px; padding-right:max(44px,calc((100vw - 1080px)/2 + 20px));} } /* ★地の文は版面いっぱいに流す。読み幅は文字の大きさで作る（2026-09-03）。 幅で削ると「箱が途中で終わる」に見える（上の撤去した指定がそれ）。 PC幅（版面1040px）で本文20px ＝ 1行52字。機械ゲート #5-4 の合否線55字の内側に収まる。 ★カード・グリッド・表の中は器の幅が既に狭いので触らない（16pxのまま）。 */ @media (min-width:1080px){ body.tk:not(.tk-top) .tk-inner>p, body.tk:not(.tk-top) .tk-inner>ul:not([class]), body.tk:not(.tk-top) .tk-inner>ol:not([class]){font-size:20px;line-height:1.95;} body.tk:not(.tk-top) .tk-sec--cta .tk-inner>p{font-size:17px;} } /* ★CueZillaパーツの置き場（.tk-czpart）── ブログ一覧・施工実績一覧・フォーム。 中身は CueZilla が実行時に描画するので**HTMLは納品物ではない**（R-29）。 ここは「実機と同じ資産で描いたときに、サイトの版面と揃うか」を見るための追補CSSで、 フローが案件側の仕事と定めている「③崩れ残りだけの追補CSS」に当たる。 実測 2026-09-03: パーツは画面幅いっぱい（0〜1440px）に敷かれ、サイトの版面（200〜1240px）と ずれていた。パーツ側の内側の器を版面にそろえ、上下の余白を他の節と同じ刻みにする。 */ .tk-czpart{padding:72px 0 112px;} /* ★幅は絞らない。1080pxに絞ったら本文列とサイドバーが重なった（実測 2026-09-03）。 パーツ内部の段組みは CueZilla 側のCSSが決めているので、器の幅には手を出さない。 ＝実機と同じ幅で出す（それが本当の見え方）。 */ @media (max-width:767px){.tk-czpart{padding:40px 0 80px;}} /* ★ブログ一覧が左に寄る（2026-09-03 ディレクター指摘）。 実測 1440px: .parts222_wrap は max-width:1180px を持つのに margin が 0/0 で、 左29px・右231px と左寄せになっていた（HTMLは mx-auto を付けているが、 テーマ側のCSSが margin を打ち消している）。同じ構造の施工実績 .parts228_wrap は margin:101px/101px で中央に来ている＝parts222 だけの崩れ。 ＝フローが案件側の仕事と定めている「③崩れ残りだけの追補CSS」に当たる。 */ .tk-czpart [class*="_wrap"]{margin-left:auto;margin-right:auto;} /* ★ページングの升目がそろっていない（2026-09-03 ディレクター指摘）。 実測 1440px: 「1」の右だけ margin-right:4px が付き、「2」と「3」は 0＝**間隔が 4px と 0px で不揃い**。 間隔0の隣どうしは 1px の枠線が重なって 2px の線に見える。升目も 51×52 ではなく **51×62** で縦長。 → 間隔を等しくし、升目を正方形にする。 ＝フローが案件側の仕事と定めている「③崩れ残りだけの追補CSS」。 */ .tk-czpart [class*="_pagenation"]{gap:8px;} .tk-czpart [class*="_pagenation"]>*{ margin:0!important;width:52px;height:52px;box-sizing:border-box; display:flex;align-items:center;justify-content:center;} /* ★ファイル添付の見た目をそろえる（2026-09-03 ディレクター指摘「お問い合わせの方が良い」）。 実測: お問い合わせ parts213 は ＜label class="label_file_upload"＞＜button＞ファイルを選択＜/button＞ ＋ 非表示の input という**自作UI**（skin §7 が地・枠・文字をトークンで整えている・343x62）。 応募フォーム parts219 は **素の ＜input type="file"＞** で、ブラウザ既定の見た目のまま（343x54）。 HTMLはCMSが描くので触れない。→ CSSだけで素のファイル欄を parts213 と同じ体裁に寄せる （::file-selector-button はブラウザ既定のボタン部分を直接組める）。 ★対象は class を持たない素の input だけ。parts213 の input は自作UIの裏に隠れているので触らない。 ＝フローが案件側の仕事と定めている「③崩れ残りだけの追補CSS」。 */ .tk-czpart input[type="file"]:not([class]):not(.tk-file-native){ display:block;width:100%;box-sizing:border-box;padding:12px 14px;cursor:pointer; background:var(--dyn-surface,#FDF5EF);color:var(--dyn-muted,#8A4A17); border:1px solid var(--dyn-border,#F0E4DB);border-radius:var(--dyn-radius,6px); font-size:15px;line-height:1.6;} .tk-czpart input[type="file"]:not([class])::file-selector-button{ margin:0 14px 0 0;padding:7px 18px;min-height:34px;cursor:pointer; background:var(--dyn-bg,#FFFFFF);color:var(--dyn-text,#1A1A1A); border:1px solid var(--dyn-border,#F0E4DB);border-radius:var(--dyn-radius,6px); font-family:inherit;font-size:15px;font-weight:700;} /* スクリプトが parts213 と同じ組み（.label_file_upload）を作ったら、素の input は視覚的に隠す。 ★JS無効の環境では .tk-file-native が付かない＝素の input が見えたまま使える（上の指定が当たる）。 */ .tk-czpart input[type="file"].tk-file-native{ position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;} /* ★体裁は skin に任せる（自前の指定を足すほど parts213 と差が出た。実測 2026-09-03）。 display:flex が中の button/span を block 化していたのが見た目の差の正体。 唯一そろわないのは theme_default の parts213 限定ルール .parts213_section_form .parts213_form_wrap dl dd .label_file_upload{padding:10px 14px} ＝parts219 側には無い。ここだけ明示して同じにする。 */ .tk-czpart .label_file_upload{padding:10px 14px;} /* ボタンの高さも parts213 限定ルール（height:40px）で、parts219 には無い。 実測 2026-09-03: inquiry 107x40 / recruit 107x24。ここも明示してそろえる。 */ .tk-czpart .label_file_upload button{height:40px;} /* ============================================================ ★ゴーストの規則（2026-09-03 ディレクター判断「常に外す」） ------------------------------------------------------------ これより前の .tk-ghost の指定は 4層に分かれて積み重なっており、 大きさ3種・色5種・右端の基準4種が混在していた（実測26個）。 ここで**最後に1か所へ集約**する。以後ゴーストを触るときはこのブロックだけを見る。 ①【重ねない】見出し（h1/h2）に重ねない。上へ逃がす。 ②【右端】版面の右端でそろえる（画面端からの半端なはみ出しをやめる）。 ③【大きさ】全幅の節＝大 ／ 2列の節＝中 の2段階だけ。 ④【色】地色ごとに1つ（白地・淡ティント地・紺地）。 ⑤【下層ヘッダー】置かない。英字ラベル（POLE WORK 等）と同じ語の重複で、 帯が浅いため上へ逃がすと帯から出てしまう。 ============================================================ */ /* ⑤ 下層ヘッダーには置かない */ .tk-subfv .tk-ghost{display:none;} /* ② 右端は版面にそろえる（版面1080px＋左右20pxの内側） */ .tk-ghost, .tk-sec--split .tk-ghost, .tk-ghost--tr{right:max(20px,calc((100vw - 1080px)/2 + 20px));} /* ① 見出しに重ねない ── 節の種類ごとに、実測した必要量＋余裕を上へ取る */ @media (min-width:1080px){ .tk-ghost{top:-104px;} /* 素の節: 必要26px＋余裕 */ .tk-sec--cta .tk-ghost{top:-120px;} /* CTA帯: 必要39px＋余裕 */ .tk-sec--split .tk-ghost{top:-200px;} /* 分割: 実測で -56px では足りず（残り117px）2026-09-03 */ .tk-sec--intro .tk-ghost{top:-136px;} /* 導入: 実測で -112px では足りず（残り18px）2026-09-03 */ } @media (max-width:1079px){ .tk-ghost{top:-40px;} .tk-sec--cta .tk-ghost{top:-48px;} .tk-sec--split .tk-ghost{top:-64px;} .tk-sec--intro .tk-ghost{top:-52px;} } /* ③ 大きさは2段階 */ @media (min-width:1080px){ .tk-ghost{font-size:208px;} .tk-sec--intro .tk-ghost{font-size:130px;} } /* ④ 色は地色ごとに1つ */ .tk-ghost{color:#FEF6EF;} .tk-sec--tint .tk-ghost,.tk-sec--split .tk-ghost{color:#FBEFE6;} /* ============================================================ ★ドロワーを開いたときの見え方（2026-09-03 ディレクター指摘） 開いた面は白。閉じているときの白抜き（重ねヘッダー用）が残ると、 ロゴ・社名・閉じるボタンが白地に白で消える。開いたときだけ紺に戻す。 ============================================================ */ @media (max-width:1079px){ /* ① ロゴマークと社名 */ html.has-js .tk-top .tk-hdr.is-open .tk-brand-mark{filter:none;} html.has-js .tk-hdr.is-open .tk-hdr-en{color:#8A4A17;} html.has-js .tk-hdr.is-open .tk-hdr-name{color:#8A4A17;} /* ② 閉じるボタン（×）とラベル */ html.has-js .tk-hdr.is-open .tk-burger-bars i{background:#FEBD8C;} html.has-js .tk-hdr.is-open .tk-burger-txt{color:#8A4A17;} /* ③ 電話は1つのまとまりに。TELの右に番号、受付時間はすぐ下に詰める */ html.has-js .tk-hdr.is-open .tk-nav-tel{ display:grid!important;grid-template-columns:auto 1fr!important;column-gap:10px;row-gap:2px; align-items:baseline;margin-top:4px;padding:16px 2px 0;} html.has-js .tk-hdr.is-open .tk-nav-tel .tk-tel-lb{ grid-column:1;grid-row:1;align-self:center; font-size:11px;letter-spacing:.22em;font-weight:800;color:#8A4A17;line-height:1;} html.has-js .tk-hdr.is-open .tk-nav-tel a[href^="tel:"]{ grid-column:2;grid-row:1;justify-self:start; font-size:24px;font-weight:800;line-height:1.15;color:#8A4A17;text-decoration:none;} html.has-js .tk-hdr.is-open .tk-nav-tel span:not(.tk-tel-lb){ grid-column:2;grid-row:2;font-size:13px;color:#8A4A17;line-height:1.5;} /* ④ お問い合わせボタンは横幅いっぱい（左右のガターは版面と同じ20pxを確保） */ html.has-js .tk-hdr.is-open .tk-navlist>li:last-child{border-bottom:0;padding:16px 0 4px;} html.has-js .tk-hdr.is-open .tk-navlist>li:last-child>a{ display:flex!important;align-items:center;justify-content:center; width:100%;box-sizing:border-box;min-height:56px;padding:14px 20px!important;} } /* ★六角ベン図の重なり順を明示する（2026-09-03 ディレクター指示・z-indexのみ）。 3枚は半透明で重なるため、DOM順まかせだと「どの文字の上に別の六角形が来るか」が 実装の都合で変わる。文字が一番広がる v2 を最前面に固定して、読めなくなる余地を無くす。 ★寸法・位置・色は触っていない。 */ .tk-venn .v2{z-index:3;} .tk-venn .v1{z-index:2;} .tk-venn .v3{z-index:1;} /* ★FVキャッチの字下げ（狭い端末）。2026-09-03 実測: 320px で2枚目が画面外へ11px出て切れていた。 箱は中身なりの幅なので、字下げを詰めて逃がす（階段組みは残す・文字は小さくしない）。 */ @media (max-width:374px){ /* 10pxではまだ7px出ていた（実測）。字下げを0にして逃がす。 箱1が左へ18pxはみ出しているので、字下げ0でも段差は残る。 */ .tk-fvbox--indent{margin-left:0;} } /* ============================================================ WARM PALETTE（#FEBD8C 基調）— 面が淡くなった箇所のインク調整 旧・紺の全幅帯／フッター／六角ラベル／追従ボタンは面がピーチになったため、 白文字のままでは 1.6:1 しか出ない。濃茶インクに差し替えてコントラストを確保する。 ============================================================ */ .tk-sec--navy,.tk-sec--navy h2,.tk-sec--navy h3,.tk-sec--navy p, .tk-sec--navy a,.tk-sec--navy a:hover,.tk-sec--navy .tk-eyebrow,.tk-sec--navy li{color:#4A2A12;} .tk-sec--navy .tk-rule{background:#8A4A17;} .tk-ftr,.tk-ftr p,.tk-ftr span,.tk-ftr a,.tk-ftr a:hover, .tk-ftr .tk-ftr-lnk,.tk-ftr .tk-ftr-telno,.tk-ftr .tk-ftr-en,.tk-ftr .tk-nb, .tk-ftr h3,.tk-ftr dt,.tk-ftr dd,.tk-ftr small{color:#4A2A12;} .tk-ftr .tk-ftr-en,.tk-ftr .tk-nb{color:#6B4020;} .tk-hexrow .hx,.tk-hexrow .hx .no, .tk-flow .v1,.tk-flow .v2,.tk-flow .v3, [class*="tk-hex"] .v1,[class*="tk-hex"] .v2,[class*="tk-hex"] .v3, .v1,.v2,.v3{color:#3F2310;} .tk-float .tk-float-ja,.tk-float .tk-float-en{color:#3F2310;} .tk-slug,.tk-tbl thead th,.tk-card--blue,.tk-card--blue h3,.tk-card--blue p, .tk-card--blue li,.tk-badges>li.is-key{color:#4A2A12;} .tk-btn,.tk a.tk-btn,.tk a.tk-btn--nv{color:#3F2310;} .tk a.tk-btn--w{color:#8A4A17;} /* 面がピーチになった箇所は inline style の白文字より強く効かせる */ /* ★FVのリード文は写真の上に載るので白のまま（面のピーチは写真の下地） */ .tk-fv .tk-fv-lead,.tk-fv .tk-fv-lead strong,.tk-fv .tk-fv-en{color:#FFFFFF!important;} .tk-subfv--photo,.tk-subfv--photo h1,.tk-subfv--photo h2,.tk-subfv--photo p,.tk-subfv--photo a, .tk-workhero,.tk-workhero h2,.tk-workhero h3,.tk-workhero p,.tk-workhero .tk-workhero-tx{color:#FFFFFF!important;} .tk-venn .v1,.tk-venn .v2,.tk-venn .v3{color:#3F2310!important;} .tk-sec--navy h2,.tk-sec--navy p,.tk-sec--navy a,.tk-sec--navy strong,.tk-sec--navy .tk-eyebrow{color:#3F2310!important;} .tk-sec--navy a.tk-btn--w{color:#8A4A17!important;} .tk-ftr a,.tk-ftr p,.tk-ftr span,.tk-ftr .tk-ftr-telno,.tk-ftr .tk-ftr-lnk,.tk-ftr .tk-ftr-en{color:#3F2310!important;} .tk-ftr .tk-brand-mark{filter:none!important;} .tk-nums div,.tk-nums .n,.tk-nums .l{color:#3F2310!important;} /* ============================================================ WARM GRADIENT PASS — 参考画像の「淡いピーチのグラデーション」に寄せる ・広い面はベタ塗りをやめ、淡→中のグラデーションにする ・その上の文字は濃茶インク #3A1F0D（#FEBD8C 上で約 8:1／#E89A5A 上で約 5:1） ============================================================ */ :root{ --pk-ink:#3A1F0D; /* ピーチ面の文字 */ --pk-ink-2:#6B4524; /* 補助テキスト */ --pk-deep:#8A4A17; /* 白地の見出し・リンク */ } /* --- 全幅バンド（旧・紺帯）とフッター --- */ .tk-sec--navy, .tk-ftr, .tk-flag, .tk-subfv:not(.tk-subfv--photo), .tk-subfv--light{ background:linear-gradient(135deg,#FFF1E4 0%,#FEDCC2 38%,#FEBD8C 100%)!important; color:var(--pk-ink)!important; } .tk-sec--navy h2,.tk-sec--navy h3,.tk-sec--navy p,.tk-sec--navy li,.tk-sec--navy a, .tk-sec--navy .tk-eyebrow,.tk-sec--navy strong, .tk-ftr,.tk-ftr p,.tk-ftr span,.tk-ftr a,.tk-ftr h3,.tk-ftr dt,.tk-ftr dd,.tk-ftr small, .tk-ftr .tk-ftr-lnk,.tk-ftr .tk-ftr-telno, .tk-subfv:not(.tk-subfv--photo) h1,.tk-subfv:not(.tk-subfv--photo) h2, .tk-subfv:not(.tk-subfv--photo) p,.tk-subfv--light h1,.tk-subfv--light h2,.tk-subfv--light p{ color:var(--pk-ink)!important; } .tk-ftr .tk-ftr-en,.tk-ftr .tk-nb,.tk-sec--navy .tk-eyebrow{color:var(--pk-ink-2)!important;} .tk-sec--navy .tk-rule,.tk-ftr .tk-rule{background:var(--pk-deep)!important;} /* --- ボタン：やや濃いめのピーチグラデーション＋濃茶インク --- */ .tk a.tk-btn,.tk a.tk-btn--nv{ background:linear-gradient(135deg,#FECFA6 0%,#FEBD8C 45%,#F2A268 100%)!important; color:var(--pk-ink)!important;border:0;} .tk a.tk-btn::before,.tk a.tk-btn--nv::before{ background:linear-gradient(135deg,#FEBD8C 0%,#F2A268 50%,#E38D4F 100%)!important;} .tk a.tk-btn--w{background:#FFFFFF!important;color:var(--pk-deep)!important;} .tk a.tk-btn--w::before{background:linear-gradient(135deg,#FFF1E4,#FEDCC2)!important;} .tk-float a.tk-float-btn,.tk-float a.tk-float-btn:hover{ background:linear-gradient(135deg,#FFE3CB 0%,#FEBD8C 60%,#F2A268 100%)!important;} .tk-float .tk-float-ja,.tk-float .tk-float-en{color:var(--pk-ink)!important;} /* --- カード・見出し地・六角・バッジ・表ヘッダ --- */ .tk-card--blue{ background:linear-gradient(135deg,#FFF1E4 0%,#FEDCC2 45%,#FEBD8C 100%)!important; border-color:#F6C69C!important;} .tk-card--blue h3,.tk-card--blue p,.tk-card--blue li,.tk-card--blue a{color:var(--pk-ink)!important;} .tk-tbl thead th{background:linear-gradient(135deg,#FEDCC2,#FEBD8C)!important;color:var(--pk-ink)!important;border-color:#F6C69C!important;} .tk-hexrow>li .hx,.tk-hexrow>li:nth-child(2) .hx{ background:linear-gradient(140deg,#FEDCC2 0%,#FEBD8C 55%,#F2A268 100%)!important;color:var(--pk-ink)!important;} .tk-badges>li.is-key{background:linear-gradient(135deg,#FEDCC2,#FEBD8C)!important;border-color:#F2A268!important;color:var(--pk-ink)!important;} .tk-slug{background:linear-gradient(90deg,#FEDCC2,#FEBD8C)!important;color:var(--pk-ink)!important;} .tk-venn .v1,.tk-venn .v2,.tk-venn .v3{color:var(--pk-ink)!important;} .tk-steps .bar{background:linear-gradient(180deg,#FEDCC2 0%,#FEBD8C 60%,#F2A268 100%)!important;} .tk-steps .is-top .bar{background:linear-gradient(180deg,#FEDCC2 0%,#F2A268 100%)!important;} .tk-steps .bar .v{color:var(--pk-ink)!important;} .tk-nums div,.tk-nums .n,.tk-nums .l{color:var(--pk-ink)!important;} /* --- 淡い面のセクションもグラデーションで柔らかく --- */ .tk-sec--tint{background:linear-gradient(170deg,#FFFBF7 0%,#FEF2E8 55%,#FDE6D4 100%)!important;} .tk-news{background:linear-gradient(120deg,#FFF1E4,#FEDCC2)!important;} .tk-news p,.tk-news a,.tk-news h2{color:var(--pk-ink)!important;} .tk-news-lb{background:#FFFFFF!important;color:var(--pk-deep)!important;} /* --- .tk-flag ほか、面がピーチになった帯の白文字を濃茶インクへ --- */ .tk-flag,.tk-flag .tk-h2,.tk-flag .tk-h2 .b,.tk-flag p,.tk-flag li,.tk-flag a, .tk-flag strong,.tk-flag .tk-arrow{color:var(--pk-ink)!important;} .tk-flag .tk-eyebrow{color:var(--pk-ink-2)!important;} .tk-flag .tk-rule{background:var(--pk-deep)!important;} .tk-workcards--onnavy .tk-workcards-ttl,.tk-workcards--onnavy .tk-workcards-tx, .tk-workcards--onnavy .tk-workcards-n{color:var(--pk-ink)!important;} .tk-svc-tag{background:rgba(255, 255, 255, .86)!important;color:var(--pk-deep)!important;} /* ============================================================ 読ませる文字／装飾の文字を分けて配色する（可読性ポリシー） ① 読ませる文字（見出し・本文・リンク・ラベル） → ピーチ面では濃茶インク #3A1F0D、白地では #1A1A1A、 アクセント・英語ラベルは #8A4A17（白地4.6:1／#FEBD8C上4.6:1） ② 装飾の文字（巨大ウォーターマーク） → 中間ピーチ #E0A877。読ませないが形は見える ③ 写真の上に載る文字だけ白（スクリムありの既存設計を踏襲） ============================================================ */ /* ① ピーチ面に載る「読ませる文字」は全子孫まで濃茶インク */ .tk-sec--navy,.tk-sec--navy *:not(.tk-ghost):not(.tk-pillars-ghost), .tk-flag,.tk-flag *:not(.tk-ghost), .tk-ftr,.tk-ftr *:not(.tk-ghost), .tk-subfv:not(.tk-subfv--photo),.tk-subfv:not(.tk-subfv--photo) *:not(.tk-ghost), .tk-subfv--light,.tk-subfv--light *, .tk-card--blue,.tk-card--blue *, .tk-news,.tk-news *:not(.tk-news-lb), .tk-slug,.tk-slug *, .tk-tbl thead th,.tk-tbl thead th *, .tk-badges>li.is-key,.tk-badges>li.is-key *, .tk-hexrow>li .hx,.tk-hexrow>li .hx *, .tk-venn .v1,.tk-venn .v2,.tk-venn .v3, .tk-steps .bar .v, .tk-nums div,.tk-nums .n,.tk-nums .l, .tk a.tk-btn,.tk a.tk-btn *,.tk a.tk-btn--nv, .tk-float a.tk-float-btn,.tk-float a.tk-float-btn *, .tk-workcards--onnavy .tk-workcards-ttl,.tk-workcards--onnavy .tk-workcards-tx, .tk-workcards--onnavy .tk-workcards-n{ color:var(--pk-ink)!important;text-shadow:none!important;} /* 補助情報（住所・注記・英字社名）は少し明るい濃茶で階層をつける */ .tk-ftr .tk-ftr-en,.tk-ftr .tk-nb,.tk-ftr small, .tk-sec--navy .tk-eyebrow,.tk-flag .tk-eyebrow, .tk-subfv:not(.tk-subfv--photo) .tk-eyebrow,.tk-subfv--light .tk-eyebrow, .tk-card--blue .tk-eyebrow,.tk-news .tk-eyebrow{ color:var(--pk-ink-2)!important;} /* 白地のアクセント文字・英語ラベル */ .tk-eyebrow,.tk-arrow,.tk a:not([class]),.tk-fvbox .b{color:var(--pk-deep)!important;} .tk a.tk-btn--w{color:var(--pk-deep)!important;} /* ② 装飾ウォーターマーク（読ませない） */ .tk-ghost,.tk-pillars-ghost, .tk-sec--tint .tk-ghost,.tk-sec--navy .tk-ghost,.tk-flag .tk-ghost,.tk-ftr .tk-ghost{ color:#E0A877!important;text-shadow:none!important;} /* ③ 写真の上の文字は白（スクリム前提の既存設計） */ .tk-fv .tk-fv-lead,.tk-fv .tk-fv-lead strong,.tk-fv .tk-fv-en, .tk-subfv--photo,.tk-subfv--photo *, .tk-workhero-body,.tk-workhero-body *, .tk-flag--photo,.tk-flag--photo *{ color:#FFFFFF!important;} /* ヘッダーのお問い合わせボタンは濃茶インク */ .tk .tk-navlist>li>a[href="/form/inquiry"], .tk .tk-navlist>li>a[href="/form/inquiry"]:hover, .tk .tk-navlist>li>a[href="/form/inquiry"]:focus-visible, .tk-hdr .tk-navlist li a[href="/form/inquiry"]{color:#3A1F0D!important;} /* THREE POINTS のウォーターマークは装飾なので薄く戻す */ .tk-pillars-ghost{color:#F7DCC4!important;} /* トップの重ねヘッダーでも、お問い合わせボタンの文字は濃茶（面が淡いピーチのため） */ @media (min-width:1080px){ .tk-top .tk-hdr .tk-navlist>li>a[href="/form/inquiry"], .tk-top .tk-hdr:not(.is-stuck) .tk-navlist>li>a[href="/form/inquiry"], .tk-top .tk-hdr.is-stuck .tk-navlist>li>a[href="/form/inquiry"]{color:#3A1F0D!important;text-shadow:none!important;} } .tk-top .tk-hdr .tk-navlist>li>a[href="/form/inquiry"], .tk-top .tk-hdr:not(.is-stuck) .tk-navlist>li>a[href="/form/inquiry"]{color:#3A1F0D!important;text-shadow:none!important;} /* ヘッダーNAVIの文字は黒で統一（お問い合わせボタンは濃茶のまま） */ .tk-hdr .tk-navlist>li>a:not([href="/form/inquiry"]), .tk-hdr a.tk-nav-parent, .tk-hdr .tk-sub-link, .tk-hdr .tk-nav-tel a, .tk-hdr .tk-nav-tel span, .tk-top .tk-hdr .tk-navlist>li>a:not([href="/form/inquiry"]), .tk-top .tk-hdr:not(.is-stuck) .tk-navlist>li>a:not([href="/form/inquiry"]), .tk-top .tk-hdr:not(.is-stuck) a.tk-nav-parent, .tk-top .tk-hdr.is-stuck .tk-navlist>li>a:not([href="/form/inquiry"]){color:#1A1A1A!important;} .tk-hdr .tk-tel-lb,.tk-top .tk-hdr:not(.is-stuck) .tk-tel-lb, .tk-top .tk-hdr:not(.is-stuck) .tk-nav-tel::before{color:#1A1A1A!important;} /* ============================================================ 調整①②③ ① 帯のグラデーションは「濃い→淡い」に反転（下部の文字を淡い側へ） ② ボタンを一段濃くして「押せるもの」を階層として立てる ③ 六角形の塗りを一段濃くし、中の文字を濃茶インクへ ============================================================ */ /* ① 濃い側を上に。下部（住所・リンク・数字）は淡い面に乗る */ .tk-sec--navy,.tk-ftr,.tk-flag, .tk-subfv:not(.tk-subfv--photo),.tk-subfv--light{ background:linear-gradient(180deg,#FEBD8C 0%,#FEDCC2 46%,#FFF4EA 100%)!important;} .tk-card--blue{background:linear-gradient(180deg,#FEBD8C 0%,#FEDCC2 55%,#FFF4EA 100%)!important;} .tk-news{background:linear-gradient(180deg,#FEDCC2,#FFF4EA)!important;} /* ② ボタンはもう一段濃く（面より明確に濃い） */ .tk a.tk-btn,.tk a.tk-btn--nv{ background:linear-gradient(135deg,#F0A063 0%,#E8944F 55%,#D97F35 100%)!important; color:#2E1808!important;} .tk a.tk-btn::before,.tk a.tk-btn--nv::before{ background:linear-gradient(135deg,#E8944F 0%,#D97F35 55%,#C86E28 100%)!important;} .tk-float a.tk-float-btn,.tk-float a.tk-float-btn:hover{ background:linear-gradient(135deg,#F0A063 0%,#E8944F 60%,#D97F35 100%)!important;} .tk-float .tk-float-ja,.tk-float .tk-float-en{color:#2E1808!important;} .tk a.tk-btn--w{background:#FFFFFF!important;color:#8A4A17!important; box-shadow:inset 0 0 0 2px #E8944F;} .tk a.tk-btn--w::before{background:linear-gradient(135deg,#FFF4EA,#FEDCC2)!important;} /* ③ 六角形は一段濃く＋文字は濃茶 */ .tk-hexrow>li .hx,.tk-hexrow>li:nth-child(2) .hx{ background:linear-gradient(140deg,#F6B884 0%,#F0A063 55%,#E08A45 100%)!important;} .tk-hexrow>li .hx,.tk-hexrow>li .hx *,.tk-hexrow>li .hx .no{ color:#2E1808!important;text-shadow:none!important;} /* ============================================================ ウォーターマーク／六角インクの統一（最終上書き） ・.tk-ghost と .tk-pillars-ghost を同一の濃さ（#F7DCC4）に揃える → 装飾として読ませない。CTA帯のようなピーチ面では白寄りにする ・六角形の文字は #2E1808 に統一 ・白ボタンの文字は #8A4A17 を通す ============================================================ */ .tk-ghost,.tk-pillars-ghost, .tk-sec--tint .tk-ghost,.tk-sec--tint .tk-pillars-ghost, .tk-sec--navy .tk-ghost,.tk-flag .tk-ghost,.tk-ftr .tk-ghost, .tk-subfv .tk-ghost,.tk-workhero .tk-ghost{ color:#F7DCC4!important;text-shadow:none!important;} /* ピーチ面の上では白寄りにして同じ“薄さ”を保つ */ .tk-sec--navy .tk-ghost,.tk-sec--navy .tk-pillars-ghost, .tk-flag .tk-ghost,.tk-ftr .tk-ghost{ color:rgba(255, 255, 255, .58)!important;} .tk-hexrow>li .hx,.tk-hexrow>li .hx *,.tk-hexrow>li .hx .no, .tk-hexrow>li:nth-child(2) .hx,.tk-hexrow>li:nth-child(2) .hx *{ color:#2E1808!important;} .tk-sec--navy a.tk-btn--w,.tk-sec--navy a.tk-btn--w *, .tk .tk-sec--navy a.tk-btn--w,.tk a.tk-btn--w{color:#8A4A17!important;} /* ============================================================ 入場演出を animation から transition へ（2026-09-16・決定的修正） ・原因：document.timeline が進まない環境では animation が 0% に固定され、 running なアニメーションは .is-in{opacity:1} の宣言に勝つため本文が消える。 ・対策：見える状態は transition（＝時計に依存しない状態遷移）で確定させ、 keyframes は使わない。JSが動かない経路でも既定が可視なので消えない。 ============================================================ */ html.js .tk-reveal{ animation:none!important; opacity:0;transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);} html.js .tk-reveal.is-in{opacity:1!important;transform:none!important;} html.js .tk-copyin{ animation:none!important; opacity:1;transform:none; transition:opacity 1.15s cubic-bezier(.2,.8,.2,1),transform 1.15s cubic-bezier(.2,.8,.2,1);} html.js .tk-copyin.is-wait{opacity:0;} html.js .tk-copyin.is-wait[data-copyin="L"]{transform:translateX(-38px);} html.js .tk-copyin.is-wait[data-copyin="R"]{transform:translateX(38px);} html.js .tk-copyin.is-wait[data-copyin="D"]{transform:translateY(22px);} @media (prefers-reduced-motion:reduce){ html.js .tk-reveal,html.js .tk-copyin{opacity:1!important;transform:none!important;transition:none!important;} } /* 連番の線描き・六角の浮き・棒グラフは .is-in の transition 側で動くのでそのまま */ html.js .tk-reveal.is-in .tk-rnum-line path{animation:none!important;stroke-dashoffset:0;} /* ============================================================ 演出の「隠す状態」をオプトインにする（2026-09-16・決定的修正） ・原因：.tk-reveal / .tk-copyin の既定が opacity:0 だったため、 時計が進まない環境（プレビュー・撮影・演出抑止）では animation でも transition でも 0% から動けず本文が永久に消える。 ・対策：既定は必ず可視。JS が「時計が実際に進むこと」を確認してから html.motion-ok を付け、そのときだけ隠す→出す演出を有効にする。 時計が止まっている環境では motion-ok が付かないので、何も隠れない。 ============================================================ */ html.js .tk-reveal,html.js .tk-copyin{ opacity:1!important;transform:none!important; animation:none!important;transition:none!important;} html.js.motion-ok .tk-reveal{ transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)!important;} html.js.motion-ok .tk-reveal:not(.is-in){ opacity:0!important;transform:translateY(26px)!important;} html.js.motion-ok .tk-copyin{ transition:opacity 1.15s cubic-bezier(.2,.8,.2,1),transform 1.15s cubic-bezier(.2,.8,.2,1)!important;} html.js.motion-ok .tk-copyin.is-wait{opacity:0!important;} html.js.motion-ok .tk-copyin.is-wait[data-copyin="L"]{transform:translateX(-38px)!important;} html.js.motion-ok .tk-copyin.is-wait[data-copyin="R"]{transform:translateX(38px)!important;} html.js.motion-ok .tk-copyin.is-wait[data-copyin="D"]{transform:translateY(22px)!important;} @media (prefers-reduced-motion:reduce){ html.js .tk-reveal,html.js .tk-copyin{opacity:1!important;transform:none!important;} } /* ピーチ面のPDFバッジは濃茶インク（classless-a の !important に捕まらないよう class 化） */ .tk a.tk-pdfbadge,.tk a.tk-pdfbadge:hover{color:#3A1F0D!important;} /* ヘッダー左のロゴ組み（英字＋社名＋マーク）は画像どおり紺のまま */ .tk-hdr .tk-hdr-en,.tk-hdr .tk-hdr-name, .tk-top .tk-hdr .tk-hdr-en,.tk-top .tk-hdr .tk-hdr-name, .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-en, .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-name, .tk-top .tk-hdr.is-stuck .tk-hdr-en, .tk-top .tk-hdr.is-stuck .tk-hdr-name{color:#01397C!important;text-shadow:none!important;} .tk-hdr .tk-brand-mark, .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-brand-mark{filter:none!important;} /* トップの重ねヘッダー（ヒーロー上）にいる間だけロゴ組みを白抜きに戻す */ .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-en, .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-name{ color:#FFFFFF!important;text-shadow:0 2px 10px rgba(0, 0, 0, .35)!important;} .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-brand-mark{ filter:brightness(0) invert(1)!important;} /* ============================================================ ヘッダーのロゴ組みの配色をここ1箇所で所有する（2026-09-16） ・トップでヒーローに重なっている間（:not(.is-stuck):not(.is-open)）＝白抜き ・それ以外（帯が出た .is-stuck／メニュー展開 .is-open／下層ページ）＝紺 #01397C ============================================================ */ html .tk-hdr .tk-hdr-en, html .tk-hdr .tk-hdr-name, html .tk-top .tk-hdr.is-stuck .tk-hdr-en, html .tk-top .tk-hdr.is-stuck .tk-hdr-name, html .tk-top .tk-hdr.is-open .tk-hdr-en, html .tk-top .tk-hdr.is-open .tk-hdr-name{color:#01397C!important;text-shadow:none!important;} html .tk-hdr .tk-brand-mark, html .tk-top .tk-hdr.is-stuck .tk-brand-mark, html .tk-top .tk-hdr.is-open .tk-brand-mark{filter:none!important;} html .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-en, html .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-hdr-name{ color:#FFFFFF!important;text-shadow:0 2px 10px rgba(0, 0, 0, .35)!important;} html .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-brand-mark{ filter:brightness(0) invert(1)!important;} /* ============================================================ ヘッダーの色・マークは transition から外す（2026-09-16） ・原因：.tk-hdr… の transition に color / filter が入っているため、 時計が進まない環境では白抜き→紺の変化が開始値に固定され、 帯が出たあとも白文字（白地に白）で消えてしまう。 ・対策：状態変化は即時。クロスフェードは時計の進行を確認済みの html.motion-ok のときだけ復活させる。 ============================================================ */ /* ★background-color も基底の transition から外す（2026-09-16）。 時計が進まない環境では running な CSSTransition が開始値（透明）に固定され、 .is-open の !important な白面より優先されてヘッダーの面が消える。 */ .tk-hdr,.tk-hdr .tk-brand,.tk-hdr .tk-nav,.tk-brand-mark,.tk-hdr-en,.tk-hdr-name{ transition:box-shadow .45s cubic-bezier(.22,.61,.36,1), padding .45s cubic-bezier(.22,.61,.36,1), width .45s cubic-bezier(.22,.61,.36,1);} html.motion-ok .tk-hdr,html.motion-ok .tk-hdr .tk-brand,html.motion-ok .tk-hdr .tk-nav, html.motion-ok .tk-brand-mark,html.motion-ok .tk-hdr-en,html.motion-ok .tk-hdr-name{ transition:background-color .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), color .45s cubic-bezier(.22,.61,.36,1), filter .45s cubic-bezier(.22,.61,.36,1), padding .45s cubic-bezier(.22,.61,.36,1), width .45s cubic-bezier(.22,.61,.36,1);} /* ============================================================ メニュー展開時の面を確定させる（2026-09-16） ・原因：.tk-hdr:not(.is-stuck) .tk-nav{background:none} が .tk-top .tk-nav{background:#FFFFFF} に特定度で勝つため、 ヒーローに重ねて開いたパネルに不透明な面が付かない。 ナビ文字を黒に統一した結果、写真の上に黒文字が乗って読めなくなる。 ・対策：開いている状態（.is-open）に不透明な白面を与え、 バーガー（×）も同じ黒インクに揃える。 ============================================================ */ html .tk-hdr.is-open, html .tk-top .tk-hdr.is-open{background:#FFFFFF!important;} html .tk-hdr.is-open .tk-nav, html .tk-top .tk-hdr.is-open .tk-nav, html .tk-hdr.is-open:not(.is-stuck) .tk-nav{ background:#FFFFFF!important;box-shadow:0 18px 40px rgba(58, 31, 13, .18);} /* ★background-color は付けない（2026-09-16）。 バーの塗りは .tk-burger-bars i{background:currentcolor} が既に担当しており、 span 全体に currentColor を敷くと MENU ラベルもバーの外枠も黒い塊になる。 */ html .tk-hdr.is-open .tk-burger, html .tk-top .tk-hdr.is-open .tk-burger, html .tk-hdr.is-open .tk-burger span{color:#1A1A1A!important;} html .tk-hdr.is-open .tk-burger, html .tk-hdr.is-open .tk-burger .tk-burger-txt, html .tk-hdr.is-open .tk-burger .tk-burger-bars{background-color:transparent!important;} html .tk-hdr.is-open .tk-hdr-tel a,html .tk-hdr.is-open .tk-hdr-tel span{color:#1A1A1A!important;} /* ============================================================ バーガーのインクをここ1箇所で所有する（2026-09-16） ・原因：.tk-top .tk-hdr:not(.is-stuck) .tk-burger{color:#FFF!important}（0,3,1）が 後続のより弱い規則に勝ち、かつ .is-stuck 用の指定が存在しないため、 バーを塗る currentColor がヒーロー以外でも白のまま＝白地に白で消える。 ・対策：状態ごとの所有を 0,3,1 以上＋!important で明示する。 白はヒーロー重なり時のみ。それ以外（帯・展開・下層）は #1A1A1A。 ============================================================ */ html body.tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-burger, html body.tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-burger .tk-burger-txt, html body.tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-burger .tk-burger-bars i{ color:#FFFFFF!important;} html body.tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-burger .tk-burger-bars i{ background:currentcolor!important;} html body .tk-hdr.is-stuck .tk-burger, html body .tk-hdr.is-stuck .tk-burger .tk-burger-txt, html body .tk-hdr.is-stuck .tk-burger .tk-burger-bars i, html body .tk-hdr.is-open .tk-burger, html body .tk-hdr.is-open .tk-burger .tk-burger-txt, html body .tk-hdr.is-open .tk-burger .tk-burger-bars i, html body:not(.tk-top) .tk-hdr .tk-burger, html body:not(.tk-top) .tk-hdr .tk-burger .tk-burger-txt, html body:not(.tk-top) .tk-hdr .tk-burger .tk-burger-bars i{ color:#1A1A1A!important;} html body .tk-hdr.is-stuck .tk-burger .tk-burger-bars i, html body .tk-hdr.is-open .tk-burger .tk-burger-bars i, html body:not(.tk-top) .tk-hdr .tk-burger .tk-burger-bars i{ background:currentcolor!important;} /* ============================================================ 写真の上の白文字にはダークスクリムを戻す（2026-09-16） ・原因：一括リカラーで text-shadow の rgba(6,26,66,…)＝ほぼ黒の紺が rgba(165,98,39,…)＝中間ブラウンに置換され、明るい空の写真に対する 唯一の分離手段が失われた（白文字が最小1.18:1まで低下）。 ・対策：影はほぼ黒のインクに戻し、さらに FV リード帯の背後に 下方向のダークグラデーションのプレートを敷いて下限を担保する。 ============================================================ */ .tk-fv-lead,.tk-fv-en, .tk-subfv--photo h1,.tk-subfv--photo h2,.tk-subfv--photo p, .tk-workhero h2,.tk-workhero h3,.tk-workhero p,.tk-workhero .tk-workhero-tx{ text-shadow:0 2px 10px rgba(18, 9, 3, .66),0 1px 2px rgba(18, 9, 3, .54)!important;} /* サブページの写真ヒーローにも同じ保険を敷く */ .tk-subfv--photo,.tk-workhero{position:relative;} .tk-subfv--photo::after,.tk-workhero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(18, 9, 3, .12) 0%,rgba(18, 9, 3, .42) 100%); z-index:0;pointer-events:none;} .tk-subfv--photo>*,.tk-workhero>*{position:relative;z-index:1;} /* ============================================================ ヒーローの下地を深いウォームインクに戻す（2026-09-16） ・原因：一括リカラーで .tk-fv{background:#0B357F}（濃紺）が #FEBD8C に 置換され、写真帯が縮んだときにリード文が乗る面そのものが明るくなった。 白文字で 1.63:1 まで落ち、影やプレートでは補えない。 ・対策：面を深いウォームインク #3A1F0D に戻す（ピーチの色味は保持）。 プレートは不要になるので撤去し、写真ヒーローのスクリムは 画像より上・文字より下に入る重なり順に修正する。 ============================================================ */ .tk-fv{background:#3A1F0D!important;} .tk-fv-lead,.tk-fv-lead strong{color:#FFFFFF!important;} .tk-fv-en{color:#FDD2B0!important;} /* ★存在しないクラス（.tk-subfv--photo / .tk-workhero-copy / .tk-workhero＞.tk-wrap）への 指定は削除。実際の子は IMG と DIV.tk-workhero-body の2つだけ。 テキストは写真の下に置かれるので、スクリムではなく面そのものを暗くする。 */ .tk-workhero::after,.tk-subfv--photo::after{display:none!important;} .tk-workhero-body{position:relative;z-index:2;background:#3A1F0D!important;} .tk-workhero-body,.tk-workhero-body *, .tk-workhero-body h2,.tk-workhero-body h3,.tk-workhero-body p, .tk-workhero-body .tk-workhero-tx,.tk-workhero-body .tk-eyebrow{color:#FFFFFF!important;} .tk-workhero-body .tk-eyebrow{color:#FDD2B0!important;} /* ============================================================ ダークになったヒーロー面の子要素インクを明るく（2026-09-16） ・原因：.tk-scroll など .tk-fv の子が中間ブラウン #5C3216 のまま残り、 面が #3A1F0D になったことで 1.39:1 の暗-暗になった。 ・対策：.tk-fv 配下のインクは明るいピーチ／白に統一する。 ============================================================ */ .tk-fv .tk-scroll,.tk-fv .tk-scroll span,.tk-fv .tk-scroll *{color:#FDD2B0!important;} .tk-fv .tk-scroll::before,.tk-fv .tk-scroll::after, .tk-fv .tk-scroll .bar,.tk-fv .tk-scroll i{background:#FDD2B0!important;} .tk-fv .tk-eyebrow,.tk-fv .tk-fv-en{color:#FDD2B0!important;} /* ============================================================ FVは内容が増えたら伸びる（2026-09-16） ・原因：.tk-fv は min-height:100svh ＋ overflow:hidden の縦フレックスで、 リード文が増えた .tk-fv-copy（min-height:auto）が入りきらず、 唯一縮める兄弟の写真が潰れ、残りが clip された。 ・対策：高さの下限だけ残して上限を外す（height:auto / overflow:visible）。 写真は縮みすぎないよう下限を持たせる。 ============================================================ */ .tk-fv{height:auto!important;overflow:visible!important;} .tk-fv>.tk-fv-photo{flex:1 1 auto;min-height:280px!important;} .tk-fv>.tk-fv-copy{flex:0 0 auto!important;min-height:auto;} /* ============================================================ ★TOPのヒーロー上だけナビを白文字にする（2026-09-17 ディレクター指示） ・帯が出る（.is-stuck）と既存ルールで #1A1A1A へ戻る＝スクロール後は黒。 ・ドロップダウンを開いている間（.is-open）は白いパネルが出るので黒へ戻す。 ・ドロップダウンの中（.tk-sub-link）と お問い合わせボタンは対象外。 ・根拠の実測: ナビ背後の地の明るさ TOP 17%（白4.74:1／黒3.67:1）に対し 下層は91〜94%（白1.07:1＝読めない）。だから .tk-top だけに限定している。 ============================================================ */ @media (min-width:1080px){ .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-navlist>li>a:not([href="/form/inquiry"]), .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-navlist a.tk-nav-parent, .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-nav-toggle, .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-nav-tel a, .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-nav-tel span{color:#FFFFFF!important;} /* 現在ページ印の下線も白に合わせる（既定は主色の茶なので写真の上で沈む） */ .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-navlist>li>a[aria-current="page"]::after{background:#FFFFFF!important;} /* 電話の左の仕切り線も白側へ寄せる */ .tk-top .tk-hdr:not(.is-stuck):not(.is-open) .tk-nav-tel{border-left-color:rgba(255,255,255,.45)!important;} } /* ============================================================ ★アクセスの地図（2026-09-17 ディレクター支給） プレースホルダだった .tk-ph をそのまま枠に使う＝寸法（16:9・下余白24px）は承認済みのまま。 ここでは破線と内側の余白を外して、iframe を枠いっぱいに敷くだけ。 ★セレクタを .tk-ph.tk-ph--map にしている理由（ブラウザで計測して判明）: プレースホルダの見た目は .tk-ph:not(.has-img)（詳細度0,2,0）が持っている。 .tk-ph--map 単独（0,1,0）では負けて**破線の枠が残る**。クラスを2つ重ねて 同じ詳細度にし、後から書く＝後勝ちで当てる（!important を増やさないため）。 ★display:block に戻す理由: .tk-ph は中央寄せの flex。その子の height:100% は 解決されず、iframe が枠より46px低くなって下に地の色が見えた（実測 539/585）。 ============================================================ */ .tk-ph.tk-ph--map{display:block;padding:0;border:0;overflow:hidden;} .tk-ph.tk-ph--map iframe{display:block;width:100%;height:100%;border:0;} /* ============================================================ ★入場演出のチラつき止め（2026-09-17 ディレクター指摘） キャッチの待機を「後から .is-wait を足して隠す」から 「既定で隠して .is-shown が付いたら出す」へ反転する。 後から隠す形だと、いったん見えてから消えるので必ずチラつく。 ※ motion-ok が付いていないとき（時計が止まっている環境）は何も隠さない＝本文は必ず見える。 ============================================================ */ html.js.motion-ok .tk-copyin:not(.is-shown){opacity:0!important;} html.js.motion-ok .tk-copyin:not(.is-shown)[data-copyin="L"]{transform:translateX(-38px)!important;} html.js.motion-ok .tk-copyin:not(.is-shown)[data-copyin="R"]{transform:translateX(38px)!important;} html.js.motion-ok .tk-copyin:not(.is-shown)[data-copyin="D"]{transform:translateY(22px)!important;} /* ============================================================ ★CTA節の上の空白 ／ SCOPE 4枚組のSP縦並び（2026-09-18 ディレクター指摘） ① TOP「CTAセクション上に空白がある」 .tk-sec--cta は padding を 132px で固定していて画面幅で変わらないのに、 素の節 .tk-sec は SP 80px ／ 768px以上 112px。＝CTA の上だけ余分に空く。 実測（節の最後の文字 → 次の節の最初の文字）: SP 375px … ほかの節の間 107〜172px に対し **CTA の上だけ 212px** PC 1440px … ほかの節の間 204〜218px に対し **CTA の上だけ 244px** → **上だけ**、その幅の節と同じ量にそろえる（SP 80px ／ 1080px以上 112px）。 下は触らない（下はブログ節が続いており、詰めると見出しが窮屈になる）。 ★ゴーストが見出しに重ならないことは計算済み: 1080px以上でゴースト下端は 88px （top:-120px ＋ font-size:208px ＋ line-height:1）で、見出しは 112px から始まる。 ★実機（CueZilla）では CTA の直前に施工実績パーツが独立行で入るので、 そちらのSP余白も 30_override.css（decompose.mjs 内）側で同時に落としている。 ② 電柱新設・撤去工事 SCOPE「対応できる工事の範囲」が SP でも横4列 HTML に style="grid-template-columns:repeat(4,minmax(0,1fr))" が直書きされていて、 CSS 側に受け皿の規則が無いため SP でも4列のまま。実測 375px で1枚 **72px** ＝ 「新／設」と1文字ずつ折り返して読めない。→ SP は縦1列。 ★!important が要る理由: 直書きの style 属性に勝てるのは !important だけ。 HTML を書き換えれば不要だが、そうすると納品の 07_page-work-pole.html も 貼り直しになる。CSSだけで閉じれば**追加CSSの1枚だけ**で直る。 ============================================================ */ @media (max-width:767px){ .tk-sec--cta{padding-top:80px;} .tk-workgrid4{grid-template-columns:1fr!important;} } @media (min-width:1080px){ .tk-sec--cta{padding-top:112px;} } /* ===== CueZilla納品ぶんの追加（2026-09-16 分解時） ===== */ /* 追従バーを出さないページ: /recruit /recruit/staff /care /form/inquiry /form/recruit /privacypolicy （受領物では recruit-a / recruit-b。2026-09-17 にスラッグを改名した） */ html.tk-nofloat .tk-float{display:none !important;} /* ===== 30_override.css ===== */ /* ============================================================ O01740 override.css — skin（全宣言 !important）に負けていた「パーツ狙いの規則」を置き直す。 ★受領CSS（20_site.css 内）の同じ規則は消していない。ここが後勝ちで効く。 消さない理由: 共有ファイル編集ルール「不要に見えるコードでも指示なく削除しない」。 ★出典: tools/delivery-code-check（2026-09-16 実行）「skin採用なのに site.css にパーツ狙いの規則」3件。 ============================================================ */ /* パーツの書体をサイトに合わせる（case-vars.css 由来） */ html body [class*="parts"], html body [class*="_form_wrap"], html body .contact_section{ font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif !important; } /* NEWSバー（design-parts-52）の1行組み（style.css:1163 / 1171 由来） */ html body .tk-news52 .parts-52-textarea{ display:flex !important; flex-direction:row !important; gap:20px !important; align-items:baseline !important; } @media (max-width:520px){ html body .tk-news52 .parts-52-textarea{ flex-direction:column !important; gap:2px !important; } } /* ============================================================ ★2026-09-17 ディレクター指示（実機を見ての2件） ============================================================ */ /* ①-a ★折り返しが早すぎる本当の原因: text-wrap:balance。 案件CSS style.css:474 の .tk h1,.tk h2,.tk h3{text-wrap:balance} は、body に .tk が付くため **CueZillaパーツの h3（一覧カードの見出し）にも当たっていた**。 balance は「行の長さを均す」指定なので、2行になる見出しは1行目をわざと短くする。 実測（1440px・枠340px・「ホームページをリニューアルしました」）: 行の幅 164px / 184px ＝ **1行目が48%しか使われず176px余っていた**。 パーツの一覧は行長を均す対象ではない（幅いっぱいまで使ってから折り返すのが正しい）ので、 パーツの見出しだけ既定の折り返しへ戻す。本文の text-wrap:pretty（孤立行を避けるだけ）は残す。 */ html body [class*="parts"] h1, html body [class*="parts"] h2, html body [class*="parts"] h3, html body [class*="parts"] h4, html body [class*="_post_title"], html body [class*="_post_excerpt"]{ text-wrap:wrap !important; } /* ①-b ブログ一覧カードの見出しが早く折り返す（幅の確保）。 実測（1440px・実機DOM）: カード374px ／ 罫1px×2 ／ テキストの左右インセット17px （skin 211行 margin:14px 16px 0 と 213行 padding:10px 16px 16px）→ 見出しの枠は340px。 「ホームページをリニューアルしました」は1行に **349px 必要**で、9px足りずに2行へ落ちていた。 インセットを詰めた実測: 12px→348px（まだ2行・1px不足）／**11px→350px（1行に収まる）**／10px→352px。 ＝11px が「収まる最小のpadding」。日付行と見出しの左端も +12px で揃う。 ★サムネイルは全幅ブリードなので、テキストのインセットがカードの唯一の内寄せ。 ★17文字より長い見出しはこの幅でも折り返す（カード374pxでは構造的に避けられない）。 さらに余裕が要るならカード幅か、テーマの字送り（theme_default.css の letter-spacing:0.03em）側の判断。 ★このファイルはテンプレート文字列の中で組み立てているので、コメントにバッククォートを書かないこと （書くと文字列がそこで終わり、decompose.mjs が構文エラーで落ちる。2026-09-17 に実際に踏んだ）。 */ html body [class*="_post_title-excerpt"]{ padding-left:11px !important; padding-right:11px !important; } /* 施工実績（parts228系）は skin 214行で左端揃え（インセット0）にしてあるので、そこは戻す */ html body [class*="_post_status"]:has([class*="_title-excerpt"]) [class*="_title-excerpt"]{ padding-left:0 !important; padding-right:0 !important; } /* 日付・カテゴリの行も同じインセットへ（見出しと左端を揃える）。 parts228系は status の中に見出しが入る別構造なので除外する。 */ html body [class*="_post_status"]:not(:has([class*="_title-excerpt"])){ margin-left:11px !important; margin-right:11px !important; } /* ② パンくずが2重に出る（ブログ／施工実績／お問い合わせ／応募フォーム／プライバシー）。 上側は CueZilla のパンくずパーツ（parts231）で、**ヘッダー直下＝ヒーローより上**に出る。 下側は納品の下層ヘッダー内（.tk-crumb）で、設計どおりヒーローの下にある。 ディレクター指示「上側を削除」に従い、パーツ側を隠す。 ★静的ページには parts231 が出ていない（動的5ページだけの現象・2026-09-17 実測）。 ★parts231 は schema.org/BreadcrumbList の構造化データを持っている。DOMには残るので データとしては失われないが、CMS側でパーツ自体を外す運用に変えるなら、この規則は不要になる。 */ html body [class*="parts"][class*="_breadcrumb"], html body .p-breadcrumb.c-breadcrumb{ display:none !important; } /* ============================================================ ★TOPの動的パーツを承認済みの意匠へ寄せる（2026-09-17・実機DOMを採って作成／R-28） ------------------------------------------------------------ 受領CSSは草案の自前クラス（.tk-news52 / .tk-blogcards）で囲って書かれていて、 実機のパーツには**クラスが付かないので1つも当たっていなかった**。 実DOMの構造は草案のモックと同じだったので、スコープだけ実パーツへ付け替える。 ★自前の見出し節（05c）にも parts131415_blog が付いているため :not(.tk-sec) で除外する。 ============================================================ */ /* --- NEWSバー（design-parts-52）。実測の現状: 地=白／ラベル=黄#FFCC44・白文字20px・container 1280px --- 承認済み（style.css .tk-news52 一式）: 地=#FDF5EF＋下罫／ラベル=ピーチ#FEBD8C・#4A2A12・12px・字送り.22em／版面1080px */ html body [class*="design-parts-52"]{ background:#FDF5EF !important; border-bottom:1px solid #F0E4DB !important; } html body [class*="design-parts-52"] .container{ max-width:1080px !important; margin:0 auto !important; padding:0 20px !important; height:100% !important; } html body [class*="design-parts-52"] .content{ height:100% !important; display:flex !important; align-items:center !important; } html body [class*="design-parts-52"] .banner-area{ display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; margin:0 !important; background:#FEBD8C !important; color:#4A2A12 !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.22em !important; padding:0 20px !important; height:100% !important; } html body [class*="design-parts-52"] ul{ list-style:none !important; margin:0 !important; padding:0 !important; min-width:0 !important; } html body [class*="design-parts-52"] li{ padding:0 18px !important; list-style:none !important; } html body [class*="design-parts-52"] li a{ color:#1A1A1A !important; text-decoration:none !important; display:block !important; } html body [class*="design-parts-52"] .parts-52-textarea{ display:flex !important; flex-direction:row !important; gap:20px !important; align-items:baseline !important; } html body [class*="design-parts-52"] .date{ color:#8A4A17 !important; font-size:13px !important; font-weight:700 !important; flex:0 0 auto !important; } html body [class*="design-parts-52"] .d-inline-block{ font-size:15px !important; } @media (max-width:520px){ html body [class*="design-parts-52"] .content{ flex-direction:column !important; align-items:stretch !important; } html body [class*="design-parts-52"] .banner-area{ width:100% !important; height:34px !important; font-size:11px !important; } html body [class*="design-parts-52"] .container{ padding:0 !important; } html body [class*="design-parts-52"] li{ padding:12px 20px !important; } html body [class*="design-parts-52"] .parts-52-textarea{ flex-direction:column !important; gap:2px !important; } } /* --- ブログ記事に貼る署名ブロックの主ボタン（2026-09-17 ディレクター指摘「文字を白に」）--- 受領CSSに .tk a:not([class]){color:var(--pk-deep)!important}（本文リンクを主色にする規則）があり、 署名ブロックのインライン color:#FFFFFF が **!important に負けて**、地色と同じ茶色になっていた。 署名ブロックのHTML側も color:#FFFFFF!important に直したが、 **すでに公開されている記事の本文は後から書き換わらない**ので、CSSでも白を保証する。 ※バッククォートはこのファイル全体がテンプレート文字列なので書けない（2回踏んだ）。 ★.tk は body 自身に付いている。html body .tk a … と書くと「body の子孫の .tk」を探して当たらない （ブラウザで matches=false を確認）。body.tk と繋げて書くこと。 */ html body.tk a[href="/form/inquiry"][style*="background:#8A4A17"]{ color:#FFFFFF !important; } /* --- ブログ／施工実績のティーザー（parts131415系・TOPに2つ設置）--- 実DOM: .card > .card-body > h5.card-title（カテゴリ）＋ a > p.card-text（タイトル）＋ div[_blog_thumbnail] > img ＝ カテゴリ → タイトル → サムネ の順。承認済み（.tk-blogcards）は **サムネ → 小見出し → タイトル** の縦積み。 ★DOMの順序は変えず、card-body を縦フレックスにして order で入れ替える。 a は display:contents にして、中の2つを同じ縦並びへ出す（リンクの当たり判定は保たれる）。 */ /* パーツ自身の上下余白（実測 150px 0）を外す。見出しは納品の 05c 側が出しているので、 ここに余白があると「見出し ↔ カード」が150px離れて別の節に見える。 下だけ28px残して、次のブロック（05d の"ブログをすべて見る" / CTA）との間を作る。 ★セレクタを section[...] に限る理由（2026-09-17 実機で計測して判明）: [class*="parts131415_blog"] は **サムネの div（class="parts131415_blog_thumbnail"）にも当たる**。 節の下余白28pxがサムネの下にも付き、画像の下に28pxの白帯ができて card が間延びしていた。 節はいつも ＜section＞ なので、タグで絞れば中の div は巻き込まない。 */ html body section[class*="parts131415_blog"]:not(.tk-sec){ padding:0 0 28px !important; } /* 見出し節（05c）の下余白を落として、見出しとカードを1つの節に見せる */ html body .tk-blogcards.parts131415_blog{ padding-bottom:0 !important; } /* ★施工実績のパーツだけは置かれ方が違う（2026-09-17 実機で確認・ディレクター指摘「上下の余白が狭すぎて変」）。 承認済みデータでは、施工実績のカードは WORKS 節（地色 #FDF5EF）の**中**にあった。 CueZillaでは節の中にパーツを差し込めないので、節の直後に置いている。 そのため白地のパーツが色の切れ目に貼り付き、下も28pxしか空かずに窮屈に見えていた。 → 同じ地色を敷いて WORKS 節の続き（1つの帯）に見せ、下の余白も節と同じ112pxにする。 → 白のまま、上下に節と同じ呼吸（上72px・下112px）を与えて独立した一区画に見せる。 ★地色を継ぐ案は捨てた（実測）: WORKS 節の地は linear-gradient(170deg,#FFFBF7 0%,#FEF2E8 55%,#FDE6D4 100%) の**斜め**グラデーション。 下端の色が左右で違う（左 254,236,223 ／ 右 253,230,212）ので、 単色を敷くと**左側だけ11階調の横線**が出る。継ぎ目を作らない方が安全。 */ html body section.tk-sec--split--rev + section[class*="parts131415_blog"]:not(.tk-sec){ padding:72px 0 112px !important; } /* ★SPだけ節と同じ量へ落とす（2026-09-18 ディレクター指摘「CTAセクション上に空白がある」）。 上の 72px / 112px は 1080px幅で決めた値で、画面幅で変わらない。 素の節 .tk-sec は SP で 80px（768px以上 112px）なので、SPでは 「施工実績パーツの下 112px ＋ CTA節の上 132px ＝ 244px」が空き、 ほかの節の間（実測 160px）より 84px 広い＝そこだけ白く抜けて見えていた。 → SP は上56px・下80px。CTA節の上（80px）と合わせて 160px ＝ ほかの節の間と同じにする。 */ @media (max-width:767px){ html body section.tk-sec--split--rev + section[class*="parts131415_blog"]:not(.tk-sec){ padding:56px 0 80px !important; } } /* 版面をサイトに合わせる。実測（1440px）で左端が3種類に割れていた: カード130 / 見出しの箱180 / 見出しの文字200（サイトの版面は .tk-wrap 1080px＋.tk-inner 20px＝200）。 パーツの container を同じ 1080px＋20px にして、見出し・カード・「すべて見る」の左端をそろえる。 */ html body [class*="parts131415_blog"]:not(.tk-sec) .container-lg, html body [class*="parts131415_blog"]:not(.tk-sec) [class*="container"]{ max-width:1080px !important; margin:0 auto !important; padding:0 20px !important; } html body [class*="parts131415_blog"]:not(.tk-sec) [class*="_blog_title_wrap"]{ display:none !important; } /* カード自身の内側余白（実測 45px 30px 40px）を外す。承認済みはサムネがカード幅いっぱい＝ 内側の余白は card-title / card-text の 18px だけが持つ。 */ html body [class*="parts131415_blog"]:not(.tk-sec) .card{ padding:0 !important; } html body [class*="parts131415_blog"]:not(.tk-sec) .row{ display:grid !important; grid-template-columns:1fr !important; gap:20px !important; margin:0 !important; padding:0 !important; } @media (min-width:600px){ html body [class*="parts131415_blog"]:not(.tk-sec) .row{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (min-width:960px){ html body [class*="parts131415_blog"]:not(.tk-sec) .row{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:24px !important; } } html body [class*="parts131415_blog"]:not(.tk-sec) .col{ min-width:0 !important; } html body [class*="parts131415_blog"]:not(.tk-sec) .card{ height:100% !important; background:#FFFFFF !important; border:1px solid #F0E4DB !important; border-radius:0 !important; transition:box-shadow .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1); } html body [class*="parts131415_blog"]:not(.tk-sec) .card:hover{ box-shadow:0 16px 36px rgba(254,189,140,.14); transform:translateY(-3px); } html body [class*="parts131415_blog"]:not(.tk-sec) .card-body{ display:flex !important; flex-direction:column !important; padding:0 !important; } /* ★施工実績のパーツのカードには .card-body が無く、.card > a > (タイトル, サムネ) という作り （2026-09-17 実機で確認）。card-body 前提の指定だけだと order が効かず、 **タイトルが画像の上**に出ていた（ブログのカードは画像が上）。card 自体も縦フレックスにする。 */ html body [class*="parts131415_blog"]:not(.tk-sec) .card{ display:flex !important; flex-direction:column !important; } html body [class*="parts131415_blog"]:not(.tk-sec) .card-body > a, html body [class*="parts131415_blog"]:not(.tk-sec) .card > a{ display:contents !important; color:#1A1A1A !important; text-decoration:none !important; } /* サムネ枠。★パーツ側が height:240px を直接持っている（CMSの部品設定）。 高さが決まっていると aspect-ratio は無視されるので、height:auto に戻してから 16:9 を効かせる。 承認済み（.tk-blogcards）のサムネは カード幅329 → 高さ185＝16:9 ちょうど。 */ html body [class*="parts131415_blog"]:not(.tk-sec) [class*="_blog_thumbnail"]{ order:1 !important; aspect-ratio:16/9 !important; height:auto !important; padding:0 !important; border-bottom:1px solid #F0E4DB !important; overflow:hidden !important; } html body [class*="parts131415_blog"]:not(.tk-sec) [class*="_blog_thumbnail"] img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; } html body [class*="parts131415_blog"]:not(.tk-sec) .card-title{ order:2 !important; margin:0 !important; padding:16px 18px 0 !important; text-align:left !important; font-size:12px !important; letter-spacing:.08em !important; color:#8A4A17 !important; font-weight:800 !important; } html body [class*="parts131415_blog"]:not(.tk-sec) .card-text{ order:3 !important; margin:0 !important; padding:6px 18px 18px !important; font-size:15px !important; line-height:1.7 !important; font-weight:800 !important; color:#1A1A1A !important; } @media (min-width:1080px){ html body [class*="parts131415_blog"]:not(.tk-sec) .card-title{ font-size:14px !important; letter-spacing:.06em !important; } html body [class*="parts131415_blog"]:not(.tk-sec) .card-text{ font-size:16px !important; } } @media (prefers-reduced-motion:reduce){ html body [class*="parts131415_blog"]:not(.tk-sec) .card{ transition:none; } html body [class*="parts131415_blog"]:not(.tk-sec) .card:hover{ transform:none; } }