/*
 * paper-theme.css — 相談ファイル（紙）テーマ・共通部
 *
 * index.html のインラインCSSから、ページ固有セレクタ（#services / #cases /
 * #reasons / #flow / #lead-magnet など）を除いた「どのページでも通用する部分」だけを
 * 取り出したもの。値は index.html の現行実装に合わせてある。
 *
 * モデル：机（html）→ 用紙＝セクション → 伝票＝カード
 * 原則：
 *   1. 傾きは「紙の上に後から人が加えたもの」だけ。文字を持つ器は傾けない。
 *   2. 影は右下固定のハードオフセット。ぼかし影は紙面上では使わない。
 *   3. 罫線は「紙」＝セクションの上だけ。body には敷かない。
 *   4. main の中に暗い面を作らない。旧・紺セクションは紙へ倒す。
 *
 * 前提: Tailwind CDN を読み込み、tailwind.config の accent を
 *       500=#b98b2e / 600=#8a651a に設定しているページで使う。
 *       ヒーローのセクションには .hero-section を付ける（index の #home に相当）。
 *
 * 注意: index.html は現在も自前のインラインCSSで同じ見た目を作っている。
 *       将来 index.html をこのファイルに寄せると重複が解消できる。
 */

:root {
    /* 面 */
    --desk: #e8e2d5;
    --paper: #fbf8ef;
    --paper-alt: #f5f0e5;
    --paper-card: #fffdf7;
    --paper-deep: #f1ecdf;
    /* 線 */
    --edge: #d8d0c1;
    --edge-soft: #e4ddcd;
    --rule: rgba(73, 116, 148, .085);
    --rule-card: rgba(73, 116, 148, .06);
    /* 文字 */
    --ink: #172033;
    --ink-soft: #46505d;
    --pencil: #6f6a60;
    /* 朱・金 */
    --red-pencil: #ad3c34;
    --red-ink: #b74436;
    --gold: #9a7428;
    --marker: rgba(218, 184, 73, .42);
    /* 影：右下固定・大きさ4段階 */
    --lift-0: 2px 2px 0 var(--edge);
    --lift-1: 3px 3px 0 var(--edge-soft);
    --lift-2: 5px 6px 0 var(--edge-soft), 0 14px 28px rgba(52, 43, 26, .06);
    --lift-3: 6px 7px 0 #dcd3c3;
    /* 罫線ピッチ */
    --rule-pitch: 32px;
}

/* ---------- 机と用紙 ---------- */

html {
    background: var(--desk);
}

body {
    background-color: var(--paper);
    background-image: none;
    color: var(--ink);
}

body.bg-gray-50 {
    background-color: var(--paper) !important;
}

body::selection {
    background: var(--marker);
    color: var(--ink);
}

/* ---------- ヘッダー ---------- */

header {
    background: rgba(255, 253, 247, .96) !important;
    border-bottom: 1px solid var(--edge);
    box-shadow: 0 3px 0 rgba(92, 80, 58, .07) !important;
}

header nav a {
    font-family: "Noto Serif JP", serif;
}

header nav a:hover {
    text-decoration: underline;
    text-decoration-color: var(--red-pencil);
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

#mobile-menu {
    background: var(--paper-card) !important;
    border-top: 1px solid var(--edge) !important;
    box-shadow: 0 6px 0 rgba(92, 80, 58, .07) !important;
}

#mobile-menu a {
    font-family: "Noto Serif JP", serif;
    border-radius: 2px !important;
}

/* ---------- ヒーロー ---------- */

.hero-section {
    position: relative;
    border-bottom: 8px solid #ded6c5;
}

.hero-kicker {
    border-left: 0 !important;
    border-bottom: 2px solid #e8cc84;
    background: rgba(7, 22, 56, .66);
    transform: none;
    color: #e6c98b;
    letter-spacing: .08em;
    line-height: 1.55;
}

.hero-title {
    color: #f7f2e8;
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-weight: 700;
    letter-spacing: 0;
    text-shadow: 0 18px 46px rgba(2, 8, 23, .55), 0 2px 12px rgba(2, 8, 23, .34);
}

.hero-title-accent {
    color: #e8c982;
    font-weight: 900;
    text-shadow: 0 14px 38px rgba(2, 8, 23, .46);
}

.hero-copy {
    color: rgba(255, 251, 242, .92);
    text-shadow: 0 2px 10px rgba(2, 8, 23, .42);
    font-weight: 500;
}

/* ---------- セクション＝用紙 ---------- */

main section {
    position: relative;
}

main>section:not(.hero-section) {
    background-color: var(--paper) !important;
    background-image: repeating-linear-gradient(180deg,
            transparent 0 calc(var(--rule-pitch) - 1px),
            var(--rule) calc(var(--rule-pitch) - 1px) var(--rule-pitch)) !important;
    border-bottom: 1px solid var(--edge);
}

main>section:nth-of-type(even):not(.hero-section) {
    background-color: var(--paper-alt) !important;
}

main>section>.container {
    position: relative;
}

main>section .border-gray-200,
main>section .border-gray-100 {
    border-color: var(--edge) !important;
}

/* main の中に暗い面を作らない。旧・紺セクションは紙に倒し、文字を墨へ戻す */
main>section.bg-navy-900:not(.hero-section) h2,
main>section.bg-navy-900:not(.hero-section) h3,
main>section.bg-navy-900:not(.hero-section) p,
main>section.bg-navy-900:not(.hero-section) .text-white,
main>section.bg-navy-900:not(.hero-section) .text-gray-300 {
    color: var(--ink) !important;
}

main>section.bg-navy-900:not(.hero-section) .border-white\/10 {
    border-color: var(--edge) !important;
}

/* ---------- 見出し ---------- */

main>section:not(.hero-section) h2 {
    font-family: "Noto Serif JP", serif !important;
    letter-spacing: .02em;
}

main>section:not(.hero-section) .text-navy-900,
main>section:not(.hero-section) .text-navy-800 {
    color: var(--ink);
}

/* 見出しの上に置く小見出し（EYEBROW）は、伝票に押した札の見立て */
main>section:not(.hero-section) .text-center>span:first-child {
    display: inline-block;
    padding: .32rem .75rem;
    border: 1px solid currentColor;
    background: rgba(255, 253, 247, .9);
    font-size: .68rem !important;
    letter-spacing: .14em;
    box-shadow: 2px 2px 0 rgba(173, 60, 52, .13);
    transform: none;
}

/* h2 下のマーカー線 */
main>section:not(.hero-section) .text-center h2::after {
    content: "";
    display: block;
    width: 5.5rem;
    height: 7px;
    margin: .8rem auto 0;
    background: linear-gradient(transparent 20%, var(--marker) 20% 78%, transparent 78%);
}

/* 蛍光ペンで引いた見出し。使いたい要素に付ける */
.marker-text {
    padding: 0 .1em;
    background-image: linear-gradient(transparent 58%, var(--marker) 58% 94%, transparent 94%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration: none;
}

/* ---------- 面と影 ---------- */

main>section:not(.hero-section) .rounded-lg,
main>section:not(.hero-section) .rounded-xl,
main>section:not(.hero-section) .rounded-2xl {
    border-radius: 2px !important;
}

main>section:not(.hero-section) .shadow-sm {
    box-shadow: var(--lift-1) !important;
}

main>section:not(.hero-section) .shadow-md,
main>section:not(.hero-section) .shadow-lg,
main>section:not(.hero-section) .shadow-xl,
main>section:not(.hero-section) .shadow-2xl {
    box-shadow: var(--lift-2) !important;
}

/* 伝票＝カード。奇数・偶数でわずかに紙を変えて、束ねた感じを出す */
.paper-card {
    background: var(--paper-card) !important;
    border: 1px solid var(--edge) !important;
    border-radius: 2px !important;
    box-shadow: var(--lift-1) !important;
}

.paper-card:nth-child(even) {
    background: var(--paper-deep) !important;
}

/* ---------- ボタン ---------- */

a.rounded-full,
.button-primary {
    border-radius: 2px !important;
    box-shadow: 3px 3px 0 rgba(73, 60, 36, .22) !important;
    transform: none;
    letter-spacing: .02em;
}

a.rounded-full:hover,
.button-primary:hover {
    transform: none !important;
}

/* ---------- 色の割り当て ----------
   紙の上では #b98b2e はコントラストが足りないため、文字は濃い金に。
   ボタンはフラットな朱肉色（光沢グラデは紙の質感に合わない）。 */

.text-accent-500,
.text-accent-600,
.text-yellow-400 {
    color: #8a651b !important;
}

.bg-accent-500,
.bg-accent-600,
.button-primary {
    background: var(--red-ink) !important;
    color: #FFFFFF !important;
    border: 1px solid #8f2e27;
    box-shadow: 3px 3px 0 rgba(73, 60, 36, .22) !important;
}

.bg-accent-500 i,
.bg-accent-600 i,
a[class*="bg-accent-500"] i,
button[class*="bg-accent-500"] i {
    color: #FFFFFF !important;
}

.hover\:bg-accent-500:hover,
.hover\:bg-accent-600:hover,
.button-primary:hover {
    background: #9d3529 !important;
    color: #FFFFFF !important;
}

.border-accent-500,
.border-accent-600 {
    border-color: #b98b2e !important;
}

a[class*="bg-white"] i,
button[class*="bg-white"] i {
    color: var(--red-ink) !important;
}

/* index.html と同じ実効値。クラス指定が header 要素指定より強いため、
   ヘッダーの地色と影は実質ここで決まる */
.bg-white {
    background-color: rgba(255, 255, 255, .96) !important;
}

.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
    box-shadow: 0 16px 40px rgba(15, 23, 42, .08) !important;
}

/* ---------- フッター ---------- */

footer,
footer.bg-navy-900 {
    background: #26313f !important;
    border-top: 8px solid #ded5c4 !important;
}

footer .text-gray-600 {
    color: #97a1ad !important;
}

@media (max-width: 768px) {
    header img {
        height: 40px !important;
    }
}