@charset "euc-jp";

.p-top-noticeMessage {
  margin: 8px;
  margin-bottom: 16px;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #E6EBE4;
  border-radius: 4px;
}

.p-top-notice {
	padding: 16px;
	padding-bottom: 16px;
	margin-bottom: 16px;
}
.p-top-notice__date {
	font-size: 12px;
	font-weight: bold;
	color: #A0AC9B;
	margin-bottom: 4px;
}
.p-top-notice__body {
	/*height: 85px;*/
	overflow: hidden;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 8px;
	transition: all .3s ease;
}
.p-top-footer-fixed {
	width: 100%;
	height: 56px;
	display: flex;
	justify-content: space-between;
	padding: 4px;
	position: fixed;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
}
.p-top-footer-fixed__mail,
.p-top-footer-fixed__line {
	width: calc(50% - 2px);
	height: 100%;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.p-top-footer-fixed__mail {
	background: #FD668A;
}
.p-top-footer-fixed__line {
	background: #F37D15;
}
.p-top-footer-fixed__mail a,
.p-top-footer-fixed__line a {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.p-top-banner-frame__item-full {
  margin-bottom: 17px;
  width: 100%;
  text-align: center;
}
.p-top-banner-frame__item-full img {
  width: 100%;
}
.p-top-banner-single {
  margin: 0 16px;
  margin-bottom: 16px;
  text-align: center;
}
.p-top-banner-single img {
  width: 100%;
  vertical-align: middle;
}
/*------------------------------*/
@media screen and (min-width: 768px) {
  .p-top-noticeMessage {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    line-height: 1.5;
    margin-bottom: 32px;
  }
  .p-top-banner-single {
    max-width: 686px;
    margin: 0 auto;
    margin-bottom: 16px;
  }
  .p-top-banner-frame {
    max-width: 686px;
    margin: 0 auto;
  }
  .c-title,
  .c-title-second {
  	width: 1200px;
    margin: 0 auto;
    height: 56px;
    line-height: 56px;
  }
  .p-top-notice,
  .p-top-menu,
  .p-top-search,
  .p-top-ranking,
  .p-top-itemlist,
  .p-top-desc,
  .c-footer-menu
  {
  	width: calc(1200px - 32px);
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
  }
  .p-top-menu li {
  	width: 25%;
    margin-bottom: 49px
  }
  .p-top-menu__img {
  	width: 180px;
    margin-bottom: 16px;
  }
  .p-top-notice__readmore {
  	display: none;
  }
  .p-top-notice__body {
  	height: auto !important;
  }
  .p-top-notice {
    margin-top: 16px;
    margin-bottom: 48px;
  	background: #E6EBE4;
  }
  .p-top-search form {
  	display: flex;
  }
  .c-select,
  .c-search {
    width: 30%;
  	margin-right: 16px;
  }
  .p-top-itemlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .p-top-itemlist__item {
    width: calc(50% - 8px);
    margin-bottom: 16px;
    border: 1px solid #E6EBE4;
    padding: 0;
    box-sizing: border-box;
    position: relative;
  }
  .p-top-itemlist__thumb {
    width: 160px;
    height: 160px;
  }
  .p-top-itemlist__price {
    margin-bottom: 16px;
  }
  .p-top-itemlist__item::after {
  	content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    top: 50%;
    right: 8px;
    border-top: 1px solid #E6EBE4;
    border-right: 1px solid #E6EBE4;
    transform: translateY(-50%) rotate(45deg);
  }
  .p-top-desc__thumb img {
  	width: 375px;
  }
  .p-top-desc__thumb {
    margin-bottom: 16px;
    float: left;
    display: inline;
    margin-right: 16px;
  }
  .p-top-desc__thumb img {
  	width: 285px;
  }
  .p-top-desc__body {
    display: inline;
  }
    .p-top-desc2__body {
    height: auto;
  }
  .c-footer-menu ul {
  	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 48px;
  }
  .c-footer-menu li {
    width: calc(50% - 8px);
  }
  .c-footer-menu li a {
  	height: 134px;
  }
  .p-top-footer-fixed {
  	width: 220px;
    height: 112px;
    flex-direction: column;
    left: auto;
    right: 16px;
  }
  .p-top-footer-fixed__mail, .p-top-footer-fixed__line {
  	width: 100%;
    margin-bottom: 8px;
  }
}

/* ============================================================
   いしだ茶屋 TOP 整理用CSS  ここから
   ============================================================ */

/* ── 1. 余白のリズムを統一 ───────────────────
   これまで <br> の個数でバラバラだった間隔を
   セクション単位で統一します                        */

.main > br { display: none; }
/* ※ 余白調整用の <br> を無効化しています。
   今後 <br> で余白を空けようとしても効きません。
   余白は下の margin で調整してください。            */

.main .c-title,
.main .c-title-second {
  margin: 52px 0 20px;
}
.main > .c-title:first-child,
.main > .c-title-second:first-child {
  margin-top: 24px;
}

.main .p-top-banner-frame__item-full { margin-bottom: 16px; }
.main .p-top-banner-frame2           { margin-bottom: 16px; }
.main .p-top-banner-frame            { margin-bottom: 16px; }
.main .p-top-banner-single           { margin-bottom: 16px; }
.main .p-top-slide                   { margin-bottom: 24px; }
.main .p-top-search                  { margin-bottom: 8px; }
.main .p-top-menu                    { margin-bottom: 8px; }
.main .p-top-ranking                 { margin-bottom: 8px; }
.main .p-top-itemlist                { margin-bottom: 8px; }
.main .p-top-desc                    { margin-bottom: 32px; }

.main hr {
  margin: 48px 0;
  border: 0;
  border-top: 1px solid #e0dbd0;
}


/* ── 2. 画像のガタつきを防ぐ ──────────────────
   ※スライダーとランキングは幅をJSで計算しているため
     この指定から除外しています（画像切れの防止）。   */

.main img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;   /* 画像下の余分な隙間を消す */
}
.main .p-top-slide img,
.main .p-top-ranking img {
  max-width: none;
}


/* ── 3. 注目商品キーワード（<font>タグの代替） ──
   HTML側の <font size="5"> を削除した分をここで指定 */

.main .p-top-attention {
  margin-top: 16px;
}
.main .p-top-attention__title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
.main .p-top-attention__item ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main .p-top-attention__item li { margin: 0; }
.main .p-top-attention__item a {
  display: inline-block;
  font-size: 14px;
  line-height: 1.4;
  padding: 7px 12px;
  border: 1px solid #ddd6c6;
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.main .p-top-attention__item a:hover {
  background: #f3efe4;
}

/* タグの左に浮いていた「&#9654;」を除去 */
.main .p-top-attention__item li::before,
.main .p-top-attention__item a::before {
  content: none !important;
  display: none !important;
}


/* ── 4. YouTube を画面幅に合わせて表示 ────────── */

.main .p-top-movie {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}
.main .p-top-movie iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ── 5. 【最重要】固定フッターの被りを解消 ──────
   スマホ下端の「メルマガ／LINE@」固定バーが
   商品名・価格・フッターリンクを隠していた問題の修正。 */

.p-top-footer-fixed {
  height: 56px;
  box-sizing: border-box;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0px);  /* iPhoneのホームバー対策 */
}
.p-top-footer-fixed a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 1.3;
}

/* 本文の最後に、固定バー＋ホームバー分の余白を追加 */
body {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}


/* ── 6. 商品名・説明文の行数を調整 ───────────
   「合計19…」のように2行で切れて内容が判断できなかった
   問題の修正。既存の2行指定を上書きします。         */

.main .p-top-itemlist__name {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.5 !important;
  max-height: none !important;
  height: auto !important;
  text-overflow: clip !important;
  white-space: normal !important;
}
.main .p-top-itemlist__desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.6 !important;
  max-height: none !important;
  height: auto !important;
  white-space: normal !important;
}


/* ── 6-2. サムネイル画像を大きく（縦横比を保つ） ──
   写真が小さくて内容が伝わらなかった問題の修正。
   正方形の枠に収め、object-fit で比率を保ちます。
   （横長に潰れる問題への対策）                      */

.main .p-top-itemlist__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.main .p-top-itemlist__item > a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}
.main .p-top-itemlist__thumb {
  flex: 0 0 34%;
  width: 34% !important;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
  overflow: hidden;
}
.main .p-top-itemlist__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  max-width: 100% !important;
}
.main .p-top-itemlist__body {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
}


/* ── 7. 横スクロールの操作性を改善 ──────────────
   人気ランキングが指で動かしにくかった問題の修正。
   慣性スクロール＋1件ずつピタッと止まるようにします。 */

.main .p-top-ranking ul {
  -webkit-overflow-scrolling: touch;   /* 慣性スクロール（iOS） */
  overscroll-behavior-x: contain;      /* 端で画面全体が動くのを防ぐ */
  scroll-snap-type: x proximity;       /* 1件ずつ止まる */
  scroll-padding-left: 14px;
}
.main .p-top-ranking li {
  scroll-snap-align: start;
}

/* トップスライダー：縦スクロールを妨げず、横スワイプはJSに任せる */
.main .p-top-slide {
  overflow: hidden;
  touch-action: pan-y;
}
.main .p-top-slide ul,
.main .p-top-slide li,
.main .p-top-slide .slick-list,
.main .p-top-slide .slick-track {
  touch-action: pan-y;
}
/* スライダー画像は枠いっぱいに（切れ・はみ出しの防止） */
.main .p-top-slide li img,
.main .p-top-slide .slick-slide img {
  width: 100%;
  height: auto;
  display: block;
}
/* ページ送りの●を押しやすく */
.main .p-top-slide .slick-dots li {
  width: 22px;
  height: 22px;
}
.main .p-top-slide .slick-dots li button {
  width: 22px;
  height: 22px;
}


/* ── 8. 左右余白（ガター）の統一 ─────────────
   1枚バナー（p-top-banner-frame__item-full）に
   左右余白の指定がなく、画面端に張り付いていた問題の修正。

   ※2枚組バナー（frame2）と見出し（c-title）は
     元々余白を持っているため、ここには含めません。
     （二重に余白が付いて狭くなる／見出しのアイコンに
       文字が重なる問題への対策）                    */

.main .p-top-banner-frame__item-full,
.main .p-top-banner-single,
.main .p-top-movie,
.main .beee-ugc-widget {
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
}

/* 区切り線も端まで伸ばさず、余白の内側に収める */
.main hr {
  margin-left: 14px;
  margin-right: 14px;
}

/* PCでは元の広めの余白に戻す（既存レイアウトを尊重） */
@media (min-width: 768px) {
  .main .p-top-banner-frame__item-full,
  .main .p-top-banner-single,
  .main .p-top-movie,
  .main .beee-ugc-widget {
    padding-left: 0;
    padding-right: 0;
  }
  .main hr {
    margin-left: 0;
    margin-right: 0;
  }
}


/* ── 9. スマホ表示の調整 ───────────────────── */

@media (max-width: 767px) {

  .main .c-title,
  .main .c-title-second { margin: 36px 0 16px; }

  .main hr { margin: 32px 0 32px; }

  .main .p-top-banner-frame__item-full,
  .main .p-top-banner-frame2 { margin-bottom: 12px; }

  .main .p-top-attention__item a {
    font-size: 13px;
    padding: 6px 11px;
  }

  /* タップ領域を確保（押しにくさの解消） */
  .main .c-footer-menu a,
  .main .p-top-menu a { min-height: 44px; }

  /* 商品リストを見やすく */
  .main .p-top-itemlist__item { padding: 16px 14px; }

  .main .p-top-itemlist__thumb {
    flex: 0 0 38%;
    width: 38% !important;
  }
  .main .p-top-itemlist__name {
    font-size: 14px;
    font-weight: 500;
  }
  .main .p-top-itemlist__price {
    font-size: 15px;
    font-weight: 700;
    margin-top: 4px;
  }
  .main .p-top-itemlist__desc {
    font-size: 12px;
    margin-top: 4px;
  }

  /* メルマガ／LINE の重複を整理
     固定バーと同じ内容の画像バナーが下部にもう1組
     出ていたため、スマホでは非表示に。
     （PCには固定バーが無いので、PCでは表示のまま）  */
  .main .p-top-banner-frame { display: none; }
}


/* ── 10. PC / スマホ 出し分け用クラス ──────────
   使い方：
     <div class="u-pc-only"> PCだけに出す </div>
     <div class="u-sp-only"> スマホだけに出す </div>

   例：メインビジュアルをスマホで非表示にする
     <div class="p-top-banner-frame__item-full u-pc-only">
       <img src="...main_view2.jpg" alt="..." width="100%" loading="lazy">
     </div>                                            */

@media (max-width: 767px) { .u-pc-only { display: none !important; } }
@media (min-width: 768px) { .u-sp-only { display: none !important; } }

/* ============================================================
   いしだ茶屋 TOP 整理用CSS  ここまで
   ============================================================ */