@charset "utf-8";
.u-pb10 {
  padding-bottom: 10px;
}
.u-pb15 {
  padding-bottom: 15px;
}
.u-pb20 {
  padding-bottom: clamp(10px, var(--px-20), 20px);
}
.u-pb30 {
  padding-bottom: clamp(15px, var(--px-30), 30px);
}
.u-pb40 {
  padding-bottom: clamp(20px, var(--px-40), 40px);
}
.u-pb50 {
  padding-bottom: clamp(25px, var(--px-50), 50px);
}
.u-pb60 {
  padding-bottom: clamp(30px, var(--px-60), 60px);
}
.u-pb70 {
  padding-bottom: clamp(30px, var(--px-70), 70px);
}
.u-pb80 {
  padding-bottom: clamp(40px, var(--px-80), 80px);
}
.u-pb90 {
  padding-bottom: clamp(40px, var(--px-90), 90px);
}
.u-pb100 {
  padding-bottom: clamp(50px, var(--px-100), 100px);
}
.u-pb120 {
  padding-bottom: clamp(50px, var(--px-120), 120px);
}
.u-mb10 {
  margin-bottom: 10px;
}
.u-mb15 {
  margin-bottom: 15px;
}
.u-mb20 {
  margin-bottom: clamp(10px, var(--px-20), 20px);
}
.u-mb30 {
  margin-bottom: clamp(15px, var(--px-30), 30px);
}
.u-mb40 {
  margin-bottom: clamp(20px, var(--px-40), 40px);
}
.u-mb50 {
  margin-bottom: clamp(25px, var(--px-50), 50px);
}
.u-mb60 {
  margin-bottom: clamp(30px, var(--px-60), 60px);
}
.u-mb70 {
  margin-bottom: clamp(30px, var(--px-70), 70px);
}
.u-mb80 {
  margin-bottom: clamp(40px, var(--px-80), 80px);
}
.u-mb90 {
  margin-bottom: clamp(40px, var(--px-90), 90px);
}
.u-mb100 {
  margin-bottom: clamp(50px, var(--px-100), 100px);
}
.u-mb120 {
  margin-bottom: clamp(50px, var(--px-120), 120px);
}

/* =====================
  c-fv（下層ページ共通のFV／ページタイトル。使い回し）
===================== */
.c-fv {
  text-align: center;
  padding-top: clamp(60px, var(--px-120), 120px);
  padding-bottom: clamp(40px, var(--px-80), 80px);
}
.c-fv__title {
  font-family: "Poiret One", sans-serif;
  font-size: clamp(36px, var(--px-64), 64px);
  line-height: 1.2;
  color: #040404;
}

/* =====================
  p-about（Aboutページ）
===================== */
.p-about {
  padding-bottom: clamp(60px, var(--px-120), 120px);
}
.p-about__inner {
  max-width: 1150px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  gap: clamp(60px, var(--px-120), 120px);
}
/* 画像＋テキストの行（行ごとに画像/テキストの並び順をHTMLで入れ替え） */
.p-about__row {
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, var(--px-40), 40px);
}
.p-about__images {
  flex-shrink: 0;
  width: clamp(260px, var(--px-560), 560px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-about__img {
  width: 100%;
  aspect-ratio: 560 / 300;
  background: #d9d9d9;
  overflow: hidden;
}
.p-about__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-about__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, var(--px-20), 20px);
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  padding-bottom: clamp(20px, var(--px-30), 30px);
  padding-left: clamp(20px, var(--px-30), 30px);
}
.p-about__heading {
  font-size: clamp(24px, var(--px-36), 36px);
}
.p-about__body p {
  font-size: clamp(14px, var(--px-16), 16px);
}
.p-about__label {
  font-size: clamp(16px, var(--px-20), 20px);
}
/* 注文方法ボックス（全周ボーダー） */
.p-about__order {
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, var(--px-30), 30px);
  padding-block: clamp(40px, var(--px-60), 60px);
  padding-inline: 20px;
  text-align: center;
}
.p-about__order-title {
  font-size: clamp(24px, var(--px-36), 36px);
}
.p-about__order-line {
  display: block;
  width: min(800px, 90%);
  height: 1px;
  background: #000;
}
.p-about__order-body p {
  font-size: clamp(14px, var(--px-16), 16px);
}
@media screen and (max-width: 680px) {
  .p-about__row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .p-about__images {
    width: 100%;
  }
  .p-about__text {
    flex: none;
  }
  .p-about__order-body {
    text-align: left;
  }
  .p-about__heading {
    text-align: center;
  }
}

/* =====================
  p-shop（Shopページ）
===================== */
.p-shop {
  padding-bottom: clamp(60px, var(--px-120), 120px);
}
/* 店舗情報テーブル */
.p-shop__table {
  width: min(890px, 100% - 40px);
  margin-inline: auto;
}
.p-shop__row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #000;
}
.p-shop__th {
  flex-shrink: 0;
  width: clamp(110px, var(--px-240), 240px);
  text-align: center;
  font-family: "Poiret One", sans-serif;
  font-size: clamp(15px, var(--px-18), 18px);
  line-height: 1.2;
  padding: 20px 10px;
}
.p-shop__td {
  flex: 1;
  font-size: clamp(15px, var(--px-18), 18px);
  line-height: 1.2;
  padding: 20px;
}
.p-shop__td--brand {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
}
.p-shop__td--tel {
  font-family: "Oswald", sans-serif;
  font-weight: 200;
}
/* Googleマップ枠（高さ確保のみ。中に埋め込みコードを入れる） */
.p-shop__map {
  width: min(1280px, 100% - 40px);
  margin-inline: auto;
  margin-top: clamp(40px, var(--px-60), 60px);
  aspect-ratio: 1280 / 500;
  background: #d9d9d9;
}
.p-shop__map iframe,
.p-shop__map > * {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media screen and (max-width: 680px) {
  .p-shop__row {
    flex-direction: column;
  }
  .p-shop__th {
    width: 100%;
    text-align: left;
    padding: 16px 0 4px;
  }
  .p-shop__td {
    padding: 0 0 16px;
  }
  .p-shop__map {
    aspect-ratio: auto;
    height: 300px;
  }
}

/* =====================
  p-contact（Contactページ / Contact Form 7）
===================== */
.p-contact {
  padding-bottom: clamp(60px, var(--px-120), 120px);
}
.p-contact__inner {
  width: min(1080px, 100% - 40px);
  margin-inline: auto;
}
/* 各行：ラベル + 入力欄。行ごとに下線 */
.p-contact__row {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 9.03vw, 130px);
  padding-block: clamp(16px, var(--px-25), 25px);
  border-bottom: 1px solid #000;
}
.p-contact__label {
  flex-shrink: 0;
  width: clamp(240px, var(--px-300), 300px);
  min-height: 50px;
  padding-left: clamp(15px, var(--px-30), 30px);
  display: flex;
  align-items: center;
  gap: clamp(10px, var(--px-20), 20px);
  font-family: "Klee One", cursive;
  font-weight: 600;
  font-size: clamp(14px, var(--px-16), 16px);
  line-height: 1.2;
}
/* お問い合わせ内容の行はラベルを上寄せ */
.p-contact__row--textarea .p-contact__label {
  align-items: flex-start;
  padding-top: 12px;
}
.p-contact__req {
  flex-shrink: 0;
  background: #000;
  color: #e8e8e8;
  font-weight: 600;
  font-size: clamp(14px, var(--px-16), 16px);
  line-height: 1.2;
  padding: 10px;
}
.p-contact__field {
  flex: 1;
  min-width: 0;
}
.p-contact__field .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.p-contact__field input,
.p-contact__field textarea {
  width: 100%;
  background: #e8e8e8;
  border: 2px solid #727272;
  font-size: 16px; /* iOSのズーム防止 */
  color: #000;
}
.p-contact__field input {
  height: 50px;
  padding: 0 14px;
}
.p-contact__field textarea {
  height: clamp(200px, var(--px-309), 309px);
  padding: 14px;
  resize: vertical;
  display: block;
}
.p-contact__field input:focus-visible,
.p-contact__field textarea:focus-visible {
  outline: none;
  border-color: #000;
}
/* 送信ボタン */
.p-contact__submit {
  margin-top: clamp(30px, var(--px-50), 50px);
  text-align: center;
}
.p-contact__submit input[type="submit"] {
  background: #000;
  color: #e8e8e8;
  font-family: "Klee One", cursive;
  font-weight: 600;
  font-size: clamp(14px, var(--px-15), 15px);
  line-height: 1.2;
  padding: 20px 80px;
  border: none;
  cursor: pointer;
  transition: 0.25s ease-in-out;
}
.p-contact__submit input[type="submit"]:hover {
  opacity: 0.7;
}
@media screen and (max-width: 680px) {
  .p-contact__row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .p-contact__label {
    width: 100%;
    min-height: 0;
    padding-left: 0;
  }
  .p-contact__row--textarea .p-contact__label {
    padding-top: 0;
  }
  .p-contact__submit input[type="submit"] {
    width: 100%;
    padding-inline: 20px;
  }
}
