@import url("https://fonts.googleapis.com/css2?family=Allura&family=Cinzel:wght@400;900&family=Shippori+Mincho+B1:wght@400;500;800&family=Zen+Old+Mincho&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap&text=%C2%A9%E9%8B%8F%E6%8A%80%E5%B1%8B%20All%20Rights%20Reserved."); /* ========================================================= 鋏技屋（kyogiya）サイト共通 CSS — 2026-10-01 --------------------------------------------------------- corp 正本の style.css を全面的に書き換えたもの（元は docs/_orig/style.corp_original.css）。 Figma「鋏技屋　様」（xloru7XZMChSSnSeRSHHrx・PC 幅 1440／SP 幅 375）を再現する。 実測値は docs/figma/design_tokens.md・docs/figma/struct/。計画は docs/site_plan_2026-10-01.md。 ★読み込み順は style.css → blocks.css → custom.css★ blocks.css に勝つには `body .クラス`、blocks.css の SP 指定に !important があるものだけ !important。 corp はサイト設定のボタン配色（#F1C232）を header.php が `body .btn-nab-back{…!important}` の形で注入する → `html body .クラス { … !important }`。 ★ブロックが前提にしている骨組み（position・display・opacity・visibility）は残す★ .global-header の position:fixed／.mobile-nav-overlay の opacity・visibility／.fade-up ★要素の位置決めに transform を使わない（.fade-up の transform と衝突する）★ 筆記体の見出しの回転は中の span に付ける ★カスタムHTML の枠（.custom-html-wrapper.fade-up）は動かさない★ 中の見出し・文章・写真に .fade-up を付けて要素ごとに出す 幅：1440 で Figma と一致。1441 以上は中身を中央寄せ（帯・写真・地図は全幅）。768〜1439 は PC の組みのまま --u（1440 で 1px）で縮める （MV・About・Area の重なりの絵と下層ヒーロー。本文の文字は縮めない）。767 以下は Figma の SP。ヘッダーは 1023 以下で MENU ボタン。 目次 0. トークン・基礎・フェードアップ 1. 共通部品（筆記体の見出し・VIEW MORE・TEL ボタン・筆の素材） 2. ヘッダー（PC） 3. ヘッダー（SP）・メニュー 4. TOP：MV 5. TOP：NEWS（latest_news_bar） 6. TOP：About 7. TOP：Service＋ギャラリー＋流れる英字 8. TOP：Reason 9. TOP：Area 10. CONTACT 帯 11. 地図・フッター・コピーライト 12. 下層ヒーロー（hero_page） 13. 下層の見出し（.kg-hd） 14. 事業内容 15. 会社概要（ご挨拶・store_info の表） 16. お知らせ（一覧・記事） 17. SP（767 以下） ========================================================= */ /* ---- 0. トークン・基礎 ---- */ :root { --kg-paper: #F4F0E6; /* 紙の地（＋紙の質感 30%＝kg_paper.webp） */ --kg-green: #29684F; /* ヘッダーの TEL・Reason の番号・SP メニュー */ --kg-deep: #3A564B; /* About の帯・CONTACT 帯・Flow・会社概要の表 */ --kg-pale: #C5D4CE; /* 事業内容の箱・Flow の丸 */ --kg-gold: #CBB583; /* 筆記体の見出し・CONTACT・金の TEL ボタン・About の右端の帯・佐賀県の形 */ --kg-foot: #3A3833; /* フッター */ --kg-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; --kg-en: "Cinzel", "Times New Roman", serif; --kg-script: "Allura", "Snell Roundhand", cursive; --kg-old: "Zen Old Mincho", "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; --kg-head: 96px; /* 固定ヘッダーの高さ（SP は 60） */ --u: 1px; /* 1440 で 1px。1439 以下は画面幅に比例（MV・About などの絵の縮小用） */ --kg-side: 80px; /* 本文の列の左右の余白（1440 で 80） */ --kg-ease: cubic-bezier(0.25, 1, 0.5, 1); --kg-ic-tel: url("/image/assets/kg_ic_tel.svg"); --kg-ic-tel-l: url("/image/assets/kg_ic_tel_l.svg"); --kg-ic-pin: url("/image/assets/kg_ic_pin.svg"); --kg-ic-arrow: url("/image/assets/kg_ic_arrow.svg"); /* corp の変数名は blocks.css 全体が参照しているので名前は据え置き、意味を差し替える */ --bg-base: var(--kg-paper); --bg-paper: #ffffff; --bg-warm: var(--kg-paper); --bg-dark: var(--kg-deep); --bg-dark-deep: var(--kg-foot); --ink: #000000; --text-main: #000000; --text-sub: #333333; --text-muted: #6b6b6b; --text-on-dark: #ffffff; --text-on-dark-muted: rgba(255, 255, 255, .9); --gold: var(--kg-gold); --gold-light: #d9c79c; --gold-ink: var(--kg-green); --vermilion: #c0392b; --fc-btn-bg: var(--kg-green); --fc-btn-fg: var(--kg-gold); --fc-btn-bg-hover: var(--kg-deep); --fc-btn-fg-hover: var(--kg-gold); --fc-btn-border: var(--kg-green); --fc-btn-outline-fg: var(--kg-green); --line: rgba(58, 86, 75, .25); --line-dark: rgba(0, 0, 0, .12); --shadow-base: 4px 4px 40px rgba(0, 0, 0, .10); --font-heading: var(--kg-mincho); --font-serif: var(--kg-mincho); --font-sans: var(--kg-mincho); --font-en: var(--kg-en); --ease: var(--kg-ease); } @media (max-width: 1439px) { :root { --u: calc(100vw / 1440); --kg-side: max(20px, calc(80 * var(--u))); } } * { box-sizing: border-box; margin: 0; padding: 0; } *::before, *::after { box-sizing: border-box; } /* 疑似要素には * が効かない（ノウハウ 17 章） */ html { scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: var(--kg-head); } body { width: 100%; max-width: 100vw; overflow-x: hidden; background: var(--kg-paper) url("/image/assets/kg_paper.webp") 0 0 / 1460px auto repeat; /* Figma：#F4F0E6＋紙 30%・TILE 0.73 倍 */ color: #000000; font-family: var(--kg-mincho); font-weight: 400; font-size: 16px; line-height: 1.8; letter-spacing: 0; -webkit-font-smoothing: antialiased; writing-mode: horizontal-tb; overflow-wrap: break-word; } body::before { display: none; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease; } a:hover { color: var(--kg-green); } button { font: inherit; } ul, ol { list-style: none; } .kg-sp-only { display: none; } .kg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } body .custom-html-inner img { max-width: none; } /* フェードアップ（corp の IntersectionObserver が .is-visible を付ける）。表示後は transform を残さない */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--kg-ease), transform .8s var(--kg-ease); transition-delay: var(--d, 0s); } .fade-up.is-visible { opacity: 1; transform: none; } .delay-1 { transition-delay: .12s; } .delay-2 { transition-delay: .24s; } body .custom-html-wrapper.fade-up { opacity: 1; transform: none; transition: none; } /* 画面の外まではみ出す飾り（筆の素材・縦の透かし）は全幅の枠で横だけ切る（縦は見せる：Service の墨の輪は About の帯の下まで伸びる） */ body .custom-html-wrapper, body .page-hero-wrapper { overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fade-up, .fade-up.is-visible { opacity: 1; transform: none; transition: none; } } /* セクションの上の余白：カスタムHTML の先頭の要素は blocks.css の `.custom-html-inner > *:first-child { margin-top: 0 }`（0,2,0）に消される （ノウハウ 12・15 章）→ 余白は各セクションの --kg-mt に持たせ、詳細度 0,2,1 で入れる */ body .custom-html-inner > :is(.kg-about, .kg-svc, .kg-reason, .kg-area, .kg-contact, .kg-bsvc, .kg-flow, .kg-barea, .kg-greet, .kg-chead), :is(.kg-about, .kg-svc, .kg-reason, .kg-area, .kg-contact, .kg-bsvc, .kg-flow, .kg-barea, .kg-greet, .kg-chead) { margin-top: var(--kg-mt, 0px); } /* ========================================================= 1. 共通部品 ========================================================= */ /* 筆記体の見出し（Allura 110/132・字間 3.3・金。Figma は左上を原点に −11.44° 回転＝relativeTransform）。 位置は各セクションで left/top（＝回転の原点）を決める。--w は回転前の文字の箱の幅（Figma の size.x）。 画面に入ったら左から書かれるように現れる（clip-path）。英文のアニメーション（指示書）の一部 */ .kg-script { position: absolute; z-index: 1; margin: 0; pointer-events: none; font-family: var(--kg-script); font-weight: 400; font-size: calc(110 * var(--u)); line-height: calc(132 * var(--u)); letter-spacing: calc(3.3 * var(--u)); color: var(--kg-gold); white-space: nowrap; } .kg-script > span { display: block; width: calc(var(--w) * var(--u)); text-align: center; transform-origin: 0 0; transform: rotate(-11.44deg); } .kg-script.fade-up > span { clip-path: inset(-40% 100% -40% -10%); transition: clip-path 1.6s var(--kg-ease) .2s; } .kg-script.fade-up.is-visible > span { clip-path: inset(-40% -10% -40% -10%); } @media (prefers-reduced-motion: reduce) { .kg-script.fade-up > span, .kg-script.fade-up.is-visible > span { clip-path: none; transition: none; } } /* VIEW MORE（Figma 1:898：Cinzel 18/22・間 40・直径 60 の円（線 1px）・中に矢印 17.5×4.5）。--light は白（About） */ .kg-more { display: inline-flex; align-items: center; gap: 40px; color: #000000; font-family: var(--kg-en); font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: 0; white-space: nowrap; } .kg-more__circle { position: relative; flex: 0 0 60px; width: 60px; height: 60px; border: 1px solid currentColor; border-radius: 50%; transition: background-color .3s ease; } .kg-more__circle::before { content: ""; position: absolute; left: 20.25px; top: 26.36px; width: 18.92px; height: 5.39px; background: currentColor; /* 矢印の線の外形（path の範囲 0〜18.92 × −0.39〜5） */ -webkit-mask-image: var(--kg-ic-arrow); mask-image: var(--kg-ic-arrow); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background-color .3s ease, transform .3s ease; } .kg-more:hover { color: #000000; } .kg-more:hover .kg-more__circle { background: #000000; } .kg-more:hover .kg-more__circle::before { background: var(--kg-paper); transform: translateX(3px); } .kg-more--light, .kg-more--light:hover { color: #ffffff; } .kg-more--light:hover .kg-more__circle { background: #ffffff; } .kg-more--light:hover .kg-more__circle::before { background: var(--kg-deep); } /* TEL ボタン（Figma 1:855：201×52・余白 15/20・受話器 16×16＋間 10＋番号 18/22 字間 1.8・内側 3px に 0.5px の線） --green＝緑地に金（ヘッダー）、--gold＝金地に緑（CONTACT 帯・フッター）、--l＝317×68（CONTACT 帯：番号 32/38・受話器 27×25） */ .kg-tel, body .btn-header-tel { position: relative; display: inline-flex; align-items: center; gap: 10px; width: 201px; height: 52px; padding: 0 20px; border: 0; border-radius: 0; /* 幅は Figma の値で固定（Chrome は末尾の字間も幅に数えるため） */ font-family: var(--kg-mincho); font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: 1.8px; white-space: nowrap; } .kg-tel::before, body .btn-header-tel::before { content: ""; position: absolute; inset: 3px; border: .5px solid currentColor; pointer-events: none; } .kg-tel i, body .btn-header-tel i { flex: 0 0 16px; display: block; width: 16px; height: 16px; font-size: 0; background: currentColor; -webkit-mask-image: var(--kg-ic-tel); mask-image: var(--kg-ic-tel); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } body .btn-header-tel i::before { content: none; } .kg-tel--green, body .btn-header-tel { background: var(--kg-green); color: var(--kg-gold); } .kg-tel--gold { background: var(--kg-gold); color: var(--kg-green); } .kg-tel--green:hover, body .btn-header-tel:hover { background: var(--kg-deep); color: var(--kg-gold); } .kg-tel--gold:hover { background: #d6c497; color: var(--kg-green); } .kg-tel--l { width: 317px; height: 68px; font-size: 32px; line-height: 38px; letter-spacing: 3.2px; } .kg-tel--l i { flex-basis: 27px; width: 27px; height: 25px; -webkit-mask-image: var(--kg-ic-tel-l); mask-image: var(--kg-ic-tel-l); } /* 筆の素材（墨の輪・刷毛。Figma は PIXTA の素材をマスクにして #BFB9AC 25% を塗った形＝kg_brush_*.webp に焼き込み済み）。各セクションの後ろに置く */ .kg-brush { position: absolute; z-index: -1; pointer-events: none; background: no-repeat 0 0 / 100% 100%; } .kg-brush--ring { background-image: url("/image/assets/kg_brush_ring.webp"); } .kg-brush--stroke { background-image: url("/image/assets/kg_brush_stroke.webp"); } .kg-brush--flip { transform: rotate(180deg); } /* 事業内容の Flow（Figma 40:113：上下左右反転） */ .kg-brush--mirror { transform: scaleX(-1); } /* 事業内容の対応エリア（Figma 40:110：左右反転） */ /* ========================================================= 2. ヘッダー（PC・Figma 1:862／74:104：ロゴ 250×80（67, 8）・ナビ 3 項目（間 40・y=26）・TEL 201×52（右端 1360・y=11）） 上部固定。Figma は地の色が無い（紙の上）→ スクロールしたら紙の色の地と薄い影を付ける（Figma に無い状態） corp の DOM：header > h1.header-page-eyebrow + a.header-logo(img) + nav.desktop-nav + .header-btns(.btn-header-tel) + .menu-trigger ========================================================= */ body .global-header, body .global-header.is-scrolled { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: var(--kg-head); min-height: 0; padding: 8px calc(max(0px, (100% - 1440px) / 2) + 80px) 0 calc(max(0px, (100% - 1440px) / 2) + 67px); display: flex; align-items: flex-start; gap: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; transition: background-color .3s ease, box-shadow .3s ease; } body .global-header.is-scrolled { background-color: rgba(244, 240, 230, .96); box-shadow: 0 6px 18px rgba(0, 0, 0, .06); } body .global-header .header-page-eyebrow { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* SEO 用 H1 は見せない */ body .header-logo, body .global-header.is-scrolled .header-logo { flex: 0 0 auto; display: block; width: 250px; height: 80px; font-size: 0; transition: opacity .25s ease; } body .header-logo img { width: 250px; height: 80px !important; max-height: 80px !important; object-fit: contain; } /* ブロックが style="max-height:45px" を付ける */ body .header-logo:hover { opacity: .8; } body .desktop-nav { margin: 18px 0 0 auto; display: flex; align-items: center; gap: 40.6px; } /* Figma は 40。Chrome の字幅が少し広い分を両端で吸収 */ body .desktop-nav a { position: relative; display: block; margin-right: -1.8px; color: #000000; font-family: var(--kg-mincho); font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: 1.8px; white-space: nowrap; } /* 末尾の字間を詰める（Figma の箱は末尾の字間を含まない） */ body .desktop-nav a::after { content: ""; position: absolute; left: 0; right: 1.8px; bottom: -6px; width: auto; height: 1px; background: var(--kg-green); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; } body .desktop-nav a:hover { color: var(--kg-green); } body .desktop-nav a:hover::after { transform: scaleX(1); } body .desktop-nav a.active::after { width: auto; } body .header-btns { margin: 3px 0 0 36px; display: flex; gap: 0; } body .menu-trigger { display: none; } .fc-language-switcher { display: none; } /* ========================================================= 3. ヘッダー（SP・Figma 3:1109：375×60・ロゴ 125×40（20, 10）・受話器のボタン 40×40・MENU（三本線 32×3 ＋「MENU」Cinzel 10）） メニュー（Figma sp_menu 1:94：全画面の緑・白のナビ 3 項目（y=160 から 102 ごと）・右上に ×＋「CLOSE」） ========================================================= */ @media (max-width: 1023px) { :root { --kg-head: 60px; } body .global-header, body .global-header.is-scrolled { height: 60px; padding: 10px 20px 0; } body .header-logo, body .global-header.is-scrolled .header-logo { width: 125px; height: 40px; } body .header-logo img { width: 125px; height: 40px !important; max-height: 40px !important; } body .desktop-nav { display: none; } body .header-btns { margin: 0 0 0 auto; } body .btn-header-tel { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; font-size: 0; letter-spacing: 0; } body .global-header > .menu-trigger { display: block; position: relative; flex: 0 0 32px; width: 32px; height: 40px; margin: 0 0 0 20px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--kg-green); cursor: pointer; } body .global-header > .menu-trigger::before { content: ""; position: absolute; left: 0; top: 7px; width: 32px; height: 3px; background: currentColor; box-shadow: 0 8px 0 currentColor, 0 16px 0 currentColor; } body .global-header > .menu-trigger i { position: absolute; left: 0; top: 30px; width: 32px; font-style: normal; } body .global-header > .menu-trigger i::before { content: "MENU"; display: block; font-family: var(--kg-en); font-weight: 400; font-size: 10px; line-height: 12px; letter-spacing: 0; text-align: center; color: var(--kg-green); } } /* メニュー（#mobileNav）。骨組み（fixed・opacity・visibility）は corp のまま */ .mobile-nav-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .mobile-nav-overlay.active { opacity: 1; visibility: visible; } body .mobile-nav-overlay { background: var(--kg-green); align-items: center; justify-content: flex-start; gap: 80px; padding: 160px 20px 80px; overflow-y: auto; } body .mobile-nav-overlay > a { display: block; color: #ffffff; font-family: var(--kg-mincho); font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: 1.8px; text-align: center; } body .mobile-nav-overlay > a:hover { color: var(--kg-gold); } body .mobile-nav-overlay .menu-trigger { display: block; position: absolute !important; top: 15px !important; right: 20px !important; left: auto; width: 32px; height: 41px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: #ffffff; cursor: pointer; } body .mobile-nav-overlay .menu-trigger::before, body .mobile-nav-overlay .menu-trigger::after { content: ""; position: absolute; left: -1.2px; top: 11px; width: 35.4px; height: 3px; background: currentColor; transform: rotate(45deg); } body .mobile-nav-overlay .menu-trigger::after { transform: rotate(-45deg); } body .mobile-nav-overlay .menu-trigger i { position: absolute; left: 0; top: 29px; width: 32px; font-style: normal; } body .mobile-nav-overlay .menu-trigger i::before { content: "CLOSE"; display: block; font-family: var(--kg-en); font-weight: 400; font-size: 10px; line-height: 12px; letter-spacing: 0; text-align: center; color: #ffffff; } /* ========================================================= 4. TOP：MV（Figma 1:861：枠 880×622（金の線 1px・余白 10）の写真 858×600＋緑の板の影 30/30＋右下へ濃くなるグラデーション・ 左の縦書きキャッチ 28/42（縦組みの字形＝Figma の VERT）・写真の右下に副コピー 24/38 白＋影・左端に縦の透かし KYOUGIYA） 1439 以下は --u で全体を縮める ========================================================= */ .kg-mv { position: relative; height: calc(758 * var(--u)); } .kg-mv__en { position: absolute; left: calc(-24 * var(--u)); top: calc(39 * var(--u)); margin: 0; pointer-events: none; writing-mode: vertical-rl; font-family: var(--kg-en); font-weight: 900; font-size: calc(118 * var(--u)); line-height: calc(141.6 * var(--u)); letter-spacing: 0; color: rgba(0, 0, 0, .06); white-space: nowrap; } .kg-mv__in { position: relative; width: calc(1280 * var(--u)); height: calc(705 * var(--u)); margin: 0 auto; } /* 縦書き：右の列「技と誠実さで、」の字の中心が x=299、左の列が x=257（Figma は幅 32 の箱に 28px の字を左寄せ）。1 字 42（28＋字間 14） */ .kg-mv__catch { position: absolute; left: calc(156 * var(--u)); top: calc(212 * var(--u)); margin: 0; writing-mode: vertical-rl; font-family: var(--kg-mincho); font-weight: 400; font-size: calc(28 * var(--u)); line-height: calc(42 * var(--u)); letter-spacing: calc(14 * var(--u)); color: #000000; white-space: nowrap; } .kg-mv__frame { position: absolute; left: calc(400 * var(--u)); top: calc(83 * var(--u)); width: calc(880 * var(--u)); height: calc(622 * var(--u)); padding: calc(10 * var(--u)); border: 1px solid var(--kg-gold); } .kg-mv__ph { position: relative; width: 100%; height: 100%; background: #2E3C36; box-shadow: calc(30 * var(--u)) calc(30 * var(--u)) 0 var(--kg-green); } .kg-mv__ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; } .kg-mv__ph img.is-active { opacity: 1; } .kg-mv__ph::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(129.86deg, rgba(46, 60, 54, 0) 39.1%, #2E3C36 86.5%); } /* Figma の handle（0.04,0.04）→（0.81,0.96）・43%→100% を CSS の角度に換算 */ .kg-mv__sub { position: absolute; z-index: 2; right: calc(10 * var(--u)); bottom: calc(10 * var(--u)); width: calc(428 * var(--u)); padding: calc(30 * var(--u)); margin: 0; color: #ffffff; font-size: calc(24 * var(--u)); line-height: calc(38 * var(--u)); letter-spacing: calc(2.4 * var(--u)); text-shadow: 4px 4px 10px #000000; white-space: nowrap; } /* ========================================================= 5. TOP：NEWS（latest_news_bar ブロック。Figma に無い＝決定 §4-1。MV の下・About の上に、下層の白い箱と同じ見た目の帯） 左に筆記体 News＋「お知らせ」、右に最新 3 件、下に VIEW MORE（→ お知らせ一覧。記事が 0 件のときは出ない＝ブロックの改修） ========================================================= */ body .news-bar-section { position: relative; width: min(1120px, calc(100% - 2 * var(--kg-side))); margin: calc(27 * var(--u)) auto 0; padding: 0; background: none; color: #000000; } body .news-bar-container { max-width: none; margin: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "head list" "head more"; column-gap: 60px; row-gap: 24px; align-items: start; padding: 44px 60px 40px; background: #ffffff; box-shadow: 4px 4px 40px rgba(0, 0, 0, .10); } body .news-bar-head { grid-area: head; padding-top: 6px; } body .news-bar-eyebrow { display: inline-block; margin: 0; font-family: var(--kg-script); font-weight: 400; font-size: 72px; line-height: 86px; letter-spacing: 2px; color: var(--kg-gold); transform: rotate(-11.44deg); transform-origin: 0 100%; } body .news-bar-label { display: block; min-height: 0; margin: 4px 0 0 38px; padding: 0; background: none; color: #000000; font-family: var(--kg-mincho); font-size: 20px; line-height: 32px; font-weight: 400; letter-spacing: 2px; text-align: left; } body .news-bar-list { grid-area: list; border-top: 0; } body .news-bar-link { display: grid; grid-template-columns: 112px minmax(0, 1fr) 16px; gap: 24px; align-items: baseline; padding: 18px 0 17px; border-bottom: 1px solid rgba(58, 86, 75, .3); color: #000000; } body a.news-bar-link:hover { background: none; padding-left: 0; color: var(--kg-green); } body .news-bar-link .news-date { font-family: var(--kg-en); font-size: 16px; line-height: 26px; letter-spacing: .5px; color: var(--kg-green); white-space: nowrap; } body .news-bar-link .news-title { margin: 0; font-family: var(--kg-mincho); font-size: 16px; line-height: 26px; font-weight: 400; letter-spacing: .8px; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body .news-bar-link .news-arrow { color: var(--kg-green); font-size: 12px; } body .news-bar-link.is-empty { grid-template-columns: 112px minmax(0, 1fr); } body .news-bar-link.is-empty .news-title { color: #555555; } body .news-bar-more { grid-area: more; justify-self: end; } /* ========================================================= 6. TOP：About（Figma 1:907：深緑の帯 960×951（x=480〜・大理石リニアバーン 30%＝kg_marble.webp）＋右端の金の帯 80・ 左に東京駅の写真（昼 660×600（0, 108）・夜 400×280（340, 548））・本文の列 x=793 幅 515（y=184 から）） 本文が長くなる幅では帯が下に伸びる（高さは中身で決まる・最小 951） ========================================================= */ .kg-about { position: relative; --kg-mt: calc(120 * var(--u)); min-height: calc(951 * var(--u)); } .kg-about__panel { position: absolute; top: 0; bottom: 0; left: calc(50% - 240 * var(--u)); right: 0; background: var(--kg-deep) url("/image/assets/kg_marble.webp") 50% 50% / cover no-repeat; } .kg-about__panel::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(80 * var(--u)); background: var(--kg-gold); } .kg-about__photos { position: absolute; inset: 0; pointer-events: none; } .kg-about__photos img { position: absolute; max-width: none; object-fit: cover; } .kg-about__day { left: 0; top: calc(108 * var(--u)); width: calc(660 * var(--u) + max(0px, (100% - 1440px) / 2)); height: calc(600 * var(--u)); } .kg-about__night { left: calc(max(0px, (100% - 1440px) / 2) + 340 * var(--u)); top: calc(548 * var(--u)); width: calc(400 * var(--u)); height: calc(280 * var(--u)); } .kg-about__body { position: relative; z-index: 1; width: calc(515 * var(--u)); margin-left: calc(max(0px, (100% - 1440px) / 2) + 793 * var(--u)); padding: calc(184 * var(--u)) 0 calc(75 * var(--u)); color: #ffffff; } .kg-about__script { left: calc(-112.75 * var(--u)); top: calc(110.71 * var(--u)); --w: 257; } .kg-about__ttl { position: relative; z-index: 2; margin: 0; font-size: max(22px, calc(36 * var(--u))); line-height: max(36px, calc(58 * var(--u))); font-weight: 400; letter-spacing: .1em; white-space: nowrap; } .kg-about__text { position: relative; z-index: 2; margin-top: 30px; font-size: 16px; line-height: 38px; letter-spacing: 1.6px; } .kg-about .kg-more { margin-top: 30px; } /* ========================================================= 7. TOP：Service（Figma 1:924：筆記体 Service（80, 56.68）・見出し 36/58（252, 127）・本文の列 x=646 幅 720・VIEW MORE は右寄せ（右端 1366）） ＋ギャラリー（写真 320×240・間 20 を横に流し続ける）＋ギャラリーの上の余白を逆向きに流れる英字（Cinzel 900 118・黒 6%） ※英字の位置：Figma の PC（ABOUT KYOGIYA）は写真に重なる位置（注記の帯の下）で、写真の上では見えないため、本文とギャラリーの間に置く（2026-10-02。SP は Figma どおり） 背面の墨の輪（Figma 40:106：x=−186・Service の上端から −373・1020.8×982） ========================================================= */ .kg-svc { position: relative; --kg-mt: calc(120 * var(--u)); } .kg-svc .kg-brush--ring { left: calc(max(0px, (100% - 1440px) / 2) - 186 * var(--u)); top: calc(-373 * var(--u)); width: calc(1020.8 * var(--u)); height: calc(982 * var(--u)); } .kg-svc__in { position: relative; width: calc(100% - 2 * var(--kg-side)); max-width: 1280px; margin: 0 auto; padding: 127px 0 0 calc(172 * var(--u)); display: flex; align-items: flex-start; } .kg-svc__script { left: 0; top: calc(56.68 * var(--u)); --w: 285.72; } .kg-svc__ttl { position: relative; z-index: 2; flex: 0 0 auto; margin: 0 calc(80 * var(--u) - .1em) 0 0; font-size: max(26px, calc(36 * var(--u))); line-height: max(42px, calc(58 * var(--u))); font-weight: 400; letter-spacing: .1em; white-space: nowrap; } .kg-svc__body { position: relative; z-index: 2; flex: 0 1 720px; min-width: 0; margin-right: -6px; display: flex; flex-direction: column; align-items: flex-end; } .kg-svc__text { align-self: stretch; font-size: 16px; line-height: 38px; letter-spacing: 1.6px; } .kg-svc .kg-more { margin-top: 30px; } /* ギャラリー：同じ並びを 2 回並べて −50% まで流す（つなぎ目なし）。写真の img に lazy を付けない（流れる帯では読み込まれないことがある＝ノウハウ 12 章） */ .kg-gallery { position: relative; margin-top: 80px; overflow-x: clip; } .kg-gallery__track { display: flex; width: max-content; animation: kg-marquee 70s linear infinite; } .kg-gallery:hover .kg-gallery__track { animation-play-state: paused; } .kg-gallery__list { display: flex; gap: 20px; padding-right: 20px; } .kg-gallery__list img { width: 320px; height: 240px; max-width: none; object-fit: cover; } /* 英字の箱 142px のうち字の形は上から 21〜109px。top −150px で、本文の末尾と写真の間（170px＝VIEW MORE の上 30＋高さ 60＋写真の上 80）の真ん中に字が来る（上下とも約 41px あく）。 VIEW MORE（.kg-svc__body の z-index 2）の後ろを通る。写真には重ならない */ .kg-flowtxt { position: absolute; left: 0; right: 0; top: -150px; z-index: 1; margin: 0; overflow: hidden; pointer-events: none; } .kg-flowtxt__track { display: flex; width: max-content; animation: kg-marquee-r 90s linear infinite; } .kg-flowtxt__unit { display: block; padding-right: .45em; font-family: var(--kg-en); font-weight: 900; font-size: 118px; line-height: 142px; letter-spacing: 0; color: rgba(0, 0, 0, .06); white-space: nowrap; } .kg-flowtxt__unit i { display: inline-block; width: .2em; height: .2em; margin: 0 .45em; vertical-align: .26em; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } @keyframes kg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes kg-marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .kg-gallery { overflow-x: auto; } .kg-gallery__track, .kg-flowtxt__track { animation: none; } .kg-gallery__list[aria-hidden="true"] { display: none; } } /* ========================================================= 8. TOP：Reason（Figma 1:964：白い帯・上 60／下 120・筆記体 Reason 中央（回転なし）・見出し 36/58・リード 16/38・ 項目 620 幅×3 段×2 列（列の間 39・段の間 30）：写真 240×160＋間 30＋「Reason 0N」Cinzel 24/29 緑＋間 20＋本文 24/38・下に 1px の線） ========================================================= */ .kg-reason { position: relative; --kg-mt: calc(120 * var(--u)); background: #ffffff; } .kg-reason__in { position: relative; width: calc(100% - 2 * var(--kg-side)); max-width: 1280px; margin: 0 auto; padding: 60px 0 120px; text-align: center; } .kg-reason__script { position: relative; left: auto; top: auto; display: block; font-size: 110px; line-height: 132px; letter-spacing: 3.3px; } .kg-reason__script > span { width: 100%; transform: none; } .kg-reason__ttl { margin: 0; font-size: 36px; line-height: 58px; font-weight: 400; letter-spacing: .1em; } .kg-reason__lead { margin-top: 20px; font-size: 16px; line-height: 38px; letter-spacing: 1.6px; } .kg-reason__cols { display: flex; justify-content: flex-start; align-items: center; gap: 39px; margin-top: 42px; text-align: left; } .kg-reason__col { flex: 0 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 30px; } .kg-reason__item { display: flex; align-items: center; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid #000000; } .kg-reason__img { flex: 0 0 240px; width: 240px; height: 160px; max-width: none; object-fit: cover; } .kg-reason__body { min-width: 0; } .kg-reason__no { font-family: var(--kg-en); font-size: 24px; line-height: 29px; font-weight: 400; letter-spacing: 0; color: var(--kg-green); } .kg-reason__txt { margin-top: 20px; font-size: 24px; line-height: 38px; font-weight: 400; letter-spacing: .1em; } @media (max-width: 1279px) and (min-width: 768px) { .kg-reason__cols { flex-direction: column; align-items: center; gap: 30px; } .kg-reason__col { flex: none; width: min(620px, 100%); } .kg-reason__txt { font-size: 22px; line-height: 36px; } } /* ========================================================= 9. TOP：Area（Figma 3:676：佐賀県の形 543×535（x=133）＋位置の丸 141（165, 393）・間 80・筆記体 Area＋本文 20/48（151, 121）・ 下に透かし「KASHIMA CITY, / SAGA PREFECTURE」Cinzel 900 110/132 黒 10%（上に 30 重なる）。背面に刷毛（Figma 40:109：−80, −52・1768×924）） ========================================================= */ .kg-area { position: relative; --kg-mt: calc(120 * var(--u)); } .kg-area .kg-brush--stroke { left: calc(max(0px, (100% - 1440px) / 2) - 80 * var(--u)); top: calc(-52 * var(--u)); width: calc(1768 * var(--u)); height: calc(924 * var(--u)); } .kg-area__in { position: relative; width: calc(1174 * var(--u)); margin: 0 auto; display: flex; align-items: center; gap: calc(80 * var(--u)); } .kg-area__map { position: relative; flex: 0 0 auto; width: calc(543 * var(--u)); height: calc(535 * var(--u)); } .kg-area__map img { width: 100%; height: 100%; } /* 位置の丸（Figma 2:16：141 の円（緑 1px の線）＋内側 128 の円（金→緑の放射グラデーション）） */ .kg-area__pin { position: absolute; left: calc(165 * var(--u)); top: calc(393 * var(--u)); width: calc(141 * var(--u)); height: calc(141 * var(--u)); border: 1px solid var(--kg-green); border-radius: 50%; } .kg-area__pin::before { content: ""; position: absolute; inset: calc(6.5 * var(--u)); border-radius: 50%; background: radial-gradient(circle closest-side, var(--kg-gold) 0%, var(--kg-green) 100%); } .kg-area__body { position: relative; flex: 0 1 calc(551 * var(--u)); min-width: 0; min-height: calc(361 * var(--u)); padding: calc(121 * var(--u)) 0 0 calc(151 * var(--u)); } .kg-area__script { left: 0; top: calc(44.1 * var(--u)); --w: 223; } .kg-area__text { position: relative; z-index: 2; font-size: max(16px, calc(20 * var(--u))); line-height: max(38px, calc(48 * var(--u))); letter-spacing: .1em; white-space: nowrap; } @media (max-width: 1439px) and (min-width: 768px) { .kg-area__text { white-space: normal; } /* 1440 は Figma の改行どおり（箱 502 が列 400 からはみ出す）。狭い幅は折り返す */ .kg-area__text br { display: none; } } .kg-area__en { position: relative; width: calc(1174 * var(--u)); margin: calc(-30 * var(--u)) auto 0; font-family: var(--kg-en); font-weight: 900; font-size: calc(110 * var(--u)); line-height: calc(132 * var(--u)); letter-spacing: 0; color: rgba(0, 0, 0, .10); text-align: center; white-space: nowrap; pointer-events: none; } /* ========================================================= 10. CONTACT 帯（Figma の共通部品 3:679：1440×540・深緑＋葉の柄 5%（kg_leaf.webp）・余白 80/210・ CONTACT Cinzel 110/132 字間 −9.9 金＋お問い合わせ 24/38・間 20・本文 560 幅 16/38＋間 140＋TEL ボタン 317×68（縦中央）＋電話対応時間） 全ページ共通（フッターのレイアウトに置く）。上の本文から 120 あける ========================================================= */ .kg-contact { position: relative; --kg-mt: calc(120 * var(--u)); background: var(--kg-deep) url("/image/assets/kg_leaf.webp") 50% 50% / cover no-repeat; color: var(--kg-gold); } .kg-contact__in { width: min(1440px, 100%); margin: 0 auto; padding: 80px max(20px, calc(210 * var(--u))); } .kg-contact__en { margin: 0; font-family: var(--kg-en); font-weight: 400; font-size: 110px; line-height: 132px; letter-spacing: -9.9px; white-space: nowrap; } .kg-contact__ja { margin: 0; font-size: 24px; line-height: 38px; font-weight: 400; letter-spacing: 2.4px; } .kg-contact__row { display: flex; align-items: center; gap: calc(140 * var(--u)); margin-top: 20px; } .kg-contact__text { flex: 0 1 560px; min-width: 0; font-size: 16px; line-height: 38px; letter-spacing: 1.6px; } .kg-contact__tel { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; } .kg-contact__hours { font-size: 16px; line-height: 38px; letter-spacing: 1.6px; white-space: nowrap; } /* ========================================================= 11. 地図・フッター（Figma 3:692／3:693：地図 1440×560 → 濃い帯 #3A3833 377（余白 70・左：丸いマーク 80＋「鋏技屋」36/43 字間 7.2／ピン＋住所 15 太さ 500、 右：ナビ 3 項目＋TEL ボタン（金地）、下：コピーライト 14（Noto Serif JP）） corp の DOM：footer.global-footer > .footer-nav-wrap(nav) + .info-grid(.shop-info(.footer-brand h2 + table) + .gmap-wrap) 住所の行と TEL ボタンは共通スクリプト（header_extras）が基本情報設定の値から足す（.kg-foot-addr・.kg-foot-tel）。コピーライトは footer の外の div ========================================================= */ body .global-footer { position: relative; display: grid; margin: 0; padding: 0; border: 0; grid-template-columns: [full-start] minmax(20px, 1fr) [left-start] 258px [left-end] 120px [right-start] 279px [right-end] minmax(20px, 1fr) [full-end]; grid-template-rows: 560px 70px 120px 100px; background: var(--kg-foot); color: #ffffff; } body .global-footer .info-grid { display: contents; } body .global-footer .gmap-wrap { grid-column: full; grid-row: 1; position: relative; min-height: 0; height: 560px; border: 0; border-radius: 0; background: #e5e3df; overflow: hidden; } body .global-footer .gmap-wrap iframe { display: block; width: 100%; height: 100%; min-height: 0; border: 0; filter: none; } body .global-footer .gmap-placeholder { position: absolute; inset: 0; min-height: 0; display: flex; align-items: center; justify-content: center; color: #7a7a7a; } body .global-footer .shop-info, body .global-footer .shop-info.fade-up { grid-column: left; grid-row: 3; align-self: start; justify-self: center; opacity: 1; transform: none; transition: none; } body .global-footer .footer-brand { display: flex; align-items: center; gap: 35px; } body .global-footer .footer-brand::before { content: ""; flex: 0 0 80px; width: 80px; height: 80px; background: url("/image/assets/kg_mark.webp") 0 0 / 100% 100% no-repeat; } body .global-footer .footer-brand h2 { margin: 0 -7.2px 0 0; color: #ffffff; font-family: var(--kg-mincho); font-size: 36px; line-height: 43px; font-weight: 400; letter-spacing: 7.2px; white-space: nowrap; } body .global-footer .footer-genre, body .global-footer .footer-table, body .global-footer .footer-payments-box, body .global-footer .payment-title, body .global-footer .payment-icons { display: none; } .kg-foot-addr { grid-column: left; grid-row: 3; align-self: end; justify-self: center; display: flex; align-items: center; gap: 5px; margin: 0; color: #ffffff; font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0; white-space: nowrap; } .kg-foot-addr i { flex: 0 0 15px; width: 15px; height: 20px; background: #ffffff; -webkit-mask: var(--kg-ic-pin) 0 0 / 100% 100% no-repeat; mask: var(--kg-ic-pin) 0 0 / 100% 100% no-repeat; } body .global-footer .footer-nav-wrap { grid-column: right; grid-row: 3; align-self: start; justify-self: center; display: block; margin: 8px 0 0; padding: 0; background: none; border: 0; } body .global-footer .footer-nav { display: flex; flex-wrap: nowrap; justify-content: center; gap: 40.75px; max-width: none; margin: 0; } body .global-footer .footer-nav-link { margin-right: -1.8px; padding: 0; border: 0 !important; color: #ffffff; font-family: var(--kg-mincho); font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: 1.8px; white-space: nowrap; } body .global-footer .footer-nav-link:hover { color: var(--kg-gold); } body .global-footer .footer-nav-brand { display: none; } .kg-foot-tel { grid-column: right; grid-row: 3; align-self: end; justify-self: center; margin-bottom: 8px; } body .footer-copy-text, body .footer-copy { margin: 0; padding: 0 20px 70px; background: var(--kg-foot); color: #ffffff; border: 0; font-family: "Noto Serif JP", var(--kg-mincho); font-size: 14px; line-height: 17px; letter-spacing: 0; text-align: center; } body .fc-floating-actions { display: none !important; } /* corp の浮遊ボタンは使わない（Figma に無い） */ body.has-floating-actions { padding-bottom: 0; } /* ========================================================= 12. 下層ヒーロー（hero_page。Figma 3:240／3:241：写真 1287×560（x=153・y=86 から右端まで）＋黒 30%（会社概要は 40%）・ 見出し 72/86 800 字間 7.2＋英字の行 39px（ぼかし無しの影 0 4 0 黒）を写真の中央（642, 323）に・左端に縦の透かし（Service／COMPANY） 写真はブロックの「背景画像」を ::before が受け継いで描く（本体の背景は 0 に）。透かしの文字は body のクラスごとに --kg-wm で ========================================================= */ body.kg-page-business { --kg-wm: "Service"; --kg-wm-top: 124; } body.kg-page-company { --kg-wm: "COMPANY"; --kg-wm-top: 34; } body.kg-page-news, body.kg-page-news_detail { --kg-wm: "NEWS"; --kg-wm-top: 124; } body .page-hero-wrapper { position: relative; display: block; height: calc(646 * var(--u)); min-height: 0; margin: 0; padding: 0; background-color: transparent; background-size: 0 0; background-repeat: no-repeat; color: #ffffff; text-align: left; overflow-x: clip; overflow-y: visible; } body .page-hero-wrapper::before, body .page-hero-wrapper::after { content: ""; position: absolute; z-index: 0; top: calc(86 * var(--u)); left: calc(50% - 567 * var(--u)); right: 0; height: calc(560 * var(--u)); } body .page-hero-wrapper::before { background-image: inherit; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-color: #3A3833; } body .page-hero-wrapper::after { background: rgba(0, 0, 0, .30); } body.kg-page-company .page-hero-wrapper::after { background: rgba(0, 0, 0, .40); } body .page-hero-wrapper .ph-overlay { position: absolute; z-index: 0; inset: auto; left: calc(-24 * var(--u)); top: calc(var(--kg-wm-top, 124) * var(--u)); width: auto; height: auto; background: none; pointer-events: none; writing-mode: vertical-rl; font-family: var(--kg-en); font-weight: 900; font-size: calc(118 * var(--u)); line-height: calc(141.6 * var(--u)); letter-spacing: 0; color: rgba(0, 0, 0, .06); white-space: nowrap; } body .page-hero-wrapper .ph-overlay::before { content: var(--kg-wm, ""); } body .page-hero-wrapper .ph-container { position: absolute; z-index: 1; left: calc(50% - 78 * var(--u)); top: calc(323 * var(--u)); width: calc(310 * var(--u)); max-width: none; margin: 0; padding: 0; text-align: left; } body.kg-page-company .page-hero-wrapper .ph-container, body.kg-page-news .page-hero-wrapper .ph-container, body.kg-page-news_detail .page-hero-wrapper .ph-container { text-align: center; } body .page-hero-wrapper .ph-title { margin: 0; font-family: var(--kg-mincho); font-weight: 800; font-size: calc(72 * var(--u)); line-height: calc(86 * var(--u)); letter-spacing: calc(7.2 * var(--u)); color: #ffffff; text-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .96); white-space: nowrap; } body .page-hero-wrapper .ph-desc { margin: 0; max-width: none; font-family: var(--kg-mincho); font-weight: 800; font-size: calc(39 * var(--u)); line-height: calc(42 * var(--u)); letter-spacing: calc(7.2 * var(--u)); color: #ffffff; text-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .96); white-space: nowrap; } /* ========================================================= 13. 下層の見出し（筆記体＋和文 48/77 字間 4.8。Figma の各 Group 182：筆記体の原点・和文の位置・組の高さはセクションごとに --sy／--jx／--jy／--hh） ========================================================= */ .kg-hd { position: relative; height: calc(var(--hh) * 1px); } .kg-hd__script { left: 0; top: calc(var(--sy) * var(--u)); } .kg-hd__ja { position: absolute; z-index: 2; left: calc(var(--jx) * var(--u)); top: calc(var(--jy) * 1px); margin: 0; font-size: 48px; line-height: 77px; font-weight: 400; letter-spacing: 4.8px; white-space: nowrap; } /* 下層の本文の列（1440 で x=160〜1280）。ヒーローの下 60、セクションの間 120 */ .kg-bsvc, .kg-flow, .kg-barea, .kg-greet, .kg-chead { position: relative; width: calc(100% - 2 * max(var(--kg-side), calc(160 * var(--u)))); max-width: 1120px; margin-left: auto; margin-right: auto; --kg-mt: 120px; } .kg-bsvc, .kg-greet { --kg-mt: 60px; } /* ========================================================= 14. 事業内容（Figma 3:68） ========================================================= */ /* ① 内外装建築板金工事一式（筆記体 Service（0, 56.68）・和文（172, 127）・組の高さ 204 → 40 → 淡い緑の箱 1120×436：余白 70/10・写真 417×294＋間 35＋一覧 616 幅 16/38 #3A564B） */ .kg-bsvc .kg-hd { --hh: 204; --sy: 56.68; --jx: 172; --jy: 127; } .kg-bsvc .kg-hd__script { --w: 285.72; } .kg-bsvc__box { display: flex; align-items: center; justify-content: center; gap: 35px; margin-top: 40px; padding: 70px 10px; background: var(--kg-pale); border: 1px solid var(--kg-green); } .kg-bsvc__img { flex: 0 1 417px; min-width: 0; width: 417px; height: 294px; max-width: none; object-fit: cover; } .kg-bsvc__list { flex: 0 1 616px; min-width: 0; color: var(--kg-deep); font-size: 16px; line-height: 38px; letter-spacing: .48px; } .kg-bsvc__list li::before { content: "・"; } /* ② Flow（筆記体 Flow（0, 38.25）・和文（127, 118）・組 195 → 40 → 白い前置きの箱 1120×269（余白 70・18/43 中央）→ 60 → 7 工程） 工程：丸 100（#C5D4CE・緑 1px・「FLOW」Cinzel 18/22＋番号 40/48 を縦中央）＋間 40＋項目名 24/38・説明 18/29（上 15）。工程の下 40 に 2px の点線（15px ごと）→ 40 */ .kg-flow .kg-hd { --hh: 195; --sy: 38.25; --jx: 127; --jy: 118; } .kg-flow .kg-hd__script { --w: 193; } .kg-flow .kg-brush--ring { left: calc(367 * var(--u)); top: calc(511 * var(--u)); width: calc(1255.8 * var(--u)); height: calc(1208.1 * var(--u)); } .kg-flow__lead { margin-top: 40px; padding: 70px 10px; background: #ffffff; box-shadow: 4px 4px 40px rgba(0, 0, 0, .10); text-align: center; } .kg-flow__lead p { font-size: 18px; line-height: 43px; letter-spacing: .54px; } .kg-flow__list { margin-top: 60px; } .kg-flow__item { display: flex; align-items: center; gap: 40px; padding-bottom: 40px; margin-bottom: 40px; background: radial-gradient(circle at 1px 1px, #000000 0.95px, transparent 1.2px) 0 100% / 15.05px 2px repeat-x; /* Figma の LINE：2px・丸い端・破線 0.05/15＝点。線は座標の上に線幅ぶん（ノウハウ 11 章） */ } .kg-flow__item:last-child { margin-bottom: 0; } .kg-flow__no { flex: 0 0 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; height: 100px; padding-top: 11px; border: 1px solid var(--kg-green); border-radius: 50%; background: var(--kg-pale); color: var(--kg-deep); font-family: var(--kg-en); font-size: 40px; line-height: 48px; letter-spacing: 1.2px; } .kg-flow__no span { display: block; margin-bottom: -4px; font-size: 18px; line-height: 22px; letter-spacing: .54px; } .kg-flow__body { min-width: 0; } .kg-flow__ttl { margin: 0; font-size: 24px; line-height: 38px; font-weight: 400; letter-spacing: 2.4px; } .kg-flow__txt { margin-top: 15px; font-size: 18px; line-height: 29px; letter-spacing: 1.8px; } /* ③ 対応エリア（左：筆記体 Area（0, 44.25）・和文（142, 121）・組 198 → 80 → 本文 400 幅 16/38、右：佐賀県の形 543×535。左の組は縦中央） */ .kg-barea { display: flex; justify-content: space-between; align-items: center; gap: 40px; } .kg-barea .kg-brush--stroke { left: calc(-184 * var(--u)); top: calc(14 * var(--u)); width: calc(1178.7 * var(--u)); height: calc(616 * var(--u)); } .kg-barea__txt { position: relative; flex: 0 1 402px; min-width: 0; } .kg-barea .kg-hd { --hh: 198; --sy: 44.25; --jx: 142; --jy: 121; } .kg-barea .kg-hd__script { --w: 223; } .kg-barea__text { margin-top: 80px; width: 400px; max-width: 100%; font-size: 16px; line-height: 38px; letter-spacing: 1.6px; } .kg-barea .kg-area__map { width: calc(543 * var(--u)); height: calc(535 * var(--u)); } /* ========================================================= 15. 会社概要（Figma 3:392） ========================================================= */ /* ① ご挨拶（筆記体 Greeting（0, 70.62）・和文（207, 134）・組 211 → 40 → 白い箱 1120×553：余白 70/40/70/30・写真 412×360＋間 30＋本文の列 608：見出し 32/51・本文 18/43） */ .kg-greet .kg-hd { --hh: 211; --sy: 70.62; --jx: 207; --jy: 134; } .kg-greet .kg-hd__script { --w: 356; } .kg-greet .kg-brush--stroke, .kg-chead .kg-brush--stroke { left: calc(195 * var(--u)); top: calc(64 * var(--u)); width: calc(1178.7 * var(--u)); height: calc(616 * var(--u)); } .kg-chead .kg-brush--stroke { top: calc(3 * var(--u)); } .kg-greet__card { display: flex; align-items: flex-start; gap: 30px; margin-top: 40px; padding: 70px 40px 70px 30px; background: #ffffff; box-shadow: 4px 4px 40px rgba(0, 0, 0, .10); } .kg-greet__img { flex: 0 1 412px; min-width: 0; width: 412px; height: 360px; max-width: none; object-fit: cover; } .kg-greet__body { flex: 0 1 608px; min-width: 0; } .kg-greet__ttl { margin: 0; font-size: 32px; line-height: 51px; font-weight: 400; letter-spacing: 3.2px; } .kg-greet__text { margin-top: 10px; font-size: 18px; line-height: 43px; letter-spacing: .54px; } /* ② 会社概要（見出し：筆記体 Company（0, 71.58）・和文（210, 134）・組 211 → 40 → 表は store_info ブロック：白い箱 1120×536（余白 40/80・影 .15）・ 項目 230 幅（中央）と内容 710 幅（左 20）・行 62（余白 20）・どちらの列にも下に 1px #3A564B（列の間 18 で切れる）・Zen Old Mincho 18/22） */ .kg-chead .kg-hd { --hh: 211; --sy: 71.58; --jx: 210; --jy: 134; } .kg-chead .kg-hd__script { --w: 362; } /* 行の下線は Figma の「内側の線」＝高さに数えない → 下の余白を 19 にして行 62（ノウハウ 17 章）。表の幅は 230＋18＋710（Figma） 表は「会社概要の見出し（.kg-chead）のカスタムHTML の直後に置いた store_info ブロック」に当てる（JavaScript に頼らない。カスタムHTML の後ろには