@charset "UTF-8";
/* 共通部分
-------------------------------------------*/
html {
  font-size: 100%;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #1e1e1e;
  padding-top: 52px;
  font-weight: 400;
  line-height: 1.4;
}
img {
  max-width: 100%;
}
/* --- ヘッダー基礎 --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100; /* ★ 最前面 */
  display: flex;
  align-items: center;
  padding: 3px 16px;
  gap: 0.5rem;
  border-top: 1px solid #FFECCB;
  border-bottom: 1px solid #FFECCB;
  background-color: #fff;
}
/* --- ボタン3つを横並びで 6px 間隔 --- */
.header-middle {
  display: flex;
  gap: 6px;
}
/* --- ロゴ画像が大きすぎた場合の調整例（必要なら） --- */
.logo img {
  width: 180px;
  height: auto;
}
/* --- ボタン画像小さすぎたり大きすぎた場合用 --- */
.button {
  height: 44px; /* 好みで調整 */
  width: 44px;
}
/* --- ハンバーガーボタン --- */
.menu-btn {
  position: relative;
  z-index: 1200;
  width: 30px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 2px;
  background: #54C591;
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- メニュー展開部 --- */
.menu-btn.active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}
.menu-btn.active span:nth-child(2) {
  opacity: 0;
}
.menu-btn.active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}
.nav {
  position: fixed;
  top: 52px; /* ★ ヘッダー下 */
  right: 0;
  width: 75%;
  max-width: 280px;
  height: calc(100vh - 52px);
  background: #ffffff;
  padding: 24px 0;
  border-left: 1px solid #ddd;
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition:
    opacity 0.45s ease, transform 0.45s ease;
  z-index: 1001; /* overlay より上 / header より下 */
}
.nav.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav li {
  margin-bottom: 1.5rem;
}
.nav a {
  display: block;
  padding: 0.75rem 1.5rem;
  font-size: 18px;
  font-weight: 500;
  color: #0B82D4;
  text-decoration: none;
}
.menu-overlay {
  position: fixed;
  top: 52px; /* ★ ヘッダー下から */
  left: 0;
  width: 100%;
  height: calc(100vh - 52px);
  background: rgba(11, 130, 212, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 1000; /* header より下 */
}
.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
/* body内
------------------------------------------------------------------------------------*/
/* ファーストビュー
---------------------------------------*/
.fv {
  position: relative;
  width: 100%;
  height: calc(100vh - 52px);
  min-height: 520px;
  max-height: 620px;
  background: url("../images/mobile/fv2.jpg") no-repeat center/cover;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* お悩みゾーン
----------------------------------------*/
.problem {
  background-image: url("../images/mobile/moyamoya.jpg");
  background-repeat: repeat; /* 縦横に繰り返す */
  background-size: 86px 83px; /* 元画像のサイズを使う */
  background-position: top left; /* 左上からスタート */
  padding: 2.5rem 0.5rem;
}
.problem-title {
  display: block;
  margin: 0 auto;
  font-weight: bold;
  text-align: center;
}
/* 「こんな」「ありませんか？」の文字サイズ */
.part1, .part3 {
  font-size: 23px;
  padding: 0 1px;
}
/* 「お悩み」文字の親設定 */
.part2 {
  display: inline-block;
}
/* 文字と円を囲むラッパー */
.char-wrapper {
  position: relative; /* 円の基準 */
  display: inline-block;
  margin: 0px; /* 文字間を狭める */
}
/* 背景の円 */
.char-wrapper .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #BCD6E5;
  z-index: 0; /* 文字の背面 */
}
/* 文字 */
.char-wrapper .char {
  position: relative;
  z-index: 1; /* 文字を前面に表示 */
  font-size: 30px;
  font-weight: bold;
  color: #0C8DCE;
  display: inline-block;
}
.problem-items {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto auto auto;
}
.problem-items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 7px;
  padding: 3px 0px 3px 8px; /* ← 左右上下にゆとりを持たせる */
  margin-bottom: 12px;
}
/* テキスト部分 */
.problem-items li p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  padding-left: 4px; /* ← テキストと左枠の距離を微調整（必要なら） */
}
/* 右側の画像 */
.problem-items li img {
  width: 50px;
  height: auto;
  object-fit: contain;
  margin-left: 12px; /* ← テキストと画像の間隔 */
  margin-right: 4px; /* ← 画像と右枠の余白（狭すぎる場合は増やせる） */
}
/* 原因ゾーン
-------------------------------------------------*/
.cause {
  background-color: #0088D2;
  padding: 2rem 0.5rem;
}
.cause h2 {
  text-align: center;
  font-weight: bold;
  line-height: 1.6;
  color: #fff;
}
/* 1行目 */
.cause .line1 {
  font-size: 23px;
  position: relative;
}
.cause-icon {
  position: absolute;
  top: -20px; /* 上に少し上げる（調整可） */
  right: -85px; /* 文字の右に配置（調整可） */
  width: 80px; /* 画像サイズ（調整可） */
  height: auto;
}
/* 2行目の通常テキスト */
.cause .line2 {
  font-size: 23px;
}
/* 「エアコン内部の汚れ」だけ強調 */
.cause .highlight {
  font-size: 30px;
  color: #F6FF2D;
  font-weight: bold;
}
/* 「が」は普通サイズ（同じ行に置く） */
.cause .normal-ga {
  font-size: 23px;
  color: #fff;
  font-weight: bold;
}
/* 解決ゾーン
----------------------------------------------*/
.solution {
  padding: 2rem 0.5rem;
}
.solution-title {
  font-size: 18px;
  font-weight: 500; /* セミボールド */
  text-align: center;
  position: relative;
  display: block;
  width: fit-content; /* テキスト幅にする */
  margin: 0 auto;
}
/* 下線（文字とかぶるようにする） */
.solution-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 9px; /* 下線の太さ */
  background-color: #FEFE00;
  bottom: -1px; /* ← 文字と少し重なるように調整 */
  z-index: -1; /* 文字の後ろに行く */
}
.lead-text {
  text-align: center;
  font-size: 23px;
  line-height: 1.3;
}
.lead-text .strong-blue {
  color: #0B82D4;
  font-size: 30px;
}
.lead-text2 {
  margin-top: 1rem;
}
/* ご利用ガイドゾーン
---------------------------------------------------*/
.guide {
  background-color: #DFF2FF;
  border-radius: 10px;
  margin: 0.5rem 0.5rem 2.5rem 0.5rem;
  padding: 1.5rem 0.5rem;
}
.guide-title, .cta-bottom-title {
  font-size: 25px;
  color: #595858;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
}
.guide-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* guide-item */
.guide-item {
  display: flex;
  flex-direction: column;
  min-height: 220px; /* 閉じている時の高さだけを指定 */
  padding: 1.5rem 1rem 1rem;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
  counter-reset: step-counter;
}
/* タイトル */
.guide-item-title {
  text-align: center;
  color: #3BA0F0;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 1rem;
}
/* 閉じている状態 */
.text-wrap .more {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease, opacity 0.4s ease;
}
/* 開いた状態 */
.guide-item.open .more {
  max-height: 700px;
  opacity: 1;
}
/* ボタンを下に固定（最重要） */
.toggle-btn, .link-btn {
  margin-top: auto; /* これで guide-item の最下部へ自動配置 */
  align-self: flex-end;
  background: none;
  border: none;
  padding: 0;
  font-size: 16px;
  color: #FEC104;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
/* 下線 */
.toggle-btn::after, .link-btn::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #FEC104;
}
/* 矢印を小さく */
.toggle-btn .arrow, .link-btn .arrow {
  font-size: 10px;
}
/* 閉じる時はこちらの色になる（＝body の #1e1e1e） */
.toggle-btn.closing {
  color: inherit; /* ★ body の #1e1e1e がそのまま適用される */
}
.toggle-btn.closing::after {
  background-color: currentColor;
  /* ★ currentColor ＝ color と同じ → #1e1e1e */
}
/* 箇条書き数字 */
.step-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.step-list li {
  counter-increment: step-counter;
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 2.5rem;
}
.step-list li::before {
  content: counter(step-counter, decimal-leading-zero); /* ← . を削除 */
  position: absolute;
  left: 0;
  color: #0089D4; /* 数字の色 */
  font-size: 20px; /* 数字のサイズ */
  top: -2px; /* ← ここを調整して数字を上へ */
}
.price {
  position: relative;
  z-index: 1;
  margin-left: 0.5rem;
}
/* 1行目：中央に1pxの打ち消し線 */
.price-normal {
  text-decoration: line-through; /* 打ち消し線 */
  text-decoration-thickness: 1px; /* 線の太さ */
}
/* 2行目：太い黄色の下線（文字に少しかぶせる） */
.price-open {
  position: relative; /* ← これが必須！！ */
  display: inline-block;
  padding-bottom: 4px; /* 下線の基準となる余白 */
}
.price-open::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 7px; /* 太さ */
  background-color: #FEFE00;
  bottom: 3px; /* ← かぶせ量を調整する場所 */
  z-index: -1; /* 文字の後ろに置く */
}
/* 3行目：フォントサイズ25px、ミディアム、カラー指定 */
.price-discount {
  font-size: 25px;
  font-weight: 500; /* ミディアム */
  color: #EA442E;
}
/* 箇条書き四角 */
.square {
  list-style: none;
  padding-left: 0;
  width: fit-content;
  text-align: left;
  color: inherit;
}
.square li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}
.square li::before {
  content: "■";
  color: #fcb34d;
  font-size: 0.7rem;
  position: absolute;
  left: 0;
  top: 0.4rem;
  line-height: 1;
}
.cashless, .cashless-blue {
  color: #0089D4;
}
.cashless-blue {
  margin: 0.7rem auto 0.3rem;
}
.policy-link {
  font-size: 12px;
  text-align: right;
}
.green {
  color: #54c591;
}
.margin-top {
  margin-top: 0.5rem;
}
/* お問い合わせゾーン
----------------------------------------------------*/
/* セクション背景 */
.cta-bottom {
  background-color: #FFECCB;
  padding: 1.5rem 0.5rem 2.5rem;
}
/* 内側白背景ボックス */
.cta-bottom-list {
  background-color: #fff;
  border-radius: 10px;
  padding: 1rem 0 2rem;
}
/* 全体センタリング */
.contact-box {
  text-align: center;
}
/* 最初のテキスト */
.contact-text {
  font-size: 16px;
  margin-bottom: 1rem;
}
.tel-icon {
  width: 27px;
  height: auto;
  position: relative;
  top: -5px;
}
/* 電話番号：太字＋30px、段落分離で margin が効く */
.contact-tel {
  font-size: 30px;
  font-weight: bold;
  margin-top: 10px;
}
/* 営業時間の背景ブロック */
.contact-hours {
  font-size: 14px;
  background-color: #FEF9E5;
  border-radius: 10px;
  padding: 8px 24px;
  display: inline-block;
  margin-bottom: 1.5rem;
}
/* ボタン本体 */
.contact-btn {
  position: relative;
  width: 300px;
  height: 46px;
  margin: 0 auto; /* ← 中央配置 */
  border: none;
  border-radius: 50px;
  margin-bottom: 2rem;
  background: linear-gradient(90deg, #FEC202 0%, #FFA602 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600; /* セミボールド */
  cursor: pointer;
  /* ボタンのシャドウ */
  box-shadow: 0 7px 4px rgba(199, 132, 7, 0.2);
  /* 中のテキスト配置 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* テキストシャドウ */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}
/* 〉 の配置（右端固定） */
.contact-btn .cta-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  /* 文字シャドウ */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}
/* お申し込みブロック専用 */
.apply-box {
  text-align: center;
}
.apply-title {
  font-size: 25px;
  position: relative;
  display: inline-block;
  margin: 0 auto 2rem;
  line-height: 1;
  padding-bottom: 0;
  z-index: 2; /* ★ 文字を前面に */
}
.apply-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background-color: #FEFE00;
  bottom: -8px;
  z-index: -1; /* ★ ← 文字より後ろに強制配置 */
}
/* ↓↓↓ の調整：25px ＋ タイトルとボタンの中央に配置 */
.apply-arrow {
  font-size: 25px;
  margin: 0 0 2rem; /* 上下の真ん中に来やすい余白 */
}
/* contact-box が連続するとき、その2つ目の前に仕切り線を入れる */
.contact-box + .contact-box::before {
  content: "";
  display: block;
  height: 3px;
  background-color: #FFECCB;
  /* 左右2remの余白を確保して中央に */
  margin: 2rem 2rem;
  /* ブロックとして表示（横線になる） */
  width: auto;
}
.note-text {
  margin-top: 1rem;
}
.note-text2 {
  margin-top: 0.5rem;
}
/* ご利用ガイド内：インライン用 申込ボタン */
.contact-btn--inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -2px;
  width: auto;
  height: 30px;
  padding: 0 32px 0 16px; /* ← 右に矢印分の余白だけ確保 */
  margin: 0 4px;
  font-size: 13px;
  vertical-align: middle;
  box-shadow: 0 3px 2px rgba(199, 132, 7, 0.2);
}
/* 矢印だけ縮小（基準は button のまま） */
.contact-btn--inline .cta-arrow {
  right: 10px; /* 右端に寄せる */
  font-size: 11px; /* 小さく */
}
/* ２ページ目以降
-----------------------------------------------------*/
/* セクション全体 */
.service-section, .company-section, .privacy-section, .tos-section, .form-section {
  padding: 1.5rem 0.5rem 2.5rem;
}
.margin {
  margin-bottom: 2rem;
}
/* h1（ページタイトル） */
.service-title, .company-title, .privacy-title, .tos-title, .form-title {
  font-size: 20px;
  font-weight: 600;
  position: relative;
}
.service-title::after, .company-title::after, .privacy-title::after, .tos-title::after, .form-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #3BA0F0;
}
.section-heading {
  text-align: center;
  font-weight: 500;
  font-size: 18px;
}
.heading-price {
  font-size: 18px;
}
.heading-price, .heading-time, .heading-clean {
  margin: 1rem auto 0.5rem;
}
.clean-type {
  color: #569F67;
}
.bg-text {
  background-image: url("../images/mobile/circle_img.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  padding: 4px 8px; /* 文字と背景の余白 */
}
.heading-caution {
  color: #fff;
  background-color: #808080;
  margin: 0 6rem;
}
.unit-text {
  font-size: 12px;
  text-align: right;
}
.time-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  align-items: center;
  width: 100%;
}
.time-row {
  display: grid;
  grid-template-columns: 9em 1.5em 1fr;
  width: 100%;
  max-width: 320px;
  align-items: center;
}
.time-left {
  text-align: left;
  white-space: nowrap;
}
.time-center {
  text-align: center;
  white-space: nowrap;
}
.time-right {
  text-align: right;
  white-space: nowrap;
}
/* お掃除機能付きエアコン：リスト */
.clean-ac-section ul li {
  color: #0B82D4;
  margin-left: 1rem;
}
/* 注意書き */
.clean-ac-section p {
  font-size: 14px;
}
/* 注意事項 全体 */
.caution-box {
  background-color: #FEF9E5;
  border-radius: 10px;
  padding: 1rem 0.5rem;
}
/* リード文 */
.caution-lead {
  text-align: center;
  margin: 0.5rem auto 1rem;
}
/* 注意事項リスト */
.caution-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0.5rem;
}
/* 表全体 */
.company-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem auto 1rem;
}
/* 共通セル */
.company-table th, .company-table td {
  border: 1px solid #D3E3ED;
  padding: 0.75rem;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.5;
}
/* 左カラム（2） */
.company-table th {
  width: 35%; /* 2：3 → 2 / (2+3) = 40% */
  background-color: #DFF2FF;
  font-weight: 500; /* ミディアム */
  text-align: center; /* ← 左右中央 */
  vertical-align: middle; /* ← 上下中央 */
}
/* 右カラム（3） */
.company-table td {
  width: 65%;
}
.company-info-row {
  display: grid;
  grid-template-columns: 40% 1em 1fr; /* ← 3：7くらいの位置 */
  align-items: start; /* ← 1行目基準で揃える */
  width: 100%;
  margin-bottom: 0.3rem;
}
.company-info-label {
  text-align: left;
  white-space: nowrap;
}
.company-info-colon {
  text-align: center;
  line-height: 1.4; /* 1行目に自然に揃う */
}
.company-info-value {
  text-align: left; /* ← 右揃えをやめる */
  white-space: normal; /* ← 自然に折り返す */
  word-break: break-word;
}
/* 連絡先（td 内の2カラム） */
.contact-table {
  display: flex;
  gap: 1rem; /* 左右の間隔 */
  align-items: flex-start;
}
/* 左右共通 */
.contact-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem; /* 行間 */
}
/* 左側（TEL / MAIL / FAX） */
.contact-labels {
  font-weight: 500; /* ミディアム */
  white-space: nowrap;
}
/* 右側（内容） */
.contact-values {
  font-weight: 400; /* レギュラー */
}
.privacy-heading, .tos-heading {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  padding-left: 16px;
  margin: 0.5rem auto;
}
.privacy-heading::before, .tos-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 100%;
  background-color: #3BA0F0;
  border-radius: 15px;
}
.privacy-list, .tos-list {
  list-style: decimal; /* 1. 2. 3. */
  list-style-position: outside; /* ← 重要 */
  padding-left: 1.5em; /* ← 数字分の逃げ */
}
/* 2階層目：a. b. c. */
.privacy-sublist, .tos-sublist {
  list-style-type: lower-alpha;
  list-style-position: outside;
  padding-left: 1.5em;
}
/* 3階層目：i. ii. iii. iv. */
.privacy-subsublist {
  list-style-type: lower-roman;
  list-style-position: outside;
  padding-left: 1.5em;
}
.privacy-text, .tos-text {
  padding: 1rem 0;
}
.privacy-text2, .tos-text2 {
  padding-bottom: 0.5rem;
}
.align-right {
  text-align: right;
  padding-top: 2rem;
}
/* ================================
   お申し込みフォーム
================================ */
/* お申し込みフォーム外枠 */
.apply-form-wrap {
  background-color: #DFF2FF;
  border-radius: 12px;
  padding: 1rem 0.5rem;
  margin-top: 1.5rem;
}
.apply-text {
  padding: 1rem 0;
}
/* フォーム本体（白背景） */
.apply-form {
  background-color: #fff;
  border-radius: 12px;
  padding: 1.5rem 1rem;
  font-size: 14px;
}
.form-row {
  margin-bottom: 1.5rem;
}
.form-row-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.form-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.form-item label {
  font-weight: 500;
}
.form-item input, .form-item select, .form-item textarea {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 14px;
}
/* 見出し */
.form-heading {
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}
.form-inline-label {
  font-weight: 500;
  margin-bottom: 0.3rem;
}
/* 同意 */
.form-consent {
  font-size: 12px;
  margin-top: 1rem;
}
.form-consent a {
  display: inline-block;
  margin-right: 0.5rem;
  text-decoration: underline;
}
/* 送信 */
.form-submit {
  text-align: center;
  margin-top: 2rem;
}
.form-submit button {
  width: 100%;
  max-width: 300px;
  height: 46px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(90deg, #FEC202, #FFA602);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 7px 4px rgba(199, 132, 7, 0.2);
}
/* ================================
   入力欄
================================ */
/* 文字入力 */
.form-input, .form-textarea {
  background-color: #fff1dc;
  border: 1px solid #569bff;
  box-sizing: border-box;
}
.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: #569bff;
}
/* プルダウン */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #f0f8ff;
  color: #1e1e1e;
  border: 1px solid #f0f8ff;
  box-sizing: border-box;
  /* ▼ を中央に表示 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0 Z' fill='%231e1e1e'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 10px 6px;
  padding-right: 2.2rem;
}
.form-select:focus {
  outline: none;
}
/* radio / checkbox */
input[type="radio"], input[type="checkbox"] {
  accent-color: #569bff;
}
/* ================================
   必須項目 未入力時の表示
================================ */
.apply-form input:required:invalid, .apply-form select:required:invalid, .apply-form textarea:required:invalid {
  border-color: #e60000;
  background-color: #fff5f5;
}
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus {
  border-color: #569bff;
  background-color: #fff1dc;
}
.form-input.error {
  border-color: #e60000;
  background-color: #fff5f5;
}
/* radio 用 */
.radio-group.is-error {
  outline: 2px solid #e53935;
  padding: 8px;
  border-radius: 4px;
}
/* エラーメッセージ */
.form-error {
  display: none;
  color: #e53935;
  font-size: 14px;
  margin-top: 4px;
}
/* disabled */
.form-submit button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}
/* ================================
   確認・完了ページ
================================ */
.confirm-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  font-size: 14px;
}
.confirm-list dt {
  font-weight: 600;
  color: #3BA0F0;
}
.confirm-list dd {
  margin-left: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #D3E3ED;
}
.form-submit button {
  margin: 0.5rem auto;
}
.send-back-wrap {
  margin-top: 1rem;
  text-align: right;
}
/* フッター
-----------------------------------------------------*/
/* フッター全体 */
.footer {
  background-color: #54C591;
  text-align: center;
  padding: 2rem 1rem 1.5rem; /* 余白は後で調整OK */
}
/* UL：2カラムのリンクレイアウト */
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ← 2カラム */
  gap: 0.75rem 1rem; /* 縦横の隙間（後で調整可） */
  max-width: 360px; /* 横幅を整えるための上限（好みで調整） */
}
/* 各リンク */
.footer-nav a {
  color: #fff;
  font-weight: 500; /* ミディアム */
  text-decoration: none;
  font-size: 15px;
  display: block;
  white-space: nowrap;
  /* ドロップシャドウ */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}
/* コピーライト */
.footer-copy {
  color: #fff;
  font-size: 12px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  display: block;
}
html, body {
  height: 100%;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  width: 100%;
}
.main-inner {
  max-width: 390px;
  margin: 0 auto;
  box-sizing: border-box;
}
.footer {
  margin-top: auto;
  width: 100%;
}
.footer-inner {
  max-width: 390px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* レスポンシブ用一時的措置
---------------------------------------------------------- */
/* =================================
   モバイルファースト固定レイアウト
================================= */
/* 横はみ出し防止 */
.form-section, .apply-form-wrap, .apply-form, .tos-section, .privacy-section, .company-section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* 長文・リスト折り返し */
.tos-section p, .tos-section li, .privacy-section p, .privacy-section li {
  word-break: break-word;
}
/* ================================
   PCでもスマホ1カラム固定（応急対応）
================================ */
/* main 内は常にスマホ幅の器にまとめる */
main {
  display: flex;
  justify-content: center;
}
main > .main-inner {
  width: 100%;
  max-width: 390px;
}
/* フォーム2カラムを完全に無効化 */
.form-row-2col {
  grid-template-columns: 1fr !important;
}
/* 2ページ目以降の各セクションも念のため */
.service-section, .company-section, .privacy-section, .tos-section, .form-section {
  width: 100%;
  max-width: 390px;
  margin-left: auto;
  margin-right: auto;
}
/* ================================
   PC表示用 ヘッダー中央寄せ
================================ */
@media screen and (min-width: 768px) {
  .header > * {
    max-width: 1100px; /* 好みで 1000〜1200px */
    margin-left: auto;
    margin-right: auto;
  }
}