@charset "UTF-8";
/* 数値計算関連の関数を使うために必要 (math.divなど)*/
/* ---------- ヘッダー ---------- */
/* 店舗紹介だけ、PC・SPともヘッダーに白 80% の背景を敷く。
   SPメニューを開いたときは styles.css の .header:has(.header__accordion[open]) の方が詳細度が高く、
   メニュー用の背景色がそのまま優先される */
.header {
  background-color: rgba(255, 255, 255, 0.8);
}

/* ---------- 全体 ---------- */
/* 下端はフッターのお問い合わせ枠の上余白(140px)と合わせてカンプの間隔(180px) */
.store {
  -webkit-padding-after: min(2.5rem, 2.8571428571vw);
          padding-block-end: min(2.5rem, 2.8571428571vw);
  font-family: "tot-shizukardmin-stdn", sans-serif;
  color: #000;
}

/* ---------- メインビジュアル ---------- */
/* PCは画面の高さいっぱいに広げる。低すぎる画面では見出しとキャッチが重ならないよう 31.25rem（1400px 以上で 500px）で止める。
   html の font-size は 1400px 未満で画面幅に合わせて縮むため、この下限も文字と一緒に縮む */
.store__hero {
  --store-hero-height: max(100svh, 31.25rem);
  position: relative;
  height: var(--store-hero-height);
  color: #fff;
}

.store__hero-media {
  position: absolute;
  inset: 0;
}

.store__hero-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 写真の上に黒 15% を重ねて白文字を読みやすくする */
.store__hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: 0.153;
}

/* 見出しとキャッチの横位置は 1400px より広い画面でも画面幅に合わせて動かすため、
   枠は全幅にして、左の余白を上限なしの vw で指定する。
   縦位置はカンプ（高さ950px）と同じ比率で、メインビジュアルの高さに合わせて動かす */
.store__hero-inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  height: 100%;
  padding-block: calc(var(--store-hero-height) * 430 / 950) calc(var(--store-hero-height) * 111 / 950);
}

.store__heading {
  -webkit-margin-start: 11.4285714286vw;
          margin-inline-start: 11.4285714286vw;
}

.store__title {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.175em;
}

.store__title-en {
  -webkit-margin-before: min(1.25rem, 1.4285714286vw);
          margin-block-start: min(1.25rem, 1.4285714286vw);
  font-family: "quincy-cf", serif;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.5em;
}

/* カンプの文字の右端(x1210)に合わせて右から置く。文字は 1400px より広い画面では大きくならないため、
   左から置くと広い画面ほど左に寄って見える。右の余白は行末の字間(0.2em)の分を引いている */
.store__catch {
  -webkit-margin-before: auto;
          margin-block-start: auto;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: calc(13.5714285714vw - 0.2em);
          margin-inline-end: calc(13.5714285714vw - 0.2em);
  font-size: 1.5rem;
  line-height: 2.0833333333;
  letter-spacing: 0.2em;
}

/* トップページのメインビジュアル（.mv__title .char）と同じ: 1文字ずつ 0.15s ずらしてフェードイン */
.store__catch .char {
  display: inline-block;
  opacity: 0;
  -webkit-animation: store-char-in 0.35s cubic-bezier(0.61, 1, 0.88, 1) forwards;
          animation: store-char-in 0.35s cubic-bezier(0.61, 1, 0.88, 1) forwards;
  -webkit-animation-delay: calc(var(--char-index) * 0.15s);
          animation-delay: calc(var(--char-index) * 0.15s);
}

@-webkit-keyframes store-char-in {
  to {
    opacity: 1;
  }
}

@keyframes store-char-in {
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .store__catch .char {
    opacity: 1;
    -webkit-animation: none;
            animation: none;
  }
}
/* ---------- 空間の紹介（写真と文章を左右交互に置く） ---------- */
/* 1・3 つ目の写真は左の余白、2 つ目は右の余白まで伸ばすため、どれも全幅にして余白を列で持つ */
.store__spaces {
  -webkit-padding-before: min(11.25rem, 12.8571428571vw);
          padding-block-start: min(11.25rem, 12.8571428571vw);
}

.store__space {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.store__space-image {
  grid-area: image;
}

.store__space-title {
  grid-area: title;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2.3;
  letter-spacing: 0.2em;
}

.store__space-accent {
  color: #9b4700;
}

.store__space-text {
  grid-area: text;
  -webkit-margin-before: min(2.1875rem, 2.5vw);
          margin-block-start: min(2.1875rem, 2.5vw);
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
}

/* 写真(x0〜670) ＋ 文章(x810〜)
   1400px より広い画面では、写真の列が左の余白まで伸びる（文章は中央の 1400px の枠の位置のまま）。
   最後の列は 1400px の枠の右の余白。1400px 以下では 0 */
.store__space--01 {
  grid-template-columns: minmax(0, 1fr) min(8.75rem, 10vw) min(36.875rem, 42.1428571429vw) max(0px, (100% - 1400px) / 2);
  grid-template-areas: "image . title" "image . text" "image . .";
}

/* 高さはカンプの892pxで止め、横だけ伸ばす（写真は object-fit: cover で切り抜く） */
.store__space--01 .store__space-image {
  height: min(55.75rem, 63.7142857143vw);
}

.store__space--01 .store__space-title {
  -webkit-margin-before: min(12.4375rem, 14.2142857143vw);
          margin-block-start: min(12.4375rem, 14.2142857143vw);
}

/* 文章(x180〜) ＋ 写真(x861〜1251)。カンプでは前の写真の下端より154px上から始まる
   1・3つ目と左右逆に、1400px より広い画面では写真の列が右の余白まで伸びる
   （文章と写真の右の 149px は中央の 1400px の枠の位置のまま）。
   最初の列は 1400px の枠の左の余白。1400px 以下では 0 */
.store__space--02 {
  grid-template-columns: max(0px, (100% - 1400px) / 2) min(11.25rem, 12.8571428571vw) min(42.5625rem, 48.6428571429vw) minmax(0, 1fr) min(9.3125rem, 10.6428571429vw);
  grid-template-areas: ". . title image ." ". . text image ." ". . . image .";
  -webkit-margin-before: calc(-1 * min(9.625rem, 11vw));
          margin-block-start: calc(-1 * min(9.625rem, 11vw));
}

/* 高さはカンプの900pxで止め、横だけ伸ばす（写真は object-fit: cover で上下を切り抜く） */
.store__space--02 .store__space-image {
  height: min(56.25rem, 64.2857142857vw);
}

/* picture もリセットで display: block; height: auto になっているため、高さを img まで渡す */
.store__space--02 .store__space-image picture {
  height: 100%;
}

.store__space--02 .store__space-image img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.store__space--02 .store__space-title {
  -webkit-margin-before: min(21.875rem, 25vw);
          margin-block-start: min(21.875rem, 25vw);
}

/* 写真(x0〜684) ＋ 文章(x833〜)。カンプでは前の写真の下端より117px上から始まる
   1つ目と同じく、1400px より広い画面では写真の列が左の余白まで伸びる */
.store__space--03 {
  grid-template-columns: minmax(0, 1fr) min(9.3125rem, 10.6428571429vw) min(35.4375rem, 40.5vw) max(0px, (100% - 1400px) / 2);
  grid-template-areas: "image . title" "image . text" "image . .";
  -webkit-margin-before: calc(-1 * min(7.3125rem, 8.3571428571vw));
          margin-block-start: calc(-1 * min(7.3125rem, 8.3571428571vw));
}

/* 高さはカンプの750pxで止め、横だけ伸ばす */
.store__space--03 .store__space-image {
  height: min(46.875rem, 53.5714285714vw);
}

.store__space--03 .store__space-title {
  -webkit-margin-before: min(28.4375rem, 32.5vw);
          margin-block-start: min(28.4375rem, 32.5vw);
}

/* ---------- 写真のスライダー（js/shop.js で Splide を動かす） ---------- */
.store__gallery {
  -webkit-margin-before: min(11.25rem, 12.8571428571vw);
          margin-block-start: min(11.25rem, 12.8571428571vw);
}

.store__slide img {
  width: 100%;
  height: auto;
}

/* ---------- 店舗情報 ---------- */
/* 地図(x200〜1200)。店名と項目は地図より40px内側(x240) */
.store__info {
  max-width: 1400px;
  margin-inline: auto;
  -webkit-margin-before: min(7.5rem, 8.5714285714vw);
          margin-block-start: min(7.5rem, 8.5714285714vw);
  padding-inline: min(12.5rem, 14.2857142857vw);
}

.store__info-body {
  -webkit-padding-start: min(2.5rem, 2.8571428571vw);
          padding-inline-start: min(2.5rem, 2.8571428571vw);
}

.store__info-title {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2em;
}

/* 1行の項目は 14px / 行送り24px で、行と行の間が8px */
.store__info-list {
  display: grid;
  row-gap: min(0.5rem, 0.5714285714vw);
  -webkit-margin-before: min(2.8125rem, 3.2142857143vw);
          margin-block-start: min(2.8125rem, 3.2142857143vw);
  font-size: 0.875rem;
  line-height: 1.7142857143;
  letter-spacing: 0.2em;
}

.store__info-row {
  display: grid;
  grid-template-columns: min(6.5rem, 7.4285714286vw) minmax(0, 1fr);
}
.store__info-row a {
  color: #000;
}

.store__map {
  aspect-ratio: 1000/420;
  -webkit-margin-before: min(4.0625rem, 4.6428571429vw);
          margin-block-start: min(4.0625rem, 4.6428571429vw);
  background-color: #c9c9c9;
}

.store__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (width <= 700px) {
  /* ---------- 全体 ---------- */
  /* 下端はフッターのお問い合わせ枠の上余白(120px)とカンプの間隔が一致するので0 */
  .store {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }
  /* ---------- メインビジュアル ---------- */
  .store__hero {
    height: 114.2857142857vw;
  }
  /* SPは右下から左上へ、黒の円形グラデーションを40%で重ねる */
  .store__hero-media::after {
    background: radial-gradient(circle 122.2857142857vw at 81.47% 94.73%, #000, rgba(84, 84, 84, 0));
    opacity: 0.403;
  }
  .store__hero-inner {
    padding-block: 58.5714285714vw 6.2857142857vw;
  }
  .store__heading {
    -webkit-margin-start: 7.1428571429vw;
            margin-inline-start: 7.1428571429vw;
  }
  .store__title {
    font-size: 4.5714285714vw;
  }
  .store__title-en {
    -webkit-margin-before: 2.2857142857vw;
            margin-block-start: 2.2857142857vw;
    font-size: 3.4285714286vw;
  }
  .store__catch {
    margin-inline: 43.4285714286vw 0;
    font-size: 4.5714285714vw;
    line-height: 1.625;
    letter-spacing: 0.15em;
  }
  /* ---------- 空間の紹介（写真 → 見出し → 文章の縦積み） ---------- */
  .store__spaces {
    -webkit-padding-before: 24.2857142857vw;
            padding-block-start: 24.2857142857vw;
  }
  .store__space {
    grid-template-rows: none;
  }
  .store__space-title {
    font-size: 4.5714285714vw;
    line-height: 1.75;
  }
  /* SPカンプの本文は行送りが自動。3行のテキスト枠の高さ(130px)から行送りを53pxとした */
  .store__space-text {
    font-size: 3.4285714286vw;
    line-height: 2.2083333333;
    letter-spacing: 0.2em;
  }
  .store__space--01,
  .store__space--03 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "image" "title" "text";
  }
  .store__space--01 .store__space-image {
    width: 72.1428571429vw;
    height: auto;
    aspect-ratio: 505/673;
  }
  .store__space--01 .store__space-title {
    -webkit-margin-before: 10.7142857143vw;
            margin-block-start: 10.7142857143vw;
    -webkit-margin-start: 14.2857142857vw;
            margin-inline-start: 14.2857142857vw;
  }
  .store__space--01 .store__space-text {
    -webkit-margin-before: 4.7857142857vw;
            margin-block-start: 4.7857142857vw;
    -webkit-margin-start: 14.2857142857vw;
            margin-inline-start: 14.2857142857vw;
  }
  /* 縦書きの見出し(左) ＋ 写真(右・x385〜700)、その下に文章 */
  .store__space--02 {
    grid-template-columns: minmax(0, 1fr) 45vw;
    grid-template-areas: "title image" "text text";
    -webkit-margin-before: 19.2142857143vw;
            margin-block-start: 19.2142857143vw;
  }
  .store__space--02 .store__space-image {
    height: auto;
    aspect-ratio: 315/540;
  }
  /* 1文字40px送り（32px ＋ 字間8px）、2列の間隔63px。1列目（右）が黒、2列目（左）がアクセント色 */
  .store__space--02 .store__space-title {
    justify-self: start;
    /* 縦書きは margin-block / inline の向きが変わるため top / left で指定 */
    margin-top: 18.1428571429vw;
    margin-left: 22.7857142857vw;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    line-height: 1.96875;
    letter-spacing: 1.1428571429vw;
  }
  .store__space--02 .store__space-text {
    -webkit-margin-before: 10.5vw;
            margin-block-start: 10.5vw;
    -webkit-margin-start: 10vw;
            margin-inline-start: 10vw;
  }
  .store__space--03 {
    -webkit-margin-before: 20.7857142857vw;
            margin-block-start: 20.7857142857vw;
  }
  .store__space--03 .store__space-image {
    width: 80.8571428571vw;
    height: auto;
    aspect-ratio: 566/621;
  }
  .store__space--03 .store__space-title {
    -webkit-margin-before: 15.4285714286vw;
            margin-block-start: 15.4285714286vw;
    -webkit-margin-start: 24vw;
            margin-inline-start: 24vw;
  }
  .store__space--03 .store__space-text {
    -webkit-margin-before: 4.6428571429vw;
            margin-block-start: 4.6428571429vw;
    -webkit-margin-start: 24vw;
            margin-inline-start: 24vw;
  }
  /* ---------- 写真のスライダー ---------- */
  .store__gallery {
    -webkit-margin-before: 23.6428571429vw;
            margin-block-start: 23.6428571429vw;
  }
  /* ---------- 店舗情報 ---------- */
  /* 地図(x50〜650)。店名と項目は地図より20px内側(x70) */
  .store__info {
    max-width: none;
    -webkit-margin-before: 14.2857142857vw;
            margin-block-start: 14.2857142857vw;
    padding-inline: 7.1428571429vw;
  }
  .store__info-body {
    -webkit-padding-start: 2.8571428571vw;
            padding-inline-start: 2.8571428571vw;
  }
  .store__info-title {
    font-size: 4vw;
  }
  .store__info-list {
    row-gap: 5.1428571429vw;
    -webkit-margin-before: 10.4285714286vw;
            margin-block-start: 10.4285714286vw;
    font-size: 3.4285714286vw;
    line-height: 1.5833333333;
  }
  .store__info-row {
    grid-template-columns: 21.4285714286vw minmax(0, 1fr);
  }
  /* SPの住所は項目名の下に内容を置く */
  .store__info-row--address {
    grid-template-columns: minmax(0, 1fr);
  }
  .store__info-row--address dd {
    -webkit-margin-before: 3.7142857143vw;
            margin-block-start: 3.7142857143vw;
  }
  .store__map {
    aspect-ratio: 600/420;
    -webkit-margin-before: 10.4285714286vw;
            margin-block-start: 10.4285714286vw;
  }
}