/* ==============================================================
   タブレット最適化 — 共通 (〜1024px)
   固定 px 幅コンテナをすべて可変幅に
   ============================================================== */
@media screen and (max-width: 1024px) {

    /* メインビジュアル */
    .mainVisual__box {
        width: 90%;
    }

    /* コンテンツ共通ボックス */
    .content__2__box,
    .content__3__box,
    .content__4__box {
        width: 90%;
    }

    /* コンテンツ4 子要素 */
    .content__4__box__content__left {
        width: 40%;
        min-width: 280px;
        margin: 34px auto 34px;
    }

    /* 記事詳細・サイドバー付きレイアウト */
    .single__detail__box {
        width: 90%;
    }

    /* ニュース */
    .news__box,
    .news__detail__box {
        width: 90%;
    }

    /* FAQ / プライバシー */
    .faq__box,
    .privacy__box {
        width: 90%;
    }

    /* パンくずリスト */
    .custom_breadcrumbs__box {
        width: 90%;
    }

    /* FAQ アコーディオン */
    .contents__12__list {
        width: 90%;
    }

    /* エラーページ */
    .error__box {
        width: 90%;
    }

    /* 検索モーダル */
    .search-button-form-container {
        width: 90%;
        max-width: 600px;
    }

    /* お問い合わせ */
    .contact__box {
        width: 90%;
        max-width: 580px;
    }

    /* お問い合わせ完了 */
    .contactThanks__box {
        width: 90%;
        max-width: 520px;
    }

    /* コンテンツ1 テキストブロック */
    .content__1__box {
        width: 85%;
        max-width: 540px;
    }

    /* コンテンツ1 装飾画像: はみ出し防止 */
    .content__1__box__img1 {
        width: 50px;
        left: -60px;
    }

    .content__1__box__img2 {
        width: 70px;
        right: -70px;
    }

    .content__1__box__img3 {
        width: 60px;
        right: -55px;
    }

    /* コンテンツ2 カード下部: 固定高さを解除 */
    .content__2___list__items__bottom {
        height: auto;
        min-height: 200px;
        padding-bottom: 24px;
    }

    /* コンテンツ3 カード: 固定高さを解除 */
    .content__3__box__list__items {
        height: auto;
        min-height: 100px;
        padding: 20px 14px;
    }

    /* コンテンツ3 nth-child の padding-left を上書き */
    .content__3__box__list__items:nth-child(2),
    .content__3__box__list__items:nth-child(4) {
        padding-left: 14px;
    }

    /* between__elementWrap__2 (SVGイラスト) の幅制御 */
    .between__element__center {
        width: 50%;
        max-width: 480px;
    }

    .between__element__center svg,
    .between__element svg {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* between__elementWrap__3 */
    .between__elementWrap__3 {
        width: 90%;
        max-width: 400px;
    }
}


/* ==============================================================
   タブレット最適化 — ヘッダー切り替え (769px – 1024px)
   PC ヘッダーを隠して SP ハンバーガーヘッダーを表示
   ============================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* PC ヘッダーを非表示 */
    .header.pc-show {
        display: none;
    }

    /* SP ヘッダーをタブレットでも表示 */
    .sp__header2__wrap.sp-show {
        display: block;
    }

    /* body の上部余白（固定ヘッダー分） */
    body {
        padding-top: 50px;
    }

    /* ---- tablet layout 769-1024px ---- */

    /* ---- メインビジュアル ---- */
    .mainVisual {
        margin-bottom: 80px;
    }

    .mainVisual__box {
        display: flex;
        align-items: center;
        gap: 28px;
    }

    .mainVisual__box__left {
        width: 46%;
    }

    .mainVisual__box__right {
        width: 50%;
    }

    .mainVisual__box__left__title {
        font-size: 30px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .mainVisual__box__left__des {
        font-size: 14px;
        line-height: 1.9;
        margin-bottom: 22px;
    }

    .mainVisual__box__left__linkWrap {
        width: 100%;
    }

    .mainVisual__box__left__link {
        width: 47%;
        height: 52px;
        font-size: 14px;
    }

    /* ---- コンテンツ2: 3カラム維持 ---- */
    .content__2__list {
        gap: 14px;
    }

    .content__2__list__items {
        width: calc(33.3% - 10px);
    }

    .content__2___list__items__bottom {
        width: 88%;
    }

    .content__2___list__items__bottom__title {
        font-size: 18px;
    }

    /* ---- コンテンツ3 ---- */
    .content__3__box__list__items {
        padding: 18px 16px;
    }

    /* nth-child の padding-left を揃える */
    .content__3__box__list__items:nth-child(2),
    .content__3__box__list__items:nth-child(4) {
        padding-left: 16px;
    }

    .content__3__box__list__items__left {
        width: 72px;
        flex-shrink: 0;
    }

    .content__3__box__list__items__right__title {
        font-size: 18px;
    }

    /* ---- コンテンツ4: sticky 画像を相対配置に ---- */
    .content__4__box__content__right__title {
        font-size: 28px;
    }

    .content__4__box__content__left__img {
        position: relative;
        top: auto;
    }

    /* content__4 内リンクボタン */
    .content__4 .mainVisual__box__left__linkWrap {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .content__4 .mainVisual__box__left__link {
        flex: 1;
        width: auto;
        height: 52px;
        font-size: 13px;
    }

    /* ---- 記事詳細: 2カラム維持（1000px タブレット用に最適化） ---- */
    .single__detail__box__left {
        width: calc(100% - 280px);
    }

    .single__detail__box__right {
        width: 252px;
    }

    /* 記事一覧リスト: サムネイル + メタ横並び */
    .single__detail__box__left__box__postList__box__list__items__meta {
        width: auto;
        flex: 1;
    }

    .single__detail__box__left__box__postList__box__list__items__meta__title {
        font-size: 17px;
    }

    /* 関連記事: 2カラムグリッド */
    .single__detail__box__left__box__related__box__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .single__detail__box__left__box__related__box__list__items__thumbnail__img {
        height: 18vw;
    }

    /* ---- FAQ アコーディオン ---- */
    .contents__12__list__items {
        width: calc(50% - 10px);
    }

    .contents__12__content__text {
        width: calc(100% - 80px);
    }
}


/* ==============================================================
   狭いタブレット (769px – 900px) — シングルカラムに切り替え
   ============================================================== */
@media screen and (min-width: 769px) and (max-width: 900px) {

    /* ---- コンテンツ1 装飾画像: 狭い幅では完全に隠す ---- */
    .content__1__box__img1,
    .content__1__box__img2,
    .content__1__box__img3 {
        display: none;
    }

    /* ---- コンテンツ3: 狭いタブレットでは1カラムに ---- */
    .content__3__box__list__items {
        float: none;
        width: 100%;
        padding: 16px 0;
        border-right: none !important;
    }

    .content__3__box__list__items:nth-child(2),
    .content__3__box__list__items:nth-child(4) {
        padding-left: 0;
    }

    .content__3__box__list__items:nth-child(3) {
        border-bottom: 1px solid #ddd;
    }

    .content__3__box__list__items__left {
        width: 68px;
    }

    .content__3__box__list__items__right {
        padding-left: 20px;
    }

    /* ---- between__elementWrap__1 画像 ---- */
    .between__elementWrap__1 .between__element__left {
        width: 38%;
        margin-right: 8%;
    }

    .between__elementWrap__1 .between__element__right {
        width: 38%;
    }

    /* ---- メインビジュアル: 縦積み (画像→テキスト) ---- */
    .mainVisual__box {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 20px;
    }

    .mainVisual__box__right {
        width: 60%;
        max-width: 280px;
        margin: 0 auto;
    }

    .mainVisual__box__left {
        width: 100%;
    }

    .mainVisual__box__left__title {
        font-size: 22px;
        line-height: 1.5;
    }

    .mainVisual__box__left__des {
        font-size: 14px;
        line-height: 1.9;
        margin-bottom: 20px;
    }

    .mainVisual__box__left__linkWrap {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .mainVisual__box__left__link {
        flex: 1;
        width: auto;
        height: 50px;
    }

    /* ---- コンテンツ2: 2カラムに ---- */
    .content__2__list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .content__2__list__items {
        width: calc(48% - 8px);
    }

    .content__2___list__items__bottom {
        height: auto;
        padding-bottom: 20px;
    }

    /* ---- コンテンツ4: 縦積みに ---- */
    .content__4__box__content {
        display: block;
    }

    .content__4__box__content__left {
        width: 100%;
    }

    .content__4__box__content__right {
        width: 100%;
    }

    .content__4__box__content__left__img {
        position: static;
        width: 52%;
        max-width: 260px;
        display: block;
        margin: 0 auto 28px;
    }

    .content__4__box__content__right__title {
        font-size: 24px;
        line-height: 1.4;
    }

    .content__4 .mainVisual__box__left__linkWrap {
        display: flex;
        gap: 10px;
        width: 100%;
        margin-bottom: 28px;
    }

    .content__4 .mainVisual__box__left__link {
        flex: 1;
        width: auto;
        height: 48px;
        font-size: 13px;
    }

    /* ---- 記事詳細: サイドバーを下に移動 ---- */
    .single__detail__box {
        display: block;
    }

    .single__detail__box__left {
        width: 100%;
        margin-bottom: 44px;
    }

    .single__detail__box__right {
        width: 100%;
    }

    /* 記事一覧: サムネイル小さく横並び */
    .single__detail__box__left__box__postList__box__list__items__link {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 0;
    }

    .single__detail__box__left__box__postList__box__list__items__thumbnail {
        flex-shrink: 0;
        width: 120px;
        height: 76px;
        margin-bottom: 0;
        overflow: hidden;
        border-radius: 6px;
    }

    .single__detail__box__left__box__postList__box__list__items__thumbnail__img {
        width: 100%;
        height: 76px;
        object-fit: cover;
    }

    .single__detail__box__left__box__postList__box__list__items__meta {
        width: auto;
        flex: 1;
    }

    .single__detail__box__left__box__postList__box__list__items__meta__title {
        font-size: 16px;
        margin-bottom: 8px;
        -webkit-line-clamp: 2;
    }

    .single__detail__box__left__box__postList__box__list__items__meta__cat {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 6px;
    }

    .single__detail__box__left__box__postList__box__list__items__meta__time {
        display: inline-block;
        margin-left: 0;
    }

    /* 関連記事: 2カラムグリッド */
    .single__detail__box__left__box__related__box__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .single__detail__box__left__box__related__box__list__items__thumbnail__img {
        height: 24vw;
    }

    /* サイドバーランキングを2カラムグリッドに */
    .single__detail__box__right__box__ranking__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .single__detail__box__right__box__ranking__list__items {
        margin-bottom: 0;
    }

    /* ---- FAQ アコーディオン: 1カラム ---- */
    .contents__12__list__items {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    .contents__12__content__text {
        width: calc(100% - 80px);
        font-size: 14px;
    }

    /* ---- ニュース詳細文字サイズ ---- */
    .news__detail__box__title {
        font-size: 24px;
        line-height: 1.55;
    }
}


/* --------------------------------------------------
   レスポンシブ: タブレット (769px - 1024px)  — page-favorite
   -------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__thumbnail {
        width: 90px;
        height: 56px;
    }

    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__thumbnail img,
    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__thumbnail__img {
        width: 100% !important;
        height: 56px !important;
        object-fit: cover;
    }

    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__link {
        gap: 12px;
        padding: 14px 0 !important;
    }

    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__meta__title {
        font-size: 14px !important;
    }

    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__meta__time__2 {
        display: none;
    }
}

/* --------------------------------------------------
   レスポンシブ: モバイル (〜768px)
   ベースCSSの display:block / width:100% を !important で打ち消す
   -------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* 件数バー */
    .page-template-page-favorite .single__detail__box__left__box__favoriteClear {
        padding: 10px 14px;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .page-template-page-favorite .single__detail__box__left__box__favoriteClear__numBox {
        font-size: 13px;
    }

    .page-template-page-favorite .single__detail__box__left__box__favoriteClear__numBox__num {
        font-size: 18px;
    }

    /* リストアイテム */
    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items {
        max-height: 200px;
    }

    /* リンク: ベースCSSの display:block を上書き */
    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 12px 0 !important;
        border-bottom: none !important;
    }

    /* サムネイル: ベースCSSの width:100% / margin-bottom:5px を上書き */
    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__thumbnail {
        display: block !important;
        flex-shrink: 0 !important;
        width: 72px !important;
        height: 46px !important;
        margin-bottom: 0 !important;
        overflow: hidden;
        border-radius: 5px;
    }

    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__thumbnail img,
    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__thumbnail__img {
        width: 100% !important;
        height: 46px !important;
        object-fit: cover !important;
    }

    /* メタ */
    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__meta {
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        flex: 1 !important;
        min-width: 0 !important;
        gap: 4px !important;
    }

    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__meta__title {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
        -webkit-line-clamp: 2;
    }

    /* catAndTime行: ベースCSSの display:block を打ち消して横並びを維持 */
    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__meta__catAndTime {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* カテゴリ: ベースCSSの display:block / margin-bottom:15px を上書き */
    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__meta__cat {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-bottom: 0 !important;
    }

    /* 投稿日: ベースCSSの display:block / margin-left:0 を上書き */
    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__meta__time {
        display: flex !important;
        align-items: center !important;
        margin-left: 0 !important;
        font-size: 10px !important;
    }

    /* 更新日: モバイルでは非表示（スペース節約） */
    .page-template-page-favorite .single__detail__box__left__box__postList__box__list__items__meta__time__2 {
        display: none !important;
    }

    /* 削除ボタン */
    .page-template-page-favorite .favorite-remove-btn {
        width: 32px;
        height: 32px;
        font-size: 15px;
        margin-left: 4px;
    }

    /* 空状態 */
    .page-template-page-favorite .fav-empty-msg {
        padding: 40px 20px;
        font-size: 13px;
    }

    .page-template-page-favorite .fav-empty-msg::before {
        font-size: 38px;
    }
}

/* ==============================================================
   モバイル補正 — max-width:1024px ブロックとのカスケード競合を解消
   1024px ブロックのルールはファイル後方であるためモバイルにも
   適用されてしまう。このブロックで正しい値に上書きする。
   ============================================================== */
@media screen and (max-width: 768px) {

    /* content__3 アイテム: タブレット用 padding(20px 14px)/min-height をリセット */
    .content__3__box__list__items {
        padding: 16px 0;
        min-height: 0;
    }

    .content__3__box__list__items:nth-child(2),
    .content__3__box__list__items:nth-child(4) {
        padding-left: 0;
    }
}