/* 
 * GFI 研修用HP - common.css（共通UI / 下層共通UI / 再利用コンポーネント）
 * Split from: base.css
 * Last Updated: 2026-01-29
 *
 * 方針
 * - base.css   : Tokens / Reset / Utilities / (generic responsive)
 * - common.css : Header/Nav/Footer + 共通UIコンポーネント
 *
 * DO NOT REMOVE（JS依存のクラス）
 * - body.nav-open / .c-siteNav, .nav-menu.active / .nav-overlay.active（script.js）
 * - .scroll-indicator.visible / body.has-scroll-indicator（progress/scroll-indicator系）
 * - .acc[aria-expanded="true"]（accordion.js）
 * - body.show-* / [data-layer]（integrated.js）
 * - body.is-check-mode / .lg-check（lg.js）
 */

/* ========================================
    Layout（全ページ共通）
======================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Header & Navigation（全ページ共通）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.c-siteHeader, .header{
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--white);
  box-shadow: var(--shadow);
  z-index: 1000;
}

.c-siteHeader__inner, .header-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 1rem 1.5rem;

  /* 背景（header自体）はフル幅、内側は中央寄せ（以前の見た目） */
  max-width: 1200px;
  margin: 0 auto;
}

.c-siteHeader__logo, .logo{
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: .5px;
}
/* ロゴ本体は黒系、span（社外秘）だけをアクセント色に */
.c-siteHeader__logo span, .logo span{ 
  color: var(--emerald); 
  font-size: .85rem;
  font-weight: 400;
}

.header-actions{
  display:flex;
  align-items:center;
  gap: 1rem;
}

/* Hamburger（タップ領域 44px 以上） */
.c-siteHeader__toggle, .menu-toggle{
  background: var(--emerald);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  cursor: pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: 5px;
  transition: transform .2s ease, background .2s ease;
  flex-shrink: 0;
}

/* hover はボタン本体にのみ */
.c-siteHeader__toggle:hover, .menu-toggle:hover{ background: var(--emerald-dark); transform: scale(1.05); }

/* span は子要素にのみ */
.c-siteHeader__toggle span, .menu-toggle span{
  width: 20px;
  height: 2px;
  background: var(--white);
  transition: transform .25s ease, opacity .2s ease;
}
.c-siteHeader__toggle.active span:nth-child(1),
.menu-toggle.active span:nth-child(1){ transform: rotate(45deg) translate(5px, 5px); }

.c-siteHeader__toggle.active span:nth-child(2),
.menu-toggle.active span:nth-child(2){ opacity: 0; }

.c-siteHeader__toggle.active span:nth-child(3),
.menu-toggle.active span:nth-child(3){ transform: rotate(-45deg) translate(7px, -7px); }

/* Drawer menu（右）
   iPhone / Safari対応：
   - ヘッダーの下から表示
   - ドロワー自身を縦スクロール領域にする
   - 100dvhでSafariのアドレスバー変動にも追従
*/
.c-siteNav, .nav-menu{
  position: fixed;
  top: 73px;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);

  /* 100vh fallback → 対応ブラウザでは100dvh */
  height: calc(100vh - 73px);
  height: calc(100dvh - 73px);
  max-height: calc(100dvh - 73px);

  background: var(--white);
  box-shadow: var(--shadow-lg);

  /* header分のpadding-topは不要。メニューはheader直下から開始 */
  padding-top: 0;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));

  transform: translateX(105%);
  transition: transform .35s ease;

  /* ★メニュー内をスクロール可能にする */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;

  z-index: 999;
  text-align: left;
  box-sizing: border-box;

  /* iOSで慣性スクロールを安定させる */
  touch-action: pan-y;
}

.c-siteNav.active, .nav-menu.active{
  transform: translateX(0);
}

.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 998;
}
.nav-overlay.active{
  opacity: 1;
  pointer-events: auto;
}

/* メニュー表示中は背景スクロール停止 */
body.nav-open{
  overflow: hidden;
  overscroll-behavior: none;
}

/* 背景は固定しても、ドロワー内部のタッチスクロールは許可 */
body.nav-open .c-siteNav,
body.nav-open .nav-menu{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.c-siteNav__section, .nav-section{
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.c-siteNav__section:last-child, .nav-section:last-child{ border-bottom:none; }

.c-siteNav__section h3, .nav-section h3{
  font-size: .875rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.c-siteNav__links, .nav-links{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap: .75rem;
}
.c-siteNav__links a, .nav-links a{
  color: var(--text);
  text-decoration:none;
  padding: .875rem 1rem;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content: flex-start;
  transition: background .2s ease, transform .2s ease, color .2s ease;
  font-weight: 500;
  min-height: 44px;
}
.c-siteNav__links a::before, .nav-links a::before{
  content: "→";
  margin-right: .75rem;
  color: var(--emerald);
  font-weight: 700;
}
.c-siteNav__links a:hover, .nav-links a:hover{
  background: var(--emerald-light);
  color: var(--emerald-dark);
  transform: translateX(5px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Main（全ページ共通）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
main{
  margin-top: 73px;
  padding: 1.5rem 1rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(20px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* 下層共通：ページヘッダー（integrated/rules/lg/concept/wisdom/closing など） */
.page-header{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: var(--white);
  padding: 2.5rem 2rem;
  border-radius: 16px;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.page-header h1{
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .05em;
  margin-bottom: .5rem;
  line-height: 1.25;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}

.page-header p{
  font-size: 1rem;
  line-height: 1.75;
  opacity: .95;
  margin-bottom: 1.5rem;
}

/* 下層共通：ページヘッダーのCTA */
.page-header-cta{
  display:flex;
  gap: 20px;
  justify-content:center;
  align-items:center;
  margin-top: 1rem;
}

/* 下層共通：キャプション（badge風） */
.page-header-caption,
.staff-badge{
  display:inline-block;
  background: rgba(16,185,129,.2);
  color: var(--emerald);
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

/* 下層共通：セクション */
.section{
  margin-top: 2rem;
  background: #fff;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(15,23,42,.07);
  box-shadow: none;                 /* FLAT */
  scroll-margin-top: 86px;          /* fixed header 対策 */
}

@media (max-width: 767px){
  .section{
    margin-top: 1.35rem;
    padding: 1.55rem 1.15rem;
    border: none;
    border-radius: 0;
  }
}

@media (max-width: 480px){
  .section{ padding: 1.4rem 1.15rem; }
}

/* 下層共通：セクションヘッダー */
.section-header{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: .9rem;
  align-items: start;
  margin-bottom: 1.25rem;
  padding-bottom: .95rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.number {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #0b1220;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 900;
  background: #0b1220;
  color: #fff;
  margin-top: .1rem;
}

.section-header h2{
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.25;
  color: #0b1220;
}

.section-header p{
  margin-top: .3rem;           /* h2直下の余白を“意図的に” */
  font-size: .9rem;            /* サブを少し読みやすく */
  line-height: 1.55;           /* 間延び防止 */
  color: rgba(15,23,42,.62);   /* 薄すぎを防ぐ */
  opacity: 1;  
}

/* SPはさらに締める */
@media (max-width: 480px){
  .section-header{ gap: .75rem; }
  .number{ width: 36px; height: 36px; border-radius: 11px; }
  .section-header h2{ font-size: 1.15rem; }
  .section-header p{ font-size: .85rem; margin-top: .25rem; }
}

/* =========================================================
   CTA Box（SECTION 2内）
========================================================= */

.concept-cta-box{
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: #f4f6f9;
  border: 1px solid rgba(15,23,42,.07);
}

.concept-cta-box h3{
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 900;
  color: #0b1220;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.concept-cta-box p{
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.75;
  opacity: .9;
  font-weight: 650;
  color: rgba(15,23,42,.84);
}

/* h3内の小アイコン */
.concept-cta-box .h-icon{
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: rgba(15,23,42,.72);
}
.concept-cta-box .h-icon .icon-svg{
  width: 18px;
  height: 18px;
  display: block;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Footer（全ページ共通）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.c-siteFooter, .footer{
  background: var(--navy);
  color: var(--white);

  /* 面積を詰めて、以前のフッター感に寄せる */
  padding: 1.5rem 1.5rem 1rem;
  margin-top: 3rem;
}
.c-siteFooter__inner, .footer-content{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.c-siteFooter__section h3, .footer-section h3{
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .75rem;
  color: var(--emerald-light);
}
.c-siteFooter__section p, .footer-section p{
  font-size: 1rem;
  font-weight: 700;
  opacity: .9;
  line-height: 1.75;
}
.c-siteFooter__links, .footer-links{ list-style: none; }
.c-siteFooter__links li, .footer-links li{ margin-bottom: .5rem; }
.c-siteFooter__links a, .footer-links a{
  color: var(--white);
  text-decoration: none;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
  display: inline-block;
  font-weight: 500;
  font-size: .95rem;
}
.c-siteFooter__links a:hover, .footer-links a:hover{
  opacity: 1;
  color: var(--emerald-light);
  transform: translateX(5px);
}
.c-siteFooter__section p a, .footer-section p a{
  color: var(--emerald-light);
  text-decoration: none;
  font-weight: 700;
  transition: transform .2s ease, color .2s ease;
}
.c-siteFooter__section p a:hover, .footer-section p a:hover{ color: var(--emerald); transform: translateY(-1px); }

.c-siteFooter__bottom, .footer-bottom{
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
  opacity: .85;
  font-size: .9rem;
  font-weight: 600;
}

/* =========================================
   Back to Top : Shield from JS background rewrite
   - 背景は::afterで描画（本体backgroundは透明固定）
   - ▲は::beforeで描画
========================================= */
a.c-backToTop, a.back-to-top{
  all: unset;
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  z-index: 9999;
  cursor: pointer;
  text-decoration: none;

  /* ★本体は透明に固定（JSがbackgroundを書き換えても見えない） */
  background: transparent !important;
  background-image: none !important;
}

/* 丸い背景を「別レイヤー」で描く */
a.c-backToTop::after, a.back-to-top::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #0b1220; /* ← ネイビー */
  z-index: -1;
}


/* ▲を中央に描画 */
a.c-backToTop::before, a.back-to-top::before{
  content: "▲";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}


/* hover */
@media (hover:hover){
  a.c-backToTop:hover::after, a.back-to-top:hover::after{
    background: #1a2332;
  }
}

/* フォーカス可視化 */
a.c-backToTop:focus-visible, a.back-to-top:focus-visible{
  outline: 3px solid rgba(15,23,42,.35);
  outline-offset: 3px;
}


/* ========================================
   4) Components（全ページ共通）
======================================== */

/* Buttons（全ページ共通） */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .5rem;
  padding: .875rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
  font-family: inherit;
  white-space: nowrap;
  min-height: 44px;
}

.btn,
.toc-item,
.nav-button{
  background: #0b1220;
  color: #fff;
}

.btn:hover{
  background: #1a2332;
}


.btn-primary{
  background: var(--emerald);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(16,185,129,.24);
}
.btn-primary:hover{
  background: var(--emerald-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16,185,129,.24);
}

.btn-secondary{
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--border);
}
.btn-secondary:hover{
  border-color: var(--emerald);
  color: var(--emerald-dark);
  transform: translateY(-2px);
}

.btn--large,
.btn-large{
  padding: 1rem 2rem;
  font-size: 1.0625rem;
  min-height: 48px;
}

.btn--mini,
.mini-btn{
  padding: .5rem .875rem;
  font-size: .875rem;
  font-weight: 800;
  min-height: auto;
  border-radius: 6px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--text);
}
.btn--mini:hover,
.mini-btn:hover{
  background: var(--emerald-light);
  border-color: var(--emerald);
  color: var(--emerald-dark);
}

.btn--full{ width: 80%; margin: 1rem auto 0; }

/* Primary large CTA（共通で利用可） */
.btn-primary-large{
  display:flex;
  align-items:center;
  gap: 1rem;
  padding: 1.25rem 2rem;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-dark) 100%);
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(16,185,129,.24);
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 60px;
}
.btn-primary-large:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16,185,129,.24); }

.btn-icon-large{
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255,255,255,.15);
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink: 0;
}
.btn-content-large{ flex: 1; text-align:left; }
.btn-title-large{ font-size: 1.125rem; font-weight: 800; line-height: 1.3; margin-bottom: .25rem; }
.btn-subtitle-large{ font-size: .9375rem; opacity: .9; line-height: 1.4; }
.btn-arrow-large{ font-size: 1.75rem; font-weight: 900; flex-shrink: 0; }

/* Cards（全ページ共通） */
.card{
  background: var(--white);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card--hoverable:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card--compact{ padding: 1.25rem; }
.card--spacious{ padding: 2rem; }

.card--bordered{ border-left: 4px solid var(--emerald); }
.card--bordered-danger{ border-left: 4px solid var(--danger); }
.card--bordered-info{ border-left: 4px solid #3B82F6; }
.card--bordered-warning{ border-left: 4px solid var(--warning); }

/* Accordion（下層共通） */
.acc{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.acc-head{
  padding: 1rem 1.5rem;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  position: relative;
  padding-right: 3rem;
  min-height: 56px;
  transition: background .2s ease;
}
.acc-head::after{
  content:"▼";
  position:absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  background: var(--emerald-light);
  border-radius: 8px;
  border: 1px solid var(--emerald);
  font-size: .875rem;
  font-weight: 900;
  color: var(--emerald-dark);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.acc[aria-expanded="true"] .acc-head::after{
  transform: translateY(-50%) rotate(180deg);
  background: var(--emerald);
  color: var(--white);
  border-color: var(--emerald-dark);
}
.acc-head:hover{ background: var(--emerald-light); }
.acc-head:hover::after{
  background: var(--emerald);
  color: var(--white);
  border-color: var(--emerald-dark);
}
.acc-head h2{
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--navy);
  flex: 1;
}
.acc-body{
  padding: 1.5rem 0.5rem;
  display:none;
  line-height: 1.75;
}
.acc[aria-expanded="true"] .acc-body{ display:block; }

/* 工程番号（s1〜s7） */
#s1 .acc-head h2::before,
#s2 .acc-head h2::before,
#s3 .acc-head h2::before,
#s4 .acc-head h2::before,
#s5 .acc-head h2::before,
#s6 .acc-head h2::before,
#s7 .acc-head h2::before{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-dark) 100%);
  color: var(--white);
  border-radius: 50%;
  font-size: .875rem;
  font-weight: 800;
  font-family: var(--font-head);
  margin-right: 1rem;
  flex-shrink: 0;
}
#s1 .acc-head h2::before{ content:"1"; }
#s2 .acc-head h2::before{ content:"2"; }
#s3 .acc-head h2::before{ content:"3"; }
#s4 .acc-head h2::before{ content:"4"; }
#s5 .acc-head h2::before{ content:"5"; }
#s6 .acc-head h2::before{ content:"6"; }
#s7 .acc-head h2::before{ content:"7"; }

/* Forms（共通：必要が出た時のみ利用） */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
  width: 100%;
  padding: .875rem 1rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  min-height: 44px;
}
input:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-10);
}
label{ display:block; font-weight: 600; margin-bottom: .5rem; color: var(--navy); }



/* Labels / Badges（下層共通） */
.label{
  display: block;
  align-items: center;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 800;
  line-height: 1.6;
  background: var(--emerald-light);
  border: 1px solid var(--emerald);
  color: var(--emerald-dark);
  min-height: 32px;
}
.label.blue{ background: #e3f2fd;color: #0b3858;border: 1px solid #64b5f6;}
.label.red{ background: var(--danger-light); border-color: var(--danger); color: #7f1d1d; }
.label.yellow{background: #fff8e1;color: #856404;border: 1px solid #ffd54f; }

.label p {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

.label p + p {
  margin-top: 8px;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding: .5rem .75rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid var(--emerald);
  background: var(--emerald-light);
  color: var(--emerald-dark);
  min-height: 32px;
}

/* Notice（下層共通） */
.h-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 24px;
  height: 24px;
}
.notice-icon{
  flex-shrink:0;
  width: 32px;
  height: 32px;
  color: var(--warning);
}

.important-notice{
  background: #fef3c7;
  border: 2px solid var(--warning);
  border-left: 4px solid var(--warning);
  border-radius: 12px;
  padding: 1.5rem;
  display:flex;
  gap: 1rem;
  align-items:flex-start;
  margin-bottom: 2rem;
}
.notice-content p{
  margin: 0 0 .75rem;
  line-height: 1.75;
  font-weight: 700;
  color: var(--navy);
  opacity: .95;
}
.notice-content p:last-child{ margin-bottom: 0; }

/* Note（下層共通） */
.note{
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(239,68,68,.22);
  background: var(--danger-light);
  color: #7f1d1d;
  line-height: 1.75;
}
.note strong{ color: var(--danger); }

/* ========================================
   5) 下層ページ共通：補助UI
======================================== */

/* -----------------------------------------------
   Quick Summary - クイック要約ボックス
   ----------------------------------------------- */
.quick-summary {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-radius: 12px;
  padding: 28px 20px;
  margin: 24px 0;
}

.quick-summary .summary-points {
  list-style: none;
  padding-left: 0;
  margin-top: 20px;
}

.quick-summary .summary-points li {
  font-size: 1.1rem;
  padding: 14px 0;
  padding-left: 0 !important;
  color: #2d3748;
  font-weight: 400 !important;
}

.quick-summary .summary-points li::before {
  content: none !important;
  display: none !important;
}

/* -----------------------------------------------
   Concept Line - コンセプトライン
   ----------------------------------------------- */
.concept-line {
  text-align: center;
  margin-top: 32px;
  font-size: 1.25rem;
  color: #1a202c;
  padding: 20px;
  background: #fff8e1;
  border-radius: 8px;
  border: 2px dashed #ffd54f;
}

.concept-line strong {
  color: #d97706;
  font-weight: 700;
}

/* FINAL CTA（closing/rules/wisdom など） */
.final{ margin-top: 2rem; }
.final-box{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  box-shadow: var(--shadow-hero);
  padding: 2rem 1.5rem;
  text-align: center;
}
.final-title{
  margin: 0 0 .75rem;
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: .02em;
  color: #fff;
  opacity: .98;
}
.final-line{
  margin: .35rem 0;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255,255,255,.86);
  font-weight: 650;
}
.final-em{
  margin: 1.1rem 0 0;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: #4aa9d4;
}
.final-cta{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
  margin-inline: auto;
  max-width: 560px;
}
.final-cta .btn,
.final-cta .c-button{
  width: 100%;
  min-height: 52px;
  padding: 1rem 1.75rem;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.final-cta .btn.btn-primary,
.final-cta .c-button{
  box-shadow: 0 10px 22px rgba(16,185,129,.35);
}
/* ボタンが1つのとき中央寄せ */
.final-cta:has(.btn:only-child),
.final-cta:has(.c-button:only-child){
  display:flex;
  justify-content:center;
}
.final-cta:has(.btn:only-child) .btn,
.final-cta:has(.c-button:only-child) .c-button{ max-width: 320px; }


/* ========================================
   Page Navigation / Related Links
======================================== */

.page-nav,
.c-pageNav{
  margin-top: 3rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f6fbfe 0%, #eef7fc 100%);
  border: 1px solid #d8eaf4;
  border-radius: 16px;
  text-align: center;
}

.page-nav-text,
.c-pageNav__text{
  margin: 0 0 1rem;
  color: #4d687b;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.7;
}

.page-nav-links,
.c-pageNav__links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .625rem;
}

.c-pageNav__links .c-button{
  min-width: 150px;
}

@media (max-width: 640px){
  .page-nav,
  .c-pageNav{
    margin-top: 2.25rem;
    padding: 1.125rem;
    border-radius: 14px;
  }

  .page-nav-links,
  .c-pageNav__links{
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .c-pageNav__links .c-button{
    width: 100%;
  }
}

/* ========================================
   Responsive（common UI）
======================================== */
@media (min-width: 768px){
  .page-header{
    padding: 2rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
  }
  .page-header h1{
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: .75rem;
  }
  .page-header p{
    font-size: 1rem;
    line-height: 1.75;
  }
  .label{
    padding: 12px 16px;
    font-size: 0.9rem;
  }
  .indicator-section{ max-width: 200px; }
}

@media (max-width: 480px){
  .page-header-cta{
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .page-header-cta .btn,
  .page-header-cta .c-button{
    flex: 1 1 0;
    min-width: 0;
    padding: .85rem .75rem;
    font-size: .9rem;
    white-space: nowrap;
  }
  .label{
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}

@media (max-width: 400px){
  .shortcuts-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 375px){
  .page-header{ padding: 1.5rem 1rem; }
  .page-header h1{ font-size: 1.375rem; }
}


/* =========================================================
   Reading progress / Current section (shared)
   - Source of truth: rules.css
   - Used by: rules.php / integrated.php / others
========================================================= */
/* ========================================
   Reading progress bar
   ======================================== */
.reading-progress{
  position: fixed;
  top: 73px;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 950;
  background: rgba(15,23,42,.06);
  pointer-events: none;
}

.reading-progress__bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #08699f 0%, #0784c6 100%);
  border-radius: 0 999px 999px 0;
  transition: width .08s linear;
  box-shadow: 0 0 10px rgba(16,185,129,.5);
}

@supports (-webkit-touch-callout: none){
  .reading-progress{ transform: translateZ(0); -webkit-transform: translateZ(0); }
}

/* ========================================
   Current section indicator (top bar)
   ======================================== */
.current-section{
  position: fixed;
  top: 73px;
  left: 0;
  right: 0;
  z-index: 950;

  background: rgba(255,255,255,.98);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--emerald);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);

  padding: .75rem 1rem;
  text-align: center;
  font-size: .9rem;
  color: rgba(15,23,42,.7);

  transition: opacity .6s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1);

  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;

  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.current-section #currentSectionLabel{
  font-weight: 900;
  color: #08699f;
}

.current-section.visible{
  opacity: 1;
  transform: translateY(0) translateZ(0);
  pointer-events: auto;
}

@media (max-width: 640px){
  .current-section{
    padding: .625rem 1rem;
    font-size: .813rem;
  }
}



/* ===== GFI PORTAL NAV ===== */
.nav-section--home{padding-bottom:.8rem}.nav-section--home .nav-links{gap:0}.nav-section--home .nav-links a{font-family:Poppins,sans-serif;font-weight:800;letter-spacing:.05em;background:var(--emerald-light)}
.nav-section h3{margin-bottom:.65rem}.nav-section .nav-links{gap:.35rem}.nav-section .nav-links a{padding:.72rem .85rem;min-height:40px;font-size:.94rem}


/* =========================================================
   GFI PORTAL / UPDATE
   header.php のブランド部分用
   ========================================================= */
.gfi-portal-brand{
  display:inline-flex;
  align-items:center;
  gap:16px;
  color:#162536;
  text-decoration:none;
  line-height:1;
}

.gfi-portal-name{
  font-family:"Poppins","Noto Sans JP",sans-serif;
  font-size:22px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}

.gfi-portal-update{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-left:16px;
  border-left:1px solid #d8e0e6;

  font-family:"Poppins","Noto Sans JP",sans-serif;
  color:#65727d;
  white-space:nowrap;
}

.gfi-portal-update-label{
  color:#11a878;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
}

.gfi-portal-update time{
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
}

/* スマホ */
@media (max-width:480px){

  .gfi-portal-brand{
    gap:10px;
  }

  .gfi-portal-name{
    font-size:18px;
  }

  .gfi-portal-update{
    gap:5px;
    padding-left:10px;
  }

  .gfi-portal-update-label{
    font-size:10px;
  }

  .gfi-portal-update time{
    font-size:12px;
  }
}

/* =========================================================
   Mobile Drawer Scroll Fix
   iPhone Safari / LINE内ブラウザ対応
========================================================= */
@media (max-width: 767px){
  .c-siteNav,
  .nav-menu{
    top: 73px;
    bottom: 0;
    height: calc(100vh - 73px);
    height: calc(100dvh - 73px);
    max-height: calc(100dvh - 73px);
    padding-top: 0;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  /* 最後のメニュー項目まで確実に表示できる余白 */
  .c-siteNav__section:last-child,
  .nav-section:last-child{
    padding-bottom: 2rem;
  }
}


/* =========================================================
   GFI PORTAL 2026 / Shared shell override
   New domain: portal.gfi7.co.jp
   Purpose: mobile-first, text-first, GFI Blue unified UI
========================================================= */
.l-header,.c-siteHeader{position:fixed;inset:0 0 auto;z-index:1100;height:var(--header-height);background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);box-shadow:0 2px 16px rgba(25,73,103,.05);backdrop-filter:saturate(160%) blur(12px)}
.c-siteHeader__inner{width:min(100%,var(--content-max));height:100%;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.c-siteBrand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--navy)}
.c-siteBrand__mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--gfi-blue);color:#fff;font-family:var(--font-head);font-size:12px;font-weight:800;letter-spacing:.03em;flex:0 0 auto;box-shadow:inset 0 0 0 4px rgba(255,255,255,.18)}
.c-siteBrand__body{display:grid;gap:3px;min-width:0;line-height:1}
.c-siteBrand__name{font-family:var(--font-head);font-size:18px;font-weight:800;letter-spacing:.025em;white-space:nowrap}
.c-siteBrand__update{display:flex;align-items:center;gap:6px;color:var(--text-light);font-family:var(--font-head);font-size:10px;white-space:nowrap}
.c-siteBrand__update span{font-weight:800;color:var(--gfi-blue)}
.c-siteBrand__update time{font-weight:700}

.c-siteHeader__toggle{display:grid;place-content:center;gap:5px;width:48px;height:48px;padding:0;border:0;border-radius:14px;background:var(--gfi-blue);cursor:pointer;box-shadow:0 8px 18px rgba(7,132,198,.20);transition:background .2s ease,transform .2s ease}
.c-siteHeader__toggle:hover{background:var(--gfi-blue-dark);transform:translateY(-1px)}
.c-siteHeader__toggle span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .24s ease,opacity .2s ease}
.c-siteHeader__toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.c-siteHeader__toggle.active span:nth-child(2){opacity:0}
.c-siteHeader__toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.c-siteNav{position:fixed;top:var(--header-height);right:0;bottom:0;z-index:1090;width:min(390px,92vw);height:calc(100dvh - var(--header-height));background:#fff;border-left:1px solid var(--border);box-shadow:var(--shadow-lg);transform:translateX(105%);transition:transform .28s ease;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.c-siteNav.active{transform:translateX(0)}
.c-siteNav__inner{padding:10px 0 calc(36px + env(safe-area-inset-bottom,0px))}
.c-siteNav__section{padding:16px 18px;border-bottom:1px solid var(--border)}
.c-siteNav__section--home{padding-top:8px}
.c-siteNav__label{margin:0 0 8px;color:#708391;font-size:12px;font-weight:800;letter-spacing:.08em}
.c-siteNav__home,.c-siteNav__links a{display:flex;align-items:center;min-height:48px;padding:10px 12px;border-radius:10px;color:var(--text);font-weight:600;text-decoration:none;transition:background .18s ease,color .18s ease,transform .18s ease}
.c-siteNav__home{font-family:var(--font-head);font-weight:800;color:var(--navy)}
.c-siteNav__links{display:grid;gap:3px;margin:0;padding:0;list-style:none}
.c-siteNav__links a::before{content:"";width:6px;height:6px;margin-right:12px;border-radius:50%;background:var(--gfi-sky);flex:0 0 auto}
.c-siteNav__home:hover,.c-siteNav__links a:hover,.c-siteNav__home[aria-current="page"],.c-siteNav__links a[aria-current="page"]{background:var(--gfi-blue-soft);color:var(--gfi-blue-dark)}
.c-siteNav__links a:hover{transform:translateX(3px)}
.c-siteNavOverlay{position:fixed;inset:0;z-index:1080;background:rgba(8,36,54,.42);opacity:0;pointer-events:none;transition:opacity .2s ease}
.c-siteNavOverlay.active{opacity:1;pointer-events:auto}

main,.container{width:min(100%,var(--content-max));margin-left:auto;margin-right:auto}
main{margin-top:var(--header-height);padding:24px 16px 56px}
.page-header{position:relative;overflow:hidden;margin:0 0 24px;padding:34px 22px;border:1px solid rgba(7,132,198,.14);border-radius:var(--radius-lg);background:linear-gradient(135deg,#0b3858 0%,#08699f 62%,#0784c6 100%);color:#fff;box-shadow:var(--shadow-lg);text-align:left}
.page-header::after{content:"";position:absolute;width:240px;height:240px;right:-110px;top:-125px;border-radius:50%;border:34px solid rgba(255,255,255,.08);pointer-events:none}
.page-header h1,.page-header-title{position:relative;z-index:1;margin:0 0 10px;color:#fff;font-size:clamp(1.65rem,6vw,2.35rem);font-weight:800;letter-spacing:.02em;text-shadow:none}
.page-header p,.page-header-lead{position:relative;z-index:1;margin-bottom:0;color:rgba(255,255,255,.92);font-size:clamp(.95rem,2.6vw,1.05rem);line-height:1.8}
.page-header-caption,.staff-badge{display:inline-flex;align-items:center;min-height:28px;margin-bottom:12px;padding:4px 10px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.10);color:#fff;font-family:var(--font-head);font-size:11px;font-weight:800;letter-spacing:.08em}

.section,.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow)}
.section{padding:22px 18px;margin-bottom:18px}
.section-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.section-header .number,.number{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--gfi-blue);color:#fff;font-family:var(--font-head);font-weight:800}
.section-header h2{margin:0 0 4px;color:var(--navy);font-size:1.3rem;font-weight:800}
.section-header p,.subtitle{margin:0;color:var(--text-light);font-size:.94rem;line-height:1.7}

.btn,.nav-button,.mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 18px;border:1px solid transparent;border-radius:12px;font-weight:700;text-decoration:none;line-height:1.4;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn:hover,.nav-button:hover,.mini-btn:hover{transform:translateY(-1px)}
.btn-primary,.btn-primary-large{background:var(--gfi-blue);border-color:var(--gfi-blue);color:#fff;box-shadow:0 7px 16px rgba(7,132,198,.16)}
.btn-primary:hover,.btn-primary-large:hover{background:var(--gfi-blue-dark);border-color:var(--gfi-blue-dark);color:#fff}
.btn-secondary{background:#fff;border-color:var(--border-strong);color:var(--navy)}
.btn-secondary:hover{background:var(--gfi-blue-soft);border-color:rgba(7,132,198,.28);color:var(--gfi-blue-dark)}
.btn--full{width:100%}

.c-siteFooter{background:#0b2c42;color:rgba(255,255,255,.78)}
.c-siteFooter__inner{width:min(100%,var(--content-max));margin:0 auto;padding:34px 18px;display:grid;gap:24px}
.c-siteFooter__brand strong{display:block;margin-bottom:8px;color:#fff;font-family:var(--font-head);font-size:1.15rem;letter-spacing:.04em}
.c-siteFooter__brand p{margin:0;max-width:34rem;font-size:.9rem;line-height:1.8}
.c-siteFooter__nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.c-siteFooter__nav a,.c-siteFooter__company a{color:#fff;text-decoration:none;font-weight:600}
.c-siteFooter__company{display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.c-siteFooter__bottom{padding:14px 18px;border-top:1px solid rgba(255,255,255,.10);font-family:var(--font-head);font-size:.72rem;text-align:center;color:rgba(255,255,255,.52)}
.c-backToTop{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:900;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--gfi-blue);color:#fff;text-decoration:none;font-size:20px;font-weight:800;box-shadow:0 10px 22px rgba(7,132,198,.28);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s ease}
.c-backToTop.visible{opacity:1;visibility:visible;transform:translateY(0)}

/* Legacy bridge for existing DOM */
.header-content{max-width:var(--content-max)}
.nav-menu{width:min(390px,92vw)}
.nav-overlay{z-index:1080}
.back-to-top{font-size:0}
.back-to-top::before{content:"↑";font-size:20px}

@media (min-width:768px){
  .c-siteHeader__inner{padding:0 24px}.c-siteBrand__name{font-size:21px}.c-siteBrand__mark{width:44px;height:44px}
  main{padding:34px 24px 72px}.page-header{padding:48px 42px}.section{padding:30px}
  .c-siteFooter__inner{grid-template-columns:1.4fr 1fr .8fr;align-items:start;padding:44px 24px}
}
@media (max-width:480px){
  :root{--header-height:68px}.c-siteHeader__toggle{width:46px;height:46px}.c-siteBrand__mark{width:38px;height:38px}.c-siteBrand__name{font-size:16px}.c-siteBrand__update{font-size:9px}
  main{padding-left:12px;padding-right:12px}.page-header{border-radius:18px;padding:28px 18px}.section{padding:20px 16px}
}


/* ========================================
   GFI PORTAL / COMMON BUTTON
   Shared across all pages
======================================== */
.c-button {
  --button-color: #118dce;
  --button-color-dark: #0872b2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px 8px 22px;
  color: #fff;
  background: linear-gradient(90deg, var(--button-color-dark), var(--button-color));
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 7px 18px rgba(8, 101, 159, .16);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease;
}

.c-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 11px 26px rgba(8, 101, 159, .22);
}

.c-button:focus-visible {
  outline: 3px solid rgba(17, 141, 206, .28);
  outline-offset: 3px;
}

.c-button__label {
  flex: 1;
  text-align: center;
}

.c-button__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  color: var(--button-color-dark);
  background: #fff;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  transition: transform .2s ease;
}

.c-button:hover .c-button__icon {
  transform: translateX(2px);
}

.c-button--full {
  width: 100%;
}

.c-button--small {
  min-height: 42px;
  padding-left: 18px;
  font-size: 13px;
}

.c-button--small .c-button__icon {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  font-size: 14px;
}

.c-button--large {
  min-height: 54px;
  padding-left: 28px;
  font-size: 15px;
}

.c-button--large .c-button__icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.c-button--outline {
  color: #0872b2;
  background: #fff;
  border: 1px solid #bcddec;
  box-shadow: 0 5px 16px rgba(8, 101, 159, .08);
}

.c-button--outline .c-button__icon {
  color: #fff;
  background: #118dce;
}

.c-button--white {
  --button-color: #118dce;
  --button-color-dark: #0872b2;
  color: #0872b2;
  background: #fff;
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 9px 26px rgba(0, 0, 0, .16);
}

.c-button--white .c-button__icon {
  color: #fff;
  background: var(--button-color);
}

@media (max-width: 640px) {
  .c-button {
    min-height: 46px;
    padding-left: 18px;
    font-size: 14px;
  }

  .c-button__icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}

/* =========================================================
   GFI PORTAL / Header brand image fix
   Updated: 2026-09-10
   Purpose: prevent logo image overflow and keep header geometry stable
========================================================= */
.c-siteHeader,
.l-header {
  overflow: visible;
}

.c-siteHeader__inner {
  box-sizing: border-box;
  min-height: var(--header-height);
}

.c-siteBrand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  height: 100%;
  max-width: calc(100% - 64px);
}

.c-siteBrand__icon {
  display: block;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  max-height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
  object-position: center;
}

.c-siteBrand__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.c-siteBrand__name {
  display: block;
  overflow: hidden;
  color: var(--navy);
  line-height: 1.05;
  text-overflow: ellipsis;
}

.c-siteBrand__update {
  line-height: 1;
}

@media (min-width: 768px) {
  .c-siteBrand__icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    max-width: 46px;
    min-height: 46px;
    max-height: 46px;
    flex-basis: 46px;
  }
}

@media (max-width: 480px) {
  .c-siteBrand {
    gap: 9px;
    max-width: calc(100% - 58px);
  }

  .c-siteBrand__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    max-height: 40px;
    flex-basis: 40px;
  }

  .c-siteBrand__body {
    gap: 3px;
  }

  .c-siteBrand__name {
    font-size: 16px;
  }

  .c-siteBrand__update {
    gap: 5px;
    font-size: 9px;
  }
}