@charset "UTF-8";
.p-top {
  --component-header-bottom: var(--space-0);
}
@media (min-width: 768px) {
  .p-top {
    --component-header-bottom: var(--space-24);
  }
}

.p-top-fv {
  position: relative;
  /* 次のセクションとの間隔はコンテンツ境界以上でここが持つ */
}
@media (min-width: 768px) {
  .p-top-fv {
    --section-pad-end: calc(var(--space-100) + var(--space-4));
    min-block-size: calc(var(--grid-mobile-width) + var(--space-256) + var(--space-32) - var(--space-2));
  }
}
@media (min-width: 1280px) {
  .p-top-fv {
    min-block-size: calc(var(--space-256) * 2 + var(--space-100) * 2 + var(--space-8));
    /* 営業時間帯の背景 画面端まで全幅で敷き下端はコンテナーのボトムパディング104の手前で止める */
  }
  .p-top-fv::before {
    position: absolute;
    content: "";
    inset-block: calc(var(--space-256) + var(--space-100) + var(--space-20)) calc(var(--space-100) + var(--space-4));
    inset-inline: var(--space-0);
    background: var(--semantic-background-section);
  }
}

/* コンテンツ系セクション共通の縦リズム 値は各セクションがトークンで上書きする 高さはコンテンツに追従させ固定しない */
.p-top-fv,
.p-top-opening,
.p-top-recommend,
.p-top-promotion,
.p-top-information,
.p-top-sns {
  padding-block: var(--section-pad-start, var(--space-0)) var(--section-pad-end, var(--space-0));
}

.p-top-opening__hours {
  border-inline-start-color: var(--semantic-border-tertiary);
}

.p-top-opening {
  --section-pad-start: var(--space-24);
  --section-pad-end: var(--space-24);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  inline-size: var(--ratio-full);
  background: var(--semantic-background-section);
}
.p-top-opening .p-top-opening__hours {
  margin-block-start: calc(var(--space-4) * -1);
}
@media (min-width: 1280px) {
  .p-top-opening {
    --section-pad-end: var(--space-0);
    position: absolute;
    inset-inline: var(--layout-fv-side-start) var(--layout-fv-inset);
    inline-size: auto;
    inset-block-start: calc(var(--space-256) + var(--space-100) + var(--space-20));
    grid-template-columns: var(--space-80) minmax(var(--space-0), 1fr);
    gap: var(--space-24);
    /* 営業時間ブロックの高さを固定しコンテナーのボトムパディングへはみ出さない */
    block-size: calc(var(--space-256) - var(--space-16));
    padding-inline: var(--space-0);
    background: transparent;
  }
  .p-top-opening .p-top-opening__hours {
    grid-column: 2;
    align-self: start;
    margin-block-start: var(--space-8);
    /* アイコン列との区切り罫線 列間gapの中央に置き 高さはリストに揃えてはみ出さない */
    margin-inline-start: calc(var(--space-12) * -1);
    padding-inline-start: var(--space-24);
    border-inline-start-width: var(--space-1);
    border-inline-start-style: solid;
  }
  .p-top-opening .p-top-opening__notes,
  .p-top-opening .c-textlink-navigation {
    position: absolute;
    inset-inline: var(--space-0);
  }
  .p-top-opening .p-top-opening__notes {
    inset-block-start: var(--space-128);
  }
  .p-top-opening .c-textlink-navigation {
    inset-block-start: calc(var(--space-128) + var(--space-64));
  }
}

.p-top-opening__heading {
  --heading-margin-block-end: var(--space-0);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* 時計アイコンは背景で描画する */
}
.p-top-opening__heading::before {
  content: "";
  flex: none;
  inline-size: var(--space-24);
  block-size: var(--space-24);
  background: url("../images/common/icon-opening-hours.svg") no-repeat center/contain;
}
.p-top-opening__heading h2 {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
}
@media (min-width: 1280px) {
  .p-top-opening__heading {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: var(--space-4);
  }
  .p-top-opening__heading::before {
    inline-size: var(--space-48);
    block-size: var(--space-48);
  }
  .p-top-opening__heading h2 {
    font-size: var(--font-size-16);
    white-space: nowrap;
  }
}

.p-top-recommend {
  --section-pad-start: var(--space-64);
  --section-pad-end: var(--space-100);
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr);
  gap: var(--space-0);
}
@media (min-width: 768px) {
  .p-top-recommend {
    --section-pad-start: var(--space-0);
    --section-pad-end: calc(var(--space-100) + var(--space-80));
    position: relative;
    display: block;
  }
}

@media (min-width: 768px) {
  .p-top-recommend > .c-heading {
    display: contents;
  }
  .p-top-recommend > .c-heading::before {
    position: absolute;
    inset-block-start: var(--space-0);
    inset-inline-start: var(--layout-content-inset);
  }
  .p-top-recommend > .c-heading h2 {
    inline-size: calc(var(--ratio-full) - calc(var(--space-100) + var(--space-8)));
    margin-inline-start: calc(var(--space-100) + var(--space-8));
  }
}

.p-top-recommend__content {
  min-inline-size: var(--space-0);
}
.p-top-recommend__content > section {
  margin-block-start: var(--space-24);
}
@media (min-width: 768px) {
  .p-top-recommend__content {
    inline-size: calc(var(--ratio-full) - calc(var(--space-100) + var(--space-8)));
    margin-inline-start: calc(var(--space-100) + var(--space-8));
  }
  .p-top-recommend__content > section {
    margin-block-start: var(--space-32);
  }
}

.p-top-recommend__footer {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--space-32);
}
@media (min-width: 768px) {
  .p-top-recommend__footer {
    margin-block-start: var(--space-48);
  }
}
.p-top-recommend__footer {
  gap: var(--space-16);
  inline-size: var(--ratio-full);
}
.p-top-recommend__footer > .c-button {
  min-inline-size: var(--space-0);
}
@media (min-width: 768px) {
  .p-top-recommend__footer {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-32);
  }
  .p-top-recommend__footer > .c-button {
    flex: 1 1 var(--layout-desktop-column-width);
    max-inline-size: var(--layout-desktop-column-width);
  }
}

.p-top-promotion {
  --section-pad-end: var(--space-100);
  position: relative;
}

.p-top-promotion__footer {
  margin-block-start: var(--space-32);
}
@media (min-width: 768px) {
  .p-top-promotion__footer {
    margin-block-start: var(--space-48);
  }
}

.p-top-information {
  --section-pad-start: var(--space-64);
  --section-pad-end: var(--space-64);
  background: var(--semantic-background-section);
  /* SPは次のSNSセクションとの間に白地の縦マージンを確保する */
  margin-block-end: var(--space-80);
}
@media (min-width: 768px) {
  .p-top-information {
    --section-pad-start: var(--space-80);
    --section-pad-end: var(--space-80);
    margin-block-end: var(--space-0);
  }
}

main > .p-top-information:last-child {
  margin-block-end: var(--space-0);
}

.p-top-information__content {
  gap: var(--space-32);
}
@media (min-width: 768px) {
  .p-top-information__content {
    gap: var(--space-48);
  }
}
.p-top-information__content {
  margin-block-start: var(--space-32);
}
@media (min-width: 768px) {
  .p-top-information__content {
    margin-block-start: var(--space-48);
  }
}
.p-top-information__content {
  display: grid;
  margin-block-end: var(--space-0);
  /* PCとタブレットは1040pxを上限とし1256pxグリッドとの差分108pxを左右に加えて外周余白を保つ */
}
@media (min-width: 768px) {
  .p-top-information__content {
    inline-size: min(var(--ratio-full), var(--layout-content-narrow-width));
    margin-inline: auto;
  }
}

@media (min-width: 768px) {
  .p-top-sns {
    --section-pad-start: var(--space-100);
  }
}

.p-top-sns__content {
  gap: var(--space-32);
}
@media (min-width: 768px) {
  .p-top-sns__content {
    gap: var(--space-48);
  }
}
.p-top-sns__content {
  margin-block-start: var(--space-32);
}
@media (min-width: 768px) {
  .p-top-sns__content {
    margin-block-start: var(--space-48);
  }
}
.p-top-sns__content {
  display: grid;
}

/* トップページの見出し装飾 英字ロゴタイプを背景で敷く 画像はトップ専用のため共通レイヤーに置かない */
.c-heading--recommend::before,
.c-heading--shopnews::before {
  content: "";
  inline-size: var(--ratio-full);
  block-size: calc(var(--space-48) - var(--space-2));
  background: no-repeat left center/contain;
}

/* SPは情報・SNSだけ親要素の32px間隔を使用しh2共通の下マージンとの重複を除く */
@media (max-width: 767px) {
  .p-top-information > .c-heading,
  .p-top-sns > .c-heading {
    --heading-margin-block-end: var(--space-0);
  }
}
.c-heading--recommend::before {
  background-image: url("../images/top/heading-recommend-mobile.svg");
}

.c-heading--shopnews::before {
  background-image: url("../images/top/heading-shop-news-mobile.svg");
}

@media (min-width: 768px) {
  .c-heading--recommend h2,
  .c-heading--shopnews h2 {
    font-size: var(--font-size-28);
  }
  .c-heading--recommend::before {
    inline-size: calc(var(--space-100) - var(--space-8) - var(--space-2));
    block-size: calc(var(--space-256) * 2 + var(--space-100) + var(--space-72));
    background-image: url("../images/top/heading-recommend-desktop.svg");
  }
  .c-heading--shopnews::before {
    inline-size: calc(var(--space-256) + var(--space-12) + var(--space-2));
    block-size: calc(var(--space-128) + var(--space-28) + var(--space-2));
    background-image: url("../images/top/heading-shop-news-desktop.svg");
  }
}