/* ========================================================================== 火加減手帖 — 共通スタイルシート (style.css) 設計方針: シンプル・新鮮・オシャレ・とっつきやすい（editorial minimal） 読み込み: 各HTMLので フォント: 各HTMLのでGoogle Fontsを読み込むこと（下部に記載） ========================================================================== */ /* --- 1. デザイントークン（変数） ----------------------------------------- */ :root { /* カラー */ --c-base: #FAFAF8; /* ベース背景（ホワイト） */ --c-text: #2D2D2D; /* テキスト（チャコール） */ --c-accent: #6B7F5E; /* アクセント（オリーブグリーン） */ --c-accent-dk: #56684B; /* アクセント濃（hover等） */ --c-sub: #F5F5F3; /* サブ背景（ライトグレー） */ --c-line: #E4E4DF; /* 罫線（ヘアライン） */ --c-muted: #6E6E68; /* 補助テキスト */ --c-code-bg: #2B2E27; /* コードブロック背景 */ --c-code-text: #EDEFE8; /* コードブロック文字 */ /* フォント */ --f-display: "Playfair Display", "Noto Serif JP", serif; /* 装飾見出し・英字 */ --f-head: "Noto Sans JP", sans-serif; /* 日本語見出し */ --f-body: "Noto Sans JP", sans-serif; /* 本文 */ --f-accent: "DM Sans", "Noto Sans JP", sans-serif; /* ラベル・英字装飾 */ --f-mono: "DM Mono", "SFMono-Regular", Consolas, monospace; /* レイアウト */ --w-content: 720px; /* 記事本文の最大幅 */ --w-wide: 1080px; /* ヘッダー・フッター等の最大幅 */ --radius: 10px; --shadow: 0 1px 2px rgba(45,45,45,.04), 0 8px 24px rgba(45,45,45,.05); /* タイポ（流体） */ --fs-h1: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); --fs-h2: clamp(1.35rem, 1.05rem + 1.3vw, 1.7rem); --fs-h3: clamp(1.12rem, 1rem + 0.5vw, 1.28rem); --fs-body: 1.0625rem; --lh-body: 1.95; } /* --- 2. リセット & ベース ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--c-base); color: var(--c-text); font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "palt" 1; /* 日本語の詰め組 */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-accent); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 3px; } /* --- 3. ヘッダー & グローバルナビ ----------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(250,250,248,.88); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--c-line); } .site-header__inner { max-width: var(--w-wide); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; } .brand:hover { text-decoration: none; } .brand__jp { font-family: var(--f-head); font-weight: 700; font-size: 1.18rem; letter-spacing: .04em; color: var(--c-text); white-space: nowrap; } .brand { flex: 0 0 auto; } .brand__en { font-family: var(--f-display); font-style: italic; font-size: .82rem; color: var(--c-accent); letter-spacing: .02em; } .gnav { display: flex; align-items: center; gap: 26px; } .gnav a { font-family: var(--f-head); font-size: .9rem; font-weight: 500; color: var(--c-text); text-decoration: none; position: relative; padding: 4px 0; } .gnav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--c-accent); transition: width .2s ease; } .gnav a:hover { color: var(--c-accent-dk); text-decoration: none; } .gnav a:hover::after { width: 100%; } /* モバイル: ナビは横スクロール */ @media (max-width: 720px) { .site-header__inner { padding: 0 16px; gap: 12px; } .gnav { gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .gnav a { white-space: nowrap; font-size: .82rem; } .brand__en { display: none; } } /* --- 4. レイアウトラッパ -------------------------------------------------- */ .wrap { max-width: var(--w-wide); margin: 0 auto; padding: 0 24px; } .article { max-width: var(--w-content); margin: 0 auto; padding: 0 24px; } @media (max-width: 720px) { .wrap, .article { padding: 0 18px; } } /* --- 5. パンくず ---------------------------------------------------------- */ .breadcrumb { font-family: var(--f-accent); font-size: .8rem; color: var(--c-muted); padding: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .breadcrumb a { color: var(--c-muted); } .breadcrumb a:hover { color: var(--c-accent); } .breadcrumb span[aria-current] { color: var(--c-text); } .breadcrumb .sep { opacity: .5; } /* --- 6. 記事ヘッダー（タイトル周り） ------------------------------------- */ .post-header { padding: 28px 0 8px; } .post-cat { display: inline-block; font-family: var(--f-accent); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); border: 1px solid var(--c-accent); border-radius: 100px; padding: 4px 12px; margin-bottom: 18px; } .post-title { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-h1); line-height: 1.45; letter-spacing: .01em; margin: 0 0 16px; } .post-meta { font-family: var(--f-accent); font-size: .82rem; color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--c-line); } .post-meta time { font-variant-numeric: tabular-nums; } .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--c-line); } /* --- 7. 本文タイポグラフィ ------------------------------------------------ */ .post-body { padding: 8px 0 0; } .post-body > * + * { margin-top: 1.5em; } .post-body p { margin: 0; } .post-body h2 { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-h2); line-height: 1.5; letter-spacing: .01em; margin: 2.4em 0 .2em; padding-left: 14px; position: relative; } .post-body h2::before { content: ""; position: absolute; left: 0; top: .28em; bottom: .28em; width: 4px; border-radius: 2px; background: var(--c-accent); } .post-body h3 { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-h3); line-height: 1.55; margin: 1.9em 0 .1em; } .post-body strong { font-weight: 700; } .post-body a { font-weight: 500; border-bottom: 1px solid rgba(107,127,94,.4); } .post-body a:hover { text-decoration: none; border-bottom-color: var(--c-accent); } .post-body ul, .post-body ol { margin: 0; padding-left: 1.4em; } .post-body li { margin: .5em 0; } .post-body li::marker { color: var(--c-accent); } /* --- 8. 結論ボックス（GEOルール①: 冒頭の結論ファースト） ----------------- */ .lede { background: var(--c-sub); border: 1px solid var(--c-line); border-left: 4px solid var(--c-accent); border-radius: var(--radius); padding: 22px 24px; margin: 24px 0 8px; } .lede__label { font-family: var(--f-accent); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: 8px; } .lede p { margin: 0; font-weight: 500; } .lede p + p { margin-top: .7em; } /* --- 9. 数値ハイライト（GEOルール②: 具体的な数字） ----------------------- */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 20px 0; } .stat { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 18px 16px; text-align: center; box-shadow: var(--shadow); } .stat__num { font-family: var(--f-display); font-weight: 700; font-size: 2rem; color: var(--c-accent); line-height: 1.1; font-variant-numeric: tabular-nums; } .stat__label { font-family: var(--f-accent); font-size: .78rem; color: var(--c-muted); margin-top: 6px; } /* --- 10. 引用 ------------------------------------------------------------ */ .post-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--c-line); color: var(--c-muted); font-style: normal; } /* --- 11. 表 -------------------------------------------------------------- */ .post-body .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .post-body table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; } .post-body th, .post-body td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; } .post-body thead th { background: var(--c-sub); font-family: var(--f-head); font-weight: 700; font-size: .85rem; letter-spacing: .02em; } .post-body tbody tr:last-child td { border-bottom: 0; } .post-body td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* --- 12. コードブロック（GASコード公開記事用） --------------------------- */ .post-body pre { background: var(--c-code-bg); color: var(--c-code-text); border-radius: var(--radius); padding: 18px 20px; overflow-x: auto; font-family: var(--f-mono); font-size: .86rem; line-height: 1.7; margin: 1.6em 0; -webkit-overflow-scrolling: touch; } .post-body pre code { font-family: inherit; background: none; padding: 0; color: inherit; } .post-body :not(pre) > code { font-family: var(--f-mono); font-size: .88em; background: var(--c-sub); border: 1px solid var(--c-line); border-radius: 5px; padding: .12em .4em; } .code-caption { font-family: var(--f-accent); font-size: .78rem; color: var(--c-muted); margin: -1em 0 1.6em; padding-left: 2px; } /* --- 13. CTA / ツール紹介ボックス（収益化: 自然な紹介） ------------------- */ .cta { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 22px 24px; margin: 28px 0; box-shadow: var(--shadow); } .cta__label { font-family: var(--f-accent); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; } .cta__title { font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; } .cta__body { margin: 0 0 16px; font-size: .96rem; } .btn { display: inline-block; font-family: var(--f-head); font-weight: 700; font-size: .92rem; background: var(--c-accent); color: #fff !important; border-radius: 100px; padding: 11px 26px; text-decoration: none !important; transition: background .15s ease, transform .15s ease; } .btn:hover { background: var(--c-accent-dk); transform: translateY(-1px); } .cta small { display: block; margin-top: 10px; font-size: .72rem; color: var(--c-muted); } /* --- 14. FAQ（GEOルール③: 記事末尾FAQ） --------------------------------- */ .faq { margin: 40px 0 8px; padding-top: 32px; border-top: 1px solid var(--c-line); } .faq__heading { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-h2); margin: 0 0 18px; display: flex; align-items: baseline; gap: 10px; } .faq__heading .en { font-family: var(--f-display); font-style: italic; font-size: .9rem; color: var(--c-accent); } .faq details { border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; margin-bottom: 12px; overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 20px; position: relative; font-family: var(--f-head); font-weight: 700; font-size: .98rem; line-height: 1.6; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before { content: "Q"; font-family: var(--f-display); color: var(--c-accent); font-weight: 700; margin-right: 10px; } .faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-family: var(--f-accent); font-size: 1.3rem; color: var(--c-accent); transition: transform .2s ease; } .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq__a { padding: 0 20px 18px 20px; color: var(--c-text); } .faq__a p { margin: 0; } .faq__a p + p { margin-top: .7em; } /* --- 15. 著者ボックス（一次情報の担保 / Person） ------------------------- */ .author { display: flex; gap: 18px; align-items: flex-start; background: var(--c-sub); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 22px 24px; margin: 40px 0 0; } .author__avatar { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: var(--c-accent); color: #fff; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; } .author__name { font-family: var(--f-head); font-weight: 700; font-size: 1rem; margin: 0 0 4px; } .author__bio { font-size: .9rem; color: var(--c-muted); margin: 0; line-height: 1.8; } /* --- 16. 関連記事 -------------------------------------------------------- */ .related { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid var(--c-line); } .related__heading { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-h3); margin: 0 0 16px; } .related__list { display: grid; gap: 12px; } .related__item { display: block; padding: 16px 18px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); text-decoration: none; color: var(--c-text); transition: border-color .15s ease, transform .15s ease; } .related__item:hover { border-color: var(--c-accent); transform: translateX(2px); text-decoration: none; } .related__cat { font-family: var(--f-accent); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); } .related__title { font-family: var(--f-head); font-weight: 700; font-size: .96rem; margin-top: 4px; line-height: 1.5; } /* --- 17. フッター -------------------------------------------------------- */ .site-footer { margin-top: 80px; background: var(--c-text); color: #D8D8D2; padding: 48px 0 32px; font-size: .88rem; } .site-footer__inner { max-width: var(--w-wide); margin: 0 auto; padding: 0 24px; } .site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; } .site-footer__brand .jp { font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; color: #fff; } .site-footer__brand .en { font-family: var(--f-display); font-style: italic; color: var(--c-accent); font-size: .82rem; } .site-footer__tag { color: #9C9C95; margin-top: 6px; font-size: .82rem; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; } .site-footer nav a { color: #D8D8D2; font-family: var(--f-head); font-size: .85rem; } .site-footer nav a:hover { color: var(--c-accent); text-decoration: none; } .site-footer__bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--f-accent); font-size: .76rem; color: #8C8C85; } /* --- 18. ユーティリティ -------------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .text-accent { color: var(--c-accent); } /* --- 19. PR表記ブロック（ステマ規制対応） --------------------------------- */ .pr-notice { display: flex; align-items: flex-start; gap: 0.6em; margin: 1.25rem 0 2rem; padding: 0.75rem 1rem; background: var(--c-sub); border-left: 3px solid var(--c-accent); border-radius: 4px; font-family: var(--f-body); } .pr-notice__tag { flex-shrink: 0; padding: 0.15em 0.65em; background: var(--c-accent); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.7; border-radius: 3px; } .pr-notice span:not(.pr-notice__tag) { margin: 0; font-size: 0.83rem; line-height: 1.7; color: var(--c-text); } /* --- 20. アフィリエイトCTAボタン ----------------------------------------- */ .aff-btn { display: inline-block; margin: 1.5rem 0; padding: 0.9rem 2rem; background: var(--c-accent); color: #fff; font-family: var(--f-body); font-weight: 700; text-decoration: none; border-radius: 6px; transition: opacity 0.2s ease; } .aff-btn:hover { opacity: 0.85; }