/* =================================================================== Garko Glow — style.css デザイン方向: 和風 × 墨 (2026-07-11 先輩指示で完全転換) 和紙地 x 墨(すみ) x 明朝体 x 朱(しゅ)の落款を差し色一点 スマホファースト（375px基準）/ 外部依存ゼロ（システムフォントのみ） 旧方向(acid rave/ビビッド)は decision_design_pivot_sumi_20260711.md 参照 =================================================================== */ :root { --washi: #F3EEE3; /* 和紙地（生成りより白練寄り） */ --washi-2: #EBE4D5; /* 一段深い和紙（パネル地） */ --washi-3: #E1D8C4; /* 罫・淡い面 */ --sumi: #23201C; /* 墨（わずかに温かい黒） */ --sumi-2: #3B362F; /* 中墨（線・見出し） */ --usuzumi: #6E685D; /* 薄墨（副文・かな） */ --shu: #A8352B; /* 朱（落款・差し色一点） */ --shu-deep: #872A22; --keisen: #C9BEA6; /* 罫線（枯れた細線） */ /* --- ストリート層 (Layer B / タグと同じ黒×金) --- */ --street-bg: #141210; /* タグの黒 */ --gold: #E3C46A; /* タグの金 */ --gold-dim: #B99B4E; --font-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS PMincho", serif; --font-gothic: "Yu Gothic", "YuGothic", "Hiragino Sans", "Meiryo", sans-serif; --rule: 1px; --rule-bold: 2px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background-color: var(--washi); color: var(--sumi); font-family: var(--font-gothic); font-size: 16px; line-height: 2.0; letter-spacing: 0.02em; font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; /* 地は無地washi。質感は額装した墨絵が持たせる (タイルの継ぎ目=AI感を避ける) */ background-image: radial-gradient(circle at 20% 8%, rgba(35,32,28,0.018), rgba(35,32,28,0) 38%), radial-gradient(circle at 84% 82%, rgba(35,32,28,0.016), rgba(35,32,28,0) 40%); } img, svg { max-width: 100%; display: block; } /* 画像に width/height 属性を持たせて CLS を止めるための受け皿。 属性は「縦横比のヒント」として働かせたいので、既定では高さを自動に戻す。 .species-card .thumb img など height を明示している箇所は詳細度で勝つので影響しない。 */ img { height: auto; } /* 画像で組んだ見出しに、目に見えない読み上げ・検索用のテキストを添えるためのもの。 見た目は1pxも変えない（墨文字ワードマークの意匠はそのまま）。 */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } a { color: var(--shu); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--sumi); } .wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; } /* ---------- Header / Logo ---------- */ /* ヘッダ = ストリート層 (黒地に金のドリップロゴ) */ .site-header { background: var(--street-bg); border-bottom: 2px solid var(--gold); position: sticky; top: 0; z-index: 50; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 10px; gap: 12px; } .header-duck { height: 30px; width: auto; opacity: 0.95; } .logo { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; } .logo-wordmark { height: 42px; width: auto; display: block; } .logo-main { font-family: var(--font-mincho); font-weight: 700; font-size: 23px; letter-spacing: 0.22em; color: var(--sumi); } .logo-sub { margin-top: 4px; font-family: var(--font-mincho); font-weight: 400; font-size: 11px; letter-spacing: 0.42em; color: var(--shu); } .site-header .logo { margin-right: auto; } /* ≡ ボタンは JS が動いているときだけ出す。 JS が無い/落ちた環境では、ボタンを出さずにナビをそのまま開いておく （押しても開かないボタンを見せない・ナビが消えたまま何も出ないのを防ぐ）。 の1行が に .js を付けるので、描画前に確定する。 */ .nav-toggle { display: none; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin-left: 8px; background: transparent; color: var(--gold); border: var(--rule) solid var(--gold); font-family: var(--font-mincho); font-weight: 700; padding: 6px 12px; font-size: 13px; letter-spacing: 0.08em; cursor: pointer; } /* ナビ = ストリート層の続き (黒地に金の文字) */ .site-nav { background: var(--street-bg); border-bottom: var(--rule) solid var(--gold-dim); } .site-nav ul { list-style: none; margin: 0; padding: 6px 0; } .site-nav .nav-more { border-top: var(--rule) solid var(--gold-dim); padding-top: 8px; } .site-nav .wrap { padding-top: 0; padding-bottom: 0; } .site-nav a { display: block; color: var(--gold); font-family: var(--font-mincho); font-weight: 500; font-size: 15px; letter-spacing: 0.08em; text-decoration: none; padding: 12px 11px; min-height: 44px; border-bottom: var(--rule-bold) solid transparent; opacity: 0.85; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold); opacity: 1; border-bottom-color: var(--gold); } @media (max-width: 959px) { .js .nav-toggle { display: inline-flex; } .js .site-nav { display: none; } .js .site-nav.is-open { display: block; } } @media (min-width: 960px) { .nav-toggle, .js .nav-toggle { display: none; } .site-nav { display: block; } .site-nav .nav-more { display: none; } .site-nav .nav-primary { display: flex; flex-wrap: wrap; gap: 2px 4px; } .site-nav a { display: inline-block; font-size: 13px; padding: 7px 11px; min-height: 0; } } /* ---------- Hero ---------- */ .hero { border-bottom: var(--rule) solid var(--sumi); padding: 54px 0 30px; text-align: center; } .hero-inner { position: relative; } /* 縦書きの気配 — 右端にそっと一行 (和の呼吸) */ .hero-side { position: absolute; right: 0; top: -6px; writing-mode: vertical-rl; font-family: var(--font-mincho); font-size: 12px; letter-spacing: 0.5em; color: var(--usuzumi); margin: 0; height: 15em; border-left: 1px solid var(--keisen); padding-left: 10px; } /* 筆の一線 (区切り)・和紙地に溶かす */ .hero-rule { max-width: 320px; margin: 22px auto 0; } .hero-rule img { width: 100%; height: auto; mix-blend-mode: multiply; } .hero-mark { margin: 0 auto 20px; } /* 確定ロゴ(円相メダカ・墨絵)を色紙のように額装して見せる */ .hero-logo { width: 220px; max-width: 72%; margin: 0 auto 22px; padding: 10px; background: var(--washi-2); border: var(--rule) solid var(--sumi); } .hero-logo img { width: 100%; height: auto; } .hero h1 { font-family: var(--font-mincho); font-weight: 700; font-size: 30px; letter-spacing: 0.08em; margin: 0 0 12px; } /* ヒーローの墨文字ワードマーク（目覚めだか・濁点だけ朱） */ .hero-wordmark { margin: 4px 0 14px; } .hero-wordmark img { display: block; margin: 0 auto; width: auto; max-width: min(440px, 86%); height: auto; } .hero .tagline { font-family: var(--font-mincho); font-weight: 400; font-size: 14px; letter-spacing: 0.06em; color: var(--usuzumi); margin: 0; } /* キャッチコピーの結び「あなたの日常に心の安らぎを。」 */ .hero .tagline-em { font-family: var(--font-mincho); font-weight: 700; font-size: 17px; letter-spacing: 0.2em; color: var(--sumi); margin: 10px 0 0; } /* ---------- Typography ---------- */ h1, h2, h3 { font-family: var(--font-mincho); font-weight: 700; letter-spacing: 0.04em; color: var(--sumi); } h1 { font-size: 26px; line-height: 1.5; } h2 { font-size: 21px; margin-top: 2.6em; margin-bottom: 1em; line-height: 1.5; letter-spacing: 0.12em; position: relative; padding-left: 22px; } /* 落款のような朱の小さな角印を見出しの前に */ h2::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 9px; height: 9px; background: var(--shu); } h3 { font-size: 17px; color: var(--sumi); border-bottom: var(--rule) solid var(--keisen); padding-bottom: 4px; } p { margin: 1em 0; } .lede { font-family: var(--font-mincho); font-size: 15px; color: var(--usuzumi); letter-spacing: 0.04em; } /* ---------- Buttons / Chips ---------- */ .btn { display: inline-block; font-family: var(--font-mincho); font-weight: 700; letter-spacing: 0.08em; background: transparent; color: var(--sumi); border: var(--rule-bold) solid var(--sumi); padding: 11px 22px; text-decoration: none; transition: background .15s, color .15s; } .btn:hover { background: var(--sumi); color: var(--washi); } .btn.btn-shu { border-color: var(--shu); color: var(--shu); } .btn.btn-shu:hover { background: var(--shu); color: var(--washi); } .chip { display: inline-block; font-family: var(--font-mincho); font-weight: 500; font-size: 12px; padding: 3px 12px; border: var(--rule) solid var(--sumi); background: transparent; color: var(--sumi); } /* ---------- Section blocks ---------- */ .section { padding: 30px 0; } .panel { background: var(--washi-2); border: var(--rule) solid var(--keisen); padding: 20px; margin: 20px 0; } /* ---------- Stand-of-the-week / X embed ---------- */ .x-embed-block { background: var(--washi-2); border: var(--rule) solid var(--sumi); padding: 20px; color: var(--sumi); } .x-embed-block h2 { color: var(--sumi); border-left-color: var(--shu); margin-top: 0; } .x-embed-placeholder { background: var(--washi); border: var(--rule) solid var(--keisen); padding: 30px 16px; text-align: center; font-size: 13px; color: var(--usuzumi); font-family: var(--font-mincho); line-height: 2.1; } /* 「開店準備中」= 朱の印 (縦書き・角枠) */ .junbi-stamp { display: inline-block; writing-mode: vertical-rl; font-family: var(--font-mincho); font-weight: 700; font-size: 15px; letter-spacing: 0.28em; color: var(--shu); border: 2px solid var(--shu); padding: 12px 6px; margin-bottom: 14px; transform: rotate(-2deg); } .x-embed-placeholder p { margin: 0; } /* ---------- Species grid ---------- */ .species-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 560px) { .species-grid { grid-template-columns: 1fr 1fr; } } .species-card { display: block; text-decoration: none; color: var(--sumi); background: transparent; border: var(--rule) solid var(--keisen); overflow: hidden; transition: border-color .2s; } .species-card:hover { border-color: var(--sumi); } .species-card .thumb { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--rule) solid var(--keisen); } .species-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .species-card:hover .thumb img { transform: scale(1.03); } .species-card .body { padding: 15px 17px 17px; } .species-card .name { font-family: var(--font-mincho); font-weight: 700; font-size: 19px; letter-spacing: 0.14em; margin: 0 0 2px; } .species-card .kana { font-family: var(--font-mincho); font-size: 11px; color: var(--usuzumi); letter-spacing: 0.22em; margin: 0 0 9px; } .species-card .price { font-size: 12.5px; color: var(--sumi-2); margin: 2px 0 0; } .stars { color: var(--shu); letter-spacing: 2px; } /* ---------- ストリート帯 (アガベ面・タグと同じ意匠) ---------- */ .street-band { background: var(--street-bg); border: 2px solid var(--gold); padding: 26px 20px 22px; margin: 4px 0 26px; text-align: center; position: relative; } .street-brush { display: block; width: 118px; height: auto; margin: 0 auto 12px; } .street-band h1 { color: var(--gold); margin: 0; font-size: 27px; letter-spacing: 0.3em; text-indent: 0.3em; /* letter-spacing の右余りを相殺して中央に */ } .street-band .street-sub { margin: 8px 0 0; color: var(--gold-dim); font-family: var(--font-gothic); font-weight: 700; font-size: 12px; letter-spacing: 0.28em; text-indent: 0.28em; } /* ---------- 読みもの (ブログ・端正層) ---------- */ .post-list { margin: 26px 0 8px; } .post-card { display: block; text-decoration: none; color: var(--sumi); padding: 22px 0 20px; border-bottom: var(--rule) solid var(--keisen); transition: opacity .2s; } .post-card:first-child { border-top: var(--rule) solid var(--keisen); } .post-card:hover { opacity: .72; } .post-date { font-family: var(--font-mincho); font-size: 12px; letter-spacing: 0.14em; color: var(--usuzumi); margin: 0 0 6px; } .post-title { font-family: var(--font-mincho); font-weight: 700; font-size: 19px; line-height: 1.6; letter-spacing: 0.04em; margin: 0 0 8px; } .post-desc { font-size: 13.5px; line-height: 1.9; color: var(--sumi-2); margin: 0; } .post-tags { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; } .post-tags span { font-family: var(--font-mincho); font-size: 11px; letter-spacing: 0.1em; color: var(--usuzumi); border: var(--rule) solid var(--keisen); padding: 2px 10px; } /* 記事の見出し画像 (額装して読み物の入口にする) */ .post-hero { margin: 20px 0 4px; border: var(--rule) solid var(--keisen); background: var(--washi-2); } .post-hero img { width: 100%; height: auto; display: block; } /* Amazon商品カード (端正層・価格は載せない=規約と鮮度の両面で安全) */ .amz-card { margin: 26px 0; padding: 18px 20px; background: var(--washi-2); border: var(--rule) solid var(--keisen); border-left: 3px solid var(--shu); } .amz-name { font-family: var(--font-mincho); font-weight: 700; font-size: 15.5px; letter-spacing: 0.04em; margin: 0; line-height: 1.7; } .amz-note { font-size: 13px; line-height: 1.95; color: var(--sumi-2); margin: 8px 0 0; } .amz-link { margin: 12px 0 0; } .amz-link a { font-family: var(--font-mincho); font-size: 13px; letter-spacing: 0.08em; text-decoration: none; border-bottom: var(--rule) solid var(--shu); padding-bottom: 2px; } /* 広告表示 (ステマ規制対応・端正層。目立ちすぎず、でも確実に読める) */ .pr-notice { display: flex; align-items: baseline; gap: 9px; margin: 16px 0 0; padding: 11px 14px; background: var(--washi-2); border: var(--rule) solid var(--keisen); font-size: 12.5px; line-height: 1.8; color: var(--usuzumi); } .pr-badge { flex: none; font-family: var(--font-mincho); font-size: 11px; letter-spacing: 0.14em; color: var(--shu); border: var(--rule) solid var(--shu); padding: 1px 8px; } /* フッターのアソシエイト表記 (Amazon規約の義務) */ /* フッタのSNS行。ストリート層なので .site-footer a が金になる（朱は混ぜない）。 */ .foot-sns { margin: 0 0 12px; font-size: 12.5px; letter-spacing: 0.06em; } .foot-assoc { font-size: 11.5px; line-height: 1.8; color: var(--gold-dim); margin: 0 0 10px; } /* 記事本文 — 読み物として行間をゆったり */ .post-body { margin: 22px 0 34px; } .post-body h2 { font-size: 19px; margin-top: 2.4em; } .post-body h3 { font-size: 16px; margin-top: 1.9em; } .post-body p { line-height: 2.05; } .post-body li { line-height: 1.95; margin: 0.35em 0; } .post-nav { display: flex; flex-direction: column; gap: 10px; padding: 20px 0; border-top: var(--rule) solid var(--keisen); border-bottom: var(--rule) solid var(--keisen); } .post-nav .pn { font-family: var(--font-mincho); font-size: 13px; line-height: 1.7; text-decoration: none; color: var(--sumi-2); } .post-nav .older { text-align: right; } .post-nav .pn:hover { color: var(--shu); } @media (min-width: 560px) { .post-title { font-size: 21px; } } /* ---------- Species detail ---------- */ .crumb { font-size: 13px; font-family: var(--font-mincho); } .species-title { letter-spacing: 0.16em; } /* 品種名の前に置くカテゴリ（アガベ／めだか）。 h1 が品種名の裸置きだと、検索側にも読み手にも何の品種か伝わらないため添える。 端正層のまま——薄墨の小さな明朝で、品種名より一段引く。金・朱は使わない。 */ .species-cat { display: block; font-family: var(--font-mincho); font-size: 13px; font-weight: 400; color: var(--usuzumi); letter-spacing: 0.3em; margin-bottom: 2px; } .species-kana { font-family: var(--font-mincho); font-size: 13px; font-weight: 400; color: var(--usuzumi); letter-spacing: 0.3em; margin-left: 10px; } /* 品種の日本画 (主役ビジュアル) */ .species-art { max-width: 480px; margin: 10px 0 20px; border: var(--rule) solid var(--keisen); } .species-art img { width: 100%; height: auto; display: block; } .photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; } .spec-table { width: 100%; border-collapse: collapse; margin: 18px 0; } .spec-table th, .spec-table td { text-align: left; padding: 10px 12px; border: var(--rule) solid var(--keisen); font-size: 14px; } .spec-table th { background: var(--washi-2); width: 34%; font-family: var(--font-mincho); font-weight: 700; } .feature-list { padding-left: 1.2em; list-style: none; } .feature-list li { margin: 0.6em 0; padding-left: 1.1em; position: relative; } .feature-list li::before { content: "・"; position: absolute; left: -0.1em; color: var(--shu); font-weight: 700; } .our-way { background: var(--washi-2); border-left: 4px solid var(--shu); padding: 16px 18px; } .our-way h3 { margin-top: 0; border-bottom: none; } /* ---------- 育てているもの（3商材の墨紋トリオ）---------- */ .grow-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 8px; } /* サブ商材（めだか・多肉）は2枚並び・主役のアガベより控えめに */ .grow-duo { grid-template-columns: repeat(2, 1fr); max-width: 420px; } .grow-card { display: block; text-align: center; text-decoration: none; color: var(--sumi); } .grow-thumb { display: block; background: transparent; border: var(--rule) solid var(--keisen); padding: 8px; aspect-ratio: 1 / 1; overflow: hidden; transition: border-color .2s; } .grow-card:hover .grow-thumb { border-color: var(--sumi); } .grow-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s; } .grow-card:hover .grow-thumb img { transform: scale(1.04); } .grow-name { display: block; font-family: var(--font-mincho); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; margin: 9px 0 1px; } .grow-sub { display: block; font-family: var(--font-mincho); font-size: 11px; color: var(--usuzumi); letter-spacing: 0.06em; } /* めだかの群れ — ページ末尾の余韻 */ .school-motif { max-width: 150px; margin: 46px 8% 0 auto; /* 右寄せ・非対称の間 */ } .school-motif img { width: 100%; height: auto; mix-blend-mode: multiply; } /* ---------- 庭の一景（掛け軸風の額装バンド）---------- */ .garden-band { padding: 12px 0 32px; text-align: center; } .garden-band figure { margin: 0 auto; max-width: 460px; padding: 0 20px; } .garden-band img { width: 100%; border: var(--rule) solid var(--sumi); background: var(--washi-2); } .garden-band figcaption { margin-top: 14px; font-family: var(--font-mincho); font-size: 14px; line-height: 1.9; letter-spacing: 0.08em; color: var(--usuzumi); } /* ---------- 個別ページ先頭の額装画像 ---------- */ .page-hero-img { max-width: 340px; margin: 6px 0 22px; padding: 8px; background: var(--washi-2); border: var(--rule) solid var(--sumi); } .page-hero-img img { width: 100%; height: auto; } /* ---------- Footer ---------- */ /* フッタ = ストリート層で締める (黒地・金) */ .site-footer { margin-top: 56px; background: var(--street-bg); color: #9a927f; border-top: 2px solid var(--gold); padding: 34px 0 40px; font-size: 13px; } .foot-duck { text-align: center; margin-bottom: 18px; } .foot-duck img { width: 76px; height: auto; margin: 0 auto 6px; } .foot-duck span { display: block; font-family: var(--font-mincho); font-size: 12px; letter-spacing: 0.12em; color: var(--gold-dim); } .site-footer a { color: var(--gold); font-family: var(--font-mincho); opacity: 0.9; } .site-footer a:hover { opacity: 1; } .site-footer .foot-nav { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; } .site-footer .foot-nav a { text-decoration: none; font-weight: 500; letter-spacing: 0.06em; } .site-footer p { font-family: var(--font-mincho); letter-spacing: 0.04em; } /* ---------- Breakpoints ---------- */ @media (min-width: 720px) { .wrap { max-width: 860px; } .hero h1 { font-size: 36px; } .logo-main { font-size: 26px; } } @media (min-width: 960px) { .wrap { max-width: 1000px; } } /* ---------- 連絡先 / 販売中の sticky 購入 ---------- */ /* 育て方・読みものの末尾から、いま買える株へ戻す枠。 端正層のまま（和紙パネル×墨）。金・朱は使わない。 */ .gg-sale-back { margin: 38px 0 0; padding: 4px 0 0; border-top: var(--rule) solid var(--keisen); } .gg-sale-back h2 { margin-top: 1.4em; } .gg-sale-back .lede { margin-bottom: 18px; } .gg-contact { margin: 34px 0 0; padding: 22px 18px 20px; border: var(--rule) solid var(--keisen); background: var(--washi-2); } .gg-contact h2 { margin-top: 0; } .gg-contact-wait { color: var(--usuzumi); } .gg-sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; box-sizing: border-box; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--washi); border-top: var(--rule-bold) solid var(--sumi); } .gg-sticky-buy__btn { display: block; text-align: center; font-family: var(--font-mincho); font-weight: 700; letter-spacing: 0.08em; color: var(--washi); background: var(--sumi); text-decoration: none; padding: 12px 16px; min-height: 44px; } .gg-sticky-buy__btn:hover { color: var(--washi); opacity: 0.92; } body.has-sticky-buy { padding-bottom: 84px; } @media (prefers-reduced-motion: reduce) { .species-card .thumb img, .btn, .gg-sticky-buy__btn { transition: none; } }