/* =========================================================
   結い資金プロジェクト（/yuishikin/）
   読み込み条件: is_page( 'yuishikin' ) — inc/assets.php
   マークアップ: 管理画面の本文（page-yuishikin.php が .orwa-yuishikin で囲む）

   旧サイト /yuishikin/（旧 yuishikin/css/style.css）の見た目を再現する。
   値は旧 CSS から（2026-10-28 取得）。旧ページはリセットなしのため、ブラウザ初期値の余白もここに書く。

   ★画面幅の区切り（旧サイトと同じ）
   768px 以下 … スマホ / 769px 以上 … パソコン

   ★色
   青 #0068b7 / ピンク #f2a2ad（線・95%）/ 濃いピンク #f58e9c（小見出し）
   水色の帯 #f0f9ff / 薄紫の帯 #f9f0ff / 文字 #333
   ========================================================= */

/* 旧サイトは書体・行の高さの指定がなく、ブラウザ初期値（明朝・normal）で表示されている */
.orwa-yuishikin {
  overflow-x: clip;
  background: #fff;
  font-family: serif;
  font-size: 1rem;
  line-height: normal;
  color: #333;
}

/* 個別の指定より弱くするため :where() で詳細度を 0 にする。 */
:where(.orwa-yuishikin) :where(h1, h2, h3, p, ul, dl, dd) {
  margin: 0;
}

:where(.orwa-yuishikin) :where(p) {
  margin-block: 1em;
}

/* 旧サイトは content-box の 800px＋左右 20px。さらに body の初期余白 8px があるため、
   帯は端まで広げ、文字の幅だけ 8px ずつ狭めて折り返しを合わせる */
.orwa-yuishikin__container {
  max-width: 856px;
  margin-inline: auto;
  padding-inline: 28px;
}

.orwa-yuishikin__narrow {
  max-width: 600px;
  margin-inline: auto;
  text-align: left;
}

/* --- 帯 ------------------------------------------------------ */

.orwa-yuishikin__section {
  padding-block: 30px;
  text-align: center;
}

.orwa-yuishikin__section--lead {
  padding-block: 60px;
}

.orwa-yuishikin__section--blue {
  background-color: #f0f9ff;
}

.orwa-yuishikin__section--purple {
  background-color: #f9f0ff;
}

/* 旧サイトは「目指すのは」以降の3つの帯だけ、上に白い隙間 10px がある */
.orwa-yuishikin__section--spaced {
  margin-top: 10px;
}

/* 下の固定ボタンから飛んだとき、固定ヘッダーに隠れないようにする */
.orwa-yuishikin__section[id] {
  scroll-margin-top: var(--orwa-header-h);
}

.orwa-yuishikin__title {
  position: relative;
  display: inline-block;
  margin-top: 0.83em;
  margin-bottom: 40px;
  padding-bottom: 10px;
  font-size: 1.5rem;
  font-weight: var(--orwa-fw-bold);
  color: #0068b7;
}

.orwa-yuishikin__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 50px;
  height: 2px;
  background: #f2a2ad;
  transform: translateX(-50%);
}

.orwa-yuishikin__title-large {
  font-size: 2.5rem;
}

/* --- メインビジュアル（旧 .yuishikin-mv） ------------------- */

.orwa-yuishikin__mv {
  padding-block: 100px;
  text-align: center;
}

.orwa-yuishikin__mv-title {
  margin-top: 0.67em;
  margin-bottom: 20px;
  font-family: "Shippori Mincho", serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  color: #0068b7;
}

/* --- 81% と 95%（旧 .yuishikin-stats） --------------------- */

.orwa-yuishikin__stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
}

.orwa-yuishikin__stat-image {
  width: 40%;
  height: auto;
}

.orwa-yuishikin__num {
  display: block;
  font-size: 3.5rem;
  font-weight: var(--orwa-fw-bold);
  color: #0068b7;
}

.orwa-yuishikin__stat--pink .orwa-yuishikin__num {
  color: #f2a2ad;
}

.orwa-yuishikin__divider {
  width: 20%;
  font-weight: var(--orwa-fw-bold);
  color: #666;
}

/* --- 本人・家族・特典（旧 .yuishikin-concept）
   旧サイトは高さ 80px の箱に、帯の絵（高さ 80px）を背景で敷いていた。
   高さは指定せず、見出し・文・下の余白で同じ 80px にする（27 + 18.72 + 24 + 10.28）。
   スマホで文が 2 行になると旧サイトは箱からはみ出すが、こちらは箱が伸びる。 */

.orwa-yuishikin__concept {
  margin-top: 1.17em;
  padding-bottom: 10.28px;
  background-repeat: no-repeat;
  background-size: auto 80px;
  text-align: left;
}

.orwa-yuishikin__concept--person {
  padding-left: 120px;
  background-image: url("../img/yuishikin/concept-person.png");
}

.orwa-yuishikin__concept--family {
  padding-right: 120px;
  background-image: url("../img/yuishikin/concept-family.png");
  background-position: center;
}

.orwa-yuishikin__concept--benefit {
  padding-left: 120px;
  background-image: url("../img/yuishikin/concept-benefit.png");
}

.orwa-yuishikin__concept p {
  margin: 0;
}

.orwa-yuishikin__concept-title {
  margin-bottom: 1em;
  font-size: 1.17em;
  font-weight: var(--orwa-fw-bold);
  color: #f58e9c;
}

.orwa-yuishikin__message {
  margin-top: 60px;
  font-size: 1.2rem;
}

.orwa-yuishikin__point {
  font-weight: var(--orwa-fw-bold);
  color: #f58e9c;
}

/* --- 流れ（旧 .yuishikin-flow） ----------------------------- */

.orwa-yuishikin__flow {
  margin-block: 1em;
}

.orwa-yuishikin__flow dd {
  margin-bottom: 20px;
  margin-left: 40px;
}

.orwa-yuishikin__flow-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 1.2rem;
  font-weight: var(--orwa-fw-bold);
  color: #f58e9c;
}

/* 旧サイトは高さ 3rem。絵は正方形なので幅で同じ大きさにする */
.orwa-yuishikin__flow-icon {
  flex-shrink: 0;
  width: 3rem;
  height: auto;
  margin-right: 3px;
}

/* --- 特典（旧 .yuishikin-benefits） ------------------------- */

.orwa-yuishikin__benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.orwa-yuishikin__card {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.orwa-yuishikin__card-image {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 4px;
}

/* --- よくある質問（旧 .yuishikin-faq） ---------------------- */

.orwa-yuishikin__faq {
  margin-block: 1em;
}

.orwa-yuishikin__faq dt {
  margin: 1rem;
  color: #0068b7;
}

.orwa-yuishikin__faq dd {
  margin-left: 1rem;
  color: #f58e9c;
}

/* --- 目指すのは（旧 .yuishikin-goal） ----------------------- */

.orwa-yuishikin__goal-image {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* --- 提携銀行（旧 .yuishikin-bank） ------------------------- */

.orwa-yuishikin__bank {
  margin-block: 1em;
}

.orwa-yuishikin__bank dt {
  margin: 1rem;
  font-size: 1.2rem;
  font-weight: var(--orwa-fw-bold);
}

.orwa-yuishikin__bank dd {
  margin-left: 1rem;
}

/* --- 協賛企業（旧 .yuishikin-sponsor） ---------------------- */

.orwa-yuishikin__sponsor {
  margin-block: 1em;
  padding-left: 40px;
  list-style: disc;
}

.orwa-yuishikin__sponsor li {
  margin: 1rem;
}

/* --- 画面下のボタン（旧 .yuishikin-fotter）
   旧サイトは fixed。新サイトはフッターを隠さないよう sticky にし、本文の終わりで止める。 */

.orwa-yuishikin__buttons {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-block: 10px;
  padding-inline: 0;
  list-style: none;
  background-color: rgb(255 255 255 / 90%);
  box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
}

/* 旧サイトは高さ 50px。幅で同じ大きさにする（1500×444 → 169×50） */
.orwa-yuishikin__button-image {
  display: block;
  width: 169px;
  height: auto;
}

@media (min-width: 769px) {
  .orwa-yuishikin__mv-title {
    font-size: 2rem;
  }

  .orwa-yuishikin__stats {
    flex-direction: row;
  }
}