@charset "UTF-8";
/* ============================================================================
   fair-base-sp.css ── 生地の森 フェアページ共通スタイル（スマートフォン用）
   ----------------------------------------------------------------------------
   ・fair-base-pc.css とセットで使用します。単体では機能しません。
   ・PC/SPの切り替えは max-width:640px（HTML側の <picture> も同じ値）。
   ----------------------------------------------------------------------------
   ★HTML側の読み込み順について（重要）
     <link rel="stylesheet" href="https://www.kijinomori.com/category/css/fair-base-pc.css">
     <link rel="stylesheet" href="https://www.kijinomori.com/category/css/fair-base-sp.css">

     必ず「pc → sp」の順に2本読み込んでください。
     ここにある @media (max-width:640px) は、fair-base-pc.css と同じ詳細度で
     値を上書きしているため、"後から読み込んだ方が勝つ" というCSSの基本ルールで
     成立しています。順序を逆にすると640px以下でPC側の指定が勝ってしまい、
     スマホ表示が崩れますのでご注意ください。
   ----------------------------------------------------------------------------
   目次（このファイル内）
     11) レスポンシブ（スマートフォン：640px以下）
   ----------------------------------------------------------------------------
   ・フェア固有でSPだけ調整したい項目があれば、このファイルの末尾（@media の
     閉じカッコの手前）に追記してください。PC側と同様に .fair-page 配下、
     fair- 接頭辞のルールに揃えるとメンテナンスしやすくなります。
   ========================================================================== */

/* ============================================================================
   11) レスポンシブ（スマートフォン：640px以下）
   ※PCとSPの切り替えは max-width:640px（HTML側の <picture> も同じ値）
   ========================================================================== */
@media screen and (max-width: 640px) {

  .fair-page {
    font-size: 14px;
    --fair-space-sec: 48px;   /* SPは上下48pxずつ（実質96px） */
    --fair-space-blk: 28px;   /* SPは余白を少し詰める */
    --fair-anchor-offset: 80px;  /* SPの着地位置の余白 */
  }

  .fair-hero,
  .fair-lead,
  .fair-toc,
  .fair-sec,
  .fair-closing,
  .fair-footnav {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* メインビジュアルは横幅いっぱいで表示 */
  .fair-hero { padding-left: 0; padding-right: 0; }
  .fair-page h1.fair-hero__title { font-size: 24px !important; margin-top: 24px !important; }

	.fair-main {
		padding: 0;
	}

  .fair-txt {
    font-size: 14px;
    line-height: inherit;
    margin-top: 22px !important;
}

  .fair-lead__catch,
  .fair-catch { font-size: 17px; }


  .fair-toc__link { padding: 14px 30px 14px 12px; gap: 10px; }
  .fair-toc__label { font-size: 14px; }

  .fair-page .fair-sec__title .fair-sec__ja_lead { font-size: 21px; }	
  .fair-page .fair-sec__title .fair-sec__en { font-size: 22px; }
  .fair-page .fair-sec__title .fair-sec__ja { font-size: 14px; margin-top: 22px; }
  .fair-page .fair-sec__title--single .fair-sec__ja { font-size: 21px; }
  .fair-page h3.fair-subsec__title { font-size: 21px !important; }

  /* 2カラムレイアウトはSPで1カラムに */
  .fair-2col { grid-template-columns: 1fr; gap: 60px 0; }

  .fair-highlight { font-size: 17px;
	line-height: 2.5;
	padding: 20px 0px 8px !important;
	}
  .fair-highlight__date { font-size: 14px; }
  .fair-highlight__lead { font-size: 20px; }

	.fair-2col__item .fair-highlight .fair-highlight__lead span {
	 font-size: 0.7em;
	padding-bottom: 0px;
	}

  .fair-btn {
    display: block;
    min-width: 0;
    width: 100%;
    padding: 15px 34px 15px 18px;
	font-size: 13px;
  }

  .fair-btnwrap { margin-top: 32px; }

  /* カードは基本1列 */
  .fair-cards { gap: 28px; grid-template-columns: 1fr; margin-top: 36px; }

  /* 回遊バナーはSPでも2列（2×2レイアウト） */
  .fair-cards--wide { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .fair-cards--wide .fair-card__head { font-size: 14px; margin-top: 10px; }
  .fair-cards--wide .fair-card__desc { font-size: 12px; }
  .fair-cards--wide .fair-card__more { font-size: 12px; }
  .fair-cards--wide .fair-card__link { width: 100%;	}
  /* --sprow：SPは「左に画像・右にテキスト」の横並びを縦に積む */
  .fair-cards--sprow .fair-card__link {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 14px;
  }
.fair-card__link {
	width: 75%;
	}
  .fair-cards--sprow .fair-card__text {
    margin-top: 0;
    text-align: left;
  }

  /* 単品紹介の画像はSPで75％表示 */
  .fair-item__thumb { max-width: 75%; }

  .fair-closing { padding-top: 44px; padding-bottom: 44px; }
  .fair-page h2.fair-closing__title { font-size: 19px !important; margin-top: 28px !important; }

	/*リノクルールアンコールエリア*/
	.color-box .fair-cards--sprow .fair-card__link {
	    grid-template-columns: 50% 1fr;
        align-items: center;
        gap: 1em;
	}
	.color-box .fair-cards--sprow .fair-card__text {
        margin-top: 0;
        text-align: center;
        font-size: 15px;
    }
	.color-box .fair-card__link {
        width: 90%;
    }

  /* ランダムに画像を配置するエリア */
.pickup-item.main .item-img-collage {
		height: 208vw;
	}
	.pickup-item.main .img-1 {
		top: 0px;
		left: 0px;
		width: 85%;
		height: auto;
	}
	.pickup-item.main .img-2 {
		top: 100vw;
        right: 0vw;
        width: 58%;
        height: auto;
	}
	.pickup-item.main .img-3 {
		top: 158vw;
        left: 3vw;
        width: 71%;
        height: 180px;
	}
	.pickup-item.main .img-4 {
		top: 81vw;
        left: 14vw;
        width: 71%;
        height: auto;
    }
	ul.find {
	   gap: 30px 10px;
	}
	ul.find li a.fair-card__link {
		width: 100%;
	}
	.fair-closing__img {
		width: 75%;
	}
	.fair-footnav__list {
	 display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 28px;
    flex-direction: column;
    align-items: center;
	}
	.fair-subsec__catch {
	font-size: 17px;
	}


}