@charset "UTF-8";

/* ==========================================================================
   メンバーシッププログラム／取扱医療機関／ポイント交換プログラム／
   製品パンフレット一覧／パートナー（取引先限定） 共通パーツ

   対象ページ：
     ・メンバーシッププログラム   … .aby-page.aby-page-membership
     ・取扱医療機関             … .aby-page.aby-page-medical
     ・ポイント交換プログラム     … .aby-page.aby-page-point
     ・製品パンフレット一覧       … .aby-page.aby-page-brochure
     ・パートナー（取引先限定）   … .aby-page.aby-page-partner

   元ページ（本番サイト）：
     https://www.abeyoando.co.jp/customer-support/membership
     https://www.abeyoando.co.jp/about/medical-partners
     https://www.abeyoando.co.jp/customer-support/point-program
     https://www.abeyoando.co.jp/product-brochure-list
     https://www.abeyoando.co.jp/partner （※パスワード保護ページ）
   の見た目・文言を、実際にブラウザで開いて確認のうえ再現しています。

   このファイルは support-faq.css と併用します。ページの土台（.aby-page／
   フォント・配色トークン・.aby-page-h2／.aby-page-list／.aby-page-table／
   .aby-page-contact 等）は support-faq.css のものを再利用し、他ページと
   トンマナを統一しています。本ファイルには、この5ページに固有のパーツ
   （特典カード・会員ランク表・カテゴリカード・商品交換／割引カードグリッド・
   医療機関ショーケース・法人向けフォーム・PDF一覧・機密バッジ）のみを
   追加します。

   ・すべて .aby-prog- プレフィックスでスコープしており、他のCSSファイルと
     クラス名の重複はありません。
   ========================================================================== */

/* --------------------------------------------------------------------------
   特典／メリット アイコンカード（メンバーシッププログラム冒頭・4枚）
   -------------------------------------------------------------------------- */

.aby-prog-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 0 60px; }
.aby-prog-feature-card { text-align: center; padding: 30px 16px; background: #faf8f4; border-radius: 8px; }
.aby-prog-feature-card svg { width: 44px; height: 44px; fill: var(--abyp-gold); margin: 0 auto 16px; }
.aby-prog-feature-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--abyp-text); }

/* --------------------------------------------------------------------------
   会員ランク比較表（.aby-page-table を拡張。ランク列ごとに背景色を付与）
   -------------------------------------------------------------------------- */

.aby-prog-tier-table th.is-tier { text-align: center; font-family: var(--abyp-serif); font-size: 15px; font-weight: 700; color: #fff; }
.aby-prog-tier-table td { text-align: center; }
.aby-prog-tier-table td:first-child, .aby-prog-tier-table th:first-child { text-align: left; white-space: nowrap; background: #f7f7f7; font-family: var(--abyp-serif); }
.aby-prog-tier-regular  { background: #f6c9d6 !important; color: #7a2b42 !important; }
.aby-prog-tier-bronze   { background: #e3a86a !important; }
.aby-prog-tier-silver   { background: #b9bcc0 !important; }
.aby-prog-tier-gold     { background: #c9a227 !important; }
.aby-prog-tier-platinum { background: #7fb2d8 !important; color: #fff !important; }
.aby-prog-tier-diamond  { background: #7c4fa0 !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   ご利用先／カテゴリ 概要カード（ポイント交換プログラム：寄付／商品交換／
   ギフト券交換／お買い物利用 の4枚）
   -------------------------------------------------------------------------- */

.aby-prog-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 0 60px; }
.aby-prog-cat-card { border: 1px solid var(--abyp-line-soft); padding: 28px 20px; text-align: center; }
.aby-prog-cat-card svg { width: 38px; height: 38px; fill: var(--abyp-gold); margin: 0 auto 14px; }
.aby-prog-cat-card h3 { font-family: var(--abyp-serif); font-size: 16px; font-weight: 600; margin: 0 0 10px; color: var(--abyp-text); }
.aby-prog-cat-card p { font-size: 13.5px; line-height: 1.7; margin: 0; color: var(--abyp-text); }

/* --------------------------------------------------------------------------
   詳細セクション（ポイント交換プログラムの1〜4番）：丸番号バッジ＋見出し
   -------------------------------------------------------------------------- */

.aby-prog-detail__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.aby-prog-detail__num {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: #000; color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--abyp-serif); font-size: 18px; font-weight: 600;
}
.aby-prog-detail__head h3 { font-family: var(--abyp-serif); font-size: 21px; font-weight: 600; margin: 0; color: var(--abyp-text); }
.aby-prog-detail__lead { font-size: 15px; line-height: 1.9; margin: 0 0 18px; color: var(--abyp-text); }
.aby-prog-rate {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 20px;
  background: #faf8f4; border: 1px solid var(--abyp-line-soft); margin: 0 0 26px;
}
.aby-prog-rate span:first-child { font-size: 13px; color: #777; }
.aby-prog-rate span:last-child { font-family: var(--abyp-serif); font-size: 19px; font-weight: 700; color: var(--abyp-gold); }

/* 寄付先の紹介ブロック */
.aby-prog-org { margin: 0 0 24px; padding: 20px 22px; border-left: 3px solid var(--abyp-gold); background: #faf8f4; }
.aby-prog-org h4 { font-family: var(--abyp-serif); font-size: 15.5px; font-weight: 600; margin: 0 0 8px; color: var(--abyp-text); }
.aby-prog-org p { font-size: 14px; line-height: 1.85; margin: 0 0 10px; color: var(--abyp-text); }
.aby-prog-org a { font-size: 13.5px; color: var(--abyp-gold); text-decoration: underline; }

/* ご利用ステップ（簡易3ステップ） */
.aby-prog-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0; list-style: none; padding: 0; counter-reset: aby-prog-step; }
.aby-prog-steps li { border: 1px solid var(--abyp-line-soft); padding: 22px 18px; text-align: center; }
.aby-prog-steps li::before {
  counter-increment: aby-prog-step; content: counter(aby-prog-step);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
  width: 30px; height: 30px; border-radius: 50%; background: #000; color: #fff;
  font-family: var(--abyp-serif); font-size: 14px;
}
.aby-prog-steps strong { display: block; font-family: var(--abyp-serif); font-size: 15.5px; margin-bottom: 6px; color: var(--abyp-text); }
.aby-prog-steps p { font-size: 14px; line-height: 1.7; margin: 0; color: #555; }

/* --------------------------------------------------------------------------
   商品カードグリッド（ポイント交換プログラムの商品交換カタログ／
   パートナーページの取引先限定割引カタログ、共通で使用）
   -------------------------------------------------------------------------- */

.aby-prog-product-subhead { font-family: var(--abyp-serif); font-size: 16px; font-weight: 600; margin: 30px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--abyp-line-soft); color: var(--abyp-text); }
.aby-prog-product-subhead:first-child { margin-top: 0; }

.aby-prog-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 20px; }
.aby-prog-product-card { border: 1px solid var(--abyp-line-soft); padding: 18px 20px; font-size: 13.5px; }
.aby-prog-product-card__name { font-family: var(--abyp-serif); font-size: 15px; font-weight: 600; line-height: 1.5; margin: 0 0 12px; color: var(--abyp-text); min-height: 45px; }
.aby-prog-product-card__row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-top: 1px dashed var(--abyp-line-soft); }
.aby-prog-product-card__row:first-of-type { border-top: 0; }
.aby-prog-product-card__row span:first-child { color: #777; }
.aby-prog-product-card__row span:last-child { font-family: var(--abyp-serif); font-weight: 700; color: var(--abyp-gold); }
.aby-prog-product-card__row.is-strike span:last-child { font-weight: 400; color: #999; text-decoration: line-through; font-family: var(--abyp-sans); }

/* パートナー限定価格カード：割引率バッジ付き */
.aby-prog-discount-badge {
  display: inline-block; padding: 4px 16px; margin: 0 0 20px;
  background: var(--abyp-a-bg); color: #fff; font-family: var(--abyp-serif); font-size: 16px; font-weight: 700; letter-spacing: .04em;
}
.aby-prog-product-card.is-discount .aby-prog-product-card__row.is-limited span:last-child { font-size: 17px; }

/* --------------------------------------------------------------------------
   医療機関ショーケース（取扱医療機関）
   -------------------------------------------------------------------------- */

.aby-prog-clinic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 0 0 60px; }
.aby-prog-clinic-card__photo {
  background: #eee; border: 1px solid var(--abyp-line-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden;
}
.aby-prog-clinic-card__photo svg { width: 40px; height: 40px; fill: #bbb; }
/* 提供いただいた写真の実サイズが幅250px程度のため、カード幅いっぱいに引き伸ばさず、
   実寸のまま中央表示（ぼやけ防止）。カードの余白は写真の左右に均等に出ます。 */
.aby-prog-clinic-card__photo img { display: block; width: 250px; max-width: 100%; height: auto; }
.aby-prog-clinic-card h3 { font-family: var(--abyp-serif); font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--abyp-text); }
.aby-prog-clinic-card p { font-size: 13.5px; line-height: 1.7; margin: 0; color: #555; }

/* --------------------------------------------------------------------------
   法人様向けお問い合わせフォーム（静的マークアップのみ／送信機能なし）

   ※2026-09-26：取扱医療機関ページはこの静的フォームをやめ、Googleフォームへの
   リンクボタン（下の .aby-prog-form-link-wrap／.aby-prog-form-link）に変更しました。
   この .aby-prog-form-note／.aby-prog-form 系のルールは、パートナーページ等で
   同じ静的フォームパーツを使う場合に備えて残しています。
   -------------------------------------------------------------------------- */

.aby-prog-form-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 16px 18px; margin: 0 0 30px; background: #fff8e6; border: 1px solid #e8cf8a;
  font-size: 13px; line-height: 1.8; color: #6b5313;
}
.aby-prog-form-note svg { width: 20px; height: 20px; fill: #b8860b; flex: 0 0 auto; margin-top: 2px; }

.aby-prog-form { border: 1px solid var(--abyp-line-soft); padding: 34px; }
.aby-prog-form__row { margin-bottom: 22px; }
.aby-prog-form__row:last-child { margin-bottom: 0; }
.aby-prog-form__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--abyp-text); }
.aby-prog-form__label .req { display: inline-block; margin-left: 8px; padding: 1px 8px; background: var(--abyp-a-bg); color: #fff; font-size: 11px; border-radius: 2px; vertical-align: middle; }
.aby-prog-form__control {
  width: 100%; padding: 12px 14px; border: 1px solid var(--abyp-line-soft); border-radius: 3px;
  font-size: 14px; font-family: var(--abyp-sans); color: #999; background: #fafafa; pointer-events: none;
}
textarea.aby-prog-form__control { resize: none; height: 96px; }
.aby-prog-form__submit {
  display: block; width: 100%; max-width: 260px; margin: 30px auto 0; padding: 14px; border: 0;
  background: #ccc; color: #fff; font-family: var(--abyp-serif); font-size: 15px; letter-spacing: .08em;
  text-align: center; cursor: not-allowed;
}

/* Googleフォームへのリンクボタン（取扱医療機関）
   2026-09-26：背景色をご指定の #7d5c1e に変更。また共通スタイル側の
   リンク色指定がこちらの白文字より強く効いて文字が読めなくなっていたため、
   :link／:visited にも同じ指定を重ねて確実に白文字になるようにしています。 */
.aby-prog-form-link-wrap { display: flex; justify-content: center; margin: 30px 0; }
.aby-prog-form-link,
.aby-prog-form-link:link,
.aby-prog-form-link:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 320px; padding: 16px 20px;
  background: #7d5c1e; color: #fff !important;
  font-family: var(--abyp-serif); font-size: 15px; letter-spacing: .08em;
  text-decoration: none; transition: opacity .2s ease, background-color .2s ease;
}
.aby-prog-form-link svg { width: 18px; height: 18px; fill: #fff; flex: 0 0 auto; }
.aby-prog-form-link:hover { opacity: .85; }

/* --------------------------------------------------------------------------
   お問い合わせ対応・個人情報の取扱い等の見出し付き注意文をボックス化
   （取扱医療機関ページの callout 内。見出しと本文がひとまとまりに見えるように
   背景・枠線をつけています）
   -------------------------------------------------------------------------- */

.aby-prog-callout-box { margin: 0 0 24px; padding: 20px 22px; border: 1px solid var(--abyp-line-soft); background: #faf8f4; }
.aby-prog-callout-box:last-child { margin-bottom: 0; }
.aby-prog-callout-box__title { display: block; font-family: var(--abyp-serif); font-size: 15.5px; font-weight: 700; margin: 0 0 10px; color: var(--abyp-text); }
.aby-prog-callout-box p { font-size: 13.5px; line-height: 1.85; margin: 0 0 12px; color: var(--abyp-text); }
.aby-prog-callout-box p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   PDFダウンロード一覧（製品パンフレット一覧）
   -------------------------------------------------------------------------- */

.aby-prog-pdf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--abyp-line-soft); }
.aby-prog-pdf-item {
  display: flex; align-items: center; gap: 18px; padding: 22px 4px;
  border-bottom: 1px solid var(--abyp-line-soft);
}
.aby-prog-pdf-item svg { width: 30px; height: 30px; fill: var(--abyp-a-bg); flex: 0 0 auto; }
.aby-prog-pdf-item__body { flex: 1 1 auto; min-width: 0; }
.aby-prog-pdf-item__name { font-family: var(--abyp-serif); font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--abyp-text); }
.aby-prog-pdf-item__cat { font-size: 12.5px; color: #888; }
.aby-prog-pdf-item a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border: 1px solid var(--abyp-line); text-decoration: none;
  font-size: 13.5px; color: var(--abyp-text); white-space: nowrap;
}
.aby-prog-pdf-item a:hover { background: #f4f4f4; }

/* --------------------------------------------------------------------------
   機密／限定バッジと注意事項ブロック（パートナーページ）
   -------------------------------------------------------------------------- */

.aby-prog-confidential {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 20px 24px; margin: 0 0 40px; background: #4b0001; color: #fff;
  font-size: 13.5px; line-height: 1.9;
}
.aby-prog-confidential svg { width: 22px; height: 22px; fill: #fff; flex: 0 0 auto; margin-top: 2px; }
.aby-prog-confidential strong { display: block; font-family: var(--abyp-serif); font-size: 15px; margin-bottom: 4px; letter-spacing: .04em; }

.aby-prog-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0 0 40px; }
.aby-prog-point-card { padding: 24px 26px; border-left: 4px solid var(--abyp-gold); background: #faf8f4; }
.aby-prog-point-card h3 { font-family: var(--abyp-serif); font-size: 16px; font-weight: 700; color: var(--abyp-gold); margin: 0 0 10px; }
.aby-prog-point-card p { font-size: 14.5px; line-height: 1.8; margin: 0; color: var(--abyp-text); }
.aby-prog-point-card.is-usage { grid-column: 1 / -1; border-left-color: #4b7bab; }
.aby-prog-point-card.is-usage h3 { color: #4b7bab; }

/* --------------------------------------------------------------------------
   会員ランク比較表：スマホ用カード表示（横スクロールでの「ブレ」対策）

   会員ランク表は6ランク×4項目と列数が多く、スマホ幅ではsupport-faq.css側の
   表スマホ調整（最小幅解除・文字縮小）だけでは収まりきらず、表の横スクロール
   量が大きいために触れると画面が横に大きく動く＝「ブレ」て見える状態になって
   いました。他ページの表（都道府県別送料表など）は横スクロールを許容する形で
   解決しましたが、この表は列数が多くその方法では解決しないため、スマホでは
   横スクロールする表自体を非表示にし、代わりにランクごとのカード（縦積み）で
   同じ情報を表示する形にしています（PC/タブレットでは従来どおり表を表示）。
   -------------------------------------------------------------------------- */

.aby-prog-tier-cards { display: none; }
.aby-prog-tier-card { border: 1px solid var(--abyp-line-soft); margin-bottom: 14px; }
.aby-prog-tier-card:last-child { margin-bottom: 0; }
.aby-prog-tier-card__head {
  padding: 12px 16px; font-family: var(--abyp-serif); font-size: 16px; font-weight: 700; text-align: center;
}
.aby-prog-tier-card__body { padding: 4px 16px; }
.aby-prog-tier-card__row {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--abyp-line-soft); font-size: 13.5px;
}
.aby-prog-tier-card__row:first-child { border-top: 0; }
.aby-prog-tier-card__row span:first-child { color: #777; flex: 0 0 auto; }
.aby-prog-tier-card__row span:last-child { text-align: right; color: var(--abyp-text); }

/* --------------------------------------------------------------------------
   スマートフォン
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .aby-prog-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .aby-prog-feature-card { padding: 22px 12px; }
  .aby-prog-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .aby-prog-steps { grid-template-columns: 1fr; gap: 14px; }
  .aby-prog-product-grid { grid-template-columns: 1fr; gap: 14px; }
  .aby-prog-clinic-grid { grid-template-columns: 1fr; gap: 20px; }
  .aby-prog-points { grid-template-columns: 1fr; }
  .aby-prog-tier-table-wrap { display: none; }
  .aby-prog-tier-cards { display: block; }
  .aby-prog-detail__head h3 { font-size: 18px; }
  .aby-prog-form { padding: 22px 18px; }
}