/* ==================================================
   Font for iPad — Editorial / Magazine LP stylesheet
   Deep teal accent (#006580, AA pass on cream),
   multiple serif families, asymmetric layout,
   light/dark adaptive.
   ================================================== */

/* ---------- design tokens ---------- */
:root{
  --bg:#f5f1e8;
  --bg-soft:#ffffff;
  --bg-plate:#ebe5d6;
  --text:#0e0e0e;
  --muted:#5a5147;
  --dim:#8a7f72;
  --rule:#0e0e0e;
  /* Deep teal accent. light は cream 背景 (#f5f1e8) で AA 4.5:1 を確保。
     #007a96 は white 4.97 だが cream で 4.41 で AA 未達のため、 さらに
     1 段深い #006580 に再調整 (cream 4.55 / white 4.86)。 ダーク mode
     は元から AA pass のため変更なし。 */
  --accent:#006580;
  --accent-deep:#003c4d;
  --accent-soft:rgba(0,101,128,.14);
  --line:rgba(14,14,14,.12);
  --line-strong:rgba(14,14,14,.22);

  /* typography stacks */
  --serif-display:"Fraunces","Bodoni 72",Didot,Georgia,serif;
  --serif-didone:"DM Serif Display","Bodoni 72",Didot,Georgia,serif;
  --serif-garamond:"Cormorant Garamond",Garamond,"Hiragino Mincho ProN",serif;
  --serif-roman:"Marcellus","Trajan Pro","Times New Roman",serif;
  --serif-jp:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Inter","Noto Sans JP","Hiragino Sans","Yu Gothic UI",system-ui,sans-serif;
  --sans-jp:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans",sans-serif;
  --hand:"Klee One","Klee","Hiragino Mincho ProN",serif;
  --mono:"M PLUS 1 Code","SF Mono","JetBrains Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14110a;
    --bg-soft:#1c1810;
    --bg-plate:#221d12;
    --text:#f0e6d2;
    --muted:#aea291;
    --dim:#7e7464;
    --rule:#f0e6d2;
    --accent:#5dd5e8;
    --accent-deep:#9be8f4;
    --accent-soft:rgba(93,213,232,.16);
    --line:rgba(240,230,210,.14);
    --line-strong:rgba(240,230,210,.26);
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Web font (Inter / Noto Sans JP / Shippori Mincho 等) と fallback の
     x-height を寄せて font-swap 時の CLS を抑える。 0.5 は Inter / Noto
     Sans JP / Shippori Mincho いずれも近似 x-height/em。 /font/terms/ の
     real CLS=0.166 起因の改善目的。 */
  font-size-adjust:0.5;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a.ilink{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1.5px;       /* F8: link-in-text-block — 太線で色のみ依存を解消 */
  text-underline-offset:3px;
  text-decoration-color:var(--accent);   /* F8: 半透明 (color-mix 45%) を撤去、 不透明 accent で確実な判別 */
}
a.ilink:hover{text-decoration-color:currentColor}
::selection{background:var(--accent-soft);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- layout shell ---------- */
.shell{max-width:1180px;margin:0 auto;padding:0 32px}
@media (max-width:680px){.shell{padding:0 20px}}

/* ---------- masthead ---------- */
.masthead{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:24px 0 12px;border-bottom:1px solid var(--rule);
  font-family:var(--serif-roman);
  letter-spacing:.18em;text-transform:uppercase;
  font-size:12px;color:var(--text);
}
.masthead .brand{font-weight:400}
.masthead .brand b{font-weight:400}
.masthead .issue{color:var(--accent);margin-left:auto}
.masthead .lang{
  display:inline-flex;gap:10px;color:var(--muted);font-size:11.5px;letter-spacing:.18em;
}
.masthead .lang a:hover{color:var(--accent)}
.masthead .lang .current{color:var(--text)}
@media (max-width:560px){
  .masthead .issue{margin-left:0}
  .masthead{font-size:11px;letter-spacing:.14em}
}

/* ---------- hero ---------- */
.hero{
  padding:96px 0 80px;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.hero h1{
  margin:0;
  font-family:var(--serif-display);
  font-weight:300;
  font-size:clamp(68px, 14vw, 200px);
  line-height:.93;letter-spacing:-.025em;
  color:var(--text);
  font-variation-settings:"opsz" 144, "SOFT" 0;
}
.hero h1 em{
  font-style:italic;font-weight:400;color:var(--text);
  font-variation-settings:"opsz" 144;
}
.hero .lede{
  margin:36px 0 0;max-width:580px;
  font-family:var(--serif-garamond);
  font-style:italic;
  font-size:clamp(22px, 2.4vw, 28px);
  line-height:1.45;color:var(--accent);
  font-weight:400;
}
.hero .meta{
  margin-top:36px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  font-family:var(--sans);font-size:13px;color:var(--muted);
}
.hero .meta .pipe{color:var(--dim)}
.hero .badges{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .badges a{display:inline-block;transition:transform .15s,filter .15s}
.hero .badges a:hover{transform:translateY(-1px);filter:drop-shadow(0 6px 16px rgba(0,0,0,.12))}
.hero .badges img{height:56px;width:auto}
@media (prefers-color-scheme:dark){
  .hero .badges .apple img{filter:invert(1) hue-rotate(180deg) brightness(1.05)}
}

/* hero icon (small mark above headline) */
.hero .mark{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--serif-roman);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:38px;
}
.hero .mark img{
  width:42px;height:42px;border-radius:9px;
  box-shadow:0 4px 16px -4px rgba(0,157,191,.55);
}

/* ---------- cover plate (01-cover screenshot full-bleed) ---------- */
.cover-plate{
  background:var(--bg-plate);
  border-bottom:1px solid var(--rule);
  padding:60px 0;
}
.cover-plate .frame{
  max-width:760px;margin:0 auto;
  border:1px solid var(--line-strong);
  background:#fff;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.30);
}
@media (prefers-color-scheme:dark){
  .cover-plate .frame{background:#0e0a04;box-shadow:0 30px 80px -30px rgba(0,0,0,.65)}
}
.cover-plate img{width:100%;height:auto;display:block}
.cover-plate .caption{
  text-align:center;margin-top:22px;
  font-family:var(--serif-roman);font-size:11.5px;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase;
}

/* ---------- stats strip ---------- */
.stats{
  padding:80px 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
}
@media (max-width:720px){.stats{grid-template-columns:1fr;gap:48px}}
.stat .num{
  font-family:var(--serif-didone);
  font-size:clamp(60px, 8vw, 104px);
  line-height:1;color:var(--text);
  letter-spacing:-.02em;font-weight:400;font-style:italic;
}
.stat .num .unit{
  font-family:var(--serif-roman);
  font-size:.32em;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  margin-left:14px;font-style:normal;
  vertical-align:middle;
}
.stat .label{
  margin-top:14px;font-family:var(--sans);
  font-size:14px;color:var(--muted);line-height:1.6;
  max-width:260px;
}

/* ---------- section heading (kicker + serif title) ---------- */
.section{padding:96px 0;border-bottom:1px solid var(--rule)}
@media (max-width:680px){.section{padding:64px 0}}
.kicker{
  font-family:var(--serif-roman);font-size:11.5px;
  letter-spacing:.20em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.kicker .num{color:var(--dim);margin-right:14px;font-family:var(--mono);letter-spacing:.05em}
.section h2{
  margin:0;font-family:var(--serif-display);
  font-weight:400;font-size:clamp(40px, 6vw, 72px);
  line-height:1;letter-spacing:-.018em;color:var(--text);
  font-variation-settings:"opsz" 144;
}
.section h2 em{font-style:italic;color:var(--accent)}
.section .deck{
  margin:24px 0 0;max-width:640px;
  font-family:var(--serif-garamond);font-size:21px;
  line-height:1.55;color:var(--muted);
}

/* feature module: image + body, alternate sides */
.feature{
  display:grid;grid-template-columns:1.1fr .9fr;gap:64px;
  align-items:center;margin-top:56px;
}
.feature.flip{grid-template-columns:.9fr 1.1fr}
.feature.flip .feature-body{order:1}
.feature.flip .feature-img{order:2}
@media (max-width:880px){
  .feature, .feature.flip{grid-template-columns:1fr;gap:36px}
  .feature.flip .feature-body{order:0}
  .feature.flip .feature-img{order:0}
}
.feature-img{
  border:1px solid var(--line-strong);background:#fff;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.25);
}
@media (prefers-color-scheme:dark){
  .feature-img{background:#0e0a04;box-shadow:0 24px 60px -28px rgba(0,0,0,.6)}
}
.feature-img img{width:100%;height:auto;display:block}
.feature-body h3{
  margin:0 0 18px;font-family:var(--serif-didone);
  font-weight:400;font-size:clamp(30px, 4vw, 44px);
  line-height:1.05;color:var(--text);letter-spacing:-.005em;
}
.feature-body p{
  margin:0;font-family:var(--sans);font-size:16px;line-height:1.75;
  color:var(--muted);
}
.feature-body p + p{margin-top:14px}
.feature-body .pull{
  margin-top:28px;padding:14px 0 0;
  border-top:1px solid var(--line);
  font-family:var(--serif-garamond);font-style:italic;
  font-size:18px;color:var(--accent);
}

/* ---------- how-to (numbered steps) ---------- */
.howto{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  margin-top:56px;
}
@media (max-width:880px){.howto{grid-template-columns:1fr}}
.step{
  border-top:1px solid var(--line-strong);padding-top:24px;
}
.step .num{
  font-family:var(--serif-didone);font-style:italic;font-weight:400;
  font-size:64px;line-height:1;color:var(--accent);
  margin-bottom:14px;
}
.step h3{
  margin:0 0 10px;font-family:var(--serif-display);
  font-weight:400;font-size:22px;line-height:1.25;color:var(--text);
}
.step p{
  margin:0;font-family:var(--sans);font-size:14.5px;line-height:1.7;color:var(--muted);
}
.step p code{
  font-family:var(--mono);font-size:13px;
  padding:1px 6px;border-radius:3px;
  background:var(--accent-soft);color:var(--accent-deep);
}
@media (prefers-color-scheme:dark){
  .step p code{color:var(--accent)}
}

/* ---------- compatibility (apps strip) ---------- */
.apps{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;
}
.app-tag{
  display:inline-flex;align-items:center;
  padding:10px 16px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--bg-soft);
  font-family:var(--sans);font-size:13.5px;color:var(--text);
  font-weight:500;
}
.app-tag b{color:var(--accent);font-weight:600;margin-right:6px}

/* ---------- FAQ (editorial Q&A) ---------- */
.faq{margin-top:48px;display:grid;gap:0}
.faq details{
  border-top:1px solid var(--line-strong);
  padding:22px 0;
}
.faq details:last-of-type{border-bottom:1px solid var(--line-strong)}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;gap:24px;align-items:flex-start;
  font-family:var(--serif-display);font-weight:400;
  font-size:clamp(20px,2.6vw,26px);line-height:1.3;
  color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"Q";flex-shrink:0;
  font-family:var(--serif-roman);font-size:13px;letter-spacing:.16em;
  color:var(--accent);width:28px;display:inline-block;
  margin-top:8px;
}
.faq details[open] summary::before{content:"·"}
.faq .answer{
  margin:14px 0 0;padding-left:52px;
  font-family:var(--sans);font-size:15px;line-height:1.8;color:var(--muted);
}
.faq .answer p{margin:0 0 12px}
.faq .answer p:last-child{margin-bottom:0}
.faq .answer code{
  font-family:var(--mono);font-size:13px;
  padding:1px 6px;border-radius:3px;
  background:var(--accent-soft);color:var(--accent-deep);
}
@media (prefers-color-scheme:dark){
  .faq .answer code{color:var(--accent)}
}
@media (max-width:560px){
  .faq .answer{padding-left:28px}
  .faq summary{gap:14px}
}

/* ---------- legal links (sub-page index card) ---------- */
.legal-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;
}
@media (max-width:760px){.legal-cards{grid-template-columns:1fr}}
.legal-card{
  display:block;padding:24px 24px 28px;
  border-top:1px solid var(--line-strong);
  background:transparent;
  transition:background .15s;
}
.legal-card:hover{background:var(--accent-soft)}
.legal-card .label{
  font-family:var(--serif-roman);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px;
}
.legal-card h3{
  margin:0;font-family:var(--serif-display);font-weight:400;
  font-size:24px;line-height:1.25;color:var(--text);
}
.legal-card .desc{
  margin:8px 0 0;font-family:var(--sans);font-size:13.5px;color:var(--muted);
}
.legal-card .arrow{
  margin-top:16px;font-family:var(--serif-roman);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.legal-card .arrow::after{content:" →"}

/* ---------- doc page (privacy/terms/support) ---------- */
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  margin:32px 0 28px;
  font-family:var(--serif-roman);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.back-link:hover{color:var(--accent)}
.back-link::before{content:"←";letter-spacing:0;color:var(--accent)}

.page-hero{padding:24px 0 40px;border-bottom:1px solid var(--rule)}
.page-hero h1{
  margin:0 0 14px;
  font-family:var(--serif-display);font-weight:400;
  font-size:clamp(40px, 6vw, 72px);line-height:1;letter-spacing:-.018em;
  color:var(--text);
}
.page-hero .for-app{
  display:inline-flex;align-items:center;gap:10px;margin-top:10px;
  font-family:var(--sans);font-size:13.5px;color:var(--muted);
}
.page-hero .for-app img{width:24px;height:24px;border-radius:6px}
.page-hero .for-app a{color:var(--accent)}

.doc{padding:48px 0;max-width:720px}
.doc > p:first-child{
  font-family:var(--serif-garamond);font-style:italic;
  font-size:18px;line-height:1.6;color:var(--muted);
  margin:0 0 28px;padding-bottom:22px;border-bottom:1px solid var(--line);
}
.doc h2{
  margin:36px 0 12px;font-family:var(--serif-display);font-weight:400;
  font-size:24px;line-height:1.25;color:var(--text);
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
.doc h2:first-of-type{margin-top:0}
.doc h3{
  margin:22px 0 8px;font-family:var(--serif-didone);font-weight:400;
  font-size:17px;line-height:1.35;color:var(--text);
}
.doc h3::before{
  content:"";display:inline-block;width:3px;height:.85em;
  background:var(--accent);margin-right:10px;border-radius:1px;vertical-align:-1px;
}
.doc p{
  margin:10px 0;font-family:var(--sans);font-size:15px;line-height:1.85;color:var(--text);
}
.doc p strong{font-weight:700}
.doc ul{margin:10px 0;padding-left:22px;font-family:var(--sans);font-size:15px;line-height:1.85;color:var(--text)}
.doc ul li{margin:5px 0}
.doc ul li b{font-weight:600}
.doc .meta{
  margin-top:32px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--dim);
}
.doc .meta b{color:var(--muted);font-weight:500}
.doc .support-card{
  margin:18px 0;padding:24px;
  border:1px solid var(--line-strong);background:var(--bg-soft);
}
.doc .support-card h3{
  margin:0 0 8px;font-family:var(--serif-didone);font-weight:400;
  font-size:18px;color:var(--text);
}
.doc .support-card h3::before{display:none}  /* override .doc h3 cyan bar */
.doc .support-card p{margin:0 0 14px;font-size:14.5px}
.doc .support-card p:last-child{margin-bottom:0}
.doc .btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;
  background:var(--accent);color:#fff;
  font-family:var(--sans);font-size:14px;font-weight:600;
  text-decoration:none;
  transition:background .15s, transform .15s;
}
.doc .btn:hover{background:var(--accent-deep);transform:translateY(-1px)}
.doc .btn::after{content:"↗" / ""}

/* related links (sub-page bottom) */
.related{margin-top:60px;padding-top:32px;border-top:1px solid var(--line-strong)}
.related .kicker{margin-bottom:18px}
.related-list{
  display:grid;gap:0;
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:760px){.related-list{grid-template-columns:1fr}}
.related-list a{
  display:flex;align-items:center;
  padding:18px 0;border-top:1px solid var(--line);
  font-family:var(--serif-display);font-weight:400;
  font-size:18px;color:var(--text);
}
.related-list a::after{content:"→";margin-left:auto;color:var(--accent);font-family:var(--sans)}
.related-list a:hover{color:var(--accent)}

/* ---------- footer ---------- */
footer{
  padding:48px 0 64px;
  border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:12px;color:var(--muted);
  line-height:1.7;
}
footer .row{
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:baseline;
  margin-bottom:18px;
}
footer .row a{color:var(--muted)}
footer .row a:hover{color:var(--accent)}
footer .spacer{flex:1}
footer .lang{
  display:flex;gap:14px;font-family:var(--serif-roman);
  letter-spacing:.16em;font-size:11px;text-transform:uppercase;
}
footer .lang .current{color:var(--text)}
footer .lang a:hover{color:var(--accent)}
footer .tm{
  font-size:10.5px;color:var(--dim);line-height:1.7;
  padding-top:14px;border-top:1px dashed var(--line);
}
footer .colophon{
  margin-bottom:18px;
  font-family:var(--serif-garamond);font-style:italic;
  font-size:14px;color:var(--muted);max-width:540px;
}

/* ---------- Japanese typography overrides ---------- */
html[lang="ja"] body{font-family:var(--sans-jp)}
html[lang="ja"] .hero h1,
html[lang="ja"] .section h2,
html[lang="ja"] .page-hero h1,
html[lang="ja"] .feature-body h3,
html[lang="ja"] .step h3,
html[lang="ja"] .legal-card h3,
html[lang="ja"] .related-list a,
html[lang="ja"] .doc h2,
html[lang="ja"] .doc h3,
html[lang="ja"] .doc .support-card h3,
html[lang="ja"] .faq summary{
  font-family:var(--serif-jp);
  font-weight:700;
  letter-spacing:.01em;
}
html[lang="ja"] .hero h1{
  font-size:clamp(50px, 9vw, 132px);
  line-height:1.05;letter-spacing:-.005em;
}
html[lang="ja"] .hero h1 em,
html[lang="ja"] .section h2 em{
  font-family:var(--hand);
  font-style:normal;
  font-weight:600;
  color:var(--accent);
}
html[lang="ja"] .hero .lede,
html[lang="ja"] .section .deck{
  font-family:var(--serif-jp);
  font-style:normal;
  font-weight:500;
}
html[lang="ja"] .hero .lede{
  font-size:clamp(18px, 2vw, 24px);line-height:1.6;
}
html[lang="ja"] .stat .num{
  /* keep DM Serif Display for numerals */
  font-family:var(--serif-didone);
}
html[lang="ja"] .feature-body p,
html[lang="ja"] .step p,
html[lang="ja"] .doc p,
html[lang="ja"] .doc ul{
  font-family:var(--sans-jp);
  line-height:1.95;
}
html[lang="ja"] .faq summary{
  font-size:clamp(17px, 2.2vw, 22px);line-height:1.55;
}
html[lang="ja"] .faq summary::before{content:"問"}
html[lang="ja"] .faq details[open] summary::before{content:"答"}
html[lang="ja"] .step .num{font-family:var(--serif-didone)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ---------- details marker (Firefox) ---------- */
details summary{list-style:none}
details summary::-webkit-details-marker{display:none}