/* Public documentation only. Album and upload controls retain their own styles. */
.page-guide { --editorial-ink:#263c4c; }
.page-guide .container { max-width:1160px; }
.editorial-intro { padding:2.3rem 0 2rem; }
.editorial-intro h1 { font-size:clamp(2rem,4vw,3.25rem); line-height:1.35; letter-spacing:.02em; margin:.7rem 0; }
.editorial-intro p { line-height:1.9; color:var(--c-text2); }
.editorial-intro a,.editorial-note a { color:var(--c-primary); text-underline-offset:4px; }
.editorial-lead { font-size:clamp(1.2rem,2.6vw,1.7rem); font-weight:700; line-height:1.7; }
.guide-featured-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem; margin-bottom:2rem; }
.guide-featured { display:flex; flex-direction:column; min-width:0; border-radius:22px; background:#fff; overflow:hidden; border:1px solid var(--c-border); box-shadow:0 10px 35px #24384a0d; }
.guide-featured-image { display:block; overflow:hidden; }
.guide-featured-image img { display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; transition:transform .2s; }
.guide-featured:hover .guide-featured-image img { transform:scale(1.02); }
.guide-featured>div { display:flex; flex-direction:column; align-items:flex-start; padding:1.6rem; flex:1; }
.guide-featured h2 { font-size:clamp(1.35rem,2.3vw,1.8rem); line-height:1.45; margin:.8rem 0; }
.guide-featured h2 a { text-decoration:none; color:var(--editorial-ink); }
.guide-featured p { line-height:1.85; margin-bottom:1.3rem; color:var(--c-text2); flex:1; }
.btn-collect { color:#fff; border-color:#2563eb; background:linear-gradient(135deg,#3b82f6,#2563eb); box-shadow:0 8px 18px rgba(37,99,235,.18); }
.btn-collect:hover { color:#fff; border-color:#1d4ed8; background:linear-gradient(135deg,#2563eb,#1d4ed8); }
.guide-category-nav { display:flex; flex-wrap:wrap; gap:.6rem; padding:1rem 0; border-bottom:1px solid var(--c-border); }
.guide-category-nav a { border:1px solid var(--c-border); background:#fff; padding:.7rem 1rem; border-radius:999px; color:var(--editorial-ink); font-size:.9rem; text-decoration:none; font-weight:700; }
.guide-category-nav a:hover { background:var(--c-warm-soft); }
.guide-category-section { padding-top:2.6rem; scroll-margin-top:2rem; }
.guide-section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.guide-section-heading h2 { font-size:1.4rem; margin:0; }
.guide-section-heading>span { font-size:.75rem; color:var(--c-text2); letter-spacing:.12em; white-space:nowrap; }
.page-guide .guide-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; }
.page-guide .guide-card { padding:0; gap:0; background:#fff; border:1px solid var(--c-border); box-shadow:none; overflow:hidden; border-radius:16px; }
.guide-card-image { display:block; overflow:hidden; }
.guide-card-image img { display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; transition:transform .2s; }
.guide-card:hover img { transform:scale(1.025); }
.guide-card-copy { padding:1.2rem; display:flex; flex-direction:column; gap:.8rem; flex:1; }
.guide-card-copy h2 { font-size:1.12rem; line-height:1.6; }
.guide-card-copy p { font-size:.88rem; line-height:1.8; }
.guide-card-meta { justify-content:space-between; }
.guide-card-meta time { font-size:.72rem; }
.guide-chip { letter-spacing:0; }
.guide-help-banner { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:2rem; margin:3rem 0; border-radius:18px; background:#eaf3f6; }
.guide-help-banner h2 { font-size:1.3rem; }
.guide-help-banner p { margin:.7rem 0 0; line-height:1.8; }
.page-guide .guide-article { max-width:850px; padding:clamp(1.2rem,4vw,3.5rem); border-radius:20px; background:#fff; line-height:2; }
.guide-cover { margin:1.5rem 0 0; }
.guide-cover img { width:100%; height:auto; border-radius:12px; display:block; }
.guide-cover figcaption,.editorial-note { color:var(--c-text2); font-size:.78rem; line-height:1.8; margin:.7rem 0; }
.page-guide .guide-toc { background:#f3f7f9; border-color:#dce6eb; padding:1.2rem 1.5rem; }
.page-guide .guide-toc a { font-size:.95rem; line-height:1.8; }
.page-guide .guide-article section { margin:2.5rem 0; }
.page-guide .guide-article h2 { font-size:1.4rem; }
.guide-flow { padding:1.3rem; background:#f0f6f6; border:1px solid #d6e6e5; border-radius:14px; margin:1.8rem 0; }
.guide-flow figcaption { font-size:.9rem; font-weight:700; margin-bottom:1rem; color:var(--editorial-ink); }
.guide-flow ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); counter-reset:flow; gap:1rem; margin:0!important; padding:0; list-style:none; }
.guide-flow li { position:relative; display:flex; flex-direction:column; padding:1rem; margin:0!important; border-radius:10px; background:#fff; font-size:.9rem; line-height:1.6; }
.guide-flow li:before { counter-increment:flow; content:counter(flow,decimal-leading-zero); color:#986037; font-weight:800; font-size:.8rem; margin-bottom:.5rem; }
.guide-flow li:not(:last-child):after { content:"→"; position:absolute; right:-.9rem; top:50%; color:#6e9294; }
.guide-flow strong { color:var(--editorial-ink); margin-bottom:.4rem; }
.guide-flow span { font-size:.83rem; }
.guide-screen { margin:1.8rem auto; max-width:660px; background:#f2f5f7; padding:1rem; border:1px solid #dbe4e8; border-radius:14px; }
.guide-screen>a { display:block; }
.guide-screen img { display:block; width:100%; height:auto; }
.guide-screen[data-format="phone"] { max-width:390px; }
.guide-screen[data-format="desktop"] { max-width:100%; }
.guide-screen figcaption { font-size:.85rem; margin-top:.8rem; line-height:1.8; color:var(--editorial-ink); }
.guide-screen figcaption span { display:block; font-size:.75rem; color:var(--c-primary); }
.guide-callout { padding:1.3rem 1.5rem; background:#fff6e8; border-left:4px solid #d59459; border-radius:8px; margin:1.5rem 0; }
.guide-related { margin:2.5rem 0; }
.guide-related>h2 { font-size:1.4rem; margin-bottom:1.2rem; }
.editorial-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:2.3rem; padding:2.4rem; align-items:center; }
.editorial-hero h1 { font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.4; margin:.6rem 0 1rem; }
.editorial-hero p { line-height:1.9; }
.editorial-hero img { width:100%; height:100%; max-height:430px; object-fit:cover; border-radius:14px; }
.editorial-hero .guide-screen { width:100%; min-width:0; margin:0; }
.editorial-hero .guide-screen img { height:auto; max-height:none; object-fit:contain; }
.editorial-hero .btn { margin-top:1rem; }
.editorial-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.howto-page>.guide-toc ol { display:grid; grid-template-columns:1fr 1fr; gap:.3rem 2rem; }
.howto-content { max-width:950px; margin:auto; padding:clamp(1.2rem,4vw,3rem); line-height:1.95; background:#fff; }
.howto-content section { scroll-margin-top:1.5rem; margin-bottom:3.5rem; }
.howto-content h2 { line-height:1.6; font-size:1.6rem; margin:.5rem 0 1rem; }
.howto-content p { margin:.9rem 0; }
.howto-content ul,.howto-content ol { padding-left:1.4rem; }
.howto-content li { margin:.5rem 0; }
.howto-screen-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.howto-screen-grid .guide-screen { width:100%; }
.howto-definitions dt { font-weight:700; margin:1rem 0 .3rem; }
.howto-definitions dd { margin:0; }
.howto-content .about-table caption { text-align:left; font-weight:700; padding:.7rem 0; }
.page-guide a:focus-visible { outline:3px solid #286e97; outline-offset:4px; }
@media(max-width:850px) {
 .page-guide .guide-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .guide-featured-grid { grid-template-columns:1fr; }
 .guide-featured>div { padding:1.5rem; }
 .editorial-hero { grid-template-columns:1fr; padding:1.5rem; }
 .editorial-hero img { max-height:280px; }
}
@media(max-width:580px) {
 .editorial-intro { padding:1.2rem 0; }
 .editorial-intro h1 { font-size:1.9rem; }
 .guide-featured h2 br { display:none; }
 .page-guide .guide-card-grid { grid-template-columns:1fr; }
 .guide-help-banner { flex-direction:column; align-items:flex-start; padding:1.5rem; }
 .guide-flow ol { grid-template-columns:1fr; gap:1rem; }
 .guide-flow li:not(:last-child):after { content:"↓"; right:50%; top:auto; bottom:-1.2rem; }
 .howto-screen-grid { grid-template-columns:1fr; }
 .howto-page>.guide-toc ol { grid-template-columns:1fr; }
 .howto-content h2 { font-size:1.3rem; }
 .guide-screen { padding:.7rem; }
 .guide-category-nav a { font-size:.8rem; padding:.6rem .8rem; }
 .guide-section-heading h2 { font-size:1.15rem; }
}
@media(prefers-reduced-motion:reduce) { .guide-card-image img,.guide-featured-image img { transition:none; } }
/* Article comparisons and copyable examples remain readable on small screens. */
.editorial-table-scroll { overflow-x: auto; margin: 1.5rem 0; }
.editorial-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.editorial-table th, .editorial-table td { text-align: left; vertical-align: top; padding: .8rem; border: 1px solid #d9dfe3; min-width: 8rem; overflow-wrap: anywhere; }
.editorial-table thead { background: #f0f5f7; }
.editorial-template { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: #f4f7f8; border-left: 3px solid #387887; font: inherit; line-height: 1.8; }
.editorial-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.editorial-samples figure { margin: 0; }
.editorial-samples img { width: 100%; height: auto; border-radius: .5rem; }
.editorial-samples figcaption { font-size: .9rem; }
@media (max-width: 600px) {
  .editorial-samples { grid-template-columns: 1fr; }
  .editorial-table-scroll::before { content: "表は左右にスクロールできます →"; display: block; position: sticky; left: 0; margin-bottom: .6rem; font-size: .85rem; color: #52616a; }
}