/* 読みもの風の見た目の上書き。各ページの追加CSS（services.css・pages.css・home.css）より後に読む */
/* ════ 読みもの風の見た目（2026-10-24 梅村「3の感じで」。MV は home.css） ════
   明朝の見出し・紙色の地・細い罫・角の小さい形。色の面より線で区切る。 */
.h1,.h2,.hero__title,.result__fig,.tile__fig,.figtile strong,.no1,.plan__price{font-weight:800}
.h1,.h2{color:var(--c-ink)}
.h2{letter-spacing:.02em}
.h2::before{width:40px;height:1px;background:var(--c-ink);margin-bottom:1.1rem}
.section--ai .h2::before{background:#fff}
.h3{font-family:var(--ff-head);font-weight:800;color:var(--c-ink);letter-spacing:.01em}
.section--ai .h3{color:#fff}
.lead{font-family:var(--ff-head);font-weight:600}
.section{border-top:1px solid var(--c-rule)}
.section--ai{border-top:0}
.section--mist{background:var(--c-mist)}

/* ボタン: 藍の四角に線の矢印 */
.btn{gap:.9rem;border:0;border-radius:2px;background:var(--c-ai);color:#fff;transition:background-color .2s,transform .1s}
.btn::after{content:"";width:22px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.btn:hover{background:#000044}
.btn:hover::after{width:34px}
.btn--header{min-height:44px}
.sp-bar__btn{background:var(--c-ai);border:0;border-radius:2px;color:#fff}
.menu-btn{border-width:1px;border-radius:2px;letter-spacing:.12em}
.text-link{text-decoration-thickness:1px;text-underline-offset:.3em}
.text-link:hover{text-decoration-thickness:2px}

/* 札: 塗りをやめて細い枠 */
.tag{background:transparent;color:var(--c-ai);border:1px solid var(--c-ai);border-radius:0;letter-spacing:.06em;padding:.1em .6em}
.section--ai .tag{color:#fff;border-color:#fff}

/* カード類: 角を小さく、枠は細い罫、地は紙色 */
.way,.result,.step,.tile,.figtile,.extlink,.outlink,.flow__box,.namecard{border-radius:2px}
.way,.result,.step,.tile,.figtile,.extlink,.outlink{background:transparent;border:1px solid var(--c-hair)}
.way{transition:border-color .2s,background-color .2s}
.way:hover{border-color:var(--c-ink);background:#fff}
.way--soft{background:var(--c-mist);border-left:3px solid var(--c-ai)}
.result__art{background:var(--c-wall)}
.section--wall .result,.section--wall .way,.section--wall .tile{background:var(--c-paper)}
.answer,.no1box,.rank{border-radius:0;border-left-width:3px;background:var(--c-mist)}
.answer{font-family:var(--ff-head);font-weight:600}
.boxes li::before{border-width:1px;border-radius:0;border-color:var(--c-ink)}
.figs li::before,.kinds li::before,.bul li::before,.needs dt::before{background:var(--c-ai);width:5px;height:5px}

/* 番号: 円をやめて明朝の数字 */
.step{padding:1.5rem 1.5rem 1.5rem 4.25rem}
.step__no{background:none;color:var(--c-ai);font:800 2rem/1 var(--ff-head);width:auto;height:auto;left:1.4rem;top:1.35rem}
@media (min-width:1024px){.step{padding:4.25rem 1.5rem 1.5rem}.step__no{top:1.4rem}}
.step:not(:last-child)::after{border-color:var(--c-ink);border-width:0 1px 1px 0}
.flow__no{background:#fff;color:var(--c-ai);font-family:var(--ff-head);font-weight:800;border:1px solid var(--c-ai)}
.seq li::before{background:none;color:var(--c-ai);font:800 1.75rem/40px var(--ff-head);border:1px solid var(--c-ai);border-radius:0}
.seq li::after{border-left:1px solid var(--c-hair)}

/* よくある質問 */
.qa__q{background:none;color:var(--c-ai);font:800 1.375rem/1 var(--ff-head);width:auto;height:auto}
.qa summary{font-family:var(--ff-head);font-weight:800;color:var(--c-ink)}
.qa summary::after{content:"";width:12px;height:12px;border-right:1px solid var(--c-ink);border-bottom:1px solid var(--c-ink);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.qa[open] summary::after{content:"";transform:rotate(-135deg) translate(-2px,-2px)}
.qa__a{padding-left:2.25rem}

/* 下層ページの頭: 四隅のトンボ */
.page-head .container{position:relative}
.page-head .h1::before{width:40px;height:1px;background:var(--c-ink)}

/* 実績の数字 */
.result__fig,.tile__fig,.figtile strong{font-family:var(--ff-head);color:var(--c-ai)}

/* フォーム */
.formbox{background:var(--c-wall);border-radius:2px}
.input{border-color:var(--c-hair);border-radius:2px}
.chip span{border-radius:2px;border-color:var(--c-hair)}

/* 最後のボタンの区画 */
.closing .h2{font-size:clamp(1.5rem,1rem + 2.4vw,2.6rem)}

/* スクロールで現れる（見出しの罫がのびて、中身が少し上がる） */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .h2.rv::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .15s}
.js .h2.rv.in::before{transform:scaleX(1)}
.closing .h2::before{transform-origin:center}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}.js .h2.rv::before{transform:none}}
/* 小見出しも明朝で */
.way__name,.way__name a,.result__name,.step__title,.flow__title,.story__sign,.seq__t,.no1box__t,.toc a{font-family:var(--ff-head);font-weight:800;color:var(--c-ink)}
.flow__title{color:var(--c-ai)}
.result__fig{white-space:nowrap;font-size:min(var(--fs-fig),2.1rem)}
/* 下層ページの部品も同じ形に */
.portrait::before{background:var(--c-wall);border-radius:2px}
.portrait img,.who__photo{border-radius:2px}
.toc a.is-current{border-left-color:var(--c-ai)}
.story-item__no,.toc__no{font-family:var(--ff-head);color:var(--c-ai)}
.story-item blockquote{border-left-width:3px;font-family:var(--ff-head);font-weight:600}
.req{border-radius:0}.opt{border-radius:0}
.form__status,.form__errors{border-radius:2px}
.brand{min-height:44px}