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

@media (max-width: 1024px) {
    .tf-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tf-area-tiles {
        grid-template-columns: repeat(4, 1fr);
    }

    .tf-area-tiles--index {
        grid-template-columns: repeat(4, 1fr);
    }

    /* ディレクトリ（/area/ ・ /theme/） */
    .tf-dir-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--tf-space-lg);
    }

    .tf-dir-hero__media {
        order: -1;
    }

    .tf-dir-chiplist {
        grid-template-columns: repeat(4, 1fr);
    }

    .tf-card-grid--dir,
    .tf-facility-grid,
    .tf-magazine-grid--archive {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 一覧: サイドバーを上に回す */
    .tf-listing__body {
        grid-template-columns: 1fr;
    }

    /* 記事: サイドバーを下に回す */
    .tf-article-layout {
        grid-template-columns: 1fr;
        gap: var(--tf-space-lg);
    }

    /* About / Contact */
    .tf-about-mission,
    .tf-about-info {
        grid-template-columns: 1fr;
        gap: var(--tf-space-lg);
    }

    .tf-about-feature__list,
    .tf-about-steps__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--tf-space-md) var(--tf-space-lg);
    }

    .tf-contact-block {
        grid-template-columns: 1fr;
    }

    .tf-faq__list {
        grid-template-columns: 1fr;
    }

    .tf-filter {
        position: static;
    }

    .tf-filter__form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--tf-space-md);
    }

    .tf-filter__submit {
        grid-column: 1 / -1;
    }

    /* SP: 絞り込みはトグルボタンで開閉。デフォルトは閉じる（幅を取らない） */
    .tf-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: var(--tf-space-md);
        padding: 10px 20px;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        color: var(--tf-text-primary);
        background-color: var(--tf-surface);
        border: 1px solid var(--tf-border);
        border-radius: var(--tf-radius);
    }

    .tf-filter-toggle__icon {
        font-size: 1.1em;
        line-height: 1;
        color: var(--tf-champagne-gold);
    }

    .tf-filter-toggle.is-open {
        background-color: var(--tf-cream);
        border-color: var(--tf-champagne-gold);
    }

    /* ラッパーはSPでブロックに戻す（display:contentsを解除）。
       閉じている間は非表示にして幅・高さを取らない */
    .tf-filter-panel {
        display: none;
    }

    .tf-filter-panel.is-open {
        display: block;
        margin-bottom: var(--tf-space-md);
    }

    .tf-card-grid--listing {
        grid-template-columns: repeat(3, 1fr);
    }

    .tf-magazine-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tf-facility__header,
    .tf-facility__hero,
    .tf-facility__detail-inner,
    .tf-facility__feature-inner,
    .tf-facility__comment-inner,
    .tf-facility__detail-faq-inner {
        grid-template-columns: 1fr;
    }

    /* SP: グリッド項目の最小幅で施設情報・地図が横にはみ出さないようにする */
    .tf-facility__detail-faq-inner > * {
        min-width: 0;
    }

    /* Google Maps iframeの最小幅を本文側へ伝播させず、コンテナ内に収める */
    .tf-facility__detail-body {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .tf-facility__map-embed,
    .tf-facility__map-embed iframe {
        min-width: 0;
        max-width: 100%;
    }

    /* SPでは施設名＋タグを写真の上に、横幅いっぱいで（折り返し軽減） */
    .tf-facility__hero-media {
        order: -1;
    }

    /* 特徴とアクセス: SPは画像→テキストの縦積み(2026-07-09ハナ指定で画像が上) */
    .tf-facility__feature-media {
        order: -1;
    }

    /* 編集部コメント: SPはテキスト→画像の縦積み */
    .tf-facility__comment-media {
        order: 1;
    }

    /* 編集部評価: SPは2×2 */
    .tf-facility__rating-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tf-tea-full {
        grid-template-columns: 1fr;
    }

    /* SP: 縦積みに戻す（アイキャッチ→SNS→本文の順） */
    .tf-tea-full--has-sns {
        grid-template-rows: none;
        row-gap: var(--tf-space-sm);
    }

    .tf-tea-full--has-sns .tf-tea-full__media,
    .tf-tea-full--has-sns .tf-tea-full__sns,
    .tf-tea-full--has-sns .tf-tea-full__body {
        grid-column: auto;
        grid-row: auto;
    }

    .tf-tea-full__gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    .tf-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--tf-space-lg);
    }

    .tf-hero__media {
        order: -1;
        aspect-ratio: 16 / 9;
    }

    /* 検索フォーム: 横一列 → 2列折り返し */
    .tf-search-form {
        flex-wrap: wrap;
    }

    .tf-search-form__field {
        flex: 1 1 40%;
        border-right: none;
        border-bottom: 1px solid var(--tf-border);
    }

    .tf-search-form__submit {
        flex: 1 1 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .tf-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--tf-ivory);
        border-bottom: 1px solid var(--tf-border);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--tf-space-xs) 0;
        z-index: 20;
    }

    .tf-header__nav.is-open {
        display: flex;
    }

    .tf-header__menu {
        flex-direction: column;
        gap: 0;
    }

    .tf-header__menu a {
        display: block;
        padding: var(--tf-space-sm) var(--tf-space-md);
        border-bottom: 1px solid var(--tf-border);
    }

    .tf-header__search {
        padding: var(--tf-space-sm) var(--tf-space-md);
        justify-content: flex-start;
    }

    .tf-header__menu-toggle {
        display: flex;
    }

    .tf-header__menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .tf-header__menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .tf-header__menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .tf-header {
        position: relative;
    }

    .tf-card-grid,
    .tf-card-grid--listing {
        grid-template-columns: repeat(2, 1fr);
    }

    .tf-area-tiles,
    .tf-area-tiles--index {
        grid-template-columns: repeat(3, 1fr);
    }

    .tf-dir-chiplist {
        grid-template-columns: repeat(3, 1fr);
    }

    .tf-card-grid--dir,
    .tf-facility-grid,
    .tf-magazine-grid--archive {
        grid-template-columns: repeat(2, 1fr);
    }

    .tf-cta__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .tf-tea-past {
        grid-template-columns: 100px 1fr auto;
        gap: var(--tf-space-sm);
    }

    .tf-magazine-grid {
        grid-template-columns: 1fr;
    }

    .tf-hero__title {
        font-size: 1.7rem;
    }

    .tf-tea-full__gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    /* SP: 一覧の絞り込みをコンパクトにして、操作開始までの距離を短くする */
    .tf-listing {
        padding-top: var(--tf-space-md);
    }

    .tf-listing__header {
        margin-bottom: var(--tf-space-sm);
    }

    .tf-listing__toolbar {
        padding: 8px 0;
        margin-bottom: var(--tf-space-sm);
    }

    .tf-filter__form {
        row-gap: 4px;
        column-gap: 12px;
    }

    .tf-filter__group {
        padding-top: 0;
        padding-bottom: 8px;
        margin-bottom: 0;
    }

    .tf-filter__heading {
        margin-bottom: 8px;
    }

    .tf-filter__checkbox {
        padding: 3px 0;
    }

    /* SP: 開催ステータス・こだわりは3列（各33.3%）で揃える */
    .tf-filter__group--checklist {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 12px;
    }

    .tf-filter__group--checklist .tf-filter__heading {
        grid-column: 1 / -1;
    }

    .tf-filter__group--checklist .tf-filter__checkbox {
        min-width: 0;
    }

    .tf-filter__subgroup {
        margin-top: 6px;
    }

    .tf-filter-toggle {
        margin-bottom: 8px;
        padding: 8px 16px;
    }

    .tf-filter-panel.is-open {
        margin-bottom: 12px;
    }

    /* セクション見出しの「すべて見る」を下に回す */
    .tf-section__more-link {
        position: static;
        display: block;
        margin-top: var(--tf-space-xs);
    }

    .tf-newsletter__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .tf-newsletter__form {
        flex: 1 1 100%;
        width: 100%;
    }

    .tf-footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .tf-footer__nav {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .tf-card-grid,
    .tf-card-grid--listing {
        grid-template-columns: 1fr;
    }

    .tf-area-tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .tf-search-form__field {
        flex: 1 1 100%;
    }

    .tf-filter__form {
        grid-template-columns: 1fr;
    }
}