/* ==========================================================================
Responsive Styles
========================================================================== */
@media (max-width: 1199px){
	main{
		width: 100%;
	}
    .index-item {
        padding: 25px 5px;
    }
    .index-item span {
        font-size: 14px;
    }
    .index-title {
        font-size: 30px;
    }
    .intro-bottom-wrapper{
        padding: 24px 50px 24px 24px;
    }
    .intro-tree{
        right: -2vw;
        width: 80px;
    }
    .company-main-content{
        padding: 0 10px;
    }
}



/* 業者一覧セクション レスポンシブ */
@media (max-width: 1024px) {
    main{
        margin-top: 0px;
    }
    body.admin-bar #page {
        padding-top: 20px;
    }
}



/* Mobile (max-width: 767px) */
@media (max-width: 767px){
    /* 共通 */
    .sp-only{
        display: block !important;
    }
    .header-container {
        display: none;
    }
    .site-main{
        margin-top: 0;
    }
    .main-navigation {
        display: none;
    }
    .site-header{
        background-color: transparent;
        border-bottom: none;
    }

    /* SP Hamburger Menu Button - 紫背景・白アイコン */
    .hamburger-btn {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 20px; /* トップバーの高さ(20px)のすぐ下 */
        right: 0;
        width: 60px;
        height: 60px;
        background: #ACC7EE !important;
        border: none;
        border-radius: 0;
        cursor: pointer;
        z-index: 10000;
        padding: 10px;
        gap: 4px;
        box-shadow: none;
    }

    /* WordPress管理バー対応 - ハンバーガーメニュー位置調整（タブレット：782px以上） */
    body.admin-bar .hamburger-btn {
        top: 52px; /* admin-bar(32px) + top-bar(20px) */
    }

    .hamburger-btn span {
        display: block !important;
        width: 26px;
        height: 3px;
        background-color: #FFF !important;
        transition: all 0.3s ease;
        border-radius: 1px;
    }

    .hamburger-btn span.menu-text {
        width: auto !important;
        height: auto !important;
        background: none !important;
        background-color: transparent !important;
        color: #FFF;
        font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
        font-size: 10px;
        font-weight: 600;
        margin-top: 2px;
        letter-spacing: 0.5px;
    }

    /* Hamburger Active State (X mark) - 3本ライン対応 */
    .hamburger-btn.active span:nth-child(1) {
        transform: rotate(45deg);
        position: absolute;
        top: 22px;
    }

    .hamburger-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-btn.active span:nth-child(3) {
        transform: rotate(-45deg);
        position: absolute;
        top: 22px;
    }

    .hamburger-btn.active span.menu-text {
        position: absolute;
        bottom: 10px;
        transform: none;
    }

    /* Mobile Menu - ハンバーガーボタンと同じ位置から開始 */
    .mobile-menu {
        display: block;
        position: fixed;
        top: 20px;
        right: 0;
        width: 75%;
        max-width: 300px;
        height: calc(100vh - 20px);
        background-color: #ACC7EE;
        z-index: 10001;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        visibility: hidden;
        border-radius: 0;
    }

    .mobile-menu.active {
        transform: translateX(0);
        visibility: visible;
    }

    /* WordPress管理バー対応 - モバイルメニュー位置調整（タブレット：782px以上） */
    body.admin-bar .mobile-menu {
        top: 52px; /* admin-bar(32px) + top-bar(20px) */
        height: calc(100vh - 52px);
    }

    /* 閉じるボタン - ハンバーガーボタンと同じ位置・スタイル */
    .mobile-menu-close {
        display: flex !important;
        position: fixed;
        top: 20px;
        right: 0;
        width: 60px;
        height: 60px;
        background: #ACC7EE;
        border: none;
        border-radius: 0;
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        gap: 4px;
        z-index: 10002;
    }

    .mobile-menu-close .close-icon {
        position: relative;
        width: 26px;
        height: 26px;
    }

    .mobile-menu-close .close-icon::before,
    .mobile-menu-close .close-icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 26px;
        height: 3px;
        background-color: #FFF;
        border-radius: 1px;
    }

    .mobile-menu-close .close-icon::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .mobile-menu-close .close-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .mobile-menu-close .close-text {
        color: #FFF;
        font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    /* WordPress管理バー対応 - 閉じるボタン位置調整（タブレット：782px以上） */
    body.admin-bar .mobile-menu-close {
        top: 52px; /* admin-bar(32px) + top-bar(20px) */
    }

    .mobile-menu-content {
        padding: 80px 0 30px;
    }

    .mobile-nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-nav li {
        border-bottom: none;
    }

    .mobile-nav a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 16px 25px;
        color: #FFF;
        font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
        font-size: 17px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }

    .mobile-nav a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        opacity: 1;
    }

    .mobile-nav .arrow {
        display: inline-block;
        margin-left: 12px;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 8px solid #FFF;
    }

    .mobile-menu-banner {
        margin: 25px 15px;
        position: relative;
    }

    .mobile-menu-banner-pr {
        position: absolute;
        top: -8px;
        left: 0;
        background: #ACC7EE;
        color: #FFF;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 8px;
        z-index: 2;
    }

    .mobile-menu-banner img {
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }

    .mobile-menu-overlay.active {
        display: block;
    }
    .intro-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .intro-image {
        flex: 0 0 auto;
        width: 300px;
    }
    .intro-bottom-text {
        font-size: 18px;
    }
    .header-bubble{
        font-size: 2.7vw;
        width: 80%;
    }
    .header-bubble::before{
        width: 76.6vw;
        height: 9.1vw;
    }
    .reviews-text-grid{
        grid-template-columns: repeat(2, 1fr);
        margin-left: 0;
    }
    .overview-content-wrapper{
        margin-left: 0;
    }
    .overview-inner{
        flex-direction: column;
    }
    .overview-table-wrapper{
        width: 100%;
    }
    .overview-map-wrapper{
        width: 100%;
    }
    .company-list-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    

    /* Top Bar - 固定表示・スクロール追従 */
    .top-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 20px;
        padding: 0;
        display: flex;
        align-items: center;
        z-index: 9999;
        background-color: #fff;
    }

    /* WordPress管理バー対応 - トップバー位置調整 */
    body.admin-bar .top-bar {
        top: 46px;
    }
    #page {
        padding-top: 20px;
    }

    body.admin-bar #page {
        padding-top: 20px;
    }

    .top-bar-inner {
        padding: 0 10px;
        gap: 8px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
    }

    .pr-label {
        width: 28px;
        height: 13px;
        font-size: 10px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .top-bar-text {
        font-size: 11px;
        white-space: nowrap;
        overflow: visible;
        display: inline;
    }
    .top-bar-text-pc {
        display: none;
    }

    .top-bar-text-sp {
        display: inline;
    }
    .header-left{
        display: none;
    }
}
/* ==========================================================================
   MV Section - Responsive
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* --- MVセクション --- */
    .hero-section {
        margin-top: 0;
        background-color: #fff;
    }

    .hero-content {
        aspect-ratio: 350 / 317; /* 画像に合わせた比率 */
        background-image: url('../images/mv-sp.webp');
        background-position: top center;
        padding-top: 0;
        display: block; /* フレックスを解除 */
    }

    .hero-text-area {
        margin-left: 0;
        width: 100%;
        height: 100%;
        position: relative;
    }

    /* 上部のネイビーの調査タグ */
    .hero-intro {
        position: absolute;
        top: 26vw;
        left: 0;
        margin-left: 0;
        font-size: 4.29vw;
        padding: 2.86vw 2.2vw;
        line-height: 1.4;
        width: auto;
        max-width: 80%;
    }
    .hero-intro .txt-large{
        font-size: 6.6vw;
    }
    .hero-sp-wrapper{
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 75%; /* 右側を開ける */
        margin-left: 0;
        padding: 2.86vw 2.2vw;
        border-radius: 0 8.6vw 0 0;
    }
    /* メインコピーエリア（白い角丸ボックス） */
    .hero-main-copy {
        font-size: 4.6vw;
        text-align: left;
    }

    .hero-main-copy .bg-navy {
        font-size: 7.4vw;
        padding: 0 1.8vw;
    }

    .hero-main-copy .txt-navy {
        font-size: 7.4vw;
        display: block;
    }

    /* リード文（白いボックス内に含めるか、その直下に配置） */
    .hero-lead-text {
        font-size: 3.3vw;
        z-index: 10;
        margin-top: 0;
    }
    .hero-lead-text .txt-large { font-size: 3.7vw; }

    /* --- INDEXセクション（リスト形式） --- */
    .content-index {
        margin-top: 0;
        padding: 0 15px 40px;
    }

    .index-inner {
        border-radius: 7.1vw;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); 
        padding: 4.5vw 3.14vw;
    }

    .index-grid-container {
        grid-template-columns: 1fr; /* 1列 */
    }

    .index-grid-item {
        flex-direction: row; /* 横並び */
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 1.43vw .86vw;
        min-height: auto;
        border-bottom: 1px dotted #333; /* 点線の区切り */
    }

    .index-grid-item:last-child {
        border-bottom: none;
    }

    .index-grid-text {
        font-size: 3.14vw;
        margin-bottom: 0;
        padding-right: 30px;
        line-height: 1.4;
        width: 100%;
    }

    /* 右端の矢印 */
    .index-arrow {
        position: static;
        transform: rotate(-90deg) translateX(1vw);
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }

    .index-arrow::before {
        width: 8px;
        height: 8px;
        border-right: 1.5px solid #999;
        border-bottom: 1.5px solid #999;
        position: static;
        display: block;
    }

    /* PC用の点線設定（after）を消す */
    .index-grid-item::after {
        display: none;
    }
}

/* ==========================================================================
   About Section - Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .about-section {
        padding: 40px 0 60px; /* 下の大きな余白を調整 */
    }

    /* 右下のあしらいを少し小さく、位置調整 */
    .about-bg-decoration {
        width: 80px;
        bottom: -20px;
        right: 0;
    }

    /* 上段：画像とテキストを縦並びに */
    .about-top-content {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 50px;
    }

    .about-image-wrapper {
        width: 80%; /* スマホでは画像を少し強調 */
        margin: 0 auto;
    }

    .about-text-wrapper {
        text-align: center; /* スマホでは中央寄せが見やすい */
    }

    .about-main-title {
        font-size: 20px; /* 文字サイズ調整 */
        line-height: 1.6;
        margin-bottom: 25px;
        text-align: left;
    }

    .about-description {
        font-size: 16px; /* 本文を16px前後に */
        text-align: left; /* 本文は左寄せで読みやすく */
    }

    /* グラフボックスを縦並びに */
    .about-stats-container {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 40px;
    }

    .stats-header {
        font-size: 18px; /* ヘッダーの文字を少し小さく */
        padding: 15px 10px;
    }

    /* ボタンの調整 */
    .about-btn-area .btn-about-blue {
        font-size: 15px; /* 1行に収まりやすいサイズに */
        padding: 12px 20px;
        gap: 10px;
        width: 100%; /* スマホでは横いっぱいのボタンにする */
        max-width: 340px; /* 広がりすぎ防止 */
        box-sizing: border-box;
        justify-content: center;
    }

    .about-btn-area .btn-icon {
        width: 28px; /* アイコンも少し小さく */
    }
}

/* マーカーが1行しか当たらない問題の修正用（必要に応じて） */
.about-description .marker-yellow {
    display: inline; /* inline-blockではなくinlineに */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ==========================================================================
Comparison section - responsive
========================================================================== */
/* レスポンシブ：中央寄せを解除してスライド可能に */
@media (max-width: 1160px) {
    .comparison-cards-container {
        justify-content: flex-start;
    }
}
@media (max-width: 768px) {
    .comparison-main-title{
        font-size: 24px;
    }
}

/* ==========================================================================
   Selection Points Section - Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .selection-points-section {
        background: url(../images/bg-point-sp.webp) no-repeat;
        background-size: 100% 100%;
        padding: 80px 0 80px;
        margin-top: -72px;
    }

    .selection-header {
        margin-bottom: 40px;
    }

    .selection-tag {
        font-size: 18px; /* 文字サイズ調整 */
        padding: 5px 15px;
    }

    .selection-main-title {
        font-size: 22px;
    }

    .selection-main-title span {
        font-size: 48px; /* 数字を少し小さく */
    }

    /* ポイントアイテムを縦並びに */
    .point-item, 
    .point-item.item-right-img {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
    }

    /* 画像エリアを横幅いっぱいに */
    .point-image-area {
        width: 100%;
        flex: none;
    }

    .main-img {
        border-radius: 20px;
    }

    /* バッジの位置調整（画面端からはみ出さないように） */
    .point-badge {
        width: 60px;
        top: -20px;
        left: -10px;
    }

    .item-right-img .point-badge {
        right: -10px;
    }

    /* テキストエリア */
    .point-text-area {
        width: 100%;
    }

    .point-title-box {
        flex-direction: column; /* アイコンとタイトルを縦に */
        text-align: center;
        margin-bottom: 20px;
    }

    .title-icon {
        width: 80px; /* アイコンを少し小さく */
        margin-bottom: 10px;
    }

    .point-title {
        font-size: 18px;
        text-align: center;
    }

    /* 説明文ボックス */
    .point-description-box {
        padding: 20px;
        font-size: 15px;
        line-height: 1.6;
    }

    /* ボタンの調整 */
    .point-btn-area .btn-more-gold {
        font-size: 18px; /* 画面に収まるサイズに */
        padding: 15px 30px; /* 左右の余白を詰めすぎない */
        width: 100%;
        max-width: 340px;
        display: inline-flex;
        justify-content: center;
        box-sizing: border-box;
    }
    
    /* ボタン内アイコンの位置調整（既存のpaddingが強い場合） */
    .point-btn-area .btn-icon {
        position: static;
        transform: none;
        margin-left: 10px;
    }
}
/* ==========================================================================
   Introduction & Sales Cases - Responsive
   ========================================================================== */
@media (max-width: 768px) {
    /* --- 全体・ヘッダー --- */
    .introduction-section {
        padding: 60px 0 0;
    }
    .intro-main-title {
        font-size: 24px;
        padding: 0 15px;
    }
    .company-block {
        margin-bottom: 80px;
    }

    /* --- 会社紹介トップエリア --- */
    .company-introduction-intro {
        padding: 40px 0;
    }
    .company-introduction-intro::before {
        left: 0;
        width: 100%;
        border-radius: 0 80px 0 0; /* 角丸を少し控えめに */
    }

    .company-top-flex {
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
        margin-bottom: 40px;
    }

    .company-visual {
        flex: none;
        width: 100%;
    }

    /* もくもく吹き出し */
    .cloud-bubble {
        padding: 20px 10px;
        margin-bottom: 15px;
        background-size: 100% 100%;
    }
    .cloud-bubble p {
        font-size: 14px;
    }

    .intro-company-name {
        font-size: 28px;
        text-align: center;
    }

    /* --- 特徴カードエリア --- */
    .company-features-layout {
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
    }

    /* 縦書きを横書きに */
    .vertical-title-area {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
    .vertical-text {
        writing-mode: horizontal-tb;
        font-size: 24px;
    }

    /* 3カラムを1カラムに */
    .feature-cards-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .feature-mini-card {
        padding: 0 20px 20px;
    }

    /* タイトルのハミ出しをリセット */
    .card-title-bar {
        margin-left: -5px;
    }
    .card-title-bar span {
        font-size: 20px;
    }

    /* --- ボタンエリア --- */
    .intro-cta-area {
        flex-direction: column;
        gap: 15px;
    }

    .btn-cta-blue, 
    .btn-cta-outline {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
        font-size: 16px;
        padding: 10px 15px;
        justify-content: center;
    }

    /* --- 売却事例（テーブル） --- */
    .company-cases-container {
        flex-direction: column;
        padding: 40px 15px;
        margin: 40px 15px;
        border: 1px solid #1F4A6E; /* 4辺囲いに変更 */
    }

    /* 上下の擬似要素ラインを非表示 */
    .company-cases-container::before,
    .company-cases-container::after {
        display: none;
    }

    /* 縦書きを横書きに */
    .cases-vertical-title {
        writing-mode: horizontal-tb;
        font-size: 24px;
        margin-bottom: 30px;
        text-align: center;
    }

    /* タイトルの上下の棒線を非表示 */
    .cases-vertical-title::before,
    .cases-vertical-title::after {
        display: none;
    }

    .cases-content-body {
        padding-right: 0;
        width: 100%;
    }

    /* テーブルの横スクロール */
    .cases-table-scroll {
        margin: 0 -10px 30px;
        padding: 0 5px;
    }
    .cases-table {
        min-width: 700px; /* 少し縮めてスクロールしやすく */
    }
    .cases-table th, 
    .cases-table td {
        padding: 15px 10px;
        font-size: 16px;
    }
    .col-price {
        font-size: 24px !important;
    }
}
/* ==========================================================================
   Review & Overview - Responsive
   ========================================================================== */
@media (max-width: 768px) {
    /* --- 口コミセクション --- */
    .company-reviews-container {
        padding: 60px 15px 40px;
    }

    .review-title {
        font-size: 24px;
    }

    .review-title .title-line {
        display: none;
    }

    /* 3カラムを1カラムに */
    .review-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    .review-card {
        padding: 40px 20px 25px; /* 上の大きな余白(110px)を調整 */
        border-radius: 30px; /* 角丸を少し小さく */
    }

    .review-icon {
        width: 80px; /* アイコンを小さく */
        height: 80px;
        margin-bottom: 20px;
    }

    .stars, .score {
        font-size: 24px; /* 星とスコアのサイズ調整 */
    }

    .review-rating {
        margin-bottom: 20px;
    }

    .review-content {
        font-size: 16px; /* 本文のサイズ調整 */
        margin-bottom: 20px;
    }

    /* --- 会社概要セクション --- */
    .company-overview-container {
        padding: 60px 15px;
    }

    .overview-header {
        margin-bottom: 40px;
    }

    .overview-title {
        font-size: 24px;
        width: 100%; /* タイトルエリアを横いっぱいに */
        box-sizing: border-box;
    }

    /* 上下のラインを画面端まで */
    .overview-title::before,
    .overview-title::after {
        width: 100%;
    }

    /* 地図と表を縦並びに */
    .overview-content {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 40px;
    }

    .overview-map {
        width: 100%;
        height: 250px; /* 地図の高さを少し抑える */
    }

    .overview-table-wrap {
        width: 100%;
    }

    .overview-table th, 
    .overview-table td {
        padding: 12px 10px;
        font-size: 15px; /* テーブル内の文字を小さく */
    }

    .overview-table th {
        width: 30%; /* 項目名の幅を少し詰める */
    }
}

/* ==========================================================================
相場セクション
========================================================================== */
@media (max-width: 768px) {
    .price-cards-container {
        grid-template-columns: 1fr;
    }
    .market-price-title { font-size: 28px; }
    .market-price-sub-wrapper::before,
    .market-price-sub-wrapper::after { display: none; }
}

/* ==========================================================================
   Recent Posts Section - Responsive
   ========================================================================== */

/* タブレット・小さめのPC（1024px以下） */
@media (max-width: 1024px) {
    .recent-posts-container {
        grid-template-columns: repeat(2, 1fr); /* 2列にする */
        gap: 30px 20px;
    }
}

/* スマホ（768px以下） */
@media (max-width: 768px) {
    .section-recent-posts {
        padding: 60px 0; /* 余白を縮小 */
    }

    .recent-posts-header {
        margin-bottom: 40px;
    }

    .recent-posts-title {
        font-size: 28px; /* タイトルを少し小さく */
    }

    /* サブタイトルのライン調整 */
    .recent-posts-sub-wrapper {
        gap: 10px;
    }
    
    .recent-posts-sub-wrapper::before,
    .recent-posts-sub-wrapper::after {
        max-width: 40px; /* ラインを短くして文字を中央に保つ */
    }

    .recent-posts-sub {
        font-size: 14px;
    }

    /* 記事一覧を1列にする */
    .recent-posts-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* スマホでサムネイルが大きすぎる場合はここで高さを調整可 */
    .article-thumbnail {
        margin-bottom: 15px;
    }

    .article-title {
        font-size: 17px; /* 読みやすさ重視で少し大きく */
    }
}
/* ==========================================================================
   FAQ Section - Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .faq-section {
        padding: 60px 0 80px; /* 上下の余白をスマホ向けに調整 */
    }

    .faq-container {
        padding: 0 15px;
    }

    /* ヘッダータイトル */
    .faq-main-title {
        font-size: 24px; /* タイトルを小さく */
        line-height: 1.5;
    }

    /* 右上のQ&A装飾テキスト */
    .decorative-qa {
        font-size: 28px;
        bottom: -40px; /* 位置を微調整 */
        right: 10px;
    }

    /* 白い箱の余白を大幅に削減 */
    .faq-content-box {
        padding: 40px 20px; /* 80pxあった左右余白を20pxに */
    }

    .faq-content-item {
        margin-bottom: 35px;
    }

    /* 質問行 */
    .faq-question {
        align-items: flex-start; /* アイコンと文字を上揃えに */
    }

    .q-image {
        width: 24px; /* アイコンを少し小さく */
        margin-right: 12px;
        margin-top: 2px; /* テキストの1行目と高さを合わせる */
    }

    .q-text {
        font-size: 17px; /* 文字サイズを調整 */
        line-height: 1.4;
    }

    /* 回答行 */
    .faq-answer {
        font-size: 15px;
        padding-left: 36px; /* アイコン(24px) + 余白(12px) に合わせる */
        line-height: 1.7;
    }
}

/* さらに小さい画面（iPhone SEなど）向け */
@media (max-width: 375px) {
    .faq-main-title {
        font-size: 20px;
    }
    .q-text {
        font-size: 16px;
    }
}

/* ==========================================================================
   Company List Section - Responsive
   ========================================================================== */

/* タブレットサイズ（1024px以下）: 2カラムに変更 */
@media (max-width: 1024px) {
    .company-list-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* スマホサイズ（768px以下） */
@media (max-width: 768px) {
    .company-list-section {
        padding: 60px 0 50px;
    }

    .section-title-wrapper {
        margin-bottom: 30px;
    }

    .company-list-title {
        font-size: 26px; /* タイトルサイズを調整 */
    }

    /* グリッドを1カラムに */
    .company-list-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    /* カードデザインの微調整 */
    .company-card {
        border-radius: 30px; /* 角丸を少し小さく */
        width: 100%;
    }

    .company-card .card-header {
        min-height: 80px;
        padding: 15px 10px;
    }

    .company-card .card-title {
        font-size: 22px;
    }

    /* 特徴ボックス */
    .feature-box {
        min-height: auto;
        padding: 15px;
    }

    .feature-box p {
        font-size: 16px;
    }

    /* 情報エリア */
    .info-label {
        font-size: 17px;
        padding-left: 5px;
    }

    .info-label::after {
        width: 80px; /* 下線の太い部分も短く調整 */
    }

    .info-value {
        font-size: 16px;
    }

    /* 地図の高さ調整 */
    .company-map iframe {
        height: 200px;
    }

    /* もっと見るボタンの調整 */
    .more-btn-area {
        margin-top: 20px;
    }

    .btn-more-gold {
        width: 100%; /* スマホでは横幅いっぱいに */
        max-width: 340px;
        padding: 16px 20px; /* 左右の大きなパディング(100px)を解除 */
        font-size: 18px;
        box-sizing: border-box;
        justify-content: center; /* テキストを中央に */
    }

    .btn-more-gold .btn-icon {
        width: 30px;
        right: 15px; /* アイコンの位置を調整 */
    }
}

/* 小さなスマホ（375px以下）向け */
@media (max-width: 375px) {
    .company-card .card-title {
        font-size: 20px;
    }
    .info-label {
        font-size: 16px;
    }
    .info-value {
        font-size: 15px;
    }
}










/* ==========================================================================
   Area Column Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .area-column-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .related-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .area-column-content-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .area-column-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .area-column-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .article-header .article-title {
        font-size: 22px;
        display: block;
        overflow: visible;
    }

    /* タブレット用：より詳細度の高いセレクタで確実に適用 */
    .area-column-article .article-header .article-title {
        display: block;
        overflow: visible;
        font-size: 22px;
    }

    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .article-content h2 {
        font-size: 20px;
    }

    .article-content h3 {
        font-size: 18px;
    }

    .related-articles-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .related-articles-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .breadcrumb-nav {
        font-size: 12px;
        padding: 15px 0;
    }

    .breadcrumb-separator {
        margin: 0 5px;
    }

    .article-header .article-title {
        font-size: 20px;
        display: block;
        overflow: visible;
    }

    /* スマホ用：より詳細度の高いセレクタで確実に適用 */
    .area-column-article .article-header .article-title {
        display: block;
        overflow: visible;
        font-size: 20px;
    }

    .article-category-tag {
        font-size: 12px;
        padding: 5px 12px;
    }

    .article-dates {
        font-size: 12px;
    }

    .area-column-card-title {
        font-size: 14px;
    }

    .area-column-card-date {
        font-size: 12px;
    }
}
/* Small Mobile (max-width: 480px) */
@media (max-width: 480px){
    .top-bar-text {
        font-size: 11px;
    }
    /* Hero Section */
    .index-title {
        font-size: 24px;
    }

    .index-item span:not(.index-square):not(.index-arrow) {
        font-size: 15px;
    }

    .recommended-companies .section-header {
        margin-bottom: 10px;
    }

    /* FAQ Section Responsive */
    .faq-section{
        margin-bottom: 30px;
    }
    .faq-container {
        padding: 25px 20px;
    }
    .faq-container::before{
        right: -4px;
        bottom: -8px;
    }

    .faq-title {
        font-size: 22px;
    }

    faq-title-blue{
        font-size: 1.2em;
    }

    .faq-title-text {
        font-size: 20px;
    }

    .faq-line-icon {
        width: 25px;
        top: -10px;
        right: -22px;
    }

    .faq-item {
        padding: 0;
        width: 100%;
    }

    .faq-question {
        gap: 10px;
    }

    .faq-q-icon {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }

    .faq-q-text {
        font-size: 15px;
        max-width: 70%;
    }

    /* 会社一覧セクション */
    .company-list-btn {
        padding: 12px 14px;
        min-height: 55px;
    }

    .company-list-btn .btn-text {
        font-size: 14px;
    }

    .company-list-btn .btn-text-line2 {
        font-size: 13px;
    }

    /* 追従 */
    .fixed-right-elements {
        bottom: 15px;
        right: 10px;
        gap: 10px;
    }

    .scroll-to-top-btn {
        width: 42px;
        height: 42px;
    }

    .scroll-to-top-btn .top-text {
        font-size: 8px;
    }

    .scroll-to-top-btn .top-arrow {
        width: 16px;
        height: 16px;
    }

    .fixed-banner {
        width: auto;
        height: auto;
        max-width: 340px;
    }

    .close-banner-btn {
        width: 20px;
        height: 20px;
        top: -6px;
        right: -6px;
    }

    .close-banner-btn svg {
        width: 8px;
        height: 8px;
    }
    /* Privacy Policy Page Responsive */
    .company-btn{
        font-size: 16px !important;
    }
    .policy-page-title {
        font-size: 20px;
        padding: 12px 15px;
    }

    .policy-intro {
        padding: 15px;
        margin-bottom: 30px;
    }

    .policy-intro p {
        font-size: 13px;
    }

    .policy-section {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .policy-section-title {
        font-size: 16px;
        padding-left: 10px;
        margin-bottom: 15px;
    }

    .policy-section-content {
        padding-left: 0;
    }

    .policy-section-content p {
        font-size: 13px;
    }

    .policy-subsection-title {
        font-size: 14px;
        padding: 6px 10px;
    }

    .policy-footer {
        margin-top: 30px;
        padding-top: 15px;
        text-align: center;
    }

    .policy-updated {
        font-size: 12px;
    }

    /* Site Map Page Responsive */
    .sitemap-article {
        padding: 20px 15px;
    }

    .sitemap-page-title {
        font-size: 20px;
    }

    .sitemap-section {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .sitemap-section-title {
        font-size: 16px;
        padding-left: 10px;
        margin-bottom: 15px;
    }

    .sitemap-list li {
        padding: 8px 0;
        padding-left: 16px;
    }

    .sitemap-list li::before {
        width: 6px;
        height: 6px;
    }

    .sitemap-list li a {
        font-size: 13px;
    }
}