/*
 * 選択カード（共通テンプレート・2026-10-23）
 * 「作り方・タイプを選ぶ」カード列。社員証・学生証・認定証（id-card/）と会員カードのページで共通。
 * 見た目はここ1か所だけで決める（各ページはクラス名を付けたHTMLを書くだけ。インラインstyleは書かない）。
 *
 *   <div class="choice-cards [choice-cards--compact-title]">
 *     <article class="choice-card [choice-card--badge]">
 *       <p class="choice-card__label">オンラインで作成</p>
 *       <img class="choice-card__badge" …>                      … 任意（右上のクーポン画像など）
 *       <h3 class="choice-card__title">自分でデザイン</h3>
 *       <p class="choice-card__desc">…</p>
 *       <div class="choice-card__price"><span>初回1枚</span> <strong>10,534円〜</strong><small>（税込）</small></div>
 *       <p class="choice-card__fee">…</p>                         … 任意
 *       <a class="choice-card__more" href="…">料金を見る →</a>    … 任意（ボタンでも可）。2つ以上は <div class="choice-card__links"> で囲む
 *       <div class="choice-card__image"><img …></div>
 *       <a class="choice-card__button" href="…">注文する →</a>
 *       ── ボタンが2つ以上の時は article に choice-card--multi を付け、ボタンを <div class="choice-card__actions"> で囲む
 *     </article>
 *   </div>
 *
 * カードは幅380pxで中央に並ぶ（2枚でも3枚でも）。入りきらない幅では横スクロール（860px以下は左右余白22px）。
 * --compact-title：見出しが長いページ用（18px。全角17字まで1行に収まる。会員カード等）。
 * --white：カード列の背景を白にする（白いセクション内に置く場合）。
 * --four：4枚を1列に（1枚 250〜300px）。見出しは --compact-title と併用。
 */
.choice-cards{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 32px 24px;scrollbar-width:none;box-sizing:border-box;background:transparent;}
.choice-cards::-webkit-scrollbar{display:none;}
/* 白い帯の上に置く場合（id-card の社員証・学生証・認定証ページ） */
.choice-cards--white{background:#fff!important;}
/* はみ出さない時は中央に、はみ出す時は左から（auto margin はスクロール時に左端が切れない） */
.choice-cards>.choice-card:first-child{margin-left:auto;}
.choice-cards>.choice-card:last-child{margin-right:auto;}

.choice-cards .choice-card{flex:0 0 380px;box-sizing:border-box;min-width:0;min-height:560px;position:relative;overflow:visible;display:flex;flex-direction:column;scroll-snap-align:start;padding:36px 32px 76px;background:#fff!important;border:1.5px solid #a8b2bf!important;border-radius:28px!important;box-shadow:0 12px 36px #0f172a08;text-align:left;}

.choice-cards .choice-card__label{order:0;margin:0 0 15px!important;font-size:13px!important;font-weight:700!important;line-height:1.6!important;color:#6e6e73!important;letter-spacing:normal!important;}
.choice-cards .choice-card--badge .choice-card__label{padding-right:138px!important;min-height:70px!important;}
.choice-cards .choice-card__badge{position:absolute!important;top:12px!important;right:-24px!important;width:156px!important;height:104px!important;object-fit:contain!important;border-radius:10px!important;background:transparent!important;}

.choice-cards .choice-card__title{order:0;margin:0 0 18px!important;font-size:26px!important;font-weight:600!important;line-height:1.35!important;letter-spacing:normal!important;color:#1d1d1f!important;}
.choice-cards--compact-title .choice-card__title{font-size:18px!important;}

.choice-cards .choice-card__desc{order:0;margin:0 0 16px!important;min-height:0!important;font-size:14px!important;line-height:1.7!important;color:#6e6e73!important;}
.choice-cards .choice-card__price{order:0;margin:0!important;font-size:14px!important;line-height:1.6!important;color:#101828!important;}
.choice-cards .choice-card__price strong{font-size:14px!important;font-weight:600!important;color:#1d1d1f!important;}
.choice-cards .choice-card__price span,.choice-cards .choice-card__price small{font-size:14px!important;font-weight:400!important;color:#6e6e73!important;}
.choice-cards .choice-card__fee{order:0;margin:2px 0 0!important;min-height:0!important;font-size:14px!important;line-height:1.6!important;color:#6e6e73!important;}

/* 「料金を見る」等の文字リンク。a でも button でもよい */
.choice-cards .choice-card__more{order:1;align-self:flex-start;display:inline-block!important;width:auto!important;height:auto!important;min-height:0!important;box-shadow:none!important;margin:8px 0 0!important;padding:0!important;border:0!important;background:transparent!important;font:inherit;font-size:12px!important;line-height:1.6!important;color:#0071e3!important;text-align:left;text-decoration:none!important;cursor:pointer;}

/* 文字リンクが2つ以上（「詳細を見る」「料金を見る」）は横に並べる */
.choice-cards .choice-card__links{order:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:8px 0 0;}
.choice-cards .choice-card__links .choice-card__more{margin:0!important;vertical-align:baseline;line-height:1.6!important;}

.choice-cards .choice-card__image{order:2;height:240px;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin:auto -6px 0;padding:24px 0 38px;}
.choice-cards .choice-card__image img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px;}

.choice-cards .choice-card__button{position:absolute;left:32px;right:32px;bottom:24px;display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;height:44px;min-height:44px;padding:10px 16px;border:0;border-radius:8px;background:#0071e3!important;color:#fff!important;-webkit-text-fill-color:#fff;font-size:14px!important;font-weight:700!important;line-height:1!important;text-decoration:none!important;}
.choice-cards .choice-card__button:focus-visible{outline:3px solid #0071e3;outline-offset:3px;}

/* ボタンが2つ以上（例：MIFARE／FeliCa で注文、白無地／テンプレートを注文） */
.choice-cards .choice-card--multi{padding-bottom:24px;}
.choice-cards .choice-card__actions{order:3;display:flex;flex-direction:column;gap:8px;}
.choice-cards .choice-card__actions .choice-card__button{position:static;}

/* 4枚を1列に並べる（1枚の幅は残りの幅で等分、最大300px・最小250px。入らなければ横スクロール） */
.choice-cards--four .choice-card{flex:1 1 0;min-width:250px;max-width:300px;padding-left:28px;padding-right:28px;}
.choice-cards--four .choice-card__button{left:28px;right:28px;}

@media(max-width:860px){
  .choice-cards{padding-left:22px;padding-right:22px;gap:16px;}
}