@charset "utf-8";
/* CSS Document */

/* ==================================================
02: common
================================================== */
:root {
  --height_header: 100px;
  --height_fix_footer: 0px;
  --section: 65px;

  --base_width: 1200px;
  --base_bg: #fff8f2;
  --base_color: #573f36;
  --c_dots: #ebd8c8; /* bg_dots の下地ベージュ（ドット地紋の素） */

  --c_main: #d9476e; /* メインピンク：見出し強調・TEL・数字・アイコン */
  --c_line: #00b900; /* LINE緑：LINEボタン・LINEリボン */
  --c_reserve: #bf3f63; /* ワイン：ネット予約ボタン・特典見出しバー */

  --c_wht: #fff; /* 白：テキスト・ボタン文字・カード地・color-mix の淡色側 */
  --c_blk: #000; /* 黒：bg_dots のドット・mv装飾マスクの不透明部 */
  --c_required: crimson; /* SMF 必須ラベルの赤 */

  --font_jp: "Zen Kaku Gothic New", sans-serif;
  --font_head: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
  --font_en: "Oswald", sans-serif;
  --icons: "Material Symbols Outlined";

  --transition: 0.3s;

  /* [class*="btn_"] の既定地色。各ボタンクラスで --btn_bg を上書きする */
  --btn_bg: var(--c_main);
}
@media (max-width: 520px) {
  :root {
    --section: 40px;
    --base_width: 100%;
  }
}

a[href=""] {
  pointer-events: all;
}

/* ----------------------------------------
font-size（本案件で実測が必要になった追加スケール。base.css は共通ボイラープレートのため編集不可）
---------------------------------------- */
body .fs15 {
  font-size: 1.5rem;
}
body .fs32 {
  font-size: 3.2rem;
}
body .fs36 {
  font-size: 3.6rem;
}
body .fs46 {
  font-size: 4.6rem;
}
@media (max-width: 520px) {
  body .fs15 {
    font-size: 1.4rem;
  }
  body .fs32 {
    font-size: 2.2rem;
  }
  body .fs36 {
    font-size: 2.4rem;
  }
  body .fs46 {
    font-size: 2.8rem;
  }
}

/* ----------------------------------------
common
---------------------------------------- */
html {
  scroll-behavior: smooth;
}
[id] {
  scroll-margin-top: calc(var(--height_header) + var(--section));
}
[id][class*="bg_"] {
  scroll-margin-top: var(--height_header);
}

body {
  padding-top: var(--height_header);
}
@media (max-width: 520px) {
  body {
    padding-bottom: var(--height_fix_footer);
  }
}

.sec_margin {
  margin: var(--section) auto;
}
.sec_padding {
  padding: var(--section) 0;
}

/* figure,img */
img {
  object-fit: cover;
}
.of_cont img,
img.of_cont {
  object-fit: contain;
}
/* base.css は a>.figure しか overflow:hidden にしないため、角丸クリップ用に全 .figure へ */
.figure {
  overflow: hidden;
}

/* [class*="grid_"] 等分 */
[class*="grid_"] {
  --gap: 50px;
  display: grid;
  grid-template-columns: repeat(var(--grid), 1fr);
  gap: var(--gap);
}
.grid_2c {
  --grid: 2;
}
.grid_3c {
  --grid: 3;
}
.grid_4c {
  --grid: 4;
}
@media (max-width: 520px) {
  [class*="grid_"] {
    --gap: 30px;
    --grid: 1;
  }
}

/* .box_2c 按分 */
.box_2c {
  --gap: 50px;
  --box: 30% 1fr;
  --box_tereco: 1fr 30%;
  display: grid;
  grid-template-columns: var(--box);
  align-items: flex-start;
  gap: var(--gap);
}
@media (min-width: 521px) {
  .tereco li:nth-child(odd) .box_2c {
    --box: var(--box_tereco);
  }
  .tereco li:nth-child(odd) .box_2c > *:first-child,
  .box_2c.reverse > *:first-child {
    order: 1;
  }
}
@media (max-width: 520px) {
  .box_2c {
    --gap: 30px;
    grid-template-columns: 1fr;
  }
}

/* .dist_ */
[class*="dist_"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  gap: var(--distance);
}
.dist_10 {
  --distance: 10px;
}
.dist_20 {
  --distance: var(--margin20);
}
.dist_30 {
  --distance: var(--margin30);
}
.dist_40 {
  --distance: var(--margin40);
}
.dist_50 {
  --distance: var(--margin50);
}
.dist_100 {
  --distance: var(--margin100);
}

/* ----------------------------------------
font
---------------------------------------- */
@media (max-width: 520px) {
  body .fs18 {
    font-size: 1.6rem;
  }
  body .fs20,
  body .fs22 {
    font-size: 1.8rem;
  }
  body .fs24,
  body .fs26 {
    font-size: 2rem;
  }
  body .fs28,
  body .fs30 {
    font-size: 2.2rem;
  }
  body .fs35 {
    font-size: 2.4rem;
  }
  body .fs40 {
    font-size: 2.6rem;
  }
  body .fs45 {
    font-size: 2.8rem;
  }
  body .fs50 {
    font-size: 3rem;
  }
}

/* color */
.fc_wht {
  color: var(--c_wht);
}
.fc_main {
  color: var(--c_main);
}
.fc_line {
  color: var(--c_line);
}
.fc_note_brown {
  color: var(--base_color);
}

/* ----------------------------------------
background
---------------------------------------- */
.bg_wht {
  background-color: var(--c_wht);
}
.bg_main {
  background-color: var(--c_main);
}
.bg_main_10 {
  background-color: color-mix(in srgb, var(--c_main) 10%, var(--c_wht));
}
/* .bg_dots ＝ ベース地色＋織地ドット地紋（reason / message / review）。
   .ai実測：100px角に約11×11個の千鳥（レンガ1/2）ドット＝横ピッチ10px・行ピッチ10px・半ピッチずらし。円径約5px。
   下地は #ebd8c8 の 40%（残りはページ地） */
.bg_dots {
  background-color: color-mix(in srgb, var(--c_dots) 40%, var(--c_wht));
  background-image:
    radial-gradient(circle, var(--c_blk) 1.5px, transparent 1.5px),
    radial-gradient(circle, var(--c_blk) 1.5px, transparent 1.5px);
  background-size: 5px 10px;
  background-position:
    0 0,
    3px 5px;
  background-blend-mode: overlay; /* ドットは黒・オーバーレイで下地になじませる */
}

/* .bg_img */
*:has(> .bg_img) {
  position: relative;
}
.bg_img {
  position: absolute;
  z-index: -1;
  inset: 0;
}

/* ----------------------------------------
[class*="btn_"]
---------------------------------------- */
[class*="btn_"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 250px;
  width: fit-content;
  min-height: 50px;
  margin: 0px auto;
  padding: 10px;
  border: 1px solid var(--btn_color);
  background-color: var(--btn_bg);
  border-radius: 999px;
  text-align: center;
  color: var(--btn_color);
}
[class*="btn_"]:hover {
  opacity: 1;
  border: 1px solid var(--btn_bg);
  background-color: var(--btn_color);
  color: var(--btn_bg);
}
[class*="btn_"] p {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media (max-width: 520px) {
  [class*="btn_"] {
    min-width: auto;
    width: 90%;
  }
  [class*="btn_"].ml0 {
    margin-left: auto;
  }
}

/* [class*="btn_"].L.R */
[class*="btn_"].L::before,
[class*="btn_"].R::after {
  --size: 1em;
  --mask: url(../images/icon_arrow.svg) center center / contain no-repeat;
  content: "";
  display: block;
  width: var(--size);
  height: auto;
  aspect-ratio: 1 / 1;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: currentColor;
}

/* .btn_A */
.btn_A {
  --btn_color: var(--c_wht);
  --btn_bg: var(--c_reserve);
}

/* .link_tel */
.link_tel p {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.link_tel p::before {
  --size: 0.8em;
  --mask: url(../images/icon_tel.svg) center center / contain no-repeat;
  content: "";
  display: block;
  width: var(--size);
  height: auto;
  aspect-ratio: 1 / 1;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: currentColor;
}

/* ----------------------------------------
.tit
---------------------------------------- */
/* .titX */
.titX {
  font-family: var(--font_jp);
}
.titX span.en {
  display: block;
  margin-bottom: -0.4em;
  font-size: clamp(1em, 10vw, 3em);
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
  color: color-mix(in srgb, var(--c_main) 10%, var(--c_wht));
  mix-blend-mode: multiply;
}

/* .titY */
.titY span.en {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.8em;
  text-transform: uppercase;
}
.titY span.en::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background-color: currentColor;
}

/* .titZ */
.titZ {
  position: relative;
  padding-bottom: 5px;
}
.titZ::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--c_main) 20%,
    color-mix(in srgb, var(--c_main) 10%, var(--c_wht)) 20%
  );
  mix-blend-mode: multiply;
}
/* .titA ＝ titY + 中央見出し上のシンボルマーク（ハート＋葉）付き。TOP のセクション中央見出し専用 */
.titA {
  line-height: 1.45;
}
.titA::before {
  content: "";
  display: block;
  width: 50px;
  height: auto;
  aspect-ratio: 48 / 33;
  margin: 0 auto 10px;
  background: url("../images/logo-mark.png") center / contain no-repeat;
}

/* .about h2 ＝ titA のマーク付き見出しを使わない単独指定 */
.about h2 {
  line-height: 1.45;
}

/* ----------------------------------------
.richtext
---------------------------------------- */
.richtext {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.richtext a:not([href^="tel"]) {
  text-decoration: underline;
  color: var(--c_main);
}
.richtext a:not([href^="tel"]):hover {
  text-decoration: none;
}
.richtext em {
  color: var(--c_main);
}

/* ----------------------------------------
details
---------------------------------------- */
details summary {
  display: block;
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary:hover {
  cursor: pointer;
}
details summary + * {
  overflow: hidden;
}

/* ==================================================
03: style
================================================== */
/* ----------------------------------------
header
---------------------------------------- */
header a {
  display: block;
}
header {
  position: fixed;
  z-index: 10;
  top: 0px;
  width: 100%;
  padding: 10px;
}
header .header_wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  width: min(95%, 1400px);
  margin-inline: auto;
}
header .logo {
  width: 250px;
  height: auto;
}
header nav,
header .cta_wrap {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
}
header .cta_wrap {
  gap: 10px;
}
header [class*="btn_"] {
  min-width: 230px;
}
@media (max-width: 1000px) {
  header .head_tel,
  header .link_tel,
  header .cta_wrap {
    display: none;
  }
}

/* ----------------------------------------
header ロゴ/CTA（くすりのタムラ）
---------------------------------------- */
.logo_wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo_mark {
  flex: none;
  width: 45px;
  height: 35px;
  background: url("../images/logo-mark.png") center / contain no-repeat;
}
.logo_text {
  font-family: var(--font_head);
}
.head_reception {
  font-size: 1.3rem;
}
.btn_line,
.btn_reserve {
  --btn_color: var(--c_wht);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: var(--font_head);
}
.btn_line {
  --btn_bg: var(--c_line);
}
.btn_reserve {
  --btn_bg: var(--c_reserve);
}

/* ----------------------------------------
#hamburger
---------------------------------------- */
header input[type="checkbox"],
#hamburger ~ label {
  display: none;
}
#hamburger ~ label {
  position: relative;
  z-index: 10;
  display: block;
  width: 50px;
  aspect-ratio: 1 / 1;
}
#hamburger ~ label span {
  --space: 10px;
  position: absolute;
  left: 50%;
  display: inline-block;
  width: 50%;
  height: 2px;
  translate: -50% -50%;
}
#hamburger ~ label span:nth-of-type(1) {
  top: calc(50% - var(--space));
}
#hamburger ~ label span:nth-of-type(2) {
  top: 50%;
}
#hamburger ~ label span:nth-of-type(3) {
  top: calc(50% + var(--space));
}
#hamburger:checked ~ label span {
  top: 50%;
}
#hamburger:checked ~ label span:nth-of-type(1) {
  rotate: -45deg;
}
#hamburger:checked ~ label span:nth-of-type(2) {
  display: none;
}
#hamburger:checked ~ label span:nth-of-type(3) {
  rotate: 45deg;
}

/* .nav_wrap */
#hamburger ~ .nav_wrap {
  visibility: hidden;
}
#hamburger:checked ~ .nav_wrap {
  visibility: visible;
}
body:has(#hamburger:checked) {
  overflow: hidden;
}

.nav_wrap {
  --width: 320px;
  position: fixed;
  top: 0px;
  /* right: calc(-1 * var(--width)); */
  right: 0px;
  overflow-y: scroll;
  width: min(100%, var(--width));
  height: 100dvh;
  padding-block: calc(var(--height_header) + 20px);
  padding-inline: 20px;
  background-color: color-mix(in srgb, var(--c_main) 10%, var(--c_wht));
}
.nav_wrap .sitemap a {
  padding: 5px;
}

/*----------------------------------------
.fix_footer
----------------------------------------*/
.fix_footer {
  display: none;
}
@media (max-width: 520px) {
  .fix_footer {
    display: block;
    visibility: hidden;
    position: fixed;
    z-index: 10;
    bottom: 0;
    width: 100%;
  }
  .scroll .fix_footer {
    visibility: visible;
  }
  .fix_footer .wrap {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .fix_footer .wrap a {
    --color: var(--base_color);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-height: 50px;
    padding: 10px;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--c_wht);
    background-color: var(--color);
  }
  .fix_footer .wrap a.line {
    --color: var(--c_line);
  }
  .fix_footer .wrap a.reserve {
    --color: var(--c_reserve);
  }
  .fix_footer .wrap a::before {
    --size: 20px;
    content: "";
    display: block;
    width: var(--size);
    height: auto;
    aspect-ratio: 1;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    background-color: currentColor;
  }
  .fix_footer .wrap a.tel::before {
    --mask: url(../images/icon_tel.svg) center center / contain no-repeat;
  }
  .fix_footer .wrap a.line::before {
    --mask: url(../images/icon_line2.svg) center center / contain no-repeat;
  }
  .fix_footer .wrap a.reserve::before {
    --mask: url(../images/icon_reserve.svg) center center / contain no-repeat;
  }
}

/* ----------------------------------------
article
---------------------------------------- */
/* .archive_wrap */
.archive_wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-start;
  gap: 50px;
}
@media (max-width: 520px) {
  .archive_wrap {
    grid-template-columns: 1fr;
  }
}

/* .post_info */
.post_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* .post_cat */
.post_cat {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.post_cat span {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100px;
  padding: 5px 15px;
  font-weight: normal;
  text-align: center;
  line-height: 1;
}

/* .archive_cat */
.archive_wrap aside {
  padding: 20px;
  background-color: color-mix(in srgb, var(--c_main) 10%, var(--c_wht));
}
.archive_cat ul {
  padding-left: 20px;
}
.archive_cat a {
  width: 100%;
  padding: 5px 0;
}

/* .archive_list */
.archive_list {
  --gap: 20px;
}

/* .nav-links */
.nav-links,
.nav-links span,
.nav-links a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-links {
  flex-wrap: wrap;
  gap: 10px;
}
.nav-links span,
.nav-links a {
  --size: 40px;
  width: var(--size);
  aspect-ratio: 1;
  border: 1px solid var(--c_main);
  color: var(--c_main);
}
.nav-links span.current,
.nav-links a:hover {
  background-color: var(--c_main);
  color: var(--c_wht);
}
.nav-links span.dots {
  border: none;
  background-color: transparent;
}

/* ----------------------------------------
.smf-form
---------------------------------------- */
.smf-form {
  background-color: var(--c_wht);
}
.smf-form .smf-item__col--label {
  --color: var(--c_wht);
  background-color: var(--c_main);
  color: var(--color);
}
.smf-form .smf-item__label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-start;
  gap: 10px;
}
.smf-form .smf-item:has([data-validations*="required"]) .smf-item__label::after,
.smf-form
  [data-name="agree"]
  [data-validations*="required"]
  .smf-checkbox-control::after {
  content: "必須";
  padding: 2px 5px;
  background-color: var(--c_wht);
  font-size: 0.8em;
  font-weight: bold;
  color: var(--c_required);
}
.smf-form
  [data-name="agree"]
  [data-validations*="required"]
  .smf-checkbox-control::after {
  margin-left: 10px;
  background-color: var(--c_required);
  color: var(--c_wht);
}
.smf-form .smf-item__description {
  --_font-size: 0.8em;
  color: var(--color);
}
.smf-form [data-name="address"],
.smf-form input[type="text"][name="address"] {
  width: 100%;
}

.smf-action {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.smf-action .smf-button-control + .smf-button-control {
  margin-left: 0;
}
.smf-action .smf-button-control__control {
  background: none;
  /* ボタンデザイン */
}
@media (max-width: 520px) {
  .smf-action {
    flex-flow: column-reverse;
    gap: 10px;
  }
  .smf-button-control {
    width: 100%;
  }
}

/* ----------------------------------------
.mv
---------------------------------------- */
.mv {
  position: relative;
}
.mv_label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font_head);
}
.mv_label span {
  flex: none;
  width: 1.4em;
  height: 1.1em;
  background: url("../images/logo-mark.png") center / contain no-repeat;
}
.mv_sub {
  font-family: var(--font_head);
}
.mv h1 {
  font-family: var(--font_head);
  font-size: 5rem;
  line-height: 1.35;
}
.mv_badge_pill {
  margin-top: 20px;
}
.mv_badge_pill span {
  display: inline-block;
  padding: 5px 30px;
  border-radius: 0; /* カンプ：直角（y0「駐車場16台完備」） */
  background-color: var(--c_main);
  font-family: var(--font_head);
}
.mv_badge_note {
  font-family: var(--font_head);
  font-size: 1.8rem;
}
@media (max-width: 520px) {
  .mv .calc_pl {
    padding: 0;
  }
  .mv .wrap {
    padding: 20px 5% 0;
  }
  .mv h1 {
    font-size: 2.4rem;
  }
  .mv_badge_pill {
    margin-top: 0px;
  }
  .mv_badge_pill span {
    padding: 5px 10px;
  }
  .mv .figure img {
    width: 120vw;
    max-width: none;
    transform: translateX(-10vw);
  }
}

/* ----------------------------------------
.achieve
---------------------------------------- */
.achieve {
  margin-top: -40px; /* 目視：MV写真が少しかぶる */
  padding-block: 50px 45px;
  background-color: var(--base_color);
  border-radius: 50px 50px 0 0;
}
.achieve ul {
  --gap: 20px;
}
.achieve li {
  display: flex;
  flex-direction: column;
}
.achieve li > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 15px;
  border: 2px solid var(--c_wht);
  border-radius: 25px;
  background-color: color-mix(in srgb, var(--base_color) 90%, var(--c_wht));
  text-align: center;
}
.achieve_num {
  font-size: 2rem;
  font-family: var(--font_head);
  line-height: 1.7;
}
.achieve_num b {
  font-size: 3.6rem;
  color: color-mix(in srgb, var(--c_main) 30%, var(--c_wht));
}
.achieve_num small {
  font-size: 1.4rem;
}
@media (max-width: 520px) {
  .achieve ul {
    --grid: 2;
  }
  .achieve_num {
    font-size: 1.4rem;
  }
  .achieve_num b {
    font-size: 2rem;
  }
  .achieve_num small {
    font-size: 1.2rem;
  }
}

/* ----------------------------------------
.cta_reserve
---------------------------------------- */
.cta_reserve {
  padding-block: 60px;
}
.cta_reserve ul {
  --gap: 20px;
  align-items: stretch;
}
.cta_reserve li {
  display: flex;
  flex-direction: column;
  border-radius: 35px 35px 0 0; /* カンプ：上角のみ丸め・下2隅は直角（k_7000.jpg） */
  background-color: var(--c_wht);
  text-align: center;
}
.cta_card_tit {
  padding: 20px 20px 15px;
  border-bottom: 1px solid var(--base_color);
  font-family: var(--font_head);
}
.cta_card_body {
  flex: 1;
  padding: 20px;
}
.cta_card_ribbon {
  margin-block: auto 0;
  font-family: var(--font_head);
}
.cta_card_ribbon.line {
  color: var(--c_line);
}
.cta_card_desc {
  color: var(--base_color);
}
.cta_reserve li .cta_card_btn {
  --btn_bg: var(--c_reserve); /* ネット予約「予約する」＝ワイン */
  min-width: min(100%, 280px);
  border-radius: 999px;
}
.cta_reserve li .cta_card_btn.line {
  --btn_bg: var(--c_line);
} /* LINE「予約する」＝LINE緑 */
.cta_reserve li .cta_card_tel p {
  font-family: var(--font_head);
}
@media (max-width: 520px) {
  .cta_reserve ul {
    --grid: 1;
  }
}

/* ----------------------------------------
.about
---------------------------------------- */
/* section 上下余白は .sec_padding（--section:100px / SP 50px）に統一。誤差は丸め */
.about .box_2c {
  --box: 45% 1fr;
  --gap: 40px 50px;
} /* カンプ y900〜：左本文≒44% / 右写真≒56%。align-items は .box_2c 既定(flex-start) */
.about .figure img {
  border-radius: 40px;
} /* 角丸は画像側。figcaption は .figure 内（角丸クリップに欠けないよう .figure には radius を付けない） */
.about_catch {
  font-family: var(--font_head);
}
.about_merit li p {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.9; /* liごとの行間はmargin-blockでなくline-heightで表現（1.6→1.9で約+5px） */
}
.about_merit li i {
  width: 1em;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(
    --base_color
  ); /* .ai実測：行頭は本文色の「●」文字装飾。SVGアイコンではない */
}
/* こんな方に：グラデ下線でなく上下に細い実線 */
.about_sub {
  border-top: 1px solid var(--base_color);
  border-bottom: 1px solid var(--base_color);
  font-family: var(--font_head);
}
.about_recommend li p {
  display: flex;
  gap: 10px;
  font-family: var(--font_head);
  line-height: 1.9; /* liごとの行間はmargin-blockでなくline-heightで表現（1.6→1.9で約+5px） */
}
.about_recommend li i {
  flex: none;
  width: 1em;
  aspect-ratio: 1;
  margin-top: calc((1lh - 1em) / 2); /* 1行目テキストの中央に合わせる */
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E");
  background-color: currentColor;
}
@media (max-width: 520px) {
  .about .box_2c {
    --box: 1fr;
  }
}

/* ----------------------------------------
.reason
---------------------------------------- */
/* 左右交互（01/03/05=写真左、02/04=写真右）はCSSでなくマークアップ側の要素順で切替 */
.reason ul .box_2c {
  --box: 1fr 50%;
  --box_tereco: 50% 1fr;
  --gap: 20px 80px;
}
/* 写真＝角丸（画像側）＋下に figcaption。カンプ：左下のみ直角（全写真共通・配置による反転はしない） */
.reason_figure .figure img {
  border-radius: 50px 50px 50px 0;
}
.reason_num {
  font-family: var(--font_en);
  font-weight: 500;
}
.reason_num i {
  margin-right: 10px;
}
.reason_num b {
  font-size: 4.2rem;
  font-weight: 500;
}
/* 見出し＝前後にピンク罫（titZ グラデ下線は廃止） */
.reason_tit {
  padding-block: 15px;
  border-top: 1px solid var(--c_main);
  border-bottom: 1px solid var(--c_main);
  font-family: var(--font_head);
}
.reason_text {
  line-height: 1.9;
}
.reason_text p + p {
  margin-block: 5px 0;
}
@media (max-width: 520px) {
  .reason ul .box_2c,
  .reason ul li:nth-child(even) .box_2c {
    --box: 1fr;
  }
  .reason ul li:nth-child(even) .reason_figure {
    order: 0;
  }
  .reason_num b {
    font-size: 3.6rem;
  }
}

/* ----------------------------------------
.flow
---------------------------------------- */
.flow_check_tit {
  display: block;
  width: 100vw;
  margin-inline: calc((100vw - 100%) / -2);
  padding: 15px 30px;
  background-color: var(--c_main); /* カンプ：全幅のワイン帯（角丸なし） */
  font-family: var(--font_head);
} /* desc との間隔は .flow_check の gap に統一 */
/* STEP 一覧（ホーライ ul.flow_list の型・色はタムラ） */
.flow_list {
  --step_size: calc(1.8rem * 2 + 50px);
  counter-reset: num 0;
}
.flow_list li .wrap {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
}
.flow_list li:not(:last-child) .wrap {
  padding-bottom: 50px;
}
/* .wrap i ＝ STEP バッジ（文字＋counter 数字） */
.flow_list li .wrap i {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: var(--step_size);
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 50%;
  font-family: var(--font_en);
  font-weight: 500;
}
.flow_list li .wrap i::after {
  counter-increment: num 1;
  content: counter(num, decimal-leading-zero);
  font-size: 2.6rem;
  line-height: 1;
}
/* ステップ間の縦の接続線 */
.flow_list li:not(:last-child) .wrap i::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--step_size) / 2);
  translate: -50% 0;
  z-index: -1;
  width: 2px;
  height: 100%;
  background-color: color-mix(in srgb, var(--c_main) 40%, var(--c_wht));
}
/* 本文＋写真の2カラム（ホーライ .card_B の型・クラス名は流用しない） */
.flow_card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: start;
}
.flow_card .figure {
  width: 400px;
}
.flow_card .figure img {
  aspect-ratio: 426 / 280;
  border-radius: 20px;
  /* カンプ：flow写真は角丸なし（y4900/5900/6900 で四隅とも直角） */
}
.flow_card h3 {
  font-family: var(--font_head);
}
.flow_list li:first-child .flow_card h3 {
  font-size: 2.6rem;
}
/* _tit は .flow_note p / .flow_bonus p（詳細度 0,1,1）に負けるため 2クラスでスコープ */
.flow_note .flow_note_tit {
  font-family: var(--font_head);
}
/* カンプ：ワイン地の見出しバー＋薄ピンク枠の白ボックス（角丸10px・上下一体） */
.flow_bonus {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c_main) 45%, var(--c_wht));
  border-radius: 20px 20px 0 0;
  background-color: var(--c_wht);
}
.flow_bonus .flow_bonus_tit {
  display: block;
  padding: 10px 20px;
  background-color: var(
    --c_reserve
  ); /* 特典見出しバー＝ワイン（ネット予約と共通） */
  font-family: var(--font_head);
}
.flow_bonus > p {
  padding: 15px 20px;
}
@media (max-width: 520px) {
  .flow_list {
    --step_size: calc(1.8rem * 2 + 40px);
  }
  .flow_list li .wrap i::after {
    font-size: 2.4rem;
  }
  .flow_card {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .flow_card .figure {
    width: 100%;
  }
  .flow_check_tit {
    padding: 10px 15px;
  }
}

/* ----------------------------------------
.result
---------------------------------------- */
.result h2 {
  display: block;
  width: 100%;
  padding: 5px;
  border-radius: 999px;
  background-color: var(--c_main);
  text-align: center;
  font-family: var(--font_head);
}
.result ul li {
  padding: 50px;
  border: 1px solid var(--c_main);
  border-radius: 25px;
  background-color: var(--c_wht);
}
.result ul .grid_2c {
  --gap: 30px 50px;
  align-items: start;
} /* カンプ res_full：左(写真2枚)≒右(本文) 半々 → grid_2c。上揃えは意図（grid 既定 stretch のため明示） */
/* before → after 写真（間に矢印） */
.result_ba {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: center;
}
/* base.css の .figure img{height:100%} でカラム内画像が潰れるため寸法を与える */
.result_ba .figure {
  aspect-ratio: 3 / 4;
}
.result_ba .figure img {
  border-radius: 20px;
}
.result_ba::after {
  content: "play_arrow";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-family: var(--icons);
  font-variation-settings:
    "FILL" 1,
    "wght" 400;
  font-size: 2rem;
  line-height: 1;
  color: var(--c_main);
}
.result_name span {
  color: var(--c_main);
}
.result li h3 {
  font-family: var(--font_head);
}
.result_text {
  line-height: 1.9;
} /* h3 との間隔は .result_body の gap に統一 */
@media (max-width: 520px) {
  .result h2 {
    padding: 10px 25px;
  }
  .result ul li {
    padding: 25px;
  }
}

/* ----------------------------------------
.voice
---------------------------------------- */

/* カード枠（.news li と共通）*/
.voice li {
  border: 1px solid var(--c_main);
  border-radius: 25px;
  background-color: var(--c_wht);
}
/* .voice li ＝ ダミーカード（将来 voice 投稿タイプ化）。カード内は画像左・テキスト右の横並び */
.voice li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 25px;
  align-items: start;
  padding: 25px;
}
.voice li .figure {
  aspect-ratio: 1;
}
.voice_meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.voice_meta span {
  font-family: var(--font_head);
}
@media (max-width: 520px) {
  .voice li {
    grid-template-columns: 95px 1fr;
    gap: 15px;
    padding: 20px;
  }
}

/* ----------------------------------------
.message
---------------------------------------- */
/* 地色は .bg_dots（ベース #fff9f3 ＋織地ドット・index.php で付与）に統一。上下余白は .sec_padding */
.message .grid_2c {
  --gap: 40px 60px;
  align-items: center;
} /* カンプ y9490〜：左写真≒右本文 半々 → grid_2c。上下中央揃えは意図 */
/* img の height:100% / object-fit:cover / overflow:hidden は base.css・グローバル img・.figure が付与済み */
.message .figure {
  aspect-ratio: 1 / 1;
  border-radius: 25px;
}
/* .titB ＝ 英字ラベル＋見出しの2段見出し（message等の名乗り見出し） */
.titB {
  font-family: var(--font_head);
}
.titB span.en {
  display: block;
  margin-block: 0 5px;
  font-family: var(--font_en);
  font-weight: 500;
  font-size: 1.8rem;
}
@media (max-width: 520px) {
  .titB span.en {
    font-size: 1.6rem;
  }
}
.message_name {
  font-family: var(--font_head);
  line-height: 1.5;
}

/* ----------------------------------------
.club（くすりのタムラ元気倶楽部・splideスライド）
---------------------------------------- */
.club {
  overflow-x: hidden;
}
/* カンプ：写真は全幅ブリード・隙間なし・角丸なし */
.club_splide {
  width: 100vw;
  margin-inline: calc((100vw - 100%) / -2);
}
.club_splide .splide__slide .figure {
  aspect-ratio: 3 / 2;
  border-radius: 0;
}

/* ----------------------------------------
.faq
---------------------------------------- */
/* カンプ y10720〜 地色 #f8efea ≒ .bg_cream に丸め（index.php で付与）。上下余白は .sec_padding */
.faq {
  background-color: color-mix(in srgb, var(--c_dots) 40%, var(--c_wht));
}
/* カテゴリ帯 */
.faq_group h3 {
  padding: 10px 25px;
  background-color: var(--base_color);
  font-family: var(--font_head);
}
/* Q&A カード（ネイティブ details） */
.faq_list details {
  border-radius: 10px; /* カンプ：枠線・影なし。地色コントラストでカード化 */
  background-color: var(--c_wht);
}
.faq_list details summary {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 20px 25px;
}
/* gsap.js の details ハンドラは .open クラスを即時トグルする（[open]属性は閉じ時に遅れて外れる） */
/* カンプ：下線は summary 全幅でなく本文にインセット（左＝Q文字／右＝シェブロン手前）y10900 */
.faq_list details.open summary::after {
  content: "";
  position: absolute;
  left: 25px;
  right: 55px;
  bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c_main) 15%, var(--c_wht));
}
.faq_q {
  font-family: var(--font_en);
  font-weight: 500;
  line-height: 1;
  color: color-mix(in srgb, var(--base_color) 50%, var(--c_wht));
}
.faq_qt {
  font-family: var(--font_head);
}
/* シェブロン（Material Symbols。VSCodeスニペット faq_list 準拠） */
.faq_mark {
  font-family: var(--icons);
  font-size: 2rem;
  line-height: 1;
  color: color-mix(in srgb, var(--base_color) 45%, var(--c_wht));
}
.faq_mark::before {
  content: "add";
  display: inline-block;
  transition: var(--transition);
}
.faq_list details.open .faq_mark::before {
  content: "remove";
  rotate: 180deg;
}
/* .faq_a ＝ gsap.js が height を 0↔auto でアニメーションする要素。padding を持たせると閉じ時に潰れ切らないため
   余白は内側 .faq_a_inner に。overflow:hidden は theme の details summary+* が付与 */
.faq_a_inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  padding: 20px 25px;
}
.faq_a_label {
  font-family: var(--font_en);
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 520px) {
  .faq_list details summary,
  .faq_a_inner {
    padding: 15px;
    gap: 10px;
  }
}

/* ----------------------------------------
.access
---------------------------------------- */
/* カンプ y14025 で #f8efea 帯は終わり、access 見出し以降はページ地 #fff9f3。上下余白は .sec_padding */
.access .grid_2c {
  --gap: 40px 50px;
} /* 左右50/50 → grid_2c。上揃えは意図（住所テキストと地図） */
.access_name {
  font-family: var(--font_head);
}
.access_info .figure {
  aspect-ratio: 4 / 3;
  border-radius: 15px;
}
.access_map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.access_map.is-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  color: var(--base_color);
}
@media (max-width: 520px) {
  .access_map {
    aspect-ratio: 3 / 2;
  }
}

/* ----------------------------------------
.contact
---------------------------------------- */
/* h2〜p〜btn_A の間隔は不揃い（15/25px）のため dist_ 非対応。単体gapは各要素の margin-top で付与 */

/* ----------------------------------------
.news
---------------------------------------- */
.news {
  background-color: color-mix(in srgb, var(--c_dots) 40%, var(--c_wht));
}
.news h2 {
  padding: 5px;
  background-color: var(--base_color);
  font-family: var(--font_head);
  text-align: center;
}
.news li {
  position: relative;
}
/* 列間の区切り線（grid_3c の gap 中央に配置） */
.news li:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gap) / -2);
  width: 1px;
  background-color: color-mix(in srgb, var(--base_color) 25%, var(--base_bg));
}
@media (max-width: 520px) {
  .news li:not(:first-child)::before {
    content: none;
  }
}
.news li .figure {
  aspect-ratio: 16 / 10;
}
.news_meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.news_meta span {
  padding: 2px 10px;
  border-radius: 999px;
  background-color: #fff;
  border: 1px solid var(--c_main);
  font-family: var(--font_head);
}
.news_catch {
  font-family: var(--font_head);
}
@media (max-width: 520px) {
  .news h2 {
    padding: 10px 15px;
  }
}

/* ----------------------------------------
.review
---------------------------------------- */
/* カンプ y15050〜 地色 #f7f0ea 前後 ≒ .bg_cream に丸め（index.php で付与）。上下余白は .sec_padding */
.review iframe {
  display: block;
  width: 100%;
  min-height: 400px;
  border: 0;
}

/* ----------------------------------------
.reserve_calendar
---------------------------------------- */
.reserve_calendar iframe {
  display: block;
  width: 100%;
  min-height: 800px;
  border: 0;
}

/* ----------------------------------------
.footer_sns
---------------------------------------- */
.footer_inner {
  --box: 1fr auto;
  padding-block: 50px 30px;
}
.footer_right {
  text-align: right;
}
.footer_sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 20px;
}
.footer_sns img {
  width: 37px;
  aspect-ratio: 1;
  object-fit: contain;
}
@media (max-width: 520px) {
  .footer_right {
    text-align: center;
  }
  .footer_sns {
    justify-content: center;
  }
}