/* --- フォントの読み込み（CSSファイルの先頭に追加） --- */
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');


/* --- 基本設定 --- */
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

/* コンテンツ幅を管理するコンテナ */
.container {
    width: 100%;
    max-width: 1200px; /* 最大幅を指定（お好みで調整） */
    margin: 0 auto;    /* 中央寄せ */
    padding: 0 20px;   /* スマホなどで端が詰まりすぎないように余白 */
    box-sizing: border-box;
}

/* --- お悩みセクションのスタイル --- */
#worries-section {
    /* 必要に応じて背景色などを設定 */
    /* background-color: #f5f5f5; */
    padding: 60px 0; /* 上下の余白 */
}

/* 画像をレスポンシブにするクラス */
.responsive-img {
    width: 100%;       /* 親要素の幅いっぱいに広げる */
    max-width: 100%;   /* 本来のサイズ以上にはならないようにする（念のため） */
    height: auto;      /* 横幅に合わせて縦幅を自動調整 */
    display: block;    /* 画像の下にできる微妙な隙間を消す */
    margin: 0 auto;    /* 中央寄せ */
}

/* （既存のスタイルはそのままに、以下を追記） */

/* --- 解決セクション --- */
#solution-section {
    background-color: #1a2a3a; /* 高級感のあるダークネイビー */
    padding: 80px 0;
    color: #ffffff;
    text-align: center;
    overflow: hidden; /* はみ出し防止 */
}

.solution-inner {
    position: relative; /* バッジの配置基準 */
    padding-top: 40px; /* バッジと被らないように余白 */
}

/* メインコピー（筆文字風） */
/* --- 解決コピーの修正案 --- */
.solution-title {
    font-family: 'Yuji Syuku', serif;
    font-size: 4rem;
    
    /* 案1：白にする場合 */
    color: #ffffff; 
    
    /* 案2：深みのある赤にする場合 */
    /* color: #a52a2a; */ 

    margin: 40px 0;
    line-height: 1.2;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* 影を少しぼかすと読みやすい */
    transform: rotate(-2deg);
}

/* サブコピー */
.solution-text {
    font-size: 1.1rem;
    line-height: 1.8;
}

.solution-text p {
    margin-bottom: 1.5em;
}

.gold-highlight {
    color: #c5a059;
    font-weight: bold;
    font-size: 1.2rem;
}

.contact-text {
    font-weight: bold;
    font-size: 1.3rem;
    margin-top: 30px;
}

/* --- レスポンシブ調整（スマホ用） --- */
@media (max-width: 768px) {
    .solution-badge {
        width: 120px;
        height: 120px;
        font-size: 1rem;
        top: -20px; /* 少し上にずらす */
    }
    .badge-small {
        font-size: 0.7rem;
    }
    .solution-title {
        font-size: 2.5rem; /* スマホでは文字サイズを小さく */
        margin-top: 80px;
    }
    .solution-text {
        font-size: 1rem;
        text-align: left; /* スマホでは左寄せの方が読みやすい場合も */
        display: inline-block; /* 中央寄せしつつ左揃えにするテクニック */
    }
    #solution-section .container {
        text-align: center; /* 親要素で再度中央寄せ */
    }
}

/* PCのみ/スマホのみ表示のユーティリティクラス（もし無ければ追加） */
@media (max-width: 768px) {
    .pc-only { display: none; }
}
@media (min-width: 769px) {
    .sp-only { display: none; }
}

/* --- 解決セクション：ブランドロゴエリア --- */

/* エリア全体の調整 */
.brand-header {
    margin-bottom: 20px;
    position: relative;
    display: inline-block; /* 中央揃えのためにまとめる */
}

/* 「審査に強い」の小さな文字 */
.brand-sub {
    font-family: "Shippori Mincho", serif; /* 明朝体 */
    font-size: 1.1rem;
    color: #ffffff;
    letter-spacing: 0.2em;
    margin: 0 0 5px 0;
    opacity: 0.9;
    display: block; /* 改行させる */
}

/* 「ハイメンズ不動産」ロゴ風デザイン */
.brand-logo {
    font-family: "Shippori Mincho", serif;
    font-weight: 800; /* 極太にする */
    font-size: 3.5rem; /* かなり大きく！ */
    margin: 0;
    line-height: 1.1;
    
    /* ゴールドのグラデーション文字にする魔法の記述 */
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* 文字色を透明にして背景のゴールドを見せる */
    
    /* 読みやすくするための影（透明文字には drop-shadow を使う） */
    filter: drop-shadow(0px 2px 5px rgba(0,0,0,0.8));
}

/* 「なら」の文字 */
.brand-suffix {
    font-size: 1.2rem;
    color: #ffffff; /* ここは白に戻す */
    font-weight: normal;
    margin-left: 10px;
    vertical-align: middle;
    
    /* グラデーション解除の打ち消し（念のため） */
    background: none;
    -webkit-text-fill-color: #fff;
}

/* --- スマホ調整 --- */
@media (max-width: 768px) {
    .brand-sub {
        font-size: 0.9rem;
    }
    .brand-logo {
        font-size: 2.2rem; /* スマホでも十分大きく */
    }
    .brand-suffix {
        font-size: 1rem;
        display: block; /* スマホでは改行して下に置くのもアリ */
        margin-top: 5px;
        margin-left: 0;
        text-align: right; /* 右下に添える感じ */
    }
}
/* --- 解決コピー（ワインレッド版） --- */
.solution-title.red-version {
    font-family: 'Yuji Syuku', serif;
    font-size: 4rem;
    /* 深みのある高級な赤（ボルドー） */
    color: #a52a2a; 
    margin: 40px 0;
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    transform: rotate(-2deg);
}

/* --- LINEボタンエリア --- */
.cta-area {
    margin-top: 50px;
    text-align: center;
}

.line-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #06C755, #05b14c); /* LINEカラーのグラデーション */
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4rem;
    padding: 20px 40px;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(6, 199, 85, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 2px solid rgba(255,255,255,0.2);
}

.line-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(6, 199, 85, 0.5);
}

.line-icon {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    fill: #fff;
}

.cta-note {
    font-size: 0.9rem;
    margin-top: 15px;
    color: #fff;
    opacity: 0.8;
}

/* --- セクション末尾のロゴ --- */
.footer-brand-mark {
    margin-top: 80px;
    font-family: "Shippori Mincho", serif;
    font-size: 0.9rem;
    letter-spacing: 0.5em; /* 文字間をめちゃくちゃ広げる */
    color: #c5a059;
    opacity: 0.5;
    position: relative;
}

/* ロゴの左右に線を引く装飾 */
.footer-brand-mark::before,
.footer-brand-mark::after {
    content: "";
    display: inline-block;
    width: 50px;
    height: 1px;
    background: #c5a059;
    vertical-align: middle;
    margin: 0 20px;
}

/* --- スマホ調整 --- */
@media (max-width: 768px) {
    .solution-title.red-version {
        font-size: 2.5rem;
    }
    .line-btn {
        font-size: 1.1rem;
        padding: 15px 25px;
        width: 100%; /* スマホでは横幅いっぱい */
        box-sizing: border-box;
    }
}
/* --- 選ばれる理由セクション --- */
#reasons-section {
    padding: 100px 0;
    background-color: #fff;
    color: #333;
}

.section-title {
    text-align: center;
    font-family: "Shippori Mincho", serif;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: #1a2a3a;
}

/* PC市松模様の基本設定 */
.reasons-grid {
    display: flex;
    flex-direction: column;
    gap: 0; /* 市松模様をくっつける場合 */
}

.reason-item {
    display: flex;
    align-items: stretch;
    min-height: 400px;
}

/* 偶数番目のアイテムを反転（市松模様） */
.reason-item:nth-child(even) {
    flex-direction: row-reverse;
}

.reason-img {
    flex: 1;
    overflow: hidden;
}

.reason-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.reason-item:hover .reason-img img {
    transform: scale(1.05);
}

.reason-content {
    flex: 1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f8f9fa;
}

/* 偶数番目の背景色を変えてもおしゃれ */
.reason-item:nth-child(even) .reason-content {
    background-color: #f1f3f5;
}

.reason-num {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: #c5a059;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
    display: block;
}

.reason-content h3 {
    font-family: "Shippori Mincho", serif;
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #1a2a3a;
}

.reason-content p {
    line-height: 1.8;
    color: #555;
}

/* --- スマホ調整（カード形式） --- */
@media (max-width: 768px) {
    #reasons-section {
        padding: 60px 0;
    }

    .reason-item, 
    .reason-item:nth-child(even) {
        flex-direction: column; /* 縦並びに */
        min-height: auto;
        margin-bottom: 40px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* カードっぽく影をつける */
        border-radius: 10px;
        overflow: hidden;
    }

    .reason-img {
        height: 250px;
    }

    .reason-content {
        padding: 30px 20px;
        background-color: #fff !important;
    }

    .reason-num {
        font-size: 2rem;
    }

    .reason-content h3 {
        font-size: 1.4rem;
    }
}
/* --- 実績・信頼セクション --- */
#trust-section {
    background-color: #1a2a3a; 
    padding: 80px 0;
    text-align: center;
    color: #1a2a3a;
}

/* セクションタイトル */
#trust-section .section-title {
    color: #fff; /* 白文字 */
}

.section-subtitle {
    font-size: 1rem;
    color: #c5a059; /* ゴールド */
    margin-bottom: 40px;
    letter-spacing: 0.1em;
}

/* ① 実績数値 */
/* --- 実績数値エリア（アップデート版） --- */
.stats-area {
    margin-bottom: 80px;
    padding: 0 20px;
}

/* 3つ並べるためのグリッド */
.stats-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
}

/* ボックスの共通スタイル */
.stat-box {
    flex: 1; /* 均等な幅にする */
    min-width: 280px; /* 最小幅 */
    background-color: #fff;
    border: 2px solid #c5a059; /* ゴールドの枠線 */
    padding: 30px 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
}

.stat-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(197, 160, 89, 0.15);
}

.stat-label {
    font-size: 1rem;
    font-weight: bold;
    color: #1a2a3a; /* ネイビー */
    margin-bottom: 15px;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    display: inline-block;
}

/* 数字のデザイン */
.stat-number {
    font-family: "Shippori Mincho", serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #c5a059;
    line-height: 1;
    margin: 0;
}

.unit {
    font-size: 1.2rem;
    color: #333;
    margin-left: 5px;
    font-weight: bold;
    font-family: sans-serif;
}

/* --- テキストタイプ（家賃15万〜）のデザイン --- */
.stat-box.type-text .stat-text-content {
    text-align: center;
}

.stat-box.type-text .main-text {
    font-size: 1.4rem;
    font-weight: bold;
    color: #1a2a3a;
    margin-bottom: 5px;
}

.gold-num {
    font-family: "Shippori Mincho", serif;
    font-size: 2.5rem;
    color: #c5a059;
    margin: 0 5px;
}

.stat-box.type-text .sub-text {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .stats-grid {
        flex-direction: column; /* 縦積み */
        align-items: center;
        gap: 20px;
    }

    .stat-box {
        width: 100%;
        max-width: 350px;
        padding: 20px;
    }

    .stat-number {
        font-size: 3rem;
    }
}
/* ② メディア掲載 */
/* ② メディア掲載（ダミーアイコン版） */
.media-area {
    margin-bottom: 80px;
    background: #fff;
    padding: 40px 30px; /* パディングを少し調整 */
    border-radius: 8px;
    display: inline-block;
    width: 90%;
    max-width: 800px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 軽く影をつける */
}

.media-title {
    font-size: 1rem;
    color: #1a2a3a; /* ネイビー */
    margin-bottom: 30px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.media-logos-dummy {
    display: flex;
    justify-content: center;
    gap: 60px; /* 間隔を広めに */
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.media-dummy-item {
    text-align: center;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.media-dummy-item:hover {
    opacity: 1;
}

.dummy-icon {
    color: #c5a059; /* ゴールド */
    margin-bottom: 10px;
}

/* SVGのサイズ調整 */
.dummy-icon svg {
    width: 50px;
    height: 50px;
}

.dummy-label {
    font-family: 'Playfair Display', serif; /* 英字フォント */
    font-size: 0.9rem;
    color: #1a2a3a;
    letter-spacing: 0.05em;
}

.media-note {
    font-size: 0.85rem;
    color: #888;
    margin-top: 15px;
}

/* ③ SNS口コミ・④ お客様の声 */
.sub-title {
    font-family: "Shippori Mincho", serif;
    font-size: 1.8rem;
    margin-bottom: 40px;
    color:#fff;
    position: relative;
    display: inline-block;
}

.sub-title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: #c5a059;
    margin: 10px auto 0;
}

.sns-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

.sns-item {
    width: 300px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.sns-img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* 動画エリア */
.video-wrapper {
    max-width: 700px;
    margin: 0 auto 80px;
}

.video-thumbnail {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.video-thumbnail img {
    width: 100%;
    display: block;
    transition: transform 0.3s;
}

.video-thumbnail:hover img {
    transform: scale(1.05);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(197, 160, 89, 0.9); /* ゴールド */
    color: #fff;
    font-size: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 8px; /* 三角形の位置調整 */
}

/* ⑤ 会社概要テーブル */
.company-table-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border: 1px solid #eee;
}

.company-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.company-table th {
    width: 30%;
    padding: 15px;
    border-bottom: 1px solid #eee;
    color: #555;
    font-weight: normal;
}

.company-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
}

.company-table tr:last-child th,
.company-table tr:last-child td {
    border-bottom: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .media-logos-dummy {
        gap: 30px;
    }
    .dummy-icon svg {
        width: 40px;
        height: 40px;
    }
    .stat-number {
        font-size: 3rem;
    }
    .stat-box {
        padding: 20px;
        width: 80%;
    }
    .media-logos {
        gap: 20px;
    }
    .company-table-wrapper {
        padding: 20px;
    }
    .company-table th, .company-table td {
        display: block;
        width: 100%;
        padding: 8px 0;
    }
    .company-table th {
        border-bottom: none;
        font-size: 0.8rem;
        color: #c5a059;
    }
}
/* --- 口コミエリア（画像あり版） --- */
.reviews-area {
    max-width: 900px; /* 横幅を少し広げる */
    margin: 0 auto 80px;
    padding: 0 20px;
}

.review-set {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/* 2つ目のセットは左右反転（画像が右、テキストが左） */
.review-set.reverse {
    flex-direction: row-reverse;
}

/* 画像エリア */
.review-img {
    width: 40%;
    flex-shrink: 0;
}

.review-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* トークエリア */
.line-talk-box {
    width: 60%;
    text-align: left;
}

/* 吹き出しデザイン（先ほどと同じ） */
.line-bubble {
    background-color: #f2f4f7; /* 薄いグレーの背景 */
    padding: 20px;
    border-radius: 15px;
    position: relative;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.8;
}

/* 吹き出しのしっぽ（左向き） */
.review-set .line-bubble::after {
    content: "";
    position: absolute;
    top: 20px;
    left: -10px;
    border-top: 10px solid transparent;
    border-right: 12px solid #f2f4f7;
    border-bottom: 10px solid transparent;
}

/* 逆向き（右画像）の時のしっぽ（右向き） */
.review-set.reverse .line-bubble::after {
    left: auto;
    right: -10px;
    border-right: none;
    border-left: 12px solid #f2f4f7;
}

.line-meta-row {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    gap: 10px;
    margin-top: 5px;
    font-size: 0.8rem;
    color: #888;
}

.reviewer-info {
    text-align: right;
    font-size: 0.9rem;
    font-weight: bold;
    color: #1a2a3a;
    margin-top: 10px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .review-set, .review-set.reverse {
        flex-direction: column; /* 縦並び */
        gap: 20px;
        padding: 20px;
    }

    .review-img {
        width: 100%;
    }

    .line-talk-box {
        width: 100%;
    }

    /* スマホ時はしっぽを上に変更するか、消す */
    .review-set .line-bubble::after,
    .review-set.reverse .line-bubble::after {
        top: -10px;
        left: 20px;
        right: auto;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 12px solid #f2f4f7;
        border-top: none;
    }
}

/* --- ご利用の流れセクション --- */
#flow-section {
    padding: 100px 0;
    background-color: #fff;
    color: #1a2a3a;
}

.flow-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 50px;
}

/* カードのデザイン */
.flow-card {
    flex: 1;
    background: #fdfcf8; /* 薄いベージュ */
    border: 1px solid #eee;
    padding: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.flow-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(197, 160, 89, 0.15); /* ゴールドの影 */
}

/* ヘッダー部分 */
.flow-header {
    background: #1a2a3a; /* ネイビー */
    color: #fff;
    padding: 20px;
    text-align: center;
    position: relative;
}

.step-num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #c5a059; /* ゴールド */
    font-weight: bold;
    line-height: 1;
    margin-bottom: 5px;
}

.step-title {
    font-family: "Shippori Mincho", serif;
    font-size: 1.2rem;
    margin: 0;
}

.step-sub {
    font-size: 0.9rem;
    opacity: 0.8;
    font-weight: normal;
}

/* 画像エリア */
.flow-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.flow-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.flow-card:hover .flow-img img {
    transform: scale(1.1);
}

/* テキストエリア */
.flow-body {
    padding: 20px;
    font-size: 0.95rem;
    line-height: 1.8;
}

.flow-body strong {
    color: #a52a2a; /* 重要なところは赤（ボルドー） */
    background: linear-gradient(transparent 70%, #ffcccc 70%); /* マーカー風 */
}

/* 矢印（PCのみ） */
.flow-arrow {
    align-self: center;
    width: 30px;
    height: 30px;
    border-top: 4px solid #c5a059;
    border-right: 4px solid #c5a059;
    transform: rotate(45deg);
    margin: 0 10px;
}

/* 補足ノート */
.flow-note {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px dashed #ccc;
    font-size: 0.9rem;
}

.flow-note p {
    margin: 5px 0;
    color: #555;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .flow-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .flow-card {
        width: 100%;
        max-width: 400px;
        margin-bottom: 30px; /* カード同士の間隔 */
    }

    /* スマホでは矢印の代わりに下向き三角をつける（疑似要素で） */
    .flow-card::after {
        content: "▼";
        display: block;
        text-align: center;
        color: #c5a059;
        font-size: 20px;
        position: absolute;
        bottom: -35px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 最後のカードの下には矢印をつけない */
    .flow-card:last-child {
        margin-bottom: 0;
    }
    .flow-card:last-child::after {
        display: none;
    }
}

/* --- LINE CTAエリア（シンプル修正版） --- */
.cta-area {
    text-align: center;
    margin-top: 60px;
    padding: 0 20px;
}

.line-cta-btn-simple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #06C755; /* 王道のLINEグリーン（単色） */
    color: #fff;
    text-decoration: none;
    width: 100%;
    max-width: 500px; /* 頂いた画像のような横長感 */
    height: 70px; /* 太さを出す */
    border-radius: 50px; /* 丸み */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* ふわっとした影 */
    transition: transform 0.2s, box-shadow 0.2s;
}

.line-cta-btn-simple:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    opacity: 0.95;
}

.line-icon-simple {
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.line-text-simple {
    font-size: 1.5rem; /* 大きく */
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; /* ゴシック体で見やすく */
    letter-spacing: 0.05em;
}

.cta-sub-text {
    font-size: 0.9rem;
    color: #666; /* グレー */
    margin-top: 15px;
    font-weight: normal;
}

/* スマホ調整 */
@media (max-width: 768px) {
    .line-cta-btn-simple {
        height: 60px;
        max-width: 100%;
    }
    .line-text-simple {
        font-size: 1.2rem;
    }
}

/* --- FAQセクション（アコーディオン用CSS） --- */
#faq-section {
    padding: 100px 0;
    background-color: #fdfcf8;
    color: #1a2a3a;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: #fff;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* 角丸からはみ出ないように */
    transition: all 0.3s;
}

.faq-item.active {
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.15); /* 開いた時にリッチな影 */
    border-color: #c5a059; /* 開いた時に枠をゴールドに */
}

/* 質問エリア（クリックできる場所） */
.faq-question {
    display: flex;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer; /* クリックできる指マークにする */
    position: relative;
    transition: background-color 0.2s;
}

.faq-question:hover {
    background-color: #fafafa;
}

/* Qアイコン */
.faq-q-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #1a2a3a; /* ネイビー */
    color: #c5a059; /* ゴールド */
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    border-radius: 50%;
    margin-right: 20px;
    flex-shrink: 0;
}

.faq-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0;
    flex: 1; /* 横幅いっぱいに広げる */
    line-height: 1.4;
}

/* 開閉アイコン（＋マーク） */
.faq-toggle-icon {
    width: 20px;
    height: 20px;
    position: relative;
    margin-left: 15px;
    flex-shrink: 0;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
    content: "";
    position: absolute;
    background-color: #c5a059; /* ゴールド */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.faq-toggle-icon::before { width: 100%; height: 2px; } /* 横棒 */
.faq-toggle-icon::after { width: 2px; height: 100%; } /* 縦棒 */

/* 開いた時（activeクラスがついた時）のアイコン変化 */
.faq-item.active .faq-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg); /* 縦棒を回転させて横棒に重ねる（ーになる） */
    opacity: 0; /* あるいは消す */
}
.faq-item.active .faq-toggle-icon::before {
    transform: translate(-50%, -50%) rotate(180deg);
}

/* 回答エリア（初期状態は隠す） */
.faq-answer {
    max-height: 0; /* 高さを0にして隠す */
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* ヌルっと開くアニメーション */
    background-color: #fffaf0; /* 開いた時の背景色（薄いベージュ） */
}

.faq-answer-inner {
    padding: 30px;
    padding-top: 10px; /* 上の余白を少し詰める */
    display: flex;
    align-items: flex-start;
    border-top: 1px dashed #e0d0b0; /* 区切り線 */
}

/* Aアイコン */
.faq-a-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    color: #c5a059;
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
}

.faq-answer-inner p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #444;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .faq-question { padding: 20px; }
    .faq-q-icon, .faq-a-icon { width: 30px; height: 30px; font-size: 0.9rem; margin-right: 15px; }
    .faq-title { font-size: 1rem; }
    .faq-answer-inner { padding: 20px; }
}
/* --- アクセスセクション（渋谷1件版） --- */
#access-section {
    background-color: #1a2a3a; /* 深い紺色 */
    padding: 100px 0;
    color: #fff;
    text-align: center;
}

#access-section .section-title{
    color: #fff;
}

.access-single {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.access-card {
    width: 100%;
    max-width: 600px; /* 1件なので少し幅を広めに */
}

/* オフィス名 */
.office-name {
    font-size: 1.1rem;
    color: #c5a059; /* ゴールド */
    margin-bottom: 25px;
    line-height: 1.6;
}

.office-name span {
    font-size: 2rem;
    color: #fff;
    font-weight: bold;
}

/* 地図エリア */
.google-map {
    width: 100%;
    background-color: #fff;
    border: 1px solid #c5a059;
    margin-bottom: 25px;
    line-height: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* オフィス詳細テキスト */
.office-info {
    text-align: center; /* 1件なので中央寄せ */
    font-size: 1rem;
    line-height: 2;
}

.office-info p {
    margin-bottom: 5px;
}

.line-id {
    font-weight: bold;
    color: #c5a059;
    font-size: 1.1rem;
}

/* --- フッター --- */
#main-footer {
    background-color: #111;
    color: #fff;
    padding: 60px 0 30px;
    text-align: center;
}

.footer-logo {
    font-size: 1.8rem;
    font-family: "Shippori Mincho", serif;
    color: #c5a059;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.footer-nav {
    margin-bottom: 30px;
}

.footer-nav a {
    color: #ccc;
    text-decoration: none;
    margin: 0 15px;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #c5a059;
}

.copyright {
    font-size: 0.75rem;
    color: #666;
    border-top: 1px solid #333;
    padding-top: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .office-name span {
        font-size: 1.6rem;
    }
    .footer-nav {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
}


/* --- ベース設定 --- */
html, body {
    overflow-x: hidden; /* これで右の白枠が消えます */
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif;
    color: #333;
}
* {
    box-sizing: border-box;
}

.pc-only { display: block; }
@media (max-width: 768px) { .pc-only { display: none; } }

/* --- ヘッダー --- */
#main-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    background-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 10px 0;
}
.header-container {
    max-width: 1000px; margin: 0 auto; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.header-logo {
    font-family: 'Noto Serif JP', serif; font-weight: 900;
    color: #c5a059; letter-spacing: 0.1em; font-size: 1.4rem; margin: 0;
}
.logo-jp { font-size: 0.9rem; letter-spacing: 0.1em; color: #1a2a3a; margin-left: 5px; }

/* ナビ・ボタン・ハンバーガー（省略なし） */
.header-nav ul { display: flex; list-style: none; gap: 25px; margin: 0; padding: 0; }
.header-nav a { text-decoration: none; font-size: 0.9rem; font-weight: bold; color: #1a2a3a; transition: color 0.3s; }
.header-btn { background: #c5a059; color: #fff; text-decoration: none; padding: 8px 25px; border-radius: 50px; font-size: 0.85rem; font-weight: bold; }
.hamburger-btn { display: none; cursor: pointer; width: 30px; height: 24px; position: relative; z-index: 1100; }
@media (max-width: 768px) { .hamburger-btn { display: block; } }
.hamburger-btn span { display: block; width: 100%; height: 2px; background: #1a2a3a; position: absolute; left: 0; transition: all 0.3s; }
.hamburger-btn span:nth-child(1) { top: 0; }
.hamburger-btn span:nth-child(2) { top: 11px; }
.hamburger-btn span:nth-child(3) { bottom: 0; }
.hamburger-btn.active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
.drawer-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(255,255,255,0.98); z-index: 1050; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.drawer-menu.active { opacity: 1; pointer-events: auto; }
.drawer-nav ul { list-style: none; padding: 0; text-align: center; }
.drawer-nav li { margin-bottom: 30px; }
.drawer-nav a { text-decoration: none; font-size: 1.2rem; color: #1a2a3a; font-weight: bold; font-family: "Shippori Mincho", serif; }

/* --- ファーストビュー (FV) --- */
#hero-fv {
    height: 100vh;
    width: 100%;
    margin-top: 0; /* マージンリセット */
    padding-top: 70px; /* ヘッダー分確保 */
    background-image: url('img/hero_luxury_bright.png'); 
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}

/* ★修正ポイント：文字を見やすくするダークフィルター★ */
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* 全体を少し暗くする（50%の黒） */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-content {
    position: relative; z-index: 10; text-align: center; 
    width: 100%; max-width: 900px; padding: 0 20px;
    padding-bottom: 50px;
}

/* ★修正ポイント：ターゲットバッジの表示位置★ */
.target-badge-wrapper {
    margin-bottom: 30px;
}
.target-badge {
    background: #c5a059; color: #fff; font-weight: 800; font-size: 2rem;
    padding: 8px 25px; display: inline-block; letter-spacing: 0.1em;
    border-radius: 2px;
}

.hero-main {
    font-family: "Shippori Mincho", serif;
    font-size: 5rem; /* PCサイズ */
    color: #fff; line-height: 1.2; margin-bottom: 15px;
    font-weight: 800;
}

.hero-sub-catch {
    font-size: 1.4rem; font-weight: bold; color: #fff; margin-bottom: 40px;
}
.gold-num { color: #c5a059; font-size: 2rem; margin: 0 5px; font-family: "Shippori Mincho", serif; }

/* カード（グラスモーフィズム） */
.hero-cards {
    display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; flex-wrap: wrap;
}
.stat-card {
    background: rgba(0, 0, 0, 0.6); /* 黒ベースの半透明 */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(197, 160, 89, 0.6);
    padding: 20px; text-align: left; 
    min-width: 260px; max-width: 100%;
}
.card-label {
    color: #c5a059; font-size: 0.75rem; font-weight: bold; letter-spacing: 0.2em; display: block; margin-bottom: 8px;
}
.card-text {
    color: #fff; font-size: 1rem; font-weight: bold; line-height: 1.5; margin: 0;
}

/* スクロール誘導 */
.hero-scroll {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
}
.scroll-label {
    font-size: 0.7rem; letter-spacing: 0.3em; color: #fff; display: block; margin-bottom: 10px; opacity: 0.8;
}
.scroll-line {
    width: 1px; height: 60px; background: rgba(255,255,255,0.2); margin: 0 auto; position: relative; overflow: hidden;
}
.scroll-line::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #c5a059;
    animation: scroll-anim 2s infinite;
}
@keyframes scroll-anim {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- スマホ対応（文字サイズ調整・はみ出し防止） --- */
@media (max-width: 768px) {
    .header-container { padding: 0 15px; }
    
    /* 文字サイズを画面幅に合わせて縮小 */
    .hero-main { font-size: 2.8rem; margin-bottom: 20px; }
    .hero-sub-catch { font-size: 1rem; margin-bottom: 30px; }
    .target-badge { font-size: 1.4rem; padding: 6px 20px; }

    /* カードを縦並びに */
    .hero-cards { flex-direction: column; gap: 15px; width: 100%; }
    .stat-card { width: 100%; min-width: auto; }
}

/* --- ベース設定・背景 --- */
.premium-worries {
  position: relative;
  /* 画像の代わりに高級感のあるダーク系のグラデーションを敷く */
  background-image: url('img/bg-lounge.png'); /* 生成した画像をここに配置してください */
  background-size: cover;
  background-position: center;
  padding: 80px 20px 120px;
  font-family: 'Noto Serif JP', serif;
  z-index: 1;
}

.premium-worries::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.worries-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- タイトル --- */
.worries-title {
  text-align: center;
  font-size: 42px; /* PCでのサイズ */
  font-weight: 900;
  letter-spacing: 0.1em;
  margin-bottom: 80px; /* 余白を広めに */
  background: linear-gradient(to bottom, #fff7d6 0%, #d4af37 50%, #aa7700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.8));
}

/* --- グリッドレイアウト --- */
.worries-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px; /* PCでの間隔 */
}

/* --- 個別のアイテム --- */
.worry-item {
  position: relative; /* これが配置の基準になります */
  width: 240px; /* 円のサイズに合わせて調整 */
  height: 240px;
  margin: 0 20px; /* 横の余白 */
}

/* ジグザグ配置（PCのみ） */
@media screen and (min-width: 769px) {
  .transform-down {
    transform: translateY(80px);
  }
}

/* --- CASEバッジ --- */
.case-badge {
  position: absolute;
  top: -10px;
  left: 0;
  background: linear-gradient(135deg, #c9a05b 0%, #a67c33 100%);
  color: #fff;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 14px;
  padding: 6px 16px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 3;
  border-radius: 2px;
}

/* --- 白い円形ベース --- */
.worry-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #fff;
  box-shadow: 
    0 0 0 3px #c9a05b,
    5px 10px 20px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}

.worry-circle p {
  font-size: 20px; /* PCでの文字サイズ */
  font-weight: 900;
  color: #333;
  line-height: 1.4;
  margin: 0;
  padding: 0 10px;
}

/* --- 人物画像（重要！）--- */
.person-img {
  position: absolute;
  bottom: -5px; /* 位置を微調整 */
  right: -25px;
  width: 170px;  
  height: auto;  
  z-index: 4;
  /* ドロップシャドウはいったん外すか弱めます（マスクと干渉するため） */
  filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.3));
  
  /* ▼ ここがポイント！下部を透明グラデーションで消す ▼ */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  
  pointer-events: none; 
}

/* --- レスポンシブ（スマホ表示） --- */
@media screen and (max-width: 768px) {
  .premium-worries {
    padding: 60px 15px 100px;
  }
  
  .worries-title {
    font-size: 26px; /* スマホでのタイトルサイズ */
    margin-bottom: 50px;
  }
  
  .worries-grid {
    gap: 60px; /* スマホでのアイテム間の余白 */
    flex-direction: column; /* 縦並び */
    align-items: center;
  }
  
  .worry-item {
    width: 220px; /* スマホでの円のサイズ */
    height: 220px;
    margin: 0; /* 余白はgapで管理 */
  }

  .worry-circle p {
    font-size: 18px; /* スマホでの文字サイズ */
  }
  
  .person-img {
    width: 150px; /* スマホでの画像の幅 */
    bottom: 0px;
    right: -15px;
  }
}

/* --- 流れる口コミセクション --- */
#reviews-marquee-section {
  padding: 60px 0;
  background-color: #f8f9fa; /* 背景をほんのりグレーにして画像を際立たせる */
  overflow: hidden; /* 画面外にはみ出た部分を隠す（超重要） */
}

.marquee-container {
  width: 100%;
  display: flex;
}

.marquee-content {
  display: flex;
  width: max-content; /* 中身の画像サイズに合わせて幅を広げる */
  /* アニメーション設定：20秒かけて一定の速度（linear）で無限ループ */
  animation: marquee-scroll 20s linear infinite;
}

/* マウスオーバーで流れを一時停止させたい場合はこれを追加 */
.marquee-content:hover {
  animation-play-state: paused;
}

.marquee-content img {
  width: 300px; /* Xのスクショの想定幅 */
  height: auto;
  object-fit: contain;
  margin: 0 15px; /* 画像と画像の間の隙間 */
  border-radius: 12px; /* 少し角丸にすると今っぽくなります */
  box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* 軽い影で浮かせる */
}

/* --- アニメーションの動き --- */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* ちょうど半分（1セット分）左に移動したら、0%にワープしてループする */
    transform: translateX(-50%);
  }
}

/* --- レスポンシブ（スマホ表示） --- */
@media screen and (max-width: 768px) {
  #reviews-marquee-section {
    padding: 40px 0;
  }
  
  .marquee-content img {
    width: 240px; /* スマホでは少し画像を小さくする */
    margin: 0 10px;
  }
}

/* =========================================
   メディア掲載実績エリアの修正CSS
========================================= */

/* --- エリア全体 --- */
.media-area {
  text-align: center;
  margin-bottom: 60px;
  padding: 40px 20px;
  background-color: #fcfcfc; /* 少しだけ背景色をつけてエリアを強調 */
  border-radius: 16px; /* 角を丸くして柔らかい印象に */
}

.media-title {
  font-size: 24px;
  font-weight: 900; /* フォントを太くして信頼感をアップ */
  margin-bottom: 40px;
  color: #333;
  display: inline-block;
  position: relative;
}

/* タイトルの下にゴールドの線を引いて高級感を出す装飾 */
.media-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #c9a05b, #a67c33);
  border-radius: 2px;
}

/* --- 実績アイテムのコンテナ（Flexboxで横並び） --- */
.media-logos-dummy {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上端で揃える */
  gap: 40px; /* アイテム間の横の余白 */
  margin-bottom: 30px;
}

/* --- 各アイテムの共通設定 --- */
.media-image-item,
.media-youtube-item {
  width: 100%;
  /* PCでの最大幅を統一してバランスを整える（ここがポイント！） */
  max-width: 380px; 
  text-align: center;
}

/* --- Yahoo!ニュース画像 --- */
.media-screenshot {
  width: 100%;
  height: auto;
  border-radius: 12px;
  /* 影をつけてリッチに見せる */
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  border: 1px solid #eee; /* 薄い枠線で引き締める */
  transition: transform 0.3s ease; /* ホバー時の動き用 */
}

/* ホバー時に少し浮き上がる演出（オプション） */
.media-screenshot:hover {
  transform: translateY(-5px);
}

/* --- YouTube動画埋め込み --- */
.youtube-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 の比率を維持 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- ラベル（Yahoo!ニュース、TV放送実績） --- */
.dummy-label {
  margin-top: 15px;
  font-weight: bold;
  font-size: 16px;
  color: #333;
  letter-spacing: 0.05em;
}

/* --- 注釈テキスト --- */
.media-note {
  font-size: 14px;
  color: #666;
  margin-top: 20px;
}

/* =========================================
   レスポンシブ（スマホ表示）
========================================= */
@media screen and (max-width: 768px) {
  .media-area {
    padding: 30px 15px;
    margin-bottom: 40px;
  }

  .media-title {
    font-size: 20px;
    margin-bottom: 35px;
  }

  .media-logos-dummy {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center; /* 中央揃え */
    gap: 40px; /* 縦の余白 */
  }
  
  /* スマホでは少し幅を広げて見やすくする */
  .media-image-item,
  .media-youtube-item {
    max-width: 100%;
    width: 90%; 
  }
}
/* =========================================
   メディア掲載実績エリア（画像＋YouTube並列）
========================================= */

.media-area {
  text-align: center;
  margin-bottom: 60px;
  padding: 50px 20px;
  background-color: #fcfcfc; /* 薄いグレー背景でエリアを区切る */
  border-radius: 16px;
}

.media-title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 50px;
  color: #333;
  display: inline-block;
  position: relative;
}

/* タイトル下のゴールドライン装飾 */
.media-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #c9a05b, #a67c33);
  border-radius: 2px;
}

/* --- PC: 横並びレイアウト --- */
.media-logos-flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px; /* 2つのアイテムの隙間 */
  margin-bottom: 20px;
}

/* 各アイテムの幅を統一して綺麗に見せる */
.media-item {
  width: 100%;
  max-width: 420px; 
}

/* --- Yahoo!ニュース画像 --- */
.media-screenshot {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  border: 1px solid #eee;
}

/* --- YouTube動画 --- */
.youtube-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9比率を絶対キープする魔法の数値 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- テキスト装飾 --- */
.dummy-label {
  margin-top: 16px;
  font-weight: 700;
  font-size: 16px;
  color: #333;
}

.media-note {
  font-size: 14px;
  color: #777;
  margin-top: 30px;
}

/* =========================================
   スマホ: 縦並びレイアウト
========================================= */
@media screen and (max-width: 768px) {
  .media-area {
    padding: 40px 15px;
  }
  
  .media-title {
    font-size: 24px;
    margin-bottom: 40px;
  }

  .media-logos-flex {
    flex-direction: column; /* 縦並びにチェンジ */
    align-items: center;
    gap: 50px; /* 縦の隙間を少し広めにとる */
  }
  
  .media-item {
    max-width: 100%;
    width: 95%; /* スマホ画面いっぱいに広げる */
  }
}
/* --- ファーストビュー (FV) 修正案 --- */

/* 基準となるフォントサイズ */
.hero-main {
    font-family: "Shippori Mincho", serif;
    font-size: 3rem; /* PC基準サイズ */
    color: #fff;
    line-height: 1.3;
    margin-bottom: 20px;
    font-weight: 800;
    text-shadow: 0px 2px 10px rgba(0,0,0,0.5);
}

/* ★追加：強調部分をさらに大きく★ */
.hero-main-big {
    font-size: 1.5em; /* 親要素の1.5倍（つまり4.5rem）に */
    display: inline-block; /* 安定させるため */
    margin-top: 10px; /* 上の行との間隔を少し空ける */
}

/* サブテキストの調整（少し整えました） */
.hero-sub-catch {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    /* ★重要★ 下に余白を増やしてスクロールと重ならないようにする */
    margin-bottom: 120px; 
    display: flex;
    align-items: baseline; /* 数字の底辺に合わせる */
    justify-content: center;
}

.sub-catch-text {
    display: inline-block;
}

.gold-num {
    color: #c5a059;
    font-size: 3rem; /* 数字を強調 */
    margin: 0 10px;
    font-family: "Shippori Mincho", serif;
    line-height: 1;
    position: relative;
    top: 5px; /* 微調整 */
}

/* --- スマホ対応（SPメインの調整） --- */
@media (max-width: 768px) {
    /* 文字サイズの大幅な見直し */
    .hero-main {
        font-size: 1.8rem; /* 基準サイズ */
        line-height: 1.4;
        margin-bottom: 25px;
    }
    
    /* ★追加★ スマホでの強調サイズ */
    .hero-main-big {
        font-size: 1.3em; /* 親の1.4倍（約2.5rem） */
        margin-top: 5px;
    }

    .hero-sub-catch {
        font-size: 1rem;
        margin-bottom: 100px; /* スマホでも余白を確保 */
        flex-wrap: wrap; /* 画面が狭すぎたら折り返す */
    }
    
    .gold-num {
        font-size: 2.2rem;
        margin: 0 5px;
    }
}
/* --- ファーストビュー (FV) 375px以下対応案 --- */

@media (max-width: 768px) {
    #hero-fv {
        /* アドレスバーを除いた「今見えている高さ」に合わせる */
        height: 100dvh; 
        padding-top: 50px;
        padding-bottom: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center; /* 中央に寄せて上下の余白を均等に */
    }

    .hero-content {
        /* コンテンツがバラバラにならないよう、ひとまとめにして少し上に配置 */
        transform: translateY(-20px); 
    }

    /* ターゲットバッジ：少し小さくして、メインコピーを主役にする */
    .target-badge {
        font-size: 1rem;
        padding: 4px 12px;
        margin-bottom: 15px;
    }

    /* メインコピー：375pxで改行が崩れない絶妙なサイズ */
    .hero-main {
        font-size: 1.6rem; 
        line-height: 1.3;
        margin-bottom: 15px;
    }
    
    .hero-main-big {
        font-size: 1.35em; /* 1.4emから微減。1行に収まりやすくする */
        margin-top: 0;
    }

    /* 98%の部分：ここが一番「アレ」になりやすいので整理 */
    .hero-sub-catch {
        font-size: 0.9rem;
        margin-bottom: 0; /* 下のSCROLLとの距離は親のjustify-contentで管理 */
        flex-direction: column; /* 数字とテキストを縦に並べて「縦の余白」を稼ぐ */
        gap: 5px;
    }

    .gold-num {
        font-size: 2.8rem; /* 数字はドカンと大きく。でも横幅は取らない */
        margin: 0;
        line-height: 1;
    }
}

/* さらに狭い画面（iPhone SEなど）への保険 */
@media (max-width: 375px) {
    .hero-main {
        font-size: 1.5rem;
    }
    .hero-main-big {
        font-size: 1.22em;
    }
    .gold-num {
        font-size: 2rem;
    }
}
@media (max-width: 768px) {
    .hero-content {
        flex-grow: 1; /* 中央部分を広げる */
        display: flex;
        flex-direction: column;
        justify-content: center; /* メイン文字を中央に寄せる */
        transform: none; /* 変なズレを防ぐためにリセット */
    }

    /* 1. ターゲットバッジ */
    .target-badge {
        font-size: 0.9rem;
        padding: 5px 15px;
        margin-bottom: 20px;
        align-self: center; /* 中央配置 */
    }
    #hero-fv {
        height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* ★修正ポイント：上の余白を60pxから40pxに減らす */
        padding: 40px 20px 30px;
        box-sizing: border-box;
    }

    /* --- 実績エリアの全面リニューアル --- */
    .hero-sub-catch {
        display: flex;
        flex-direction: column; /* 縦積みに変更 */
        align-items: center;    /* 中央揃え */
        gap: 5px;               /* 1行目と2行目の間隔を少し狭く */
        margin-top: 20px;
        width: 100%;
    }

    /* 1行目：審査通過率 98% */
    .sub-catch-row-main {
        display: flex;
        align-items: baseline; /* 数字の底辺にテキストを揃える */
        gap: 8px;
        line-height: 1;
    }

    .sub-catch-label {
        font-size: 1rem;
        font-weight: bold;
        color: #fff;
    }

    /* 新しい大きな数字用クラス */
    .gold-num-big {
        color: #c5a059;
        font-family: "Shippori Mincho", serif;
        font-size: 3.5rem; /* インパクト重視のサイズ */
        font-weight: 800;
        letter-spacing: -0.03em; /* 数字と%をキュッと詰める */
    }

    /* 2行目：都内〜1000名以上 */
    .sub-catch-row-sub {
        font-size: 0.85rem; /* 375pxで1行に入る絶妙なサイズ */
        color: #fff;
        opacity: 0.95;
        white-space: nowrap; /* 絶対に折り返さない */
    }

    /* 「1000名」を強調するハイライト */
    .gold-highlight {
        color: #c5a059;
        font-weight: bold;
        font-size: 1.1rem; /* 周りより少し大きく */
        margin: 0 2px;
        font-family: "Shippori Mincho", serif; /* 数字に合わせて明朝体に */
    }

    /* SCROLL部分はそのまま維持 */
    .hero-scroll {
        margin-top: auto;
        padding-top: 20px;
    }
    
    /* ターゲットバッジやメインコピーのCSSは変更なしでOKです */
}

/* --- レスポンシブ（スマホ表示）の修正 --- */
@media screen and (max-width: 768px) {
  .premium-worries {
    padding: 40px 15px 50px;
  }
  
  /* タイトル：無理な1行をやめて、自然で読みやすいサイズに戻す */
  .worries-title {
    font-size: 24px; 
    white-space: normal; /* 1行制限を解除 */
    line-height: 1.4;
    margin-bottom: 30px;
  }
  
  /* グリッド：ここでCASE1と2を左右に分けます！ */
  .worries-grid {
    display: flex;
    flex-direction: row; /* ★縦並びから横並びに変更 */
    flex-wrap: wrap;     /* ★画面端で折り返して2行目(CASE3,4)を作る */
    justify-content: space-between; /* 左右にいい感じに散らす */
    gap: 35px 0; /* 縦の隙間を35px空ける（横の隙間は自動） */
  }
  
  /* アイテム（円）：スマホの画面幅に合わせて2列用に縮小 */
  .worry-item {
    width: 48%; /* 画面の約半分を占めるサイズに */
    height: auto;
    aspect-ratio: 1 / 1; /* ★高さを自動計算して綺麗な「正円」を保つ魔法 */
    margin: 0;
  }

  /* CASEバッジ：円が小さくなるのでバッジも邪魔にならないサイズへ */
  .case-badge {
    font-size: 11px;
    padding: 4px 10px;
    top: -8px;
    left: -5px;
  }

  /* 円の中の文字：2列だとスペースが狭いので、改行しても収まるサイズに */
  .worry-circle p {
    font-size: 13px; 
    line-height: 1.4;
    padding: 0 5px;
  }
  
  /* 人物画像：円に合わせて縮小し、位置を微調整 */
  .person-img {
    width: 90px; 
    bottom: -5px;
    right: -10px;
  }
}

.section-title {
    text-align: center;
    font-family: "Shippori Mincho", serif;
    /* 2.5rem から 2.2rem に気持ち小さく変更 */
    font-size: 2.2rem; 
    margin-bottom: 60px;
    color: #1a2a3a;
}

/* =========================================
   入居者の声（1件単独レイアウト）
========================================= */
.video-review-single-area {
    margin: 80px 0;
    padding: 0 20px;
    text-align: center;
}

.video-sub-desc {
    color: #c5a059;
    font-size: 0.95rem;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
}

/* 1件なので最大幅を広めにとって、画面中央にドンと配置 */
.video-single-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #111; /* 動画の下に馴染む黒背景 */
    border: 1px solid rgba(197, 160, 89, 0.5); /* ゴールドの薄い枠 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5); /* 深い影で浮かせる */
}

/* YouTubeの比率を保つ魔法（すでにメディア実績で使っていれば不要ですが念のため） */
.youtube-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
}
.youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 動画下のテキストエリア */
.video-caption {
    padding: 30px;
    text-align: center;
    background: linear-gradient(to bottom, #1a2a3a, #111);
}

.client-tag {
    display: inline-block;
    background: #c5a059;
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 6px 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.client-message {
    color: #fff;
    font-size: 1.4rem; /* 1件なので文字は大きく堂々と！ */
    font-family: "Shippori Mincho", serif; /* 明朝体で信頼感を出す */
    font-weight: bold;
    line-height: 1.6;
    margin: 0;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .video-review-single-area {
        margin: 60px 0;
        padding: 0 15px;
    }
    
    .video-sub-desc {
        font-size: 0.85rem;
        margin-bottom: 30px;
    }

    .video-caption {
        padding: 25px 15px;
    }

    .client-tag {
        font-size: 0.8rem;
        padding: 4px 15px;
        margin-bottom: 15px;
    }

    .client-message {
        font-size: 1.1rem;
        text-align: left; /* スマホ画面では左寄せの方が読みやすい */
    }
}

/* --- 通過事例セクション --- */
.success-cases-area {
    margin-top: 80px;
}

.cases-intro {
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 40px;
    opacity: 0.8;
}

.cases-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.case-detail-card {
    background: #fff;
    border-left: 5px solid #c5a059; /* ゴールドのアクセントライン */
    padding: 30px;
    text-align: left;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.case-status-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #1a2a3a;
    color: #c5a059;
    padding: 5px 15px;
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    font-size: 0.8rem;
}

.job-tag {
    display: inline-block;
    background: #fdfcf8;
    border: 1px solid #c5a059;
    color: #c5a059;
    font-weight: bold;
    padding: 4px 12px;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.case-income {
    color: #1a2a3a;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.case-content {
    display: flex;
    gap: 30px;
}

.issue-box, .solution-box {
    flex: 1;
}

.case-content .label {
    display: block;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 8px;
    padding: 2px 8px;
    width: fit-content;
}

.issue-box .label { background: #eee; color: #666; }
.solution-box .label { background: #c5a059; color: #fff; }

.issue-box p, .solution-box p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .case-content {
        flex-direction: column;
        gap: 20px;
    }
    .case-detail-card {
        padding: 25px 20px;
    }
    .case-income {
        font-size: 1rem;
    }
}
/* =========================================
   ここから一番下に追記：お悩みセクション（上書き用）
========================================= */
.premium-worries {
  position: relative;
  background-image: url('img/bg-lounge.png');
  background-size: cover;
  background-position: center;
  padding: 60px 20px 80px;
  font-family: 'Noto Serif JP', serif;
  z-index: 1;
}

.premium-worries::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
}

.worries-container {
  max-width: 1000px;
  margin: 0 auto;
}

.worries-title {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 60px;
  background: linear-gradient(to bottom, #fff7d6 0%, #d4af37 50%, #aa7700 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0px 2px 5px rgba(0,0,0,0.5));
}

.worries-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.worry-item {
  position: relative;
  width: 200px;
  height: 160px;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .transform-down {
    transform: translateY(50px); 
  }
}

.case-badge {
  position: absolute;
  top: -10px;
  left: 10px;
  background: #c9a05b;
  color: #fff;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 12px;
  padding: 3px 15px;
  z-index: 3;
  border-radius: 2px;
}

.worry-circle {
  width: 100%;
  height: 100%;
  box-sizing: border-box; 
  border-radius: 8px; 
  background-color: #fffcf7; 
  border: 1px solid #c5a059; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  padding: 20px 10px;
}

.worry-circle p {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin: 0;
  width: 100%;
}

.person-img {
  position: absolute;
  bottom: -8px;
  right: -15px;
  width: 100px;  
  height: auto;  
  z-index: 4;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  pointer-events: none; 
}

@media screen and (max-width: 768px) {
  .premium-worries {
    padding: 40px 15px 60px;
  }
  
  .worries-title {
    font-size: 24px;
    margin-bottom: 40px;
  }
  
  .worries-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 4%; 
  }
  
  .worry-item {
    width: 48%; 
    height: auto;
    min-height: 130px; 
    margin: 0 0 15px 0;
  }

  .worry-circle {
    height: 100%;
    align-items: flex-start; 
    justify-content: flex-start; 
    padding: 25px 10px 50px 10px; 
  }

  .worry-circle p {
    font-size: 13px; 
    line-height: 1.5;
    text-align: left; 
  }

  .case-badge {
    font-size: 11px;
    top: -10px;
    left: 10px;
  }
  
  .person-img {
    width: 65px; 
    bottom: 0;
    right: -5px;
  }
}
/* =========================================
   お悩みセクション：スマホ縦伸び強制ストップ（完成版）
========================================= */
@media screen and (max-width: 768px) {
  .worries-grid {
    align-items: stretch !important; /* 左右の高さを綺麗に揃える */
  }
  
  .worry-item {
    width: 48% !important;
    height: auto !important; 
    aspect-ratio: unset !important; /* autoではなくunsetで正方形の呪いを完全破壊 */
    min-height: 0 !important; 
    margin: 0 0 25px 0 !important; /* 人物がはみ出す分、下の隙間を少し広めに */
  }

  .worry-circle {
    height: 100% !important;
    /* ★ここがポイント！ 下の余白を45px→20pxに削って枠を潰す！ */
    padding: 15px 10px 20px 10px !important; 
    box-sizing: border-box !important;
  }

  .worry-circle p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .person-img {
    width: 65px !important; 
    /* ★枠を潰した分、人物を枠の「外」に少し飛び出させる */
    bottom: -15px !important; 
    right: -5px !important;
  }
  
  .case-badge {
    font-size: 11px !important;
    top: -10px !important;
    left: 10px !important;
  }
}

.nowrap {
  display: inline-block;
}
#sns-section {
  padding: 60px 20px;
  text-align: center;
}

/* クラス名の前に #sns-section をつけて優先度を上げる */
#sns-section .section-title {
  font-size: 1.8rem;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
  font-weight: bold;
}

.sns-container {
  max-width: 500px;
  margin: 0 auto;
}

.sns-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
  display: block; /* 画像の下の謎の隙間を消す */
}

/* --- セクション全体 --- */
#worries-section {
  position: relative;
  background-image: url('../img/bg-lounge.png'); 
  background-size: cover;
  background-position: center;
  padding: 60px 15px; /* SP向けに余白を調整 */
  text-align: center;
  font-family: "Noto Serif JP", serif;
  overflow: hidden;
}

/* --- 背景を暗くするフィルター --- */
.worries-bg-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

.worries-container {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

/* --- SPのみ改行させるクラス --- */
.sp-only {
  display: none;
}
@media (max-width: 768px) {
  .sp-only {
    display: block;
  }
}

/* --- ゴールドの見出し --- */
.section-title-gold {
  font-size: clamp(1.5rem, 5vw, 2.2rem); /* SPで少し小さく、PCで大きく */
  color: #d1a751;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  line-height: 1.4; /* SPでの改行時に詰まりすぎないように */
}

/* --- 2×2のグリッド配置 --- */
.worries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 常に2列 */
  gap: 30px 15px; /* SPでも綺麗に見えるように調整 */
  padding: 0 10px;
  justify-items: center;
  justify-content: center;
  margin: 0 auto;
  max-width: 500px; /* 全体の幅を制限して間延びを防ぐ */
}

/* --- 円の枠組み --- */
.worry-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* 【重要】常に正円（まん丸）を保つ */
  max-width: 160px; /* PC/SP共通で少しコンパクトに（はみ出し防止） */
  margin: 0 auto;
}

/* --- 円のデザイン --- */
.worry-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* ちょうど30%の位置でくっきり色を分ける */
  background: linear-gradient(to bottom, #d1a751 0%, #d1a751 30%, #ffffff 30%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  overflow: hidden; /* 円からはみ出る要素をカット（これで丸さが崩れない） */
}

/* --- テキスト装飾（ネガティブマージンをやめて高さで分割） --- */
.case-label {
  height: 30%; /* グラデーションのゴールド部分とピッタリ同じ高さにする */
  width: 100%;
  display: flex;
  align-items: center; /* 縦の中央揃え */
  justify-content: center; /* 横の中央揃え */
  color: #ffffff;
  font-size: clamp(0.8rem, 3vw, 1rem);
  font-weight: bold;
  letter-spacing: 0.05em;
  font-family: sans-serif;
  margin: 0; /* マージンはゼロに！ */
}

.case-text {
  height: 70%; /* 残りの白背景部分の高さ */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: clamp(0.75rem, 2.5vw, 0.95rem); /* 途中で改行されないように調整 */
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin: 0;
  padding: 0 5px;
  /* 不要な改行を防ぐ設定 */
  word-break: normal;
  overflow-wrap: break-word;
}

/* --- 人物イラスト --- */
.worry-person {
  position: absolute;
  bottom: -10%; /* 円の外に少し出す */
  right: -10%;  /* 右下に出す */
  width: 50%;   /* 大きめにして存在感を出す */
  max-width: 75px;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

/* === ここからスマホ (SP) 用の設定 === */
@media (max-width: 768px) {
  /* --- 見出しの調整 --- */
  .section-title-gold {
    font-size: 1.6rem;
    margin-bottom: 30px;
  }

  /* --- グリッドと円の調整 --- */
  .worries-grid {
    gap: 25px 10px; /* 縦の隙間を少し詰める */
  }
  
  .worry-item {
    max-width: 140px; /* iPhone15等でも2列がパツパツにならないように調整 */
  }

  /* --- テキストの微調整 --- */
  .case-label {
    font-size: 0.8rem; 
  }

  .case-text {
    font-size: 0.75rem; /* スマホでは確実に指定した<br>でのみ改行させる */
    line-height: 1.3;
  }

  /* --- 人物イラストをさらに調整 --- */
  .worry-person {
    width: 55%;
    bottom: -12%;
    right: -12%;
  }
}

/* --- タイトルの変な改行防止 --- */
.section-title-gold {
  /* 画面幅に合わせて文字が少し縮むように変更 */
  font-size: clamp(1.2rem, 5vw, 1.6rem); 
  text-align: center;
  margin-bottom: 30px;
  word-break: keep-all; /* 単語の途中での改行を強制ストップ */
  padding: 0 10px;
}

/* --- 2×2のグリッド配置 --- */
.worries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 10px; /* 横の隙間を少し狭めて、円の大きさを確保 */
  padding: 0 10px;
  align-items: start; /* 【重要】要素が縦に伸びるのを防ぐ */
  justify-items: center;
  max-width: 450px;
  margin: 0 auto;
}

/* --- 円の枠組み（絶対に崩れない正方形の土台） --- */
.worry-item {
  position: relative;
  width: 100%;
  max-width: 150px; /* スマホでも綺麗に収まるサイズ感 */
  aspect-ratio: 1 / 1; /* 正方形をキープ */
  margin: 0 auto;
}

/* --- 円のデザイン（土台にピッタリ張り付かせる） --- */
.worry-circle {
  position: absolute; /* 【重要】これで文字量に影響されなくなります */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #d1a751 0%, #d1a751 30%, #ffffff 30%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* --- テキスト装飾 --- */
.case-label {
  height: 30%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: bold;
  margin: 0;
}

.case-text {
  height: 70%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 0.75rem; /* SPで綺麗に収まるサイズ */
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin: 0;
  padding: 0 8px;
}

/* --- 人物イラスト --- */
.worry-person {
  position: absolute;
  bottom: -15%;
  right: -10%;
  width: 55%;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}
/* --- 全体のグリッド --- */
.worries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 15px;
  /* 【超重要】これが最強の魔法です。要素が勝手に伸び縮みするのを完全に防ぎます */
  place-items: center; 
  max-width: 500px;
  margin: 0 auto;
  padding: 0 10px;
}

/* --- 円のラッパー --- */
.worry-item {
  position: relative;
  width: 100%;
  max-width: 160px; /* ここで最大サイズをしっかり制限（PCでもデカくなりすぎない） */
}

/* --- 円本体 --- */
.worry-circle {
  width: 100%;
  aspect-ratio: 1 / 1; /* ここで正円を絶対キープ！ */
  border-radius: 50%;
  background: linear-gradient(to bottom, #d1a751 0%, #d1a751 30%, #ffffff 30%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  overflow: hidden; /* はみ出しをカットして丸さを保つ */
}

/* --- テキスト装飾（高さでピッタリ分割） --- */
.case-label {
  height: 30%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  font-weight: bold;
  margin: 0;
}

.case-text {
  height: 70%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: clamp(0.75rem, 2.5vw, 0.95rem);
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin: 0;
  padding: 0 10px;
}

/* --- 人物イラスト --- */
.worry-person {
  position: absolute;
  bottom: -15px; /* ％ではなくpx指定で位置を安定させる */
  right: -10px;
  width: 65px;   /* px指定でサイズを固定し、変形を防ぐ */
  height: auto;
  z-index: 3;
}

/* === スマホ (SP) 用の設定 === */
@media (max-width: 768px) {
  .worries-grid {
    gap: 20px 10px; /* 隙間を調整 */
  }
  
  .worry-item {
    max-width: 135px; /* iPhone15等でパツパツにならないよう少し小さめに固定 */
  }
  
  .case-label {
    font-size: 0.85rem;
  }
  
  .case-text {
    font-size: 0.75rem;
  }
  
  .worry-person {
    width: 55px; /* SP用に少しだけ人物も小さく */
    bottom: -12px;
    right: -8px;
  }
}
/* =========================================
   公式X（Twitter）セクションの装飾
========================================= */
#official-twitter-area {
  margin: 80px 0; /* 前後のセクションとしっかり余白を取る */
  text-align: center;
}

.twitter-lead {
  color: #ffffff;
  font-size: 0.95rem;
  margin-bottom: 30px;
  font-weight: bold;
}

.twitter-wrapper {
  max-width: 500px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(209, 167, 81, 0.15); /* LPに合わせたゴールドの影 */
}

/* =========================================
   動画レビュー（入居者の声）の行間・余白修正
========================================= */
.video-caption {
  text-align: center;
  margin-top: 25px; /* 動画との隙間 */
}

.client-tag {
  display: inline-block;
  background-color: #c99e52; /* ゴールド */
  color: #fff;
  padding: 6px 20px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: bold;
  /* 【重要】ここでタグとセリフの上下の余白を調整しています */
  margin-top: 35px; 
  margin-bottom: 15px; 
}

/* 1つ目のタグだけは、上の余白を詰める */
.client-tag:first-of-type {
  margin-top: 10px;
}

.client-message {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin: 0;
}

/* =========================================
   スマホ (SP) 用の微調整
========================================= */
@media (max-width: 768px) {
  #official-twitter-area {
    margin: 50px 0;
  }
  .twitter-lead {
    font-size: 0.85rem;
    margin-bottom: 20px;
  }
  
  /* スマホでのテキスト行間調整 */
  .client-tag {
    margin-top: 25px;
    margin-bottom: 12px;
    font-size: 0.8rem;
  }
  .client-message {
    font-size: 0.95rem;
    padding: 0 10px; /* スマホで画面端に文字がくっつかないように */
  }
}
/* =========================================
   公式X（画像版）セクションの装飾
========================================= */
#official-twitter-area {
  margin: 80px 0;
  text-align: center;
}

.twitter-lead {
  color: #ffffff;
  font-size: 0.95rem;
  margin-bottom: 30px;
  font-weight: bold;
}

.twitter-wrapper {
  max-width: 600px; /* PCでも大きくなりすぎないように制限 */
  margin: 0 auto;
  padding: 0 15px; /* スマホで画面端にピタッとくっつかないように余白 */
}

/* 用意していただいた画像を装飾 */
.twitter-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px; /* 少し角を丸くしてリッチに */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); /* 全体のトーンに合わせて少し影を落とす */
  transition: transform 0.3s ease; /* ホバー時のアニメーション用 */
}

/* PCで画像にマウスを乗せた時に少しフワッと浮くアクション（リンクだと分かりやすくするため） */
.twitter-image:hover {
  transform: translateY(-5px);
}

/* === スマホ (SP) 用の設定 === */
@media (max-width: 768px) {
  #official-twitter-area {
    margin: 50px 0;
  }
  .twitter-lead {
    font-size: 0.85rem;
    margin-bottom: 20px;
    padding: 0 10px;
  }
}

/* =========================================
   動画キャプション（2人分）のレイアウト
========================================= */
.video-caption-multi {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0 15px;
}

/* 1人ずつのセリフを囲む枠 */
.interview-box {
  background: rgba(255, 255, 255, 0.05); /* うっすら背景を敷いて独立感を出す */
  border: 1px solid rgba(201, 158, 82, 0.5); /* ゴールドの枠線 */
  border-radius: 8px;
  padding: 25px 15px 20px;
  flex: 1;
  max-width: 400px; /* 横に広がりすぎるのを防ぐ */
  text-align: center;
}

/* 枠の中のタグの余白を調整 */
.interview-box .client-tag {
  margin-top: 0;
  margin-bottom: 15px;
}

/* === スマホ (SP) 用の設定 === */
@media (max-width: 768px) {
  .video-caption-multi {
    flex-direction: column; /* スマホでは縦並びに */
    align-items: center;
    gap: 15px;
    margin-top: 20px;
  }
  .interview-box {
    width: 100%;
    padding: 20px 10px;
  }
}

/* --- SNSに届いたリアルな声 の隙間調整 --- */
#reviews-marquee-area .sub-title {
  /* タイトルの下の余白を強制的に広げる（!importantでインラインスタイルに打ち勝つ） */
  margin-bottom: 60px !important; 
}

.marquee-container {
  /* 画像スライダー本体の上部にも余白を追加して押し下げる */
  margin-top: 20px; 
}

/* === スマホ (SP) 用の設定 === */
@media (max-width: 768px) {
  #reviews-marquee-area .sub-title {
    margin-bottom: 40px !important; /* スマホは少しだけ間隔を狭める */
  }
  .marquee-container {
    margin-top: 10px;
  }
}
/* =========================================
   【完全リセット版】お悩みセクション
   過去のCSSの影響を一切受けない独立したコードです
========================================= */
#nx-worries-section {
  position: relative;
  background-image: url('../img/bg-lounge.png'); 
  background-size: cover;
  background-position: center;
  padding: 80px 15px;
  text-align: center;
  overflow: hidden;
}

.nx-worries-bg-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

.nx-worries-container {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.nx-section-title-gold {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  color: #d1a751;
  margin-bottom: 50px;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-weight: bold;
}

/* --- グリッド（絶対崩れないレイアウト） --- */
.nx-worries-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 30px; /* 縦の隙間40px、横の隙間30px */
  max-width: 450px; /* 2列で綺麗に収まる幅 */
  margin: 0 auto;
}

/* --- 円の絶対枠（縦横px固定で伸び縮み不可にする） --- */
.nx-worry-box {
  position: relative;
  width: 160px;  /* ここで完全にサイズを固定 */
  height: 160px; /* ここで完全にサイズを固定 */
}

/* --- 円のデザイン --- */
.nx-worry-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #d1a751 0%, #d1a751 30%, #ffffff 30%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* --- テキスト分割 --- */
.nx-case-head {
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  margin: 0;
}

.nx-case-body {
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.4;
  margin: 0;
  padding: 0 5px;
}

/* --- 人物画像 --- */
.nx-person-img {
  position: absolute;
  bottom: -15px; /* 円からはみ出させる */
  right: -10px;
  width: 70px;   /* px固定で変形を防ぐ */
  height: auto;
  z-index: 10;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

/* === スマホ (SP) 用の設定 === */
@media (max-width: 768px) {
  #nx-worries-section { padding: 50px 10px; }
  .nx-section-title-gold { margin-bottom: 30px; font-size: 1.4rem; }
  
  .nx-worries-grid { gap: 30px 15px; } /* SPは隙間を少し詰める */
  
  /* スマホ用に円を少し小さくする */
  .nx-worry-box {
    width: 140px;
    height: 140px;
  }
  
  .nx-case-head { font-size: 13px; }
  .nx-case-body { font-size: 12px; }
  
  .nx-person-img {
    width: 60px;
    bottom: -12px;
    right: -8px;
  }
}
/* =========================================
   SNSに届いたリアルな声 の隙間「超」強化版
========================================= */

/* ① Twitter画像とタイトルの間の隙間（ガッツリ空ける） */
#reviews-marquee-area {
  margin-top: 120px !important; 
}

/* ② タイトルとスライダー画像の間の隙間 */
#reviews-marquee-area .sub-title {
  margin-bottom: 30px !important; 
}

/* スライダー本体をさらに少し押し下げる */
.marquee-container {
  padding-top: 20px !important; 
}

/* === スマホ (SP) 用の調整 === */
@media (max-width: 768px) {
  #reviews-marquee-area {
    margin-top: 80px !important; /* スマホでもしっかり隙間をとる */
  }
  #reviews-marquee-area .sub-title {
    margin-bottom: 20px !important; 
  }
}