/* ============================================
   ECHO Scene Packs - 完全レスポンシブスタイル
   カラー: ECHOブランド青系
   フォント: Noto Sans JP
   ============================================ */

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.7;
  color:#1a202c;
  background:#f7fafc;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:#2563eb;text-decoration:none;transition:color .2s}
a:hover{color:#1d4ed8;text-decoration:underline}
ul,ol{list-style:none}

/* ---------- Design Tokens ---------- */
:root{
  --brand:#2563eb;
  --brand-dark:#1e40af;
  --brand-light:#dbeafe;
  --accent:#0ea5e9;
  --text:#1a202c;
  --text-sub:#4a5568;
  --text-light:#718096;
  --bg:#f7fafc;
  --bg-card:#ffffff;
  --border:#e2e8f0;
  --ok:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
  --radius:12px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 12px 32px rgba(0,0,0,.1);
  --container:1040px;
  --header-h:64px;
}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:64px 0}
@media(max-width:768px){.section{padding:40px 0}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  height:var(--header-h);
  display:flex;align-items:center;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative;gap:20px}
.site-logo{font-weight:800;font-size:18px;color:var(--brand-dark);display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
.site-logo:hover{text-decoration:none;color:var(--brand)}
.site-logo-badge{background:var(--brand);color:#fff;padding:2px 8px;border-radius:6px;font-size:11px;letter-spacing:.05em}
.site-header nav{margin-left:auto}
.nav-list{display:flex;gap:24px;align-items:center;margin:0;padding:0}
.nav-list li{list-style:none}
.nav-list a{color:var(--text-sub);font-size:14px;font-weight:500;display:inline-flex;align-items:center}
.nav-list a:hover{color:var(--brand);text-decoration:none}
.nav-cta{
  background:var(--brand);color:#fff!important;
  padding:10px 18px;border-radius:10px;font-weight:600;font-size:14px;
  justify-content:center;white-space:nowrap;
}
.nav-cta:hover{background:var(--brand-dark);text-decoration:none!important}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;transition:.3s}
@media(max-width:768px){
  .site-header .container{padding-right:72px}
  .site-logo{max-width:calc(100% - 72px)}
  .site-header nav{margin-left:0}
  .nav-toggle{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    position:absolute;right:20px;top:50%;transform:translateY(-50%);
    width:44px;height:44px;padding:0;z-index:120;
  }
  .nav-list{
    display:none;position:absolute;top:calc(var(--header-h) - 1px);left:16px;right:16px;
    flex-direction:column;align-items:stretch;background:#fff;padding:16px;gap:10px;
    box-shadow:var(--shadow-lg);border:1px solid var(--border);border-radius:16px;
  }
  .nav-list.open{display:flex}
  .nav-list li{width:100%}
  .nav-list > li > a,
  .nav-list > li > .lang-current{
    display:flex;width:100%;align-items:center;justify-content:space-between;
    padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:#fff;
    color:var(--text);font-size:15px;
  }
  .nav-list > li > a:hover,
  .nav-list > li > .lang-current:hover{background:var(--bg);color:var(--brand)}
  .nav-list > li > .nav-cta{
    background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);
    color:#fff!important;border-color:transparent;justify-content:center;
  }
  .nav-lang{width:100%}
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{background:#fff;border-bottom:1px solid var(--border);padding:12px 0}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;max-width:var(--container);margin:0 auto;padding:0 20px;font-size:13px;color:var(--text-light)}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb li:not(:last-child)::after{content:"›";margin:0 8px;color:var(--text-light)}
.breadcrumb a{color:var(--text-sub)}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb li[aria-current="page"]{color:var(--text);font-weight:500}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);
  color:#fff;padding:80px 0 64px;position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.1;
  background-image:radial-gradient(circle at 20% 30%,#fff 0%,transparent 40%),
    radial-gradient(circle at 80% 70%,#fff 0%,transparent 40%);
}
.hero .container{position:relative;z-index:1}
.hero-tag{
  display:inline-block;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);
  color:#fff;padding:6px 16px;border-radius:99px;font-size:13px;font-weight:600;margin-bottom:16px;
}
.hero h1,.hero-h1{font-size:clamp(28px,4.5vw,44px);font-weight:800;line-height:1.3;margin-bottom:20px}
.hero-sub{font-size:clamp(15px,2vw,18px);opacity:.95;max-width:720px;line-height:1.75}
.hero-cta{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap}
@media(max-width:768px){.hero{padding:56px 0 40px}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:10px;font-weight:600;font-size:15px;
  transition:all .2s;cursor:pointer;border:0;text-decoration:none!important;
}
.btn-primary{background:#fff;color:var(--brand)}
.btn-primary:hover{background:var(--brand-light);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-secondary{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-secondary:hover{background:rgba(255,255,255,.25)}
.btn-cta{
  background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);
  color:#fff;padding:16px 32px;font-size:16px;box-shadow:var(--shadow);
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:#fff}

/* ---------- Section Header ---------- */
.section-header{text-align:center;max-width:720px;margin:0 auto 48px}
.section-tag{
  display:inline-block;color:var(--brand);background:var(--brand-light);
  padding:4px 12px;border-radius:99px;font-size:12px;font-weight:600;margin-bottom:12px;
}
.section-title{font-size:clamp(24px,3.2vw,32px);font-weight:800;line-height:1.35;margin-bottom:12px;color:var(--text)}
.section-desc{font-size:15px;color:var(--text-sub);line-height:1.8}

/* ---------- LP Main ---------- */
.lp-main{max-width:var(--container);margin:0 auto;padding:40px 20px}
@media(max-width:768px){.lp-main{padding:24px 16px}}

/* ---------- Learn Points ---------- */
.learn-points{
  background:#fff;border-radius:var(--radius-lg);padding:32px;
  box-shadow:var(--shadow-sm);margin:32px 0;border:1px solid var(--border);
}
.learn-points h2{font-size:22px;margin-bottom:20px;color:var(--brand-dark)}
.learn-points ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.learn-points li{
  padding-left:28px;position:relative;font-size:15px;line-height:1.7;color:var(--text-sub);
}
.learn-points li::before{
  content:"✓";position:absolute;left:0;top:0;
  width:20px;height:20px;background:var(--ok);color:#fff;
  border-radius:50%;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:3px;
}

/* ---------- Phrases ---------- */
.phrases{margin:48px 0}
.phrases > h2{font-size:26px;margin-bottom:24px;color:var(--text);font-weight:800}
.phrase-item{
  background:#fff;border-radius:var(--radius);padding:24px;margin-bottom:16px;
  display:grid;grid-template-columns:56px 1fr;gap:20px;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
  transition:transform .2s,box-shadow .2s;
}
.phrase-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.phrase-number{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);
  color:#fff;font-weight:700;font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.phrase-body{min-width:0}
.phrase-jp{font-size:20px;font-weight:700;color:var(--text);line-height:1.5;margin-bottom:6px;word-break:break-word}
.phrase-reading{font-size:13px;color:var(--text-light);margin-bottom:10px}
.phrase-meaning{font-size:14px;color:var(--text-sub);font-style:italic;padding:8px 12px;background:var(--bg);border-radius:8px;margin-bottom:10px}
.phrase-ng{
  background:#fef3c7;border-left:3px solid var(--warn);
  padding:8px 12px;border-radius:6px;font-size:13px;color:#78350f;
}
.ng-label{
  display:inline-block;background:var(--warn);color:#fff;
  font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;margin-right:8px;letter-spacing:.05em;
}
@media(max-width:600px){
  .phrase-item{grid-template-columns:1fr;padding:18px}
  .phrase-number{width:36px;height:36px;font-size:14px}
  .phrase-jp{font-size:17px}
}

/* ---------- CTA Banner ---------- */
.cta-banner{
  background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);
  color:#fff;border-radius:var(--radius-lg);padding:48px 32px;
  text-align:center;margin:48px auto;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.cta-banner::before{
  content:"";position:absolute;inset:0;opacity:.15;
  background-image:radial-gradient(circle at 20% 20%,#fff 0%,transparent 40%);
}
.cta-banner > *{position:relative;z-index:1}
.cta-banner h2{font-size:26px;margin-bottom:12px;font-weight:800;width:100%}
.cta-banner p{opacity:.95;margin:0 auto 24px;font-size:15px;line-height:1.75;max-width:720px}
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;color:var(--brand);padding:14px 32px;
  border-radius:10px;font-weight:700;font-size:16px;
  box-shadow:var(--shadow);margin:0 auto;
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--brand-dark);text-decoration:none}
@media(max-width:768px){
  .cta-banner{padding:36px 20px}
  .cta-btn{width:100%;max-width:320px}
}

/* ---------- FAQs ---------- */
.faqs{margin:48px 0}
.faqs > h2{font-size:26px;margin-bottom:24px;color:var(--text);font-weight:800}
.faq-item{
  background:#fff;border-radius:var(--radius);margin-bottom:12px;
  border:1px solid var(--border);overflow:hidden;
}
.faq-q{
  padding:18px 24px;font-weight:600;font-size:16px;color:var(--text);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";font-size:20px;color:var(--brand);font-weight:700;transition:transform .2s}
details[open] .faq-q::after{transform:rotate(45deg)}
.faq-a{padding:0 24px 20px;color:var(--text-sub);font-size:14px;line-height:1.8}

/* ---------- Related ---------- */
.related-pages{
  background:#fff;border-radius:var(--radius-lg);padding:32px;
  box-shadow:var(--shadow-sm);margin:48px 0;border:1px solid var(--border);
}
.related-pages h2{font-size:22px;margin-bottom:20px;color:var(--brand-dark)}
.related-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.related-list li a{
  display:block;padding:14px 18px;background:var(--bg);border-radius:10px;
  color:var(--text);font-weight:500;font-size:14px;border:1px solid transparent;transition:all .2s;
}
.related-list li a:hover{background:var(--brand-light);border-color:var(--brand);color:var(--brand-dark);text-decoration:none}

/* ---------- Pack Card Grid (for pack TOP & index) ---------- */
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin:32px 0}
.pack-card{
  background:#fff;border-radius:var(--radius-lg);padding:28px 24px;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s;display:block;
}
.pack-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);text-decoration:none}
.pack-card-tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;
  padding:4px 10px;border-radius:99px;color:#fff;margin-bottom:12px;
}
.pack-card h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text)}
.pack-card p{font-size:13px;color:var(--text-sub);line-height:1.7;margin-bottom:12px}
.pack-card-meta{font-size:12px;color:var(--text-light);display:flex;align-items:center;gap:6px}

/* Pack TOP list */
.pack-block{margin:32px 0;background:#fff;border-radius:var(--radius-lg);padding:28px 24px;border:1px solid var(--border)}
.pack-block h2{font-size:22px;margin-bottom:16px;color:var(--brand-dark);padding-bottom:12px;border-bottom:2px solid var(--brand-light)}
.pack-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.pack-list li a{
  display:block;padding:12px 16px;background:var(--bg);border-radius:8px;
  color:var(--text);font-size:14px;border:1px solid transparent;transition:all .2s;
}
.pack-list li a:hover{background:var(--brand-light);border-color:var(--brand);color:var(--brand-dark);text-decoration:none}

/* ---------- Category Grid (for home) ---------- */
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:32px 0}
.category-card{
  background:#fff;border-radius:var(--radius);padding:20px;text-align:center;
  border:1px solid var(--border);transition:all .2s;
}
.category-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.category-icon{width:48px;height:48px;margin:0 auto 12px;background:var(--brand-light);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px}
.category-card h3{font-size:15px;color:var(--text);margin-bottom:4px}
.category-card p{font-size:12px;color:var(--text-light)}

/* ---------- Steps (for home) ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin:32px 0}
.step-card{background:#fff;border-radius:var(--radius);padding:28px 24px;border:1px solid var(--border);position:relative}
.step-num{position:absolute;top:-16px;left:24px;width:32px;height:32px;background:var(--brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
.step-card h3{font-size:17px;margin:8px 0 10px;color:var(--text)}
.step-card p{font-size:14px;color:var(--text-sub);line-height:1.7}

/* ---------- Footer ---------- */
.site-footer{
  background:#1a202c;color:#a0aec0;padding:40px 0 24px;margin-top:64px;
}
.site-footer .container{max-width:var(--container);margin:0 auto;padding:0 20px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin-bottom:32px}
.footer-col h4{color:#fff;font-size:14px;margin-bottom:12px;font-weight:600}
.footer-col ul li{margin-bottom:8px}
.footer-col a{color:#a0aec0;font-size:13px}
.footer-col a:hover{color:#fff}
.footer-links{display:flex;flex-wrap:wrap;gap:20px;padding:20px 0;border-top:1px solid #2d3748;border-bottom:1px solid #2d3748}
.footer-links a{color:#cbd5e0;font-size:13px}
.footer-links a:hover{color:#fff}
.footer-copy{padding-top:20px;font-size:12px;color:#718096;text-align:center}

/* ---------- Utilities ---------- */
.text-center{text-align:center}
.mt-lg{margin-top:48px}
.mb-lg{margin-bottom:48px}

/* ---------- Focus ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;border-radius:4px;
}

/* ---------- Print ---------- */
@media print{
  .site-header,.site-footer,.cta-banner,.related-pages,.nav-toggle{display:none}
  .hero{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
}


/* === v4.1 QA Fix: 言語別フォントをbodyまで伝播 === */
html[lang="my"] body,
html[lang="my"] h1, html[lang="my"] h2, html[lang="my"] h3,
html[lang="my"] .hero-h1, html[lang="my"] .section-title,
html[lang="my"] .phrase-meaning, html[lang="my"] p, html[lang="my"] li,
html[lang="my"] td, html[lang="my"] th, html[lang="my"] button,
html[lang="my"] .hero-sub, html[lang="my"] .faq-question, html[lang="my"] .faq-answer,
html[lang="my"] .ng-item, html[lang="my"] .phrase-reading {
  font-family: "Padauk", "Myanmar Text", "Myanmar3", "Noto Sans Myanmar", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.9;
}
html[lang="my"] .phrase-jp, html[lang="my"] .phrase-item .jp,
html[lang="my"] [lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

html[lang="ne"] body,
html[lang="ne"] h1, html[lang="ne"] h2, html[lang="ne"] h3,
html[lang="ne"] .hero-h1, html[lang="ne"] .section-title,
html[lang="ne"] .phrase-meaning, html[lang="ne"] p, html[lang="ne"] li,
html[lang="ne"] td, html[lang="ne"] th, html[lang="ne"] button,
html[lang="ne"] .hero-sub, html[lang="ne"] .faq-question, html[lang="ne"] .faq-answer,
html[lang="ne"] .ng-item, html[lang="ne"] .phrase-reading {
  font-family: "Noto Sans Devanagari", "Mangal", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.85;
}
html[lang="ne"] .phrase-jp, html[lang="ne"] .phrase-item .jp,
html[lang="ne"] [lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

html[lang="ko"] body,
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3,
html[lang="ko"] .hero-h1, html[lang="ko"] .section-title,
html[lang="ko"] .phrase-meaning, html[lang="ko"] p, html[lang="ko"] li,
html[lang="ko"] td, html[lang="ko"] th, html[lang="ko"] button,
html[lang="ko"] .hero-sub, html[lang="ko"] .faq-question, html[lang="ko"] .faq-answer {
  font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans JP", sans-serif;
}
html[lang="ko"] .phrase-jp, html[lang="ko"] .phrase-item .jp,
html[lang="ko"] [lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

html[lang="zh"] body,
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3,
html[lang="zh"] .hero-h1, html[lang="zh"] .section-title,
html[lang="zh"] .phrase-meaning, html[lang="zh"] p, html[lang="zh"] li,
html[lang="zh"] td, html[lang="zh"] th, html[lang="zh"] button,
html[lang="zh-Hans"] body, html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3 {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans JP", sans-serif;
}
html[lang="zh"] .phrase-jp, html[lang="zh"] .phrase-item .jp,
html[lang="zh"] [lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

html[lang="vi"] body,
html[lang="vi"] h1, html[lang="vi"] h2, html[lang="vi"] h3,
html[lang="vi"] .hero-h1, html[lang="vi"] .section-title,
html[lang="vi"] p, html[lang="vi"] li, html[lang="vi"] td, html[lang="vi"] th {
  font-family: "Be Vietnam Pro", "Noto Sans", "Noto Sans JP", sans-serif;
  line-height: 1.75;
}
html[lang="vi"] .phrase-jp, html[lang="vi"] [lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

html[lang="en"] body, html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] .hero-h1, html[lang="en"] p, html[lang="en"] li,
html[lang="id"] body, html[lang="id"] h1, html[lang="id"] h2, html[lang="id"] h3,
html[lang="id"] .hero-h1, html[lang="id"] p, html[lang="id"] li,
html[lang="pt"] body, html[lang="pt"] h1, html[lang="pt"] h2, html[lang="pt"] h3,
html[lang="pt"] .hero-h1, html[lang="pt"] p, html[lang="pt"] li {
  font-family: "Inter", "Noto Sans", "Helvetica Neue", "Arial", "Noto Sans JP", sans-serif;
}
html[lang="en"] .phrase-jp, html[lang="en"] [lang="ja"],
html[lang="id"] .phrase-jp, html[lang="id"] [lang="ja"],
html[lang="pt"] .phrase-jp, html[lang="pt"] [lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* === v4.1 QA Fix: テーブル横スクロール + オーバーフロー保護 === */
html, body { overflow-x: hidden; max-width: 100vw; }
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
@media (min-width: 601px) {
  table thead, table tbody, table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
}
table th, table td {
  word-break: break-word;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  font-size: 14px;
}
@media (max-width: 600px) {
  table, table thead, table tbody, table tr, table th, table td { display: block; width: 100% !important; }
  table tr { margin-bottom: 12px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; background: #fff; }
  table th, table td { border: none; padding: 6px 8px; }
  table th { background: #f1f5f9; font-weight: 700; margin-bottom: 4px; border-radius: 6px; }
  table thead tr { display: none; }  /* ヘッダー行は重複するので非表示 */
}

/* reading-progress 安全固定 */
.reading-progress {
  position: fixed !important;
  top: 0; left: 0; right: 0; width: 100vw;
  height: 3px;
  background: rgba(0,0,0,0.05);
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  margin: 0 !important;
}
.reading-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  transition: width 0.1s ease-out;
}

/* ヒーロー/フレーズカードのはみ出し防止強化 */
.hero-h1, .section-title, h1, h2, h3, h4,
.phrase-jp, .phrase-meaning, .phrase-reading,
.ng-item, .faq-question, .faq-answer,
.cta-banner, .cta-btn, .hero-sub {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* コンテナ最大幅の強制 */
.container, .lp-main, main, section, article { max-width: 100%; box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }

/* タップ領域 */
a.btn, a.cta-btn, button, .lang-item, details summary, .nav-list a { min-height: 44px; }

/* Burmese は特に文字高さ余裕を持たせる (積み重ね子音対策) */
html[lang="my"] { font-feature-settings: "locl"; }
html[lang="my"] .phrase-item { padding: 16px 14px; }
html[lang="my"] h1, html[lang="my"] h2 { line-height: 1.95; letter-spacing: 0.01em; }

/* Devanagari の複雑合字のため余白増 */
html[lang="ne"] h1, html[lang="ne"] h2 { line-height: 1.9; }
html[lang="ne"] .phrase-item { padding: 16px 14px; }


/* === v4.2 QA Fix: ハンバーガーメニューspan高さ確保 === */
.nav-toggle { gap: 5px !important; }
.nav-toggle span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: #1a202c !important;
  border-radius: 2px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease;
}
/* ハンバーガーをXに変形 (open時) */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ヘッダー内の ECHO ロゴ等の2行折り返し対策 */
@media (max-width: 640px) {
  .site-logo { font-size: 15px; line-height: 1.2; }
  .site-logo strong { font-weight: 800; }
  .site-header .container { padding: 0 12px; padding-right: 64px; min-height: 56px; }
  .nav-toggle { right: 12px; }
}

/* 言語スイッチャー (ドロップダウン): モバイルでもちゃんと表示 */
.nav-lang-mobile { display: flex; align-items: center; }
@media (max-width: 768px) {
  .nav-lang-desktop { display: none !important; }
  .nav-lang-mobile { display: flex !important; }
}
@media (min-width: 769px) {
  .nav-lang-mobile { display: none !important; }
  .nav-lang-desktop { display: flex !important; }
}

/* === v4.3 QA Fix: nav-toggle 位置ズレ最終修正 === */
@media (max-width: 768px) {
  .site-header .container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
  }
  .nav-toggle {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    margin: 0 0 0 auto !important;
    align-self: center !important;
    flex-shrink: 0;
  }
  /* ロゴがmargin-left:auto等で押し出されないように */
  .site-logo, .brand, .logo { flex-shrink: 1; min-width: 0; }
  /* header-right ラッパが存在する場合はそちらを右端へ */
  .site-header .header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .site-header .header-right .nav-toggle { margin-left: 0 !important; }
}


/* === desktop width rebalance for PC readability === */
.hero .container{max-width:1040px}
.hero-sub{max-width:640px}
@media (min-width: 1200px) {
  .pack-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .pack-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .pack-block{padding:24px 22px}
}


/* ============================================================
   Expertise blocks (stumble_points / system_note / next_moves)
   ============================================================ */
.expertise-block {
  max-width: 880px;
  margin: 48px auto;
  padding: 0 20px;
}
.expertise-block > h2 {
  font-size: 22px;
  font-weight: 800;
  color: #1e3a8a;
  border-left: 4px solid #2563eb;
  padding-left: 16px;
  margin-bottom: 24px;
}
.expertise-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.expertise-item {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fbbf24;
  border-radius: 14px;
  padding: 20px 22px;
}
.expertise-item-h {
  font-size: 17px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 10px;
}
.expertise-item-body {
  font-size: 15px;
  line-height: 1.85;
  color: #451a03;
}
.expertise-system {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  padding: 24px 28px;
  border-radius: 12px;
}
.expertise-system-body {
  font-size: 15px;
  line-height: 1.9;
  color: #1e3a8a;
}
.expertise-next-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.expertise-next-list li {
  background: #f0fdf4;
  border-left: 3px solid #10b981;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.8;
  color: #064e3b;
}
@media (max-width: 640px) {
  .expertise-item { padding: 16px 18px; }
  .expertise-item-h { font-size: 16px; }
  .expertise-item-body { font-size: 14px; }
  .expertise-system { padding: 18px 20px; }
  .expertise-system-body { font-size: 14px; }
  .expertise-next-list li { font-size: 14px; padding: 12px 14px; }
}

/* ============================================================
   Editor profile (EEAT)
   ============================================================ */
.editor-profile {
  max-width: 880px;
  margin: 48px auto 24px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.editor-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
  flex-shrink: 0;
}
.editor-info { flex: 1; }
.editor-name {
  font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 2px;
}
.editor-role {
  font-size: 13px; color: #475569; margin-bottom: 10px;
}
.editor-bio {
  font-size: 14px; line-height: 1.8; color: #334155; margin-bottom: 8px;
}
.editor-expertise {
  font-size: 13px; color: #1e40af;
}
@media (max-width: 640px) {
  .editor-profile { flex-direction: column; padding: 20px; gap: 14px; }
  .editor-avatar { width: 56px; height: 56px; font-size: 20px; }
}

/* ============================================================
   Hero tagline (SEO H1 + catchy subtitle)
   ============================================================ */
.hero-tagline {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  margin-top: 8px;
  letter-spacing: 0.01em;
}

/* LP イントロ (SEO用導入文) */
.lp-intro { background: #fafbfc; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 24px 0; margin: 0; }
.lp-intro p { max-width: 840px; margin: 0 auto; color: var(--text-sub); font-size: 15px; line-height: 1.9; padding: 0 20px; }
@media (max-width: 640px) { .lp-intro p { font-size: 14px; line-height: 1.85; } }

/* 言語切替ドロップダウン (PC) */
.nav-lang { position: relative; }
.lang-current { background:none; border:1px solid var(--brand); color:var(--brand); padding:8px 14px; border-radius:20px; cursor:pointer; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.lang-dropdown { display:none; position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:180px; z-index:100; overflow:hidden; }
.nav-lang.open .lang-dropdown { display:block; }
.lang-item { display:block; padding:12px 16px; color:var(--text); text-decoration:none; font-size:14px; border-bottom:1px solid var(--border); }
.lang-item:hover { background:var(--bg); color:var(--brand); }
.lang-item.active { background:var(--brand); color:#fff; font-weight:600; }
.lang-item:last-child { border-bottom:none; }

/* ヘッダー右側のグループ: PCでは非表示、SPでハンバーガー+言語切替を横並び */
.header-right { display:none; }
.nav-lang-mobile { display:none; }

/* PC: デスクトップ版言語切替は通常表示 */
@media (min-width:769px) {
  .nav-lang-desktop { display:list-item; }
}

/* SP: ハンバーガーメニュー右端固定 + 言語切替を隣に */
@media (max-width:768px) {
  .site-header .container { position:relative; padding-right:12px; padding-left:12px; display:flex; align-items:center; justify-content:space-between; }
  .header-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
  .nav-lang-mobile { display:block; position:relative; }
  .nav-lang-desktop { display:none !important; }
  .nav-toggle { display:flex !important; position:static; margin:0 0 0 auto; transform:none !important; top:auto !important; right:auto !important; }

  /* SP 言語切替ボタン (ハンバーガーの隣) */
  .nav-lang-mobile .lang-current { padding:8px 10px; font-size:13px; border-radius:18px; min-height:40px; max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nav-lang-mobile .lang-current-label { max-width:80px; overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:middle; }
  .nav-lang-mobile .lang-dropdown { display:none; position:absolute; top:calc(100% + 8px); right:0; left:auto; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.16); min-width:200px; max-height:70vh; overflow-y:auto; padding:0; z-index:200; }
  .nav-lang-mobile.open .lang-dropdown { display:block; }
  .nav-lang-mobile .lang-item { padding:14px 18px; font-size:15px; }

  /* ハンバーガーメニュー本体 (ナビ項目のみ、言語切替はヘッダー右に分離) */
  .nav-list { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,.1); padding:12px; margin:0; list-style:none; z-index:150; }
  .nav-list.open { display:flex; flex-direction:column; gap:4px; }
  .nav-list > li { width:100%; }
  .nav-list > li > a { display:block; width:100%; padding:14px 16px; border-radius:10px; text-decoration:none; color:var(--text); font-size:16px; font-weight:500; background:var(--bg); }
  .nav-list > li > a:hover, .nav-list > li > a:focus-visible { background:var(--brand); color:#fff; }
  .nav-list > li > a.nav-cta { background:linear-gradient(135deg, var(--brand), var(--accent)); color:#fff; font-weight:700; text-align:center; box-shadow:0 4px 12px rgba(37,99,235,.25); margin-top:4px; }

  /* SP: ハンバーガーボタンを右端・固定サイズ */
  .nav-toggle { width:44px; height:44px; padding:10px; background:transparent; border:1px solid var(--border); border-radius:10px; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
  .nav-toggle span { display:block; width:20px; height:2px; background:var(--text); border-radius:2px; }

  /* サイトロゴのサイズ調整 */
  .site-logo { font-size:16px; }
}

/* 極小画面: さらにコンパクトに */
@media (max-width:380px) {
  .nav-lang-mobile .lang-current-label { max-width:48px; }
  .nav-lang-mobile .lang-current { padding:8px; font-size:12px; }
  .site-logo { font-size:14px; }
}

/* === AIO/アクセシビリティ強化 === */
.lang-current, .lang-item, .nav-list a, .btn, .btn-cta, .cta-btn, .nav-toggle, .nav-cta { min-height:44px; }
.lang-item { min-height:44px; display:flex; align-items:center; }

/* フォーカスリング強化 */
a:focus-visible, button:focus-visible, details summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px;
}

/* 折り返しと長文字対応（ビルマ語・ネパール語等）*/
.hero-h1, .section-title, h2, h3 { word-break: break-word; overflow-wrap: anywhere; }
.phrase-jp { overflow-wrap: anywhere; }

/* ロードパフォーマンス: 画像遅延読み込みを安全に扱う */
img { max-width: 100%; height: auto; }

/* モーション減らし対応 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* 印刷時のURL表示簡潔化 */
@media print {
  .lang-switcher, .nav-lang, .lang-dropdown { display:none !important; }
  .phrase-item { break-inside: avoid; }
  .faq-item { break-inside: avoid; }
}

/* =========================================================
   多言語フォント対応（ビルマ・デーバナーガリー・ハングル・ハングル漢字・ハングル対応）
   - ビルマ文字（my）は文字高が大きいため line-height を増やす
   - デーバナーガリー（ne）も同様
   - カブエット/本文フォントを言語別に指定（システムフォニト対応を他の話に任せつつ一歩前にウェブフォントを指定）
   ========================================================= */

/* ビルマ語: ビルマ文字は文字高が大きいのでベースライン誰整 */
html[lang="my"] {
  font-family: "Padauk", "Myanmar Text", "Myanmar3", "Noto Sans Myanmar", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.85;
}
html[lang="my"] .hero-h1,
html[lang="my"] .hero h1 { line-height: 1.5; letter-spacing: 0.01em; }
html[lang="my"] .hero-sub { line-height: 1.95; }
html[lang="my"] .section-title,
html[lang="my"] h2,
html[lang="my"] h3 { line-height: 1.55; }
html[lang="my"] .phrase-jp { line-height: 1.7; }
html[lang="my"] .faq-q,
html[lang="my"] .faq-a { line-height: 1.95; }
html[lang="my"] .bullet-list li { line-height: 1.9; }

/* デーバナーガリー（ネパール語）: 結合文字が高い */
html[lang="ne"] {
  font-family: "Noto Sans Devanagari", "Mangal", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.85;
}
html[lang="ne"] .hero-h1,
html[lang="ne"] .hero h1 { line-height: 1.5; }
html[lang="ne"] .hero-sub { line-height: 1.95; }
html[lang="ne"] .section-title,
html[lang="ne"] h2,
html[lang="ne"] h3 { line-height: 1.55; }
html[lang="ne"] .phrase-jp { line-height: 1.7; }
html[lang="ne"] .faq-q,
html[lang="ne"] .faq-a { line-height: 1.9; }

/* 韓国語・繁体中文・ベトナム語: 重い文字には突出したリネームの応用 */
html[lang="ko"] {
  font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans JP", sans-serif;
}
html[lang="zh-Hans"], html[lang="zh"] {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans JP", sans-serif;
}
html[lang="vi"] {
  font-family: "Noto Sans", "Be Vietnam Pro", "Noto Sans JP", sans-serif;
  line-height: 1.75;
}
html[lang="vi"] .hero-h1 { line-height: 1.4; }

/* インドネシア語 / ポルトガル語: ラテン文字中心 */
html[lang="id"],
html[lang="pt"],
html[lang="en"] {
  font-family: "Inter", "Noto Sans", "Helvetica Neue", "Arial", "Noto Sans JP", sans-serif;
}

/* フォールバック時: システムフォントに任せつつ、向け文字を正しくレンダリング */
@supports (text-wrap: balance) {
  .hero-h1, .section-title, h2 { text-wrap: balance; }
}

/* テーブル overflow 対策：長い語は横スクロールで見れるように */
.politeness-wrap, .scrollable-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* デーバナーガリー/ビルマ文字の警告バッジが潰れないように min-height 確保 */
.badge, .ng-badge, .keigo-badge { min-height: 22px; display: inline-flex; align-items: center; }

/* 長いタイトルに対応：中央寄せタイトルは完全ブレイクタイミング */
.hero-h1, .hero h1 { hyphens: auto; -webkit-hyphens: auto; }