/*
Theme Name: アジコト公式サイト
Theme URI: https://asikoto.com/
Author: Ajikoto
Description: アジコト(アジア言語学習アプリ)公式サイト用フルカスタムテーマ。LP+SEO記事メディア。
Version: 1.0.0
Text Domain: ajikoto
*/

:root{
  --terracotta:#E2643E;
  --terracotta-on:#FFF3EA;
  --terracotta-dark:#C24E2E;
  --gold:#F5B93E;
  --gold-dark:#5C3D00;
  --jade:#2FB88F;
  --jade-dark:#1E8C6B;
  --sky:#3FA9E8;
  --sky-dark:#1F7BAE;
  --lotus:#FF7DA0;
  --lotus-dark:#D14A72;
  --purple:#9B6FD1;
  --purple-dark:#7A50B0;

  --ink:#2B211D;
  --ink-soft:#5A4C45;
  --ink-faint:#9C8D84;
  --paper:#FFFFFF;
  --paper-warm:#FBF3EC;
  --line:#EAE0D8;

  --radius:12px;
  --radius-lg:18px;
  --radius-xl:28px;
  --shadow:0 2px 10px rgba(43,33,29,.06);
  --shadow-lg:0 26px 60px -22px rgba(43,33,29,.28);
  --maxw:1080px;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --font-head:'M PLUS Rounded 1c',sans-serif;
  --font-body:'Noto Sans JP',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.8;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.4;
  margin:0 0 .6em;
  color:var(--ink);
}
h1{font-size:2rem}
h2{font-size:1.5rem}
h3{font-size:1.2rem}
p{margin:0 0 1.2em}
a{color:var(--terracotta);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius)}
ul,ol{padding-left:1.4em}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,252,250,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .35s var(--ease);
}
.site-header.is-scrolled{box-shadow:0 10px 30px -22px rgba(43,33,29,.5)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;transition:height .35s var(--ease)}
.site-header.is-scrolled .wrap{height:56px}
.site-logo{font-family:var(--font-head);font-weight:900;font-size:1.3rem;color:var(--terracotta);letter-spacing:.02em}
.site-logo span{color:var(--ink)}
.site-nav ul{list-style:none;display:flex;gap:1.6em;margin:0;padding:0}
.site-nav a{position:relative;color:var(--ink-soft);font-weight:700;font-size:.95rem;padding:.3em 0}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.site-nav a:hover{color:var(--terracotta);text-decoration:none}
.site-nav a:hover::after{transform:scaleX(1)}
.site-header-actions{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none}
.site-nav-mobile{display:none}

@media (max-width:680px){
  .site-nav{display:none}
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex:0 0 auto;
    border:none;background:transparent;padding:0;cursor:pointer;color:var(--ink);
  }
  .nav-toggle .ic{width:24px;height:24px;position:absolute;transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .nav-toggle .i-close{opacity:0;transform:rotate(-90deg) scale(.6)}
  .site-header.nav-open .nav-toggle .i-burger{opacity:0;transform:rotate(90deg) scale(.6)}
  .site-header.nav-open .nav-toggle .i-close{opacity:1;transform:rotate(0) scale(1)}

  .site-nav-mobile{
    display:block;max-height:0;overflow:hidden;opacity:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    transition:max-height .35s var(--ease),opacity .3s var(--ease);
  }
  .site-header.nav-open .site-nav-mobile{max-height:60vh;opacity:1;overflow-y:auto}
  .site-nav-mobile ul{list-style:none;margin:0;padding:4px 20px 16px;display:flex;flex-direction:column}
  .site-nav-mobile a{display:block;padding:14px 2px;font-weight:700;color:var(--ink);font-size:1.05rem;border-bottom:1px solid var(--line)}
  .site-nav-mobile li:last-child a{border-bottom:none}
}

/* Breadcrumb (Yoast SEO) */
.site-breadcrumb{padding:14px 0;font-size:.85rem;color:var(--ink-soft)}
.site-breadcrumb a{color:var(--ink-soft);text-decoration:underline}
.site-breadcrumb a:hover{color:var(--terracotta)}
.site-breadcrumb span{margin:0 .3em}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.8em 1.6em;border-radius:999px;
  font-family:var(--font-head);font-weight:800;font-size:1rem;
  border:none;cursor:pointer;transition:transform .18s var(--spring),box-shadow .18s var(--spring);
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--terracotta);color:var(--terracotta-on);box-shadow:0 5px 0 var(--terracotta-dark)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--terracotta-dark)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--terracotta-dark)}
.btn-ghost{background:transparent;color:var(--terracotta);border:1.5px solid var(--terracotta)}
.btn-sm{padding:.5em 1.3em;font-size:.9rem;box-shadow:0 4px 0 var(--terracotta-dark)}
.btn-sm:hover{box-shadow:0 6px 0 var(--terracotta-dark)}
.btn-sm:active{box-shadow:0 1px 0 var(--terracotta-dark)}
.btn-on-dark{background:#fff;color:var(--terracotta-dark);box-shadow:0 5px 0 var(--terracotta-on)}
.btn-on-dark:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--terracotta-on)}
.btn-on-dark:active{transform:translateY(3px);box-shadow:0 2px 0 var(--terracotta-on)}

/* Sections */
.section{padding:56px 0}
.section-warm{background:var(--paper-warm)}
.section-title{text-align:center;margin-bottom:2em}
.section-title h2{font-size:1.7rem}
.section-title p{color:var(--ink-soft);max-width:34em;margin:.4em auto 0}

.wrap-narrow{max-width:760px}
.eyebrow{display:inline-block;background:var(--terracotta-on);color:var(--terracotta-dark);font-weight:800;font-size:.82rem;letter-spacing:.06em;padding:.35em 1.1em;border-radius:999px;margin-bottom:18px}
.ic{stroke:currentColor;fill:none;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

/* Reveal on scroll (front page) */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero-dot,.cta-final .blob{animation:none!important}
}

/* Badge pill (used standalone, e.g. the travel-mode section; the hero's own
   badge keeps its gold look via the more specific .hero-copy2 .badge below) */
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--terracotta-on);color:var(--terracotta-dark);font-weight:700;font-size:.9rem;padding:.5em 1.1em;border-radius:999px}
.badge .ic{width:18px;height:18px}
.ic-sm{width:16px;height:16px}

/* Bigger CTA variant (hero primary action) */
.btn-lg{padding:1em 4.2em;font-size:1.12rem}
@media (max-width:680px){
  .btn-lg{padding:.95em 2.4em;font-size:1.08rem}
}

/* Hero */
.hero{position:relative;padding-top:8px}
.hero-grid2{display:grid;grid-template-columns:minmax(0,600px) 1fr;align-items:center;gap:24px;max-width:1400px;margin:0 auto}
.hero-copy2{padding:48px 40px 48px clamp(24px,6vw,80px)}
.hero-copy2 .badge{display:inline-block;background:var(--gold);color:var(--gold-dark);border-radius:999px;padding:.35em 1.1em;font-size:.85rem;font-weight:700;margin-bottom:1.1em}
.hero-copy2 h1{font-size:clamp(2.2rem,4vw,3.3rem);letter-spacing:-.01em;margin-bottom:.3em}
.hero-copy2 .lead-strong{color:var(--terracotta-dark);font-weight:800;font-size:1.2rem;margin-bottom:0}
.hero-copy2 .cta-row{display:flex;align-items:center;gap:1.6em;flex-wrap:wrap;margin:2em 0 0}
.hero-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.95rem;color:var(--ink-soft);transition:color .2s var(--ease)}
.hero-link:hover{color:var(--terracotta);text-decoration:none}
.hero-link .ic{width:16px;height:16px;transition:transform .3s var(--spring)}
.hero-link:hover .ic{transform:translateX(4px)}
.hero-stats{display:inline-flex;align-items:center;margin-top:2em;background:linear-gradient(160deg,#fff 0%,var(--paper-warm) 130%);border:1px solid rgba(234,224,216,.9);border-radius:22px;padding:6px;box-shadow:0 20px 40px -22px rgba(43,33,29,.35)}
.stat-item{display:flex;align-items:center;gap:14px;padding:12px 22px}
.stat-divider{width:1px;align-self:stretch;margin:10px 0;background:linear-gradient(180deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.stat-icon-glow{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(43,33,29,.05),0 6px 16px -6px rgba(43,33,29,.28)}
.stat-icon-glow::before{content:"";position:absolute;inset:-5px;border-radius:50%;background:var(--glow);opacity:.16;z-index:-1}
.stat-icon-glow .ic{width:20px;height:20px}
.stat-item b{display:block;font-family:var(--font-head);font-weight:900;font-size:1.05rem;color:var(--ink)}
.stat-item span{display:block;font-size:.8rem;color:var(--ink-soft);font-weight:600;margin-top:2px}
@media (max-width:520px){
  .hero-stats{flex-direction:column;width:100%}
  .stat-item{width:100%}
  .stat-divider{width:auto;align-self:stretch;height:1px;margin:0 14px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
}

.hero-dot{position:absolute;border-radius:50%;animation:heroDotBob 4s ease-in-out infinite}
@keyframes heroDotBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(8deg)}}

.hero-visual2{position:relative;display:flex;justify-content:center;align-items:center}
.hero-fv2{height:min(620px,72vh);width:auto;max-width:100%;display:flex;
  border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--paper-warm)}
.hero-fv2 img{height:100%;width:auto;max-width:100%;object-fit:cover;display:block;margin:0 auto;border-radius:0}

.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:2px;color:var(--ink-faint);font-size:.7rem;font-weight:700;animation:scrollCueBob 2.2s ease-in-out infinite}
.scroll-cue .ic{width:16px;height:16px}
@keyframes scrollCueBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

@media (max-width:980px){
  .hero-grid2{grid-template-columns:1fr}
  .hero-copy2{padding:36px 24px 8px;text-align:center}
  .hero-copy2 .cta-row,.chip-row2{justify-content:center}
  .hero-visual2{order:-1;margin-bottom:8px}
  .hero-fv2{height:min(440px,56vh)}
  .scroll-cue{display:none}
}

/* Problem: statement + list */
.statement{font-size:clamp(2rem,4.6vw,3.2rem);max-width:16em}
.problem-list{display:flex;flex-wrap:wrap;gap:16px 44px;margin-top:44px}
.problem-list li{display:flex;align-items:center;gap:14px;font-weight:700;font-size:1.05rem;
  flex:0 0 auto;padding-bottom:18px;border-bottom:1px solid var(--line)}
.problem-list li span{white-space:nowrap}
.problem-list li .ic{width:24px;height:24px;color:var(--terracotta)}
@media (min-width:960px){
  .problem-list li:nth-child(2){margin-top:30px}
  .problem-list li:nth-child(3){margin-top:-14px}
}

/* Feature rows: real screenshot + copy, alternating sides */
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:96px}
.feat-row:last-child{margin-bottom:0}
.feat-row.rev .feat-shot{order:2}
.feat-row.rev .feat-text{order:1}
.feat-text h3{font-size:1.5rem}
.feat-text p{color:var(--ink-soft);font-size:1.02rem;max-width:34em;margin:0}
.shot-frame{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);max-width:300px;margin:0 auto}
.shot-frame img{width:100%;display:block;border-radius:0}
/* Auto-cycling phone frame: stacked screenshots crossfade on a timer (front-page.js) */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.shot-float{animation:floatY 5.5s ease-in-out infinite}
.cycle-frame{position:relative;max-width:300px;margin:0 auto;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg)}
.cycle-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .35s var(--ease),transform .18s var(--ease);border-radius:0}
.cycle-frame img.is-active{opacity:1}
.cycle-frame.is-pressed img.is-active{transform:scale(.97)}
.cycle-dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.cycle-dots .dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background-color .3s var(--ease),transform .3s var(--ease)}
.cycle-dots .dot.is-active{background:var(--terracotta);transform:scale(1.3)}

/* Simulated finger tap: a ripple appears at the real button/answer location
   just before the screen switches, so the cycle reads as someone operating
   the app rather than a slideshow (positioned per-slide via data-tap="x,y"
   percent, front-page.js) */
.tap-cursor{position:absolute;width:15px;height:15px;margin:-7.5px;border-radius:50%;background:var(--terracotta);opacity:0;pointer-events:none;z-index:5}
.tap-cursor.is-active{animation:tapRipple .5s var(--ease)}
@keyframes tapRipple{
  0%{opacity:0;transform:scale(.4)}
  30%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(2.4)}
}
@media (prefers-reduced-motion:reduce){
  .shot-float{animation:none}
  .tap-cursor{display:none}
}

/* Tap-here pulse (travel-mode map, step 1) */
@keyframes tapPulse{0%{box-shadow:0 0 0 0 rgba(226,100,62,.55)}100%{box-shadow:0 0 0 26px rgba(226,100,62,0)}}
.tap-pulse{position:absolute;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--terracotta);animation:tapPulse 2s ease-out infinite}
@media (prefers-reduced-motion:reduce){
  .tap-pulse{animation:none}
}
.point-list{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.point-item{display:flex;align-items:flex-start;gap:12px}
.point-mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--terracotta-on);color:var(--terracotta-dark);display:flex;align-items:center;justify-content:center;margin-top:1px;font-family:var(--font-head);font-weight:900;font-size:.7rem}
.point-mark .ic{width:12px;height:12px}
.point-item span{font-weight:700;color:var(--ink);font-size:.96rem;line-height:1.6;padding-top:1px}
@media (max-width:760px){
  .feat-row{grid-template-columns:1fr !important;gap:28px;margin-bottom:64px}
  .feat-row .feat-shot{order:1 !important}
  .feat-row .feat-text{order:2 !important;text-align:center}
  .feat-row .point-item{text-align:left}
  .filmstrip .shot-frame{max-width:96px}
}

/* Language marquee: continuous auto-scrolling row (pauses on hover) */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq-outer{width:100%;margin-top:40px;overflow:hidden}
.marq-track{display:flex;gap:20px;width:max-content;animation:marquee 28s linear infinite}
.marq-track:hover{animation-play-state:paused}
.lang-card{position:relative;width:190px;flex:0 0 auto;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);transition:transform .3s var(--spring)}
.lang-card:hover{transform:translateY(-8px) rotate(-1deg)}
.lang-card img{width:100%;height:190px;object-fit:cover;border-radius:0}
.lang-bubble{position:absolute;top:14px;left:14px;background:#fff;border-radius:14px;padding:7px 11px;box-shadow:0 6px 16px rgba(43,33,29,.18)}
.lang-bubble b{display:block;font-family:var(--font-head);font-size:1rem;line-height:1.1}
.lang-bubble small{color:var(--ink-soft);font-size:.7rem}
.lang-card .lang-name{position:absolute;bottom:12px;left:14px;color:#fff;font-family:var(--font-head);font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){
  .marq-track{animation:none}
}

/* Travel-mode showcase */
@keyframes pulseGlow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}
.stat-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.travel-section{position:relative;overflow:hidden}
.travel-maps{display:flex;align-items:flex-start;justify-content:center;gap:20px;margin:48px 0 0;flex-wrap:wrap}
.travel-maps .shot-frame{max-width:210px}
.travel-arrow{flex:0 0 auto;width:24px;height:24px;color:var(--terracotta);margin-top:84px}
.map-caption{text-align:center;font-weight:800;font-family:var(--font-head);color:var(--ink-soft);font-size:.85rem;margin-top:14px}
@media (max-width:760px){
  .travel-maps{flex-direction:column;align-items:center}
  .travel-maps .shot-frame{max-width:min(300px,78vw)}
  .travel-arrow{transform:rotate(90deg);margin-top:0}
}

/* Usecase asymmetric grid */
.usecase-grid2{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr;gap:22px;margin-top:44px;min-height:560px}
.usecase-card2{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.usecase-card2.tall{grid-row:1 / 3}
.usecase-card2 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);border-radius:0}
.usecase-card2:hover img{transform:scale(1.07)}
.usecase-card2 .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,33,29,0) 42%,rgba(28,19,14,.82) 100%)}
.usecase-card2 .copy{position:absolute;left:0;right:0;bottom:0;padding:30px;color:#fff}
.usecase-card2 .copy h3{color:#fff;margin-bottom:.25em}
.usecase-card2 .copy p{color:rgba(255,255,255,.9);font-size:.92rem;margin:0}
@media (max-width:820px){
  .usecase-grid2{grid-template-columns:1fr;grid-template-rows:none;min-height:0}
  .usecase-card2.tall{grid-row:auto}
  .usecase-card2{height:300px}
}

/* FAQ */
.faq2-layout{display:grid;grid-template-columns:250px 1fr;gap:52px;align-items:start;margin-top:12px}
.faq2-side{position:sticky;top:120px}
.faq2-side .ghost{font-family:var(--font-head);font-weight:800;font-size:4.4rem;color:var(--line);line-height:1;margin:0}
.faq-item2{border-bottom:1px solid var(--line)}
.faq-q-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:16px;width:100%;padding:24px 2px;font-weight:700;font-size:1.05rem;font-family:var(--font-body);color:var(--ink)}
.faq-q-btn .ic{width:20px;height:20px;color:var(--terracotta);transition:transform .4s var(--ease)}
.faq-item2.is-open .faq-q-btn .ic{transform:rotate(180deg)}
.faq-answer-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-answer-wrap.is-open{grid-template-rows:1fr}
.faq-answer-inner{overflow:hidden}
.faq-answer-inner p{padding:0 2px 24px;color:var(--ink-soft);margin:0}
@media (max-width:820px){
  .faq2-layout{grid-template-columns:1fr}
  .faq2-side{position:static}
}

/* Recent posts (front page mini-list; blog listing itself still uses .post-list/.post-card) */
.post-list2{margin-top:12px}
.post-row{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:22px;padding:28px 2px;
  border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease)}
.post-row:hover{padding-left:14px;text-decoration:none}
.post-idx{font-family:var(--font-head);font-weight:800;font-size:1.6rem;color:var(--line);transition:color .35s var(--ease)}
.post-row:hover .post-idx{color:var(--terracotta)}
.post-main .cat{font-size:.78rem;font-weight:700;color:var(--terracotta)}
.post-main h3{font-size:1.12rem;margin:.25em 0 0;color:var(--ink)}
.post-arrow{color:var(--ink-faint);transition:transform .35s var(--ease),color .35s var(--ease)}
.post-arrow .ic{width:20px;height:20px}
.post-row:hover .post-arrow{transform:translateX(6px);color:var(--terracotta)}

/* Final CTA */
.cta-final{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--terracotta),var(--terracotta-dark));
  padding:104px 24px;text-align:center;color:var(--terracotta-on)}
.cta-final .blob{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%);
  filter:blur(30px);opacity:.35}
.cta-final .blob-a{width:420px;height:420px;top:-160px;left:-100px;animation:ctaDrift1 16s ease-in-out infinite alternate}
.cta-final .blob-b{width:340px;height:340px;bottom:-140px;right:-80px;animation:ctaDrift2 20s ease-in-out infinite alternate}
@keyframes ctaDrift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,30px) scale(1.12)}}
@keyframes ctaDrift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30px,-20px) scale(1.08)}}
.cta-final h2{color:var(--terracotta-on);font-size:clamp(2.1rem,4.8vw,3.4rem);position:relative}
@media (max-width:480px){
  .cta-final h2{font-size:min(2.1rem,(100vw - 48px)/12.5)}
}
.cta-final p{color:var(--terracotta-on);opacity:.92;margin-bottom:1.8em;position:relative}
.cta-final .btn{position:relative}

/* Pillar / category cards */
.pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2em}
.pillar-card{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.4em;border-top:4px solid var(--terracotta);box-shadow:var(--shadow);
  color:var(--ink);transition:transform .15s ease;
}
.pillar-card:hover{transform:translateY(-2px);text-decoration:none}
.pillar-card .tag{font-size:.78rem;font-weight:700;color:var(--terracotta);margin-bottom:.4em;display:block}
.pillar-card h3{margin-bottom:.3em;font-size:1.05rem}
.pillar-card p{color:var(--ink-soft);font-size:.9rem;margin:0}

/* Post list */
.post-list{display:grid;gap:1.1em}
.post-card{
  display:grid;grid-template-columns:1fr;gap:.3em;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3em 1.5em;box-shadow:var(--shadow);
}
.post-card .cat{font-size:.78rem;font-weight:700;color:var(--terracotta)}
.post-card h2,.post-card h3{font-size:1.1rem;margin:.2em 0}
.post-card h2 a,.post-card h3 a{color:var(--ink)}
.post-card .excerpt{color:var(--ink-soft);font-size:.92rem;margin:0}
.post-card .meta{font-size:.8rem;color:#9C8D84}

/* Single article */
.article-head{padding:40px 0 24px;text-align:center;border-bottom:1px solid var(--line);margin-bottom:32px}
.article-head .cat{color:var(--terracotta);font-weight:700;font-size:.85rem}
.article-head h1{font-size:1.8rem;margin:.4em auto}
.article-head .meta{color:#9C8D84;font-size:.85rem}
.article-body{max-width:720px;margin:0 auto;font-size:1.02rem}
.article-body h2{margin-top:1.6em;font-size:1.3rem;border-left:5px solid var(--terracotta);padding-left:.5em}
.article-body h3{margin-top:1.2em;font-size:1.1rem}
.article-body blockquote{border-left:4px solid var(--gold);margin:0 0 1.2em;padding:.2em 1em;background:var(--paper-warm);border-radius:0 var(--radius) var(--radius) 0;color:var(--ink-soft)}
.article-body table{width:100%;border-collapse:collapse;margin:1.2em 0}
.article-body th,.article-body td{border:1px solid var(--line);padding:.6em .8em;text-align:left;font-size:.94rem}
.article-body th{background:var(--paper-warm)}

/* 強調(<b>)にアンダーラインが伸びるアニメーションを付与 */
.article-body b{
  font-weight:700;
  background-image:linear-gradient(var(--terracotta),var(--terracotta));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 3px;
  padding-bottom:2px;
  transition:background-size .8s cubic-bezier(.22,.68,.36,1);
}
.article-body b.is-visible{background-size:100% 3px}
@media (prefers-reduced-motion: reduce){
  .article-body b{transition:none;background-size:100% 3px}
}

/* 「この記事で分かること」の一行要約 */
.article-tldr{
  max-width:720px;margin:0 auto 1.4em;padding:.9em 1.1em;
  background:var(--paper-warm);border-radius:var(--radius);
  font-size:.95rem;color:var(--ink-soft);line-height:1.6;
}
.article-tldr strong{color:var(--ink)}

/* 目次 */
.article-toc{
  max-width:720px;margin:1.6em auto;padding:1.2em 1.4em;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
}
.article-toc .toc-label{margin:0 0 .6em;font-weight:700;color:var(--ink);font-size:.95rem}
.article-toc ol{margin:0;padding-left:1.3em}
.article-toc li{margin:.35em 0;font-size:.92rem}
.article-toc a{color:var(--ink-soft)}
.article-toc a:hover{color:var(--terracotta);text-decoration:underline}

/* Article credit / editorial disclosure */
.article-credit{max-width:720px;margin:2em auto 0;padding-top:1.4em;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.85rem;line-height:1.7}
.article-credit p{margin:0 0 .4em}
.article-credit p:last-child{margin-bottom:0}

/* CTA box */
.cta-box{
  max-width:720px;margin:2.4em auto 0;padding:1.8em;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--terracotta),var(--terracotta-dark));
  color:var(--terracotta-on);text-align:center;
}
.cta-box h3{color:var(--terracotta-on);margin-bottom:.3em}
.cta-box p{color:var(--terracotta-on);opacity:.92;margin-bottom:1.1em;font-size:.94rem}
.cta-box .btn-primary{background:#fff;color:var(--terracotta-dark)}
.cta-box .btn-primary:hover{background:var(--terracotta-on)}

/* Related */
.related{max-width:720px;margin:3em auto 0}
.related h3{font-size:1.1rem;margin-bottom:.8em}

/* Blog two-column layout (article + sidebar) */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.6em;align-items:start;padding-top:8px}
.blog-main .article-body,.blog-main .cta-box,.blog-main .related{max-width:none;margin-left:0;margin-right:0}
.blog-main .cta-box{margin-top:2.4em}
.tag-cloud-center{justify-content:center}
.tag-cloud{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1em}
.tag-pill{
  display:inline-block;background:var(--paper-warm);color:var(--ink-soft);
  border-radius:999px;padding:.3em .9em;font-size:.78rem;font-weight:700;
}
.tag-pill:hover{background:var(--terracotta-on);color:var(--terracotta-dark);text-decoration:none}

/* Sidebar */
.blog-sidebar{display:flex;flex-direction:column;gap:1.4em}
.side-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.3em 1.4em;box-shadow:var(--shadow)}
.side-title{font-size:.98rem;margin-bottom:1em}
.search-form{display:flex;gap:.5em}
.search-form .search-field{
  flex:1;padding:.6em .9em;border:1px solid var(--line);border-radius:999px;font-family:var(--font-body);font-size:.9rem;
}
.search-form .search-submit{
  border:none;background:var(--terracotta);color:var(--terracotta-on);border-radius:999px;
  padding:.5em 1.1em;font-weight:700;cursor:pointer;font-family:var(--font-head);
}
.popular-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9em}
.popular-list li a{display:flex;align-items:flex-start;gap:.7em;color:var(--ink)}
.popular-list li a:hover{text-decoration:none}
.popular-list li a:hover .rank-title{text-decoration:underline}
.popular-list .rank{
  flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.popular-list .rank-title{font-size:.86rem;line-height:1.5}
.popular-list .muted{color:var(--ink-faint);font-size:.85rem}
.side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em}
.side-list a{display:flex;justify-content:space-between;color:var(--ink-soft);font-size:.9rem}
.side-list a span{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.side-promo{background:linear-gradient(135deg,var(--terracotta),var(--terracotta-dark));text-align:center}
.side-promo-logo{font-family:var(--font-head);font-weight:900;color:var(--terracotta-on);font-size:1.1rem;margin:0 0 .4em}
.side-promo-copy{color:var(--terracotta-on);opacity:.92;font-size:.82rem;margin:0 0 1em}
.side-promo .btn-primary{background:#fff;color:var(--terracotta-dark);width:100%;justify-content:center}

@media (max-width:900px){
  .blog-layout{grid-template-columns:1fr}
}

/* Page content */
.page-content{max-width:720px;margin:0 auto;padding:48px 0}

/* Contact form */
.contact-form{margin-top:1.6em}
.contact-form .fld{margin-bottom:1.2em}
.contact-form label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.4em}
.contact-form .req{background:var(--terracotta);color:var(--terracotta-on);font-size:.72rem;font-weight:700;border-radius:999px;padding:.1em .6em;margin-left:.4em;vertical-align:middle}
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea{
  width:100%;padding:.8em 1em;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--font-body);font-size:1rem;background:#fff;color:var(--ink);
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--terracotta);outline-offset:1px}
.contact-form button{border:none}
.form-notice{border-radius:var(--radius);padding:.9em 1.2em;font-size:.92rem;margin:1.2em 0}
.form-notice-ok{background:#DFF2EB;color:#276E52}
.form-notice-error{background:#FBE7ED;color:#A14A66}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:40px 0;margin-top:48px;background:var(--paper-warm)}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.4em}
.site-footer .foot-logo{font-family:var(--font-head);font-weight:900;color:var(--terracotta)}
.site-footer .foot-tagline{color:var(--ink-soft);font-size:.88rem;margin-top:.3em;max-width:24em}
.site-footer nav ul{list-style:none;display:flex;gap:1.2em;padding:0;margin:0;flex-wrap:wrap}
.site-footer nav a{color:var(--ink-soft);font-size:.88rem}
.site-footer .copy{width:100%;text-align:center;color:#B3A399;font-size:.8rem;margin-top:1.6em}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:.6em;margin:2.4em 0}
.pagination a,.pagination span{padding:.5em 1em;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);font-size:.9rem}
.pagination .current{background:var(--terracotta);color:var(--terracotta-on);border-color:var(--terracotta)}

@media (max-width:680px){
  .site-nav{display:none}
}