/*
 * 公開サイト共通テーマ「ひだまりノート」
 * 二人で使うノートをイメージした、紙・罫線・付箋のデザイン。
 * Bootstrap 5.3 の後に読み込み、CSS変数とクラスを上書きする。
 * 見た目のみを扱い、文言・リンク・構成はテンプレート側で変えない。
 */

/* ===== デザイントークン ===== */
:root {
    --hd-paper: #FBF5EA;
    --hd-paper-deep: #F3EAD7;
    --hd-rule: #CDBFA3;
    --hd-ink: #2E2A25;
    --hd-ink-sub: #5E564B;
    --hd-accent: #B4431F;
    --hd-note-yellow: #F6E3A1;
    --hd-note-pink: #F2CDBE;
    --hd-note-green: #D5E2C8;
    --hd-marker: #F3D98B;
    --hd-green-pale: #E4ECDC;

    --hd-font-heading: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --hd-font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;

    --hd-radius: 4px;
    --hd-radius-lg: 6px;
    --hd-line: 1.5px solid var(--hd-ink);
    --hd-line-rule: 1px solid var(--hd-rule);
    --hd-shadow: 0 2px 0 rgba(46, 42, 37, .25);

    /* 従来の変数名（各ページのインラインスタイルから参照されている）をテーマ色に寄せる */
    --primary-color: var(--hd-accent);
    --secondary-color: var(--hd-ink-sub);
    --accent-color: var(--hd-accent);
    --text-dark: var(--hd-ink);
    --text-light: var(--hd-ink-sub);
    --bg-light: var(--hd-paper-deep);
    --gradient-1: var(--hd-ink);
    --gradient-2: var(--hd-ink);
    --gradient-3: var(--hd-ink);

    /* Bootstrap */
    --bs-body-bg: var(--hd-paper);
    --bs-body-bg-rgb: 251, 245, 234;
    --bs-body-color: var(--hd-ink);
    --bs-body-color-rgb: 46, 42, 37;
    --bs-body-font-family: var(--hd-font-body);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.85;
    --bs-emphasis-color: var(--hd-ink);
    --bs-secondary-color: var(--hd-ink-sub);
    --bs-secondary-color-rgb: 94, 86, 75;
    --bs-tertiary-bg: var(--hd-paper-deep);
    --bs-heading-color: var(--hd-ink);
    --bs-primary: var(--hd-accent);
    --bs-primary-rgb: 180, 67, 31;
    --bs-primary-text-emphasis: #7A2C13;
    --bs-primary-bg-subtle: #F6E1D6;
    --bs-primary-border-subtle: var(--hd-rule);
    --bs-secondary: var(--hd-ink-sub);
    --bs-secondary-rgb: 94, 86, 75;
    --bs-success: #3F6B34;
    --bs-success-rgb: 63, 107, 52;
    --bs-info: #2F6370;
    --bs-info-rgb: 47, 99, 112;
    --bs-warning: #E3C46A;
    --bs-warning-rgb: 227, 196, 106;
    --bs-danger: #A12A2A;
    --bs-danger-rgb: 161, 42, 42;
    --bs-dark: var(--hd-ink);
    --bs-dark-rgb: 46, 42, 37;
    --bs-light: var(--hd-paper-deep);
    --bs-light-rgb: 243, 234, 215;
    --bs-white-rgb: 251, 245, 234;
    --bs-link-color: var(--hd-accent);
    --bs-link-color-rgb: 180, 67, 31;
    --bs-link-hover-color: #7A2C13;
    --bs-link-hover-color-rgb: 122, 44, 19;
    --bs-border-color: var(--hd-rule);
    --bs-border-radius: var(--hd-radius);
    --bs-border-radius-sm: var(--hd-radius);
    --bs-border-radius-lg: var(--hd-radius-lg);
    --bs-border-radius-xl: var(--hd-radius-lg);
    --bs-border-radius-xxl: var(--hd-radius-lg);
    --bs-border-radius-pill: var(--hd-radius);
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
    --bs-focus-ring-color: rgba(180, 67, 31, .5);
}

/* ===== 基本 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--hd-paper);
    color: var(--hd-ink);
    font-family: var(--hd-font-body);
    font-size: 16px;
    line-height: 1.85;
    letter-spacing: .02em;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: inherit;
    font-family: var(--hd-font-heading);
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.35;
}
h4, h5, h6, .h4, .h5, .h6 { font-weight: 600; }
/* fw-bold の見出しも読み込んだウェイト（600/800）で表示する */
h1.fw-bold, h2.fw-bold, h3.fw-bold, .display-4.fw-bold, .display-5.fw-bold { font-weight: 800 !important; }
h4.fw-bold, h5.fw-bold, h6.fw-bold { font-weight: 600 !important; }

p, li, dd { line-height: 1.85; }

/* 日本語の見出しを文節の区切りで折り返す（対応ブラウザのみ） */
h1, h2, h3, .display-4, .display-5 { word-break: auto-phrase; }

a { color: var(--hd-accent); text-underline-offset: .2em; }
a:hover { color: #7A2C13; }

/* フォーカスリング（キーボード操作時） */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.form-range:focus-visible,
.accordion-button:focus-visible,
.navbar-toggler:focus-visible {
    outline: 2px solid var(--hd-accent) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

.lead {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.85;
}

.text-muted { color: var(--hd-ink-sub) !important; }
.text-dark { color: var(--hd-ink) !important; }
/* 黄色のままでは紙色の背景で読みにくいため、文字に使うときは濃い色にする */
.text-warning { color: #7A5A0C !important; }
.text-white-50 { color: var(--hd-ink-sub) !important; }

/* 影を使わず、罫線で区切る */
.shadow, .shadow-sm, .shadow-lg, .hover-shadow:hover { box-shadow: none !important; }
.bg-gradient { background-image: none !important; }
.bg-white { background-color: var(--hd-paper) !important; }
.bg-light { background-color: var(--hd-paper-deep) !important; position: relative; }

.text-gradient {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--hd-ink);
}

.display-4, .display-5 { letter-spacing: .02em; }

/* 動きは控えめに（読み込み時のフェードのみ短く残す） */
.fade-in-up { animation: hdFadeIn .5s ease both; }
@keyframes hdFadeIn { from { opacity: 0; } to { opacity: 1; } }
.floating-animation, .pulse-animation { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .fade-in-up { animation: none; }
}

/* ===== ヘッダー ===== */
.navbar {
    background: var(--hd-paper);
    border-bottom: var(--hd-line);
    box-shadow: none;
}

/* サイト名「Futari Note」：見出しと同じ明朝・インク色（ロゴ画像はそのまま） */
.navbar-brand,
.footer .text-gradient {
    color: var(--hd-ink) !important;
    font-family: var(--hd-font-heading);
    font-weight: 800 !important;
    letter-spacing: .04em;
}
.navbar-brand {
    font-size: 1.5rem;
    line-height: 1.5;
}
.navbar-brand:hover { color: var(--hd-ink) !important; }
.footer .text-gradient { font-size: 1.25rem; line-height: 1.3; }

.navbar .nav-link {
    color: var(--hd-ink);
    font-size: 15px;
    font-weight: 500;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.navbar .nav-link:hover {
    color: var(--hd-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
.navbar .btn-primary {
    border-radius: var(--hd-radius) !important;
    min-height: 44px;
    padding: .5rem 1.25rem;
    font-size: 15px;
}
.navbar-toggler {
    border: var(--hd-line);
    border-radius: var(--hd-radius);
    min-height: 44px;
    min-width: 44px;
}
.navbar-toggler:focus { box-shadow: none; }

/* ===== ボタン ===== */
.btn {
    --bs-btn-border-width: 1.5px;
    --bs-btn-border-radius: var(--hd-radius);
    --bs-btn-font-weight: 700;
    --bs-btn-focus-box-shadow: none;
    border-radius: var(--hd-radius);
    letter-spacing: .04em;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn.rounded-pill { border-radius: var(--hd-radius) !important; }

.btn-primary,
.btn-dark {
    --bs-btn-color: var(--hd-paper);
    --bs-btn-bg: var(--hd-ink);
    --bs-btn-border-color: var(--hd-ink);
    --bs-btn-hover-color: var(--hd-paper);
    --bs-btn-hover-bg: var(--hd-accent);
    --bs-btn-hover-border-color: var(--hd-accent);
    --bs-btn-active-color: var(--hd-paper);
    --bs-btn-active-bg: var(--hd-accent);
    --bs-btn-active-border-color: var(--hd-accent);
    --bs-btn-disabled-color: var(--hd-paper);
    --bs-btn-disabled-bg: var(--hd-ink-sub);
    --bs-btn-disabled-border-color: var(--hd-ink-sub);
    padding: 12px 28px;
}
.btn-sm.btn-primary { padding: .35rem .9rem; }

.btn-outline-primary,
.btn-outline-dark,
.btn-outline-secondary,
.btn-light {
    --bs-btn-color: var(--hd-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--hd-ink);
    --bs-btn-hover-color: var(--hd-paper);
    --bs-btn-hover-bg: var(--hd-ink);
    --bs-btn-hover-border-color: var(--hd-ink);
    --bs-btn-active-color: var(--hd-paper);
    --bs-btn-active-bg: var(--hd-ink);
    --bs-btn-active-border-color: var(--hd-ink);
    --bs-btn-disabled-color: var(--hd-ink-sub);
    --bs-btn-disabled-border-color: var(--hd-rule);
}
.btn-light { --bs-btn-bg: var(--hd-paper); }
.btn-outline-secondary { --bs-btn-border-color: var(--hd-ink-sub); }

.btn-success {
    --bs-btn-bg: #3F6B34;
    --bs-btn-border-color: #3F6B34;
    --bs-btn-hover-bg: #2F5226;
    --bs-btn-hover-border-color: #2F5226;
}
.btn-outline-success {
    --bs-btn-color: #3F6B34;
    --bs-btn-border-color: #3F6B34;
    --bs-btn-hover-bg: #3F6B34;
    --bs-btn-hover-border-color: #3F6B34;
    --bs-btn-active-bg: #3F6B34;
    --bs-btn-active-border-color: #3F6B34;
}
.btn-outline-light:hover { transform: none; }

.btn-lg {
    --bs-btn-font-size: 1rem;
    min-height: 52px;
}

/* ヒーロー等の紙色の背景では、白抜きの枠ボタンもインク色で表示する */
main .btn-outline-light {
    --bs-btn-color: var(--hd-ink);
    --bs-btn-border-color: var(--hd-ink);
    --bs-btn-hover-color: var(--hd-paper);
    --bs-btn-hover-bg: var(--hd-ink);
    --bs-btn-hover-border-color: var(--hd-ink);
    --bs-btn-active-color: var(--hd-paper);
    --bs-btn-active-bg: var(--hd-ink);
    backdrop-filter: none;
}

/* 下線リンク（副CTA） */
.hd-link {
    color: var(--hd-ink);
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    min-height: 44px;
    text-decoration: underline;
    text-decoration-color: var(--hd-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: .35em;
}
.hd-link:hover { color: var(--hd-accent); }

/* ===== バッジ・ラベル ===== */
.badge {
    border-radius: var(--hd-radius) !important;
    font-weight: 700;
    letter-spacing: .06em;
}
.badge.bg-primary:not(.bg-opacity-10) { background-color: var(--hd-ink) !important; color: var(--hd-paper) !important; }
.badge.bg-warning { color: var(--hd-ink) !important; }

/* セクション上の小さなラベル（共感／ログイン不要・完全無料 など） */
.hd-eyebrow {
    color: var(--hd-accent);
    display: inline-block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .2em;
    margin-bottom: .75rem;
}

/* ===== カード・パネル ===== */
.card {
    --bs-card-bg: var(--hd-paper);
    --bs-card-border-color: var(--hd-rule);
    --bs-card-border-width: 1.5px;
    --bs-card-border-radius: var(--hd-radius-lg);
    --bs-card-inner-border-radius: calc(var(--hd-radius-lg) - 1.5px);
    --bs-card-cap-bg: var(--hd-paper-deep);
}
.card.border-0 { border: 1.5px solid var(--hd-rule) !important; }
.rounded-3, .rounded-4 { border-radius: var(--hd-radius-lg) !important; }
.rounded { border-radius: var(--hd-radius) !important; }

/* ===== フォーム ===== */
.form-control,
.form-select,
.input-group-text {
    background-color: #FFFDF8;
    border: 1.5px solid var(--hd-ink-sub);
    border-radius: var(--hd-radius);
    color: var(--hd-ink);
}
.input-group-text { background-color: var(--hd-paper-deep); }
.form-control:focus,
.form-select:focus {
    border-color: var(--hd-accent);
    box-shadow: none;
    outline: 2px solid var(--hd-accent);
    outline-offset: 2px;
}
.form-check-input { border: 1.5px solid var(--hd-ink-sub); }
.form-check-input:checked { background-color: var(--hd-ink); border-color: var(--hd-ink); }
.form-check-input:focus { box-shadow: none; border-color: var(--hd-accent); }
.form-range::-webkit-slider-thumb { background-color: var(--hd-accent); }
.form-range::-moz-range-thumb { background-color: var(--hd-accent); }
.form-range::-webkit-slider-runnable-track { background-color: var(--hd-rule); }
.form-range::-moz-range-track { background-color: var(--hd-rule); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--hd-paper), 0 0 0 4px var(--hd-accent); }
.btn-check:checked + .btn,
.btn-check:active + .btn {
    background-color: var(--hd-ink);
    border-color: var(--hd-ink);
    color: var(--hd-paper);
}
.btn-check:focus-visible + .btn { outline: 2px solid var(--hd-accent); outline-offset: 2px; box-shadow: none; }

/* ===== 表・パンくず・アラート・進捗 ===== */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hd-ink);
    --bs-table-border-color: var(--hd-rule);
    --bs-table-striped-bg: rgba(205, 191, 163, .18);
}
.table thead th,
.table-light {
    --bs-table-bg: var(--hd-paper-deep);
    --bs-table-color: var(--hd-ink);
    border-bottom: var(--hd-line);
}
.breadcrumb { --bs-breadcrumb-divider-color: var(--hd-ink-sub); --bs-breadcrumb-item-active-color: var(--hd-ink-sub); }
.alert {
    --bs-alert-border-radius: var(--hd-radius);
    border-width: 1.5px;
}
.alert-warning { --bs-alert-bg: var(--hd-note-yellow); --bs-alert-border-color: #D9BE6C; --bs-alert-color: var(--hd-ink); }
.alert-info { --bs-alert-bg: var(--hd-green-pale); --bs-alert-border-color: var(--hd-rule); --bs-alert-color: var(--hd-ink); }
.alert-success { --bs-alert-bg: var(--hd-note-green); --bs-alert-border-color: #A9BE98; --bs-alert-color: var(--hd-ink); }
.alert-danger { --bs-alert-bg: var(--hd-note-pink); --bs-alert-border-color: #D9A897; --bs-alert-color: #6E1F1F; }
.alert-light, .alert-secondary, .alert-primary { --bs-alert-bg: var(--hd-paper-deep); --bs-alert-border-color: var(--hd-rule); --bs-alert-color: var(--hd-ink); }
.progress { --bs-progress-bg: var(--hd-paper-deep); --bs-progress-border-radius: var(--hd-radius); }

.nav-pills { --bs-nav-pills-link-active-bg: var(--hd-ink); --bs-nav-pills-link-active-color: var(--hd-paper); --bs-nav-pills-border-radius: var(--hd-radius); }
.nav-pills .nav-link { color: var(--hd-ink); }
.nav-tabs { --bs-nav-tabs-border-color: var(--hd-ink); --bs-nav-tabs-link-active-bg: var(--hd-paper); --bs-nav-tabs-link-active-border-color: var(--hd-ink) var(--hd-ink) var(--hd-paper); }
.nav-tabs .nav-link { color: var(--hd-ink); }

hr { border-top: 1px solid var(--hd-rule); opacity: 1; }

/* ===== アコーディオン（FAQ など） ===== */
.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--hd-ink);
    --bs-accordion-border-color: var(--hd-rule);
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-color: var(--hd-ink);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-color: var(--hd-ink);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232E2A25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B4431F' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
.accordion-item {
    border-left: 0;
    border-right: 0;
}
.accordion-button {
    font-family: var(--hd-font-heading);
    font-weight: 600 !important;
    font-size: 1.0625rem;
    line-height: 1.5;
    min-height: 56px;
}
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-body { line-height: 1.85; }

/* ===== セクション共通 ===== */
.section-padding {
    padding: 96px 0;
    position: relative;
}

/* ===== ヒーロー（各ページの見出し部分） ===== */
.hero-section {
    background: var(--hd-paper);
    border-bottom: var(--hd-line-rule);
    color: var(--hd-ink);
    padding: 150px 0 96px;
    position: relative;
    overflow: hidden;
}
.hero-section .text-white,
.hero-section .text-light { color: var(--hd-ink) !important; }
.hero-section .lead { opacity: 1; color: var(--hd-ink-sub); }
.hero-section a:not(.btn) { color: var(--hd-ink); }

/* 蛍光ペンのような下線（装飾のみ） */
.hd-marker {
    background: linear-gradient(transparent 64%, var(--hd-marker) 64%);
    padding: 0 .05em;
}

/* ===== 付箋 ===== */
.hd-sticky {
    background: var(--hd-note-yellow);
    border-radius: 2px;
    box-shadow: var(--hd-shadow);
    color: var(--hd-ink);
    height: 100%;
    padding: 28px 24px 24px;
    position: relative;
}
.hd-sticky::before {
    /* 付箋の上部のテープ（装飾） */
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    width: 64px;
    height: 18px;
    transform: translateX(-50%) rotate(-2deg);
    background: rgba(251, 245, 234, .7);
    border: 1px solid rgba(205, 191, 163, .8);
}
.hd-sticky--yellow { background: var(--hd-note-yellow); transform: rotate(-1.5deg); }
.hd-sticky--pink { background: var(--hd-note-pink); transform: rotate(1deg); }
.hd-sticky--green { background: var(--hd-note-green); transform: rotate(-.8deg); }
.hd-sticky p { color: var(--hd-ink); }

/* 「その悩み〜解決」ブロック */
.hd-solution {
    background: var(--hd-green-pale);
    border: var(--hd-line);
    border-radius: var(--hd-radius-lg);
    padding: 40px 32px;
}
.hd-solution .text-muted { color: var(--hd-ink) !important; }

/* 補足・執筆者などの囲み */
.hd-panel {
    background: var(--hd-green-pale) !important;
    border: var(--hd-line) !important;
    border-radius: var(--hd-radius-lg) !important;
}

/* ===== 目次風リスト（ツール・ガイド一覧） ===== */
.hd-toc {
    border-top: var(--hd-line);
    counter-reset: hd-toc;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hd-toc > li {
    border-bottom: var(--hd-line-rule);
    counter-increment: hd-toc;
}
.hd-toc > li:last-child { border-bottom: var(--hd-line); }
.hd-toc__link {
    align-items: baseline;
    color: var(--hd-ink);
    column-gap: 24px;
    display: grid;
    grid-template-areas: "num title arrow" "num desc arrow";
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    min-height: 44px;
    padding: 22px 8px;
    text-decoration: none;
    transition: background-color .15s ease;
}
.hd-toc__link::before {
    color: var(--hd-accent);
    content: counter(hd-toc, decimal-leading-zero);
    font-family: var(--hd-font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    grid-area: num;
    line-height: 1.3;
}
.hd-toc__link::after {
    align-self: center;
    color: var(--hd-ink);
    content: "\2192";
    content: "\2192" / "";
    font-size: 1.25rem;
    grid-area: arrow;
    transition: transform .15s ease;
}
.hd-toc__link:hover { background: var(--hd-paper-deep); color: var(--hd-ink); }
.hd-toc__link:hover::after { color: var(--hd-accent); transform: translateX(4px); }
.hd-toc__title {
    font-family: var(--hd-font-heading);
    font-size: 1.25rem;
    font-weight: 600 !important;
    grid-area: title;
    line-height: 1.4;
    margin: 0;
}
.hd-toc__desc {
    color: var(--hd-ink-sub);
    font-size: 15px;
    grid-area: desc;
    line-height: 1.8;
    margin: 6px 0 0;
}

/* カード型のマークアップ（.row > .col > a.card）を目次風リストとして表示する（ツール一覧） */
.hd-toc-cards {
    border-top: var(--hd-line);
    counter-reset: hd-toc;
    display: block;
    margin: 0;
}
.hd-toc-cards > * {
    border-bottom: var(--hd-line-rule);
    counter-increment: hd-toc;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}
.hd-toc-cards > *:last-child { border-bottom: var(--hd-line); }
.hd-toc-cards .card {
    align-content: start;
    align-items: start;
    height: auto !important;
    background: transparent;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--hd-ink);
    column-gap: 24px;
    display: grid;
    grid-template-areas: "num title arrow" "num desc arrow" "num meta arrow";
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    padding: 22px 8px;
    transition: background-color .15s ease;
}
.hd-toc-cards .card::before {
    color: var(--hd-accent);
    content: counter(hd-toc, decimal-leading-zero);
    font-family: var(--hd-font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    grid-area: num;
    line-height: 1.3;
}
.hd-toc-cards .card::after {
    align-self: center;
    content: "\2192";
    content: "\2192" / "";
    font-size: 1.25rem;
    grid-area: arrow;
    transition: transform .15s ease;
}
.hd-toc-cards .card:hover { background: rgba(251, 245, 234, .7); }
.hd-toc-cards .card:hover::after { color: var(--hd-accent); transform: translateX(4px); }
.hd-toc-cards .card-body,
.hd-toc-cards .card-body > .d-flex { display: contents; }
.hd-toc-cards .rounded-circle { display: none; }
.hd-toc-cards h4 {
    font-size: 1.25rem;
    grid-area: title;
    line-height: 1.4;
}
.hd-toc-cards .card-body > p.text-muted { font-size: 15px; grid-area: desc; margin-top: 6px !important; }
.hd-toc-cards .sim-meta { grid-area: meta; }

/* ===== 罫線区切りの記事カード（新着記事・ブログ一覧） ===== */
.hd-ruled-card {
    background: transparent;
    border: 0 !important;
    border-top: var(--hd-line) !important;
    border-radius: 0 !important;
    padding-top: 20px;
}
.hd-ruled-card .card-body { padding: 16px 0 0 !important; }
.hd-ruled-card .card-title { font-size: 1.125rem; line-height: 1.5; }
.hd-ruled-card .card-title a:hover { color: var(--hd-accent) !important; text-decoration: underline; }
.hd-thumb,
.hd-ruled-card .card-img-top {
    border: var(--hd-line);
    border-radius: var(--hd-radius) !important;
}
.hd-ruled-card .badge {
    background: transparent !important;
    border: 1px solid var(--hd-accent);
    color: var(--hd-accent) !important;
    padding: .2em .6em !important;
}

/* ===== 最終CTA帯 ===== */
.hd-cta-band {
    background: var(--hd-ink) !important;
    color: var(--hd-paper);
}
.hd-cta-band h2,
.hd-cta-band p,
.hd-cta-band .lead,
.hd-cta-band .text-white,
.hd-cta-band .text-white-50,
.hd-cta-band .text-muted { color: var(--hd-paper) !important; }
.hd-cta-band .btn {
    --bs-btn-color: var(--hd-ink);
    --bs-btn-bg: var(--hd-paper);
    --bs-btn-border-color: var(--hd-paper);
    --bs-btn-hover-color: var(--hd-ink);
    --bs-btn-hover-bg: var(--hd-note-yellow);
    --bs-btn-hover-border-color: var(--hd-note-yellow);
    --bs-btn-active-color: var(--hd-ink);
    --bs-btn-active-bg: var(--hd-note-yellow);
}
.hd-cta-band .btn-outline-light {
    --bs-btn-color: var(--hd-paper);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--hd-paper);
    --bs-btn-hover-color: var(--hd-ink);
    --bs-btn-hover-bg: var(--hd-paper);
    --bs-btn-hover-border-color: var(--hd-paper);
}
.hd-cta-band a:focus-visible { outline-color: var(--hd-note-yellow) !important; }

/* ===== フッター ===== */
.footer {
    background: var(--hd-paper);
    border-top: var(--hd-line);
    color: var(--hd-ink);
    padding: 64px 0 40px;
    position: relative;
}
.footer h6 {
    font-family: var(--hd-font-heading);
    font-size: 1rem;
    font-weight: 600 !important;
    margin-bottom: .5rem;
}
.footer .text-light { color: var(--hd-ink) !important; }
.footer p.text-light { color: var(--hd-ink-sub) !important; }
.footer .text-white-50 { color: var(--hd-ink-sub) !important; font-size: 14px; }
.footer .small { font-size: 14px; }
.footer ul.list-unstyled {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}
.footer a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
}
.footer a:hover { color: var(--hd-accent) !important; text-decoration: underline !important; }
.footer hr { border-top: var(--hd-line-rule); }
/* PCではタップ領域を広く取る必要がないため、フッターの行間を詰める（スマホは44pxのまま） */
@media (min-width: 992px) {
    .footer { padding: 48px 0 32px; }
    .footer .row > .col-12 { margin-bottom: 1.25rem !important; }
    .footer h6 { margin-bottom: .25rem; }
    .footer ul.list-unstyled { margin-bottom: 0; }
    .footer p { line-height: 1.6; }
    .footer p.mt-3 { margin-top: .25rem !important; }
    .footer p.mb-2 { margin-bottom: 0 !important; }
    .footer a {
        line-height: 1.6;
        min-height: 32px;
    }
    .footer a.mb-3 { margin-bottom: .5rem !important; }
    .footer hr { margin: 1rem 0 !important; }
}

/* Cookieのお知らせ（フッターと同じインク色の帯） */
#cookie-consent.bg-dark { background-color: var(--hd-ink) !important; color: var(--hd-paper) !important; }
#cookie-consent a { color: var(--hd-paper) !important; }
#cookie-consent .btn-outline-light {
    --bs-btn-color: var(--hd-paper);
    --bs-btn-border-color: var(--hd-paper);
    --bs-btn-hover-color: var(--hd-ink);
    --bs-btn-hover-bg: var(--hd-paper);
    min-height: 44px;
}
#cookie-consent a:focus-visible,
#cookie-consent button:focus-visible { outline-color: var(--hd-note-yellow) !important; }

/* ===== レスポンシブ ===== */
@media (max-width: 991.98px) {
    .navbar-collapse { border-top: var(--hd-line-rule); margin-top: .5rem; padding-bottom: .75rem; }
}

@media (max-width: 768px) {
    .hero-section { padding: 104px 0 56px; }
    .section-padding { padding: 56px 0; }
    .display-4 { font-size: 2.2rem; }
    .display-5 { font-size: 1.75rem; }
    .btn-lg { padding: 12px 24px; font-size: 1rem; }
    .navbar-brand { font-size: 1.1rem; }
}

@media (max-width: 640px) {
    .container,
    .container-fluid {
        padding-left: 24px;
        padding-right: 24px;
    }
    .container > .row { --bs-gutter-x: 1.5rem; }
    /* 狭い列で文字が1字ずつ折り返さないよう、字間を詰める */
    body { letter-spacing: 0; }
    .btn, .badge { letter-spacing: 0; }
    /* 見出しとバッジを横に並べた行は、狭い画面では折り返す */
    .d-flex.justify-content-between { flex-wrap: wrap; row-gap: .5rem; }
    .hd-sticky--yellow { transform: rotate(-.6deg); }
    .hd-sticky--pink { transform: rotate(.4deg); }
    .hd-sticky--green { transform: rotate(-.3deg); }
    .hd-solution { padding: 28px 20px; }
    .hd-toc__link {
        column-gap: 14px;
        grid-template-areas: "num title arrow" "desc desc desc";
        grid-template-columns: 2.25rem minmax(0, 1fr) auto;
        padding: 18px 4px;
    }
    .hd-toc__link::before { font-size: 1.25rem; }
    .hd-toc-cards .card {
        column-gap: 14px;
        grid-template-areas: "num title arrow" "desc desc desc" "meta meta meta";
        grid-template-columns: 2.25rem minmax(0, 1fr) auto;
        padding: 18px 4px;
    }
    .hd-toc-cards .card::before { font-size: 1.25rem; }
    .hd-toc-cards h4 { font-size: 1.0625rem; }
    .hd-toc__title { font-size: 1.0625rem; }
    .hd-toc__desc { margin-top: 8px; }
}

@media (max-width: 576px) {
    .hero-section { padding: 96px 0 48px; }
    .display-4 { font-size: 1.8rem; }
    .display-5 { font-size: 1.5rem; }
    .btn-lg { padding: 10px 20px; font-size: 1rem; }
    .d-flex.gap-3 { flex-direction: column; gap: 10px !important; }
    .d-flex.gap-3 .btn { width: 100%; }
}

/* ===== 機能紹介などのカード（features / about） ===== */
.feature-card {
    background: var(--hd-paper);
    border: 1.5px solid var(--hd-rule);
    border-radius: var(--hd-radius-lg);
    box-shadow: none;
    position: relative;
}
.feature-icon { display: inline-block; }

/* ===== トップページのメインビジュアル ===== */
.hd-hero__title {
    font-size: 66px;
    font-weight: 800 !important;
    letter-spacing: 0;
    line-height: 1.3;
}
.hero-section .hd-hero__title ~ .lead { max-width: 40em; }
.hd-hero__sub {
    color: var(--hd-ink-sub);
    font-family: var(--hd-font-body);
    font-size: 1.125rem;
    font-weight: 500 !important;
    letter-spacing: .06em;
    line-height: 1.7;
}
.hd-hero__actions { align-items: center; column-gap: 28px; }
@media (max-width: 991.98px) {
    .hd-hero__title { font-size: 52px; }
}
@media (max-width: 640px) {
    .hd-hero__title { font-size: clamp(30px, 9.6vw, 38px); }
    .hd-hero__sub { font-size: 1rem; }
    .hd-hero__actions .hd-link { align-self: flex-start; }
}