@charset "UTF-8";
/* =========================================================
   本館地階ウィークリーグルメ イベント情報（ORANGE）

   ■ 前提
   ・ファイル名は、ページの HTML と同じ名前にする（2018072187806.html
     → 2018072187806.css）。共通の名前にすると、ほかのページの CSS と重なる。
   ・本番ページでは CMS 共通CSS（parts.css / topics-detail.css）の上で表示される。
     リセット（margin・padding 0 など）と box-sizing: border-box は、そちらで効いている。
   ・スマホ（767px以下）では、CMS の「#main p { font-size: 15px }」が、このファイルで
     p に指定した font-size より優先される（p の font-size は PC のときだけ効く）。
     ショップ名（h3）は p ではないため、本番と同じ大きさになるよう、スマホでは 1.5rem を指定している。
   ・文字の大きさは rem で指定している。CMS の共通CSS が html { font-size: 62.5% } としているため、
     1rem＝10px（例：1.5rem＝15px）。ブラウザの文字サイズの設定を大きくすると、同じ割合で大きくなる。
   ・スマホへの切り替えは 767px 以下。CMS の共通CSS（768px から PC の表示）と境界をそろえている。

   ■ 初めて触る方へ
   ・見た目を変えたいときは、HTML で変えたい部分の class="…" の名前を確かめ、
     このファイルを「.名前」で検索する（例：価格の色を変えたい → 「.price」で検索）
   ・同じ名前が「9. スマホ（767px以下）」の中にもあるときは、スマホではそちらが優先される。
     PC だけ・スマホだけを変えたいときは、どちらを書き換えるかに気をつける
   ・色は「0. 変数」でまとめて決めている。例：--weekly-price の色を変えると、価格の色がすべて変わる
   ・{ } の中は「プロパティ: 値;」の組。行の最後の「;」は消さない
   ・この説明書きのような部分（コメント）は、画面には影響しない

   ■ よく出てくる指定の意味
   ・margin … 外側の余白　／　padding … 内側の余白
     （値が4つなら「上 右 下 左」、3つなら「上 左右 下」、2つなら「上下 左右」、1つなら四方すべて）
   ・width / height … 幅 / 高さ
   ・font-size … 文字の大きさ　／　font-weight … 文字の太さ（400 が普通、700 は太字）
   ・line-height … 行の高さ（数字だけなら、文字の大きさの何倍か）
   ・color … 文字の色　／　background … 背景　／　border … 枠線　／　border-radius … 角の丸み
   ・display: flex … 中身を横に並べる（flex-direction: column なら縦）　／　gap … 並べた中身の間隔
     align-items … 並べた中身の、縦（横に並べたとき）のそろえ方　／　flex: 1 … 残りの幅をすべて使う
   ・position / top / left … 飾りを、決まった位置に置く
   ・::after … 吹き出しの三角などの飾りを、CSS だけで足す
   ・transform … 位置をずらす（translateY(-50%) は「自分の高さの半分だけ上へ」）
   ・@media screen and (max-width: 767px) { … } … 画面の幅が 767px 以下（スマホ）のときだけ効く指定
   ・単位：px … 画面の点の数　／　% … 親の幅に対する割合
     rem … ページ全体の基準の文字の大きさの何倍か（このページでは 1rem＝10px）
   ・calc((100% - 16px) * .4) … 「親の幅から 16px 引いた幅の 40%」のような計算

   ■ 書き方のルール
   ・クラス名は、単語を「-」でつなぐ（例：item-box、shop-name）
   ・色・幅は、0. の変数を使う
   ・文字の大きさ（font-size）は rem で書く。px で考えた数字を10で割る（例：15px → 1.5rem）
   ・プロパティは「中身 → 配置 → 並べ方 → 大きさ・余白 → 文字 → 背景・枠 → 動き」の順に書く
   ・スマホ用の指定は、9.（767px以下）にまとめ、その中も、この目次と同じ番号・順番で並べる

   ■ 目次
    0. 変数
    1. 共通
    2. 会期の帯（h2）
    3. 商品ブロック（画像＋説明の並び）
    4. ショップ名（h3）
    5. 商品ごとの会期
    6. PICK UP・商品名（h4）
    7. 説明・価格
    8. 注記
    9. スマホ（767px以下）
========================================================= */


/* =========================================================
   0. 変数
========================================================= */

:root {

  /* ORANGE（このページの基本の色） */
  --weekly-orange: #fb5703;
  --weekly-orange-light: #ff8a3d;

  /* BASE */
  --weekly-gray: #666;
  --weekly-line: #eee;
  --weekly-photo-frame: #e7e1c9;

  /* 商品テキスト */
  --weekly-item-name: #333;
  --weekly-price: var(--weekly-orange);

  /* グラデーション（会期の帯） */
  --weekly-gradient-band: linear-gradient(90deg, var(--weekly-orange), var(--weekly-orange-light));

  /* 幅（画像と説明の間隔。商品画像の幅の計算にも使う） */
  --weekly-row-gap: 16px;
}


/* =========================================================
   1. 共通
========================================================= */

/* 商品ブロックの中は、枠線・余白を含めた幅で計算する
   （本番では CMS の共通CSS でも同じ指定が効いている。index.html だけを開いたときのため） */

.item-box *,
.item-box *::before,
.item-box *::after {
  box-sizing: border-box;
}


/* =========================================================
   2. 会期の帯（h2）
========================================================= */

.week-title {
  margin: 40px 0 16px;
  padding: 10px 14px;

  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.75;

  background: var(--weekly-gradient-band);
  border-radius: 6px;
}


/* =========================================================
   3. 商品ブロック（画像＋説明の並び）
========================================================= */

/* 1商品分のまとまり */

.item-box {
  margin-bottom: 32px;
}

/* 画像＋説明（PC は横並び。下に区切り線） */

.item-row {
  display: flex;
  align-items: flex-start;
  gap: var(--weekly-row-gap);

  padding-bottom: 24px;

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

/* 商品画像の枠（間隔を除いた幅の 40%） */

.item-photo {
  width: calc((100% - var(--weekly-row-gap)) * .4);
}

/* 商品画像 */

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

  border: 4px solid var(--weekly-photo-frame);
  border-radius: 6px;
}

/* 商品の説明（残りの幅。間隔を除いた幅の 60% になる） */

.item-body {
  flex: 1;

  font-size: 1.4rem;
}


/* =========================================================
   4. ショップ名（h3）
========================================================= */

.shop-name {
  margin: 10px 0 6px;
  padding-bottom: 6px;
  padding-left: 8px;

  color: var(--weekly-orange);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;

  border-bottom: 1px solid var(--weekly-orange);
  border-left: 4px solid var(--weekly-orange);
}


/* =========================================================
   5. 商品ごとの会期
========================================================= */

.item-schedule {
  margin-top: 8px;
  margin-bottom: 12px;

  color: var(--weekly-gray);
  font-size: 1.3rem;
  font-weight: 700;
}


/* =========================================================
   6. PICK UP・商品名（h4）
========================================================= */

/* 「PICK UP」と商品名の横並び */

.item-title {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 6px;
}

/* 「PICK UP」の吹き出し */

.pickup {
  position: relative;

  padding: 3px 8px;

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

  background: var(--weekly-orange);
  border-radius: 20px;
}

/* 吹き出しの三角（吹き出しの左側に付く） */

.pickup::after {
  content: "";

  position: absolute;
  top: 50%;
  left: -5px;

  border-width: 5px;
  border-style: solid;
  border-color: transparent var(--weekly-orange) transparent transparent;

  transform: translateY(-50%);
}

/* 商品名 */

.item-title h4 {
  margin: 0;

  color: var(--weekly-item-name);
  font-size: 1.5rem;
  font-weight: 700;
}


/* =========================================================
   7. 説明・価格
========================================================= */

/* 説明（1つの p が1つの段落） */

.item-body p {
  line-height: 1.6;
}

/* 段落が続くときは、間を 8px あける */

.item-body p + p {
  margin-top: 8px;
}

/* 価格
   ※説明の段落の後ろに置いたときは、上の「p + p」の 8px が優先される
     （10px になるのは、価格の前に段落がないとき） */

.price {
  margin-top: 10px;

  color: var(--weekly-price);
  font-size: 1.4rem;
  font-weight: 700;
}


/* =========================================================
   8. 注記
========================================================= */

.page-note {
  margin-top: 40px;

  color: var(--weekly-gray);
  font-size: 1.3rem;
}


/* =========================================================
   9. スマホ（767px以下）
========================================================= */

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

  /* ----- 3. 商品ブロック ----- */

  .item-box {
    margin-bottom: 28px;
  }

  /* 画像＋説明を縦に並べる */

  .item-row {
    flex-direction: column;
  }

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

  .item-photo img {
    display: block;
  }

  /* ----- 4. ショップ名 ----- */

  /* 本番では CMS の「#main p」（15px）が効いていたため、同じ大きさにそろえる */

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

  /* ----- 6. 商品名 ----- */

  .item-title h4 {
    font-size: 1.4rem;
  }

}