/* ===================================
   全体共通設定（リセット・文字など）
=================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
  line-height: 1.6;
}


/* =========================================================================================================
   ■ヘッダーセクション
========================================================================================================= */
#site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  z-index: 1500;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  --h-scale: clamp(0.70, 1.2vw, 1);
}

#site-header .container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  height: 120px;
  padding: 0 15px;
  width: 100%;
  max-width: none;
  margin: 0;
}

#logo img {
  height: 60px;
  width: auto;
  display: block;
  margin: 0 auto;
}

#main-nav {
  display: flex;
  justify-self: center;
}

#main-nav ul {
  display: flex;
  list-style: none;
  gap: clamp(12px, 2vw, 24px);
  justify-content: center;
  margin: 0;
  padding: 0;
}

#main-nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: clamp(12px, 1.6vw, 16px);
  line-height: 1.2;
}

.header-right {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 16px);
  justify-content: flex-end;
  justify-self: end;
  width: auto;
}

.header-cta-box {
  padding: clamp(6px, 0.8vw, 8px) clamp(10px, 1.2vw, 12px);
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 16px);
  flex-wrap: nowrap;
}

#site-header .tel-icon {
  display: flex;
  align-items: center;
}

#site-header .tel-icon img {
  margin: 0;
}

#site-header .tel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
}

#site-header .tel-number {
  display: block;
}

#site-header .header-cta-box .tel-number .tel-inline-icon {
  height: 1em;
  max-height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: -0.08em;
  margin-right: 0;
}

.header-cta-box .tel-icon img {
  width: clamp(14px, 1.6vw, 20px);
  height: auto;
  display: block;
}

.header-cta-box .tel-number {
  font-family: 'Arial Black', Impact, sans-serif;
  font-weight: 900;
  font-size: clamp(19px, 2.1vw, 29px);
  letter-spacing: 0.5px;
  color: #000;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 8px);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.header-cta-box .tel-sub {
  font-size: clamp(9px, 1.1vw, 11px);
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  margin-left: 10px;
}

.header-cta-box .tel-sub .tel-note {
  color: #0099ff;
}

.tel {
  font-weight: bold;
  color: #444;
}

.cta-button {
  background-color: #0288D1;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.2;
}

#site-header .cta-button {
  position: static;
  top: auto;
  right: auto;
}

.cta-button.large.header {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  background: linear-gradient(135deg, #4fc3f7, #0288d1);
  transition: all 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.cta-button.large.header:hover {
  background: linear-gradient(to right, #ff9933, #ff6600);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.cta-button.large.header .line1 {
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 900;
  white-space: nowrap;
  display: block;
  text-align: center;
  font-variant-east-asian: proportional-width;
  font-feature-settings: "pwid";
}

.cta-button.large.header .line2 {
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 700;
  margin-top: clamp(1px, 0.3vw, 2px);
  white-space: nowrap;
  display: block;
  text-align: center;
  font-variant-east-asian: proportional-width;
  font-feature-settings: "pwid";
}

.hamburger {
  display: none;
  font-size: 30px;
  font-weight: 900;
  background: none;
  border: none;
  color: #0099ff;
  cursor: pointer;
  align-self: center;
  justify-self: end;
  height: 120px;
  line-height: 120px;
}

.hamburger-label {
  display: none;
  font-weight: 900;
  font-size: 18px;
  line-height: 120px;
  height: 120px;
  color: #0099ff;
  margin-left: 6px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  align-self: center;
  justify-self: start;
}

.hamburger-label:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  z-index: 2000;
  padding: 24px 16px;
  box-shadow: none;
  transition: transform 0.3s ease;
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 16px;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.mobile-menu ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: #000;
  font-weight: bold;
  font-size: 16px;
  justify-content: flex-start;
}

.mobile-menu ul li::before {
  content: "●";
  color: #0099ff;
  font-size: 10px;
  line-height: 1;
}

.mobile-menu ul li a {
  font-size: 18px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

.mobile-menu-logo {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.mobile-menu-logo img {
  height: clamp(calc(48px * 2 / 3), calc(5.5vw * 2 / 3), calc(80px * 2 / 3));
  width: auto;
  display: block;
  margin: 0 auto;
}

.mobile-menu-bottom {
  margin-top: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  padding-bottom: 8px;
  position: sticky;
  bottom: 0;
}

.mobile-menu-bottom .tel-number {
  font-family: 'Arial Black', Impact, sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 1px;
  color: #000;
  text-decoration: none;
}

.mobile-menu-bottom .tel-sub {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  line-height: 1.4;
}

.mobile-menu-bottom .tel-sub .tel-note {
  color: #0099ff;
}

.mobile-menu-bottom .btn-block {
  width: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-menu-bottom .cta-button.large.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 14px;
  min-width: 220px;
  border-radius: 10px;
  background: linear-gradient(to right, #00aaff, #0066cc);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  background-size: 200% 100%;
  background-position: left;
}

.mobile-menu-bottom .cta-button.large.header:hover {
  background: linear-gradient(to right, #ff6f00, #ffb347);
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.mobile-menu-bottom .cta-button.large.header:active {
  transform: scale(0.97);
}

.mobile-menu-bottom .cta-button.large.header .btn-text-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}

.mobile-menu-bottom .cta-button.large.header .line1 {
  font-size: 22px;
  font-weight: 900;
  white-space: nowrap;
}

.mobile-menu-bottom .cta-button.large.header .line2 {
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
  white-space: nowrap;
}

.close-btn {
  font-size: 18px;
  font-weight: 900;
  background: none;
  border: none;
  color: #0099ff;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.close-icon {
  font-size: 2.2em;
  font-weight: bold;
  margin-right: 4px;
  vertical-align: middle;
  display: inline-block;
}

/* ▼▼▼▼▼タブレット▼▼▼▼▼ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #site-header .container {
    grid-template-columns: auto 1fr auto;
    height: 96px;
  }

  #main-nav {
    display: none;
  }

  .header-right {
    justify-self: end;
    width: auto;
    display: grid;
    grid-template-columns: auto;
    align-items: center;
    gap: clamp(8px, 1.2vw, 16px);
  }

  .hamburger {
    display: block;
    grid-column: 1;
    margin-left: 0;
    align-self: center;
    height: 96px;
    line-height: 96px;
  }

  .hamburger-label {
    display: inline-block;
    grid-column: 2;
    align-self: center;
    height: 96px;
    line-height: 96px;
  }

  .header-cta-box {
    display: none;
  }

  #logo img {
    height: 40px;
  }

  .cta-button.large.header {
    display: none;
  }
}

/* ▼▼▼▼▼スマホ▼▼▼▼▼ */
@media screen and (max-width: 767px) {
  #main-nav {
    display: none;
  }

  .header-right {
    justify-self: end;
    width: auto;
    display: grid;
    grid-template-columns: auto;
    align-items: center;
    gap: clamp(8px, 1.2vw, 16px);
  }

  .header-cta-box {
    display: none;
  }

  .hamburger {
    display: block;
    grid-column: 1;
    margin-left: 0;
    align-self: center;
    height: 96px;
    line-height: 96px;
  }

  .hamburger-label {
    display: none;
    grid-column: 2;
    align-self: center;
  }

  #logo img {
    height: 40px;
  }

  .cta-button.large.header {
    display: none;
  }

  #site-header .container {
    height: 96px;
  }
}

/* ▼▼▼▼▼極小スマホ▼▼▼▼▼ */
/* 追加のスタイルがあればここに記述 */


/* =========================================================================================================
   ■固定コンタクトセクション
========================================================================================================= */

.floating-contacts {
  position: fixed;
  bottom: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  right: 12px;
  right: calc(12px + env(safe-area-inset-right));
  top: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 3000;
}

.floating-contacts .fc-btn {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.floating-contacts .fc-btn img {
  width: 50px;
  height: 50px;
  display: block;
}

.floating-contacts .fc-mail {
  background: orange;
}

.floating-contacts .fc-tel {
  background: #1e90ff;
}

.floating-contacts .fc-line {
  background: #00d84b;
}

.floating-contacts .fc-mail:hover {
  background: #e69500;
}

.floating-contacts .fc-tel:hover {
  background: #1b82e6;
}

.floating-contacts .fc-line:hover {
  background: #00c043;
}

.floating-contacts.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ▼▼▼▼▼スマホ▼▼▼▼▼ */
@media screen and (max-width: 767px) {
  .floating-contacts {
    right: 10px;
    right: calc(10px + env(safe-area-inset-right));
    bottom: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto;
    transform: none;
    gap: 10px;
  }

  .floating-contacts .fc-btn {
    width: 64px;
    height: 64px;
  }

  .floating-contacts .fc-btn img {
    width: 45px;
    height: 45px;
  }
}

/* =========================================================================================================
   ヒーローセクション（最初の大見出し）
========================================================================================================= */
#hero {
  padding: 0;
  text-align: center;
}

#hero img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
}

#hero .hero-visual {
  position: relative;
  display: grid;
  line-height: 0;
  font-size: 0;
  width: 100%;
  overflow: hidden;
}

#hero .hero-visual picture {
  display: block;
  line-height: 0;
  grid-area: 1 / 1;
  width: 100%;
}

#hero .hero-visual::after {
  content: "※1 表示の件数・総額は推計値であり、実績・保証ではありません。";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  font-size: 10px;
  line-height: 1;
  color: #808080;
  background: transparent;
  margin: 0;
  padding: 0;
  border-radius: 0;
  text-shadow: none;
}

#hero .hero-copy {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  padding: clamp(12px, 4vw, 40px);
  box-sizing: border-box;
}

#hero .hero-benefits {
  position: absolute;
  top: clamp(0px, 1vw, 16px);
  left: clamp(12px, 4vw, 40px);
  z-index: 3;
  font-size: var(--benefit-fs, clamp(14px, 1.9vw, 18px));
  line-height: 1.6;
  color: #808080;
  font-weight: 800;
  padding: 12px 16px;
  box-sizing: border-box;
}

#hero .hero-benefits::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: -1;
}

#hero .hero-benefits .hero-benefits-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-grid;
  grid-template-columns: 1fr;
  row-gap: 6px;
  width: max-content;
}

#hero .hero-benefits .hero-benefits-list li {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  background: rgba(0, 153, 255, 0.6);
  border: 1px solid #0099ff;
  color: #fff;
  border-radius: 9999px;
  line-height: 1;
  font-size: 0.85em;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #fff;
}

#hero .hero-benefits .hero-benefits-list li + li {
  margin-top: 0;
}

#hero .hero-copy .hero-mainline {
  margin: 0;
  color: #fff;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  font-size: 3.2vw;
  text-shadow: 0 2px 6px rgba(204, 204, 204, 0.8);
  overflow-wrap: anywhere;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 0.38em 0 0.24em;
}

#hero .hero-copy .hero-line {
  display: block;
  width: 100%;
  color: #808080;
  line-height: 1;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  text-shadow: none;
}

#hero .hero-copy .hero-mainline .hero-line:nth-child(n + 2) {
  display: inline;
}

#hero .hero-copy .hero-mainline::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(-1 * clamp(12px, 4vw, 40px));
  right: calc(-1 * clamp(12px, 4vw, 40px));
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
}

#hero .hero-copy .hero-mainline .em-blue {
  color: #0099ff;
  text-shadow: none;
}

.hero-note {
  background: linear-gradient(to right, #0099ff, #66ccff);
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-note .note-grid {
  display: grid;
  grid-template-columns: var(--c1) 1px var(--c3) 1px var(--c5) var(--c1) 1px var(--c3) 1px var(--c5);
  grid-auto-rows: var(--rowH, 44px);
  align-items: center;
  column-gap: 24px;
  row-gap: 0;
  position: relative;
}

.hero-note .note-grid .rowbox {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 0;
  box-sizing: border-box;
  background: transparent;
  position: relative;
  z-index: 0;
}

.hero-note .note-grid .cell,
.hero-note .note-grid .vline {
  position: relative;
  z-index: 1;
}

.hero-note .note-grid .vline {
  display: block;
  width: 1px;
  height: 0.9em;
  background-color: #fff;
  justify-self: center;
  align-self: center;
}

.hero-note .note-grid .cell {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  white-space: nowrap;
}

.hero-note .note-grid .r1.c3,
.hero-note .note-grid .r2.c3 {
  justify-self: center;
}

.hero-note .note-grid .r1.c1,
.hero-note .note-grid .r2.c1 {
  padding-left: 12px;
}

.hero-note .note-grid .r1.c5,
.hero-note .note-grid .r2.c5 {
  padding-right: 12px;
}

.hero-note .note-grid .small-text {
  font-size: 0.5em;
  line-height: 1;
}

.hero-note .note-grid .today-label {
  margin-right: 0.1em;
}

.hero-note .note-grid .r1 {
  grid-row: 1;
}

.hero-note .note-grid .r2 {
  grid-row: 1;
}

.hero-note .note-grid .r1.c1 {
  grid-column: 1;
}

.hero-note .note-grid .r1.c2 {
  grid-column: 2;
}

.hero-note .note-grid .r1.c3 {
  grid-column: 3;
}

.hero-note .note-grid .r1.c4 {
  grid-column: 4;
}

.hero-note .note-grid .r1.c5 {
  grid-column: 5;
}

.hero-note .note-grid .r2.c1 {
  grid-column: 6;
}

.hero-note .note-grid .r2.c2 {
  grid-column: 7;
}

.hero-note .note-grid .r2.c3 {
  grid-column: 8;
}

.hero-note .note-grid .r2.c4 {
  grid-column: 9;
}

.hero-note .note-grid .r2.c5 {
  grid-column: 10;
}

.hero-note .note-grid .rowbox.r1 {
  grid-column: 1 / 6;
  grid-row: 1;
}

.hero-note .note-grid .rowbox.r2 {
  grid-column: 6 / 11;
  grid-row: 1;
}

.hero-note .note-mark {
  position: absolute;
  top: 3px;
  left: -26px;
  z-index: 2;
  display: block;
  font-size: 0.5em;
  line-height: 1;
  margin: 0;
  color: #fff;
  pointer-events: none;
}

/* ▼▼▼▼▼タブレット▼▼▼▼▼ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
.hero-note {
  display: flex;
  width: 100%;
  margin: 0;
  height: auto;
  flex-wrap: wrap;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  padding: 8px 16px;
  row-gap: 6px;
  font-size: clamp(20px, 3.0vw, 28px);
}

  .hero-note .note-mark {
    position: absolute;
    top: 3px;
    left: -26px;
    z-index: 2;
    display: block;
    font-size: 0.5em;
    line-height: 1;
    margin: 0;
    color: #fff;
    pointer-events: none;
  }

.hero-note .note-grid {
  grid-template-columns: max-content 1px max-content 1px max-content;
  grid-auto-rows: var(--rowH, 60px);
  column-gap: 16px;
  row-gap: 8px;
  max-width: 100%;
  min-width: 0;
  position: relative;
  --rowH: 48px;
}

  .hero-note .note-grid .r1 {
    grid-row: 1;
  }

  .hero-note .note-grid .r2 {
    grid-row: 2;
  }

  .hero-note .note-grid .r1.c1 {
    grid-column: 1;
  }

  .hero-note .note-grid .r1.c2 {
    grid-column: 2;
  }

  .hero-note .note-grid .r1.c3 {
    grid-column: 3;
  }

  .hero-note .note-grid .r1.c4 {
    grid-column: 4;
  }

  .hero-note .note-grid .r1.c5 {
    grid-column: 5;
  }

  .hero-note .note-grid .r2.c1 {
    grid-column: 1;
  }

  .hero-note .note-grid .r2.c2 {
    grid-column: 2;
  }

  .hero-note .note-grid .r2.c3 {
    grid-column: 3;
  }

  .hero-note .note-grid .r2.c4 {
    grid-column: 4;
  }

  .hero-note .note-grid .r2.c5 {
    grid-column: 5;
  }

  .hero-note .note-grid .rowbox.r1 {
    grid-column: 1 / 6;
    grid-row: 1;
  }

  .hero-note .note-grid .rowbox.r2 {
    grid-column: 1 / 6;
    grid-row: 2;
  }

  .hero-note .note-grid .rowbox {
    border-width: 1px;
  }

  .hero-note .note-grid .vline {
    width: 1px;
    height: 1.15em;
  }

.hero-note .note-grid .small-text {
  font-size: 0.62em;
}

  #hero .hero-copy {
    top: 86%;
  }

  #hero .hero-benefits {
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 900px);
    padding: 0;
    font-size: clamp(18px, 2.4vw, 22px);
  }

  #hero .hero-benefits .hero-benefits-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 10px;
    width: 100%;
  }

  #hero .hero-benefits .hero-benefits-list li {
    width: 100%;
    text-align: center;
    font-size: 1.05em;
  }

  #hero .hero-copy .hero-mainline::before {
    content: none;
  }

  #hero .hero-copy .hero-mainline {
    font-size: 6.2vw;
  }

  #hero .hero-copy .hero-mainline .hero-line:nth-child(n + 2) {
    display: block;
  }

  #hero {
    overflow-x: hidden;
  }
}

/* ▼▼▼▼▼スマホ▼▼▼▼▼ */
@media screen and (max-width: 767px) {
  #hero .hero-note {
    height: auto;
    flex-wrap: wrap;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    padding: 8px 12px;
    box-sizing: border-box;
    row-gap: 6px;
    font-size: clamp(16px, 4.6vw, 22px) !important;
  }

  .hero-note .note-mark {
    top: 2px;
    left: -24px;
  }

  #hero .hero-note .note-grid {
    grid-template-columns: max-content 1px max-content 1px max-content;
    grid-auto-rows: var(--rowH, 48px);
    column-gap: 12px;
    row-gap: 6px;
    max-width: 100%;
    min-width: 0;
    --rowH: 38px;
  }

  .hero-note .note-grid .small-text {
    font-size: 0.60em;
  }

  .hero-note .note-grid .r1 {
    grid-row: 1;
  }

  .hero-note .note-grid .r2 {
    grid-row: 2;
  }

  .hero-note .note-grid .r1.c1 {
    grid-column: 1;
  }

  .hero-note .note-grid .r1.c2 {
    grid-column: 2;
  }

  .hero-note .note-grid .r1.c3 {
    grid-column: 3;
  }

  .hero-note .note-grid .r1.c4 {
    grid-column: 4;
  }

  .hero-note .note-grid .r1.c5 {
    grid-column: 5;
  }

  .hero-note .note-grid .r2.c1 {
    grid-column: 1;
  }

  .hero-note .note-grid .r2.c2 {
    grid-column: 2;
  }

  .hero-note .note-grid .r2.c3 {
    grid-column: 3;
  }

  .hero-note .note-grid .r2.c4 {
    grid-column: 4;
  }

  .hero-note .note-grid .r2.c5 {
    grid-column: 5;
  }

  .hero-note .note-grid .rowbox.r1 {
    grid-column: 1 / 6;
    grid-row: 1;
  }

  .hero-note .note-grid .rowbox.r2 {
    grid-column: 1 / 6;
    grid-row: 2;
  }

  .hero-note .note-grid .vline {
    width: 1px;
    height: 1.20em;
  }

  .hero-note .note-grid .rowbox {
    border-width: 1px;
  }

  #hero .hero-copy .hero-mainline {
    font-size: 6.0vw;
    padding: 0.32em 0 0.24em;
  }

  #hero .hero-copy {
    top: 84%;
  }

  #hero .hero-benefits {
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 900px);
    padding: 0;
  }

  #hero .hero-benefits .hero-benefits-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 4px;
    row-gap: 4px;
    width: 100%;
  }

  #hero .hero-benefits .hero-benefits-list li {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    font-size: clamp(7px, 2.4vw, 0.90em);
    padding: 5px 5px;
    line-height: 1;
  }

  #hero .hero-copy .hero-mainline::before {
    content: none;
  }

  #hero .hero-copy .hero-mainline .hero-line:nth-child(n + 2) {
    display: block;
  }
}

/* ▼▼▼▼▼極小スマホ▼▼▼▼▼ */
@media screen and (max-width: 360px) {
  #hero .hero-benefits .hero-benefits-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 4px;
    width: 100%;
  }

  #hero .hero-benefits .hero-benefits-list li {
    font-size: clamp(6px, 2.8vw, 0.90em);
    padding: 6px 5px;
  }
}

/* ===================================
    ■1秒診断セクション
=================================== */
html, body {
  margin: 0;
  padding: 0;
}

#instant-check.instant-check {
  scroll-margin-top: 120px;
  padding: 40px 16px;
  box-sizing: border-box;

  background-color: #fff;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 153, 255, 0.10) 0 3px,
    rgba(0, 153, 255, 0.00) 3px 6px
  );
  background-size: auto;
}

#instant-check-result-box {
  scroll-margin-top: 120px;
}

.instant-check__heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 48px 0 48px;
}

.instant-check__heading-inner {
  position: relative;
  display: inline-flex;     /* デフォルトの横並び */
  align-items: center;      /* 画像と文字を縦方向中央に */
  gap: 12px;                /* お好みで 8〜16px などに調整可 */
  /* flex-direction と padding-top の指定は不要 */
}

/* 見出し：1秒診断（特徴h2と同意匠） */
.instant-check__title {
  display: inline-block;
  position: relative;
  /* 余白は親 .instant-check__heading の設定を尊重 */
  font-size: 33px;          
  color: #0099ff;           
  line-height: 1;           
  z-index: 0;               
}

.instant-check__title::before {
  position: absolute;
  bottom: calc(-3.5em / 4);  /* 特徴セクションのh2::beforeと同じ */
  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: '';
}


/* === 診断結果（初期は非表示） ==================== */
.instant-check__result[hidden] { display: none; }

.instant-check__result {
  margin: 0;
  background: transparent; /* 内側の白背景を撤去 */
  border: none;            /* 枠線を撤去 */
  border-radius: 0;        /* 角丸も不要に */
  padding: 0;              /* 余白は親パネルに任せる */
  text-align: center;
}

.instant-check__result-title {
  font-size: 22px;
  font-weight: 800;
  color: #183a4a;     /* 入力ラベルと同系色 */
  margin: 0 0 8px;
}

#instant-check-cta-box .instant-check__result-title {
  text-align: center;
  display: block; /* h3を確実にブロック扱いに */
}

#instant-check-result-box .instant-check__result-title {
  font-size: 26px;
}

.instant-check__result-status {
  font-size: 16px;     /* 少し小さく */
  color: #183a4a;
  margin: 0 0 8px;
}

.instant-check__result-amount {
  display: flex;
  gap: 18px;                 /* ラベルと数値の間を少し広げる */
  justify-content: center;   /* 中央寄せ（従来通り） */
  align-items: center;       /* 文字の上下を中央で揃える */
  font-size: 18px;
  color: #183a4a;
  margin: 4px 0 14px;        /* わずかに上下に余白を追加 */
}

.instant-check__fee-note {
  font-size: 14px;
  line-height: 1.6;
  color: #183a4a;
  text-align: center;
  margin: 6px 0 0;
}

/* ラベルと数値を分離（ラベル=外、数値=内） */
.instant-check__yen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0;              /* テキストノードを消し、strongのみ表示させる土台 */
  white-space: nowrap;
}


/* 金額だけを枠内（角丸なし・影なし）に */
.instant-check__yen strong {
  display: inline-block;
  font-size: 28px;        /* ← 換金率と同じに統一 */
  font-weight: 800;
  line-height: 1;
  padding: 8px 14px;      /* ← 換金率と同じに統一 */
  background: #fff;       /* 白い枠（境界線なし） */
  border: none;           /* ← 枠線をなくす */
  border-radius: 0;       /* 角丸なし */
  box-shadow: none;       /* 影なし */
}

/* 「換金率 90％」も同様に分離表示 */
.instant-check__rate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0;              /* テキストノードの「換金率 」を消す */
  white-space: nowrap;
}

.instant-check__rate::before {
  content: "換金率";
  font-size: 14px;
  font-weight: 700;
  color: #183a4a;
  opacity: .9;
}

.instant-check__yen::before {
  content: "換金額";
  font-size: 14px;
  font-weight: 700;
  color: #183a4a;
  opacity: .9;
}

/* ％の数値だけ枠内（角丸なし・影なし） */
.instant-check__rate strong {
  display: inline-block;
  font-size: 28px;        /* ← 金額と同じ28px */
  font-weight: 800;
  line-height: 1;
  padding: 8px 14px;      /* ← 金額と同じ余白 */
  background: #fff;       /* 白い枠（境界線なし） */
  border: none;           /* ← 枠線をなくす */
  border-radius: 0;       /* 角丸なし */
  box-shadow: none;       /* 影なし */
}

.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);

  /* 追加：<a>でも下線が出ないようにする */
  text-decoration: none;
}

/* 円のハイライト（submit と同様） */
.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);
}

/* 右向き矢印（submit と同様） */
.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;
}

/* ホバー時も下線を出さない（UAの既定を打ち消し） */
.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__sep {
  text-align: center;
  font-size: 24px;
  color: #183a4a;
  margin: 18px 0;
}

.instant-check__sep[hidden] {
  display: none !important;
}

.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; /* 既存のlinear-gradientを無効化 */
}

/* セクション内の最大幅センター寄せ */
.instant-check__container {
  max-width: 1120px;
  margin: 0 auto;
}

.instant-check__box {
  background: #fff;
  border-radius: 14px;
  /* 360°で判別できるように薄いアウトライン + 拡散影を重ねる */
  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,.06);     /* 近距離の控えめな影 */
  padding: 28px 22px;
  position: relative;
}

/* 角のアクセント（左下・右上の斜めカット風） */
.instant-check__box::before,
.instant-check__box::after {
  content: none;     /* 装飾を出さない */
}

/* 内側の薄グレー面 */
.instant-check__panel {
  background: rgba(0,153,255,0.10); /* #0099ff を薄く（10%） */
  border-radius: 10px;
  padding: 22px;
  overflow: hidden;
}

#instant-check-result-box .instant-check__panel {
  background: rgba(0,170,85,0.12); /* 薄い緑 */
}

#instant-check-cta-box .instant-check__panel {
  background: rgba(255,105,180,0.12); /* 薄いピンク */
}

#instant-check-cta-box {
  margin-bottom: 48px;
}

.instant-check__cta-note {
  font-size: 14px;          /* 見出しより小さく */
  line-height: 1.6;
  color: #183a4a;           /* 既存のテキスト色系統に合わせる */
  text-align: center;       /* CTA見出し・ボタンに合わせて中央揃え */
  margin: 6px 0 16px;       /* 見出しとの間・ボタンとの間に余白 */
}



/* タブレット */
@media (min-width: 769px) and (max-width: 1024px) {
  /* フォーム全体：1列にする（3行になる） */
  .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.instant-check {
    scroll-margin-top: 96px; /* タブレットのヘッダーも96px */
  }

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

  .instant-check__title {
    font-size: 29px;
  }
}


/* スマホ */
@media (max-width: 768px) {
  .instant-check__form {
    grid-template-columns: 1fr; /* 3行（1列） */
  }

  .instant-check__field {
    display: grid;
    grid-template-columns: 30% 1fr; /* ラベル30% + 入力1fr（入力列を拡大） */
    column-gap: 10px;               /* 列間余白（変更なし） */
    align-items: center;
  }

  .instant-check__label {
    text-align: left;
    white-space: nowrap;
    font-size: clamp(10px, 2.8vw, 14px);
  }

  .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);
  }

/* 2つのブロック（換金率/換金額）が狭い幅で重なるのを防ぐ */
  .instant-check__result-amount {
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  /* 「換金率」「換金額」のラベルを自動縮小して消失を防ぐ */
  .instant-check__rate::before,
  .instant-check__yen::before {
    font-size: clamp(10px, 3vw, 13px);  /* もう一段小さく */
  }

  /* 数値ボックスも自動縮小＋内側余白を調整してハミ出し防止 */
  .instant-check__rate strong,
  .instant-check__yen strong {
    font-size: clamp(16px, 6.2vw, 22px);
    padding: 5px 8px;
  }

  #instant-check.instant-check {
    padding-left: 8px;   /* 16px → 8px に縮小 */
    padding-right: 8px;  /* 16px → 8px に縮小 */
  }

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

  #instant-check.instant-check {
    scroll-margin-top: 96px; /* モバイルのヘッダーは96px */
  }

  .instant-check__fee-note {
    font-size: clamp(11px, 3vw, 13px);
  }

  .instant-check__title {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    font-size: 24px;
    line-height: 1.2;
  }
}


/* =========================================================================================================
   ■取扱い決済セクション
========================================================================================================= */
#payment-logos {
  padding: 60px 20px;
  text-align: center;
  background-image: url("images/payment/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#payment-logos h2 {
  display: inline-block;
  position: relative;
  margin: 50px 0 40px 0;
  font-size: 33px;
  color: #0099ff;
  line-height: 1;
  z-index: 0;
}

#payment-logos h2::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: "";
}

#payment-logos .logo-wrapper {
  background-color: #fff;
  padding: 30px;
  margin: 40px auto;
  max-width: 1000px;
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

#payment-logos .logo-box {
  border: 1px solid #0099ff;
  border-radius: 0;
  padding: 20px;
  margin: 0 auto 40px;
  max-width: 100%;
  box-sizing: border-box;
}

#payment-logos .logo-box--card,
#payment-logos .logo-box--app {
  padding-bottom: 0;
}

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

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

#payment-logos .logo-title {
  color: #0099ff;
  font-weight: 800;
  font-size: 32px;
  display: block;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: center;
}

#payment-logos .logo-box--app > .logo-title,
#payment-logos .logo-box--card > .logo-title {
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: clamp(18px, 5vw, 30px);
  line-height: 1.1;
}

#payment-logos .logo-message {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  color: #333;
  margin: 20px auto;
  max-width: 800px;
}

#payment-logos .logo-arrow {
  text-align: center;
  margin: 15px 0;
}

#payment-logos .logo-arrow img {
  height: 2.5cm;
  width: auto;
}

#payment-logos .logo-note {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  color: #333;
  margin: 30px auto 0;
  max-width: 900px;
}

#payment-logos .logo-note-small {
  font-size: 12px;
  color: #666;
  text-align: right;
  margin: 8px 0 0;
}

#payment-logos .hl-underline {
  background: linear-gradient(transparent 60%, #ffea00 60%);
  font-size: 30px;
  font-weight: 700;
}

#payment-logos .logo-grid {
  display: grid;
  justify-items: center;
  gap: 24px;
}

#payment-logos .logo-grid img {
  max-width: 100%;
  max-height: 70px;
  height: auto;
  width: auto;
  object-fit: contain;
}

#payment-logos .logo-grid--card {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#payment-logos .logo-grid--apps,
#payment-logos .logo-grid--carrier {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ▼▼▼▼▼タブレット▼▼▼▼▼ */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  #payment-logos .logo-grid--card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #payment-logos .logo-grid--apps,
  #payment-logos .logo-grid--carrier {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #payment-logos .logo-note {
    text-align: left;
  }
  #payment-logos .logo-note-small {
    text-align: right;
  }
  #payment-logos h2 {
    font-size: 29px;
  }
}

/* ▼▼▼▼▼スマホ▼▼▼▼▼ */
@media screen and (max-width: 767px) {
  #payment-logos .logo-grid--card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #payment-logos .logo-grid--apps,
  #payment-logos .logo-grid--carrier {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #payment-logos .logo-title {
    font-size: clamp(14px, 6.2vw, 36px);
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    margin: 0 auto;
    text-align: center;
  }
  #payment-logos .logo-box--card > .logo-title,
  #payment-logos .logo-box--app > .logo-title {
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: clamp(14px, 5vw, 24px);
    line-height: 1.1;
  }
  #payment-logos .hl-underline {
    font-size: 20px;
  }
  #payment-logos .logo-message {
    font-size: 16px;
    line-height: 1.7;
    word-break: break-word;
  }
  #payment-logos .logo-note {
    font-size: 14px;
    line-height: 1.8;
    word-break: break-word;
  }
  #payment-logos .logo-note-small {
    text-align: left;
    margin: 8px 0 0;
  }
  #payment-logos .logo-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px;
    margin: 0 auto 20px;
  }
  #payment-logos .logo-wrapper {
    padding: 16px;
  }
  #payment-logos .logo-grid img {
    max-height: 56px;
  }
  #payment-logos h2 {
    font-size: 24px;
  }
}

/* ▼▼▼▼▼極小スマホ▼▼▼▼▼ */
@media screen and (max-width: 359px) {
  #payment-logos .logo-grid--card,
  #payment-logos .logo-grid--apps,
  #payment-logos .logo-grid--carrier {
    grid-template-columns: 1fr;
  }
  #payment-logos .logo-grid {
    gap: 12px;
  }
  #payment-logos .logo-box {
    padding: 12px;
    margin: 0 auto 24px;
  }
  #payment-logos .hl-underline {
    font-size: 18px;
  }
  #payment-logos .logo-message {
    font-size: 14px;
  }
  #payment-logos .logo-note {
    font-size: 13px;
  }
  #payment-logos .logo-box--card > .logo-title,
  #payment-logos .logo-box--app > .logo-title {
    font-size: clamp(12px, 4.5vw, 20px);
  }
}

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

#features {
  background:
    radial-gradient(circle, #E6F5FF 2.5px, transparent 2.5px) 0 0 / 22px 22px,
    radial-gradient(circle, #E6F5FF 2.5px, transparent 2.5px) 11px 11px / 22px 22px,
    #fff;
  padding: 40px 20px;
  text-align: center;
}

#features h2 {
  display: inline-block;
  position: relative;
  margin-top: 70px;
  margin-bottom: 70px;
  font-size: 33px;
  color: #0099ff;
  line-height: 1;
  z-index: 0;
}

#features h2::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: "";
}

.features-intro,
.features-outro {
  max-width: 780px;
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  text-align: left;
  font-weight: 500;
  word-break: break-word;
  margin-left: auto;
  margin-right: auto;
}

.features-intro {
  margin-top: 20px;
  margin-bottom: 70px;
}

.features-outro {
  margin-top: 60px;
  margin-bottom: 60px;
  grid-column: 1 / -1;
}

.features-intro strong,
.features-outro strong {
  font-weight: 700;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 232px);
  grid-auto-rows: 232px;
  justify-content: center;
  gap: 24px;
  max-width: calc(3 * 232px + 2 * 24px);
  margin: 0 auto;
  justify-items: stretch;
}

.feature-item {
  background: #fff;
  border-radius: 8px;
  width: 232px;
  height: 232px;
  padding: 19.2px;
  box-shadow:
    0 6px 16px rgba(0, 153, 255, 0.16),
    0 -2px 8px rgba(0, 153, 255, 0.08),
    0 0 0 1px rgba(0, 153, 255, 0.06);
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transform: none;
  position: relative;
}

.feature-item-inner {
  display: contents;
}

.feature-item img {
  width: 64px;
  height: 64px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.feature-item p {
  font-size: 14.4px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 8px;
  margin-bottom: 16px;
  color: #666;
}

.feature-title {
  font-size: 19.2px;
  font-weight: 900;
  color: #000;
  margin-bottom: 11.52px;
  line-height: 1.4;
  text-align: center;
  word-break: break-word;
  height: 46.08px;
  display: block;
}

.highlight-sky {
  color: #00aaff;
  white-space: normal;
}

/* ▼▼▼▼▼タブレット▼▼▼▼▼ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #features h2 {
    font-size: 29px;
    line-height: 1;
  }

  .features-intro {
    max-width: calc(2 * 232px + 1 * 6px);
    margin-top: 20px;
    margin-bottom: 70px;
    text-align: left;
  }

  .feature-list {
    grid-template-columns: repeat(2, 232px);
    max-width: calc(2 * 232px + 1 * 6px);
    grid-auto-rows: auto;
    gap: 6px;
    justify-content: center;
  }

  .feature-title {
    white-space: normal;
  }

  .feature-title br {
    display: inline;
  }
}

/* ▼▼▼▼▼スマホ▼▼▼▼▼ */
@media screen and (max-width: 767px) {
  #features h2 {
    font-size: 24px;
    line-height: 1;
  }

  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    grid-auto-rows: auto;
    gap: 6px;
  }

  .feature-item {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
    height: auto;
  }

  .feature-item::before {
    content: "";
    display: block;
    padding-top: 100%;
  }

  .feature-item-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(6px, 2.2vw, 16px);
  }

  .feature-item img {
    width: clamp(20px, 9.5vw, 64px);
    height: clamp(20px, 9.5vw, 64px);
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .feature-title {
    font-size: clamp(11px, 3.6vw, 19.2px);
    height: auto;
    line-height: 1.35;
    margin-bottom: 10px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .feature-item p {
    font-size: clamp(10px, 3vw, 14.4px);
    line-height: 1.35;
    margin-top: 6px;
    margin-bottom: 12px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ▼▼▼▼▼極小スマホ▼▼▼▼▼ */
/* 追加のスタイルがあればここに記述 */

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

/* ベース */
#flow {
  background: url("images/flow/bg-flow.jpg") center center / cover no-repeat;
  padding: 20px 20px;
  text-align: center;
  color: #333;
}

#flow h2 {
  display: inline-block;
  position: relative;
  z-index: 0;
  margin-top: 70px;
  margin-bottom: 70px;
  margin-left: 0;
  font-size: 33px;
  color: #0099ff;
  line-height: 1;
}

#flow h2::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: "";
}

.anchor-offset {
  display: block;
  height: 120px;
  margin-top: -120px;
  visibility: hidden;
  pointer-events: none;
}

/* ステップ */
.flow-steps {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.flow-step {
  position: relative;
  padding: 80px 16px 72px;
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 240px;
  text-align: center;
  border-radius: 12px;
  box-sizing: border-box;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, #007acc, #66bce7) border-box;
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flow-step.step4 {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, #ff7e5f, #feb47b) border-box;
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
}

/* ステップ番号・見出し・本文・アイコン */
.step-number {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #007acc;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Arial Black", Impact, sans-serif;
  line-height: 1;
  padding-top: 4px;
}

.step-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.step-digit {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.step-blue {
  background: linear-gradient(to right, #007acc, #66c2f5);
}

.step-orange {
  background: linear-gradient(135deg, #ff8c42, #ffb347);
}

.step-red {
  background: #d32f2f;
}

.step-icon img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 12px;
}

.flow-step h3 {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 700;
}

.flow-step p {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}

/* 矢印 */
.flow-arrow {
  width: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.flow-arrow img {
  width: 50px;
  height: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* 所要時間ボックス */
.flow-time-box {
  background: #fff;
  border: none;
  border-radius: 12px;
  padding: 20px 16px;
  margin: 60px auto 40px;
  font-size: 16px;
  color: #333;
  box-sizing: border-box;
  width: 100%;
  max-width: 1067px;
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.18);
}

.time-info {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

.time-info img {
  width: 42px;
  height: auto;
}

.hourglass-icon {
  width: 40px;
  height: auto;
}

.time-text {
  text-align: left;
}

.main-time {
  font-size: 18px;
  font-weight: bold;
  color: #003366;
  margin: 0;
  line-height: 1.4;
}

.highlight {
  color: #e53935;
  font-weight: 900;
  font-size: 20px;
}

.time-note {
  font-size: 13px;
  color: #333;
  margin: 2px 0 0;
  line-height: 1.4;
}

/* 必要書類ボックス */
.id-required-box {
  background: #fff;
  border: none;
  border-radius: 12px;
  padding: 32px 20px;
  max-width: 1067px;
  margin: 0 auto 50px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.18);
}

.id-required-box h4 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #007acc;
}

.id-images {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.id-item img {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}

.id-item p {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.id-note {
  font-size: 13px;
  color: #666;
}

/* ▼▼▼▼▼タブレット▼▼▼▼▼ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #flow h2 {
    font-size: 29px;
  }

  #flow .flow-steps {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 56px;
    position: relative;
  }

  .flow-step {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-top: 44px;
    padding-bottom: 10px;
    margin-bottom: 0;
  }

  .flow-arrow {
    width: auto;
    position: relative;
    display: block;
    height: calc(var(--step-gap, 56px) * 2);
    margin: 0;
    z-index: 1;
  }

  .flow-arrow img {
    content: url("images/flow/arrow-down.png");
    width: 14px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  .step-number {
    top: -24px;
  }

  .step-icon img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .flow-step p {
    margin-top: 0;
  }
}

/* ▼▼▼▼▼スマホ▼▼▼▼▼ */
@media screen and (max-width: 767px) {
  #flow h2 {
    font-size: 24px;
  }

  #flow .flow-steps {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    --step-gap: 56px;
    gap: 0;
  }

  .flow-step {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-top: 30px;
    padding-bottom: 10px;
  }

  .flow-step h3 {
    font-size: 26px;
    margin-bottom: 12px;
  }

  .flow-arrow {
    position: relative;
    height: calc(var(--step-gap) * 2);
    margin: 0;
    width: auto;
    z-index: 1;
  }

  .flow-arrow img {
    content: url("images/flow/arrow-down.png");
    width: 14px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  .step-number {
    top: -24px;
  }

  .main-time {
    font-size: clamp(12px, 4.2vw, 18px);
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .main-time strong {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  #flow .highlight {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    font-size: clamp(14px, 4.8vw, 20px);
  }

  .time-info img.hourglass-icon {
    width: 28px;
    height: auto;
  }

  .time-info {
    flex-wrap: nowrap;
  }

  .time-text {
    min-width: 0;
  }

  .id-images {
    row-gap: 20px;
  }

  .step-icon img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .flow-step p {
    margin-top: 0;
  }
}

/* ▼▼▼▼▼極小スマホ▼▼▼▼▼ */
@media screen and (max-width: 359px) {
  #flow .flow-time-box .main-time {
    font-size: clamp(11px, 4.2vw, 16px);
  }

  #flow .flow-time-box .main-time .highlight {
    font-size: clamp(12px, 4.6vw, 18px);
  }
}
 
/* =========================================================================================================
   ■申し込みセクション2
========================================================================================================= */

/* ベース */
#apply-cta2 {
  background: linear-gradient(to right, #0099ff, #66ccff);
  padding: 60px 20px;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
}

.apply-cta2-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.apply-cta2-wrapper {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

/* テキスト */
.apply-cta2-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-top: 0;
  padding-top: 0;
}

.apply-cta2-text h2 {
  font-size: clamp(18px, 6.2vw, 28px);
  font-weight: 800;
  margin-top: 5px;
  margin-bottom: 12px;
  color: #0099ff;
  white-space: nowrap;
}

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

/* ボタン行 */
.apply-cta2-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 24px;
}

/* 推奨ラップ／注意書き */
.cta-button-2-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 280px;
  position: relative;
}

.apply-cta2-note {
  font-size: 12px;
  line-height: 1.5;
  color: #666;
  margin: 0;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 6px);
  white-space: nowrap;
}

.recommend-badge {
  display: none;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: linear-gradient(to right, #00d84b, #00B900);
  border-radius: 9999px;
  white-space: nowrap;
  position: relative;
}

.recommend-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  width: 14px;
  height: 8px;
  background: linear-gradient(to right, #00d84b, #00B900);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* ボタン共通 */
.cta-button-2 {
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
  background: #00B7E7;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  border: none;
  cursor: pointer;
  position: relative;
  top: 0;
  width: auto;
  max-width: 100%;
  margin: 0;
  white-space: nowrap;
}

.cta-button-2 img {
  width: 24px;
  height: auto;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}

/* ボタンバリエーション（グラデ） */
.cta-button-2.web {
  background: linear-gradient(to right, #ffb200, #ff6e00);
  margin-left: 0;
}

.cta-button-2.diagnosis {
  background: linear-gradient(to right, #00b7ff, #0066ff);
  margin-right: 0;
}

/* 立体ボタン共通 */
.btn_05 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 280px;
  height: 56px;
  padding: 0 20px;
  font-weight: bold;
  border-radius: 0.3rem;
  border-bottom: 7px solid #d45500;
  background: #f8a65e;
  color: #fff;
  gap: 8px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  white-space: nowrap;
}

a.btn_05:hover {
  transform: translateY(5px);
  border-bottom-width: 1px;
  color: #fff;
}

/* 立体ボタン：シミュレーター */
.btn_05.btn-simulator {
  background: linear-gradient(to right, #00c6ff, #0072ff);
  border-bottom: 7px solid #005bb5;
  width: 280px;
  height: 56px;
  padding: 0 20px;
  gap: 8px;
  box-sizing: border-box;
}

.btn_05.btn-simulator:hover {
  background: linear-gradient(to right, #00d2ff, #0066ff);
  border-bottom: 1px solid #005bb5;
}

.btn_05.btn-simulator img {
  display: inline-block;
  vertical-align: middle;
}

/* 立体ボタン：LINE */
.btn_05.btn-line {
  background: linear-gradient(to right, #00d84b, #00B900);
  border-bottom: 7px solid #008c00;
  color: #fff;
}

.btn_05.btn-line:hover {
  background: linear-gradient(to right, #1ae466, #00a800);
  border-bottom: 1px solid #008c00;
  color: #fff;
}

/* 電話ブロック */
.apply-cta2-block {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}

.apply-cta2-icon {
  margin-right: -2px;
}

.apply-cta2-icon img {
  width: 32px;
  height: auto;
  display: block;
  margin-top: 4px;
}

.apply-cta2-content-wrap {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  justify-content: center;
  line-height: 1.2;
  flex-wrap: wrap;
}

.apply-cta2-number {
  font-family: 'Arial Black', Impact, sans-serif;
  font-weight: 900;
  font-size: 33px;
  letter-spacing: 0.5px;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.apply-cta2-number:link,
.apply-cta2-number:visited,
.apply-cta2-number:hover,
.apply-cta2-number:active {
  text-decoration: none;
  color: #000;
}

.tel-one-line {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.tel-sub2 {
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #444;
  line-height: 1.4;
}

/* ▼▼▼▼▼タブレット▼▼▼▼▼ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .apply-cta2-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
  }

  .cta-button-2 {
    width: 100%;
    max-width: 380px;
    margin: 0;
  }

  .btn_05,
  .btn_05.btn-simulator {
    width: 100%;
    max-width: 380px;
  }

  .cta-button-2.web {
    margin-left: 0;
    margin-bottom: 18px;
  }

  .cta-button-2.diagnosis {
    margin-right: 0;
  }

  .cta-button-2-box {
    width: 100%;
    max-width: 380px;
    padding-bottom: 0;
    gap: 0;
  }

  .apply-cta2-note {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin-top: 0;
    white-space: nowrap;
    text-align: center;
  }
}

/* ▼▼▼▼▼スマホ▼▼▼▼▼ */
@media screen and (max-width: 767px) {
  .apply-cta2-content {
    gap: 24px;
  }

  .apply-cta2-text h2 {
    font-size: clamp(18px, 6.2vw, 28px);
    white-space: nowrap;
  }

  .apply-cta2-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
  }

  .apply-cta2-content-wrap {
    flex-direction: column;
    gap: 0;
  }

  .tel-sub2 {
    display: block;
    white-space: normal;
    margin-left: 0;
    font-size: 13px;
    font-weight: normal;
  }

  .cta-button-2 {
    width: 100%;
    max-width: 250px;
    margin: 0;
    justify-content: center;
  }

  .cta-button-2.web {
    margin-left: 0;
    margin-bottom: 18px;
  }

  .cta-button-2.diagnosis {
    margin-right: 0;
  }

  .btn_05 {
    width: 100%;
    max-width: 250px;
  }

  .btn_05.btn-simulator {
    width: 100%;
    max-width: 250px;
  }

  .cta-button-2-box {
    width: 100%;
    max-width: 250px;
    padding-bottom: 0;
    gap: 0;
  }

  .apply-cta2-note {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin-top: 0;
    white-space: nowrap;
    text-align: center;
  }
}

/* ▼▼▼▼▼極小スマホ▼▼▼▼▼ */
/* 必要に応じて追記してください */


/* =========================================================================================================
   ■他社比較セクション
========================================================================================================= */

#comparison {
  padding: 40px 20px;
  background-image: url("images/comparison/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
}

#comparison h2 {
  display: inline-block;
  position: relative;
  margin: 70px 0 40px 0;
  font-size: 33px;
  color: #0099ff;
  line-height: 1;
  z-index: 0;
}

#comparison h2::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: "";
}

/* 説明文 */
.comparison-message,
.comparison-message-left {
  max-width: 780px;
  margin: 20px auto 40px;
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  font-weight: 500;
  word-break: break-word;
}

.comparison-message {
  text-align: center;
}

.comparison-message-left {
  margin: 20px auto 70px;
  text-align: left;
}

.comparison-highlight {
  max-width: 680px;
  margin: 10px auto 40px;
  font-size: clamp(12px, 2.4vw, 22px);
  line-height: 1.8;
  color: #fff;
  font-weight: bold;
  background-color: #0099ff;
  padding: 12px 16px 12px 100px;
  border-radius: 40px;
  position: relative;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
}

.comparison-text {
  display: inline-block;
  white-space: nowrap;
}

.highlight-icon {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 16px;
  top: -24px;
}

.highlight-orange {
  color: #ffcc00;
  font-size: 1em;
  font-weight: inherit;
}

/* テーブル */
.comparison-table {
  max-width: 800px;
  margin: 0 auto;
  overflow-x: auto;
  padding: 0;
}

.comparison-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: transparent;
  table-layout: fixed;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.comparison-table th,
.comparison-table td {
  text-align: center;
  border: 1px solid #555656;
  width: auto;
}

.comparison-table th {
  padding: 20px 16px;
  font-family: inherit;
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 0.5px;
  background-color: #cacaca;
  color: #000;
}

.comparison-table td {
  padding: 12px 16px;
  font-size: 22px;
  font-weight: bold;
  background-color: #fff;
  border-top: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #555656;
}

/* 列幅の固定は解除（太枠の影響で崩れないようにする） */
.comparison-table thead th:nth-child(1),
.comparison-table tbody td:nth-child(1),
.comparison-table thead th:nth-child(2),
.comparison-table tbody td:nth-child(2),
.comparison-table thead th:nth-child(3),
.comparison-table tbody td:nth-child(3),
.comparison-table thead th:nth-child(4),
.comparison-table tbody td:nth-child(4) {
  width: auto !important;
}

/* 1列目と2列目の境界の単線化 */
.comparison-table thead th:nth-child(2),
.comparison-table tbody td:nth-child(2) {
  border-left: none;
}

/* 2列目と3列目の境界の単線化（左・右ともに調整） */
.comparison-table thead th:nth-child(3),
.comparison-table tbody td:nth-child(3) {
  border-left: none;
  border-right: none;
}

/* 4列目（Papatto）強調 */
.comparison-table thead th:nth-child(4),
.comparison-table tbody td:nth-child(4) {
  border-left-color: #0099ff;
  border-right-color: #0099ff;
  border-left-width: 6px;
  border-right-width: 6px;
  border-left-style: solid;
  border-right-style: solid;
  border-bottom-color: #0099ff;
  color: #0099ff;
}

.comparison-table thead tr:first-child th:nth-child(4) {
  border-top-color: #0099ff;
  border-top-width: 6px;
  border-top-style: solid;
}

.comparison-table tbody tr:last-child td:nth-child(4) {
  border-bottom-color: #0099ff;
  border-bottom-width: 6px;
  border-bottom-style: solid;
}

/* 角丸調整 */
.comparison-table th.rounded-th {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.comparison-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0 !important;
}

.comparison-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0 !important;
}

/* 見出しのPapatto強調 */
.comparison-table th.highlight-papatto {
  background-color: #ceeafc;
  color: #0099ff;
  font-weight: bold;
}

/* 数値装飾 */
.percent-sign {
  font-size: 1em;
  vertical-align: baseline;
}

.strong-rate {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: 0.5px;
  color: #000;
  white-space: nowrap;
}

.rate-small,
.small-rate {
  font-size: inherit;
}

/* ▼▼▼▼▼タブレット▼▼▼▼▼ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #comparison {
    padding: 36px 18px;
  }

  #comparison h2 {
    font-size: 29px;
  }

  .comparison-message,
  .comparison-message-left {
    font-size: 15px;
  }

  .comparison-highlight {
    font-size: 20px;
    padding: 12px 16px 12px 88px;
    border-radius: 34px;
  }

  .highlight-icon {
    width: 80px;
    height: 80px;
    top: -20px;
    left: 14px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 12px 10px;
  }

  .comparison-table th {
    font-size: 18px;
  }

  .comparison-table td {
    font-size: 18px;
  }
}

/* ▼▼▼▼▼スマホ▼▼▼▼▼ */
@media screen and (max-width: 767px) {
  #comparison {
    padding: 28px 16px;
  }

  #comparison h2 {
    font-size: 24px;
  }

  .comparison-message,
  .comparison-message-left {
    font-size: 14px;
  }

  .comparison-highlight {
    font-size: clamp(13px, 4vw, 20px);
    width: 100%;
    max-width: 100%;
    padding: 12px 16px 12px 60px;
    border-radius: 28px;
    white-space: nowrap;
    overflow: visible;
    margin: 10px auto 40px;
  }

  .highlight-icon {
    width: 50px;
    height: 50px;
    left: 12px;
    top: -14px;
  }

  .comparison-table {
    max-width: 100%;
    font-size: 14px;
  }

  .comparison-table th,
  .comparison-table td {
    font-size: 14px;
    padding: 10px 8px;
  }
}

/* ▼▼▼▼▼極小スマホ▼▼▼▼▼ */
/* 必要に応じて追加 */

/* ===================================
   注意喚起セクション
=================================== */
.caution {
  --bg: #f3f4f6;
  --ink: #111827;
  --muted: #6b7280;
  --brand: #2563eb;
  --accent: #000000;
  --accentText: #ffe600;
  --cardBg: #ffffff;
  --line: #000000; /* 枠線を黒に */
  --check: #e11d48;
}

.caution {
  padding: 48px 16px 64px;
  background: var(--bg);
  color: var(--ink);
}

.caution__container {
  max-width: 1000px;
  margin: 0 auto;
}

.caution__eyebrow {
  text-align: center;
  letter-spacing: 0.2em;
  font-size: 12px;
  margin: 0 0 8px;
  color: var(--muted);
}

.caution__title {
  text-align: center;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.6;
  margin: 0 auto 24px;
}

.caution-cards {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 24px;
  column-gap: 0;
  margin: 0 0 24px;
}

.caution-card {
  background: var(--cardBg);
  border: 1px solid #000000;
  border-radius: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "label"
    "detail";
  column-gap: 0;
  row-gap: 12px;
  align-items: start;
  box-sizing: border-box;
  width: min(900px, 100%);
  margin: 0 auto;
}

.caution-card__label {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  padding: 10px 12px;
  text-align: center;
  grid-area: label;
}

.caution-card__icon {
  display: none;
}

.caution-card__icon svg {
  width: 140px;
  max-width: 100%;
  height: auto;
}

.caution-card__icon img {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* 右カラム：詳細ブロック */
.caution-detail {
  padding: 8px 20px 20px;
  margin: 0;
  grid-area: detail;
}

.caution-detail__title {
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--ink);
  text-align: center;
  position: relative;
  padding-right: 28px;
  cursor: pointer;
  user-select: none;
}

.caution-detail__title::after {
  content: "";
  width: 14px;                               /* 少し小さくする */
  height: 14px;                              /* 少し小さくする */
  border-right: 2px solid var(--muted);      /* 太さもバランス調整 */
  border-bottom: 2px solid var(--muted);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-58%) rotate(45deg); /* 視覚中心を上に補正して行中央へ */
}

.caution-detail:not(.is-collapsed) .caution-detail__title::after {
  transform: translateY(-58%) rotate(-135deg); /* 開いた時も同じ補正量を適用 */
}

.caution-detail__text {
  margin: 0 0 8px;
  line-height: 1.9;
  color: var(--muted);
}

.caution-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.caution-detail__list li {
  position: relative;
  padding-left: 26px;
  margin: 6px 0;
}

.caution-detail__list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  color: var(--check);
  font-weight: 700;
}

.caution-detail.is-collapsed .caution-detail__list {
  display: none;
}

.caution-detail.is-collapsed .caution-detail__text {
  display: none;
}

.caution-detail.is-collapsed {
  padding: 8px 20px 8px;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.caution-detail.is-collapsed .caution-detail__title {
  margin: 0;
}

.caution-detail.is-collapsed .caution-toggle--open {
  margin: 6px 0 0;
  align-self: flex-start;
}

.caution-toggle {
  display: inline-block;
  margin: 8px auto 0;
  padding: 8px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: var(--cardBg);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.caution-detail:not(.is-collapsed) .caution-toggle--open {
  display: none;
}

.caution-toggle--close {
  display: none;
}

.caution-detail:not(.is-collapsed) .caution-toggle--close {
  display: inline-block;
  margin: 12px 0 0;
}

.caution-toggle:focus-visible,
.caution-toggle:hover {
  background: var(--bg);
  color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  opacity: 1;
}

.caution__lead {
  font-weight: 600;
  margin: 0 0 10px;
}

.caution__text {
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.9;
}

.caution__text--center {
  text-align: center;
}

.caution-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.caution-list li {
  position: relative;
  padding-left: 26px;
  margin: 8px 0;
}

.caution-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  color: var(--check);
  font-weight: 700;
}

.caution-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: center;
  margin-top: 40px; /* 段落とボタンの間に“少し”スペースを追加 */
}

.btn-primary {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 9999px;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-primary:focus-visible,
.btn-primary:hover {
  opacity: 0.9;
}

.link-underline {
  color: var(--brand);

  text-underline-offset: 3px;}

/* タブレット */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .caution-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "detail";
  }

  .caution-card__icon {
    height: auto;
    padding: 16px 12px 0;
  }

  .caution-detail {
    padding: 12px 20px 20px;
  }

  .caution-card__icon img {
    max-width: 140px;
    max-height: none;
    width: auto;
    height: auto;
    margin: 0 auto;
  }

  .caution-detail.is-collapsed .caution-toggle--open {
    display: block;
    align-self: center;
    margin: 8px auto 8px;
  }

  .caution-detail:not(.is-collapsed) .caution-toggle--close {
    display: block;
    margin: 8px auto 8px;
  }
}

/* スマホ */
@media screen and (max-width: 767px) {
  .caution-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "detail";
    width: 100%;
  }

  .caution-card__icon {
    height: auto;
    padding: 12px;
  }

  .caution-card__icon img {
    width: auto;
    max-width: 140px;
    height: auto;
    margin: 0 auto;
  }

  .caution-detail.is-collapsed .caution-toggle--open {
    display: block;
    align-self: center;
    margin: 8px auto 8px;
  }

  .caution-detail {
    padding: 12px 16px 20px;
  }

  .caution-detail:not(.is-collapsed) .caution-toggle--close {
    display: block;
    margin: 8px auto 8px;
  }

  .caution__title {
    white-space: nowrap;
    font-size: clamp(16px, 5vw, 32px);
  }
}

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

#apply-section {
  background: #f7fbff;
  padding: 32px 16px;
  scroll-margin-top: var(--apply-header-offset);
}

#apply-section .apply-form__inner {
  max-width: 720px;
  margin: 0 auto;
}

.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;
}
.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;
}

/* 行・見出し・ラジオ群 */
.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-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;
}

.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;     /* ← 一行に固定（端末差での意図せぬ折返しを防止） */
}

.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,.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);
}

/* 確認画面：確認用テーブル */
.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;
}
.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;
}

/* 見出し：中央・大きめ・青 */
.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: 88px;                         /* ← ステップ間を広げる */
  --apply-steps-gap: 88px;           /* ← 余白も同値に */
  --apply-step-size: 60px;           /* 円の直径(PC) */
  --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);   /* ← 高さが16pxなので -8px */
  left: 50%;
  transform: translateX(calc(-50% - (var(--apply-step-size) + var(--apply-steps-gap)) / 2));
  width: 40px;                                   /* ← 固定幅を指定 */
  height: 16px;                                  /* ← 固定高さを指定 */
  background: url("images/apply-cta/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;
}

/* タブレット */
@media screen and (max-width: 1023px) {
:root { --apply-header-offset: 96px; }

  .apply-form {
    padding: 16px;
  }

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

/* スマホ */
@media screen and (max-width: 767px) {
  .apply-steps { 
    gap: 72px;
    --apply-steps-gap: 72px;
    --apply-step-size: 52px;
    --connector-len: clamp(0px, calc(var(--apply-steps-gap) - var(--apply-step-size)), 120px);
  }

  .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-form__title { font-size: 24px; }
}

/* 極小スマホ */
@media (max-width: 360px) {
  .file-field { flex-wrap: wrap; }
  .file-chosen {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 4px;
  }
}

/* ===================================
   よくある質問セクション（完全版）
=================================== */

/* 1) セクション土台（背景画像＋色の下地） */
.faq {
  padding: 48px 16px;
  background-color: #f8f8f8;
  background-image: url("/images/faq/background.png"); /* ←公開パスに合わせて変更可 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.faq__inner {
  max-width: 960px;
  margin: 0 auto;
}

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

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

  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: '';
}

/* 3) リスト・アイテム */
.faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.faq__item {
  border: none;          /* ← 灰色の枠線を消す */
  border-radius: 8px;
  background: #fff;
}
.faq__item details {
  position: relative;    /* 矢印配置用 */
}

/* 4) 質問（summary） */
.faq__question {
  display: block;
  position: relative;
  padding: 16px 48px 16px 16px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  font-size: 18px;       /* 本文文字を大きめに */
}
.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 #0099ff;  /* 通常時の矢印色 */
  border-bottom: 2px solid #0099ff;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .2s ease;
}

/* 6) 状態：閉（Qの色） */
.faq__item details:not([open]) .faq__question::first-letter {
  color: #0099ff;        /* 閉じている時は Q を青 */
}

/* 7) 状態：開（Q背景・文字・矢印・角丸） */
.faq__item details[open] .faq__question {
  background: #0099ff;   /* Q 部分の背景 */
  color: #fff;           /* 質問テキストを白に */
  border-top-left-radius: 8px;  /* 上両角を丸める */
  border-top-right-radius: 8px;
}
.faq__item details[open] .faq__question::first-letter {
  color: #fff;           /* 背景上で Q を白に */
}
.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;
}
.faq__answer p { margin: 0; }
.faq__item details[open] .faq__answer {
  border-top: 1px solid #0099ff; /* Q と A の間の線 */
}

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

/* スマホ */
@media screen and (max-width: 767px) {
  .faq__title {
    font-size: 24px;
  }
}


/* タブレット */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .faq__title {
    font-size: 29px;
  }
}

/* ===================================
   フッターセクション（完全独立版）
=================================== */

/* ===== Base / Layout ===== */
#footer-section {
  width: 100%;
  background: linear-gradient(to right, #0099ff, #66ccff);
  padding: 60px 20px 24px;
  text-align: center;
  color: #333;
  overflow-x: hidden; /* 横スクロール抑止（ベース） */
}

.footer-section-inner {
  max-width: 960px;
  margin: 0 auto;
}

.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 Lower (Logo / Links / Copyright) ===== */
.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-links{
  list-style: none;
  margin: 8px 0 12px;
  padding: 0;
  display: flex;
  gap: 0;                      /* 区切りの間隔は各li側で付与 */
  justify-content: center;
  flex-wrap: nowrap;           /* 1行に固定 */
}

.footer-links li{
  display: inline-block;
}

.footer-links li + li{
  border-left: 1px solid rgba(255,255,255,.9); /* 区切り線 */
  margin-left: 14px;   /* 区切り線の外側の余白 */
  padding-left: 14px;  /* 区切り線の内側の余白 */
}

.footer-links a{
  color: #fff;
  text-decoration: none;
  white-space: nowrap;                 /* 文字列を折り返さない */
  font-size: clamp(12px, 2.4vw, 16px); /* 画面幅で自動縮小/拡大 */
}

.footer-links a:hover{ text-decoration: underline; }

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

/* スマホ */
@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;
  }

  /* ▼ 追加：申し込み2と同じロジックで、LINEの推奨文ぶんを考慮 */
  .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: nowrap;
    pointer-events: auto;   /* ← モバイルでは選択/コピー可能に */
  }

  .footer-button-web{ margin-bottom: 18px; } /* Web→LINEも12+18=30pxで均等 */
}

/* タブレット */
@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; }
}



/* ===================================
   企業情報（company.html）
   =================================== */

/* メインコンテナ（インラインstyleを移設） */
#page-company {
  padding: 40px 20px;
  max-width: 1000px;
  margin: 0 auto;
}

/* パンくず */
.company-breadcrumbs {
  font-size: 13px;
  color: #555;
  margin: 8px 0 16px;
}
.company-breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.company-breadcrumbs li::after {
  content: ">";
  margin: 0 6px;
  color: #aaa;
}
.company-breadcrumbs li:last-child::after { content: ""; }
.company-breadcrumbs a { text-decoration: none; color: #007acc; }

.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;
}

.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-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: 700;
  z-index: 0;
}

.company-philosophy-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-philosophy-titlewrap {
  text-align: center;
}

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

/* 概要リスト（2カラム→SPで縦積み） */
.company-dl {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.company-row {
  display: contents; /* dt,ddをグリッドの列に割当 */
}
.company-row dt,
.company-row dd {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  line-height: 1.7;
}
.company-row dt {
  background: #f8fafc;
  font-weight: 700;
  color: #374151;
  border-right: 1px solid #e5e7eb;
}
.company-row dd {
  color: #111827;
  word-break: break-word;
}
.company-row:last-child dt,
.company-row:last-child dd { border-bottom: none; }

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

.company-philosophy {
  margin-top: 28px;
}

.company-philosophy p {
  margin: 0 0 12px;
  line-height: 1.9;
  color: #111827;
}


/* === タブレット（768px〜1023px） === */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .company-title {
    font-size: 29px; /* タブレット指定 */
  }

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

@media (max-width: 767px) {
  .company-dl {
    grid-template-columns: 1fr; /* 既存 */
    border-radius: 8px;
  }
  .company-row dt { border-right: none; } /* 既存 */

  .company-title {
    font-size: 24px; /* 既存 */
  }
  .company-philosophy-title {
    font-size: 24px; /* 新規追加：スマホ指定 */
  }
}

/* ===================================
   プライバシーポリシー（privacy.html）
=================================== */

#page-privacy {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #333;
}

.privacy-breadcrumbs ol {
  list-style: none;
  display: flex;
  gap: 6px;
  padding: 0;
  margin: 0 0 16px;
  font-size: 14px;
}
.privacy-breadcrumbs li + li::before {
  content: ">";
  margin: 0 6px;
  opacity: .6;
}

.privacy-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; /* 既存値を維持 */
  white-space: nowrap; /* 1行維持を継承 */
  z-index: 0; /* 擬似要素(z-index:-1)を背面に表示するため */
}

.privacy-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: '';
}

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

.privacy-section p {
  line-height: 1.8;
  margin: 0 0 16px;
}

.privacy-section h2 {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  margin: 28px 0 10px;
  color: #333;
}

.privacy-section h3 {
  font-size: 1em;       /* ← 親の本文サイズと同じに */
  font-weight: 700;
  margin: 18px 0 8px;
}

.privacy-section ul {
  padding-left: 1.2em;
  margin: 0 0 16px;
}
.privacy-section ul li {
  margin: 0 0 6px;
  line-height: 1.8;
}

/* === 新規追加：タブレット（768px〜1023px） === */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .privacy-title {
    font-size: 29px; /* タブレット指定 */
  }
}

/* === 新規追加：スマホ（〜767px） === */
@media screen and (max-width: 767px) {
  .privacy-title {
    font-size: 24px; /* スマホ指定 */
  }
}

/* ===================================
   利用規約および免責事項（terms.html）
=================================== */

#page-terms {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #333;
}

.terms-breadcrumbs ol {
  list-style: none;
  display: flex;
  gap: 6px;
  padding: 0;
  margin: 0 0 16px;
  font-size: 14px;
}
.terms-breadcrumbs li + li::before {
  content: ">";
  margin: 0 6px;
  opacity: .6;
}

.terms-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共用サイズは現状維持 */
  color: #0099ff;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  z-index: 0;
}

.terms-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: '';
}

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

.terms-section p {
  line-height: 1.8;
  margin: 0 0 16px;
}

.terms-section h2 {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  margin: 28px 0 10px;
  color: #333;
}

.terms-section ul {
  padding-left: 1.2em;
  margin: 0 0 16px;
}
.terms-section ul li {
  margin: 0 0 6px;
  line-height: 1.8;
}


/* === タブレット用 === */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .terms-title {
    font-size: 29px; /* タブレット指定 */
  }
}

/* === スマホ用 === */
@media screen and (max-width: 767px) {
  .terms-title {
    font-size: 24px; /* スマホ指定 */
  }
}

/* ===================================
   契約書セクション
   =================================== */

/* 住所検索などの小ボタン */
#apply-section.poa-section .btn--sm {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  font-size: 14px;
  cursor: pointer;
}
#apply-section.poa-section .btn--sm:hover {
  filter: brightness(1.02);
}

/* 入力欄の注意書き */
#apply-section.poa-section .apply-form__note {
  font-size: 13px;
  color: #111827;
  text-align: left;
  font-weight: 400;
  line-height: 1.7;
  margin-top: 12px;
}

/* 郵便番号行のレイアウト（住所検索ボタン） */
#apply-section.poa-section #zip-row .apply-form__inputwrap {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
#apply-section.poa-section #zip-row #zip {
  flex: 0 0 180px;
}
#apply-section.poa-section #zip-row #btn-zip {
  white-space: nowrap;
  min-width: 110px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  cursor: pointer;
}

/* コンテナ */
#apply-section.poa-section .apply-form__inner {
  max-width: 720px;
  margin: 0 auto;
}

/* 任意バッジ（契約書セクション） */
#apply-section.poa-section .badge--optional {
  background: #0099ff; /* ご指定のブルー */
  color: #fff;
}

#apply-section.poa-section .apply-form__title {
  display: inline-block;
  position: relative;
  --poa-dot: 3.5em;            /* 円の直径（変更なし） */
  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: clamp(14px, 4.6vw, 33px);
  color: #0099ff;
  line-height: 1.15;
  white-space: nowrap;          /* <br> は尊重、途中改行は抑止 */
  z-index: 0;
}


#apply-section.poa-section .apply-form__title::before {
  position: absolute;
  left: 0;                     /* 見出し先頭を基準 */
  top: 0;                      /* 基準を要素の上端に */
  /* 横は先頭に約半分重ね、縦は円の高さの35%ぶん上へ持ち上げる */
  transform: translate(
    calc(-0.52 * var(--poa-dot)),
    calc(-0.35 * var(--poa-dot))
  );
  z-index: -1;
  width: var(--poa-dot);       /* 3.5em（サイズは変更しません） */
  height: var(--poa-dot);
  border-radius: 50%;
  background: rgba(0, 153, 255, 0.18);
  content: '';
}



#apply-section.poa-section .apply-form__titlewrap {
  text-align: center;
  margin-bottom: 40px; /* タイトル＋サブタイトル全体の下余白 */
}

#apply-section.poa-section .apply-form__subtitle {
  display: block;
  /* ▼最小12px～最大14pxで自動可変 */
  font-size: clamp(12px, 2.8vw, 14px);
  font-weight: 400;
  color: #6b7280;
  margin-top: 8px;
}

/* フォーム枠と行 */
#apply-section.poa-section .apply-form {
  background: #fff;
  border: 1px solid #0099ff;
  border-radius: 0;
  padding: 20px;
}

#apply-section.poa-section .apply-form__row {
  margin-bottom: 22px;
}

#apply-section.poa-section .apply-form__label {
  display: inline-block;
  font-weight: 700;
  margin-bottom: 10px;
}

#apply-section.poa-section .apply-form__label-note {
  color: #ef4444;
  font-weight: 700;
}

/* 入力要素（通常／フォーカス／エラー） */
#apply-section.poa-section .apply-form__input,
#apply-section.poa-section .apply-form__select,
#apply-section.poa-section .apply-form__textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
}

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

#apply-section.poa-section .apply-form__input:focus,
#apply-section.poa-section .apply-form__select:focus,
#apply-section.poa-section .apply-form__textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .25);
}

/* 単位付きの横並び */
#apply-section.poa-section .apply-form__inputwrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
#apply-section.poa-section .apply-form__unit {
  margin-left: 6px;
  color: #6b7280;
  font-size: 14px;
}

/* バッジ（必須） */
#apply-section.poa-section .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;
}
#apply-section.poa-section .badge--required {
  background: #ef4444;
}

/* エラーメッセージ */
#apply-section.poa-section .form-error {
  color: #ef4444;
  font-size: 12px;
  margin-top: 6px;
}

/* 確認ボックス & テーブル（confirm.php） */
#apply-section.poa-section .apply-form__confirm {
  background: #fff;
  border: 1px solid #0099ff;
  padding: 20px;
}

#apply-section.poa-section .confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  margin-bottom: 8px;
}

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

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

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

/* ボタン */
#apply-section.poa-section .apply-form__actions {
  text-align: center;
  margin-top: 20px;
}

#apply-section.poa-section .apply-form__back,
#apply-section.poa-section .apply-form__send,
#apply-section.poa-section .apply-form__submit {
  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-section.poa-section .apply-form__back {
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

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

#apply-section.poa-section .apply-form__send {
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

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

#apply-section.poa-section .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-section.poa-section .apply-form__submit:hover {
  background: linear-gradient(90deg, #f97316, #f59e0b); /* hoverでオレンジ */
}

/* 送信完了（complete.php） */
#apply-section.poa-section .submission-complete {
  max-width: 720px;
  margin: 16px auto 0;
  padding: 32px 20px;
  background: #fff;
  border: 1px solid #0099ff;
}

#apply-section.poa-section .submission-complete__title {
  font-size: clamp(12px, 4.5vw, 28px);
  font-weight: 800;
  color: #0099ff;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 16px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: balance;
}

#apply-section.poa-section .submission-complete a {
  display: inline-block;
  min-width: 120px;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(90deg, #3b82f6, #06b6d4); /* 青グラデ */
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, filter .2s ease;
}
#apply-section.poa-section .submission-complete a:hover {
  background: linear-gradient(90deg, #f97316, #f59e0b); /* hoverでオレンジ */
}


/* 契約書プレビュー */
#apply-section.poa-section .poa-preview {
  background: #fff;
  border: 1px solid #0099ff;
  padding: 20px;
  margin-bottom: 20px;
}

#apply-section.poa-section .poa-preview__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #374151;
  text-align: center; /* 追加：中央寄せ */
}


#apply-section.poa-section .poa-preview__pre {
  white-space: pre-wrap; /* 折返し */
  word-break: break-word;
  font-family: inherit;   /* 既存の本文フォントに揃える */
  line-height: 1.8;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  max-height: 60vh;       /* 長文対策 */
  overflow: auto;
}

#apply-section.poa-section .poa-preview {
  margin-top: 8px;
}

#apply-section.poa-section .submission-complete p:last-child {
  text-align: center;      /* リンクを中央に配置 */
  margin-top: 16px;
}