/* =========================================
  assets/styles.css（整理版）
========================================= */

:root{
  --brand-green:#009144; --text:#111; --bg:#fff;
  --blue:#639ef8; --purple:#5521c6;
  --hero-blue:#8FC8FF; --hero-purple:#D2B6FF;
  --muted:#f6f8fa; --border:#e5e7eb; --shadow:0 6px 20px rgba(0,0,0,.08);
  --navbar-bg:#009144; --navbar-fg:#fff;
  --footer-bg:#2c3e50; --footer-fg:#ecf0f1;
  --header-h:60px; --quicknav-h:48px;
  --quicknav-bg:rgba(255,244,206,.35);
}
@media (max-width:768px){ :root{ --header-h:56px; --quicknav-h:52px; } }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; color:var(--text); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; line-height:1.6; }
.visually-hidden,.sr-only{ position:absolute!important; width:1px; height:1px; margin:-1px; border:0; padding:0; white-space:nowrap; clip-path:inset(100%); clip:rect(0 0 0 0); overflow:hidden; }

.container{ width:min(1100px,100%); margin-inline:auto; padding:32px 24px; }
@media (max-width:768px){ .container{ padding-left:15px; padding-right:15px; } }

body{ padding-top:50px; } @media (max-width:768px){ body{ padding-top:54px; } }

/* Header */
.navbar{ position:fixed; inset:0 0 auto 0; z-index:999; }
.navbar-inverse{ background:var(--navbar-bg); color:var(--navbar-fg); }
.navbar .container{ padding:10px 24px; display:flex; align-items:center; gap:16px; }
.navbar-header{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.navbar-brand img{ height:34px; width:auto; display:block; }
.navbar-toggle{ display:none; margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.4); padding:6px 8px; border-radius:4px; color:#fff; }
.icon-bar{ display:block; width:22px; height:2px; background:#fff; margin:4px 0; }
.navbar-collapse{ margin-left:auto; }
.navbar-nav{ list-style:none; display:flex; gap:14px; margin:0; padding:0; flex-wrap:nowrap; white-space:nowrap; }
.navbar-nav a{ color:#fff; text-decoration:none; opacity:.9; font-size:15px; }
.navbar-nav a:hover{ opacity:1; text-decoration:underline; }
.navbar-right{ margin-left:auto; }
@media (max-width:900px){
  .navbar-toggle{ display:block; }
  .navbar .container{ flex-wrap:wrap; }
  .navbar-collapse{ display:none; width:100%; }
  .navbar-collapse.in{ display:block; }
  .navbar-nav{ flex-direction:column; gap:0; }
  .navbar-nav li{ border-top:1px solid rgba(255,255,255,.1); }
  .navbar-nav a{ display:block; padding:12px 4px; }
}
@media (min-width:1200px){ .navbar .container{ width:min(1280px,100%); } }

/* Hero */
.hero{ position:relative; background:linear-gradient(135deg,#7faee9,#b19cff); color:#fff; overflow:hidden; }
.hero__image{ position:relative; min-height:300px; background-image:url('./title.png'); background-position:center; background-repeat:no-repeat; background-size:contain; z-index:1; }
.hero__copy{ display:none; }
.tag{ display:inline-block; background:rgba(255,255,255,.2); padding:6px 10px; border-radius:999px; font-size:14px; }
.catch{ margin:10px 0 0; font-size:clamp(18px,3vw,28px); }

/* Sections */
.section{ background:#fff; } .section:nth-of-type(odd){ background:var(--muted); }
.section__lead{ margin:0 0 16px; color:#444; }
.section__title{ display:table; margin:0 auto 14px; position:relative; padding-bottom:.05em; text-align:center; z-index:0; font-size:clamp(18px,2.4vw,22px); }
.section__title::after{ content:""; position:absolute; left:0; right:0; bottom:.08em; height:.55em; border-radius:4px; background:linear-gradient(90deg,rgba(79,164,255,.45),rgba(179,112,255,.45)); z-index:-1; }

/* Accordion / Forms / Buttons */
.accordion{ border:1px solid var(--border); border-radius:8px; background:#fff; overflow:hidden; }
.accordion__summary{ width:100%; text-align:left; padding:16px 18px; background:#fff; border:0; border-bottom:1px solid var(--border); font-weight:700; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.accordion__summary.is-cta{ background:linear-gradient(90deg,#2BB673,#23A35E); color:#fff; border:0; border-radius:10px; box-shadow:0 8px 22px rgba(35,163,94,.28); font-size:clamp(16px,1.7vw,18px); padding:16px 18px 16px 52px; position:relative; }
.accordion__summary.is-cta:hover{ filter:brightness(1.05); }
.accordion__summary.is-cta::before{ content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%); width:22px; height:22px; opacity:.95;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>') center/contain no-repeat; }
.accordion__chevron{ transition:transform .25s ease; }
.accordion__summary[aria-expanded="true"] .accordion__chevron{ transform:rotate(-180deg); }
.accordion__panel{ padding:16px; }

.form-field{ display:grid; gap:6px; margin-bottom:12px; }
input[type="text"],input[type="email"]{ border:1px solid var(--border); border-radius:6px; padding:10px 12px; font-size:16px; width:100%; }
.form-note{ font-size:12px; color:#555; margin-top:10px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:10px 14px; border-radius:6px; text-decoration:none; font-weight:700; transition:background-color .2s ease, opacity .2s ease; border:0; cursor:pointer; }
.btn--primary{ color:#fff; background:var(--brand-green); } .btn--primary:hover{ background:#007a37; }
.btn--with-icon .icon{ width:18px; height:18px; display:inline-block; object-fit:contain; }

/* DL カード */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cards--stack{ grid-template-columns:1fr!important; max-width:800px; width:100%; margin-inline:auto; }
.card{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px; box-shadow:var(--shadow); }
.card h4{ margin:0; font-size:16px; }
.card--blue{ border-left:6px solid var(--blue); } .card--purple{ border-left:6px solid var(--purple); }
.card--dl{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
@media (max-width:600px){
  .card--dl{ flex-direction:column; text-align:center; }
  .card--dl h4{ width:100%; text-align:center; }
  .card--dl .btn{ margin-inline:auto; }
}

/* 動画カード */
.subheading{ margin:24px 0 8px; font-size:16px; color:#222; }
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:900px){ .video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .video-grid{ grid-template-columns:1fr; } }
.video-thumb{ position:relative; padding:16px; text-align:left; cursor:pointer; overflow:visible; z-index:0; }
.video-thumb__title{ display:block; padding-right:60px; }
.video-thumb::after{ content:""; position:absolute; top:50%; right:16px; width:24px; height:24px; border-radius:50%; background:#f00; transform:translateY(-50%); box-shadow:0 2px 6px rgba(0,0,0,.25); z-index:0; }
.video-thumb::before{ content:""; position:absolute; top:50%; right:21px; width:0; height:0; border-left:10px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; transform:translate(0,-50%); z-index:1; }

/* モーダル */
.modal{ position:fixed; inset:0; display:none; z-index:10000; }
.modal[aria-hidden="false"]{ display:block; }
.modal__backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:0; }
.modal__dialog{ position:relative; z-index:1; margin:5vh auto; width:min(960px,92%); background:#fff; border-radius:10px; box-shadow:var(--shadow); padding:18px; }
.modal__close{ position:absolute; right:10px; top:10px; border:0; background:transparent; font-size:24px; cursor:pointer; }
.modal__title{ margin:0 0 10px; font-size:16px; }
.video-embed{ position:relative; padding-top:56.25%; background:#000; border-radius:8px; overflow:hidden; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; }

/* Quick Navigator */
.quick-nav{ position:sticky; top:var(--header-h); z-index:900; background:linear-gradient(90deg,var(--quicknav-bg),rgba(255,255,255,.65)); backdrop-filter:blur(6px); border-bottom:1px solid rgba(0,0,0,.06); }
.quick-nav .container{ padding-top:6px; padding-bottom:6px; }
@media (max-width:768px){ .quick-nav .container{ padding-top:4px; padding-bottom:4px; } }
.quick-nav__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.quick-nav__label{ font-weight:800; font-size:11px; letter-spacing:0; line-height:1.2; margin-right:8px; color:#4b5563; opacity:.9; }
.quick-nav__close{ border:0; background:#fff; color:#111; width:28px; height:28px; border-radius:6px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.1); line-height:1; font-size:18px; }

.quick-nav__list{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:0; padding:0; list-style:none; margin-top:-4px; }
@media (max-width:480px){ .quick-nav__list{ margin-top:-6px; } }

.quick-nav__chip{ display:inline-flex; align-items:center; gap:.5em; text-decoration:none; font-weight:700; font-size:14px; padding:10px 14px; border-radius:8px; color:#262626;
  background:linear-gradient(#fff,#f3f6ff); border:1px solid rgba(0,0,0,.12); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 14px rgba(0,0,0,.08);
  transition:transform .06s ease, box-shadow .12s ease, background-color .2s ease; }
.quick-nav__chip::before{ content:""; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(90deg,#4FA4FF,#B370FF); box-shadow:0 0 0 2px rgba(79,164,255,.12); }
.quick-nav__chip:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 10px 22px rgba(0,0,0,.12); }
.quick-nav__chip:active{ transform:translateY(0); box-shadow:0 4px 10px rgba(0,0,0,.1); background:linear-gradient(#eef2ff,#e8ecff); }
.quick-nav__chip.is-active{ background:linear-gradient(#eaf3ff,#e9e7ff); border-color:rgba(79,164,255,.35); box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 0 0 2px rgba(79,164,255,.18), 0 8px 18px rgba(0,0,0,.1); }

/* ★QuickNav：非表示クラス */
.quick-nav.quick-nav--hidden{ display:none; }

/* QuickNav 再表示ボタン（左下固定） */
.quick-nav__toggle{
  position:fixed; left:16px; bottom:16px; z-index:850;
  display:none; padding:10px 14px; border-radius:10px; border:0; cursor:pointer;
  font-weight:800; letter-spacing:.08em; color:#183153;
  background:linear-gradient(#fff8e1,#fff2c1); box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.quick-nav__toggle:hover{ filter:brightness(1.03); }
.quick-nav__toggle--show{ display:inline-block; }
@media (max-width:768px){
  .quick-nav__toggle{ left:12px; bottom:12px; padding:12px 16px; border-radius:12px; }
}

/* プロモ固定バナー（右下） */
.promo-banner{ position:fixed; right:16px; bottom:16px; width:300px; height:100px; z-index:9999; display:none; }
.promo-banner--show{ display:block; animation:promoIn .25s ease-out; }
@keyframes promoIn{ from{ transform:translateY(12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.promo-banner__link{ display:block; width:100%; height:100%; border-radius:0; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.promo-banner__img{ width:100%; height:100%; object-fit:cover; display:block; }
.promo-banner__close{ position:absolute; top:-8px; right:-8px; width:28px; height:28px; border:0; background:#111; color:#fff; font-size:18px; line-height:1; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25); }
@media (max-width:480px){
  .promo-banner{ right:10px; bottom:10px; width:min(92vw,300px); height:auto; }
  .promo-banner__img{ height:auto; }
}

/* Footer */
.midnight-blue{ background:var(--footer-bg); color:var(--footer-fg); }
#footer .container{ padding-top:18px; padding-bottom:18px; }
#footer a{ color:#cfe6ff; text-decoration:none; }
#footer a:hover{ text-decoration:underline; }
.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.col-sm-6{ flex:0 0 calc(50% - 12px); max-width:calc(50% - 12px); }
@media (max-width:600px){ .col-sm-6{ flex-basis:100%; max-width:100%; } }
.pull-right{ margin-left:auto; display:flex; gap:16px; align-items:center; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.gototop{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.4); border-radius:50%; }
.gototop i::before{ content:"▲"; font-style:normal; }

.link{ color:var(--blue); } .link:hover{ text-decoration:underline; }

/* === 準備中動画（クリック不可・半透明化） === */
.video-thumb.is-disabled {
  pointer-events: none;              /* クリック無効 */
  opacity: 0.55;                     /* 半透明化 */
  position: relative;
  filter: grayscale(60%);
}



/* 再生アイコン非表示 */
.video-thumb.is-disabled::before,
.video-thumb.is-disabled::after:nth-child(odd) {
  display: none;
}

/* === 準備中カード・ボタンのスタイル === */
.card.is-disabled,
.card--dl.is-disabled {
  opacity: 0.6;
  pointer-events: none;
  filter: grayscale(50%);
}

.btn.is-disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}

.btn.is-disabled .icon {
  filter: grayscale(100%) brightness(1.6);
  opacity: 0.8;
}

/* ===============================
   読者特典登録フォーム（完全整理版）
================================= */
#OF_form1 {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
  background: #fff;
  border: 1px solid #e3e5e8;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

/* テーブル構造をブロックに変更 */
#OF_form1 table {
  width: 100%;
  border-collapse: collapse;
}
#OF_form1 tr,
#OF_form1 td {
  display: block;
  width: 100%;
  margin-bottom: 18px;
}

/* ラベル・見出し */
#OF_form1 p {
  font-weight: 600;
  color: #333;
  margin: 0 0 6px;
  font-size: 15px;
}
#OF_form1 p span {
  background: #d22;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
}

/* 入力欄共通 */
#OF_form1 input[type="text"],
#OF_form1 input[type="email"],
#OF_form1 select {
  width: 100%;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fafafa;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#OF_form1 input:focus,
#OF_form1 select:focus {
  outline: none;
  border-color: #639ef8;
  box-shadow: 0 0 0 3px rgba(99,158,248,0.25);
}

/* チェックボックス・ラジオボタン */
#OF_form1 label {
  display: block;
  margin: 4px 0;
  font-size: 15px;
  cursor: pointer;
}
#OF_form1 input[type="checkbox"],
#OF_form1 input[type="radio"] {
  margin-right: 6px;
  transform: scale(1.2);
}

/* ボタン */
#OF_form1 button[type="submit"] {
  display: block;
  margin: 24px auto 0;
  background: linear-gradient(90deg, #2BB673, #23A35E);
  color: #fff;
  font-weight: 700;
  padding: 12px 32px;
  border: 0;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}
#OF_form1 button[type="submit"]:hover {
  filter: brightness(1.08);
}

/* 見出し中央寄せ */
#OF_form1 h2,
#OF_form1 h3 {
  text-align: center;
  font-weight: 700;
  margin-bottom: 24px;
}

/* =========================================
   生年月日フィールド：最終安定版
========================================= */

/* PC時（横並び） */
#OF_form1 .birth-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  margin: 4px 0 8px;
}

#OF_form1 select[name="birth1"] {
  flex: 1 1 180px;
  min-width: 150px;
  max-width: 240px;
}

#OF_form1 select[name="birth2"],
#OF_form1 select[name="birth3"] {
  flex: 0 0 80px;
  min-width: 72px;
}

/* select共通（PC・SP共通） */
#OF_form1 select {
  font-size: 16px;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #fafafa;
  padding: 8px 32px 8px 12px;
  line-height: 1.4;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position:
    calc(100% - 18px) center,
    calc(100% - 13px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#OF_form1 select:focus {
  border-color: #639ef8;
  box-shadow: 0 0 0 3px rgba(99,158,248,0.25);
  outline: none;
}

/* スマホ時（縦3行） */
@media (max-width: 600px) {
  #OF_form1 .birth-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
  }

  #OF_form1 select[name="birth1"],
  #OF_form1 select[name="birth2"],
  #OF_form1 select[name="birth3"] {
    width: 100%;
    height: 44px;              /* ←高さ固定 */
    line-height: 44px;
    padding: 0 36px 0 12px;    /* テキスト中央揃え */
  }
}

/* スマホ時（縦3行） — 置き換え推奨 */
@media (max-width: 600px) {
  #OF_form1 .birth-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
  }

  /* birth1 / birth2 / birth3 共通の高さを固定し、行高は通常に戻す */
  #OF_form1 select[name="birth1"],
  #OF_form1 select[name="birth2"],
  #OF_form1 select[name="birth3"] {
    width: 100%;
    height: 44px;          /* 高さは固定 */
    min-height: 44px;
    line-height: normal;   /* ← ここが重要：44pxは使わない */
    padding: 8px 36px 8px 12px;
  }

  /* 外部CSS（.form-select / .form-select-lg）があっても潰す保険 */
  #OF_form1 .form-select,
  #OF_form1 .form-select.form-select-lg {
    -webkit-appearance: menulist;
            appearance: menulist;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 48px !important;
    line-height: normal !important;
    padding: 8px 36px 8px 12px !important;
    background-position: calc(100% - 14px) center !important;
  }
}

/* スマホ時：OS標準の矢印だけを使い、自作の矢印を消す */
@media (max-width: 600px) {
  #OF_form1 select {
    -webkit-appearance: menulist !important;
            appearance: menulist !important; /* ← 標準の矢印を使う */
    background-image: none !important;       /* ← 自作のV矢印を消す */
    background-repeat: no-repeat !important;
    padding-right: 12px;                      /* 右の余白を通常値へ */
  }
}

/* プライバシーポリシー同意エリア */
.policy-section {
  margin-top: 30px;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  background-color: #fafafa;
}

.policy-section h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.policy-box {
  height: 180px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.policy-box::-webkit-scrollbar {
  width: 6px;
}
.policy-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 3px;
}

.agree-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #333;
}

.agree-check input[type="checkbox"]:disabled + label {
  color: #aaa;
}

@media (max-width: 600px) {
  .policy-section {
    padding: 15px;
  }
  .policy-box {
    height: 160px;
    font-size: 13px;
  }
}

/* =========================================
   プライバシーポリシー同意ブロック
========================================= */
.policy-section {
  margin-top: 30px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

.policy-section h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

#privacy-area {
  font-weight: 500;
  line-height: 1.6;
  color: #222;
}

.agree-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 15px;
}

/* 同意チェックが無効時のボタンスタイル */
#OF_form1 button[type="submit"],
#OF_form1 input[type="submit"] {
  display: inline-block;
  margin: 24px auto 0;
  background: linear-gradient(90deg, #2BB673, #23A35E);
  color: #fff;
  font-weight: 700;
  padding: 12px 32px;
  border: 0;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

/* 無効時（クリック不可） */
#OF_form1 button[type="submit"]:disabled,
#OF_form1 input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* スマホ時 */
@media (max-width: 600px) {
  .policy-section {
    padding: 15px;
  }
  #privacy-area {
    height: 260px;
    font-size: 0.9rem;
  }
}