/* 承認済み見本のヘッダー・フッターを全ページで共用。 */
:is(.topbar,.footer) { --ink:var(--foreground); --sun:var(--primary); --pop:cubic-bezier(.3,1.55,.5,1); --ease:cubic-bezier(.2,.8,.2,1); --wrap:72rem; --gutter:clamp(1rem,4vw,2.5rem); line-height:1.85; text-align:left; }
:is(.topbar,.footer), :is(.topbar,.footer) * { box-sizing:border-box; }
:is(.topbar,.footer) .wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
:is(.topbar,.footer) a { color:inherit; text-underline-offset:.2em; }
:is(.topbar,.footer) img { display:block; height:auto; max-width:100%; }
:is(.topbar,.footer) :focus-visible { outline:3px solid var(--ring); outline-offset:4px; }

  .topbar .wrap { display:flex; align-items:center; gap:1.5rem; height:4.25rem; }
  .footer .wrap { display:block; }
:is(.topbar,.footer) .btn {
    --bg: var(--ink); --fg: #fff;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3.5rem; padding: .75rem 1.75rem;
    border: 0; border-radius: 999px; cursor: pointer;
    background: var(--bg); color: var(--fg);
    font-weight: 800; font-size: 1.0625rem; letter-spacing: .02em; text-decoration: none;
    transition: transform .25s var(--pop), box-shadow .25s;
    box-shadow: 0 6px 0 -1px rgb(32 8 4 / .22);
  }
:is(.topbar,.footer) .btn:hover { transform: translateY(-3px); box-shadow: 0 9px 0 -1px rgb(32 8 4 / .22); }
:is(.topbar,.footer) .btn:active { transform: translateY(2px) scale(.98); box-shadow: 0 2px 0 -1px rgb(32 8 4 / .22); }
:is(.topbar,.footer) .btn--ink { --bg: var(--ink); --fg: #fff; }
:is(.topbar,.footer) .btn .ico { width: 1.25em; height: 1.25em; }
.topbar {
    position: fixed; inset: 0 0 auto; z-index: 50;
    padding-top: env(safe-area-inset-top);
    transition: background .3s, box-shadow .3s;
  }
.topbar.is-scrolled { background: var(--background); box-shadow: 0 1px 0 rgb(32 8 4 / .08); }
.topbar-logo { display: block; width: 8.5rem; flex: none; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
.topbar.is-scrolled .topbar-logo { opacity: 1; transform: none; }
.topbar-nav { display: flex; gap: .25rem; margin-left: auto; }
.topbar-nav a { padding: .5rem .875rem; border-radius: 999px; font-weight: 700; font-size: .9375rem; text-decoration: none; transition: background .2s; }
.topbar-nav a:hover { background: rgb(32 8 4 / .07); }
.topbar .btn { min-height: 2.75rem; padding: .5rem 1.25rem; font-size: .9375rem; box-shadow: none; }
.topbar .btn:hover { box-shadow: none; }
@media (max-width: 860px) {
.topbar-nav { display: none; } .topbar .btn { margin-left: auto; }
.topbar-logo { width: 7.25rem; }
}
.footer { padding: 2rem 0 calc(1.5rem + env(safe-area-inset-bottom)); background: var(--background); color: var(--ink); font-size: .875rem; border-top: 1px solid var(--border); }
.footer-logo { width: 10rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; justify-self: end; text-align: right; }
.footer-x { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; margin-top: -.6rem; font-weight: 700; }
.footer-x svg { width: .9rem; height: .9rem; }
.footer small { grid-column: 2; justify-self: end; text-align: right; color: var(--muted-foreground); line-height: 1.7; font-size: .75rem; }
@media (max-width: 640px) {
.footer ul, .footer small { grid-column: 1; justify-self: start; text-align: left; }
}
@media print {
.topbar { position: absolute; }
}
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.footer .footer-logo { width: 7.5rem; }
.footer-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1.5rem; font-weight: 700; font-size: .8125rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 2.25rem; }
.footer .footer-x { margin: 0; min-width: 2.25rem; justify-content: center; }
.footer .footer-x svg { width: 1rem; height: 1rem; }
.footer-note { display: flex; flex-wrap: wrap; gap: .1rem 1.25rem; margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: .6875rem; }
@media (max-width: 640px) {
.footer-nav { gap: 0 1.1rem; }
.footer-note { gap: .1rem .9rem; }
}
  .topbar { position:sticky; inset:0 0 auto; }
  @media(max-width:860px) { .topbar .wrap { gap:.75rem; } .topbar-nav { display:none; } .topbar .btn { margin-left:auto; } }

  @media(prefers-reduced-motion:reduce) { :is(.topbar,.footer) .btn:hover,:is(.topbar,.footer) .btn:active { transform:none; } }


/* LPの「メディア一覧を見る」の白地・線と、ヘッダーの寸法を共用。 */
.topbar .wrap > a:first-child { display: flex; align-items: center; min-height: 2.75rem; flex: none; }
.topbar-actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.topbar .topbar-actions .btn { min-height: 2.75rem; height: 2.75rem; margin-left: 0; white-space: nowrap; }
.topbar .btn--contact { --bg: var(--card); --fg: var(--ink); border: 2px solid var(--ink); }
.topbar .btn--contact:hover { background: var(--accent); }
.topbar .btn--contact[aria-current="page"] { background: var(--accent); }
@media (max-width: 860px) {
 .topbar .topbar-actions { margin-left: auto; gap: .5rem; }
 .topbar .topbar-actions .btn { padding-inline: .75rem; }
 .topbar .wrap { gap: .5rem; }
}
@media (max-width: 360px) {
 .topbar .wrap { padding-inline: .5rem; gap: .25rem; }
 .topbar .topbar-actions { gap: .25rem; }
 .topbar .topbar-actions .btn { padding-inline: .25rem; }
}

/* 各ページの本文の書式をヘッダー・フッターへ継承しない。 */
.topbar { position:fixed; }
body:not(:has(.hero)) .topbar { position:sticky; }
.footer-note { font-weight:400; line-height:1.85; }

.footer-nav a { text-decoration:none; }
.footer-nav a:hover { text-decoration:underline; }

/* デザインレビュー 01・10: 狭いヘッダーでも主操作を欠けさせない */
@media (max-width:600px) {
  .topbar .wrap { gap:var(--space-2); padding-inline:var(--space-3); }
  .topbar .wrap > a:first-child { min-width:0; flex:1 1 auto; }
  .topbar .topbar-logo { width:min(100%,7.25rem); }
  .topbar .topbar-actions { gap:var(--space-2); margin-left:0; }
  .topbar .topbar-actions .btn { padding-inline:var(--space-2); font-size:var(--font-size-label); gap:var(--space-1); }
}
/* 11: 登録ボタンの外部リンク印(文言は維持) */
a .external-mark { flex:none; width:.9em; height:.9em; fill:none; stroke:currentColor; stroke-width:1.8; }

/* 09: LP・メディア共通の記事画像は元の横長比率を保つ */
.posts-list a { align-items:flex-start; }
.posts-list img { flex:none; height:auto; aspect-ratio:1200 / 630; object-fit:contain; align-self:flex-start; }
.posts-list .posts-body { min-width:0; }
@media (max-width:640px) {
  .posts-list a { flex-direction:row; }
  .posts-list img { width:clamp(96px,30vw,120px); }
}

/* 再レビューR04・R05: スマホの記事一覧は画像をカードの上に横幅いっぱい(1200:630のまま切らない)、題名・分類・日付は下。題名は行の長さをそろえ、最後の1語だけの行を作らない */
@media (max-width:640px) {
  .posts-list a { flex-direction:column; align-items:stretch; }
  .posts-list img { width:100%; height:auto; aspect-ratio:1200 / 630; object-fit:cover; align-self:stretch; }
}
.posts-list .posts-body > b { word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance; }

/* 2026-10-26 ユーザー「お問い合わせボタンはセカンダリーに」: スマホでも文字リンクにせず、PCと同じ白地・枠線の補助ボタンのまま小さくする */
@media (max-width:600px) {
  .topbar .topbar-actions .btn--contact { padding-inline:var(--space-3); }
}