@charset "UTF-8";
/* CSS Document */

/* ========== 基本 ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'MS UI Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}
html, body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
body { margin: 0; padding: 0; }
p { margin: 0; padding: 0; }
img { vertical-align: top; }
a { word-wrap: break-word; }

.lpcontent_wrap { width: 750px; margin: 0 auto; }
.lpcontent_wrap p { text-align: center; }
.lpcontent_wrap p img { max-width: 100%; }

@media (max-width: 749px) {
  .lpcontent_wrap { width: 100%; }
  img { width: 100%; height: auto; }
}

/* ========== ヘッダー ========== */
.header {
  margin: 0; padding: 0;
  display: flex;
  width: 750px;
}
.header p:first-child { width: 347px; }
.header p:nth-child(2) { width: 125px; }
.header p:last-child  { width: 278px; }

.time01 {
  text-align: center;
  font-size: 250%;
  font-weight: 600;
  display: flex; justify-content: center; align-items: center;
  padding: 20px 0;
}
.saitan {
  background: #da2d1e; color: #fff;
  padding: 3px 30px; border-radius: 60px;
  font-size: 80%; font-weight: normal; margin-left: 3px;
}
.tenmin { color: #da2d1e; font-size: 150%; }
.red_f { color: #da2d1e; }

.time02 {
  text-align: center; font-size: 200%; font-weight: 600;
  display: flex; justify-content: center; align-items: center;
  padding: 20px 0;
}

@media (max-width: 749px) {
  .header { width: 100%; }
  .header p:first-child { width: 46.26%; }
  .header p:nth-child(2){ width: 16.66%; }
  .header p:last-child  { width: 37.08%; }
  .time01 { font-size: 130%; }
  .saitan { padding: 3px 10px; border-radius: 30px; }
  .tenmin { font-size: 150%; }
  .time02  { font-size: 100%; }
}

/* ========== 対応エリアアコーディオン ========== */
.acco { position: relative; background: #f7fbb7; padding-bottom: 60px; }

div.accordion {
  display: block; line-height: 70px; cursor: pointer;
  font-size: 150%; transition: .5s ease-in; position: relative;
  height: 70px; margin: 0 auto 15px; border: none; border-radius: 5px;
  background: #f89c00; font-weight: 600; width: 80%; text-align: center; color: #fff;
}
.accordion.active { margin-bottom: 0; }

div.panel { max-height: 0; overflow: hidden; transition: .3s ease-out; }
.panel p {
  padding: 10px 20px; background: #fff; margin: 0 auto 15px;
  position: relative; width: 80%; text-align: left;
}
div.accordion:hover { background: #e4680d; }
div.accordion:after {
  font-family: "Font Awesome 5 Free"; content: '\2b'; font-weight: 900; font-size: 2rem;
  color: #fff; position: absolute; right: 15px; top: 47%; transform: translateY(-46%);
}
div.accordion.active:after {
  font-family: "Font Awesome 5 Free"; content: "\f068"; font-weight: 900; font-size: 1.5rem;
}

@media (max-width: 749px) { div.accordion, .panel p { width: 95%; } }

/* ========== よくある質問アコーディオン ========== */
.acco02 { position: relative; padding: 30px 0 60px; }

div.accordion02 {
  display: block; line-height: 70px; border: none; cursor: pointer;
  font-size: 90%; transition: .5s ease-in; position: relative; height: 70px;
  margin: 0 auto 15px; border-radius: 5px; background: #384bb4; font-weight: 600;
  width: 80%; text-align: left; color: #fff; padding-left: 60px;
}
.accordion02:before {
  content: "Q"; position: absolute; left: 15px; top: 50%;
  display: inline-block; width: 35px; height: 35px; line-height: 35px; text-align: center;
  font-family: Arial, sans-serif; font-size: 21px; background: #fff; color: #384bb4; border-radius: 50%;
  transform: translateY(-50%);
}
.accordion02.active { margin-bottom: 0; }

div.panel02 { max-height: 0; overflow: hidden; transition: .3s ease-out; }
.panel02 p {
  padding: 10px 20px; background: #fff; margin: 0 auto 15px;
  position: relative; width: 80%; text-align: left;
}
div.accordion02:hover { background: #7c8de9; }
div.accordion02:after {
  font-family: "Font Awesome 5 Free"; content: '\2b'; font-weight: 900; font-size: 2rem;
  color: #fff; position: absolute; right: 15px; top: 47%; transform: translateY(-46%);
}
div.accordion02.active:after {
  font-family: "Font Awesome 5 Free"; content: "\f068"; font-weight: 900; font-size: 1.5rem;
}

@media (max-width: 749px) { div.accordion02, .panel02 p { width: 95%; } }

/* ========== WEB無料相談フォーム（モーダル） ========== */

/* モーダル開時の背景ロック（JSで body に付与） */
.webform-no-scroll { overflow: hidden; }

/* モーダル全体：画面に固定し、背景スクロールは伝播させない */
.webform-modal[hidden] { display: none; }
.webform-modal{
  position: fixed; inset: 0; z-index: 10010;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  touch-action: manipulation;
}

/* 背景オーバーレイ */
.webform-overlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}

/* ダイアログ：縦積み・高さ制限・内部にスクロールを閉じ込める */
.webform-dialog{
  position: relative; width: min(720px, 100%);
  background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  animation: webformIn .16s ease-out;
}

@keyframes webformIn { from {opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }

/* ヘッダー */
.webform-head{
  background: #0b0b0c; color: #fff; padding: 18px 20px;
  font-weight: 800; letter-spacing: .06em; font-size: 18px;
  flex: 0 0 auto;
}

/* 閉じるボタン */
.webform-close{
  position: absolute; right: 10px; top: 10px;
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: #111; color: #fff; font-size: 18px; line-height: 36px;
  cursor: pointer; opacity: .92;
}
.webform-close:hover{ opacity: 1; }

/* 本体（ここだけスクロール） */
.webform{
  flex: 1 1 auto; min-height: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: #cfe3f6; border-top: 1px solid #b9d1ea; padding: 18px;
}

/* 行・ラベル */
.webform-row { margin: 16px 0; }
.webform-label{ display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }

/* 必須バッジ */
.webform-badge{
  display: inline-flex; align-items: center; justify-content: center;
  background: #e8f0ff; color: #0a46a6; border: 1px solid #b9cdf9;
  padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 700;
}

/* 入力 */
.webform input[type="text"],
.webform input[type="tel"],
.webform input[type="email"],
.webform textarea{
  width: 100%; background: #fff; border: 1.2px solid #d7dce2;
  border-radius: 14px; padding: 14px; font-size: 16px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.webform textarea{ min-height: 160px; resize: vertical; }
.webform input::placeholder, .webform textarea::placeholder{ color:#9aa4b2; }
.webform input:focus, .webform textarea:focus{
  border-color: #2a7fff; box-shadow: 0 0 0 3px rgba(42,127,255,.15);
}

/* ラジオ群 */
.webform-options{
  display: grid; gap: 10px 16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 560px){ .webform-options{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.webform-option{ display: flex; align-items: center; gap: 8px; font-size: 15px; }

/* フッター（送信ボタン行） */
.webform-actions{
  flex: 0 0 auto;
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 18px;
  position: sticky; bottom: calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(#cfe3f6 60%, rgba(207,227,246,0));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 2;
}
.webform-btn{
  appearance: none; border: none; cursor: pointer;
  border-radius: 14px; background: #0b0b0c; color: #fff;
  padding: 14px 18px; font-size: 16px; font-weight: 800; letter-spacing: .06em;
  box-shadow: 0 10px 18px rgba(0,0,0,.15);
  transition: transform .06s ease, filter .2s ease;
  position: relative; z-index: 3;
}
.webform-btn:hover{ filter: brightness(1.08); }
.webform-btn:active{ transform: translateY(1px); }
.webform-btn-secondary{ background: #eef1f5; color: #111; box-shadow: none; }

/* スクリーンリーダー */
.sr-only{
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ========== SP固定CTA ========== */
.sp-cta{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  transform: translateY(110%); transition: transform .25s ease;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-touch-callout: none;
  pointer-events: none; /* 透明部がタップを奪わない */
}
.sp-cta img{ width: 100%; display: block; }
.sp-cta.is-show{ transform: translateY(0); }

/* クリック領域 */
.sp-cta .hit{
  position: absolute; top: 14%; bottom: 14%; display: block;
  pointer-events: auto; /* 実ボタンのみ反応 */
}
.sp-cta .hit.line{ left: 2%;  right: 72%; }
.sp-cta .hit.web { left: 28%; right: 46%; }
.sp-cta .hit.tel { left: 52%; right: 2%; }

@media (min-width: 769px){ .sp-cta{ display: none; } }

/* CTA表示中はページに下余白（JSで .has-sp-cta を付与） */
body.has-sp-cta{
  padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
}

/* 入力中はCTAを退避（JSで body.kb-open を付与） */
body.kb-open .sp-cta{ transform: translateY(110%) !important; }

/* ========== フッター ========== */
.lp_footer{ background: #000; width: 100%; padding: 50px 0; }
.lp_footer ul{
  margin: 0; padding: 0; display: flex; justify-content: center; list-style: none;
}
.lp_footer ul li{ padding: 0 15px; color: #fff; }
.lp_footer ul li a{ color: #fff; text-decoration: none; }

@media (max-width: 750px){
  .lp_footer ul{ display: block; text-align: center; padding: 0 5%; list-style: none; }
  .lp_footer ul li{ padding: 15px 0; }
}