/* --- デザインシステム --- */
:root {
    --primary-color: #f39800;
    --bg-dark: #111111;
    --text-white: #ffffff;
    --header-height: 70px;
}

/* --- 基本設定 --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Noto Sans JP', sans-serif; line-height: 1.8; color: #333; overflow-x: hidden; }

/* --- 1. 共通レイアウト設定（追加箇所） --- */
section {
    padding: 120px 0; /* セクション間の深呼吸できる余白 */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px; /* 左右の安全な余白 */
}
/* style.css の基本設定に追加 */
a {
    text-shadow: none;        /* HPB特有の影を消す */
    text-decoration: none;   /* ★これが下線を消す魔法です */
}
.section-title {
    margin-bottom: 60px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    section { padding: 80px 0; }
    .container { padding: 0 20px; }
    .section-title { margin-bottom: 40px; }
}

/* --- ヘッダー --- */
.site-header { width: 100%; height: var(--header-height); background: rgba(17,17,17,0.95); position: fixed; top: 0; z-index: 1000; display: flex; align-items: center; }
.header-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.brand-logo a { text-decoration: none; color: #fff; font-weight: 900; font-size: 1.2rem; font-family: 'Montserrat', sans-serif; }
.brand-logo span { color: var(--primary-color); }
.main-nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.main-nav a { text-decoration: none; color: #fff; font-size: 0.75rem; font-weight: bold; }
.nav-btn { background: var(--primary-color); padding: 6px 12px; border-radius: 4px; transition: 0.3s; }

/* --- ヒーロー（余白を0に固定） --- */
/* --- ヒーロー（ここを書き換え） --- */
.hero { 
    min-height: 80vh;           /* 100vhだとスマホで大きすぎるので80vh（画面の8割）に */
    padding: 60px 20px;         /* 上下に余白を作る */
    background-size: cover; 
    background-position: center; 
    display: flex; 
    flex-direction: column;     /* ボタンを縦に並べるための魔法 */
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    text-align: center;
}
.hero-inner { text-align: center; }
.hero-title { font-size: clamp(2rem, 10vw, 3.5rem); line-height: 1.2; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; }
.hero-subtext { font-size: 1rem; margin-bottom: 30px; }
/* ボタンの基本：改行させず、形を整える */
.btn-main, .btn-sub {
    display: inline-flex;       /* inline-blockより整列に強い */
    align-items: center;
    justify-content: center;
    white-space: nowrap;        /* ★これで絶対に改行しなくなります */
    padding: 12px 40px;         /* 左右の余白を多めにして、プロっぽい長方形に */
    text-decoration: none;
    border-radius: 4px;         /* ★角丸をあえて小さくすると、モダンで高級感が出ます */
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 0.05em;     /* 文字の間隔を少し広げて読みやすく */
    transition: all 0.3s ease;
    margin: 10px;
    min-width: 200px;           /* 最低限の幅を確保して形を揃える */
}

.btn-main {
    background: var(--primary-color);
    color: #fff;
    border: none;
}

.btn-sub {
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
}

/* ホバー時の動き（デザイナー好みの少し浮く演出） */
.btn-main:hover, .btn-sub:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* スマホでは縦に並べてOKにする設定（メディアクエリ） */
@media (max-width: 768px) {
    .btn-main, .btn-sub {
        display: flex;          /* スマホでは横幅いっぱいに */
        width: 100%;
        margin: 10px 0;
    }
}

/* --- 特徴（FEATURES） --- */
.feature-item { display: flex; gap: 40px; margin-bottom: 80px; align-items: center; }
.feature-item.reverse { flex-direction: row-reverse; }
.feature-img-box { flex: 1; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #eee; }
.feature-img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.feature-item:hover .feature-img { transform: scale(1.1); }
.feature-text { flex: 1; }
.feature-text h3 { font-size: 1.5rem; margin-bottom: 15px; border-left: 4px solid var(--primary-color); padding-left: 15px; }

/* --- ギャラリー --- */
.section-gallery { background: #1a1a1a; color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery-item { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: 0.6s ease; }
.gallery-item:hover img { transform: scale(1.15); opacity: 1; }

/* --- 装備ポイント（カード形式） --- */
.section-features-detail { background-color: #f9f9f9; }
.feature-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.feature-card { background: #fff; padding: 50px 35px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.3s ease; text-align: center; height: 100%; }
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.card-icon { font-size: 3rem; margin-bottom: 20px; }
.feature-card h3 { font-size: 1.25rem; margin-bottom: 15px; color: #333; font-weight: bold; border-bottom: 2px solid var(--primary-color); display: inline-block; padding-bottom: 5px; }
.feature-card p { font-size: 0.95rem; color: #666; text-align: left; }

/* --- T-Connect --- */
.section-t-connect { background-color: #000; color: #fff; overflow: hidden; }
.t-connect-wrapper { display: flex; align-items: center; gap: 60px; flex-wrap: wrap; }
.t-connect-text { flex: 1; min-width: 300px; }
.sub-headline { font-size: 1.5rem; color: var(--primary-color); margin-bottom: 20px; }
.t-connect-features { list-style: none; padding: 0; }
.t-connect-features li { margin-bottom: 25px; position: relative; padding-left: 20px; }
.t-connect-features li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--primary-color); border-radius: 50%; }
.t-connect-image { flex: 1; min-width: 300px; }
.t-connect-img-container img { width: 100%; border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.4); border: 1px solid #333; }

/* --- 収納・細部（DETAILS） --- */
.section-details { background-color: #fff; }
.details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.details-list-item { background: #fdfdfd; padding: 30px; border-left: 5px solid var(--primary-color); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.details-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.details-list-item ul { list-style: none; padding: 0; }
.details-list-item li { margin-bottom: 15px; font-size: 0.95rem; position: relative; padding-left: 1.2em; color: #555; }
.details-list-item li::before { content: "・"; position: absolute; left: 0; color: var(--primary-color); font-weight: bold; }

/* --- 外観ギャラリー（色変え） --- */
.section-gallery.bg-alt { background-color: #e9e4de; color: #333; padding-top: 80px; }
.section-gallery.bg-alt .section-lead { color: #666; }

/* --- スペック表 --- */
.section-spec { background: #f9f9f9; }
.spec-table-wrapper { overflow-x: auto; margin-top: 30px; }
.spec-table { width: 100%; border-collapse: collapse; background: #fff; color: #333; font-size: 0.9rem; }
.spec-table th, .spec-table td { border: 1px solid #ccc; padding: 12px 15px; text-align: center; }
.spec-table td:first-child { text-align: left; background: #f9f9f9; font-weight: bold; width: 40%; }
.spec-table thead th { background: #000; color: #fff; }

/* --- ライトボックス --- */
.lightbox { display: none; position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); cursor: zoom-out; }
.lightbox-content { display: block; margin: auto; max-width: 90%; max-height: 80%; position: relative; top: 50%; transform: translateY(-50%); box-shadow: 0 0 30px rgba(0,0,0,0.5); border: 3px solid #fff; }
.lightbox-close { position: absolute; top: 30px; right: 40px; color: #fff; font-size: 50px; cursor: pointer; transition: 0.3s; }
.lightbox-close:hover { color: var(--primary-color); }
/* お問い合わせCTAセクション */
.section-contact-cta {
    background-color: #1a1a1a;
    color: #fff;
    text-align: center;
}

.cta-content p {
    margin-bottom: 40px;
    font-size: 1.1rem;
    color: #ccc;
}

.cta-large {
    font-size: 1.2rem;
    padding: 20px 50px;
    display: inline-block;
    box-shadow: 0 10px 20px rgba(243, 152, 0, 0.2);
}

.contact-info {
    margin-top: 30px;
}

.contact-info .tel {
    font-size: 1.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    margin-bottom: 5px;
    color: var(--primary-color);
}

.contact-info .hours {
    font-size: 0.85rem;
    color: #888;
}

/* フッター本体 */
.site-footer {
    background-color: #000000;
    padding: 20px 0;
    border-top: 1px solid #222;
}
.footer-logo {
    margin-bottom: 20px; /* コピーライトとの間に少し隙間を作る */
}
.footer-logo img {
    max-width: 300px;     /* ロゴの大きさ（お好みで調整してください） */
    height: auto;
}
.footer-bottom {
    text-align: center;
}

.copyright {
    font-size: 0.75rem;
    color: #666;
    letter-spacing: 0.1em;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .cta-large {
        width: 100%;
        padding: 15px 20px;
    }
    .contact-info .tel {
        font-size: 1.5rem;
    }
}
/* --- Color Variations Section --- */
.section-color-options {
    padding: 100px 0;
    background-color: #ffffff;
}

.card-wrapper {
    display: flex;
    gap: 30px;
    margin-top: 50px;
}

.color-card {
    flex: 1;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* マウスホバーで浮かび上がる演出 */
.color-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.card-img {
    width: 100%;
    height: 240px; /* カードの高さ固定 */
    overflow: hidden;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を保ちつつ枠いっぱいに表示 */
    transition: transform 0.5s ease;
}

.color-card:hover .card-img img {
    transform: scale(1.1); /* ホバー時に画像が少しズーム */
}

.card-body {
    padding: 25px;
    text-align: center;
}

.card-body h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: #333;
}

.card-body p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* レスポンシブ対応：タブレット・スマホでは縦並びに */
@media (max-width: 992px) {
    .card-wrapper {
        flex-direction: column;
        gap: 40px;
        padding: 0 20px;
    }
    
    .card-img {
        height: 300px;
    }
}
/* SNSアイコンのスタイル（ここを上書き） */
.footer-sns {
    display: flex;
    gap: 30px;            /* アイコン同士の隙間を少し広げました */
    justify-content: center; /* 中央に寄せる */
    margin-top: 10px;     /* ロゴとの間隔調整 */
}

.footer-sns a {
    color: #fff;          /* アイコンの色（白） */
    font-size: 2.2rem;    /* ★アイコンのサイズ：1.5remから2.2remへ大幅アップ */
    transition: 0.3s;
    display: flex;        
    align-items: center;  
    justify-content: center;
    width: 60px;          /* ★クリックエリアを広く確保（重要） */
    height: 60px;         /* ★同上 */
    border-radius: 50%;   /* 丸い枠線をつける場合に備えて */
    /* border: 2px solid rgba(255,255,255,0.2); */ /* お好みで薄い枠線をつけてもOK */
}

/* ホバー時の動き */
.footer-sns a:hover {
    color: var(--primary-color); /* オレンジ（ブランドカラー）に変わる */
    background-color: rgba(255,255,255,0.1); /* ほんのり背景色をつけてクリック感を出す */
    transform: translateY(-5px); /* 少し上に浮く演出 */
}