@charset "UTF-8";
/* =================================================================
   ステップ オンラインショップ 共通スタイルシート
   -----------------------------------------------------------------
   このファイル1枚で、サイト全ページの見た目が決まります。
   色を変えたいときは、下の :root の値を書き換えてください。
   （各HTMLファイルを触る必要はありません）

   【構成】
     1. カラー・フォント設定（:root）
     2. 全ページ共通（ヘッダー／フッター／SNSバー／LINEボタン）
     3. ホームページ専用     … body に class="page-home"   がある時だけ効く
     4. 商品詳細ページ専用   … body に class="page-detail" がある時だけ効く

   ※ .price や .buy のように「同じ名前でページごとに見た目が違う」ものが
     あるため、3と4はわざと分けています。混ぜると崩れます。
   ================================================================= */


/* =================================================================
   1. カラー・フォント設定 ★ここだけで全ページの色が変わります
   ================================================================= */
:root{
  --bg:#FAFAFA;                 /* ページ全体の背景（全ページ統一） */
  --header:#E7EEF6;             /* ヘッダー帯・ヒーロー背景・フッター */
  --paper:#ffffff;              /* カード・パネルの白 */

  --blue:#5079AF;               /* UIの地（ヘッダー・タグ・SNSバー） */
  --blue-deep:#456A9C;
  --ink:#44494E;                /* 大見出し（チャコール） */
  --text:#363B42;               /* 本文 */
  --sub:#7C848D;                /* 補足・キャプション */
  --line:#E3E7EC;               /* 罫線・枠線 */
  --tag-light:#C8D7EA;

  --green:#52BE5B;              /* 無料アプリ */
  --pink:#D24B6B;               /* 購入・行動（CTA）※ページで唯一の「押す色」 */
  --line-green:#06C755;         /* LINE相談のみ */
  --sakura:#E58BB0;             /* 合格実績の桜 */
  --hero-bg:#E7EEF6;            /* ヒーロー背景（ヘッダーと同色に統一済み） */

  /* 4色レインボー帯（ステップの署名） */
  --rb1:#4A78C0; --rb2:#E6D34F; --rb3:#52BE5B; --rb4:#D85574;

  --radius:16px;
  --font-disp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}


/* =================================================================
   2. 全ページ共通
   ================================================================= */
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body);
     line-height:1.8; -webkit-font-smoothing:antialiased; padding-bottom:84px;}
a{color:inherit;}
img{max-width:100%; display:block;}

/* 詳細ページは文章が長いので、行間をほんの少しだけ広げます */
body.page-detail{line-height:1.85;}

/* ---------- 4色ストライプ（最上部） ---------- */
.topstrip{height:10px;
  background:repeating-linear-gradient(90deg,
    var(--rb1) 0 22px,#fff 22px 30px, var(--rb2) 30px 52px,#fff 52px 60px,
    var(--rb3) 60px 82px,#fff 82px 90px, var(--rb4) 90px 112px,#fff 112px 120px);}

/* ---------- 4色レインボー帯（見出しの下線として使う） ---------- */
.rainbow{width:150px; height:7px; margin:12px 0 0; border-radius:4px;
  background:linear-gradient(90deg,var(--rb1) 0 25%,var(--rb2) 25% 50%,var(--rb3) 50% 75%,var(--rb4) 75% 100%);}

/* ---------- ヘッダー ---------- */
.head{background:var(--header);}
.head__in{max-width:1040px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{text-decoration:none; display:block;}
.brand small{display:block; color:var(--blue-deep); font-weight:500;
  font-size:.7rem;                                   /* 古いブラウザ用の保険 */
  font-size:clamp(.7rem, 1.1vw, .86rem);
}
.brand b{font-family:var(--font-disp); font-weight:700; color:var(--blue); letter-spacing:.04em; line-height:1.15; display:block; border-bottom:3px solid #2b3a66; padding-bottom:2px;
  font-size:1.55rem;                                 /* スマホはこの大きさのまま */
  font-size:clamp(1.55rem, 2.8vw, 2.1rem);           /* PCでは最大2.1remまで拡大 */
}
.brand span{display:block; font-family:var(--font-disp); font-weight:700; color:var(--blue); margin-top:2px;
  font-size:.95rem;
  font-size:clamp(.95rem, 1.6vw, 1.15rem);
}
.head__back{color:var(--blue-deep); text-decoration:none; border:1.5px solid var(--blue); border-radius:999px; white-space:nowrap; transition:.2s; background:#fff;
  font-size:.8rem;
  font-size:clamp(.8rem, 1.25vw, .95rem);
  padding:8px 14px;
  padding:clamp(8px, .9vw, 11px) clamp(14px, 1.7vw, 22px);
}
.head__back:hover{background:var(--blue); color:#fff;}

/* ---------- タグ（学年・教科） ---------- */
.tag{font-size:.74rem; padding:4px 12px; border-radius:999px; font-weight:700; color:#fff;}
.tag--grade{background:var(--blue);}
.tag--subject{background:var(--tag-light); color:var(--blue-deep);}

/* 学年タグの色分け（ステップの4色レインボーに合わせる／2026-07-31）
   小学生=イエロー・中学生=ブルー・高校生=ローズ。
   緑（--rb3）は「無料」ボタン専用の色なので、タグには使わない。
   ※黄色だけは白文字だと読めないため、濃い茶系の文字色にしている */
.tag--lv-sho{background:var(--rb2); color:#6B5E14;}
.tag--lv-chu{background:var(--rb1);}
.tag--lv-kou{background:var(--rb4);}

/* ---------- 会社フッター ---------- */
.foot{background:var(--header); padding:30px 20px;}
.foot__in{max-width:1040px; margin:0 auto; text-align:center;}
.foot__in b{font-family:var(--font-disp); color:var(--blue); font-size:1.05rem;}
.foot__in p{margin:6px 0 0; font-size:.84rem; color:var(--sub);}
.foot__links{margin-top:12px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; font-size:.84rem;}
.foot__links a{color:var(--blue-deep); text-decoration:none;}
.foot__links a:hover{text-decoration:underline;}

/* ---------- LINEで相談するボタン（フッター内） ---------- */
.line-btn{display:inline-flex; align-items:center; gap:9px; background:var(--line-green); color:#fff !important; text-decoration:none; font-family:var(--font-disp); font-weight:700; font-size:1rem; padding:13px 26px; border-radius:999px; box-shadow:0 4px 14px rgba(6,199,85,.30); margin:18px 0 4px; transition:.2s;}
.line-btn:hover{filter:brightness(.95); transform:translateY(-1px);}
.line-btn svg{width:22px; height:22px; fill:#fff;}

/* ---------- 右下に浮かぶ丸いLINEボタン（固定SNSバーの少し上） ---------- */
.line-fab{position:fixed; right:18px; bottom:78px; z-index:60; width:58px; height:58px; border-radius:50%; background:var(--line-green); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(6,199,85,.45); text-decoration:none; transition:transform .2s, filter .2s;}
.line-fab:hover{filter:brightness(.95); transform:scale(1.06);}
.line-fab svg{width:30px; height:30px; fill:#fff;}
.line-fab::after{content:""; position:absolute; inset:0; border-radius:50%; animation:linepulse 2.4s infinite;}
@keyframes linepulse{0%{box-shadow:0 0 0 0 rgba(6,199,85,.45);}70%{box-shadow:0 0 0 12px rgba(6,199,85,0);}100%{box-shadow:0 0 0 0 rgba(6,199,85,0);}}
@media print{.line-fab{display:none;}}

/* ---------- 下部固定SNSバー ---------- */
.snsbar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:repeat(5,1fr); background:var(--blue);}
.snsbar a{color:#fff; text-decoration:none; padding:11px 4px 9px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; border-right:1px solid rgba(255,255,255,.18); font-size:.66rem;}
.snsbar a:last-child{border-right:none;}
.snsbar svg{width:20px; height:20px; fill:#fff;}


/* =================================================================
   3. ホームページ専用（body class="page-home"）
   ================================================================= */

/* ---------- ヒーロー（イラスト＝背景透過。左に文字／右にイラスト） ---------- */
.page-home .hero{background:var(--hero-bg); overflow:hidden;}
.page-home .hero__inner{
  max-width:1040px; margin:0 auto;
  padding:28px 20px;                             /* min-heightをやめ、余白で高さを決める */
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.page-home .hero__copy{flex:1 1 auto; max-width:520px; padding:0;}
.page-home .hero__eyebrow{font-size:.8rem; color:var(--blue); font-weight:700; margin:0; letter-spacing:.02em;}
.page-home .hero__copy h1{
  font-family:var(--font-disp); color:var(--ink); font-weight:700;
  line-height:1.4; margin:6px 0 0;
  font-size:1.7rem;                              /* 古いブラウザ用の保険 */
  font-size:clamp(1.35rem, 3vw, 2.35rem);
}
.page-home .hero__copy .rainbow{margin:12px 0 10px;}   /* 見出しの下線として機能させる */
.page-home .hero__sub{font-size:.85rem; color:var(--sub); margin:0;}
.page-home .hero__sub .nw{white-space:nowrap;}         /* 単語の途中で改行させない */
.page-home .hero__cta{
  display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  background:var(--pink); color:#fff; text-decoration:none;
  font-family:var(--font-disp); font-weight:700; font-size:1rem;
  padding:13px 28px; border-radius:999px;
  box-shadow:0 5px 16px rgba(210,75,107,.30);
  transition:transform .2s, filter .2s;
}
.page-home .hero__cta:hover{filter:brightness(.94); transform:translateY(-2px);}
.page-home .hero__cta svg{width:13px; height:13px; fill:#fff;}
.page-home .hero__pic{
  flex:0 0 auto; display:block;
  width:330px;                                   /* 古いブラウザ用の保険 */
  max-width:40%;
  width:clamp(230px, 26vw, 330px);
}
/* 2人の絵は横長なので、少し広くして帯の高さを1人の絵と揃える */
.page-home .hero__pic.is-wide{
  width:364px;
  max-width:44%;
  width:clamp(254px, 28.7vw, 364px);
}
.page-home .hero__pic img{width:100%; height:auto; display:block;}

/* ---------- 無料／有料 切り替えタブ（つまみが滑るセグメント式） ---------- */
.page-home .tabs{max-width:1040px; margin:34px auto 0; padding:0 20px;}
.page-home .tabs__inner{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#EDF1F7; border:1px solid var(--line); border-radius:999px; padding:5px; max-width:380px; margin:0 auto;}
.page-home .tabs__thumb{position:absolute; top:5px; left:5px; width:calc(50% - 5px); height:calc(100% - 10px); background:var(--green); border-radius:999px; box-shadow:0 3px 10px rgba(0,0,0,.14); transition:transform .28s cubic-bezier(.4,0,.2,1), background-color .28s; z-index:1;}
.page-home .tabs__inner[data-tab="paid"] .tabs__thumb{transform:translateX(100%); background:var(--pink);}
.page-home .tab{position:relative; z-index:2; border:none; background:none; cursor:pointer; font-family:var(--font-disp); font-weight:700; font-size:.98rem; padding:11px 6px; border-radius:999px; color:var(--sub); transition:color .28s; display:flex; align-items:center; justify-content:center; gap:7px; -webkit-tap-highlight-color:transparent;}
.page-home .tab.is-active{color:#fff;}
.page-home .tab .n{font-size:.7rem; font-family:var(--font-body); border-radius:999px; padding:1px 8px; min-width:22px; background:#DDE4EC; color:var(--sub); transition:.28s;}
.page-home .tab.is-active .n{background:rgba(255,255,255,.3); color:#fff;}

/* ---------- 検索 ---------- */
.page-home .search{max-width:1040px; margin:22px auto 0; padding:0 20px;}
.page-home .search__lead{text-align:center; color:var(--sub); font-size:.92rem; margin:0 0 14px;}
.page-home .search__panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 4px 18px rgba(80,121,175,.07); display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end;}
.page-home .field{display:flex; flex-direction:column; gap:6px;}
.page-home .field label{font-size:.82rem; color:var(--blue-deep); font-weight:700;}
.page-home .field select,
.page-home .field input{font-family:var(--font-body); font-size:1rem; color:var(--text); background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; width:100%;}
.page-home .field select:focus,
.page-home .field input:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue);}
.page-home .search__reset{background:#fff; border:1.5px solid var(--line); color:var(--sub); font-family:var(--font-body); font-size:.86rem; padding:0 18px; height:48px; border-radius:12px; cursor:pointer; transition:.2s; white-space:nowrap;}
.page-home .search__reset:hover{border-color:var(--blue); color:var(--blue);}
.page-home .search__keyword{max-width:1040px; margin:12px auto 0; padding:0 20px;}
.page-home .search__keyword input{font-family:var(--font-body); font-size:.95rem; width:100%; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:11px 14px;}
.page-home .search__keyword input:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue);}

.page-home .count{max-width:1040px; margin:22px auto 0; padding:0 20px; font-size:.88rem; color:var(--sub);}
.page-home .count b{color:var(--blue); font-size:1.1rem;}

/* ---------- アプリ一覧 ---------- */
.page-home .grid{max-width:1040px; margin:14px auto 0; padding:0 20px 40px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px;}
.page-home .card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:12px; transition:.2s; box-shadow:0 4px 14px rgba(80,121,175,.06);}
.page-home .card:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(80,121,175,.14);}
.page-home .card__tags{display:flex; gap:8px; flex-wrap:wrap;}
.page-home .card h3{font-family:var(--font-disp); font-size:1.15rem; font-weight:700; color:var(--ink); margin:2px 0 0; line-height:1.5;}
/* 商品名が語のとちゅうで割れないようにする（2026-08-17 追加）。
   index.html の titleHTML() が、商品名を意味のまとまりに分けて
   <span class="nw"> で囲んでいます。折り返しはそのまとまりの切れ目でだけ起きます。
   ★12字より長いまとまりには span が付かない作りなので、
     カードの幅（320pxのスマホで238px）をはみ出すことはありません。
   ★apps.js の商品名の文字は1字も変えていません（Squareと一字一句そろえるため）。 */
.page-home .card h3 .nw{white-space:nowrap;}
.page-home .card__desc{font-size:.9rem; color:var(--sub); margin:0; flex-grow:1;}
.page-home .card__foot{display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:14px; flex-wrap:wrap;}
.page-home .card__actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.page-home .more{text-decoration:none; font-size:.86rem; font-weight:700; color:var(--blue-deep); background:#fff; border:1.5px solid var(--blue); padding:9px 14px; border-radius:999px; white-space:nowrap; transition:.2s;}
.page-home .more:hover{background:var(--blue); color:#fff;}
.page-home .empty{grid-column:1 / -1; text-align:center; color:var(--sub); padding:50px 20px; border:2px dashed var(--line); border-radius:var(--radius);}

/* 一覧カードの価格・ボタン（詳細ページとは大きさが違うので分けています） */
.page-home .price{font-size:1.2rem; font-weight:700; font-family:var(--font-disp); color:var(--ink);}
.page-home .price--free{color:var(--green);}
.page-home .buy{text-decoration:none; font-size:.9rem; font-weight:700; color:#fff; background:var(--pink); padding:10px 16px; border-radius:999px; transition:.2s; white-space:nowrap; display:inline-flex; align-items:center; gap:7px;}
.page-home .buy:hover{filter:brightness(.93);}
.page-home .buy--free{background:var(--green);}
.page-home .buy .arw{display:inline-flex; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.25); align-items:center; justify-content:center;}
.page-home .buy .arw svg{width:10px; height:10px; fill:#fff;}
.page-home .buy__note{display:block; width:100%; text-align:right; font-size:.68rem; color:var(--sub); margin-top:2px;}

/* ---------- 合格実績（本家と同じ白カード＋桜） ---------- */
.page-home .achieve{max-width:1040px; margin:0 auto; padding:0 20px 52px;}
.page-home .achieve__card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:0 4px 18px rgba(80,121,175,.08);}
.page-home .achieve h2{font-family:var(--font-disp); color:var(--blue); font-size:1.3rem; text-align:center; margin:0;}
.page-home .achieve .rainbow{margin:12px auto 0;}
.page-home .achieve ul{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:9px;}
.page-home .achieve li{position:relative; padding-left:1.7em; font-size:.96rem; color:var(--text);}
.page-home .achieve li::before{content:"🌸"; position:absolute; left:0; top:0;}
.page-home .achieve__more{text-align:center; margin:18px 0 0;}
.page-home .achieve__more a{display:inline-block; background:var(--blue); color:#fff; text-decoration:none; font-size:.86rem; font-weight:700; padding:10px 20px; border-radius:999px;}
.page-home .achieve em{display:block; font-style:normal; text-align:center; color:var(--blue); letter-spacing:.25em; font-weight:700; font-size:.95rem; margin-top:2px;}
.page-home .achieve h3{font-family:var(--font-disp); color:var(--blue-deep); font-size:1.12rem; text-align:center; margin:0;}
.page-home .achieve__all{margin:22px 0 0; border-top:1px solid var(--line); padding-top:18px;}
.page-home .achieve__all summary{list-style:none; cursor:pointer; text-align:center; background:var(--blue); color:#fff; font-family:var(--font-disp); font-weight:700; font-size:.95rem; padding:13px 18px; border-radius:999px; transition:.2s;}
.page-home .achieve__all summary::-webkit-details-marker{display:none;}
.page-home .achieve__all summary:hover{filter:brightness(.94);}
.page-home .achieve__all summary::after{content:"　▼"; font-size:.75em;}
.page-home .achieve__all[open] summary::after{content:"　▲"; font-size:.75em;}
.page-home .ach-group{margin-top:20px;}
.page-home .ach-group h4{font-family:var(--font-disp); color:#fff; background:var(--blue); display:inline-block; font-size:.92rem; padding:4px 18px; border-radius:999px; margin:0 0 10px;}
.page-home .ach-group ul{list-style:none; padding:0; margin:0; columns:2; column-gap:28px; display:block;}
.page-home .ach-group li{padding:3px 0; padding-left:0; font-size:.85rem; color:var(--text); break-inside:avoid; position:static;}
.page-home .ach-group li::before{content:none;}


/* =================================================================
   4. 商品詳細ページ専用（body class="page-detail"）
   ================================================================= */

/* ---------- パンくず ---------- */
.page-detail .crumb{max-width:1040px; margin:0 auto; padding:14px 20px 0; font-size:.78rem; color:var(--sub);}
.page-detail .crumb a{color:var(--blue-deep); text-decoration:none;}
.page-detail .crumb a:hover{text-decoration:underline;}

/* ---------- 商品ヘッド（写真＋情報） ---------- */
.page-detail .product{max-width:1040px; margin:0 auto; padding:16px 20px 0; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start;}

/* ---------- 写真ギャラリー ---------- */
/* スマホのスクショ（縦長）を 4/3 の枠に入れる。
   下は切れるが、object-position:top で「画面の上から」切り出す。
   ここを中央（既定値）にすると、漢字れんしゅうの画面が
   真っ白な手書きマスだけになるので必ず top にすること。 */
.page-detail .gallery__main{background:#F1F5FA; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;}
.page-detail .gallery__main img{width:100%; height:100%; object-fit:cover; object-position:top;}
/* 縦長スクショ用の「たて枠」（あとから足す方式・つけたページだけ効く）。
   ねらい：スクショを切らずに全部見せる。4/3 の枠だと上から28%しか映らず、
   画面の下half にある大事な部分（例：ひっ算のおてもち・さくらんぼ・「まだ おわりじゃない！」）が
   枠の外に出てしまう。かといって枠を縦長に固定すると、こんどは縦の短いスクショが
   左右で切れる（cover は足りない方向に合わせて拡大するため）。
   → 枠の高さを決め打ちせず、写真の高さに合わせる。これなら縦横比がバラバラでも
     どの写真も1枚まるごと・幅いっぱいで見える（切れない）。写真を切りかえると枠の高さが変わる。
   使い方：<div class="gallery__main gallery__main--tall"> と2つ書くだけ。
   ★上の .gallery__main の値は変えていないので、このクラスを書かない既存ページは何も変わらない。
   （2026-08-04 detail-hissan.html のために追加。いま使っているのはそのページのみ） */
.page-detail .gallery__main--tall{aspect-ratio:auto;}
.page-detail .gallery__main--tall img{height:auto; object-fit:contain;}
.page-detail .gallery__thumbs img{object-position:top;}
/* ★2026-08-09 修正：サムネイルを折り返せるようにした。
   サムネは 76px 固定・すきま 10px なので、4枚で 334px・5枚で 420px の幅が要る。
   折り返さない設定だと、この幅が写真の列（グリッド）の最低幅になってしまい、
   横320pxのスマホでページ全体が横にはみ出していた（実測：5枚のページで scrollWidth 440px）。
   flex-wrap で2段に折り返せば、狭い画面でもはみ出さない。
   広い画面では今までどおり1列に並ぶので、既存ページの見た目は変わらない。 */
.page-detail .gallery{min-width:0;}
.page-detail .gallery__thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.page-detail .gallery__thumbs button{padding:0; border:2px solid var(--line); background:var(--paper); border-radius:10px; overflow:hidden; cursor:pointer; width:76px; height:58px; transition:.2s;}
.page-detail .gallery__thumbs button.is-active{border-color:var(--blue);}
.page-detail .gallery__thumbs img{width:100%; height:100%; object-fit:cover;}
/* 写真が未設置のときの控えめなプレースホルダ */
.page-detail .ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#EDF1F7; color:var(--sub); font-size:.8rem; font-family:var(--font-disp);}

/* ---------- 商品情報 ---------- */
.page-detail .tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.page-detail .info h1{font-family:var(--font-disp); color:var(--ink); font-size:1.6rem; line-height:1.45; margin:0 0 8px;}
/* 商品名の「（学年・学期・単元）」の部分（2026-08-11）。
   保護者がいちばん知りたい「いつ習う単元か」なので、キャッチコピー（灰色の small）とは
   別あつかいにして、事実の色＝青で1行に落とす。h1のテキストとしては愛称と続きなので、
   読み上げ・検索・SNSでは商品名がひとつながりになる。 */
.page-detail .info h1 .h1-when{
  display:block; margin-top:5px;
  font-family:var(--font-body); font-weight:500; color:var(--blue-deep);
  font-size:.95rem;                              /* 古いブラウザ用の保険 */
  font-size:clamp(.85rem, 2.2vw, .98rem);
  line-height:1.6;
}
/* 商品名の「・」区切りの単元名は、語のとちゅうで割れやすい（2026-08-15 実測：
   detail-kagaku で「…元素記号・化／学反応式）」と1字だけ次の行に落ちた）。
   単元名を1つずつ <span class="nw"> で囲むと、折り返しが「・」のところだけで起きる。
   1語はいちばん長くても7字（約82px）なので、375pxの画面でもはみ出さない。
   ★index.html の .page-home .hero__sub .nw と同じ考え方・同じクラス名。 */
/* ★2026-08-17：この1行を、詳細ページ全体で使える1つのルールにまとめました。
   （もとは .info h1 .h1-when .nw だけでした。効き方は同じで、対象が広がっただけです）
   割れてほしくない場所は、どこでも <span class="nw"> で囲めば済みます。
   実際に必要になった場所（detail-chiri で320pxを実測して見つけたもの）：
     ・愛称そのもの … 「日本の特色マスタークエスト」13字が「…マスタークエス／ト」と
       最後の1字だけ落ちた → 日本の特色／マスタークエスト の2つに分けて囲む
     ・パンくず … 「日本の特色マスタ／ークエスト」と割れた → 商品名ぜんぶを囲む
     ・見出し（h2） … 「図は、タップで大きくなり／ます」と割れた
       → 「図は、」のあとのまとまりを囲む
     ・リード文 … 「そもそも読めて／いない」と動詞が割れた → まとまりを囲む
   ★囲む前に、そのまとまりが画面幅に収まるか必ず測る（320pxの内側は約265px）。
   ★nw を書いていない既存ページは1ピクセルも変わりません。 */
.page-detail .nw{white-space:nowrap;}
.page-detail .info__lead{font-size:.95rem; color:var(--sub); margin:0 0 18px;}
.page-detail .info .rainbow{width:140px; margin:0 0 18px;}

/* ---------- 購入ボックス（詳細ページの主役） ---------- */
.page-detail .buybox{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 4px 16px rgba(80,121,175,.08);}
.page-detail .price{font-family:var(--font-disp); font-size:1.9rem; font-weight:700; color:var(--ink); margin:0 0 2px;}
.page-detail .price small{font-size:.8rem; color:var(--sub); font-family:var(--font-body); font-weight:400; margin-left:6px;}
.page-detail .buy{display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-family:var(--font-disp); font-size:1.1rem; font-weight:700; color:#fff; background:var(--pink); padding:15px; border-radius:999px; transition:.2s; margin-top:12px;}
.page-detail .buy:hover{filter:brightness(.93);}
.page-detail .buy svg{width:16px; height:16px; fill:#fff;}
.page-detail .buy__note{font-size:.76rem; color:var(--sub); text-align:center; margin:10px 0 0;}

/* ---------- 販売準備中のボタン（2026-08-09 追加） ----------
   Squareの支払いリンクがまだ無いアプリで使います。
   ・ピンク（＝押す色）にはしない。押せないボタンにピンクを使うと「押す色」の意味が崩れるため
   ・グレーにして、カーソルも「押せません」の形にする
   ・apps.js の url が本物に変わると、このクラスは自動で外れて ふつうのピンクの購入ボタンに戻ります */
.buy--pending{background:#C3C9D1 !important; color:#fff !important; cursor:not-allowed; pointer-events:none;}
.buy--pending svg{fill:#fff !important;}
.buy--pending:hover{filter:none !important;}
.page-detail .line-link{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:.84rem; color:var(--blue-deep); text-decoration:none;}
.page-detail .line-link svg{width:18px; height:18px; fill:var(--line-green);}

/* ---------- 本文セクション ---------- */
.page-detail main.body{max-width:1040px; margin:0 auto; padding:44px 20px 20px;}
.page-detail .sec{margin-bottom:38px;}
.page-detail .sec h2{font-family:var(--font-disp); color:var(--blue-deep); font-size:1.25rem; margin:0 0 12px; padding-left:12px; border-left:6px solid var(--blue);}
.page-detail .sec p{margin:10px 0;}
.page-detail .checks{list-style:none; padding:0; margin:0; display:grid; gap:9px;}
.page-detail .checks li{position:relative; padding-left:1.9em; font-size:.95rem;}
.page-detail .checks li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--green); font-weight:700;}
.page-detail .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.page-detail .step{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center;}
/* 数字バッジは .step の「直下の b」だけ。> を外すと <p> 内の太字まで
   30pxの円に押し込まれて文字がはみ出す（2026-08-02 修正）*/
.page-detail .step > b{display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--font-disp); font-size:.9rem; margin-bottom:8px;}
.page-detail .step p{font-size:.88rem; margin:0; color:var(--sub);}
.page-detail .spec{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.page-detail .spec th,
.page-detail .spec td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); font-size:.9rem; vertical-align:top;}
.page-detail .spec th{width:32%; background:#F1F5FA; color:var(--blue-deep); font-family:var(--font-disp);}
.page-detail .spec tr:last-child th,
.page-detail .spec tr:last-child td{border-bottom:none;}
.page-detail .faq dt{font-family:var(--font-disp); color:var(--blue-deep); font-weight:700; margin-top:16px;}
.page-detail .faq dd{margin:2px 0 0;}
.page-detail .backlink{text-align:center; padding:10px 20px 40px;}
.page-detail .backlink a{display:inline-block; border:1.5px solid var(--blue); color:var(--blue-deep); background:#fff; text-decoration:none; font-size:.88rem; font-weight:700; padding:11px 24px; border-radius:999px;}
.page-detail .backlink a:hover{background:var(--blue); color:#fff;}


/* =================================================================
   5. スマホ・タブレット対応
   ================================================================= */
@media(max-width:760px){
  /* ホーム：文字を上、イラストを下に回して重ならないように */
  .page-home .hero__inner{flex-direction:column; align-items:center; gap:0; text-align:center; padding:26px 20px 0;}
  .page-home .hero__copy{max-width:100%;}
  .page-home .hero__copy .rainbow{margin-left:auto; margin-right:auto;}
  .page-home .hero__pic{width:min(76%, 260px); max-width:none; margin-top:6px;}
  .page-home .hero__sub .nw{display:block;}      /* スマホでは2行に分けてはみ出しを防ぐ */

  /* 詳細：写真と情報を縦積みに */
  .page-detail .product{grid-template-columns:1fr; gap:20px;}
  .page-detail .info h1{font-size:1.35rem;}
  .page-detail .steps{grid-template-columns:1fr;}
  .page-detail .spec th,
  .page-detail .spec td{display:block; width:100%;}
  .page-detail .spec th{border-bottom:none;}
  .page-detail .spec td{padding-top:2px;}
}
@media(max-width:640px){
  .page-home .search__panel{grid-template-columns:1fr;}
  .page-home .search__reset{width:100%;}
  .page-home .ach-group ul{columns:1;}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;}
  .page-home .card:hover{transform:none;}
  .line-fab::after{animation:none;}
}

/* ヒーローの3点ポイント（2026-08-02 追加） */
.hero__points{
  list-style:none; margin:16px 0 24px; padding:0;
  display:grid; gap:10px; max-width:34em;
}
.hero__points li{
  position:relative; padding-left:1.1em;
  font-size:.92rem; line-height:1.75; color:#555;
}
.hero__points li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:7px; height:7px; border-radius:50%; background:#5079AF;
}
.hero__points b{
  display:block; font-family:"Zen Maru Gothic",sans-serif;
  color:#5079AF; font-size:.86rem; letter-spacing:.04em;
}
@media(max-width:600px){
  .hero__points li{ font-size:.86rem; }
}

/* 詳細ページ「学習の流れ」の円アイコン＋ひらがなラベル（2026-08-02 追加） */
.page-detail .flow-badge{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--blue); color:#fff;   /* 青地に白（currentColorでSVGが白になる） */
  display:flex; align-items:center; justify-content:center;
  margin:4px auto 0;
}
.page-detail .flow-icon{ width:28px; height:28px; }   /* 円の直径のちょうど半分 */
/* 円の差し色：レインボー帯と同じ3色（2026-08-02 追加）。黄だけは白アイコンが見えにくいため濃色に */
.page-detail .flow-badge--pink{ background:var(--rb4); }
.page-detail .flow-badge--green{ background:var(--rb3); }
.page-detail .flow-badge--yellow{ background:var(--rb2); color:var(--ink); }
.page-detail .step p.flow-label{
  margin:8px 0 6px; text-align:center;
  font-weight:700; font-size:15px; color:var(--ink);
  font-family:var(--font-disp);
}

/* 対象者の明記（全詳細ページ共通・2026-08-02 追加）。heroセクションの文言に準拠 */
.page-detail .for-whom{
  background:var(--header);
  border-left:4px solid var(--blue);
  border-radius:8px;
  padding:10px 14px;
  margin:14px 0 4px;
  font-size:.88rem; line-height:1.8; color:var(--ink);
}

/* ===== トップの新着情報セクション（WordPress最新記事） =====
   2026-08-03 追加／2026-08-04 リスト表示＋ステップカラーに刷新。
   クラスは sb- プレフィックスで既存と衝突しない。表示位置は index.html の検索エリア上。
   見出しは他セクションと同じ流儀（丸ゴシック＋英字＋4色レインボー帯） */
.sb-blog{padding:46px 20px 10px; text-align:center;}
.sb-blog__title{font-family:var(--font-disp); color:var(--ink); font-weight:700;
  font-size:1.4rem; font-size:clamp(1.4rem,2.4vw,1.7rem); margin:0; line-height:1.3;}
.sb-blog__en{display:block; font-style:normal; color:var(--blue); font-weight:700;
  font-size:.78rem; letter-spacing:.14em; margin-top:2px; text-transform:uppercase;}
.sb-blog .rainbow{margin:12px auto 24px;}
.sb-blog__list{display:block; max-width:820px; margin:0 auto; text-align:left;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 22px; box-shadow:0 2px 10px rgba(80,121,175,.06);}
.sb-blogitem{display:flex; align-items:center; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit;}
.sb-blogitem:last-child{border-bottom:none;}
.sb-blogitem__thumb{width:120px; height:80px; object-fit:cover;
  border-radius:8px; flex-shrink:0; background:#EFF3F8;}
.sb-blogitem__body{display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0;}
.sb-blogitem__date{font-size:.74rem; font-weight:700; color:#fff;
  background:var(--blue); border-radius:999px; padding:2px 12px;}
.sb-blogitem__title{font-family:var(--font-disp); font-weight:700; line-height:1.55; color:var(--ink);}
.sb-blogitem:hover .sb-blogitem__title{color:var(--blue); text-decoration:underline;}
.sb-blog__more{display:inline-block; width:fit-content; margin:24px auto 0; padding:10px 30px;
  background:var(--blue); color:#fff; border-radius:999px; text-decoration:none;
  font-family:var(--font-disp); font-weight:700; font-size:.95rem; transition:.2s;}
.sb-blog__more:hover{background:var(--blue-deep);}
@media(max-width:600px){
  .sb-blog{padding:36px 16px 6px;}
  .sb-blog__list{padding:2px 16px;}
  .sb-blogitem__thumb{width:88px; height:60px;}
}