/* =====================================
   KMAX Sauna Emergency LP
   Common Style
===================================== */

/* ---------- Color System ---------- */

:root {

    --primary: #0F2744;
    --primary-dark: #081827;

    --secondary: #17385F;

    --accent: #FF7A00;
    --accent-hover: #e56c00;

    --white: #FFFFFF;

    --light: #F5F7FA;
    --light-gray: #EEF2F5;

    --border: #DCE3EA;

    --text: #333333;
    --text-light: #666666;

    --success: #00A86B;

    --shadow:
    0 10px 30px rgba(0,0,0,0.08);

}

/* ---------- Utility ---------- */

.honeypot {
    display: none;
}

/* ---------- Base ---------- */

html {

    scroll-behavior: smooth;

}

body {

    font-family:
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    color: var(--text);

    background: #ffffff;

    line-height: 1.8;

    font-size: 16px;

    overflow-x: hidden;

}

/* ---------- Container ---------- */

.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}
/* =====================================
   Section 共通余白
===================================== */

section{

    padding: 100px 0;
}
/* ---------- Section ---------- */

section {

    padding: 100px 0;

    position: relative;

}

/* ---------- Headings ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {

    line-height: 1.4;

    font-weight: 700;

}

.section-title {

    text-align: center;

    font-size: 42px;

    color: var(--primary);

    margin-bottom: 20px;

}

.section-subtitle {

    text-align: center;

    color: var(--text-light);

    margin-bottom: 60px;

    font-size: 18px;

}

/* ---------- Text ---------- */

p {

    margin-bottom: 15px;

}

.center {

    text-align: center;

}

/* ---------- Links ---------- */

a {

    transition: all .3s ease;

}

a:hover {

    opacity: .85;

}

/* ---------- Button ---------- */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 220px;

    height: 60px;

    padding: 0 35px;

    border-radius: 8px;

    background: var(--accent);

    color: #fff;

    text-decoration: none;

    font-weight: 700;

    transition: .3s;

    box-shadow:
    0 5px 15px rgba(255,122,0,.25);

}

.btn:hover {

    background: var(--accent-hover);

    transform: translateY(-3px);

}

.btn.secondary {

    background: transparent;

    border: 2px solid #fff;

    box-shadow: none;

}

.btn.secondary:hover {

    background: rgba(255,255,255,.1);

}

/* ---------- Card ---------- */

.card {

    background: #fff;

    border-radius: 16px;

    padding: 40px;

    box-shadow: var(--shadow);

}

/* ---------- Grid ---------- */

.grid-2 {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 40px;

}

.grid-3 {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 30px;

}

.grid-4 {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 25px;

}

@media screen and (max-width:992px){

    .grid-3,
    .grid-4 { grid-template-columns: repeat(2,1fr); }
}

@media screen and (max-width:768px){

    .grid-2,
    .grid-3,
    .grid-4 { grid-template-columns: 1fr; }

    .benefit-grid { grid-template-columns: repeat(2,1fr); }
}

@media screen and (max-width:480px){

    .benefit-grid { grid-template-columns: 1fr; }
}

/* ---------- Compare Table ---------- */

.compare-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 40px;

    background: #fff;

    box-shadow: var(--shadow);

}

.compare-table th {

    background: var(--primary);

    color: #fff;

    padding: 18px;

}

.compare-table td {

    padding: 18px;

    text-align: center;

    border: 1px solid var(--border);

}

.compare-table tr:nth-child(even) {

    background: #f9fbfc;

}

/* ---------- Flow ---------- */

.flow-grid {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 20px;

}

.flow-step {

    background: #fff;

    border-radius: 15px;

    padding: 30px;

    text-align: center;

    box-shadow: var(--shadow);

    border-top: 5px solid var(--accent);

    font-weight: bold;

}

/* ---------- Device ---------- */

.device-grid {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 40px;

}

.device-box {

    background: #fff;

    padding: 40px;

    border-radius: 16px;

    box-shadow: var(--shadow);

}

.device-box h3 {

    color: var(--primary);

    margin-bottom: 20px;

}

.device-box ul {

    list-style: none;

}

.device-box li {

    padding: 10px 0;

    border-bottom: 1px solid var(--border);

}

/* ---------- Benefit ---------- */

.benefit-grid {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 25px;

}

.benefit-grid div {

    background: #fff;

    border-radius: 16px;

    padding: 30px;

    text-align: center;

    font-weight: bold;

    box-shadow: var(--shadow);

}

/* ---------- FAQ ---------- */

.faq-item {

    background: #fff;

    margin-bottom: 20px;

    border-radius: 12px;

    padding: 30px;

    box-shadow: var(--shadow);

}

.faq-item h3 {

    color: var(--primary);

    margin-bottom: 15px;

}

/* ---------- CTA ---------- */

#contact {

    background:
    linear-gradient(
    135deg,
    #0F2744,
    #17385F
    );

    color: #fff;

    text-align: center;

}

#contact h2 {

    font-size: 48px;

    margin-bottom: 25px;

}

#contact p {

    font-size: 20px;

    margin-bottom: 40px;

}

/* ---------- Footer ---------- */

footer {

    background: #081827;

    color: #fff;

    text-align: center;

    padding: 30px 0;

}

/* ---------- Image ---------- */

img {

    max-width: 100%;

    height: auto;

    display: block;

}

/* ---------- Animation ---------- */

.fade-up {

    opacity: 0;

    transform: translateY(30px);

    transition: all .8s ease;

}

.fade-up.active {

    opacity: 1;

    transform: translateY(0);

}

/* ---------- Annotation Button ---------- */

.annotation-btn {

    display: inline-block;
    margin-top: 10px;
    padding: 7px 16px;
    background: var(--accent);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: background .2s, transform .2s;
}

.annotation-btn:hover {

    background: var(--accent-hover);
    transform: translateY(-2px);
    opacity: 1;
}