*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#202929;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','Yu Gothic',YuGothic,Meiryo,sans-serif}.lp{max-width:768px;margin:0 auto;overflow:hidden;background:#fff}.lp-block{width:100%;background:#fff}.lp-block img{display:block;width:100%;height:auto}.white-pad{padding:40px 0}.reason-block{background:#fff;padding-bottom:60px}.bridge-title{position:relative;z-index:10;margin:-60px auto -50px;padding:0 20px;background:transparent}.bridge-title img{display:block;width:90%;max-width:720px;margin:0 auto}.site-header{position:relative}.menu-btn{position:fixed;top:40px;right:0;width:76px;height:76px;background:#1f2928;border:none;z-index:1000}.menu-btn span{display:block;width:34px;height:3px;background:#fff;margin:8px auto}.drawer{position:fixed;top:92px;right:-100%;width:calc(100% - 24px);max-width:510px;background:#fff;border:4px solid #1f2928;z-index:1001;transition:.3s;padding:35px 26px 24px}.drawer.active{right:0}.close-btn{position:absolute;top:-96px;right:-4px;width:76px;height:76px;background:#1f2928;color:#fff;border:none}.close-btn span{position:absolute;top:28px;left:18px;width:42px;height:3px;background:#fff}.close-btn span:first-child{transform:rotate(45deg)}.close-btn span:nth-child(2){transform:rotate(-45deg)}.close-btn small{position:absolute;bottom:12px;left:0;right:0;font-size:14px;font-weight:bold}.drawer ul{list-style:none;padding:0;margin:0}.drawer li{border-bottom:1px solid #333}.drawer a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;color:#1f2928;text-decoration:none;font-size:20px;font-weight:700}.drawer a::after{content:'›';font-size:44px;line-height:1;font-weight:300}.cta-section{background:#10b5cf;padding:36px 16px}.cta-section img{display:block;width:100%;height:auto}.cta-section a{display:block}.product-slider-section{position:relative;background:#fff;padding:35px 40px}.product-slider,.staff-slider{overflow:hidden}.product-track,.slider-track{display:flex;transition:.4s ease}.product-slide,.staff-slide{min-width:100%}.product-slide img,.staff-slide img{display:block;width:100%;height:auto}.product-arrow,.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;z-index:20;cursor:pointer}.product-arrow img,.slider-arrow img{width:44px;display:block}.product-prev,.prev{left:4px}.product-next,.next{right:4px}.staff-slider-section{position:relative;background:#efefef;padding:40px 40px 55px}.slider-dots{display:flex;justify-content:center;gap:10px;margin-top:24px}.slider-dots span{width:13px;height:13px;border-radius:50%;background:#d4d4d4;cursor:pointer}.slider-dots span.active{background:#003b50}.faq{background:#09adc1;padding:70px 16px}.faq h2{text-align:center;color:#fff;font-size:36px;margin:0 0 45px}.faq-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;border-bottom:20px solid #512419}.faq-tabs button{border:0;border-radius:22px 22px 0 0;background:#fff;color:#512419;font-size:20px;font-weight:900;padding:22px 4px 28px;position:relative}.faq-tabs button.active{background:#512419;color:#fff}.faq-tabs button::after{content:'';position:absolute;left:50%;bottom:12px;transform:translateX(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-top:12px solid currentColor}.faq-panel{display:none;padding-top:45px}.faq-panel.active{display:block}.faq-item{margin-bottom:24px}.faq-item button{width:100%;background:#fff;border:0;display:flex;align-items:center;gap:14px;padding:18px 18px;font-size:22px;font-weight:800;color:#202929;text-align:left}.faq-item button span{font-size:42px;color:#ff6b00}.faq-item button em{margin-left:auto;font-style:normal;font-size:44px;color:#ff6b00}.faq-item p{display:none;margin:0;padding:22px;color:#fff;font-size:20px;line-height:1.8}.faq-item.open p{display:flex;gap:18px}.faq-item p span{font-size:42px;font-weight:900}.form-section{background:#08adc1;padding:70px 24px 90px;color:#fff}.form-logo{display:block;width:120px;margin:0 auto 45px}.form-section h2{text-align:center;font-size:40px;font-weight:700;margin:0 0 70px}.estimate-form{max-width:760px;margin:0 auto}.form-group{margin-bottom:48px}.form-label{display:flex;justify-content:space-between;align-items:center;font-size:28px;font-weight:700;margin-bottom:20px}.form-label span{background:#ff6b00;color:#fff;padding:7px 16px;font-size:22px;font-weight:700}.form-label .optional{background:#777}.radio-box{display:flex;align-items:center;gap:22px;background:rgba(255,255,255,.14);border-radius:8px;padding:24px;font-size:24px;margin-bottom:18px}.radio-box input{width:38px;height:38px;accent-color:#fff}input,select,textarea{width:100%;box-sizing:border-box;border:none;border-radius:8px;background:#fff;color:#202932;font-size:24px;padding:24px 28px}select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#202932 50%),linear-gradient(135deg,#202932 50%,transparent 50%);background-position:calc(100% - 34px) 50%,calc(100% - 15px) 50%;background-size:19px 19px,19px 19px;background-repeat:no-repeat}textarea{min-height:260px;line-height:1.7}::placeholder{color:#b8b8b8}.note{color:#fff;font-size:18px;line-height:1.6;margin-top:16px}.form-border{border-top:1px solid rgba(255,255,255,.8);margin:60px 0}.form-border.dashed{border-top:1px dashed rgba(255,255,255,.8)}.form-section h3{text-align:center;font-size:36px;margin:0 0 12px}.sub-note{text-align:center;font-size:18px;margin:0 0 50px}.submit-btn{width:100%;background:linear-gradient(#18bd2d,#008b20);color:#fff;font-size:28px;font-weight:700;border:2px solid #fff;border-radius:14px;padding:26px 20px;box-shadow:0 8px 0 #102235,0 0 0 4px #0a72ff;cursor:pointer}.error-box{max-width:760px;margin:0 auto 30px;background:#fff;color:#d00;padding:18px;border-radius:10px}.fixed-cta{position:fixed;left:0;bottom:0;width:100%;z-index:9999;display:flex;align-items:flex-end;gap:8px;padding:8px;background:#fff;box-shadow:0 -4px 15px rgba(0,0,0,.15);transform:translateY(120%);transition:.35s ease}.fixed-cta.show{transform:translateY(0)}.fixed-cta__small{width:18%}.fixed-cta__small img{width:100%;display:block}.fixed-tel{position:relative;display:block;width:64%}.fixed-tel-bg{width:100%;display:block}.fixed-tel-number{position:absolute;top:49%;left:60%;transform:translate(-50%,-50%);color:#fff;font-weight:900;font-size:clamp(28px,6vw,70px);letter-spacing:-2px;line-height:1;white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.08)}.confirm-section,.thanks-section{background:#08adc1;min-height:100vh;padding:60px 20px;color:#fff}.confirm-section h1,.thanks-section h1{text-align:center;font-size:34px;margin-bottom:30px}.confirm-section>p{text-align:center;margin-bottom:40px}.confirm-box,.thanks-box{max-width:760px;margin:0 auto;background:#fff;color:#202929;border-radius:14px;padding:30px 22px}.confirm-box dl{border-bottom:1px solid #ddd;padding:18px 0;margin:0}.confirm-box dt{font-weight:700;color:#08adc1;margin-bottom:8px}.confirm-box dd{margin:0;line-height:1.7}.confirm-buttons{max-width:760px;margin:35px auto 0;display:flex;gap:16px}.confirm-buttons button,.back-top{display:block;width:100%;border:none;border-radius:10px;padding:18px 20px;font-size:18px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none}.confirm-buttons button:first-child{background:#fff;color:#333}.confirm-buttons button:last-child,.back-top{background:#ff6b00;color:#fff}.thanks-box p{line-height:1.9;margin-bottom:22px}.thanks-tel{font-size:24px;font-weight:700}.thanks-tel a{color:#ff6b00;text-decoration:none}.site-footer{max-width:768px;margin:0 auto;background:#202929;color:#fff;text-align:center;padding:32px 16px 100px;font-size:14px;line-height:1.8}@media(min-width:768px){.fixed-cta{display:none}}@media(max-width:480px){.menu-btn{width:66px;height:66px}.drawer{top:82px}.form-section{padding:55px 20px 80px}.form-section h2{font-size:34px}.form-label{font-size:24px}input,select,textarea,.radio-box{font-size:20px}.faq-tabs button{font-size:15px}.faq-item button{font-size:18px}.fixed-tel-number{font-size:clamp(24px,7vw,38px);left:60%;top:49%}}
/* ====================================
ハンバーガーメニュー青枠削除
==================================== */
.menu-btn{
position: fixed !important;
top: 10px !important;
right: 10px !important;
width: 54px !important;
height: 54px !important;
background: #1f2928 !important;
border: none !important;
border-width: 0 !important;
border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
overflow: hidden !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-direction: column !important;
z-index: 99999 !important;
}
.menu-btn span{
width: 30px !important;
height: 3px !important;
margin: 4px 0 !important;
background: #ffffff !important;
}
.menu-btn::before,
.menu-btn::after{
display:none !important;
content:none !important;
}
button.menu-btn,
button#menuBtn,
#menuBtn{
border:none !important;
outline:none !important;
box-shadow:none !important;
}
button.menu-btn:focus,
button.menu-btn:active,
button.menu-btn:focus-visible,
#menuBtn:focus,
#menuBtn:active,
#menuBtn:focus-visible{
border:none !important;
outline:none !important;
box-shadow:none !important;
}
/* ハンバーガー位置調整 */
.menu-btn{
top: 14px !important;
right: 14px !important;
width: 44px !important;
height: 44px !important;
background: #1f2928 !important;
border: none !important;
z-index: 99999 !important;
}
.menu-btn span{
width: 25px !important;
height: 3px !important;
margin: 3px 0 !important;
}
/* ハンバーガー最終位置 */
.menu-btn{
top:12px !important;
right:12px !important;
width:58px !important;
height:58px !important;
}
.menu-btn span{
width:32px !important;
height:4px !important;
margin:4px 0 !important;
}
/* ハンバーガー最終位置 */
.menu-btn{
top:8px !important;
right:10px !important;
width:58px !important;
height:58px !important;
}
.menu-btn span{
width:32px !important;
height:4px !important;
margin:4px 0 !important;
}
/* ハンバーガー最終微調整 */
.menu-btn{
top:8px !important;
right:4px !important;
width:50px !important;
height:50px !important;
background:#1f2928 !important;
}
.menu-btn span{
width:28px !important;
height:3px !important;
margin:4px 0 !important;
}
/* ドロワー開閉ボタン修正 */
.close-btn{
position:fixed !important;
top:8px !important;
right:4px !important;
width:50px !important;
height:50px !important;
background:#1f2928 !important;
border:none !important;
padding:0 !important;
margin:0 !important;
z-index:100000 !important;
}
.close-btn span{
position:absolute !important;
top:24px !important;
left:10px !important;
width:30px !important;
height:4px !important;
margin:0 !important;
background:#fff !important;
}
.close-btn span:first-child{
transform:rotate(45deg) !important;
}
.close-btn span:nth-child(2){
transform:rotate(-45deg) !important;
}
.close-btn{
position:fixed !important;
top:8px !important;
right:4px !important;
width:50px !important;
height:60px !important;
background:#1f2928 !important;
border:none !important;
z-index:100001 !important;
}
.close-btn span{
position:absolute !important;
top:18px !important;
left:11px !important;
width:28px !important;
height:3px !important;
background:#fff !important;
}
.close-btn small{
display:block !important;
position:absolute !important;
bottom:6px !important;
left:0 !important;
width:100% !important;
text-align:center !important;
color:#fff !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================
閉じるボタン修正
========================== */
.close-btn{
display:none;
position:absolute;
top:-76px;
right:0;
width:76px;
height:76px;
background:#1f2928;
color:#fff;
border:none;
z-index:99999;
}
.drawer.active .close-btn{
display:block;
}
/* メニュー開いた時はハンバーガーを非表示 */
body:has(.drawer.active) #menuBtn{
display:none !important;
}
/* 閉じるボタンを右上に表示 */
.drawer.active .close-btn{
display:block !important;
position:fixed !important;
top:8px !important;
right:8px !important;
width:54px !important;
height:62px !important;
background:#1f2928 !important;
border:none !important;
z-index:100000 !important;
}
.drawer.active .close-btn span{
position:absolute !important;
top:20px !important;
left:12px !important;
width:30px !important;
height:3px !important;
background:#fff !important;
margin:0 !important;
}
.drawer.active .close-btn span:first-child{
transform:rotate(45deg) !important;
}
.drawer.active .close-btn span:nth-child(2){
transform:rotate(-45deg) !important;
}
.drawer.active .close-btn small{
display:block !important;
position:absolute !important;
left:0 !important;
bottom:6px !important;
width:100% !important;
color:#fff !important;
font-size:12px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ドロワーメニューを小さくする */
.drawer{
width:85% !important;
max-width:420px !important;
padding:20px !important;
}
.drawer a{
font-size:18px !important;
padding:14px 0 !important;
}
.drawer a::after{
font-size:32px !important;
}
/* CTA */
.cta-section{
background:url('../images/hcta.jpg') center center / cover no-repeat;
padding:0 0 40px;
}
.cta-top{
display:block;
width:100%;
height:auto;
}
.cta-wrap{
width:100%;
}
.cta-inner{
width:92%;
margin:-10px auto 0;
padding:35px;
border-radius:25px;
background:rgba(255,255,255,.22);
backdrop-filter:blur(2px);
}
.cta-inner a{
display:block;
}
.cta-inner img{
width:100%;
display:block;
}
.cta-inner a + a{
margin-top:25px;
}
.cta-note{
margin:35px 20px 0;
text-align:center;
color:#111;
font-size:18px;
font-weight:700;
line-height:1.8;
}
@media(max-width:768px){
```
.cta-inner{
width:92%;
padding:18px;
border-radius:18px;
}
.cta-inner a + a{
margin-top:18px;
}
.cta-note{
font-size:14px;
line-height:1.8;
}
```
}
/* CTA修正 */
.hcta-section{
background:url('../images/hcta.jpg') center top / cover no-repeat !important;
padding:0 0 130px !important;
}
.hcta-wrap{
width:100%;
}
.hcta-top{
display:block;
width:100%;
height:auto;
}
.hcta-box{
width:88%;
margin:-5px auto 0;
padding:32px 28px;
border-radius:24px;
background:rgba(255,255,255,.28);
}
.hcta-box a{
display:block;
}
.hcta-box a + a{
margin-top:24px;
}
.hcta-box img{
display:block;
width:100%;
height:auto;
}
.hcta-box{
background:none !important;
}
.hcta-box{
width:92%;
margin:-5px auto 0;
padding:0;
background:none;
}
.hcta-box a{
display:block;
width:100%;
}
.hcta-box img{
display:block;
width:100%;
height:auto;
}
.hcta-box a:first-child{
margin-top:15px;
}
.hcta-box a + a{
margin-top:18px;
}
/* CTAボタンサイズ調整 */
.hcta-box{
width:92% !important;
padding:25px 0 !important;
text-align:center !important;
}
.hcta-box a{
display:block !important;
}
.hcta-box img{
width:82% !important;
max-width:680px !important;
margin:0 auto !important;
display:block !important;
}
.hcta-box a + a{
margin-top:22px !important;
}
/* CTAボタン位置最終調整 */
.hcta-box{
width:92% !important;
margin:0 auto !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
padding:35px 0 15px !important;
}
.hcta-box a{
display:block !important;
width:100% !important;
text-align:center !important;
}
.hcta-box img{
width:82% !important;
max-width:680px !important;
margin:0 auto !important;
display:block !important;
}
.hcta-box a + a{
margin-top:15px !important;
}
/* ==========================
CTA 最終版
========================== */
.hcta-top-wrap{
position:relative !important;
}
.hcta-number{
position:absolute !important;
left:53% !important;
top:64% !important;
transform:translate(-50%,-50%) !important;
color:#fff !important;
font-size:clamp(24px,5vw,44px) !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:-5px !important;
white-space:nowrap !important;
text-align:center !important;
z-index:999 !important;
}
.hcta-number{
position:absolute !important;
left:61% !important;
top:78% !important;
transform:translate(-50%,-50%) !important;
color:#fff !important;
font-size:clamp(26px,4.5vw,42px) !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:2px !important;
white-space:nowrap !important;
text-align:center !important;
z-index:999 !important;
}
a[href^="tel"] {
color:#fff !important;
text-decoration:none !important;
}
/* オレンジCTAを少し左へ */
.hcta-top-wrap{
position:relative !important;
left:-8px !important;
}
.bridge-title{
position:relative;
z-index:10;
margin-top:-120px !important;
}
/* 人物カード上の余白削除 */
.staff-slider-section{
padding-top:0 !important;
}
.staff-slider{
margin-top:-30px !important;
}
/* スタッフスライダー背景を白に */
.staff-slider-section{
background:#fff !important;
}
#reason{
padding:0 !important;
}
/* FAQ背景色 */
.faq{
background:#00AFCA !important;
}
/* お問い合わせフォーム背景色 */
.contact-section,
.form-section,
.contact-form{
background:#00AFCA !important;
}
/* =========================
FAQタブ
========================= */
.faq-section {
background: #00afca !important;
padding-top: 90px !important;
}
.faq-section h2,
.faq-title {
color: #fff !important;
font-size: 42px !important;
font-weight: 900 !important;
text-align: center !important;
margin-bottom: 90px !important;
letter-spacing: 0.05em;
}
.faq-tabs {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
width: calc(100% - 58px) !important;
margin: 0 auto 0 !important;
border-bottom: 38px solid #572417 !important;
}
.faq-tab {
position: relative;
height: 140px !important;
border: none !important;
border-radius: 36px 36px 0 0 !important;
background: #fff !important;
color: #572417 !important;
font-size: 25px !important;
font-weight: 900 !important;
line-height: 1.2 !important;
text-align: center !important;
padding: 30px 5px 42px !important;
box-sizing: border-box !important;
}
.faq-tab.active {
background: #572417 !important;
color: #fff !important;
}
.faq-tab span {
position: absolute;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 22px solid #572417;
}
.faq-tab.active span {
border-top-color: #fff;
}
/* 既存の黒線消す */
.faq-tabs::before,
.faq-tabs::after {
display: none !important;
}
/* =========================
FAQ
========================= */
.faq-section {
background: #00afca !important;
padding: 70px 30px 80px !important;
}
.faq-section h2,
.faq-title {
color: #fff !important;
font-size: 34px !important;
font-weight: 900 !important;
text-align: center !important;
margin: 0 0 55px !important;
letter-spacing: 0.03em !important;
}
.faq-tabs {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 10px !important;
width: 100% !important;
margin: 0 auto 44px !important;
border-bottom: 20px solid #1f2a2a !important;
}
.faq-tab {
position: relative !important;
height: 90px !important;
border: none !important;
border-radius: 17px 17px 0 0 !important;
background: #fff !important;
color: #202930 !important;
font-size: 25px !important;
font-weight: 900 !important;
line-height: 1.05 !important;
text-align: center !important;
padding: 18px 4px 26px !important;
box-sizing: border-box !important;
}
.faq-tab.active {
background: #1f2a2a !important;
color: #fff !important;
}
.faq-tab span {
position: absolute !important;
left: 50% !important;
bottom: 12px !important;
transform: translateX(-50%) !important;
width: 0 !important;
height: 0 !important;
border-left: 14px solid transparent !important;
border-right: 14px solid transparent !important;
border-top: 11px solid #1f2a2a !important;
}
.faq-tab.active span {
border-top-color: #fff !important;
}
.faq-tabs::before,
.faq-tabs::after {
display: none !important;
}
/* FAQ中身の文字色寄せ */
.faq-question,
.faq-answer,
.faq-item,
.faq-q-text {
color: #202930 !important;
}
.faq-question .q,
.faq-q,
.faq-item .q {
color: #ff6500 !important;
}
/* =========================
FAQ
========================= */
.faq h2{
font-size:34px !important;
margin-bottom:54px !important;
}
.faq-tabs{
display:flex !important;
gap:10px !important;
width:100% !important;
margin:0 auto 0 !important;
border-bottom:20px solid #1f2a2a !important;
}
.faq-tabs button{
flex:1 !important;
min-height:88px !important;
padding:14px 4px 25px !important;
border:none !important;
border-radius:16px 16px 0 0 !important;
background:#fff !important;
color:#202930 !important;
font-size:24px !important;
font-weight:900 !important;
line-height:1.05 !important;
text-align:center !important;
position:relative !important;
}
.faq-tabs button.active{
background:#1f2a2a !important;
color:#fff !important;
}
.faq-tabs button::after{
content:"" !important;
position:absolute !important;
left:50% !important;
bottom:13px !important;
transform:translateX(-50%) !important;
width:0 !important;
height:0 !important;
border-left:11px solid transparent !important;
border-right:11px solid transparent !important;
border-top:10px solid #4b2117 !important;
}
.faq-tabs button.active::after{
borde
/* =========================
FAQタブ 修正版
========================= */
.faq h2{
font-size:28px !important;
margin-bottom:28px !important;
}
.faq-tabs{
display:flex !important;
gap:10px !important;
border-bottom:20px solid #1f2a2a !important;
}
.faq-tabs button{
flex:1 !important;
background:#f5f5f5 !important;
color:#202930 !important;
border:none !important;
border-radius:16px 16px 0 0 !important;
font-size:15px !important;
font-weight:700 !important;
line-height:1.15 !important;
min-height:56px !important;
padding:8px 4px !important;
text-align:center !important;
}
/* 選択中タブ */
.faq-tabs button.active{
background:#1f2a2a !important;
color:#fff !important;
}
/* 三角削除 */
.faq-tabs button::after{
display:none !important;
}r-top-color:#fff !important;
}
/* FAQタブ 強制上書き */
.faq-tabs button{
font-size: 11px !important;
line-height: 1.1 !important;
font-weight: 700 !important;
min-height: 45px !important;
height: 45px !important;
padding: 0 !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
overflow:hidden !important;
}
.faq-tabs button br{
display:block !important;
}
/* 三角を完全削除 */
.faq-tabs button::before,
.faq-tabs button::after{
display:none !important;
content:none !important;
}
/* FAQタブ 最終調整 */
.faq-tabs button{
font-size:18px !important;
line-height:1.15 !important;
font-weight:700 !important;
height:58px !important;
min-height:58px !important;
padding:0 4px !important;
}
/* 三角を完全に消す */
.faq-tabs button::before,
.faq-tabs button::after{
display:none !important;
content:none !important;
border:none !important;
}
/* FAQ下の黒帯を端まで伸ばし */
.faq-tabs{
width:calc(100% + 20px) !important;
margin-left:-10px !important;
margin-right:-10px !important;
}
/* =========================
フォーム 日付入力崩れ修正
========================= */
.estimate-form input,
.estimate-form select,
.estimate-form textarea{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
.estimate-form input[type="date"]{
display:block !important;
width:100% !important;
height:70px !important;
padding:0 18px !important;
background:#fff !important;
border-radius:10px !important;
border:none !important;
font-size:18px !important;
box-sizing:border-box !important;
appearance:auto !important;
-webkit-appearance:auto !important;
}
/* =========================
スマホ 日付入力の白枠崩れ修正
========================= */
.estimate-form input[type="date"]{
width:100% !important;
max-width:100% !important;
height:70px !important;
min-height:70px !important;
display:block !important;
box-sizing:border-box !important;
background:#fff !important;
border:0 !important;
border-radius:10px !important;
padding:0 18px !important;
margin:0 !important;
font-size:20px !important;
line-height:70px !important;
-webkit-appearance:none !important;
appearance:none !important;
}
/* iPhone Safariの日付入力の内側を整える */
.estimate-form input[type="date"]::-webkit-date-and-time-value{
text-align:left !important;
height:70px !important;
line-height:70px !important;
}
/* はみ出し防止 */
.estimate-form .form-group{
overflow:hidden !important;
}
/* iPhoneの日付入力に「年 / 月 / 日」を表示 */
.estimate-form input[type="date"]::before{
display:none !important;
content:none !important;
}
.form-label .optional{
background:#8f8f8f !important;
color:#fff !important;
}
.submit-btn{
box-shadow:none !important;
}
/* =========================
フォーム ラジオボタン崩れ修正
========================= */
.estimate-form .radio-box{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:18px !important;
width:100% !important;
min-height:88px !important;
padding:18px 24px !important;
box-sizing:border-box !important;
background:rgba(255,255,255,0.16) !important;
border-radius:8px !important;
font-size:22px !important;
font-weight:700 !important;
line-height:1.35 !important;
color:#fff !important;
position:relative !important;
}
.estimate-form .radio-box input[type="radio"]{
position:static !important;
width:28px !important;
height:28px !important;
margin:0 !important;
flex:0 0 28px !important;
transform:none !important;
accent-color:#ff6b00 !important;
}
.estimate-form .radio-box + .radio-box{
margin-top:16px !important;
}
/* =========================
買取実績スライダー寄せ
========================= */
.product-slider-section{
position:relative !important;
background:url('../images/hss.jpg') center center / cover no-repeat !important;
padding:42px 0 !important;
overflow:hidden !important;
}
.product-slider{
width:100% !important;
overflow:visible !important;
}
.product-track{
display:flex !important;
align-items:center !important;
transition:.4s ease !important;
transform:translateX(-74%) !important;
}
.product-slide{
min-width:58% !important;
flex:0 0 58% !important;
margin:0 8px !important;
}
.product-slide img{
display:block !important;
width:100% !important;
height:auto !important;
}
.product-arrow{
position:absolute !important;
top:50% !important;
transform:translateY(-50%) !important;
z-index:9999 !important;
background:none !important;
border:none !important;
padding:0 !important;
}
.product-prev{
left:0 !important;
}
.product-next{
right:0 !important;
}
.product-arrow img{
width:54px !important;
display:block !important;
}
/* 買取実績スライダー 完成版 */
.product-slider-section{
position:relative !important;
background:url('../images/hss.jpg') center center / cover no-repeat !important;
padding:42px 0 !important;
overflow:hidden !important;
}
.product-slider{
width:100% !important;
overflow:hidden !important;
}
.product-track{
display:flex !important;
align-items:center !important;
transition:.4s ease !important;
}
.product-slide{
min-width:56% !important;
flex:0 0 56% !important;
margin:0 10px !important;
flex-shrink:0 !important;
}
.product-slide img{
display:block !important;
width:100% !important;
height:auto !important;
}
.product-arrow{
position:absolute !important;
top:50% !important;
transform:translateY(-50%) !important;
z-index:9999 !important;
background:none !important;
border:none !important;
padding:0 !important;
}
.product-prev{ left:0 !important; }
.product-next{ right:0 !important; }
.product-arrow img{
width:54px !important;
}
/* 左側にも前カードをチラ見せ */
.product-slider{
overflow:visible !important;
}
.product-slider-section{
overflow:hidden !important;
}
.product-slide{
min-width:55% !important;
flex:0 0 55% !important;
margin:0 18px !important;
}
/* 買取実績矢印サイズ修正 */
.product-arrow{
width:auto !important;
height:auto !important;
}
.product-arrow img{
width:56px !important;
height:auto !important;
display:block !important;
}
.product-prev{
left:6px !important;
}
.product-next{
right:6px !important;
}
/* =========================================================
CTA内だけ修正
========================================================= */
.hcta-image-section{
background:none !important;
padding:0 !important;
margin:0 !important;
overflow:hidden !important;
}
.hcta-image-wrap{
position:relative !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
line-height:0 !important;
}
.hcta-full-img{
display:block !important;
width:100% !important;
max-width:none !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
}
/* 透明クリック範囲 */
.hcta-hit{
position:absolute !important;
display:block !important;
z-index:10 !important;
background:transparent !important;
text-decoration:none !important;
}
/* 電話ボタン */
.hcta-hit-tel{
left:4% !important;
top:9% !important;
width:92% !important;
height:23% !important;
}
/* LINEボタン */
.hcta-hit-line{
left:8% !important;
top:48% !important;
width:84% !important;
height:15% !important;
}
/* メールボタン */
.hcta-hit-mail{
left:8% !important;
top:68% !important;
width:84% !important;
height:15% !important;
}
/* =========================================================
CTAボタン復旧版
========================================================= */
.hcta-section{
background:url('../images/hcta.jpg') center top / cover no-repeat !important;
padding:0 0 40px !important;
margin:0 !important;
overflow:hidden !important;
}
.hcta-wrap{
width:100% !important;
margin:0 !important;
padding:0 !important;
}
.hcta-top-wrap{
display:block !important;
position:relative !important;
left:0 !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
.hcta-top-wrap a{
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
.hcta-top{
display:block !important;
width:100% !important;
max-width:none !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
}
.hcta-number{
display:none !important;
}
.hcta-box{
display:block !important;
width:92% !important;
margin:0 auto !important;
padding:25px 0 35px !important;
background:rgba(255,255,255,.22) !important;
border-radius:24px !important;
box-shadow:none !important;
}
.hcta-box a{
display:block !important;
width:82% !important;
margin:0 auto !important;
padding:0 !important;
}
.hcta-box a + a{
margin-top:18px !important;
}
.hcta-box img{
display:block !important;
width:100% !important;
max-width:none !important;
height:auto !important;
margin:0 auto !important;
padding:0 !important;
}
/* =========================
CTA ボタン復旧2
========================= */
.hcta-section{
.hcta-section{
background:url(../images/hcta.jpg) center top / cover no-repeat !important;
}
padding:0 !important;
margin:0 !important;
overflow:hidden !important;
}
.hcta-wrap{
width:100% !important;
padding:0 !important;
margin:0 !important;
}
/* 電話ボタン */
.hcta-top-wrap{
display:block !important;
position:relative !important;
left:0 !important;
width:96% !important;
margin:0 auto 38px !important;
padding-top:0 !important;
}
.hcta-top-wrap a{
display:block !important;
width:100% !important;
}
.hcta-top{
display:block !important;
width:100% !important;
height:auto !important;
max-width:none !important;
}
/* LINE・メールの背景ボックス */
.hcta-box{
display:block !important;
width:92% !important;
margin:0 auto !important;
padding:38px 0 42px !important;
background:transparent !important;
border-radius:0 !important;
}
/* LINE・メールボタン */
.hcta-box a{
display:block !important;
width:86% !important;
margin:0 auto !important;
}
.hcta-box a + a{
margin-top:28px !important;
}
.hcta-box img{
display:block !important;
width:100% !important;
height:auto !important;
max-width:none !important;
}
/* 重ね文字が残っていたら消す */
.hcta-number{
display:none !important;
}
/* =========================
CTA 最終位置調整
========================= */
/* 電話ボタンを下げる */
.hcta-top-wrap{
margin-top:20px !important;
margin-bottom:78px !important;
}
/* LINE・メールを白枠の中へ下げる */
.hcta-box{
padding-top:70px !important;
padding-bottom:70px !important;
}
/* LINE・メールサイズは維持 */
.hcta-box a{
width:86% !important;
}
.hcta-top{
transform:translateY(80px);
}
/* 次の白ブロックの上余白は消す */
.hcta-section + .lp-block.white-pad{
padding-top:0 !important;
margin-top:0 !important;
}
.lp-block.white-pad{
padding-top:0 !important;
margin-top:0 !important;
}
.hcta-section{
background:url('../images/hcta.jpg') center top / cover no-repeat !important;
}
/* CTA下余白 強制反映 */
.cta-section.hcta-section{
padding-bottom:120px !important;
}
/* 電話ボタン上の青い余白だけ詰める */
.hcta-section{
margin-top:-80px !important;
}
/* 査定品の内容を他の入力欄と近いサイズへ */
.estimate-form textarea{
min-height:120px !important;
height:120px !important;
padding:20px 28px !important;
resize:none !important;
}
.required-count-bubble{
position:fixed;
right:8px;
bottom:18px;
z-index:9998;
background:#ffe5e5;
border:3px solid #d90000;
border-radius:18px;
padding:14px 16px;
width:210px;
font-size:16px;
font-weight:700;
line-height:1.5;
color:#333;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.required-count-bubble span{
color:#d90000;
font-size:40px;
font-weight:900;
}
/* PC表示でもハンバーガーをLP右上に固定 */
@media (min-width: 769px){
.menu-btn{
right: calc((100vw - 768px) / 2 + 8px) !important;
top: 8px !important;
}
.drawer.active .close-btn{
right: calc((100vw - 768px) / 2 + 8px) !important;
top: 8px !important;
}
}
@media (min-width: 769px){
.required-count-bubble{
right: calc((100vw - 768px) / 2 + 15px) !important;
bottom: 100px !important;
}
}
.reason-4{
padding-bottom:0 !important;
}
/* 電話CTAだけキラッと光らせる */
.fixed-tel{
position: relative;
overflow: hidden;
}
.fixed-tel::before{
content: '';
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,.8),
transparent
);
transform: skewX(-25deg);
animation: telShine 3s infinite;
z-index: 2;
}
@keyframes telShine{
0%{
left: -120%;
}
20%{
left: 130%;
}
100%{
left: 130%;
}
}
/* 固定CTAのコールトラッキング用番号を非表示 */
.fixed-tel{
position:relative;
}
.fixed-tel-number{
position:absolute !important;
left:-9999px !important;
opacity:0 !important;
pointer-events:none !important;
}
/* 初期 */
.cta-pc{
display:none;
}
.cta-sp{
display:block;
}
/* PC */
@media screen and (min-width:768px){
.cta-sp{
display:none;
}
.cta-pc{
display:block;
position:relative;
}
.pc-phone-number{
position:absolute;
top:48%;
left:58%;
transform:translate(-50%,-50%);
color:#fff;
font-size:52px;
font-weight:700;
letter-spacing:2px;
line-height:1;
white-space:nowrap;
}
}
/* CTA PC/SP出し分け */
.cta-pc{
display:none !important;
}
.cta-sp{
display:block !important;
}
@media screen and (min-width:768px){
.cta-sp{
display:none !important;
}
.cta-pc{
display:block !important;
position:relative;
}
.pc-phone-number{
position:absolute;
top:48%;
left:58%;
transform:translate(-50%,-50%);
color:#fff;
font-size:52px;
font-weight:900;
letter-spacing:2px;
white-space:nowrap;
z-index:5;
}
}
/* CTA PC/SP出し分け制御 */
.hcta-section a.cta-sp{
display:block !important;
}
.hcta-section a.cta-pc{
display:none !important;
}
@media screen and (min-width:768px){
.hcta-section a.cta-sp{
display:none !important;
}
.hcta-section a.cta-pc{
display:block !important;
position:relative;
}
.hcta-section .pc-phone-number{
position:absolute;
top:93%;
left:55%;
transform:translate(-50%,-50%);
color:#fff;
font-size:70px;
font-weight:900;
letter-spacing:2px;
white-space:nowrap;
z-index:10;
}
}
/* PCだけ LINE・メール位置調整 */
@media screen and (min-width:768px){
.hcta-box{
padding-top:110px !important;
}
}
/* =========================
フォーム必須エラー表示
========================= */
.estimate-form input.is-required-error,
.estimate-form select.is-required-error,
.estimate-form textarea.is-required-error,
.estimate-form .radio-box.is-required-error{
background:#ffd6d6 !important;
border:2px solid #e00000 !important;
}
.estimate-form input:not(.is-required-error),
.estimate-form select:not(.is-required-error),
.estimate-form textarea:not(.is-required-error){
background:#fff;
}
.estimate-form .radio-box:not(.is-required-error){
background:rgba(255,255,255,0.16);
}
.field-error-msg{
display:none;
margin:10px 0 0;
color:#e00000;
background:#fff;
border:2px solid #e00000;
border-radius:8px;
padding:10px 14px;
font-size:16px;
font-weight:700;
line-height:1.5;
}
.privacy-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.7);
display:none;
justify-content:center;
align-items:center;
z-index:999999;
}
.privacy-modal.show{
display:flex;
}
.privacy-content{
width:90%;
max-width:900px;
background:#fff;
border-radius:10px;
overflow:hidden;
position:relative;
}
.privacy-content h2{
background:#eef1fb;
color:#232d8f;
text-align:center;
padding:20px;
margin:0;
}
.privacy-scroll{
height:70vh;
overflow-y:auto;
padding:30px;
line-height:1.8;
}
.privacy-close{
position:absolute;
right:15px;
top:10px;
border:none;
background:none;
font-size:32px;
cursor:pointer;
}
.privacy-area{
text-align:center;
margin:20px 0;
}
.privacy-area a{
color:#232d8f;
text-decoration:underline;
}
.privacy-area{
text-align:center;
margin:40px 0 20px;
font-size:16px;
color:#333;
line-height:1.8;
}
.privacy-area a{
color:#0a58ca;
text-decoration:underline;
font-weight:700;
}
/* CTAエリアの上下余白を縮める */
.hcta-bottom-wrap{
padding-top:20px !important;
padding-bottom:20px !important;
}
.hcta-bottom-inner{
padding-top:15px !important;
padding-bottom:15px !important;
}
/* 青枠CTAエリアの上下余白を縮める */
.hcta-box{
padding-top:25px !important;
padding-bottom:25px !important;
}
@media screen and (min-width:768px){
.hcta-box{
padding-top:25px !important;
padding-bottom:25px !important;
}
}
/* CTA下の余白を縮める */
.cta-section.hcta-section{
padding-bottom:30px !important;
}
/* PC版 CTAエリア高さ調整 */
@media screen and (min-width:768px){
/* 青枠 */
.hcta-box{
padding:20px 0 !important;
}
/* LINEとメールの間 */
.hcta-btn{
margin-bottom:15px !important;
}
/* 注意書き */
.hcta-note{
margin-top:15px !important;
padding-bottom:15px !important;
line-height:1.6 !important;
}
/* CTA全体 */
.cta-section.hcta-section{
padding-bottom:20px !important;
}
}
.hcta-note{
font-size:18px !important;
line-height:1.8 !important;
}
@media screen and (min-width:768px){
.hcta-box{
padding-top:20px !important;
padding-bottom:20px !important;
min-height:auto !important;
}
}
/* PC CTA 崩れ戻し＋高さだけ調整 */
@media screen and (min-width:768px){
.hcta-top{
transform:translateY(80px) !important;
}
.hcta-top-wrap{
margin-top:40px !important;
margin-bottom:78px !important;
}
.hcta-box{
padding-top:70px !important;
padding-bottom:20px !important;
}
.cta-section.hcta-section{
padding-bottom:30px !important;
}
}
@media screen and (max-width:767px){
.hcta-box{
height:auto !important;
min-height:0 !important;
overflow:visible !important;
padding-bottom:80px !important;
}
}
/* PC版 CTA高さ調整 最終 */
@media screen and (min-width:768px){
.cta-section.hcta-section{
padding-bottom:140px !important;
}
.hcta-box{
padding-bottom:80px !important;
}
}
@media screen and (max-width:767px){
.cta-section.hcta-section{
padding-bottom:20px !important;
}
.hcta-box{
padding-bottom:45px !important;
}
}
@media screen and (max-width:767px){
.hcta-top-wrap{
transform:translateY(-20px) !important;
}
.hcta-box{
transform:translateY(10px) !important;
}
}
@media screen and (max-width:767px){
.hcta-top-wrap a,
.hcta-box a{
transform:scale(0.92) !important;
transform-origin:center center !important;
}
.hcta-box{
gap:0 !important;
}
}
.cta-section.hcta-section{
background:url('../images/newhcta.jpg') center top / cover no-repeat !important;
padding:30px 0 35px !important;
margin:0 !important;
overflow:visible !important;
}
.hcta-wrap{
width:100% !important;
margin:0 auto !important;
padding:0 !important;
}
.hcta-top-wrap{
width:94% !important;
margin:0 auto 28px !important;
transform:none !important;
}
.hcta-top-wrap a{
display:block !important;
width:100% !important;
}
.hcta-top{
display:block !important;
width:100% !important;
height:auto !important;
transform:none !important;
}
.hcta-box{
width:88% !important;
margin:0 auto !important;
padding:28px 0 !important;
background:rgba(255,255,255,.24) !important;
border-radius:24px !important;
overflow:visible !important;
}
.hcta-box a{
display:block !important;
width:86% !important;
margin:0 auto !important;
}
.hcta-box a + a{
margin-top:24px !important;
}
.hcta-box img{
display:block !important;
width:100% !important;
height:auto !important;
}
.hcta-note{
margin:26px 0 0 !important;
text-align:center !important;
color:#111 !important;
font-size:clamp(16px,4vw,28px) !important;
font-weight:700 !important;
line-height:1.7 !important;
}
@media screen and (min-width:768px){
.cta-sp{
display:none !important;
}
.cta-pc{
display:block !important;
position:relative !important;
}
.pc-phone-number{
position:absolute !important;
top:58% !important;
left:56% !important;
transform:translate(-50%,-50%) !important;
color:#fff !important;
font-size:64px !important;
font-weight:900 !important;
letter-spacing:2px !important;
white-space:nowrap !important;
z-index:10 !important;
}
}
@media screen and (max-width:767px){
.cta-pc{
display:none !important;
}
.cta-sp{
display:block !important;
}
.cta-section.hcta-section{
padding:24px 0 30px !important;
}
.hcta-top-wrap{
width:96% !important;
margin-bottom:22px !important;
}
.hcta-box{
width:92% !important;
padding:22px 0 !important;
border-radius:18px !important;
}
.hcta-box a{
width:86% !important;
}
.hcta-box a + a{
margin-top:20px !important;
}
.hcta-note{
margin-top:22px !important;
}
}
.lp-block.white-pad{
padding-top:0 !important;
padding-bottom:0 !important;
}
.closed-cta-box{
width:90%;
margin:30px auto 0;
background:#ffe100;
border:2px solid #333;
padding:35px 20px;
text-align:center;
}
.closed-text{
font-size:24px;
font-weight:700;
line-height:1.8;
color:#000;
margin:0 0 20px;
}
.closed-time{
display:inline-block;
border-top:2px solid #333;
padding-top:15px;
font-size:24px;
font-weight:700;
color:#000;
}
/* 営業時間外：固定CTAを2ボタンで中央配置 */
.fixed-cta:not(:has(.fixed-tel)){
justify-content:center !important;
gap:8px !important;
padding:6px 10px !important;
}
/* 営業時間外固定CTA */
.fixed-cta:not(:has(.fixed-tel)){
justify-content:center !important;
gap:8px !important;
}
.fixed-cta:not(:has(.fixed-tel)) .fixed-cta__small{
width:49% !important;
}
.fixed-cta:not(:has(.fixed-tel)) .fixed-cta__small img{
width:100% !important;
height:auto !important;
display:block !important;
}
.ng-popup {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.65);
z-index: 99999;
align-items: center;
justify-content: center;
padding: 20px;
}
.ng-popup.is-show {
display: flex;
}
.ng-popup-inner {
position: relative;
width: 100%;
max-width: 1000px;
background: rgba(40,40,40,.88);
color: #fff;
text-align: center;
padding: 70px 30px 55px;
font-weight: 700;
}
.ng-popup-title {
font-size: 32px;
line-height: 1.6;
margin-bottom: 20px;
}
.ng-popup-text {
font-size: 14px;
line-height: 1.6;
}
.ng-popup-close {
position: absolute;
right: 0;
top: -120px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #4a4a4a;
color: #fff;
border: none;
font-size: 70px;
line-height: 1;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.ng-popup-inner {
padding: 30px 15px 25px;
}
.ng-popup-title {
font-size: 22px;
line-height: 1.5;
margin-bottom: 12px;
}
.ng-popup-text {
font-size: 13px;
line-height: 1.6;
}
.ng-popup-close {
top: -80px;
width: 70px;
height: 70px;
font-size: 50px;
}
}