/* ==========================================================================
Responsive Styles
========================================================================== */
@media (max-width: 1199px){
	main{
		width: 100%;
	}
    .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: #EFAD5E !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: #EFAD5E;
        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: #EFAD5E;
        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: #EFAD5E;
        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;
    }
    

    /* 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 Section (Full VW optimized)
========================================================================== */

.hero-section {
    width: 100%;
}

.hero-content {
    /* PC用背景画像 */
    background-image: url('../images/mv_pc.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    /* 1440/731 の比率を維持 */
    aspect-ratio: 1440 / 731;
    position: relative;
    display: flex;
    align-items: flex-start;
    /* 144px / 1440px = 10vw */
    padding-top: 10vw;
    box-sizing: border-box;
}

.hero-text-area {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    padding: 0 2vw;
}

.hero-main-copy {
    /* 60px / 1440px = 4.16vw */
    font-size: 4.16vw;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.4);
    margin-bottom: 1.5vw;
}

.hero-sub-title {
    /* 31.6px / 1440px = 2.2vw */
    font-size: 2.2vw;
    color: #fff;
    letter-spacing: 0.1em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.hero-source {
    position: absolute;
    right: 2vw;
    bottom: 2vw;
    /* 20px / 1440px = 1.38vw */
    font-size: 1.38vw;
    color: #fff; /* 背景が暗い場合を想定して白系に調整 */
    opacity: 0.8;
    text-decoration: underline;
}

/* --- スマホ・タブレット用レスポンシブ（768px以下） --- */
@media screen and (max-width: 768px) {
    .hero-content {
        /* スマホ用の背景画像があれば切り替え、なければ center top などで見え方を調整 */
        /* background-image: url('../images/mv_sp.webp'); */
        background-position: center center;
        
        /* スマホは縦長にするため比率を変更（例: 375/560） */
        aspect-ratio: 375 / 560;
        padding-top: 25vw; /* 上部の余白を広めに */
    }

    .hero-main-copy {
        /* スマホで 28px 相当にする場合: 28/375 = 7.46vw */
        font-size: 7vw; 
        margin-bottom: 3vw;
        padding: 0 2vw;
    }

    .hero-sub-title {
        /* スマホで 16px 相当にする場合: 16/375 = 4.26vw */
        font-size: 4.5vw;
    }

    .hero-source {
        font-size: 3vw; /* スマホで約11px相当 */
        right: 3vw;
        bottom: 3vw;
    }
}

/* --- 超小型デバイス用調整（480px以下） --- */
@media screen and (max-width: 480px) {
    .hero-content {
        aspect-ratio: 375 / 620; /* さらに縦長に */
    }
    .hero-main-copy {
        font-size: 8vw;
    }
}

/* ==========================================================================
INDEX Section Responsive
========================================================================== */
.content-index {
    max-width: 1480px;
    padding: 0 20px;
    margin: 0 auto; /* 中央寄せ */
}

.index-grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid #333; /* 一番上の横線 */
    border-bottom: 1px solid #333; /* 一番下の横線 */
}

.index-grid-item {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 10px;
    min-height: 160px;
    position: relative;
    transition: background-color 0.3s;
    color: #333; /* 文字色の指定 */
}

.index-grid-item:hover {
    background-color: #f9f9f9;
}

.index-grid-text {
    font-size: 18px; /* 少し調整 */
    line-height: 1.4;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.index-grid-text .small {
    font-size: 13px;
    display: inline-block;
    margin-bottom: 5px;
}

/* 縦線の設定（右側） */
.index-grid-item::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background-color: #333;
}

/* 各行の右端の縦線を消す設定 */
/* PC（6列）: 6の倍数番目の右線を消す */
.index-grid-item:nth-child(6n)::after {
    display: none;
}

/* --- タブレットサイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .index-grid-container {
        grid-template-columns: repeat(3, 1fr); /* 3列 */
    }

    /* 6列用の設定を一度リセット */
    .index-grid-item::after {
        display: block;
    }

    /* 3の倍数番目（右端）の縦線を消す */
    .index-grid-item:nth-child(3n)::after {
        display: none;
    }

    /* 3枚目と4枚目の間に横線を入れるための調整（必要に応じて） */
    .index-grid-item:nth-child(n+4) {
        border-top: 1px solid #333;
    }
}

/* --- スマホサイズ（768px以下） --- */
@media screen and (max-width: 768px) {
    .index-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2列 */
    }

    .index-grid-item {
        padding: 30px 5px;
        min-height: 140px;
    }

    .index-grid-text {
        font-size: 15px;
    }

    .index-grid-text .small {
        font-size: 11px;
    }

    /* 縦線のリセットと2列用の設定 */
    .index-grid-item:nth-child(3n)::after {
        display: block; /* 3列用をリセット */
    }

    .index-grid-item:nth-child(2n)::after {
        display: none; /* 2の倍数番目の縦線を消す */
    }

    /* 2列ごとの横線設定 */
    .index-grid-item:nth-child(n+3) {
        border-top: 1px solid #333;
    }
}

/* --- 最小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    .index-grid-item {
        min-height: 120px;
    }
    
    .index-grid-text {
        font-size: 13px;
    }
}

/* ==========================================================================
Brand Concept Section Responsive
========================================================================== */

/* --- タブレットサイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .brand-concept {
        padding: 80px 0 100px;
        background-size: cover; /* 背景の歪みを防ぐ */
    }

    .concept-headline h2 {
        font-size: 48px;
    }
    
    .concept-headline h2 .txt-small {
        font-size: 32px;
    }

    .coop-tag {
        font-size: 24px;
        padding: 8px 30px;
    }

    .company-name {
        font-size: 36px;
    }

    .produced-by {
        font-size: 24px;
    }

    .concept-content {
        gap: 40px;
    }

    .concept-text p {
        font-size: 20px;
    }
}

/* --- スマホサイズ（768px以下） --- */
@media screen and (max-width: 768px) {
    .brand-concept {
        padding: 60px 0 80px;
    }

    /* メイン見出し */
    .concept-headline {
        margin-bottom: 40px;
    }

    .concept-headline h2 {
        font-size: 28px;
        line-height: 1.4;
    }

    .concept-headline h2 .txt-small {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .headline-underline {
        margin-top: 10px;
    }

    /* 取材協力エリア */
    .cooperation-header {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 40px;
    }

    .coop-tag {
        font-size: 16px;
        padding: 6px 20px;
    }

    .company-info {
        text-align: center;
    }

    .company-name {
        font-size: 24px;
    }

    .produced-by {
        font-size: 16px;
    }

    /* コンテンツレイアウト（縦並び） */
    .concept-content {
        grid-template-columns: 1fr; /* 1列に変更 */
        gap: 30px;
    }

    .main-visual figcaption {
        font-size: 14px;
        text-align: right;
    }

    .concept-text {
        text-align: left; /* テキストは左寄せが見やすい */
    }

    .concept-text p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 1.5em;
        /* 改行（<br>）をスマホで無効化したい場合は以下を有効に */
        /* br { display: none; } */
    }
}

/* --- 極小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    .concept-headline h2 {
        font-size: 24px;
    }

    .concept-headline h2 .txt-small {
        font-size: 16px;
    }

    .company-name {
        font-size: 20px;
    }
}

/* ==========================================================================
Company Intro Section Responsive
========================================================================== */

/* --- タブレットサイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .company-intro {
        margin-top: -50px; /* 重なりを少し浅く */
        padding: 100px 0 60px;
        background-size: cover;
    }

    .intro-main-content {
        gap: 40px;
    }

    .company-title {
        font-size: 36px;
    }

    .company-title .sub-name {
        font-size: 24px;
    }

    .coop-label {
        font-size: 22px;
    }

    .intro-desc p {
        font-size: 18px;
    }

    .btn {
        font-size: 20px;
        height: 70px; /* ボタンの高さを少し抑える */
    }
}

/* --- スマホサイズ（768px以下） --- */
@media screen and (max-width: 768px) {
    .company-intro {
        margin-top: -30px; /* 重なりをさらに調整 */
        padding: 80px 0 50px;
    }

    /* レイアウトを縦並びに */
    .intro-main-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    /* テキストエリア */
    .coop-label {
        font-size: 18px;
        padding: 2px 15px;
        margin-bottom: 15px;
    }

    .company-title {
        font-size: 26px;
        line-height: 1.3;
    }

    .company-title .sub-name {
        font-size: 16px;
        display: block;
        margin-top: 10px;
    }

    .gold-line {
        margin: 20px auto; /* 中央寄せ */
        width: 80%; /* 線を少し短く */
    }

    .intro-desc p {
        font-size: 15px;
        text-align: left; /* スマホでは左寄せの方が読みやすい */
    }

    /* 画像エリア */
    .intro-image-box {
        order: -1; /* スマホでは画像が上に来るように（任意） */
    }

    .cite-link {
        font-size: 13px;
        margin-top: 5px;
    }

    /* ボタンエリア */
    .intro-cta-area {
        gap: 15px;
        margin-top: 30px;
    }

    .cta-top-row {
        grid-template-columns: 1fr; /* ボタンを1列に */
        gap: 15px;
    }

    .btn {
        font-size: 15px;
        height: 60px;
        padding: 0 10px;
        box-shadow: inset -5px -5px 5px rgba(0,0,0,0.2); /* 影をスマホ用に弱める */
    }

    /* 装飾画像（スマホでは邪魔になりやすいため小さくするか非表示） */
    .bg-decoration {
        opacity: 0.5;
    }
    .top-left { width: 150px; }
    .bottom-right { width: 180px; }
}

/* --- 極小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    .company-title {
        font-size: 22px;
    }

    .btn {
        font-size: 13px;
        line-height: 1.4;
    }
}

/* ==========================================================================
3つの要素セクション レスポンシブ
========================================================================== */

/* --- タブレットサイズ（1200px以下） --- */
@media screen and (max-width: 1200px) {
    .elements-header h2 {
        font-size: 48px;
    }

    /* 白い背景ボックスのサイズを画面幅に追従させる */
    .element-row::before {
        width: 95%;
        left: 2.5%;
    }
    
    .element-row.reverse::before {
        right: 2.5%;
    }

    .element-content {
        padding: 40px 20px;
    }
}

/* --- 中間サイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .elements-section {
        padding: 80px 0;
    }

    .elements-header h2 {
        font-size: 36px;
    }

    .header-lead {
        font-size: 18px;
    }

    .element-content h3 {
        font-size: 24px;
    }

    .element-content p {
        font-size: 18px;
    }
}

/* --- スマホサイズ（768px以下） --- */
@media screen and (max-width: 768px) {
    .elements-section {
        padding: 60px 0;
        margin-top: -1px; /* 隙間調整 */
    }

    /* ヘッダー */
    .elements-header {
        margin-bottom: 40px;
    }

    .elements-header h2 {
        font-size: 26px;
        line-height: 1.4;
    }

    .elements-header h2 .txt-small {
        font-size: 15px;
    }

    .header-lead {
        font-size: 15px;
        line-height: 1.7;
        text-align: justify;
    }

    /* リストのレイアウトを縦並びに */
    .elements-list {
        gap: 60px;
    }

    .element-row, 
    .element-row.reverse {
        flex-direction: column; /* 全て縦並び */
        align-items: center;
        gap: 0;
    }

    /* 白い背景ボックスをスマホ用に再設定 */
    .element-row::before,
    .element-row.reverse::before {
        width: 100%;
        height: 70%; /* 下半分を白くする */
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* 画像エリア */
    .element-visual {
        width: 100%;
        flex: none;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .element-visual .cite-text,
    .element-row.reverse .element-visual .cite-text {
        font-size: 12px;
        padding: 5px 0;
        text-align: right;
    }
    .cite-text.pc-only{
        display: none;
    }

    /* テキストエリア */
    .element-content,
    .element-row.reverse .element-content {
        width: 100%;
        flex: none;
        padding: 40px 20px 30px;
        text-align: center;
    }

    .element-content p {
        font-size: 15px;
        text-align: left; /* 長文は左寄せ */
        margin: 0 auto;
    }

    /* 数字画像（位置をタイトルの上に） */
    .number-img,
    .reverse .number-img,
    .number-img-3 {
        top: -300px;
        left: auto;
        right: 0;
        margin: 0 auto 15px;
        width: 60px;
    }

    .element-content h3 {
        font-size: 20px;
        margin-bottom: 20px;
        line-height: 1.4;
    }
}

/* --- 極小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    .elements-header h2 {
        font-size: 22px;
    }
    
    .element-content h3 {
        font-size: 18px;
    }
}


/* ==========================================================================
Recommendation Section レスポンシブ
========================================================================== */

/* --- タブレットサイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .recommendation-section {
        padding: 120px 0 150px;
        background-size: cover;
    }

    .upper-header .main-title {
        font-size: 36px;
    }

    .upper-header .small-title {
        font-size: 24px;
    }

    .upper-layout {
        padding: 0;
        gap: 30px;
    }

    .upper-text p {
        font-size: 20px;
    }

    /* PRカード */
    .pr-header h3 {
        font-size: 36px;
    }
    
    .pr-header .txt-small {
        font-size: 24px;
    }

    .check-list li {
        font-size: 20px;
    }
}

/* --- スマホサイズ（768px以下） --- */
@media screen and (max-width: 768px) {
    .recommendation-section {
        padding: 80px 0 100px;
    }

    /* 上部エリア：縦並び */
    .upper-header {
        margin-bottom: 30px;
    }

    .upper-header .main-title {
        font-size: 24px;
        line-height: 1.4;
    }

    .upper-header .small-title {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .upper-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .upper-text p {
        font-size: 15px;
        margin-bottom: 1.5em;
        text-align: left; /* 文章は左寄せ */
    }

    .upper-image figcaption {
        font-size: 13px;
    }

    /* 連結画像（recommendationの文字画像） */
    .connector-visual {
        width: 180px;
        right: 20px;
        top: -90px; /* 位置をスマホ用に調整 */
    }

    /* PRカード */
    .pr-card {
        margin-top: 80px;
        padding: 40px 20px 30px;
    }

    .pr-label {
        font-size: 14px;
        top: 15px;
        left: 15px;
    }

    .pr-header {
        margin-bottom: 30px;
    }

    .pr-header h3 {
        font-size: 22px;
    }

    .pr-header .txt-small {
        font-size: 15px;
        display: block;
        margin-bottom: 8px;
    }

    /* PRボディ：縦並び */
    .pr-body {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .check-list li {
        font-size: 16px;
        padding-left: 28px;
        margin-bottom: 12px;
        line-height: 1.5;
    }

    .check-list li::before {
        font-size: 16px;
    }

    .pr-image-area figcaption {
        font-size: 13px;
    }

    /* ボタン：縦並び */
    .pr-buttons {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .pr-buttons .btn {
        font-size: 15px;
        height: 60px;
    }
}

/* --- 極小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    .upper-header .main-title {
        font-size: 20px;
    }

    .pr-header h3 {
        font-size: 19px;
    }

    .connector-visual {
        width: 140px;
        top: -70px;
    }
}

/* ==========================================================================
施工事例セクション レスポンシブ
========================================================================== */

/* --- タブレットサイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .case-gallery {
        padding-bottom: 80px;
    }

    .gallery-header h2 {
        font-size: 48px;
        margin-bottom: 60px;
    }

    .gallery-header .txt-small {
        font-size: 32px;
    }

    .case-label {
        font-size: 24px;
        padding: 10px;
    }

    .case-wrapper {
        margin-bottom: 120px;
    }
}

/* --- スマホサイズ（768px以下） --- */
@media screen and (max-width: 768px) {
    .case-gallery {
        padding-bottom: 60px;
    }

    /* ヘッダー */
    .gallery-header {
        margin-bottom: 30px;
    }

    .bird-icon {
        width: 100px; /* 鳥のアイコンを小さく */
        margin: 0 auto 10px; /* 中央寄せに */
        text-align: center;
    }

    .gallery-header h2 {
        font-size: 28px;
        margin-bottom: 40px;
        line-height: 1.3;
    }

    .gallery-header .txt-small {
        font-size: 18px;
        display: block;
    }

    /* 事例ごとの塊 */
    .case-wrapper {
        margin-bottom: 80px; /* 事例間の余白を調整 */
    }

    .case-label {
        font-size: 16px; /* ラベルをスマホサイズに */
        padding: 8px 5px;
        letter-spacing: 0.05em;
        line-height: 1.4;
    }

    /* 画像エリア */
    .main-display {
        margin-bottom: 10px; /* サムネイルとの隙間 */
    }

    .thumbnail-grid {
        gap: 10px; /* サムネイル同士の隙間を狭く */
    }

    .cite-text {
        font-size: 12px;
        margin-top: 8px;
    }

    /* ボタン */
    .gallery-footer .btn {
        font-size: 14px;
        height: 55px; /* 高さを少し抑える */
        padding: 0 15px;
        margin-top: 15px;
        width: 100%; /* 横幅いっぱい */
        max-width: none;
    }
}

/* --- 極小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    .gallery-header h2 {
        font-size: 24px;
    }

    .case-label {
        font-size: 14px;
    }

    .case-wrapper {
        margin-bottom: 60px;
    }
}

/* ==========================================================================
House Concept Section レスポンシブ
========================================================================== */

/* --- タブレットサイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .house-concept {
        padding: 120px 0 80px;
        background-size: cover;
    }

    .house-concept .section-title {
        font-size: 42px;
    }

    .house-concept .section-title .txt-small {
        font-size: 32px;
    }

    .house-illust {
        width: 200px;
        right: -100px;
        top: -50px;
    }

    .section-lead {
        font-size: 20px;
    }

    .bg-num {
        font-size: 120px;
    }

    .title-wrap h3 {
        font-size: 26px;
        padding-bottom: 60px;
    }

    .item-text p {
        font-size: 18px;
    }
}

/* --- スマホサイズ（768px以下） --- */
@media screen and (max-width: 768px) {
    .house-concept {
        padding: 80px 0 60px;
    }

    /* タイトルエリア */
    .section-title-area {
        margin-bottom: 40px;
    }

    .house-concept .section-title {
        font-size: 26px;
        margin-bottom: 30px;
        display: block; /* 中央寄せしやすく */
    }

    .house-concept .section-title .txt-small {
        font-size: 16px;
    }

    .house-illust {
        position: relative; /* 浮かせず並べる */
        right: auto;
        top: 0;
        width: 120px;
        display: block;
        margin: 10px auto 0;
    }

    .section-lead {
        font-size: 15px;
        line-height: 1.7;
    }

    /* アイテムのレイアウトを縦並びに */
    .house-concept-item,
    .house-concept-item.reverse {
        flex-direction: column;
        padding-top: 40px;
        padding-bottom: 30px;
    }

    .item-text, .item-visual {
        width: 100%;
        flex: none;
    }

    /* 数字とタイトルの調整 */
    .title-wrap {
        margin-bottom: 20px;
        padding-top: 40px;
    }

    .bg-num {
        font-size: 80px; /* 小さく */
        top: 0;
    }

    .title-wrap h3 {
        font-size: 20px;
        padding-bottom: 20px; /* 余白を詰める */
        line-height: 1.4;
    }

    .item-text p {
        font-size: 15px;
        padding: 0; /* 左右のパディングを解除 */
        text-align: left;
    }

    .item-visual {
        margin-top: 20px;
    }

    /* 装飾（植物）の非表示または調整 */
    .deco-flower-top,
    .deco-flower-bottom {
        display: none; /* スマホでは画面外にはみ出すため非表示を推奨 */
    }

    /* CTAボタンエリア */
    .concept-cta {
        margin-top: 40px;
        gap: 15px;
    }

    .btn-sub-row {
        grid-template-columns: 1fr; /* 1列に */
        gap: 15px;
    }

    .btn {
        font-size: 15px;
        height: 65px;
        padding: 0 15px;
    }
}

/* --- 極小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    .house-concept .section-title {
        font-size: 22px;
    }
    
    .title-wrap h3 {
        font-size: 18px;
    }

    .bg-num {
        font-size: 60px;
    }
}


/* ==========================================================================
Customer Voice Section レスポンシブ
========================================================================== */

/* --- タブレットサイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .customer-voice {
        padding: 120px 0 100px;
        background-size: cover;
        background-position: bottom;
    }

    .voice-title .sub-title {
        font-size: 48px;
    }

    .voice-title .main-title {
        font-size: 32px;
    }

    .voice-card {
        padding: 40px 30px;
        gap: 30px;
    }

    .voice-left {
        flex: 0 0 300px; /* 左側の幅を少し狭く */
    }

    .voice-card-title {
        font-size: 20px;
    }

    .avatar {
        width: 150px;
        height: 150px;
    }

    .rating {
        font-size: 28px;
    }
}

/* --- スマホサイズ（768px以下） --- */
@media screen and (max-width: 768px) {
    .customer-voice {
        padding: 80px 0 60px;
        margin-top: -30px;
    }

    /* ヘッダー */
    .voice-header {
        margin-bottom: 40px;
    }

    .voice-title .sub-title {
        font-size: 24px;
        margin-bottom: 5px;
    }

    .voice-title .main-title {
        font-size: 20px;
    }

    /* 口コミカードを縦並びに */
    .voice-list {
        gap: 30px;
    }

    .voice-card {
        flex-direction: column; /* 縦並び */
        padding: 30px 20px;
        border-radius: 30px; /* 角丸を少し控えめに */
        gap: 20px;
    }

    .voice-left {
        flex: none;
        width: 100%;
    }

    .voice-card-title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .avatar {
        width: 120px;
        height: 120px;
        margin-bottom: 15px;
    }

    .rating {
        font-size: 24px;
    }

    /* カード右側（文章エリア） */
    .voice-right p {
        font-size: 15px;
        line-height: 1.6; /* 1.2だとスマホでは詰まりすぎるので少し広げる */
        text-align: left;
    }

    .source {
        margin-top: 15px;
        font-size: 11px;
    }

    /* ボタンエリアを縦1列に */
    .voice-cta {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .voice-cta .btn {
        font-size: 15px;
        height: 60px;
    }
}

/* --- 極小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    .voice-title .sub-title {
        font-size: 20px;
    }

    .voice-title .main-title {
        font-size: 18px;
    }

    .voice-card-title {
        font-size: 16px;
    }
}

/* ==========================================================================
Company & Studio Section レスポンシブ
========================================================================== */

/* --- タブレットサイズ（1200px以下） --- */
@media screen and (max-width: 1200px) {
    .overlap-img-top,
    .large-visual {
        right: 0; /* はみ出しを解消 */
        width: 100%;
    }
    
    .overlap-img-top {
        position: relative;
        top: 0;
        margin-top: 20px;
    }

    .large-visual {
        position: relative;
        top: 0;
        margin-top: 20px;
    }

    .intro-description {
        margin-top: 50px;
    }
}

/* --- 中間サイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .company-studio-section {
        padding-top: 80px;
    }

    .intro-header .main-title {
        font-size: 48px;
    }

    .box-title {
        font-size: 36px;
    }

    .brand-name {
        font-size: 42px;
    }

    .card-header {
        font-size: 32px;
        padding: 20px 0;
    }

    .studio-details {
        padding: 30px;
    }
}

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

    /* イントロヘッダー */
    .intro-header .sub-title {
        font-size: 20px;
    }
    .intro-header .main-title {
        font-size: 28px;
    }
    .tree-deco {
        width: 120px;
        top: -60px;
    }

    /* 重なりエリアの解除 */
    .overlap-box-wrapper {
        display: flex;
        flex-direction: column;
    }

    .grey-box {
        padding: 25px 20px;
        order: 1;
    }
    .box-sub { font-size: 16px; }
    .box-title { font-size: 22px; }

    .company-brand {
        padding: 20px;
        order: 2;
    }
    .brand-name { font-size: 28px; }
    .brand-sub { font-size: 16px; }

    .overlap-img-top {
        order: 3;
        margin-top: 0;
    }
    .large-visual {
        order: 4;
        width: 100%;
        margin-top: 10px;
    }

    .intro-description {
        font-size: 15px;
        margin-top: 30px;
        margin-bottom: 40px;
        text-align: left;
    }

    /* メリットエリア（4つのアイコン） */
    .benefit-row {
        grid-template-columns: repeat(2, 1fr); /* 2列2行に */
        gap: 20px 10px;
        padding: 20px 10px;
    }
    .benefit-row::before {
        display: none; /* スマホでは背景画像が合わないため非表示 */
    }
    .benefit-item {
        background: #FCF7ED; /* 代わりの背景色 */
        padding: 15px 5px;
        border-radius: 10px;
    }
    .b-icon img { width: 50px; }
    .b-bubble { font-size: 13px; }

    /* スタジオカード */
    .studios-grid {
        grid-template-columns: 1fr; /* 1列に */
        gap: 40px;
    }
    .card-header {
        font-size: 24px;
    }
    .studio-photo img {
        height: 250px;
    }
    .studio-details {
        font-size: 14px;
        padding: 20px;
    }
    .studio-card-body .btn{
        max-width: 90%;
    }

    /* 全体CTA */
    .final-cta {
        margin-top: 40px;
    }
    .cta-row {
        grid-template-columns: 1fr;
    }
    .btn {
        font-size: 15px;
        height: 60px;
    }
}

/* --- 極小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    .intro-header .main-title {
        font-size: 24px;
    }
    .brand-name {
        font-size: 24px;
    }
}

/* ==========================================================================
FAQ Section Responsive
========================================================================== */

/* --- タブレットサイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .faq {
        padding: 100px 0 0 0;
    }

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

    .faq-title span {
        font-size: 48px;
    }

    .faq-inner {
        max-width: 1000px;
    }
}

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

    .faq-header {
        margin-bottom: 30px;
    }

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

    .faq-title span {
        font-size: 28px;
    }

    /* リストの間隔 */
    .faq-list {
        gap: 15px;
    }

    .faq-item {
        border-radius: 20px; /* 角丸を少し小さく */
    }

    /* 質問部分 */
    .faq-q {
        padding: 20px 15px;
        align-items: flex-start; /* 長文のとき上に揃える */
    }

    .q-prefix {
        width: 36px;
        height: 36px;
        min-width: 36px; /* 潰れないように固定 */
        font-size: 20px;
        margin-right: 12px;
        padding-bottom: 4px;
    }

    .q-text {
        font-size: 15px;
        line-height: 1.5;
        padding-right: 25px; /* アイコンとの重なり防止 */
    }

    .faq-icon {
        right: 15px;
        top: 30px; /* 縦位置を中央付近に固定 */
        width: 16px;
    }

    .faq-icon::after {
        height: 16px;
    }

    /* 回答部分 */
    .a-inner {
        padding: 20px 15px 25px;
    }

    .a-inner::before {
        left: 15px;
        right: 15px;
    }

    .a-prefix {
        font-size: 22px;
        margin-right: 12px;
        line-height: 1.5;
    }

    .a-text {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* --- 極小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    .faq-title {
        font-size: 18px;
    }

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

    .q-text {
        font-size: 14px;
    }
}

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

/* --- タブレットサイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .section-recent-posts {
        padding-top: 100px;
    }

    .recent-posts-title {
        font-size: 36px;
    }

    .recent-posts-container {
        grid-template-columns: repeat(2, 1fr); /* 2列×2行に変更 */
        gap: 30px 20px;
    }

    .article-title {
        font-size: 15px;
    }
}

/* --- スマホサイズ（768px以下） --- */
@media screen and (max-width: 768px) {
    .section-recent-posts {
        padding-top: 60px;
        padding-left: 15px;
        padding-right: 15px;
    }

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

    .recent-posts-title {
        font-size: 26px;
    }

    /* 2列を維持しつつ余白を調整 */
    .recent-posts-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }

    .article-thumbnail {
        margin-bottom: 12px; /* サムネイル下の余白を詰める */
    }

    .article-title {
        font-size: 14px;
        line-height: 1.4;
        /* 行数を制限したい場合は以下を有効に（2行で省略） */
        /*
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        */
    }
}

/* --- 極小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    /* 記事タイトルが長い場合、1列にしたほうが読みやすい場合はこちら */
    /*
    .recent-posts-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    */
    
    .recent-posts-title {
        font-size: 22px;
    }
}











/* ==========================================================================
Company List Section
========================================================================== */
.company-list-section {
    padding: 200px 0 56px;
    background-color: #fff;
}

.company-list-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 20px; /* ここで左右20pxの余白を確保 */
}


/* ==========================================================================
レスポンシブ設定
========================================================================== */

/* タブレットサイズ（1024px以下） */
@media (max-width: 1024px) {
    .company-list-section {
        padding: 100px 0 50px;
    }
    .company-list-grid {
        grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
        gap: 25px;
    }
    .company-list-title {
        font-size: 32px;
    }
    .company-list-title .title-sub {
        font-size: 24px;
    }
}

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

    .company-list-container {
        padding: 0 20px; /* ご要望の左右20px余白 */
    }

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

    .company-list-title {
        font-size: 24px;
        line-height: 1.3;
    }

    .company-list-title .title-sub {
        font-size: 16px;
        margin-bottom: 0;
    }

    /* グリッドを縦1列に変更 */
    .company-list-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 30px;
    }

    /* カードタイトルの調整 */
    .company-card .card-header {
        padding: 20px 15px;
        min-height: 70px;
    }

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

    /* カード内部テキストの調整 */
    .company-card .card-body {
        padding: 20px 15px;
    }

    .info-group {
        margin-bottom: 20px;
    }

    .info-label {
        font-size: 15px;
        margin-bottom: 5px;
    }

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

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

    /* 詳細ボタンの調整 */
    .company-info-btn {
        width: 100%; /* スマホでは幅いっぱいに */
        font-size: 15px;
        padding: 15px 0;
    }

    /* もっと見るボタン */
    .btn-more-navy {
        width: 100%;
        padding: 15px;
        font-size: 15px;
    }
}

/* 480px以下の極小画面 */
@media (max-width: 480px) {
    .company-list-title {
        font-size: 20px;
    }
    .company-list-title .title-sub {
        font-size: 14px;
    }
}


/* ==========================================================================
レスポンシブ設定
========================================================================== */

/* タブレット・スマホ共通（1024px以下） */
@media (max-width: 1024px) {
    .footer-top-wrapper {
        padding: 80px 0 60px; /* 上下の大きな余白を縮小 */
    }

    .footer-top-container {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center;
        gap: 40px; /* コラム間の隙間 */
        padding-top: 0;
    }

    .footer-column {
        width: 100%;
        max-width: 600px; /* 広がりすぎないように制限 */
    }

    .footer-disclaimer {
        font-size: 18px; /* 24pxから縮小 */
        padding: 0 20px;
    }
}

/* スマホサイズ（767px以下） */
@media (max-width: 767px) {
    .footer-top-wrapper {
        padding: 60px 0 40px;
    }

    /* 左右20pxの余白を確保 */
    .footer-top-container {
        padding: 0 20px 40px;
    }

    .footer-column {
        width: 100%;
    }

    .footer-section-title {
        font-size: 18px;
        text-align: center; /* スマホではタイトルを中央に */
    }

    .footer-article-list a, 
    .footer-company-links a {
        font-size: 15px;
    }

    /* 免責事項 */
    .footer-disclaimer {
        font-size: 14px; /* スマホに適したサイズ */
        line-height: 1.6;
        padding: 0 20px;
    }

    /* 下部ナビゲーションとコピーライト */
    .footer-container {
        padding: 30px 20px;
    }

    .footer-menu {
        flex-direction: column; /* メニューが横並びの場合は縦にする */
        align-items: center;
        gap: 15px;
        padding: 0;
        margin-bottom: 20px;
    }

    .footer-menu li {
        margin: 0;
        font-size: 14px;
    }

    .copyright {
        font-size: 12px;
        text-align: center;
    }
}

/* 480px以下 */
@media (max-width: 480px) {
    .footer-section-content {
        padding: 15px; /* 白い箱の中の余白を少し詰める */
    }
    
    .footer-article-list, 
    .footer-company-links {
        gap: 15px; /* リストの間隔を少し詰める */
    }
}


/* ==========================================================================
Footer Disclaimer Responsive
========================================================================== */

/* --- タブレットサイズ（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .footer-bottom-disclaimer {
        padding: 60px 40px; /* 左右の余白を縮小 */
    }

    .footer-disclaimer {
        font-size: 20px; /* 文字を少し小さく */
    }
}

/* --- スマホサイズ（768px以下） --- */
@media screen and (max-width: 768px) {
    .footer-bottom-disclaimer {
        padding: 40px 15px; /* スマホ用の余白 */
    }

    .disclaimer-box {
        padding: 15px; /* ボックス内の余白を微調整 */
    }

    .footer-disclaimer {
        font-size: 14px; /* 免責事項として読みやすいサイズに */
        line-height: 1.6;
        text-align: left; /* 長文の場合、スマホでは左寄せの方が見やすい */
    }
}

/* --- 極小サイズ（480px以下） --- */
@media screen and (max-width: 480px) {
    .footer-disclaimer {
        font-size: 13px;
    }
}


/* ==========================================================================
   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;
    }
}