@charset "UTF-8";

/*
 * index.html 用（BiNDup のページCSS index.css の上に重ねる）
 * BiNDup のページは余白をブロックID（#bk…）ごとに持つため、ID の無いブロックの余白はここで付ける。
 * 余白・文字色は隣の BiNDup ブロック（#bk101702732）に合わせている。
 */

.p-top-banner {
  & > .column { padding: 15px; }
}

.p-top-banner-title { color: #ca2020; }

.p-top-banner-note { color: #0c0101; }

.p-top-banner-link { background-color: #fff2cc; }

/*
 * 催事のお知らせ（横長バナーの下に、販売商品の枠）。
 * 開催期間・営業時間はバナー画像に入っているが、スマホでは画像の文字が小さすぎるのでテキストでも出す。
 * 色はバナー（クリーム地・金）と見出しの赤に合わせている。
 */
.p-top-event {
  background-color: rgb(255 255 255 / 0.7);

  & > .column { padding: 15px 15px 30px; }
}

.p-top-event-box {
  margin-block-start: 15px;
  padding: 20px 15px;
  border: 3px double #c9a961;
  background-color: #fdf8ef;
  color: #0c0101;
}

.p-top-event-img img {
  display: block;
  width: 100%;
  height: auto;
}

.p-top-event-info {
  font-size: 1.05rem;
  line-height: 1.7;

  & dt {
    display: inline-block;
    margin-block-start: 1em;
    padding: 0.1em 0.9em;
    background-color: #ca2020;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.1em;
  }

  & dt:first-child { margin-block-start: 0; }

  & dd { margin: 0.4em 0 0; }
}

.p-top-event-tax {
  font-size: 0.85em;
  font-weight: normal;
  letter-spacing: 0;
}

/* 開催期間・営業時間（スマホのみ）。商品リストより一回り大きく */
.p-top-event-head {
  display: grid;
  gap: 1em;
  margin-block-end: 20px;

  & dd {
    font-size: 1.2em;
    font-weight: bold;
  }
}

.p-top-event-note {
  font-size: 0.8em;
  font-weight: normal;
}

.p-top-event-items {
  display: grid;
  gap: 0.5em 2.5em;
  border-block-start: 1px solid #c9a961;
  padding-block-start: 0.6em;
}

.p-top-event-items li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.5em;
  align-items: baseline;
}

/* 品名と価格の間を点線でつなぐ */
.p-top-event-name {
  display: flex;
  align-items: baseline;
  gap: 0.5em;

  &::after {
    content: "";
    flex: 1;
    min-width: 1em;
    border-block-end: 1px dotted #b39b6a;
  }
}

.p-top-event-price {
  font-weight: bold;
  white-space: nowrap;
}

.p-top-event-limit {
  grid-column: 1 / -1;
  color: #ca2020;
  font-size: 0.85em;
  font-weight: bold;

  &::before { content: "※"; }
}

@media print, screen and (min-width: 642px) {
  .p-top-banner > .column { padding: 30px 40px 20px; }
  .p-top-event > .column { padding: 30px 40px; }

  .p-top-event-box { padding: 30px 35px; }

  .p-top-event-head { display: none; }

  .p-top-event-info { font-size: 1.15rem; }

  .p-top-event-items { grid-template-columns: 1fr 1fr; }
}