/**
Theme Name: Yumetama Practice Child
Author: Yumetamaya
Author URI: https://practice.yumetamaya.com
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yumetama-practice-child
Template: astra
*/

/* Web practice page styles */
.bep-page{--bep-navy:#17365D;--bep-text:#111;--bep-beige:#F7F2E8;--bep-blue:#EEF4F7;--bep-yellow:#FFF8E6;color:var(--bep-text);font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;line-height:1.8;max-width:960px;margin:auto;padding:24px 16px;overflow-wrap:anywhere}.bep-page *{box-sizing:border-box}.bep-page [id]{scroll-margin-top:96px}.bep-page h2,.bep-page h3,.bep-page h4{color:var(--bep-navy);line-height:1.4}.bep-page h2{font-size:clamp(1.45rem,4vw,2rem)}.bep-page h3{font-size:clamp(1.3rem,3vw,1.65rem)}.bep-page h4{font-size:1.15rem}.bep-page a{color:var(--bep-navy);text-decoration-thickness:2px;text-underline-offset:3px}.bep-page a:focus-visible,.bep-page button:focus-visible,.bep-page summary:focus-visible{outline:3px solid var(--bep-navy);outline-offset:3px}.bep-hero,.bep-nav,.bep-steps,.bep-prompt,.bep-common,.bep-notice,.bep-update,.bep-guide>section{border:1px solid #d5dce4;border-radius:4px;margin:24px 0;padding:24px}.bep-hero,.bep-paper-card,.bep-intro{background:var(--bep-beige)}.bep-hero{border-left:6px solid var(--bep-navy)}.bep-eyebrow,.bep-english-title{color:var(--bep-navy);font-weight:700}.bep-button,.bep-copy-button{background:var(--bep-navy);border:2px solid var(--bep-navy);border-radius:4px;color:#fff;cursor:pointer;display:inline-block;font:inherit;font-weight:700;min-height:44px;padding:10px 16px;text-decoration:none}.bep-nav ol{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}.bep-nav a{border:1px solid var(--bep-navy);border-radius:4px;display:block;font-weight:700;padding:8px 12px;text-decoration:none}.bep-steps,.bep-level-one{background:var(--bep-blue)}.bep-level-two{background:#f3f7fa;border:1px solid #b8ccd9;border-radius:4px;margin:20px 0;padding:20px}.bep-prompt{padding:26px}.bep-intro,.bep-paper-card,.bep-reading,.bep-rescue-link,.bep-prompt-notice,.bep-feedback-brief,.bep-driver-phrases,.bep-japanese-check{border-radius:4px;margin:18px 0;padding:18px}.bep-paper-card,.bep-reading,.bep-japanese-check{border:1px solid #d5dce4}.bep-dialogue,.bep-prompt-text{background:#fff;border:1px solid #cbd5df;border-radius:4px;font-family:"Noto Sans",Arial,sans-serif;font-size:.95rem;line-height:1.7;max-width:100%;overflow:auto;padding:16px;white-space:pre-wrap;word-break:break-word}.bep-two-column{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.bep-two-column>section{border:1px solid #d5dce4;border-radius:4px;padding:18px}.bep-copy-status{color:var(--bep-navy);font-weight:700;min-height:1.8em}.bep-prompt-details summary,.bep-japanese-check summary{color:var(--bep-navy);cursor:pointer;font-weight:700}.bep-driver-phrases li,.bep-token-list li{margin:.45em 0}.bep-notice{background:var(--bep-yellow);border-color:#e5cb83}.bep-token-list{columns:2}.bep-top-link,.bep-prompt-links{text-align:right}@media(max-width:600px){.bep-page{padding:16px 12px}.bep-hero,.bep-nav,.bep-steps,.bep-prompt,.bep-common,.bep-notice,.bep-update,.bep-guide>section{padding:18px}.bep-two-column{grid-template-columns:1fr}.bep-nav ol{display:block}.bep-nav li+li{margin-top:8px}.bep-nav a,.bep-copy-button{width:100%}.bep-dialogue,.bep-prompt-text{font-size:.9rem;padding:12px}.bep-token-list{columns:1}}@media(prefers-reduced-motion:reduce){.bep-page *,.bep-page *::before,.bep-page *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media print{.bep-copy-button,.bep-nav{display:none}.bep-page{max-width:none;padding:0}.bep-hero,.bep-paper-card,.bep-steps,.bep-level-one,.bep-level-two,.bep-notice{background:#fff!important}.bep-prompt,.bep-common{break-inside:avoid}.bep-prompt-text{overflow:visible;white-space:pre-wrap}}
/* Keep the main guide button text visible in Astra */
.bep-page a.bep-button,
.bep-page a.bep-button:visited,
.bep-page a.bep-button:hover,
.bep-page a.bep-button:focus {
  color: #fff;
}

/* Hide the WordPress page title only on the bus-English practice page */
.page-id-7 .entry-header {
  display: none;
}

/* Local-information replacement block */
.bep-customize{background:var(--bep-blue)}
.bep-customize h3{margin-top:0}
.bep-customize-flow{margin:18px 0;padding-left:1.6em}
.bep-customize-flow li+li{margin-top:.5em}
.bep-customize-note{background:var(--bep-yellow);border:1px solid #e5cb83;border-radius:4px;margin:20px 0 0;padding:18px}
.bep-customize-note h3{margin-top:0}

/* =========================================================
   QR読み取り後・Prompt別スマートフォン画面
   Prompt 03 試作用
   Astra Child の style.css 末尾へ追加する想定
   ========================================================= */

.bep-qr-page {
  --bep-qr-navy: #17365d;
  --bep-qr-text: #111111;
  --bep-qr-muted: #6f6f6f;
  --bep-qr-cream: #f7f2e8;
  --bep-qr-blue: #eef4f7;
  --bep-qr-yellow: #fff8e6;
  --bep-qr-line: #d6dee7;
  --bep-qr-white: #ffffff;

  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  color: var(--bep-qr-text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;
}

.bep-qr-page,
.bep-qr-page * {
  box-sizing: border-box;
}

.bep-qr-screen {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 26px 18px 0;
  background: var(--bep-qr-white);
  border: 1px solid #c7cdd5;
  border-radius: 24px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.bep-qr-title-block {
  margin: 0 0 22px;
  text-align: center;
}

.bep-qr-prompt-number {
  margin: 0 0 7px;
  color: var(--bep-qr-navy);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.bep-qr-prompt-title {
  margin: 0;
  color: var(--bep-qr-text);
  font-size: 29px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.bep-qr-title-long-one-line {
  font-size: 26px;
  white-space: nowrap;
}

.bep-qr-english-title {
  max-width: 290px;
  margin: 8px auto 0;
  color: var(--bep-qr-muted);
  font-size: 15px;
  line-height: 1.45;
  text-wrap: balance;
}

.bep-qr-lead {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.bep-qr-actions {
  margin: 0;
  padding: 0;
}

.bep-qr-action {
  display: block;
  width: 100%;
  margin: 0 0 13px;
  padding: 17px 16px;
  color: var(--bep-qr-text);
  text-decoration: none;
  border: 1px solid var(--bep-qr-line);
  border-radius: 15px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.bep-qr-action:hover,
.bep-qr-action:focus-visible {
  color: var(--bep-qr-text);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(23, 54, 93, 0.12);
}

.bep-qr-action:focus-visible,
.bep-qr-support-links a:focus-visible {
  outline: 3px solid rgba(23, 54, 93, 0.28);
  outline-offset: 3px;
}

.bep-qr-action-reading {
  background: var(--bep-qr-blue);
}

.bep-qr-action-level1 {
  background: var(--bep-qr-cream);
}

.bep-qr-action-level2 {
  background: var(--bep-qr-yellow);
}

.bep-qr-action-kicker {
  display: block;
  margin: 0 0 3px;
  color: var(--bep-qr-navy);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.bep-qr-action-main {
  display: block;
  color: var(--bep-qr-navy);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.38;
  text-wrap: balance;
}

.bep-qr-action-level {
  display: block;
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.bep-qr-action-description {
  display: block;
  margin: 9px 0 0;
  color: #343434;
  font-size: 14px;
  line-height: 1.6;
}

.bep-qr-support-links {
  margin: 18px 0 0;
  padding: 17px 0 6px;
  border-top: 1px solid var(--bep-qr-line);
}

.bep-qr-support-links a {
  display: block;
  margin: 0 0 14px;
  color: var(--bep-qr-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.bep-qr-footer {
  margin: 16px -18px 0;
  padding: 15px 14px 17px;
  color: var(--bep-qr-white);
  background: var(--bep-qr-navy);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 360px) {
  .bep-qr-screen {
    padding-right: 15px;
    padding-left: 15px;
  }

  .bep-qr-prompt-title {
    font-size: 27px;
  }

  .bep-qr-title-long-one-line {
    font-size: 23px;
  }

  .bep-qr-action-main {
    font-size: 19px;
  }

  .bep-qr-footer {
    margin-right: -15px;
    margin-left: -15px;
    font-size: 11.5px;
  }
}

/* WordPressテーマ側の見出し・リンク装飾の影響を抑える */
.bep-qr-page h1,
.bep-qr-page p,
.bep-qr-page nav,
.bep-qr-page footer {
  max-width: none;
}

.bep-qr-page a {
  -webkit-tap-highlight-color: rgba(23, 54, 93, 0.12);
}

/* =========================================================
   Prompt 03 QRページ：Astra上書き対策・修正版
   対象ページID：398
   Astra Child の style.css 末尾へ追加
   以前追加した「Prompt03_スマホ下部空白修正.css」は削除し、
   このCSSへ差し替える。
   ========================================================= */

/* ページ全体に残るAstra側の高さ・余白を解除 */
body.page-id-398,
body.page-id-398 #page,
body.page-id-398 #content,
body.page-id-398 .site-content,
body.page-id-398 .ast-container,
body.page-id-398 #primary,
body.page-id-398 .content-area,
body.page-id-398 .site-main,
body.page-id-398 article.page,
body.page-id-398 .entry-content {
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Astraのコンテンツ領域の余白を抑える */
body.page-id-398 #content > .ast-container,
body.page-id-398 .site-content > .ast-container {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* QRページ本体 */
body.page-id-398 .bep-qr-page {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* QRカード */
body.page-id-398 .bep-qr-screen {
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 3つの選択肢の背景色をAstraより優先 */
body.page-id-398 .bep-qr-action-reading {
  background-color: #eef4f7 !important;
}

body.page-id-398 .bep-qr-action-level1 {
  background-color: #f7f2e8 !important;
}

body.page-id-398 .bep-qr-action-level2 {
  background-color: #fff8e6 !important;
}

/* 最下部の教材名を濃紺帯として強制表示 */
body.page-id-398 .bep-qr-footer {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 16px -18px 0 !important;
  padding: 15px 14px 17px !important;
  color: #ffffff !important;
  background: #17365d !important;
  background-color: #17365d !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

/* フッター内にテーマ由来の装飾を入れない */
body.page-id-398 .bep-qr-footer::before,
body.page-id-398 .bep-qr-footer::after {
  display: none !important;
  content: none !important;
}

/* 非表示設定後も空のサイトフッターが残る場合に備える */
body.page-id-398 .site-footer,
body.page-id-398 footer.site-footer {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 360px) {
  body.page-id-398 .bep-qr-footer {
    margin-right: -15px !important;
    margin-left: -15px !important;
    font-size: 11.5px !important;
  }
}

/* =========================================================
   Prompt 03 QRページ：スマホ下部の余分なスクロール修正
   対象ページID：398
   整理済み style.css の末尾へ追加
   ========================================================= */

body.page-id-398 #page {
  display: block !important;
  min-height: auto !important;
  height: auto !important;
}

body.page-id-398 #content,
body.page-id-398 .site-content {
  display: block !important;
  flex: none !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-398 #content > .ast-container,
body.page-id-398 .site-content > .ast-container {
  display: block !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.page-id-398 #primary,
body.page-id-398 .content-area,
body.page-id-398 .site-main,
body.page-id-398 article.page,
body.page-id-398 .ast-article-single,
body.page-id-398 .entry-content {
  min-height: auto !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.page-id-398 .bep-qr-page,
body.page-id-398 .bep-qr-screen,
body.page-id-398 .bep-qr-footer {
  min-height: auto !important;
  height: auto !important;
}

/* コピー操作案内 */
.bep-copy-guide {
  margin: 0 0 16px;
  padding: 16px 18px;
  background: #fff8e6;
  border: 1px solid #e5cb83;
  border-radius: 6px;
}

.bep-copy-guide h5 {
  margin: 0 0 8px;
  color: #17365d;
  font-size: 1rem;
  line-height: 1.5;
}

.bep-copy-guide ol {
  margin: 0;
  padding-left: 1.4em;
}

.bep-copy-guide li {
  margin: 0.35em 0;
  line-height: 1.65;
}

.bep-copy-status {
  margin: 10px 0 0;
  color: #17365d;
  font-weight: 700;
  line-height: 1.65;
  min-height: 1.65em;
}

@media (max-width: 600px) {
  .bep-copy-guide {
    padding: 14px;
  }

  .bep-copy-guide h5 {
    font-size: 0.98rem;
  }

  .bep-copy-guide li {
    font-size: 0.95rem;
  }
}

/* 使い方ページ専用ボタン */
.bep-guide-button {
  background: #4f7183;
  color: #ffffff;
  border-color: #4f7183;
}

.bep-guide-button:hover,
.bep-guide-button:focus {
  background: #3e5d6c;
  color: #ffffff;
  border-color: #3e5d6c;
}

.bep-phonics-page{max-width:920px;margin:0 auto;color:#111;line-height:1.85}
.bep-phonics-hero{margin:0 0 24px;padding:32px 28px;background:#f7f2e8;border-left:6px solid #17365d;border-radius:4px}
.bep-phonics-kicker{margin:0 0 8px;color:#4f7183;font-weight:700}
.bep-phonics-hero h1{margin:0 0 12px;color:#17365d;font-size:clamp(2rem,5vw,2.8rem)}
.bep-phonics-lead{margin:0;font-size:1.08rem}
.bep-phonics-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.bep-phonics-nav a{padding:8px 12px;color:#17365d;background:#eef4f7;border:1px solid #c8d8e0;border-radius:4px;font-weight:700;text-decoration:none}
.bep-phonics-section{margin:0 0 24px;padding:24px;border:1px solid #d5dde2;border-radius:5px;background:#fff}
.bep-phonics-section h2{margin:0 0 14px;color:#17365d;font-size:1.45rem}
.bep-phonics-note,.bep-phonics-caution{margin-top:18px;padding:16px 18px;border-radius:5px}
.bep-phonics-note{background:#fff8e6;border:1px solid #e5cb83}
.bep-phonics-caution{background:#eef4f7;border:1px solid #bfd0da}
.bep-phonics-compare,.bep-phonics-word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.bep-phonics-compare>div,.bep-phonics-word-grid article{padding:16px;background:#f7f2e8;border-radius:5px}
.bep-phonics-word-grid h3{margin:0;color:#17365d;font-size:1.35rem}
.bep-phonics-steps li{margin:0 0 14px}
.bep-phonics-steps strong{display:block;color:#17365d}
.bep-phonics-next{background:#fff8e6}
.bep-phonics-back{text-align:center;margin:28px 0}
@media(max-width:600px){.bep-phonics-hero{padding:24px 18px}.bep-phonics-section{padding:18px 16px}.bep-phonics-compare,.bep-phonics-word-grid{grid-template-columns:1fr}.bep-phonics-nav{display:grid;grid-template-columns:1fr}.bep-phonics-nav a{text-align:center}}

/* フォニックス：実際の音を聞く案内 */
.bep-phonics-listening-note {
  margin-top: 22px;
  padding: 18px 20px;
  background: #eef4f7;
  border-left: 5px solid #4f7183;
  border-radius: 5px;
}

.bep-phonics-listening-note h3 {
  margin: 0 0 10px;
  color: #17365d;
  font-size: 1.15rem;
  line-height: 1.6;
}

.bep-phonics-listening-note p {
  margin: 8px 0 0;
}

@media (max-width: 600px) {
  .bep-phonics-listening-note {
    padding: 16px;
  }

  .bep-phonics-listening-note h3 {
    font-size: 1.05rem;
  }
}

/* フォニックスページ最下部の戻るボタン */
.bep-phonics-back .bep-button {
  display: inline-block;
  padding: 10px 18px;
  background: #17365d;
  color: #ffffff !important;
  border: 1px solid #17365d;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
}

.bep-phonics-back .bep-button:hover,
.bep-phonics-back .bep-button:focus {
  background: #4f7183;
  color: #ffffff !important;
  border-color: #4f7183;
  text-decoration: none;
}

/* =========================================================
   quick-phrases｜スマホで使える 現場フレーズ早見ページ
   Ver.1.0
   ========================================================= */
.bep-quick-page{max-width:900px}
.bep-quick-version{margin-bottom:0;color:#6f6f6f;font-size:.92rem;font-weight:700}
.bep-quick-note,.bep-quick-nav,.bep-quick-section,.bep-quick-ai-section{
  margin:24px 0;padding:22px;border:1px solid #d5dce4;border-radius:5px;background:#fff
}
.bep-quick-note{background:#fff8e6;border-color:#e5cb83}
.bep-quick-nav{background:#eef4f7}
.bep-quick-nav h2,.bep-quick-note h2,.bep-quick-ai-section h2{margin-top:0}
.bep-quick-study-flow{margin:0 0 14px;padding-left:1.5em}
.bep-quick-study-flow li+li{margin-top:.45em}
.bep-quick-nav ul{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin:0;padding:0;list-style:none
}
.bep-quick-nav a{
  display:flex;align-items:center;justify-content:center;min-height:48px;
  padding:9px 10px;border:1px solid #17365d;border-radius:5px;
  background:#fff;color:#17365d;font-weight:700;text-align:center;text-decoration:none
}
.bep-quick-section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:16px;border-bottom:2px solid #eef4f7
}
.bep-quick-section-head h2{margin:0 0 10px}
.bep-quick-section-head a{font-size:.9rem;white-space:nowrap}
.bep-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bep-quick-card{
  padding:17px;border:1px solid #d5dce4;border-radius:6px;background:#fff
}
.bep-quick-card h3{margin:4px 0 10px;font-size:1.05rem}
.bep-quick-source{margin:0;color:#6f6f6f;font-size:.82rem;font-weight:700}
.bep-quick-english{
  margin:0 0 7px;color:#17365d;font-size:1.2rem;font-weight:800;line-height:1.45
}
.bep-quick-japanese{margin:0 0 14px}
.bep-quick-actions{margin-top:auto}
.bep-quick-copy{width:100%}
.bep-quick-ai{
  display:block;margin-top:8px;padding:9px 10px;border:1px solid #4f7183;border-radius:4px;
  color:#17365d;font-weight:700;text-align:center;text-decoration:none
}
.bep-quick-prompt-links{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px
}
.bep-quick-prompt-links a{
  display:flex;flex-direction:column;gap:4px;min-height:88px;padding:12px;
  border:1px solid #c8d8e0;border-radius:5px;background:#eef4f7;text-decoration:none
}
.bep-quick-prompt-links span{color:#111;font-size:.9rem}
.bep-quick-future-note{margin:18px 0 0;color:#6f6f6f;font-size:.92rem}
@media(max-width:700px){
  .bep-quick-nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bep-quick-grid{grid-template-columns:1fr}
  .bep-quick-prompt-links{grid-template-columns:1fr}
  .bep-quick-prompt-links a{min-height:0}
}
@media(max-width:360px){
  .bep-quick-nav,.bep-quick-section,.bep-quick-note,.bep-quick-ai-section{padding:16px}
  .bep-quick-nav ul{grid-template-columns:1fr}
  .bep-quick-section-head{display:block}
  .bep-quick-section-head a{display:inline-block;margin-bottom:10px}
  .bep-quick-card{padding:15px}
  .bep-quick-english{font-size:1.12rem}
}
/* quick-phrases｜場面選択ボタンの高さを揃える */
.bep-quick-nav a {
  min-height: 64px;
  line-height: 1.45;
}

@media(max-width:700px){
  .bep-quick-nav a {
    min-height: 68px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
/* quick-phrases｜カテゴリー単位の発音・復唱練習 */
.bep-quick-listen{
  margin:0 0 18px;
  padding:16px 18px;
  background:#eef4f7;
  border:1px solid #c8d8e0;
  border-left:5px solid #4f7183;
  border-radius:5px;
}
.bep-quick-listen-label{
  margin:0 0 4px;
  color:#17365d;
  font-weight:800;
}
.bep-quick-listen p{margin-top:6px}
.bep-quick-listen-button{width:100%;margin-top:6px}
.bep-quick-listen-details{margin-top:10px}
.bep-quick-listen-details summary{
  color:#17365d;
  cursor:pointer;
  font-weight:700;
}
.bep-quick-listen .bep-prompt-text{margin-top:10px;max-height:320px}
@media(max-width:600px){.bep-quick-listen{padding:14px}}
/* quick-phrases｜発音・復唱練習のWeb画面案内 */
.bep-quick-listen-note{
  margin:10px 0 12px;
  padding:10px 12px;
  background:#fff8e6;
  border:1px solid #e5cb83;
  border-radius:4px;
  line-height:1.7;
}
.bep-quick-listen-note strong{
  color:#17365d;
}

/* ==================================================
   音声練習ページ
   Prompt 01-05 / 0章 / 0.5章 共通
   2026-08-22
================================================== */

.yt-listen-page{
  max-width:760px;
  margin:0 auto;
  padding:24px 18px 48px;
  color:#17365d;
}

/* ---------- ページ上部 ---------- */

.yt-listen-head{
  text-align:center;
  margin:0 0 28px;
}

.yt-listen-label{
  display:inline-block;
  margin-bottom:8px;
  font-size:16px;
  font-weight:700;
  color:#173e6b;
}

.yt-listen-head h1{
  margin:4px 0 8px;
  font-size:38px;
  line-height:1.3;
  font-weight:800;
  color:#172f52;
}

.yt-listen-en{
  margin:0;
  font-size:17px;
  color:#697584;
}

/* ---------- STEP案内 ---------- */

.yt-step-box{
  margin:26px 0 24px;
  padding:20px 22px;
  background:#eef5f9;
  border:1px solid #d3e0e9;
  border-radius:18px;
}

.yt-step-title{
  margin-bottom:8px;
  font-size:21px;
  line-height:1.4;
  font-weight:800;
  color:#173e6b;
}

.yt-step-box p{
  margin:0;
  font-size:16px;
  line-height:1.8;
  color:#30445b;
}

/* ---------- 音声カード ---------- */

.yt-audio-card{
  margin:16px 0;
  padding:20px;
  background:#ffffff;
  border:1px solid #d7e1ea;
  border-radius:18px;
  box-shadow:0 5px 16px rgba(23,62,107,.07);
}

.yt-audio-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:30px;
  margin-bottom:12px;
  padding:0 11px;
  background:#173e6b;
  border-radius:999px;
  color:#ffffff;
  font-size:13px;
  font-weight:800;
}

.yt-english{
  margin:0 0 7px;
  font-size:22px;
  line-height:1.45;
  font-weight:800;
  color:#17365d;
}

.yt-japanese{
  margin:0 0 16px;
  font-size:15px;
  line-height:1.7;
  color:#586879;
}

/* ---------- 大きな再生ボタン ---------- */

.yt-play-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
  margin-top:10px;
  padding:13px 18px;
  border:0;
  border-radius:12px;
  background:#173e6b;
  color:#ffffff;
  font-size:16px;
  line-height:1.3;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(23,62,107,.18);
  transition:transform .12s ease,
             background-color .12s ease;
}

.yt-play-button:hover{
  background:#0f3158;
}

.yt-play-button:active{
  transform:scale(.985);
}

.yt-play-button.is-playing{
  background:#315a7d;
}

/* 実際のaudio要素は画面上では隠す */
.yt-audio-hidden{
  display:none;
}

/* ---------- おすすめ練習方法 ---------- */

.yt-practice-tip{
  margin:28px 0 24px;
  padding:19px 21px;
  background:#fff8e8;
  border:1px solid #ead59a;
  border-radius:16px;
  font-size:15px;
  line-height:1.85;
  color:#3d3a2e;
}

.yt-practice-tip strong{
  display:block;
  margin-bottom:4px;
  color:#173e6b;
  font-size:17px;
}

/* ---------- ページ下部ボタン ---------- */

.yt-next{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid #d6e0e8;
  text-align:center;
}

.yt-next p{
  margin:0 0 15px;
  font-weight:700;
  color:#30445b;
}

.yt-main-button,
.yt-sub-button{
  display:block;
  width:100%;
  max-width:440px;
  margin:11px auto;
  padding:15px 18px;
  border-radius:12px;
  text-align:center;
  text-decoration:none !important;
  font-size:15px;
  font-weight:800;
  line-height:1.45;
}

.yt-main-button{
  background:#173e6b;
  color:#ffffff !important;
}

.yt-main-button:hover{
  background:#0f3158;
}

.yt-sub-button{
  background:#ffffff;
  border:1px solid #173e6b;
  color:#173e6b !important;
}

.yt-sub-button:hover{
  background:#eef5f9;
}

/* ---------- スマホ ---------- */

@media (max-width:600px){

  .yt-listen-page{
    padding:18px 14px 38px;
  }

  .yt-listen-head{
    margin-bottom:22px;
  }

  .yt-listen-head h1{
    font-size:30px;
    line-height:1.3;
  }

  .yt-listen-en{
    font-size:15px;
  }

  .yt-step-box{
    padding:17px 16px;
    border-radius:15px;
  }

  .yt-step-title{
    font-size:19px;
  }

  .yt-step-box p{
    font-size:15px;
  }

  .yt-audio-card{
    padding:18px 16px;
    border-radius:16px;
  }

  .yt-english{
    font-size:20px;
  }

  .yt-japanese{
    font-size:15px;
  }

  .yt-play-button{
    min-height:58px;
    font-size:17px;
    border-radius:13px;
  }

  .yt-main-button,
  .yt-sub-button{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

/* ==================================================
   音声再生ボタン：スマホ安定化修正
   2026-08-22
================================================== */

/* audioを display:none にしない。
   スマホブラウザが実体のあるaudioとして扱える状態を残す */
.yt-audio-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  left:-9999px !important;
  display:block !important;
}

/* テーマ側のbuttonスタイルに負けないよう明示 */
.yt-play-button,
.yt-play-button:hover,
.yt-play-button:focus,
.yt-play-button:focus-visible,
.yt-play-button:active,
.yt-play-button.is-playing{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:100% !important;
  min-height:58px !important;
  padding:14px 18px !important;

  background:#173e6b !important;
  background-color:#173e6b !important;

  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;

  border:0 !important;
  border-radius:13px !important;

  font-size:17px !important;
  line-height:1.35 !important;
  font-weight:800 !important;

  text-align:center !important;
  text-decoration:none !important;

  cursor:pointer;
  box-shadow:0 3px 8px rgba(23,62,107,.18);

  -webkit-tap-highlight-color:transparent;
}

/* 再生中も色を反転させない */
.yt-play-button.is-playing,
.yt-play-button.is-playing:hover,
.yt-play-button.is-playing:focus,
.yt-play-button.is-playing:active{
  background:#173e6b !important;
  background-color:#173e6b !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* タップ時は軽い押し込みだけ */
.yt-play-button:active{
  transform:scale(.985);
}

/* 音声再生ボタン：PCでは横幅を抑え、スマホでは100% */
@media (min-width: 601px){
  .yt-play-button{
    width: 360px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* 音声再生ボタン：PCでは360px固定、スマホでは100% */
@media (min-width: 601px){

  .yt-play-button,
  .yt-play-button:hover,
  .yt-play-button:focus,
  .yt-play-button:focus-visible,
  .yt-play-button:active,
  .yt-play-button.is-playing,
  .yt-play-button.is-playing:hover,
  .yt-play-button.is-playing:focus,
  .yt-play-button.is-playing:active{
    width:360px !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:auto !important;
  }

}

/* ==================================================
   音声練習ページ：再生速度切替
   0.75x / 1.0x
   2026-08-22
================================================== */

.yt-speed-control{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

.yt-speed-label{
  margin-right:2px;
  font-size:14px;
  font-weight:700;
  color:#5b6878;
}

.yt-speed-button{
  min-height:38px;
  padding:7px 14px !important;
  border:1px solid #b8c9d8 !important;
  border-radius:8px !important;
  background:#ffffff !important;
  color:#173e6b !important;
  -webkit-text-fill-color:#173e6b !important;
  font-size:14px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
  cursor:pointer;
  box-shadow:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}

.yt-speed-button:hover,
.yt-speed-button:focus,
.yt-speed-button:active{
  background:#eef5f9 !important;
  color:#173e6b !important;
  -webkit-text-fill-color:#173e6b !important;
}

/* 選択中の速度 */
.yt-speed-button.is-active,
.yt-speed-button.is-active:hover,
.yt-speed-button.is-active:focus,
.yt-speed-button.is-active:active{
  background:#173e6b !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:#173e6b !important;
}

@media (max-width:600px){

  .yt-speed-control{
    gap:7px;
  }

  .yt-speed-label{
    width:100%;
    margin-bottom:2px;
  }

  .yt-speed-button{
    min-height:42px;
    padding:8px 13px !important;
    font-size:14px !important;
  }

}

/* ==================================================
   Web練習ページ：音声練習への入口
   2026-08-22
================================================== */

.bep-audio-hub{
  margin:28px 0;
  padding:24px;
  background:#eef5f9;
  border:1px solid #d4e0e8;
  border-radius:18px;
}

.bep-audio-hub-head{
  margin-bottom:18px;
}

.bep-audio-hub-label{
  display:inline-block;
  margin-bottom:5px;
  padding:4px 10px;
  border-radius:999px;
  background:#173e6b;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.bep-audio-hub h2{
  margin:4px 0 8px;
  color:#173e6b;
}

.bep-audio-hub-head p{
  margin:0;
  line-height:1.8;
}

.bep-audio-hub-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.bep-audio-hub-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px;
  background:#fff;
  border:1px solid #d4dee7;
  border-radius:15px;
  color:#17365d !important;
  text-decoration:none !important;
  box-shadow:0 4px 12px rgba(23,62,107,.06);
}

.bep-audio-hub-card:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(23,62,107,.10);
}

.bep-audio-hub-kicker{
  font-size:13px;
  font-weight:700;
  color:#68788a;
}

.bep-audio-hub-card strong{
  font-size:19px;
  color:#17365d;
}

.bep-audio-hub-card span{
  line-height:1.6;
}

.bep-audio-hub-card b{
  margin-top:6px;
  color:#173e6b;
}

@media (max-width:600px){

  .bep-audio-hub{
    padding:18px 15px;
  }

  .bep-audio-hub-grid{
    grid-template-columns:1fr;
  }

  .bep-audio-hub-card{
    padding:18px 16px;
  }
}

/* Web練習ページ内「お手本を聞く」ボタン：PCでは左寄せ */
@media (min-width: 601px){
  .bep-prompt-listen-button{
    margin-left:0 !important;
    margin-right:auto !important;
  }
}