@charset "UTF-8";

/* =========================================================
  基本設定 / 変数
========================================================= */
:root { --color-blue:#004ea2; --color-blue-2:#0068c9; --color-blue-light:#eaf2fb; --color-blue-pale:#f3f8fd; --color-border:#d7e5f2; --color-text:#001f45; --color-black:#111; --color-muted:#555; --color-orange:#d8751f; --color-red:#e60012; --color-gray:#f2f4f7; --color-brown:#9a765c; --color-coral:#e65858; --inner:980px; --narrow:860px; }
* { box-sizing:border-box; }
html { font-size:62.5%; }
body { margin:0; color:var(--color-text); font-family:'Noto Sans JP',"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",sans-serif; font-size:1.6rem; line-height:1.8; letter-spacing:.02em; background:#fff; }
img { max-width:100%; height:auto; vertical-align:middle; }
a { color:var(--color-blue); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font:inherit; }

/* =========================================================
  表示切り替えユーティリティ
========================================================= */
.sp-only { display:none; }
.pc-only { display:inline; }

/* =========================================================
  ページ共通レイアウト
========================================================= */
.page { width:min(100%,var(--inner)); margin:0 auto; padding:0 24px 72px; }
.main { width:100%; }
.section-narrow { width:min(100%,var(--narrow)); margin-inline:auto; }

/* =========================================================
  パンくず
========================================================= */
.breadcrumb { margin:14px 0 28px; font-size:1.2rem; color:#777; }
.breadcrumb ol { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; margin:0; padding:0; list-style:none; }
.breadcrumb li:not(:last-child)::after { content:">"; margin-left:8px; color:#999; }
.breadcrumb--bottom { margin:62px 0 0; color:#111; }
.breadcrumb--bottom ol { justify-content:flex-start; }

/* =========================================================
  FV / メインビジュアル
========================================================= */
.hero { padding:10px 0 24px; text-align:center; }
.hero__lead { margin:0 0 14px; color:var(--color-blue); font-size:clamp(1.7rem,3vw,2.2rem); font-weight:700; line-height:1.5; text-align:center; }
.hero__service { margin:0 0 6px; color:var(--color-blue); font-size:clamp(1.8rem,3vw,2.5rem); font-weight:700; line-height:1.4; text-align:center; }
.hero__title-line { display:flex; align-items:center; justify-content:center; gap:24px; margin:0 0 22px; color:#222; font-size:clamp(2.4rem,4vw,3.9rem); font-weight:700; line-height:1.4; text-align:center; }
.hero__title-line::before, .hero__title-line::after { content:""; width:88px; height:2px; background:#222; border-radius:999px; }
.hero__title-line span { display:inline-block; }
.hero__copy { margin:18px 0 0; color:var(--color-coral); font-size:clamp(2rem,3.8vw,2.7rem); font-weight:700; line-height:1.45; text-align:center; }
.hero__title { margin:0 0 8px; color:#222; font-size:clamp(2rem,4vw,3rem); font-weight:600; line-height:1.45; }

/* =========================================================
  画像枠 / picture対応
========================================================= */
.image-placeholder { display:block; position:relative; overflow:hidden; width:100%; border:0; background:var(--color-blue-light); }
.image-placeholder picture { display:block; }
.image-placeholder img { display:block; width:100%; height:100%; object-fit:cover; }
.image-placeholder--hero, .image-placeholder--diagram { height:auto; background:#fff; }
.image-placeholder--hero img, .image-placeholder--diagram img { height:auto; object-fit:contain; }

/* =========================================================
  アプリダウンロード
========================================================= */
.app-download { width:min(100%,700px); margin:38px auto 0; padding:0; }
.hero + .app-download { margin-top:0; margin-bottom:46px; }
.app-download__inner { background:#ddd; padding:0 26px 26px; }
.app-download__head { margin:0 -26px 18px; }
.app-download__head img { display:block; width:100%; height:auto; }
.app-download__cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.app-download__card { display:grid; grid-template-columns:1fr 92px; grid-template-rows:auto auto; column-gap:14px; align-items:center; min-height:128px; padding:22px 18px 20px; border-radius:12px; background:#fff; }
.store-left { min-width:0; }
.store-banner { display:block; width:142px; max-width:100%; justify-self:center; }
.store-banner img { display:block; width:100%; height:auto; }
.store-os { grid-column:1 / 2; margin:4px 0 0; color:#111; font-size:1.3rem; line-height:1.3; text-align:center; }
.store-qr { grid-column:2 / 3; grid-row:1 / 3; display:block; width:88px; height:88px; justify-self:end; }
.store-qr img { display:block; width:100%; height:100%; object-fit:contain; }
.app-download__note { display:block; margin:18px 0 0; color:#111; font-size:1.4rem; line-height:1.6; text-align:center; }

/* =========================================================
  家族口座照会機能とは？
========================================================= */
.section-box { padding:clamp(28px,5vw,46px) clamp(20px,4vw,44px); border:0; background:var(--color-blue-pale); }
.section-title { position:relative; margin:0 0 24px; padding-left:18px; color:var(--color-blue); font-size:clamp(2.2rem,3vw,3rem); font-weight:700; line-height:1.45; text-align:left; }
.section-title::before { content:""; position:absolute; top:.15em; left:0; width:4px; height:1.45em; background:var(--color-blue); }
.outline p { margin:0 0 10px; color:#111; }

/* =========================================================
  こんな時におススメ！ / チェックアニメーション
========================================================= */
.recommend-box { margin:28px auto 24px; padding:24px clamp(18px,5vw,36px); border:0; border-radius:12px; background:#fff; box-shadow:0 4px 14px rgba(0,40,80,.08); }
.recommend-box h3 { margin:0 0 16px; color:var(--color-blue); font-size:clamp(1.8rem,2.6vw,2.2rem); font-weight:700; text-align:center; }
.recommend-box ul { width:fit-content; margin:0 auto; padding:0; color:#111; list-style:none; }
.recommend-box li { position:relative; margin:12px 0; padding-left:3em; line-height:1.7; }
.recommend-box li::before { content:""; position:absolute; left:0; top:.05em; width:1.8em; height:1.8em; border:1.5px solid var(--color-blue); border-radius:5px; background:#eaf2fb; box-sizing:border-box; }
.recommend-box li::after { content:"✓"; position:absolute; left:0; top:.05em; display:flex; align-items:center; justify-content:center; width:1.2em; height:1em; color:var(--color-blue); font-size:1.5em; font-weight:700; line-height:1; opacity:0; transform:scale(.55); transition:opacity .22s ease,transform .22s cubic-bezier(.2,1.4,.4,1); }
.recommend-box li.is-checked::after { opacity:1; transform:scale(.8); }
.recommend-box li.is-checked::before { background:#ebf5ff; }

/* =========================================================
  ご利用イメージ
========================================================= */
.usage-image { margin:0 auto 22px; padding:24px clamp(16px,4vw,32px); border:0; border-radius:12px; background:#fff; box-shadow:0 4px 14px rgba(0,40,80,.08); }
.usage-image h3 { margin:0 0 16px; color:var(--color-blue); font-size:clamp(1.8rem,2.6vw,2.2rem); font-weight:700; text-align:center; }
.note { margin-top:22px; color:#111; font-size:1.3rem; line-height:1.7; }
.note--alert::before { content:"⚠ "; position:relative; top:3px; color:#d28a00; font-size:20px; }

/* =========================================================
  セクション見出し
========================================================= */
.line-title { position:relative; display:flex; align-items:center; justify-content:flex-start; gap:0; margin:58px 0 30px; padding-left:18px; color:var(--color-blue); font-size:clamp(2.4rem,3.2vw,3.2rem); font-weight:700; line-height:1.45; text-align:left; }
.line-title::before { content:""; position:absolute; top:.18em; left:0; width:4px; height:1.45em; background:var(--color-blue); }
.line-title::after { content:""; display:none; }

/* =========================================================
  ご利用の流れ / 登録解除の方法
========================================================= */
.flow__intro { margin:0 0 34px; color:#111; text-align:center; }
.flow__info--soft { display:flex; justify-content:center; margin:0 auto 36px; padding:14px 18px; border-radius:5px; background:#eaf2fb; }
.flow__info--soft p { display:flex; align-items:center; gap:12px; margin:0; color:#222; font-size:1.8rem; line-height:1.7; }
.flow__info--soft .flow__info-label { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; margin:0; padding:2px 10px; border-radius:999px; background:var(--color-blue); color:#fff; font-size:1.3rem; font-weight:700; line-height:1.5; }
.flow__info--soft .flow__info-text { flex:1; min-width:0; display:inline; margin:0; padding:0; border-radius:0; background:transparent; color:#222; font-size:inherit; font-weight:500; line-height:inherit; }
.flow__info--soft .flow__info-text strong { color:var(--color-blue); font-weight:700; }
.step-block { margin:0 auto 58px; max-width:820px; }
.bar-title { position:relative; margin:0 0 18px; padding-left:16px; color:var(--color-blue); font-size:1.8rem; font-weight:700; line-height:1.5; }
.bar-title::before { content:""; position:absolute; top:.2em; left:0; width:4px; height:1.4em; background:var(--color-blue); }
.bar-title-block { margin:0 0 30px; }
.bar-title-block .bar-title { margin:0 0 10px; }
.bar-title-note { display:inline-block; width:fit-content; margin:0 0 0 18px; padding:7px 14px; border-radius:2px; background:#eaf2fb; color:#555; font-size:1.2rem; line-height:1.6; }
.bar-title-note::before { display:inline-block; margin-right:8px; color:var(--color-blue); font-size:1.2rem; font-weight:700; }

/* =========================================================
  Swiper チラ見せスライダー
========================================================= */
.step-swiper { position:relative; overflow:visible; padding:0 0 36px; }
.step-swiper .swiper { overflow:hidden; padding:0 120px 4px 0; }
.step-swiper .swiper-wrapper { align-items:stretch; }
.step-swiper .swiper-slide { width:700px; height:auto; }
.step-swiper .swiper-slide .step-card { position:relative; overflow:hidden; height:100%; border-radius:10px; }
.step-swiper .swiper-slide .step-card::after { content:""; position:absolute; inset:0; z-index:2; background:rgba(255,255,255,.62); pointer-events:none; opacity:1; transition:opacity .3s ease; }
.step-swiper .swiper-slide-active .step-card::after { opacity:0; }

/* =========================================================
  Swiper カード内レイアウト
========================================================= */
.step-card { display:grid; grid-template-columns:310px 1fr; align-items:center; gap:34px; min-height:560px; padding:28px 34px; border:0; border-radius:0; background:#fff; box-shadow:4px 11px 15px rgba(0,40,80,.16); }
.step-card__body { min-width:0; }
.step-label { margin:0 0 6px; color:var(--color-blue); font-weight:700; line-height:1.4; }
.step-card h4 { margin:0 0 12px; color:var(--color-blue); font-size:2.2rem; font-weight:700; line-height:1.5; }
.step-card p:last-child { margin:0; color:#111; font-size:1.4rem; line-height:1.7; }
.image-placeholder--phone { border-radius:4px; background:#fff; }
.image-placeholder--phone img { display:block; width:100%; height:100%; border:3px solid #f3f3f3; object-fit:contain; }

/* =========================================================
  Swiper 矢印 / ページネーション
========================================================= */
.swiper-nav { position:absolute; top:calc(50% - 18px); z-index:5; display:grid; place-items:center; width:60px; height:60px; margin:0; padding:0; border:2px solid #fff; border-radius:50%; background:#2c509c; color:#fff; cursor:pointer; transform:translateY(-50%) scale(1); transition:opacity .3s ease,visibility .3s ease,transform .3s ease,background-color .3s ease; }
.swiper-nav::before { display:block; font-size:3.2rem; font-weight:400; line-height:1; }
.swiper-nav--prev { left:-23px; }
.swiper-nav--next { right:-23px; }
.swiper-nav--prev::before { content:"‹"; transform:translate(-1px,-4px); }
.swiper-nav--next::before { content:"›"; transform:translate(1px,-4px); }
.swiper-nav.is-hidden { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-50%) scale(.92); }
.swiper-nav:active { opacity:.96; transform:translateY(-50%) scale(.6); }
.swiper-nav:focus { outline:none; }
.swiper-nav:focus-visible { outline:2px solid rgba(0,78,162,.35); outline-offset:3px; }
.step-swiper .swiper-pagination { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; gap:10px; }
.step-swiper .swiper-pagination-bullet { width:8px; height:8px; margin:0 !important; border-radius:50%; background:#c7c7c7; opacity:1; }
.step-swiper .swiper-pagination-bullet-active { background:var(--color-blue); }

/* =========================================================
  ご留意事項 / スクロールボックス
========================================================= */
.notes-section { margin-top:58px; }
.notes__guide { margin:-18px 0 10px; color:#555; font-size:1.2rem; line-height:1.6; text-align:right; }
.notes-scroll { max-height:260px; overflow-y:auto; padding:28px 32px; border-radius:8px; background:#eaf2fb; box-shadow:inset 0 2px 8px rgba(0,40,80,.14),inset 0 -1px 4px rgba(255,255,255,.65); }
.notes-scroll ul { margin:0; padding-left:1.2em; color:#111; font-size:1.4rem; line-height:1.9; }
.notes-scroll li { margin:2px 0; }
.notes-scroll ol { margin:6px 0 0; padding-left:1.4em; }
.notes-scroll::-webkit-scrollbar { width:8px; }
.notes-scroll::-webkit-scrollbar-track { background:#dbe8f6; border-radius:999px; }
.notes-scroll::-webkit-scrollbar-thumb { background:#8fb2d8; border-radius:999px; }
.notes-scroll::-webkit-scrollbar-thumb:hover { background:#6f9dca; }
.notes-scroll:focus { outline:2px solid rgba(0,78,162,.35); outline-offset:2px; }

/* =========================================================
  下部 お問い合わせ
========================================================= */
.contact-bankapp { margin-top:58px; }
.contact-bankapp__inner { padding:34px 38px 38px; background:#eaf2fb; }
.contact-bankapp__head { margin-bottom:34px; }
.contact-bankapp__title { position:relative; margin:0 0 12px; padding-left:14px; color:var(--color-blue); font-size:3rem; font-weight:700; line-height:1.45; }
.contact-bankapp__title::before { content:""; position:absolute; top:.18em; left:0; width:4px; height:1.45em; background:var(--color-blue); }
.contact-bankapp__links { display:flex; flex-wrap:wrap; gap:8px 22px; }
.contact-bankapp__links a { position:relative; display:inline-block; padding-left:17px; color:var(--color-blue); font-size:1.5rem; font-weight:500; line-height:1.5; }
.contact-bankapp__links a::before { content:"›"; position:absolute; left:0; top:-1px; color:var(--color-blue); font-size:2rem; line-height:1; }
.contact-bankapp__cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.contact-bankapp__col { min-width:0; }
.contact-bankapp__sub { display:flex; align-items:flex-start; height:66px; margin:0 0 16px; padding:0 0 12px; border-bottom:1px solid var(--color-blue); color:var(--color-blue); font-size:1.8rem; font-weight:700; line-height:1.45; box-sizing:border-box; }
.contact-bankapp__name { margin:0 0 8px; color:#111; font-size:1.6rem; font-weight:700; line-height:1.6; }
.contact-bankapp__tel { display:inline-flex; align-items:center; gap:8px; color:var(--color-blue); font-size:3rem; font-weight:700; line-height:1.2; letter-spacing:.04em; text-decoration:none; }
.contact-bankapp__tel:hover { text-decoration:none; }
.contact-bankapp__tel img { display:block; width:28px; height:auto; flex:0 0 auto; }
.contact-bankapp__time { margin:8px 0 0; color:#111; font-size:1.3rem; line-height:1.6; }
.contact-bankapp__links a[target="_blank"]::after, .bottom-link-list a[target="_blank"]::after { content:""; display:inline-block; width:14px; height:14px; margin-left:5px; background:url("/personal/service/bankapp/family/images/icon_externallink.svg") no-repeat center / contain; vertical-align:-1px; }

/* =========================================================
  下部 メニュー
========================================================= */
.app-menu { margin-top:54px; }
.bottom-title { position:relative; margin:0 0 16px; padding-left:14px; color:var(--color-blue); font-size:clamp(2.4rem,3vw,3.2rem); font-weight:700; line-height:1.45; }
.bottom-title::before { content:""; position:absolute; top:.18em; left:0; width:4px; height:1.45em; background:var(--color-blue); }
.bottom-link-list { margin:0; padding:0; list-style:none; }
.bottom-link-list li { margin:4px 0; line-height:1.5; }
.app-menu .bottom-link-list a { position:relative; display:inline-block; padding-left:18px; color:var(--color-blue); }
.app-menu .bottom-link-list a::before { content:"›"; position:absolute; left:0; top:0; color:var(--color-blue); font-size:2rem; font-weight:400; line-height:1; }

/* =========================================================
  タブレット以下 / ダウンロード縦積み
========================================================= */
@media (max-width:960px) {
  .app-download { margin-top:38px; }
  .app-download__inner { padding:0 10px 22px; background:#ddd; }
  .app-download__head { margin:0 -10px 18px; }
  .app-download__cards { grid-template-columns:1fr; gap:20px; }
  .app-download__card { display:block; min-height:auto; padding:20px 16px 16px; border-radius:16px; background:#fff; text-align:center; }
  .store-left { display:block; }
  .store-banner { display:block; width:210px; max-width:100%; margin:0 auto; }
  .store-banner img { display:block; width:90%; height:auto; margin:0 auto; }
  .store-os { margin:5px 0 0; color:#222; font-size:1.3rem; line-height:1.5; text-align:center; }
  .store-qr { display:none; }
  .app-download__note { margin:16px 0 0; color:#222; font-size:1.2rem; line-height:1.6; text-align:center; }
}

/* =========================================================
  スマホ調整
========================================================= */
@media (max-width:640px) {
  body { font-size:1.4rem; line-height:1.75; }
  .page { padding:0 14px 52px; }
  .breadcrumb { margin-bottom:20px; font-size:1.1rem; }
  .sp-only { display:block; }
  br.sp-only { display:inline; }
  .pc-only, br.pc-only { display:none; }
  .hero { padding-bottom:16px; }
  .hero__title-line { gap:14px; font-size:2.6rem; }
  .hero__title-line::before, .hero__title-line::after { width:48px; height:2px; }
  .hero + .app-download { margin-top:12px; margin-bottom:36px; }
  .section-box { padding:28px 18px; }
  .section-title { font-size:2.2rem; }
  .recommend-box, .usage-image { padding:22px 5px; border-radius:10px; }
  .line-title { margin:42px 0 24px; font-size:2.4rem; }
  .flow__info--soft { justify-content:flex-start; margin-bottom:30px; padding:16px; }
  .flow__info--soft p { align-items:flex-start; gap:12px; font-size:1.6rem; line-height:1.75; }
  .flow__info--soft .flow__info-label { margin-top:2px; padding:4px 12px; font-size:1.3rem; line-height:1.4; }
  .flow__info--soft .flow__info-text { flex:1; min-width:0; }
  .step-block { margin-bottom:48px; }
  .bar-title-block { margin:0 0 26px; }
  .bar-title-note { display:block; margin:0 0 0 18px; padding:9px 12px; border-radius:7px; font-size:1.3rem; line-height:1.7; }
  .step-swiper { padding-bottom:34px; }
  .step-swiper .swiper { padding-right:44px; }
  .step-swiper .swiper-slide { width:86%; max-width:360px; }
  .step-card { grid-template-columns:1fr; gap:18px; min-height:0; padding:22px 18px; }
  .step-card__body { order:1; text-align:center; }
  .step-label { margin:0 0 13px; text-align:left; }
  .step-card h4 { font-size:1.8rem; text-align:left; }
  .image-placeholder--phone { order:2; width:100%; min-width:0; max-width:200px; height:auto; margin:0 auto; background:#fff; }
  .image-placeholder--phone img { display:block; width:100%; height:auto; object-fit:contain; }
  .swiper-nav { z-index:1; width:48px; height:48px; border-width:2px; }
  .swiper-nav::before { font-size:3.4rem; }
  .swiper-nav--prev { left:-12px; }
  .swiper-nav--next { right:-12px; }
  .swiper-nav--prev::before { transform:translate(-1px,-4px); }
  .swiper-nav--next::before { transform:translate(1px,-4px); }
  .notes-section { margin-top:42px; }
  .notes__guide { margin:-12px 0 8px; font-size:1.1rem; }
  .notes-scroll { max-height:310px; padding:22px 18px; }
  .notes-scroll ul { font-size:1.3rem; line-height:1.85; }
  .contact-bankapp { margin-top:42px; }
  .contact-bankapp__inner { padding:28px 18px 30px; }
  .contact-bankapp__head { margin-bottom:26px; }
  .contact-bankapp__title { font-size:2.4rem; }
  .contact-bankapp__links { display:block; }
  .contact-bankapp__links a { margin:2px 0; font-size:1.4rem; }
  .contact-bankapp__cols { grid-template-columns:1fr; gap:24px; }
  .contact-bankapp__sub { height:auto; min-height:0; font-size:1.6rem; }
  .contact-bankapp__name { font-size:1.4rem; }
  .contact-bankapp__tel { font-size:2.5rem; }
  .contact-bankapp__tel img { width:24px; }
  .app-menu { margin-top:42px; }
  .bottom-title { font-size:2.4rem; }
  .breadcrumb--bottom { margin-top:44px; }
}

/* =========================================================
  さらに狭いスマホ調整
========================================================= */
@media (max-width:390px) {
  .hero__copy { font-size:2.1rem; }
  .step-swiper .swiper-slide { width:88%; }
  .app-download__card { padding:16px 14px; }
  .store-banner { width:124px; }
}


/* =========================================================
  カラム定義　メイン＋サイドバー（管理上上書き）
========================================================= */

/* メイン */

/* .main-wrap .col-l {max-width: 82rem;width: 70%;margin-right: 8rem;}
@media print, screen and (min-width: 640px) {
.main-wrap .col-l {max-width: 82rem;width: 70%;margin-right: 8rem;}} */

/* サイドバー */

/* .main-wrap .sidebar {max-width: 28rem;} */




/*スライダー見切れ対策*/


@media screen and (min-width: 641px) and (max-width: 1012px) {
    
.step-card {grid-template-columns: 44% 1fr;}
    
}