/* ===== 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, #1e3a5f); /* アクセント（ボタン/チップ/見出しバー） */ --dyn-accent-2: var(--link-color, var(--main-color, #1e3a5f)); /* リンク/ホバー */ --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:#3A352D; --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:#1e3a5f; --dyn-accent-2:#1e3a5f; --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` が色 #0E6FB8 のまま／ 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; } /* ============================================================ §4-c テーマが一覧サムネに掛ける「固定の高さ」を打ち消す（番号非依存） ------------------------------------------------------------ ★§4 の意図が theme_default に**黙って負けていた**のを直すぶん（2026-09-11 実測）。 何が起きていたか: §4 は `[class*="_post_img"]{ aspect-ratio:16/10 }` でサムネを等寸化する設計だが、 theme_default は `.parts228_post_wrap .parts228_post_img{ height:240px }` と `… img{ max-height:240px }` を持つ。**セレクタの詳細度は テーマ(0,2,0) ＞ skin(0,1,0)** なので、 skin の aspect-ratio は計算に使われず**常にテーマの240pxで確定**していた。 実測（local-sandbox・theme+skin のみ・案件CSS無し）: 打ち消し前: .parts228_post_img の computed height = 240px（aspect-ratio:16/10 は設定されているのに無効） 打ち消し後: 233px（＝列幅375px ÷ 1.6）＝**skin 自身の設計どおりになる** ＝「skin を採用しているのにサムネだけテーマの寸法」という状態で、案件側は毎回 `.parts228_post_wrap .parts228_post_img img{ max-height:unset; height:200px }` を手で書いていた （実測: 収穫ログで4案件が同じ規則を貼っていた。機械化台帳 B1）。 線引き（§4 の既存方針と同じ。ここを広げないこと）: ・**打ち消すだけ**＝テーマが持ち込む固定値を外して §4 の aspect-ratio に戻す。 ・**寸法の具体値と色は入れない**。案件が貼っていた `height:200px` `margin-bottom:45px` `background:#FFFFFF` は**デザイン判断**なので案件CSSに残す（値は案件ごとに違う）。 ★入れなかったもの（実測して落とした・同じ検討を繰り返さないため）: `[class*="_sidebar"]{ max-width:none !important }`（案件が4件で手貼りしていた規則）は **skin に入れてはいけない**。theme_default は `.parts222_sidebar{ max-width:28.179%; width:100% }` と対で持っており、max-width だけ外すと width:100% が生きて**2カラムが崩れる**。 実測（local-sandbox）: main 780px + sidebar 333px → **main 590px + sidebar 590px**。 サイドバー幅は案件ごとのレイアウト判断なので、案件CSSで width とセットで指定すること。 ============================================================ */ [class*="_post_wrap"] [class*="_post_img"]{ height:auto !important; } /* テーマの height:240px を外し §4 の aspect-ratio に戻す */ [class*="_post_wrap"] [class*="_post_img"] img{ max-height:none !important; } /* 同 max-height:240px の頭打ちを外す（§4 の height:100% を効かせる） */ /* ============================================================ §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青(#0a58ca)になる症状 → 既定は「ホバーで色を変えない」。 !important は付けない＝個別のホバー装飾(接頭辞クラスや site.css の指定)が そのまま勝ち、未指定リンクだけが青化を免れる（フォールバック）。 */ a:hover{ color:inherit; } /* (c) 電話番号リンク(tel:)の最低タップ確保（R-24／§5.5-3）。 本文中インラインでも折り返さない。CTA/ボタン用途は接頭辞クラスで44px確保。 */ a[href^="tel:"]{ white-space:nowrap; } /* ===== style.css（デザイナー仕上げ・受領のまま） ===== */ @charset "utf-8"; /* ========================================================================== 有限会社田中建設（S01275）草案サイト 共通スタイル 契約: 1_ディレクション/契約.md（確定値・署名DNA・機構契約・量契約） 本文の正本: 1_ディレクション/6b_全ページ完成原稿.md §D（ディレクター確定原稿） KEEP: 草案サイトはCSS共通1ファイル運用が正（design_rules.md「HTML版草案生成時の追加ルール」）。 インラインCSS方針へ戻さない。トンマナは下の :root 変数で一括管理する。 ★納品時（CueZilla）は AI生成指示書_CueZilla.md に従い具体値へベイクする。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. トークン（署名DNA・確定値の実装） -------------------------------------------------------------------------- */ :root{ /* --- パレット（署名DNA palette）------------------------------------------ ★地を純白にしない（参考 taiyoubiken.com の最重要DNA。「親しみやすい」を 装飾ではなく"地の色"で作る）。緑はお客様入力・営業入力の双方指定。 */ --tk-base: #FFFFFF; /* 最大面：白（ディレクター指定「背景色は白ベース」） */ --tk-base-2: #F3F7F4; /* 白の単調を割る極淡い緑グレー */ --tk-card: #FFFFFF; /* カード面（淡色Rowの上に置く） */ --tk-tint: #E9F2EC; /* 淡い緑ティントの帯 */ --tk-brand: #00AB6F; /* ★メインカラー（ディレクター指定 2026-09-01）。見出し・英字ラベル・濃色面・アウトライン */ --tk-brand-2: #00915E; /* 一段濃い緑（hover・罫の濃い方・文字の上に白を乗せる面） */ --tk-accent: #F2C200; /* ★アクセント（ディレクター指定）。★白地では「面」として使い、文字色には使わない （白地の #F2C200 は 1.68:1 で装飾の3:1にも届かない。濃紺地の上なら 10.18:1 でAA） */ --tk-line: #D5E2D9; /* 罫・淡い境界 */ --tk-ink: #24352B; /* 本文（緑寄りのダーク。白地 13.0:1） */ --tk-ink-2: #5C6B60; /* 補助テキスト（白地 5.6:1） */ --tk-ghost: #EDF3EE; /* 巨大英字ゴースト（面と同系＝地に沈める） */ --tk-ghost-on-tint: #DFEAE2; /* --- 書体（署名DNA font-role）------------------------------------------- 和 = Zen Kaku Gothic New（お客様入力「ゴシック体（読みやすい字体）」） 英 = Outfit（英字ラベル・巨大英字ゴースト・数字） ★参考①の Zen Kaku Gothic New／参考②の Noto Sans JP・Jost は持ち込み禁止。 */ --tk-font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", meiryo, sans-serif; --tk-font-en: "Outfit", "Zen Kaku Gothic New", sans-serif; /* --- タイポ（確定値 body:16 / jump-top:3.8 / jump:2.5-3.6 / giant:7.4±1.5）--- */ --tk-body: 16px; /* @kind font */ --tk-lh: 2.0; /* @kind other */ /* 和文は行間を開く（教訓 body-lineheight-paragraph-spacing: 2.0〜2.3） */ --tk-h1-top: clamp(1.5rem, 2.9vw, 2.6rem); /* @kind font */ /* 25.6→60.8px＝本文比3.8（1440px基準）。320pxでは nowrap のFV2行目が収まる下限まで落とす */ --tk-h1-sub: clamp(1.65rem, 2.8vw, 2.5rem); /* @kind font */ /* 下層H1＝40px＝本文比2.5 */ --tk-h2: clamp(1.5rem, 2.8vw, 2.5rem); /* @kind font */ /* 章見出し＝40px＝本文比2.5 */ --tk-h3: clamp(1.125rem, 1.6vw, 1.375rem); /* @kind font */ /* 小見出し＝22px */ --tk-giant: clamp(3rem, 8.9vw, 8rem); /* @kind font */ /* 巨大英字＝128px＝本文比8.0 */ --tk-num: clamp(2.5rem, 5vw, 4.5rem); /* @kind font */ /* 巨大数字＝72px */ --tk-eyebrow: clamp(0.875rem, 1.1vw, 1rem); /* @kind font */ /* 英字ラベル */ /* ★見出しの字間（量契約 heading-letter-spacing 0.30±0.10）。 参考①の章見出し 0.28em・参考②の英字ラベル 0.18〜0.28em＝両参考が「開き字間」で一致。 ★本文は .02em 以下に留める（教訓 body-text-weight-contrast-not-size）。 */ --tk-ls-head: 0.22em; /* @kind font */ --tk-ls-en: 0.30em; /* @kind font */ --tk-ls-body: 0.02em; /* @kind font */ /* --- 余白（design_rules「セクション間の余白は背景色で決める」）------------- 守るのは P_large ＞ P_medium ＞ P_small の大小関係。 */ --tk-row-pad: clamp(72px, 9vw, 120px); /* P_large：Row の上下端＝背景の切り替わり */ --tk-sec-gap: clamp(44px, 5.5vw, 72px); /* P_medium：同一 Row 内のセクション間 */ --tk-el-gap: 24px; /* P_small：セクション内の要素間 */ /* --- 版面（機構契約 wrap:1040）------------------------------------------- */ --tk-wrap: 1360px; /* @kind spacing */ --tk-wrap-nar: 1080px; /* @kind spacing */ /* 散文だけの章は読み幅を絞る（参考①と同じ運用） */ --tk-gutter: clamp(20px, 5vw, 40px); /* @kind spacing */ /* ★片側ブリード量は「幾何の正本」から算出する。`calc(50% - 50vw)` は grid/flex アイテムの中では 50% が列幅に解決されて壊れる （教訓 fullbleed-50vw-formula-breaks-inside-grid-item）。 */ --tk-bleed: calc((100vw - min(var(--tk-wrap), 100vw - var(--tk-gutter) * 2)) / -2); /* --- 角丸（確定値 roundness:1.2）----------------------------------------- */ --tk-r: 18px; /* roundness 1.4（2026-08-26 に1.2から上げた） */ --tk-r-lg: 28px; --tk-r-pill: 999px; /* ★参考③ kohno-mfg.co.jp 署名1「有機的な波・水流のベクター装飾を章をまたいで連続」の幾何 （契約.md の署名採否ブロックで採用。論点 vector-ok を「使ってよい（控えめに）」へ変更した上での採用） 色は面の色を焼き込む＝地(白)の波が淡色面へ流れ込む形にする。本文の背後には置かない。 */ --tk-wave-h: clamp(38px, 5vw, 86px); /* @kind spacing */ --tk-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0,0H1440V28C1180,72 940,86 700,63 460,40 220,47 0,76Z'/%3E%3C/svg%3E"); /* @kind other */ --tk-slant: clamp(24px, 3.5vw, 56px); /* @kind spacing */ /* --- モーション（確定値 motionScale:1）---------------------------------- */ --tk-dur: .7s; /* @kind other */ --tk-ease: cubic-bezier(.22,.61,.36,1); /* @kind other */ } /* -------------------------------------------------------------------------- 2. リセットと基本 -------------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; } /* ★横はみ出しガードは html に置く（body では伝播しない） */ body{ margin:0; background:var(--tk-base); color:var(--tk-ink); font-family:var(--tk-font-ja); font-size:var(--tk-body); font-weight:400; line-height:var(--tk-lh); letter-spacing:var(--tk-ls-body); text-wrap:pretty; line-break:strict; /* 拗音・促音（ュ・っ 等）を行頭に置かない＝和文の禁則 */ } img{ max-width:100%; height:auto; display:block; } a{ color:var(--tk-brand); text-decoration:underline; text-underline-offset:.2em; } a[href^="tel:"]{ white-space:nowrap; } /* 番号を途中で折り返さない（2本並ぶと行をまたいで箱が重なる） */ a:hover{ text-decoration:none; } :focus-visible{ outline:3px solid var(--tk-brand); outline-offset:3px; } h1,h2,h3{ margin:0; font-weight:700; line-height:1.45; text-wrap:balance; } /* 行末に1〜2文字だけ残る組みを防ぐ */ p,ul,ol{ margin:0; } /* -------------------------------------------------------------------------- 3. レイアウト部品（Row / Section / 版面） -------------------------------------------------------------------------- */ .site-row{ padding-block:var(--tk-row-pad); position:relative; overflow:hidden; } .site-row > * + *{ margin-top:var(--tk-sec-gap); } .site-row > section{ padding-block:0; } .site-row--tint{ background:var(--tk-tint); } .site-row--base2{ background:var(--tk-base-2); } /* ★署名（参考③）: 章の境界を直線ではなく水流で渡す。上が地(白)の Row のときだけ付ける。 1ページ2Rowまで（装飾の量の規律）。padding-block(72〜120px) ＞ 波の高さ(38〜86px) なので本文には被らない。 */ .site-row--wave{ background-image:var(--tk-wave); background-repeat:no-repeat; background-position:top center; background-size:100% var(--tk-wave-h); } .site-row--wave{ background-image:none; } /* ★TOPに合わせてセクション間の波の仕切りは使わない */ .site-wrap{ width:min(100% - var(--tk-gutter)*2, var(--tk-wrap)); margin-inline:auto; } .site-wrap--narrow{ width:min(100% - var(--tk-gutter)*2, var(--tk-wrap-nar)); margin-inline:auto; } /* ★トップページのみ版面を1360pxへ拡張（テキストエリアもそれに追従） */ .page-top{ --tk-wrap:1360px; --tk-wrap-nar:1080px; } /* NEWSは従来の版面幅を維持 */ .page-top .news.site-wrap{ width:min(100% - var(--tk-gutter)*2, 1040px); } /* -------------------------------------------------------------------------- 4. 署名 tk-eyebrow（英字ラベル：細ウェイト・大きく開いた字間） -------------------------------------------------------------------------- */ .tk-eyebrow{ display:block; font-family:var(--tk-font-en); font-size:var(--tk-eyebrow); font-weight:300; letter-spacing:var(--tk-ls-en); color:#00ab6f; text-transform:uppercase; margin-bottom:.6em; } .tk-eyebrow--on-dark{ color:var(--tk-accent); } /* 濃紺地の上の黄は 10.18:1 でAA */ /* -------------------------------------------------------------------------- 5. 署名 tk-ghost（巨大英字ゴースト：面と同系色に沈める＝機構契約 back-layer） ★読ませる文字ではなく章の背景オブジェ。aria-hidden で読み上げから外す。 -------------------------------------------------------------------------- */ .tk-ghost{ position:absolute; z-index:0; pointer-events:none; font-family:var(--tk-font-en); font-size:var(--tk-giant); font-weight:600; line-height:.85; letter-spacing:.02em; color:var(--tk-ghost); white-space:nowrap; user-select:none; } .site-row--tint .tk-ghost{ color:var(--tk-ghost-on-tint); } /* ★TOPと同じ見え方に統一：巨大英字は太字＋淡いグリーンのグラデ */ .tk-ghost{ font-weight:900; background:linear-gradient(120deg,#ddfcf0,#eeffe9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .tk-ghost--on-dark{ background:none; -webkit-text-fill-color:currentColor; } .tk-ghost--tl{ top:-.06em; left:calc(var(--tk-gutter) * -0.2); } .tk-ghost--tr{ top:-.06em; right:calc(var(--tk-gutter) * -0.2); } .tk-ghost--bl{ bottom:-.10em; left:calc(var(--tk-gutter) * -0.2); } /* ★波の上にゴーストを載せない … 波を敷いた Row の上端 38〜86px は「前の面の色」で塗られているので、 そこへ巨大英字を置くと前後の Row のゴーストが境界で衝突して見える（実測: RECRUIT と CONTACT が接触）。 波の高さぶん下げる。 */ .site-row--wave > .tk-ghost--tl, .site-row--wave > .tk-ghost--tr{ top:calc(var(--tk-wave-h) * .55 - .06em); } .tk-ghost--on-dark{ color:rgba(255,255,255,.075); } /* -------------------------------------------------------------------------- 6. 見出しシステム -------------------------------------------------------------------------- */ .tk-h2{ font-size:var(--tk-h2); font-weight:700; letter-spacing:var(--tk-ls-head); line-height:1.5; color:var(--tk-brand); } .tk-h2--on-dark{ color:#fff; } .tk-h3{ font-size:var(--tk-h3); font-weight:700; letter-spacing:.06em; color:var(--tk-brand); } .tk-lead{ margin-top:var(--tk-el-gap); } .tk-lead p + p{ margin-top:.9em; } .tk-sec-head{ position:relative; z-index:1; } .tk-sec-head--center{ text-align:center; } .tk-sec-head--center .tk-lead{ margin-left:auto; margin-right:auto; } .tk-btns--center{ justify-content:center; } /* -------------------------------------------------------------------------- 7. ボタン（角丸1.2＝ピル型／タップ44px以上） -------------------------------------------------------------------------- */ .tk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:56px; padding:.9em 2em; border-radius:var(--tk-r-pill); font-size:1rem; font-weight:700; letter-spacing:.08em; text-decoration:none; border:2px solid transparent; transition:background var(--tk-dur) var(--tk-ease), color var(--tk-dur) var(--tk-ease); } .tk-btn--primary{ background:linear-gradient(135deg,#3BB68B,#7CD936); border:0; color:#fff; } /* ★TOPのボタンに統一 */ .tk-btn--primary:hover{ background:linear-gradient(135deg,#7CD936,#00A33F); color:#fff; } .tk-btn--outline{ background:transparent; color:#00ab6f; border-color:#00ab6f; } .tk-btn--outline:hover{ background:#00ab6f; color:#fff; } /* ★濃色パネル上のボタンは「文字色 vs パネル色」で判定される（contrast-pixels は対象要素を隠して 背後の描画ピクセルを採り最悪値で判定する）。よってボタン自身を黄で塗っても紺文字では 1:1 になる。 黄の文字＋黄のフチにすると濃紺地に対して 10.2:1 でAAを満たし、アクセントも効く。 */ .tk-btn--fill{ background:var(--tk-brand); color:#fff; } .tk-btn--fill:hover{ background:var(--tk-brand-2); } .tk-btn--on-dark{ background:transparent; color:var(--tk-accent); border-color:var(--tk-accent); } .tk-btn--on-dark:hover{ background:var(--tk-accent); color:var(--tk-brand); } .tk-btn__arrow{ font-family:var(--tk-font-en); font-weight:300; display:inline-block; transition:transform .28s var(--tk-ease); } .tk-btn:hover .tk-btn__arrow{ transform:translateX(6px); } .tk-btns{ display:flex; flex-wrap:wrap; gap:16px; margin-top:var(--tk-el-gap); } /* ★下層：テキストとボタンの間の余白はFAQページ基準に統一 */ body:not(.page-top) .tk-btns{ margin-top:clamp(36px,4vw,56px); } /* ★下層：横並びのボタンは幅を揃える（TOPは各セクションの指定が優先） */ body:not(.page-top) .tk-btn:not(.sh__cta .tk-btn){ min-width:260px; justify-content:center; } body:not(.page-top) .sh__cta .tk-btn{ min-width:0; } .tk-textlink{ display:inline-flex; align-items:center; gap:.7em; min-height:44px; font-weight:700; letter-spacing:.06em; color:var(--tk-brand); text-decoration:none; } .tk-textlink::after{ content:""; width:2.4em; height:1px; background:currentColor; transition:width var(--tk-dur) var(--tk-ease); } .tk-textlink:hover::after{ width:3.4em; } /* -------------------------------------------------------------------------- 8. ヘッダー（和文＋英字の2段ナビ・R-22＝共通ブロック） -------------------------------------------------------------------------- */ .sh{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(6px); border-bottom:0; transition:box-shadow .25s var(--tk-ease); } .sh.is-scrolled{ box-shadow:0 6px 18px rgba(20,71,42,.10); } .sh__inner{ width:min(100% - var(--tk-gutter)*2, 1360px); margin-inline:auto; display:flex; align-items:center; gap:clamp(12px,2vw,32px); min-height:76px; } .sh__brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto; } .sh__logo{ width:clamp(132px,12vw,180px); height:auto; } .sh__brandname{ font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--tk-brand); white-space:nowrap; } .sh__nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(8px,1.2vw,18px); } .sh__list{ display:flex; align-items:stretch; gap:clamp(8px,1.4vw,22px); list-style:none; margin:0; padding:0; } .sh__item{ position:relative; } .sh__link{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:56px; padding:.4em .3em; text-decoration:none; color:var(--tk-ink); white-space:nowrap; } .sh__ja{ font-size:15px; font-weight:700; letter-spacing:.04em; } .sh__en{ font-family:var(--tk-font-en); font-size:12px; font-weight:300; letter-spacing:.16em; color:var(--tk-ink-2); } .sh__link:hover .sh__ja, .sh__link:hover .sh__en, .sh__link:hover .sh__caret{ color:#3BB68B; } .sh__sublink:hover{ background:#dcf2eb; color:#3BB68B; } .sh__caret{ font-size:12px; color:var(--tk-ink-2); } /* ラベルの下限12px（design_rules）＋font-size種類数を増やさない */ .sh__sub{ position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:210px; margin:0; padding:8px; list-style:none; background:var(--tk-card); border:1px solid var(--tk-line); border-radius:var(--tk-r); box-shadow:0 12px 28px rgba(20,71,42,.10); opacity:0; visibility:hidden; transition:opacity .25s var(--tk-ease); } .sh__item:hover .sh__sub, .sh__item:focus-within .sh__sub{ opacity:1; visibility:visible; } .sh__sublink{ display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; font-size:15px; font-weight:700; text-decoration:none; color:var(--tk-ink); } .sh__sublink:hover{ background:#dcf2eb; color:#3BB68B; } .sh__cta{ flex:0 0 auto; margin-left:clamp(8px,1.4vw,20px); } .sh__cta .tk-btn{ min-height:48px; padding:.7em 1.5em; font-size:15px; background:#ffe061; border:0; color:#000; } .sh__cta .tk-btn:hover{ background:#ffd42e; color:#000; } .sh__toggle{ display:none; } /* -------------------------------------------------------------------------- 9. FV（トップのみ。全幅写真＋生成りの非対称パネル＝split-full / img-max-width） -------------------------------------------------------------------------- */ /* ★写真を主役にする（参考サイト bright-2020.com のFV: 写真がビューポートをほぼ埋め、 テキストは下端にオーバーレイする）。写真の面積を最大化し、パネルは下辺に寄せる。 */ .fv{ position:relative; min-height:calc(100svh - 76px); display:grid; grid-template-columns:1fr; align-content:start; gap:clamp(16px,2.4vw,32px); width:min(100% - var(--tk-gutter)*2, 1360px); margin-inline:auto; padding:0 0 clamp(40px,5vw,80px); isolation:isolate; } .fv__photo{ grid-column:1; grid-row:1; position:relative; z-index:1; } /* ★FV左下の装飾波（画面左端からはみ出し、メイン写真に半透明で重なる） */ .fv__deco{ position:absolute; z-index:0; left:calc(50% - 50vw); bottom:clamp(-20px,-1vw,0px); transform:translateX(-18%); width:clamp(420px,46vw,760px); aspect-ratio:993/582; background:url("https://cdn.cuezilla-cms.com/ew-mybusiness.site/images/1558/bg-wave.png") no-repeat left bottom/contain; opacity:.45; pointer-events:none; } @media (max-width:900px){ .fv__deco{ width:clamp(280px,66vw,460px); } } .fv__photo[data-fv-slider]{ height:500px; } .fv__photo img{ display:block; width:100%; height:500px; aspect-ratio:auto; object-fit:cover; object-position:50% 20%; border-radius:var(--tk-r-lg); } .fv__filter{ position:absolute; width:0; height:0; } .fv__photo[data-fv-slider] .fv__img{ position:absolute; inset:0; opacity:0; } .fv__photo[data-fv-slider] .fv__img:first-of-type{ position:relative; } .fv__photo[data-fv-slider] .fv__img.is-active{ opacity:1; } .fv__photo[data-fv-slider] .fv__img.is-entering{ z-index:2; -webkit-mask-image:linear-gradient(225deg,#000 var(--rev,0%),transparent calc(var(--rev,0%) + 12%)); mask-image:linear-gradient(225deg,#000 var(--rev,0%),transparent calc(var(--rev,0%) + 12%)); } .fv__wave{ position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; will-change:opacity; } .fv__wave.is-on{ filter:url(#fv-ripple); -webkit-mask-image:linear-gradient(225deg,transparent calc(var(--wave,0%) - 26%),#000 var(--wave,0%),transparent calc(var(--wave,0%) + 8%)),radial-gradient(120% 120% at 50% 50%,#000 48%,transparent 76%); mask-image:linear-gradient(225deg,transparent calc(var(--wave,0%) - 26%),#000 var(--wave,0%),transparent calc(var(--wave,0%) + 8%)),radial-gradient(120% 120% at 50% 50%,#000 48%,transparent 76%); -webkit-mask-composite:source-in; mask-composite:intersect; } .fv__panel{ grid-column:1; grid-row:2; position:relative; z-index:2; width:100%; padding:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:clamp(24px,4vw,64px); } .fv__panel .fv__title{ grid-column:1; } .fv__panel .fv__note{ grid-column:1; } .fv__panel .tk-btns{ grid-column:2; grid-row:1 / span 2; align-self:center; justify-self:end; flex-wrap:nowrap; margin-top:0; } .fv__panel .tk-btns .tk-btn{ background:linear-gradient(135deg,#3BB68B,#7CD936); border:0; color:#fff; min-width:260px; justify-content:center; } .fv__panel .tk-btns .tk-btn:hover{ background:linear-gradient(135deg,#7CD936,#00A33F); color:#fff; } .fv__title{ font-size:var(--tk-h1-top); font-weight:900; line-height:1.22; letter-spacing:.12em; /* 量契約 heading-letter-spacing。章見出し(.tk-h2)は .22em とし特大見出しでは段差をつける */ color:#000; } .fv__title span{ display:block; } /* ★確定原稿の改行位置は「街とひとの／これから をつくる」の2行。3行に割れないよう折り返しを止める （改行位置は本文と同じく変更不可） */ .fv__title .fv__title-2{ white-space:nowrap; font-weight:900; } .fv__title .fv__title-accent,.tk-accent-grad{ display:inline; color:#00ab6f; background:linear-gradient(100deg,#00ab6f 0%,#7CD936 35%,#3BB68B 65%,#00ab6f 100%); background-size:280% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:fv-accent-flow 6s linear infinite; } @keyframes fv-accent-flow{ from{ background-position:0% 50%; } to{ background-position:280% 50%; } } @media (prefers-reduced-motion:reduce){ .fv__title .fv__title-accent,.tk-accent-grad{ animation:none; } } .tk-accent-solid{ color:#00ab6f; } /* ★Issues：写真1枚・角丸なし・大きめ */ /* ★Issues：よくあるご相談はカードではなくシンプルなリスト */ .site-row--issues .tk-tickbox{ padding:0; background:transparent; border-radius:0; } .site-row--issues .tk-ticks{ gap:0; } .site-row--issues .tk-ticks li{ background:transparent; border:0; border-bottom:1px solid var(--tk-line); border-radius:0; padding:.75em .2em; box-shadow:none; } .site-row--issues .tk-ticks li:first-child{ border-top:1px solid var(--tk-line); } .site-row--issues .tk-ticks li::before{ background-color:#F2C200; } /* ★Reason：Issuesとトンマナを揃える（白地・巨大英字・カードは罫のみ・ボタンはFVと同じ） */ .site-row--reason{ position:relative; } .site-row--reason > section{ position:relative; z-index:1; } .site-row--reason > .issues__deco{ top:clamp(60px,9vw,160px); } .site-row--reason > .tk-ghost--tr{ font-size:calc(var(--tk-giant) * 1.28); right:clamp(8px,1.4vw,28px); background:linear-gradient(120deg,#ddfcf0,#eeffe9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .site-row--reason .tk-reason{ padding:clamp(22px,2.6vw,32px); background:#ffe061 url("https://cdn.cuezilla-cms.com/ew-mybusiness.site/images/1558/card-yellow-2.webp") center/cover no-repeat; border-radius:var(--tk-r); border:0; height:100%; } .site-row--reason .tk-reasons{ align-items:stretch; } .site-row--reason .tk-reason__ttl,.site-row--reason .tk-reason p{ color:#000; } .site-row--reason p.tk-reason__num,.site-row--reason .tk-reason__unit{ color:#3BB68B; } /* .tk-reason p（要素セレクタ込み＝高い詳細度）に負けないよう p.付きで指定 */ .site-row--reason .tk-reason__num{ font-weight:700; } /* 3枚の「数字・タイトル・横ライン・本文」を行単位で揃える（subgrid）。 1枚目の60は大きさが違うので、タイトルのmin-heightでは揃わない。 */ @media (min-width:900px){ .site-row--reason .tk-reasons{ grid-template-rows:repeat(4,auto); } .site-row--reason .tk-reason{ display:grid; grid-template-rows:subgrid; grid-row:span 4; align-content:start; row-gap:0; } .site-row--reason .tk-reason__num{ align-self:end; } } .tk-num-en{ font-family:var(--tk-font-en); font-weight:600; font-size:1.18em; letter-spacing:.01em; } .site-row--reason .tk-mark{ background-image:none; } .site-row--reason .tk-reason__ttl{ text-wrap:pretty; } /* h3のtext-wrap:balanceが行を短く均すためカード幅より狭く見えていた */ .site-row--reason .tk-reason__rule{ background:#3BB68B; } .site-row--reason .tk-btns{ margin-top:clamp(48px,6vw,88px); justify-content:flex-end; } .site-row--reason .tk-btn{ background:linear-gradient(135deg,#3BB68B,#7CD936); border:0; color:#fff; } .site-row--reason .tk-btn:hover{ background:linear-gradient(135deg,#7CD936,#00A33F); color:#fff; } /* ★Service：Issuesとトンマナを揃える（巨大英字はグラデ、波の装飾、カードは罫のみ・写真は角丸なし） */ .site-row--service{ position:relative; } .site-row--service > section{ position:relative; z-index:1; } .site-row--service > .tk-ghost--tl{ font-size:calc(var(--tk-giant) * 1.28); left:clamp(8px,1.4vw,28px); background:linear-gradient(120deg,#ddfcf0,#eeffe9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .site-row--service > .issues__deco{ top:clamp(-40px,1vw,40px); } .site-row--service > .issues__deco--bl{ top:auto; bottom:clamp(-30px,1vw,40px); } /* カルーセルカードの下＝ボタン帯のあたりに置く */ .site-row--service .tk-slide{ background:transparent; border-radius:0; border-bottom:1px solid var(--tk-line); box-shadow:none; padding-bottom:clamp(18px,2.2vw,26px); } .site-row--service .tk-slide__media img,.site-row--service .tk-slide__media .tk-ph{ border-radius:0; } .site-row--service .tk-slide__ttl,.site-row--service .tk-slide__ttl .tk-eyebrow{ color:#008f5d; } .site-row--service .tk-slide__ttl,.site-row--service .tk-slide p{ padding-inline:0; } /* ★SERVICE：カード横スクロール＋左に数字バー（矢印ボタンなし） is-pinned（デスクトップ・十分な画面高）ではセクションをsticky固定し、縦スクロール量ぶん横移動する */ /* ★SERVICE：カード横スクロール＋左に数字バー（矢印ボタンなし） */ .site-row--service{ overflow:hidden; } .tk-hscroll{ position:relative; margin-top:var(--tk-sec-gap); } /* Reasonのカード上余白と同じ */ .tk-hscroll__pin{ display:block; } .tk-hscroll__bar{ display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); margin-top:clamp(20px,2.6vh,32px); } .tk-hscroll__nums{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4em 1.1em; } .tk-hscroll__num{ appearance:none; background:none; border:0; padding:.1em .2em; font-family:var(--tk-font-en); font-size:14px; font-weight:600; letter-spacing:.08em; color:var(--tk-ink-2); cursor:pointer; opacity:.45; transition:opacity .2s,color .2s; } .tk-hscroll__num.is-on,.tk-hscroll__num:hover{ opacity:1; color:#008f5d; } .tk-hscroll .tk-carousel__track > *{ flex:0 0 clamp(260px,26vw,380px); } @media (max-width:700px){ .tk-hscroll .tk-carousel__track > *{ flex:0 0 78%; } } .tk-hscroll .tk-carousel__track{ scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:none; scroll-behavior:smooth; } .tk-hscroll .tk-carousel__track::-webkit-scrollbar{ display:none; } .tk-hscroll__prog{ flex:1 1 auto; min-width:80px; height:4px; border-radius:999px; background:rgba(0,143,93,.14); cursor:pointer; overflow:hidden; } .tk-hscroll__progfill{ display:block; width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,#00ab6f,#7CD936); transition:width .25s ease; } .tk-hscroll__nav{ display:flex; gap:8px; } /* 数字の真横 */ .tk-hscroll__nav .tk-carousel__btn{ width:26px; height:26px; min-width:0; min-height:0; padding:0; font-family:var(--tk-font-en); font-size:13px; line-height:1; } .tk-hscroll__pin > .tk-btns{ margin-top:calc(clamp(48px,6vw,88px) - 26px - clamp(20px,2.6vh,32px)); justify-content:flex-end; } /* Reasonのボタン上余白から数字＋矢印バーの高さを引く */ .site-row--service .tk-btns{ justify-content:flex-end; margin-top:clamp(90px,12vh,140px); } /* カード上の余白と同じ量 */ .site-row--service .tk-btn{ background:linear-gradient(135deg,#3BB68B,#7CD936); border:0; color:#fff; } .site-row--service .tk-btn:hover{ background:linear-gradient(135deg,#7CD936,#00A33F); color:#fff; } /* ★Recruit：Issuesとトンマナを揃える（巨大英字はグラデ・波の装飾・写真は右側に角丸なしでブリード） */ .page-top .site-row--recruit{ border-top:0; } /* トップは仕切りなし */ .site-row--recruit{ position:relative; border-top:1px solid var(--tk-line); } /* セクションの仕切りは直線 */ .site-row--recruit > section{ position:relative; z-index:1; } .site-row--recruit > .tk-ghost--tr{ font-size:calc(var(--tk-giant) * 1.28); right:clamp(8px,1.4vw,28px); top:clamp(14px,2.4vw,44px); background:linear-gradient(120deg,#ddfcf0,#eeffe9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .site-row--recruit > .issues__deco{ right:auto; left:0; top:50%; transform:translate(-24%,-50%); background-position:left center; -webkit-mask-image:linear-gradient(to right,#000 60%,transparent 100%); mask-image:linear-gradient(to right,#000 60%,transparent 100%); } .site-row--recruit .tk-collage__main img{ aspect-ratio:auto; height:550px; border-radius:0; object-position:70% 40%; } /* 人物が入るよう位置調整 */ .site-row--recruit .tk-btns{ justify-content:flex-end; } .site-row--recruit .tk-btn{ background:linear-gradient(135deg,#3BB68B,#7CD936); border:0; color:#fff; } .site-row--recruit .tk-btn:hover{ background:linear-gradient(135deg,#7CD936,#00A33F); color:#fff; } @media (min-width:1024px){ .site-row--recruit .tk-collage{ grid-template-columns:1fr 1.15fr; } .site-row--recruit .tk-collage__media{ margin-right:calc(50% - 50vw); width:calc(100% + (50vw - 50%)); } } /* 採用ページのCTAは写真を小さめにして右に余白を残す */ @media (min-width:1024px){ .page-recruit .site-row--recruit .tk-collage{ grid-template-columns:1fr .8fr; } .page-recruit .site-row--recruit .tk-collage__media{ margin-right:0; width:100%; } .page-recruit .site-row--recruit .tk-collage__main img,.page-recruit .site-row--recruit .tk-collage__main .tk-ph{ height:auto; aspect-ratio:16/9; width:100%; object-fit:cover; } } .site-row--issues .tk-collage__main img{ aspect-ratio:auto; height:550px; border-radius:0; } @media (min-width:1024px){ .site-row--issues .tk-collage{ grid-template-columns:1.15fr 1fr; } .site-row--issues .tk-collage__media{ margin-left:calc(50% - 50vw); width:calc(100% + (50vw - 50%)); } .site-row--issues .tk-collage__main{ margin-left:0; } } .site-row--issues{ position:relative; } .issues__deco{ position:absolute; z-index:0; right:0; top:clamp(-110px,-7vw,-50px); transform:translateX(22%); width:clamp(380px,42vw,700px); aspect-ratio:993/582; background:url("https://cdn.cuezilla-cms.com/ew-mybusiness.site/images/1558/bg-wave.png") no-repeat right top/contain; opacity:.45; pointer-events:none; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 30%,#000 62%); mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 30%,#000 62%); } .tk-ghost--bold{ font-weight:900; } .site-row--issues > .tk-ghost--tl{ font-size:calc(var(--tk-giant) * 1.28); left:clamp(8px,1.4vw,28px); background:linear-gradient(120deg,#ddfcf0,#eeffe9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .site-row--issues > section{ position:relative; z-index:1; } @media (max-width:900px){ .issues__deco{ width:clamp(260px,64vw,420px); } } .issues__deco--bl{ right:auto; left:0; top:auto; bottom:clamp(-110px,-7vw,-50px); transform:translateX(-22%); background-position:left bottom; -webkit-mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,.35) 30%,#000 62%); mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,.35) 30%,#000 62%); } .fv__title .fv__title-1{ font-size:.62em; letter-spacing:.14em; margin-bottom:.25em; font-weight:900; } .fv__sub{ display:block; margin-top:1.1em; font-size:clamp(1rem,1.4vw,1.25rem); font-weight:700; letter-spacing:.1em; color:#000; } .fv__note{ margin-top:1.2em; max-width:56em; font-weight:700; } .fv__scroll{ display:none; position:absolute; z-index:2; left:50%; bottom:18px; transform:translateX(-50%); align-items:center; gap:.8em; font-family:var(--tk-font-en); font-size:12px; font-weight:300; letter-spacing:.3em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5); } .fv__scroll::after{ content:""; width:60px; height:1px; background:currentColor; } /* ------------------------------------------------------------------------- 10. NEWS（FV直下・3件固定） ------------------------------------------------------------------------- */ .news{ display:grid; gap:var(--tk-el-gap); } /* ★FVはmin-height:100svhでパネル下に余白が残るため、NEWS行の上余白をその分だけ相殺する（全デバイス） */ .page-top .site-row:has(> .news){ padding-top:0; } /* ★お知らせ＝横に細い表レイアウト（日付／カテゴリ／タイトル／リンクの1行） */ .news__rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--tk-line); } .news__row{ border-bottom:1px solid var(--tk-line); } .news__rowlink{ display:grid; grid-template-columns:1fr; gap:.3em .5em; align-items:center; min-height:48px; padding:9px 4px; text-decoration:none; color:var(--tk-ink); } .news__rowlink:hover{ background:#dcf2eb; } .news__head{ display:flex; align-items:center; gap:.8em; } .news__d{ font-family:var(--tk-font-en); font-size:13px; font-weight:300; letter-spacing:.08em; color:#000; } .news__cat{ display:inline-flex; align-items:center; min-height:22px; padding:0 .8em; border-radius:3px; background:#3BB68B; color:#fff; font-size:12px; font-weight:700; letter-spacing:.04em; } .news__t{ font-size:14px; font-weight:500; line-height:1.6; } .news__more{ display:flex; align-items:center; gap:.6em; font-size:13px; font-weight:700; letter-spacing:.04em; color:#000; white-space:nowrap; } .news .tk-sec-head .tk-eyebrow,.news .tk-sec-head .tk-h2{ color:#000; } /* ★トップページの各セクション見出し */ .tk-h2{ color:#000; font-weight:900; } /* ★見出しは全ページ共通でTOPと同じ（黒・900） */ .news__more::before{ content:""; width:1px; height:1.6em; background:var(--tk-line); } @media (min-width:800px){ .news__rowlink{ grid-template-columns:auto 1fr auto; gap:0 clamp(20px,3vw,48px); } } @media (max-width:799px){ .news__more::before{ display:none; } } .news__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--tk-line); } .news__item{ border-bottom:1px solid var(--tk-line); } .news__link{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5em 1.4em; min-height:60px; padding:14px 4px; text-decoration:none; color:var(--tk-ink); } .news__link:hover{ background:#dcf2eb; } .news__date{ font-family:var(--tk-font-en); font-size:15px; font-weight:300; letter-spacing:.1em; color:var(--tk-ink-2); } .news__tag{ font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--tk-brand); } .news__ttl{ font-size:16px; font-weight:700; flex:1 1 16em; } /* ------------------------------------------------------------------------- 11. 署名 tk-collage（写真コラージュの非対称2分割・片側ブリード＝photo-duo） ------------------------------------------------------------------------- */ .tk-collage{ display:grid; grid-template-columns:1fr; gap:var(--tk-sec-gap); align-items:center; position:relative; z-index:1; } .tk-collage__media{ position:relative; } .tk-collage__main img{ width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:var(--tk-r); } .tk-collage__sub{ width:56%; margin-top:-16%; margin-left:auto; } .tk-collage__sub img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--tk-r); box-shadow:0 16px 36px rgba(20,71,42,.18); border:6px solid var(--tk-base); } /* ------------------------------------------------------------------------- 12. よくあるご相談のリスト ------------------------------------------------------------------------- */ .tk-tickbox{ margin-top:var(--tk-el-gap); padding:clamp(14px,1.5vw,22px); background:var(--tk-card); border-radius:var(--tk-r-lg); } .tk-tickbox__ttl{ font-size:16px; font-weight:700; letter-spacing:.1em; color:var(--tk-brand); } /* ★箇条書きは「白い行カード＋丸チェック」でデザイン性を上げる */ .tk-ticks{ list-style:none; margin:1.6em 0 1.6em; padding:0; display:grid; gap:10px; } .tk-ticks li{ position:relative; display:flex; align-items:flex-start; gap:.9em; padding:.85em 1.1em .85em 1em; background:var(--tk-card); border:1px solid var(--tk-line); border-radius:var(--tk-r); box-shadow:0 6px 16px rgba(20,71,42,.05); } .tk-ticks li::before{ content:""; flex:0 0 auto; margin-top:.42em; width:1.25em; height:1.25em; border-radius:var(--tk-r-pill); background:var(--tk-brand) center/.62em .62em no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M2.6 8.6l3.6 3.4L13.4 4.4'/%3E%3C/svg%3E"); } /* ★短い語（工種名など）はタイル型チップに並べる */ .tk-tags{ list-style:none; margin:.9em 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; } .tk-tags li{ display:flex; align-items:center; gap:.6em; padding:.6em 1.1em; background:var(--tk-card); border:1px solid var(--tk-line); border-radius:var(--tk-r-pill); font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--tk-brand); } .tk-tags li::before{ content:""; width:.5em; height:.5em; border-radius:var(--tk-r-pill); background:var(--tk-accent); } .site-row--tint .tk-tags li, .tk-reason .tk-tags li{ background:var(--tk-base); } /* ------------------------------------------------------------------------- 13. 選ばれる理由（3枚の角丸カード＋巨大数字） ------------------------------------------------------------------------- */ .tk-reasons{ display:grid; grid-template-columns:1fr; gap:var(--tk-el-gap); margin-top:var(--tk-sec-gap); position:relative; z-index:1; clear:both; } /* 回り込み写真の下から並べる（列が細くなるのを防ぐ） */ .tk-reason{ padding:clamp(24px,3vw,36px); background:var(--tk-card); border-radius:var(--tk-r-lg); } .tk-reason__num{ font-family:var(--tk-font-en); font-size:var(--tk-num); font-weight:300; line-height:1; letter-spacing:.02em; color:var(--tk-brand); } .tk-reason__unit{ font-family:var(--tk-font-ja); font-size:.32em; font-weight:700; letter-spacing:.1em; margin-left:.3em; } .tk-reason__ttl{ margin-top:.5em; font-size:var(--tk-h3); font-weight:700; letter-spacing:.04em; color:var(--tk-brand); } /* カード幅で11字級が2行に割れないよう字間を詰める */ .tk-reason__rule{ width:48px; height:4px; background:var(--tk-accent); margin:1em 0; } .tk-reason__num--text{ font-size:var(--tk-h2); font-weight:400; letter-spacing:.04em; } /* ★カード表現の3項目（白地・1px罫・高さ揃え） */ .tk-reasons--cards{ align-items:stretch; } .tk-reasons--cards .tk-reason{ height:100%; background:#fff; border:1px solid var(--tk-line); border-radius:0; padding:clamp(22px,2.6vw,32px); } /* ★5項目＝上3・下2（下段は中央寄せ）・高さ揃え */ @media (min-width:900px){ .tk-reasons.tk-reasons--5{ grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:1fr; } .tk-reasons.tk-reasons--5 > *{ grid-column:span 2; } .tk-reasons.tk-reasons--5 > :nth-child(4){ grid-column:1 / span 3; } .tk-reasons.tk-reasons--5 > :nth-child(5){ grid-column:4 / span 3; } } /* ------------------------------------------------------------------------- 14. 工事一覧（左右交互・写真を画面端までブリード＝bleed-one-side） ------------------------------------------------------------------------- */ .tk-alt{ display:grid; gap:var(--tk-sec-gap); } .tk-alt__row{ display:grid; grid-template-columns:1fr; gap:var(--tk-el-gap); align-items:center; } .tk-alt__media img{ width:100%; aspect-ratio:5/4; object-fit:cover; } /* ★PC（トリミング後）と同じ比をどのデバイスでも保つ */ .tk-alt__body{ width:min(100% - var(--tk-gutter)*2, 560px); margin-inline:auto; } .tk-alt__ttl{ font-size:var(--tk-h3); font-weight:700; letter-spacing:.08em; color:var(--tk-brand); } .tk-alt__ttl .tk-eyebrow{ margin-bottom:.35em; } .tk-alt__body p{ margin-top:.8em; } /* ★工種カルーセル（画像＋小見出し＋テキストを横スクロール。7項目を縦に伸ばさない） */ .tk-carousel{ position:relative; z-index:1; margin-top:var(--tk-sec-gap); } .tk-carousel__track{ display:flex; gap:clamp(16px,2.4vw,28px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:thin; } .tk-carousel__track > *{ scroll-snap-align:start; flex:0 0 84%; } .tk-slide{ background:transparent; border-radius:0; border-bottom:1px solid var(--tk-line); overflow:hidden; padding-bottom:clamp(18px,2.2vw,26px); } .tk-slide__media img, .tk-slide__media .tk-ph{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:0; } .tk-slide__ttl{ margin-top:clamp(16px,1.8vw,22px); padding-inline:clamp(18px,2.2vw,26px); font-size:var(--tk-h3); font-weight:700; letter-spacing:.06em; color:var(--tk-brand); } .tk-slide__ttl .tk-eyebrow{ margin-bottom:.35em; } .tk-slide p{ margin-top:.7em; padding-inline:clamp(18px,2.2vw,26px); } .tk-carousel__nav{ display:flex; gap:12px; justify-content:flex-end; margin-top:var(--tk-el-gap); } .tk-carousel__btn{ width:52px; height:52px; border-radius:var(--tk-r-pill); border:2px solid var(--tk-brand); background:transparent; color:var(--tk-brand); font-family:var(--tk-font-en); font-size:20px; cursor:pointer; transition:background var(--tk-dur) var(--tk-ease); } .tk-carousel__btn:hover:not(:disabled){ background:var(--tk-brand); color:#fff; } .tk-carousel__btn:disabled{ opacity:.3; cursor:default; } @media (min-width:700px){ .tk-carousel__track > *{ flex:0 0 calc((100% - clamp(16px,2.4vw,28px) * 2) / 3); } } /* ★業務案内「手がける工事」＝3列×2段＋最後の1件は2カラムの横長カード */ .tk-grid3{ display:grid; grid-template-columns:1fr; gap:clamp(20px,2.6vw,32px); } .tk-gcard{ background:#fff; border-radius:0; border:1px solid var(--tk-line); overflow:hidden; padding-bottom:clamp(18px,2.2vw,26px); box-shadow:none; } /* ★TOPのカードに合わせて影なし1px罫 */ .tk-gcard__media img, .tk-gcard__media .tk-ph{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:0; } .tk-gcard--wide .tk-gcard__media img,.tk-gcard--wide .tk-gcard__media .tk-ph{ aspect-ratio:16/10; } /* ★横長カードは全デバイス16:10 */ .tk-gcard__ttl{ margin-top:clamp(16px,1.8vw,22px); padding-inline:clamp(18px,2.2vw,26px); font-size:var(--tk-h3); font-weight:700; letter-spacing:.06em; color:var(--tk-brand); } .tk-gcard__ttl .tk-eyebrow{ margin-bottom:.35em; } .tk-gcard__body p{ margin-top:.8em; padding-inline:clamp(18px,2.2vw,26px); } @media (min-width:760px){ .tk-grid3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .tk-gcard--wide{ grid-column:span 3; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding-bottom:0; } .tk-gcard--wide .tk-gcard__media img, .tk-gcard--wide .tk-gcard__media .tk-ph{ height:100%; } .tk-gcard--wide .tk-gcard__ttl{ margin-top:0; } .tk-gcard--wide .tk-gcard__body{ padding-block:clamp(22px,2.6vw,34px); } } /* ★施工実績の一覧（写真→日付→工事名→工種チップの3列カード） */ .wk-grid{ display:grid; grid-template-columns:1fr; gap:clamp(28px,3.4vw,44px) clamp(20px,2.6vw,32px); margin-top:var(--tk-sec-gap); } .wk-item{ display:flex; flex-direction:column; text-decoration:none; color:var(--tk-ink); } .wk-item__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .wk-item:hover .wk-item__media img{ opacity:.88; } .wk-item__date{ margin-top:1em; font-family:var(--tk-font-en); font-size:14px; font-weight:300; letter-spacing:.08em; color:var(--tk-ink-2); } .wk-item__ttl{ margin-top:.3em; font-size:17px; font-weight:700; line-height:1.7; color:var(--tk-brand); } .wk-item:hover .wk-item__ttl{ text-decoration:underline; text-underline-offset:.2em; } .wk-item__cat{ align-self:flex-start; margin-top:.9em; padding:.3em 1em; border:1px solid var(--tk-line); border-radius:4px; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--tk-ink-2); } @media (min-width:760px){ .wk-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* ★下層ページ：本文が回り込む写真（セクションに絡める片側ブリード） */ .tk-sidephoto{ margin:0 0 var(--tk-el-gap); position:relative; z-index:1; } .tk-sidephoto .tk-ph, .tk-sidephoto img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--tk-r); } .tk-sidephoto figcaption{ margin-top:.7em; font-size:14px; letter-spacing:.04em; color:var(--tk-ink-2); } @media (min-width:900px){ .tk-sidephoto{ float:right; width:min(44%,420px); margin:.2em 0 var(--tk-el-gap) clamp(28px,3.4vw,48px); } } /* ★強みのメリハリ：巨大数字＋単位＋短い一文 */ .tk-figure{ display:grid; gap:.2em; margin-top:var(--tk-sec-gap); position:relative; z-index:1; } .tk-figure__num{ display:flex; align-items:flex-end; gap:.1em; font-family:var(--tk-font-en); font-size:clamp(4rem,10vw,8.5rem); font-weight:600; line-height:.9; letter-spacing:-.01em; color:var(--tk-accent); } .tk-figure__unit{ font-family:var(--tk-font-ja); font-size:.22em; font-weight:900; letter-spacing:.06em; color:var(--tk-brand); padding-bottom:.35em; } .tk-figure__label{ font-size:14px; font-weight:700; letter-spacing:.14em; color:var(--tk-ink-2); } .tk-figure p{ margin-top:.6em; max-width:32em; } .tk-figures{ display:grid; grid-template-columns:1fr; gap:var(--tk-sec-gap); } @media (min-width:700px){ .tk-figures{ grid-template-columns:1fr 1fr; } } /* 強み見出しは一段大きく（メリハリ） */ .tk-h2--lg{ font-size:clamp(1.7rem,3.6vw,3.1rem); letter-spacing:.08em; font-weight:900; } /* ★求める人物像＝2×2 */ @media (min-width:700px){ .tk-reasons--2x2{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; } } /* 3列指定に上書きされないよう2×2を固定（スマホは1列） */ @media (min-width:900px){ .tk-reasons--2x2{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:699px){ .tk-reasons--2x2{ grid-template-columns:1fr; } } /* ★アイコン付きカルーセルカード */ .tk-slide--icon{ padding:clamp(20px,2.4vw,28px); } .tk-slide--icon .tk-slide__ttl{ margin-top:.9em; padding-inline:0; font-size:1.0625rem; letter-spacing:.04em; } .tk-slide--icon p{ padding-inline:0; margin-top:.5em; font-size:15px; line-height:1.8; } .tk-slide__icon{ display:flex; align-items:center; justify-content:center; width:auto; height:56px; } .tk-slide__icon img{ width:auto; height:100%; max-width:72px; object-fit:contain; } .tk-slide__icon svg{ width:24px; height:24px; fill:var(--tk-brand); stroke:var(--tk-brand); } /* ★キャリアのステップ（縦の導線＋番号バッジ＋カード） */ .tk-flow{ list-style:none; margin:calc(var(--tk-sec-gap) + 8px) 0 0; padding:0; display:grid; gap:clamp(24px,3vw,40px); position:relative; z-index:1; } .tk-flow__item{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2.4vw,32px); position:relative; } .tk-flow__item::before{ content:""; position:absolute; left:27px; top:60px; bottom:calc(-1 * clamp(24px,3vw,40px)); width:2px; background:var(--tk-line); } .tk-flow__item:last-child::before{ display:none; } .tk-flow__no{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:var(--tk-r-pill); background:var(--tk-brand); color:#fff; font-family:var(--tk-font-en); font-size:20px; font-weight:600; letter-spacing:.04em; } .tk-flow__card{ background:var(--tk-card); border-radius:var(--tk-r-lg); padding:clamp(20px,2.6vw,32px); box-shadow:0 8px 22px rgba(20,71,42,.06); } .tk-flow__ttl{ font-size:var(--tk-h3); font-weight:700; letter-spacing:.06em; color:var(--tk-brand); } .tk-flow__card p{ margin-top:.8em; } /* ★一日の流れ＝左に時刻、中央に縦のレール＋ドット、右に内容（時間フロー表現） */ .tk-timeline{ list-style:none; margin:var(--tk-sec-gap) 0 0; padding:0; display:grid; gap:0; position:relative; z-index:1; } .tk-timeline__item{ position:relative; display:grid; grid-template-columns:clamp(64px,9vw,110px) 1fr; gap:clamp(14px,2vw,28px); padding:0 0 clamp(26px,3vw,40px); } .tk-timeline__item::before{ content:""; position:absolute; top:.55em; bottom:0; left:clamp(64px,9vw,110px); width:2px; background:linear-gradient(180deg,#7CD936,rgba(0,171,111,.25)); } .tk-timeline__item:last-child::before{ display:none; } .tk-timeline__item::after{ content:""; position:absolute; top:.42em; left:clamp(64px,9vw,110px); width:14px; height:14px; margin-left:-6px; border-radius:50%; background:#fff; border:3px solid #00ab6f; } .tk-timeline__time{ display:block; padding-right:clamp(14px,1.6vw,22px); text-align:right; font-family:var(--tk-font-en); font-size:clamp(15px,1.3vw,19px); font-weight:600; letter-spacing:.04em; line-height:1.5; color:#008f5d; } .tk-timeline__body{ padding-left:clamp(16px,1.8vw,28px); } .tk-timeline__ttl{ font-size:var(--tk-h3); font-weight:900; letter-spacing:.04em; color:#000; } .tk-timeline__body p{ margin-top:.7em; font-size:15px; line-height:1.85; } /* ★ブログ一覧：2列カード＋サイドバー（最近の投稿／カテゴリ） */ .bg-layout{ display:grid; grid-template-columns:1fr; gap:clamp(32px,4vw,56px); margin-top:var(--tk-sec-gap); } .bg-list{ display:grid; grid-template-columns:1fr; gap:clamp(26px,3vw,40px) clamp(20px,2.6vw,32px); } .bg-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--tk-ink); } .bg-card__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .bg-card:hover .bg-card__media img{ opacity:.88; } .bg-card__meta{ display:flex; align-items:center; justify-content:space-between; gap:1em; margin-top:.9em; } .bg-card__date{ font-family:var(--tk-font-en); font-size:14px; font-weight:300; letter-spacing:.08em; color:var(--tk-ink-2); } .bg-card__cat{ padding:.15em .8em; border:1px solid var(--tk-brand); border-radius:3px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--tk-brand); } .bg-card__ttl{ margin-top:.5em; font-size:16px; font-weight:700; line-height:1.7; color:var(--tk-brand); } .bg-card:hover .bg-card__ttl{ text-decoration:underline; text-underline-offset:.2em; } .bg-side{ display:grid; gap:clamp(24px,3vw,36px); align-content:start; } .bg-panel{ border:1px solid var(--tk-line); } .bg-panel__ttl{ padding:.7em 1em; background:var(--tk-brand); color:#fff; font-size:15px; font-weight:700; letter-spacing:.08em; } .bg-recent, .bg-cat{ display:grid; } .bg-recent__item{ display:grid; gap:.2em; padding:.9em 1em; border-bottom:1px solid var(--tk-line); text-decoration:none; } .bg-recent__item:last-child, .bg-cat__row:last-child{ border-bottom:0; } .bg-recent__date{ font-family:var(--tk-font-en); font-size:13px; font-weight:300; letter-spacing:.08em; color:var(--tk-ink-2); } .bg-recent__ttl{ font-size:14px; font-weight:700; line-height:1.6; color:var(--tk-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bg-recent__item:hover .bg-recent__ttl{ color:var(--tk-brand); } .bg-cat__row{ display:flex; align-items:center; justify-content:space-between; gap:1em; min-height:48px; padding:.4em 1em; border-bottom:1px solid var(--tk-line); font-size:14px; font-weight:700; color:var(--tk-ink); text-decoration:none; } .bg-cat__row:hover{ background:var(--tk-base-2); color:var(--tk-brand); } .bg-cat__num{ min-width:34px; padding:.1em 0; background:var(--tk-base-2); border-radius:3px; font-family:var(--tk-font-en); font-size:13px; font-weight:400; text-align:center; color:var(--tk-ink-2); } @media (min-width:640px){ .bg-list{ grid-template-columns:1fr 1fr; } } @media (min-width:1000px){ .bg-layout{ grid-template-columns:1fr 300px; } } /* ★フォーム（静的な見た目の見本。実体はCueZillaが描画） */ .fm{ margin-top:var(--tk-sec-gap); display:grid; gap:0; } .fm__row{ display:grid; grid-template-columns:1fr; gap:.5em 24px; padding:clamp(16px,2vw,22px) 0; border-bottom:1px solid var(--tk-line); } .fm__row:first-child{ border-top:1px solid var(--tk-line); } .fm__label{ display:flex; align-items:flex-start; gap:.8em; font-size:16px; font-weight:700; letter-spacing:.04em; color:var(--tk-brand); } .fm__req{ flex:0 0 auto; padding:.15em .7em; border-radius:3px; background:#C0392B; color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; } .fm__req--any{ background:transparent; border:1px solid var(--tk-line); color:var(--tk-ink-2); } .fm__note{ display:block; margin-top:.4em; font-size:13px; font-weight:400; color:var(--tk-ink-2); } .fm__note--alert{ color:#C0392B; } .fm--stack .fm__req{ background:transparent; padding:0; color:#C0392B; font-size:13px; } .fm--stack .fm__label{ gap:2.4em; } .fm__field{ display:grid; gap:8px; } .fm__input, .fm__textarea, .fm__file{ width:100%; padding:.85em 1em; background:var(--tk-base-2); border:1px solid var(--tk-line); border-radius:8px; font-family:var(--tk-font-ja); font-size:16px; color:var(--tk-ink); } .fm__textarea{ min-height:200px; resize:vertical; } .fm__hint{ font-size:13px; color:var(--tk-ink-2); } .fm__opts{ display:flex; flex-wrap:wrap; gap:10px 22px; } .fm__opt{ display:flex; align-items:center; gap:.5em; min-height:44px; font-size:15px; } .fm__zip{ display:grid; grid-template-columns:auto 150px; gap:10px; align-items:center; } .fm__submit{ display:flex; justify-content:center; margin-top:var(--tk-sec-gap); } .fm__submit .tk-btn{ min-width:min(100%,340px); } @media (min-width:800px){ .fm__row{ grid-template-columns:280px 1fr; align-items:start; } } /* 応募フォーム：ラベル上・1列積み */ .fm--stack{ display:grid; gap:clamp(20px,2.4vw,28px); } .fm--stack .fm__row{ grid-template-columns:1fr; border:0; padding:0; } .fm--stack .fm__row:first-child{ border-top:0; } .fm--stack .fm__label{ justify-content:flex-start; } .fm--stack .fm__input, .fm--stack .fm__textarea, .fm--stack .fm__file{ background:var(--tk-base); } /* ------------------------------------------------------------------------- 15. 2分岐（完全2分割・ガター0＝split-full） ------------------------------------------------------------------------- */ .tk-split2{ display:grid; grid-template-columns:1fr; gap:0; } .tk-split2__col{ padding:clamp(36px,5vw,72px) clamp(24px,4vw,56px); display:flex; flex-direction:column; } .tk-split2__col--a{ background:var(--tk-tint); } .tk-split2__col--b{ background:var(--tk-card); } .tk-split2__ttl{ font-size:var(--tk-h3); font-weight:700; letter-spacing:.1em; color:var(--tk-brand); } .tk-split2__col p{ margin-top:.9em; } .tk-split2--dark .tk-split2__col p{ color:rgba(255,255,255,.94); } .tk-split2--dark .tk-split2__ttl{ color:#fff; } .tk-split2__col .tk-btns{ margin-top:auto; padding-top:var(--tk-el-gap); } /* ★窓口の振り分け＝緑地に白カードを横並び */ .tk-split2--cards{ background:#3BB68B url("https://cdn.cuezilla-cms.com/ew-mybusiness.site/images/1558/split-green.webp") center/cover no-repeat; padding-block:clamp(48px,7vw,96px); padding-inline:max(var(--tk-gutter),calc((100% - 1360px)/2)); gap:clamp(20px,2.6vw,32px); } .tk-split2--cards .tk-split2__col{ background:#fff; border-radius:var(--tk-r); padding:clamp(28px,3.4vw,44px); } .tk-split2--cards .tk-split2__ttl{ color:#000; display:flex; align-items:center; gap:.6em; } .tk-split2--cards .tk-split2__icon{ width:auto; height:1.9em; flex:0 0 auto; } .tk-split2--cards .tk-eyebrow{ color:#008f5d; } @media (min-width:900px){ .tk-split2--cards{ grid-template-columns:1fr 1fr; } } /* ------------------------------------------------------------------------- 16. 署名 tk-band-dark（濃緑パネル1章限定・面積は最大面の1/5以下） ------------------------------------------------------------------------- */ /* ★署名（参考② taiyoubiken.com 署名4）: 濃色パネルは斜めエッジで入る。 深さぶんの padding を足して、斜めが本文を削らないようにする。 */ .tk-band-dark{ position:relative; background:var(--tk-brand); color:#fff; overflow:hidden; padding-top:var(--tk-slant); clip-path:polygon(0 var(--tk-slant), 100% 0, 100% 100%, 0 100%); } .tk-band-dark p{ color:rgba(255,255,255,.94); } /* ★署名（参考② taiyoubiken.com 署名2）: 見出しキーワードに手描き感のマーカーを敷く。 白地でアクセント黄を「面」として使う唯一の用法（黄on白は1.68:1で文字には使えない）。 ★nowrap 必須 … span 内で行が折れると responsive-audit の span-break になる（実測知見）。 */ .tk-mark{ white-space:nowrap; padding-inline:.06em; background-image:linear-gradient(transparent 62%, rgba(242,194,0,.62) 62%, rgba(242,194,0,.62) 94%, transparent 94%); background-repeat:no-repeat; background-size:100% 100%; } .tk-h2--on-dark .tk-mark{ background-image:linear-gradient(transparent 62%, rgba(242,194,0,.42) 62%, rgba(242,194,0,.42) 94%, transparent 94%); } /* ------------------------------------------------------------------------- 17. 共通CTA（LINE／フォーム／電話の3ボタン） ------------------------------------------------------------------------- */ .tk-cta{ text-align:center; position:relative; z-index:1; } .tk-cta__ttl{ font-size:var(--tk-h2); font-weight:700; letter-spacing:var(--tk-ls-head); line-height:1.5; color:var(--tk-brand); } .tk-cta__ttl span{ display:block; } .tk-cta__ttl .tk-cta__ttl-1{ font-size:.62em; letter-spacing:.16em; margin-bottom:.2em; } .tk-cta p{ margin-top:var(--tk-el-gap); } .tk-cta .tk-btns{ justify-content:center; margin-top:clamp(36px,4.5vw,64px); } .tk-cta .tk-btn{ min-width:260px; justify-content:center; } /* 3つのボタン幅を揃える */ /* ★Contact：写真背景＋黒オーバーレイ（パララックス） */ .site-row--contact{ position:relative; background:#000 url("https://cdn.cuezilla-cms.com/ew-mybusiness.site/images/1558/contact-bg.webp") center/cover no-repeat; background-attachment:fixed; color:#fff; } .site-row--contact::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.58); } .site-row--contact > *{ position:relative; z-index:1; } .site-row--contact .tk-cta__ttl,.site-row--contact .tk-cta__ttl span{ color:#fff; } .site-row--contact .tk-h2,.site-row--contact .tk-eyebrow,.site-row--contact p,.site-row--contact .tk-cta__hours,.site-row--contact .tk-cta__tellabel{ color:#fff; } .site-row--contact .tk-cta__telno,.site-row--contact .tk-cta__telno:hover{ color:#fff; text-decoration:none; } .site-row--contact .tk-accent-solid{ color:#7CD936; } .site-row--contact .tk-btn--primary{ background:linear-gradient(135deg,#3BB68B,#7CD936); border:0; color:#fff; } .site-row--contact .tk-btn--primary:hover{ background:linear-gradient(135deg,#7CD936,#00A33F); color:#fff; } .site-row--contact .tk-btn--outline{ background:#fff; border:1px solid #00ab6f; color:#00ab6f; } /* For Businessカードのボタンと同じ */ .site-row--contact .tk-btn--outline:hover{ background:#00ab6f; color:#fff; border-color:#00ab6f; } @media (max-width:900px){ .site-row--contact{ background-attachment:scroll; } } .tk-cta__tel{ margin-top:var(--tk-el-gap); } .tk-cta__telno{ display:inline-flex; align-items:baseline; gap:.5em; font-family:var(--tk-font-en); font-size:var(--tk-h2); font-weight:600; letter-spacing:.04em; color:var(--tk-brand); text-decoration:none; } .tk-cta__tellabel{ font-family:var(--tk-font-en); font-size:14px; font-weight:300; letter-spacing:.24em; color:var(--tk-ink-2); } .tk-cta__hours{ font-size:16px; color:var(--tk-ink-2); } /* ------------------------------------------------------------------------- 18. ブログ／実績カード ------------------------------------------------------------------------- */ .tk-cards{ display:grid; grid-template-columns:1fr; gap:var(--tk-el-gap); margin-top:var(--tk-sec-gap); } .tk-card{ background:var(--tk-card); border-radius:var(--tk-r-lg); overflow:hidden; display:flex; flex-direction:column; } .tk-card__media{ aspect-ratio:4/3; } .tk-card__media img{ width:100%; height:100%; object-fit:cover; } .tk-card__body{ padding:clamp(18px,2.4vw,26px); display:flex; flex-direction:column; gap:.5em; flex:1; } .tk-card__meta{ display:flex; flex-wrap:wrap; gap:.5em 1em; align-items:baseline; } .tk-card__date{ font-family:var(--tk-font-en); font-size:14px; font-weight:300; letter-spacing:.1em; color:var(--tk-ink-2); } .tk-card__tag{ font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--tk-brand); } .tk-card__ttl{ font-size:17px; font-weight:700; line-height:1.6; } .tk-card__ttl a{ color:var(--tk-ink); text-decoration:none; } .tk-card__ttl a:hover{ color:var(--tk-brand); } /* ★トップのBLOG：カテゴリ（中央）→タイトル→写真の縦順カード */ .tk-blogcards{ display:grid; grid-template-columns:1fr; gap:clamp(20px,2.6vw,32px); margin-top:var(--tk-sec-gap); } .tk-blogcard{ display:flex; flex-direction:column; background:#fff; border-radius:0; border:1px solid var(--tk-line); padding:clamp(20px,2.4vw,30px); text-decoration:none; color:var(--tk-ink); box-shadow:none; }px rgba(20,71,42,.07); } .tk-blogcard:hover{ box-shadow:none; border-color:#3BB68B; } .tk-blogcard__cat{ text-align:center; font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--tk-brand); } .tk-blogcard__ttl{ margin-top:1.2em; font-size:15px; font-weight:700; line-height:1.8; } .tk-blogcard__media{ margin-top:1.4em; } .tk-blogcard__media img, .tk-blogcard__media .tk-ph{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:0; } @media (min-width:760px){ .tk-blogcards{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* ★BLOG：白地・カードは影なし1px罫・ボタンはヒーローと同じ緑グラデ */ .site-row--blog{ background:#fff; } .site-row--blog .tk-blogcard{ background:#fff; border:1px solid var(--tk-line); box-shadow:none; } .site-row--blog .tk-blogcard:hover{ box-shadow:none; border-color:#3BB68B; } .site-row--blog .tk-btns{ margin-top:clamp(48px,6vw,88px); } .site-row--blog .tk-btn{ background:linear-gradient(135deg,#3BB68B,#7CD936); border:0; color:#fff; } .site-row--blog .tk-btn:hover{ background:linear-gradient(135deg,#7CD936,#00A33F); color:#fff; } /* ------------------------------------------------------------------------- 19. 画像プレースホルダ（未支給スロット。data-ph に用途を書く） ------------------------------------------------------------------------- */ .tk-ph{ display:flex; align-items:center; justify-content:center; text-align:center; aspect-ratio:4/3; padding:1.5em; background: repeating-linear-gradient(45deg, #E6EDE8 0 12px, #F2F6F3 12px 24px); color:var(--tk-ink-2); font-size:14px; letter-spacing:.06em; border-radius:var(--tk-r); } .tk-ph--portrait{ aspect-ratio:4/5; } /* ------------------------------------------------------------------------- 20. フッター（R-22＝共通ブロック） ------------------------------------------------------------------------- */ .sf{ background:#008c5b; color:#fff; } .sf__inner{ padding-block:var(--tk-row-pad) 32px; } .sf__top{ display:grid; grid-template-columns:1fr; gap:var(--tk-sec-gap); } .sf__logo{ width:180px; height:auto; } .sf__addr{ margin-top:var(--tk-el-gap); font-size:16px; color:rgba(255,255,255,.92); } .sf__addr a,.sf__addr a:hover{ color:#fff; text-decoration:none; } .sf__license{ margin-top:.8em; font-size:16px; color:rgba(255,255,255,.82); } .sf__navs{ display:grid; grid-template-columns:1fr; gap:clamp(20px,2.6vw,32px); align-content:start; } .sf__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; } .sf__list a{ display:flex; align-items:center; min-height:44px; color:#fff; text-decoration:none; font-size:16px; letter-spacing:.04em; } .sf__list a:hover{ color:var(--tk-accent); } .sf__bottom{ margin-top:var(--tk-sec-gap); padding-top:20px; border-top:1px solid rgba(255,255,255,.55); display:flex; flex-wrap:wrap; gap:.6em 1.6em; align-items:center; justify-content:space-between; } .sf__copy{ font-size:16px; color:rgba(255,255,255,.86); } /* ------------------------------------------------------------------------- 21. リビール（署名DNA reveal: fade-up, char-stagger） ★JSが動かないときの戻しを必ず用意する（design-top-draft 手順4）。 ------------------------------------------------------------------------- */ [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity var(--tk-dur) var(--tk-ease), transform var(--tk-dur) var(--tk-ease); } [data-reveal].is-in{ opacity:1; transform:none; } /* stagger: 子要素が順に出る（参考①の「カード群が順に立ち上がる」性格）。 ★1文字ずつ span に割る文字ずらしは採らない（inline-block が独立した client rect を作り 「行末孤立」の誤検出になるため）。順序の演出はこの粒度で再現する。 */ [data-reveal="stagger"]{ opacity:1; transform:none; } [data-reveal="stagger"] > *{ opacity:0; transform:translateY(24px); transition:opacity var(--tk-dur) var(--tk-ease), transform var(--tk-dur) var(--tk-ease); } [data-reveal="stagger"].is-in > *{ opacity:1; transform:none; } [data-reveal="stagger"].is-in > *:nth-child(2){ transition-delay:.08s; } [data-reveal="stagger"].is-in > *:nth-child(3){ transition-delay:.16s; } [data-reveal="stagger"].is-in > *:nth-child(4){ transition-delay:.24s; } [data-reveal="stagger"].is-in > *:nth-child(5){ transition-delay:.32s; } [data-reveal="stagger"].is-in > *:nth-child(6){ transition-delay:.40s; } [data-reveal="stagger"].is-in > *:nth-child(n+7){ transition-delay:.48s; } @media (scripting: none){ [data-reveal], [data-reveal="stagger"] > *{ opacity:1 !important; transform:none !important; transition-delay:0s !important; } [data-opening], .site-open, .splash, .opening{ display:none !important; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } [data-reveal], [data-reveal="stagger"] > *{ opacity:1 !important; transform:none !important; transition-delay:0s !important; } html{ scroll-behavior:auto; } } /* ------------------------------------------------------------------------- 22. 下層ページ（FVは英字ラベル＋ページ名の2要素のみ・design_rules） ------------------------------------------------------------------------- */ .subhero{ position:relative; background:var(--tk-brand) url("https://cdn.cuezilla-cms.com/ew-mybusiness.site/images/1558/subhero-bg.webp") center/cover no-repeat; color:#fff; overflow:hidden; } .subhero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); } .subhero__inner{ padding-block:clamp(56px,7vw,96px); position:relative; z-index:1; } .subhero__en{ display:block; font-family:var(--tk-font-en); font-size:clamp(2rem,5vw,4rem); font-weight:300; letter-spacing:.22em; line-height:1; color:rgba(255,255,255,.42); } .subhero__ja{ display:block; margin-top:.4em; font-size:var(--tk-h1-sub); font-weight:700; letter-spacing:var(--tk-ls-head); color:#fff; } .crumbs{ background:var(--tk-base-2); } .crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4em .8em; } .crumbs li{ display:flex; align-items:center; gap:.8em; font-size:14px; color:var(--tk-ink-2); } .crumbs li + li::before{ content:"／"; color:var(--tk-line); } .crumbs a{ display:inline-flex; align-items:center; min-height:44px; padding-inline:2px; color:var(--tk-ink-2); text-decoration:none; } .crumbs a:hover{ color:var(--tk-brand); } /* 下層の汎用ブロック */ .tk-prose > * + *{ margin-top:1.1em; } .tk-table{ width:100%; border-collapse:collapse; font-size:16px; border-top:1px solid var(--tk-line); } .tk-table th,.tk-table td{ padding:16px 14px; border-bottom:1px solid var(--tk-line); text-align:left; vertical-align:top; } .tk-table th{ width:32%; font-weight:700; color:var(--tk-brand); background:rgba(233,242,236,.85); white-space:nowrap; } .tk-table--scroll{ overflow-x:auto; } /* ★募集要項：カード化＋項目内の小構造 */ .tk-table--scroll:has(.tk-table){ background:#fff; border-radius:var(--tk-r-lg); box-shadow:0 12px 32px rgba(20,71,42,.07); overflow:hidden; } .tk-table--scroll .tk-table{ border-top:0; } .tk-table--scroll .tk-table > tbody > tr:last-child > *{ border-bottom:0; } .tk-table--scroll .tk-table > tbody > tr > th{ width:200px; padding:22px 24px; vertical-align:middle; letter-spacing:.08em; } .tk-table--scroll .tk-table > tbody > tr > td{ padding:22px 28px; line-height:1.85; } .tk-table td strong{ color:var(--tk-ink); font-size:1.06em; } .tk-table__note{ display:block; margin-top:.5em; font-size:14px; color:var(--tk-muted,#5d6760); } .tk-table__em{ display:inline-block; margin-top:.8em; padding:.3em .9em; border-radius:999px; background:var(--tk-accent,#f3c64a); color:var(--tk-ink); font-weight:700; font-size:14px; } .tk-table__list{ list-style:none; margin:0; padding:0; display:grid; gap:.35em; } .tk-table__list li{ position:relative; padding-left:1.1em; } .tk-table__list li::before{ content:""; position:absolute; left:0; top:.8em; width:6px; height:6px; border-radius:50%; background:var(--tk-brand); } .tk-table__kv{ display:grid; grid-template-columns:max-content 1fr; gap:.4em 1.4em; margin:0; } .tk-table__kv dt{ font-weight:700; color:var(--tk-brand); } .tk-table__kv dd{ margin:0; } .tk-table__tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .tk-table__tags li{ padding:.35em 1em; border-radius:999px; background:rgba(233,242,236,.95); color:var(--tk-brand); font-weight:700; font-size:14px; } .tk-table__sub{ margin-top:.7em; border-radius:var(--tk-r); overflow:hidden; border:1px solid var(--tk-line); max-width:560px; } .tk-table__sub table{ width:100%; border-collapse:collapse; font-size:15px; } .tk-table__sub th,.tk-table__sub td{ padding:10px 14px; border-bottom:1px solid var(--tk-line); text-align:left; white-space:normal; background:none; width:auto; } .tk-table__sub thead th{ background:var(--tk-brand); color:#fff; font-size:13px; letter-spacing:.06em; } .tk-table__sub tbody tr:nth-child(even) td{ background:rgba(233,242,236,.5); } .tk-table__sub tbody tr:last-child td{ border-bottom:0; } .tk-table__sub td:not(:first-child),.tk-table__sub th:not(:first-child){ text-align:right; font-variant-numeric:tabular-nums; font-weight:700; } .tk-steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--tk-el-gap); counter-reset:tkstep; } .tk-step{ display:grid; grid-template-columns:auto 1fr; gap:0 clamp(16px,2.4vw,28px); padding-bottom:var(--tk-el-gap); border-bottom:1px solid var(--tk-line); } .tk-step__no{ font-family:var(--tk-font-en); font-size:var(--tk-h2); font-weight:300; line-height:1; letter-spacing:.04em; color:var(--tk-brand); } .tk-step__ttl{ font-size:var(--tk-h3); font-weight:700; letter-spacing:.06em; color:var(--tk-brand); } .tk-step__body{ grid-column:2; } .tk-step__body p + p{ margin-top:.7em; } .tk-qa{ display:grid; gap:var(--tk-el-gap); } .tk-qa__item{ background:#fff; border:1px solid var(--tk-line); border-radius:0; padding:clamp(20px,3vw,30px); } .tk-qa__q{ font-size:var(--tk-h3); font-weight:700; letter-spacing:.05em; color:var(--tk-brand); } .tk-qa__a{ margin-top:.8em; } .tk-qa__a > * + *{ margin-top:.8em; } .tk-qa__a .tk-btns{ margin-top:clamp(36px,4vw,56px); } /* ボタンのある回答だけ上の余白を広げる */ .tk-note{ font-size:16px; color:var(--tk-ink-2); } .tk-anchor-nav{ display:flex; flex-wrap:wrap; gap:12px; } .tk-nextlinks{ display:grid; grid-template-columns:1fr; gap:var(--tk-el-gap); } .tk-nextlink{ display:flex; align-items:center; justify-content:space-between; gap:1em; min-height:72px; padding:18px clamp(18px,2.4vw,28px); background:linear-gradient(135deg,#3BB68B,#7CD936); border-radius:var(--tk-r-lg); text-decoration:none; color:var(--tk-ink); } .tk-nextlink:hover{ background:linear-gradient(135deg,#7CD936,#00A33F); } .tk-nextlink__ttl{ font-weight:700; letter-spacing:.06em; color:#fff; } .tk-nextlink,.tk-nextlink .tk-btn__arrow{ color:#fff; } /* Nextセクションの地は白 */ .site-row--base2:has(.tk-nextlinks){ background:#fff; } .tk-nextlink__en{ display:block; font-family:var(--tk-font-en); font-size:12px; font-weight:300; letter-spacing:.2em; color:rgba(255,255,255,.85); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ------------------------------------------------------------------------- 23. レスポンシブ（モバイルファースト＝ここから上へ拡張） ------------------------------------------------------------------------- */ @media (min-width: 640px){ .tk-reasons{ grid-template-columns:repeat(2,minmax(0,1fr)); } .tk-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } .tk-nextlinks{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width: 900px){ .tk-reasons{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* 900px以上で3列（640〜899pxは2列＝カード幅を確保） */ .tk-reasons--2x2{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* 求める人物像は上2下2 */ .tk-split2{ grid-template-columns:1fr 1fr; } .tk-alt__row{ grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); } .tk-alt__row--rev .tk-alt__media{ order:2; } .tk-alt__body{ width:auto; margin-inline:0; padding-inline:0; } .sf__top{ grid-template-columns:1fr 1.2fr; } /* ★3列にすると1列が約173pxになり「依頼を検討される方へ」が折り返す（実測）。2列で確保する */ .sf__navs{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.6vw,32px); } } /* 片側ブリード（900px以上でのみ端まで抜く。狭幅は写真を器に収める） ★% ではなく幾何変数 --tk-bleed で算出する（grid アイテムの中でも値が変わらない） */ @media (min-width: 900px){ .tk-alt__media{ width:calc(100% - var(--tk-bleed)); } .tk-alt__row:not(.tk-alt__row--rev) .tk-alt__media{ margin-left:var(--tk-bleed); } .tk-alt__row--rev .tk-alt__media{ margin-right:var(--tk-bleed); } /* 採用パネルの写真も大小2枚組にする（小さい方が画面右端に接触） */ .tk-split2__col--photo{ position:relative; } /* ★面積比が0.3を割ると photo-duo に数えられないため大きく取る（判定条件は 0.3〜0.8） */ /* ★小さい方が画面端に接触していないと photo-duo に数えられない。判定は window.innerWidth 基準なので スクロールバー幅ぶん（実測15px）外へ出す。セクション側の overflow:hidden で切り取られるため 横スクロールは発生しない（shoot の canScrollX で確認済み）。 */ .tk-split2__duo{ position:absolute; right:-32px; bottom:clamp(16px,3vw,40px); width:80%; } } /* ナビが出る最小幅帯（1180-1319px）専用の縮小ティア ★ヘッダーにロゴ画像＋2段ナビ＋CTAを並べると中間幅で溢れるため（教訓 intermediate-width-breakage） */ @media (min-width:1180px) and (max-width:1319px){ .sh__list{ gap:8px; } .sh__ja{ font-size:14px; letter-spacing:.02em; } .sh__en{ display:none; } .sh__logo{ width:132px; } .sh__brandname{ display:none; } } @media (max-width:1179px){ /* ドロワー（CueZilla Commons v1.3 の p-hamburger / #p-drawer に合わせる） */ .sh__toggle{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-width:76px; min-height:48px; padding-inline:1.1em; margin-left:auto; background:var(--tk-brand); color:#fff; border:0; border-radius:var(--tk-r-pill); font-family:var(--tk-font-ja); font-size:13px; font-weight:700; letter-spacing:.08em; cursor:pointer; } .sh__nav{ position:fixed; top:76px; left:0; right:0; bottom:0; margin:0; height:calc(100dvh - 76px); overflow-y:auto; background:var(--tk-base); border-bottom:0; display:none; padding:20px var(--tk-gutter) 40px; } .sh__nav.is-open{ display:block; } body.is-navopen{ overflow:hidden; } .sh__list{ flex-direction:column; gap:0; } .sh__link{ flex-direction:row; justify-content:flex-start; gap:.8em; min-height:56px; border-bottom:1px solid var(--tk-line); } /* 子ページは開閉式（キャレットをタップで開く） */ .sh__sub{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0; background:transparent; padding:0 0 8px 1.4em; min-width:0; display:none; } .sh__item.is-open > .sh__sub{ display:block; } .sh__caret{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:auto; transition:transform .2s; } .sh__item.is-open .sh__caret{ transform:rotate(180deg); } .sh__cta{ margin:16px 0 0; } .sh__cta .tk-btn{ width:100%; } } @media (max-width:900px){ .fv{ grid-template-columns:1fr; gap:clamp(20px,4vw,32px); height:auto; min-height:calc(100svh - 76px); } .fv__title .fv__title-2{ white-space:normal; } /* 狭幅ではnowrapが横にはみ出し右余白が消えるため解除 */ .fv__photo{ grid-column:1; grid-row:1; } .fv__panel{ grid-column:1; grid-row:2; margin:0; border-radius:0; width:100%; background:none; grid-template-columns:1fr; } .fv__panel .tk-btns{ grid-column:1; grid-row:auto; flex-wrap:wrap; margin-top:var(--tk-el-gap); } } @media (max-width:400px){ .sh__brandname{ display:none; } .sh__logo{ width:112px; } } /* ------------------------------------------------------------------------- 24. 全幅2分割の写真側（split-full の2本目＝採用への橋渡しセクション） ------------------------------------------------------------------------- */ .tk-split2__col--photo{ padding:0; } .tk-split2__col--photo img{ width:100%; height:100%; min-height:clamp(320px,44vw,620px); object-fit:cover; } .tk-split2--dark .tk-split2__col--a{ background:var(--tk-brand); } .tk-split2__inner{ position:relative; z-index:1; } /* FVの小写真（photo-duo：小さい方が右端に接触） */ .fv__duo{ position:absolute; z-index:1; right:0; bottom:clamp(24px,5vw,72px); width:min(38%, 380px); } .fv__duo img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--tk-r) 0 0 var(--tk-r); box-shadow:0 18px 40px rgba(20,71,42,.28); border:6px solid var(--tk-base); border-right:0; } @media (max-width:899px){ .fv__duo{ display:none; } } /* 採用パネルの小写真（photo-duo の2本目） */ .tk-split2__duo img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--tk-r) 0 0 var(--tk-r); border:6px solid var(--tk-brand); border-right:0; } @media (max-width:899px){ .tk-split2__duo{ display:none; } } /* 最小幅では「よくあるご相談」の器を外して行幅を稼ぐ（本文16pxを落とさずに行末孤立を避ける） */ @media (max-width:480px){ .tk-tickbox{ padding:0; background:transparent; } /* 22字級の相談リストが1行に収まるよう、狭幅ではチェック印をインラインにして字下げを外す （本文16pxは落とさない。★ウェブフォント未読込時のフォールバック書体は字幅が広く、 responsive-audit は読込前の幅で測ることがあるため余裕を大きく取る） */ /* ★プロポーショナル仮名（palt）で約3%詰める。font-size は16pxのまま＝本文サイズの二重基準を作らない */ .tk-ticks li{ letter-spacing:0; font-feature-settings:"palt" 1; padding:.8em .9em; } } /* 900〜1100px 帯では「よくあるご相談」の器を外して行幅を稼ぐ（1024pxで行末孤立が出る実測に対応） */ @media (min-width:900px) and (max-width:1100px){ .tk-tickbox{ padding:12px 0; background:transparent; } } /* コラージュは1024px以上で2列＋左端ブリード（900px帯だと本文列が狭く相談リストが折り返す実測） */ @media (min-width:1024px){ .tk-collage{ grid-template-columns:1fr 1.18fr; gap:clamp(32px,4vw,64px); } .tk-collage__media{ margin-left:var(--tk-bleed); width:calc(100% - var(--tk-bleed)); } .tk-collage__main{ margin-left:calc(var(--tk-bleed) * -1); } .tk-collage__sub{ width:52%; margin:-14% auto 0 0; } } /* 狭幅の文字組み調整（行末に1〜2文字だけ残るのを防ぐ。本文16pxは落とさず、 見出しの字間・カードの内側余白で行幅を稼ぐ） */ @media (max-width:640px){ :root{ --tk-h2: 1.375rem; /* 22px：13字級の和文見出しが2行で収まる幅 */ --tk-ls-head: .10em; /* 特大見出しの開き字間は1440px基準（量契約）。狭幅では詰める */ } } @media (max-width:900px){ .tk-reason{ padding:clamp(16px,2vw,26px); } /* 2列時のカード内で19字級が1行に収まる幅を確保 */ } @media (max-width:480px){ .tk-reason{ padding:16px 12px; } } /* 最小幅帯は左右の余白と見出しサイズをさらに詰める（行末孤立の実測に対応） */ @media (max-width:440px){ :root{ --tk-gutter:12px; --tk-h2:1.25rem; } } /* 濃色パネルの列は本文列より狭いため、見出しを一段小さく・字間を詰める（recruit.html の行末孤立の実測に対応） */ .tk-split2--dark .tk-h2{ font-size:clamp(1.375rem,2.2vw,2rem); letter-spacing:.12em; } /* 狭幅では和文をプロポーショナル仮名（palt）で組む。約3%詰まるため、 本文16pxを落とさずに「24字級の行が414pxで2行に割れる」を避けられる。 ★font-size は変えていない（本文サイズの二重基準を作らない＝body-size-no-double-standard）。 */ @media (max-width:480px){ body, .tk-lead p, .tk-reason p, .tk-qa__a p, .tk-step__body p, .tk-ticks li, .tk-table td{ font-feature-settings:"palt" 1; } } /* ------------------------------------------------------------------------- 行末孤立（orphan）の解消 ★2026-08-26 24字級の短文は幅414px前後で「…たい」「…ます」の2文字だけが最終行に残る （実測: request-personal の tk-ticks li と tk-reason p の2件が responsive-audit NG）。 本文16pxは落とさない（教訓 body-size-no-double-standard ＝本文サイズの二重基準を作らない）ので、 font-size ではなく**行を均す**方で解く。text-wrap:balance は数行のブロックにしか効かないため 対象は「短い li」「1文の p」に限る。デスクトップ幅の実測値（layout採取・量契約・quantity-match）へ 影響させないよう、当てるのは狭い幅だけにする。 ※balance は行長を揃えるので ragged（要目視）が増える方向に振れる。NG を 要目視 に替える判断。 ------------------------------------------------------------------------- */ @media (max-width:600px){ /* ★tk-step__body p は除外 … balance を当てると 375px で別の孤立（「す。」）が新規発生した（実測）。 balance は「行長を揃える」ので、行数が変わる長さの文では孤立を作る側に振れる。 */ .tk-ticks li, .tk-reason p, .tk-reason__ttl{ word-break:auto-phrase; } } /* ★1023px以下は「PCのトリミング比」に合わせて画像を表示する（PCの指定は変更しない／ヒーローは除く） */ @media (max-width:700px){ /* スマホは表を縦並びに */ .tk-table,.tk-table tbody,.tk-table tr,.tk-table th,.tk-table td{ display:block; width:auto; } .tk-table tr{ border-bottom:1px solid var(--tk-line); } .tk-table th{ width:auto; white-space:normal; border-bottom:0; padding:12px 14px 6px; } .tk-table td{ border-bottom:0; padding:0 14px 14px; } .tk-table--scroll .tk-table > tbody > tr > th{ width:auto; padding:18px 18px 6px; } .tk-table--scroll .tk-table > tbody > tr > td{ padding:0 18px 18px; } .tk-table__sub table,.tk-table__sub thead,.tk-table__sub tbody{ display:table-row-group; } .tk-table__sub table{ display:table; } .tk-table__sub tr{ display:table-row; } .tk-table__sub th,.tk-table__sub td{ display:table-cell; padding:8px 10px; font-size:13px; } /* スマホはボタンを中央揃え */ .tk-btns{ justify-content:center!important; } .tk-btns > .tk-btn{ width:100%; max-width:340px; } } /* タブレット横（1024〜1180幅の横向き）もヒーロー写真を低くする */ @media (min-width:1024px) and (max-width:1180px) and (orientation:landscape){ .fv__photo[data-fv-slider]{ height:clamp(300px,48vh,480px); } .fv__photo img{ height:100%; } } @media (max-width:1023px) and (orientation:portrait){ /* タブレット縦は3枚カードを1列にして読みやすくする */ .tk-reasons.tk-reasons--cards{ grid-template-columns:1fr; } } @media (max-width:1023px) and (orientation:portrait){ /* 縦表示のフッターメニューは項目間に仕切り線 */ .sf__navs{ row-gap:0; } .sf__list li + li a,.sf__list li:first-child a{ border-top:1px solid rgba(255,255,255,.55); } .sf__list li:last-child a{ border-bottom:1px solid rgba(255,255,255,.55); } .sf__list:not(:last-child) li:last-child a{ border-bottom:0; } /* 列の継ぎ目は2列目の上線1本にする */ } @media (max-width:1023px){ /* 縦並びのときはRecruitの写真を見出しより上に */ .site-row--recruit .tk-collage__media{ order:-1; } /* iPad mini などではヒーロー写真を低くしてキャッチコピーをファーストビューに収める */ .fv__photo[data-fv-slider]{ height:clamp(260px,40vh,420px); } .fv__photo img{ height:100%; } } /* iPad mini 縦などタブレット縦は元の高さ（500px）に戻す */ @media (min-width:700px) and (max-width:1023px) and (orientation:portrait){ .fv__photo[data-fv-slider]{ height:500px; } .fv__photo img{ height:500px; } .fv__panel .tk-btns{ justify-content:flex-start; justify-self:start; } /* タブレット縦はヒーローのボタンを左寄せ */ } @media (max-width:1359px){ .site-row--issues .tk-collage__main img{ height:auto; aspect-ratio:183/100; } .site-row--recruit .tk-collage__main img{ height:auto; aspect-ratio:175/100; } } /* ★スマホはヒーロー全体（キャッチコピー・ボタン）をファーストビューに収める （後方に置いて max-width:1023px の指定を上書きする） */ @media (max-width:700px){ .fv{ min-height:calc(100svh - 76px); padding-bottom:clamp(20px,4vw,32px); gap:16px; align-content:center; } .fv__photo[data-fv-slider]{ height:clamp(200px,30vh,280px); } .fv__photo img{ height:100%; } .fv__note{ margin-top:.8em; } .fv__panel .tk-btns{ margin-top:14px; gap:10px; } } /* ★下層3ページのレイアウト強化（サイト共通の語彙に沿う） 1) 章ごとの巨大英字ゴースト用に Row を relative に 2) カード群に 01.. の連番ラベル（本文は変えずに階層を出す） 3) 「」の呼びかけ文はカード型の引用ブロックに */ .site-row--ghost{ position:relative; overflow:hidden; } .tk-reasons--num{ counter-reset:tkr; } .tk-reasons--num .tk-reason{ counter-increment:tkr; position:relative; } .tk-reasons--num .tk-reason__ttl::before{ content:counter(tkr,decimal-leading-zero); display:block; font-family:var(--tk-font-en); font-size:13px; font-weight:600; letter-spacing:.16em; color:#00ab6f; margin-bottom:.55em; } .tk-reasons--num .tk-reason::after{ content:""; position:absolute; left:0; top:0; width:clamp(40px,4vw,64px); height:3px; background:linear-gradient(90deg,#00ab6f,#7CD936); } .tk-quotes{ list-style:none; margin:var(--tk-el-gap) 0 0; padding:0; display:grid; gap:12px; } @media (min-width:820px){ .tk-quotes{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .tk-quotes li{ position:relative; padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,30px) clamp(20px,2.2vw,28px) clamp(48px,4.4vw,64px); background:var(--tk-card); border:1px solid var(--tk-line); border-radius:var(--tk-r); font-size:clamp(16px,1.15vw,18px); font-weight:700; line-height:1.7; color:var(--tk-brand); text-wrap:pretty; } .tk-quotes li::before{ content:"“"; position:absolute; left:clamp(16px,1.6vw,22px); top:.1em; font-family:var(--tk-font-en); font-size:clamp(38px,3.4vw,52px); font-weight:600; line-height:1; color:#7CD936; } .site-row--tint .tk-quotes li{ background:var(--tk-base); } /* ★事業者ページ Flexible / Scope：見出しを左に固定した2カラム＋行リスト／工種タイル */ .tk-splitsec{ display:grid; grid-template-columns:1fr; gap:clamp(28px,3.4vw,56px); align-items:start; position:relative; z-index:1; } @media (min-width:980px){ .tk-splitsec{ grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:clamp(40px,4.4vw,80px); } .tk-splitsec__head{ position:sticky; top:calc(76px + 32px); } } .tk-rows{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--tk-line); counter-reset:tkw; } .tk-rows li{ counter-increment:tkw; display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,1.8vw,28px); padding:clamp(20px,2.4vw,30px) 0; border-bottom:1px solid var(--tk-line); } .tk-rows li::before{ content:counter(tkw,decimal-leading-zero); font-family:var(--tk-font-en); font-size:clamp(22px,2.2vw,32px); font-weight:300; line-height:1.1; color:#00ab6f; } .tk-rows__ttl{ font-size:var(--tk-h3); font-weight:700; letter-spacing:.04em; color:var(--tk-brand); } .tk-rows__ttl + p{ margin-top:.7em; } .tk-rows p + p{ margin-top:.7em; } .tk-scope{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } @media (min-width:760px){ .tk-scope{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .tk-scope li{ counter-increment:tks; display:flex; flex-direction:column; justify-content:space-between; gap:.8em; min-height:clamp(100px,10vw,130px); padding:clamp(16px,1.8vw,22px); background:var(--tk-base); border:1px solid var(--tk-line); border-radius:var(--tk-r); font-weight:700; letter-spacing:.02em; color:var(--tk-brand); text-wrap:pretty; } .tk-scope{ counter-reset:tks; } .tk-scope li::before{ content:counter(tks,decimal-leading-zero); font-family:var(--tk-font-en); font-size:13px; font-weight:600; letter-spacing:.16em; color:#00ab6f; } /* ★個人ページ Menu：巨大アウトライン数字を敷いたワイドカード（事業者ページのタイルとは別表現） */ .tk-menu{ list-style:none; margin:var(--tk-sec-gap) 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:clamp(16px,1.8vw,24px); counter-reset:tkm; position:relative; z-index:1; } @media (min-width:820px){ .tk-menu{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .tk-menu li{ counter-increment:tkm; position:relative; overflow:hidden; padding:clamp(26px,3vw,38px); background:var(--tk-card); border-radius:var(--tk-r-lg); } .tk-menu li::before{ content:counter(tkm,decimal-leading-zero); position:absolute; right:clamp(10px,1.4vw,20px); top:-.14em; font-family:var(--tk-font-en); font-size:clamp(84px,9vw,140px); font-weight:600; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(0,171,111,.28); pointer-events:none; } .tk-menu__ttl{ position:relative; font-size:var(--tk-h3); font-weight:700; letter-spacing:.04em; color:var(--tk-brand); } .tk-menu__ttl::after{ content:""; display:block; width:clamp(36px,3.4vw,52px); height:3px; margin-top:.7em; background:linear-gradient(90deg,#00ab6f,#7CD936); } .tk-menu p{ position:relative; margin-top:1em; } @media (min-width:820px){ .tk-menu li:last-child{ grid-column:1 / -1; } } /* ★個人ページ Cost：カードではなく縦罫で区切る4連バンド */ .tk-points{ list-style:none; margin:var(--tk-sec-gap) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.2vw,28px); counter-reset:tkp; position:relative; z-index:1; } @media (min-width:900px){ .tk-points{ grid-template-columns:repeat(4,minmax(0,1fr)); } } .tk-points li{ counter-increment:tkp; padding-top:clamp(16px,1.8vw,22px); border-top:2px solid rgba(0,171,111,.35); font-weight:700; letter-spacing:.02em; color:var(--tk-brand); text-wrap:pretty; } .tk-points li::before{ content:"POINT " counter(tkp); display:block; margin-bottom:.7em; font-family:var(--tk-font-en); font-size:12px; font-weight:600; letter-spacing:.18em; color:#00ab6f; } /* ★全ページ レスポンシブ調整（新規コンポーネントの小画面での詰めと安全策） */ img,svg,video{ max-width:100%; } @media (max-width:900px){ .tk-splitsec{ gap:clamp(22px,3vw,34px); } .tk-splitsec__head{ position:static; } } @media (max-width:640px){ /* 一日の流れ：時刻列を詰めてレールを内側に */ .tk-timeline__item{ grid-template-columns:56px 1fr; gap:12px; padding-bottom:22px; } .tk-timeline__item::before,.tk-timeline__item::after{ left:56px; } .tk-timeline__time{ font-size:14px; padding-right:10px; } .tk-timeline__body{ padding-left:14px; } .tk-timeline__body p{ font-size:14px; line-height:1.8; } /* Flexibleの行リスト：数字を小さく */ .tk-rows li{ grid-template-columns:auto 1fr; gap:12px; padding:18px 0; } .tk-rows li::before{ font-size:20px; } /* Menuの巨大アウトライン数字が本文に重ならないよう縮小 */ .tk-menu li::before{ font-size:64px; right:6px; } .tk-menu li{ padding:22px 20px; } /* 引用カード・工種タイル・POINT */ .tk-quotes li{ padding:18px 18px 18px 44px; font-size:15px; } .tk-quotes li::before{ font-size:34px; left:14px; } .tk-scope li{ min-height:88px; padding:14px; font-size:14px; } .tk-points{ gap:16px; } /* フォーム：郵便番号は縦積み、送信ボタンは全幅 */ .fm__zip{ grid-template-columns:1fr; } .fm__submit .tk-btn{ min-width:100%; } /* 業務案内カード */ .tk-gcard__ttl{ font-size:clamp(17px,4.6vw,20px); } } @media (max-width:400px){ .tk-scope{ grid-template-columns:1fr; } .tk-scope li{ min-height:0; flex-direction:row; align-items:center; gap:.8em; } .tk-points{ grid-template-columns:1fr; } .tk-timeline__item{ grid-template-columns:52px 1fr; } .tk-timeline__item::before,.tk-timeline__item::after{ left:52px; } } /* ★下層ページの写真を大きく（PC幅で小さく見えていたため） */ @media (min-width:900px){ .tk-sidephoto{ width:min(50%,560px); margin-left:clamp(32px,3.6vw,56px); } } @media (min-width:1280px){ .tk-sidephoto{ width:min(52%,660px); } } /* ★採用CTAの写真：PC幅で画面右端までブリードさせて大きく見せる */ @media (min-width:900px){ .page-recruit .site-row--recruit .tk-collage{ grid-template-columns:1fr 1.25fr; align-items:center; } .page-recruit .site-row--recruit .tk-collage__media{ margin-right:calc(50% - 50vw); width:calc(100% + (50vw - 50%)); } .page-recruit .site-row--recruit .tk-collage__main img, .page-recruit .site-row--recruit .tk-collage__main .tk-ph{ height:clamp(440px,42vw,660px); aspect-ratio:auto; width:100%; object-fit:cover; object-position:60% 40%; border-radius:0; } } /* ★写真拡大にともなう不自然な余白の解消：横長比率にして高さを抑える／CTAは本文高さに揃える */ @media (min-width:900px){ .tk-sidephoto{ width:min(48%,560px); } .tk-sidephoto .tk-ph, .tk-sidephoto img{ aspect-ratio:3/2; } } @media (min-width:1280px){ .tk-sidephoto{ width:min(50%,620px); } } @media (min-width:900px){ .page-recruit .site-row--recruit .tk-collage{ align-items:stretch; } .page-recruit .site-row--recruit .tk-collage__media{ display:flex; } .page-recruit .site-row--recruit .tk-collage__main{ flex:1 1 auto; display:flex; } .page-recruit .site-row--recruit .tk-collage__main img, .page-recruit .site-row--recruit .tk-collage__main .tk-ph{ height:100%; min-height:420px; } } /* ★採用CTAの写真も角丸で統一 */ .site-row--recruit .tk-collage__main img, .site-row--recruit .tk-collage__main .tk-ph, .page-recruit .site-row--recruit .tk-collage__main img, .page-recruit .site-row--recruit .tk-collage__main .tk-ph{ border-radius:var(--tk-r); } @media (min-width:900px){ .page-recruit .site-row--recruit .tk-collage__media{ margin-right:0; width:100%; } } /* ★一日の流れ：縦長を解消（PCは2列、余白と本文を圧縮） */ .tk-timeline__item{ padding-bottom:clamp(18px,2vw,26px); } .tk-timeline__body p{ margin-top:.5em; } @media (min-width:900px){ .tk-timeline{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(32px,4vw,72px); } .tk-timeline__item{ grid-template-columns:clamp(56px,5vw,78px) 1fr; gap:clamp(12px,1.4vw,20px); } .tk-timeline__item::before,.tk-timeline__item::after{ left:clamp(56px,5vw,78px); } .tk-timeline__item:nth-last-child(2)::before{ display:none; } .tk-timeline__time{ font-size:16px; padding-right:12px; } .tk-timeline__body{ padding-left:16px; } .tk-timeline__ttl{ font-size:clamp(17px,1.5vw,20px); } .tk-timeline__body p{ font-size:14px; line-height:1.8; } } /* ===== 30_override.css ===== */ /* ============================================================ S01275 override.css — CueZilla へ載せるための追加（受領CSSは消していない・後勝ちで効く） ============================================================ */ /* ① パンくずの二重表示を防ぐ（R-10a）。 全ページの本文に受領デザインのパンくず（nav.crumbs・BreadcrumbList構造化データ付き）を入れているため、 CueZilla が自動で挿入する parts231 のパンくずは隠す。 */ .parts231_breadcrumb, html body [class*="parts"][class*="_breadcrumb"]{ display:none !important; } /* ② JSが動かなかったときの安全網（cz-judgment §4 安全装置②）。 受領CSSは [data-reveal]{opacity:0} を無条件に掛けている。草案では JS が ＜/body＞ 直前で必ず動いたが、 CueZilla では BODY内JS 欄の貼り忘れ・不具合で動かないと**全ページの本文が見えなくなる**。 BODY内JS の先頭で html に .js を付け、付いていないときだけ見える状態に戻す（JSが動けば見た目は受領どおり）。 */ html:not(.js) [data-reveal], html:not(.js) [data-reveal="stagger"] > *{ opacity:1 !important; transform:none !important; } /* ③ 募集要項の箇条書きの丸（2026-09-25 ディレクター修正で追加）。 受領CSSは li::before{content:""} で丸を描いているが、CueZilla の追加CSS欄は 疑似要素の content をサニタイズで落とす（R-27）＝丸が出ない。 同じ位置・同じ大きさ（6px・上.8em）の丸を背景で描く。疑似要素が生き残る環境でも同じ位置に重なるだけ。 */ .tk-table__list li{ background:radial-gradient(circle at 3px 3px, var(--tk-brand) 2.6px, transparent 3.2px) no-repeat 0 .8em / 6px 6px; } /* ④ CueZillaパーツ内のリンクの下線を外す（2026-09-25 実機確認後の指示）。 受領CSSの a{text-decoration:underline}（本文リンク用）がパーツのカードにも当たり、 実機でお知らせ（parts040506）・ブログ一覧（parts222・サイドバー含む）・施工実績一覧（parts228）・ TOPのブログ（parts131415）の日付・タイトル・カテゴリに下線が出ていた。 受領デザインの見本（.news__rowlink / .bg-card / .wk-item / .tk-blogcard）はどれも下線なし。 ★パンくず（parts231）は隠しているので対象外。フォーム（.contact_section）はパーツ名が違うので巻き込まない （フォーム内のプライバシーポリシーへのリンクは本文リンクとして下線を残す）。 */ html body section[class*="parts"]:not([class*="breadcrumb"]) a, html body section[class*="parts"]:not([class*="breadcrumb"]) a *{ text-decoration:none !important; } /* ⑤ TOPの見出しの二重表示を消す（2026-09-25 実機確認後の指示）。 見出しは納品側（05a「NEWS／お知らせ」・05b「BLOG」）が持っているので、パーツ側の見出しは出さない。 実機実測: お知らせ（parts040506_notice-news）は h2.sec_title「最新情報」が表示されたまま。 ブログ（parts131415_blog）は CMS 側で見出しを空にしてあるが、.parts131415_blog_title_wrap の枠が残る。 ★どちらもこのパーツ固有のクラスなので、ほかのページの見出しには当たらない。 */ html body section[class*="parts040506_notice-news"] .sec_title, html body section[class*="parts131415_blog"] [class*="_blog_title_wrap"]{ display:none !important; } /* ⑥ TOPの見出しとパーツの間の余白を受領デザインへ寄せる（2026-09-25 実機実測・指示「余白も調整」）。 納品側の節の下余白（--tk-row-pad：PC 115px／SP 72px）と、パーツ自身の上下余白 （お知らせ PC 75px／SP 50px、ブログ PC 150px／SP 70px）が重なって大きく空いていた。 実測（PC / SP） 受領 調整前 お知らせ見出し→一覧 24 / 24 192 / 114 お知らせ一覧→次の節 91 / 48 101 / 90 BLOG導入文→カード 46 / 20 217 / 118 カード→「ブログ一覧を見る」 101 / 72 366 / 214 ・見出し側の節の下余白と、ボタン側の節の上余白は 0 にし、間隔はパーツの padding だけで決める。 ・パーツの padding は「受領の間隔 − パーツ内部の既存のずれ（実測）」で逆算した値。 ・お知らせ一覧は枠線付きの箱なので、見出しから「箱の上端」までを 24px にした。 ★兄弟の並びに CMS が style 要素を挟むことがあるので、隣接（+）ではなく :has / 一般兄弟（~）で指定する。 */ html body section.site-row:has(> section.news){ padding-bottom:0 !important; } html body section[class*="parts040506_notice-news"]{ padding-top:24px !important; padding-bottom:65px !important; } html body section.site-row--blog:has(#blog-ttl){ padding-bottom:0 !important; } html body section[class*="parts131415_blog"]{ padding-top:94px !important; padding-bottom:0 !important; } html body section[class*="parts131415_blog"] ~ section.site-row--blog{ padding-top:0 !important; } @media (max-width:767px){ html body section[class*="parts040506_notice-news"]{ padding-bottom:8px !important; } html body section[class*="parts131415_blog"]{ padding-top:44px !important; } } /* ⑦ CueZillaのテーマCSSが上書きしていた3か所を受領デザインの値へ戻す（2026-09-25 実機の総合確認）。 受領デザインと実機で、全14ページ×PC/SPのテキスト要素の computed style を突き合わせて出た差はこの3種だけ。 ・ヘッダーの「MENU」（スマホ幅で見えるボタン）: テーマの button 指定で行高 26px になり、ボタンが縦に伸びていた。 受領は行高 normal（書体・サイズは受領CSSが指定する 13px のままで差なし）。 ※PC幅ではこのボタンは非表示なので書体差（Arial↔本文書体）は見た目に出ない＝触らない。 ・TOP／採用のカルーセル番号（01〜07）: 同じ理由で行高 normal → 28px（ボタンの高さ 21 → 31px）。 ・強みの小見出し h4.tk-reason__ttl（/work /request /request/personal）: テーマの h4 行高 1.2 が当たり、 受領の 2.0（本文の行高を継承）より詰まっていた（高さ 41 → 25px）。 */ html body .sh__togglelabel{ line-height:normal !important; } html body .tk-hscroll__num{ line-height:normal !important; } html body h4.tk-reason__ttl{ line-height:var(--tk-lh) !important; } /* 同じ h4 の下余白もテーマで 8px に縮んでいた。受領はブラウザ既定の h4 余白（1.33em＝PC 27px／SP 24px） */ html body h4.tk-reason__ttl{ margin-bottom:1.33em !important; } /* ⑧ 一覧パーツの版面・列・間隔を受領の見本へ揃える（2026-09-25 実機の総合確認）。 実測（1280px）: 見出し・本文は版面 x40〜1240（お知らせだけ x120〜1160）なのに、パーツは x50 w1180 固定 （お知らせの箱が見出しより70px左に出る／ブログ一覧は本文780＋サイド333で受領の 849＋300 と違う）。 受領CSSの版面ルールをそのままパーツの外枠に当てる: .site-wrap … min(100% − ガター×2, 1360px) .page-top .news … min(100% − ガター×2, 1040px) .tk-blogcards/.wk-grid … 1列 → 760px以上で3列 .bg-layout … 1列 → 1000px以上で「一覧＋サイド300px」、一覧は 640px以上で2列 */ html body section[class*="parts040506_notice-news"] > .container{ width:min(100% - var(--tk-gutter) * 2, 1040px) !important; max-width:none !important; padding-left:0 !important; padding-right:0 !important; margin-left:auto !important; margin-right:auto !important; } html body section[class*="parts131415_blog"] > .container-lg{ width:min(100% - var(--tk-gutter) * 2, var(--tk-wrap)) !important; max-width:none !important; padding-left:0 !important; padding-right:0 !important; margin-left:auto !important; margin-right:auto !important; } html body section[class*="parts131415_blog"] .row{ margin-left:0 !important; margin-right:0 !important; grid-template-columns:1fr !important; gap:clamp(20px,2.6vw,32px) !important; } html body section.parts222_section, html body section.parts228_section{ padding-left:0 !important; padding-right:0 !important; } html body .parts222_wrap, html body .parts228_wrap{ width:min(100% - var(--tk-gutter) * 2, var(--tk-wrap)) !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; } html body .parts222_wrap{ gap:clamp(32px,4vw,56px) !important; } html body .parts222_post_list{ grid-template-columns:1fr !important; gap:clamp(26px,3vw,40px) clamp(20px,2.6vw,32px) !important; } html body .parts228_post_list{ grid-template-columns:1fr !important; gap:clamp(28px,3.4vw,44px) clamp(20px,2.6vw,32px) !important; } @media (min-width:640px){ html body .parts222_post_list{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (min-width:760px){ html body section[class*="parts131415_blog"] .row, html body .parts228_post_list{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (min-width:1000px){ html body .parts222_main{ flex:1 1 auto !important; max-width:none !important; min-width:0 !important; } html body .parts222_sidebar{ flex:0 0 300px !important; width:300px !important; max-width:300px !important; } } /* ⑨ 採用応募フォーム（parts219）のファイル添付欄（2026-09-25 ユーザー指摘「装飾がやや崩れて見える」）。 お問い合わせ（parts213）は「ラベル＋ファイルを選択ボタン」を自前で組んでいるが、parts219 は素の input[type=file] を出すだけ。skin のテキスト入力用の指定（高さ54px・padding 14/16px）がそのまま当たり、 ブラウザ標準のボタン（Choose File）が枠の下へはみ出していた。 → お問い合わせ側の実測値（PC: 枠 高さ62px・padding 10/14px・ボタン 126×40px／SP: 枠 padding 15px 中央寄せ・ ボタン 176×40px・12px）に合わせ、ブラウザ標準のボタンは ::file-selector-button で同じ見た目にする。 ★::file-selector-button は content を使わないので、追加CSS欄のサニタイズ（R-27）の影響を受けない。 */ html body [class*="parts219"] input[type="file"]{ display:block !important; width:100% !important; height:auto !important; min-height:62px !important; box-sizing:border-box !important; padding:10px 14px !important; background:#E9F2EC !important; border:1px solid #00915E !important; border-radius:6px !important; font-size:14px !important; line-height:40px !important; color:#24352B !important; cursor:pointer !important; } html body [class*="parts219"] input[type="file"]::file-selector-button{ width:126px; height:40px; margin:0 12px 0 0; padding:1px 6px; background:#FFFFFF; border:1px solid #00915E; border-radius:6px; font:inherit; font-size:16px; line-height:1; color:#24352B; cursor:pointer; } @media (max-width:767px){ /* SP: ボタンを縦積みにすると「未選択」の文字だけ左寄せで下に落ちて崩れて見えるため、PCと同じ横並びのまま小さくする */ html body [class*="parts219"] input[type="file"]{ padding:15px !important; margin-bottom:15px !important; font-size:12px !important; } html body [class*="parts219"] input[type="file"]::file-selector-button{ width:126px; font-size:12px; } } /* ⑩ 記事の詳細ページ（BODY内JS が html に .cz-detail を付ける）。 CueZilla は一覧用の下層ヘッダーブロック（04a/04b）を詳細にも出すため、一覧の導入文 （「工事の進め方、費用のかかり方…」「昭和38年の創業以来…」）が記事の上に出て、記事タイトルまで約300px空いていた。 → 詳細では導入文の行を隠す（見出しとパンくずは残す）。 ・導入文の行＝パンくずの直後の素の .site-row（CTA .site-row--contact・次に読む .site-row--base2 は残す） ・h1 から p に置き換えた見出しに、受領CSSの h1 既定（margin:0／行高1.45／balance）を補う */ html.cz-detail nav.crumbs ~ section.site-row:not(.site-row--contact):not(.site-row--base2){ display:none !important; } html.cz-detail p.subhero__ja{ margin-bottom:0 !important; line-height:1.45 !important; text-wrap:balance; } /* ⑪ 送信完了ページ（/form/complete/inquiry ・ /form/complete/recruit）。 CueZilla はフォームの下層ヘッダー（04c/04d）とパーツ後ブロック（04c2/04d2）を完了ページにも出すため、 入力画面用の導入・LINE案内・メールフォームの説明（約1,350px）の後に「送信が完了しました」が来て、 その下に送信前の注意（「プライバシーポリシーに同意のうえ送信してください」）まで出ていた（実機 2026-09-25）。 → 完了パーツ（parts243-245_complete_form）がある時だけ、入力画面用の行を隠す。 見出し・パンくず・完了メッセージと、採用の「次に読むページ」（.tk-nextlinks）は残す。 */ html body:has(section[class*="_complete_form"]) section.site-row:not(:has(.tk-nextlinks)){ display:none !important; } /* ⑫ TOPお知らせの枠線を受領デザインの罫へ（2026-09-25 ユーザー指摘「周りの罫線が余分」）。 実機パーツは .content を灰色の枠（1px #DFDFDF・角丸3px・内側25px）で囲んでいた。 受領（.news__rows / .news__row）は枠なしで、一覧の上に1本・各行の下に1本の罫（--tk-line）だけ。 → 枠と内側余白を外し、罫を受領どおりに引く。「もっと見る」の左の縦罫も受領の色（--tk-line）へ。 */ html body section[class*="parts040506_notice-news"] .content{ border:0 !important; border-radius:0 !important; padding:0 !important; background:transparent !important; } html body section[class*="parts040506_notice-news"] .content > ul{ border-top:1px solid var(--tk-line) !important; } html body section[class*="parts040506_notice-news"] .content > ul > li{ border-bottom:1px solid var(--tk-line) !important; margin:0 !important; min-height:48px; padding:9px 4px !important; } html body section[class*="parts040506_notice-news"] a.more{ border-left-color:var(--tk-line) !important; } /* 枠を外すと、枠の内側余白（25px＋罫1px）の分だけ上下が詰まる（実測: 見出し→一覧 0px／一覧→次の節 PC 65px・SP 8px）。 ⑥の余白を受領値（見出し→一覧 24px／一覧→次の節 PC 91px・SP 48px）へ付け直す（⑥より後ろなので後勝ち）。 */ html body section[class*="parts040506_notice-news"]{ padding-top:48px !important; padding-bottom:91px !important; } @media (max-width:767px){ html body section[class*="parts040506_notice-news"]{ padding-bottom:48px !important; } } /* ============================================================ ⑬ 一覧パーツの中身を受領の見本へ寄せる（2026-09-25 ユーザー指示「受領データともう少し見た目をそろえて」） 値はすべて受領 style.css の見本クラスから写した（括弧内が出典）。 パーツの DOM（実機で採取）: 並び順は見本と同じなので、DOMは触らず見た目だけ上書きする。 ============================================================ */ /* --- TOP お知らせ（.news__rowlink / .news__d / .news__cat / .news__t / .news__more）--- 実機: li > div(日付・カテゴリ) + div > .row > (p.title, a.more)。 2つ目の div と .row を display:contents にして、li を見本と同じ3列グリッドにする。 */ html body section[class*="parts040506_notice-news"] .content > ul > li{ display:grid !important; grid-template-columns:1fr !important; gap:.3em .5em !important; align-items:center !important; --bs-gutter-x:0; } html body section[class*="parts040506_notice-news"] .content > ul > li:hover{ background:#dcf2eb !important; } html body section[class*="parts040506_notice-news"] li > div, html body section[class*="parts040506_notice-news"] li > div > .row, html body section[class*="parts040506_notice-news"] li p.title{ width:auto !important; max-width:none !important; flex:none !important; margin:0 !important; padding:0 !important; } html body section[class*="parts040506_notice-news"] li > div:nth-child(2), html body section[class*="parts040506_notice-news"] li > div:nth-child(2) > .row{ display:contents !important; } html body section[class*="parts040506_notice-news"] li > div:first-child{ display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:.8em !important; } html body section[class*="parts040506_notice-news"] .date{ margin:0 !important; font-family:var(--tk-font-en) !important; font-size:13px !important; font-weight:300 !important; letter-spacing:.08em !important; line-height:26px !important; color:#000 !important; } html body section[class*="parts040506_notice-news"] .categorytag{ display:inline-flex !important; align-items:center !important; min-height:22px !important; padding:0 .8em !important; border-radius:3px !important; background:#3BB68B !important; color:#fff !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.04em !important; line-height:24px !important; } html body section[class*="parts040506_notice-news"] p.title, html body section[class*="parts040506_notice-news"] p.title a{ font-size:14px !important; font-weight:500 !important; line-height:1.6 !important; color:var(--tk-ink) !important; } html body section[class*="parts040506_notice-news"] a.more{ display:flex !important; align-items:center !important; width:auto !important; max-width:none !important; flex:none !important; margin:0 !important; padding:0 !important; border:0 !important; text-align:left !important; white-space:nowrap !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.04em !important; line-height:26px !important; color:#000 !important; } @media (min-width:800px){ html body section[class*="parts040506_notice-news"] .content > ul > li{ grid-template-columns:auto 1fr auto !important; gap:0 clamp(20px,3vw,48px) !important; } /* 見本の「もっと見る」の前の縦罫（.news__more::before：幅1px・高さ1.6em・間隔.6em）を背景で描く */ html body section[class*="parts040506_notice-news"] a.more{ padding-left:calc(1px + .6em) !important; background:linear-gradient(var(--tk-line),var(--tk-line)) left center / 1px 1.6em no-repeat !important; } } /* --- TOP ブログ（.tk-blogcard / __cat / __ttl / __media）--- */ html body section[class*="parts131415_blog"] .card{ background:#fff !important; border:1px solid var(--tk-line) !important; border-radius:0 !important; padding:clamp(20px,2.4vw,30px) !important; box-shadow:none !important; height:100% !important; } html body section[class*="parts131415_blog"] .card:hover{ border-color:#3BB68B !important; box-shadow:none !important; transform:none !important; } html body section[class*="parts131415_blog"] .card-body{ padding:0 !important; } html body section[class*="parts131415_blog"] .card-title{ margin:0 !important; text-align:center !important; font-family:inherit !important; font-size:14px !important; font-weight:700 !important; letter-spacing:.08em !important; line-height:28px !important; color:var(--tk-brand) !important; } html body section[class*="parts131415_blog"] .card-body > a{ display:block !important; color:var(--tk-ink) !important; } html body section[class*="parts131415_blog"] .card-text{ margin:1.2em 0 0 !important; font-family:inherit !important; font-size:15px !important; font-weight:700 !important; letter-spacing:.02em !important; line-height:1.8 !important; color:var(--tk-ink) !important; /* CMS側がタイトル欄を2行分の固定高さ（55px・overflow:hidden）にしていたため、1行のタイトルでも 下に1行分の空きができ、写真までが見本より約28px広かった。見本（.tk-blogcard__ttl）は高さ固定なし */ white-space:normal !important; height:auto !important; overflow:visible !important; } html body section[class*="parts131415_blog"] [class*="_blog_thumbnail"]{ margin:1.4em 0 0 !important; height:auto !important; aspect-ratio:4/3 !important; border-radius:0 !important; overflow:hidden !important; } html body section[class*="parts131415_blog"] [class*="_blog_thumbnail"] img{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius:0 !important; } /* --- ブログ一覧 /blog（.bg-card / __media / __meta / __date / __cat / __ttl）--- */ html body .parts222_post_wrap{ background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } html body .parts222_post_wrap > a{ display:flex !important; flex-direction:column !important; color:var(--tk-ink) !important; } html body .parts222_post_img{ margin:0 !important; height:auto !important; } html body .parts222_post_img img{ width:100% !important; height:auto !important; aspect-ratio:4/3 !important; object-fit:cover !important; border-radius:0 !important; } html body .parts222_post_wrap:hover .parts222_post_img img{ opacity:.88; } html body .parts222_post_status{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:1em !important; margin:.9em 0 0 !important; padding:0 !important; } html body .parts222_post_date{ font-family:var(--tk-font-en) !important; font-size:14px !important; font-weight:300 !important; letter-spacing:.08em !important; line-height:1.6 !important; color:var(--tk-ink-2) !important; } html body .parts222_post_category{ padding:.15em .8em !important; border:1px solid var(--tk-brand) !important; border-radius:3px !important; background:transparent !important; font-family:inherit !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.04em !important; line-height:1.6 !important; color:var(--tk-brand) !important; } html body .parts222_post_title-excerpt{ margin:.5em 0 0 !important; padding:0 !important; } html body .parts222_post_title{ margin:0 !important; font-family:inherit !important; font-size:16px !important; font-weight:700 !important; line-height:1.7 !important; color:var(--tk-brand) !important; } html body .parts222_post_wrap:hover .parts222_post_title{ text-decoration:underline !important; text-underline-offset:.2em; } /* --- ブログ一覧のサイド（.bg-panel / __ttl / .bg-recent / .bg-cat）--- */ html body .parts222_sidebar_wrap{ border:1px solid var(--tk-line) !important; margin:0 !important; } html body .parts222_sidebar_wrap + .parts222_sidebar_wrap{ margin-top:clamp(24px,3vw,36px) !important; } html body .parts222_sidebar_wrap > h3{ margin:0 !important; padding:.7em 1em !important; background:var(--tk-brand) !important; color:#fff !important; border:0 !important; font-family:inherit !important; font-size:15px !important; font-weight:700 !important; letter-spacing:.08em !important; line-height:1.6 !important; } html body .parts222_sidebar_wrap > ul{ margin:0 !important; padding:0 !important; list-style:none !important; } html body .parts222_sidebar_wrap > ul > li{ margin:0 !important; padding:0 !important; border:0 !important; border-bottom:1px solid var(--tk-line) !important; } html body .parts222_sidebar_wrap > ul > li:last-child{ border-bottom:0 !important; } html body .parts222_sidebar_wrap:not(.category_post_count) li > a{ display:grid !important; gap:.2em !important; padding:.9em 1em !important; } html body .parts222_sidebar_date{ display:block !important; margin:0 !important; font-family:var(--tk-font-en) !important; font-size:13px !important; font-weight:300 !important; letter-spacing:.08em !important; line-height:1.6 !important; color:var(--tk-ink-2) !important; } html body .parts222_sidebar_post_title{ margin:0 !important; font-family:inherit !important; font-size:14px !important; font-weight:700 !important; line-height:1.6 !important; color:var(--tk-ink) !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } html body .parts222_sidebar_wrap li > a:hover .parts222_sidebar_post_title{ color:var(--tk-brand) !important; } html body .parts222_sidebar_wrap.category_post_count li > a{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:1em !important; min-height:48px !important; padding:.4em 1em !important; } html body .parts222_sidebar_wrap.category_post_count li > a:hover{ background:var(--tk-base-2) !important; } html body .parts222_sidebar_post_category{ margin:0 !important; font-family:inherit !important; font-size:14px !important; font-weight:700 !important; line-height:1.6 !important; color:var(--tk-ink) !important; } html body .parts222_sidebar_wrap.category_post_count li > a:hover .parts222_sidebar_post_category{ color:var(--tk-brand) !important; } html body .parts222_sidebar_post_category_count{ display:inline-flex !important; justify-content:center !important; align-items:center !important; min-width:34px !important; height:auto !important; padding:.1em 0 !important; border:0 !important; border-radius:3px !important; background:var(--tk-base-2) !important; font-family:var(--tk-font-en) !important; font-size:13px !important; font-weight:400 !important; line-height:1.6 !important; color:var(--tk-ink-2) !important; } /* --- 施工実績一覧 /blog-ex/instance（.wk-item / __media / __date / __ttl / __cat）--- */ html body .parts228_post_wrap{ background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } html body .parts228_post_wrap > a{ color:var(--tk-ink) !important; } html body .parts228_post_img{ margin:0 !important; height:auto !important; } html body .parts228_post_img a{ display:block !important; } html body .parts228_post_img img{ width:100% !important; height:auto !important; aspect-ratio:4/3 !important; object-fit:cover !important; border-radius:0 !important; } html body .parts228_post_wrap:hover .parts228_post_img img{ opacity:.88; } html body .parts228_post_status{ margin:1em 0 0 !important; padding:0 !important; } html body .parts228_post_date{ display:block !important; font-family:var(--tk-font-en) !important; font-size:14px !important; font-weight:300 !important; letter-spacing:.08em !important; line-height:1.6 !important; color:var(--tk-ink-2) !important; } html body .parts228_post_title-excerpt{ margin:.3em 0 0 !important; padding:0 !important; } html body .parts228_post_title{ margin:0 !important; font-family:inherit !important; font-size:17px !important; font-weight:700 !important; line-height:1.7 !important; color:var(--tk-brand) !important; } html body .parts228_post_wrap:hover .parts228_post_title{ text-decoration:underline !important; text-underline-offset:.2em; } html body .parts228_post_wrap [class*="tag_wrap"]{ padding:0 !important; margin:.9em 0 0 !important; gap:.5em !important; } html body .parts228_post_wrap [class*="tag_wrap"]:empty{ display:none !important; } html body .parts228_post_wrap [class*="tag_wrap"] > *{ padding:.3em 1em !important; border:1px solid var(--tk-line) !important; border-radius:4px !important; background:transparent !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.06em !important; color:var(--tk-ink-2) !important; }