/* 運営者情報・プライバシーポリシーの共通スタイル。
本体（index.html）と同じ感熱紙のトーンを保つ。
本体はスマホ枠に閉じているが、こちらは読み物なので
幅を活かした 1カラム文書レイアウトにする。 */
:root{
--paper:#EDEBE4;
--paper-deep:#E3E0D7;
--card:#FCFBF7;
--ink:#232019;
--ink-mid:#6E695E;
--ink-fade:#A39D90;
--seal:#C2352C;
--seal-soft:#F3DDDA;
--line:#D6D2C7;
--mono:'IBM Plex Mono',ui-monospace,monospace;
--jp:'Noto Sans JP',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
font-family:var(--jp);color:var(--ink);line-height:1.9;
-webkit-font-smoothing:antialiased;
padding:0 16px 72px;
}
/* 単色塗りにしない。上からの光を1枚だけ乗せる。
固定レイヤーで持つ（body の background-attachment:fixed は
iOS でスクロールが重くなる）。 */
body::before{
content:'';position:fixed;inset:0;z-index:-1;
background:
radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
linear-gradient(#C9C5BA, #B9B5AA);
}
/* ── 紙 ── */
.sheet{
max-width:760px;margin:0 auto;background:var(--paper);
padding:44px 26px 56px;
/* 紙の縁のハイライト＋浮き上がる影 */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 0 0 1px rgba(35,32,25,.05),
0 2px 0 rgba(35,32,25,.05),
0 44px 70px -34px rgba(35,32,25,.55);
}
@media(min-width:760px){
.sheet{padding:64px 72px 76px;border-radius:4px}
}
/* ── ヘッダ ── */
.crumb{
font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
color:var(--ink-fade);text-transform:uppercase;
}
.crumb a{color:var(--ink-mid);text-decoration:none;border-bottom:1px solid var(--line)}
.crumb a:hover{color:var(--ink)}
h1{
font-weight:900;font-size:clamp(25px,5.4vw,33px);line-height:1.35;
letter-spacing:-.015em;margin:14px 0 0;
}
.meta{
font-family:var(--mono);font-size:11.5px;color:var(--ink-fade);
letter-spacing:.06em;margin-top:12px;
}
.rule{
height:1px;border:0;margin:30px 0 8px;
background:linear-gradient(90deg, var(--line), rgba(214,210,199,0));
}
/* ── 本文 ── */
h2{
font-size:16.5px;font-weight:700;letter-spacing:.01em;
margin:38px 0 12px;padding-left:13px;position:relative;
}
h2::before{
content:'';position:absolute;left:0;top:.32em;bottom:.32em;width:3px;
background:linear-gradient(var(--seal), #8E211A);border-radius:2px;
}
h3{font-size:14.5px;font-weight:700;margin:22px 0 8px}
p{font-size:14.5px;color:#3A362D;margin:10px 0}
a{color:var(--ink)}
ul{margin:10px 0 10px 1.15em}
li{font-size:14.5px;color:#3A362D;margin:7px 0;padding-left:2px}
strong{font-weight:700}
/* 定義リスト（運営者情報の表） */
dl.spec{
margin-top:18px;background:var(--card);
border:1px solid var(--line);border-radius:14px;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px -18px rgba(35,32,25,.5);
}
dl.spec > div{
display:grid;grid-template-columns:1fr;gap:2px;
padding:15px 18px;border-top:1px solid var(--line);
}
dl.spec > div:first-child{border-top:0}
dl.spec dt{
font-family:var(--mono);font-size:11px;letter-spacing:.1em;
color:var(--ink-fade);text-transform:uppercase;
}
dl.spec dd{font-size:14.5px;font-weight:500}
@media(min-width:600px){
dl.spec > div{grid-template-columns:172px 1fr;gap:16px;align-items:baseline;padding:16px 22px}
dl.spec dt{padding-top:2px}
}
/* 連絡先ボタン。押すまでアドレスは出さない */
.mailbtn{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--jp);font-size:14px;font-weight:700;color:var(--ink);
padding:11px 20px;border-radius:12px;cursor:pointer;
background:linear-gradient(#FFFFFF, #EFEDE6);
border:1px solid #CFCBC0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(35,32,25,.06),
0 12px 22px -16px rgba(35,32,25,.6);
transition:transform .12s ease, background .2s ease;
}
.mailbtn:hover{background:linear-gradient(#FFFFFF, #E7E4DB)}
.mailbtn:active{transform:translateY(1px)}
.mailbtn .ico{color:var(--seal);font-size:15px;line-height:1}
code{
font-family:var(--mono);font-size:13px;
background:var(--card);border:1px solid var(--line);
border-radius:6px;padding:1px 6px;
}
/* 注意書き */
.callout{
margin:18px 0;padding:16px 18px;border-radius:14px;
background:linear-gradient(var(--seal-soft), #EFD6D2);
border:1px solid #E2C3BE;font-size:13.5px;line-height:1.85;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.callout b{color:#8E211A}
/* ══════ 記事ページ（scripts/build-pages.mjs が出力） ══════ */
.ad-note{
font-size:11.5px;color:var(--ink-mid);margin-top:10px;
display:inline-flex;align-items:center;gap:6px;
border:1px solid var(--line);border-radius:999px;padding:3px 12px;
background:var(--card);
}
.ad-note::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--seal)}
/* 表。スマホでは横スクロールさせる（潰して読めなくしない） */
.tbl-wrap{
margin:18px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--line);border-radius:14px;background:var(--card);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 24px -20px rgba(35,32,25,.55);
}
.tbl{width:100%;border-collapse:collapse;min-width:460px}
.tbl th,.tbl td{
padding:13px 15px;text-align:left;font-size:13.5px;
border-top:1px solid var(--line);vertical-align:top;
}
.tbl thead th{
border-top:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
color:var(--ink-fade);text-transform:uppercase;font-weight:600;
background:linear-gradient(var(--paper), var(--paper-deep));
}
.tbl tbody tr:first-child td,.tbl tbody tr:first-child th{border-top:0}
.tbl .rowh{
font-weight:500;color:var(--ink-mid);font-size:13px;white-space:nowrap;
background:linear-gradient(90deg, var(--paper), rgba(237,235,228,.4));
}
.tbl .num{font-family:var(--mono);font-size:14px;white-space:nowrap}
.tbl .strong{font-weight:600;color:#1C5847}
.adtag{
font-size:10px;letter-spacing:.06em;color:var(--seal);
border:1px solid #E2C3BE;border-radius:4px;padding:0 5px;vertical-align:1px;
}
/* 診断への導線 */
.cta-band{
margin:30px 0;padding:26px 22px;border-radius:18px;text-align:center;
background:linear-gradient(160deg, #2B2721, #17150F 70%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 24px 44px -28px rgba(0,0,0,.85);
}
.cta-lead{font-size:15px;font-weight:700;color:#F0EDE4;margin:0}
.cta-btn{
display:block;margin:16px auto 0;max-width:340px;
padding:17px 20px;border-radius:14px;text-decoration:none;
font-size:16.5px;font-weight:700;color:#fff;
background:linear-gradient(#D14038, var(--seal));
box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 14px 26px -14px rgba(194,53,44,.9);
}
.cta-btn:hover{background:linear-gradient(#C2352C, #A82A22)}
.cta-sub{font-size:11.5px;color:#A7A197;margin-top:12px}
.lead-big{
font-size:16.5px;font-weight:700;line-height:1.8;
margin:18px 0 6px;padding-left:14px;border-left:3px solid var(--line);
}
.big-num{font-family:var(--mono);font-size:17px;color:#1C5847}
/* FAQ */
.faq{margin-top:16px}
.faq dt{
font-size:14.5px;font-weight:700;margin-top:20px;padding-left:24px;position:relative;
}
.faq dt::before{
content:'Q';position:absolute;left:0;top:0;
font-family:var(--mono);font-size:12px;color:var(--seal);font-weight:600;
}
.faq dd{
font-size:14px;color:#3A362D;margin:7px 0 0;padding-left:24px;position:relative;
}
.faq dd::before{
content:'A';position:absolute;left:0;top:0;
font-family:var(--mono);font-size:12px;color:var(--ink-fade);font-weight:600;
}
/* 記事一覧 */
.cardlist{list-style:none;margin:14px 0 0;display:grid;gap:10px}
@media(min-width:640px){ .cardlist{grid-template-columns:1fr 1fr} }
.cardlist a{
display:block;padding:16px 18px;border-radius:14px;text-decoration:none;
background:linear-gradient(var(--card), #F5F3EC);
border:1px solid var(--line);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 20px -18px rgba(35,32,25,.6);
transition:transform .12s ease,border-color .18s ease;
}
.cardlist a:hover{border-color:var(--ink);transform:translateY(-1px)}
.cardlist b{display:block;font-size:14.5px;line-height:1.55}
.cardlist span{display:block;font-size:11.5px;color:var(--ink-mid);margin-top:5px}
/* 記事フッタ */
.docfoot{
max-width:760px;margin:0 auto;padding:26px 26px 0;
}
.docfoot nav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center}
.docfoot nav a{font-size:12.5px;color:#4A463C;text-decoration:none;border-bottom:1px solid rgba(35,32,25,.18)}
.docfoot nav a:hover{color:var(--ink)}
.docfoot p{font-size:11px;color:#5C574C;text-align:center;margin-top:12px;line-height:1.8}
.docfoot .brand{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em}
/* 末尾 */
.back-home{
display:block;max-width:760px;margin:26px auto 0;text-align:center;
font-size:13.5px;color:#4A463C;text-decoration:none;
padding:15px 0;border-radius:12px;
background:linear-gradient(rgba(252,251,247,.85), rgba(237,235,228,.85));
border:1px solid rgba(214,210,199,.9);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 24px -20px rgba(35,32,25,.6);
}
.back-home:hover{background:linear-gradient(#FCFBF7, #F2F0E9)}