@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

/* 10分英会話ナビ — 2026 editorial edition
   One coherent visual system. No gradients, decorative emoji or template cards. */
:root {
  color-scheme: light;
  --paper: #f8f7f3;
  --white: #fffefa;
  --ink: #252a27;
  --soft-ink: #4d5751;
  --quiet: #6a716a;
  --line: #deded6;
  --line-dark: #b5bbb1;
  --accent: #375f4d;
  --accent-deep: #274b3a;
  --wash: #efefe9;
  --serif: 'Noto Serif JP', Georgia, serif;
  --sans: 'Noto Sans JP', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font: 400 16px/1.85 var(--sans); overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-deep); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #597d63; outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: pretty; }
h1, h2 { font-family: var(--serif); }
.container { width: min(100% - 48px, 1120px); margin-inline: auto; }
.skip-link {
  position: fixed; top: -100px; left: 16px; padding: 10px 18px;
  z-index: 100; background: var(--white); border: 1px solid var(--accent);
}
.skip-link:focus { top: 10px; }
header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(248,247,243,.98);
  border-bottom: 1px solid var(--ink);
}
header nav {
  width: min(100% - 48px, 1120px); margin: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; min-height: 90px;
}
.brand {
  display: flex; flex-direction: column; gap: 1px; min-width: max-content;
  color: var(--ink); text-decoration: none;
}
.brand strong {
  font-family: var(--serif); font-size: 1.16rem; font-weight: 700;
  letter-spacing: .02em; line-height: 1.45;
}
.brand span { font-size: .65rem; letter-spacing: .11em; color: var(--quiet); }
.navlinks { display: flex; align-items: center; gap: 29px; }
.navlinks a {
  flex: 0 0 auto; color: var(--ink); font-size: .78rem;
  font-weight: 600; text-decoration: none; padding: 12px 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.navlinks a:hover, .navlinks a[aria-current='page'] { border-color: var(--accent); }
.notice {
  border-bottom: 1px solid var(--line); text-align: center;
  color: var(--quiet); font-size: .7rem; letter-spacing: .005em;
  padding: 7px 24px; background: var(--white);
}
main { min-height: 60vh; }
.section-label, .kicker {
  color: var(--accent); font-size: .76rem;
  font-weight: 700; letter-spacing: .12em; line-height: 1.6;
}
.heading {
  font: 600 clamp(1.55rem,3vw,2.22rem)/1.58 var(--serif);
  letter-spacing: -.015em; margin: 13px 0 17px;
}
.subheading { max-width: 680px; color: var(--soft-ink); font-size: .96rem; }
.section { padding: 94px 0; }
.section-heading { margin-bottom: 35px; }
.section-heading .section-label { margin: 0; }
.section-heading .subheading { margin: 0; }

/* A composed editorial front page, not a hero widget. */
.hero { background: var(--white); border-bottom: 1px solid var(--ink); }
.hero-layout {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px,.7fr);
  gap: clamp(42px,8vw,100px); padding-block: 115px 105px;
}
.hero-copy { align-self: center; }
.hero-copy .section-label { margin: 0 0 28px; }
.hero h1 {
  font: 600 clamp(2.45rem,4.55vw,4.55rem)/1.49 var(--serif);
  letter-spacing: -.035em; margin: 0 0 30px;
}
.hero-lead {
  max-width: 610px; color: var(--soft-ink);
  font-size: 1.04rem; line-height: 2.04; margin-bottom: 28px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.btn {
  display: inline-flex; gap: 18px; align-items: center; justify-content: center;
  min-height: 49px; background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: 2px;
  padding: 10px 20px; font-size: .85rem; font-weight: 600;
  text-decoration: none; text-align: center; transition: background .16s;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: white; }
.btn.outline { color: var(--accent); background: transparent; }
.btn.dark { color: white; background: var(--accent-deep); }
.text-link, .arrow-link {
  font-weight: 600; font-size: .88rem; color: var(--accent-deep);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.text-link span, .arrow-link span { margin-left: 8px; }
.text-link:hover, .arrow-link:hover { color: var(--ink); }
.hero-aside {
  border-left: 1px solid var(--line-dark);
  padding: 5px 0 0 clamp(30px,4vw,57px); align-self: stretch;
}
.aside-heading {
  border-bottom: 1px solid var(--ink); padding-bottom: 15px; margin-bottom: 14px;
  font-size: .78rem; font-weight: 700;
}
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 33px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.step-no, .service-index, .story-number { font-family: Georgia, serif; color: var(--accent); font-size: .9rem; line-height: 1.8; }
.steps strong { display: block; font-size: .9rem; margin-bottom: 3px; }
.steps p { font-size: .79rem; line-height: 1.85; color: var(--soft-ink); margin: 0; }
.aside-foot { margin-top: 25px; font-size: .73rem; color: var(--quiet); line-height: 1.8; }

/* Service comparison as an edited index with deliberate typographic rhythm. */
.service-section { background: var(--paper); }
.service-list { border-top: 1px solid var(--ink); }
.service-row {
  display: grid; grid-template-columns: 70px minmax(0,1fr) 202px;
  align-items: start; gap: 32px; border-bottom: 1px solid var(--line);
  padding: 35px 0 39px;
}
.service-index { font-size: 1.4rem; line-height: 1.6; }
.service-type { color: var(--accent); font-size: .75rem; letter-spacing: .05em; margin: 0 0 6px; font-weight: 700; }
.service-body h3 { font: 600 clamp(1.4rem,2.2vw,1.85rem)/1.5 var(--serif); margin: 3px 0 13px; }
.service-body h3 a { color: var(--ink); text-decoration: none; }
.service-body h3 a:hover { color: var(--accent); text-decoration: underline; }
.service-body p:not(.service-type) { max-width: 590px; margin-bottom: 16px; font-size: .9rem; color: var(--soft-ink); }
.service-side { border-left: 1px solid var(--line); padding-left: 24px; margin-top: 18px; }
.service-side span { display: block; color: var(--quiet); font-size: .72rem; margin-bottom: 9px; }
.service-side strong { font-size: .85rem; line-height: 1.9; font-weight: 600; }
.section-end { text-align: right; margin: 26px 0 0; }

/* A small, clear tool. Interactive affordance is kept functional. */
.quiz-section { background: var(--wash); border-block: 1px solid var(--line); }
.quiz-layout { display: grid; grid-template-columns: minmax(230px,.74fr) minmax(0,1.15fr); gap: clamp(34px,7vw,96px); }
.quiz-intro { padding-top: 28px; }
.quiz-intro > p:not(.section-label) { color: var(--soft-ink); max-width: 350px; font-size: .92rem; }
.quiz-privacy { border-top: 1px solid var(--line-dark); padding-top: 17px; margin-top: 36px; font-size: .75rem!important; }
.quiz {
  background: var(--white); border: 1px solid var(--line-dark);
  padding: clamp(24px,4vw,45px); box-shadow: none;
}
.question { padding-bottom: 26px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.question h3 { font-family: var(--sans); font-size: .95rem; font-weight: 700; margin: 0 0 15px; line-height: 1.7; }
.question h3 span { font-family: Georgia,serif; color: var(--accent); margin-right: 16px; font-weight: 400; }
.choices { display: flex; flex-wrap: wrap; gap: 9px; }
.choices button {
  color: var(--ink); background: var(--white); border: 1px solid var(--line-dark);
  border-radius: 2px; font-size: .81rem; min-height: 44px; padding: 9px 14px;
  text-align: left; line-height: 1.55;
}
.choices button:hover { background: var(--paper); border-color: var(--accent); }
.choices button.selected { background: #e9eee8; border-color: var(--accent); color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent); }
.quiz .btn { width: 100%; justify-content: space-between; margin-top: 2px; }
.link-note { font-size: .73rem; color: var(--quiet); line-height: 1.8; }
.quiz .link-note { margin: 15px 0 0; }
.result { display: none; background: #f0f3ed; border-left: 3px solid var(--accent); margin: 22px 0 0; padding: 20px; font-size: .88rem; }
.result.visible { display: block; }
.result h3 { font: 700 1.03rem/1.8 var(--sans); margin-bottom: 7px; }
.result p { margin: 5px 0; }

/* Reading links: stacked stories rather than generic cards. */
.reading-section { background: var(--white); }
.story-list { border-top: 1px solid var(--ink); }
.story-list a {
  display: grid; grid-template-columns: 68px minmax(0,1fr) 30px; gap: 22px;
  color: var(--ink); text-decoration: none; padding: 24px 0;
  border-bottom: 1px solid var(--line); align-items: center;
}
.story-list a:hover .story-copy strong { color: var(--accent); text-decoration: underline; }
.story-copy strong { display: block; font: 600 clamp(1.02rem,2vw,1.3rem)/1.65 var(--serif); }
.story-copy small { display: block; font-size: .79rem; color: var(--quiet); margin-top: 5px; }
.story-arrow { color: var(--accent); font-size: 1.2rem; text-align: right; }

/* Article pages. Quiet headlines; clear, generous prose. */
.article-header { background: var(--white); border-bottom: 1px solid var(--line); padding: 43px 0 56px; }
.breadcrumb { font-size: .73rem; color: var(--quiet); margin-bottom: 46px; line-height: 1.7; }
.breadcrumb a { color: var(--soft-ink); }
.breadcrumb span { margin-left: 8px; }
.article-header .kicker { margin-bottom: 13px; }
.article-header h1 { font: 600 clamp(1.9rem,3.3vw,3rem)/1.58 var(--serif); margin: 0 0 19px; letter-spacing: -.018em; max-width: 920px; }
.article-header .subheading { margin: 18px 0 0; font-size: 1rem; line-height: 1.9; }
.meta { font-size: .76rem; color: var(--quiet); }
.article { max-width: 860px; padding: 0 24px; margin: 53px auto 100px; font-size: .93rem; line-height: 2; }
.article > p, .article > ul, .article > ol { max-width: 710px; }
.article p { margin: 0 0 1.35em; }
.article h2 {
  border-bottom: 1px solid var(--line-dark); font: 600 1.56rem/1.65 var(--serif);
  margin: 2.6em 0 .95em; padding: 0 0 13px; scroll-margin-top: 115px;
}
.article h3 { font: 700 1rem/1.7 var(--sans); margin: 2em 0 .7em; }
.article ol, .article ul { padding-left: 25px; }
.article li { margin: .55em 0; }
.article .callout {
  border: 1px solid var(--line-dark); border-left: 3px solid var(--accent);
  padding: 22px 25px; margin: 32px 0; background: var(--white);
}
.article .callout p { margin: 7px 0 0; }
.article a { font-weight: 600; }
.inpage-nav { display: flex; gap: 22px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 19px; margin: 0 0 35px; }
.inpage-nav a { font-size: .82rem; text-decoration: none; border-bottom: 1px solid var(--accent); }
.comparison-intro h2 { margin-top: 1.35em; }
.comparison-intro p { color: var(--quiet); font-size: .83rem; }
.comparison-wrap {
  overflow-x: auto; border: 1px solid var(--line-dark); background: var(--white);
  margin: 20px 0 27px; overscroll-behavior-x: contain;
}
.comparison { border-collapse: collapse; min-width: 785px; width: 100%; font-size: .81rem; line-height: 1.8; }
.comparison caption { text-align: left; font-size: .73rem; color: var(--quiet); padding: 13px 16px; caption-side: top; }
.comparison th, .comparison td { text-align: left; vertical-align: top; padding: 14px 15px; border-top: 1px solid var(--line); }
.comparison thead th { background: #e8e9e3; color: var(--ink); font-weight: 700; border-top: 1px solid var(--line-dark); }
.comparison tbody th { font-weight: 700; min-width: 136px; color: var(--ink); background: var(--white); }
.comparison tbody tr:nth-child(even) td, .comparison tbody tr:nth-child(even) th { background: #f4f4ef; }
.comparison tbody td { min-width: 135px; }
.hint { padding: 17px 20px; background: #f2f1e9; border-left: 2px solid #9a8760; color: #524e42; font-size: .8rem; line-height: 1.9; }
.cta-grid { display: block; border-top: 1px solid var(--line-dark); margin: 20px 0 45px; }
.article-cta {
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1.5fr) 220px;
  gap: 20px; align-items: center; padding: 23px 0;
  border-bottom: 1px solid var(--line); background: transparent; color: var(--ink);
  margin: 0;
}
.article-cta strong { font-size: .94rem; font-weight: 700; line-height: 1.7; }
.article-cta p { font-size: .78rem; color: var(--quiet); line-height: 1.75; margin: 0; }
.article-cta .btn { font-size: .76rem; min-height: 46px; width: 100%; padding: 10px 12px; line-height: 1.6; }
.article-cta .link-note { grid-column: 3; text-align: center; margin-top: -13px; font-size: .67rem; }
.article > .article-cta {
  grid-template-columns: 1fr; gap: 12px;
  border: 1px solid var(--line-dark); border-left: 3px solid var(--accent);
  padding: 24px 28px; max-width: 730px; margin: 32px 0;
}
.article > .article-cta .btn { width: max-content; max-width: 100%; padding: 11px 20px; }
.article > .article-cta .link-note { grid-column: auto; text-align: left; margin-top: 0; }
.source-list { font-size: .8rem; color: var(--soft-ink); padding-left: 22px; }
.source-list li { overflow-wrap: anywhere; }

/* Seven-day practice — functional, sober checklist. */
.practice { padding: 27px 30px; border: 1px solid var(--line-dark); background: var(--white); }
.practice h2 { margin: 5px 0 20px; font-size: 1.42rem; }
.practice ol { padding-left: 25px; }
.check-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 14px 0; }
.check-grid button {
  min-height: 64px; background: var(--paper); color: var(--ink); border: 1px solid var(--line-dark);
  padding: 11px 8px; text-align: center; border-radius: 2px; font-size: .84rem;
}
.check-grid button small { display: block; font-size: .65rem; font-weight: 400; margin-top: 2px; }
.check-grid button.done { color: white; border-color: var(--accent); background: var(--accent); }
.progress { font-size: .8rem; color: var(--soft-ink); }

/* Site footer */
footer { background: #272c28; color: #f4f3ed; padding: 54px 0 25px; }
footer .frow { display: flex; justify-content: space-between; gap: 40px; align-items: start; }
.footer-about strong { font: 600 1.17rem/1.5 var(--serif); }
.footer-about p { font-size: .79rem; color: #c6cdc4; margin: 12px 0; }
.footer-about small { font-size: .73rem; color: #c6cdc4; }
footer .flinks { display: grid; grid-template-columns: repeat(2,max-content); gap: 9px 28px; }
footer a { color: #e3e7dc; font-size: .78rem; }
.footer-bottom {
  border-top: 1px solid #49504a; margin-top: 45px; padding-top: 18px;
  display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap;
  color: #bfc6bc; font-size: .69rem;
}
@media (max-width: 990px) {
  .hero-layout { grid-template-columns: 1.25fr .75fr; gap: 30px; }
  .hero h1 { font-size: clamp(2.4rem,4.6vw,3.4rem); }
  .service-row { grid-template-columns: 52px minmax(0,1fr) 155px; gap: 20px; }
  .quiz-layout { gap: 35px; }
  .article-cta { grid-template-columns: 1fr 1.25fr; }
  .article-cta .btn { grid-column: 2; }
  .article-cta .link-note { grid-column: 2; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 116px; }
  .container { width: min(100% - 34px, 1120px); }
  header nav { width: 100%; padding: 14px 17px 8px; min-height: auto; gap: 10px; flex-direction: column; align-items: flex-start; }
  .brand strong { font-size: 1.05rem; }
  .brand span { font-size: .6rem; }
  .navlinks { width: 100%; gap: 22px; overflow-x: auto; scrollbar-width: thin; }
  .navlinks a { font-size: .75rem; padding: 9px 0; }
  .notice { font-size: .64rem; padding: 6px 16px; }
  .section { padding: 67px 0; }
  .hero-layout { display: block; padding-block: 70px 66px; }
  .hero h1 { font-size: clamp(2.1rem,7.7vw,3.1rem); line-height: 1.55; }
  .hero-lead { font-size: .94rem; line-height: 1.95; }
  .hero-aside { border-left: 0; padding: 0; border-top: 1px solid var(--line-dark); margin-top: 58px; }
  .aside-heading { margin-top: 25px; }
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
  .steps li { grid-template-columns: 1fr; gap: 5px; padding: 13px 0; }
  .steps p { font-size: .72rem; }
  .step-no { font-size: .86rem; }
  .hero-aside .aside-foot { margin-top: 14px; }
  .service-row { grid-template-columns: 38px minmax(0,1fr); padding: 27px 0; gap: 15px; }
  .service-index { font-size: 1.12rem; }
  .service-side { grid-column: 2; margin: -9px 0 0; padding: 0; border: 0; }
  .service-side span { display: inline; margin-right: 10px; }
  .service-side strong { display: inline; }
  .service-side strong br { display: none; }
  .quiz-layout { display: block; }
  .quiz-intro { padding-top: 0; margin-bottom: 28px; }
  .quiz-privacy { margin-top: 15px; padding-top: 10px; }
  .quiz { padding: 23px; }
  .article-header { padding: 28px 0 39px; }
  .breadcrumb { margin-bottom: 30px; }
  .article-header h1 { font-size: clamp(1.75rem,5vw,2.35rem); }
  .article { padding: 0 19px; margin: 38px auto 72px; font-size: .9rem; }
  .article h2 { font-size: 1.34rem; }
  .comparison { min-width: 730px; }
  .article-cta { grid-template-columns: 1fr; gap: 7px; padding: 20px 0; }
  .article-cta .btn,.article-cta .link-note { grid-column: auto; }
  .article-cta .btn { width: max-content; max-width: 100%; }
  .article-cta .link-note { text-align: left; margin-top: 0; }
  .article > .article-cta { padding: 20px; }
  footer .frow { flex-direction: column; gap: 28px; }
  footer .flinks { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 21px; }
  .footer-bottom { margin-top: 30px; }
}
@media (max-width: 440px) {
  .hero-layout { padding-block: 57px 50px; }
  .hero h1 { font-size: 2.03rem; }
  .hero-actions { display: grid; gap: 17px; justify-items: start; }
  .hero-actions .btn { width: 100%; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { grid-template-columns: 34px 1fr; }
  .section { padding: 56px 0; }
  .heading { font-size: 1.51rem; }
  .story-list a { grid-template-columns: 28px minmax(0,1fr) 22px; gap: 12px; }
  .story-copy strong { font-size: .98rem; }
  .story-copy small { font-size: .71rem; }
  .choices button { width: 100%; }
  .check-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .practice { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}