/*
 * アイパネル 下層ページ(リニューアル版)共通スタイル(handoff 048 Part B)
 *
 * workers.dev の /help 各ページに準拠。TOP(ipanel-top.css)と同じデザイン系統
 * (オレンジ #F58213 / 本文 #242321 / クリーム面 / Noto Sans JP)。
 *   - クラスは `rtsub-*` で名前空間分離。ヘッダー/フッター共通ブロックには触れない。
 *   - body クラス `ipanel-rtsub` 配下にスコープ。
 * ブレイクポイント: mobile 〜767px / desktop 768px〜。
 */

:root {
    --rts-ink: #242321;
    --rts-ink-soft: #5b5852;
    --rts-orange: #F58213;
    --rts-orange-dark: #d96e08;
    --rts-cream: #FFFAF3;
    --rts-cream-2: #FAF7F1;
    --rts-line: #ece7de;
    --rts-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

.ipanel-rtsub { font-family: var(--rts-sans); color: var(--rts-ink); background: #fff; line-height: 1.9; }
.ipanel-rtsub img { max-width: 100%; height: auto; display: block; }

/* ボタン/リンク */
.rtsub-btn {
    display: inline-flex; align-items: center; gap: .5em; padding: 15px 30px;
    border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none;
    transition: transform .15s ease, background-color .15s ease, color .15s ease; white-space: nowrap;
}
.rtsub-btn:hover { transform: translateY(-2px); }
.rtsub-btn--primary { background: var(--rts-orange); color: #fff; }
.rtsub-btn--primary:hover { background: var(--rts-orange-dark); color: #fff; }
.rtsub-btn--ghost { background: transparent; color: var(--rts-ink); border: 1.5px solid var(--rts-ink); }
.rtsub-btn--ghost:hover { background: var(--rts-ink); color: #fff; }
.rtsub-btn--onDark { background: #fff; color: var(--rts-ink); }
.rtsub-btn--onOrange { background: var(--rts-ink); color: #fff; }
.rtsub-btn--onOrange:hover { background: #000; color: #fff; }
.rtsub-btn--onOrangeGhost { background: transparent; color: #fff; border: 1.5px solid #fff; }
.rtsub-btn--onOrangeGhost:hover { background: #fff; color: var(--rts-orange); }
.rtsub-link { display: inline-flex; align-items: center; gap: .4em; color: var(--rts-orange-dark); font-weight: 700; text-decoration: none; font-size: 15px; }
.rtsub-link:hover { color: var(--rts-orange); text-decoration: underline; }

/* ヒーロー */
.rtsub-hero { background: var(--rts-cream-2); display: flex; flex-direction: column; align-items: center; padding: 56px 20px 0; overflow: hidden; }
.rtsub-hero__inner { text-align: center; max-width: 860px; }
.rtsub-hero__title { font-size: clamp(30px, 6vw, 58px); font-weight: 900; line-height: 1.2; margin: 0 0 22px; }
.rtsub-hero__sub { font-size: clamp(15px, 2.4vw, 19px); font-weight: 500; margin: 0 0 30px; }
.rtsub-hero__img { width: 100%; max-width: 1000px; border-radius: 14px; overflow: hidden; margin-bottom: -40px; }

/* 汎用セクション */
.rtsub-sec { max-width: 1000px; margin: 0 auto; padding: 72px 20px; }
.rtsub-sec__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.rtsub-sec__title { font-size: clamp(24px, 4.5vw, 38px); font-weight: 900; line-height: 1.3; margin: 0 0 16px; }
.rtsub-sec__lead { font-size: 16px; color: var(--rts-ink-soft); margin: 0; }

/* ステップ(01-04) */
.rtsub-steps { display: grid; gap: 20px; }
.rtsub-step { display: grid; grid-template-columns: 84px 1fr; gap: 20px; align-items: start; padding: 24px; border: 1.5px solid var(--rts-line); border-radius: 14px; background: var(--rts-cream); }
.rtsub-step__no { font-size: 34px; font-weight: 900; color: var(--rts-orange); line-height: 1; }
.rtsub-step__title { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.rtsub-step__body { font-size: 15px; color: var(--rts-ink-soft); margin: 0; }
.rtsub-step__body p { margin: 0 0 10px; }

/* サイズ選び(A0-A3) */
.rtsub-sizes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 24px; }
.rtsub-size { min-width: 96px; padding: 22px 26px; border: 2px solid var(--rts-orange); border-radius: 12px; text-align: center; font-weight: 900; font-size: 22px; color: var(--rts-ink); background: #fff; }

/* アイリンク設定案内(ロゴ+テキスト) */
.rtsub-ailink { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.rtsub-ailink__logo { height: 42px; width: auto; }

/* 暗色セクション */
.rtsub-dark { background: var(--rts-ink); color: #fff; text-align: center; padding: 72px 20px; }
.rtsub-dark__title { font-size: clamp(24px, 4.5vw, 38px); font-weight: 900; margin: 0 0 18px; color: #fff; }
.rtsub-dark__body { font-size: 16px; color: #e7e3dc; max-width: 720px; margin: 0 auto; }

/* オレンジ CTA */
.rtsub-final { background: var(--rts-orange); color: #fff; text-align: center; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; }
.rtsub-final__title { font-size: clamp(24px, 4.5vw, 40px); font-weight: 900; margin: 0 0 16px; color: #fff; }
.rtsub-final__sub { font-size: 16px; font-weight: 500; margin: 0 0 30px; }
.rtsub-final__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.rtsub-final__note { font-size: 13px; color: #fff; opacity: .9; margin-top: 18px; }
.rtsub-final__note a { color: #fff; text-decoration: underline; }

/* FAQ アコーディオン */
.rtsub-faq { max-width: 820px; margin: 0 auto; }
.rtsub-faq__item { border: 1.5px solid var(--rts-line); border-radius: 12px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.rtsub-faq__q { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 18px 20px; background: none; border: none; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--rts-ink); cursor: pointer; }
.rtsub-faq__icon { flex: 0 0 auto; width: 28px; height: 28px; display: block; }
.rtsub-faq__q[aria-expanded="true"] { color: var(--rts-orange-dark); }
.rtsub-faq__toggle { margin-left: auto; flex: 0 0 auto; color: var(--rts-orange); font-weight: 900; font-size: 20px; }
.rtsub-faq__a { display: none; gap: 12px; padding: 0 20px 20px 20px; font-size: 15px; color: var(--rts-ink-soft); align-items: flex-start; }
.rtsub-faq__item.is-open .rtsub-faq__a { display: flex; }
.rtsub-faq__item.is-open .rtsub-faq__toggle { transform: rotate(45deg); }

/* 3 カラム特徴 / 汎用カード */
.rtsub-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rtsub-card { padding: 24px; border: 1.5px solid var(--rts-line); border-radius: 14px; background: var(--rts-cream); }
.rtsub-card__no { font-size: 26px; font-weight: 900; color: var(--rts-orange); }
.rtsub-card__title { font-size: 18px; font-weight: 700; margin: 6px 0 10px; }
.rtsub-card__body { font-size: 14px; color: var(--rts-ink-soft); margin: 0; }

@media (max-width: 767px) {
    .rtsub-sec { padding: 52px 18px; }
    .rtsub-step { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
    .rtsub-step__no { font-size: 28px; }
    .rtsub-cards { grid-template-columns: 1fr; }
    .rtsub-dark, .rtsub-final { padding: 56px 18px; }
    .rtsub-hero { padding: 40px 18px 0; }
    .rtsub-btn { padding: 14px 24px; font-size: 14px; }
}