@charset "utf-8";

/*------ base ------*/
html,
body {
  margin: 0;
  padding: 0;
}
body {
  color: #333;
  font-family:
    'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', meiryo,
    'MS PGothic', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.025em;
  background-color: #fff;
}

/*
 * アプリ内 WebView（375px 前後）が主対象。
 * SP ブラウザは横幅いっぱいに追従し、PC など 600px を超える幅では
 * 中央に寄せて SP デザインの比率を保つ。
 */
.lp {
  overflow: hidden;
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
}

/* コンテンツ幅を超える環境だけ地色を敷き、WebView 側の表示には影響させない */
@media (min-width: 601px) {
  body {
    background-color: #ebebeb;
  }
}
h1,
h2,
h3,
p,
ul,
li,
em,
button,
img,
div,
span,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  line-height: inherit;
  border: none;
}
ul {
  list-style: none;
}
img {
  vertical-align: top;
}
a {
  color: #5a78c8;
  text-decoration: none;
}
button {
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  background: none;
}

/*------ hero ------*/

/* 地色とイラストのはみ出しは全幅。中身は .heroInner が持つ */
.hero {
  overflow: hidden;
  position: relative;
  text-align: center;
  background: linear-gradient(#ffe6cc, #ff9123);
}

/*
 * Figma は 375px 固定のデザイン。幅が広がっても中身は原寸のまま中央に置く。
 * 以前はイラストだけ width:100% で伸ばしていたため、600px 幅でイラストが
 * 肥大しバッジとの比率が崩れていた。下 24px は .intro のシートに隠れる。
 */
.heroInner {
  position: relative;
  z-index: 1;
  width: min(375px, 100%);
  margin: 0 auto;
  padding: 21px 0 34px;
}
.heroInner > * {
  position: relative;
  z-index: 1;
}
.hero::before {
  content: '';
  position: absolute;
  top: 321px;
  left: 50%;
  z-index: 0;
  width: 788px;
  height: 559px;
  transform: translateX(-50%);
  background: url('/contents/lp/scheduled_transfer/img/img_hero_ellipse.svg')
    no-repeat center / 100% 100%;
}
.heroSparkleLeft,
.heroSparkleRight {
  position: absolute;
  top: 44px;
  z-index: 1;
  width: 38px;
}
.heroSparkleLeft {
  left: 22px;
}

/* Figma は左と同じ素材を左右反転して置いている */
.heroSparkleRight {
  right: 21px;
  transform: scaleX(-1);
}
.heroTitle {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  padding: 16px 20px 12px;
  gap: 14px;
  border-radius: 4px;
  background-color: #fff;
}
.heroTitle img {
  width: 192.52px;
  height: 38px;
}
.heroTitleText {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: 0;
}

/*
 * Figma のレイヤー順（楕円 → イラスト → バッジ → キラキラ → バナー → ロゴ）に合わせ、
 * イラストだけ一段下げる。上げるとイラストがロゴの白背景に被る。
 * アートワークは 452x250 と hero より広い（上はロゴの白ボックス裏に潜り込む）。
 * Figma の座標 x=-43 / y=110 に合わせて食み出させる。451 / 375、-43 / 375、
 * (110 - 141) / 375。
 */
.heroIllust {
  z-index: 0;
  width: 120.533%;
  margin: -8.267% 0 0 -11.467%;
}
.heroIllust img {
  width: 100%;
  height: auto;
}
.heroPoints {
  display: flex;
  justify-content: center;
  margin-top: -11.733%;
  gap: 12px;
}
.heroPoint {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 90px;
}

/* 吹き出しの尻尾を白丸の上に重ねる（白丸は負のマージンで後から描画されるため） */
.heroPointLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 90px;
  height: 37.784px;
  padding-bottom: 5.784px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 13px;
  letter-spacing: 0;
  background: url('/contents/lp/scheduled_transfer/img/img_balloon_small.svg')
    no-repeat center / 100% 100%;
}
.heroPointIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin-top: -12px;
  border-radius: 50%;
  background-color: #fff;
}
.heroPointIcon img {
  width: 50px;
  height: 50px;
}

/* 355 / 375 */
.heroBanner {
  width: 94.667%;
  margin: 14.22px auto 0;
  padding: 8px 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  background-color: #eb5505;
}

/*------ 利用シーン ------*/

/*
 * ヒーロー以降のコンテンツは白いシートとしてヒーローに 24px 重なり、
 * 上端の角丸からヒーロー下端のオレンジを覗かせる（Figma: Frame 1321317958）。
 * 先頭セクションがシートの上端を担う。重ねる 24px は .hero 側で確保済み。
 */
.intro {
  position: relative;
  margin-top: -24px;
  padding: 24px 16px;
  border-radius: 24px 24px 0 0;
  background-color: #fff;
}
.introLead em {
  font-weight: 600;
  background: linear-gradient(transparent 33%, rgba(255, 211, 167, 0.4) 33%);
}

/* 375px 設計（幅 100px・間隔 16px）を割合で表現し、狭い端末でもはみ出さない */
.sceneList {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  gap: 4.66%;
}
.sceneItem {
  width: 29.15%;
  text-align: center;
}
.sceneLabel {
  display: inline-block;
  position: relative;
  margin-bottom: 4px;
  color: #eb5505;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: 0;
}
.sceneLabel::before,
.sceneLabel::after {
  content: '';
  position: absolute;
  bottom: 1px;
  width: 1px;
  height: 15px;
  transform-origin: bottom;
  background-color: #eb5505;
}
.sceneLabel::before {
  left: -10px;
  transform: rotate(-23deg);
}
.sceneLabel::after {
  right: -10px;
  transform: rotate(23deg);
}
.sceneItem img {
  width: 100%;
  height: auto;
}

/* 幅 375px 未満はラベルが隣の項目に重なるため、375px 基準の比率で縮小する */
@media (max-width: 374px) {
  .sceneLabel {
    font-size: 3.73vw;
  }
  .sceneLabel::before,
  .sceneLabel::after {
    height: 4vw;
  }
  .sceneLabel::before {
    left: -2.67vw;
  }
  .sceneLabel::after {
    right: -2.67vw;
  }
}

/*------ セクション共通 ------*/
.section {
  padding: 32px 16px 0;
}

/* 末尾セクションだけページ下端の余白を持つ（並び替えても追従させる） */
.section:last-child {
  padding-bottom: 24px;
}
.section::before {
  content: '';
  display: block;
  width: 275px;
  height: 6px;
  margin: 0 auto 29px;
  background: url('/contents/lp/scheduled_transfer/img/img_divider.svg')
    no-repeat center / 100% 100%;
}
.sectionTitle {
  height: 38px;
  margin-bottom: 16px;
  color: #0e0d6a;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0;
  background: url('/contents/lp/scheduled_transfer/img/img_heading_line.svg')
    no-repeat 50% 8.72px / 133px 29.183px;
}
.textLink {
  margin-top: 8px;
  font-size: 12px;
  line-height: 13px;
  text-align: right;
  letter-spacing: 0;
}
.textLink a {
  text-decoration: underline;
}

/*------ こんなに便利！ ------*/
.benefitList {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.benefitItem {
  overflow: hidden;
  padding: 16px;
  border-radius: 12px;
  background-color: #fbfbfb;
}
.benefitTitle {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0;
}
.benefitBody {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.benefitText {
  flex: 1 0 0;
  min-width: 0;
}
.benefitImage {
  flex-shrink: 0;
  width: 124px;
  height: auto;
}

/* 指差しイラストがモック下端からはみ出す分をレイアウト高さから除く */
.benefitImageBleed {
  margin-bottom: -9px;
}

/*------ ご利用方法 ------*/
.sectionHowto {
  padding: 32px 0 0;
}
.tabList {
  display: flex;
}
.tab {
  flex: 1 0 0;
  min-width: 0;
  padding: 12px 16px;
  color: #707070;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  border-radius: 8px 8px 0 0;
  background-color: #f1f2f3;
}
.tabNow.isActive {
  color: #752424;
  font-weight: 600;
  background-color: #ffd3a7;
}
.tabScheduled.isActive {
  color: #303285;
  font-weight: 600;
  background-color: #bdf;
}
.tabPanel {
  padding: 24px 16px 32px;
}
.tabPanelNow {
  background-color: #fff4e9;
}
.tabPanelScheduled {
  background-color: #eef6ff;
}
.howtoIllust {
  overflow: hidden;
  margin-top: 16px;
  border-radius: 8px;
}
.howtoIllust img {
  width: 100%;
  height: auto;
}
.howtoSubTitle {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0;
}
.stepCarousel {
  margin-top: 16px;
}

/*
 * 全幅スクロール。左右パディングでカード 1 枚ぶんの中央領域を作り、
 * カード幅 = このコンテンツボックス幅（.stepItem の flex-basis 100%）とすることで
 * 表示中のカードが常に中央に来て、横幅にも追従する。
 * 20.41% = (375 - 235) / 2 ÷ 343（.stepCarousel の内容幅が百分率の基準）
 */
.stepList {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 20.41% 8px;
  gap: 16px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.stepList::-webkit-scrollbar {
  display: none;
}
.stepItem {
  display: flex;
  overflow: hidden;
  align-items: center;
  flex: 0 0 100%;
  flex-direction: column;
  padding: 8px 16px 0;
  scroll-snap-align: center;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15);
}
.stepHead {
  min-height: 106px;
  text-align: center;
}
.stepNumber {
  color: #eb5505;
  font-family:
    avenir, 'avenir next', 'helvetica neue', helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 24px;
  letter-spacing: 0;
}
.stepText {
  margin-top: 8px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}
.stepNote {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  gap: 2px;
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
  letter-spacing: 0;
}
.stepNoteMark {
  flex-shrink: 0;
}

/* 幅を確定させて img の % 指定の基準にし、その中で中央寄せする */
.stepImage {
  width: 100%;
  margin-top: 24px;
  text-align: center;
}

/* 145 / (235 - 16 * 2)。カード幅の変化に合わせて端末モックも拡縮する */
.stepImage img {
  width: 71.43%;
  height: auto;
}
.stepDots {
  display: flex;
  justify-content: center;
  padding: 12px 0;
  gap: 8px;
}
.stepDot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background-color: #d9d9d9;
}
.stepDot.isActive {
  background-color: #eb5505;
}

/*------ 本人確認の案内 ------*/
.notice {
  margin: 32px 16px 0;
  padding: 12px 16px 16px;
  border-radius: 12px;
  background-color: #fbfbfb;
}
.noticeTitle {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.noticeTitle img {
  display: block;
  width: 27px;
  height: 30px;
  margin: 0 auto 8px;
}
.noticeText {
  margin-top: 4px;
}

/*------ 送金できる残高の種類 ------*/
.balanceImage {
  margin-top: 16px;
}
.balanceImage img {
  width: 100%;
  height: auto;
}

/*------ 注意事項 ------*/

/* 「※」をぶら下げインデントにする（本文の折り返しを ※ の右端に揃える） */
.noteList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.noteItem {
  display: flex;
  gap: 4px;
}
.noteMark {
  flex-shrink: 0;
}

/*------ よくある質問 ------*/
.faqItem {
  border-bottom: 1px solid #ebebeb;
}
.faqQuestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0 12px 12px;
  gap: 12px;
  text-align: left;
}
.faqQuestion::after {
  content: '';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
  background: url('/contents/lp/scheduled_transfer/img/icon_arrow_under.svg')
    no-repeat center / 24px 24px;
}
.faqQuestion[aria-expanded='true']::after {
  transform: rotate(180deg);
}
.faqAnswer {
  overflow: hidden;
  height: 0;
  transition: height 0.2s ease;
}

/* 開閉アニメーションは .faqAnswer の高さで行うため、余白と地色は内側に持たせる */
.faqAnswerBody {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  padding: 12px;
  gap: 4px;
  color: #2b2b2b;
  border-radius: 8px;
  background-color: #fbfbfb;
}