/* =============================================
   responsive.css - 完全版
   ブレークポイント：
     SP  ： 〜743px
     TAB ： 744px 〜 1024px（iPad mini / iPad）
     PC  ： 1025px〜
   ============================================= */


/* =============================================
   SP（〜743px）
   ※ 768px → 743px に変更済み
   ============================================= */

@media screen and (max-width: 1024px) {

    /* --- ヘッダー --- */
    .header-inner {
        padding-block: 10px;
    }

    .site-logo img {
        max-width: 180px;
        max-height: 46px;
        margin-left: 20px;
    }

    .nav-toggle {
        display: flex;
    }

    .global-nav {
        position: fixed;
        top: 0;
        padding-top: 80px;
        left: 0;
        width: 100%;
        height: 100dvh;
        background-color: #fff;
        padding-inline: var(--container-pad);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        z-index: 99;
    }

    .global-nav.is-open {
        transform: translateX(0);
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
    }

    .nav-list a {
        padding: 16px 8px;
        font-size: 1rem;
        border-bottom: 1px solid var(--color-border);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* --- ヒーロースライダー --- */
    .hero-slider--pc { display: none; }
    .hero-slider--sp { display: block; }
    .hero-slide__img { height: 60vw; min-height: 240px; }
    .hero-slide__caption { font-size: 0.875rem; bottom: 20px; }

    /* --- 多久市紹介 --- */
    .about-section { padding-block: 48px; }
    .about-inner { grid-template-columns: 1fr; gap: 24px; }
    .about-map { width: 95%; margin-inline: auto; }
    .about-text__body { font-size: 0.9rem; }

    /* --- 特産品 --- */
    .tokusan-section { padding-block: 48px; }
    .tokusan-section__title { margin-bottom: 36px; }
    .tokusan-list { grid-template-columns: 1fr; gap: 40px; }
    .tokusan-item { flex-direction: row; gap: 20px; align-items: flex-start; }
    .tokusan-item__img-wrap { flex: 0 0 120px; aspect-ratio: 1 / 1; margin-top: 10px; }
    .tokusan-item__body { padding-top: 0; }

    /* --- おすすめ返礼品 --- */
    .gifts-section { padding-block: 48px; }
    .gifts-section__title { margin-bottom: 36px; }
    .gifts-list { grid-template-columns: 1fr; gap: 24px; }
    .gifts-item { flex-direction: column; }
    .gifts-item__img-wrap { flex: unset; width: 100%; aspect-ratio: 1 / 1; }
    .gifts-item__img { height: 100%; }
    .gifts-item__name { font-size: 1.0rem; padding: 12px 12px 4px; }
    .gifts-item__links { flex-direction: row; flex-wrap: wrap; padding: 8px 12px 14px; gap: 6px; }
    .gifts-item__btn {
    flex: 1;
    font-size: 1.0rem;
    padding: 8px 6px;
    line-height: 130%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* --- Instagram --- */
    .instagram-section { padding-block: 48px; }
    .instagram-section__header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }

    /* --- 寄附の使い道 --- */
    .usage-section { padding-block: 48px; }
    .usage-section__header { margin-bottom: 40px; text-align: left; }
    .usage-section__title::after { margin-inline: unset; }
    .usage-list {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .usage-section__more { margin-top: 20px; }
	
	.usage-section__lead {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-sub);
    text-align: justify;
}

    /* --- SNS --- */
    .sns-section { padding-block: 48px; }
    .sns-grid { grid-template-columns: 1fr; gap: 30px; }

    /* --- 固定ページ共通 --- */
    .page-header { padding-block: 36px; }
    .page-content { padding-block: 48px; }
    .entry-content h2 { font-size: 1.2rem; margin-block: 36px 16px; }
    .gifts-page-section { margin-bottom: 48px; }
    .contact-wrap__lead { text-align: left; }

}


/* ============================================
   お問い合わせ レスポンシブ（SP）
============================================ */
@media (max-width: 743px) {

    .page-hero {
        height: 200px;
    }
    .page-hero__title {
        font-size: 1.4rem;
        bottom: 32%;
    }

    .page-container {
        padding: 20px 30px 20px;
    }

    .contact-faq-notice {
        padding: 24px 20px;
        margin-bottom: 40px;
    }

    /* テーブルをブロック表示に変更 */
    .contact-form-wrap .wpcf7-form table,
    .contact-form-wrap .wpcf7-form tbody,
    .contact-form-wrap .wpcf7-form tr,
    .contact-form-wrap .wpcf7-form th,
    .contact-form-wrap .wpcf7-form td {
        display: block;
        width: 100%;
    }
    .contact-form-wrap .wpcf7-form th {
        border-bottom: none;
        padding: 14px 12px 6px;
    }
    .contact-form-wrap .wpcf7-form td {
        padding: 6px 12px 14px;
    }

    .contact-form-wrap input[type="submit"],
    .contact-form-wrap .wpcf7-submit {
        width: 60%;
		margin-top: 10px;
    }

    .contact-privacy {
        padding: 24px 16px;
    }
}


/* ============================================
   FAQ レスポンシブ（SP）
============================================ */
@media (max-width: 743px) {

    .faq-intro {
        font-size: 0.9rem;
        margin-bottom: 32px;
        text-align: left;
    }

    .faq-item__question {
        font-size: 0.92rem;
        padding: 18px 12px;
        gap: 10px;
    }

    .faq-item__label {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .faq-item__icon {
        width: 18px;
        height: 18px;
    }

    .faq-item__answer-inner {
        padding: 0 12px 20px;
        gap: 10px;
    }

    .faq-item__answer-body {
        font-size: 0.88rem;
    }

    .faq-contact-banner {
        padding: 36px 16px;
    }

    .btn-contact {
        padding: 14px 32px;
        font-size: 0.9rem;
        display: block;
        max-width: 280px;
        margin: 0 auto;
        text-align: center;
    }
}


/* ============================================
   Footer レスポンシブ（SP）
============================================ */
@media screen and (max-width: 743px) {

    .site-footer {
        padding-top: 50px;
    }

    .footer-inner {
        gap: 24px;
        padding-bottom: 32px;
    }

    .footer-logo img {
        width: 200px;
    }

    .footer-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 1px;
    }

    .footer-address__org {
        font-size: 0.9rem;
    }

    .footer-address__zip-addr,
    .footer-address__tel {
        font-size: 0.82rem;
    }

    /* モバイルではセパレーター非表示 */
    .footer-nav__item + .footer-nav__item::before {
        display: none;
    }

    .footer-nav__item a {
        font-size: 0.95rem;
    }

    .footer-copyright p {
        font-size: 0.72rem;
    }
}

/* スマホ小（〜375px） */
@media screen and (max-width: 375px) {

    .footer-logo img {
        width: 200px;
    }
}


/* =============================================
   SP・TAB（〜1024px）
   iPad / iPad mini までをハンバーガーメニューに統合
   ============================================= */
@media screen and (max-width: 1024px) {
    /* --- ヘッダー・メニュー共通 --- */
    .nav-toggle { display: flex; }
    .global-nav {
        position: fixed; top: 0; padding-top: 80px; left: 0;
        width: 100%; height: 100dvh; background-color: #fff;
        transform: translateX(100%); transition: transform 0.3s ease;
        z-index: 99; overflow-y: auto;
    }
    .global-nav.is-open { transform: translateX(0); }
    .nav-list { flex-direction: column; gap: 0; }

    /* --- おすすめ返礼品：基本1カラム（SP用） --- */
    .gifts-list {
        display: grid;
        grid-template-columns: 1fr; /* 基本は1列 */
        gap: 24px;
    }
}

/* =============================================
   TAB専用（744px 〜 1024px）
   iPadでの表示を2カラムへ
   ============================================= */
@media screen and (min-width: 744px) and (max-width: 1024px) {
    /* --- おすすめ返礼品：2カラム --- */
    .gifts-list {
        grid-template-columns: repeat(2, 1fr); /* 2列 */
    }
}

/* =============================================
   PC（1025px〜）
   ハンバーガー非表示・3カラム
   ============================================= */
@media screen and (min-width: 1025px) {
    .nav-toggle { display: none; }

    /* --- おすすめ返礼品：3カラム --- */
    .gifts-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3列 */
        gap: 40px 30px;
    }
}



/* =============================================
   TAB専用（744px 〜 1024px）
   ============================================= */
@media screen and (min-width: 744px) and (max-width: 1024px) {

    /* --- 寄附の使い道：2カラム化 --- */
    .usage-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2列 */
        gap: 40px 24px;
    }

    .usage-item {
        /* タブレットでは左右入れ替えを解除して縦並びに統一するのが一番綺麗です */
        flex-direction: column !important; 
        align-items: flex-start;
    }

    .usage-item__img-wrap {
        width: 100%;
        margin-bottom: 0px;
    }

    .usage-item__body {
        width: 100%;
        padding: 0; /* 左右の余白をリセット */
    }
}

/* =============================================
   PC（1025px〜）
   ============================================= */
@media screen and (min-width: 1025px) {
    /* PCでは、本来の「交互に見せる（1カラムのワイド表示）」か「3列」か選べます。
       もし3列にしたい場合は以下を追記 */
    .usage-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
    .usage-item {
        flex-direction: column !important;
    }
}

@media screen and (min-width: 744px) and (max-width: 1024px) {

    /* --- お問い合わせ・汎用ボタンの最適化 --- */
    .btn-contact,
    .gifts-section__more .btn,
    .usage-section__more .btn,
    .contact-form-wrap input[type="submit"] {
        width: auto;           /* 横幅いっぱいを解除 */
        min-width: 200px;      /* 最低限の存在感は確保 */
        max-width: 300px;      /* これ以上は広げない（ここが肝！） */
        margin-inline: auto;   /* 中央寄せ */
        display: block;        /* 中央寄せを効かせるため */
        padding-block: 14px;   /* 押しやすい高さを維持 */
        margin-top: 30px;
    }

    /* --- FAQのバナーなども調整 --- */
    .faq-contact-banner {
        padding: 40px;
        text-align: center;
    }
}


@media screen and (min-width: 744px) and (max-width: 1024px) {

    /* --- SNSグリッド：iPad最適化 --- */
    .sns-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2列にする */
        gap: 40px 24px;
    }

    /* 3つ目のInstagramを、下段で横いっぱいに使う */
    .sns-col--instagram {
        grid-column: 1 / 3; /* 1〜3列のライン、つまり全幅 */
        margin-top: 20px;
    }

    /* Instagramの中身（Shortcode側）も調整が必要なら */
    .sns-col--instagram .sns-col__embed {
        max-width: 100%;
    }
}

/* =============================================
   PC（1025px〜）
   ここなら3つ並んでも戦える
   ============================================= */
@media screen and (min-width: 1025px) {
    .sns-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3列 */
        gap: 30px;
    }
}



@media screen and (min-width: 744px) and (max-width: 1024px) {

    /* --- 特産品セクション：iPad最適化 --- */
    .tokusan-list {
        display: flex;
        flex-direction: column; /* 縦に並べる（1つ1つを大きく見せる） */
        gap: 48px;             /* 項目間の余白をしっかり取る */
    }

    .tokusan-item {
        display: flex;
        flex-direction: row;   /* 横並びにする */
        align-items: center;   /* 上下中央揃え */
        gap: 32px;             /* 画像とテキストの間の距離 */
    }

    .tokusan-item__img-wrap {
        flex: 0 0 42%;         /* 画像の幅を42%に（これでかなり大きく見えます） */
        max-width: 400px;      /* 広がりすぎ防止 */
        aspect-ratio: 1 / 1;   /* 正方形を維持 */
        margin-top: 0;         /* SP用の余白をリセット */
    }

    .tokusan-item__img {
        width: 100%;
        height: 100%;
        object-fit: cover;     /* 画像を枠いっぱいに綺麗に収める */
        border-radius: 8px;    /* 柔らかい印象を与えるなら追加 */
    }

    .tokusan-item__body {
        flex: 1;               /* 残りの58%をテキストに */
    }

    .tokusan-item__name {
        font-size: 1.4rem;     /* タブレットで見栄えのするサイズ */
        margin-bottom: 12px;
        color: var(--color-primary); /* 必要なら色を指定 */
    }

    .tokusan-item__text {
        font-size: 1rem;
        line-height: 1.8;      /* 読みやすさを確保 */
    }
}


/* ===========================
   フッター レスポンシブ（追記）
   =========================== */

@media (max-width: 768px) {

  .site-footer {
    padding: 36px 0px 0px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 24px;
    padding: 0 0px 40px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 24px;
  }

  .footer-logo__title {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .site-footer {
    padding: 50px 0px 0px;
  }
  .footer-nav__list a {
    font-size: 14px;
  }
  .footer-copyright {
    font-size: 10px;
    width: 100%;        /* ← 追加 */
    text-align: center; /* ← 中央揃えにする場合（不要なら削除OK） */
  }
}