@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

    :root{
      --bg:#f7f9ff;
      --card:#ffffff;
      --ink:#0f172a;
      --muted:#475569;
      --line:#e2e8f0;

      --brand:#2563eb;
      --brand2:#7c3aed;
      --accent:#16a34a;
      --danger:#dc2626;

      --shadow: 0 14px 28px rgba(15,23,42,.10);
      --shadow2: 0 18px 40px rgba(15,23,42,.12);
      --radius: 18px;
      --max: 1120px;
    }

    *{ 
        font-family: "Noto Sans JP", sans-serif;
        box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Arial, sans-serif;
      color:var(--ink);
      background:
        radial-gradient(1200px 600px at 10% 0%, rgba(37,99,235,.10), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, rgba(124,58,237,.10), transparent 55%),
        radial-gradient(900px 600px at 50% 100%, rgba(22,163,74,.06), transparent 55%),
        linear-gradient(180deg, var(--bg), #fff);
      line-height:1.75;
    }
    a{ color:inherit; }
    .wrap{ max-width:var(--max); margin:0 auto; padding:0 18px; }
    section{ padding: 34px 0; }
    .anchor{ scroll-margin-top: 88px; }

    /* Topbar */
    .topbar{
      position: sticky;
      top:0;
      z-index: 50;
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--line);
    }
    .topbar .inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 12px 0;
      flex-wrap:wrap;
    }
    .logo{
      display:flex;
      gap:10px;
      align-items:center;
      text-decoration:none;
      font-weight: 900;
      letter-spacing:.02em;
    }
    .mark{
      width:34px; height:34px; border-radius:10px;
      background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(124,58,237,.98));
      box-shadow: 0 10px 20px rgba(37,99,235,.18);
      flex: 0 0 auto;
    }
    .nav{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      color: var(--muted);
      font-weight: 800;
      font-size: 14px;
    }
    .nav a{
      text-decoration:none;
      padding:8px 10px;
      border-radius: 12px;
    }
    .nav a:hover{ background: rgba(15,23,42,.04); color: var(--ink); }

    /* Cards */
    .card{
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .pad{ padding: 18px; }

    /* Buttons (3D) */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55em;
      padding: 14px 16px;
      border-radius: 14px;
      font-weight: 1000;
      text-decoration:none;

      border: 1px solid rgba(15,23,42,.10);
      background: #fff;
      color: var(--ink);

      box-shadow:
        0 14px 22px rgba(15,23,42,.12),
        0 2px 0 rgba(255,255,255,.65) inset;
      border-bottom: 4px solid rgba(15,23,42,.18);

      transform: translateY(0);
      transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
      cursor:pointer;
      white-space: nowrap;
    }
    .btn:hover{
      transform: translateY(-2px);
      box-shadow:
        0 18px 26px rgba(15,23,42,.16),
        0 2px 0 rgba(255,255,255,.75) inset;
      filter: brightness(1.01);
    }
    .btn:active{
      transform: translateY(2px);
      box-shadow:
        0 10px 16px rgba(15,23,42,.12),
        0 1px 0 rgba(255,255,255,.55) inset;
      border-bottom-width: 2px;
    }
    .btn:focus-visible{
      outline: 3px solid rgba(37,99,235,.32);
      outline-offset: 3px;
    }
    .btn.primary{
      border: none;
      color:#fff;
      background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(124,58,237,.98));
      border-bottom: 4px solid rgba(17,24,39,.18);
    }
    .btn.primary:hover{ filter: brightness(1.03); }
    .btn.small{ padding: 10px 12px; border-radius: 12px; font-size: 14px; }

    /* Typography */
    h1{
      margin: 10px 0 10px;
      font-size: clamp(30px, 3.6vw, 46px);
      line-height: 1.18;
      letter-spacing: .01em;
    }
    .title{
      font-size: 24px;
      margin: 0 0 10px;
      letter-spacing:.01em;
    }
    .desc{
      margin: 0 0 14px;
      color: var(--muted);
      font-weight: 800;
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(37,99,235,.06);
      color: var(--muted);
      font-weight: 900;
      font-size: 13px;
    }

    /* Hero layout with image */
    .hero{ padding: 44px 0 18px; }
    .hero-grid{
      display:grid;
      gap: 18px;
      grid-template-columns: 1.05fr .95fr;
      align-items:stretch;
    }
    @media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

    .subcopy{
      margin: 0 0 14px;
      color: var(--muted);
      font-size: clamp(16px, 1.5vw, 24px);
      font-weight: 800;
    }
    .subcopy strong{ color: var(--ink); }

    .hero-bullets{
      margin: 14px 0 0;
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
    }
    .pill{
      border: 1px solid var(--line);
      background: #fff;
      padding: 8px 10px;
      border-radius: 999px;
      font-weight: 900;
      color: var(--muted);
      font-size: 13px;
    }
    .cta-row{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      margin-top: 18px;
    }

    /* Media blocks */
    .media{
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(15,23,42,.03);
      box-shadow: var(--shadow2);
      min-height: 340px;
      position: relative;
    }
    @media (max-width: 600px){ .media{ min-height: 240px; } }

    .media img{
      width: 100%;
      height: 100%;
      display:block;
      object-fit: cover;
    }
    .media .ph{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 18px;
      text-align:center;
      color: var(--muted);
      font-weight: 900;
    }
    .media-note{
      margin-top: 10px;
      color: var(--muted);
      font-weight: 800;
      font-size: 13px;
    }

    /* Lists */
    .check{
      list-style:none;
      margin: 0;
      padding: 0;
      display:grid;
      gap: 10px;
    }
    .check li{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      padding: 10px 12px;
      background: rgba(15,23,42,.02);
      border: 1px solid rgba(15,23,42,.06);
      border-radius: 14px;
      font-weight: 900;
    }
    .check .ico{
      width: 30px; height: 30px;
      border-radius: 10px;
      background: rgba(22,163,74,.12);
      border: 1px solid rgba(22,163,74,.20);
      display:flex;
      align-items:center;
      justify-content:center;
      color: #166534;
      flex: 0 0 auto;
      margin-top: 2px;
      font-weight: 1000;
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 900px){ .grid2{ grid-template-columns: 1fr; } }

    .fbox{
      padding: 16px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 10px 20px rgba(15,23,42,.06);
    }
    .fbox h3{
      margin: 0 0 6px;
      font-size: 16px;
      font-weight: 1000;
    }
    .fbox p{
      margin: 0;
      color: var(--muted);
      font-weight: 800;
    }

    .callout{
      padding: 14px 14px;
      border-radius: 16px;
      border: 1px solid rgba(37,99,235,.18);
      background: rgba(37,99,235,.05);
      color: var(--ink);
      font-weight: 1000;
    }
    .callout .red{ color: var(--danger); }

    .price{
      font-size: clamp(28px, 3vw, 42px);
      font-weight: 1000;
      margin: 6px 0 2px;
      letter-spacing:.01em;
    }
    .price small{
      font-size: 14px;
      color: var(--muted);
      font-weight: 900;
      margin-left: 6px;
    }
    .inc{
      margin: 0;
      color: var(--muted);
      font-weight: 900;
    }

    /* Future image cards */
    .imgcards{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    @media (max-width: 900px){ .imgcards{ grid-template-columns: 1fr; } }
    .imgcard{
      overflow:hidden;
      border-radius: 16px;
      border: 1px solid var(--line);
      background:#fff;
      box-shadow: 0 10px 20px rgba(15,23,42,.06);
      display:grid;
      grid-template-rows: 180px auto;
    }
    .imgcard .pic{
      background: rgba(15,23,42,.03);
      position: relative;
    }
    .imgcard .pic img{ width:100%; height:100%; object-fit:cover; display:block; }
    .imgcard .pic .ph{
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      text-align:center; padding: 14px;
      color: var(--muted); font-weight: 900;
    }
    .imgcard .txt{ padding: 14px; }
    .imgcard h3{ margin:0 0 6px; font-size: 16px; font-weight: 1000; }
    .imgcard p{ margin:0; color: var(--muted); font-weight: 800; }

    footer{
      padding: 26px 0 34px;
      border-top: 1px solid var(--line);
      background: rgba(255,255,255,.75);
      color: var(--muted);
      margin-top: 10px;
    }
    .foot{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 900px){ .foot{ grid-template-columns: 1fr; } }
    .fine{
      font-size: 13px;
      font-weight: 800;
    }

/* ===== Feature boxes with small illustrated icons (SVG) ===== */
.fbox-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.fbox-ico{
  width:46px;
  height:46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
}
.fbox-ico svg{
  width:24px;
  height:24px;
  color:#0f172a;
  opacity:.95;
}
/* icon color variations */
.fbox-ico.i-blue{   background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.22); }
.fbox-ico.i-purple{ background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.22); }
.fbox-ico.i-green{  background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.22); }
.fbox-ico.i-orange{ background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.22); }
.fbox-ico.i-gray{   background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.14); }
.fbox-txt h3{ margin:0 0 6px; }
.fbox-txt p{ margin:0; }

/* ===== Brain training copy + accordion (LP section) ===== */
.brain-copy{
  padding: 56px 0;
  background: linear-gradient(180deg, rgba(249,115,22,.06), rgba(255,255,255,1));
}
.brain-copy .wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}
.brain-copy h2{
  margin: 0 0 10px;
  text-align:center;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 1000;
  color: #0f172a;
}
.brain-copy .lead{
  margin: 0 auto 18px;
  max-width: 820px;
  text-align:center;
  color:#475569;
  font-weight: 850;
  line-height: 1.9;
}
.brain-copy .lead b{ color:#9a3412; }

.brain-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 22px;
}
.bcard{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow: 0 16px 32px rgba(15,23,42,.08);
  padding: 14px 14px 12px;
}
.bcard h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 1000;
  color:#0f172a;
}
.bcard p{
  margin: 0;
  color:#334155;
  font-weight: 800;
  line-height: 1.85;
}

.brain-why20{
  border-radius: 22px;
  border: 1px solid rgba(249,115,22,.20);
  background: radial-gradient(700px 260px at 20% 0%, rgba(249,115,22,.10), transparent 60%),
              radial-gradient(700px 260px at 90% 100%, rgba(239,68,68,.07), transparent 60%),
              #fff;
  box-shadow: 0 20px 44px rgba(15,23,42,.08);
  padding: 18px 16px;
}
.brain-why20 h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 1000;
  color:#0f172a;
}
.brain-why20 p{
  margin: 0 0 14px;
  color:#334155;
  font-weight: 850;
  line-height: 1.95;
}
.brain-why20 b{ color:#9a3412; }

.brain-rule{
  margin: 10px 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(249,115,22,.06);
  padding: 12px 12px 10px;
}
.rule-title{
  font-weight: 1000;
  color:#9a3412;
  margin: 0 0 6px;
}
.brain-rule ul{
  margin: 0;
  padding-left: 18px;
  line-height: 1.9;
  color:#334155;
  font-weight: 850;
}

.brain-lesson{
  border-top: 1px dashed rgba(15,23,42,.18);
  padding-top: 12px;
  margin-top: 10px;
}

.proof{
  margin-top: 18px;
}
.proof h3{
  margin: 0 0 10px;
  font-weight: 1000;
  color:#0f172a;
  text-align:center;
}
.proof details{
  margin: 12px 0;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  background:#fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  overflow:hidden;
}
.proof summary{
  cursor:pointer;
  padding: 14px 16px;
  font-weight: 1000;
  background: rgba(249,115,22,.10);
  color:#0f172a;
}
.proof summary::-webkit-details-marker{ display:none; }
.proof summary:after{
  content:"＋";
  float:right;
  font-weight: 1000;
  color:#9a3412;
}
.proof details[open] summary:after{ content:"－"; }

.proof .proof-body{
  padding: 14px 16px 16px;
  line-height: 1.95;
  color:#334155;
  font-weight: 800;
}
.proof-note{
  margin: 10px 0 0;
  font-size: 12.5px;
  color:#64748b;
  font-weight: 800;
  line-height: 1.8;
}

@media (max-width: 900px){
  .brain-cards{ grid-template-columns: 1fr; }
}
/* ===== Brain loop visual ===== */
.brain-loop{
  padding: 46px 0;
  background: linear-gradient(180deg, rgba(249,115,22,.06), rgba(255,255,255,1));
}
.brain-loop .wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}
.brain-loop h2{
  margin:0 0 10px;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 1000;
  color: #0f172a;
  text-align:center;
}
.brain-loop .lead{
  margin:0 auto 18px;
  max-width: 760px;
  text-align:center;
  color:#475569;
  font-weight: 800;
  line-height: 1.8;
}

.loop-card{
  margin: 0 auto;
  max-width: 980px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
  padding: 18px;
  /*display:grid;*/
  grid-template-columns: 1.3fr .7fr;
  gap: 18px;
  align-items:center;
}
.loop-visual{
  border-radius: 18px;
  overflow:hidden;
  background: radial-gradient(600px 240px at 20% 10%, rgba(249,115,22,.10), transparent 60%),
              radial-gradient(520px 260px at 90% 80%, rgba(239,68,68,.08), transparent 60%),
              #fff;
  border: 1px solid rgba(249,115,22,.18);
  padding: 10px;
}
.loop-visual svg{
  width:100%;
  height:auto;
  display:block;
}
.loop-points{
  margin:0;
  padding: 0 0 0 18px;
  color:#0f172a;
  font-weight: 850;
  line-height:1.9;
}
.loop-points li{
  margin: 8px 0;
  color:#334155;
}
.loop-points b{
  color:#9a3412;
}

/* responsive */
@media (max-width: 900px){
  .loop-card{ grid-template-columns: 1fr; }
  .loop-points{ padding-left: 20px; }
}

.red{
  color: var(--danger);
}

/* ===== Concierge banner (inside #why) ===== */
.concierge-banner{
  margin-top: 18px;
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(249,115,22,.25);
  background:
    radial-gradient(700px 260px at 15% 0%, rgba(249,115,22,.14), transparent 60%),
    radial-gradient(700px 260px at 90% 100%, rgba(239,68,68,.10), transparent 60%),
    #fff;
  box-shadow: 0 18px 42px rgba(15,23,42,.10);
  padding: 16px 16px 14px;
  overflow: hidden;
}

.concierge-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight:700;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(90deg, #f97316, #ef4444);
  box-shadow: 0 10px 22px rgba(239,68,68,.22);
}

.concierge-body{
  padding-top: 26px; /* badgeの分 */
}

.concierge-body h3{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 1000;
  color: #0f172a;
}

.concierge-lead{
  margin: 0 0 12px;
  color: #334155;
  font-weight: 850;
  line-height: 1.9;
}

.concierge-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cs{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  padding: 12px 12px 10px;
}

.cs-title{
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 13px;
  color: #9a3412;
  background: rgba(249,115,22,.12);
}

.cs ul{
  margin: 0;
  padding-left: 18px;
  line-height: 1.9;
  color: #334155;
  font-weight: 850;
}

/* mobile */
@media (max-width: 900px){
  .concierge-split{ grid-template-columns: 1fr; }
  .concierge-body h3{ font-size: 19px; }
}

/* ===== Pricing (3 plans) ===== */
.price-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* plan card */
.price-box{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: 0 18px 42px rgba(15,23,42,.08);
  padding: 16px 14px 14px;
  position: relative;
}

/* title */
.price-box h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 1000;
  color: #0f172a;
}

/* price */
.price-box .price{
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 1000;
  letter-spacing: .02em;
  color: #b45309; /* warm */
}
.price-box .price small{
  font-size: 13px;
  font-weight: 900;
  color: #64748b;
  margin-left: 4px;
}

/* short sub line */
.price-sub{
  margin: 0 0 10px;
  color: #475569;
  font-weight: 850;
  line-height: 1.7;
}

/* included text */
.price-box .inc{
  margin: 0;
  color: #334155;
  font-weight: 850;
  line-height: 1.9;
  font-size: 14px;
}
.price-box .inc strong{
  color: #c2410c; /* warm emphasis */
  font-weight: 1000;
}

/* highlight (standard plan) */
.price-box.highlight{
  border: 2px solid rgba(249,115,22,.45);
  background:
    radial-gradient(700px 280px at 15% 0%, rgba(249,115,22,.12), transparent 60%),
    radial-gradient(700px 280px at 90% 100%, rgba(239,68,68,.08), transparent 60%),
    #fff;
  transform: translateY(-8px);
  box-shadow: 0 22px 52px rgba(15,23,42,.12);
}

/* ribbon badge for highlight */
.price-box.highlight::before{
  content: "おすすめ";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 1000;
  color: #fff;
  background: linear-gradient(90deg, #f97316, #ef4444);
  box-shadow: 0 12px 24px rgba(239,68,68,.22);
}

/* optional: tighter look inside highlight */
.price-box.highlight .price{
  color: #c2410c;
}

/* responsive */
@media (max-width: 960px){
  .price-grid{
    grid-template-columns: 1fr;
  }
  .price-box.highlight{
    transform: none;
  }
}

/* ===== Difficulty Bar (compact, seamless) ===== */
.difficulty-wrap{
    width: min(320px, 100%);
    margin: 0;
    margin-bottom:0px;
}

.difficulty-bar{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 22px;                 /* ← 小さめ */
  border-radius: 999px;
  overflow: hidden;             /* ← 一本線に */
  background: #e5e7eb;
  box-shadow: inset 0 2px 6px rgba(15,23,42,.12);
}

/* segment 共通 */
.difficulty-bar .seg{
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: #334155;
}

/* full red */
.seg.full{
  color: #fff;
  background: linear-gradient(90deg, #ef4444, #f97316);
}

/* half (right side red) */
.seg.half-r{
  background:
    linear-gradient(90deg,
      #e5e7eb 0 50%,
      #ef4444 50% 100%);
}

/* half (left side red) */
.seg.half-l{
  background:
    linear-gradient(90deg,
      #ef4444 0 50%,
      #e5e7eb 50% 100%);
}

/* empty */
.seg.empty{
  background: #e5e7eb;
  color: #64748b;
}

/* optional: 数字を少し浮かせたい場合 */
.difficulty-bar .seg{
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* mobile 微調整 */
@media (max-width: 520px){
  .difficulty-wrap{
    width: 100%;
  }
  .difficulty-bar{
    height: 20px;
  }
}
/* ===== Difficulty Bar (seamless, compact) ===== */
.difficulty-wrap{
    width: min(320px, 100%);
    margin: 0;
    margin-bottom: 12px;
}

.difficulty-bar{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 20px;                 /* 少し小さめ */
  border-radius: 999px;
  overflow: hidden;
  background: #e5e7eb;
  box-shadow: inset 0 2px 6px rgba(15,23,42,.12);
}

.difficulty-bar .seg{
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: #475569;
}

/* 2 の後半だけ赤 */
.seg.half-r{
  background:
    linear-gradient(90deg,
      #e5e7eb 0 50%,
      #d36b6b 50% 100%);
}

/* 3 の前半だけ赤 */
.seg.half-l{
  background:
    linear-gradient(90deg,
      #d36b6b 0 50%,
      #e5e7eb 50% 100%);
}

/* それ以外はグレー */
.seg.empty{
  background: #e5e7eb;
  color: #64748b;
}

/* 数字を読みやすく */
.difficulty-bar .seg{
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.brain-fig svg{
  width: 100%;
  height: auto;
  display: block;
}

/* スマホだけ拡大して文字を読めるサイズに */
@media (max-width: 520px){
  .brain-fig{
    overflow: visible;
  }
  .brain-fig svg{
    width: 128%;
    margin-left: -14%;
  }
}