@charset "utf-8";
/* ==================================================
  ろうきんアプリ LP  /rokin-app/   SP
================================================== */

.appLp {
  --app-main: #005bab;
  --app-text: #1a1a1a;
  --app-teal: #35a6af;
  --app-grad: linear-gradient(108.78deg, #005bab 0%, #35a6af 100%);
  --app-grad-btn: linear-gradient(130.53deg, #005bab 0%, #35a6af 100%);
  --app-shadow: 0 4px 16px 0 rgba(0, 91, 171, .1);

  /* デザイン（Figma）はヒラギノ角ゴ Pro W3／W6。
     ProN・Pro は W3(300) と W6(600) を持つファミリーなので、font-weightを数値で指定して
     デザインのウェイトに直接対応させる（本文=300／太字=600）。
     ヒラギノが無い環境（Windows等）は共通CSSと同じ游ゴシック系にフォールバックする */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
               "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Yu Gothic",
               "メイリオ", sans-serif;
  font-weight: 300;
  color: var(--app-text);
  overflow: hidden;
}

/* common_v2 の .content_main::before（固定＝スクロール追従の背景層）を
   このLP用の背景に差し替え。::after のネイビーオーバーレイは不要なので解除 */
.appLp::before {
  background: #eaf4fb url(/rokin-app/images/bg_main_sp.webp) no-repeat center / cover;
}
.appLp::after {
  background: none;
}

.appInner {
  width: auto;
  margin: 0 10px;
}

.appLp .fcMain { color: var(--app-main); }

/* 中身を文字数ぶんの幅にしたまま中央に置くユーティリティ。
   flexの align-items:center と違い、1本のカラムに揃うので
   複数行あっても各行の頭がずれない */
.gridCenter {
  display: grid;
  /* 内容がカラム幅を超えたときにはみ出さないようにする */
  grid-template-columns: minmax(0, max-content);
  place-content: center;
}

/* --------------------------------------------------
  共通：セクション / 見出し
-------------------------------------------------- */
.appSec {
  padding: 56px 0;
}
/* SPは両セクションとも白50%透過（背景画像が透ける）。角丸の当たり方だけ異なる */
.appSec.appPoint {
  padding: 40px 0;
  background: rgba(255, 255, 255, .5);
  border-radius: 40px;
}
.appSec.appStart {
  background: rgba(255, 255, 255, .5);
  border-radius: 0 0 40px 40px;
}

.appTtl {
  margin: 0 0 40px;
  text-align: center;
}
.appTtl img {
  width: 100%;
  max-width: 354px;
  height: auto;
}

/* --------------------------------------------------
  共通：注釈
-------------------------------------------------- */
.appLp .appNote {
  margin-top: 8px;
}
.appLp .appNote:first-child {
  margin-top: 0;
}
.appLp .appNote > li {
  position: relative;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appLp .appNote > li + li {
  margin-top: 4px;
}
.appLp .appNote > li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "\203B";
}

/* --------------------------------------------------
  共通：ボタン
-------------------------------------------------- */
.appBtnList > li + li {
  margin-top: 8px;
}

.appBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 30px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: var(--app-main);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
}
.appBtn::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 0;
  height: 0;
  margin-top: -4px;
  border-style: solid;
  border-width: 4px 0 4px 8px;
  border-color: transparent transparent transparent #fff;
  content: "";
}
/* 白地・青枠のバリエーション（始め方セクションのボタン） */
.appBtn.type-line {
  border-color: var(--app-main);
  background: #fff;
  color: var(--app-main);
}
.appBtn.type-line::after {
  border-left-color: var(--app-main);
}

.appBtnS {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 30px;
  border: 1px solid var(--app-main);
  border-radius: 999px;
  background: #fff;
  color: var(--app-main);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
}
.appBtnS::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 0;
  height: 0;
  margin-top: -4px;
  border-style: solid;
  border-width: 4px 0 4px 8px;
  border-color: transparent transparent transparent var(--app-main);
  content: "";
}

/* ==================================================
  MV
================================================== */
/* 下の余白はMV下端からPointボックス上端までの24px */
.appMv {
  padding: 16px 0 24px;
}
.appMv_inner {
  margin: 0 10px;
}
/* 吹き出しの影・しっぽのブリード分だけ上下にマイナスを入れて、
   図形本体（183×70）がデザイン位置に来るようにする */
.appMv_label {
  margin: -12px 0 -20px;
  text-align: center;
}
.appMv_label img {
  width: 215px;
  height: auto;
}
.appMv_ttl {
  margin: 0 0 20px;
  text-align: center;
}
.appMv_ttl img {
  width: 100%;
  max-width: 355px;
  height: auto;
}

.appMv_img {
  position: relative;
  margin: 8px 0 0;
  /* 左右から出てくる動きの、枠の外にはみ出したぶんを隠す */
  overflow: hidden;
}
/* SPは left/right も縦移動に割り当てているが、ここだけは左右から出す */
.appMv_img .js-anim[data-anim="left"]  { transform: translateX(-24px); }
.appMv_img .js-anim[data-anim="right"] { transform: translateX(24px); }
.appMv_img .js-anim.is-shown { transform: none; }
/* Figmaの枠は335×315。奥＝225×314を(110,1)、手前＝163×277を(0,0)に置く */
.appMv_img_layer {
  display: block;
}
.appMv_img .type-back {
  width: 67.16%;               /* 225 / 335 */
  margin: 0.30% 0 0 32.84%;    /* 上1px・左110px */
}
.appMv_img .type-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 48.66%;               /* 163 / 335 */
}
.appMv_img img {
  width: 100%;
  height: auto;
}

.appMv_btn {
  margin-top: 8px;
}

.appBtnMovie {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma 305×48。左はマスコット領域、右は再生アイコンぶんを空ける */
  width: 305px;
  max-width: 100%;
  min-height: 48px;
  margin: 0 auto;
  padding: 8px 42px 8px 91px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: var(--app-grad-btn);
  box-shadow: var(--app-shadow);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
  text-decoration: none;
}
/* マスコットはボタンの高さに影響させないので絶対配置。上に8pxはみ出す */
/* 再生ボタン（白丸＋青い三角）。Figma 20×20・右から16px */
.appBtnMovie::after {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url(/rokin-app/images/icon_play.svg) no-repeat center / 20px 20px;
  content: "";
}
.appBtnMovie_icon {
  position: absolute;
  bottom: 8px;
  left: 16px;
  pointer-events: none;
}
.appBtnMovie_icon img {
  display: block;
  width: 69px;
  height: auto;
}

/* 動画ボタンの下に置くため、MV内のストアブロックだけ上に余白を取る
   （タイトル直下にあったときと同じ20px） */
.appMv_body > .appStore {
  margin-top: 20px;
}

/* App Store / Google Play */
.appStore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .5);
}
/* バッジは公式素材なので縦横比を保つ。高さ42pxで揃えると
   App Store 114×42・Google Play 141×42 になりデザインと一致する */
.appStore_item {
  flex: none;
}
.appStore_name {
  display: none;
}
.appStore_badge {
  display: block;
}
.appStore_badge img {
  display: block;
  width: auto;
  height: 42px;
}
.appStore_qr {
  display: none;
}

.appStore_lead {
  flex: none;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .05em;
  text-align: left;
}
/* 「ダウンロード」だけ青字。黄色のマーカーは文字の後ろに敷くので背景で描く */
.appStore_leadMark {
  color: var(--app-main);
  background-image: linear-gradient(rgba(237, 221, 33, .95), rgba(237, 221, 33, .95));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 6px;
}
.appStore_leadSub {
  font-size: 12px;
}

/* ==================================================
  Point
================================================== */
/* デザインは375px基準の絵づくり（左右の円が画面端に接する）。
   .appInner の左右10pxを打ち消しつつ、画面が広い端末では中央に置く */
.appPoint_body {
  position: relative;
  width: 375px;
  height: 319px;
  margin: 0 calc(50% - 187.5px);
}

/* 重なり順はFigmaに合わせて バッジ → スマホ → 引き出し線・ドット → リボン */
/* 中央のスマホ（160×319） */
.appPoint_center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 160px;
  margin: 0 auto;
}
.appPoint_center img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------
  引き出し線・ドット
  すべて直線／円なのでCSSで描画。
  座標はコンテナ（375×319）左上を原点としたFigmaの実測値。
  線の端はバッジ側に数px潜り込ませて、隙間が出ないようにしている
-------------------------------------------------- */
.appPointDeco {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.appPointDeco > span {
  position: absolute;
  display: block;
}

/* 赤い引き出し線 */
.appPointDeco_line {
  height: 2px;
  margin-top: -1px;
  background: #df0d0c;
  transform-origin: 0 50%;
}
.appPointDeco_line.type-r1 { top: 86px;  left: 93px;  width: 38.1px;  transform: rotate(23.2deg); }
.appPointDeco_line.type-r2 { top: 38px;  left: 252px; width: 38.7px;  transform: rotate(26.2deg); }
.appPointDeco_line.type-r3 { top: 237px; left: 86px;  width: 50.2px;  transform: rotate(-35.27deg); }
.appPointDeco_line.type-r4 { top: 257px; left: 224px; width: 59px;    transform: rotate(3.57deg); }
/* SPは右下の引き出し線が1本なのでr5は使わない */
.appPointDeco_line.type-r5 { display: none; }

/* 青い点線（dasharray 4 4 を再現） */
.appPointDeco_dash {
  height: 2px;
  margin-top: -1px;
  background-image: repeating-linear-gradient(to right, var(--app-main) 0 4px, transparent 4px 8px);
  transform-origin: 0 50%;
}
.appPointDeco_dash.type-b1 { top: 191px; left: 100px; width: 25.6px; transform: rotate(30.58deg); }
/* 点線の先は「編集する」ボタン（右端 x=252px・中心 y=173px）。
     PC側は既にこの位置を指しているので、SPだけ18px上げて揃える */
.appPointDeco_dash.type-b3 { top: 178px; left: 252px; width: 29.2px; transform: rotate(38deg); }
/* SPはリボンの点線が左右1本ずつ */
.appPointDeco_dash.type-b2,
.appPointDeco_dash.type-b4 { display: none; }

/* 引き出し線の先端の赤い丸 */
.appPointDeco_dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #df0d0c;
}
.appPointDeco_dot.type-d1 { top: 95px;  left: 122px; }
.appPointDeco_dot.type-d2 { top: 32px;  left: 246px; }
.appPointDeco_dot.type-d3 { top: 202px; left: 121px; }
.appPointDeco_dot.type-d4 { top: 251px; left: 218px; }

/* スマホ画面上の点線枠は point_center.webp に含まれています */

/* --------------------------------------------------
  四隅の円形バッジ（SPのみ）
  中央=グラデーションの円80px、その外側に薄い青の二重円（96px・112px）。
  二重円は box-shadow で描き、広がっては戻る動きを付ける。
  その上を細い罫線の波紋が外へ広がる
-------------------------------------------------- */
.appPointBadge {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.appPointBadge.type-tl { top: 15px;  left: 0; }
.appPointBadge.type-tr { top: 15px;  right: 0; }
.appPointBadge.type-bl { top: 207px; left: 0; }
.appPointBadge.type-br { top: 207px; right: 0; }

/* 中央の円（グラデーション） */
.appPointBadge_text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--app-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

/* --------------------------------------------------
  薄い青の二重円（内側から外側へ流れる）

  中央の円と同じ80pxの円を3枚重ね、1枚ぶん（16px）外へ送り出す。
  3枚とも塗りなので重なった内側の帯が19%相当・外側の帯が10%相当になり、
  Figmaの二重円と同じ濃さになる。
  いちばん内側は中央の円の縁から薄く現れ、いちばん外側は消えながら出ていくため、
  1周したときの見た目が開始時と完全に一致し、戻る動きもちらつきも出ない。
  動かすのは transform と opacity だけなのでGPUで合成され、再描画が走らない
-------------------------------------------------- */
.appPointBadge_wave,
.appPointBadge::before,
.appPointBadge::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  background: rgba(0, 91, 171, .1);
  pointer-events: none;
  content: "";
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* いちばん内側：中央の円の縁（80px）から96pxへ、薄く現れながら */
.appPointBadge_wave    { animation-name: appPointWaveIn; }
/* 真ん中：96px → 112px */
.appPointBadge::before { animation-name: appPointWaveMid; }
/* いちばん外側：112px → 128px、消えながら */
.appPointBadge::after  { animation-name: appPointWaveOut; }

@keyframes appPointWaveIn {
  0%   { transform: scale(1);   opacity: 0; }
  100% { transform: scale(1.2); opacity: 1; }
}
@keyframes appPointWaveMid {
  0%   { transform: scale(1.2); }
  100% { transform: scale(1.4); }
}
@keyframes appPointWaveOut {
  0%   { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* 波紋（参考サイトと同じ細い罫線）。中央の円の縁から2倍まで広がりながら消える。
   2枚を半周期ずらして流すので、輪が途切れずに出続ける */
.appPointBadge_text::before,
.appPointBadge_text::after {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 1px solid var(--app-main);
  border-radius: 50%;
  pointer-events: none;
  content: "";
  animation: appPointPulse 2s linear infinite;
}
/* マイナスのdelayなので、表示直後から2枚とも流れている状態で始まる */
.appPointBadge_text::after {
  animation-delay: -1s;
}

@keyframes appPointPulse {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* --------------------------------------------------
  Pointリボン（SPは小さい帯）
-------------------------------------------------- */
.appPointRibbon {
  position: absolute;
  top: 167px;
  z-index: 4;
  width: 90px;
  margin: 0;
}
.appPointRibbon.type-l { left: 10px; }
.appPointRibbon.type-r { right: 10px; }

.appPointRibbon_label {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  /* 帯の上端への重なり量。PC（116px幅で-21px）と同じ比率 */
  margin-bottom: -6px;
  text-align: center;
}
.appPointRibbon_label img {
  width: 48px;
  height: auto;
}
.appPointRibbon_text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  /* 左右は文字が折り返さない余裕を優先（中央揃えなので見た目は変わらない）。
     Figmaの文字枠は74pxだが、ここでは80px確保している */
  padding: 8px 4px;
  border: 1px solid var(--app-main);
  border-radius: 8px;
  background: #fff;
  color: var(--app-main);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
  text-align: center;
}

/* ==================================================
  Service
================================================== */
.appServiceList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.appServiceList_item {
  display: flex;
  flex-direction: column;
  width: calc((100% - 8px) / 2);
  /* 左右は本文が折り返さない余裕を優先して広め（中央揃えなので見た目は変わらない） */
  padding: 16px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .5);
  text-align: center;
}
/* Figmaではタイトル枠が54px固定で、1行でも2行でも上下中央に置かれている */
.appServiceList_ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 54px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appServiceList_icon {
  margin: 8px 0 0;
}
.appServiceList_icon:first-child {
  margin-top: 0;
}
.appServiceList_icon img {
  width: 56px;
  height: 56px;
}
.appServiceList_text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: .05em;
}
.appServiceList_text:first-child {
  margin-top: 0;
}

/* 留意事項アコーディオン */
.appAcd {
  margin-top: 40px;
  /* 角丸は右上と左下のみ */
  border-radius: 0 16px 0 16px;
  /* 直前の2つのボタン（単色の --app-main）と見分けがつくようグラデーションにする */
  background: var(--app-grad);
  overflow: hidden;
}
.appAcd:first-child {
  margin-top: 0;
}
.appAcd_head {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 12px 48px 12px 20px;
  color: #fff;
  cursor: pointer;
}
.appAcd_icon {
  flex: none;
  margin-right: 8px;
}
.appAcd_icon img {
  display: block;
  width: 26px;
  height: auto;
}
.appAcd_ttl {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
}
/* 開閉アイコンは白い丸の中に青いプラス */
.appAcd_head::before {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: linear-gradient(var(--app-main), var(--app-main)) center / 10px 2px no-repeat,
              #fff;
  content: "";
}
.appAcd_head::after {
  position: absolute;
  top: 50%;
  right: 23px;
  width: 2px;
  height: 10px;
  margin-top: -5px;
  background: var(--app-main);
  content: "";
  transition: opacity .3s;
}
.appAcd_head.active::after {
  opacity: 0;
}
.appAcd_body {
  display: none;
  background: #fff;
}
.appAcd_inner {
  padding: 16px;
}

/* ==================================================
  ダウンロードはこちら
================================================== */
/* SPは 見出し → ストアバッジ → 画像 の順。画像はセクション下端で断ち切る */
.appDl {
  padding: 40px 0 0;
  background: var(--app-main) url(/rokin-app/images/dl_bg_sp.webp) no-repeat center / cover;
  overflow: hidden;
}
.appDl_inner {
  display: flex;
  flex-direction: column-reverse;
  margin: 0 10px;
}
/* 画像側で位置合わせ済みなので本文幅いっぱいに出す */
.appDl_img {
  margin: 20px 0 0;
}
.appDl_img img {
  display: block;
  width: 100%;
  height: auto;
}
/* ttl_dl_sp.svg は影のブリード込み（文字の上に4px・下に13px）。
   その分をマイナスマージンで相殺して、文字の位置をデザインに合わせる */
.appDl_ttl {
  margin: -4px 0 13px;
  text-align: center;
}
.appDl_ttl img {
  width: 100%;
  max-width: 355px;
  height: auto;
}
.appStore.type-dl {
  background: #fff;
}

/* ==================================================
  How to Get Started
================================================== */
/* 下マージンは「リード文の下端 → STEPバッジの上端」の間隔。
   カード上端までの距離は .appStep_item 側の margin-top で確保している */
.appStart_lead {
  margin: 24px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
  text-align: center;
}

/* タブ */
.appTab_nav {
  display: flex;
  /* 枠線1pxと合わせて、外周からタブまで8px。背景は敷かず枠線のみ */
  padding: 7px;
  border: 1px solid #c3c8d6;
  border-radius: 999px;
}
.appTab_btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--app-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .05em;
  cursor: pointer;
}
.appTab_btn.active {
  background: var(--app-main);
  color: #fff;
}
.appTab_panel {
  display: none;
}
.appTab_panel.active {
  display: block;
}

/* STEP */
/* 先頭itemの上マージンが外に抜けないよう flow-root にする
   （抜けるとリード文のmargin-bottomと相殺されて隙間が足りなくなる） */
.appStep {
  display: flow-root;
  margin-bottom: 32px;
}
/* 枠線はグラデーション。border-box に敷いた --app-grad を
   padding-box の白で抜いて、4pxの枠だけを見せる */
.appStep_item {
  position: relative;
  /* バッジ（64px）がカード上端から32px出るので、その分をitem側で確保する */
  margin-top: 32px;
  padding: 44px 16px 16px;
  border: 4px solid transparent;
  border-radius: 16px;
  background: linear-gradient(#fff, #fff) padding-box,
              var(--app-grad) border-box;
}
.appStep_item + .appStep_item {
  margin-top: 89px;
}
.appStep_item + .appStep_item::before {
  position: absolute;
  /* 絶対配置の基準はpadding box。枠線4px分を引いて、カード外周から73px上に出す */
  top: -77px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 25px 23.5px 0;
  border-color: #35a5b0 transparent transparent;
  content: "";
}
.appStep_num {
  position: absolute;
  /* 絶対配置の基準はpadding box。枠線4px分を引いて、カード外周から32px上に出す */
  top: -36px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}
.appStep_num img {
  display: block;
  width: 64px;
  height: 64px;
}
.appStep_ttl {
  margin: 0;
  color: var(--app-main);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .05em;
  text-align: center;
}
.appStep_sub {
  display: block;
  margin-top: 8px;
  color: var(--app-text);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appStep_sub:first-child {
  margin-top: 0;
}
.appStep_img {
  margin: 24px 0 0;
  text-align: center;
}
.appStep_img:first-child {
  margin-top: 0;
}
/* 画像の実寸はカットごとに違うが、デザインでは高さが揃っているので高さで合わせる */
.appStep_img img {
  width: auto;
  max-width: 100%;
  height: 259px;
  object-fit: contain;
}
.appStep_text {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: .05em;
}
.appStep_text:first-child {
  margin-top: 0;
}
.appStep_btn {
  margin-top: 16px;
}
.appStep_btn:first-child {
  margin-top: 0;
}

/* 動画 */
.appMovie {
  margin-bottom: 16px;
}
.appMovie_lead {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
  text-align: center;
}
.appMovie_body {
  background: #ccc;
  overflow: hidden;
}
.appMovie_body iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ==================================================
  Question
================================================== */
/* 開閉・Q/Aバッジ・配色は共通の .acd.type-qa（module_sp.css）を使用。
   共通側は rem 指定なので、このLPで使う値だけ px で上書きする */
.appFaq .acd,
.appFaq .acd_btn,
.appFaq .acd_box {
  border-top-color: #fff;
  border-bottom-color: #fff;
}
.appFaq .acd_btn {
  padding: 16px 32px 16px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appFaq .acd_btn_inner {
  min-height: 32px;
}
.appFaq .acd_btn:after {
  right: 8px;
}
/* バッジは左端から16px、テキストとの間隔は16px */
.appFaq .acd.type-qa .faqIcon-q {
  margin: 0 16px 0 0;
}
.appFaq .faqIcon_text {
  font-size: 14px;
}
.appFaq .faqIcon_no {
  font-size: 12px;
}

.appQa_lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appQa_lead + .appQa_lead {
  margin-top: 16px;
}
.appQa_list {
  margin: 8px 0 0;
  counter-reset: qaNum;
}
.appQa_list:first-child {
  margin-top: 0;
}
/* 本文は黒。番号だけ青 */
.appQa_list > li {
  position: relative;
  padding-left: 25px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .05em;
  counter-increment: qaNum;
}
.appQa_list > li + li {
  margin-top: 8px;
}
.appQa_list > li::before {
  position: absolute;
  left: 0;
  color: var(--app-main);
  content: counter(qaNum) ".";
  font-weight: 600;
}
.appQa_inlineIcon {
  width: 26px;
  height: 24px;
  margin: 0 2px;
  vertical-align: middle;
}
.appQa_img {
  margin: 16px 0 0;
}
.appQa_img:first-child {
  margin-top: 0;
}
.appQa_img img {
  max-width: 100%;
  height: auto;
}
/* 単体のアプリ画面はQ1の合成画像に入っている1画面ぶんと同じ大きさに抑える
   （396pxの本文幅に3画面 → 1画面あたり約132px） */
.appQa_img.type-single img {
  width: 132px;
}

/* ==================================================
  お問い合わせ
================================================== */
/* レイアウト・背景・電話番号は共通の .inquiry / .telNumber を使用。
   共通側は rem 指定なので、このLPで使う値だけ px で上書きする */
.appContact .innerWrap {
  padding-top: 40px;
  padding-bottom: 40px;
}
.appContact .inquiry_head {
  margin-bottom: 24px;
  font-family: inherit;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appContact .inquiry_subTitle {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appContact .appContact_name {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appContact .inquiry .telNumber:not(:first-child),
.appContact .inquiry_item > *:not(:first-child) {
  margin-top: 8px;
}
/* 共通JSがSPで span を tel リンク（a）に差し替えるため、両方に当てる */
.appContact .telNumber span,
.appContact .telNumber a {
  font-size: 36px;
  /* フリーダイヤルマーク（高さ40px）が収まる行高 */
  line-height: 40px;
  letter-spacing: .05em;
}
/* フリーダイヤルマークはデザイン実寸（70×40）に合わせる */
.appContact .telNumber.icon-freedial span,
.appContact .telNumber.icon-freedial a {
  padding-left: 78px;
  background-size: auto 40px;
}
/* 共通の :not(:first-child)（8px）と同じ詳細度にして後勝ちさせる */
.appContact .inquiry_item > .appContact_time {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appContact .inquiry_item:not(:first-child) {
  margin-top: 24px;
  padding-top: 24px;
  border-top-color: var(--app-text);
}

/* ==================================================
  スクロールアニメーション
================================================== */
.js-anim {
  opacity: 0;
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.js-anim[data-anim="up"]    { transform: translateY(24px); }
.js-anim[data-anim="left"]  { transform: translateY(24px); }
.js-anim[data-anim="right"] { transform: translateY(24px); }
.js-anim[data-anim="fade"]  { transform: none; }

.js-anim.is-shown {
  opacity: 1;
  transform: none;
}
.js-anim[data-anim-delay="1"] { transition-delay: .1s; }
.js-anim[data-anim-delay="2"] { transition-delay: .2s; }
.js-anim[data-anim-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* 動きは止めて、Figmaどおりの静止状態（96px・112pxの二重円）にする */
  .appPointBadge_wave {
    animation: none;
    opacity: 0;
  }
  .appPointBadge::before {
    animation: none;
    transform: scale(1.2);
  }
  .appPointBadge::after {
    animation: none;
    transform: scale(1.4);
  }
  .appPointBadge_text::before,
  .appPointBadge_text::after {
    animation: none;
    opacity: 0;
  }
}

/* ==================================================
  ポイントの詳細モーダル（SPのみ）
  中身はPCレイアウトのカード（.appPointCard）と同じ要素。
  SPではそれを全画面のモーダルとして開く。
  開閉は共通の data-modalClass / .modal_close に任せている
================================================== */
/* 高さは100%指定ではなく top/bottom:0 で伸ばす
   （アドレスバーの出入りで 100% が実際のビューポートとずれるため） */
.appPointCard.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .65);
}
/* スクロール連動アニメーションはPCのカード用。モーダルでは効かせない */
.appPointCard.js-anim {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}
.appPointCard .modal_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 60px);
  max-width: 335px;
  max-height: 80vh;
  transform: translate(-50%, -50%);
}
/* 枠線はPCのカードと同じグラデーション（3px） */
.appPointCard .modal_scroll {
  position: relative;
  z-index: 0;
  max-height: 80vh;
  padding: 24px 20px;
  border: 3px solid transparent;
  border-radius: 16px;
  background: linear-gradient(#fff, #fff) padding-box,
              var(--app-grad) border-box;
  overflow: auto;
}
.appPointCard .modal_close {
  position: absolute;
  top: -20px;
  right: -10px;
  z-index: 1;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0;
  border: 2px solid var(--app-main);
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  font-size: 0;
  overflow: hidden;
  text-indent: 100%;
}
.appPointCard .modal_close::before,
.appPointCard .modal_close::after {
  position: absolute;
  top: 50%;
  left: calc(50% - 10px);
  width: 20px;
  height: 2px;
  background: var(--app-main);
  content: "";
}
.appPointCard .modal_close::before { transform: rotate(45deg); }
.appPointCard .modal_close::after  { transform: rotate(-45deg); }

/* PerfectScrollbarのつまみ（共通JSが .modal_scroll に付ける） */
.appPointCard .modal_scroll .ps__rail-y {
  right: 6px;
  width: 8px;
  padding: 4px 0;
  border-radius: 4px;
  background-color: #ccc !important;
}
.appPointCard .modal_scroll .ps__thumb-y {
  right: 0;
  width: 8px;
  background-color: var(--app-main);
}

.appPointCard_ttl {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appPointCard_text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: .05em;
}
.appPointCard_text:first-child {
  margin-top: 0;
}
.appPointCard_img {
  margin: 16px 0 0;
  text-align: center;
}
.appPointCard_img:first-child {
  margin-top: 0;
}
.appPointCard_img img {
  width: 100%;
  height: auto;
}
.appPointCard_btn {
  margin-top: 16px;
}
.appPointCard_btn:first-child {
  margin-top: 0;
}

/* ==================================================
  MVモーダル（アプリ紹介動画）
  共通の /banking/lp/css/modal_*.css は video 前提のため、
  YouTube埋め込み用の指定をこのLPだけに追加する
================================================== */
/* 共通の .modalMovie は縦長動画前提で幅70%（SPで約262px）。
   16:9のYouTube埋め込みだと小さすぎるので、画面幅いっぱいに近づける */
.modal.modalMovie.modalAppMovie .modal_inner {
  width: calc(100% - 40px);
}
.modal.modalMovie.modalAppMovie .modal_scroll {
  padding: 16px;
}
.modalMovie.modal .modal_inner iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Pointセクション下の注釈。中央寄せは .gridCenter に任せる
   （カードの中にも .appNote があるので、セクション直下のものだけに限定する） */
.appPoint > .appInner > .appNote {
  margin-top: 20px;
}

/* ==================================================
  下部固定の追従ボタン
  共通の .fixedBottom / .cnv-col-1 を使用し、このLPの見た目だけ上書き
================================================== */
.fixedBottom .cntSec {
  border-top: 1px solid #ccc;
  background-color: #fff;
}
/* 白い下向き矢印を右から20pxに置く。色は指定色（青系の他ボタンと差をつける）。
   共通側は :hover で background-image を同じ白矢印に差し替えるだけなので、
   色を background-color に持たせている限りホバーでも見た目は変わらない */
.fixedBottom .nmlBtn_item .nmlBtn_itemLink {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: #f7774d url(/common_v2/images/arrow_down_triangle_white.svg) no-repeat right 20px center / 8px 8px;
  box-shadow: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
}
.fixedBottom .cntSec.cnv-col-1 .innerWrap {
  padding: 10px;
}