/* ==========================================================================
Responsive Styles
========================================================================== */
@media (max-width: 1199px){
	main{
		width: 100%;
    }
    .header-left{
        padding-left: 20px;
    }
    .main-navigation ul li a {
        font-size: 14px;
    }
}



/* 業者一覧セクション レスポンシブ */
@media (max-width: 1024px) {
    main{
        margin-top: 80px;
    }
    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: 24px; /* トップバーの高さ(20px)のすぐ下 */
        right: 0;
        width: 60px;
        height: 60px;
        background: #2D373A !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: 56px; /* 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: #2D373A;
        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: #2D373A;
        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: #2D373A;
        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;
    }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  .btn {
    width: 100%;          /* 画面幅に合わせて伸縮 */
    max-width: 100%;     /* 親要素からはみ出さないようガード */
    height: 60px;        /* スマホ向けに高さを少し抑える */
    padding: 12px 24px;  /* 余白調整 */
    font-size: 16px;     /* フォントサイズをリサイズ */
  }

  /* 右下の三角マークもスマホサイズに合わせて小さく調整 */
  .btn::after {
    bottom: 2px;
    right: 2px;
    border-width: 0 0 18px 18px; /* 三角のサイズを縮小（27px → 18px） */
  }
}

/* ==========================================================================
   Responsive (Tablet / Small PC Styles: 769px - 1200px)
   ========================================================================== */

@media screen and (max-width: 1200px) and (min-width: 769px) {
  /* 固定アスペクト比を維持しつつ高さを自動調整 */
  .fv-section {
    width: 100%;
    height: auto;
  }

  /* 左上CONCEPTロゴの縮小と位置調整 */
  .fv-logo {
    top: 24px;
    left: 24px;
    width: 160px;
    height: 160px;
  }

  /* 中央テキストの位置・サイズ調整 */
  .fv-content {
    top: 30%;
    left: 40px;
    max-width: calc(100% - 280px); /* 右側ナビとの重なりを防止 */
  }

  /* 装飾アイコンの縮小 */
  .fv-content::before {
    width: 160px;
    height: 160px;
    left: -60px;
    top: -80px;
  }

  .fv-copy {
    font-size: 38px; /* 56px → 38px に縮小 */
    line-height: 1.3;
  }

  .fv-lead {
    font-size: 24px; /* 36px → 24px に縮小 */
  }

  /* 右側ナビゲーションの幅調整 */
  .fv-nav {
    width: 200px;
  }

  .index-list li a {
    padding: 16px 8px;
    font-size: 16px; /* 20px → 16px に縮小 */
  }

  /* SNSリンクの調整 */
  .sns-wrapper {
    width: 100%;
    justify-content: flex-end;
  }

  .sns-link {
    font-size: 15px;
  }

  .sns-link img {
    width: 32px;
    margin-right: 6px;
  }
}
/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体の高さ・背景調整 */
  .fv-section {
    width: 100%;
    aspect-ratio: auto;     /* 固定アスペクト比を解除 */
    min-height: 100vh;     /* スマホ全画面表示（またはコンテンツに合わせる場合は auto） */
    padding: 20px 16px 40px;
    box-sizing: border-box;
    /* スマホ用画像があれば切り替え（なければPC用がカバーでフィットします） */
    /* background-image: url(../images/mv_sp.webp); */
  }

  .fv-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* 左上CONCEPTロゴ */
  .fv-logo {
    position: static;     /* 絶対配置を解除して標準配置へ */
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
  }

  /* 中央テキストエリア */
  .fv-content {
    position: relative;
    top: auto;
    left: auto;
    margin: 40px 0;
  }

  /* 背景の装飾アイコン */
  .fv-content::before {
    width: 120px;
    height: 120px;
    left: -20px;
    top: -63px;
  }

  .fv-copy {
    font-size: 28px;       /* 56pxからスマホ用に縮小 */
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .fv-lead {
    font-size: 18px;       /* 36pxからスマホ用に縮小 */
  }

  /* 右側ナビゲーション（下部へ配置変更） */
  .fv-nav {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    align-items: stretch;
  }

  .index-list li a {
    padding: 12px 0;
    font-size: 15px;
    text-align: left;      /* スマホでは左寄せでタップしやすく調整 */
  }

  /* SNSリンク */
  .sns-wrapper {
    width: 100%;
    justify-content: flex-start;
    padding: 16px 0 0;
  }

  .sns-link {
    font-size: 14px;
  }

  .sns-link img {
    width: 28px;
    margin-right: 6px;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体のパディング */
  .feature {
    padding: 40px 0;
  }

  /* メインタイトル */
  .feature .feature-main-title {
    font-size: 22px;
    margin-bottom: 40px;
  }

  /* セクションコンテナ（PC用の左マージン解除） */
  .feature .section-container {
    padding: 0 16px;
  }

  .feature .section-container.--second {
    margin-left: 0; /* 200pxのリセット */
  }

  /* 見出し（下線の幅調整） */
  .feature .section-heading {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .feature .section-heading::after {
    width: 100%;
    max-width: 200px;
  }

  /* コンテンツレイアウト（縦並びへ変更） */
  .feature .content-block {
    flex-direction: column;
    gap: 24px;
  }

  /* 画像右配置用の特殊指定をスマホ用に上書き */
  .image-right {
    gap: 24px !important;
    align-items: stretch !important;
    margin-right: 0;
  }

  /* ラベルタイトル */
  .feature-ttl {
    gap: 8px;
    margin-bottom: 20px;
  }

  .feature .feature-ttl span {
    font-size: 20px; /* 40pxからサイズ縮小 */
    padding: 4px 8px;
  }

  /* 画像エリア */
  .feature .image-wrap {
    width: 100%;
  }

  /* テキストエリア（固定幅の解除） */
  .feature .text-wrap {
    width: 100%;
  }

  .feature .text-wrap p,
  .feature .image-right .text-wrap p {
    width: 100%; /* 固定幅（414px / 500px）を100%へ */
    font-size: 14px;
    line-height: 1.6;
    padding-left: 0;
    box-sizing: border-box;
  }

  .feature .text-wrap .company-name {
    margin: 20px auto 36px;
    font-size: 14px;
  }

  /* ボタン周り */
  .feature .btn-group {
    gap: 10px;
  }
  .feature .btn-label{
    width: 100%;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体 */
  .values {
    padding-top: 20px;
  }

  /* ヘッダーエリア */
  .values-header-wrapper {
    margin-right: 0; /* PC用の右マージンをリセット */
    margin-bottom: 36px;
    padding: 0 16px;
  }

  .values-header-label {
    font-size: 12px;
  }

  .values-header-title {
    font-size: 18px;
  }

  /* コンテンツエリア */
  .values-container {
    padding: 0 16px 60px;
  }

  .values-section-title {
    font-size: 20px; /* 40pxからスマホ用にリサイズ */
    margin-bottom: 24px;
    width: 100%; /* 横幅いっぱいに指定 */
    box-sizing: border-box;
  }

  /* グリッドレイアウト（縦並びへ変更） */
  .values-grid {
    flex-direction: column;
    gap: 24px;
  }

  /* カードスタイル */
  .values-card-body {
    padding: 20px 16px 28px;
  }

  .values-card-title {
    font-size: 18px;
    margin-bottom: 16px;
    text-align: left;
  }

  .values-card-title span {
    font-size: 24px; /* ナンバリングサイズ調整 */
  }

  .values-card-text {
    font-size: 14px;
    line-height: 1.6;
    text-align: left; /* 長文の可読性を考慮して左寄せ */
  }

  /* CTAエリア */
  .values-cta {
    margin-top: 40px;
    position: relative;
  }

  .values-cta-bubble {
    max-width: 180px; /* 吹き出しを縮小 */
    top: -16px;
  }

  .values-btn {
    width: 100%; /* ボタンを親要素にフィット */
    box-sizing: border-box;
    font-size: 16px; /* スマホで見やすい文字サイズへ変更 */
    padding: 24px 16px 12px;
  }

  .values-btn-arrow {
    width: 12px;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体の余白 */
  .cost {
    margin: 40px auto;
    padding: 0 16px;
  }

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

  .cost-header .cost-subtitle {
    font-size: 12px;
  }

  .cost-header .cost-title {
    font-size: 18px;
    padding-bottom: 6px;
  }

  /* キャッチコピー */
  .cost-catch {
    gap: 8px;
    margin-bottom: 24px;
  }

  .cost-catch .cost-catch-item {
    font-size: 20px; /* スマホ用にリサイズ */
    padding: 4px 8px;
  }

  /* ボディ（イラスト ＋ テキストを縦並びへ） */
  .cost-body {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
  }

  .cost-body .cost-image-wrap {
    width: 140px; /* スマホ用にサイズ調整 */
  }

  .cost-body .cost-text-wrap {
    width: 100%; /* 固定幅（300px）を解除 */
    font-size: 14px;
    line-height: 1.6;
    text-align: center; /* 中央寄せで見た目を整える */
  }

  /* 含まれるものリスト */
  .cost-included {
    padding: 28px 16px 20px;
    margin-bottom: 40px;
  }

  .cost-included .cost-included-title {
    font-size: 15px;
    left: 20px;
    top: -10px;
    padding: 0 8px;
  }

  /* 2列グリッド → 1列へ変更 */
  .cost-included .cost-included-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cost-included-item img {
    width: 32px; /* アイコンを少し縮小 */
  }

  /* CTAエリア */
  .cost-btn {
    width: 100%; /* 固定幅（726px）を解除して100%化 */
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体のパディング */
  .time {
    padding: 40px 0 40px;
  }

  .time-inner {
    padding: 0 16px;
  }

  /* ヘッダー */
  .time-header {
    margin-right: 0; /* PC用の右マージンをリセット */
    margin-bottom: 40px;
  }

  .time-subtitle {
    font-size: 12px;
  }

  .time-title {
    font-size: 18px;
  }

  /* キャッチコピー */
  .time-catch {
    margin-left: 0; /* PC用の左マージンをリセット */
    margin-bottom: 40px;
  }

  .time-catch-text {
    font-size: 22px; /* スマホ用にリサイズ */
    gap: 8px;
    margin-bottom: 16px;
  }

  .time-catch-text span {
    padding: 4px 8px;
  }

  .time-catch-desc {
    font-size: 15px;
    line-height: 1.6;
  }

  /* 吹き出しエリア */
  .time-bubble {
    font-size: 20px;
    margin-bottom: 32px;
    padding: 16px 12px;
  }

  .time-bubble .txt-gold {
    font-size: 32px;
  }

  /* 吹き出しの背景画像をスマホサイズに自動フィット */
  .time-bubble::before {
    width: 100%;
    max-width: 340px;
    height: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
  }

  /* グリッドレイアウト（1列に変更） */
  .time-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 個別カード（縦並びへ変更 ＆ 反転解除） */
  .time-item,
  .time-item.-row-reverse,
  .time-item-wide {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 16px;
    border-radius: 16px;
  }

  .time-item-wide {
    grid-column: span 1; /* 1列分に変更 */
  }

  .time-item-wide .time-item-body {
    width: 100%;
  }

  /* 画像エリア */
  .time-img-box,
  .time-item-wide .time-img-box, .time-item-body {
    width: 100%;
    max-width: 240px;
  }

  .time-img-box img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* カードテキスト */
  .time-item-title {
    font-size: 18px;
    margin-bottom: 8px;
    text-align: center;
  }

  .time-item-text {
    font-size: 14px;
    line-height: 1.6;
  }

  /* CTA */
  .time-cta {
    margin-top: 32px;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体の余白・背景調整 */
  .energy {
    padding-top: 40px;
  }

  .energy-container {
    border-top-right-radius: 60px; /* 角丸をスマホサイズに縮小 */
    padding: 0 16px;
  }

  .energy-inner {
    padding: 40px 0 40px;
  }

  /* ヘッダーエリア */
  .energy-header {
    margin-bottom: 32px;
  }

  .energy-subtitle {
    font-size: 12px;
  }

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

  /* 強調線の幅を可変に */
  .energy-main-title::after {
    width: 100%;
    max-width: 200px;
  }

  /* キャッチエリア（縦並びへ変更） */
  .energy-catch-area {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
  }

  /* 左側 3段ラベル */
  .energy-catch-item {
    font-size: 22px; /* スマホ用にサイズ縮小 */
    padding: 4px 8px;
  }

  /* 右側 説明文章 */
  .energy-catch-text {
    max-width: 100%;
  }

  .energy-catch-heading {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .energy-catch-desc {
    font-size: 14px;
    line-height: 1.6;
  }

  /* フローエリア（縦並びへ変更） */
  .energy-flow {
    padding: 40px 16px 24px;
    margin-bottom: 40px;
  }

  .energy-flow-heading {
    left: 16px;
    font-size: 16px;
  }

  .energy-flow-items {
    flex-direction: column;
    gap: 20px;
  }

  .energy-flow-item {
    width: 100%;
  }
  .energy-flow-item .num{
    font-size: 24px;
    max-width: 50%;
    margin-bottom: 0;
  }

  .icon-circle {
    width: 150px;
    margin-bottom: 12px;
  }

  /* 矢印 divider（下向きに回転） */
  .flow-arrow {
    transform: rotate(90deg);
    margin: 4px 0;
  }

  /* 説明テキストエリア */
  .energy-description {
    max-width: 100%;
    margin-bottom: 40px;
  }

  .energy-desc-heading {
    font-size: 16px;
  }

  .energy-desc-heading .txt-large {
    font-size: 18px;
  }

  .energy-desc-text {
    font-size: 15px;
    line-height: 1.6;
  }

  /* 性能ポイント（表） */
  .energy-performance {
    margin-bottom: 40px;
  }
  .energy-table-wrapper{
    flex-direction: column;
  }

  .energy-table-heading {
    font-size: 16px;
    margin-left: 0;
    margin-bottom: 12px;
  }
  .energy-table{
    width: 100%;
  }
  th, td {
    font-size: 13px;
    padding: 8px 6px;
    height: auto; /* 固定高さを解除 */
  }

  th {
    width: 40%;
  }

  /* CTAエリア */
  .energy-cta .btn {
    width: 100%; /* 固定幅（547px）を解除 */
  }
}


/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体 */
  .people {
    padding-top: 48px;
  }

  /* ヘッダー */
  .people .people-header {
    margin-right: 15px;
    margin-bottom: 32px;
  }

  .people .people-subtitle {
    font-size: 12px;
  }

  .people .people-title {
    font-size: 16px;
    padding-bottom: 6px;
  }

  /* タイトル下線の可変対応 */
  .people .people-title::after {
    width: 100%;
    max-width: 200px;
  }

  /* ヒーローエリア */
  .people .people-hero {
    padding: 40px 16px;
    margin-bottom: 40px;
  }

  .people .people-hero-box {
    padding: 24px 16px;
  }

  .people .people-hero-title {
    font-size: 22px; /* スマホ用にサイズ縮小 */
    margin-bottom: 8px;
  }

  .people .people-hero-text {
    font-size: 15px;
    line-height: 1.6;
  }

  /* メインコンテンツ（縦並びへ変更） */
  .people .people-content {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .people .people-image-wrapper {
    flex: none;
    width: 100%;
  }

  .people .people-text-block {
    flex: none;
    width: 100%;
    font-size: 15px; /* スマホ用に調整 */
    line-height: 1.7;
    padding: 15px;
  }

  .people .people-text-block p {
    margin-bottom: 0.8em;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体のパディング */
  .consultation {
    padding: 40px 16px;
  }

  /* ヘッダーエリア */
  .consultation-header {
    margin-bottom: 36px;
  }

  .consultation-title {
    gap: 12px;
    font-size: 18px;
    letter-spacing: 0.05em;
  }

  /* 左右のあしらいライン画像を可変化 */
  .consultation-line {
    width: 100%;
    max-width: 60px; /* 画面幅に合わせて伸縮 */
  }

  /* 4列グリッド → 2列に変更（非常に狭い端末では1列） */
  .consultation-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 40px;
  }

  /* 個別カード */
  .consultation-card {
    padding: 24px 8px 16px;
  }

  /* アイコン */
  .consultation-icon {
    width: 90px;
    margin-bottom: 12px;
  }

  /* カードテキスト */
  .consultation-card-title {
    font-size: 13px;
    line-height: 1.5;
  }

  /* 右下の斜めカット装飾をスケールダウン */
  .consultation-card-title::after {
    border-width: 0 0 32px 34px;
  }
}

/* 画面幅480px以下の超小型スマホ用調整 */
@media screen and (max-width: 480px) {
  .consultation-grid {
    grid-template-columns: 1fr; /* 1列に切り替える場合はこちら */
    gap: 16px;
  }

  .consultation-card {
    padding: 28px 16px 20px;
  }

  .consultation-icon {
    width: 110px;
  }

  .consultation-card-title {
    font-size: 15px;
  }
}
/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体の余白・背景調整 */
  .interview-intro {
    padding: 40px 16px 32px;
    background-size: cover; /* スマホ画面の比率に合わせてカバー表示 */
  }

  /* ヘッダーエリア */
  .interview-intro .interview-intro-header {
    margin-left: 0; /* PC用の左マージン（223px）をリセット */
    margin-bottom: 36px; /* 150pxからスマホサイズに短縮 */
  }

  .interview-intro .interview-intro-subtitle {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .interview-intro .interview-intro-title {
    font-size: 18px;
    padding-bottom: 6px;
  }

  /* 下の強調線の幅をスマホ用に調整 */
  .interview-intro .interview-intro-title::after {
    width: 100%;
    max-width: 200px;
  }

  /* コンテンツエリア */
  .interview-intro .interview-intro-label {
    font-size: 14px;
    padding: 4px 8px;
    margin-bottom: 16px;
  }

  .interview-intro .interview-intro-catch {
    font-size: 22px; /* 40pxからスマホで見やすいサイズへ変更 */
    line-height: 1.5;
    margin-bottom: 20px;
  }

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

  .interview-intro .interview-intro-text p {
    margin-bottom: 14px;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体の余白・背景調整 */
  .interview-intro {
    padding: 40px 16px 32px;
    background-size: cover; /* スマホ画面の比率に合わせてカバー表示 */
  }

  /* ヘッダーエリア */
  .interview-intro .interview-intro-header {
    margin-left: 0; /* PC用の左マージン（223px）をリセット */
    margin-bottom: 36px; /* 150pxからスマホサイズに短縮 */
  }

  .interview-intro .interview-intro-subtitle {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .interview-intro .interview-intro-title {
    font-size: 18px;
    padding-bottom: 6px;
  }

  /* 下の強調線の幅をスマホ用に調整 */
  .interview-intro .interview-intro-title::after {
    width: 100%;
    max-width: 200px;
  }

  /* コンテンツエリア */
  .interview-intro .interview-intro-label {
    font-size: 14px;
    padding: 4px 8px;
    margin-bottom: 16px;
  }

  .interview-intro .interview-intro-catch {
    font-size: 22px; /* 40pxからスマホで見やすいサイズへ変更 */
    line-height: 1.5;
    margin-bottom: 20px;
  }

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

  .interview-intro .interview-intro-text p {
    margin-bottom: 14px;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体の余白調整 */
  .interview {
    padding: 40px 16px 60px;
  }

  /* プロフィールエリア（縦並び ＆ 横位置のずらしを解除） */
  .interview .interview-profile-wrapper,
  .interview-profile-wrapper.-row-reverse {
    flex-direction: column;
    gap: 24px;
    margin: 0 auto 32px;
    transform: none; /* PC用の右位置ずれ（translateX）をリセット */
  }

  .interview-profile-wrapper.-row-reverse {
    margin-top: 48px; /* 2人目以降の上余白をスマホ用に短縮 */
  }

  /* プロフィール画像 */
  .interview .interview-image {
    flex: none;
    width: 100%;
    box-shadow: #EBF0F3 6px 7px 0; /* シャドウを少し控えめに調整 */
  }

  /* プロフィールヘッダー */
  .interview .interview-header {
    width: 100%;
    padding: 24px 16px 16px;
  }

  /* ラベル（インタビュー対象） */
  .interview .interview-label {
    font-size: 13px;
    padding: 4px 8px;
    left: -8px;
    top: -10px;
  }

  .interview .interview-name {
    font-size: 22px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .interview .interview-job {
    font-size: 14px;
  }

  /* キャッチコピー */
  .interview .interview-catch {
    font-size: 20px;
    margin: 20px 0 0 0; /* 左マージン（22px）を解除 */
  }

  /* Q&Aエリア */
  .interview .interview-qa-container {
    margin-bottom: 32px;
  }

  .interview .interview-qa-block {
    margin-bottom: 24px;
  }

  .interview .interview-question {
    font-size: 15px;
    padding: 8px 12px;
    margin-bottom: 16px;
  }

  .interview .interview-answer {
    padding: 0 8px; /* スマホの画面幅を考慮して左右の余白を短縮 */
    font-size: 14px;
    line-height: 1.7;
  }

  .interview .interview-answer p {
    margin-bottom: 12px;
  }

  /* 言葉引用エリア */
  .interview .interview-quote-container {
    margin-bottom: 40px;
  }

  .interview .interview-quote-heading {
    font-size: 16px;
    padding: 12px 16px;
    margin-bottom: 12px;
  }

  .interview .interview-quote-body {
    padding: 16px;
    font-size: 14px;
  }
}


/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* ヘッダー */
  .message .message-header {
    padding: 24px 16px;
  }

  .message .message-header-title {
    font-size: 24px; /* スマホ用に縮小 */
  }

  /* コンテンツレイアウト（縦並びへ変更） */
  .message .message-content {
    flex-direction: column;
    padding: 32px 16px 24px;
    gap: 32px;
  }

  /* 左側エリア */
  .message .message-left {
    width: 100%;
    gap: 8px;
  }

  .message .message-catch {
    font-size: 20px; /* 36pxから大幅縮小 */
    padding: 6px 10px;
    width: 100%;    /* 画面幅に合わせてフィット */
    box-sizing: border-box;
  }

  /* 右側エリア */
  .message .message-right {
    width: 100%;
    padding: 24px 16px 16px;
    box-sizing: border-box;
  }

  .message .message-right p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  .message-right .txt-large {
    font-size: 18px; /* 大文字テキストの調整 */
  }

  .message .message-note {
    font-size: 11px;
    margin-top: 16px;
  }

  /* ボタンエリア */
  .message .message-l-wrapper,
  .message-btn-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体の余白調整 */
  .works {
    padding-top: 60px;
  }

  /* ヘッダー調整 */
  .works-header {
    margin-right: 0; /* PC用の右マージン解除 */
    margin-bottom: 32px;
  }

  .works-subtitle {
    font-size: 12px;
  }

  .works-title {
    font-size: 18px;
  }

  /* 下の強調線の幅を可変に */
  .works-title::after {
    width: 100%;
    max-width: 200px;
  }

  /* ボックス外枠（背景画像調整とカードごとの余白） */
  .works-box {
    background-size: cover; /* スマホ画面の比率に合わせてカバー表示 */
    margin-bottom: 48px;
    padding: 24px 16px;
  }

  /* コンテナ（縦並びに変更 ＆ 左右反転の解除） */
  .works-container,
  .works-box.-second .works-container {
    flex-direction: column;
    gap: 24px;
  }

  /* 縦書きエリア（スマホでは横書きに変更して読みやすく） */
  .works-sidebar {
    align-items: flex-start;
    width: 100%;
  }

  .works-example {
    margin-bottom: 12px;
  }

  .works-example .number {
    font-size: 40px;
  }

  .works-vertical-text {
    writing-mode: horizontal-tb; /* 横書きに変更 */
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.6;
  }

  /* ギャラリーエリア */
  .works-gallery {
    width: 100%;
    max-width: 100%;
    gap: 8px;
  }

  /* スライダー矢印ボタンのサイズ調整 */
  .works-arrow {
    width: 48px;
    height: 48px;
  }

  .works-arrow img {
    width: 18px;
  }

  /* サブ画像（スマホではシンプルな1コラムまたは2コラムへ調整） */
  .works-sub-grid {
    gap: 8px;
  }

  /* ボタンエリア */
  .works-btn-wrapper .btn {
    margin: 24px auto 16px;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体のパディング調整 */
  .voice {
    padding: 40px 16px 60px;
  }

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

  .voice-subtitle {
    font-size: 14px;
  }

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

  .voice-title-line {
    max-width: 200px;
    bottom: -6px;
  }

  /* 口コミカードリストの余白 */
  .voice-list {
    gap: 20px;
  }

  /* 個別口コミカード（縦並びへ変更） */
  .voice-item {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px 16px;
  }

  /* 丸型アイコンエリア */
  .voice-icon {
    width: 120px; /* スマホ用にサイズ調整 */
  }

  .voice-icon img {
    width: 100%;
    height: auto;
  }

  /* 右側テキストコンテンツ */
  .voice-content {
    width: 100%;
  }

  .voice-card-title {
    font-size: 18px;
    margin-bottom: 16px;
    text-align: center; /* タイトルを中央寄せにしてバランス調整 */
  }

  .voice-text {
    margin-bottom: 16px;
  }

  .voice-text p {
    font-size: 14px;
    line-height: 1.6;
  }

  /* 引用リンク */
  .voice-cite a {
    font-size: 13px;
  }

  /* ボタンエリア */
  .voice-btn-wrapper {
    margin-top: 28px;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体のパディング調整 */
  .sns {
    padding: 40px 16px 80px;
  }

  /* ヘッダー */
  .sns .sns-header {
    margin-bottom: 40px; /* PC用の大きな余白を短縮 */
  }

  .sns .sns-subtitle {
    font-size: 12px;
  }

  .sns .sns-title {
    font-size: 18px;
  }

  /* 強調線の幅を可変に */
  .sns .sns-title::after {
    width: 100%;
    max-width: 200px;
  }

  /* コンテンツレイアウト（縦並びへ変更） */
  .sns .sns-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  /* キャッチコピー */
  .sns .sns-catch p {
    font-size: 22px; /* スマホ用にリサイズ */
    line-height: 1.6;
  }

  /* ボタンリスト */
  .sns .sns-btn-list {
    width: 100%;
    gap: 16px;
  }

  /* アイコンサイズ調整 */
  .btn .sns-btn-icon {
    width: 28px;
    margin-right: 16px;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体の余白 */
  .experience {
    padding: 48px 16px 0;
  }

  /* ヘッダー調整 */
  .experience .experience-header {
    margin-right: 0; /* PC用の右マージンを解除 */
    margin-bottom: 36px;
  }

  .experience .experience-subtitle {
    font-size: 12px;
  }

  .experience .experience-title {
    font-size: 18px;
  }

  /* 下の強調線の幅をスマホ用に調整 */
  .experience .experience-title::after {
    width: 100%;
    max-width: 200px;
  }

  /* コンテンツを縦並びに変更 */
  .experience .experience-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  /* 左側黒背景見出し */
  .experience .experience-heading-box h2 span {
    font-size: 22px; /* スマホ用にサイズ縮小 */
    padding: 4px 8px;
    margin-bottom: 8px;
  }

  /* 右側テキストリスト */
  .experience .experience-text-list {
    max-width: 100%;
  }

  .experience .experience-text-list p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 0.8em;
  }

  /* 下部矢印アイコン */
  .experience .experience-arrow {
    width: 40px;
    margin: 24px auto 0;
  }
}

/* ==========================================================================
   Responsive (SP Styles)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* セクション全体の余白調整 */
  .modelhouse {
    padding: 40px 16px;
  }

  /* 上部ヘッダー */
  .modelhouse-arrow-icon {
    width: 40px;
    margin-bottom: 20px;
  }

  .modelhouse-lead {
    font-size: 22px; /* スマホ用に縮小 */
    line-height: 1.6;
    margin-bottom: 32px;
  }

  /* 店舗カード（縦並びへ変更） */
  .modelhouse-card {
    flex-direction: column;
    padding: 24px 16px;
    gap: 24px;
  }

  /* 左側：店舗画像 */
  .modelhouse-thumb {
    width: 100%;
  }

  .modelhouse-thumb img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 右側：店舗情報 */
  .modelhouse-content {
    padding-left: 0; /* 左余白を解除 */
    width: 100%;
  }

  .modelhouse-company {
    font-size: 14px;
  }

  .modelhouse-store-name {
    font-size: 24px;
    margin-bottom: 16px;
  }

  /* スペック情報（dt / dd） */
  .modelhouse-info {
    margin-bottom: 20px;
  }

  .modelhouse-info-row {
    margin-bottom: 12px;
  }

  .modelhouse-info-row dt {
    width: 80px;
    font-size: 13px;
    padding: 4px 6px;
    margin-right: 12px;
  }

  .modelhouse-info-row dd {
    font-size: 14px;
  }

  /* CTAボタンエリア */
  .modelhouse-btn-wrapper {
    margin-top: 32px;
  }

  /* 最終CTAセクション */
  .final-cta {
    padding: 60px 16px 80px;
  }

  .final-cta a img {
    width: 100%;
    height: auto;
  }
}

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

@media screen and (max-width: 768px) {
  .footer {
    padding: 48px 20px 20px;
  }

  /* 上部コンテンツエリアを縦並びに変更 */
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 48px;
  }

  /* ナビゲーションの幅を100%に広げる */
  .footer-nav {
    width: 100%;
  }

  /* 注記テキストエリアの余白調整 */
  .footer-info {
    padding-top: 0;
  }

  .footer-info-text {
    font-size: 11px; /* スマホで見やすいよう微調整 */
    line-height: 1.75;
    margin-bottom: 16px;
  }

  /* コピーライト */
  .footer-copyright small {
    font-size: 10px;
  }
}





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