@charset "utf-8";

:root{--blue:#0b4375; --blue-600:#043a67; --blue-50:#eef6ff; --sky:#eaf4ff; --accent:#ef4444;/* 赤 */ --gold:#ffd400;/*黄色ハイライト*/ --ink:#1f2937; --check:#16a34a; --card:#ffffff; --line:#dbe7f5; --shadow: 0 8px 24px rgba(0,0,0,.08);}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; color:var(--ink); background:#f3f6fb; line-height:1.85;}
.wrapper{max-width:750px; margin:0 auto; background:#fff; box-shadow:var(--shadow);}
.section{padding:28px 24px}
h1,h2,h3,p{margin:0}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}
/* 到達位置の頭が隠れないよう少し余白（数値は好みで） */
/*#contact { scroll-margin-top: 16px; }*/




/* -------------------- FV（ファーストビュー） -------------------- */
.fv-section {background: #ffffff; padding: 0px;}
.fv-inner {width: 100%; margin: 0 auto; text-align: center;}
.fv-inner img {width: 100%;/*スマホではみ出さないように*/ height: auto; display: block;}

/* -------------------------- CTA -------------------------- */
.cta-section {background: #e6f3ff; padding: 40px 0; text-align: center;}
.cta-inner {max-width: 750px; margin: 0 auto;}
.cta-tel {font-size: 40px; font-weight: 700; margin-bottom: 5px;}
.cta-tel a {color: #004899; text-decoration: none;}
.cta-tel a:hover {text-decoration: underline;}
.cta-button {display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: #ff8800; color: #fff; font-size: 30px; font-weight: 700; text-decoration: none; padding: 10px 28px; border-radius: 40px; transition: background 0.3s ease; width: 100%; max-width: 500px; margin: 0 auto;}
.cta-button:hover {background: #ff7000;}
.cta-icon img {width: 30px; height: auto; display: block;}
.cta-arrow {font-size: 20px; margin-left: 8px;}

/* スマホ調整 */
@media (max-width: 768px) {
.cta-tel {font-size: 25px;}
.cta-button {font-size: 20px; padding: 10px 0px; width: 90%;}
.cta-icon img {width: 20px;}
.cta-arrow {font-size: 16px;}
}

/* ------------------------- 問題提起 ------------------------- */
.problem-section {background: #e6f3ff; padding: 0px;}
.problem-inner {width: 100%; max-width: 600px; margin: 0 auto; text-align: center;}
.problem-inner img {width: 100%;/* スマホではみ出さないように */ height: auto; display: block;}

/* --------------------------- 解決 --------------------------- */
.solution-section {background: #004c9c; padding: 0px;}
.solution-inner {width: 100%; max-width: 600px; margin: 0 auto; text-align: center;}
.solution-inner img {width: 100%;/* スマホではみ出さないように */ height: auto; display: block;}

/* ------------------------- ノーリスク ------------------------- */
.riskfree-section {background: #e6f3ff; padding: 60px 0;}
.riskfree-inner {width: 100%; max-width: 600px; margin: 0 auto; text-align: center;}
.riskfree-inner img {width: 100%;/* スマホではみ出さないように */ height: auto; display: block;}

/* --------------------- 販売店様の声・事例 --------------------- */
.voice-section{background:#e6f3ff; padding:48px 0;}
.voice-inner {width: 100%; max-width: 750px; margin: 0 auto;}
.voice-title{font-size:14px; letter-spacing:.32em; color:#0b4a86; text-align:center; margin:0 0 20px; font-weight:700;}
.voice-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column;}
.voice-item{display:flex; justify-content:center; align-items:center;}
.voice-item img{width: 100%; max-width: 650px; height:auto; display:block; margin: 10px 0px;}
/* スマホ調整 */
@media (max-width: 768px) {.voice-section{padding:10px 0;}}

/* ----------------------- 3つのメリット ----------------------- */
.merit-section{background:#e6f3ff; padding:48px 0;}
.merit-inner {width: 100%; max-width: 750px; margin: 0 auto;}
.merit-title{font-size:14px; letter-spacing:.32em; color:#0b4a86; text-align:center; margin:0 0 20px; font-weight:700;}
.merit-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:28px;}
.merit-item{display:flex; justify-content:center; align-items:center;}
.merit-item img{width: 100%; max-width: 500px; height:auto; display:block; margin: 10px 0px;}

/* ---------------------- カーマッチグループは～ ---------------------- */
.map-section {background: #ffffff; padding: 0px;}
.map-inner {width: 100%; margin: 0 auto; text-align: center;}
.map-inner img {width: 100%;/* スマホではみ出さないように */ height: auto; display: block;}

/* ---------------------- お問い合わせフォーム前のタイトル ---------------------- */
.form-title-section {background: #004c9c; padding: 0px;}
.form-title-inner {width: 100%; margin: 0 auto; text-align: center;}
.form-title-inner img {width: 100%;/* スマホではみ出さないように */ height: auto; display: block;}

/* ---------------------- お問い合わせフォーム ---------------------- */

/* 背景ブルー＋内側に白ボックス */
.inset-section{background:#004c9c; padding: 20px 12px 70px 12px; /* ← “少し内側”の青い余白を作る */}
.inset-inner{max-width: 750px; width: 100%; margin: 0 auto; background:#fff; border-radius: 10px; padding: clamp(16px, 3vw, 32px); box-shadow: 0 6px 20px rgba(0,0,0,.08);}

/* 余白を少し広げたい場合（PC） */
/*@media (min-width: 960px){
  .inset-section{ padding: 32px 0; }
  .inset-inner{ border-radius: 18px; }
}*/






/* formの部品
==================================================--*/
#form .pp-note {
	font-size: 0.9rem;
	margin-bottom: 0.5em;
}

/* 各種入力エリアの共通設定 */
#form input[type="text"],
#form input[type="tel"],
#form input[type="email"],
#form textarea,
#form select {height: 3.5rem; width: 100%; /*font-size: 16px;*/ font-size: 19px; padding: 0.3em; color: #333; background-color: #FFFFFF; border-radius: 0.3em; margin-top: 0.2em; border: solid 1px #B0B0B0;}

/*郵便番号入力エリア単独設定*/
#form input[type="text"]#zipcode {width: 10em;}
/*電話番号入力エリア単独設定*/
#form input[type="tel"] {width: 15em;}

/* チェックボックス */
#form .checkbox-boxes {display: flex; flex-wrap: wrap; justify-content: space-between; border: none; padding: 5px 0px; margin: 0px;}
#form .checkbox-boxes label {display: flex; align-items: center; gap: 0 0.1em; position: relative; width: 49%; height: 3.5rem; margin-bottom: 0.6rem; padding:0 0 0 0.7rem; border-radius: 5px; background-color: #f2f2f2; cursor: pointer;}
#form .checkbox-boxes label:has(:checked) {background-color: #b2cbfd; font-weight: bold;}
#form .checkbox-boxes label:hover{background-color: #b2cbfd;}
#form .checkbox-boxes label::before {width: 18px; height: 18px; border-radius: 2px; background-color: #fff; border: 1px solid #888; content: '';}
#form .checkbox-boxes label:has(:checked)::after {position: absolute; top: 35%; left: 17px; transform: rotate(45deg); width: 6px; height: 12px; border: solid #1b2c70; border-width: 0 2px 2px 0; content: '';}
#form .checkbox-boxes input {appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none;}


#form .vertical-box {display: flex; align-items: center; margin-bottom: 0.5rem;}
#form .vertical-box input[type=radio] {	margin: 2px 5px 0 0; width: 25px; height: 25px;}
#form .vertical-box label {	/*	width: calc(100% - 30px);*/ font-size: 1.1rem; font-weight: normal;}

#form textarea {height: 12em; margin: 0.2em 0 1rem 0;}

#form select {width: auto; padding: 0.3em 1em;}


/*必須、任意ラベル*/
#form .which {display: flex; align-items: center; /*height: 1.4rem;*/ margin-right: 5px; padding: 5px 5px; font-size: 0.9rem; font-weight: normal; color: #fff; white-space: nowrap; border-radius: 4px;}
#form .which.require {background-color: #FA6723;}
#form .which.optional {background-color: #a9a9a9;}

/*必須、任意も含む　右側項目タイトル*/
#form .item-name-box {display: flex; align-items: center; width: 100%; line-height: 1.1; margin: 2rem 0 0.2rem;}
#form .item-name-box label {/*margin-right: 0.4em;*/ font-weight: bold; font-size: 1.2rem;}
#form .item-name-box label .small {font-size: 0.7em;}

/*プレースホルダー テキスト入力欄に最初から薄く表示されている案内文字*/
::placeholder {color: #aaa;}
/* 旧Edge対応 */
::-ms-input-placeholder {color: #aaa;}

/*送信ボタン*/
#form input[type="submit"].btn {display: block; margin: 0 auto; font-weight: bold; color: #fff; padding: 0.8em; letter-spacing: 0.05em; background-color: #FA6723; border: none; margin: 30px auto;}

#form label.error {
	display: block;
	width: 100%;
	margin-right: 0;
	padding-left: 0;
	border-left: none;
}

#form .error {
	font-size: 1rem;
	font-weight: bold;
	color: #f00;
}

#form input[type="text"].error,
#form input[type="tel"].error,
#form input[type="email"].error,
#form select.error,
#form textarea.error {
	border: 3px solid #f00;
	background: #FFF0F0;
	color: #333;
	font-weight: normal;
	font-size: 16px;
}

#form input[type="submit"],
#form input[type="button"] {
	text-align: center;
	width: 80%;
	max-width: 400px;
	font-size: 1.1rem;
	padding: 1rem 0;
	border-radius: 5px;
	box-shadow: 0px 5px 5px -2px rgba(50, 50, 50, 0.2);

}

#form input[type="submit"]:hover,
#form input[type="button"]:hover {
	opacity: 0.8;
	cursor: pointer;
}

#form input[type="submit"].col1,
#form input[type="button"].col1 {
	width: 80%;
	margin: 0 auto;
}

#form .btn-box {
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

#form input[type="submit"].col2,
#form input[type="button"].col2 {
	width: 46%;
}

#form .col2-space {
	margin-right: 6px;
}

#form input[type="submit"].go,
#form input[type="button"].go {
	background-color: #FA6723;
	color: #fff;
	border: none;
}




#form input[type="submit"].back,
#form input[type="button"].back {
	background-color: #eee;
	color: #555;
	border: 1px solid #aaa;
}












































/* ---------------------- フッター ---------------------- */
.site-footer{border-top: 1px solid var(--line); background: transparent; color: #64748b; /* 目立たない落ち着いた色 */}
.site-footer__inner{max-width: 750px; margin: 0 auto; padding: 14px 16px 18px; text-align: center;}
.site-footer__links{display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px;}
.site-footer__links a{color: #64748b; text-decoration: none;}
.site-footer__links a:hover{ color: var(--blue); text-decoration: underline; }
.site-footer__copy{display: block; margin-top: 6px; font-size: 12px; color: #94a3b8;/* さらに控えめ */}
.site-footer__links .sep{ opacity:.5; }

/* スマホ微調整 */
@media (max-width: 480px){
.site-footer__links{ gap: 10px; font-size: 12px; }
.site-footer__copy{ font-size: 11px; }
}



/* -------------------- フローティングCTA -------------------- */
.floating-cta { --bar-h: 100px; /* 画像の高さに応じて調整 */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: rgba(230,243,255,0.9); /* #e6f3ffを透過 */ padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); box-shadow: 0 -4px 16px rgba(0,0,0,.08);}
.floating-cta__inner {max-width: 750px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; /* 左右2つ */ gap: 12px; align-items: center;}
.floating-cta__btn {display: block; line-height: 0; /*border-radius: 6px;*/ overflow: hidden; transition: filter .18s ease, opacity .18s ease; will-change: filter;}

/* ホバー/フォーカス時にわずかに明るく＆鮮やかに */
.floating-cta__btn:hover img, .floating-cta__btn:focus-visible img{filter: brightness(1.06) saturate(1.05); opacity: 0.98;/* 好みで外してOK */}

/* モーション軽減設定のユーザー配慮（任意） */
@media (prefers-reduced-motion: reduce){
.floating-cta__btn{ transition: none; }
}

.floating-cta__btn img {width: 100%; height: auto; display: block;}

/* ページ末尾に余白を確保 */
.floating-cta-spacer { height: 120px; }

@media (max-width: 480px) {
.floating-cta__inner { gap: 8px; }
.floating-cta-spacer {height: 80px; /*height: 100px;*/ }
}

/* ※スマホは縦2段にしたい場合は下を有効化
@media (max-width: 480px){
  .floating-cta__inner{ grid-template-columns: 1fr; }
}*/