/* ======================================== ■全般 ======================================== */
:root {
  --bg: #f2f4f7;
  --text: #111111;
  --muted: #5f6b7a;
  --brand: #0099ff;
  --max: 750px;
  --radius: 18px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #cccccc;
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden; /* 横スクロール抑止 */
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
  background: #ffffff;
  display: flow-root;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  margin-top: -1px;
  margin-bottom: -1px;
}

/* >>>>>>>>>>>>>>>>>>> [全般MQ] screen and (max-width: 767px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 767px) {
  .wrap {
    padding: 0;
  }
}


/* ======================================== ■ヘッダー ======================================== */



/* ======================================== ■ヒーローセクション ======================================== */
#hero img {
  display: block;
  width: 100%;
  height: auto;
}

#hero .wrap {
  padding: 0;
  position: relative;
  background: #ffffff;
  border-top: 0;
  border-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

#problem .wrap {
  width: 100%;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

/* ==== CTA (ベース: 中央寄せ・ラージ画面含む) ==== */
.hero-cta-overlap {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: -70px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 320px;
  min-height: 116px;
  width: calc(var(--max) * 0.7);
  max-width: calc(var(--max) * 0.7);
  padding: 26px 38px;
  border-radius: 9999px;
  overflow: hidden;
  background: linear-gradient(#ff8cc8, #ff5cad 60%, #ff3d97);
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: 0 10px 24px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.12);
  cursor: pointer;
  z-index: 10;
}

.hero-cta-overlap::before {
  content: "";
  position: absolute;
  top: 12px;          /* ボタンを下げ＆高くした分だけ下げる */
  left: 18px;
  right: 18px;
  height: 38%;        /* ほんの少しだけ高くして自然に */
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.05));
  pointer-events: none;
}

.hero-cta-overlap:hover {
  background: linear-gradient(#ff9ad1, #ff6ab8 60%, #ff4aa3);
  box-shadow: 0 12px 28px rgba(0,0,0,.20), 0 6px 14px rgba(0,0,0,.14);
}

.hero-cta-overlap:hover::before {
  background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.08));
}

/* ベースは中央寄せ前提の active だけに統一 */
.hero-cta-overlap:active {
  transform: translate(-50%, 1px);
  background: linear-gradient(#ff78c1, #ff4aa3 60%, #f52a8d);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.12);
}

.hero-cta-overlap__main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(18px, 5.8vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.hero-cta-overlap__main::before {
  content: "";
  display: inline-block;
  width: clamp(28px, 8vw, 50px);
  height: clamp(28px, 8vw, 50px);
  background-image: url("./images/touch.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: relative;
  top: -15px;
}


.hero-cta-overlap__sub {
  order: -1;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  top: 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  opacity: .95;
}

.hero-cta-overlap__sub::before {
  content: none !important;
  display: none !important;
  width: 0;
  height: 0;
  background-image: none !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* >>>>>>>>>>>>>>>>>>> [ヒーローMQ] screen and (max-width: 767px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 767px) {
  .hero-cta-overlap {
    left: 8px;
    right: 8px;
    bottom: -56px;
    min-width: 260px;
    min-height: 106px;
    width: auto;
    max-width: none;
    padding: 20px 28px;
    box-shadow: 0 8px 20px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.12);
    transform: none;                    /* 中央寄せの transform を打ち消し */
  }

  .hero-cta-overlap:active {
    transform: translateY(1px);         /* モバイルでは通常の押し込み */
  }

  .hero-cta-overlap__main {
    font-size: clamp(18px, 6.2vw, 28px);
    white-space: nowrap;
  }

  .hero-cta-overlap__sub {
    font-size: 13px;
  }
}

/* ======================================== ■問題セクション（problem） ======================================== */
#problem {
  display: none;
}

/* ======================================== ■1秒診断セクション ======================================== */

#instant-check {
  scroll-margin-top: 120px;
  /* 背景指定は削除：基本背景（中央=白／サイド=灰）に委譲 */
}

#instant-check .wrap {
  padding: 0;
  background: #ffffff;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center 100px;
  background-size: cover;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  margin-top: -1px;
  margin-bottom: -1px;
}

.instant-check__apply {
  display: inline-block;
  min-width: 280px;
  height: 58px;
  padding: 0 56px 0 32px;
  font-size: 18px;
  font-weight: 800;
  line-height: 58px;
  text-align: center;
  color: #fff;
  background-color: #ff69b4;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  text-decoration: none;
}

.instant-check__apply::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}

.instant-check__apply::before {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(-45deg);
}

.instant-check__apply:link,
.instant-check__apply:visited {
  color: #fff;
  text-decoration: none;
}

.instant-check__apply:hover {
  text-decoration: none;
}

.instant-check__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
  align-items: end;
}

.instant-check__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.instant-check__label {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #183a4a;
}

.instant-check__select {
  position: relative;
}

.instant-check__select select {
  width: 100%;
  height: 48px;
  font-size: 16px;
  padding: 0 44px 0 14px;
  border: 1px solid #cfd8dc;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13,59,69,.06) inset;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.instant-check__select-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #32434b;
  pointer-events: none;
  opacity: .9;
}

.instant-check__unit-input {
  position: relative;
}

.instant-check__unit-input input[type="number"] {
  width: 100%;
  height: 48px;
  font-size: 16px;
  padding: 0 64px 0 14px;
  border: 1px solid #cfd8dc;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13,59,69,.06) inset;
  box-sizing: border-box;
}

.instant-check__unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 700;
  color: #183a4a;
  opacity: .9;
}

.instant-check__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.instant-check__submit {
  display: inline-block;
  min-width: 280px;
  height: 58px;
  padding: 0 56px 0 32px;
  font-size: 18px;
  font-weight: 800;
  line-height: 58px;
  text-align: center;
  color: #fff;
  background: linear-gradient(#8a8f95, #7e8388);
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

.instant-check__submit::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}

.instant-check__submit::before {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(-45deg);
}

.instant-check__submit.is-ready {
  background-color: #0099ff !important;
  background-image: none !important;
}

.instant-check__container {
  max-width: 750px;
  margin: 0 auto;
  padding: 94px 16px 40px 16px;
  box-sizing: border-box;
  width: 100%;
  background: #ffec00;                                       /* 追加 */
  background-image: url("./images/background3.png");         /* 追加 */
  background-repeat: no-repeat;                              /* 追加 */
  background-position: center 100px;                         /* 追加（PC/タブレットの既定位置） */
  background-size: cover;                                    /* 追加 */
}

.instant-check__logos {
  margin: 0 0 20px 0;
  padding: 12px 0 32px 0;
  position: relative;
  z-index: 10;
  overflow: visible;
  border-radius: 0;
  background-color: transparent;
}


.instant-check__logos-row {
  display: grid;
  gap: 12px;                 /* 余白はすべて gap で作る（上下左右共通） */
  justify-content: center;   /* 行全体を中央寄せ */
  justify-items: center;
  align-items: center;
}

.instant-check__logos-row.is-top {
  grid-template-columns: repeat(7, 64px);  /* セル幅＝画像幅に固定 */
  margin-bottom: 12px;                      /* 行間も gap と同値 */
}

.instant-check__logos-row.is-bottom {
  grid-template-columns: repeat(7, 64px);   /* セル幅＝画像幅に固定 */
}

.instant-check__logo {
  width: 100%;
  max-width: 64px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;      /* 追加：正方セル内でトリミング */
  border-radius: 12px;    /* 追加：角丸 */
  /* 角丸＆トリミングは共通定義（object-fit: cover; border-radius: 12px;）が有効 */
}

.instant-check__box {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0,153,255,.06), 0 6px 18px rgba(0,153,255,.10), 0 2px 6px rgba(0,153,255,0.06);
  padding: 28px 22px;
  position: relative;
  margin-top: 0;
}

.instant-check__box-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: -28px -22px 22px;
  padding: 22px 22px;
  background: linear-gradient(90deg, #4ab6ff, #0099ff);
  color: #ffffff;
  font-size: clamp(18px, 6.5vw, 36px);
  font-weight: 800;
  line-height: 1.2;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  white-space: nowrap;
}

.instant-check__box-title-icon {
  width: 48px;
  height: 48px;
  display: block;
  flex: 0 0 48px;
}

.instant-check__box::before,
.instant-check__box::after {
  content: none;
}

.instant-check__panel {
  background: transparent;
  border-radius: 10px;
  padding: 22px;
  overflow: hidden;
}

.ic-modal[hidden] {
  display: none !important;
}

/* ←この下に追加 */
#instant-check [hidden] {
  display: none !important;
}

#instant-check .ic-modal__message span {
  display: block !important;
}

.ic-modal__actions[hidden] {
  display: none !important;
}


.ic-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.ic-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.ic-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

.ic-modal__dialog {
  position: relative;
  max-width: 880px;
  margin: 6vh auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 36px 28px 28px;
}

.ic-modal__close-icon {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 72px;
  height: 72px;
  line-height: 72px;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #5f6b7a;
  cursor: pointer;
}

.ic-modal__close-icon:hover {
  opacity: .8;
}

.ic-modal__title {
  font-size: 36px;
  font-weight: 800;
  color: #ff69b4;
  text-align: center;
  margin: 0 0 12px;
  border-bottom: 2px solid rgba(15,81,50,.2);
  padding-bottom: 8px;
}

.ic-modal__status {
  font-size: 30px;
  color: #ff69b4;
  text-align: center;
  margin: 8px 0 8px;
}

.ic-modal__metrics {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: #183a4a;
  margin: 6px 0 16px;
  flex-wrap: wrap;
}

.ic-modal__rate,
.ic-modal__yen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0;
}

.ic-modal__rate::before,
.ic-modal__yen::before {
  content: "換金率";
  font-size: 18px;
  font-weight: 700;
  color: #183a4a;
  opacity: .9;
}

.ic-modal__yen::before {
  content: "換金額";
}

.ic-modal__rate strong,
.ic-modal__yen strong {
  display: inline-block;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  padding: 8px 14px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.ic-modal__note {
  font-size: 14px;
  line-height: 1.6;
  color: #183a4a;
  text-align: center;
  margin: 6px 0 18px;
}

.ic-modal__message {
  font-size: 16px;
  line-height: 1.8;
  color: #183a4a;
  text-align: center;
  margin: 10px 0 18px;
  display: block;
  width: 100%;
}

.ic-modal__message span {
  display: block;
}

/* ←ここに追加 */
.ic-modal__message[hidden] {
  display: none !important;
}

.ic-modal__actions {
  display: flex;
  justify-content: center;
  margin: 8px 0 10px;
}

/* >>>>>>>>>>>>>>>>>>> [1秒診断MQ] screen and (max-width: 1023px) and (min-width: 768px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .instant-check__form {
    grid-template-columns: 1fr;
  }

  .instant-check__field {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .instant-check__label {
    text-align: left;
    flex: 0 0 260px;
    white-space: nowrap;
    font-size: 18px;
  }

  .instant-check__select,
  .instant-check__unit-input {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }

  .instant-check__select select,
  .instant-check__unit-input input[type="number"] {
    height: 48px;
    font-size: 16px;
  }

  #instant-check {
    scroll-margin-top: 96px;
  }

.instant-check__logos {
  padding: 12px 0 32px 0;
  margin: 0 0 20px 0;
}

  .ic-modal__dialog {
    margin: 8vh 24px;
  }


}

/* >>>>>>>>>>>>>>>>>>> [1秒診断MQ] screen and (max-width: 767px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 767px) {
  .instant-check__form {
    grid-template-columns: 1fr;
  }

  .instant-check__field {
    display: grid;
    grid-template-columns: 30% 1fr;
    column-gap: 10px;
    align-items: center;
  }

  .instant-check__label {
    text-align: left;
    white-space: nowrap;
    font-size: clamp(12px, 3.6vw, 16px);
  }

  .instant-check__select,
  .instant-check__unit-input {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .instant-check__select select,
  .instant-check__unit-input input[type="number"] {
    font-size: clamp(12px, 3.2vw, 15px);
    height: clamp(46px, 9.5vw, 56px);
    line-height: clamp(46px, 9.5vw, 56px);
    max-width: 100%;
  }

  .instant-check__unit {
    font-size: clamp(11px, 3vw, 14px);
  }


  #instant-check {
    scroll-margin-top: 96px;
  }

  .instant-check__container {
    padding: 94px 8px 40px 8px;
    background-position: center 145px; /* ← ここに確定値（例：90px など） */
  }

.instant-check__logos {
  padding: 12px 0 28px 0;
  margin: 0 0 20px 0;
}

  .ic-modal__dialog {
    margin: 8vh 12px;
    padding: 28px 18px 18px;
  }

  .ic-modal__title {
    font-size: 32px;
  }

  .ic-modal__status {
    font-size: 26px;
  }

  .ic-modal__rate strong,
  .ic-modal__yen strong {
    font-size: 34px;
    padding: 6px 10px;
  }

  .ic-modal__rate::before,
  .ic-modal__yen::before {
    font-size: 20px;
  }

  .ic-modal__metrics {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

.instant-check__logos-row {
  --logo-gap: 10px;          /* gap を変数化 */
  gap: var(--logo-gap);      /* 上下左右すべて同値 */
  justify-content: center;   /* 行全体を中央寄せ */
}

.instant-check__logos-row.is-top {
  grid-template-columns: repeat(
    7,
    min(64px, calc((100% - (6 * var(--logo-gap))) / 7))
  );
  margin-bottom: var(--logo-gap);
}

.instant-check__logos-row.is-bottom {
  grid-template-columns: repeat(
    7,
    min(64px, calc((100% - (6 * var(--logo-gap))) / 7))
  );
}

.instant-check__logo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: none;        /* 追加：上限を解除しセル幅にフィット */
  object-fit: cover;      /* 追加：トリミングを明示 */
  border-radius: 12px;    /* 追加：角丸（SPでも確実に適用） */
}
}


/* ======================================== ■問題提起セクション ======================================== */


.section-problem__inner {
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.section-problem__image-main img,
.section-problem__image-sub img {
  display: block;
  width: 100%;
  height: auto;
}

.section-problem__image-sub {
  margin-top: 24px;
}


/* ======================================== ■説明セクション ======================================== */

.explanation {
  /* セクション全体の余白は、サイトの他セクションに合わせて必要に応じて調整してください */
  padding: 0;
  margin: 0;
  background-color: transparent;
  color: #0b3a66;
}

.explanation__head-image {
  display: block;
  width: 110%;
  height: auto;
  margin-top: 112px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  max-width: none;     /* ← 外部の max-width:100% を無効化 */
}

.explanation .explanation__head-image {
  width: 110%;         /* ← 詳細度を上げて width を再宣言（外部の .xxx img { width } を上書き） */
}

.explanation__inner {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  box-sizing: border-box;
  background: linear-gradient(to right, #4ab6ff 0%, #0099ff 100%);
  padding: calc(40px + 1cm) 0 40px;
}

.explanation__title {
  font-size: 42px;
  line-height: 1.6;
  font-weight: 700;
  margin: 0 0 16px 0;
  text-align: center;
  color: #ffffff;
  text-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}

.explanation__title .explanation__title-line {
  display: block;
}

.explanation__title-accent {
  color: #ffec00;
  font-size: 52px;
  background-image: none;
  background-repeat: initial;
  background-size: auto;
  text-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}

.explanation__card {
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 0 40px 32px;  /* ← 下方向の内側余白を 32px 追加 */
  position: relative;    /* ← 追加：バッジを絶対配置するための基準 */
}

.explanation__head-badge {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-block;
  padding: 16px 14px;
  background: linear-gradient(to right, #4ab6ff 0%, #0099ff 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  border-radius: 9999px;
  white-space: nowrap;
  pointer-events: none;
}


.explanation__after {
  margin-top: 50px;
  margin-bottom: 50px;  /* ← ここで下のスペースを追加 */
}

.explanation .explanation__after p {
  font-size: 28px;
  line-height: 1.6;
  font-weight: 700;
  margin: 8px 0;
  text-align: center;
  color: #ffffff;
  text-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}

.explanation .explanation__after .explanation__accent {
  font-size: 46px;
  color: #ffec00;
  background-image: none;
  background-repeat: initial;
  background-size: auto;
  text-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}

.explanation__accent {
  color: #0099ff;
}

.explanation__noproblem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;                   /* ← 画像と文字の間の余白をゼロに */
  margin: 24px auto 0;
  width: fit-content;
  max-width: 100%;
  border: none;             /* ← 変更：枠線を消す */
  background-color: transparent; /* ← 変更：背景色を消す */
}


.explanation__noproblem-image {
  display: block;
  width: 200px;
  height: auto;
  margin: 0;
  flex: 0 0 auto;
}

.explanation__noproblem-text {
  flex: 0 0 auto;
  margin-left: -8px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;   /* ← 左寄せに戻す */
}

.explanation .explanation__noproblem-lead {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
  margin: 0 0 8px 0;
  text-align: left;   /* ← 左寄せに戻す */
  width: auto;
  transform: none;
}


.explanation .explanation__noproblem-main {
  font-size: 68px;  /* 72px → 68px にさらに縮小 */
  line-height: 1.2;
  font-weight: 900;
  margin: 0;
  text-align: left;
  color: #ffec00;
  position: relative;
  z-index: 0;
  display: inline-block;
  text-shadow:
    -1px  0   0 #0b3a66,
     1px  0   0 #0b3a66,
     0   -1px 0 #0b3a66,
     0    1px 0 #0b3a66,
    -1px -1px 0 #0b3a66,
     1px -1px 0 #0b3a66,
    -1px  1px 0 #0b3a66,
     1px  1px 0 #0b3a66,
     4px  4px 0 #0b3a66;
}


.explanation .explanation__noproblem-main::before {
  content: none;   /* ← 擬似要素を使った重ね文字を無効化 */
}


/* 後払いアプリ案内テキスト（.explanation__noproblem-main::before の直後に追加） */
.explanation__apps-intro {
  text-align: center;
  margin: 16px auto 24px;
  width: 100%;
  max-width: 1000px;
  box-sizing: border-box;
}

.apps-intro__title {
  font-weight: 800;
  font-size: clamp(20px, 5vw, 28px); /* 先頭行を大きく */
  line-height: 1.5;
  margin: 0 0 8px;
}

.apps-intro__accent {
  color: #0099ff; /* 「後払いアプリ」を #0099ff */
}

.apps-intro__lead {
  font-size: 12px;     /* 注意文(.logo-note-small)と同じ12pxに統一 */
  line-height: 1.8;
  margin: 0;
}

.explanation__payments {
  margin: 24px auto 0;
  max-width: 750px;                  /* ← 中央750pxに統一 */
  width: 100%;
  box-sizing: border-box;
}

.explanation__payments .logo-box {
  border: 2px solid #0099ff;
  background-color: transparent;
  border-radius: 20px;
  padding: 28px 20px 20px;
  margin: 0 auto 0px;
  width: 100%;
  max-width: 750px;
  box-sizing: border-box;
  overflow: hidden;
}


.explanation__payments .logo-box--app {
  padding-bottom: 16px;               /* 枠内の下余白を確保（相殺の影響を受けない） */
}

.explanation__payments .logo-title {
  color: #0099ff;
  font-weight: 800;
  font-size: 32px;
  display: block;
  width: 100%;
  margin: 0 0 20px;   /* ← 下のスペースを“12px → 20px”に拡大 */
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: center;
}

.explanation__payments .logo-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0099ff;
  font-weight: bold;
  font-size: 20px;
  margin: 20px 0;
}

.explanation__payments .logo-divider::before,
.explanation__payments .logo-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px dashed #0099ff;
  margin: 0 10px;
}

.explanation__payments .logo-grid {
  display: grid;
  justify-items: center;
  gap: 0px;
  column-gap: clamp(8px, 2vw, 24px); /* ← 画面幅に応じて横ギャップを可変に */
}

.explanation__payments .logo-grid img {
  max-width: 100%;
  max-height: 70px;
  height: auto;
  width: auto;
  object-fit: contain;
  border-radius: 12px;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 153, 255, 0.35) !important; /* 影を“少し薄く” */
}

.explanation__payments .logo-grid--apps {
  display: grid;
  grid-template-columns: repeat(6, max-content); /* 中身の実幅基準に変更（キャリア側と整合） */
  justify-content: center;                       /* キャリア側と同様に中央寄せ */
  align-items: center;
  column-gap: clamp(16px, 3vw, 28px);           /* キャリア側と同じ間隔に統一 */
}

.explanation__payments .logo-grid--carrier {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  align-items: center;
  column-gap: clamp(16px, 3vw, 28px);           /* ← もう少し広く */
  margin-bottom: 16px;                           /* キャリアロゴと文章の間の余白を“少し”拡大 */
}


.explanation__payments .logo-grid--carrier > img {
  grid-column: auto;  /* span指定を解除し、1要素=1列にする */
}

.explanation__payments .logo-note-small {
  font-size: 12px;
  color: #666;
  text-align: left;
  margin: 8px 0 16px;  /* 下にスペースを追加（枠外の余白になる可能性あり） */
}

.explanation__group-box {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 24px;
  margin: 24px auto 0;
  max-width: 700px;           /* ← 少し狭める（中央700px） */
  width: 100%;
  box-sizing: border-box;
}


.explanation p {
  font-size: 18px;
  line-height: 1.8;
  margin: 16px 0;
}

.explanation .apps-intro__lead {
  font-size: 12px;
}

.br-sp {
  display: none;
}

/* >>>>>>>>>>>>>>>>>>> [企業情報MQ] screen and (max-width: 1023px) and (min-width: 768px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 1023px) and (min-width: 768px) { 
  .explanation__inner {
    padding: calc(40px + 1cm) 24px 40px;
  }

.explanation__title {
  font-size: 34px;    /* 30px → 34px */
  line-height: 1.6;
  margin: 0 0 14px 0;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);  /* ← 6px→4pxへ（左上に戻す） */
}

.explanation__title-accent {
  font-size: 42px;    /* 36px → 42px */
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.explanation__head-image {
  width: 120%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  max-width: none;     /* ← 外部の max-width:100% を無効化 */
}

.explanation .explanation__head-image {
  width: 120%;         /* ← 詳細度を上げて width を再宣言 */
}
  .explanation__card {
    padding: 0 32px 28px;  /* ← 下方向 28px を追加 */
  }

.explanation__head-badge {
  left: 50%;
  transform: translateX(-50%);
}

.explanation .explanation__after p {
  font-size: 24px;    /* 20px → 24px */
  line-height: 1.6;
  font-weight: 700;
  margin: 8px 0;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.explanation .explanation__after .explanation__accent {
  font-size: 38px;    /* 32px → 38px */
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.explanation__noproblem {
  display: flex;
  gap: 0;                   /* ← 20px → 0 */
  margin: 20px auto 0;
  width: fit-content;
  max-width: 100%;
}

.explanation__noproblem-image {
  width: 180px;
  margin: 0;
  flex: 0 0 auto;
}

.explanation__noproblem-text {
  flex: 0 0 auto;
  margin-left: -8px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;   /* ← 左寄せに戻す */
}

.explanation__noproblem-lead {
  font-size: 20px;
  text-align: left;   /* ← 左寄せに戻す */
  width: auto;
  transform: none;
}

.explanation__noproblem-main {
  font-size: 32px;    /* ← 40px から縮小 */
  text-align: left;
}

.explanation__payments .logo-title {
  font-size: clamp(18px, 5vw, 30px);
  line-height: 1.1;
  white-space: normal;       /* ← 変更：改行を許可 */
  overflow-wrap: anywhere;   /* ← 変更：長い語でも折り返し */
}

  .explanation__group-box {
    padding: 20px;
    margin-top: 20px;
  }
}


/* >>>>>>>>>>>>>>>>>>> [企業情報MQ] screen and (max-width: 767px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 767px) {
  .explanation p {
    font-size: 10px;
    line-height: 1.8;
    margin: 14px 0;
  }

.explanation .apps-intro__lead {
  font-size: 11px !important; /* 既存の汎用指定 .explanation p を確実に上書き */
  text-align: left;            /* スマホ時のみ左寄せ */
}

.apps-intro__title {
  font-size: clamp(20px, 5.5vw, 24px) !important; /* さらに一段小さく：最小20px／最大24pxに抑制 */
  line-height: 1.5;
}

  .explanation__inner {
    padding: calc(36px + 1cm) 16px 40px;
  }

.explanation__title {
  font-size: 32px;    /* 30px → 32px にもう少し拡大 */
  line-height: 1.6;
  margin: 0 0 12px 0;
  text-align: center;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}


  .explanation__card {
    padding: 0 20px 24px;  /* ← 下方向 24px を追加 */
  }

  .explanation__head-badge {
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;     /* スマホ時だけ文字を小さく */
  }

.explanation__title-accent {
  font-size: 36px;    /* 34px → 36px にもう少し拡大 */
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

.explanation__head-image {
  width: 140%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  max-width: none;     /* ← 外部の max-width:100% を無効化 */
}

.explanation .explanation__head-image {
  width: 140%;         /* ← 詳細度を上げて width を再宣言 */
}

.explanation .explanation__after p {
  font-size: 22px;    /* 20px → 22px にもう少し拡大 */
  line-height: 1.6;
  font-weight: 700;
  margin: 6px 0;
  text-align: center;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

.explanation .explanation__after .explanation__accent {
  font-size: 32px;    /* 30px → 32px にもう少し拡大 */
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

.explanation__noproblem {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 16px;
  width: fit-content;
  flex-wrap: nowrap;
  margin-left: auto;
  margin-right: auto;
}

.explanation__noproblem-image {
  margin: 0;                         /* 左右中央寄せは不要 */
  flex: 0 1 auto;                    /* ← 収縮を許可 */
  width: clamp(120px, 30vw, 200px);  /* ← 画面に合わせて自動縮小・拡大 */
  height: auto;
}

.explanation__noproblem-text {
  width: auto;
  flex: 0 0 auto;      /* ← 伸ばさない：テキスト側ボックスの“空き領域”を無くす */
  min-width: auto;
  text-align: left;     /* ← 画像直後に文字が始まるよう左寄せ */
  margin-left: -8px;    /* ← 既存どおり：画像とのスキマ詰め */
}

.explanation .explanation__noproblem-lead {
  font-size: 16px;
  text-align: left;   /* ← 左寄せに戻す */
  width: auto;
  transform: none;
}

.explanation .explanation__noproblem-main {
  font-size: 38px;  /* ← 48px からさらに縮小（タブレットより小さく） */
  text-align: left;
  display: inline-block;
}


  .explanation__payments {
    padding: 0 8px;  /* ← 左右の余白を半分にして枠の横幅を“少し”拡大 */
  }

  .explanation__payments .logo-grid--carrier {
    grid-template-columns: repeat(3, max-content);  /* ← 3列に変更 */
    justify-content: center;
    align-items: center;
    column-gap: 12px;
    margin-bottom: 16px;                             /* SPでも下余白を“少し”拡大 */
  }

  .explanation__payments .logo-grid--carrier > img {
    grid-column: auto;
  }

  .explanation__payments .logo-grid--apps {
    column-gap: 12px;                  /* 横のスペース */
    row-gap: 12px;                     /* 追加：縦のスペースを横と同じにする */
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    align-items: center;
  }

  .explanation__payments .logo-title {
    font-size: clamp(14px, 5vw, 24px);
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    margin: 0 auto 16px;     /* ← 下のスペースを“16px”確保（SP専用） */
  }

  .explanation__payments .logo-grid img {
    max-height: 56px;
  }

.explanation__payments .logo-box {
  width: 100%;
  max-width: 100%;
  padding: 12px;
  margin: 0 auto 6px;    /* 8px → 6px：SPの枠外・下を“ほんの少し”縮小 */
  border-width: 3px !important;
}

  .explanation__group-box {
    padding: 16px;
    margin-top: 16px;
  }

/* スマホ時のみ改行を有効化 */
.br-sp {
  display: inline;
}

.after__line2 {
  display: inline-block;
  width: 11em;        /* 行末位置を安定化（右端一致を維持） */
  white-space: nowrap;
  text-align: right;  /* 右端基準：2つの文の“最後の文字”が一致 */
  margin-left: 3.2em; /* ← さらに右へ移動（必要に応じて 3.4em, 3.6em に調整可） */
}


/* ①：一行目 “クレジットカード”／“ショッピング枠” をさらに左へ */
.after__line1 {
  display: inline-block;
  inline-size: 9em;
  white-space: nowrap;
  text-align: left;
  margin-left: -0.8em; /* ← さらに左へ（必要なら -1.0em などに調整可） */
}

}

/* ======================================== ■特徴セクション ======================================== */

#features {
  background: none;
  color: #0b3a66;
}


#features .wrap {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  box-sizing: border-box;

  padding: 40px 16px;
  background-image: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)), url("./images/background.jpg");
  background-image: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)), image-set(
    url("./images/background.webp") type("image/webp") 1x,
    url("./images/background.jpg")  type("image/jpeg") 1x
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #ffffff;
  border-top: 0;
  border-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}


#features .features__header {
  text-align: center;
  margin: 0 0 18px 0;
}


#features .features__title {
  margin: 30px 0 70px;
  font-size: clamp(26px, 5.2vw, 40px);
  font-weight: 900;
  line-height: 1.25;
  color: #0b3a66;
}

#features .features__brand {
  color: var(--brand);
}

#features .features__list {
  list-style: none;
  margin: 18px 0 0 0;  /* ← 末尾 80px の外側余白を 0 に */
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}

#features .features__item {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  min-height: 0;
}

#features .feature-card {
  border: 1px solid #0099ff;
  border-radius: 0;
  overflow: visible;
  position: relative;
  box-shadow: none;
}

#features .feature-card::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -6px;  /* 共用サイズで「もう少し右」に寄せる（-14px → -6px） */
  transform: translate(0, -48%);
  width: clamp(60px, 12vw, 92px);
  aspect-ratio: 1;
  background-image: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 3;
  pointer-events: none;
}


/* 各カードのアイコン（個別指定） */
#features .features__item:nth-child(1) .feature-card::after {  /* 手軽 */
  background-image: url("./images/easy.png");
}

#features .features__item:nth-child(2) .feature-card::after {  /* 速い */
  background-image: url("./images/fast.png");
}

#features .features__item:nth-child(3) .feature-card::after {  /* 高換金 */
  background-image: url("./images/exchange.png");
}

#features .features__item:nth-child(4) .feature-card::after {  /* 安心 */
  background-image: url("./images/peace.png");
}

#features .features__item:nth-child(5) .feature-card::after {  /* いつでも */
  background-image: url("./images/24.png");
}

#features .feature-card__title {
  background: #0099ff;
  color: #ffffff;
  font-weight: 900;
  font-size: clamp(22px, 6.8vw, 32px);
  line-height: 1.35;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: static;
  box-shadow: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

  padding: 0 22px;
  min-height: 124px;
  width: 30%;
  max-width: 280px;
  order: 0;
}



#features .feature-card__title::before {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffec00;
  color: #0099ff;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  flex: 0 0 40px;
}

#features .features__item:nth-child(1) .feature-card__title::before {
  content: "1";
}

#features .features__item:nth-child(2) .feature-card__title::before {
  content: "2";
}

#features .features__item:nth-child(3) .feature-card__title::before {
  content: "3";
}

#features .features__item:nth-child(4) .feature-card__title::before {
  content: "4";
}

#features .features__item:nth-child(5) .feature-card__title::before {
  content: "5";
}



/* 共用（>1023px 含む）でのカード左右レイアウト */
#features .feature-card {
  display: flex;
  align-items: stretch;
  text-align: center;
  min-height: 124px;
  flex-wrap: nowrap;
}

#features .feature-card__body {
  width: 70%;
  text-align: center;
  order: 1;
  min-height: 124px;

  background: #ffffff;
  color: #0099ff;
  font-weight: 800;
  font-size: clamp(16px, 4.2vw, 22px);
  line-height: 1.6;
  padding: 26px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}


#features .feature-card__body .feature-card__desc {
  margin: 10px 0 0 0;
  font-weight: 400;
  font-size: clamp(14px, 3.8vw, 18px);
  line-height: 1.8;
  color: #0b3a66;
  text-align: left;
  padding: 0;
  background: transparent;
}

#features .marker-yl {
  background-image: linear-gradient(transparent 62%, #ffec00 0);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 800;
}

#features .feature-card__desc .feature-card__note {
  display: block;
  margin-top: 6px;
  font-size: clamp(11px, 2.6vw, 12px);
  line-height: 1.6;
  color: var(--muted);
  font-weight: 400;
}

/* >>>>>>>>>>>>>>>>>>> [特徴MQ] screen and (max-width: 767px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 767px) {
  #features .features__title {
    margin-top: 20px;
  }

  #features .feature-card {
    display: block;
    min-height: 0;
  }

  #features .feature-card__title {
    /* 横並び＋行間を詰めて、タイトルを1行に */
    flex-direction: row;
    align-items: center;
    gap: 4px;
    line-height: 1.1;

    /* 文字の「少し上」程度の帯高さにする：縦の余白を控えめにし、最低高さは解除 */
    padding: 6px 12px;
    min-height: 0;

    /* 幅はカード幅に追従（既存指定を維持） */
    width: auto;
    max-width: none;
  }

  #features .feature-card__title::before {
    width: 28px;
    height: 28px;
    font-size: 14px;
    flex: 0 0 28px;
  }

  #features .feature-card__body {
    width: auto;
    order: 1;
    min-height: 0;
  }

  #features .feature-card::after {
    width: clamp(60px, 18vw, 92px);
    top: 0;
    left: 16px;
    transform: translate(0, -50%);
  }

  #features .wrap {
    background-image: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)), url("./images/background2.jpg");
    background-image: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)), image-set(
      url("./images/background2.webp") type("image/webp") 1x,
      url("./images/background2.jpg")  type("image/jpeg") 1x
    );
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}


/* >>>>>>>>>>>>>>>>>>> [特徴MQ] screen and (max-width: 1023px) and (min-width: 768px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  #features .wrap {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }

  #features .feature-card {
    display: block;
    min-height: 0;
  }

  #features .feature-card__title {
    width: auto;
    max-width: none;
    padding: 10px 16px;
    order: 0;
    flex-direction: row;
    gap: 6px;
    line-height: 1.2;
    min-height: 0;
  }

  #features .feature-card__title::before {
    width: 34px;
    height: 34px;
    font-size: 16px;
    flex: 0 0 34px;
  }

  #features .feature-card__body {
    width: auto;
    order: 1;
    min-height: 0;
  }
}


/* ======================================== ■ご利用の流れセクション ======================================== */

.flow-section {
  width: 100%;                /* 画面幅に合わせる */
  max-width: 750px;           /* ただし最大750pxに制限（PCは従来どおり） */
  margin: 0 auto;
  padding: 0 0 40px;          /* 上の余白を0にして、下だけ40px残す */
  background-color: #e0f3ff;
  overflow-x: hidden;         /* セクション内からはみ出た横方向を表示させない */
}

.flow-section__inner {
  width: 100%;
  box-sizing: border-box;
}

.flow-section__title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-top: 0;              /* 上方向の余白をなくす */
  margin-bottom: 30px;
  background-color: #0099ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 0;
}


.flow-section__lead {
  display: inline-block;
  font-size: 20px;
  line-height: 1.6;
  margin-top: 0;
  color: #ffffff;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

.flow-section__lead-em {
  font-size: 1.4em;
  font-weight: bold;
  color: #ffec00;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

.flow-section__title-icon {
  display: inline-block;
  width: 100px;
  height: auto;
}

.flow-section__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: -10px;
}

.flow-section__title-text {
  font-size: 40px;
  font-weight: bold;
  color: #ffec00;
  margin-top: 8px;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

/* STEP全体の縦並び */
.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;                  /* 矢印を挟むため、間隔をやや狭める */
}

.flow-step {
  display: flex;
  align-items: stretch;
  background-color: #ffffff;
  border-radius: 0;
  padding: 20px;
  box-sizing: border-box;
  margin: 0 20px;
  color: #0b3a66;
  box-shadow: 0 2px 8px rgba(0, 153, 255, 0.35);
}


.flow-step__head {
  width: 90px;
  padding-right: 20px;
  margin-right: 20px;
  box-sizing: border-box;
  border-right: 1px solid #e5e5e5;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}


.flow-step__label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;        /* 左側（STEP+番号）と右側アイコンの間隔 */
  margin-bottom: 0;
}

.flow-step__icon {
  display: block;
  width: 56px;    /* アイコンの見え方に応じて後で調整してください */
  height: auto;
}

.flow-arrow {
  position: relative;  /* flow-arrow2.png をここ基準で絶対配置する */
  text-align: center;
}


.flow-arrow__img {
  display: inline-block;
  max-width: 40px;   /* 矢印の大きさも後で実物に合わせて調整可能 */
  height: auto;
}

.flow-arrow__img--line {
  position: absolute;
  top: -40px;        /* マイナスにして、画像全体を上方向へ移動 */
  right: 40px;       /* 右端から40pxの位置（STEP03〜04の右側付近） */
  display: block;
  max-width: none;   /* 画像サイズをそのまま使う */
  height: auto;
}


.flow-note {
  margin: 8px 0 16px;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
}

.flow-note__marker-line {
  margin: 0 0 4px;
}

.flow-note__marker {
  display: inline-block;
  padding: 0 2px;
  background-image: linear-gradient(to bottom, transparent 50%, #ffec00 50%);
  font-size: 28px;   /* フォントサイズを大きくして強調 */
  font-weight: bold;
}


.flow-note__text {
  margin: 0 0 4px;
}

.flow-note__subtext {
  margin: 0;
  font-size: 12px;
  color: #555555;
}

.flow-step__step-label {
  font-size: 16px;
  letter-spacing: 0.1em;
  margin-bottom: 0;
  color: #0099ff;
}


.flow-step__step-block {
  display: flex;
  flex-direction: column;  /* STEP の下に 01 が来るように縦並び */
  align-items: center;
  text-align: center;
}

.flow-step__step-number {
  font-size: 40px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
  color: #0099ff;
}

.flow-step__body {
  flex: 1;
  position: relative;
  padding-right: 180px;
  box-sizing: border-box;   /* padding込みで幅を計算し、枠を超えて広がらないようにする */
}


.flow-step--01 .flow-step__body {
  padding-right: 20px;     /* STEP01だけ右側の余白を小さくして幅を確保 */
}

.flow-step__heading {
  font-size: 30px;
  font-weight: bold;
  margin: 15px 0 8px;        /* 上に2pxの余白を付けて、見出しをほんの少し下げる */
  line-height: 1;           /* 行の高さを文字サイズに合わせて余白を減らす */
  white-space: nowrap;      /* 見出しが改行されないようにする */
  color: #0099ff;
}


.flow-step__heading-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;          /* 子要素が画面幅を超えるときは改行して次の行へ */
}

.flow-step__cta {
  display: inline-flex;
  flex-direction: column;         /* テキストを上下に積む */
  align-items: center;
  justify-content: center;
  margin-left: auto;              /* 見出し行の右端に寄せる */
  padding: 10px 24px;             /* ボタンを一回り大きく */
  border-radius: 9999px;
  background: linear-gradient(#ff8cc8, #ff5cad 60%, #ff3d97);
  color: #ffffff;
  font-size: 16px;                /* 文字も少し大きく */
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.16),
              0 3px 8px rgba(0,0,0,.12);
  cursor: pointer;
  white-space: normal;            /* 通常の改行ルールに戻す */
  max-width: 100%;                /* 親要素の幅を超えて広がらないようにする */
}




.flow-step__cta::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 10px;
  right: 10px;
  height: 40%;
  border-radius: 9999px;
  background: linear-gradient(180deg,
              rgba(255,255,255,.40),
              rgba(255,255,255,.05));
  pointer-events: none;
}

.flow-step__cta-sub {
  display: block;
  font-size: 11px;        /* メインの文字より小さく */
  font-weight: 400;
  margin-top: 2px;
}

.flow-step__cta:hover {
  background: linear-gradient(#ff9ad1, #ff6ab8 60%, #ff4aa3);
  box-shadow: 0 10px 24px rgba(0,0,0,.20),
              0 4px 10px rgba(0,0,0,.14);
}

.flow-step__cta:active {
  transform: translateY(1px);
  background: linear-gradient(#ff78c1, #ff4aa3 60%, #f52a8d);
  box-shadow: 0 6px 16px rgba(0,0,0,.18),
              0 2px 8px rgba(0,0,0,.12);
}


.flow-step__id-images {
  display: flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.flow-step__id-item {
  text-align: center;
  font-size: 12px;
  color: #0b3a66;
}

.flow-step__id-image {
  display: block;
  width: 64px;
  height: auto;
  margin: 0 auto 4px;
}

.flow-step__id-label {
  margin: 0;
  line-height: 1.4;
}


.flow-step__text {
  font-size: 14px;
  line-height: 1.8;
}

.flow-step__divider {
  width: 100%;               /* 親要素の幅に合わせる */
  max-width: 680px;          /* 最大幅は従来どおり680px */
  height: 2px;
  background-color: #0b3a66;
  margin: 32px auto 24px;    /* 中央寄せ＆上下の余白 */
}

.flow-web {
  text-align: center;
  margin: 0 20px 24px;
  color: #0b3a66;
}

  .flow-points {
    grid-template-columns: 1fr;
    margin: 0 0 0;
  }

.flow-web__promise {
  font-size: 32px;           /* さらに大きくして強調 */
  font-weight: bold;
  margin: 0 0 24px;
  color: #0099ff;            /* 文字色を#0099ffに */
}


.flow-web__promise-highlight {
  display: inline-block;
  padding: 0 2px;
  background-image: linear-gradient(to bottom, transparent 50%, #ffec00 50%);
}

.flow-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3列 */
  gap: 16px 16px;                         /* 行・列の間隔 */
  margin: 0 20px 0;
}

.flow-point {
  border: 2px solid #0099ff;
  background-color: #ffffff;
  padding: 16px 8px;
  text-align: center;
  box-sizing: border-box;
  position: relative;           /* 左上ラベル配置用 */
}

.flow-point__icon {
  display: block;
  width: 48px;
  height: auto;
  margin: 0 auto 8px;
}

.flow-point__label {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #0b3a66;
}

.flow-point__tag {
  position: absolute;
  top: -12px;
  left: -4px;
  font-size: 22px;                /* さらに大きく */
  font-weight: bold;
  color: #ffec00;                 /* 文字色 */
  text-shadow: 1px 1px 0 #0099ff; /* 影を左上寄りに（ずれを小さく） */
  transform: rotate(-15deg);      /* -15度回転 */
  pointer-events: none;           /* クリック操作の邪魔をしないように */
}


.flow-web__lead {
  font-size: 16px;
  margin: 0 0 4px;
}

.flow-web__title {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 8px;
}


/* スマホ */
/* >>>>>>>>>>>>>>>>>>> [ご利用の流れMQ] screen and (max-width: 767px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 767px) {

  /* flow-arrow2.png（長い矢印）はスマホでは非表示 */
  .flow-arrow__img--line {
    display: none;
  }

  /* セクションタイトル一式を画面幅に応じて縮小 */
  .flow-section__title-text {
    font-size: clamp(20px, 6vw, 26px);
  }

  .flow-section__lead {
    font-size: clamp(13px, 3.8vw, 16px);
  }

  .flow-section__lead-em {
    font-size: 1.2em;   /* 強調部分は lead より少し大きく */
  }

  /* clock.png を少し小さく */
  .flow-section__title-icon {
    width: 64px;
  }

  /* STEP本文：右の余白を縮めて、横幅に収める */
  .flow-step__body {
    padding-right: 20px;
  }

  .flow-step--02 .flow-step__body {
    padding-right: 0;
  }

  /* STEP02の身分証画像：本文の下に表示し、中央寄せ */
  .flow-step__id-images {
    position: static;
    transform: none;
    margin: 8px auto 0;      /* コンテナ自体を左右 auto で中央寄せ */
    justify-content: center; /* 中の2枚の画像を中央揃え */
    width: auto;             /* コンテナ幅を中身（2枚分）に合わせる */
  }

  .flow-step--02 .flow-step__text {
    display: block;
  }

  .flow-step--02 .flow-step__id-images::before {
    content: "";
    display: none;
  }

  .flow-step--02 .flow-step__id-images {
    flex-basis: 100%;
  }


  /* タイトル行：アイコン＋見出しを基本は横一列にしつつ、
     ボタンは下の行に落とせるように wrap を許可 */
  .flow-step__heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;   /* 追加：画像＋文字を中央寄せ */
    gap: 8px;
    margin-bottom: 8px;
  }

  /* STEP02だけは「身分証確認」の下に画像を縦に積む */
  .flow-step--02 .flow-step__heading-row {
    flex-direction: row;       /* 横並び：アイコン → 見出し → 画像セット */
    align-items: center;       /* 高さ方向は中央揃え（他STEPと同じ） */
  }

  /* アイコンを少し小さくして収まりを良くする */
  .flow-step__icon {
    width: 40px;
  }

  /* 見出し：改行OK＋画面幅に応じて縮小（大きすぎて改行するのを防ぐ） */
  .flow-step__heading {
    white-space: normal;                      /* テキストは内部で改行OK */
    font-size: clamp(20px, 5vw, 24px);        /* 最小・最大とも今より大きくする */
  }

  /* STEP全体：スマホでは縦並びに変更（上にSTEPラベル、下に本文） */
  .flow-step {
    margin: 16px 8px;
    flex-direction: column;
  }

  .flow-web {
    margin: 0 0 24px;
  }

  /* STEPラベル部分を横幅いっぱいのヘッダーに */
  .flow-step__head {
    width: 100%;
    padding-right: 0;
    margin-right: 0;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
  }

  /* 「STEP01」を横一列で表示（スマホ時のみ）＋ STEP と 01 を同じ太さ・サイズに */
  .flow-step__step-block {
    flex-direction: row;          /* 縦並び → 横並び */
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .flow-step__step-label,
  .flow-step__step-number {
    font-size: 24px;          /* スマホ時のSTEPの文字をさらに大きく */
    font-weight: bold;
    letter-spacing: 0.1em;
  }

  /* 今すぐWEB申し込みボタン：
     スマホでは見出しの「右」ではなく「下」に表示＆幅広く */
  .flow-step__cta {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    font-size: 14px;          /* 全体を少しだけ小さめに */
    padding: 8px 16px;
  }

  .flow-step__cta-sub {
    font-size: 11px;
  }

  .flow-step__head .flow-step__step-label,
  .flow-step__head .flow-step__step-number {
    font-size: 24px;        /* スマホ時のSTEP 01をさらに大きく */
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    margin: 0;
  }

}

/* ======================================== ■よくある質問セクション ======================================== */

/* 1) セクション土台（背景画像＋色の下地） */
.faq {
  /* 外側余白をゼロにして、左右/上下の余白は内側に移します */
  padding: 0;
  background-color: #cccccc;
}

.faq__inner {
  max-width: 750px;
  margin: 0 auto;
  background: #ffffff;
  padding: 48px 16px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  margin-top: -1px;
  margin-bottom: -1px;
  display: flow-root;
  overflow: hidden;           /* ← 白カラム外の装飾をクリップ */
}

.faq__title {
  position: relative;
  z-index: 0;

  /* 要素自体を中央配置（他の要素は影響なし） */
  display: block;
  width: max-content;
  margin: 108px auto 70px;

  font-size: 33px;       /* Flow と同じ */
  color: #0099ff;        /* Flow と同じ */
  line-height: 1;
  text-align: left;      /* 要素内の文字は左寄せ */
}


.faq__title::before {    /* Flow の淡青円 */
  position: absolute;
  bottom: calc(-3.5em / 4);
  left: calc(-3.5em / 2);
  z-index: -1;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background: rgba(0, 153, 255, 0.18);
  content: '';
}

.faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.faq__item {
  border: none;
  border-radius: 0;
  background: #fff;
  max-width: 700px;
  width: 100%;           /* 親（中央750px内）の横幅いっぱいに固定 */
  box-sizing: border-box;/* padding 等を含めて 100% 内に収める */
  margin: 0 auto;
}

.faq__item details {
  position: relative;    /* 矢印配置用 */
}

.faq__question {
  display: block;
  position: relative;
  width: 100%;               /* ★ 枠の横幅を親要素いっぱいに固定 */
  box-sizing: border-box;    /* ★ padding を含めて 100% 幅に収める */
  padding: 16px 48px 16px 16px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
  background: #0099ff;
  color: #fff;
  white-space: normal;        /* ← 改行を許可する（デフォルト） */
  overflow-wrap: anywhere;    /* 長い単語/URL も枠内で折り返す */
  word-break: break-word;     /* 日本語・英語とも途中で折り返し可能にする */
}


.faq__q {
  color: #ffec00;
}

.faq__question::-webkit-details-marker { /* 既定の開閉マーカー非表示 */
  display: none;
}

/* Q の1文字目（開閉でサイズをそろえる） */
.faq__question::first-letter {
  font-size: 1.3em;      /* ← 開いても閉じても同倍率 */
}

/* 5) 矢印（デフォルト＝閉） */
.faq__question::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .2s ease;
}


.faq__item details:not([open]) .faq__question::first-letter {
  color: inherit;
}

.faq__item details[open] .faq__question {
  background: #0099ff;
  color: #fff;
}

.faq__item details[open] .faq__question::first-letter {
  color: inherit;
}

.faq__item details[open] .faq__question::after {
  border-right: 2px solid #fff;  /* 矢印を白に */
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(-135deg);
}

/* 8) 回答（余白／QとAの区切り線） */
.faq__answer {
  padding: 16px;
  line-height: 1.8;
  font-size: 15px;
  background: #fff;
  color: #000;
  border: 1px solid #0099ff;
  border-radius: 0;
}

.faq__answer p { margin: 0; }
.faq__item details[open] .faq__answer {
  border-top: none;
}

/* 9) アクセシビリティ（フォーカス可視） */
.faq__question:focus-visible {
  outline: 2px solid #2684ff;
  outline-offset: 2px;
  border-radius: 6px;
}

.faq__more details {
  position: relative;
}

.faq__summary {
  display: block;
  position: relative;
  width: 100%;               /* ★ 枠の横幅を親要素いっぱいに固定 */
  box-sizing: border-box;    /* ★ padding を含めて 100% 幅に収める */
  padding: 16px 48px 16px 16px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
  background: #0078cc;  /* ← 少し濃く */
  color: #fff;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}


.faq__summary::-webkit-details-marker {
  display: none;
}

.faq__summary::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .2s ease;
}

.faq__more details[open] .faq__summary::after {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(-135deg);
}

.faq__more-body {
  padding: 12px 0 0;
  background: #fff;
}

.faq__list--more {
  list-style: none;
  margin: 0;
  padding: 0;          /* ← 上部と同じく左右の余白をなくして幅を統一 */
  display: grid;
  gap: 12px;
}

/* >>>>>>>>>>>>>>>>>>> [よくある質問セクションMQ] screen and (max-width: 767px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 767px) {
  .faq__title {
    font-size: 24px;
  }

  .faq__question {
    white-space: normal;        /* ← PCでのnowrapをモバイルで上書き解除 */
    overflow-wrap: anywhere;    /* 長い単語/URLも折り返す */
    word-break: break-word;     /* 互換カバー */
  }

  .faq__title::before {
    left: 0;         /* 負の位置指定をやめて内側に配置 */
  }

  /* ▼ 追記：その他のご質問（見出し）のモバイル折返し */
  .faq__summary {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* >>>>>>>>>>>>>>>>>>> [よくある質問セクションMQ] screen and (max-width: 1023px) and (min-width: 768px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .faq__title {
    font-size: 29px;
  }
}

/* ======================================== ■申し込みフォームセクション ======================================== */
:root {
  --apply-header-offset: 120px;
}

#apply-section {
  background: transparent;
  padding: 0;
  scroll-margin-top: var(--apply-header-offset);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  margin-top: -1px;
  margin-bottom: -1px;
}

#apply-section .wrap {
  background: #e8f6ff;
}

#apply-section .apply-form__inner {
  max-width: var(--max);
  margin: 0 auto;
  background: transparent; /* セクション(#apply-section)の #e8f6ff をそのまま見せる */
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  margin-top: -1px;
  margin-bottom: -1px;
}

.apply-form__title {
  display: inline-block;
  position: relative;
  margin: calc(3.5em / 2) 0 calc(3.5em / 4) calc(3.5em / 2);
  margin-top: 70px;
  margin-bottom: 30px;
  margin-left: 0;
  font-size: 33px;
  color: #0099ff;
  line-height: 1;
  z-index: 0; /* 擬似要素(z-index:-1)を見出し背面に表示するため */
}

#apply-form-title:focus,
#apply-form-title:focus-visible {
  outline: none !important;
  outline-offset: 0;
}

#apply-form-title {
  scroll-margin-top: var(--apply-header-offset);
}

.apply-form__title::before {
  position: absolute;
  bottom: calc(-3.5em / 4);
  left:  calc(-3.5em / 2);
  z-index: -1;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background: rgba(0, 153, 255, 0.18);
  content: '';
}

.apply-form__titlewrap {
  text-align: center;
  overflow: hidden;
}

.apply-form__subtitle {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  margin-top: 8px;
}

/* フォームボックス */
.apply-form {
  background: #fff;
  border: 1px solid #0099ff;
  border-radius: 0;
  padding: 20px;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 60px;
}

/* 行・見出し・ラジオ群 */
.apply-form__row {
  margin-bottom: 22px;
}

#apply-section #credit-only {
  margin-left: 35px;
}

.apply-form__label {
  display: inline-block;  /* ← 横並びに変更 */
  font-weight: 700;
  margin-bottom: 10px;    /* 入力欄との縦余白は維持 */
}

.apply-form__label-sub {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
}

.apply-form__note--tel {
  text-align: left;
}

#apply-section .apply-form__row > .badge {
  margin: 0 8px 6px 0;
  vertical-align: baseline;
}

.apply-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 12px;
}

.apply-form__radios + .form-error {
  display: block;
  margin-top: 8px;
}

.form-error {
  color: #ef4444;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 6px;
}

/* 入力系（input / select / textarea） */
.apply-form__input,
.apply-form__select,
.apply-form__textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;

  /* 追加（はみ出し対策） */
  display: block;   /* ブロック化して前要素と同じ行に並ばないようにする */
  max-width: 100%;  /* 親幅を超えない保険 */
  min-width: 0;     /* 極小端末での計算時に広がらない保険 */
}



.file-chosen {
  /* 幅いっぱい使って、長い名前は省略記号に */
  flex: 1 1 auto;        /* ← 余り幅を優先的にこちらへ */
  min-width: 0;          /* ← 省略記号を効かせるために必須 */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 14px;
  color: #6b7280;
  margin-left: 6px;
  pointer-events: none;  /* 既存のクリック無効指定は維持（任意） */
}

/* 入力の実体は画面から隠す（SR向けに残す） */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;   /* ← 修正 */
  border: 0 !important;
  margin: -1px !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* （未選択）は情報表示だけ。クリック無効 */
.file-chosen { pointer-events: none; }

/* 行の並び（表面／裏面：ボタン＋（未選択）を横並びに） */
.file-field {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;     /* ← 一行に固定（端末差での意図せぬ折返しを防止） */
}

/* === 復活：身分証明書（画像・文字・レイアウト） === */
.apply-form__id-upload {
  margin-top: 22px;
}

.apply-form__id-upload-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.apply-form__id-upload-left {
  flex: 1 1 auto;
  min-width: 0;
}

.apply-form__id-upload-right {
  flex: 0 0 240px;
  margin-right: 60px;
}

.id-guide {
  display: flex;
  gap: 12px;
}

.id-guide__item {
  margin: 0;
  flex: 1 1 0;
  text-align: center;
}

.id-guide__title {
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 6px;
}

.id-guide__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.id-guide__note {
  margin-top: 6px;
  font-size: 12px;
  color: #ef4444;
}
/* === 復活ここまで === */


.file-field__label { min-width: 3.5em; }

.file-btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;

  white-space: nowrap;   /* ← ボタン文言を折り返さない */
  flex-shrink: 0;        /* ← フレックス収縮を禁止 */
}

/* （新規追加）単一ボタン用のミニメニュー */
.file-picker {
  position: relative;
  display: inline-flex;    /* ← ボタン幅を内容にフィットさせる */
  align-items: center;
  flex-shrink: 0;          /* ← 縮ませない */
}

.file-picker__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  margin-top: 4px;
  padding: 6px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* ← 0.06 に */
  z-index: 10;
}

.file-picker__item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 14px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}

.file-picker__item:hover { background: #f3f4f6; }

.file-btn:hover { filter: brightness(0.98); }

.apply-form__inputwrap label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 余白調整：見出し直下の注意文は詰める／注意文→入力群の間は空ける */
.apply-form__label + .apply-form__note { margin-top: 0; }
.apply-form__note + .apply-form__inputwrap { margin-top: 10px; }
/* === 新規追加ここまで === */

.apply-form.is-validated input:invalid,
.apply-form.is-validated select:invalid,
.apply-form.is-validated textarea:invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.apply-form.is-validated .file-btn.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* 確認画面：確認用テーブル */
.confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  margin-bottom: 8px;
}

.confirm-table th,
.confirm-table td {
  border-top: 1px solid #e5e7eb;
  padding: 8px 10px;
  vertical-align: top;
}

.confirm-table th {
  width: 220px;
  background: #f9fafb;
  color: #374151;
  font-weight: 600;
  text-align: left;
}

.confirm-table tr:first-child th,
.confirm-table tr:first-child td {
  border-top: none;
}

.apply-form.is-validated input[type="checkbox"]:invalid {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
  border-radius: 4px;
}

.apply-form.is-validated .apply-form__radios.is-invalid {
  /* 追記：通常枠の色だけを赤にし、他の入力と同じ表現に合わせる */
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);

  /* 旧仕様のアウトラインは無効化 */
  outline: none;
  outline-offset: 0;
}

.apply-form__input:focus,
.apply-form__select:focus,
.apply-form__textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25); /* ← α値を0.25に修正 */
}

.apply-form__textarea::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.apply-form__inputwrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;   /* 極小端末で折り返してはみ出し防止 */
  min-width: 0;     /* 子要素の幅計算での過伸張を抑止 */
}

.apply-form__inputwrap--files {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.apply-form__unit {
  margin-left: 6px;
  color: #6b7280;
  font-size: 14px;
}

/* 同意・チェック */
.apply-form__agree {
  margin: 20px 0 12px;
  font-size: 14px;
}

.apply-form__check {
  display: block;
  margin-top: 6px;
}

/* アクション */
.apply-form__actions {
  text-align: center;
  margin-top: 20px;
}

.apply-form__submit {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  transition: background-color .2s ease, filter .2s ease;
}

.apply-form__submit:hover {
  background: linear-gradient(90deg, #f97316, #f59e0b);
}

.apply-form__note {
  font-size: 12px;
  color: #6b7280;
  text-align: center;
  margin-top: 12px;
}

/* 新規追加：※印の注意文を赤文字で */
.apply-form__note--danger {
  color: #ef4444;
  text-align: left;   /* 注意文なので左寄せに変更（不要なら削除可） */
}

.apply-form__confirm {
  border: 1px solid #0099ff;   /* 入力フォームと同じ青枠 */
  border-radius: 0;            /* 角の丸みをなくす */
  background: #fff;
  padding: 20px;
  margin-top: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}


/* 見出し：中央・大きめ・青 */
.apply-form__confirm > h3 {
  font-size: 28px;
  font-weight: 800;
  color: #0099ff;
  text-align: center;
  margin: 0 0 16px;
}

.apply-form__confirm.is-complete {
  border: none;
  padding: 0;
}

#apply-section.is-confirm .apply-form__subtitle {
  display: none;
}

#apply-section.is-complete .apply-form__subtitle {
  display: none;
}

/* 進行ステップ表示（ご指定の書式に統一：再定義） */
.apply-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;                /* ← 矢印(幅40px)が丸枠に重ならないよう十分に拡張 */
  --apply-steps-gap: 48px;  /* ← gap と同じ値に必ず揃える */
  --apply-step-size: 60px;
  --connector-len: clamp(0px, calc(var(--apply-steps-gap) - var(--apply-step-size)), 160px);
  margin: 16px 0 24px;
  position: relative;
}

.apply-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.apply-step__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: var(--apply-step-size);
  height: var(--apply-step-size);
  border-radius: 50%;
  background: #d1d5db;
  color: #fff;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.apply-step__label {
  display: block;  /* 余計なベースライン影響を排除 */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1;
}

.apply-step__digit {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.apply-step__text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #9ca3af;        /* 既定＝グレー */
}

.apply-step + .apply-step::before {
  content: "";
  position: absolute;
  top: calc(var(--apply-step-size) / 2 - 8px);
  left: 50%;
  transform: translateX(calc(-50% - (var(--apply-step-size) + var(--apply-steps-gap)) / 2));
  width: 40px;
  height: 16px;
  background: url("images/arrow.png") center / contain no-repeat;
  border: none;
  z-index: 0;
}


/* --- アクティブ強調（状態は #apply-section の既存クラスで判定） --- */
/* 入力（初期）＝STEP1 */
#apply-section:not(.is-confirm):not(.is-complete) .apply-step--1 .apply-step__circle,
#apply-section.is-confirm .apply-step--2 .apply-step__circle,
#apply-section.is-complete .apply-step--3 .apply-step__circle {
  background: #0099ff; /* 指定の青 */
}

#apply-section:not(.is-confirm):not(.is-complete) .apply-step--1 .apply-step__text,
#apply-section.is-confirm .apply-step--2 .apply-step__text,
#apply-section.is-complete .apply-step--3 .apply-step__text {
  color: #111827;        /* アクティブ時＝濃い文字色 */
}

/* ボタン共通 */
.apply-form__back,
.apply-form__send {
  display: inline-block;
  min-width: 120px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  margin: 0 6px;
}

/* 修正するボタン（青） */
.apply-form__back {
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

.apply-form__back:hover {
  filter: brightness(1.05);
}

/* 送信ボタン（オレンジ） */
.apply-form__send {
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

.apply-form__send:hover {
  filter: brightness(1.05);
}

/* 任意/必須バッジ（白文字＋色背景） */
.badge {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .03em;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.badge--optional { background: #3b82f6; } /* 任意＝青 */
.badge--required { background: #ef4444; } /* 必須＝赤 */

/* 進行ステップ表示（ご指定の書式に統一） */
.flow-steps {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  position: relative;
}

/* 同意前の案内行（少し太字） */
.apply-form__consent-note {
  font-weight: 600;   /* 少し太字 */
  margin: 12px 0 6px; /* 適度な余白：上12px・下6px */
}

.apply-result {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
}

.apply-result.--ok {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #1b5e20;
}

.apply-result.--error {
  background: #ffebee;
  border: 1px solid #ef9a9a;
  color: #b71c1c;
}

.submission-complete {
  max-width: 720px;
  margin: 16px auto 0;
  padding: 32px 20px;
  background: #fff;
  border: 1px solid #0099ff;
  border-radius: 0;
  scroll-margin-top: var(--apply-header-offset);
}

.submission-complete__title {
  font-size: 28px;
  font-weight: 800;
  color: #0099ff;
  line-height: 1.4;
  text-align: center;
  margin: 0 0 16px;
}

.submission-complete__text {
  margin: 0 0 12px;
  line-height: 1.9;
}

.submission-complete__note {
  margin: 0 0 16px;
  line-height: 1.9;
}

.submission-complete__contact a {
  text-decoration: underline;
}

/* >>>>>>>>>>>>>>>>>>> [MQ] screen and (max-width: 1023px) and (min-width: 768px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  :root { --apply-header-offset: 96px; }

  .apply-form {
    padding: 16px;
  }

  .apply-form__title { font-size: 29px; }
}

/* >>>>>>>>>>>>>>>>>>> [申し込みフォームMQ] screen and (max-width: 767px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 767px) {
  .apply-steps {
    gap: 40px;                 /* ← 丸枠と矢印の干渉を避けるため拡張 */
    --apply-steps-gap: 40px;   /* ← gap と同じ値に必ず揃える */
    --apply-step-size: 52px;
    --connector-len: clamp(0px, calc(var(--apply-steps-gap) - var(--apply-step-size)), 120px);
    flex-wrap: wrap;
  }

  .apply-step__circle {
    width: var(--apply-step-size);
    height: var(--apply-step-size);
  }

  .apply-step__digit {
    font-size: 16px;
  }

  .apply-step + .apply-step::before {
    height: 10px;
    top: calc(var(--apply-step-size) / 2 - 5px);
  }

  .apply-step__arrow {
    width: 36px;
  }

  .apply-form {
    /* 横はみ出しの根治策：幅指定をautoに戻して「外側マージン込みで」収める */
    width: auto;

    margin-left: 8px;
    margin-right: 8px;
    padding: 12px;
    overflow-x: hidden;
  }


  .apply-form__confirm {
    width: auto;
    margin-left: 8px;
    margin-right: 8px;
    padding: 12px;
  }

  .apply-form__label {
    font-size: clamp(12px, 3.4vw, 14px);
  }

  .apply-form__input,
  .apply-form__select,
  .apply-form__textarea {
    padding: 8px 10px;  /* 既存を維持 */
    font-size: 14px;    /* 追記：欄の実効幅をわずかに節約 */
  }


  /* 身分証明書（スマホ時の並びを整える） */
  .apply-form__id-upload-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* 左右カラムの箱を消して、中身（注意文・身分証例・添付欄）を直下要素として並べ替え可能にする */
  .apply-form__id-upload-left,
  .apply-form__id-upload-right {
    display: contents;
  }

  /* 表示順：注意文 → 身分証例（免許証/マイナンバー）→ 添付欄（表面・裏面） */
  .apply-form__id-upload .apply-form__note--danger {
    order: 1;
    margin-bottom: 0;
  }

  .apply-form__id-upload .id-guide {
    order: 2;
    width: 100%;
    justify-content: flex-start;
  }

.id-guide__img {
  width: 120px;
  margin: 0 auto;
}

  .apply-form__id-upload .apply-form__inputwrap--files {
    order: 3;
  }

  .apply-form__label--sub {
    margin-bottom: 0;
    flex: 0 0 4.5em;
  }

  .apply-form__bank-item .apply-form__input,
  .apply-form__bank-item .apply-form__select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .apply-form__agree label {
    display: inline-block;
    word-break: break-word;
  }

  .apply-form__title {
    font-size: 24px;
  }

.file-field {
  flex-wrap: nowrap;
}

.file-chosen {
  flex-basis: auto;
  margin-left: 6px;
  margin-top: 0;
}

  #apply-section #credit-only {
    margin-left: 0;  /* モバイルでは左余白をなくして横幅の圧迫を防ぐ */
  }

.confirm-table {
  table-layout: fixed;
  word-break: break-word;
}
.confirm-table th {
  width: auto;
}

  .file-picker__menu {
    max-width: calc(100vw - 24px); /* 画面端に余白を残してクランプ */
    right: 0;                      /* 右寄せ配置 */
    left: auto;                    /* 左固定を解除 */
    overflow-wrap: anywhere;       /* 長い文言でも折り返す */
  }
}

/* ======================================== ■企業情報セクション ============================== */

#page-company {
  padding: 40px 20px 0;
  max-width: 750px;
  margin: 0 auto;
  margin: 0 auto;
  border-top: none;
  border-bottom: 1px solid transparent;
  margin-top: -1px;
  margin-bottom: -1px;
  background: url("./images/company_b.webp");
  background-position: center top;
}

.company-title {
  display: inline-block;
  position: relative;
  margin: calc(3.5em / 2) 0 calc(3.5em / 4) calc(3.5em / 2);
  margin-top: 70px;
  margin-bottom: 70px;
  margin-left: 0;
  font-size: 33px; /* PC共用サイズは現状維持（33px） */
  color: #0099ff;
  line-height: 1;
  font-weight: 800;
  z-index: 0;
  display: none;
}


.company-title::before {
  position: absolute;
  bottom: calc(-3.5em / 4);
  left:  calc(-3.5em / 2);
  z-index: -1;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background: rgba(0, 153, 255, 0.18);
  content: '';
}

.company-titlewrap {
  text-align: center;
}

.company-philosophy-titlewrap {
  text-align: center;
}

.company-heading {
  font-size: 20px;
  font-weight: 700;
  margin: 24px 0 12px;
  color: #0099ff;
}

.company-dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  border: 1px solid #d1d5db;
  overflow: hidden;
  margin-bottom: 100px;
  margin-top: 260px;
  background: #ffffff;
}

.company-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-column: 1 / -1;
  border-bottom: 1px solid #d1d5db;
}

.company-row dt,
.company-row dd {
  padding: 14px 16px;
  line-height: 1.7;
}

.company-row dt {
  background: #f8fafc;
  font-weight: 700;
  color: #374151;
  border-right: 1px solid #d1d5db;
}

.company-row dd {
  color: #111827;
  word-break: break-word;
  background: #ffffff;
}

.company-row:last-child {
  border-bottom: none;
}

/* 注記（24時間受付） */
.company-note {
  margin-top: 12px;
  font-size: 14px;
  color: #374151;
}

/* >>>>>>>>>>>>>>>>>>> [企業情報MQ] screen and (max-width: 1023px) and (min-width: 768px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .company-title {
    font-size: 29px; /* タブレット指定 */
  }

  .company-philosophy-title {
    font-size: 29px; /* 新規追加：タブレット指定 */
  }
}

/* >>>>>>>>>>>>>>>>>>> [企業情報MQ] screen and (max-width: 767px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 767px) {
  .company-dl {
    grid-template-columns: 1fr;
  }

  .company-row {
    grid-template-columns: 1fr;
  }

  .company-row dt {
    border-right: none;
    border-bottom: 1px solid #d1d5db;
  }

  .company-title {
    font-size: 24px;
  }

  .company-philosophy-title {
    font-size: 24px;
  }

  .company-row dt,
  .company-row dd {
    text-align: left;
  }
}


/* ======================================== ■フッターセクション ======================================== */
#footer-section {
  width: 100%;
  background: transparent;
  padding: 0 0 24px;
  text-align: center;
  color: #333;
  overflow-x: hidden;
  border-top: 1px solid transparent;
  margin-top: -1px;
}

.footer-section-inner {
  max-width: var(--max);
  margin: -1px auto 0;
  background: linear-gradient(to right, #66ccff, #0099ff);
  padding: 1px 20px 8px;
}

.footer-section-wrapper {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                  /* 申込み2の間隔に合わせる */
  box-shadow: 0 14px 24px rgba(0,0,0,0.15);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ===== Headline / Lead ===== */
.footer-section-text h2 {
  /* 画面幅に応じて自動縮小：最小18px～最大28pxの範囲で可変 */
  font-size: clamp(18px, 6.2vw, 28px);
  font-weight: 800;
  margin: 5px 0 12px;
  color: #0099ff;
  white-space: nowrap; /* 見出しは改行させない */
}

.footer-section-text p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.footer-section-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: center;
  align-items: flex-end;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding-bottom: 24px; /* 申込み2の余白仕様と同じ（18px行高 + 6pxオフセット） */
}

.footer-cta-line-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  width: 100%;
  max-width: 280px;  /* 340px → 280px */
}

/* 推奨ラベル（吹き出し本体のみ表示：当面の仕様合わせ） */
.footer-recommend-badge{
  display: none; /* 申し込み2と同様、現状は非表示。再開時は display:inline-block; */
  padding: 6px 12px;
  font-size: 14px; font-weight: 700; line-height: 1;
  color: #fff; white-space: nowrap; border-radius: 9999px;
  background: linear-gradient(to right, #00d84b, #00B900);
}

/* 推奨文（PCはabsolute、SP/Tabは後述でstaticに上書き） */
.footer-cta-note{
  font-size: 12px; line-height: 1.5; color: #666;
  margin: 0; text-align: center; white-space: nowrap;
  position: absolute;             /* PC：レイアウトから外す */
  left: 50%; transform: translateX(-50%);
  top: calc(100% + 6px);          /* ボタン直下に重ねる */
  pointer-events: none;           /* 文言上でも下のボタンをクリック可 */
}

.footer-section-button--line{
  background: linear-gradient(to right, #00d84b, #00B900);
  border-bottom: 7px solid #008c00;
  color: #fff;
}

.footer-section-button--line:hover{
  background: linear-gradient(to right, #1ae466, #00a800);
  border-bottom: 1px solid #008c00; /* 押し込み時に細くする */
  color: #fff;
}

.footer-section-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;            /* 申込み2と同じ */
  color: #fff;
  font-weight: bold;
  font-size: 18px;            /* 20px → 18px */
  border-top: none;
  border-right: none;
  border-left: none;  /* 下は触らない */
  border-radius: .3rem;
  text-decoration: none;
  transition: .2s ease;
  width: 100%;
  max-width: 280px;           /* 340px → 280px（申込み2） */
  height: 56px;               /* 64px → 56px（申込み2） */
  box-sizing: border-box;
}

.footer-section-button img {
  width: 24px;              /* 32px → 24px */
  height: auto;
  vertical-align: middle;
  display: inline-block;
}

/* Button Variants */
.footer-section-button--primary{
  background: linear-gradient(to right, #ffb200, #ff6e00);
  border-bottom: 7px solid #d45500;
}
.footer-section-button--primary:hover{
  border-bottom-width: 1px;        /* transformはbtn-raiseに集約 */
}

.footer-section-button--secondary{
  background: linear-gradient(to right, #00b7ff, #0066ff);
  border-bottom: 7px solid #005bb5;
}
.footer-section-button--secondary:hover{
  background: linear-gradient(to right, #00d2ff, #0066ff);
  border-bottom-width: 1px;        /* transformはbtn-raiseに集約 */
}

/* Raise effect (共通) */
.btn-raise:hover { transform: translateY(5px); }
.footer-section-button:hover { opacity: .9; }

.footer-legal{
  margin-top: 32px;
  text-align: center;
  color: #fff;
}

.footer-logo-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;            /* 画像範囲だけ白い背景 */
  border-radius: 9999px;       /* 円形 */
  width: 140px;
  height: 140px;
  padding: 12px;
  margin: 0 auto 16px;
}
.footer-logo-badge img{
  max-width: 100%;
  height: auto;
  display: block;
}

.footer-copyright{
  font-size: 12px;
  opacity: .95;
}

/* >>>>>>>>>>>>>>>>>>> [フッターMQ] screen and (max-width: 767px) <<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 767px) {
  .footer-section-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px; /* 申込み2のSP/Tab時と同等の緩い余白 */
  }

  .footer-section-button {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
  }

  .footer-cta-line-box{
    max-width: 250px;
    gap: 0;
  }

.footer-cta-note{
  position: static;
  left: auto; top: auto; transform: none;
  margin-top: 0;
  white-space: normal;
  pointer-events: auto;   /* ← モバイルでは選択/コピー可能に */
}

  .footer-button-web{ margin-bottom: 18px; }

  #footer-section {
    background: transparent;  /* ← フル幅背景を無効化（中央750pxに揃える） */
  }

.footer-section-text h2 {
  white-space: normal;
  word-break: break-word;
}
}

/* >>>>>>>>>>>>>>>>>>> [フッターMQ] screen and (min-width: 768px) and (max-width: 1023px) <<<<<<<<<<<<<<<<<<< */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .footer-section-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px; /* 申込み2のTab時と同等 */
  }

  .footer-section-button {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }
  .footer-cta-line-box{
    max-width: 380px;
    gap: 0;
  }
  .footer-cta-note{
    position: static;
    left: auto; top: auto; transform: none;
    margin-top: 0; white-space: nowrap;
    pointer-events: auto;
  }
  .footer-button-web{ margin-bottom: 18px; }

  #footer-section {
    background: transparent;  /* ← フル幅背景を無効化（中央750pxに揃える） */
  }
}