/* =========================================
   concept.css（整理版 / 重複除去）
   - concept.php 専用
   - base.css（header/nav/btn 等）前提
   方針：
   1) SECTION1（土台）は .section--foundation を唯一の正とする
   2) :first-of-type 依存は削除（並び替えに弱い）
   3) “1スクロール1メッセージ”の余白と強弱を維持
========================================= */

/* =========================================================
   SECTION 1（土台）専用（唯一の正：.section--foundation）
   ※ first-of-type 依存は削除
========================================================= */


/* SECTION 1だけ番号も緑寄せ */


/* Mission（宣言） */
.concept-mission{
  background: rgba(255,255,255,.85);  
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 24px rgba(2,6,23,.06);
  padding: 1.25rem 1.25rem 1.1rem;
  margin: 1.25rem 0 1.1rem;
}


.is-strong{
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 0 .55rem;
  line-height: 1.55;
  letter-spacing: .08em;
  font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
}

/* Story */
.concept-story{
  margin: 0 0 1.5rem;
  line-height: 2;
  text-align: center;
}
.concept-story p{
  font-size: 1.1rem;
  font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight: 700;
  margin-bottom: 1rem;
}
.concept-story p:last-child{ margin-bottom: 0; }

.concept-line{
  font-size: 1.5rem;
  font-weight: 900;
  margin: .55rem 0 0;
  line-height: 2;
  letter-spacing: .05em;
  font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  text-align: center;
  background: none;
  border: none;
}

/* =========================================================
   gfi-creed（社訓ブロック）
   - PC：dt｜dd 2カラム（中央寄せ）
   - SP：dt → dd（2行） + ddに下線（最後は除外）
========================================================= */

/* ---------- Container ---------- */


/* ---------- DL reset ---------- */


/* =========================================================
   SP（〜767px）：dt→dd（縦） / ddに下線（最後以外）
========================================================= */


/* =========================================================
   PC（768px〜）：dt｜dd 2カラム（中央寄せ）
========================================================= */


/* ========================================
   gfi-creed（在り方の土台）引き締め
======================================== */

/* リスト全体の縦余白を詰める */


/* 各行を“一文”として締める */


/* 強調は文字サイズではなくウェイトで */


/* スマホはさらに一段締める */


/* =========================================================
   Cards（SECTION 2：3カラム）
========================================================= */

.concept-cards{
  display: grid;
  gap: 1.5rem;
}

.concept-card{
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(15,23,42,.07);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* 結論カードだけ“少しだけ”強く（フラット） */
.concept-cards .concept-card:last-child{
  border-top: 4px solid rgba(7,132,198,.6);
  background: rgba(7,132,198,.06);
}

/* アイコン枠（暴走防止） */


.concept-card h3{
  margin: 0 0 .5rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--emerald-dark);
}


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

@media (min-width: 768px){
  .concept-cards{ grid-template-columns: repeat(3, 1fr); }
}


/* =========================================================
   Bridge（SECTION 3：Wisdom teaser）
========================================================= */


/* =========================================================
   Wisdom Tease Cards（Bridge内）
========================================================= */


/* =========================================
   Mobile spacing tune (concept.php only)
   - SECTION区切りの“呼吸”を作る
========================================= */
@media (max-width: 767px){

  /* ① セクション同士の間隔：少し広げて「章の切り替え」を明確に */
  .section{
    margin-top: 1.6rem;            /* 1.35rem → 1.6rem */
    padding: 1.55rem 1.15rem;      /* 既存維持 */
    border-left-width: 3px;        /* 4px → 3px（主張を少し弱めて上品に） */
  }

  /* ② セクション見出しの余白：見出しを“止まりどころ”にする */
  .head{
    margin-bottom: 1.05rem;        /* 1.25rem → 1.05rem（詰めて読みやすく） */
    padding-bottom: .9rem;         /* 1rem → .9rem */
  }

  /* ③ セクション番号：ほんの少し小さくして情報圧を下げる */
  .number{
    width: 40px;                   /* 44px → 40px */
    height: 40px;
    border-radius: 11px;
  }

  /* ④ SECTION1（foundation）は“主役”なので間隔を少しだけ別扱い */
  

  /* ⑤ SECTION2：カード間隔を少し詰めてスクロール量を減らす */
  .concept-cards{
    gap: 1rem;                     /* 1.5rem → 1rem */
  }
  .concept-card{
    padding: 1.25rem;              /* 1.5rem → 1.25rem */
    border-radius: 14px;
  }

  /* ⑥ “在り方の土台”ボックス：上の余白を作って締めを強く */
  .concept-cta-box{
    margin-top: 1.25rem;           /* 1.5rem → 1.25rem（カード詰めた分バランス） */
    padding: 1.25rem;
  }

  /* ⑦ Bridge（先人達）：章切り替えの余白をしっかり作る */
  

  /* ⑧ Bridge内：名言カードの間隔も少し詰める */
  
  

  /* ⑨ CTAボタンの縦間隔：押しやすさを維持しつつ余白を整える */
  
}


/* =========================================
   Wisdom author layout（写真＋名前）
========================================= */


/* 顔写真 */


/* 名前＋肩書き */


/* 名前 */


/* 肩書き（タグ風） */


/* ========================================
   Global Balance Patch（全体の整え）
   - 角丸 / 枠 / 影 / 余白を統一
   - “面が強い章”を少し落として、主役を散らさない
======================================== */

/* 1) 共通：カード/箱の統一（影は最小、枠で整理） */
:root{
  --ui-radius: 18px;
  --ui-border: rgba(15,23,42,.10);
  --ui-soft:   rgba(15,23,42,.03);
  --ui-shadow: 0 8px 18px rgba(2,6,23,.06);
}

/* section の枠/角丸を統一（既存を壊さない範囲） */
.section{
  border-radius: var(--ui-radius);
}

/* 2) “白カード”群の統一（影を少し弱める） */
.concept-card{
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow);
}

/* 3) 暗いブロック（ヒーロー/下部の黒面）は“角丸だけ”揃える */


/* 4) 章の切替の“息継ぎ”を揃える（間延び/詰まりを均す） */
.section{
  padding: 2rem 1.5rem;
}
@media (max-width: 767px){
  .section{
    padding: 1.55rem 1.15rem;
  }
}

/* ========================================
   Concept：セクション1だけ強い問題を解消
======================================== */

/* “私たちの土台”の背景面を少し落として他章と揃える */


/* ラディアルや強い面が出ているなら“薄くする” */


/* gfi-creed（社訓）枠が強すぎるので少し落とす */


/* “在り方の土台”のリストは詰めて思想感を出す（間延び解消） */


/* ========================================
   Final Balance Patch（Hero主役版）
   読み込み順：base → common → concept
======================================== */

/* -------------------------------------------------
   1) Heroは主役のまま（触らない）
------------------------------------------------- */
/* 何もしない＝今の完成度を維持 */

/* -------------------------------------------------
   2) Section 1（私たちの土台）を“導入トーン”へ
------------------------------------------------- */


/* セクション内の白カードは静かに */


/* -------------------------------------------------
   3) gfi-creed（社訓・在り方）を“思想ブロック”に
------------------------------------------------- */


/* 在り方リストはテンポ重視 */


/* -------------------------------------------------
   4) 下段カード群を均一化（情報ブロック）
------------------------------------------------- */
.concept-card{
  box-shadow: 0 6px 14px rgba(2,6,23,.06);
}

/* -------------------------------------------------
   5) 章と章の“呼吸”を揃える
------------------------------------------------- */
.section{
  padding: 2rem 1.5rem;
}
@media (max-width: 767px){
  .section{
    padding: 1.55rem 1.15rem;
  }
}


/* =========================================================
   GFI STANDARD
   ========================================================= */
.section--standard{
  position:relative;
}


.standard-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.standard-card{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:14px;
  align-items:flex-start;
  padding:20px;
  border:1px solid #e1eaee;
  border-radius:16px;
  background:#fbfdfe;
}
.standard-card--accent{
  border-color:#78c8c8;
  background:#f5fbfe;
}
.standard-no{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0b3858;
  color:#fff;
  font-size:12px;
  font-weight:800;
}
.standard-card h3{
  margin:0 0 6px;
  color:#102c40;
  font-size:18px;
}
.standard-card p{
  margin:0;
  color:#566a76;
  font-size:14px;
  line-height:1.75;
}
.standard-action{
  margin-top:22px;
  padding:22px;
  border-radius:16px;
  background:#f5f8fa;
}
.standard-action h3{
  margin:0 0 14px;
  color:#102c40;
}
.standard-action-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.standard-action-grid div{
  padding:14px 12px;
  border-radius:12px;
  background:#fff;
  text-align:center;
}
.standard-action-grid strong,
.standard-action-grid span{
  display:block;
}
.standard-action-grid strong{
  color:#0b3858;
}
.standard-action-grid span{
  margin-top:4px;
  color:#647681;
  font-size:12px;
}
.standard-final{
  margin-top:22px;
  padding:30px 20px;
  border-radius:18px;
  background:linear-gradient(135deg,#0b3858,#0f7078);
  color:#fff;
  text-align:center;
}
.standard-final p{
  margin:0;
  line-height:1.9;
}
.standard-final strong{
  font-size:20px;
}
.standard-final span{
  display:block;
  margin-top:16px;
  color:#76ddd8;
  font-weight:800;
  font-size:20px;
  letter-spacing:.12em;
}

@media (max-width:760px){
  .standard-grid{
    grid-template-columns:1fr;
  }
  .standard-action-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:480px){
  .standard-card{
    grid-template-columns:42px 1fr;
    padding:17px 15px;
  }
  .standard-no{
    width:36px;
    height:36px;
  }
  .standard-action-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   CONCEPT REORGANIZED 2026-09
   WHY -> MIND -> ACTION -> SALES MIND
   ========================================================= */
html{scroll-behavior:smooth}
.concept-hero-flow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.concept-hero-flow a{
  display:flex;
  gap:6px;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  color:inherit;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
}
.concept-hero-flow a span{opacity:.65}
.concept-hero-flow i{font-style:normal;opacity:.45}
.concept-chapter{scroll-margin-top:86px}
.chapter-en{
  display:block;
  margin-bottom:4px;
  color:#0784c6;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
.chapter-definition{
  margin:18px 0 22px;
  padding:16px 18px;
  border-left:4px solid #0784c6;
  border-radius:10px;
  background:#f2fafb;
  color:#0b3858;
}
.concept-mission--main{
  margin-top:20px;
  padding:32px 20px;
}
.mission-sub{
  display:block;
  margin-top:14px;
  text-align:center;
  color:#526b79;
  font-weight:700;
  letter-spacing:.05em;
}
.concept-story--simple{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.creed-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.creed-card{
  position:relative;
  padding:20px;
  border:1px solid #e1e9ed;
  border-radius:15px;
  background:#fff;
}
.creed-card:last-child{grid-column:1/-1}
.creed-card > span{
  display:block;
  margin-bottom:8px;
  color:#0784c6;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
}
.creed-card h3{
  margin:0 0 7px;
  color:#0b3858;
}
.creed-card p{
  margin:0;
  color:#5a6c77;
  line-height:1.7;
}
.foundation-message{
  margin:20px 0;
  padding:26px 22px;
  border-radius:17px;
  color:#fff;
  background:linear-gradient(135deg,#0b3858,#126c74);
}
.foundation-message > span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  color:#78ddd8;
}
.foundation-message h3{
  margin:7px 0 12px;
  font-size:23px;
}
.foundation-message p{
  margin:0;
  line-height:1.85;
}
.concept-card-label{
  display:block;
  margin-bottom:8px;
  color:#0784c6;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}
.concept-card--result{
  background:#f5fbfe;
  border-color:#9bd8d6;
}
.sales-foundation{
  margin-top:22px;
  padding:22px;
  border:1px solid #dfe9ed;
  border-radius:16px;
  background:#fff;
}
.foundation-formula{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:24px 0;
}
.foundation-formula > div{
  min-width:120px;
  padding:16px 12px;
  border-radius:14px;
  background:#f3f8fa;
  text-align:center;
}
.foundation-formula span,
.foundation-formula strong,
.foundation-formula small{display:block}
.foundation-formula span{
  color:#0784c6;
  font-size:10px;
  font-weight:800;
}
.foundation-formula strong{
  margin:4px 0 2px;
  color:#0b3858;
  font-size:18px;
}
.foundation-formula small{color:#687b86}
.foundation-formula i{
  color:#0784c6;
  font-style:normal;
  font-size:20px;
}
.concept-next{text-align:center}
.concept-next p{margin:4px 0 18px}
.concept-next-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}
.concept-wisdom-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:22px 0;
  padding:22px 24px;
  border-radius:16px;
  background:#f4f7f9;
}
.concept-wisdom-link h2{margin:3px 0 5px;color:#0b3858}
.concept-wisdom-link p{margin:0;color:#637681}

/* STANDARD refinements */
.section--standard .standard-grid{margin-top:0}
.section--standard .standard-card p{line-height:1.7}

@media(max-width:760px){
  .concept-hero-flow i{display:none}
  .creed-grid{grid-template-columns:1fr}
  .creed-card:last-child{grid-column:auto}
  .foundation-formula{gap:6px}
  .foundation-formula > div{min-width:0;flex:1;padding:13px 7px}
  .foundation-formula strong{font-size:16px}
  .concept-wisdom-link{align-items:flex-start;flex-direction:column}
}
@media(max-width:480px){
  .concept-hero-flow{gap:6px}
  .concept-hero-flow a{padding:7px 9px;font-size:10px}
  .foundation-formula small{font-size:10px}
  .foundation-formula i{font-size:15px}
}