@charset "UTF-8";
/* ==========================================================
   秋の北海道展 ページ専用CSS（2609_hokkaido_fair.css）

   ■ 読み込み方法
     CMS の <head> 内で、共通CSS（parts.css / topics-detail.css）
     より後ろの位置に次の1行を置く。
     <link href="2609_hokkaido_fair.css" rel="stylesheet" type="text/css" media="all">
     ・CSS のファイル名は、ページの HTML（2609_hokkaido_fair.html）と同じ名前にする
       （style.css のような共通の名前にすると、ほかのページの CSS と重なるため）

   ■ 文字の大きさ
     rem で指定している。本番では CMS の共通CSS が html { font-size: 62.5% }
     としているので、1rem ＝ 10px（例：1.4rem ＝ 14px）。
     手元で 2609_hokkaido_fair.html だけを開いたときも同じになるよう、
     その <head> にも同じ指定を入れている。

   ■ 初めて触る方へ
     ・見た目を変えたいときは、HTML の class="…" の名前で、このファイルを検索する
     ・色は「全体・配色」の変数（--hokkaido-…）でまとめて決めている
     ・スマホ（768px以下）の指定は、後ろの「スマホ（768px以下）」にまとまっている。
       同じ名前があれば、スマホではそちらが使われる
     ・更新の手順は README.md を参照
========================================================== */


/* =========================
   全体・配色
========================= */

.hokkaido-area {
  /* 配色（ここを変えるとページ全体の色が変わる） */
  --hokkaido-bg: #fffaf5;           /* 全体の背景 */
  --hokkaido-accent: #fb5703;       /* PICK UP・価格・ホバー時の店名 */
  --hokkaido-accent-light: #ff9b4d; /* 店名左バーのグラデーション終点 */
  --hokkaido-accent-dark: #d95b00;  /* 店名・チラシ見出し */
  --hokkaido-line: #f2d5bc;         /* 店名の下線 */
  --hokkaido-line-strong: #f3c08c;  /* カードのホバー枠・チラシ見出しの下線 */
  --hokkaido-img-border: #e7e1c9;   /* 商品画像の枠 */
  --hokkaido-dot: #e85c91;          /* 産地の● */
  --hokkaido-sparkle: #ffd84d;      /* PICK UP のキラキラ */

  background: var(--hokkaido-bg);
  padding-bottom: 40px;
}


/* =========================
   メイン画像
========================= */

.main-visual {
  overflow: hidden;
}

.main-visual img {
  display: block;
  width: 100%;
  height: auto;

  opacity: 0;
  transform: scale(1.04);

  animation: mainFadeIn 1.5s ease-out forwards;
}

@keyframes mainFadeIn {

  0% {
    opacity: 0;
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }

}


/* =========================
   おすすめグルメ見出し（画像）
========================= */

/* 見出し要素の既定の余白を打ち消し、画像だけの見た目にする */
.recommend-heading {
  margin: 0;
}

.recommend-title {
  display: block;
  width: 100%;
  height: auto;
  margin: 45px auto 55px;

  opacity: 0;
  transform: translateY(40px);

  animation: titleFade .8s ease forwards;
  animation-delay: .3s;
}

@keyframes titleFade {

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* =========================
   商品カード
========================= */

.item-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;

  width: calc(100% - 40px);
  margin: 0 auto 32px;
  padding: 20px;
  box-sizing: border-box;

  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .05);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}


/* 商品画像 */

.item-photo {
  width: 40%;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
}

.item-photo img {
  display: block;
  width: 100%;
  height: auto;

  border: 4px solid var(--hokkaido-img-border);
  border-radius: 6px;
  box-sizing: border-box;

  transition:
    transform .4s ease,
    filter .4s ease;
}

/* 画像が複数枚のときは縦に並べる */
.stacked-images {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* 店名・産地・商品説明 */

.item-body {
  width: 55%;
  margin: 0;
  font-size: 1.4rem;
}

/* ※ .item-body 内の p にクラスで個別指定するときは、
     この指定に勝つよう「.item-body .クラス名」と書く */
.item-body p {
  margin: 0;
  line-height: 1.6;
}


/* 店名 */

.shop-name {
  position: relative;
  margin: 0 0 12px;
  padding: 0 0 10px 16px;

  color: var(--hokkaido-accent-dark);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;

  border-bottom: 1px solid var(--hokkaido-line);

  transition: color .3s ease;
}

.shop-name::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;

  width: 5px;
  height: 22px;

  background: linear-gradient(
    to bottom,
    var(--hokkaido-accent),
    var(--hokkaido-accent-light)
  );

  border-radius: 3px;
}


/* 産地 */

.item-body .shop-area {
  position: relative;
  display: inline-block;
  margin: 0 0 14px;
  padding-left: 12px;

  color: #666;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 産地の● */

.item-body .shop-area::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;

  width: 6px;
  height: 6px;

  background: var(--hokkaido-dot);
  border-radius: 50%;
  transform: translateY(-50%);
}


/* =========================
   PICK UP＋商品名＋価格
========================= */

.item-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 8px;
  row-gap: 5px;
  margin-bottom: 6px;
}

/* 同じ店の2商品目以降との間隔 */
.item-title + .item-title {
  margin-top: 10px;
}

.item-title .pickup {
  grid-column: 1;
  grid-row: 1;
  margin-top: 2px;
}

.item-title h4 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;

  color: #333;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
}

/* 商品名の下の価格（1店舗で複数商品のとき） */
.item-title .item-price {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;

  color: var(--hokkaido-accent);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}


/* PICK UP 吹き出し */

.pickup {
  position: relative;
  display: inline-block;

  padding: 3px 8px;

  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;

  background: var(--hokkaido-accent);
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(251, 87, 3, .3);
}


/* PICK UP のキラキラ */

.pickup::before {
  content: "\2726"; /* ✦ */
  position: absolute;
  top: -9px;
  right: -6px;

  color: var(--hokkaido-sparkle);
  font-size: 1.4rem;

  text-shadow:
    0 0 4px rgba(255, 255, 255, .9),
    0 0 8px rgba(255, 216, 77, .8);

  animation: sparkle 2s ease-in-out infinite;
}


/* PICK UP 吹き出しの三角 */

.pickup::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;

  transform: translateY(-50%);

  border-width: 5px;
  border-style: solid;
  border-color:
    transparent
    var(--hokkaido-accent)
    transparent
    transparent;
}


/* キラキラアニメーション */

@keyframes sparkle {

  0%,
  100% {
    opacity: .5;
    transform: scale(.8) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.3) rotate(18deg);
  }

}


/* =========================
   商品説明・価格
========================= */

/* 1店舗で複数商品のときの共通説明 */
.item-body .item-description {
  margin-top: 14px;
}

/* 説明文の下の価格（1店舗1商品のとき） */
.item-body .price {
  margin-top: 10px;

  color: var(--hokkaido-accent);
  font-size: 1.4rem;
  font-weight: 700;
}


/* =========================
   詳細・チラシ
========================= */

.flyer-section {
  margin: 80px auto;
  text-align: center;
}

.flyer-title {
  display: inline-block;
  margin: 0 0 12px;
  padding-bottom: 8px;

  color: var(--hokkaido-accent-dark);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;

  border-bottom: 2px solid var(--hokkaido-line-strong);
}

.flyer-text {
  margin: 0 0 35px;
  color: #666;
  font-size: 1.4rem;
  line-height: 1.8;
}

.flyer-list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
}

.flyer-item {
  display: block;
  width: calc(50% - 15px);
  overflow: hidden;

  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.flyer-item img {
  display: block;
  width: 100%;
  height: auto;

  transition: transform .4s ease;
}


/* =========================
   ホバー（マウス操作の端末のみ）
========================= */

@media (hover: hover) and (pointer: fine) {

  .item-box:hover {
    transform: translateY(-6px);
    border-color: var(--hokkaido-line-strong);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  }

  .item-box:hover .item-photo img {
    transform: scale(1.04);
    filter: brightness(1.04);
  }

  .item-box:hover .shop-name {
    color: var(--hokkaido-accent);
  }

  .flyer-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .15);
  }

  .flyer-item:hover img {
    transform: scale(1.02);
  }

}


/* =========================
   スマホ（768px以下）
========================= */

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

  .recommend-title {
    margin: 30px auto 38px;
  }

  .item-box {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
    padding: 16px;
  }

  .item-photo,
  .item-body {
    width: 100%;
  }

  .shop-name {
    font-size: 1.6rem;
  }

  .flyer-section {
    margin: 35px auto;
  }

  .flyer-title {
    font-size: 2.2rem;
  }

  .flyer-text {
    margin-bottom: 25px;
    padding: 0 10px;
    font-size: 1.3rem;
  }

  .flyer-list {
    flex-direction: column;
    gap: 20px;
  }

  .flyer-item {
    width: 100%;
  }

}


/* =========================
   動きを減らす設定
========================= */

@media (prefers-reduced-motion: reduce) {

  .main-visual img,
  .recommend-title,
  .pickup::before {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .item-box,
  .item-photo img,
  .flyer-item,
  .flyer-item img {
    transition: none;
  }

}