@charset "utf-8";

:root {
    --green: #15a648;
    --green-dk: #1e3d22;
    --ink: #282828;
    --sub: #333;
    --line: #e5e7eb;
    --line2: #dfe0ed;
    --panel: #ebf5eb;
    --panel2: #eef2e8;
    --panel3: #fbffef;
    --lime: #9ec73c;
    --red: #e46a6a;
    --card-sh: 0 2px 8px rgba(0, 0, 0, 0.08);
    --read: 1240px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* ===== 共通レイアウト ===== */
.section {
    max-width: var(--read);
    margin: 0 auto;
    padding: 0 20px;
}
.sec-block {
    padding: 44px 0;
}
.band {
    width: 100%;
}
h1.page-h {
    font-size: 34px;
    font-weight: 700;
    color: var(--green);
    line-height: 1.35;
}
.sec-h {
    font-size: 30px;
    font-weight: 700;
    color: var(--sub);
    line-height: 1.4;
    margin: 0 0 10px;
}
.sec-lead {
    font-size: 16px;
    color: #282828;
    line-height: 1.85;
    margin: 0 0 26px;
}
.note {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.8;
    margin-top: 10px;
}
.term {
    font-size: 14px;
    color: #5b6470;
}
.kome {
    color: #e46a6a;
    font-size: 14px;
    font-weight: 700;
}

/* ===== ボタン（primary＝緑塗り／secondary＝白地緑枠）===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    padding: 16px 26px;
    font-size: 17px;
    line-height: 1.3;
    min-height: 56px;
    text-align: center;
}
.btn-primary {
    background: var(--green);
    color: #fff;
}
.btn-secondary {
    background: #fff;
    color: var(--green);
    border: 2px solid var(--green);
}

/* ===== カード ===== */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--card-sh);
    padding: 24px;
}

/* ===== プレースホルダ枠（アイコン／アプリ画面／バッジ／QR：実素材はデザイン段階で支給）===== */
.ph {
    background: #f3f5f7;
    border: 2px dashed #c4cbd3;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #8a929b;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px;
    line-height: 1.4;
}
.ph-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    font-size: 11px;
    border-radius: 12px;
}
.ph-screen {
    width: 100%;
    aspect-ratio: 9/16;
    background: #f3f5f7;
}
.ph-badge {
    width: 180px;
    height: 56px;
    text-decoration: none;
}
.ph-qr {
    width: 132px;
    height: 132px;
    flex: 0 0 auto;
}
/* ===== kojin_e 由来のマスク単色アイコン（緑・機能カード用）===== */
.ic {
    display: inline-block;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    background: var(--green);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 85%;
    mask-size: 85%;
}
.sp-feat .ic {
    width: 34px !important;
    height: 34px !important;
}
.i-ib {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='10' y='20' width='28' height='21' rx='3'/><path d='M16 20v-6a8 8 0 0 1 16 0v6'/><circle cx='24' cy='29' r='3'/><line x1='24' y1='32' x2='24' y2='37'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='10' y='20' width='28' height='21' rx='3'/><path d='M16 20v-6a8 8 0 0 1 16 0v6'/><circle cx='24' cy='29' r='3'/><line x1='24' y1='32' x2='24' y2='37'/></svg>");
} /* 鍵アイコン（ログイン・認証系）*/
.i-kouza {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='12' width='28' height='19' rx='3'/><line x1='4' y1='19' x2='32' y2='19'/><circle cx='36' cy='34' r='8'/><line x1='36' y1='30' x2='36' y2='38'/><line x1='32' y1='34' x2='40' y2='34'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='12' width='28' height='19' rx='3'/><line x1='4' y1='19' x2='32' y2='19'/><circle cx='36' cy='34' r='8'/><line x1='36' y1='30' x2='36' y2='38'/><line x1='32' y1='34' x2='40' y2='34'/></svg>");
} /* カード＋プラス（新規口座開設）*/
.i-bell {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M24 6v3'/><path d='M14 30v-8a10 10 0 0 1 20 0v8l4 6H10z'/><path d='M20 40a4 4 0 0 0 8 0'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M24 6v3'/><path d='M14 30v-8a10 10 0 0 1 20 0v8l4 6H10z'/><path d='M20 40a4 4 0 0 0 8 0'/></svg>");
} /* ベル（お知らせ通知・他カードとstroke幅を揃えたシンプル形）*/
.i-tucho {
    -webkit-mask-image: url("/komashin/img/app/icon_tz_tucho.png");
    mask-image: url("/komashin/img/app/icon_tz_tucho.png");
}
.i-coins {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='24' cy='12' rx='14' ry='5'/><path d='M10 12 L10 34'/><path d='M38 12 L38 34'/><path d='M10 34 A14 5 0 0 0 38 34'/><path d='M10 20 A14 5 0 0 0 38 20'/><path d='M10 27 A14 5 0 0 0 38 27'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='24' cy='12' rx='14' ry='5'/><path d='M10 12 L10 34'/><path d='M38 12 L38 34'/><path d='M10 34 A14 5 0 0 0 38 34'/><path d='M10 20 A14 5 0 0 0 38 20'/><path d='M10 27 A14 5 0 0 0 38 27'/></svg>");
} /* コイン3段重ね＝上面楕円＋側面2本＋段差弧2本＋下端弧（残高照会） */
.i-cal {
    -webkit-mask-image: url("../design_up/furoan_parts/spec__Vector-1.png");
    mask-image: url("../design_up/furoan_parts/spec__Vector-1.png");
    -webkit-mask-size: 80%;
    mask-size: 80%;
}
.i-tip {
    -webkit-mask-image: url("/komashin/img/app/ic_sim.png");
    mask-image: url("/komashin/img/app/ic_sim.png");
}
/* 追加アイコン（機能カードのアイコン差別化・2026-07）*/
.i-doc {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M10 4h15l9 9v31a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/><path d='M25 4v9h9'/><line x1='13' y1='21' x2='27' y2='21'/><line x1='13' y1='28' x2='22' y2='28'/><circle cx='28' cy='32' r='6'/><line x1='32.5' y1='36.5' x2='38' y2='42'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M10 4h15l9 9v31a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/><path d='M25 4v9h9'/><line x1='13' y1='21' x2='27' y2='21'/><line x1='13' y1='28' x2='22' y2='28'/><circle cx='28' cy='32' r='6'/><line x1='32.5' y1='36.5' x2='38' y2='42'/></svg>");
} /* 書類＋虫めがね（口座履歴明細・入出金の確認）*/
.i-bank {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,17 24,5 42,17'/><line x1='4' y1='17' x2='44' y2='17'/><line x1='10' y1='22' x2='10' y2='35'/><line x1='19' y1='22' x2='19' y2='35'/><line x1='29' y1='22' x2='29' y2='35'/><line x1='38' y1='22' x2='38' y2='35'/><line x1='4' y1='40' x2='44' y2='40'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,17 24,5 42,17'/><line x1='4' y1='17' x2='44' y2='17'/><line x1='10' y1='22' x2='10' y2='35'/><line x1='19' y1='22' x2='19' y2='35'/><line x1='29' y1='22' x2='29' y2='35'/><line x1='38' y1='22' x2='38' y2='35'/><line x1='4' y1='40' x2='44' y2='40'/></svg>");
} /* 銀行の建物（定期預金の預け入れ・解約）*/
.i-nopass {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='12' width='30' height='20' rx='3'/><line x1='4' y1='19' x2='34' y2='19'/><line x1='2' y1='42' x2='38' y2='6'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='12' width='30' height='20' rx='3'/><line x1='4' y1='19' x2='34' y2='19'/><line x1='2' y1='42' x2='38' y2='6'/></svg>");
} /* カード＋斜線（通帳レス口座＝通帳を使わない）*/
/* 実素材（支給済み）*/
.appshot {
    width: 100%;
    aspect-ratio: 9/19.4;
    object-fit: cover;
    object-position: top center;
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: var(--card-sh);
    background: #fff;
    display: block;
}
.qr {
    width: 132px;
    height: 132px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 4px;
}
.mascot {
    height: 78px;
    width: auto;
    flex: 0 0 auto;
}
.brand-ic {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    flex: 0 0 auto;
}
.screen-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 10px;
}
.screen-gallery figure {
    text-align: center;
    margin: 0;
    min-width: 0;
}
.screen-gallery figcaption {
    font-size: 13px;
    color: #5b6470;
    margin-top: 8px;
}
/* くわしい手順の代表画面（可読サイズ・数枚のみ）*/
.step-gallery-h {
    font-weight: 700;
    color: var(--sub);
    font-size: 15px;
    margin-top: 22px;
}
.step-gallery {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 14px 0 4px;
}
.step-gallery figure {
    width: 250px;
    text-align: center;
    margin: 0;
}
.step-gallery figcaption {
    font-size: 13px;
    color: #5b6470;
    margin-top: 8px;
}
.ph-shot {
    width: 100%;
    aspect-ratio: 9/19.4;
    background: #f3f5f7;
    border: 2px dashed #c4cbd3;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #8a929b;
    font-size: 13px;
    font-weight: 700;
    padding: 10px;
    line-height: 1.5;
}
@media (max-width: 900px) {
    .screen-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== A. ヒーロー ===== */
.hero {
    background: #ebf5eb;
    padding: 40px 0 36px;
}
.hero-in {
    max-width: var(--read);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: center;
}
.hero-txt {
    flex: 1 1 auto;
    min-width: 0;
} /* 左列いっぱいに拡幅／タイトル上端を右列(スマホ画面)の上端にそろえる（スマホ画像を縮小しないため、高さの差は下側の余白として自然に逃がす） */
.hero-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--green);
    color: var(--green);
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 16px;
    margin-bottom: 14px;
}
.hero-lead {
    font-size: 18px;
    color: #282828;
    line-height: 1.9;
    margin: 14px 0 22px;
    font-weight: 500;
}
.hero-shot {
    flex: 0 0 353px;
}
/* ヒーローのスマホ画面：端末ベゼル付き（SPのphone-shellと同系）*/
.hero-device {
    box-sizing: border-box;
    width: 353px;
    margin: 0 auto;
    background: #1f2937;
    border-radius: 44px;
    padding: 12px;
    box-shadow: 0 18px 44px rgba(20, 30, 45, 0.3);
    position: relative;
}
.hero-device::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 5px;
    border-radius: 3px;
    background: #3a4453;
    z-index: 2;
}
.hero-device-screen {
    border-radius: 36px;
    overflow: hidden;
    background: #fff;
    line-height: 0;
}
.hero-device-screen .appshot {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
}
/* スマホ画面の共通フレーム（外枠）：全画面画像に適用 */
.phone-frame {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    background: #1f2937;
    border-radius: 34px;
    padding: 9px;
    box-shadow: 0 12px 30px rgba(20, 30, 45, 0.28);
    position: relative;
    line-height: 0;
}
.phone-frame::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 3px;
    background: #3a4453;
    z-index: 2;
}
.phone-frame .appshot {
    border-radius: 26px;
    border: 0;
    box-shadow: none;
    background: #fff;
}
.sp-hero .phone-frame {
    max-width: 202px;
    margin: 14px auto 0;
}
/* 信頼ストリップ（金庫の事業規模＝社会的証明の代替。※アプリのDL数/評価ではない）*/
.trust-strip {
    margin-top: 26px;
}
.ts-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--card-sh);
    padding: 20px 28px;
}
.ts-item {
    flex: 1 1 0;
    text-align: center;
    padding: 0 10px;
    min-width: 160px;
}
.ts-num {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: var(--green-dk);
    line-height: 1.15;
}
.ts-num .ts-u {
    font-size: 15px;
    font-weight: 700;
    color: var(--sub);
    margin-left: 2px;
}
.ts-lbl {
    display: block;
    font-size: 13px;
    color: #5b6470;
    margin-top: 5px;
    font-weight: 700;
}
.ts-sep {
    width: 1px;
    height: 44px;
    background: var(--line2);
    flex: 0 0 auto;
}
.ts-src {
    font-size: 13px;
    color: #5b6470;
    line-height: 1.8;
    margin-top: 12px;
    text-align: center;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 700px) {
    .ts-panel {
        flex-direction: column;
        gap: 14px;
    }
    .ts-sep {
        width: 60%;
        height: 1px;
    }
}

/* DL導線ブロック（バッジ＋QR） */
.dl-box {
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 12px;
    box-shadow: var(--card-sh);
    padding: 22px 24px;
    margin-top: 4px;
}
.dl-box .dl-h {
    font-size: 22px;
    font-weight: 700;
    color: var(--sub);
    margin-bottom: 6px;
}
.dl-cols {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.dl-col {
    flex: 1 1 220px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
    background: var(--panel3);
    display: flex;
    align-items: center;
    gap: 16px;
}
.dl-col .qr {
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
}
.dl-col-txt {
    flex: 1;
    min-width: 0;
}
.dl-col-txt .os {
    font-size: 18px;
    font-weight: 700;
    color: var(--sub);
    margin-bottom: 12px;
}
.dl-col-txt .btn {
    width: 100%;
    min-height: 46px;
    padding: 10px 18px;
    font-size: 16px;
    white-space: nowrap;
} /* DLボタン：1行・縦幅適正・16px */
.dl-info {
    list-style: none;
    margin-top: 16px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}
.dl-info li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    color: #282828;
    line-height: 1.8;
    margin: 6px 0;
}
.dl-info li::before {
    content: "・";
    position: absolute;
    left: 2px;
    color: var(--green);
    font-weight: 700;
}
.dl-info strong {
    color: var(--green-dk);
}
.dl-hint {
    font-size: 14px;
    color: #5b6470;
    margin-top: 14px;
    line-height: 1.7;
}
/* ヒーローのDLは左列いっぱいに拡幅し、iPhone/Android を横並び（2カラム）*/
.hero .dl-cols {
    gap: 22px;
} /* 横並び（row＝デフォルト）。左2ブロック＋右スマホが密集しない間隔 */
.hero .dl-info {
    margin-top: 14px;
    padding-top: 14px;
}
.hero .dl-info li {
    font-size: 16px;
    margin: 8px 0;
    line-height: 1.85;
} /* 中身に合わせてコンパクト（高齢者可読16px）*/
/* DLのQRは共通 .dl-col .qr（120px＝スキャン可能サイズ）に統一 */

/* 困ったとき（高齢者の逃げ道）*/
.help-box {
    background: var(--panel3);
    border: 1px solid var(--green);
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 22px;
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.help-box .hb-txt {
    flex: 1;
    min-width: 240px;
}
.help-box .hb-h {
    font-size: 17px;
    font-weight: 700;
    color: var(--green-dk);
}
.help-box .hb-d {
    font-size: 16px;
    color: #282828;
    margin-top: 4px;
    line-height: 1.8;
}
.help-box .hb-tel {
    font-size: 22px;
    font-weight: 700;
    color: var(--green);
    white-space: nowrap;
}
.help-box .hb-tel span {
    display: block;
    font-size: 13px;
    color: #5b6470;
    font-weight: 500;
}
.help-box .hb-sub {
    font-size: 13px;
    color: #5b6470;
    margin-top: 8px;
}
.help-box .hb-btn {
    flex: 0 0 auto;
    font-size: 16px;
    padding: 16px 24px;
    min-height: 56px;
    white-space: nowrap;
}
.help-box .hb-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}
/* ヒーローの困った枠はゆったり・文字大きめ（横並び化で空いた縦を有用に）*/
/* 困った枠：2段（上＝見出し＋本文／下＝連絡先＋窓口ボタンを対で横並び。ボタンの浮きを解消）*/
.hero .help-box {
    display: block;
    padding: 24px 28px;
    margin-top: 20px;
}
.hero .help-box .hb-h {
    font-size: 19px;
}
.hero .help-box .hb-d {
    font-size: 16px;
    line-height: 1.9;
    margin-top: 8px;
}
.hb-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.hb-foot .hb-contact {
    flex: 1 1 auto;
    min-width: 0;
}
.hb-foot .hb-dept {
    font-size: 15px;
    font-weight: 700;
    color: var(--sub);
}
.hb-foot .hb-sub {
    font-size: 16px;
    margin-top: 4px;
    color: #333;
}
.hb-foot .hb-sub strong {
    color: var(--green);
    font-size: 20px;
    letter-spacing: 0.3px;
}
.hb-foot .hb-btn {
    flex: 0 0 auto;
    font-size: 16px;
    padding: 14px 24px;
    min-height: 56px;
    white-space: nowrap;
}

/* ===== B. 重要なお知らせ帯（赤は控えめに）===== */
.notice-band {
    background: #fff6f6;
    border-top: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
}
.notice-in {
    max-width: var(--read);
    margin: 0 auto;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.notice-tag {
    flex: 0 0 auto;
    background: var(--red);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    padding: 5px 12px;
    white-space: nowrap;
}
.notice-in .nb-h {
    font-size: 17px;
    font-weight: 700;
    color: #b4444c;
    margin-bottom: 4px;
}
.notice-in p {
    font-size: 16px;
    color: #333;
    line-height: 1.85;
}
/* お知らせ：ボックス型（kariru/kojin_e準拠・タイトル上部用）*/
.notice-card {
    background: #fff4f4;
    border-radius: 12px;
    padding: 18px 22px;
}
.notice-card .notice-tag {
    display: inline-block;
    margin-bottom: 8px;
    white-space: normal;
}
.notice-card .nb-h {
    font-size: 17px;
    font-weight: 700;
    color: #b4444c;
    margin: 0 0 4px;
    line-height: 1.5;
}
.notice-card .nb-p {
    font-size: 16px;
    color: #333;
    line-height: 1.85;
}
/* お知らせ：全幅バンド型（kariru準拠・角丸0・下線のみ）*/
.notice-fw {
    width: 100%;
    background: #fff4f4;
    border-bottom: 1px solid #e46a6a;
}
.notice-fw-in {
    max-width: var(--read);
    margin: 0 auto;
    padding: 18px 20px;
}
.notice-fw-in .notice-tag {
    display: inline-block;
    margin-bottom: 8px;
    white-space: normal;
}
.notice-fw-in .nb-h {
    font-size: 17px;
    font-weight: 700;
    color: #b4444c;
    margin: 0 0 4px;
    line-height: 1.5;
}
.notice-fw-in .nb-p {
    font-size: 16px;
    color: #333;
    line-height: 1.85;
}

/* ===== C. できること（機能カード）===== */
.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.feat-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.feat-card .fc-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.feat-card .fc-t {
    font-size: 18px;
    font-weight: 700;
    color: var(--sub);
    line-height: 1.4;
}
.feat-card .fc-d {
    font-size: 16px;
    color: #282828;
    line-height: 1.8;
}
.feat-card .fc-term {
    font-size: 13px;
    color: #5b6470;
}

/* ===== D. ご利用になれる方 ===== */
.who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.who-card {
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
}
.who-card .wc-tag {
    display: inline-block;
    background: var(--green);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    padding: 5px 14px;
    margin-bottom: 12px;
}
.who-card .wc-t {
    font-size: 18px;
    font-weight: 700;
    color: var(--sub);
    margin-bottom: 8px;
}
.who-card .wc-d {
    font-size: 16px;
    color: #282828;
    line-height: 1.85;
}

/* ===== E. 始め方（要約3ステップ）===== */
.flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.flow-step {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--card-sh);
    padding: 22px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
}
.flow-no {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
}
.flow-step .fs-t {
    font-size: 20px;
    font-weight: 700;
    color: var(--sub);
}
.flow-step .fs-d {
    font-size: 15px;
    color: #5b6470;
    margin-top: 10px;
    line-height: 1.7;
    flex-basis: 100%;
    width: 100%;
}

/* 詳細手順（折りたたみ）*/
details.acc {
    border: 1px solid var(--line2);
    border-radius: 12px;
    margin-top: 16px;
    overflow: hidden;
    background: #fff;
}
details.acc > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    font-size: 17px;
    font-weight: 700;
    color: var(--sub);
    background: var(--panel3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
details.acc > summary::-webkit-details-marker {
    display: none;
}
details.acc > summary .mk {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--green);
    font-weight: 700;
}
details.acc[open] > summary .mk-open {
    display: inline;
}
details.acc[open] > summary .mk-closed {
    display: none;
}
details.acc:not([open]) > summary .mk-open {
    display: none;
}
details.acc:not([open]) > summary .mk-closed {
    display: inline;
}
.acc-body {
    padding: 8px 22px 22px;
}
/* ご用意いただくもの（手順の頭）*/
.prep-box {
    grid-column: 1/-1;
    background: #fff8e6;
    border: 1px solid #ead489;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.prep-box .pb-h {
    font-size: 15px;
    font-weight: 700;
    color: var(--sub);
    margin-bottom: 4px;
}
.prep-box ul {
    margin: 0;
    padding-left: 1.2em;
}
.prep-box li {
    font-size: 14px;
    color: #282828;
    line-height: 1.85;
}
/* くわしい手順：左テキスト＋右サイド列（代表画面）*/
.acc-2col {
    display: grid;
    grid-template-columns: 1fr 264px;
    gap: 26px;
    align-items: start;
}
.acc-steps {
    min-width: 0;
}
.acc-side {
    position: sticky;
    top: 16px;
}
.acc-side figure {
    width: 100%;
    text-align: center;
    margin: 0 0 16px;
}
.acc-side figure:last-child {
    margin-bottom: 0;
}
.acc-side figcaption {
    font-size: 13px;
    color: #5b6470;
    margin-top: 8px;
}
.acc-side .ph-shot {
    border-radius: 16px;
}
.step-row {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.step-row:last-child {
    border-bottom: none;
}
.step-no {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--panel);
    color: var(--green-dk);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-txt {
    flex: 1;
    min-width: 0;
}
.step-txt .st-t {
    font-size: 16px;
    font-weight: 700;
    color: var(--sub);
}
.step-txt .st-d {
    font-size: 16px;
    color: #282828;
    line-height: 1.8;
    margin-top: 4px;
}
.step-shot {
    flex: 0 0 96px;
}
.step-shot .ph-screen {
    max-width: 96px;
}

/* ===== F. 通帳レス Point ===== */
.point-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.point-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 5px solid var(--lime);
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: var(--card-sh);
}
.point-card .pc-n {
    display: inline-block;
    background: var(--green);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    padding: 4px 12px;
    margin-bottom: 10px;
}
.point-card .pc-d {
    font-size: 16px;
    color: #282828;
    line-height: 1.85;
}
.point-card .pc-happy {
    font-size: 16px;
    color: var(--green-dk);
    font-weight: 700;
    line-height: 1.8;
    margin-top: 8px;
    background: var(--panel);
    border-radius: 8px;
    padding: 10px 14px;
}

/* ===== G. 安心 ===== */
.safe-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.safe-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px;
}
.safe-card .sc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.safe-card .sc-t {
    font-size: 18px;
    font-weight: 700;
    color: var(--sub);
}
.safe-card .sc-d {
    font-size: 16px;
    color: #282828;
    line-height: 1.8;
}

/* ===== H. 時間・端末・留意 ===== */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.info-table th,
.info-table td {
    border-bottom: 1px solid var(--line);
    padding: 14px 18px;
    text-align: left;
}
.info-table th {
    background: var(--panel3);
    font-weight: 700;
    color: var(--green-dk);
    white-space: nowrap;
    width: 170px;
}
.info-table tr:last-child th,
.info-table tr:last-child td {
    border-bottom: none;
}
/* 利用可能時間：横3列 */
.time-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 14px;
}
.time-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    box-shadow: var(--card-sh);
}
.time-card .tc-h {
    font-size: 16px;
    font-weight: 700;
    color: var(--green-dk);
    background: var(--panel3);
    border-radius: 8px;
    padding: 7px 0;
    margin-bottom: 12px;
}
.time-card .tc-v {
    font-size: 22px;
    font-weight: 700;
    color: var(--sub);
}
.plain-list {
    list-style: none;
}
.plain-list li {
    position: relative;
    padding-left: 20px;
    margin: 8px 0;
    font-size: 16px;
    line-height: 1.85;
    color: #282828;
}
.plain-list li::before {
    content: "・";
    position: absolute;
    left: 2px;
    color: var(--green);
    font-weight: 700;
}
.ol-list {
    margin: 0 0 0 1.4em;
}
.ol-list li {
    font-size: 16px;
    line-height: 1.85;
    color: #282828;
    margin: 8px 0;
}

/* ===== I. FAQ ===== */
.faq .sec-h {
    text-align: center;
} /* セクションタイトルを中央ぞろえ */
.faq details {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 0 auto 12px;
    background: #fff;
    overflow: hidden;
    max-width: 900px;
} /* 読みやすい幅に詰め、枠を中央ぞろえ（中身はそのまま）*/
.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--sub);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: var(--panel);
} /* Q見出しに淡い緑背景（手順アコーディオンと統一）*/
.faq details[open] summary {
    border-bottom: 1px solid var(--line);
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq summary .qtxt {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.faq summary .q {
    flex: 0 0 auto;
    color: var(--green);
    font-weight: 700;
    font-size: 18px;
}
.faq summary .mk {
    flex: 0 0 auto;
    color: var(--green);
    font-size: 13px;
    transition: transform 0.2s;
} /* 開閉を示す▼。開いたら180度回転して▲に（画像・自作アイコンを使わずテキスト文字のみ） */
.faq details[open] summary .mk {
    transform: rotate(180deg);
}
.faq .a {
    display: flex;
    gap: 14px;
    padding: 16px 20px 18px;
    font-size: 16px;
    color: #282828;
    line-height: 1.9;
}
.faq .a .amark {
    flex: 0 0 auto;
    color: #b4444c;
    font-weight: 700;
    font-size: 18px;
}
/* エラーコード表（よくある質問「エラーコードが出てしまった」用）*/
.err-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 4px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.err-table th {
    background: var(--panel3);
    font-weight: 700;
    color: var(--green-dk);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}
.err-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    line-height: 1.7;
}
.err-table tr:last-child td {
    border-bottom: none;
}
.err-table td:first-child {
    font-weight: 700;
    color: var(--green-dk);
    width: 34%;
}
.err-note {
    display: block;
    margin-top: 6px;
    color: #5b6470;
}

/* ===== J. 下部CTA ===== */
.cta {
    background: var(--panel);
    border-radius: 16px;
    padding: 32px;
}
.cta .cta-h {
    font-size: 22px;
    font-weight: 700;
    color: var(--sub);
    text-align: center;
    margin-bottom: 8px;
}
.cta .dl-cols {
    flex-direction: column;
    gap: 16px;
} /* 下部は縦積み（ヒーロー横並びと意図的に使い分け）*/
/* 下部DL：iPhone｜Android｜解説 の横3カラム（均等・左右上下の余白を解消）*/
.cta-3col {
    display: flex;
    gap: 20px;
    align-items: stretch;
}
.cta-store {
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cta-store .qr-lg {
    width: 140px;
    height: 140px;
    flex: 0 0 auto;
}
.cta-store .os {
    font-size: 18px;
    font-weight: 700;
    color: var(--sub);
    margin: 14px 0 12px;
}
.cta-store .btn {
    width: auto;
    min-width: 180px;
    min-height: 46px;
    padding: 10px 24px;
    font-size: 16px;
    white-space: nowrap;
} /* QR幅に合わせた程よい横幅（全幅にしない）*/
.cta-desc {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 20px 22px;
}
.cta-desc .dl-info {
    margin: 0;
    border-top: none;
    padding-top: 0;
}
.cta-desc .dl-info li {
    font-size: 15px;
}
@media (max-width: 900px) {
    .cta-3col {
        flex-direction: column;
    }
}


/* ===== SP固定DLバー ===== */
.sp-dl {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    background: #fff;
    border-top: 1px solid var(--line2);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    padding: 10px 14px;
    display: none;
    gap: 10px;
}
.sp-dl a {
    flex: 1;
    font-size: 15px;
    padding: 13px 8px;
    min-height: 48px;
}

/* ===== WF注記 ===== */
.wf-note {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 99999;
    background: #d1f0d6;
    border: 1px solid #9ed4a8;
    color: #1e3d22;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    max-width: 60vw;
    line-height: 1.5;
}

/* ===== 提示シェル（PC/SP 2画面・切替タブ・他の実用WFと統一）===== */
.wf-stage {
    background: #eef1f4;
    padding: 0 0 48px;
}
.wf-title {
    max-width: 1440px;
    margin: 0 auto;
    padding: 18px 24px 0;
}
.wf-title h1 {
    font-size: 14px;
    font-weight: 700;
    color: #4b5563;
    line-height: 1.6;
}
.wf-tabs {
    max-width: 1440px;
    margin: 12px auto 18px;
    padding: 0 24px;
    display: flex;
    gap: 10px;
}
.tab-btn {
    background: #e5e7eb;
    color: #6b7280;
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    font-family: inherit;
}
.tab-btn.active {
    background: var(--green);
    color: #fff;
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}
.pane-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}
.browser-shell {
    background: #e8edf2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.15);
}
.browser-bar {
    background: #e5e7eb;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.browser-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.browser-url {
    background: #fff;
    border-radius: 20px;
    padding: 5px 18px;
    font-size: 13px;
    color: #6b7280;
    margin-left: 8px;
}
.pc-frame {
    background: #fff;
}
.sp-stage {
    text-align: center;
    padding-top: 4px;
}
.phone-shell {
    background: #1f2937;
    border-radius: 40px;
    padding: 10px;
    display: inline-block;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.phone-screen {
    width: 375px;
    height: 772px;
    overflow-y: auto;
    background: #fff;
    border-radius: 32px;
    position: relative;
}
.phone-home {
    width: 130px;
    height: 5px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    margin: 9px auto 2px;
}

/* ===== SP専用レイアウト（375px 作り込み）===== */
.sp-wrap {
    font-size: 15px;
    color: var(--ink);
}
.sp-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}
.sp-nav .sp-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--green-dk);
}
.sp-nav .sp-logo img {
    width: 26px;
    height: 26px;
    border-radius: 7px;
}
.sp-nav .sp-ham {
    width: 24px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sp-nav .sp-ham span {
    height: 3px;
    background: #4b5563;
    border-radius: 2px;
    display: block;
}
.sp-crumb {
    font-size: 11px;
    color: #6b7280;
    padding: 8px 14px;
    background: var(--panel);
}
.sp-sec {
    padding: 20px 14px;
}
.sp-sec.alt {
    background: var(--panel3);
}
.sp-h {
    font-size: 18px;
    font-weight: 700;
    color: var(--sub);
    margin-bottom: 12px;
    line-height: 1.4;
}
.sp-hero {
    background: #ebf5eb;
    padding: 20px 14px 16px;
    text-align: center;
}
.sp-hero .sp-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}
.sp-hero .sp-brand img {
    width: 44px;
    height: 44px;
    border-radius: 11px;
}
.sp-hero h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--green);
}
.sp-hero p {
    font-size: 14px;
    color: #282828;
    line-height: 1.85;
    margin: 10px 4px 14px;
}
.sp-hero .appshot {
    max-width: 184px;
    margin: 0 auto;
}
.sp-dlcard {
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 12px;
    box-shadow: var(--card-sh);
    padding: 16px;
}
.sp-dlrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.sp-dlrow:last-child {
    border-bottom: none;
}
.sp-dlrow .qr {
    width: 80px;
    height: 80px;
}
.sp-dlrow .sp-dlbtn {
    flex: 1;
}
.sp-dlrow .sp-dlbtn .os {
    font-size: 13px;
    font-weight: 700;
    color: var(--sub);
    margin-bottom: 6px;
}
.sp-dlrow .sp-dlbtn a {
    display: block;
    background: var(--green);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    text-decoration: none;
}
.sp-notice {
    background: #fff4f4;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 14px;
}
.sp-notice .nt {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--red);
    border-radius: 5px;
    padding: 3px 9px;
    display: inline-block;
    margin-bottom: 6px;
}
.sp-notice p {
    font-size: 14px;
    color: #333;
    line-height: 1.75;
}
.sp-trust {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.sp-trust-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
}
.sp-trust-row:last-child {
    border-bottom: none;
}
.sp-tn {
    font-size: 19px;
    font-weight: 800;
    color: var(--green-dk);
    white-space: nowrap;
}
.sp-tl {
    font-size: 12px;
    color: #5b6470;
    font-weight: 700;
    text-align: right;
    line-height: 1.5;
}
.sp-trust-src {
    font-size: 11px;
    color: #5b6470;
    line-height: 1.7;
    margin: 8px 4px 0;
}
.sp-feat {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sp-feat .fcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--card-sh);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-feat .fcard .fc-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sp-feat .fcard .fc-t {
    font-size: 15px;
    font-weight: 700;
    color: var(--sub);
}
.sp-feat .fcard .fc-d {
    font-size: 14px;
    color: #282828;
    line-height: 1.7;
}
.sp-feat .fcard .fc-term {
    font-size: 13px;
    color: #5b6470;
    margin-top: 2px;
}
/* 「アプリでできること」のカードのみ左揃え（アイコン＋タイトルを見出し行、説明をその下に配置。.sp-sec.altの「ご利用になれる方」は元の中央揃えのまま） */
.sp-sec:not(.alt) .sp-feat .fcard {
    text-align: left;
}
.sp-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    margin-top: 14px;
}
.sp-gallery figure {
    width: 222px;
    text-align: center;
    margin: 0;
}
.sp-gallery figcaption {
    font-size: 12px;
    color: #5b6470;
    margin-top: 6px;
}
.sp-acc-shot {
    width: 200px;
    margin: 12px auto 2px;
}
.sp-acc-shot figcaption {
    font-size: 12px;
    color: #5b6470;
    margin-top: 6px;
    text-align: center;
}
.sp-flow {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sp-flow .fstep {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
}
.sp-flow .fno {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.sp-flow .ft {
    font-size: 15px;
    font-weight: 700;
    color: var(--sub);
}
.sp-flow .fd {
    font-size: 13px;
    color: #5b6470;
    margin-top: 2px;
    line-height: 1.6;
}
.sp-acc {
    border: 1px solid var(--line2);
    border-radius: 10px;
    margin-top: 10px;
    background: #fff;
    overflow: hidden;
}
.sp-acc > summary {
    list-style: none;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sub);
    background: var(--panel3);
    cursor: pointer;
}
.sp-acc > summary::-webkit-details-marker {
    display: none;
}
.sp-acc-b {
    padding: 4px 14px 12px;
}
.sp-acc-b .s {
    font-size: 14px;
    color: #282828;
    line-height: 1.7;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}
.sp-acc-b .s:last-child {
    border-bottom: none;
}
.sp-acc-b .s b {
    color: var(--green-dk);
}
.sp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}
.sp-table th,
.sp-table td {
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
}
.sp-table tr:last-child th,
.sp-table tr:last-child td {
    border-bottom: none;
}
.sp-table th {
    background: var(--panel3);
    font-weight: 700;
    color: var(--green-dk);
    white-space: nowrap;
}
.sp-faq details {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;
}
.sp-faq summary {
    list-style: none;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sub);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.sp-faq summary::-webkit-details-marker {
    display: none;
}
.sp-faq summary .qtxt {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.sp-faq summary .q {
    color: var(--green);
}
.sp-faq summary .mk {
    flex: 0 0 auto;
    color: var(--green);
    font-size: 12px;
    transition: transform 0.2s;
}
.sp-faq details[open] summary .mk {
    transform: rotate(180deg);
}
.sp-faq .a {
    padding: 10px 14px 12px;
    font-size: 14px;
    color: #282828;
    line-height: 1.75;
}
.sp-help {
    background: var(--panel3);
    border: 1px solid var(--green);
    border-radius: 10px;
    padding: 16px 14px;
    text-align: center;
    margin: 14px;
}
.sp-help img {
    height: 64px;
    width: auto;
    margin: 0 auto 6px;
    display: block;
}
.sp-help .hh {
    font-size: 15px;
    font-weight: 700;
    color: var(--green-dk);
}
.sp-help .ht {
    font-size: 22px;
    font-weight: 700;
    color: var(--green);
    margin-top: 8px;
}
.sp-help .hs {
    font-size: 12px;
    color: #5b6470;
    margin-top: 2px;
}
.sp-foot {
    background: var(--green-dk);
    color: #cfe6d5;
    font-size: 11px;
    text-align: center;
    padding: 16px 14px;
    line-height: 1.8;
}
.sp-dlbar {
    position: sticky;
    bottom: 0;
    z-index: 6;
    background: #fff;
    border-top: 1px solid var(--line2);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 8px;
    padding: 9px 12px;
}
.sp-dlbar a {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 4px;
    border-radius: 6px;
    text-decoration: none;
}
.sp-dlbar a.ios {
    background: #fff;
    color: var(--green);
    border: 2px solid var(--green);
}
.sp-dlbar a.and {
    background: var(--green);
    color: #fff;
}

/* ===== レスポンシブ ===== */
@media (max-width: 900px) {
    .feat-grid,
    .safe-grid,
    .flow {
        grid-template-columns: 1fr 1fr;
    }
    .hero-in {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-shot {
        flex: none;
    }
    .hero-shot .ph-screen {
        max-width: 220px;
    }
    .sitemap-grid,
    .sitemap-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
    .footer-wrap {
        padding: 0 20px;
    }
}
@media (max-width: 600px) {
    body {
        font-size: 16px;
    }
    h1.page-h {
        font-size: 27px;
    }
    .sec-h {
        font-size: 24px;
    }
    .sec-block {
        padding: 34px 0;
    }
    .feat-grid,
    .who-grid,
    .flow,
    .point-grid,
    .safe-grid {
        grid-template-columns: 1fr;
    }
    .dl-cols {
        flex-direction: column;
    }
    .sitemap-grid,
    .sitemap-grid-2 {
        grid-template-columns: 1fr;
    }
    .footer-logo-area {
        flex-direction: column;
        gap: 16px;
    }
    .sp-dl {
        display: flex;
    }
    .step-shot {
        display: none;
    }
    .info-table th {
        width: 120px;
    }
    .stepper-main {
        display: block !important;
    }
}
/* ===== くわしい手順：番号連動ステッパー（A/B切替・①②グループ化）===== */
.steps-pc {
    max-width: 960px;
    margin: 0 auto;
} /* 手順ブロックを絞って中央寄せ＝1240px幅の間延びを解消 */
.steps-h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--sub);
    margin-top: 22px;
}
.ab-toggle {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 4px;
}
.ab-btn {
    border: 1.5px solid #cfe0d6;
    background: #fff;
    color: var(--sub);
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}
.ab-btn.active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.stepper {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    margin-top: 14px;
}
.stepper-sub {
    font-size: 16px;
    color: #5b6470;
    margin: 0 0 14px;
}
.prep-flat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
.prep-flat .prep-box {
    grid-column: auto;
    margin-bottom: 0;
}
.step-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 30px;
    padding: 2px 2px 14px;
}
.numgroup-h {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 8px;
}
.step-nums {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.step-numitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid #cfe0d6;
    background: #fff;
    color: var(--sub);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.step-num:hover {
    border-color: var(--green);
}
.step-num.active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.step-num.is-prep {
    opacity: 0.45;
    border-style: dashed;
}
.sn-cap {
    font-size: 9px;
    line-height: 12px;
    height: 12px;
    color: #9ca3af;
    font-weight: 700;
}
.stepper-main {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    align-items: start;
}
.ab-b .stepper-main {
    grid-template-columns: 320px 1fr;
}
/* PCは横並び：画像(左列)を拡大しても列幅に収まるため余白が偏らない／テキスト＋前後ボタンは右列に縦中央配置 */
.steps-pc .stepper-main {
    grid-template-columns: 360px 1fr;
    align-items: center;
}
.steps-pc .stp-arrows {
    justify-content: flex-start;
}
/* A案（全18スライダー）専用：画像は左固定のまま、番号ナビ→ご用意いただくもの(1つ)→STEP情報を右列の1枚カードに集約し画像下の空白を解消 */
.steps-pc .stp-panelmain {
    align-items: center;
} /* カード高さ(約614px)がスマホ画像の内側スクリーン部分の高さ(約616px)にほぼ一致するため中央揃えにすると、カード上端がスマホの内枠（画像上下の余白＋ケース枠を除いた画面表示部分）の上端に自然に揃う */
/* 画像そのもの(.stp-img)に右カードと同じ「枠線＋影」を直接付与（ページ他所の.appshotと同じ扱い）。.stp-imgwrapに付けると画像との間の余白分だけ二重の丸角がズレて見えるため、画像に密着させる */
.prep-flat.prep-single {
    grid-template-columns: 1fr;
}
.stepper-text > .stp-progress {
    margin-top: 14px;
}
/* 右列を1枚のカードにまとめ、内部ブロック間の余白を統一（バラバラ感の解消） */
.steps-pc .stp-rightcol {
    background: #fff;
    border: 1px solid #cfe0d6;
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--card-sh);
} /* 他カード(.card/.appshot等)と同じ影トークンで統一。左のスマホ画像(影あり)との非対称を解消 */
.steps-pc .stp-rightcol > * {
    margin: 0 0 16px;
}
.steps-pc .stp-rightcol > *:last-child {
    margin-bottom: 0;
}
.steps-pc .stp-rightcol .step-groups {
    padding: 0;
}
.steps-pc .stp-rightcol .step-num {
    box-shadow: var(--card-sh);
}
/* 「ご用意いただくもの」はページ基調の薄緑パネル色に統一（黄色系の警告色を使わない） */
.steps-pc .stp-rightcol .prep-flat.prep-single .prep-box {
    background: #eaf5ec;
    border: 1px solid #cfe0d6;
}
/* flowバッジ（例：「口座登録の手順」）はSTEP番号に密着させ、ひとまとまりに見せる */
.steps-pc .stp-rightcol .stp-flow {
    margin-bottom: 5px;
}
/* フォントサイズの統一：ラベル系(①口座登録・ご用意いただくもの見出し・STEP接頭辞・説明文)=16px／箇条書き本文=15pxに揃え、見出し(STEPタイトル20px)との段差を整理 */
.steps-pc .stp-rightcol .numgroup-h {
    font-size: 16px;
}
.steps-pc .stp-rightcol .prep-box .pb-h {
    font-size: 16px;
    color: var(--green-dk);
}
.steps-pc .stp-rightcol .prep-box li {
    font-size: 15px;
}
.steps-pc .stp-rightcol .stp-counter {
    font-size: 16px;
}
.steps-pc .stp-rightcol .stp-counter .stp-n {
    font-size: 22px;
}
.steps-pc .stp-rightcol .stp-desc {
    font-size: 16px;
    min-height: 59.2px;
} /* 説明文2行分を確保＝1行/2行の差で右カード高さが変わり中央揃えの位置が上下に揺れるのを防止 */
/* 画像枠は固定高さ＋中央寄せ：全手順で高さ一定（実画像=高さ600pxで幅可変／準備中も同寸）→切替時に高さが飛ばない */
.stp-imgwrap {
    position: relative;
    width: 100%;
    height: 730px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* 画像はクロスフェード：旧画像を残したまま新画像を重ね、不透明度だけで滑らかに入替（縦揺れ・空白なし） */
.stp-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
} /* 表示幅300px／全手順で横幅統一。画像自体にスマホの枠(ケース・ノッチ等)が描き込み済みのため、CSSの角丸は一切付けない（わずかでも付けると本体の角の絵柄と二重に重なりギザギザ・食い込みに見える） */
/* 元画像は端末本体の上下に内蔵の白余白(実測:上34px/下34px、600px中)があり左右余白(3〜4px)とアンバランスで枠の角が不揃いに見えるため、上下の余白だけ縦クロップして端末を枠いっぱいに近づける */
.steps-pc .stp-panelmain .stp-img {
    height: 616px;
    object-fit: cover;
    object-position: center;
}
.stp-img.show {
    opacity: 1;
}
/* STEP1の111.pngのみ端末の枠(ケース・ノッチ等)が描き込まれていない素のスクリーンショットのため、ヒーローの.hero-deviceと同系統の濃色ベゼル（枠線ではなくbox-shadowの帯で表現）を個別に付与 */
.stp-img[src*="111.png"] {
    border-radius: 28px;
    box-shadow:
        0 0 0 10px #1f2937,
        0 18px 40px rgba(20, 30, 45, 0.3);
    background: #fff;
    object-fit: cover;
    object-position: top center;
}
/* 他STEP画像(実測 300×674px、枠なし)と、帯(10px×2辺=20px)を含めた最終的な見た目のサイズを揃える：画像本体を280×654pxにし、object-fit:coverで左右をわずかにトリミング（PCのみ。SPは.steps-sp側の185px指定を優先） */
.steps-pc .stp-img[src*="111.png"] {
    width: 280px;
    height: 654px;
}
.stp-ph {
    width: 230px;
    max-width: 100%;
    aspect-ratio: 230/500;
    box-sizing: border-box;
    border: 2px dashed #9ca3af;
    border-radius: 12px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    line-height: 1.6;
    padding: 10px;
}
.stp-ph span {
    font-size: 13px;
    font-weight: 400;
    margin-top: 4px;
}
/* 手順切替：画像＋テキストをまとめて“ふわっ”と（render()でinline付与＝確実に再生）*/
@keyframes stpSoft {
    from {
        opacity: 0;
        transform: translateY(9px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.stp-ph,
.stp-fade {
    animation: stpSoft 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
} /* テキスト＝ふわっ（画像はクロスフェードで別処理） */
.stepper-text {
    align-self: center;
}
.stp-flow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--green);
    background: #eaf5ec;
    border-radius: 999px;
    padding: 3px 12px;
    margin-bottom: 8px;
}
.stp-counter {
    font-size: 15px;
    color: #5b6470;
    font-weight: 700;
}
.stp-counter .stp-n {
    font-size: 24px;
    color: var(--green);
}
.stp-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 6px 0 8px;
    line-height: 1.4;
}
.stp-desc {
    font-size: 15px;
    color: #282828;
    line-height: 1.85;
}
.stp-progress {
    height: 6px;
    background: #eaf0ec;
    border-radius: 999px;
    margin: 0 2px 16px;
    overflow: hidden;
} /* ①〜⑱ナビ直下の細い進捗バー */
.stp-bar {
    height: 100%;
    background: var(--green);
    border-radius: 999px;
    width: 5%;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
} /* 常設化で幅が滑らかに伸びる */
.stp-arrows {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 18px;
}
.stp-arrow .stp-ar {
    font-size: 12px;
    line-height: 1;
    flex: 0 0 auto;
}
.stp-arrow {
    border: 1.5px solid var(--green);
    background: #eaf5ec;
    color: var(--green-dk);
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    padding: 13px 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
}
.stp-arrow:hover:not(:disabled) {
    background: #dcefe0;
    border-color: var(--green-dk);
}
.stp-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}
.stp-arrow .ph {
    width: 22px;
    height: 22px;
    font-size: 7px;
    border-radius: 7px;
    padding: 2px;
    flex: 0 0 auto;
}
/* B案 大ステップ */
.big-step {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    margin-top: 16px;
    background: #fff;
}
.bigstep-h {
    font-size: 18px;
    font-weight: 700;
    color: var(--sub);
}
.bigstep-sum {
    font-size: 14px;
    color: #5b6470;
    margin: 4px 0 12px;
    line-height: 1.7;
}
.big-step .stepper {
    border: 0;
    padding: 0;
    margin-top: 12px;
}
.big-step .prep-box {
    margin-bottom: 6px;
}
/* SP版（.steps-sp スコープ）*/
.steps-sp .stepper {
    padding: 14px;
}
.steps-sp .big-step {
    padding: 14px;
}
.steps-sp .prep-flat {
    grid-template-columns: 1fr;
    gap: 10px;
}
.steps-sp .prep-flat.prep-single .prep-box {
    background: #eaf5ec;
    border: 1px solid #cfe0d6;
} /* PC同様、黄色系ではなく薄緑パネル色に統一 */
.steps-sp .prep-flat.prep-single {
    margin-top: 16px;
} /* 前へ/次へボタンの下に配置するため、区切りの余白を追加 */
.steps-sp .stepper-main {
    grid-template-columns: 1fr;
    gap: 14px;
}
.steps-sp .stp-imgwrap {
    height: 420px;
    max-width: 300px;
    margin: 0 auto;
}
.steps-sp .stp-img {
    width: 185px;
}
.steps-sp .stp-ph {
    width: 185px;
    max-width: 100%;
    margin: 0 auto;
}
.steps-sp .stp-title {
    font-size: 17px;
}
.steps-sp .stp-desc {
    font-size: 14px;
}
.steps-sp .step-num {
    width: 36px;
    height: 36px;
    font-size: 14px;
}
.steps-sp .stp-arrow {
    flex: 1;
    justify-content: center;
    font-size: 15px;
    padding: 13px;
}
/* 開始点の発見性強化（見せ方のみ） */
.step-guide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    background: #eaf5ec;
    border: 1px solid #cfe0d6;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 8px 0 2px;
}
.step-guide .sg-item {
    font-size: 15px;
    font-weight: 700;
    color: var(--sub);
}
.step-guide .sg-no {
    display: inline-block;
    background: var(--green);
    color: #fff;
    font-size: 13px;
    border-radius: 6px;
    padding: 2px 8px;
    margin-right: 6px;
}
.step-guide .sg-arw {
    color: var(--green);
    font-weight: 700;
}
.step-guide .sg-res {
    color: var(--green);
}
.nav-cue {
    font-size: 15px;
    font-weight: 700;
    color: var(--green);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
}
.step-guide .sg-ic.ic {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 0;
}
/* SP幅：アイコン・矢印は非表示。文章はそのまま、折り返し可（2〜3行でOK） */
.steps-sp .step-guide {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 14px;
}
.steps-sp .step-guide .sg-ic.ic,
.steps-sp .step-guide .sg-arw {
    display: none;
}
.steps-sp .step-guide .sg-no {
    font-size: 13px;
    padding: 2px 8px;
    margin-right: 6px;
}
.steps-sp .step-guide .sg-item,
.steps-sp .step-guide .sg-res {
    font-size: 13px;
}
.nav-cue .cue-ic.ic {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 0;
    display: inline-flex;
    vertical-align: middle;
    margin-right: 5px;
}
.tri-l {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 7px solid currentColor;
    vertical-align: middle;
}
.tri-r {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid currentColor;
    vertical-align: middle;
}
@keyframes cuePulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(21, 166, 72, 0);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(21, 166, 72, 0.18);
    }
}
.stepbox.unstarted .stp-next {
    animation: cuePulse 1.6s ease-in-out infinite;
    border-color: var(--green);
    color: var(--green);
}
@media (prefers-reduced-motion: reduce) {
    .stp-bar,
    .step-num,
    .stp-arrow,
    .ab-btn {
        transition: none;
    }
    .stepbox.unstarted .stp-next {
        animation: none;
    }
    .stp-ph,
    .stp-fade {
        animation: none;
    }
    .stp-img {
        transition: none;
    }
}

/* ===== SP（768px以下）：くわしい手順をWFのSP版（.steps-sp）と同じ見せ方にする（画像185px・枠420px・前へ/次へは2等分） ===== */
@media (max-width: 768px) {
    .steps-pc .big-step { padding: 14px; }
    .steps-pc .stepper-main { display: grid !important; grid-template-columns: 1fr; gap: 14px; align-items: normal; }
    .steps-pc .stp-imgwrap { height: 420px; max-width: 300px; margin: 0 auto; }
    .steps-pc .stp-img { width: 185px; }
    .steps-pc .stp-img[src*="111.png"] { width: 185px; height: auto; }
    .steps-pc .stp-ph { width: 185px; max-width: 100%; margin: 0 auto; }
    .steps-pc .stp-title { font-size: 17px; }
    .steps-pc .stp-desc { font-size: 14px; }
    .steps-pc .step-num { width: 36px; height: 36px; font-size: 14px; }
    .steps-pc .stp-arrows { justify-content: center; }
    .steps-pc .stp-arrow { flex: 1; justify-content: center; font-size: 15px; padding: 13px; }
    .steps-pc .step-guide .sg-ic.ic,
    .steps-pc .step-guide .sg-arw { display: none; }
    .steps-pc .step-guide .sg-item,
    .steps-pc .step-guide .sg-res { font-size: 13px; }
}
/* ===== ダウンロードボタン：Bank Pay（ことら送金）ページと同じ公式バッジ画像（2つとも同じ幅） ===== */
.store-badge { display: inline-flex; align-items: center; height: 59px; line-height: 0; vertical-align: top; } /* 高さの違う2つのバッジを同じ高さの枠で上下中央にそろえる */
.store-badge img { display: block; width: 160px; max-width: 100%; height: auto; }
/* 上部のQR横の列：バッジが130px未満に縮むときは、文字とバッジをQRの下へ回す */
.dl-col { flex-wrap: wrap; align-content: flex-start; }
.dl-col-txt { flex: 1 0 130px; }