/* =========================================
   SuwaConnectHub - Luxury Minimal Style
   ========================================= */

:root { 
    --primary: #D95C18; 
    --text: #333; 
    --bg: #F8F8F8; 
    --dark: #1A1A1A; 
    --white: #FFFFFF; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
    font-family: "Shippori Mincho", serif; 
    color: var(--text); 
    background: var(--white); 
    line-height: 1.8; 
}

/* --- Header --- */
header { position: fixed; top: 30px; left: 30px; z-index: 1000; }
.header-stack { width: 130px; display: flex; flex-direction: column; gap: 10px; }
.header-logo img { width: 100%; mix-blend-mode: multiply; filter: drop-shadow(0 0 15px rgba(255,255,255,0.8)); }
.btn-header { 
    display: block; background: var(--primary); color: #fff; padding: 10px 0; 
    text-align: center; text-decoration: none; font-family: "Lato", sans-serif; 
    font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; transition: 0.3s;
}
.btn-header:hover { background: var(--white); color: var(--primary); }

/* --- Hero --- */
#hero { height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; }
.bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); opacity: 0.7; object-fit: cover; }
.hero-content { position: relative; z-index: 2; text-align: center; color: #fff; }
.hero-title { font-family: "Lato", sans-serif; font-size: clamp(2.5rem, 8vw, 5rem); letter-spacing: 0.15em; font-weight: 300; margin-bottom: 20px;}
.hero-subtitle { font-size: clamp(1rem, 4vw, 1.4rem); line-height: 2; }
.highlight { color: var(--primary); font-weight: 700; }

.scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff; text-align: center; }
.scroll-indicator .line { width: 1px; height: 50px; background: rgba(255,255,255,0.3); margin: 5px auto; overflow: hidden; position: relative; }
.scroll-indicator .line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); animation: sLine 2s infinite; }
@keyframes sLine { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }

/* --- Sections Common --- */
.section-padding { padding: 120px 0; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 30px; }
.container.narrow { max-width: 800px; }
.bg-soft-gray { background: var(--bg); }
.section-header { margin-bottom: 60px; text-align: center; }
.en-label { display: block; font-family: "Lato", sans-serif; font-size: 0.75rem; letter-spacing: 0.4em; color: #999; text-transform: uppercase; margin-bottom: 15px; }
.en-label.accent { color: var(--primary); }
.jp-heading { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 500; }
.white-text { color: #fff !important; }

/* --- Concept --- */
.text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; text-align: left; }
.text-node h4 { color: var(--primary); margin-bottom: 10px; font-size: 1.1rem; }

/* --- Visuals --- */
.visual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.img-wrapper { aspect-ratio: 16/10; overflow: hidden; margin-bottom: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s ease; }
.visual-item:hover img { transform: scale(1.08); }
.visual-item figcaption { font-size: 0.9rem; color: #777; line-height: 1.5; }

/* --- Facility Rows --- */
.facility-rows { display: flex; flex-direction: column; gap: 80px; }
.row-item { display: flex; align-items: center; gap: 50px; }
.row-item.reverse { flex-direction: row-reverse; }
.row-img { width: 55%; height: 350px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.row-img img { width: 100%; height: 100%; object-fit: cover; }
.row-content { width: 45%; }
.row-content h4 { font-size: 1.4rem; margin-bottom: 15px; border-bottom: 2px solid var(--primary); display: inline-block; padding-bottom: 5px; }

/* --- Plan --- */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.day-box { background: #fff; padding: 30px; border: 1px solid #eee; }
.day-label { color: var(--primary); font-family: "Lato", sans-serif; font-weight: 700; border-bottom: 2px solid var(--bg); display: block; margin-bottom: 15px; }
.day-box li { list-style: none; display: flex; font-size: 0.9rem; margin-bottom: 8px; border-bottom: 1px dashed #f0f0f0; }
.day-box li span { font-family: "Lato", sans-serif; width: 50px; color: #aaa; }

/* --- Reservation Info & Panel --- */
.dark-theme { background: var(--dark); text-align: center; color: #fff; }

.spec-board { 
    display: flex; 
    justify-content: center; 
    gap: 80px; 
    margin: 0 auto 50px auto; 
    max-width: 600px; 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 30px 40px;
    border-radius: 4px;
}
.spec-column { position: relative; flex: 1; }
.spec-column:not(:last-child)::after {
    content: ''; position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
    width: 1px; height: 50px; background: rgba(255, 255, 255, 0.15);
}
.spec-column .label { color: var(--primary); font-family: "Lato", sans-serif; font-size: 0.75rem; letter-spacing: 0.2em; display: block; margin-bottom: 8px; }
.spec-column .value { font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 300; }

/* --- Stylish Form --- */
.stylish-form { text-align: left; max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 30px; }
.form-label { display: block; font-family: "Lato", sans-serif; font-size: 0.8rem; color: var(--primary); letter-spacing: 0.2em; margin-bottom: 8px; }

.stylish-form input[type="text"],
.stylish-form input[type="email"],
.stylish-form input[type="tel"],
.stylish-form input[type="number"],
.stylish-form textarea {
    width: 100%; padding: 12px 0; background: transparent; border: none;
    border-bottom: 1px solid rgba(255,255,255,0.2); color: var(--white);
    font-family: inherit; font-size: 1rem; transition: 0.3s;
}
.stylish-form textarea { resize: none; }
.stylish-form input::placeholder, .stylish-form textarea::placeholder { color: rgba(255,255,255,0.3); }
.stylish-form input:focus, .stylish-form textarea:focus { outline: none; border-color: var(--primary); }

.input-half { display: flex; gap: 30px; }
.input-half .form-group { flex: 1; }

.toggle-group { display: flex; border-bottom: 1px solid rgba(255,255,255,0.2); }
.toggle-group input[type="radio"] { display: none; }
.toggle-btn {
    flex: 1; padding: 15px 0; text-align: center; color: rgba(255,255,255,0.5);
    cursor: pointer; font-size: 1.1rem; transition: 0.3s; border-bottom: 2px solid transparent;
    margin-bottom: -1px; 
}
.toggle-group input[type="radio"]:checked + .toggle-btn {
    color: var(--white); font-weight: bold; border-color: var(--primary);
}

.btn-primary.form-btn {
    display: inline-block; background: var(--primary); color: #fff; text-decoration: none; 
    font-family: "Lato", sans-serif; font-weight: 700; transition: 0.3s; border-radius: 2px;
    width: 100%; border: none; cursor: pointer; margin-top: 20px; padding: 20px 0; font-size: 1.1rem;
}
.btn-primary.form-btn:hover { background: #fff; color: var(--primary); transform: translateY(-3px); }

/* --- Footer --- */
footer { padding: 60px 0; background: #111; text-align: center; color: #555; font-size: 0.75rem; }
.f-logo { color: #fff; font-family: "Lato", sans-serif; font-size: 1rem; margin-bottom: 10px; }

/* --- Responsive (スマートフォン対応) --- */
@media (max-width: 768px) {
    header { top: 15px; left: 15px; }
    .header-stack { width: 90px; }
    .btn-header { padding: 8px 0; }
    .text-grid, .visual-grid, .plan-grid { grid-template-columns: 1fr; gap: 20px; }
    .row-item { flex-direction: column !important; gap: 20px; }
    .row-img, .row-content { width: 100%; }
    .row-img { height: 220px; }
    .section-padding { padding: 80px 0; }

    .spec-board { flex-direction: column; gap: 30px; padding: 25px; margin-bottom: 40px; }
    .spec-column:not(:last-child)::after {
        right: 0; left: 50%; top: auto; bottom: -15px; transform: translateX(-50%); width: 50px; height: 1px;
    }

    .input-half { flex-direction: column; gap: 0; }
}

/* =========================================
   NEW: 特商法テーブル＆パネル微調整
   ========================================= */
.tokushoho-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.tokushoho-table th, .tokushoho-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top;
}
.tokushoho-table th {
    width: 30%;
    font-weight: 600;
    color: var(--primary);
    background-color: #fdfdfd;
}
.tokushoho-table td {
    width: 70%;
    color: #444;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .tokushoho-table th, .tokushoho-table td {
        display: block;
        width: 100%;
    }
    .tokushoho-table th {
        border-bottom: none;
        padding-bottom: 5px;
    }
}
/* インフォメーションパネルの3カラム対応 */
.spec-board {
    max-width: 800px; /* 少し広げる */
}