/* ============================================================
   研究倫理コンプライアンス研修会
   カラーシステム: オープン・サイエンス＆誠実性
   JavaScript 完全不使用 — HTML + CSS のみで全機能を実現
   ============================================================ */

/* ── CSS カスタムプロパティ ── */
:root {
  --navy:      #1a3a3a;
  --forest:    #00ab96;
  --teal:      #008f7e;
  --coral:     #e05c2a;
  --coral-dk:  #c0441a;
  --sky:       #e0f7f5;
  --sky-lt:    #f0faf9;
  --acc-lt:    #fff3ee;
  --gray:      #374151;
  --gray-md:   #6b7280;
  --gray-lt:   #f5faf9;
  --border:    #b2d8d4;
  --white:     #ffffff;
  --report:    #b45309;
  --report-lt: #fffbeb;
  --comp:      #00a050;
  --comp-lt:   #e0f5e9;
  --eth:       #6eb92b;
  --eth-lt:    #f0fae2;
  --font: 'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}

/* ── リセット ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--gray); background: var(--white); line-height: 1.7; display: flex; flex-direction: column; min-height: 100vh; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
main { flex: 1; }

/* ── レイアウト ── */
.wrap    { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.wrap-md { max-width:  960px; margin: 0 auto; padding: 0 24px; }
.wrap-sm { max-width:  680px; margin: 0 auto; padding: 0 24px; }

/* ================================================================
   ナビゲーション（CSS チェックボックスハック でモバイルメニュー）
   ================================================================ */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; }

.navbar {
  background: var(--navy);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 14px rgba(0,0,0,.25);
}
.navbar-inner {
  max-width: 1220px; margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.navbar-brand {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.navbar-brand img { object-fit: contain; }
.navbar-brand .logo-shield { height: 34px; }
.navbar-brand .logo-text   { height: 19px; filter: brightness(0) invert(1); }

.navbar-links {
  display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end;
}
.navbar-links a {
  color: rgba(255,255,255,.85); font-size: 11px; padding: 7px 9px;
  border-radius: 5px; white-space: nowrap; display: inline-block;
  transition: background .15s;
}
.navbar-links a:hover,
.navbar-links a.active { background: rgba(0,171,150,.75); color: #fff; font-weight: 700; }

@media (max-width: 768px) {
  .nav-toggle-label {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; cursor: pointer; border-radius: 6px;
    background: rgba(255,255,255,.1); flex-shrink: 0;
  }
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    display: block; width: 20px; height: 2px; background: #fff; position: relative;
    transition: .25s;
  }
  .nav-toggle-label span::before,
  .nav-toggle-label span::after { content: ''; position: absolute; }
  .nav-toggle-label span::before { top: -6px; }
  .nav-toggle-label span::after  { top:  6px; }

  .nav-toggle:checked ~ .navbar-inner .nav-toggle-label span { background: transparent; }
  .nav-toggle:checked ~ .navbar-inner .nav-toggle-label span::before { transform: rotate(45deg); top: 0; }
  .nav-toggle:checked ~ .navbar-inner .nav-toggle-label span::after  { transform: rotate(-45deg); top: 0; }

  .navbar-links {
    position: absolute; top: 60px; left: 0; right: 0;
    background: var(--navy); flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-toggle:checked ~ .navbar-inner ~ .navbar-links { max-height: 400px; }
  .navbar-links a { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; }
}

/* ================================================================
   フッター
   ================================================================ */
.footer { background: var(--navy); padding: 34px 24px 18px; color: rgba(255,255,255,.55); }
.footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 22px; }
.footer-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.footer-logo img {}
.footer-logo .logo-shield { height: 30px; }
.footer-logo .logo-text   { height: 17px; filter: brightness(0) invert(1);  }
.footer-address { font-size: 12px; line-height: 1.9; }
.footer-col-title { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.4); margin-bottom: 10px; letter-spacing: .08em; }
.footer a { display: block; font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 7px; }
.footer a:hover { color: #fff; }
.footer-copy { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; font-size: 11px; color: rgba(255,255,255,.3); text-align: center; }
@media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; gap: 20px; } }

/* ================================================================
   共通 UI コンポーネント
   ================================================================ */

/* セクションタイトル */
.section-title { text-align: center; margin-bottom: 34px; }
.section-title h2 { font-size: 24px; color: var(--navy); margin-bottom: 6px; }
.section-title p  { font-size: 13px; color: var(--gray-md); max-width: 520px; margin: 0 auto; }
.section-title::after { content: ''; display: block; width: 40px; height: 3px; background: var(--forest); border-radius: 2px; margin: 11px auto 0; }

/* バッジ */
.badge { display: inline-block; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 20px; letter-spacing: .03em; }
.badge-ec     { background: var(--sky);      color: var(--teal);     }
.badge-comp   { background: var(--comp-lt);  color: #006a30;         }
.badge-eth    { background: var(--eth-lt);   color: #3a6e10;         }
.badge-report { background: #fef3c7;         color: #92400e; border: 1px solid #fcd34d; }
.badge-opt    { background: var(--acc-lt);   color: var(--coral-dk); border: 1px solid var(--coral); }

/* ページヘッダー */
.page-header { padding: 42px 24px; }
.page-header-inner { max-width: 900px; margin: 0 auto; }
.page-header h1   { font-size: 27px; color: #fff; margin: 10px 0 7px; line-height: 1.35; font-weight: 700; }
.page-header p    { font-size: 14px; color: rgba(255,255,255,.88); line-height: 1.7; }
.ph-ec   { background: linear-gradient(120deg, #1a3a3a 0%, #00ab96 100%); }
.ph-comp { background: linear-gradient(120deg, #007a3a 0%, #00a050 100%); }
.ph-eth  { background: linear-gradient(120deg, #4a8a1a 0%, #6eb92b 100%); }
.ph-report { background: linear-gradient(120deg, #92400e 0%, #b45309 50%, #d97706 100%); }
.ph-contact { background: linear-gradient(120deg, #1a3a3a 0%, #00ab96 100%); }

/* ボタン */
.btn { display: inline-block; font-weight: 700; font-size: 14px; padding: 12px 32px; border-radius: 8px; letter-spacing: .03em; border: 2px solid; cursor: pointer; transition: opacity .15s; font-family: var(--font); }
.btn:hover { opacity: .82; }
.btn-forest { background: var(--forest);  color: #fff; border-color: var(--forest);  }
.btn-comp   { background: var(--comp);    color: #fff; border-color: var(--comp);    }
.btn-eth    { background: var(--eth);     color: #fff; border-color: var(--eth);     }
.btn-report { background: var(--report);  color: #fff; border-color: var(--report);  }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }

/* インフォ行 */
.info-row { display: flex; border-bottom: 1px solid var(--border); padding: 11px 0; }
.info-row dt { min-width: 185px; font-weight: 700; font-size: 13px; color: var(--navy); background: var(--sky-lt); padding: 5px 13px; border-radius: 4px; margin-right: 16px; flex-shrink: 0; align-self: flex-start; text-align: center;}
.info-row dd { font-size: 13px; color: var(--gray); line-height: 1.7; padding-top: 4px; }
@media (max-width: 600px) { .info-row { flex-direction: column; gap: 4px; } .info-row dt { min-width: unset; } }

/* 箇条書き */
.bullet-list li { display: flex; gap: 8px; font-size: 13px; color: var(--gray); line-height: 1.65; margin-bottom: 5px; }
/* ■マーカーはHTMLの<span>で出力するためCSS::beforeは削除 */

/* セクション背景 */
.sec-lt  { background: var(--gray-lt); padding: 46px 24px; }
.sec-wh  { background: var(--white);   padding: 46px 24px; }

/* セクションラベル */
.sec-label { font-weight: 700; font-size: 15px; color: var(--navy); border-left: 4px solid var(--forest); padding-left: 12px; margin-bottom: 14px; }
.sec-label-sm { font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 9px; }

/* コンテンツブロック */
.content-block { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 17px 22px; margin-bottom: 13px; }
.content-block-title { font-weight: 700; font-size: 13px; color: var(--navy); padding-left: 11px; margin-bottom: 12px; }
.cb-comp .content-block-title { border-left: 4px solid var(--comp); }
.cb-eth  .content-block-title { border-left: 4px solid var(--eth);  }
.cb-ec   .content-block-title { border-left: 4px solid var(--forest); }

/* お知らせバナー */
.notice { border-radius: 8px; padding: 12px 18px; margin-bottom: 24px; font-size: 12px; line-height: 1.85; }
.notice-teal  { background: var(--sky);     border: 1px solid rgba(0,171,150,.35); color: var(--teal);  }
.notice-coral { background: var(--acc-lt);  border: 1px solid rgba(224,92,42,.4);  color: var(--navy);  }
.notice-cream { background: var(--sky-lt);  border: 1px solid rgba(0,171,150,.35); color: var(--teal);  }
.notice-warn  { background: #fff8f5; border: 1px solid var(--coral); color: var(--navy);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; position: relative; }
.notice-warn::before { content: '！ 申込み前にご確認ください'; display: block; font-weight: 700; font-size: 12px; color: var(--coral-dk); margin-bottom: 8px; letter-spacing: .03em; }
.notice-warn li { font-size: 12px; padding-left: 14px; position: relative; line-height: 1.8; margin-bottom: 3px; }
.notice-warn li::before { content: '▸'; position: absolute; left: 0; color: var(--coral); font-weight: 700; }

/* プランカード */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
.plan-card { background: #fff; border: 2px solid var(--border); border-radius: 12px; padding: 19px 21px; }
.plan-tag  { font-weight: 700; font-size: 12px; margin-bottom: 5px; }
.plan-dur  { font-weight: 700; font-size: 26px; color: var(--navy); margin-bottom: 8px; }
.plan-desc { font-size: 13px; color: var(--gray); line-height: 1.7; }
.plan-card.selected-comp { border-color: #00a050; background: #f0faf9;}
.plan-card.selected-eth  { border-color: var(--eth);  background: #f0fae2; }
.plan-card.selected-ec   { border-color: var(--forest); background: #fff; }
@media (max-width: 600px) { .plan-grid { grid-template-columns: 1fr; } }

/* 納品物カード */
.delivery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.delivery-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 15px 17px; }
.delivery-type { font-weight: 700; font-size: 13px; margin-bottom: 9px; }
@media (max-width: 600px) { .delivery-grid { grid-template-columns: 1fr; } }

/* 更新ポイントカード */
.update-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
.update-card { background: var(--sky-lt); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.update-icon { font-size: 22px; margin-bottom: 7px; }
.update-title { font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 5px; }
.update-body  { font-size: 12px; color: var(--gray); line-height: 1.7; }

/* オプションノート */
.option-note { background: var(--gray-lt); border-radius: 8px; padding: 12px 16px; margin-top: 12px; font-size: 12px; color: var(--gray); line-height: 1.8; }

/* 日程アラート */
.schedule-alert { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, var(--navy) 0%, var(--forest) 100%); border-radius: 10px; padding: 14px 20px; margin: 20px 0 80px; color: #fff; flex-wrap: wrap; }
.schedule-icon  { font-size: 24px; flex-shrink: 0; }
.schedule-body  { flex: 1; }
.schedule-title { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.schedule-sub   { font-size: 12px; color: rgba(255,255,255,.85); line-height: 1.6; }
.schedule-alert .btn { flex-shrink: 0; font-size: 12px; padding: 7px 16px; background: #fff; color: var(--forest); border-color: #fff; }

/* 科研費誘導 */
.kakenhi-block { background: var(--sky-lt); border-left: 4px solid var(--forest); border-radius: 0 10px 10px 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 20px; margin-top: 20px; }
.kakenhi-title { font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 6px; }
.kakenhi-body  { font-size: 12px; color: var(--gray); line-height: 1.75; margin-bottom: 10px; }
.kakenhi-block .btn { font-size: 12px; padding: 7px 18px; }

/* 報告書オプションバナー */
.report-opt-banner { background: var(--report-lt); border: 2px solid var(--report); border-radius: 12px; padding: 18px 22px; margin-top: 20px; margin-bottom: 8px; }
.report-opt-label  { display: inline-flex; align-items: center; gap: 6px; background: var(--report); color: #fff; font-weight: 700; font-size: 11px; padding: 3px 11px; border-radius: 11px; margin-bottom: 10px; letter-spacing: .04em; }
.report-opt-body   { font-size: 12px; color: var(--gray); line-height: 1.8; margin-bottom: 12px; }
.report-opt-cols   { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.report-opt-list   { flex: 1; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.report-opt-list li { font-size: 12px; color: var(--gray); display: flex; gap: 6px; align-items: flex-start; }
.report-opt-list li::before { content: '✓'; color: var(--report); font-weight: 700; flex-shrink: 0; }
.report-opt-banner .btn { font-size: 12px; padding: 10px 20px; flex-shrink: 0; }

/* ================================================================
   ★ CSS のみのモーダル（details / summary を使用）
   ================================================================ */

/* カスタム項目グリッド */
.custom-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 8px; margin-bottom: 8px; }

/* details要素でモーダルを実現 */
/* ================================================================
   カスタム項目：クリックトリガー（カード）
   ================================================================ */
.custom-item-trigger {
  background: #ddeaf8; border: 1px solid rgba(48,112,184,0.28); border-radius: 8px; 
  padding: 10px 13px; font-size: 12px; font-weight: 600; color: var(--navy);
  display: flex; gap: 7px; align-items: flex-start; cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; text-decoration: none;
}
.custom-item-trigger:hover { background: #3070b8; }
.custom-item-trigger .trigger-arrow { font-weight: 700; flex-shrink: 0; }
.custom-item-trigger .trigger-text  { flex: 1; font-size: 12px; color: #3070b8; }
.trigger-text:hover { color: #fff;}
.custom-item-trigger .trigger-more  { font-size: 10px; opacity: .75; margin-left: auto; flex-shrink: 0; align-self: center; white-space: nowrap; }

/* ================================================================
   :target ベースのモーダル（JavaScript完全不使用）
   モーダルIDに # がついた URL になったとき表示
   「閉じる」は # のない別 URL（#page-top など）に遷移させる
   ================================================================ */
.modal-wrap {
  /* 通常時: 非表示 */
  display: none;
  position: fixed; inset: 0; z-index: 300;
  align-items: center; justify-content: center; padding: 20px;
}
/* オーバーレイ背景 */
.modal-wrap::before {
  content: ''; position: fixed; inset: 0;
  background: rgba(26,58,58,.55); z-index: 0;
}
/* :target で表示 */
.modal-wrap:target { display: flex; }

/* モーダル本体 */
.modal-box {
  position: relative; z-index: 1;
  background: #fff; border-radius: 14px; padding: 28px 30px;
  max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}

/* モーダル内容 */
.modal-title { font-weight: 700; font-size: 16px; color: var(--navy); line-height: 1.4; margin-bottom: 12px; padding-right: 12px; }
.modal-audience {
  display: inline-block; background: var(--sky); color: #006b5f;
  border: 1px solid rgba(0,171,150,.35); border-radius: 12px; font-size: 11px;
  font-weight: 700; padding: 4px 12px; margin-bottom: 12px; max-width: 100%;
}
.modal-desc { background: var(--sky-lt); border: 1px solid rgba(0,171,150,.25); border-radius: 8px; padding: 13px 16px; margin-bottom: 16px; font-size: 13px; color: var(--gray); line-height: 1.85; }
.modal-items-label { font-weight: 700; font-size: 12px; color: var(--navy); margin-bottom: 8px; border-left: 3px solid var(--forest); padding-left: 8px; }
.modal-close-btn {
  display: block; text-align: right; margin-top: 16px;
}
.modal-close-btn a {
  font-size: 12px; color: var(--gray-md); background: var(--gray-lt);
  padding: 6px 16px; border-radius: 6px; display: inline-block;
  border: 1px solid var(--border); text-decoration: none; font-weight: 700;
}
.modal-close-btn a:hover { background: var(--border); color: var(--navy); }

/* ================================================================
   画像挿入エリア（CSS details でプロンプト表示）
   ================================================================ */

.img-placeholder-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 35px 24px; gap: 10px; min-height: inherit; }
.img-placeholder-icon  { font-size: 36px; opacity: .65; }
.img-placeholder-label { font-weight: 700; font-size: 14px; color: var(--teal); }
.img-placeholder-hint  { font-size: 11px; color: var(--teal); opacity: .8; line-height: 1.5; max-width: 340px; }

/* プロンプト details */
.prompt-details summary {
  display: inline-block; background: var(--forest); color: #fff;
  border: none; border-radius: 6px; font-size: 11px; font-weight: 700;
  padding: 6px 14px; cursor: pointer; list-style: none; margin-top: 4px;
  font-family: var(--font);
}
.prompt-details summary::-webkit-details-marker { display: none; }
.prompt-panel { background: rgba(26,58,58,.93); color: #fff; padding: 14px 18px; font-size: 11px; line-height: 1.7; border-top: 2px solid var(--forest); text-align: left; border-radius: 0 0 10px 10px; }
.prompt-panel-title { font-weight: 700; font-size: 12px; color: #81E6D9; margin-bottom: 6px; }
.prompt-text { white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 11px; }

/* ================================================================
   ヒーロー
   ================================================================ */
.hero { background: linear-gradient(135deg,#1a3a3a 0%,#008f7e 50%,#00ab96 100%); padding: 60px 24px 72px; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 75% 35%,rgba(0,171,150,.22) 0%,transparent 52%),radial-gradient(circle at 20% 70%,rgba(224,92,42,.14) 0%,transparent 45%); pointer-events: none; }
.hero-inner { position: relative; max-width: 740px; margin: 0 auto; }
.hero-logo  { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.hero-logo img { object-fit: contain; }
.hero-logo .logo-shield { height: 42px; }
.hero-logo .logo-text   { height: 21px;  filter: brightness(0) invert(1);}
.hero-label { display: inline-block; background: rgba(0,171,150,.2); border: 1px solid rgba(0,171,150,.45); border-radius: 20px; padding: 4px 16px; font-size: 12px; color: rgba(255,255,255,.92); margin-bottom: 17px; letter-spacing: .06em; }
.hero h1   { font-size: 40px; color: #fff; margin: 0 0 13px; line-height: 1.35; font-weight: 700; }
.hero h1 span { color: #81E6D9; }
.hero p    { font-size: 15px; color: rgba(255,255,255,.88); margin: 0 0 30px; line-height: 1.9; }
.hero-img  { margin-top: 36px; }
.img-area {    width: 100%; max-width: 800px; margin: 0 auto; padding: 60px 20px;}
@media (max-width: 600px) { .hero h1 { font-size: 26px; } .hero { padding: 44px 18px 54px; } }

/* ================================================================
   ホーム：選ばれる理由
   ================================================================ */
.reasons-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 16px; }
.reason-card  { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px 18px; }
.reason-icon  { font-size: 24px; margin-bottom: 8px; text-align: center;}
.reason-title { font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 6px; line-height: 1.4; text-align: center;}
.reason-body  { font-size: 12px; color: var(--gray); line-height: 1.7; }

/* ================================================================
   ホーム：サービスカード
   ================================================================ */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 18px; }
.service-card  { border: 1.5px solid; border-radius: 13px; padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 11px; transition: box-shadow .18s, transform .18s; }
.service-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.12); transform: translateY(-3px); }
.service-card-ec     { border-color: #00ab96; }
.service-card-comp   { border-color: #00a050; }
.service-card-eth    { border-color: #6eb92b; }
.service-card-report { border-color: #b45309; }
.service-title { font-weight: 700; font-size: 16px; color: var(--navy); margin-bottom: 3px; }
.service-sub   { font-size: 12px; color: var(--gray-md); }
.service-meta  { display: flex; flex-direction: column; gap: 5px; }
.service-meta-row { display: flex; gap: 7px; font-size: 12px; }
.service-meta-key { font-weight: 700; min-width: 60px; }
.service-more  { font-weight: 700; font-size: 12px; }

/* ================================================================
   ホーム：対応期間
   ================================================================ */
.period-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.period-card { background: #fff; border: 1px solid var(--border); border-top: 3px solid; border-radius: 12px; padding: 20px 19px; }
.period-icon   { font-size: 26px; margin-bottom: 8px; text-align: center;}
.period-method { font-weight: 700; font-size: 14px; color: var(--navy); margin-bottom: 5px; text-align: center; }
.period-badge  { display: inline-block; background: var(--sky-lt); color: var(--teal); font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: 12px; margin-bottom: 8px; }
.period-range  { font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.period-detail { font-size: 12px; color: var(--gray); line-height: 1.7; }
@media (max-width: 700px) { .period-grid { grid-template-columns: 1fr; } }

/* ================================================================
   ホーム：依頼の流れ
   ================================================================ */
.flow-list { display: flex; flex-direction: column; gap: 10px; }
.flow-item { display: flex; gap: 16px; background: var(--gray-lt); border: 1px solid var(--border); border-radius: 10px; padding: 15px 21px; align-items: flex-start; }
.flow-num  { background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; min-width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.flow-title { font-weight: 700; font-size: 14px; color: var(--navy); margin-bottom: 3px; }
.flow-body  { font-size: 12px; color: var(--gray); line-height: 1.7; }

/* ================================================================
   CTA バナー
   ================================================================ */
.cta-banner { background: linear-gradient(120deg,#1a3a3a 0%,#00ab96 100%); padding: 42px 24px; text-align: center; }
.cta-banner h2 { font-size: 19px; color: #fff; margin-bottom: 9px; font-weight: 700; }
.cta-banner p  { font-size: 13px; color: rgba(255,255,255,.72); margin-bottom: 23px; }

/* ================================================================
   特徴バナー（研究倫理・コンプライアンス研修会）
   ================================================================ */
.feature-banner { background: linear-gradient(120deg,#1a3a3a 0%,#00ab96 100%); border-radius: 12px; padding: 24px 28px; margin-bottom: 28px; color: #fff; }
.feature-banner h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 10px; }
.feature-item { background: rgba(255,255,255,.10); border-radius: 8px; padding: 12px 14px; }
.feature-item-icon  { font-size: 18px; margin-bottom: 5px; }
.feature-item-title { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.feature-item-body  { font-size: 11px; color: rgba(255,255,255,.82); line-height: 1.65; }

/* 導入実績 */
.testimonial { background: var(--acc-lt); border: 1px solid rgba(224,92,42,.4); border-radius: 8px; padding: 14px 20px; margin-bottom: 28px; }
.testimonial-title { font-weight: 700; font-size: 13px; color: var(--coral-dk); margin-bottom: 6px; }
.testimonial-body  { font-size: 13px; color: var(--gray); line-height: 1.8; }

/* ================================================================
   報告書作成ページ
   ================================================================ */
.opt-header { background: #fff8f5; border-bottom: 2px solid var(--coral); padding: 10px 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.merit-wrap { background: linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%); border: 1px solid rgba(180,83,9,.25); border-radius: 12px; padding: 22px 26px; margin-bottom: 80px; }
.merit-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px; }
.merit-card { background: #fff; border-radius: 10px; padding: 16px; border: 1px solid var(--border); }
.merit-card-icon  { font-size: 22px; margin-bottom: 7px; text-align: center;}
.merit-card-title { font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 5px; }
.merit-card-body  { font-size: 12px; color: var(--gray); line-height: 1.7; }
.service-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svc-detail-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 17px 20px; }
.svc-detail-card-title { font-weight: 700; font-size: 13px; margin-bottom: 11px; line-height: 1.4; }
.svc-teal    { border-top: 3px solid var(--teal);     }
.svc-forest  { border-top: 3px solid var(--forest);   }
.svc-mustard { border-top: 3px solid var(--coral);    }
.svc-navy    { border-top: 3px solid var(--navy);     }
.usecase-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 12px; }
.usecase-card { background: var(--sky-lt); border-radius: 12px; padding: 18px; border: 1px solid var(--border); }
.usecase-icon  { font-size: 24px; margin-bottom: 8px; text-align: center;}
.usecase-title { font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 5px;  text-align: center; }
.usecase-body  { font-size: 12px; color: var(--gray); line-height: 1.7; }
.fee-box { background: var(--gray-lt); border-radius: 10px; padding: 18px 22px; font-size: 13px; color: var(--gray); line-height: 1.9; }
.fee-box-title { font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.fee-note { margin-top: 10px; padding: 10px 14px; background: #fff; border-radius: 7px; border: 1px solid var(--border); font-size: 12px; }
@media (max-width: 600px) { .service-2col { grid-template-columns: 1fr; } }

/* ================================================================
   お申込みページ
   ================================================================ */
.contact-box { background: var(--sky-lt); border: 1px solid var(--border); border-radius: 12px; padding: 28px 32px; text-align: center; margin-bottom: 34px; }
.contact-logo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 13px; }
.contact-logo .logo-shield { height: 34px; }
.contact-logo .logo-text   { height: 17px; }
.contact-name    { font-weight: 700; font-size: 15px; color: var(--navy); margin-bottom: 7px; }
.contact-address { font-size: 13px; color: var(--gray); line-height: 1.85; margin-bottom: 20px; }
.contact-btn { display: inline-block; background: var(--forest); color: #fff; font-weight: 700; font-size: 13px; padding: 12px 36px; border-radius: 8px; letter-spacing: .03em; transition: opacity .15s; }
.contact-btn:hover { opacity: .82; }
.steps-list { display: flex; flex-direction: column; }
.step-item { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.step-num  { background: var(--navy); color: #fff; font-weight: 700; font-size: 12px; min-width: 31px; height: 31px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-title { font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 3px; }
.step-body  { font-size: 12px; color: var(--gray); line-height: 1.7; }
.notes-box { background: var(--gray-lt); border-radius: 10px; padding: 15px 19px; margin-top: 22px; font-size: 12px; color: var(--gray); line-height: 1.85; }
.notes-title { font-weight: 700; color: var(--navy); margin-bottom: 5px; }

/* ================================================================
   ユーティリティ
   ================================================================ */
.mb-8  { margin-bottom:  8px; }
.mb-14 { margin-bottom: 14px; }
.mb-20 { margin-bottom: 20px; }
.mb-28 { margin-bottom: 80px; }
.mb-30 { margin-bottom: 80px; }
.mb-32 { margin-bottom: 80px; }
.mt-14 { margin-top: 14px; }
.mt-20 { margin-top: 20px; }
.tc    { text-align: center; }
.divider-sub { font-size: 12px; color: var(--gray-md); margin-bottom: 14px; }
.strong-report { color: var(--report); font-weight: 700; }

/* bullet-list の色を CSS変数で受け取る */
.bullet-list li span:first-child { color: var(--dot-color, var(--forest)); }