/* ------------------------------------- */
/* Sound Guard W LP スタイルシート */
/* ------------------------------------- */

/* ================================
   Reset / Base
================================ */

body {
    margin: 0;

    padding: 80px 0 0; 
    overflow-x: hidden; 
	font-family: -apple-system, BlinkMacSystemFont,
                 "Helvetica Neue", "Hiragino Kaku Gothic ProN",
                 "Yu Gothic", "Noto Sans JP", sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* カスタムプロパティ（CSS変数）の定義と基本スタイルを統合 */
.sgw-lp {
    --primary-red: #b71c1c;
    --dark-bg: #1a1a1a;
    --dark-gray: #2c2c2c;
    --white: #ffffff;
    --light-gray: #f5f5f5;
    --text-dark: #212121;
    --text-light: #757575;
    
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    color: var(--text-dark);
    line-height: 1.7;
    width: 100%;
    margin: 0;
    /* ★修正点2: .sgw-lp から重複していた padding-top を削除し、padding: 0 に戻す */
    padding: 0;
    background: var(--white);
    font-size: 16px;
}

.sgw-lp * {
    box-sizing: border-box;
    /* marginとpaddingをリセット */
    margin: 0;
    padding: 0;
}

.sgw-lp img {
    content-visibility: auto;
    max-width: 100%;
    height: auto;
    display: block;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ================================
   セクション共通
================================ */

.sgw-lp .sgw-section {
    padding: 80px 20px;
}

.sgw-lp .sgw-section--dark {
    background: var(--dark-bg);
    color: var(--white);
}

.sgw-lp .sgw-section--light {
    background: var(--light-gray);
    color: var(--text-dark);
}

/* ▼ 新規追加: sgw-section--red の背景を定義（以前の手順で推奨） ▼ */
.sgw-lp .sgw-section--red {
    background: var(--primary-red);
    color: var(--white);
}

/* ▼ 新規追加: sgw-section--white の背景を定義 ▼ */
.sgw-lp .sgw-section--white {
    background: var(--white);
    color: var(--text-dark);
}

.sgw-lp .sgw-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ================================
   見出し（Heading）
================================ */

.sgw-lp .sgw-heading {
    text-align: center !important;
    margin-bottom: 60px;
	
	
}

.sgw-lp .sgw-heading__title {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
    position: relative;
    display: inline-block;
    padding-bottom: 16px;
}

.sgw-lp .sgw-heading__title--red {
    color: var(--primary-red);
}

.sgw-lp .sgw-heading__title--white {
    color: var(--white);
}

.sgw-lp .sgw-heading__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--primary-red);
}

.sgw-lp .sgw-heading__title--white::after {
    background: var(--white);
}

.sgw-lp .sgw-heading__subtitle {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-light);
}

/* ================================
   ボタン（Button）
================================ */

.sgw-lp .sgw-hero__buttons {
    order: 5; /* 修正: 5番目に配置 */
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    width: 100%;
}

.sgw-lp .sgw-btn {
    display: inline-block;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    min-width: 200px;
    text-align: center;
    transition: all 0.3s ease;
}

.sgw-lp .sgw-btn--primary {
    background: var(--primary-red);
    color: var(--white);
    border: 2px solid var(--primary-red);
}

.sgw-lp .sgw-btn--secondary {
    background: var(--white);
    color: var(--text-dark);
    border: 2px solid var(--white);
}

/* ================================
   HERO（Flexboxで子要素の順序制御）
================================ */

.sgw-lp .sgw-hero {
    width: 100%;
    height: 120vh;
    min-height: 700px;

    background: url('https://yht.co.jp/wp-content/uploads/2025/11/soundguard_bg.jpg')
                 center center / cover no-repeat;

    /* Flexboxを適用し、子要素の順序を制御 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 80px 20px 60px;
    position: relative;
}

/* ヒーローコンテンツ（ロゴと実績のラッパー） -- HTMLで使われていないため order: 1 の設定を削除 */
.sgw-lp .sgw-hero__content {
    position: static;
    z-index: 10;
    text-align: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 10px;
}

/* ロゴ */
.sgw-lp .sgw-hero__logo {
    order: 1; /* 修正: 1番目に配置 */
    width: clamp(500px, 80vw, 850px);
    margin: 0 auto 0px;
}

/* 累計実績（テキスト） */
.sgw-lp .sgw-hero__achievement-period {
    order: 2; /* 修正: 2番目に配置 */
    text-align: center;
    margin: 0 auto 20px;
}

.sgw-lp .sgw-hero__achievement-period strong {
    /* 修正1: 元の金色グラデーションを維持 */
    background: linear-gradient(90deg, #d4af37 0%, #f2e48b 50%, #b8860b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 修正2: サイズをレスポンシブなclampで適用 (全画面共通) */
    font-size: clamp(24px, 6vw, 36px); 
    font-weight: 700;
    display: block;
    line-height: 1.3;
    margin-bottom: 4px;
    
    /* ? 修正3: filter: drop-shadow() を使用し、グラデーションを濁らせずに影を適用 */
    text-shadow: none; /* 従来の text-shadow は必ず削除 */
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.8)); 
}

.sgw-lp .sgw-hero__achievement-period span {
    color: rgba(255,255,255,0.95);
    font-weight: 400;
    font-size: 18px;
    display: block;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.7);
}

/* メインキャッチコピー */
.sgw-lp .sgw-hero__trust {
    order: 3; /* 修正: 3番目に配置 */
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    text-align: center;
    margin: 20px auto 40px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

/* エネルギー低減画像 */
.sgw-lp .sgw-hero__energy {
    order: 2; /* 修正: 4番目に配置 */
    margin: 0px auto 30px;
    max-width: 700px;
}
.sgw-lp .sgw-hero__energy img {
    filter: drop-shadow(0 4px 7px rgba(0,0,0,0.9));
}

/* ================================
   HEADER (グローバルヘッダー) - スクロールアニメーション対応
================================ */

.sgw-header {
    width: 100%;
    /* 赤色に変更 */
    background-color: var(--primary-red); 
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    position: fixed; 
    top: 0;
    left: 0;
    z-index: 100; 
    /* 高さを固定し、レイアウトを安定させる */
    height: 80px; 
    
    /* 常時表示に変更 */
    transform: translateY(0);  
    opacity: 1; 
    
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; 
}

/* JavaScriptで付与されるクラス: スクロール時にヘッダーを表示 (常時表示にしたため基本的に不要だが、維持) */
.sgw-header.is-scrolled {
    transform: translateY(0);
    opacity: 1;
}

/* --- ヘッダー内部のレイアウト (Flexboxでロゴとメニューを中央配置) --- */

/* ヘッダー内部のコンテナ (ロゴとナビゲーションを囲むラッパー) */
.sgw-header__inner {
    display: flex;
    /* 要素を垂直方向（中央）に揃える */
    align-items: center; 
    /* ロゴとナビゲーションを左右に最大限離して配置する */
    justify-content: space-between; 
    
    /* 親要素の高さに合わせる */
    height: 100%; 
    padding: 0 30px; /* 左右のパディング */
}

/* ヘッダー内のロゴ */
.sgw-header__logo img {
    height: 40px; /* ロゴの高さを調整 */
    width: auto;
    display: block;
}

/* PC用ナビゲーション */
.sgw-nav--pc ul {
    display: flex; /* メニュー項目を横並びにする */
    list-style: none;
    margin: 0;
    padding: 0;
}

.sgw-nav--pc ul li {
    margin-left: 30px; /* 各メニュー項目間のスペース */
}

.sgw-nav--pc ul li a {
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.sgw-nav--pc ul li a:hover {
    color: rgba(255, 255, 255, 0.7);
}


/* --- スマホメニュー トグルボタン --- */

.sgw-menu-toggle {
    display: none; /* PCでは非表示 */
	
	display: none !important;
    
    /* 1. ボタン全体のサイズと位置 */
    width: 44px; /* タッチしやすいサイズ */
    height: 44px;
    background: none;
    border: none;
    padding: 10px;
    position: relative;
    z-index: 101; /* ヘッダーより上に配置 */
    cursor: pointer;
}

/* ハンバーガーボタンの各線（3本線） */
.sgw-menu-toggle span {
� � display: block;
� � position: absolute;
� � height: 3px;         /* 線の太さ（確実に見えるように） */
� � width: 100%;
� � background: var(--white); /* ★ご要望通り白色に★ */
� � transition: all 0.3s;
� � left: 0;
}

/* 初期位置（ハンバーガーのとき） */
.sgw-menu-toggle span:nth-child(1) { top: 8px; }
.sgw-menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.sgw-menu-toggle span:nth-child(3) { bottom: 8px; }

/* ここで span の定義は1つに統一（高さは3pxでも4pxでもOK） */
.sgw-menu-toggle span {
    display: block;
    position: absolute;
    height: 3px;           /* 好きな値に固定 */
    width: 100%;
    background: #fff;
    transition: all 0.3s;
    left: 0;
}

/* バツ状態（X）のとき：両方とも「中央」に寄せてから回転 */
.sgw-menu-toggle[aria-expanded="true"] span:nth-child(1),
.sgw-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.sgw-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(-50%) rotate(45deg);
}

.sgw-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-50%) rotate(-45deg);
}

/* 真ん中の線は消すだけ */
.sgw-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}


/* --- スマホメニュー --- */

/* --- スマホメニュー（共通） --- */
.sgw-nav--mobile {
    display: none;           /* 最初は非表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

/* 開いたときに JS から .is-open が付く */
.sgw-nav--mobile.is-open {
    display: block;          /* ★ここがないと中身が出ない★ */
    opacity: 1;
    visibility: visible;
}




/* ヘッダー不透明化の強制設定 (透過問題の解消) */
.sgw-header {
    /* 背景色を不透明な赤色コードで直接指定（変数ではなく） */
    background-color: #b71c1c !important; 
    
    /* 不透明度を1.0（完全不透明）で固定 */
    opacity: 1 !important; 
}

/* ================================
   HEROセクション アニメーション
================================ */

/* --- アニメーションの定義 --- */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* --- 各要素へのアニメーション適用 --- */

/* ロゴ: 大きくフェードイン */
.sgw-hero__logo {
    animation: fadeInScale 1s ease-out forwards;
    opacity: 0; /* 初期状態を非表示にする */
    animation-delay: 0.2s; /* 少し遅れて開始 */
}

/* 音エネルギー表記: スライドアップ */
.sgw-hero__energy {
    animation: slideInUp 1.2s ease-out forwards;
    opacity: 0; /* 初期状態を非表示にする */
    animation-delay: 0.6s; /* ロゴの後に開始 */
}

/* 累計枚数表記: フェードイン */
.sgw-hero__achievement-period {
    animation: fadeIn 0.7s ease-out forwards;
    opacity: 0; /* 初期状態を非表示にする */
    animation-delay: 1.2s; /* エネルギー表記の後に開始 */
}

/* ボタン群: 遅れてフェードイン */
.sgw-hero__buttons {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0; /* 初期状態を非表示にする */
    animation-delay: 1.5s; /* 全てのテキストの後に開始 */
}

/* ================================
   ABOUT
================================ */

.sgw-lp .sgw-about {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.sgw-lp .sgw-about__intro {
    max-width: 700px;
    margin: 0 auto 60px;
}

.sgw-lp .sgw-about__logo {
    width: 250px;
    margin: 0 auto 20px;
}

.sgw-lp .sgw-about__feature {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

.sgw-lp .sgw-about__feature span {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 4px;
    color: var(--white);
    font-size: 32px;
}

.sgw-lp .sgw-about__feature .text-red {
    background: var(--primary-red);
}

.sgw-lp .sgw-about__feature .text-blue {
    background: #1976d2;
}

.sgw-lp .sgw-about__text {
    font-size: 18px;
    line-height: 1.8;
}

/* カード */
.sgw-lp .sgw-about__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px !important;
    margin-bottom: 60px;
}

.sgw-lp .sgw-feature-card {
    background: var(--dark-gray);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 0px; /* ? 修正1: カード下部の余白を確保しバランス改善 */
}

.sgw-lp .sgw-feature-card__image {
    height: 200px; /* ? 修正1: PCでの正方形バランスに近づけるため、高さを200pxに調整 */
    object-fit: cover;
    width: 100%;
}

.sgw-lp .sgw-feature-card__label {
    /* 白い隙間を消すため、上部のパディングをゼロに設定 */
    padding:  5px 5px 5px; /* 上0px, 左右5px, 下5px */
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    /* 念のためマージンもゼロに */
    margin-top: 0; 
}

.sgw-lp .sgw-feature-card__description {
    padding: 0  5px 10px;
    font-size: 14px;
    color: #bdbdbd;
    margin-top: 15px; /* ? 修正2: ラベルとの間にスペースを確保 */
}

.sgw-lp .sgw-feature-card--absorb .sgw-feature-card__label {
    background: var(--primary-red);
}

.sgw-lp .sgw-feature-card--block .sgw-feature-card__label {
    background: #1976d2;
}
/* 図解 */
.sgw-lp .sgw-about__diagram {
    max-width: 500px;
    margin: 0 auto;
}

/* ================================
    DATA SECTION (STATIC STYLES) - アコーディオン解除後
================================ */

/* 常時表示部分のスタイル (赤背景のテキストなど) */
.sgw-lp .sgw-data__intro {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
	margin-top: -50px;
    margin-bottom: 40px; 
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.sgw-lp .sgw-data__intro p {
    margin-bottom: 0;
}

.sgw-lp .sgw-data__intro .highlight {
    color: var(--white);
    background: var(--primary-red);
    padding: 4px 12px;
    border-radius: 4px;
}


.sgw-lp .sgw-data-content--always-open {
    padding-top: 0; 
    display: grid;
    
    /* 修正: PCでの横並び設定を、縦並びの1列に強制的に変更します */
    /* グラフと説明文を中央に配置するため、1fr（画面幅）ではなく最大幅を指定 */
    grid-template-columns: minmax(auto, 930px); /* 縦並びのため、1列の最大幅を制限 */
    gap: 30px; 
    align-items: center;

    /* グリッド内のアイテム全体を中央に配置する */
    justify-content: center; 
    
    width: fit-content; 
    margin: 0 auto;
}
/* グラフ画像のスタイル */
.sgw-lp .sgw-data__graph {
    margin: 0 auto;
    max-width: 1000px; 
    text-align: center;
}
.sgw-lp .sgw-data__graph img {
    display: block; 
    margin: 0 auto; 
    width: 100%; 
}

/* 説明文のスタイル */
.sgw-lp .sgw-data__description {
    background: none !important;
    border: none !important;
    padding: 0 !important;      /* 内側の余白も消したい場合 */
    max-width: 100% !important; /* 幅制限を解除 */
    margin: 0 auto;
}

.sgw-lp .sgw-data__description strong {
    color: var(--primary-red);
    font-size: 18px;
    display: block;
    margin-bottom: 8px;
}

.sgw-lp .sgw-data__description .highlight {
    font-weight: 700;
    color: var(--primary-red); 
}

/* 常時表示部分のスタイル */
.sgw-lp .sgw-data__intro {
    font-size: 20px; /* 親要素のサイズ */
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px; 
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.sgw-lp .sgw-data__intro p {
    margin-bottom: 0;
}

/* PC用 */
.sgw-lp .sgw-data__intro .highlight {
    color: var(--white);
    background: var(--primary-red);
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 32px;
    display: inline-block;
    line-height: 1.2;
}

/* 768px以下（タブレット） */
@media (max-width: 768px) {
    .sgw-lp .sgw-data__intro .highlight {
        font-size: 28px !important;
        padding: 3px 8px !important;
        background: var(--primary-red) !important;
    }
}

/* 600px以下（スマホ） */
@media (max-width: 600px) {
    .sgw-lp .sgw-data__intro .highlight {
        font-size: 22px !important;
        padding: 8px 6px !important;
        background: var(--primary-red) !important;
    }
}



/* ================================
   USE CASES（お悩み） - PC/デフォルト設定
================================ */

.sgw-lp .sgw-use-cases {
    display: grid;
    /* PCでは横4列 */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.sgw-lp .sgw-use-case {
    background: var(--dark-gray);
    padding: 32px 20px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease;
}

/* アイコンのサイズと中央配置を定義 */
.sgw-lp .sgw-use-case__icon {
    width: 100px;
    height: auto;
    margin: 0 auto 16px;
}

.sgw-lp .sgw-use-case__text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}


/* ================================
   メディアクエリ (モバイル対応) - USE CASES
================================ */
@media (max-width: 600px) {
    
    /* 600px以下で横1列に変更 */
    .sgw-lp .sgw-use-cases {
        grid-template-columns: 1fr; /* 横1列に設定 */
        gap: 16px; 
        max-width: 100%;
        /* margin: 0 auto; は grid-template-columns: 1fr; で不要になることが多いですが、
           必要であれば max-width の調整とセットで指定してください。 */
    }
    
    /* カード内のパディングをモバイル向けに調整 */
    .sgw-lp .sgw-use-case {
        padding: 24px 15px; 
    }

    /* アイコンのサイズをモバイル向けに調整 */
    .sgw-lp .sgw-use-case__icon {
        width: 80px; /* PCの100pxから縮小 */
        margin-bottom: 12px;
    }
    
    /* テキストサイズをモバイル向けに調整 */
    .sgw-lp .sgw-use-case__text {
        font-size: 16px; /* PCの18pxから縮小 */
    }
}

/* ================================
   メディアクエリ (タブレット/PC対応)
   601px以上では必ず4列を維持する設定を追加
================================ */
@media (min-width: 601px) {
    .sgw-lp .sgw-use-cases {
        /* 601px以上の画面では、強制的に4列表示に戻す */
        grid-template-columns: repeat(4, 1fr) !important; 
    }
}

/* ================================
   INSTALL（設置方法） - 最終修正案
================================ */

.sgw-lp .sgw-install {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.sgw-lp .sgw-install__hook img {
    width: 150px;
    margin: 0 auto 10px;
}

.sgw-lp .sgw-install__caption {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 50px;
}

.sgw-lp .sgw-install__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

/* ★★★ 修正箇所1: カード本体 ★★★ */
.sgw-lp .sgw-install-step {
    background: var(--dark-gray);
    padding: 10px;
    /* カード全体の角丸を削除（手順番号との干渉回避） */
    border-radius: 0; 
    position: relative;
    /* overflow: hidden を削除 */
}

.sgw-lp .sgw-install-step__number {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background: var(--primary-red);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 18px;
    z-index: 2; /* 手順番号が他の要素の上に確実に来るように設定 */
}

/* ★★★ 修正箇所2: 画像本体 ★★★ */
.sgw-lp .sgw-install-step img {
    margin: 10px auto 10px;
    max-width: 100%;
    /* 角丸を「上0px、下4px」に設定 */
    border-radius: 4px 4px 4px 4px; 
}

.sgw-lp .sgw-install-step__text {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}
/* ================================
   TIPS（効果最大化/FAQ）
================================ */

.sgw-lp .sgw-tips {
    max-width: 900px;
    margin: 0 auto;
}

/* ★★★details (親) の設定: font-size: 0 で空白を消す ★★★ */
#sgw-tips-faq .sgw-tip {
    background: var(--white); 
    border: 2px solid #e0e0e0; 
    border-radius: 8px; 
    margin-bottom: 16px;
    
    font-size: 0; 
}

/* ================================
   REVIEWS（お客様の声） - 適用強化版
================================ */

/* ★★★ セレクタを #reviews から始めることで詳細度を上げる ★★★ */
#reviews .sgw-reviews__content {
    /* PCでは横3列 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ================================
   REVIEWS（お客様の声） - 最終版（引用符・属性なし）
================================ */

/* --- レイアウト設定 --- */
#reviews .sgw-reviews__content {
    /* PCでは横3列 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- カード本体のスタイル --- */
#reviews .sgw-review-card {
    /* 背景色を白色に設定 */
    background: #ffffff !important; 
    
    /* テキスト色を濃いグレーに変更 */
    color: #333333 !important; 

    padding: 30px 25px;
    border-radius: 8px;
    /* 影を薄く設定 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
    line-height: 1.7;
    height: 100%; /* 高さを揃える */
}

/* --- 引用符の削除とアイコン要素の調整 --- */

/* 1. HTMLから削除を推奨しますが、残っている場合は非表示 */
#reviews .sgw-review-card__icon {
    display: none !important; 
    margin-bottom: 0 !important;
}
/* 2. 引用符（始め）を生成するスタイルを削除 */
/* #reviews .sgw-review-card__icon::before {} は不要 */


/* --- レビュー本文の調整 --- */
#reviews .sgw-review-card__text {
    font-size: 15px;
    /* 顧客情報がないため、マージンを最小限にするか削除 */
    margin-bottom: 0; 
    position: relative;
}

/* 3. 引用符（終わり）を生成するスタイルを削除 */
/* #reviews .sgw-review-card__text::after {} は不要 */


/* --- 顧客情報（属性）の削除 --- */
#reviews .sgw-review-card__customer {
    display: none !important; /* HTMLから削除しても、残っていても非表示 */
}

/* ================================
   REVIEWS レスポンシブ調整 (レイアウトは変更なし)
================================ */

/* 768px以下: 2列に切り替え (タブレット) */
@media (max-width: 768px) {
    #reviews .sgw-reviews__content {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* 600px以下: 1列に切り替え (スマートフォン) */
@media (max-width: 600px) {
    #reviews .sgw-reviews__content {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    #reviews .sgw-review-card {
        padding: 25px 20px;
    }
    #reviews .sgw-review-card__text {
        font-size: 16px;
    }
}

/* ================================
   REVIEWS レスポンシブ調整
================================ */

/* 768px以下: 2列に切り替え (タブレット) */
@media (max-width: 768px) {
    #reviews .sgw-reviews__content {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* 600px以下: 1列に切り替え (スマートフォン) */
@media (max-width: 600px) {
    #reviews .sgw-reviews__content {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    #reviews .sgw-review-card {
        padding: 25px 20px;
    }
    #reviews .sgw-review-card__text {
        font-size: 16px;
    }
}

/* ★★★見出し (summary) の最終強制設定: アイコンを中央・下に配置する土台 ★★★ */
#sgw-tips-faq .sgw-tip summary {
    font-size: 20px !important; 
    
    /* summary自体をインラインブロックにして、テキスト幅で中央寄せを成立させる */
    display: inline-block !important; 
    /* 親要素 (details) に text-align: center を暗黙的に適用させる */
    
    color: var(--primary-red) !important; 
    
    padding: 24px 20px 10px; /* 下側のパディングを減らしてアイコンに近づける */
    font-weight: 700;
    cursor: pointer;
    list-style: none !important; 
    position: relative;
    text-align: center !important; /* テキスト自体も中央寄せ */
}

#faq .sgw-faq-item {
    background: var(--white);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0;
}

/* FAQの見出し (summary) にTIPSと同じスタイルを適用する */
#faq .sgw-faq-item summary {
    font-size: 20px !important;
    display: inline-block !important;
    color: var(--primary-red) !important;
    padding: 24px 20px 10px;
    font-weight: 700;
    cursor: pointer;
    list-style: none !important;
    position: relative;
    text-align: center !important;
}

/* FAQの summary を中央に寄せるための設定 */
#faq .sgw-faq-item {
    text-align: center;
}

/* ブラウザのデフォルトマーカーを強制的に削除 */
#faq .sgw-faq-item summary::marker,
#faq .sgw-faq-item summary::before {
    content: none !important;
    display: none !important;
}

/* Safari / WebKit 用：summary 左側の三角を消す */
#faq .sgw-faq-item summary::-webkit-details-marker,
#sgw-tips-faq .sgw-tip summary::-webkit-details-marker {
    display: none !important;
}


/* FAQのアイコン（下向き三角）の設定 */
#faq .sgw-faq-item summary::after {
    content: "\25BC";
    display: block;
    position: static;
    margin: 8px auto 0;
    font-size: 18px;
    transition: transform 0.3s;
    color: var(--primary-red) !important;
}

/* FAQのアイコン（開いた時：上向き三角）の設定 */
#faq .sgw-faq-item[open] summary::after {
    content: "\25B2";
}

/* FAQの本文（Answer）のスタイル調整 */
#faq .sgw-faq-item__answer {
    font-size: 15px !important;
    padding: 0 24px 24px;
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}
#faq .sgw-faq-item__answer p {
    font-size: 15px !important;
    line-height: 1.5;
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* summaryのテキストを囲む details に中央寄せを適用 */
#sgw-tips-faq .sgw-tip {
    text-align: center; /* summaryを中央に寄せるための設定 */
}


/* ブラウザのデフォルトマーカーを強制的に削除 */
#sgw-tips-faq .sgw-tip summary::marker,
#sgw-tips-faq .sgw-tip summary::before {
    content: none !important;
    display: none !important;
}

/* ★★★ アイコンの調整 (見出しの下、中央に配置) ★★★ */
#sgw-tips-faq .sgw-tip summary::after {
    /* 修正1: 下向き三角 (\25BC) を設定 */
    content: "\25BC"; 
    
    /* 修正2: ブロック要素にし、summaryの次の行に表示させる */
    display: block; 
    
    /* 修正3: 親要素 (summary) の中央寄せを引き継ぎ、アイコン自体を中央に配置 */
    position: static; 
    
    margin: 8px auto 0; /* 上に少し隙間を開け、左右はautoで中央寄せ */
    
    font-size: 18px; 
    transition: transform 0.3s;
    
    color: var(--primary-red) !important; 
}
#sgw-tips-faq .sgw-tip[open] summary::after {
    /* 修正: 開いた時は上向き三角 (\25B2) を設定 */
    content: "\25B2"; 
}

/* sgw-center-wrapper は中央揃えの役割だけを持たせる (変更なし) */
#sgw-tips-faq .sgw-center-wrapper {
    text-align: center !important; 
}

/* 本文のコンテナ (変更なし) */
#sgw-tips-faq .sgw-tip__content {
    font-size: 15px !important; 
    padding: 0 24px 24px; 
    max-width: 600px;
    margin: 0 auto;
    text-align: left; 
}

/* 本文の p タグ (変更なし) */
#sgw-tips-faq .sgw-tip__content p {
    font-size: 15px !important; 
    line-height: 1.5; 
    display: block !important; 
    text-align: center !important; 
    margin: 0 auto !important;
}

#sgw-tips-faq .sgw-tip__content .highlight {
    font-weight: 700;
    color: var(--primary-red);
}

/* ================================
� �FAQ h3 Style (お手入れ・使用上の注意) - Red Highlight
================================ */

/* FAQセクション内の H3 スタイル */
.sgw-lp #faq h3 {
    /* ▼▼▼ 赤塗りつぶし四角（白文字）スタイル ▼▼▼ */
    background: var(--primary-red); /* 背景色を赤に */
    color: var(--white);           /* 文字色を白に */
    
    padding: 15px 20px;            /* 上下左右のパディングで高さを出す */
    border-radius: 8px;            /* 角を少し丸くする */
    text-align: center;            /* テキストを中央寄せ */
    font-size: 18px;
    font-weight: 700;
    margin: 35px auto 15px;           /* 上下のマージンを調整し、要素全体を中央寄せ */
    max-width: none;              /* 最大幅を設定して見出しが広がりすぎないように調整 */
    display: block;                /* ブロック要素として幅とマージンを適用 */
    line-height: 1.2;              /* 行の高さを調整 */

    /* 不要になるプロパティを削除またはコメントアウト */
    border-bottom: none; /* 赤の下線は不要になるので削除またはnoneに */
}

/* 念のため、SPでの調整も追加 */
@media (max-width: 768px) {
    .sgw-lp #faq h3 {
        font-size: 20px;
        margin-bottom: 30px; /* SPでのマージンを調整 */
        padding: 12px 15px; /* SPでのパディングを調整 */
    }
}

/* ================================
   Responsive
================================ */

@media (max-width: 1024px) {
    /* クラス名を新しい常時表示用のものに置き換える */
� � .sgw-lp .sgw-data-content--always-open { 
� � � � grid-template-columns: 1fr;
        /* 縦並びになっても要素自体を中央に配置する */
        justify-content: center; 
� � }
}

@media (max-width: 768px) {

    .sgw-lp .sgw-section {
        padding: 50px 30px;
    }

    .sgw-lp .sgw-heading__title {
        font-size: 28px;
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    /* HERO */
    .sgw-lp .sgw-hero__content {
        /* 修正: SPの負のマージンを削除し、レイアウト崩れを防ぐ */
        margin-top: 0;
    }
	
	/* ★ ヒーローセクションの調整（ここを追記/上書き） ★ */
    .sgw-lp .sgw-hero {
        /* 1. 縦長すぎる問題を解決: 画面高さの8割に短縮 */
        height: 80vh !important; 
        /* 最小の高さを設定して、極端に短くなるのを防ぐ */
        min-height: 500px !important; 
        
        /* 2. 写真によりすぎている問題を解決: 画像の上側を中心に表示 */
        background-position: center top !important;
    }

    /* ... 他のスマホ用設定 ... */
}

    .sgw-lp .sgw-hero__logo {
        width: clamp(240px, 80vw, 500px);
        margin: 0 auto 0; /* 下マージンを0にリセット */
    }

    .sgw-lp .sgw-hero__energy {
        margin: -10px auto 30px; /* 上マージンを-10pxに設定 */
        text-align: center;
    }
    
    .sgw-lp .sgw-hero__energy img {
        width: 90%; 
        max-width: 400px; 
        height: auto;
        display: block; 
        margin: 0 auto; 
    }
    
    /* 累計実績の金色文字 strong のサイズ設定はベースCSSに移動済み */

    .sgw-lp .sgw-hero__achievement-period span {
        font-size: 16px;
    }

    .sgw-lp .sgw-hero__trust {
        font-size: 20px;
    }

    .sgw-lp .sgw-hero__buttons {
        flex-direction: column;
        gap: 12px;
        align-items: center; /* 追記: ボタンを中央寄せにする */
    }
    .sgw-lp .sgw-btn {
        /* 変更: min-width: 80% を削除し、幅をコンテンツに合わせる */
        min-width: 0; /* min-widthの制約を解除 */
        width: auto; /* 幅をコンテンツサイズに合わせる（PC版と同様） */
        max-width: 100%; /* 念のため画面幅を超えないように制限 */
    }


    /* ABOUT */
    .sgw-lp .sgw-about__feature {
        font-size: 24px;
    }
    .sgw-lp .sgw-about__feature span {
        font-size: 28px;
    }
    
    /* ? 修正: 768px以下で文字サイズをレスポンシブに制御（14px〜18px）*/
    .sgw-lp .sgw-about__text {
        font-size: clamp(14px, 4vw, 18px); 
    }

    /* カード */
.sgw-lp .sgw-about__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.sgw-lp .sgw-feature-card {
    background: var(--dark-gray);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.1);
    padding-bottom: 10px; /* ? 修正: カード下部のパディングを調整 */
}

.sgw-lp .sgw-feature-card__image {
    height: 120px; /* ? 修正: 画像の高さを調整し、正方形に近づける */
    object-fit: cover;
    width: 100%;
}

   /* USE CASES */
    .sgw-lp .sgw-use-cases {
        grid-template-columns: repeat(2, 1fr);
    }
	
	/* 設置手順カード内の左右パディングを狭くし、テキスト領域を広げる */
.sgw-lp .sgw-install-step {
    padding: 15px 8px; /* 例: 上下15px、左右8pxに設定 */
}

	
   

    /* REVIEWS */
    .sgw-lp .sgw-reviews {
        grid-template-columns: 1fr;
    }
}


/* ================================
   SPEC (商品概要) - White Background Version
================================ */

#purchase .sgw-heading__title::after {
    display: none !important;
    content: none !important;
}

#spec .sgw-heading {
    width: 100%;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#spec .sgw-heading__title {
    display: block;          /* inline-block から上書き */
    margin-left: auto;
    margin-right: auto;      /* h2 自体を中央に寄せる */
}



.sgw-lp .sgw-spec__content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* PC: 2列レイアウト */
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}


.sgw-lp .sgw-spec__right {
    /* ▼ 画像を中央に配置するためのFlexbox（垂直・水平中央寄せ） ▼ */
    display: flex;
    justify-content: center; 
    align-items: center;
}

.sgw-lp .sgw-spec__image-wrapper {
    max-width: 400px; /* 画像の最大幅を調整 */
    padding-top: 20px;
}
.sgw-lp .sgw-spec__image-wrapper img {
    width: 100%; /* ラッパーに合わせて画像を100%表示 */
    height: auto;
    display: block;
}


.sgw-lp .sgw-spec__section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--primary-red); /* 赤文字 */
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-red); /* 赤線 */
    display: inline-block;
}

.sgw-lp .sgw-spec-table {
    display: grid;
    grid-template-columns: 150px 1fr;
    /* gap: 1px; を残すことで、縦のグリッド線（1px）は維持されます */
    gap: 1px;
    background: #e0e0e0; 
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.sgw-lp .sgw-spec-table dt,
.sgw-lp .sgw-spec-table dd {
    padding: 15px 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dark);
}

.sgw-lp .sgw-spec-table dt {
    background: #e0e0e0;
    font-weight: 700;
    /* ▼ 縦線はそのまま維持 ▼ */
    border-right: 1px solid #bdbdbd;
    /* ▼ 新規: 下側の横線を追加 ▼ */
    border-bottom: 1px solid #bdbdbd;
}

.sgw-lp .sgw-spec-table dd {
    background: var(--white);
    /* ▼ 新規: 下側の横線を追加 ▼ */
    border-bottom: 1px solid #bdbdbd;
}

/* ▼ 新規追加: テーブルの最終行の下線を除去 ▼ */
.sgw-lp .sgw-spec-table dt:last-child,
.sgw-lp .sgw-spec-table dd:last-child {
    border-bottom: none;
}
/* 768px以下で1列に変更 */
@media (max-width: 768px) {
    .sgw-lp .sgw-spec__content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .sgw-lp .sgw-spec__section-title {
        font-size: 22px;
    }

    .sgw-lp .sgw-spec-table {
        grid-template-columns: 100px 1fr;
    }
    
    .sgw-lp .sgw-spec__right {
        /* SPでは左側の下に画像が来るので、上部の余白を調整 */
        padding-top: 0px; 
        margin-top: 20px; /* 必要に応じて調整 */
    }
    .sgw-lp .sgw-spec__image-wrapper {
        max-width: 300px; /* SPでの画像の最大幅を調整 */
        padding-top: 0;
    }
}

/* ================================
   MAXIMIZE TIPS (効果最大化) - 独立した新しいスタイル
================================ */

.sgw-lp .sgw-maximize-tips {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC: 3列 */
    gap: 30px;
    margin-top: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.sgw-lp .sgw-tip-card {
    background: var(--white);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sgw-lp .sgw-tip-card__icon {
    font-size: 40px;
    color: var(--primary-red);
    margin-bottom: 10px;
}

.sgw-lp .sgw-tip-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.sgw-lp .sgw-tip-card__text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dark);
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    .sgw-lp .sgw-maximize-tips {
        grid-template-columns: 1fr; /* SP: 1列 */
        gap: 20px;
    }
}



/* ================================
   Responsive - NEW BREAKPOINTS (修正済み)
================================ */

/* 767px以下: 中間帯 (INSTALLは4列維持、隙間を詰める) */
@media (max-width: 767px) {
    /* SGW全体のセクションパディング (768px以下の標準) */
    .sgw-lp .sgw-section {
        padding: 60px 30px; 
    }

    /* USE CASES（お悩み）を2列にする */
    .sgw-lp .sgw-use-cases {
        grid-template-columns: repeat(2, 1fr);
    }

    /* INSTALL（設置方法）は4列を維持するが、隙間を狭くする */
    .sgw-lp .sgw-install__steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px; /* 隙間を狭く */
    }

    /* INSTALLカードの左右パディングを狭くする（改行改善） */
    .sgw-lp .sgw-install-step {
        padding: 10px 5px; 
    }

    /* 手順番号の位置を調整（少し上に戻す） */
    .sgw-lp .sgw-install-step__number {
        top: -18px; 
    }
}

/* 600px以下: スマートフォン (INSTALLを2列に切り替える) */
@media (max-width: 600px) {
    /* SGW全体のセクションパディングをさらに狭くする */
    .sgw-lp .sgw-section {
        padding: 40px 15px;
    }

    /* INSTALL（設置方法）を2列に切り替える */
    .sgw-lp .sgw-install__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* カードの左右パディングをSP向けに再調整 */
    .sgw-lp .sgw-install-step {
        padding: 15px 10px;
        
        /* ★重なり解消: 縦の隙間を確保★ */
        margin-top: 20px; 
    }
    
    /* ★重なり解消: 1行目（手順1と2）のmargin-topを相殺★ */
    .sgw-lp .sgw-install-step:nth-child(-n+2) {
        margin-top: 0;
    }　

    /* 手順番号の位置を調整（元の位置に戻す） */
    .sgw-lp .sgw-install-step__number {
        top: -22px; 
    }

    /* ABOUTセクションのカードも1列にする */
    .sgw-lp .sgw-about__cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
	
	/* ================================
   HEADER レスポンシブ調整 (768px以下)
================================ */
@media (max-width: 768px) {
    .sgw-nav--pc {
        display: none;
    }

    .sgw-menu-toggle {
        display: block;
    }

    .sgw-nav--mobile {
        /* display はここでは触らない（上の .is-open で制御） */
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: calc(100% - 80px);
        background-color: var(--dark-bg);
        z-index: 99;
        overflow-y: auto;
    }

    .sgw-nav--mobile ul {
        list-style: none;
        padding: 40px 20px;
        text-align: center;
    }

    .sgw-nav--mobile ul li {
        margin-bottom: 25px;
    }

    .sgw-nav--mobile ul li a {
        color: var(--white);
        text-decoration: none;
        font-size: 20px;
        font-weight: 700;
        display: block;
        padding: 10px 0;
    }
}
	
/* ================================
   FOOTER (YAHATA STYLE)
================================ */

.sgw-footer {
    background: #000;                   /* 完全な黒 */
    padding: 40px 20px 20px;            /* 上ゆったり */
    text-align: center;
}

.sgw-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.sgw-footer__logo-wrap {
    text-align: center;
    margin-bottom: 10px;
}

.sgw-footer__logo {
    width: 180px;                       /* ロゴの見た目に合わせて少し大きめ */
    height: auto;
    display: inline-block;
}

.sgw-footer__copy {
    font-size: 12px;
    color: #ffffff;
    opacity: 0.9;
    letter-spacing: 0.05em;
    margin-top: 8px;
}

@media (max-width: 767px) {
    .sgw-footer__copy {
        font-size: 8px;
    }
}

#purchase .sgw-heading__title {
    display: none !important;
}

#purchase .sgw-heading {
    margin-bottom: -20px !important;
}

/* ================================
   PURCHASE BUTTON 強制スタイル
================================ */

/* 共通（PC・SP両方） */
#purchase .sgw-purchase__buttons a {
    display: inline-block;
    background: #b71c1c !important;   /* 赤背景を強制 */
    color: #ffffff !important;        /* 白文字を強制 */
    border: 2px solid #b71c1c !important;
    padding: 18px 40px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none !important; /* 青いリンク線を消す */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* スマホ時に少し小さくするなら（お好みで） */
@media (max-width: 600px) {
    #purchase .sgw-purchase__buttons a {
        font-size: 18px;
        padding: 14px 32px;
    }
}

/* 購入（お問い合わせ）ボタンの上下余白を調整 */
#purchase .sgw-purchase__buttons {
    margin: 40px 0 !important;   /* 上下40px（お好みで増減OK） */
}

/* ボタン自体にも少し余白を追加（安全のため） */
#purchase .sgw-purchase__buttons a {
    margin-top: 10px;
    margin-bottom: 10px;
}

.sgw-review-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-red);
    margin-bottom: 8px;
    text-align: left;
}

	
/* ================================
   PC版（1025px以上）だけ見た目を大きくする調整
================================ */
@media (min-width: 1025px) {

    /* ロゴを大きくする */
    .sgw-lp .sgw-hero__logo {
        width: clamp(700px, 75vw, 1000px);
    }

    /* 金文字（累計◯◯枚）を大きく */
    .sgw-lp .sgw-hero__achievement-period strong {
        font-size: clamp(40px, 4vw, 45px);
    }

    /* 金文字のサブテキストも大きく */
    .sgw-lp .sgw-hero__achievement-period span {
        font-size: 15px;
    }

    /* メインキャッチコピーを大きく */
    .sgw-lp .sgw-hero__trust {
        font-size: 34px;
    }

     /* エネルギー画像のラッパーを大きく */
    .sgw-lp .sgw-hero__energy {
        max-width: 700px;
        width: 100%;
    }

    /* ★画像自体の制限を解除して大きく表示する */
    .sgw-lp .sgw-hero__energy img {
        max-width: none;
        width: 100%;
    }
}

/* 768px以上（PC・タブレット）は横並びにする */
@media (min-width: 768px) {
    .sgw-hero__buttons {
        flex-direction: row !important;
        justify-content: center;
        gap: 24px; /* ボタン間の余白調整 */
    }
}

/* 767px以下（スマホ）は縦並びに統一 */
@media (max-width: 767px) {
    .sgw-hero__buttons {
        flex-direction: column !important;
        gap: 12px;
    }
}

/* ================================
   新ボタンデザイン
================================ */

.sgw-btn--primary {
    display: inline-block;
    padding: 18px 40px;
    border-radius: 10px;

    /* 背景をモダンな赤グラデに刷新 */
    background: linear-gradient(180deg, #d63d3d 0%, #b71c1c 100%);
    
    /* テキスト */
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.05em;

    /* 影で立体感 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);

    /* 枠線（スッキリするように薄め） */
    border: 1px solid #a81919;

    /* アニメーション */
    transition: 
        background 0.25s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

/* ==== ホバー（PCマウス） ==== */
.sgw-btn--primary:hover {
    /* 少し明るくして浮かせる */
    background: linear-gradient(180deg, #e84a4a 0%, #c62828 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.28);
}

/* ==== クリック＆スマホタップ ==== */
.sgw-btn--primary:active {
    background: linear-gradient(180deg, #a61c1c 0%, #8b1313 100%);
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}

/* =========================================
   FAQ（よくあるご質問） 最終スタイル
   ・質問：黒・太字・中央揃え
   ・回答：赤文字・左揃え
========================================= */

/* 質問ボックス全体は中央寄せレイアウト */
#faq .sgw-faq-item {
    text-align: center;
}

/* --- 質問（summary） --- */
#faq .sgw-faq-item summary {
    display: inline-block !important;
    margin: 0 auto !important;

    padding: 18px 24px 10px !important;  /* 上左右の余白 */
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;             /* 黒文字 */
    text-align: center !important;
    cursor: pointer;
    list-style: none !important;
}

/* ブラウザのデフォルトマーカーを消す */
#faq .sgw-faq-item summary::marker,
#faq .sgw-faq-item summary::-webkit-details-marker {
    content: "" !important;
    display: none !important;
}

/* ▼アイコン（質問の下に赤で表示） */
#faq .sgw-faq-item summary::after {
    content: "\25BC";  /* ▼ */
    display: block;
    margin: 4px auto 0;
    font-size: 16px;
    color: var(--primary-red) !important;
    transition: transform 0.25s ease;
}

/* 開いているときは▲に変更 */
#faq .sgw-faq-item[open] summary::after {
    content: "\25B2";  /* ▲ */
}

/* --- 回答ブロック全体 --- */
#faq .sgw-faq-item__answer {
    max-width: 640px;
    margin: 0 auto 12px !important;
    padding: 8px 24px 14px !important;   /* 上・左右・下の余白 */
    text-align: left !important;        /* 段落は左寄せ */
}

/* --- 回答テキスト --- */
#faq .sgw-faq-item__answer p {
    margin: 0 0 8px 0 !important;
    color: var(--primary-red) !important; 
    font-weight: 500;
    line-height: 1.7;
}

/* =========================================
   スマホ（600px以下） 微調整
========================================= */
@media (max-width: 600px) {

    #faq .sgw-faq-item summary {
        padding: 14px 16px 8px !important;
        font-size: 16px !important;
    }

    #faq .sgw-faq-item__answer {
        padding: 6px 16px 12px !important;
    }
}

/* =========================================
   FAQ：白いボックス・影・角丸を完全に消して
   上下の横線だけで区切る
========================================= */

/* 余計な背景・影・角丸を全て無効化 */
#faq .sgw-faq-item {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 上の横線だけ描く */
#faq .sgw-faq-item {
    border-top: 2px solid #ccc !important;  /* ★これだけ残す */
}



/* 質問（summary）は中央寄せのまま調整 */
#faq .sgw-faq-item summary {
    padding: 14px 20px !important;
    text-align: center !important;
    background: none !important;
    border: none !important;
}

/* ▼アイコンの位置調整 */
#faq .sgw-faq-item summary::after {
    margin-top: 4px;
}

/* 回答部分の余白を少しだけ確保 */
#faq .sgw-faq-item__answer {
    padding: 10px 20px 14px !important;
    background: none !important;
}

/* h3 の直後にある質問（最初の details）には線を出さない */
#faq h3 + .sgw-faq-item {
    border-top: none !important;
}

/* スマホ画像は初期状態では非表示（PC用） */
.sgw-efficient-sp {
    display: none;
}

/* PC画像（横長）初期表示 */
.sgw-about-efficient {
    display: block;
}

@media (max-width: 600px) {

    /* PC用の横長画像（旧画像）は非表示に */
    .sgw-about-efficient {
        display: none !important;
    }

    /* スマホ用の縦長画像を表示 */
    .sgw-efficient-sp {
        display: block !important;
        margin-top: 20px;
    }

    .sgw-efficient-sp img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* 吸音／遮音 のラベルをきれいに中央揃え＆同じサイズに */
.sgw-lp .sgw-about__feature .text-red,
.sgw-lp .sgw-about__feature .text-blue {
    display: inline-flex;          /* 中の文字を縦横センターにできる */
    align-items: center;
    justify-content: center;

    padding: 4px 18px;             /* ちょい細めのパディングに調整 */
    line-height: 1.2;
    border-radius: 4px;

    min-width: 5.5em;              /* 赤・青の箱の横幅をそろえる */
}

/* ================================
   TIPS（効果的な防音対策）スマホの文章整形
================================ */

/* 共通：本文ブロックを中央に置きつつ、中身は左寄せ */
#sgw-tips-faq .sgw-tip__content {
    max-width: 640px;
    margin: 0 auto 12px;
    text-align: left;
}

/* 段落は完全に左寄せ＆自然な行間に */
#sgw-tips-faq .sgw-tip__content p {
    text-align: left !important;
    font-size: 15px;
    line-height: 1.7;
}

/* スマホでは少しだけ文字サイズを落として折返しをキレイに */
@media (max-width: 600px) {
    #sgw-tips-faq .sgw-tip summary {
        font-size: 18px;          /* 質問の赤文字を少しだけ小さく */
        padding: 18px 16px 8px;   /* 内側の余白も微調整 */
    }

    #sgw-tips-faq .sgw-tip__content p {
        font-size: 14.5px;
    }
}

/* ===== TIPS 本文：PCデフォルト（中央寄せ） ===== */
#sgw-tips-faq .sgw-tip__content {
    max-width: 800px;
    margin: 0 auto 16px;
    text-align: center;        /* PCは中央寄せ */
}

#sgw-tips-faq .sgw-tip__content p {
    text-align: center !important;
    font-size: 15px;
    line-height: 1.7;
}

@media (min-width: 768px) {
  #sgw-tips-faq summary br {
    display: none;
  }
}