@charset "UTF-8";
 :root {
--ks-red: #e60012;
--ks-black: #1a1a1a;
--ks-bg: #f9f9fa;
--ks-border: #e0e0e0;
}
.lp-container {
font-family: 'Montserrat', "Noto Sans JP", sans-serif;
color: var(--ks-black);
overflow: hidden;
line-height: 1.6;
}
.inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
} .section-title-wrap {
text-align: center;
margin-bottom: 40px;
}
.section-title {
font-size: 2.8rem;
font-weight: 900;
margin-bottom: 10px;
}
.section-sub {
font-size: 1.4rem;
color: #666;
} .lp-fv .breadcrumb {
font-size: 1.2rem;
padding: 15px 0;
color: #666;
}
.lp-fv .breadcrumb a {
color: #333;
text-decoration: none;
}
.lp-fv .page-title {
margin-bottom: 20px;
}
.lp-fv .title-jp {
font-size: 3.2rem;
font-weight: 900;
margin-bottom: 5px;
}
.lp-fv .title-en {
font-size: 1.4rem;
color: #999;
letter-spacing: 0.1em;
}
.fv-image-wrap {
background: #000;
padding: 20px 0;
}
.bnr-image img {
width: 100%;
height: auto;
display: block;
} .lp-overview {
padding: 60px 0;
background: #fff;
}
.overview-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.lead-text {
font-size: 1.5rem;
line-height: 1.8;
margin-bottom: 40px;
}
.staff-img img {
max-width: 100%;
height: auto;
margin-bottom: 30px;
}
.strong-point {
background: var(--ks-bg);
padding: 40px;
border-radius: 8px;
font-size: 1.6rem;
font-weight: bold;
}
.strong-point .underline {
border-bottom: 3px solid var(--ks-red);
}
.strong-point .custom-ok {
font-size: 2rem;
margin: 20px 0;
}
.strong-point .highlight .big {
font-size: 3rem;
}
.red { color: var(--ks-red); } .lp-cta {
background: var(--ks-black);
padding: 60px 0;
text-align: center;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
}
.cta-title {
color: #fff;
font-size: 2rem;
line-height: 1.4;
margin-bottom: 30px;
}
.cta-btn {
display: block;
background: #06c755; color: #fff;
text-decoration: none;
padding: 20px;
border-radius: 80px;
transition: transform 0.3s, filter 0.3s;
box-shadow: 0 6px 15px rgba(6, 199, 85, 0.4);
}
.cta-btn:hover {
transform: translateY(-3px);
filter: brightness(1.1);
}
.cta-btn .main-txt {
display: block;
font-size: 2.2rem;
font-weight: bold;
}
.cta-btn .sub-txt {
display: block;
font-size: 1.2rem;
margin-top: 5px;
opacity: 0.9;
} .lp-comparison-slider {
padding: 80px 0;
background: var(--ks-bg);
}
.slider-tabs {
text-align: center;
margin-bottom: 30px;
}
.tab-btn {
appearance: none;
background: #fff;
border: 2px solid var(--ks-border);
padding: 10px 20px;
margin: 5px;
font-size: 1.4rem;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
transition: 0.3s;
}
.tab-btn.active {
background: var(--ks-black);
color: #fff;
border-color: var(--ks-black);
} .slide-item {
padding: 15px;
}
.card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.car-img img {
width: 100%;
display: block;
}
.card-body {
padding: 20px;
}
.card-body h3 {
font-size: 1.6rem;
font-weight: 900;
margin-bottom: 5px;
}
.card-body .spec {
font-size: 1.1rem;
color: #666;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dashed var(--ks-border);
min-height: 48px;
} .comparison {
display: flex;
flex-direction: column;
gap: 15px;
}
.others {
display: flex;
justify-content: space-between;
align-items: center;
background: #f1f1f1;
padding: 15px;
border-radius: 6px;
}
.others .label {
font-weight: bold;
font-size: 1.2rem;
line-height: 1.2;
}
.others .label small {
font-size: 0.9rem;
font-weight: normal;
color: #666;
} .strike-cross {
position: relative;
display: inline-block;
opacity: 0.5; transition: opacity 0.3s ease; }
.strike-cross .price {
font-size: 2rem;
font-weight: bold;
color: #666; }
.strike-cross::before,
.strike-cross::after {
content: "";
position: absolute;
top: 50%;
left: -5%;
width: 110%;
height: 4px;
background: var(--ks-red);
border-radius: 2px;
}
.strike-cross::before { transform: rotate(15deg); }
.strike-cross::after { transform: rotate(-15deg); }
.ksf {
position: relative;
padding: 15px;
background: #fff0f0;
border: 2px solid var(--ks-red);
border-radius: 6px;
text-align: center;
}
.ksf .label {
display: block;
color: var(--ks-red);
font-weight: 900;
font-size: 1.4rem;
margin-bottom: 5px;
}
.ksf .price {
font-size: 3.4rem;
font-weight: 900;
color: var(--ks-red);
line-height: 1;
}
.ksf .unit {
font-size: 1.4rem;
}
.diff-badge {
position: absolute;
top: -15px;
right: -10px;
background: var(--ks-red);
color: #fff;
font-weight: 900;
font-size: 1.4rem;
padding: 8px 15px;
border-radius: 30px;
transform: rotate(5deg);
box-shadow: 0 4px 10px rgba(230,0,18,0.3);
} .slick-prev:before, .slick-next:before {
color: var(--ks-black);
} .lp-hot-models {
padding: 80px 0;
background: #fff;
}
.hot-models-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.model-item {
background: #fff;
border: 1px solid var(--ks-border);
display: flex;
flex-direction: column;
}
.model-head {
background: var(--ks-black);
color: #fff;
padding: 15px;
min-height: 110px;
}
.model-head h3 {
font-size: 1.6rem;
margin-bottom: 5px;
}
.model-head .series {
font-size: 1.1rem;
opacity: 0.8;
}
.model-item figure img {
width: 100%;
display: block;
}
.average-price {
padding: 20px;
text-align: center;
margin-top: auto;
}
.average-price .ttl {
display: inline-block;
background: var(--ks-red);
color: #fff;
padding: 2px 10px;
font-size: 1.1rem;
margin-bottom: 10px;
}
.average-price .price {
font-size: 3rem;
font-weight: 900;
color: var(--ks-red);
} .lp-brand-list {
padding: 80px 0;
background: var(--ks-bg);
}
.brand-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.brand-box {
background: #fff;
padding: 30px;
border-top: 5px solid var(--ks-black);
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.brand-title {
margin-bottom: 20px;
}
.brand-title .en {
color: var(--ks-red);
font-weight: bold;
font-size: 1.2rem;
}
.brand-title h2 {
font-size: 2.2rem;
font-weight: 900;
}
.brand-banner img {
width: 100%;
border-radius: 6px;
margin-bottom: 20px;
}
.spec-list {
list-style: none;
padding: 0;
}
.spec-list li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
font-size: 1.3rem;
line-height: 1.5;
}
.spec-list li::before {
content: "■";
position: absolute;
left: 0;
top: 2px;
color: var(--ks-red);
font-size: 1rem;
}
.spec-list.two-col {
column-count: 2;
column-gap: 20px;
} .lp-faq {
padding: 80px 0;
background: #fff;
}
.faq-wrapper {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(--ks-border);
}
.faq-item dt {
position: relative;
padding: 20px 40px 20px 50px;
font-size: 1.6rem;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
}
.faq-item dt:hover {
background: var(--ks-bg);
}
.faq-item dt::before {
content: "Q.";
position: absolute;
left: 10px;
top: 20px;
color: var(--ks-red);
font-size: 2rem;
font-family: 'Montserrat', sans-serif;
}
.faq-item dt::after {
content: "＋";
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 1.6rem;
color: #999;
}
.faq-item dt.open::after {
content: "－";
}
.faq-item dd {
display: none;
position: relative;
padding: 0 20px 20px 50px;
font-size: 1.4rem;
line-height: 1.8;
color: #444;
}
.faq-item dd::before {
content: "A.";
position: absolute;
left: 10px;
top: 0;
color: var(--ks-black);
font-size: 2rem;
font-weight: bold;
font-family: 'Montserrat', sans-serif;
} @media screen and (max-width: 768px) {
.lp-fv .title-jp { font-size: 2.4rem; }
.strong-point { padding: 20px; font-size: 1.4rem; }
.strong-point .highlight .big { font-size: 2.4rem; }
.cta-title { font-size: 1.6rem; }
.cta-btn .main-txt { font-size: 1.8rem; }
.brand-grid { grid-template-columns: 1fr; }
.spec-list.two-col { column-count: 1; }
.faq-item dt { font-size: 1.4rem; padding-left: 40px; }
.faq-item dt::before { font-size: 1.6rem; left: 5px; }
.faq-item dd { font-size: 1.3rem; padding-left: 40px; }
.faq-item dd::before { font-size: 1.6rem; left: 5px; }
}  .lp-container {
padding-top: 100px; }
@media screen and (max-width: 768px) {
.lp-container {
padding-top: 70px; }
}  .lp-slider .slick-prev, 
.lp-slider .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 46px;
height: 46px;
padding: 0;
transform: translateY(-50%);
cursor: pointer;
border: none;
background: var(--ks-black);
color: transparent;
border-radius: 50%;
z-index: 10;
outline: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
transition: all 0.3s ease;
} .lp-slider .slick-prev:hover, 
.lp-slider .slick-next:hover {
background: var(--ks-red);
box-shadow: 0 6px 15px rgba(230,0,18,0.4);
} .lp-slider .slick-prev {
left: -20px;
}
.lp-slider .slick-next {
right: -20px;
} .lp-slider .slick-prev::before, 
.lp-slider .slick-next::before {
content: "";
display: block;
width: 12px;
height: 12px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
position: absolute;
top: 50%;
left: 50%;
} .lp-slider .slick-prev::before {
transform: translate(-30%, -50%) rotate(-135deg);
} .lp-slider .slick-next::before {
transform: translate(-70%, -50%) rotate(45deg);
} @media screen and (max-width: 768px) {
.lp-slider .slick-prev, 
.lp-slider .slick-next {
width: 36px;
height: 36px;
}
.lp-slider .slick-prev {
left: 5px; }
.lp-slider .slick-next {
right: 5px; }
.lp-slider .slick-prev::before, 
.lp-slider .slick-next::before {
width: 10px;
height: 10px;
}
} .lp-slider .slick-dots {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
margin-top: 20px;
}
.lp-slider .slick-dots li {
margin: 0 5px;
}
.lp-slider .slick-dots button {
font-size: 0;
width: 12px;
height: 12px;
background: #ccc;
border-radius: 50%;
border: none;
cursor: pointer;
transition: 0.3s;
padding: 0;
}
.lp-slider .slick-dots .slick-active button {
background: var(--ks-red);
width: 24px;
border-radius: 10px;
}