/* =========================================================
  lp-main.css  （メインLP用CSS）

  このCSSは「メインLP」のデザインを管理します。

  ▼対象ページ
  ・かんたんログイン メインLP

  ▼注意
  ・LP全体のデザイン変更はこのCSSを編集
  ・特定LPだけ変更する場合は
    lp-auth-tel.css / lp-auth-mynumber.css を編集

========================================================= */

/* =========================
  Key Visual
========================= */
.sec-logo__appRow img{
  width: 168px;
  margin-bottom: 20px;
}
.sec-logo__appRow{
  display:block;
}
@media (min-width:1024px){
  .sec-logo__appRow{
    display:none;
  }
}
.sec-kv{
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 30px 16px 0;
  border-radius:var(--radius);
  z-index: 1;
}
/* 背景の丸 */
.sec-kv::before,
.sec-kv::after{
  content:"";
  position:absolute;
  border-radius: 999px;
  background: var(--beige);
  opacity: .9;
  pointer-events:none;
}
.sec-kv::before{
  width: 260px;
  height: 260px;
  top: -70px;
  left: -80px;
  opacity: .55;
}
.sec-kv::after{
  width: 240px;
  height: 240px;
  top: 40px;
  right: -90px;
  opacity: .65;
  z-index: -1;
}
.sec-kv__inner{
  position: relative;
}
.sec-kv__appRow{
border-radius: 10px;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 8px;
background: var(--soft-or);
width: 225px;
margin: 0 auto;
}
.sec-kv__appMark{
width: 26px;
height: 26px;
}
.sec-kv__appName{
font-weight: 900;
letter-spacing: .02em;
color:var(--text);
font-size: 15px;
}
/* App タイトル */
.sec-kv__titleRow{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 20px 0 36px;
}
.sec-kv__tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--red);
  color:#fff;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}
.sec-kv__title{
  margin:0;
  color:var(--red);
  font-weight: 1000;
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: 36px;
}
/* 左の丸 */
.sec-kv__mid{
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
position: relative;
margin: 17px 0 26px;
}
.hero-step-badge{
  position: absolute;
  left: 0;
  bottom: 0;
}
/* 右のスマホ */
.sec-kv__phone{
  margin:0;
  justify-self:end;
  transform: rotate(10deg);
}

/* =========================
  左の丸バッジ
========================= */
.hero-step-badge{
  position: relative;
  width: 160px;
  height: 160px;
  flex: 0 0 160px;
  border-radius: 50%;
  background: var(--soft-or);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hero-step-badge::after{
  content: "";
  position: absolute;
  right: -24px;
  bottom: -40px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--beige);
}

.hero-step-badge__text{
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.hero-step-badge__line1{
  position: relative;
  display: inline-block;
}

.hero-step-badge__line1::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--or);
}

/* =========================
  right SP画像
========================= */
.sec-kv__phone{
  margin: 0;
  flex: 0 1 360px;
  position: relative;
  z-index: 2;
}
.sec-kv__phone img{
display: block;
width: 64%;
height: auto;
transform: translateX(48px);
filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .18));
}

/* CTA */
.sec-kv__cta{
  display:flex;
  justify-content:center;
  margin-top: 14px;
}
.sec-kv__ctaBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5px 16px;
  border-radius: 12px;
  background: var(--text);
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 18px;
}

/* 3アイコン */
.sec-kv__icons{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.sec-kv__iconItem{
  display:grid;
  justify-items:center;
  gap: 8px;
}
.sec-kv__iconCircle{
width: 110px;
height: 110px;
border-radius: 999px;
background: var(--beige);
display: grid;
place-items: center;
}
.sec-kv__iconCircle img{
  width: 54px;
  height: auto;
  position: relative;
  top: 11px;
}
.sec-kv__iconText{
  margin:0;
  text-align:center;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.25;
}

/* 下部イラスト */
.sec-kv__bottom{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}
.sec-kv__people{
  width: min(100%, 360px);
  height:auto;
  display:block;
}

.points-head__badge{
  position:absolute;
  top: 44%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:100%;
}
.points-head{
  background:url("../img/points-bg.svg") center top / 100% auto no-repeat;
  text-align:center;
  position: relative;
  margin-left: -22px;
  margin-right: -22px;
  padding-top: 0;
  padding-bottom: 50%;
}

/* かんたんログイン */
.points-head__title{
  margin:0 0 4px;
  font-size:26px;
  font-weight:700;
  color:#2c4b63;
  letter-spacing:0.05em;
}
/* 3つのポイント */
.points-head__subtitle{
  margin:0;
  font-size:26px;
  font-weight:800;
  color:var(--text);
  letter-spacing:0.05em;
}
/* 数字だけオレンジ */
.points-head__subtitle span{
  color:#f39a2b;
  font-size:32px;
  font-weight:900;
  margin-right:2px;
}
/* Key Visual SP */
@media screen and (max-width: 767px){

}
/* =========================
  3 Points
========================= */
.points{
  padding: 28px 0 8px;
}
.points__inner{
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  gap: 22px;
}
.point__label{
  margin: 0 0 8px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--or);
}
.point__card{
  background: var(--beige);
  border-radius: 28px;
  padding: 30px 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  margin-bottom: 40px;
}
.point:last-child .point__card {
  margin-bottom: 0;
}
.point__hero{
  text-align: center;
  margin-bottom: 16px;
}
.point__image{
  display: block;
  margin: 0 auto;
  width: 220px;
  height: auto;
}
.point__icons{
  width: 100%;
  height: auto;
  display: block;
  justify-self: end;
}
.point__title{
  margin: 10px 0 10px;
  text-align: center;
  font-size: 22px;
  letter-spacing: .04em;
}
.point__text{
  margin: 0;
  line-height: 1.9;
}
.point__note{
  margin: 10px 0 0;
  line-height: 1.7;
}

/* =====================
  flow
===================== */
.login-step__title{
  margin: 0 0 10px;
  text-align: center;
  font-size: 28px;
  line-height: 1.4;
  color: var(--text);
}

.login-step__title span{
  color: var(--red);
}

.login-step__lead{
  margin: 0 0 40px;
  text-align: center;
}

.steps{
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.step{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

/* 左カラム */
.step__left{
  width: 78px;
  flex: 0 0 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step__label{
  margin: 0 0 10px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ye);
}

/* アイコン */
.step__icon{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--ye);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__icon img{
  display: block;
  width: 36px;
  height: auto;
}

/* 点線 */
.step:not(:last-child) .step__left::after{
  content: "";
  width: 2px;
  height: 72px;
  margin-top: 10px;
  background: repeating-linear-gradient(
    to bottom,
    #f5a623,
    #f5a623 5px,
    transparent 5px,
    transparent 10px
  );
}

/* 右カラム */
.step__right{
  flex: 1;
  min-width: 0;
}

/* タイトルはSTEPラベルと高さを揃える */
.step__title{
  margin: 0 0 10px;
  padding-top: 0;
  font-size: 16px;
}

/* 本文ボックス */
.step__content{
  background: var(--beige);
  border-radius: 10px;
  padding: 14px 16px;
}

.step__text{
  margin: 0;
  font-size: 14px;
}

/* flow SP */
@media screen and (max-width: 767px){
  .login-step__title{
    font-size: 24px;
  }
  .login-step__lead{
    margin-bottom: 32px;
    font-size: 14px;
  }
  .step{
    gap: 20px;
  }
  .step__left{
    width: 68px;
    flex: 0 0 68px;
  }
  .step__label{
    margin-bottom: 8px;
    font-size: 14px;
  }
  .step__icon img{
    width: 32px;
  }
  .step:not(:last-child) .step__left::after{
    height: 64px;
    margin-top: 10px;
  }
  .step__title{
    margin-bottom: 8px;
  }
  .step__content{
    padding: 12px 14px;
    border-radius: 8px;
  }
  .step__text{
    font-size: 14px;
  }
}
/* STEPカード共通 */
.step-card{
  border-radius: 26px;
  padding: 40px 20px 110px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}
/* =====================
  STEP1　登録に必要な情報
===================== */
.step1{
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.step1__card {
    background: #F6F8B9;
    border-radius: 26px;
    text-align: center;
}
/* 各STEPカード共通デザイン */
.step1__tag{
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
}
.step1__lead{
  margin: 14px 0 20px;
}
.step1__title{
  margin: 0 0 16px;
  font-size: 26px;
}
.step1__text{
  margin: 0 0 14px;
}
/* 箇条書き（チェック付き） */
.step1__list{
  list-style: none;
  padding: 0;
  margin: 0 auto 18px;
  display: inline-block;
  text-align: left;
}
.step1__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: url("../img/icon-check.svg") no-repeat center / contain;
}
.step1__image img{
  display: block;
  width: min(100%, 400px);
  height: auto;
  margin: 0 auto;
  margin-bottom: 80px;
}

/* ============================================
STEP2 ご本人確認の方法
============================================ */
.step2 {
  background: #fff;
  padding: 60px 16px;
}
.step2__tag{
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
.step2__card {
  background: #fff;
  border-radius: 28px;
  position: relative;;
  top: -140px;
  margin-top: -60px;
  padding: 80px 20px 0;
  z-index: 2;
}
.step2__label {
  text-align: center;
  margin-bottom: 10px;
}
.step2__title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.step2__lead {
  text-align: center;
  margin: 0 0 30px;
}
/*
.step2__recommend{
  position: relative;
  display: inline-block;
  margin-top: 14px;
  padding: 10px 16px;
  background: #2bb673;
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}*/
.step2__recommend::before{
  content: "";
  position: absolute;
  top: -8px;
  left: 30px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #2bb673;
}

/* テーブル*/

.step2__table {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 30px;
}

.step2__row {
  display: grid;
  grid-template-columns: 45% 55%;
}

.step2__cell {
  padding: 16px;
  font-size: 14px;
}

.step2__row--head .step2__cell {
  color: #fff;
  font-weight: bold;
}

.step2__cell--method {
  background: #4a93d8;
  color: #fff;
}

.step2__cell--item {
  background: #2bb673;
  color: #fff;
}

.step2__row:not(.step2__row--head) .step2__cell--method {
  background: #E4F4FF;
  color: #333;
}

.step2__row:not(.step2__row--head) .step2__cell--item {
  background: #E4F4FF;
  color: #333;
}
/* 認証番号 */
.step2__method {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step2__num {
  background: #4a93d8;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
/*アンカーボタン*/
.step2__nav {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
}
/* ========================================
電話認証セクション
======================================== */
.auth-phone{
  text-align:center;
  margin-top:60px;
}
.auth-recommend{
  display:inline-block;
  position:relative;
  background:#2bb673;
  color:#fff;
  padding:12px 24px;
  border-radius:30px;
  font-weight:700;
  margin-bottom:20px;
}
.auth-recommend::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid #2bb673;
}

.auth-card{
  background:#e9f3d3;
  border-radius:20px;
  padding:40px 20px;
  max-width:420px;
  margin:0 auto;
}
.auth-title{
  font-size:20px;
  margin-bottom:20px;
}
.auth-num{
  background:#4a93d8;
  color:#fff;
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
}
.auth-img{
  width:80%;
  max-width:260px;
  margin:20px auto;
  display:block;
}
.auth-caption{
  border:2px solid #ff6b6b;
  border-radius:10px;
  padding:10px;
  font-size:13px;
  margin:10px auto 20px;
  max-width:260px;
}
.auth-note{
  color:#e60012;
  font-size:12px;
  margin-top:20px;
}
/* =========================================================
  lp-main.css 追記用
  STEP1 / STEP2 / STEP2詳細 共通CSS
========================================================= */


/* =========================
  STEPカード共通
========================= */
.step-card{
  position: relative;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.step-card + .step-card{
  margin-top: 90px;
}


/* =========================
  STEPタグ共通
========================= */
.step-common__tag{
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  padding: 5px 24px;
  border-radius: 999px;
  background: var(--ye);
  color: #fff;
  letter-spacing: .06em;
  margin: 0;
  z-index: 2;
}

/* =========================
  STEP1 登録に必要な情報
========================= */
.step1__card{
  background: #f6f8b9;
  border-radius: 26px;
  text-align: center;
}
.step1__list{
  list-style: none;
  padding: 0;
  margin: 0 auto 20px;
  display: inline-block;
  text-align: left;
}

.step1__list li{
  position: relative;
  padding-left: 24px;
  margin: 10px 0;
  color: var(--text);
}

.step1__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: url("../img/icon-check.svg") no-repeat center / contain;
}

/* =========================
  STEP2 ご本人確認の方法
========================= */

.step2__label{
  margin: 0 0 10px;
  text-align: center;
  font-size: 18px;
}

.step2__title{
  margin: 0 0 16px;
  font-size: 26px;
  text-align: center;
  font-size: 24px;
}

/* =========================
  STEP2 テーブル
========================= */
.step2__table{
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 28px;
}

.step2__row{
  display: grid;
  grid-template-columns: 46% 54%;
}

.step2__cell{
  padding: 14px 12px;
  font-size: 16px;
  line-height: 1.8;
}

.step2__row--head .step2__cell{
  color: #fff;
  font-weight: 700;
}

.step2__row--head .step2__cell--method{
  background: var(--right-blu);
}

.step2__row--head .step2__cell--item{
  background: var(--green);
}

.step2__row:not(.step2__row--head) .step2__cell--method,
.step2__row:not(.step2__row--head) .step2__cell--item{
  background: #E4F4FF;
  color: var(--text);
  border-top: 1px solid var(--right-blu);
  font-weight: 600;
}

.step2__method{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.step2__num{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--right-blu);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.step2__recommend{
  position: relative;
  display: inline-block;
  margin-top: 10px;
  padding: 8px 28px;
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
}

.step2__recommend::before{
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #2fc879;
}


/* =========================
  STEP2 アンカーボタン
========================= */
.step2__nav{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.step2__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px 28px;
  min-height: 114px;
  background: var(--right-blu);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}
.step2__btn::after {
  content: "▼";
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 1;
  color: #fff;
}
.step2__btn:hover{
  opacity: 0.7;
}
.step2__btn-text{
  font-weight:700;
}
.step2__btn-num {
    margin-bottom: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    color: var(--right-blu);
    align-items: center;
    font-weight: 700;
    margin: 0px auto;
}

/* =========================
  STEP2 詳細エリア全体
========================= */
.step2-detail{
  max-width: 600px;
  margin: auto 0;
  padding: 0 20px;
}
/* =========================
  認証方法ブロック共通
========================= */
.auth-block{
  margin-top: 32px;
  scroll-margin-top: 100px;
  padding: 12px;
}
.auth-block:first-child{
  margin-top: 0;
}
/* =========================
  おすすめ吹き出し
========================= */

.auth-block__recommend{
display: table;
margin: 0 auto 20px;
position: relative;
padding: 22px 42px;
background: var(--green);
color: #fff;
border-radius: 999px;
font-size: 22px;
font-weight: 700;
line-height: 1.4;
bottom: 24px;
}

.auth-block__recommend::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #2fc879;
}

/*　認証方法カード */
.auth-block__card{
background: #F2FFE1;
border-radius: 18px;
padding: 40px 20px 28px;
}
/* 認証方法 見出し */
.auth-block__title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
.auth-block__num{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--right-blu);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.auth-text {
  font-size: 14px;
  margin: 30px 0 0;
}
/*認証方法 本文 */
.auth-block__text{
  margin: 0 0 18px;
}
.auth-block__subtext{
  margin: 14px 0 8px;
  color: #284A66;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  text-align: left;
}

/* 認証方法 画像 */
.auth-block__image{
  /* margin: 18px auto 12px; */
  text-align: center;
}

.auth-block__image img{
  display: block;
  width: min(100%, 400px);
  height: auto;
  margin: 0 auto;
  margin-bottom: 80px;
}
/* 赤枠説明 */
.auth-block__caption{
  position: relative;
  max-width: 260px;
  margin: 0 auto 16px;
  padding: 10px 12px;
  border: 2px solid #ff6b6b;
  border-radius: 14px;
  background: #fff;
  color: #284A66;
  font-size: 12px;
  line-height: 1.7;
  text-align: left;
}
.auth-block__caption::before{
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ff6b6b;
}
.auth-block__caption::after{
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
}
/* 赤ラベル */
.auth-block__alert{
  display: table;
  margin: 8px auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  line-height: 1.2;
}
/* =========================
  注意文
========================= */
.auth-block__note{
  margin: 0;
  color: var(--red);
  line-height: 1.8;
  text-align: left;
}
/* =========================
  暗証番号案内ブロック
========================= */
.pin-section{
  margin-top: 24px;
}

.pin-box{
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  margin-bottom: 24px;
}

.pin-box__title{
  margin: 0;
  padding: 18px 16px;
  background: #284A66;
  color: #fff;
  line-height: 1.4;
  text-align: center;
}

.pin-box__body{
  padding: 20px 16px 18px;
}
.pin-box__text{
  margin: 0;
}
.pin-box__alert-text{
  margin: 0;
  color: var();
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
}
.pin-box__alert {
    margin-top: 18px;
    padding: 10px 14px 14px;
    border-radius: var(--radius);
    background: #FAFD95;
    position: relative;
}
/* 下の補足文 */
.pin-note{
  margin-top: 8px;
}

.pin-note p{
  margin: 0 0 10px;
}

.pin-caption{
  margin: 28px 0 0;
  text-align: center;
}

/* SP用 微調整 */
@media screen and (max-width: 767px){
  .pin-box{
    border-radius: 18px;
  }
  .pin-box__title{
    padding: 16px 14px;
    font-size: 16px;
  }
  .pin-box__body{
    padding: 18px 14px 16px;
  }
  .pin-box__text{
    font-size: 15px;
    line-height: 1.85;
  }
  .pin-box__alert{
    margin-top: 16px;
    padding: 16px 12px 12px;
    border-radius: 18px;
  }
  .pin-box__alert-text{
    font-size: 15px;
    line-height: 1.8;
  }
  .pin-note p{
    font-size: 15px;
    line-height: 1.8;
  }
}
/* =========================
  SP微調整
========================= */
@media (max-width: 374px){
  .step1__card,
  .step2__card{
    padding-left: 16px;
    padding-right: 16px;
  }

  .step2__row{
    grid-template-columns: 44% 56%;
  }

  .step2__cell{
    padding: 12px 10px;
    font-size: 12px;
  }

  .step2__title{
    font-size: 22px;
  }

  .auth-block__title{
    font-size: 18px;
  }
}

/* =========================
  ロック時の案内アコーディオン
========================= */
.lock-help{
  margin-top: 24px;
}

.lock-help__item{
  border-radius: 28px;
}

.lock-help__toggle{
  width: 100%;
  border: 0;
  background: #a9a9a9;
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 56px 22px 22px;
  position: relative;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  margin-top: 20px;
}

.lock-help__title{
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

/* ＋アイコン */
.lock-help__icon{
  position: absolute;
  top: 50%;
  right: 18px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
}

.lock-help__icon::before,
.lock-help__icon::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 3px;
  background: #fff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}

.lock-help__icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いたら × ではなく − にする */
.lock-help__toggle[aria-expanded="true"] .lock-help__icon::after{
  transform: translate(-50%, -50%) rotate(0deg);
}

.lock-help__content{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
  display:none;
}

.lock-help__content.is-open{
  grid-template-rows: 1fr;
  display:block;
}

.lock-help__body{
  overflow: hidden;
  padding: 26px 22px;
  background: #fff;
  border-radius: var(--radius);
}

.lock-help__body p{
  margin: 0;
  color: #264d72;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
}

.lock-help__body p + p{
  margin-top: 28px;
}

/* SP */
@media screen and (max-width: 767px){
  .lock-help__toggle{
    padding: 18px 52px 18px 18px;
    border-radius: 16px;
  }

  .lock-help__title{
    font-size: 16px;
    line-height: 1.5;
  }

  .lock-help__icon{
    right: 16px;
    width: 22px;
    height: 22px;
  }

  .lock-help__icon::before,
  .lock-help__icon::after{
    width: 22px;
    height: 2.5px;
  }

  .lock-help__body{
    margin-top: 10px;
    padding: 20px 18px;
    border-radius: 16px;
  }

  .lock-help__body p{
    font-size: 15px;
    line-height: 1.9;
  }

  .lock-help__body p + p{
    margin-top: 24px;
  }
}
/* =========================
   運転免許証で確認
========================= */
.license-check{
  padding: 0 16px;
}

.license-check__card{
  background: #dfeacb;
  border-radius: 32px;
  padding: 48px 24px 32px;
}

.license-check__title{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #264d72;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.license-check__num{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #4ea1e0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.license-check__lead{
  margin: 24px 0 0;
  color: #264d72;
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}

.license-check__text{
  margin: 18px 0 0;
  color: #264d72;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.8;
}

.license-check__box{
  margin-top: 20px;
  padding: 28px 18px 22px;
  background: #f5f5f5;
  border-radius: 22px;
}

.license-check__box-text{
  margin: 0;
  color: #264d72;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
}

.license-check__alert{
  margin-top: 22px;
  padding: 14px 14px 16px;
  background: #e8eb82;
  border-radius: 20px;
}

.license-check__alert-label{
  display: table;
  margin: 0 auto 12px;
  padding: 4px 16px;
  border-radius: 999px;
  background: #f4001d;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.license-check__alert-text{
  margin: 0;
  color: #f4001d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
}

.license-check__note{
  margin: 28px 0 0;
  color: #264d72;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

/* SP調整 */
@media screen and (max-width: 767px){
  .license-check{
    padding: 0 12px;
  }

  .license-check__card{
    border-radius: 28px;
    padding: 36px 16px 24px;
  }

  .license-check__title{
    gap: 8px;
    font-size: 22px;
    line-height: 1.5;
  }

  .license-check__num{
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .license-check__lead{
    margin-top: 16px;
    font-size: 14px;
  }

  .license-check__text{
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.85;
  }

  .license-check__box{
    margin-top: 16px;
    padding: 22px 14px 16px;
    border-radius: 18px;
  }

  .license-check__box-text{
    font-size: 15px;
    line-height: 1.85;
  }

  .license-check__alert{
    margin-top: 18px;
    padding: 12px 12px 14px;
    border-radius: 16px;
  }

  .license-check__alert-text{
    font-size: 14px;
    line-height: 1.8;
  }

  .license-check__note{
    margin-top: 22px;
    font-size: 14px;
  }
}
.auth-license-card__box{
    background: #fff;
    padding: 10px 12px;
    border-radius: var(--radius);
}
/* =================================
 STEP3
================================= */
.step3__card {
    background: #f6f8b9;
    border-radius: 26px;
    text-align: center;
}
.step3__card p{
  text-align: left;
}
.text-underline-red{
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* =================================
 STEP4
================================= */
.step4__card {
    background: #fff;
    border-radius: 28px;
    position: relative;
    top: -140px;
    margin-top: -60px;
    padding: 80px 20px 0;
    z-index: 2;
}
.step4-text{
  text-align: center;
  margin: 20px 0 0;
}
/* =================================
 STEP4 下ビジュアル
================================= */
#step4{
  margin-bottom: 0;
}
#step4 .auth-block__image img{
  margin-bottom: 0;
}
.step4-visual{
  position: relative;
  background: #fff;
  text-align: center;
  overflow: hidden;
  /* padding: 0; */
  margin-top: 0;
  bottom: auto;
  margin-bottom: 0;
}
/* 下のカーブ画像 */
.step4-visual::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
  background: url(../img/curve-bg.png) center bottom / 100% 100% no-repeat;
  z-index: 0;
}
/* 丸装飾 */
.step4-visual__circle{
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}
.step4-visual__circle--1{
    width: 148px;
    height: 148px;
    background: var(--soft-or);
    left: 11px;
    top: 57px;
}
.step4-visual__circle--2{
width: 182px;
height: 182px;
background: var(--beige);
right: -14px;
top: 0px;
}
.step4-visual__circle--3{
width: 68px;
height: 68px;
background: var(--soft-ye);
left: 118px;
top: 167px;
}
.step4-visual__circle--4{
width: 90px;
height: 90px;
background: var(--soft-or);
right: 94px;
top: 185px;
}
/* イラスト */
.step4-visual__inner{
width: 210px;
height: 300px;
display: block;
margin: 0 auto;
position: relative;
z-index: 1;
bottom: 11px;
/* margin-top: -18px; */
}
.step4-visual__inner img{
  width: 210px;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* ============================================
  組合員コード確認ガイド
============================================ */
.membercard-guide{
background: var(--soft-ye) url(../img/curve-membercode-bg.png) center top / 100% auto no-repeat;
padding: 44px 16px 40px;
position: relative;
margin-top: 0;
}
.membercard-guide__inner{
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
.membercard-guide__title{
  margin: 0 0 14px;
  letter-spacing: .02em;
}

.membercard-guide__lead{
  margin: 20px 0 0;
}
.membercard-guide__image{
  margin: 0 auto 12px;
}

.membercard-guide__image img{
  display: block;
  width: min(100%, 400px);
  height: auto;
  margin: 0 auto;
  margin-bottom: 40px;
}

.membercard-guide__footer{
  margin-top: 20px;
}

.membercard-guide__footer img{
  width: 120px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =========================
  SP微調整
========================= */
@media (max-width: 767px){
  .membercard-guide{
    padding: 28px 12px 24px;
  }

  .membercard-guide__title{
    font-size: 20px;
  }
  .step4-visual__circle--1{
width: 148px;
height: 148px;
background: var(--soft-or);
left: -7%;
top: 11%;
}
.step4-visual__circle--2{
width: 182px;
height: 182px;
background: var(--beige);
right: -52px;
top: 0px;
}
.step4-visual__circle--3{
width: 68px;
height: 68px;
background: var(--soft-ye);
left: 16%;
top: 42%;
}
.step4-visual__circle--4{
width: 90px;
height: 90px;
background: var(--soft-or);
right: 34px;
top: 175px;
}
.sec-kv__titleRow {
    flex-direction: column;
}
}