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

.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(125.04deg, #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.webp) no-repeat center / cover;
}
.appLp::after {
  background: none;
}

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

.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: 100px 0;
}
/* Pointは白50%透過（背景画像が透ける）／始め方は不透明な白。角丸の当たり方も別 */
.appSec.appPoint {
  background: rgba(255, 255, 255, .5);
  border-radius: 80px;
}
.appSec.appStart {
  background: #fff;
  border-radius: 0 0 80px 80px;
}

/* Figma：見出しの下端から本文まで56px */
.appTtl {
  margin: 0 0 56px;
  text-align: center;
}
.appTtl img {
  width: auto;
  height: 106px;
}

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

/* --------------------------------------------------
  共通：ボタン
-------------------------------------------------- */
.appBtnList {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.appBtnList.col1 {
  max-width: 530px;
  margin-left: auto;
  margin-right: auto;
}
.appBtnList > li {
  flex: 1 1 0;
}

.appBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  /* 文字ブロックが中心より6px左（右の矢印ぶん）になるよう左右差をつける */
  padding: 10px 36px 10px 24px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: var(--app-main);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
  transition: opacity .3s;
}
.appBtn::after {
  position: absolute;
  top: 50%;
  right: 12px;
  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);
}
.appBtn:hover {
  opacity: .8;
  text-decoration: none;
}

.appBtnS {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* デザインの枠は44px。枠線1px×2＋本文28pxなので上下padding7px */
  min-height: 44px;
  padding: 7px 36px 7px 20px;
  border: 1px solid var(--app-main);
  border-radius: 999px;
  background: #fff;
  color: var(--app-main);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background-color .3s, color .3s;
}
.appBtnS::after {
  position: absolute;
  top: 50%;
  right: 12px;
  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: "";
  transition: border-color .3s;
}
.appBtnS:hover {
  background: var(--app-main);
  color: #fff;
  text-decoration: none;
}
.appBtnS:hover::after {
  border-left-color: #fff;
}

/* ==================================================
  MV
================================================== */
.appMv {
  position: relative;
  /* 画像の下32pxがPointセクションのパネルに重なるデザイン。Pointより手前に描画する */
  z-index: 2;
  padding: 20px 0 0;
  margin-bottom: -32px;
}
.appMv_inner {
  /* ストアカード2枚分（307 + gap16 + 354）＝左カラムの基準幅。
     ラベル・タイトル・ボタンはすべてこの幅の中央に揃う */
  --mv-col: 677px;

  position: relative;
  /* Figma仕様どおり1331px。
     左右の余白は最低12pxだけ確保し、それ以上ある間は1331pxを保つ。 */
  width: 1331px;
  max-width: calc(100% - 24px);
  min-height: 620px;
  margin: 0 auto;
}
/* position を持たせない。.appMv_img（absolute）の基準を .appMv_inner のままにするため。
   画像は左カラム（--mv-col）の外側にしか来ないので、重なり順の指定は不要 */
.appMv_body {
  /* SPはDOM順（タイトル→画像→動画ボタン→ストア）で並べるため、
     PCだけ order でボタンを末尾に戻す。
     flexにするとマージンが相殺されないので、ラベルのマイナスマージンもそのまま効く */
  display: flex;
  flex-direction: column;
  width: var(--mv-col);
  text-align: center;
}
/* PCではストア・注釈より下に置く（.appMv_img は absolute なので並び順の影響を受けない） */
.appMv_body > .appMv_btn {
  order: 1;
}
.appMv_btn,
.appPoint_body,
.appMv_ttl {
  position: relative;
  z-index: 2;
}
.appMv_img {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 1;
  /* スマホ写真(570×600)＋マスコット2体を含んだ合成画像の外接サイズ */
  width: 639px;
  /* 枠が縮んだときに左カラムへ重ならないよう、残り幅までに収める。
     1331pxのときは 1331-677-15＝639 になり、デザインどおりの大きさになる */
  max-width: calc(100% - var(--mv-col) - 15px);
  /* 左右から出てくる動きの、枠の外にはみ出したぶんを隠す。
     これがないと表示直後だけページに横スクロールが出る */
  overflow: hidden;
}
/* Figmaの枠は639×600。奥＝430×598を(209,2)、手前＝311×528を(0,0)に置く。
   マージンの%は親の「幅」基準なので、いずれも639pxに対する比率で指定できる */
.appMv_img_layer {
  display: block;
}
.appMv_img .type-back {
  width: 67.29%;               /* 430 / 639 */
  margin: 0.31% 0 0 32.71%;    /* 上2px・左209px */
}
.appMv_img .type-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 48.67%;               /* 311 / 639 */
}
.appMv_img img {
  width: 100%;
  height: auto;
}

.appMv_label {
  /* SVGは影・しっぽのブリード込み（左右16px・上12px・下20px）。中央寄せなので図形本体も自動で中央に揃う。
     図形本体の上端をMV枠の最上端に合わせるため、ブリード分を上下で打ち消す */
  margin: -12px 0 -20px;
}
.appMv_label img {
  width: 309px;
  height: auto;
}

.appMv_ttl {
  margin: 0 0 24px;
}
.appMv_ttl img {
  width: 548px;
  height: auto;
}

.appMv_btn {
  width: var(--mv-col);
  margin-top: 20px;
  text-align: center;
}

.appBtnMovie {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figma 364×60。左はマスコット領域、右は再生アイコンぶんを空ける
     （左右のpaddingの差63pxで、本文がデザインどおり中央より右寄りに来る） */
  width: 364px;
  max-width: 100%;
  min-height: 60px;
  padding: 8px 54px 8px 117px;
  border: 2px solid #fff;
  border-radius: 16px;
  background: var(--app-grad-btn);
  box-shadow: var(--app-shadow);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
  text-decoration: none;
  transition: opacity .3s;
}
/* 再生ボタン（白丸＋青い三角）。Figma 24×24・右から20px */
.appBtnMovie::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: url(/rokin-app/images/icon_play.svg) no-repeat center / 24px 24px;
  content: "";
}
.appBtnMovie:hover {
  opacity: .85;
  text-decoration: none;
}
/* マスコットは絶対配置。ボタンの高さに影響させず、上方向にだけはみ出させる
   （flowに入れるとボタンが画像の高さ63pxまで広がってしまう） */
.appBtnMovie_icon {
  position: absolute;
  /* 絶対配置の基準はpadding box。枠線2px分を引いて、外周から左16px・下9pxに合わせる */
  left: 14px;
  bottom: 7px;
  line-height: 0;
  pointer-events: none;
}
.appBtnMovie_icon img {
  display: block;
  width: 91px;
  height: auto;
}
.appBtnMovie_text {
  flex: 1 1 auto;
}

/* App Store / Google Play */
.appStore {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.appStore_item {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .5);
}
.appStore_name {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
}
.appStore_body {
  display: flex;
  align-items: center;
  gap: 8px;
}
.appStore_badge {
  display: block;
  transition: opacity .3s;
}
.appStore_badge:hover { opacity: .8; }
.appStore_badge img {
  display: block;
  height: 72px;
  width: auto;
}
.appStore_qr img {
  display: block;
  width: 72px;
  height: 72px;
}

/* ==================================================
  Point
================================================== */
.appPoint_body {
  position: relative;
  width: 1080px;
  height: 576px;
  margin: 0 auto;
}
/* 中央のスマホ（281×560）。コンテナ中央に配置。
   この要素は .js-anim が付いており、.js-anim 側の transform 指定に
   打ち消されるため、transform ではなく left/right + auto margin で中央寄せする */
.appPoint_center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 281px;
  margin: 0 auto;
}
.appPoint_center img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------
  引き出し線・ドット・点線枠
  すべて直線／円／角丸矩形なのでCSSで描画。
  座標はコンテナ（1081×576）左上を原点としたFigmaの実測値。
  線の端はカード側に数px潜り込ませて、隙間が出ないようにしている
  （カードは後続要素なので線の上に描画される）
-------------------------------------------------- */
.appPointDeco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.appPointDeco > span {
  position: absolute;
  display: block;
}

/* 赤い引き出し線 */
.appPointDeco_line {
  height: 3px;
  margin-top: -1.5px;
  background: #df0d0c;
  transform-origin: 0 50%;
}
.appPointDeco_line.type-r1 { top: 86px;  left: 334px; width: 135.6px; transform: rotate(28.64deg); }
.appPointDeco_line.type-r2 { top: 68px;  left: 653px; width: 98px;    transform: rotate(14.2deg); }
.appPointDeco_line.type-r3 { top: 436px; left: 334px; width: 145.3px; transform: rotate(6.12deg); }
.appPointDeco_line.type-r4 { top: 361px; left: 489px; width: 198.5px; }
.appPointDeco_line.type-r5 { top: 360px; left: 686px; width: 104.7px; transform: rotate(54.72deg); }

/* 青い点線（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: 258px; left: 337px; width: 45px; }
.appPointDeco_dash.type-b2 { top: 258px; left: 381px; width: 84.2px; transform: rotate(60.09deg); }
.appPointDeco_dash.type-b3 { top: 258px; left: 700px; width: 45px; }
.appPointDeco_dash.type-b4 { top: 308px; left: 653px; width: 65.1px; transform: rotate(-47.49deg); }

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

/* 引き出し線の先端の赤い丸 */
.appPointDeco_dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #df0d0c;
}
.appPointDeco_dot.type-d1 { top: 144px; left: 446px; }
.appPointDeco_dot.type-d2 { top: 62px;  left: 647px; }
.appPointDeco_dot.type-d3 { top: 446px; left: 473px; }
.appPointDeco_dot.type-d4 { top: 355px; left: 483px; }

/* SPではこのカードがそのままモーダルの中身になるため、
   .modal_inner / .modal_scroll を挟んだ構造になっている。
   PCでは余白を .modal_inner 側に持たせ、枠の内側を隙間なく覆わせる
   （共通の modal は .modal_inner の外側をクリックすると閉じる作りのため） */
.appPointCard {
  position: absolute;
  display: flex;
  width: 336px;
  /* 枠線はグラデーション（--app-grad）。borderに直接指定できないため2枚の背景で表現 */
  border: 3px solid transparent;
  border-radius: 16px;
  background: linear-gradient(#fff, #fff) padding-box,
              var(--app-grad) border-box;
}
/* 上段は下端(y=184)、下段は上端(y=326)を固定する。
   こうすると文字が増えてもカードは中央のリボン(y=225〜290)から遠ざかる方向に伸び、
   引き出し線の接続点（上段は下端から98/92px、下段は上端から110/120px）も動かない */
/* 共通JSの「外側クリックで閉じる」がPCで誤爆しないよう、
   枠線上のクリックも .modal_inner だけが受けるようにする */
.appPointCard {
  pointer-events: none;
}
.appPointCard .modal_inner {
  width: 100%;
  /* 枠線3pxと合わせて、外周からテキストまで24pxになるよう21px */
  padding: 21px;
  pointer-events: auto;
}
.appPointCard .modal_close {
  display: none;
}

.appPointCard.type-tl { bottom: 392px; left: 0;  min-height: 184px; }
.appPointCard.type-tr { bottom: 392px; right: 0; min-height: 184px; }
.appPointCard.type-bl { top: 326px;    left: 0;  min-height: 250px; }
.appPointCard.type-br { top: 326px;    right: 0; min-height: 250px; }

.appPointCard_ttl {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appPointCard_text {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .05em;
}
.appPointCard_text:first-child {
  margin-top: 0;
}
/* このセクションの注釈のみ14px（他セクションは12px） */
.appPointCard .appNote > li {
  font-size: 14px;
  letter-spacing: .05em;
}
.appPointCard_btn {
  margin-top: 8px;
}
.appPointCard_btn:first-child {
  margin-top: 0;
}

.appPointRibbon {
  position: absolute;
  /* topは帯（appPointRibbon_text）の位置。ラベルは絶対配置で上に重ねるので、
     ラベル画像の高さが変わっても帯と引き出し線の位置は動かない */
  top: 225px;
  width: 336px;
  margin: 0;
}
.appPointRibbon.type-l { left: 0; }
.appPointRibbon.type-r { right: 0; }

.appPointRibbon_label {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  /* 帯の上端からの重なり量。書き出し済みlabel_point.svg（116×42・影のブリード込み）の
     見た目の位置がFigmaと合う値。bottom:100%指定のため、値を小さくすると上に動く */
  margin-bottom: -21px;
  text-align: center;
}
.appPointRibbon_label img {
  width: 116px;
  height: auto;
}
.appPointRibbon_text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 65px;
  /* 上に重なるPointラベルを避けるため、文字は帯の中心より4px下に置く（Figma準拠）。
     上下paddingの差で表現しているので、2行になっても同じ比率で広がる */
  padding: 16px 16px 8px;
  border-radius: 16px;
  background: var(--app-main);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
}

/* ==================================================
  Service
================================================== */
.appServiceList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-bottom: 56px;
}
.appServiceList_item {
  display: flex;
  flex-direction: column;
  width: 240px;
  min-height: 276px;
  /* 左右は本文が折り返さない余裕を優先して広め（カード幅・中央揃えなので見た目は変わらない）。
     Figmaの本文枠は200pxだが、文言が伸びても耐えられるよう216px確保している */
  padding: 20px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .5);
  text-align: center;
}
/* Figmaではタイトル枠が66px固定で、1行でも2行でも上下中央に置かれている */
.appServiceList_ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 66px;
  font-size: 22px;
  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: 80px;
  height: 80px;
}
.appServiceList_text {
  margin: 16px 0 0;
  /* アイコンと本文の間を伸ばしてカード高さを揃える */
  padding-top: 0;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .05em;
}
.appServiceList_text:first-child {
  margin-top: 0;
}

/* 留意事項アコーディオン */
.appAcd {
  margin-top: 56px;
  /* 角丸は右上と左下のみ */
  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: 76px;
  padding: 16px 80px 16px 40px;
  color: #fff;
  cursor: pointer;
}
.appAcd_icon {
  flex: none;
  margin-right: 8px;
}
.appAcd_icon img {
  display: block;
  width: 32px;
  height: auto;
}
.appAcd_ttl {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
}
/* 開閉アイコンは白い丸(32px)の中に青いプラス */
.appAcd_head::before {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  background: linear-gradient(var(--app-main), var(--app-main)) center / 12px 2px no-repeat,
              #fff;
  content: "";
}
.appAcd_head::after {
  position: absolute;
  top: 50%;
  right: 39px;
  width: 2px;
  height: 12px;
  margin-top: -6px;
  background: var(--app-main);
  content: "";
  transition: opacity .3s;
}
.appAcd_head.active::after {
  opacity: 0;
}
.appAcd_body {
  display: none;
  background: #fff;
}
.appAcd_inner {
  padding: 24px 40px 32px;
}

/* ==================================================
  ダウンロードはこちら
================================================== */
.appDl {
  position: relative;
  /* 画像が青い帯の上に40pxはみ出す。下ははみ出さずセクション下端で切る */
  padding-top: 40px;
  overflow: hidden;
}
.appDl::before {
  position: absolute;
  top: 40px;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-main) url(/rokin-app/images/dl_bg.webp) no-repeat center / cover;
  content: "";
}
.appDl_inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 1080px;
  min-height: 384px;
  margin: 0 auto;
}
/* 画像(494×464)はセクション上端＝帯の40px上から始める。
   帯より高いので下側はセクションのoverflow:hiddenで切られる */
.appDl_img {
  position: absolute;
  top: -40px;
  left: 0;
  width: 494px;
  margin: 0;
}
.appDl_img img {
  width: 100%;
  height: auto;
}
.appDl_body {
  position: relative;
  flex: none;
  width: 653px;
}
/* ttl_dl_pc.svgは影のブリード込みで399×79（文字枠は373×48、
   ブリードは左右12.75px・上13.1px・下17.1px）。実寸で表示し、上下のブリードを打ち消す */
.appDl_ttl {
  margin: -13px 0 15px;
  text-align: center;
}
.appDl_ttl img {
  width: 399px;
  height: auto;
}
/* DL内のストアカードはMVより余白が狭い（padding10・名前下8 → カード高114px） */
.appStore.type-dl .appStore_item {
  padding: 10px;
  background: #fff;
}
.appStore.type-dl .appStore_name {
  margin-bottom: 8px;
}

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

/* タブ */
.appTab_nav {
  display: flex;
  width: 880px;
  margin: 0 auto;
  /* 枠線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: 52px;
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--app-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.appTab_btn.active {
  background: var(--app-main);
  color: #fff;
}
.appTab_panel {
  display: none;
}
.appTab_panel.active {
  display: block;
}

/* STEP */
.appStep {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 80px;
}
.appStep_item {
  position: relative;
  /* バッジ（80px）がカード上端から40px出るので、その分をitem側で確保する */
  margin-top: 40px;
  width: 328px;
  padding: 52px 20px 20px;
  border-radius: 16px;
  background: #E6EFF7;
}
.appStep_item + .appStep_item::before {
  position: absolute;
  top: 50%;
  /* カード間ギャップ48pxの中央に置く（矢印の大きさに依存しない） */
  left: -24px;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 24px 0 24px 25px;
  border-color: transparent transparent transparent #35a5b0;
  content: "";
}
.appStep_num {
  position: absolute;
  /* 絶対配置の基準はpadding box。枠線4px分を引いて、カード外周から40px上に出す */
  top: -44px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}
.appStep_num img {
  display: block;
  width: 80px;
  height: 80px;
}
.appStep_ttl {
  /* Figmaではタイトル枠が51px固定で、1行でも2行でも上下中央に置かれている */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 51px;
  margin: 0;
  color: var(--app-main);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
}
.appStep_sub {
  display: block;
  margin-top: 8px;
  color: var(--app-text);
  font-size: 14px;
  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 {
  max-width: 100%;
  height: auto;
}
.appStep_text {
  margin: 16px 0 0;
  font-size: 16px;
  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: 56px;
}
.appMovie_lead {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
  text-align: center;
}
.appMovie_body {
  width: 800px;
  margin: 0 auto;
  border-radius: 8px;
  background: #d9d9d9;
  overflow: hidden;
}
.appMovie_body iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ==================================================
  Question
================================================== */
/* 開閉・Q/Aバッジ・配色はすべて共通の .acd.type-qa（module_pc.css）を使用。
   このLPで上書きするのは区切り線の色（デザインは白）と、回答内テキストのスタイルのみ */
/* 開閉・Q/Aバッジ・配色は共通の .acd.type-qa（module_pc.css）を使用。
   共通側は rem 指定なので、このLPで使う値だけ px で上書きする */
.appFaq .acd,
.appFaq .acd_btn,
.appFaq .acd_box {
  border-top-color: #fff;
  border-bottom-color: #fff;
}
.appFaq .acd_btn {
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appFaq .faqIcon_text {
  font-size: 32px;
}
.appFaq .faqIcon_no {
  font-size: 24px;
}

.appQa_lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appQa_lead + .appQa_lead {
  margin-top: 16px;
}
.appQa_list {
  margin: 16px 0 0;
  counter-reset: qaNum;
}
.appQa_list:first-child {
  margin-top: 0;
}
/* 本文は黒。番号だけ青 */
.appQa_list > li {
  position: relative;
  padding-left: 25px;
  font-size: 16px;
  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: 24px 0 0;
}
.appQa_img:first-child {
  margin-top: 0;
}
.appQa_img img {
  max-width: 100%;
  height: auto;
}

/* ==================================================
  お問い合わせ
================================================== */
/* レイアウト・背景・区切り線・電話番号は共通の .inquiry / .telNumber を使用。
   このLPで異なるのはフォントサイズと要素間の余白のみ */
.appContact .inquiry_head {
  font-family: inherit;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appContact .inquiry_subTitle {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
}

.appContact .appContact_name {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appContact .telNumber span,
.appContact .telNumber a {
  font-size: 48px;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appContact .appContact_time {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .05em;
}
.appContact .inquiry_item > *:not(:first-child),
.appContact .inquiry .telNumber:not(:first-child) {
  margin-top: 8px;
}
.appContact .inquiry_item:not(:first-child) {
  border-left-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(40px); }
.js-anim[data-anim="left"]  { transform: translateX(-40px); }
.js-anim[data-anim="right"] { transform: translateX(40px); }
.js-anim[data-anim="fade"]  { transform: none; }

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

@media (prefers-reduced-motion: reduce) {
  .js-anim {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==================================================
  MVモーダル（アプリ紹介動画）
  共通の /banking/lp/css/modal_*.css は video 前提のため、
  YouTube埋め込み用の指定をこのLPだけに追加する
================================================== */
/* 共通の .modalMovie は縦長動画（450×650）前提の幅なので、
   16:9のYouTube埋め込みだと極端に小さくなる。
   ページ内の動画（Figma 800×450）と同じ大きさになるよう広げる */
.modal.modalMovie.modalAppMovie .modal_inner {
  width: 880px;
  max-width: calc(100vw - 120px);
}
/* 中に見出しを置かないので上下の余白は揃える */
.modal.modalMovie.modalAppMovie .modal_scroll {
  padding: 40px;
}
.modalMovie.modal .modal_inner iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

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

/* ==================================================
  下部固定の追従ボタン
  共通の .fixedBottom / .cnv-col-1 を使用し、このLPの見た目だけ上書き
================================================== */
.fixedBottom .cntSec {
  border-top: 1px solid #ccc;
  background-color: #fff;
}
.fixedBottom .innerWrap {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.fixedBottom .cntSec.cnv-col-1 .nmlBtn .nmlBtn_item:nth-child(1) {
  flex: 0 0 530px;
}
/* 白い下向き矢印を右から20pxに置く。色は指定色（青系の他ボタンと差をつける）。
   共通側は :hover で background-image を同じ白矢印に差し替えるだけなので、
   色を background-color に持たせている限りホバーでも見た目は変わらない */
.fixedBottom .nmlBtn_item .nmlBtn_itemLink {
  min-height: 60px;
  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 .nmlBtn_item .nmlBtn_itemLink:hover {
  opacity: .8;
}