@charset "utf-8";
/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap"); /* 既存 */
@import url("https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@400;700&family=Shippori+Mincho:wght@400;500;600;700&display=swap");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("inview.css");

/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
  --primary-color: #f8f6f3; /*テンプレートの土台カラー*/
  --primary-inverse-color: #725a4c; /*上のprimary-colorの対となる色*/

  --secondary-color: #ea889a; /*テンプレートのサブまたはアクセントカラー*/
  --secondary-inverse-color: #fff; /*上のsecondary-colorの対となる色*/

  --accent-color: #f9a6a9; /*アクセントカラー*/
  --accent-inverse-color: #fff; /*アクセントカラーの対となる色*/

  --global-space: 20px; /*主に余白の一括管理用*/
}

/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/*アニメーション設定*/
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(-30deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* 初期状態でテキストを非表示にする */
.fade-in-text {
  visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。小さいとタイピングのようにカクカク出ます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.1」で調整できます。*/
.char {
  display: inline-block;
  opacity: 0;
  animation: fadeIn 0.2s linear both;
}

/*全体の設定
---------------------------------------------------------------------------*/
body * {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-size: 13px; /*基準となるフォントサイズ。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  html,
  body {
    font-size: 14px; /*基準となるフォントサイズ。*/
  }
} /*追加指定ここまで*/

body {
  margin: 0;
  padding: 0;
  font-family:
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,
    Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-text-size-adjust: none;
  line-height: 2.5; /*行間*/
  background: #463f39; /*背景色*/
  color: var(
    --primary-inverse-color
  ); /*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
  overflow-x: hidden;
}

/*リセット他*/
figure {
  margin: 0;
}
dd {
  margin: 0;
}
nav ul {
  list-style: none;
}
nav,
ul,
li,
ol {
  margin: 0;
  padding: 0;
}
section li {
  margin-left: 1rem;
}

/*table全般の設定*/
table {
  border-collapse: collapse;
}

/*画像全般の設定*/
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*videoタグ*/
video {
  max-width: 100%;
}

/*iframeタグ*/
iframe {
  width: 100%;
}

/*他*/
input {
  font-size: 1rem;
}

.flex-c {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex-r {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
  color: inherit;
  transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
  text-decoration: none;
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*大きな画面で見た場合に両サイドに見える画像*/
header::before {
  background: url("../images/bg_fv.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

/*このブロック内のcontents*/
header .contents {
  color: #fff; /*文字色*/
  padding: 0;
  position: relative;
}

.main-visual-img {
  width: 100%;
  height: auto;
  display: block; /* 画像下部にできる数ピクセルの隙間を消すおまじない */
}

header .contents a {
  color: inherit;
}

/*ロゴ、謳い文句、ロゴ上の装飾画像を囲むボックス*/
header #logo-container {
  flex: 1;
  background: rgba(
    66,
    42,
    22,
    0.8
  ); /*背景色。66,42,22はRGB値での色指定で0.8は色が80%出た状態。写真そのまま出したいならこの１行を削除。*/
  padding: 30px 10px 25px; /*上、左右、下への余白*/
  position: relative;
  text-align: center;
}

/*ロゴ画像*/
header .logo img {
  display: block;
  margin: 0;
  width: 250px; /*ロゴ画像の幅。お好みで。*/
}

/*謳い文句*/
header p {
  display: block;
  font-size: 0.8rem; /*文字サイズ80%*/
}

/*ロゴ上の装飾画像（New Open）*/
header .kazari {
  position: absolute;
  left: 20%; /*ロゴが入ったボックスに対して左からの配置指定*/
  top: -50px; /*ロゴが入ったボックスに対して上からの配置指定。マイナスがつくので、ボックスから飛び出る形になります。*/
  width: 140px; /*画像の幅*/
}

/*ヘッダー下部のSCROLLアニメーション
---------------------------------------------------------------------------*/
/*アニメーション設定*/
@keyframes scroll-line {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}

/*ラインアニメーションを囲むブロック*/
.scroll-container {
  position: absolute;
  width: 100px;
  left: calc(50% - 50px);
  bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.85rem; /*SCROLLのテキストのサイズ。85%*/
}

/*「SCROLL」のテキスト部分*/
.scroll-container p {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 60px; /*幅*/
  line-height: 60px; /*高さ*/
  border: 1px solid rgba(255, 255, 255, 0.5); /*テキストの色。255,255,255は白のことで0.5は色が50%出た状態。*/
  border-radius: 50%; /*枠を円形にする*/
}

/*ラインアニメーションの土台部分*/
.scroll-line {
  margin: 0 auto;
  position: relative;
  width: 1px; /*ラインアニメーションの幅。お好みで。*/
  height: 50px; /*ラインアニメーションの高さ。お好みで。*/
  background: rgba(
    255,
    255,
    255,
    0.5
  ); /*ラインアニメーションの土台部分の色。255,255,255は白のことで0.5は色が50%出た状態。*/
}

/*ラインアニメーション本体*/
.scroll-line span {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: #fff; /*ラインアニメーションの色*/
  animation: scroll-line 2s infinite; /*2sがアニメーションにかける時間。2秒。*/
  transform-origin: bottom;
}

/*ヘッダーメニュー（大きな画面で見た場合に左側に固定表示されるメニュー）
---------------------------------------------------------------------------*/
/*1000px未満は非表示*/
#header-menu {
  display: none;
}

/*画面幅1000px以上の追加指定*/
@media screen and (min-width: 1000px) {
  #header-menu {
    display: block; /*表示させる*/
    position: fixed;
    z-index: 1;
    left: 0px;
    top: 100px; /*上からの配置場所*/
  }

  /*メニュー１個あたり*/
  #header-menu li a {
    text-decoration: none;
    display: block;
    background: var(--secondary-color);
    color: var(
      --secondary-inverse-color
    ); /*文字色。冒頭のsecondary-inverse-colorを読み込む。*/
    border-radius: 0px 100px 100px 0px; /*角丸の指定。左上、右上、右下、左下への順。100pxの所はとりあえず大きな数字にしておけばOK。*/
    padding: 10px 30px 10px 20px; /*ボタン内の余白。上、右、下、左への順番。*/
    font-size: 1.2rem; /*文字サイズを120%に。*/
  }

  /*現在表示中のメニューの背景色と、マウスオン時共通*/
  #header-menu li.active a,
  #header-menu li a:hover {
    background: var(--accent-color); /*css冒頭のaccent-colorを読み込む*/
  }
} /*追加指定ここまで*/

/*背景画像共通（大きな画面で見た場合に両サイドに見える画像）
---------------------------------------------------------------------------*/
.section::before {
  opacity: 0;
  transition: opacity 1s; /* 1秒かけてフェードイン/フェードアウト */
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.section.active::before {
  opacity: 1;
}
.section.inactive::before {
  opacity: 0;
}

/*contents（各セクションブロック直下にあるボックス）
---------------------------------------------------------------------------*/
.contents {
  background: var(--primary-color); /*背景色。冒頭のprimary-colorを読み込む。*/
  color: var(
    --primary-inverse-color
  ); /*文字色。冒頭のprimary-inverse-colorを読み込む。*/
  padding: var(
    --global-space
  ); /*ボックス内の余白。冒頭のglobal-spaceを読み込む。*/
  position: relative;
  overflow-x: hidden;
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width: 600px) {
  .contents,
  #gallery .gallery-box {
    max-width: 560px; /*大きな画面になった場合のコンテンツ幅*/
    margin: 0 auto; /*画面の左右中央に配置*/
    overflow-x: visible;
  }
} /*追加指定ここまで*/

/*h2見出し共通*/
.contents h2 {
  font-family:
    "Shippori Mincho", "Noto Serif JP", "游明朝", "Yu Mincho", serif; /* この1行を追加 */
  margin: 0;
  line-height: 1.8; /*行間をデフォルトより狭くする。２行になった場合に間があきすぎるので。*/
  font-size: 1.8rem; /*文字サイズ180%*/
  text-align: center; /*テキストをセンタリング*/
  width: fit-content;
}
.mincho {
  font-family: "Shippori Mincho", "Noto Serif JP", "游明朝", "Yu Mincho", serif;
}

/*h2内の小文字*/
.contents h2 span.hosoku {
  display: block;
  font-size: 0.7rem; /*文字サイズを70%に*/
  letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/
  padding-bottom: 0.5rem; /*下の見出しとの間の余白。0.5文字分。*/
}

/*横スライドインタイプのスライドショー（１枚目の画像のアスペクト比が反映されるタイプ）
---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
.slide5 {
  position: relative;
  overflow: hidden;
}

/*３枚の画像の共通設定*/
.slide5 .slide {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.7s ease; /*0.7sはスライドにかける時間（0.7秒）。0.7を変更する場合、main.jsのスライドショー用のコードの最後の「700」も変更する。*/
}

/*アクティブ時*/
.slide5 .slide.active {
  transform: translateX(0);
}

/*左に移動*/
.slide5 .slide.left {
  transform: translateX(-100%);
}

/*非表示*/
.slide5 .slide.hidden {
  opacity: 0;
}

/*初期表示用*/
.slide5 .slide.initial {
  transform: translateX(0);
  transition: none;
}

/*１枚目画像（変更不要）*/
.slide5 .img1 {
  position: relative;
  width: 100%;
  height: auto;
}

/*画像のクリップ*/
.slide5 .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）*/
.slide5 .slide {
  pointer-events: none;
}
.slide5 .slide.active {
  pointer-events: auto;
}

/*現在表示中のボタンブロック*/
.slide5 .slide-indicators {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 80px; /*ボタンの配置場所。スライドショーの画面下からの距離。*/
  left: 0px;
}

/*ボタン１個あたり*/
.slide5 .indicator {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ccc; /*未アクティブ時のボタン色*/
  border: 4px solid #fff; /*枠線の幅、線種、色。*/
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

/*アクティブ時のボタン色*/
.slide5 .indicator.active {
  background: var(--accent-color); /*冒頭のaccent-colorを読み込む*/
}

/*お品書きメニュー（menuブロック）
---------------------------------------------------------------------------*/
/*大きな画面で見た場合に両サイドに見える画像*/
#menu::before {
  background: url("../images/bg_menu.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

/*このブロック内のh2見出し*/
#menu h2 {
  background: var(
    --secondary-color
  ); /*背景色。冒頭のsecondary-colorを読み込む。*/
  color: var(
    --secondary-inverse-color
  ); /*文字色。secondary-inverse-colorを読み込む。*/
  padding: 20px 0; /*上下、左右への余白*/
  margin-bottom: var(
    --global-space
  ); /*見出しの下に空ける隙間。冒頭のglobal-spaceを読み込む。*/
  border-radius: 30px 30px 0px 0px; /*角を丸くする指定。左上、右上、右下、左下への順番*/
}

/*メニューブロック１個あたり*/
.menu img {
  display: block;
}
.menu {
  position: relative;
  margin-bottom: var(
    --global-space
  ); /*下に空けるスペース。冒頭のglobal-spaceを読み込む。*/
}

/*メニューの下にあるテキストブロック（※スライドショーと共通）*/
.slide5 .slide .text,
.menu .text {
  margin: 0;
  padding: 10px; /*ボックス内の余白*/
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background: rgba(
    0,
    0,
    0,
    0.6
  ); /*背景色。0,0,0は黒の事で0.6は色が60%出た状態。*/
  color: #fff; /*文字色*/
}

/*メニューの下にある吹き出し系のアイコン（※スライドショーと共通）*/
.slide5 .slide .icon-menu-point,
.menu .icon-menu-point {
  text-align: center;
  width: 79px; /*幅*/
  height: 75px; /*高さ*/
  line-height: 1.2;
  color: #fff; /*文字色*/
  font-size: 0.8rem; /*文字サイズ80%*/
  padding-top: 24px; /*上に空ける余白。上下のバランスをとって下さい。*/
  position: absolute;
  z-index: 1;
  left: 20px; /*左からの配備場所*/
  bottom: 40px; /*下からの配備場所*/
  background: url("../images/icon_menu_point.svg") no-repeat center center; /*アイコン画像の読み込み*/
  transform: rotate(-20deg); /*左に20度回転*/
}

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショーブロック全てを囲むブロック*/
.slide-thumbnail-box {
  overflow-x: hidden;
}

/*画像たちを囲むブロック*/
.slide-thumbnail1 .img {
  display: flex;
}

/*画像*/
.slide-thumbnail1 .img img {
  padding: 5px; /*画像の余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.slide-thumbnail1 .rtl,
.slide-thumbnail1 .ltr {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.slide-thumbnail1 .rtl {
  animation-name: slide-rtl;
}
.slide-thumbnail1 .ltr {
  animation-name: slide-ltr;
}

@keyframes slide-rtl {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes slide-ltr {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/*tableっぽいdl（「お知らせ」「店舗情報」「メニュー（menu.html）」）
---------------------------------------------------------------------------*/
dl.table {
  display: grid;
  grid-template-columns: 100px auto; /*dtとddを横並びにし、dtの幅を100pxに、残りは自動。*/
  margin-bottom: 50px;
  line-height: 2;
}
dl.table dt,
dl.table dd {
  padding: 1rem;
}

/*menu.htmlのテキストのみのお品書きに使用*/
dl.table.reverse {
  grid-template-columns: auto 100px; /*dtとddを横並びにし、dtの幅を自動に、残りは10px。*/
}
dl.table.reverse dd {
  text-align: right;
}

/*menuブロックのみ、奇数番目のメニューの行に薄く背景色をつける*/
#menu dl.table dt:nth-of-type(odd),
#menu dl.table dd:nth-of-type(odd) {
  background: rgba(0, 0, 0, 0.04);
}

/*店舗情報
---------------------------------------------------------------------------*/
/*大きな画面で見た場合に両サイドに見える画像*/
#about::before {
  background: url("../images/bg_about.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

/*「店舗情報」「マップ」「SNSアイコン」を囲むブロック*/
#about .shop-data {
  background: url("../images/bg_shop_data.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
  color: #fff; /*文字色*/
  padding: 100px 20px 30px;
}

/*「所在地」などが記載されているtableっぽいブロック（基本設定はこの上の「tableっぽいdl（「お知らせ」「店舗情報」共通）」で行っています。）*/
#about .shop-data dl.table {
  border-top: 1px solid rgba(255, 255, 255, 0.3); /*枠線の幅、線種、255,255,255は白のことで0.3は色が30%出た状態。下と揃えておく。*/
}
#about .shop-data dl.table dt,
#about .shop-data dl.table dd {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); /*枠線の幅、線種、255,255,255は白のことで0.3は色が30%出た状態。上と揃えておく。*/
}

/*Follow Usの画像*/
#about h3 img {
  display: block;
  width: 150px; /*画像の幅*/
  margin: 0 auto;
}

/*Google Map*/
#about iframe {
  width: 100%;
  height: 500px; /*高さ*/
}

/*ソーシャルメディアのアイコン*/
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-self: center;
  justify-content: center;
  gap: 10px; /*アイコン同士のマージン的な要素*/
}
.icons i {
  font-size: 30px; /*アイコンサイズ*/
}

/*フッター設定（コピーライト部分）
---------------------------------------------------------------------------*/
footer small {
  font-size: 100%;
}
footer {
  font-size: 0.8rem; /*文字サイズ80%*/
  text-align: center; /*内容をセンタリング*/
}

/*リンクテキスト*/
footer a {
  color: inherit;
  text-decoration: none;
}

/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）*/
.pr a {
  text-decoration: none;
  display: block;
  background: rgba(0, 0, 0, 0.7);
  text-align: right;
  padding: 0.5rem 1rem;
  color: #ccc;
}
.pr a::before {
  font-family: "Font Awesome 6 Free";
  content: "\e2ca";
  font-weight: bold;
  margin-right: 0.5em;
}

/*btn1（お品書きメニューブロックの一番下で使っているシンプルボタン）
---------------------------------------------------------------------------*/
.btn1 a {
  display: block;
  text-decoration: none;
  text-align: center;
  border: 1px solid #333; /*枠線の幅、線種、色*/
  padding: 20px; /*ボタン内の余白*/
  font-size: 1.2rem; /*文字サイズ120%*/
  border-radius: 3px; /*角を少しだけ丸く*/
}

/*右側の矢印アイコン設定*/
.btn1 a::after {
  transition: 0.3s;
  font-family: "Font Awesome 6 Free";
  content: "\f054"; /*使いたいアイコン名（Font Awesome）をここで指定*/
  font-weight: bold; /*この手の設定がないとアイコンが出ない場合があります*/
  margin-left: 10px; /*アイコンとテキストとの間に空けるスペース*/
}

/*マウスオン時に矢印の左側のスペースを広くする*/
.btn1 a:hover::after {
  margin-left: 15px;
}

/*開閉メニュー
---------------------------------------------------------------------------*/
#navArea {
  font-family:
    "Open Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, sans-serif;
}

#navArea #menubar {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #d87284cf;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all 0.5s;
  z-index: 1200;
  opacity: 0;
}

#navArea.open #menubar {
  left: 0;
  opacity: 1;
}

#navArea #menubar .inner {
  padding: 25px;
}

#navArea #menubar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navArea #menubar ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #f2d1d1;
}

#navArea #menubar a {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}

#navArea #menubar a:hover {
  background: #e4e4e4;
}

.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 1300;
}

.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all 0.5s;
}

.toggle_btn span:nth-child(1) {
  top: 4px;
}

.toggle_btn span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.toggle_btn span:nth-child(3) {
  bottom: 4px;
}

#navArea.open .toggle_btn span:nth-child(1) {
  transform: translateY(5px) rotate(-315deg);
}

#navArea.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}

#navArea.open .toggle_btn span:nth-child(3) {
  transform: translateY(-10px) rotate(315deg);
}

#mask {
  display: none;
  transition: all 0.5s;
}

#navArea.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.8;
  z-index: 1100;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  #navArea #menubar {
    left: -220px;
    width: 80%;
  }
}

@media screen and (max-width: 500px) {
  .toggle_btn {
    display: block;
    top: 24px;
    right: 20px;
    width: 28px;
    height: 25px;
  }

  .toggle_btn span {
    width: 28px;
    background-color: #77504b;
  }

  #navArea.open .toggle_btn span {
    background-color: #d87284;
  }
}

/*マニュアルページ用
---------------------------------------------------------------------------*/
.manual {
  background: #fff;
  color: #333;
  padding: 5vw;
}
.manual pre.look {
  display: block;
}
.manual .look {
  background: #eee;
}
.manual h3 {
  line-height: 2;
  display: inline-block;
  background: linear-gradient(transparent 60%, yellow);
}
.manual h3 + p {
  margin-top: -0.5rem;
}
.manual.margin-left {
  padding-left: 300px;
}

/*画面幅999px以下の追加指定*/
@media screen and (max-width: 999px) {
  .manual.margin-left {
    padding-left: 4vw;
  }
} /*画面幅900px以上の追加指定ここまで*/

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.l {
  text-align: left !important;
}
.c {
  text-align: center !important;
}
.r {
  text-align: right !important;
}
.ws {
  width: 95%;
  display: block;
}
.wl {
  width: 95%;
  display: block;
}
.mb0 {
  margin-bottom: 0px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.look {
  display: inline-block;
  padding: 0px 10px;
  background: #000;
  border: 1px solid #fff;
  border-radius: 3px;
  margin: 5px 0;
  word-break: break-all;
}
.small {
  font-size: 0.75em;
}
.large {
  font-size: 2em;
  letter-spacing: 0.1em;
}
.color-check,
.color-check a {
  color: var(--accent-color);
}
.pc {
  display: none;
}
.dn {
  display: none !important;
}
.block {
  display: block !important;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  .ws {
    width: 48%;
    display: inline;
  }
  .sh {
    display: none;
  }
  .pc {
    display: block;
  }
} /*画面幅900px以上の追加指定ここまで*/

/* 選ばれる5つの安心 (featuresブロック)
---------------------------------------------------------------------------*/
/*大きな画面で見た場合に両サイドに見える画像*/
#features::before {
  background: url("../images/bg_fv.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

#features .contents {
  --features-base-height: 618px;
  --features-scale: clamp(1, calc(100vw / 390px), 1.4358974359);
  background: #fefafa;
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: clamp(
    var(--features-base-height),
    158.4615384615vw,
    887.3846153846px
  );
  margin: 0 auto;
  min-width: 390px;
  max-width: 560px;
  overflow: hidden;
  padding: 0;
  width: clamp(390px, 100vw, 560px);
}

.features-scale {
  height: var(--features-base-height);
  position: relative;
  transform: scale(var(--features-scale));
  transform-origin: top left;
  width: 390px;
}

.features-header h2 {
  display: inline-block; /* ★超重要：h2の幅を「文字の長さ」に合わせます */
  position: relative; /* ★このh2を絶対配置の基準にします */
  z-index: 1; /* 重なり順を手前にする */
  color: #8e4f52;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 0;
}

/* 数字の「5」の色指定（既存のまま） */
.features-header h2 span:not(.features-en) {
  color: #d87284;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 3.5em;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
}

/* 3. 装飾テキストの設定（absolute配置） */
.features-en {
  position: absolute; /* h2を基準にして自由に動けるようにする */
  top: 15px;
  left: -70px;
  z-index: -1; /* h2の日本語テキストの後ろに隠れるようにする */
  color: #f2d1d199 !important;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 70px;
  font-weight: 400;
  line-height: 1;
  transform: rotate(-12.35deg); /* 斜めにする */
  transform-origin: left center;
  white-space: nowrap;
}

.features-review {
  background: #fff;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  height: 172px;
  left: 22px;
  overflow: hidden;
  text-align: center;
  top: 105px;
  width: 346px;
}

.features-laurel {
  height: 150px;
}

.features-laurel-right {
  transform: scaleX(-1);
}

.features-review > .flex-r > .flex-c {
  justify-content: flex-start;
  align-items: baseline;
  margin-bottom: 20px;
}

.features-review .review-top {
  font-family:
    "Shippori Mincho", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "メイリオ", Meiryo, sans-serif;
  align-items: baseline;
  display: flex;
  gap: 11px;
  justify-content: center;
  margin-top: 12px;
}

.features-review .review-label {
  font-family: "Shippori Mincho", "Noto Serif JP", "游明朝", "Yu Mincho", serif;
  color: #8e4f52;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.features-review .review-score {
  font-family: "Shippori Mincho", "Noto Serif JP", "游明朝", "Yu Mincho", serif;
  color: #d87284;
  font-size: 63.716px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.features-review .review-score span {
  font-size: 35.681px;
  letter-spacing: 0.1em;
  vertical-align: 12px;
}

.features-review .review-line {
  display: block;
  height: 2px;
  margin: 10px auto 15px;
  width: 100%;
  max-width: 250px;
}

.features-review .review-stars {
  color: #f0cfb7;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1;
  margin: 0 0 11px;
}

.features-review .review-text {
  color: #8e4f52;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
}

.features-review .review-text span {
  font-size: 1.5em;
  font-weight: 700;
}

.features-grid {
  display: grid;
  gap: 8px 9px;
  grid-template-columns: repeat(2, 167px);
  left: 24px;
  position: absolute;
  top: 288px;
}

.features-item {
  align-items: center;
  background: #fff;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  display: flex;
  flex-direction: column;
  height: 134px;
  justify-content: center;
  position: relative;
  text-align: center;
  width: 167px;
}

.feature-icon {
  height: 60px;
  margin: 0 auto 3px;
  position: relative;
  width: 60px;
}

.feature-icon-bg {
  display: block;
  height: 60px;
  width: 60px;
}

.feature-icon-mask {
  display: block;
  overflow: hidden;
  position: absolute;
}

.feature-icon-mask img {
  max-width: none;
  position: absolute;
}

.feature-icon-room {
  border-radius: 13px;
  height: 51px;
  left: 4px;
  top: 4px;
  width: 48px;
}

.feature-icon-room img {
  height: 157.38%;
  left: -33.51%;
  top: -26.27%;
  width: 169.59%;
}

.feature-icon-childcare {
  height: 48px;
  left: 10px;
  top: 4px;
  width: 42px;
}

.feature-icon-childcare img {
  height: 179.86%;
  left: -53.95%;
  top: -33.23%;
  width: 206.69%;
}

.feature-icon-train {
  height: 36px;
  left: 8px;
  top: 12px;
  width: 48px;
}

.feature-icon-train img {
  height: 182.8%;
  left: -19.43%;
  top: -32.51%;
  width: 136.9%;
}

.feature-icon-parking {
  height: 35px;
  left: 6px;
  top: 13px;
  width: 48px;
}

.feature-icon-parking img {
  height: 178.89%;
  left: -18.23%;
  top: -34.52%;
  width: 130.62%;
}

.features-item p {
  color: #8e4f52;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.55;
  margin: 0;
}

/* こんなお悩みはありませんか？ (worriesブロック)
---------------------------------------------------------------------------*/
#worries::before {
  background: url("../images/bg_worries.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}
#worries .contents {
  --worries-base-height: 764px;
  --worries-scale: clamp(1, calc(100vw / 390px), 1.4358974359);
  background: #fff;
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: clamp(
    var(--worries-base-height),
    195.8974358974vw,
    1097.4358974359px
  );
  margin: 0 auto;
  min-width: 390px;
  max-width: 560px;
  overflow: hidden;
  padding: 0;
  width: clamp(390px, 100vw, 560px);
}

.worries-scale {
  height: var(--worries-base-height);
  transform: scale(var(--worries-scale));
  transform-origin: top left;
  width: 390px;
}

.worries-header {
  height: 110px;
  position: relative;
  text-align: center;
}

.worries-en {
  color: #f2d1d199 !important;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 70px;
  font-weight: 400;
  left: -30px;
  line-height: 1;
  position: absolute;
  top: 24px;
  transform: rotate(-12.35deg);
  transform-origin: left center;
  white-space: nowrap;
}

.worries-header h2 {
  color: #8e4f52;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  padding: 52px 0 0;
  position: relative;
  z-index: 1;
}

.worries-header h2 span {
  color: #d87284;
  font-size: 24px;
  letter-spacing: 0.1em;
}

.worries-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0 0 0 27px;
  padding: 0;
  width: 346px;
}

.worries-list li {
  align-items: center;
  background: #fff;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  display: flex;
  gap: 10px;
  height: 50px;
  margin: 0;
  padding: 0 15px;
}

.worries-list li:nth-child(even) {
  background: #fefafa;
}

.worries-list img {
  flex: 0 0 27px;
  height: 27px;
  width: 27px;
}

.worries-list span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.5;
  white-space: nowrap;
}

.worries-message {
  background: #fbeded;
  margin-top: 46px;
  min-height: 169px;
  padding: 28px 25px 24px;
  position: relative;
  text-align: center;
}

.worries-message p {
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin: 0;
}

.worries-message .worries-message-accent {
  color: #d87284;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
}

.worries-sparkle-left {
  height: 30px;
  left: 19px;
  position: absolute;
  top: 7px;
  width: 27px;
}

.worries-sparkle-right {
  bottom: 20px;
  height: 20px;
  position: absolute;
  right: 30px;
  width: 15px;
}

/* 大阪・東住吉区のボーテプラスが選ばれる理由 (reasonsブロック)
---------------------------------------------------------------------------*/
#reasons::before {
  background: url("../images/bg_reasons.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}
#reasons .contents {
  --reasons-base-height: 1446px;
  --reasons-scale: clamp(1, calc(100vw / 390px), 1.4358974359);
  background: #fefafa;
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: clamp(
    var(--reasons-base-height),
    370.7692307692vw,
    2076.3076923076px
  );
  margin: 0 auto;
  min-width: 390px;
  max-width: 560px;
  overflow: hidden;
  padding: 0;
  width: clamp(390px, 100vw, 560px);
}

.reasons-scale {
  height: var(--reasons-base-height);
  transform: scale(var(--reasons-scale));
  transform-origin: top left;
  width: 390px;
}

.reasons-header {
  height: 118px;
  position: relative;
  text-align: center;
}

.reasons-en {
  color: #f2d1d199 !important;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 70px;
  font-weight: 400;
  left: -15px;
  line-height: 1;
  position: absolute;
  top: 15px;
  transform: rotate(-12.35deg);
  transform-origin: left center;
  white-space: nowrap;
}

.reasons-header h2 {
  color: #8e4f52;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
  padding-top: 35px;
  position: relative;
  z-index: 1;
}

.reasons-header h2 span {
  color: #d87284;
}

.reasons-star-small {
  height: 20px;
  position: absolute;
  right: 35px;
  top: 49px;
  width: 15px;
}

.reasons-star-large {
  height: 17px;
  position: absolute;
  right: 24px;
  top: 69px;
  width: 12px;
}

.reasons-card {
  background: #fff;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  margin: 0 0 20px 22px;
  padding: 22px 12px 10px;
  position: relative;
  width: 346px;
}

.reasons-card .flex-r {
  justify-content: flex-start;
  gap: 15px;
}
.reasons-number {
  color: #d87284;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 115px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  display: block;
  margin: -50px 0 -10px;
  letter-spacing: -3px;
}

.reasons-card h3 {
  color: #8e4f52;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin: 0 0 14px;
  padding-left: 47px;
  text-align: center;
}

.reasons-card-photo-right h3 {
  padding-left: 74px;
}

.reasons-lead {
  color: #d87284;
  font-family: "Shippori Mincho", "Noto Serif JP", "游明朝", "Yu Mincho", serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin: 0 0 13px;
  text-align: center;
}

.reasons-line {
  display: block;
  height: 1px;
  margin: 0 auto 16px;
  width: 322px;
}

.reasons-body {
  align-items: flex-start;
  display: grid;
  gap: 14px;
  grid-template-columns: 120px 1fr;
}

.reasons-card-photo-right .reasons-body {
  grid-template-columns: 1fr 120px;
}

.reasons-photo {
  height: 141px;
  overflow: hidden;
  position: relative;
  width: 120px;
}

.reasons-photo img {
  max-width: none;
  position: absolute;
}

.reasons-photo-childcare img {
  height: 185%;
  left: -45%;
  top: -48%;
  width: 174%;
}

.reasons-photo-room img {
  height: 100%;
  left: -60%;
  top: 0;
  width: 160%;
}

.reasons-photo-damage img {
  height: 100%;
  left: 0;
  top: 0;
  width: 162%;
}

.reasons-photo-access img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  width: 100%;
}

.reasons-text {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.75;
}

.reasons-text p {
  margin: 0;
}

.reasons-note {
  align-items: center;
  background: #fefafa;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  display: flex;
  gap: 9px;
  height: 48px;
  margin-top: 16px;
  padding: 0 11px;
}

.reasons-note img {
  flex: 0 0 26px;
  height: 26px;
  width: 26px;
}

.reasons-note span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
}

/* お子さまと一緒に通えるサロン (with-kidsブロック)
---------------------------------------------------------------------------*/
#with-kids::before {
  background: url("../images/bg_with-kids.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

#with-kids .contents {
  --kids-base-height: 1368px;
  --kids-scale: clamp(1, calc(100vw / 390px), 1.4358974359);
  background: #fff;
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: clamp(var(--kids-base-height), 350.7692307692vw, 1964.3076923076px);
  margin: 0 auto;
  min-width: 390px;
  max-width: 560px;
  overflow: hidden;
  padding: 0;
  width: clamp(390px, 100vw, 560px);
}

.kids-scale {
  height: var(--kids-base-height);
  position: relative;
  transform: scale(var(--kids-scale));
  transform-origin: top left;
  width: 390px;
}

.kids-header {
  position: relative;
  text-align: center;
}

.kids-en {
  color: #f2d1d199 !important;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 70px;
  font-weight: 400;
  left: -45px;
  line-height: 1;
  position: absolute;
  top: 20px;
  transform: rotate(-12.35deg);
  transform-origin: left center;
  white-space: nowrap;
}

.kids-header h2 {
  color: #8e4f52;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin: 0;
  padding: 40px 0 0;
  position: relative;
  z-index: 1;
}

.kids-header h2 span {
  color: #d87284;
  font-size: 24px;
}

.kids-title-line {
  height: 1px;
  left: 85px;
  position: absolute;
  top: 144px;
  width: 220px;
}

.kids-lead {
  color: #8e4f52;
  font-size: 16px;
  font-weight: 500;
  left: 0;
  letter-spacing: 0.1em;
  line-height: 1.65;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 166px;
  width: 390px;
}

.kids-main-photo {
  height: 160px;
  left: 7px;
  overflow: hidden;
  position: absolute;
  top: 215px;
  width: 376px;
}

.kids-main-photo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.kids-steps {
  background: #fff;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  height: 205px;
  left: 22px;
  position: absolute;
  top: 398px;
  width: 346px;
}

.kids-steps-label {
  height: 32px;
  left: 63px;
  position: absolute;
  top: -16px;
  width: 218px;
}

.kids-steps-label > img {
  display: block;
  height: 32px;
  width: 218px;
}

.kids-steps-label span {
  align-items: center;
  color: #d87284;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
  justify-content: center;
  left: 9px;
  letter-spacing: 0.1em;
  line-height: 1;
  position: absolute;
  top: 6px;
  white-space: nowrap;
}

.kids-steps-label span img {
  height: 15px;
  width: 13px;
}

.kids-step {
  align-items: flex-start;
  display: flex;
  left: 17px;
  position: absolute;
}

.kids-step-num {
  color: #d87284;
  font-family: "Shippori Mincho", "Noto Serif JP", "游明朝", "Yu Mincho", serif;
  flex: 0 0 46px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}

.kids-step p {
  color: #8e4f52;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.55;
  margin: 4px 0 0;
  white-space: nowrap;
}

.kids-step-line {
  height: 1px;
  left: 15px;
  position: absolute;
  width: 318px;
}

.kids-step-img {
  position: absolute;
}

.kids-step-door {
  height: 39px;
  left: 255px;
  top: -5px;
  width: 52px;
}

.kids-step-eye {
  height: 32px;
  left: 259px;
  top: 12px;
  width: 51px;
}

.kids-card {
  background: #fefafa;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: auto;
  left: auto;
  position: static;
  top: auto;
  width: 100%;
  gap: 10px;
}

.kids-card-photo {
  border-radius: 12px 12px 0 0;
  height: 150px;
  overflow: hidden;
  width: 100%;
}

.kids-card-photo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.kids-card-sitter .kids-card-photo img {
  height: 180%;
  object-fit: cover;
  object-position: center top;
}

.kids-card-flexible .kids-card-photo img {
  height: 250%;
  object-fit: cover;
  object-position: 25% 84%;
}

.kids-card h3 {
  color: #d87284;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 8px 0 8px;
  text-align: center;
  white-space: nowrap;
}

.kids-card-line {
  display: block;
  height: 1px;
  margin: 0 auto 9px;
  width: 155px;
}

.kids-card p {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 400;
  left: 14px;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
  position: absolute;
  top: 154px;
  width: 135px;
}

.kids-notice {
  align-items: center;
  background: #fefafa;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  display: flex;
  gap: 10px;
  height: 48px;
  left: 22px;
  padding: 0 10px;
  position: absolute;
  top: 1148px;
  width: 346px;
}

.kids-notice img {
  flex: 0 0 27px;
  height: 26px;
  width: 27px;
}

.kids-notice span {
  color: #8e4f52;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.kids-consult {
  align-items: flex-end;
  display: flex;
  justify-content: center;
  left: 61px;
  position: absolute;
  top: 1227px;
  width: 268px;
}

.kids-consult img {
  height: 26px;
  width: 26px;
}

.kids-consult p {
  color: #8e4f52;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.kids-line-button {
  align-items: center;
  background: #d87284;
  border-radius: 30px;
  color: #fff;
  display: flex;
  height: 55px;
  left: 20px;
  overflow: hidden;
  position: absolute;
  text-decoration: none;
  top: 1268px;
  width: 350px;
}

.kids-line-icon {
  flex: 0 0 32px;
  height: 32px;
  margin-left: 7px;
  width: 32px;
}

.kids-line-button span {
  color: #fff;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  margin-left: 7px;
  white-space: nowrap;
}

.kids-forward {
  height: 18px;
  margin-left: auto;
  margin-right: 8px;
  object-fit: contain;
  width: 16px;
}

/* メニュー・料金 (menu-priceブロック)
---------------------------------------------------------------------------*/
#menu-price::before {
  background: url("../images/bg_menu.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

#menu-price .contents {
  --price-base-height: 1266px;
  --price-scale: clamp(1, calc(100vw / 390px), 1.4358974359);
  background: #fefafa;
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: clamp(var(--price-base-height), 324.6153846154vw, 1817.8461538461px);
  margin: 0 auto;
  min-width: 390px;
  max-width: 560px;
  overflow: hidden;
  padding: 0;
  width: clamp(390px, 100vw, 560px);
}

.price-scale {
  height: var(--price-base-height);
  position: relative;
  transform: scale(var(--price-scale));
  transform-origin: top left;
  width: 390px;
}

.price-header {
  position: relative;
  text-align: center;
}

.price-en {
  color: #f2d1d1;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 70px;
  font-weight: 400;
  left: -35px;
  line-height: 1;
  position: absolute;
  top: -15px;
  transform: rotate(-12.35deg);
  transform-origin: left center;
  white-space: nowrap;
}

.price-header h2 {
  color: #8e4f52;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.55;
  margin: 0;
  position: relative;
  z-index: 1;
}

.price-star-large {
  height: 20px;
  position: absolute;
  right: 35px;
  top: 49px;
  width: 15px;
}

.price-star-small {
  height: 17px;
  position: absolute;
  right: 24px;
  top: 69px;
  width: 12px;
}

.price-card {
  background: #fff;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.price-card .flex-r {
  gap: 15px;
  justify-content: flex-start;
}

.price-photo {
  border-radius: 10px;
  height: 97px;
  left: 10px;
  overflow: hidden;
  position: absolute;
  top: 9px;
  width: 97px;
}

.price-photo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.price-info h3 {
  color: #8e4f52;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 13px;
  padding: 0;
  text-align: left;
  white-space: nowrap;
  font-family: "Shippori Mincho", serif;
}

.price-yen {
  color: #d87284;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.price-yen span {
  color: #8e4f52;
  font-size: 14px;
  font-weight: 500;
  margin-right: 2px;
}

.price-yen span:last-child {
  color: #d87284;
  font-weight: 700;
  margin-left: 0;
  margin-right: 0;
}

.price-line {
  display: block;
  height: 1px;
  width: 207px;
}

.price-detail {
  display: grid;
  gap: 5px;
  left: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 130px;
}

.price-detail li {
  align-items: center;
  display: grid;
  grid-template-columns: 18px 77px 1fr;
  height: 21px;
  margin: 0;
  width: 316px;
}

.price-detail img {
  height: 18px;
  object-fit: contain;
  width: 18px;
}

.price-detail li:nth-child(3) img {
  height: 20px;
  width: 20px;
}

.price-detail span,
.price-detail p {
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;
  margin: 0;
  white-space: nowrap;
}

.price-detail span {
  color: #d87284;
}

.price-detail p {
  color: #8e4f52;
}

.price-note {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 8px;
  font-weight: 400;
  left: 39px;
  line-height: 1.5;
  margin: 0;
  position: absolute;
  top: 225px;
  white-space: nowrap;
}

.price-reserve-button {
  align-items: center;
  background: #d87284;
  border-radius: 30px;
  color: #fff;
  display: flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 500;
  height: 55px;
  justify-content: center;
  left: 6px;
  letter-spacing: 0.05em;
  line-height: 1;
  position: absolute;
  text-decoration: none;
  top: 246px;
  width: 334px;
}

.price-reserve-button img {
  height: 18px;
  object-fit: contain;
  position: absolute;
  right: 8px;
  top: 18px;
  width: 16px;
}

.price-more-button {
  align-items: center;
  background: #fff;
  border: 1px solid #d87284;
  border-radius: 30px;
  color: #d87284;
  display: flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 500;
  height: 55px;
  justify-content: center;
  left: 28px;
  letter-spacing: 0.05em;
  line-height: 1;
  position: absolute;
  text-decoration: none;
  top: 1147px;
  width: 334px;
}

.price-bottom-note {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 10px;
  font-weight: 400;
  left: 19px;
  line-height: 1.5;
  margin: 0;
  position: absolute;
  top: 1213px;
  white-space: nowrap;
}

/* 施術事例 (case-studiesブロック)
---------------------------------------------------------------------------*/
#case-studies::before {
  background: url("../images/bg_case.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

#case-studies .contents {
  --case-base-height: 1034px;
  --case-scale: 1;
  background: #fff;
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: var(--case-base-height);
  margin: 0 auto; /* 中央寄せに変更 */
  min-width: 390px;
  max-width: 560px; /* パソコン等で大きくなりすぎないよう最大幅を追加 */
  overflow: hidden;
  padding: 0;
  width: clamp(
    390px,
    100vw,
    560px
  ); /* 画面幅に合わせて100%（最大560px）広がるように変更 */
}

.case-scale {
  height: var(--case-base-height);
  position: relative;
  transform: scale(var(--case-scale));
  transform-origin: top left;
  width: 390px;
}

@media screen and (min-width: 561px) {
  #case-studies .contents {
    --case-scale: clamp(1, calc(100vw / 390px), 1.4358974359);
    height: clamp(var(--case-base-height), 265.1282051282vw, 1484.4102564103px);
    margin: 0 auto;
    max-width: 560px;
    width: clamp(390px, 100vw, 560px);
  }
}

.case-header {
  position: relative;
  text-align: center;
}

.case-en {
  color: #f2d1d1;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 50px;
  font-weight: 400;
  left: -15px;
  line-height: 1;
  position: absolute;
  top: 20px;
  transform: rotate(-12.35deg);
  transform-origin: left center;
  white-space: nowrap;
}

.case-header h2 {
  color: #8e4f52;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.55;
  margin: 0;
  padding-top: 30px;
  position: relative;
  z-index: 1;
}

.case-heading-line {
  height: 1px;
  left: 86px;
  position: absolute;
  top: 152px;
  width: 220px;
}

.case-lead {
  color: #8e4f52;
  font-size: 16px;
  font-weight: 500;
  left: 0;
  letter-spacing: 0.1em;
  line-height: 1.65;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 174px;
  width: 390px;
}

.case-slider {
  height: 639px;
  left: 0;
  overflow: visible;
  position: absolute;
  top: 238px;
  width: 390px;
}

.case-track {
  display: flex;
  height: 639px;
  transition: transform 0.38s ease;
  width: 1170px;
}

.case-slide {
  flex: 0 0 390px;
  height: 639px;
  position: relative;
  width: 390px;
}

.case-card {
  background: #fff;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  height: 639px;
  left: 23px;
  position: absolute;
  top: 0;
  width: 346px;
}

.case-title-row {
  position: relative;
}

.case-label {
  align-items: center;
  background: #e56178;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
  color: #fff;
  display: flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: 23px;
  justify-content: center;
  left: 12px;
  line-height: 1;
  position: absolute;
  top: 10px;
  width: 81px;
}

.case-label span {
  font-size: 12px;
  font-weight: 500;
  margin-right: 4px;
}

.case-label strong {
  font-size: 14px;
  font-weight: 700;
}

.case-title-row h3 {
  color: #8e4f52;
  font-size: 16px;
  font-weight: 500;
  left: 117px;
  line-height: 1.4;
  margin: 0;
  position: absolute;
  top: 8px;
  white-space: nowrap;
}

.case-photos {
  height: 140px;
  left: 6px;
  position: absolute;
  top: 42px;
  width: 333px;
}

.case-photo {
  border-radius: 12px;
  height: 140px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 160px;
}

.case-photo-before {
  left: 0;
}

.case-photo-after {
  left: 173px;
}

.case-photo span {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  height: 29px;
  justify-content: center;
  letter-spacing: 0.05em;
  line-height: 1;
  width: 160px;
}

.case-photo-before span {
  background: #fbeded;
  color: #d87284;
  font-weight: 600;
}

.case-photo-after span {
  background: #d87284;
}

.case-photo img {
  display: block;
  height: 111px;
  object-fit: cover;
  width: 160px;
}

.case-photo-arrow {
  height: 14px;
  left: 164px;
  object-fit: contain;
  position: absolute;
  top: 67px;
  transform: rotate(90deg);
  width: 20px;
}

.case-details {
  left: 10px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 199px;
  width: 325px;
}

.case-details div {
  border-bottom: 1px dashed #f2d1d1;
  height: 66px;
}

.case-details dt {
  align-items: center;
  background: #fbeded;
  border-radius: 2px;
  color: #d87284;
  display: inline-flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 11px;
  font-weight: 500;
  height: 24px;
  line-height: 1;
  padding: 0 10px;
  white-space: nowrap;
}

.case-details dd {
  color: #8e4f52;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  margin: 7px 0 0;
  white-space: nowrap;
}

.case-comment {
  background: #fefafa;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  height: 88px;
  left: 8px;
  position: absolute;
  top: 541px;
  width: 330px;
}

.case-comment-title {
  align-items: center;
  border-bottom: 1px solid #f2d1d1;
  color: #e56178;
  display: flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 700;
  height: 37px;
  margin: 0 auto;
  width: 308px;
}

.case-comment-title img {
  height: 21px;
  margin: 0 12px 0 1px;
  object-fit: contain;
  width: 18px;
}

.case-comment p {
  color: #8e4f52;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  margin: 13px 12px 0;
}

.case-nav {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: 45px;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 294px;
  width: 45px;
  z-index: 5;
}

.case-nav img:first-child {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 45px;
}

.case-nav img:last-child {
  height: 21px;
  position: relative;
  width: 13px;
  z-index: 1;
}

.case-nav-prev {
  left: 0;
  transform: rotate(180deg);
}

.case-nav-next {
  right: 1px;
}

.case-more-button {
  align-items: center;
  background: #d87284;
  border-radius: 30px;
  color: #fff;
  display: flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 500;
  height: 55px;
  justify-content: center;
  left: 21px;
  letter-spacing: 0.05em;
  line-height: 1;
  position: absolute;
  text-decoration: none;
  top: 917px;
  width: 350px;
}

.case-more-button img {
  height: 18px;
  object-fit: contain;
  position: absolute;
  right: 7px;
  top: 19px;
  width: 16px;
}

.case-bottom-note {
  color: #8e4f52;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  text-align: center;
}

/* お客様の声 (customer-voicesブロック)
---------------------------------------------------------------------------*/
#customer-voices::before {
  background: url("../images/bg_voices.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

#customer-voices .contents {
  --voices-base-height: 1104px;
  --voices-scale: 1;
  background: #d87284;
  color: #fff;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: var(--voices-base-height);
  margin: 0 auto; /* 中央寄せに変更 */
  min-width: 390px;
  max-width: 560px; /* パソコン等で大きくなりすぎないよう最大幅を追加 */
  overflow: hidden;
  padding: 0;
  width: clamp(
    390px,
    100vw,
    560px
  ); /* 画面幅に合わせて100%（最大560px）広がるように変更 */
}

.voices-scale {
  height: var(--voices-base-height);
  position: relative;
  transform: scale(var(--voices-scale));
  transform-origin: top left;
  width: 390px;
}

@media screen and (min-width: 561px) {
  #customer-voices .contents {
    --voices-scale: clamp(1, calc(100vw / 390px), 1.4358974359);
    height: clamp(
      var(--voices-base-height),
      283.0769230769vw,
      1584.4102564103px
    );
    margin: 0 auto;
    max-width: 560px;
    width: clamp(390px, 100vw, 560px);
  }
}

.voices-header {
  position: relative;
  text-align: center;
}

.voices-en {
  color: #f2d1d187;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 70px;
  font-weight: 400;
  left: -35px;
  line-height: 1;
  position: absolute;
  top: 0;
  transform: rotate(-12.35deg);
  transform-origin: left center;
  white-space: nowrap;
}

.voices-header h2 {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin: 0;
  padding-top: 30px;
  text-align: center;
}

.voices-summary {
  background: #fff;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  height: 823px;
  left: 10px;
  position: absolute;
  top: 145px;
  width: 370px;
}

.voices-laurel {
  height: 98px;
  object-fit: cover;
  position: absolute;
  top: 27px;
  width: 66px;
}

.voices-laurel-left {
  left: 11px;
}

.voices-laurel-right {
  right: 12px;
  transform: scaleX(-1);
}

.voices-google {
  font-family:
    "Shippori Mincho", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "メイリオ", Meiryo, sans-serif;
  color: #8e4f52;
  font-size: 16px;
  font-weight: 500;
  left: 61px;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
  position: absolute;
  top: 47px;
  white-space: nowrap;
}

.voices-score {
  font-family:
    "Shippori Mincho", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "メイリオ", Meiryo, sans-serif;
  color: #e56178;
  font-size: 64px;
  font-weight: 400;
  left: 180px;
  letter-spacing: 0.05em;
  line-height: 0.9;
  margin: 0;
  position: absolute;
  top: 14px;
  white-space: nowrap;
}

.voices-score span {
  font-size: 36px;
  margin-right: 4px;
}

.voices-heading-line {
  height: 1px;
  left: 75px;
  position: absolute;
  top: 92px;
  width: 220px;
}

.voices-stars {
  color: #f0cfb7;
  font-size: 18px;
  font-weight: 500;
  left: 140px;
  letter-spacing: 0.3em;
  line-height: 1;
  margin: 0;
  position: absolute;
  top: 104px;
  white-space: nowrap;
}

.voices-total {
  color: #8e4f52;
  font-size: 14px;
  font-weight: 500;
  left: 107px;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
  position: absolute;
  top: 134px;
  white-space: nowrap;
}

.voices-total strong {
  font-size: 20px;
  font-weight: 700;
}

.voices-tabs {
  display: grid;
  gap: 6px 8px;
  grid-template-columns: repeat(2, 1fr);
  left: 37px;
  position: absolute;
  top: 320px;
  width: 317px;
  z-index: 2;
}

.voices-tab {
  align-items: center;
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 31px;
  justify-content: center;
  line-height: 1;
  padding: 0 5px;
  white-space: nowrap;
}

.voices-tab-child {
  color: #d87284;
}

.voices-tab-lash {
  color: #f29347;
}

.voices-tab-brow {
  color: #8c71ab;
}

.voices-tab-eye {
  color: #7ba290;
}

.voices-tab.is-active {
  box-shadow: 0 2px 8px rgba(142, 79, 82, 0.16);
  transform: translateY(-1px);
}

.voices-panels {
  height: 506px;
  left: 24px;
  position: absolute;
  top: 407px;
  width: 343px;
}

.voices-panel {
  display: none;
}

.voices-panel.is-active {
  display: block;
}

.voice-card {
  background: #fefafa;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  height: 162px;
  left: 0;
  position: absolute;
  width: 343px;
}

.voice-card h3 {
  border-bottom: 1px solid #f2d1d1;
  color: #8e4f52;
  font-size: 14px;
  font-weight: 600;
  left: 12px;
  letter-spacing: 0.05em;
  line-height: 41px;
  margin: 0;
  overflow: hidden;
  padding: 0 0 0 44px;
  position: absolute;
  text-overflow: ellipsis;
  top: 0;
  white-space: nowrap;
  width: 315px;
}

.voice-body {
  position: absolute;
  inset: 0;
}

.voice-avatar {
  height: 66px;
  left: 9px;
  object-fit: cover;
  position: absolute;
  top: 49px;
  width: 67px;
}

.voice-category {
  align-items: center;
  background: #fefafa;
  border: 1px solid #f2d1d1;
  border-radius: 3px;
  color: #d87284;
  display: inline-flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 10px;
  font-weight: 500;
  height: 22px;
  justify-content: center;
  left: 83px;
  line-height: 1;
  padding: 0 5px;
  position: absolute;
  top: 49px;
  white-space: nowrap;
}

.voice-category-lash {
  border-color: #f29347;
  color: #f29347;
}

.voice-category-brow {
  border-color: #8c71ab;
  color: #8c71ab;
}

.voice-category-eye {
  border-color: #7ba290;
  color: #7ba290;
}

.voice-stars {
  color: #f0cfb7;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 500;
  left: 208px;
  letter-spacing: 0.3em;
  line-height: 1;
  position: absolute;
  top: 45px;
  white-space: nowrap;
}

.voice-body p {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 400;
  left: 84px;
  letter-spacing: 0.03em;
  line-height: 16px;
  margin: 0;
  position: absolute;
  top: 82px;
  width: 247px;
}

.voice-quote {
  height: 29px;
  opacity: 0.75;
  object-fit: cover;
  position: absolute;
  width: 30px;
}

.voice-quote-left {
  left: 15px;
  top: 10px;
}

.voice-quote-right {
  bottom: 5px;
  right: 10px;
  transform: rotate(180deg);
}

.voices-more-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #fff;
  border-radius: 30px;
  color: #fff;
  display: flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 500;
  height: 55px;
  justify-content: center;
  left: 20px;
  letter-spacing: 0.05em;
  line-height: 1;
  position: absolute;
  text-decoration: none;
  top: 996px;
  width: 350px;
}

.voices-more-button img {
  height: 18px;
  object-fit: contain;
  position: absolute;
  right: 7px;
  top: 19px;
  width: 16px;
}

/* スタッフ紹介 (staffブロック)
---------------------------------------------------------------------------*/
#staff::before {
  background: url("../images/bg_staff.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

#staff .contents {
  --staff-base-height: 1384px;
  --staff-scale: 1;
  background: #fbeded;
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: var(--staff-base-height);
  margin: 0 auto; /* 中央寄せに変更 */
  min-width: 390px;
  max-width: 560px; /* パソコン等で大きくなりすぎないよう最大幅を追加 */
  overflow: hidden;
  padding: 0;
  width: clamp(
    390px,
    100vw,
    560px
  ); /* 画面幅に合わせて100%（最大560px）広がるように変更 */
}

.staff-scale {
  height: var(--staff-base-height);
  position: relative;
  transform: scale(var(--staff-scale));
  transform-origin: top left;
  width: 390px;
}

@media screen and (min-width: 561px) {
  #staff .contents {
    --staff-scale: clamp(1, calc(100vw / 390px), 1.4358974359);
    height: clamp(
      var(--staff-base-height),
      354.8717948718vw,
      1987.7948717949px
    );
    margin: 0 auto;
    max-width: 560px;
    width: clamp(390px, 100vw, 560px);
  }
}

.staff-header {
  position: relative;
  text-align: center;
}

.staff-en {
  color: #f2d1d1;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 70px;
  font-weight: 400;
  left: -70px;
  line-height: 1;
  position: absolute;
  top: 0;
  transform: rotate(-12.35deg);
  transform-origin: left center;
  white-space: nowrap;
}

.staff-header h2 {
  color: #8e4f52;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 0;
  text-align: center;
  padding-top: 30px;
}

.staff-star-large {
  height: 20px;
  left: 340px;
  position: absolute;
  top: 49px;
  width: 15px;
}

.staff-star-small {
  height: 17px;
  left: 354px;
  position: absolute;
  top: 69px;
  width: 12px;
}

.staff-card {
  background: #fff;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  height: 605px;
  left: 22px;
  position: absolute;
  width: 346px;
}

.staff-card-akari {
  top: 99px;
}

.staff-card-kazuki {
  top: 723px;
}

.staff-role {
  align-items: center;
  background: #d87284;
  border-radius: 38px;
  color: #fff;
  display: flex;
  font-size: 12.5px;
  font-weight: 700;
  height: 25px;
  justify-content: center;
  left: 70px;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
  position: absolute;
  top: 15px;
  white-space: nowrap;
  width: 206px;
}

.staff-photo {
  border-radius: 12px;
  height: 153px;
  left: 96px;
  overflow: hidden;
  position: absolute;
  top: 55px;
  width: 155px;
}

.staff-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.staff-card-akari .staff-photo img {
  height: 135.22%;
  object-position: 51% 11%;
}

.staff-card-kazuki .staff-photo img {
  height: 132.83%;
  object-position: 57% 0%;
  width: 106.14%;
}

.staff-divider {
  background: url("../images/staff-divider.svg") center / 100% 1px no-repeat;
  height: 1px;
  left: 9px;
  position: absolute;
  top: 234px;
  width: 322px;
}

.staff-profile {
  left: 8px;
  margin: 0;
  position: absolute;
  top: 244px;
  width: 325px;
}

.staff-profile-row {
  background: url("../images/staff-line.svg") left bottom / 325px 1px no-repeat;
  display: block;
  height: 48px;
  position: relative;
}

.staff-profile-row + .staff-profile-row {
  margin-top: 12px;
}

.staff-profile dt,
.staff-care-label {
  align-items: center;
  background: #fbeded;
  border-radius: 2px;
  color: #d87284;
  display: inline-flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 11px;
  font-weight: 500;
  height: 24px;
  justify-content: center;
  line-height: 1.1;
  margin: 0;
  padding: 0 10px;
  white-space: nowrap;
}

.staff-profile dt {
  left: 10px;
  position: absolute;
  top: 0;
}

.staff-profile dd {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 400;
  left: 87px;
  line-height: 1.5;
  margin: 0;
  position: absolute;
  top: 3px;
  white-space: nowrap;
}

.staff-card-kazuki .staff-profile-row:first-child dd {
  font-size: 11px;
  letter-spacing: -0.01em;
  top: 4px;
}

.staff-care {
  background: url("../images/staff-line.svg") left bottom / 325px 1px no-repeat;
  left: 18px;
  padding-bottom: 12px;
  position: absolute;
  top: 388px;
  width: 325px;
}

.staff-care-label {
  margin-bottom: 11px;
}

.staff-care p:not(.staff-care-label) {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 18px;
  margin: 0;
  white-space: nowrap;
}

.staff-message {
  background: #fefafa;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
}

.staff-message h3 {
  color: #d87284;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 15px;
  white-space: nowrap;
}

.staff-message p {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 400;
  left: 13px;
  line-height: 18px;
  margin: 0;
  position: absolute;
  top: 14px;
  white-space: nowrap;
}

/* 予約から施術までの流れ (reservation-flowブロック)
---------------------------------------------------------------------------*/
#reservation-flow::before {
  background: url("../images/bg_flow.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

#reservation-flow .contents {
  --flow-base-height: 1762px;
  --flow-scale: 1;
  background: #fff;
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: var(--flow-base-height);
  margin: 0 auto; /* 中央寄せに変更 */
  min-width: 390px;
  max-width: 560px; /* パソコン等で大きくなりすぎないよう最大幅を追加 */
  overflow: hidden;
  padding: 0;
  width: clamp(
    390px,
    100vw,
    560px
  ); /* 画面幅に合わせて100%（最大560px）広がるように変更 */
}

.flow-steps {
  padding: 0 clamp(15px, calc(8.11vw - 15.41px), 30px);
}

@media screen and (min-width: 561px) {
  #reservation-flow .contents {
    --flow-scale: clamp(1, calc(100vw / 390px), 1.4358974359);
    height: clamp(var(--flow-base-height), 451.7948717949vw, 2529.0256410256px);
    margin: 0 auto;
    max-width: 560px;
    width: clamp(390px, 100vw, 560px);
  }
}

.flow-header {
  position: relative;
  text-align: center;
}

.flow-en {
  color: #f2d1d1;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 70px;
  font-weight: 400;
  left: -40px;
  line-height: 1;
  position: absolute;
  top: 0;
  transform: rotate(-17.35deg);
  transform-origin: left center;
  white-space: nowrap;
}

.flow-header h2 {
  color: #8e4f52;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 0;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 15px;
}

.flow-steps {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: none;
  margin: 0;
  position: absolute;
  width: 346px;
}

.flow-step {
  background: #fff;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  flex: 0 0 auto;
  margin: 0;
  position: relative;
  width: 346px;
}

.flow-step-02,
.flow-step-04,
.flow-step-06,
.flow-step-08 {
  background: #fefafa;
}

.flow-step-number {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  border-radius: 50vh;
  background: #fbeded;
  border: 1px solid #d87284;
}

.flow-step-number span {
  color: #d87284;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  font-family: "Shippori mincho", "serif";
}

.flow-step-text {
  left: 54px;
  position: absolute;
  top: 14px;
  width: 286px;
}

.flow-step h3 {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 8px 0 0;
  padding-bottom: 10px;
  border-bottom: 1px dotted #f2d1d1;
  white-space: nowrap;
}

.flow-step p {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  margin: 13px 0 0;
  white-space: nowrap;
  width: 286px;
}

.flow-step-04 p,
.flow-step-08 p {
  margin-top: 11px;
}

.flow-step-icon {
  object-fit: cover;
  position: absolute;
  pointer-events: none;
}

.flow-icon-counseling {
  height: 38px;
  right: 32px;
  top: 8px;
  width: 55px;
}

.flow-icon-check {
  height: 40px;
  right: 27px;
  top: 7px;
  width: 49px;
}

.flow-icon-design {
  height: 33px;
  right: 15px;
  top: 9px;
  width: 44px;
}

.flow-icon-treatment {
  height: 45px;
  right: 20px;
  top: 0;
  width: 60px;
}

.flow-icon-finish {
  height: 37px;
  right: 17px;
  top: 5px;
  width: 51px;
}

.flow-icon-care {
  height: 43px;
  right: 26px;
  top: 2px;
  width: 27px;
}

.flow-icon-payment {
  height: 30px;
  right: 20px;
  top: 9px;
  width: 66px;
}

.flow-arrow {
  flex: 0 0 auto;
  height: 13px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 17px;
}

.flow-arrow img {
  display: block;
  height: 13px;
  transform: rotate(180deg);
  width: 17px;
}

.flow-kids {
  background: #fbeded;
  border-radius: 107px 107px 0 0;
}

.flow-2stars {
  height: 30px;
  left: 19px;
  position: absolute;
  top: 7px;
  width: 27px;
  z-index: 10;
}

.flow-1star {
  height: 20px;
  right: 7px;
  position: absolute;
  top: 45px;
  width: 15px;
}

.flow-kids-en {
  color: #f2d1d1;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 70px;
  font-weight: 400;
  left: 0;
  line-height: 1;
  position: absolute;
  top: 15px;
  transform: rotate(-12.35deg);
  transform-origin: left center;
  white-space: nowrap;
  z-index: 1;
}

.flow-kids h2 {
  color: #8e4f52;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 0;
  text-align: center;
  width: fit-content;
}

.flow-kids-note {
  align-items: center;
  background: #fff;
  border-radius: 3px;
  display: flex;
  padding: 25px;
  justify-content: center;
  position: relative;
  width: 338px;
}

.flow-kids-note p {
  color: #d87284;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.flow-kids-note span {
  color: #e56178;
  font-weight: 700;
}

.flow-corner-left,
.flow-corner-right {
  height: 15px;
  position: absolute;
  width: 15px;
  z-index: 10;
}

.flow-corner-left {
  left: 10px;
  top: 10px;
}

.flow-corner-right {
  right: 10px;
  bottom: 10px;
  transform: rotate(360deg);
}

.flow-calendar {
  background: #fff;
  box-sizing: border-box;
  height: 425px;
  left: 30px;
  padding: 28px 20px 21px;
  position: absolute;
  top: 187px;
  width: 338px;
}

.flow-calendar-head {
  align-items: center;
  background: #ee6f9d;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 79px;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: 295px;
}

.flow-calendar-head::before,
.flow-calendar-head::after {
  color: #fff;
  content: "✦";
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 14px;
  line-height: 1;
  position: absolute;
  top: 17px;
}

.flow-calendar-head::before {
  left: 18px;
}

.flow-calendar-head::after {
  right: 20px;
}

.flow-calendar-head span {
  display: block;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.35em;
  line-height: 1;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.flow-calendar-head strong {
  display: block;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
}

.flow-calendar-weekdays,
.flow-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 0 auto;
  width: 295px;
}

.flow-calendar-weekdays {
  margin-top: 22px;
}

.flow-calendar-weekdays span {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.flow-calendar-days {
  margin-top: 26px;
  row-gap: 22px;
}

.flow-calendar-day {
  align-items: center;
  color: #8e4f52;
  display: flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 400;
  height: 22px;
  justify-content: center;
  line-height: 1;
  position: relative;
  text-align: center;
}

.flow-calendar-day.is-sunday {
  color: #e56178;
}

.flow-calendar-day.is-saturday {
  color: #7687bd;
}

.flow-calendar-day.is-open {
  color: #e56178;
  font-weight: 500;
}

.flow-calendar-day.is-open::before {
  border: 2px solid #e56178;
  border-radius: 50%;
  content: "";
  height: 28px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
}
#reservation-flow .contents {
  padding: 30px 0 0 !important;
}
/* 注意事項 (care-notesブロック)
---------------------------------------------------------------------------*/
#care-notes::before {
  background: url("../images/bg_notes.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

#care-notes .contents {
  --care-notes-base-height: 736px;
  --care-notes-scale: 1;
  background: #d87284;
  color: #fff;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: var(--care-notes-base-height);
  margin: 0 auto; /* 中央寄せに変更 */
  min-width: 390px;
  max-width: 560px; /* パソコン等で大きくなりすぎないよう最大幅を追加 */
  overflow: hidden;
  padding: 0;
  width: clamp(
    390px,
    100vw,
    560px
  ); /* 画面幅に合わせて100%（最大560px）広がるように変更 */
}

.care-notes-scale {
  height: var(--care-notes-base-height);
  position: relative;
  transform: scale(var(--care-notes-scale));
  transform-origin: top left;
  width: 390px;
}

@media screen and (min-width: 561px) {
  #care-notes .contents {
    --care-notes-scale: clamp(1, calc(100vw / 390px), 1.4358974359);
    height: clamp(
      var(--care-notes-base-height),
      188.7179487179vw,
      1056.4102564103px
    );
    margin: 0 auto;
    max-width: 560px;
    width: clamp(390px, 100vw, 560px);
  }
}

.care-notes-en {
  color: #f2d1d1;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 70px;
  font-weight: 400;
  left: -25px;
  line-height: 1;
  position: absolute;
  top: -20px;
  transform: rotate(-12.35deg);
  transform-origin: left center;
  white-space: nowrap;
}

.care-notes-header h2 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.care-notes-card {
  background: #fff;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  left: 22px;
  position: absolute;
  width: 346px;
}

.care-notes-card-makeup {
  height: 220px;
  top: 133px;
}

.care-notes-card-after {
  height: 229px;
  top: 368px;
}

.care-notes-card h3 {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.care-notes-line {
  height: 1px;
  left: 30px;
  position: absolute;
  top: 61px;
  width: 286px;
}

.care-notes-icon {
  object-fit: cover;
  position: absolute;
  pointer-events: none;
}

.care-notes-icon-makeup {
  height: auto;
  right: 10px;
  top: 0px;
  width: 80px;
}

.care-notes-icon-after {
  height: auto;
  right: 50px;
  top: 5px;
  width: 50px;
}

.care-notes-card ul {
  left: 23px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 75px;
  width: 286px;
}

.care-notes-card li {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
  padding-left: 18px;
  position: relative;
}

.care-notes-card li + li {
  margin-top: 18px;
}

.care-notes-card li::before {
  background: url("../images/care-note-dot.svg") center / contain no-repeat;
  content: "";
  height: 10px;
  left: 0;
  position: absolute;
  top: 3px;
  width: 10px;
}

.care-notes-leaf {
  height: auto;
  object-fit: cover;
  position: absolute;
  right: 2px;
  bottom: 5px;
  width: 45px;
}

.care-notes-more-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #fff;
  border-radius: 30px;
  color: #fff;
  display: flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 500;
  height: 55px;
  justify-content: center;
  left: 20px;
  letter-spacing: 0.05em;
  line-height: 1;
  position: absolute;
  text-decoration: none;
  top: 636px;
  width: 350px;
}

.care-notes-more-button img {
  height: 18px;
  object-fit: contain;
  position: absolute;
  right: 7px;
  top: 19px;
  width: 16px;
}

/* よくあるご質問 (faqブロック)
---------------------------------------------------------------------------*/
#faq::before {
  background: url("../images/bg_faq.jpg") no-repeat center center / cover; /*背景画像の読み込み*/
}

#faq .contents {
  --faq-base-height: 1228px;
  --faq-scale: 1;
  background: #fff;
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  height: var(--faq-base-height);
  margin: 0 auto; /* 中央寄せに変更 */
  min-width: 390px;
  max-width: 560px; /* パソコン等で大きくなりすぎないよう最大幅を追加 */
  overflow: hidden;
  padding: 0;
  width: clamp(
    390px,
    100vw,
    560px
  ); /* 画面幅に合わせて100%（最大560px）広がるように変更 */
}

.faq-scale {
  padding: 42px 0 0;
}

@media screen and (min-width: 561px) {
  #faq .contents {
    --faq-scale: clamp(1, calc(100vw / 390px), 1.4358974359);
    height: calc(var(--faq-base-height) * var(--faq-scale));
    margin: 0 auto;
    max-width: 560px;
    width: clamp(390px, 100vw, 560px);
  }
}

.faq-en {
  color: #f2d1d1;
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-size: 70px;
  font-weight: 400;
  left: -50px;
  line-height: 1;
  position: absolute;
  top: -30px;
  transform: rotate(-12.35deg);
  transform-origin: left center;
  white-space: nowrap;
}

.faq-header h2 {
  color: #8e4f52;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 0;
  text-align: center;
}

.faq-tabs {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 165px);
  margin: 21px auto 0;
}

.faq-tab {
  align-items: center;
  background: #fff;
  border: 1px solid #e8a989;
  border-radius: 9px;
  box-shadow: none;
  color: #8e4f52;
  cursor: pointer;
  display: grid;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 13px;
  font-weight: 700;
  grid-template-columns: 53px 1fr;
  height: 73px;
  letter-spacing: 0.03em;
  line-height: 1.45;
  padding: 0 8px;
  text-align: center;
}

.faq-tab.is-active {
  background: linear-gradient(135deg, #df6172 0%, #d87284 100%);
  border-color: #d87284;
  color: #fff;
}

.faq-tab-icon {
  background-image: url("../images/faq-category-source.png");
  background-repeat: no-repeat;
  background-size: 368px 167px;
  display: block;
  justify-self: center;
  pointer-events: none;
}

.faq-icon-eyelash {
  background-position: -18px -19px;
  height: 39px;
  width: 58px;
}

.faq-icon-eyebrow {
  background-position: -205px -28px;
  height: 35px;
  width: 60px;
}

.faq-icon-kids {
  background-position: -19px -98px;
  height: 42px;
  width: 50px;
}

.faq-icon-other {
  background-position: -216px -94px;
  height: 45px;
  width: 58px;
}

.faq-panels {
  margin-top: 61px;
}

.faq-panel {
  display: none;
}

.faq-panel.is-active {
  display: block;
}

.faq-panel-heading {
  text-align: center;
}

.faq-panel-heading h3 {
  color: #8e4f52;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.45;
  margin: 0;
}

.faq-panel-heading img {
  display: block;
  height: 25px;
  margin: 17px auto 0;
  object-fit: cover;
  width: 134px;
}

.faq-list {
  margin: 30px auto 0;
  width: 346px;
}

.faq-item {
  background: #fefafa;
  border: 1px solid #f2d1d1;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(216, 114, 132, 0.1);
  overflow: hidden;
}

.faq-item + .faq-item {
  margin-top: 10px;
}

.faq-question {
  align-items: center;
  background: transparent;
  border: 0;
  color: #8e4f52;
  cursor: pointer;
  display: grid;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 500;
  grid-template-columns: 30px 1fr 15px;
  letter-spacing: 0.03em;
  line-height: 1.55;
  min-height: 62px;
  padding: 14px 10px 12px 8px;
  text-align: left;
  width: 100%;
}

.faq-question > span:nth-child(2) {
  padding: 1px 8px 0 8px;
}

.faq-mark {
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 500;
  height: 30px;
  justify-content: center;
  line-height: 29px;
  text-align: center;
  width: 30px;
}

.faq-mark-q {
  background: #e96383;
}

.faq-mark-a {
  background: #7faa94;
}

.faq-toggle {
  height: 15px;
  margin-top: 8px;
  position: relative;
  width: 15px;
}

.faq-toggle::before,
.faq-toggle::after {
  background: #f2d1d1;
  content: "";
  left: 0;
  position: absolute;
  top: 6px;
}

.faq-toggle::before {
  height: 3px;
  width: 15px;
}

.faq-toggle::after {
  height: 15px;
  left: 6px;
  top: 0;
  width: 3px;
}

.faq-item.is-open .faq-toggle::after {
  opacity: 0;
}

.faq-answer {
  border-top: 1px dotted #f2d1d1;
  display: none;
  grid-template-columns: 30px 1fr;
  margin: 0 8px;
  padding: 18px 8px 18px 0;
}

.faq-item.is-open .faq-answer {
  display: grid;
}

.faq-answer p {
  color: #8e4f52;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 2px 0 0;
  padding-left: 11px;
}

.faq-contact {
  margin: 48px auto 0;
  text-align: center;
  width: 350px;
}

.faq-contact p {
  color: #8e4f52;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.45;
  margin: 0;
  position: relative;
  width: 312px;
}

.faq-contact p::before,
.faq-contact p::after {
  border-top: 2px dotted #d87284;
  content: "";
  height: 18px;
  position: absolute;
  top: 23px;
  width: 42px;
}

.faq-contact p::before {
  left: -15px;
  transform: rotate(50deg);
}

.faq-contact p::after {
  right: -15px;
  transform: rotate(-50deg);
}

.faq-line-button {
  align-items: center;
  background: #d87284;
  border-radius: 30px;
  color: #fff;
  display: flex;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 700;
  height: 55px;
  justify-content: center;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 16px;
  position: relative;
  text-decoration: none;
  width: 350px;
}

.faq-line-icon {
  height: 32px;
  left: 7px;
  object-fit: contain;
  position: absolute;
  top: 12px;
  width: 32px;
}

.arrow-r {
  height: 18px;
  object-fit: contain;
  position: absolute;
  right: 7px;
  top: 19px;
  width: 16px;
}

/* ボタン全体のスタイルと固定配置の設定 */
.bottom-reservation-btn {
  position: fixed;
  bottom: 10px; /* 画面の一番下からの距離 */
  left: 50%; /* 左から50%の位置に配置 */
  transform: translateX(-50%); /* 自身の幅の半分だけ左に戻して中央揃えにする */
  border: 3px solid #fff;
  width: 95%;
  max-width: 500px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 24px;
  background: linear-gradient(135deg, #ff9cae 0%, #e86782 100%);
  border-radius: 50px; /* 完全に丸い角 */
  box-shadow: 0 4px 12px rgba(232, 103, 130, 0.3); /* ほんのり影をつける */
  font-family: "Shippori mincho", serif;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none; /* リンクの下線を消す */
  font-size: 22px;
  letter-spacing: 5px; /* 文字の間隔を少し開けて読みやすく */
}

/* カレンダーアイコンの大きさ */
.bottom-reservation-btn .icon-calendar {
  width: 30px;
  height: 28px;
}

/* 中央のテキストを真ん中に配置するための設定 */
.bottom-reservation-btn .btn-text {
  flex-grow: 1;
  text-align: center;
}

/* 右側の矢印アイコンの大きさ */
.bottom-reservation-btn .icon-arrow .arrow-r {
  width: 20px;
  height: 25px;
  right: 15px;
}

/* Figma生成レイアウトの正規化
---------------------------------------------------------------------------*/
#features .contents,
#worries .contents,
#reasons .contents,
#with-kids .contents,
#menu-price .contents,
#case-studies .contents,
#customer-voices .contents,
#staff .contents,
#reservation-flow .contents,
#care-notes .contents,
#faq .contents {
  box-sizing: border-box;
  height: auto;
  min-width: 0;
  overflow: hidden;
  padding: 40px clamp(15px, calc(8.11vw - 15.41px), 30px);
  width: min(100%, 560px);
}

:where(
  .features-scale,
  .worries-scale,
  .reasons-scale,
  .kids-scale,
  .price-scale,
  .case-scale,
  .voices-scale,
  .staff-scale,
  .flow-scale,
  .care-notes-scale,
  .faq-scale
) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: auto;
  transform: none;
  width: 100%;
}

.features-scale,
.worries-scale,
.reasons-scale,
.kids-scale,
.price-scale,
.case-scale,
.voices-scale,
.staff-scale,
.flow-scale,
.care-notes-scale,
.faq-scale {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: auto;
  position: static;
  transform: none;
  width: 100%;
}

:where(
    #features,
    #worries,
    #reasons,
    #with-kids,
    #menu-price,
    #case-studies,
    #customer-voices,
    #staff,
    #reservation-flow,
    #care-notes,
    #faq
  )
  :where(
    .features-header,
    .worries-header,
    .reasons-header,
    .kids-header,
    .price-header,
    .case-header,
    .voices-header,
    .staff-header,
    .flow-header,
    .care-notes-header,
    .faq-header
  ) {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: auto;
  position: relative;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}

:where(
  .features-en,
  .worries-en,
  .reasons-en,
  .kids-en,
  .price-en,
  .case-en,
  .voices-en,
  .staff-en,
  .flow-en,
  .care-notes-en,
  .faq-en
) {
  align-self: flex-start;
  left: auto;
  margin: 0 0 -22px;
  position: static;
  top: auto;
}

:where(
    .features-header,
    .worries-header,
    .reasons-header,
    .kids-header,
    .price-header,
    .case-header,
    .voices-header,
    .staff-header,
    .flow-header,
    .care-notes-header,
    .faq-header
  )
  h2 {
  left: auto;
  padding-top: 0;
  position: relative;
  top: auto;
  width: 100%;
}

:where(
    #features,
    #worries,
    #reasons,
    #with-kids,
    #menu-price,
    #case-studies,
    #customer-voices,
    #staff,
    #reservation-flow,
    #care-notes,
    #faq
  )
  :where(p, span, dd, h3, li) {
  white-space: normal;
}

.features-review {
  box-sizing: border-box;
  height: auto;
  left: auto;
  min-height: 172px;
  padding: 20px 0 25px;
  position: relative;
  top: auto;
  width: 100%;
}

.features-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  left: auto;
  position: static;
  top: auto;
  width: 100%;
}

.features-item {
  box-sizing: border-box;
  height: auto;
  min-height: 145px;
  width: auto;
}

.worries-list {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}

.worries-list li {
  height: auto;
  min-height: 50px;
}

.worries-message {
  box-sizing: border-box;
  margin-top: 8px;
  width: 100%;
}

.reasons-card {
  box-sizing: border-box;
  margin: 0;
  padding: 2em 1em;
  position: relative;
  width: 100%;
}

.reasons-card h3,
.reasons-card-photo-right h3 {
  padding-left: 0;
}

.reasons-line {
  max-width: 100%;
}

.reasons-body,
.reasons-card-photo-right .reasons-body {
  display: flex;
  gap: 14px;
  grid-template-columns: minmax(116px, 34%) minmax(0, 1fr);
}

.reasons-card-photo-right .reasons-body .reasons-text {
  order: 2;
}

.reasons-card-photo-right .reasons-body .reasons-photo {
  order: 1;
}

.reasons-photo {
  width: 100%;
}

.reasons-photo img {
  height: 100%;
  object-fit: cover;
  position: static;
  width: 100%;
}

.reasons-note {
  height: auto;
  min-height: 48px;
}

.kids-scale {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kids-header,
.kids-lead,
.kids-main-photo,
.kids-steps,
.kids-notice,
.kids-consult,
.kids-line-button {
  grid-column: 1 / -1;
}

.kids-title-line,
.case-heading-line {
  display: block;
  left: auto;
  margin: 10px auto 0;
  position: static;
  top: auto;
}

.kids-lead,
.case-lead {
  left: auto;
  position: static;
  top: auto;
  width: 100%;
}

.kids-main-photo {
  height: auto;
  left: auto;
  position: static;
  top: auto;
  width: 100%;
}

.kids-main-photo img {
  aspect-ratio: 47 / 20;
  display: block;
}

.kids-steps {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
  left: auto;
  padding: 28px 16px 16px;
  position: relative;
  top: auto;
  width: 100%;
}

.kids-steps-label {
  left: 50%;
  position: absolute;
  top: -16px;
  transform: translateX(-50%);
}

.kids-step {
  align-items: center;
  left: auto;
  min-height: 38px;
  position: relative;
  top: auto;
  width: 100%;
}

.kids-step-line {
  display: block;
  left: auto;
  position: static;
  top: auto;
  width: 100%;
}

.kids-step-img {
  margin-left: auto;
  position: static;
}

.kids-card p {
  left: auto;
  margin: 0 14px 14px;
  position: static;
  top: auto;
  width: auto;
}

.kids-notice {
  box-sizing: border-box;
  height: auto;
  left: auto;
  min-height: 48px;
  position: static;
  top: auto;
  width: 100%;
}

.kids-consult {
  left: auto;
  position: static;
  top: auto;
  width: 100%;
}

.kids-line-button,
.price-more-button,
.case-more-button,
.voices-more-button,
.care-notes-more-button,
.faq-line-button {
  box-sizing: border-box;
  left: auto;
  margin: 0 auto;
  max-width: 350px;
  position: relative;
  top: auto;
  width: 100%;
}

.price-photo,
.price-info,
.price-detail,
.price-note,
.price-reserve-button,
.price-bottom-note {
  left: auto;
  position: static;
  top: auto;
}

.price-photo {
  grid-column: 1;
  grid-row: 1;
}

.price-line {
  width: 100%;
}

.price-detail,
.price-note,
.price-reserve-button,
.price-bottom-note {
  grid-column: 1 / -1;
}

.price-detail {
  gap: 6px;
}

.price-detail li {
  grid-template-columns: 20px auto minmax(0, 1fr);
  height: auto;
  width: 100%;
}

.price-note {
  text-align: center;
}

.price-reserve-button {
  width: 100%;
}

.price-reserve-button img,
.case-more-button img,
.voices-more-button img,
.care-notes-more-button img,
.arrow-r,
.kids-forward {
  position: absolute;
}

.price-bottom-note,
.case-bottom-note {
  text-align: center;
  width: 100%;
}

.case-slider {
  height: auto;
  left: auto;
  overflow: hidden;
  position: relative;
  top: auto;
  width: 100%;
}

.case-track {
  display: flex;
  height: auto;
  width: auto;
}

.case-slide {
  flex: 0 0 100%;
  height: auto;
  width: 100%;
}

.case-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
  left: auto;
  margin: 0 auto;
  padding: 12px 10px 10px;
  position: relative;
  top: auto;
  width: calc(100% - 2px);
}

.case-title-row {
  align-items: center;
  display: flex;
  gap: 22px;
  min-height: 28px;
}

.case-label,
.case-title-row h3,
.case-photos,
.case-photo,
.case-photo-arrow,
.case-details,
.case-comment {
  left: auto;
  position: static;
  top: auto;
}

.case-title-row h3 {
  flex: 1;
}

.case-photos {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  height: auto;
  width: 100%;
}

.case-photo {
  height: auto;
  width: 100%;
}

.case-photo span,
.case-photo img {
  width: 100%;
}

.case-photo img {
  aspect-ratio: 160 / 111;
  height: auto;
}

.case-photo-arrow {
  transform: rotate(90deg);
}

.case-details {
  display: grid;
  gap: 9px;
  width: 100%;
}

.case-details div {
  height: auto;
  padding-bottom: 9px;
}

.case-comment {
  box-sizing: border-box;
  height: auto;
  padding: 0 10px 12px;
  width: 100%;
}

.case-comment-title {
  width: 100%;
}

.case-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.case-nav-prev {
  left: 0;
  transform: translateY(-50%) rotate(180deg);
}

.case-nav-next {
  right: 0;
}

.voices-summary {
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  height: auto;
  justify-items: center;
  left: auto;
  padding: 18px 16px;
  position: relative;
  top: auto;
  width: 100%;
}

.voices-google,
.voices-score,
.voices-heading-line,
.voices-stars,
.voices-total,
.voices-tabs,
.voices-panels,
.voice-card,
.voice-card h3,
.voice-body,
.voice-avatar,
.voice-category,
.voice-stars,
.voice-body p {
  left: auto;
  position: static;
  top: auto;
}

.voices-laurel {
  top: 18px;
}

.voices-heading-line {
  width: min(220px, 80%);
}

.voices-tabs {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.voices-panels {
  height: auto;
  width: 100%;
}

.voices-panel.is-active {
  display: grid;
  gap: 10px;
}

.voice-card {
  box-sizing: border-box;
  display: grid;
  gap: 8px 10px;
  grid-template-columns: 67px minmax(0, 1fr);
  height: auto;
  min-height: 162px;
  padding: 18px 15px 20px;
  width: 100%;
  position: relative;
}

.voice-card h3 {
  grid-column: 1 / -1;
  height: auto;
  line-height: 1.5;
  padding: 0 0 8px 40px;
  width: auto;
}

.voice-body {
  display: contents;
}

.voice-avatar {
  grid-column: 1;
  grid-row: 2 / span 2;
}

.voice-category,
.voice-card .voice-stars,
.voice-body p {
  grid-column: 2;
}

.voice-body p {
  line-height: 1.5;
  width: auto;
}

.staff-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: auto;
  left: auto;
  padding: 16px 12px 12px;
  position: static;
  top: auto;
  width: 100%;
}

.staff-role,
.staff-photo,
.staff-divider,
.staff-profile,
.staff-profile dt,
.staff-profile dd,
.staff-care,
.staff-message,
.staff-message h3,
.staff-message p {
  left: auto;
  position: static;
  top: auto;
}

.staff-role {
  align-self: center;
}

.staff-photo {
  align-self: center;
}

.staff-divider {
  width: 100%;
}

.staff-profile {
  width: 100%;
}

.staff-profile-row {
  align-items: flex-start;
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 68px minmax(0, 1fr);
  height: auto;
  padding-bottom: 10px;
}

.staff-care,
.staff-message {
  box-sizing: border-box;
  height: auto;
  width: 100%;
}

.staff-message {
  padding: 0 12px 12px;
}

.flow-steps {
  left: auto;
  position: static;
  top: auto;
  width: 100%;
}

.flow-step {
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) 64px;
  height: auto;
  min-height: 94px;
  padding: 12px 10px;
  width: 100%;
}

.flow-step-number,
.flow-step-text,
.flow-step-icon {
  left: auto;
  position: static;
  right: auto;
  top: auto;
}

.flow-step-text {
  width: auto;
}

.flow-step-line,
.flow-step p {
  width: 100%;
}

.flow-step-icon {
  align-self: self-start;
  justify-self: right;
  max-width: 64px;
}

.flow-kids {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
  left: auto;
  padding: 34px 20px 28px;
  position: relative;
  top: auto;
  width: 100%;
}

.flow-calendar {
  left: auto;
  position: static;
  top: auto;
}

.flow-kids-note,
.flow-calendar {
  width: 100%;
}
.flow-kids-header {
  position: relative;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.flow-calendar {
  box-sizing: border-box;
  height: auto;
}

.flow-calendar-head,
.flow-calendar-weekdays,
.flow-calendar-days {
  width: 100%;
}

.care-notes-card {
  box-sizing: border-box;
  height: auto;
  left: auto;
  min-height: 220px;
  padding: 20px 22px;
  position: relative;
  top: auto;
  width: 100%;
}

.care-notes-line,
.care-notes-card ul {
  left: auto;
  position: static;
  top: auto;
  width: 100%;
}

.care-notes-line {
  margin: 14px 0;
}

.care-notes-card ul {
  display: grid;
  gap: 18px;
}

.care-notes-card li + li {
  margin-top: 0;
}

@media screen and (max-width: 520px) {
  :where(
      #features,
      #worries,
      #reasons,
      #with-kids,
      #menu-price,
      #case-studies,
      #customer-voices,
      #staff,
      #reservation-flow,
      #care-notes,
      #faq
    )
    .contents {
    padding-left: 16px;
    padding-right: 16px;
  }

  .kids-scale {
    grid-template-columns: 1fr;
  }

  .features-review .review-top {
    flex-wrap: wrap;
    gap: 2px 8px;
  }

  .features-review .review-score,
  .voices-score {
    font-size: 65px;
  }

  .reasons-body,
  .reasons-card-photo-right .reasons-body,
  .price-card {
    grid-template-columns: 1fr;
  }

  .reasons-card-photo-right .reasons-body .reasons-text,
  .reasons-card-photo-right .reasons-body .reasons-photo {
    order: initial;
  }

  .price-photo {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }

  .price-info {
    grid-column: 1;
    grid-row: auto;
    text-align: center;
  }

  .case-photos {
    grid-template-columns: 1fr;
  }

  .case-photo-arrow {
    justify-self: center;
    transform: rotate(180deg);
  }

  .voice-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }
}

/* =========================================
   波線ヘッダーのデザイン
========================================= */

.wave-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 500px;
  z-index: 100;
  color: #8f545c;
  display: none;
}

.wave-header-content {
  min-height: 66px;
  background: linear-gradient(90deg, #fff 0%, #fff 48%, #fff8f8 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 58px 0 23px;
  position: relative;
  z-index: 2;
}

.header-logo {
  display: block;
  width: 132px;
  line-height: 1;
  text-decoration: none;
  flex: 0 0 auto;
}

.header-logo-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.header-logo-main {
  fill: #8f4f59;
  font-family: "Times New Roman", "Shippori Mincho", serif;
  font-size: 37.5px;
  font-weight: 400;
}

.header-logo-plus {
  fill: #dd7188;
  font-family: "Times New Roman", "Shippori Mincho", serif;
  font-size: 29px;
  font-weight: 400;
}

.header-logo-kana {
  fill: #d78a94;
  font-family: "Shippori Mincho", serif;
  font-size: 9px;
  font-weight: 600;
}

.header-logo-sub {
  fill: #b96f78;
  font-family: "Times New Roman", "Shippori Mincho", serif;
  font-size: 9px;
  font-weight: 700;
}

.wave-shape {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: -1px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 0 rgba(226, 193, 198, 0.15));
}

.wave-fill {
  fill: #fff;
}

.header-reserve-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 156px;
  min-height: 45px;
  background: linear-gradient(180deg, #f497a8 0%, #e97991 100%);
  color: #ffffff;
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  font-family: "Shippori Mincho", serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.48),
    0 5px 12px rgba(206, 91, 113, 0.2);
  flex: 0 0 auto;
}

.header-reserve-btn svg {
  width: 21px;
  height: 21px;
  margin-right: 8px;
  stroke-width: 1.55;
}

@media screen and (max-width: 500px) {
  .wave-header {
    display: block;
  }

  .wave-header-content {
    min-height: 66px;
    padding: 14px 58px 0 23px;
  }

  .main-visual-img {
    margin-top: 0;
  }
}

@media screen and (max-width: 374px) {
  .wave-header-content {
    padding-left: 19px;
    padding-right: 52px;
  }

  .header-logo {
    width: 123px;
  }

  .header-reserve-btn {
    width: 146px;
    min-height: 42px;
    font-size: 12.8px;
  }

  .header-reserve-btn svg {
    width: 19px;
    height: 19px;
    margin-right: 7px;
  }
}