/* ==========================================================================
Responsive Styles
========================================================================== */
@media (max-width: 1199px){
	main{
		width: 100%;
    }
}



/* 業者一覧セクション レスポンシブ */
@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;
        box-shadow: 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: #F38D00 !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: #F38D00;
        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: #F38D00;
        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: #F38D00;
        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;
    }
}

/* --- ボタンのレスポンシブ --- */
@media screen and (max-width: 767px) {
    .btn, .btn.--wide {
        width: 100%;
        max-width: 400px;
        font-size: 15px;
        height: 60px;
    }
}


/* ==========================================================================
   FV Section - Full Responsive VW Layout
   ========================================================================== */

/* --- SP Layout (Base 375px) --- */
@media screen and (max-width: 768px) {
    .fv {
        aspect-ratio: 375 / 600; 
        background-position: center;
        background: url(../images/mv_sp.webp) no-repeat;
        background-size: cover;
    }

    .fv__content {
        /* 中央配置 */
        top: 15vw; 
        left: 50%;
        transform: translateX(-50%);
        width: 90vw; /* 横幅を確保 */
    }

    .fv__roof-icon {
        width: 60vw; /* スマホでは屋根を大きく */
        margin-bottom: 2vw;
    }

    .fv__area-text {
        font-size: 4.2vw; /* 約16px */
    }

    .fv__lead .fv__title-serif {
        font-size: 14vw; /* スマホで目立たせる */
    }

    .fv__sub-box {
        width: 100%;
        padding: 2vw 0;
        margin: 4vw 0;
    }

    .fv__sub-text {
        font-size: 4vw; /* 約15px */
    }

    .fv__num {
        font-size: 6vw;
    }

    .fv__main-title {
        font-size: 8vw; /* 約30px */
        width: 100%;
        white-space: normal; /* 折り返しを許可 */
    }
}

/* ==========================================================================
   INDEX Section - Responsive (Mobile)
   ========================================================================== */

@media screen and (max-width: 768px) {
    .nav-index {
        padding: 0; /* スマホでは上下の余白をタイトに */
    }

    .nav-index__inner {
        padding: 0; /* 画面端まで背景色を広げる */
    }

    .nav-index__list {
        flex-direction: column; /* 縦並びに変更 */
    }

    .nav-index__item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 項目間の境界線 */
        width: 100%;
    }

    .nav-index__item:last-child {
        border-bottom: none;
    }

    .nav-index__link {
        flex-direction: row; /* 横並びレイアウトに変更 */
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 18px 20px;
        min-height: 70px;
    }

    .nav-index__link br {
        display: none; /* スマホでは改行を解除して一行でスッキリ見せる */
    }

    /* テキストエリアの調整 */
    .nav-index__area {
        font-size: 11px;
        margin-bottom: 2px;
        display: none;
    }

    .nav-index__label {
        font-size: 15px;
        line-height: 1.4;
    }

    /* 右下のアクセント画像（スマホ用にリサイズ・再配置） */
    .nav-index__line {
        position: relative; /* absoluteを解除 */
        bottom: auto;
        right: auto;
        width: 40px; /* 少し小さく */
        margin-left: 15px;
        flex-shrink: 0;
    }
}

/* 小さなスマホ（375px以下）用の微調整 */
@media screen and (max-width: 375px) {
    .nav-index__label {
        font-size: 14px;
    }
    .nav-index__area {
        font-size: 10px;
    }
}

/* ==========================================================================
   About Section - Responsive
   ========================================================================== */

@media screen and (max-width: 1024px) {
    .about__inner {
        padding: 0 25px; /* タブレットサイズで余白を少し詰める */
    }
    .about__btn {
        width: 100%; /* ボタンを可変に */
        max-width: 610px;
    }
}

@media screen and (max-width: 768px) {
    .about {
        padding: 40px 0 50px;
    }

    .about__flex {
        flex-direction: column-reverse; /* 画像を文章の上に配置する場合（推奨） */
        /* flex-direction: column; 文章を上にするならこちら */
        gap: 30px;
        margin-bottom: 40px;
    }

    /* テキストエリア */
    .about__text-content {
        text-align: left; /* 左揃えを維持 */
    }

    .about__quotes {
        margin-bottom: 30px;
    }

    .about__quotes p,
    .about__description p {
        font-size: 15px; /* スマホで見やすいサイズに微調整 */
        line-height: 1.7;
        margin-bottom: 20px;
    }

    /* 画像エリア */
    .about__image-wrap {
        width: 100%; /* 固定幅434pxを解除 */
        max-width: 500px; /* 広がりすぎ防止 */
        margin: 0 auto; /* 中央寄せ */
    }

    /* 下部CTAボタン */
    .about__btn {
        width: 100%; /* 610px固定を解除 */
        height: auto;
        padding: 20px 15px;
        font-size: 18px; /* 文字サイズ調整 */
    }

    .about__btn .txt-small {
        font-size: 14px; /* 上の小文字も調整 */
        margin-bottom: 5px;
    }
}

/* 小さなスマホ用（375px以下） */
@media screen and (max-width: 375px) {
    .about__btn {
        font-size: 16px;
    }
    .about__btn .txt-small {
        font-size: 12px;
    }
}

/* ==========================================================================
   Comparison Table - Responsive Only (Label Width Adjusted)
   ========================================================================== */

@media screen and (max-width: 768px) {
    .comp-table {
        padding: 40px 0 60px;
    }

    .comp-table__inner {
        padding: 0; /* 画面端までスクロール領域を広げる */
    }

    /* ヘッダーエリアの調整 */
    .comp-table__header {
        padding: 0 20px;
        margin-bottom: 30px;
    }

    .comp-table__bubble {
        font-size: 13px;
        padding: 10px 15px;
        width: 100%;
        max-width: 320px;
    }

    .comp-table__bubble span {
        font-size: 16px;
    }

    .comp-table__bubble::before {
        width: 100%;
        height: 60px;
        bottom: -5px;
    }

    .comp-table__main-title {
        font-size: 20px;
        line-height: 1.3;
    }

    .comp-table__num {
        font-size: 40px;
    }

    /* --- スクロールテーブル本体 --- */
    .comp-table__scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comp-table__container {
        min-width: 1138px; /* テーブル自体のサイズは維持 */
    }

    /* ラベル幅をスマホのみ「100px」に絞って左端固定 */
    .comp-table__label {
        width: 100px !important; 
        font-size: 12px;
        padding: 15px 5px;
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 10;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

    .comp-table__label.--empty {
        background-color: #F3F1EB; /* 背景色に合わせて透けないように */
    }

    /* データセルの文字サイズ微調整 */
    .comp-table__cell.--data p {
        font-size: 12px;
        line-height: 1.5;
    }

    .comp-table__symbol {
        font-size: 24px;
        margin-bottom: 10px;
    }

    /* ボタンをセル幅に合わせて調整 */
    .comp-table__cell.--btn-cell {
        padding: 20px 10px;
    }

    .comp-table__cell .btn {
        width: 100% !important;
        max-width: 260px;
        font-size: 13px;
        height: auto;
        padding: 10px 5px;
    }
}
/* ==========================================================================
   Points Section - Responsive (Mobile)
   ========================================================================== */

@media screen and (max-width: 768px) {
    .points {
        padding: 60px 0 80px; /* 上下の余白をスマホ用に圧縮 */
    }

    .points__inner {
        padding: 0 20px;
    }

    /* ヘッダーエリア */
    .points__header {
        margin-bottom: 40px;
    }

    .points__lead {
        font-size: 16px; /* スマホで読みやすいサイズ */
        margin-bottom: 5px;
    }

    .points__main-title {
        font-size: 22px;
        line-height: 1.4;
    }

    .points__main-title-num {
        font-size: 40px;
    }

    .points__header-line img {
        width: 100%; /* 下線を画面幅に合わせる */
        max-width: 320px;
        margin: 0 auto;
    }

    /* リスト全体の調整 */
    .points__list {
        gap: 60px; /* アイテム間の距離を調整 */
    }

    /* フレックス解除と順番の整理 */
    .points__content {
        flex-direction: column !important; /* 常に縦並び */
        align-items: center;
        gap: 0;
    }

    /* タイトル */
    .points__item-title {
        font-size: 20px;
        margin-bottom: 15px;
        justify-content: flex-start; /* 左寄せ固定 */
        width: 100%;
    }

    .points__item-title .num {
        font-size: 36px;
    }

    /* 画像：テキストの上に配置し、ズレをリセット */
    .points__image {
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 15px;
        order: 1; /* タイトルの次、テキストの前 */
    }

    /* テキストボックス：突き出し背景を解除 */
    .points__text-box {
        width: 100%;
        padding: 25px 20px;
        margin-top: 0 !important;
        order: 2;
    }

    /* PC版の70px突き出し背景を非表示にする */
    .points__text-box::after {
        display: none;
    }

    .points__text-box h4 {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .points__text-box p {
        font-size: 15px;
        line-height: 1.7;
    }

    /* 偶数番目の反転レイアウトをリセット */
    .points__item:nth-child(even) .points__content {
        flex-direction: column !important;
    }

    /* ラッパーのズレもリセット */
    .points__text-box-wrapper,
    .point__text-box-wrapper {
        width: 100%;
        margin-top: 0 !important;
    }
}

/* 小さなスマホ（375px以下）用 */
@media screen and (max-width: 375px) {
    .points__main-title {
        font-size: 20px;
    }
    .points__item-title {
        font-size: 18px;
    }
}

/* ==========================================================================
   Introduction & Detail - Responsive (Mobile)
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* --- 共通ヘッダー (枠線) --- */
    .introduction-inner {
        padding: 0 20px;
    }

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

    .intro-header__box {
        padding: 25px 15px;
    }

    .intro-header__box::before,
    .intro-header__box::after {
        width: 30px;
        height: 30px;
        top: -15px;
        left: -15px;
    }

    .intro-header__box::after {
        bottom: -15px;
        right: -15px;
        top: auto;
        left: auto;
    }

    .intro-header__sub {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .intro-header__main {
        font-size: 20px;
        line-height: 1.4;
    }

    /* --- 各社詳細エリア --- */
    .intro-detail {
        padding: 60px 0 100px; /* 余白を縮小 */
    }

    .intro-detail__inner {
        padding: 0 20px;
    }

    /* 会社名：左右の線を非表示にして縦積みに */
    .intro-detail__header {
        margin-bottom: 30px;
    }

    .intro-detail__company-name {
        font-size: 26px; /* 文字サイズ調整 */
        flex-direction: column;
        gap: 5px;
    }

    .intro-detail__company-name span {
        font-size: 18px;
    }

    .intro-detail__company-name::before,
    .intro-detail__company-name::after {
        display: none; /* スマホでは線を消してスッキリさせる */
    }

    /* メイン画像：固定幅をすべて解除 */
    .intro-detail__main-img {
        width: 100% !important; /* nets, homes, ichijo すべて上書き */
        margin-bottom: 50px;
    }

    .intro-detail__citation {
        font-size: 11px;
        bottom: -20px;
    }

    /* 突き刺さるラインの見出し */
    .intro-detail__sub-header {
        padding-left: 15px;
        margin-bottom: 40px;
    }

    .intro-detail__sub-header-line {
        width: 1000px; /* 画面左端から伸ばす設定は維持 */
        left: -965px;
    }
    .--gray .intro-detail__sub-header-line{
        width: 1000px;
        left: -965px;
    }

    .intro-detail__sub-header-box {
        padding: 12px 15px 12px 30px; /* 余白をスマホ用に */
    }
    .--gray .intro-detail__sub-header-box {
        padding: 12px 15px 12px 30px; /* 余白をスマホ用に */
    }

    .intro-detail__sub-header-box h3 {
        font-size: 18px;
    }

    /* 特徴カード：3枚横並びを縦1列に */
    .intro-detail__cards {
        grid-template-columns: 1fr;
        gap: 40px; /* カード間の距離 */
    }

    .intro-detail__card {
        padding-top: 25px; /* テープの高さを調整 */
    }

    .intro-detail__tape {
        width: 140px; /* テープをスマホサイズに縮小 */
        height: 40px;
    }
    .intro-detail__recommend-tape{
        width: 120px;
        top: -10px;
    }

    .intro-detail__card-content {
        padding: 30px 20px;
    }

    .intro-detail__card-header p {
        font-size: 15px;
    }

    .intro-detail__card-img img {
        width: 100%; /* 画像をカード幅いっぱいに */
        max-width: 280px;
        height: auto;
    }

    .intro-detail__card-text {
        font-size: 14px;
        padding: 0; /* スマホでは左右パディングを抜いて可読性アップ */
    }

    /* こんな人に向いてますエリア */
    .intro-detail__recommend-box {
        padding: 40px 15px;
    }

    .intro-detail__recommend-title {
        font-size: 20px;
        gap: 10px;
    }

    .leaf-icon {
        width: 35px;
    }

    .intro-detail__recommend-list {
        grid-template-columns: 1fr; /* 2列から1列へ */
        padding: 0;
        gap: 25px;
    }

    .recommend-icon {
        width: 60px; /* アイコンを少し小さく */
    }

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

    /* ボタンエリア */
    .intro-detail__recommend-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .btn.--wide {
        width: 100% !important; /* ボタンを横幅いっぱいに */
        max-width: 336px;
    }
}
/* レスポンシブ：スマホ */
@media screen and (max-width: 1024px) {
    .intro-detail__recommend-list {
        grid-template-columns: 1fr;
    }
    .intro-detail__floating-name {
        font-size: 80px;
    }
    .intro-detail__recommend-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* ==========================================================================
   Works Section V2 - Responsive (Mobile)
   ========================================================================== */

@media screen and (max-width: 768px) {
    .works-v2 {
        padding: 80px 0 60px; /* 上下の余白を圧縮 */
    }

    /* はみ出し文字の調整 */
    .intro-detail__floating-name {
        font-size: 48px; /* スマホサイズに縮小 */
        top: -15px;
        right: 15px;
    }

    .works-v2__inner {
        padding: 0 15px;
    }

    /* リストの並び */
    .works-v2__list {
        gap: 60px;
    }

    /* 各アイテムのボックス調整 */
    .works-v2__item {
        margin: 0 !important; /* PC版の左右マージンを解除 */
        padding: 35px 10px 15px; /* バッジ用の余白を確保しつつタイトに */
    }

    /* 縦並びに変更 */
    .works-v2__flex {
        flex-direction: column !important;
        gap: 15px;
    }

    /* メイン画像 */
    .works-v2__main {
        width: 100%;
    }

    .works-v2__main img {
        aspect-ratio: 16 / 10; /* スマホで見やすい比率に微調整 */
    }

    /* バッジ（WORK 01 等）のリサイズと再配置 */
    .works-v2__badge {
        width: 200px; /* PC版 500px から大幅縮小 */
        top: -285px;
        left: -5px;
    }
    .works-v2__item--reverse .works-v2__badge{
        left: auto;
        right: -5px;
    }

    /* サムネイルエリア */
    .works-v2__sub {
        width: 100%;
    }

    .works-v2__thumbs {
        grid-template-columns: repeat(4, 1fr); /* 2列から4列（1列並び）に変更 */
        gap: 5px;
        margin-top: 5px;
    }

    .works-v2__thumbs img {
        aspect-ratio: 1 / 1; /* スマホでは正方形で見やすく */
    }

    /* 引用元 */
    .works-v2__citation {
        font-size: 11px;
        margin-top: 8px;
    }


    /* アクションボタン */
    .works-v2__actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 40px;
    }

    .works-v2__actions .btn {
        width: 100% !important;
        max-width: 336px;
    }
}

/* さらに小さい画面（375px以下）用 */
@media screen and (max-width: 375px) {
    .works-v2__badge {
        width: 140px;
        top: -20px;
    }
    .intro-detail__floating-name {
        font-size: 36px;
    }
}

/* ==========================================================================
   Review Section - Responsive (Mobile)
   ========================================================================== */

@media screen and (max-width: 768px) {
    .review {
        padding: 60px 0; /* 上下の余白を圧縮 */
    }

    .review__inner {
        padding: 0 20px;
    }

    /* 突き刺さるラインの調整（他セクションと共通化） */
    .review__inner .intro-detail__sub-header {
        padding-left: 15px;
        margin-bottom: 40px;
    }

    .review__inner .intro-detail__sub-header-line {
        width: 1000px;
        left: -965px;
    }

    .review__inner .intro-detail__sub-header-box {
        padding: 12px 15px 12px 30px;
    }

    .review__inner .intro-detail__sub-header-box h3 {
        font-size: 18px;
    }

    /* グリッドを1列に */
    .review__grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    /* カードの調整 */
    .review__card {
        border-radius: 35px; /* スマホの幅に合わせて角丸を少し控えめに調整 */
        padding: 35px 20px;
    }

    .review__catch {
        font-size: 18px; /* スマホで見やすいサイズに */
        margin-bottom: 25px;
        min-height: auto; /* 高さを固定解除 */
        text-align: center; /* スマホでは中央寄せの方がバランスが良い */
    }

    .review__icon {
        width: 160px; /* アイコンを少しリサイズ */
        margin-bottom: 20px;
    }

    .review__rating {
        margin-bottom: 25px;
    }

    .review__stars {
        font-size: 26px;
    }

    .review__score {
        font-size: 26px;
    }

    .review__body {
        font-size: 15px; /* 本文の文字サイズを標準化 */
        text-align: left;
        margin-bottom: 20px;
    }

    /* アクションボタンの縦並び */
    .review__actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* 既存の .btn クラスをスマホ幅にフィットさせる */
    .review__actions .btn {
        width: 100% !important;
        max-width: 336px;
    }
}

/* 小さなスマホ（375px以下）用 */
@media screen and (max-width: 375px) {
    .review__catch {
        font-size: 16px;
    }
    .review__body {
        font-size: 14px;
    }
}

/* ==========================================================================
   Company Profile Section - Responsive (Mobile)
   ========================================================================== */

@media screen and (max-width: 768px) {
    .profile {
        padding: 60px 0 80px; /* 上下の余白をスマホ用に縮小 */
    }

    .profile__inner {
        padding: 0 20px;
    }

    /* 突き刺さるラインの見出し（他セクションと統一） */
    .profile__inner .intro-detail__sub-header {
        padding-left: 15px;
        margin-bottom: 40px;
    }

    .profile__inner .intro-detail__sub-header-line {
        width: 1000px;
        left: -965px;
    }

    .profile__inner .intro-detail__sub-header-box {
        padding: 12px 15px 12px 30px;
    }

    .profile__inner .intro-detail__sub-header-box h3 {
        font-size: 18px;
    }

    /* レイアウトを縦並びに */
    .profile__content {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 50px;
    }

    /* テーブルの調整 */
    .profile__table-wrap {
        width: 100%;
    }

    .profile__table th,
    .profile__table td {
        padding: 15px; /* タップターゲットと視認性を考慮した余白 */
        font-size: 13px; /* 12pxだと少し小さすぎるため、微増して可読性アップ */
    }

    .profile__table th {
        width: 30%; /* スマホではラベル幅を少し詰め、内容側を広く */
    }

    /* マップの調整 */
    .profile__map {
        width: 100%;
    }

    .profile__map iframe {
        height: 250px; /* スマホで見やすい高さに調整 */
    }

    /* アクションボタンの縦並び */
    .profile__actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* 共通ボタンクラスの幅調整 */
    .profile__actions .btn {
        width: 100% !important;
        max-width: 336px;
    }
}

/* 小さなスマホ（375px以下）用 */
@media screen and (max-width: 375px) {
    .profile__table th,
    .profile__table td {
        padding: 12px 10px;
        font-size: 12px;
    }
    .profile__table th {
        width: 35%;
    }
}

/* ==========================================================================
   FAQ Section - Responsive (Mobile)
   ========================================================================== */

@media screen and (max-width: 768px) {
    .faq {
        padding: 60px 0; /* 上下の余白を圧縮 */
    }

    .faq__inner {
        padding: 0 15px;
    }

    /* ヘッダータイトル */
    .faq__header {
        margin-bottom: 30px;
    }

    .faq__title {
        font-size: 20px; /* スマホで見やすいサイズ */
        gap: 10px;
    }

    .faq__title-icon {
        width: 32px; /* アイコンをリサイズ */
    }

    /* 質問部分（ボタン） */
    .faq__question {
        padding: 25px 50px 25px 15px; /* 右側にトグル用の余白、左を詰める */
    }

    .faq__q-icon {
        width: 38px; /* 53pxからリサイズ */
        height: 38px;
        font-size: 22px; /* Qの文字も調整 */
        margin-right: 12px;
    }

    .faq__q-text {
        font-size: 15px; /* 20pxからリサイズ */
        line-height: 1.5;
        padding-right: 5px;
    }

    /* トグルアイコン */
    .faq__toggle-icon {
        right: 15px; /* 端に寄せる */
        width: 18px;
    }

    /* 区切り線（ドット） */
    .faq__divider {
        margin: 0 15px;
    }

    /* 回答部分 */
    .faq__a-content {
        padding: 20px 15px 30px 15px; /* 左右の余白を統一 */
        gap: 10px;
    }

    /* デザイン上の "A." ラベル */
    .faq__a-label {
        font-size: 24px; /* 32pxからリサイズ */
        min-width: 28px; /* Aの幅を確保 */
    }

    .faq__a-text {
        font-size: 14px; /* 20pxからリサイズ */
        line-height: 1.7;
    }
}

/* 小さなスマホ（375px以下）用 */
@media screen and (max-width: 375px) {
    .faq__title {
        font-size: 18px;
    }
    .faq__q-text {
        font-size: 14px;
    }
    .faq__a-label {
        font-size: 22px;
    }
    .faq__a-text {
        font-size: 13.5px;
    }
}
/* ==========================================================================
   Company List Section - Responsive (Mobile)
   ========================================================================== */

@media screen and (max-width: 768px) {
    .company-list {
        padding: 60px 0 80px; /* 上下の余白を圧縮 */
    }

    .company-list__inner {
        padding: 0 20px;
    }

    /* タイトル装飾（枠＋角の正方形）のレスポンシブ */
    .company-list__header {
        max-width: 100%; /* 幅を画面いっぱいに */
        margin-bottom: 50px;
        padding: 25px 15px;
    }

    /* 正方形のサイズをスマホ用に調整 */
    .company-list__header::before,
    .company-list__header::after {
        width: 30px;
        height: 30px;
        top: -10px;
        left: -10px;
    }

    .company-list__header::after {
        bottom: -10px;
        right: -10px;
        top: auto;
        left: auto;
    }

    .company-list__header-area {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .company-list__header-title {
        font-size: 22px;
        line-height: 1.4;
    }

    /* 3カラム → 1カラムへ */
    .company-list__grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    /* カードの微調整 */
    .company-card__header {
        min-height: 80px;
        padding: 15px;
    }

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

    .company-card__body {
        padding: 25px 20px;
    }

    .company-card__label {
        font-size: 13px;
    }

    .company-card__text {
        font-size: 15px;
    }

    /* 地図の高さ調整 */
    .company-card__map {
        margin: 20px 0;
    }

    .company-card__map iframe {
        height: 200px;
    }

    /* ボタンの調整 */
    .company-card__btn-orange {
        font-size: 16px;
        height: 50px;
    }

    /* もっと見るボタン */
    .company-list__more-btn {
        width: 100%; /* 固定幅384pxを解除 */
        max-width: 340px; /* 広がりすぎ防止 */
        padding: 0 40px;
        height: 56px;
        font-size: 16px;
    }

    .company-list__more-arrow {
        right: 30px; /* 矢印の位置を内側に寄せる */
        width: 20px;
    }
}

/* 小さなスマホ（375px以下）用 */
@media screen and (max-width: 375px) {
    .company-list__header-title {
        font-size: 19px;
    }
    .company-card__name {
        font-size: 18px;
    }
    .company-list__more-btn {
        font-size: 15px;
    }
}

/* ==========================================================================
   New Articles Section - Responsive
   ========================================================================== */

/* タブレットサイズ（1024px以下） */
@media screen and (max-width: 1024px) {
    .new-posts__grid {
        grid-template-columns: repeat(2, 1fr); /* 4カラムから2カラムへ */
        gap: 20px;
    }
}

/* スマホサイズ（768px以下） */
@media screen and (max-width: 768px) {
    .new-posts {
        padding: 50px 0 40px; /* 上下の余白をスマホ用に最適化 */
    }

    .new-posts__inner {
        padding: 0 20px;
    }

    /* ヘッダーエリアの調整 */
    .new-posts__header {
        margin-bottom: 30px;
    }

    .new-posts__title-group {
        gap: 12px;
    }

    .new-posts__icon {
        width: 50px; /* 84pxからスマホサイズへ縮小 */
    }

    .new-posts__title {
        font-size: 24px; /* 32pxから縮小 */
    }

    /* グリッドを1カラムに変更（文字量が多い場合に読みやすくするため） */
    .new-posts__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* サムネイル比率の調整 */
    .new-posts__thumb {
        aspect-ratio: 16 / 9; /* スマホでは少し横長にして高さを抑える */
    }

    /* テキストエリアの調整 */
    .new-posts__body {
        padding: 20px;
        min-height: auto; /* スマホでは高さを固定せず、中身に合わせる */
    }

    .new-posts__card-title {
        font-size: 15px;
        -webkit-line-clamp: 4; /* スマホでは長すぎないよう4行程度に制限 */
    }
}

/* 小さなスマホ（375px以下）用 */
@media screen and (max-width: 375px) {
    .new-posts__title {
        font-size: 20px;
    }
    .new-posts__icon {
        width: 40px;
    }
}

/* ==========================================================================
   Footer - Responsive (Mobile Optimization)
   ========================================================================== */

/* タブレットサイズ（1024px以下）での調整 */
@media screen and (max-width: 1024px) {
    .footer-columns__wrapper {
        gap: 60px; /* 240pxから大幅に縮小 */
    }
    .footer-disclaimer__box {
        max-width: 90%;
    }
}

/* スマホサイズ（768px以下） */
@media screen and (max-width: 768px) {
    .site-footer {
        margin-top: 80px; /* PC版の160pxを半分に */
    }

    /* --- 1. コラムエリア --- */
    .footer-columns {
        padding: 60px 0;
    }

    .footer-columns__wrapper {
        flex-direction: column; /* 縦並びに */
        align-items: center;
        gap: 50px;
    }

    .footer-columns__item {
        width: 100%;
        max-width: 400px; /* 広がりすぎ防止 */
    }

    .footer-columns__title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 18px;
    }

    .footer-columns__list {
        width: 100%; /* 固定320pxを解除 */
    }

    .footer-columns__list a {
        font-size: 16px;
        padding: 5px 0; /* タップしやすく余白を確保 */
    }

    /* --- 2. 免責事項 --- */
    .footer-disclaimer {
        padding: 40px 0;
    }

    .footer-disclaimer__box {
        padding: 20px 15px;
    }

    .footer-disclaimer__box p {
        font-size: 14px; /* 24pxからスマホ用に最適化 */
        line-height: 1.6;
        text-align: left; /* スマホでは左揃えの方が可読性が高い */
    }

    /* --- 3. ボトムナビ --- */
    .footer-bottom {
        padding: 40px 0 20px;
    }

    .footer-nav__menu {
        flex-wrap: wrap; /* 画面幅に合わせて折り返す */
        justify-content: center;
        gap: 15px 25px; /* 上下の間隔も確保 */
    }

    .footer-nav__menu li a {
        font-size: 15px; /* 20pxから縮小 */
    }

    .footer-bottom__line {
        height: 1px; /* 3pxから細くして主張を抑える */
        margin-bottom: 30px; /* 128pxから大幅に縮小 */
        margin-top: 30px;
    }

    .footer-copyright {
        text-align: center; /* スマホでは中央寄せが一般的 */
        font-size: 10px;
        line-height: 1.5;
    }
}

/* さらに小さい画面（375px以下）用 */
@media screen and (max-width: 375px) {
    .footer-nav__menu {
        gap: 10px 15px;
    }
    .footer-nav__menu 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;
    }
}