:root{
  --goi:#7c3aed;
  --goi-dark:#5b21b6;
  --goi-soft:#f5f0ff;
  --goi-line:#ddd0ff;
  --ink:#17131f;
  --muted:#6d6678;
  --line:#e8e3ee;
  --paper:#fff;
  --bg:#f8f6fb;
  --shadow:0 12px 32px rgba(52,33,84,.09);
}

*{box-sizing:border-box}
html{max-width:100%;overflow-x:hidden}
body{
  margin:0;
  max-width:100%;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.goi-shell{
  width:min(920px,calc(100% - 24px));
  min-width:0;
  margin:0 auto;
  padding:12px 0 max(42px,env(safe-area-inset-bottom));
}

.top-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  margin-bottom:10px;
}
.top-nav a,.top-nav span,.top-nav button{
  display:inline-flex;
  min-width:0;
  min-height:38px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:8px 13px;
  color:#51495c;
  font:inherit;
  font-size:13px;
  font-weight:900;
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  overflow-wrap:anywhere;
  box-shadow:0 3px 12px rgba(0,0,0,.04);
}
.top-nav .print-button,.top-nav button{
  border-color:var(--goi);
  background:var(--goi);
  color:#fff;
}

.hero-card{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:20px;
  border:1px solid var(--goi-line);
  border-radius:26px;
  background:radial-gradient(circle at 100% 0,rgba(124,58,237,.12),transparent 34%),linear-gradient(135deg,#fff,#faf7ff);
  box-shadow:var(--shadow);
}
.hero-card>div:first-child{min-width:0}
.mission-label,.set-label{
  margin:0 0 5px;
  color:var(--goi-dark);
  font-size:11px;
  font-weight:1000;
  letter-spacing:.13em;
}
.hero-card h1{
  margin:0;
  font-size:clamp(27px,7vw,44px);
  line-height:1.12;
  letter-spacing:-.05em;
  overflow-wrap:anywhere;
}
.hero-card p:last-child{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
  font-weight:800;
  line-height:1.65;
}
.hero-count{
  display:grid;
  width:76px;
  height:76px;
  flex:0 0 auto;
  place-items:center;
  border-radius:24px;
  background:var(--goi);
  color:#fff;
  box-shadow:0 12px 24px rgba(124,58,237,.2);
}
.hero-count b{display:block;font-size:30px;line-height:1;text-align:center}
.hero-count span{display:block;font-size:11px;font-weight:900;text-align:center}

.category-section,.round-section{
  margin-top:14px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  box-shadow:var(--shadow);
}
.section-heading{margin-bottom:13px}
.section-heading h2{margin:0;font-size:22px;letter-spacing:-.03em}
.course-grid{display:grid;grid-template-columns:1fr;gap:10px}
.course-card{
  position:relative;
  display:grid;
  min-width:0;
  min-height:168px;
  grid-template-columns:64px minmax(0,1fr) 32px;
  align-items:center;
  gap:15px;
  padding:20px;
  border:1px solid var(--goi-line);
  border-radius:22px;
  background:linear-gradient(135deg,#fff,#faf7ff);
  text-decoration:none;
  box-shadow:0 5px 16px rgba(52,33,84,.06);
}
.course-icon{display:grid;width:60px;height:60px;place-items:center;border-radius:20px;background:var(--goi-soft);font-size:29px}
.course-copy{min-width:0}
.course-kicker{margin:0 0 3px;color:var(--goi-dark);font-size:11px;font-weight:1000;letter-spacing:.08em}
.course-copy h3{margin:0;font-size:25px;letter-spacing:-.04em;overflow-wrap:anywhere}
.course-copy>p:last-of-type{margin:6px 0 9px;color:var(--muted);font-size:13px;font-weight:800;line-height:1.6}
.course-copy ul{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.course-copy li{border-radius:999px;background:var(--goi-soft);padding:5px 9px;color:var(--goi-dark);font-size:10px;font-weight:900}
.course-arrow,.round-arrow{color:var(--goi);font-size:36px;font-weight:500;line-height:1;text-align:right}
.course-hero{margin-bottom:0}
.round-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.round-card{
  position:relative;
  display:block;
  min-width:0;
  min-height:128px;
  padding:16px 42px 14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  text-decoration:none;
  box-shadow:0 4px 13px rgba(0,0,0,.04);
}
.round-number{color:var(--goi-dark);font-size:20px;font-weight:1000;letter-spacing:-.02em}
.round-meta{margin-top:2px;color:#7a7284;font-size:11px;font-weight:900}
.round-card p{margin:10px 0 0;color:#302a38;font-size:12px;font-weight:850;line-height:1.55;overflow-wrap:anywhere}
.round-card p span{color:#746d7c}
.round-arrow{position:absolute;right:13px;top:50%;transform:translateY(-50%)}

.lesson-head{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:15px 0 10px;
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.045);
}
.lesson-head>div:first-child{min-width:0}
.lesson-head h1{margin:0;font-size:24px;letter-spacing:-.03em;overflow-wrap:anywhere}
.lesson-head h1 small{color:var(--muted);font-size:13px;font-weight:900}
.lesson-head p:last-child{margin:5px 0 0;color:var(--muted);font-size:13px;font-weight:850}
.lesson-actions{display:flex;flex:0 0 auto;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.action-button{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  appearance:none;
  border:0;
  border-radius:15px;
  padding:10px 14px;
  font:inherit;
  font-size:13px;
  font-weight:1000;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.action-button.primary{background:var(--goi);color:#fff;box-shadow:0 8px 18px rgba(124,58,237,.18)}
.action-button.app-test-button{min-width:150px}
.action-button.secondary{border:1px solid var(--goi-line);background:var(--goi-soft);color:var(--goi-dark)}

.study-list{display:grid;gap:10px}
.study-card{
  position:relative;
  display:grid;
  min-width:0;
  grid-template-columns:38px minmax(0,1fr) 32px;
  gap:10px;
  padding:15px 14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.study-content{min-width:0}
.study-number{display:grid;width:34px;height:34px;place-items:center;border-radius:12px;background:var(--goi-soft);color:var(--goi-dark);font-size:14px;font-weight:1000}
.study-check{color:#a6a0ad;font-size:24px;text-align:right}
.ruby-expression{
  min-width:0;
  max-width:100%;
  margin:0;
  font-size:clamp(20px,4.5vw,27px);
  font-weight:1000;
  line-height:1.75;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  word-break:normal;
}
ruby{ruby-position:over;white-space:normal}
.ruby-expression rt{color:#5e5668;font-size:.46em;font-weight:800}
.variant-note{margin:-1px 0 5px;color:#766e80;font-size:11px;font-weight:800}
.meaning-text{margin:4px 0 0;color:#302a38;font-size:14px;font-weight:850;line-height:1.75;overflow-wrap:anywhere}
.story-box{min-width:0;margin-top:10px;padding:10px 11px;border:1px solid #eadffd;border-radius:14px;background:#fbf9ff}
.story-box strong{color:var(--goi-dark);font-size:11px;letter-spacing:.08em}
.story-box p{margin:4px 0 0;color:#544c5f;font-size:12px;font-weight:750;line-height:1.75;overflow-wrap:anywhere}
.bottom-nav{display:flex;justify-content:space-between;gap:8px;margin-top:14px}
.bottom-nav a{min-width:0;border:1px solid var(--goi-line);border-radius:999px;background:#fff;padding:10px 14px;color:var(--goi-dark);font-size:13px;font-weight:1000;text-align:center;text-decoration:none;overflow-wrap:anywhere}

.test-shell{width:min(900px,calc(100% - 24px))}
.test-sheet,.answer-sheet{
  min-width:0;
  margin:0 0 14px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow);
}
.test-title{display:flex;min-width:0;align-items:flex-end;justify-content:space-between;gap:15px;padding-bottom:10px;border-bottom:2px solid #28232e}
.test-title>div{min-width:0}
.test-title p{margin:0 0 3px;color:#655d70;font-size:11px;font-weight:900}
.test-title h1{margin:0;font-size:23px;letter-spacing:-.025em;overflow-wrap:anywhere}
.test-title span{display:block;color:#655d70;font-size:12px;font-weight:900;line-height:1.5;overflow-wrap:anywhere}
.test-question-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.test-question{min-width:0;padding:10px 11px;border:1px solid #dcd6e2;border-radius:13px;background:#fff}
.question-head{display:flex;align-items:center;gap:8px}
.question-head b{display:grid;width:26px;height:26px;flex:0 0 auto;place-items:center;border-radius:8px;background:var(--goi);color:#fff;font-size:13px}
.question-head span{min-width:0;color:#6e6678;font-size:11px;font-weight:800;overflow-wrap:anywhere}
.cloze-expression{
  min-width:0;
  max-width:100%;
  margin:7px 0 5px;
  padding-left:1px;
  font-size:18px;
  font-weight:1000;
  line-height:1.9;
  overflow-wrap:anywhere;
  word-break:normal;
}
.cloze-expression rt{color:#5e5668;font-size:.43em;font-weight:800}
.cloze-blank{
  position:relative;
  display:inline-flex;
  width:min(var(--blank-width),55vw);
  max-width:100%;
  height:1.45em;
  align-items:flex-end;
  justify-content:center;
  margin:0 .12em;
  border-bottom:1.8px solid #222;
  vertical-align:-.12em;
}
.cloze-blank small{position:absolute;left:2px;bottom:1px;color:#777;font-size:9px}
.meaning-choices{display:grid;grid-template-columns:1fr;gap:5px;margin:7px 0 0;padding:0;list-style:none}
.meaning-choices li{display:grid;min-width:0;grid-template-columns:1.4em minmax(0,1fr);gap:5px;font-size:12px;font-weight:750;line-height:1.5}
.meaning-choices li>span:first-child{color:var(--goi-dark);font-weight:1000}
.choice-text{min-width:0;overflow-wrap:anywhere}

.answer-details{padding:0;overflow:hidden}
.answer-details>summary{cursor:pointer;padding:15px 18px;color:var(--goi-dark);font-size:15px;font-weight:1000;list-style-position:inside}
.answer-details[open]>summary{border-bottom:1px solid var(--line)}
.answer-details .test-title,.answer-details .answer-grid,.answer-details .grading-note{margin-left:18px;margin-right:18px}
.answer-details .test-title{margin-top:16px}
.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px}
.answer-item{display:grid;min-width:0;grid-template-columns:28px minmax(0,1fr) 62px;gap:7px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:11px}
.answer-item>b{display:grid;width:26px;height:26px;place-items:center;border-radius:8px;background:var(--goi-soft);color:var(--goi-dark)}
.answer-item div{display:flex;min-width:0;gap:6px;align-items:baseline;font-size:11px}
.answer-item div span{flex:0 0 auto;color:#71697a;font-weight:800}
.answer-item div strong{min-width:0;font-size:12px;overflow-wrap:anywhere}
.grading-note{margin-top:12px!important;margin-bottom:18px!important;padding:10px;border-radius:12px;background:var(--goi-soft);color:var(--goi-dark);font-size:11px;font-weight:850;line-height:1.6}

@media (hover:hover){
  .course-card:hover,.round-card:hover{transform:translateY(-2px);border-color:#bca5f2;box-shadow:0 10px 24px rgba(84,46,139,.1)}
}

@media(max-width:700px){
  .goi-shell,.test-shell{width:calc(100% - 16px);padding-top:8px}
  .top-nav{align-items:stretch}
  .top-nav a,.top-nav span{padding:8px 10px;font-size:12px}
  .hero-card{align-items:flex-start;padding:16px;border-radius:20px}
  .hero-count{width:60px;height:60px;border-radius:19px}
  .hero-count b{font-size:25px}
  .category-section,.round-section{padding:14px;border-radius:20px}
  .course-card{min-height:0;grid-template-columns:50px minmax(0,1fr) 22px;gap:11px;padding:16px}
  .course-icon{width:48px;height:48px;border-radius:16px;font-size:23px}
  .course-copy h3{font-size:21px}
  .round-grid{grid-template-columns:1fr}
  .round-card{min-height:110px}
  .lesson-head{align-items:stretch;flex-direction:column;padding:14px}
  .lesson-head h1{font-size:22px}
  .lesson-actions{display:grid;width:100%;grid-template-columns:1fr 1fr}
  .lesson-actions .app-test-button{grid-column:1 / -1}
  .action-button{width:100%;padding:10px 8px;font-size:12px}
  .study-card{grid-template-columns:34px minmax(0,1fr);gap:8px;padding:13px 12px;border-radius:17px}
  .study-check{display:none}
  .ruby-expression{font-size:clamp(19px,6vw,24px)}
  .meaning-text{font-size:13px;line-height:1.7}
  .story-box{padding:9px}
  .test-sheet,.answer-sheet{padding:13px;border-radius:17px}
  .test-title{align-items:flex-start}
  .test-title h1{font-size:20px}
  .test-question-list{grid-template-columns:1fr}
  .test-question{padding:11px 10px}
  .cloze-expression{font-size:18px;line-height:1.85}
  .meaning-choices li{font-size:12px}
  .answer-grid{grid-template-columns:1fr}
}

@media(max-width:380px){
  .lesson-actions{grid-template-columns:1fr}
  .lesson-actions .app-test-button{grid-column:auto}
  .top-nav{flex-wrap:wrap}
  .top-nav a,.top-nav span{flex:1 1 auto}
  .hero-card{gap:9px}
  .hero-card h1{font-size:25px}
  .hero-count{width:54px;height:54px}
  .study-card{grid-template-columns:30px minmax(0,1fr);padding:12px 10px}
  .study-number{width:30px;height:30px}
  .ruby-expression{font-size:19px}
  .test-sheet{padding:10px}
  .answer-item{grid-template-columns:26px minmax(0,1fr) 52px;gap:5px;padding:7px}
}

/* 印刷は端末差のない固定PDFに統一。ブラウザの印刷機能では教材本体を出さない。 */
@media print{
  .lesson-page .goi-shell,.test-page .goi-shell{display:none!important}
  .lesson-page::before,.test-page::before{
    display:block;
    margin:20mm;
    padding:12mm;
    border:1px solid #000;
    color:#000;
    background:#fff;
    font-family:"Yu Gothic","Hiragino Sans",sans-serif;
    font-size:14pt;
    line-height:1.7;
    content:"このページは、画面上部の『PDFを開く』ボタンからPDFを開いて印刷してください。スマートフォンでも同じA4レイアウトで印刷できます。";
  }
}