/* ==========================================================================
Responsive Styles
========================================================================== */
@media (max-width: 1199px){
    .index-item {
        padding: 25px 5px;
    }
    .index-item span {
        font-size: 14px;
    }
    .index-title {
        font-size: 30px;
    }
}



/* 業者一覧セクション レスポンシブ */
@media (max-width: 1024px) {
    #page {
        padding-top: 20px; /* トップバー(20px)のみ */
    }

    body.admin-bar #page {
        padding-top: 20px;
    }
    
    .header-right {
        display: none;
    }

    .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: #7FAC74 !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: #7FAC74;
        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: #7FAC74;
        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: #804EA2;
        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;
    }

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



/* Mobile (max-width: 767px) */
@media (max-width: 767px){
    /* 共通 */
    .sp-only{
        display: block !important;
    }

    /* Hero section */
    .hero-section {
        max-height: 100%;
        height: 106.7vw;
    }
    .hero-content{
        background-image: url('../images/mv-sp.webp');
        aspect-ratio: 600 / 640;
        max-height: 100%;
        height: 106.7vw !important;
    }

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

    /* 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;
    }
    .hero-cta__wrapper{
        bottom: 6.5vw;
    }
    .hero-cta{
        max-width: 74vw;
    }

    .hero-top-copy{
        font-size: 4.088vw;
        margin-top: 13.33vw;
        margin-left: 1vw;
    }
    .hero-main-title{
        font-size: 5.68vw;
        margin-left: 4vw;
        line-height: 1.8;
    }
    .hero-blue-large{
        font-size: 8.875vw;
        padding: 1.7vw;
    }
    .hero-black-back{
        font-size: 6.51vw;
        padding: 1.63vw;
    }
    .hero-large-text{
        font-size: 9.375vw;
    }
    .hero-large-text::before{
        width: 8.33vw;
        height: 5vw;
        right: -8vw;
        top: -3vw;
    }

    /* INDEX Section */
    .content-index {
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
    }
    .index-container {
        flex-direction: column;
        border: none;
        margin:  0 auto;
        width: fit-content;
    }
    .index-item {
        border-right: none;
        border-bottom: none;
        border-left: none;
        padding: 18px 15px;
        min-height: auto;
        justify-content: left;
        align-items: center;
        gap: 5px;
        flex-direction: row;
    }
    .index-title-item-sp{
        max-width: 100%;
        width: 100vw;
        display: block;
        font-weight: 700;
        margin: 0;
        z-index: 2;
        position: relative;
        padding: 20px 15px;
        background-color: #fff;
        border-bottom: #0A3077 solid 2px;
        text-align: center;
    }
    .index-title::before{
        content: "";
        width: 57px;
        height: 11px;
        background-color: #D79748;
        position: absolute;
        top: -10px;
        left: 8%;
        transform: translateX(-50%);
    }
    .index-title::after{
        content: "";
        width: 57px;
        height: 11px;
        background-color: #D79748;
        position: absolute;
        bottom: -10px;
        right: -48%;
        transform: translateX(-50%);
    }
    .index-title-item{
        display: none;
    }
    .index-item::before{
        display: none;
    }
    .index-item {
        text-align: center;
    }
    .index-item .pc-only{
        display: none;
    }
    .index-item:last-child {
        border-bottom: none;
    }

    /* INDEXタイトル部分 */
    .index-title-item {
        border-bottom: 1px solid #000;
        padding: 20px;
        justify-content: center;
    }

    .index-title {
        font-size: 30px;
        color: #000;
        font-family: var(--font-main);
        font-weight: 600;
        display: inline-block;
    }
    /* スマホ用：赤い四角と矢印を表示 */
    .index-item .index-square,
    .index-item .index-arrow {
        display: inline-block;
        color: #D79748;
        flex-shrink: 0;
    }
    .index-square::before{
        content: "";
        width: 16px;
        height: 11px;
        background-color: #D79748;
        position: absolute;
        left: -20px;
        top: -5px;
    }
    .index-item .index-square {
        position: relative;
    }

    .index-item .index-arrow {
        font-size: 10px;
        width: auto;
        text-align: center;
    }

    /* Points Section */
    .points-title{
        font-size: 3.76vw;
    }
    .points-top-wrapper{
        flex-direction: column-reverse;
        margin-left: 0;
    }
    .points-top-image{
        width: 57.33vw;
    }
    .points-top-text-wrapper{
        width: 93.5vw;
        padding: 3vw;
        font-size: 3.37vw;
        margin-top: -4.33vw;
    }
    .pros-cons-title{
        font-size: 4.07vw;
        margin-top: 9.07vw;
    }
    .pros-cons-title-red{
        font-size: 5.39vw;
    }
    .pros-cons-title-red::before{
        font-size: 5.39vw;
        top: -6.5vw;
    }
    .pros-cons-table{
        width: 94.5vw;
    }
    .th-merit{
        font-size: 10.58px;
    }
    .tr-heading{
        font-size: 10.58px;
    }
    .td-merit, .td-demerit{
        font-size: 8.99px;
        padding: 10px;
    }
    .th-demerit{
        font-size: 10.58px;
    }
    .table-bottom-note{
        text-align: right;
        font-size: 7px;
        margin-top: 0;
        margin-right: 2.775vw;
    }
    .points-lower-title{
        font-size: 3.715vw;
    }
    .points-black-title{
        font-size: 5.31vw;
    }
    .points-lower-wrapper{
        flex-direction: column;
    }
    .points-lower-image{
        width: 52vw;
    }
    .points-lower-text-wrapper{
        width: 92vw;
        font-size: 3.33vw;
        padding: 3.33vw;
    }

    /* Comparison Section */
    .comparison-title-lead{
        font-size: 4.77vw;
        transform: translateX(13%);
    }
    .comparison-title-lead::before{
        width: 3.45vw;
        height: 5.3vw;
        left: -4vw;
    }
    .comparison-title-lead::after{
        width: 3.45vw;
        height: 5.3vw;
        right: -4vw;
    }
    .comparison-title-blue{
        font-size: 7.7vw;
    }
    .comparison-title{
        font-size: 5.2vw;
    }
    .comparison-contents-wrapper{
        width: 100%;
    }
    .comparison-contents-inner{
        width: 95%;
        justify-content: flex-start;
        margin: 0 auto;
        padding-bottom: 10%;
    }

    /* Introduction Section */
    .introduction-title-copy{
        font-size: 5vw;
    }
    .introduction-title{
        font-size: 6.5vw;
    }
    .introduction-title-gold{
        font-size: 7vw;
    }
    .company-sub-heading{
        font-size: 18px;
    }
    .company-name-large{
        font-size: 36px;
    }
    .company-screenshot-section{
        padding: 10px;
    }
    .company-heading{
        font-size: 26px;
        line-height: 1.15;
        padding: 10px 0px 8px 20px;
    }
    .company-heading::before{
        width: 8px;
        height: 37px;
    }
    .company-strengths-section{
        padding: 3.77%;
    }
    .strengths-wrapper{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .strengths-content{
        max-width: 100%;
        width: 100%;
        min-height: unset;
        padding: 20px;
    }
    .strengths-image{
        width: 40%;
    }
    .company-cta-buttons{
        gap: 20px;
    }
    .company-results-section{
        padding: 3.77%;
    }
    .result-container{
        grid-template-columns: repeat(1, 4fr);
        padding: 10px;
        gap: 12px;
    }
    .result-icon{
        width: 30px;
    }
    .result-price{
        margin-left: 10px;
    }
    .company-reviews-section{
        padding: 3.77%;
    }
    .reviews-text-grid{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .company-overview-section{
        padding: 3.77%;
    }
    .overview-inner{
        flex-direction: column-reverse;
        padding-left: 0;
        gap: 19px;
    }
    .overview-table-wrapper{
        width: 100%;
    }
    .overview-table{
        width: 100%;
    }
    .overview-map-wrapper{
        width: 100%;
    }

    /* サイドバーを非表示 */
    .company-intro-sidebar {
        display: none !important;
    }

    /* Market Price Section */
    .market-price-section{
        padding-bottom: 30px;
    }
    .market-price-title{
        font-size: 32px;
    }
    .market-price-title-blue{
        padding: 9px 11px;
    }
    .market-price-title-small{
        font-size: 28px;
    }
    .market-price-title-deco::before{
        width: 43px;
        height: 20px;
        right: -43px;
        top: -16px;
    }
    .market-price-inner{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .market-price-content{
        width: 90%;
        padding: 5%;
    }
    .market-price-icon{
        width: 70px;
    }
    .market-price-item-icon{
        width: 8vw;
    }
    .market-price-house-icon{
        width: 8.5vw;
    }
    .market-price-item-text-blue-large{
        font-size: 5.77vw;
    }

    /* FAQ Section Responsive */
    .faq-section {
        padding: 4vw 2vw 4.3vw 2vw;
    }

    .faq-container {
        padding: 30px 25px;
    }

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

    .faq-line-icon {
        width: 30px;
        top: -12px;
        right: -28px;
    }

    .faq-question {
        gap: 12px;
    }

    .faq-q-icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .faq-q-text {
        font-size: 2.7vw;
    }

    /* 会社一覧セクション */
    .company-list-title {
        font-size: 22px;
    }

    .company-list-title .title-decoration {
        width: 20px;
        top: -5px;
        right: -14px;
    }

    .company-list-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .company-list-btn {
        padding: 14px 16px;
        min-height: 60px;
    }

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

    .company-list-description {
        padding: 14px 16px;
        font-size: 13px;
        min-height: unset;
    }

    .company-list-info {
        padding: 14px 16px;
    }

    .company-list-more-btn {
        padding: 14px 40px;
        font-size: 16px;
    }
    .company-list-empty {
        text-align: center;
        font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
        font-size: 16px;
        color: #666;
        padding: 40px 20px;
    }


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

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

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

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

    .fixed-banner {
        width: auto;
        height: auto;
        max-width: 425px;
    }
    .close-banner-btn {
        width: 22px;
        height: 22px;
        top: -8px;
        right: -8px;
    }

    .close-banner-btn svg {
        width: 9px;
        height: 9px;
    }

    /* Privacy Policy Page Responsive */
    .policy-page-title {
        font-size: 24px;
        padding: 15px 20px;
    }

    .policy-intro {
        padding: 20px;
    }

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

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

    .policy-section-title {
        font-size: 17px;
        padding-left: 12px;
    }

    .policy-section-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .policy-subsection-title {
        font-size: 15px;
    }

    .policy-footer {
        margin-top: 40px;
        padding-top: 20px;
    }

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

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

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

    .sitemap-intro p {
        font-size: 14px;
    }

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

    .sitemap-section-title {
        font-size: 17px;
        padding-left: 12px;
    }

    .sitemap-list li {
        padding: 10px 0;
        padding-left: 18px;
    }

    .sitemap-list li a {
        font-size: 14px;
    }
}
/* ==========================================================================
   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;
    }
}