@charset "UTF-8";

html {
  font-size: 62.5%;
  /* 基準が10px  */
}
html {
  /* 移動が速いのでコメントアウト 0630*/
  /* scroll-behavior: smooth; */

  scroll-padding-top: 155px;
  /* ヘッダーをposition: fixedで画面上部に固定している場合、
  スクロール先がヘッダーの裏に隠れてしまうので高さを調節。 */
}

body {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  font-size: 1.6rem;
  /* 16px */
  background-color: #f4f2ef;
  color: #2a2640;
  line-height: 1.5;
  overflow-x: hidden;
  /* 画面横のはみ出しを消す 追記*/
}
/* img全てを命名 */
/* 全てのimgがはみ出すことがなくなる */
img {
  max-width: 100%;
  height: auto;
}

/* h2全体を命名 */
section h2 {
  font-size: 48px;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 70px;
  color: #b7a993;
  font-family: "Yuji Syuku", serif;
}

@media (max-width: 768px) {
  section h2 {
    font-size: 30px;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 50px;
  }
  /* h2 title とpタグの間隔狭めた */
  h2.title {
    margin-bottom: 40px;
  }
}

/* ========== header ========== */
/* ===== HEADER ===== */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  height: 155px;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  padding: 16px 30px;
  margin: 0 auto;
  max-width: 1440px;
}

header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2a2640;
  letter-spacing: 0.1em;
}

.burger__nav {
  display: flex;
  gap: 32px;
  list-style: none;
  flex-wrap: wrap;
  /* navが改行されるように追記 */
}

.burger__nav li a {
  color: #2a2640;
  /* font-size: 1.5rem; */
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}

.burger__nav li a:hover {
  color: #b7a993;
}

/* ロゴ */
header h1 {
  flex-shrink: 0;
}

header h1 img {
  height: 86px;
  width: 100%;
  display: block;
}

/* ===== PC ナビ（カンプではハンバーガーのみなので非表示） ===== */
header nav {
  display: none;
}

/* ===== ハンバーガーボタン ===== */

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  /* 修正 */
  padding: 6px;
  z-index: 200;
}

.hamburger span {
  display: block;
  width: 22px;
  /* 1.5px にしていたので真ん中の線だけ細かった。pxが整数にすること！*/
  height: 2px;
  background-color: #000;
  border-radius: 2px;
  /* 動きが早いので  0.6sで調整*/
  transition:
    transform 1s ease,
    opacity 0.6s ease;
}

/* × アニメーション */
.hamburger.is-checked span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.hamburger.is-checked span:nth-child(2) {
  /* 0620補正　opacity: 0; の記述safariだと真ん中の線がうまく出ないので削除し下記記述*/
  background-color: transparent;
}
.hamburger.is-checked span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ===== ドロワーメニュー ===== */

.nav-drawer {
  position: fixed;
  /* top:0; */
  top: 92px;
  bottom: 0;

  height: 100vh;
  width: 100%;

  left: 150vw;
  /* 100vwを修正 0627*/
  width: 100vw;
  /* left: -300px; */
  /* right: -100%; */

  /* width: 300px; */
  /* max-width: 300px; */
  /* height: calc(100vh - 92px); */
  height: 900px;

  z-index: 9999;

  /* 下記n3点セットnav-drawer::beforeに移動 */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9)),
    url("../img/sakura_city.jpg");
  background-size: cover;
  background-position: center;
  padding: 80px 32px 40px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
  /* 0.35秒は少し速いので 修正*/
  transition: left 0.6s ease;
  z-index: 9999 !important;
}

@media (max-width: 768px) {
  /* 3. 各メニュー項目（li）の枠線調整 */
  .burger__nav li {
    width: 100%;
    /* 上品で細い区切り線（背景より少しだけ濃いピンクベージュ） */
    border-bottom: 1px solid #b7a993;
  }
  .burger__nav li:first-child {
    /* 一番上の項目の上にも線を引く*/
    border-top: 1px solid #b7a993;
  }

  .burger__nav {
    display: flex;
    flex-direction: column; /* 縦並びにする */
    gap: 0; /* gapではなくpaddingで高さを調整するので0に */
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  /* 4. リンクボタン（aタグ）の文字と余白の調整 */
  .burger__nav li a {
    display: block;
    width: 100%;
    padding: 22px 0; /* 上下にしっかり余白を取って押しやすく */
    text-align: center; /* 文字を完全中央に */
    color: #2a2640; /* 元のヘッダーの綺麗なお色を継承 */
    font-size: 1.5rem; /* スマホで読みやすいサイズ感 */
    font-weight: 500; /* 太すぎず細すぎず、上品な太さに */
    letter-spacing: 0.15em; /* 文字の間隔を広げて高級感を出す */
    text-decoration: none;
    transition: background-color 0.3s;
  }

  /* タップされた（ホバーされた）時の優しい演出 */
  .burger__nav li a:hover,
  .burger__nav li a:active {
    background-color: rgba(255, 255, 255, 0.4);
    color: #b7a993;
  }
}
/* 原因は #js-drawer-content というIDセレクタが .nav-drawer クラスを上書きしていたことでした。IDセレクタはクラスセレクタより優先度が高いため、.nav-drawer の設定が全て無効になっていました。 */

/* linear-gradientにしたため.nav-drawer::before 削除 */
/* .nav-drawer::before {
  content: "";
  position: absolute;
  inset: 0;

  background-color: rgba(255, 255, 255, 0.3);
  z-index: -1;
} */

.nav-drawer.is-checked {
  /* !important; ドロワーが開いているとき固定 にしたがw388〜764pxの時右端が見切れるので以下に修正*/
  /* 画面幅 − ドロワーの幅」= ドロワーがちょうど右端に収まる位置 */
  /* 画面幅が何pxでも、ドロワーが右端にぴったり合うように自動計算されます。 */
  /* left: calc(100vw - 300px) !important; */
  left: 0 !important;
}

.nav-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-drawer ul li a {
  display: block;
  font-family: "Inder", sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #2a2640;
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid #e8e8e8;
  transition: color 0.2s;
  /* background-color: #f7eae3; */
  /* 0619修正 */
  text-align: center;
  transition: transform 0.2s ease;
}

.nav-drawer ul li a:hover {
  color: #999;
  transform: scale(1.05);
  cursor: pointer;
}

/* pc sizeでnavが消えたので修正1300px以上で .hamburger非表示　header nav固定*/

@media (min-width: 1300px) {
  header nav {
    display: block;
  }
  .hamburger {
    display: none;
  }

  .burger-menu-container {
    display: none;
  }
}

.slider {
  /* height: 100vh; が邪魔するのでコメントアウト0625修正*/
  margin-inline: auto;
  overflow: hidden; /* 画像がはみ出ないようにする */
  width: 100vw;
}
.slider img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;
  /* 位置の調節必要！ */
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}

.mv {
  position: relative;
}

/* ===========================

   /* mv .title_box  */

/* =========================== */

.mv .title_box {
  position: absolute;
  left: 0;
  top: 15%;

  /* 文字の高さ調節 */
  z-index: 1;
  text-align: center;
  font-size: 2em;
  /* font-style: ; */
  width: 100%;
  color: #dfe6e9;
}

.mv .title_box .title {
  /* color: #dfe6e9;
  letter-spacing: 5px;
  text-shadow: 5px 5px 15px #473434; */
  /* 横　縦　ぼかし */
}

.mv .title_box .title {
  /* .mv .title_box のfont-size clampで上書き子のpにもかかる0626*/
  font-size: clamp(30px, 3.5vw, 48px);
  /* font-size: clamp(1.875rem, 3.5vw, 3rem); */

  color: #dfe6e9;
  letter-spacing: 5px;
  text-shadow: 5px 3px 10px #27589c;
  /* 横　縦　ぼかし */
}

.mv .title_box p {
  /* letter-spacing: 5px;
  text-shadow: 10px 7px 10px #473434; */
  /* 横　縦　ぼかしの幅の強め*/
}

.mv .title_box p {
  letter-spacing: 5px;
  text-shadow: 2px 1px 6px #27589c;
  /* 横　縦　ぼかしの幅の強め*/
}

/* 変更後 */
.slick-img img {
  display: block;
  width: 100%;
}
/* .slick-img img {

  height: auto;
  aspect-ratio: 4/3;

}  */

/* .pc / .sp クラスが不要になるので削除 */
/* .slick-img .pc {
  display: block;
}

.slick-img .sp {
  display: none;
}

.title_box .sp {
  display: none;
} */

/* /.slick-img .sp  .slick-img .sp 
比率計算3：4＝　100：133なので
    aspect-ratio: 3/4;と*height: 133vw;
    width: 100%;で調整/
  }  height: 720px;
    width: 100vw;は消去*/

@media (max-width: 768px) {
  .slider {
    height: 133vw;
    width: 100%;
    padding: 0 0px;
  }

  .mv .title_box {
    font-size: 1em;
    top: 15%;
  }

  /* 変更後 */
  .slick-img img {
    aspect-ratio: 3/4;
  }

  /* .title_box .sp {
    display: block;
  }

  .slick-img .pc {
    display: none;
  }

  .slick-img .sp {
    aspect-ratio: 3/4;
    display: block;
  } */

  /* 縦長様sp用mv画像なので今回不使用コメントアウト */
  /* .slick-img img {
    height: 720px;
    width: 100vw;
    margin-left: -20px;
    padding: 0 0px;
  }  */
}

/* ===== タブレット (768px〜1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .slider {
    /* height: 60vw;  */
    /* 横長画像に合わせて調整 */
  }
  /* .slick-img .pc { display: block; }
  .slick-img .sp { display: none; } */
  .mv .title_box {
    font-size: 1.2em; /* SPより少し大きく */
    top: 10%;
  }
}

/* ===========================
   レイアウトコンテナ
   =========================== */
.l-container {
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 0px;
  /* 608 0pxに修正 */
}
/* burger__navがclassなのでul不要で下記 */
.burger__nav li a {
  display: block;
  width: 160px;
  height: 40px;
  background: #f8eeee;
  /* 文字のボタアン中央寄せ下記3行 */
  display: flex;
  justify-content: center; /* 左右の中央揃え */
  align-items: center;
}

/* #js-drawer-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 9999;
} */
/* #js-drawer-contentを削除しました */
/* .nav-drawerより優先してうちけして開かなかった為 */

/* header sp size */
/* 中間サイズでheader-navだけ残るのでがmax-width: 1300px)に指定 */

@media (max-width: 1300px) {
  header {
    padding: 16px;
    width: 100%;
    height: auto;
  }
  header h1 img {
    height: 61px;
    width: auto;
    display: block;
  }

  .burger__nav {
    flex-direction: column;
    gap: 16px;
  }

  .burger__nav li a {
    width: 100%;
    height: auto;
    padding: 12px 0;
    display: none;
  }
}

/* .mv {
  background-image: url("../img/maru1\ 1.png");
  background-size: cover;
  background-position: center;
  height: auto;
  width: 100vw;

  height: 720px;
} */
/* margin-left: -20px; l-containerの外に出したので外した*/

/* @media (max-width: 768px) {
  .mv {
    background-image: url("../img/mv.jpg");
    background-size: cover;
    background-position: center left;
    height: 720px;
    width: 100vw;


    padding: 0 0px;
  }
} */

/* margin-left: -20px; */
/* paddingの分だけ左に寄せる */

/* ===================================================
   共通・レイアウト構造
   =================================================== */

.l-container {
  max-width: 1160px; /* 1120px から 1160px に変更 */
  margin: 0 auto; /* 画面中央に寄せる */
  padding: 0 20px; /* 画面端にピッタリくっつかないための左右の余白 */
}

/* .shop__intro{
  padding: 60px 0; 
    font-family: "Yuji Syuku", serif; 
    color: #2A2640; 
}
 */

/* ===================================================
   PC用の記述
   =================================================== */
.shop__intro {
  padding: 60px 0;
  /* ↓【ベース設定】基本、全体が「Noto Serif JP」で「#2A2640」になります */
  font-family: "Noto Serif JP", serif;
  color: #2a2640;
}

.shop__intro__header h2 {
  text-align: center;
  margin-bottom: 40px;
  padding-top: 100px;
  font-family: "Yuji Syuku", serif;
  color: #2a2640;
}

/* 【h2だけ！】フォントを固有の「Yuji Syuku」に上書きします（色はベースの#2A2640を継承） */
.shop__intro__header h2 {
  font-family: "Yuji Syuku", serif;
  font-size: 40px;
  letter-spacing: 0.1em;
  margin-bottom: 15px;
  display: inline-block;
}

/* PCサイズでの表示・非表示の切り替えスイッチ */
.sp-only {
  display: none; /* 改行しない */
}
.pc-only {
  display: inline; /* 「・」を表示する */
}
/* 【このpタグだけ！】ベースの色のまま、黄金色（#B7A993）に上書きします（フォントはNoto Serif JPを継承） */
.shop__intro__header p {
  color: #b7a993; /* 黄金色 */
  font-size: 32px;
  line-height: 1.8;
}
.shop__intro__header {
  text-align: center;
}

/* 横並びのレイアウト */
.shop__intro__content {
  margin-top: 126px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 40px;
}

.shop__intro__img {
  flex: 1;
  max-width: 45%;
}

.shop__intro__img img {
  width: 100%;
  height: auto;
  display: block;
}

.shop__flow {
  flex: 1;
  max-width: 50%;
  margin-left: 120px;
}

/* 「施術の流れ」の見出し（自動で Noto Serif JP / #2A2640 になります） */
.shop__flow h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 「施術の流れ」の本文（自動で Noto Serif JP / #2A2640 になります） */
.shop__flow p {
  font-size: 20px;
  line-height: 250%;
}

/* 下部のマッサージ画像 */
.shop__massage__img {
  text-align: center;
  margin-top: 78px;
}

.shop__massage__img img {
  max-width: 432px;
  width: 100%;
  height: auto;
  padding-bottom: 130px;
}

/* ===================================================
   📱 SP（スマホ）用
   =================================================== */
@media (max-width: 768px) {
  .l-container {
    padding: 0 16px; /* スマホの時は左右余白を16pxに固定 */
  }

  .shop__intro {
    padding: 130px 0 40px;
  }

  /* スマホサイズでの表示・非表示の切り替えスイッチ */
  .sp-only {
    display: inline; /* 改行を発動させる */
  }
  .pc-only {
    display: none; /* 「・」を消す */
  }

  .shop__intro__header {
    padding: 0 0 40px; /* 上の余白を大きくして、下の余白を小さく */
    text-align: center;
    margin-bottom: 30px;
  }
  /* 見出し周りの文字サイズ調整 */
  .shop__intro__header h2 {
    /* font-size: 24px; 横幅がはみ出るので*/
    font-size: 21px;
    line-height: 1.4;
    display: block; /* スマホでは幅いっぱいに広げる */
    padding: 0;
  }

  .shop__intro__header p {
    line-height: 1.5;
    font-size: 15px;
    /* 横幅はみ出るので */
    font-weight: bold;
  }

  /* 横並びを解除して、縦一列・中央寄せに */
  .shop__intro__content {
    flex-direction: column-reverse; /* 画像を下に、テキストを上に */

    align-items: center; /* 要素を中央に集める */

    gap: 30px; /* ソファ写真とテキストの間の縦の隙間 */
    margin-bottom: 30px;
  }

  /* ソファ写真をスマホ幅いっぱいに */
  .shop__intro__img {
    max-width: 100%;
    width: 100%;
    padding-bottom: 100px; /* テキストとの間の余白 */
    margin: 20px 16px; /* 上下の余白を20px、左右は自動で中央寄せ */
  }

  /* 施術の流れテキストを中央寄せに */
  .shop__flow {
    text-align: center; /* テキストを中央寄せ */
    max-width: 100%;
    width: 100%;
    /* /* pcサイズで 効いていた*margin-leftをリセットしたので左寄りが解消した＊/ */
    margin-left: 0;
  }

  .shop__flow h3 {
    text-align: center;

    font-size: 20px;
    margin-bottom: 15px;
  }

  /* 下部のマッサージ画像も画面幅にフィットさせて中央配置 */
  .shop__massage__img {
    margin-top: 20px;
    width: 100%;
  }

  .shop__massage__img img {
    max-width: 100%; /* スマホ画面からはみ出さないように */
  }
}

/* ============================================
   整体工房 CHARMS セクション - 交互レイアウト
   ============================================ */
.charms__item {
  display: flex;
  /* align-items: center; 縦のラインを一旦上に寄せるためにコメントアウト.charms__contentの準備*/
  gap: 40px;
  margin-bottom: 50px;
}

/* 同じ要素にどっちの名前もあるとき　spaceあけない */
.charms__item.reverse {
  flex-direction: row-reverse;
}

.charms__content {
  padding: 50px 0 0 0;
}

.charms__point-messe {
  text-align: left;
  font-size: 24px;
  margin-bottom: 30px;
}

.charms__point-text {
  text-align: left;
  font-size: 20px;
  line-height: 1.8;
  margin-top: 50px;
}

.charms__list {
  padding-bottom: 200px;
  /* 修正0621 */
  /* overflow-x: hidden;を下記に修正 aosが効かなくなった*/
  /* overflow-x: clip; */
}

@media (max-width: 768px) {
  .charms__item {
    flex-direction: column-reverse;
    text-align: center;
  }

  .charms__item.reverse {
    flex-direction: column-reverse;
  }
  .charms__title {
    font-size: 26px;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 50px;
  }
  .charms__point-messe {
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
  }
}

/* ===================================================
   FAQ section
=================================================== */
/* 0621修正済 */
.faq {
  margin-bottom: 200px;
}

.faq__list {
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 768px) {
  .faq__list {
    max-width: 1009px;
  }
}

/* 質問行 */
.faq__question {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid #ccc;
  margin: 0;
}

/* 回答行：初期は非表示（jQueryの .hide() と合わせる） */
.faq__answer {
  display: none;
  overflow: hidden;
  padding: 15px 20px;
  margin: 0;
  background-color: #f9f9f9;
}

/* 回答内部のレイアウト（flexはここで管理） */
.faq__answer-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* アイコン共通 */
.faq__symbol {
  width: 24px;
  height: auto;
  flex-shrink: 0;
}

/* テキスト */
.faq__question-text,
.faq__answer-text {
  flex-grow: 1;
  line-height: 1.6;
  margin: 0;
}

/* トグル記号（CSSで + / − を制御） */
.faq__toggle {
  font-size: 0; /* HTMLの文字を隠す */
  margin-left: 20px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.faq__toggle::before {
  content: "+";
  font-size: 20px;
}

.is-open .faq__toggle::before {
  content: "−";
}

@media (max-width: 768px) {
  .faq {
    margin-bottom: 130px;
  }
  .faq__question {
    padding: 10px 15px;
    font-weight: bold;
    /* 修正検討 0621最終*/
  }
}

/* ===================================================
   voice section
   PC

   =================================================== */

.slider__wrapper {
  background-color: #fcfbfa;
  width: 100%;
  max-width: 100%;
  max-width: 750px;
  /* block要素は⇩ */
  margin: 0 auto;
}

.voice__item {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  gap: 35px;
}

.voice__flex {
  display: flex;
  align-items: center;
  padding: 70px;
}

.voice__img {
  width: 40%;
}

.voice__profile {
  width: 60%;
}
.voice__profile p {
  /* display: block; */
  margin: 0 auto;
  gap: 35px;
  padding: 20px;
  font-size: 18px;
}

.voice__text {
  font-size: 18px;
  padding: 10px;
}

.voice {
  padding-bottom: 200px;
}

/* .slick-prev img,
.slick-next img {
  width: 50px;
  height: 50px;
} */
/* 追記 0727*/
button.slick-prev,
button.slick-next {
  width: 50px;
  height: 50px;
  display: flex !important; /* 追加 */
  align-items: center; /* 追加: 縦方向中央揃え */
  justify-content: center; /* 追加: 横方向中央揃え */
  z-index: 100 !important; /* 前面に配置 */
  pointer-events: auto !important; /* クリックを有効化 */
  cursor: pointer;
}

/* slick-disabled が付いてもクリック可能＆表示維持 */
button.slick-prev.slick-disabled,
button.slick-next.slick-disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
}

/* 擬似要素 ::before の消去 */
button.slick-prev::before,
button.slick-next::before {
  display: none !important;
  content: "" !important;
}

button.slick-prev.slick-disabled,
button.slick-next.slick-disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
}

.slick-dots {
  bottom: -40px !important;
}

.slick-dots li {
  background-color: #b7a993;
  border-radius: 50%;
}
/* liの中のそのクラスメイを持っていいるヨウ素 */
.slick-dots li.slick-active {
  background-color: #4b4132;
}

@media (max-width: 768px) {
  .voice__item {
    /* max-width: 350px; */
    /* sp　sizeの時は max-width:を外す */
    width: 100%;
    gap: 17px;

    align-items: center;
  }
  .voice__profile p {
    display: block;
    gap: 17px;
    padding: 20px;
    font-size: 14px;
  }

  /* sp-sizeで下3行リセット追記 */
  .voice__flex {
    flex-direction: column;
    padding: 30px;
  }

  /* 縦並びになるので40％、60％リセットwidth: 100%; */
  .voice__img {
    width: 100%;
  }

  .voice__profile {
    width: 100%;
  }

  .slick-next {
    right: 3px !important;
  }

  .slick-prev {
    left: 3px !important;
  }
  /* ★ここを追加：SPサイズでも1枚目の左矢印を消さない強制指定 0727 */
  button.slick-prev.slick-disabled,
  button.slick-next.slick-disabled {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ===================================================
   greeting section
   PC

   =================================================== */
/* <!-- 院長の挨拶と文章をdivタグで囲んでgreeting__area 全体を同じ幅にする-->  */
.greeting__area {
  margin-bottom: 90px;
  background-color: #fcfbfa;
  width: 100%;
  max-width: 750px;
  /* block要素は⇩ */
  margin: 0 auto;
  margin-bottom: 90px;
  border-radius: 10px;
  padding: 7px;
}

.greeting__text {
  font-size: 24px;
  text-align: left;
}

.greeting__text-name {
  font-size: 24px;
  /* width: 610px; */
  display: block;
  text-align: right;
}
.greeting__img {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 200px;
}

@media (max-width: 768px) {
  .greeting__area {
    width: 340px;
    margin: 0 auto;
    margin-bottom: 90px;
  }
  .greeting__text {
    font-size: 16px;
    text-align: left;
    line-height: 1.6;
    margin-bottom: 30px;
  }

  .greeting__text-name {
    font-size: 16px;
    display: block;
    text-align: right;
  }
}

/* ===================================================
.charge section
   PC

   =================================================== */
.charge {
  width: 760px;
  /* height: 220px; */
  background-color: #fcfbfa;
  /* height: auto; */
  margin: 0 auto;
  border: 1px solid #2a2640;
  /* display: inline-block;
  background: #f9ebeb; titleを活かすために親要素でテキスト真ん中寄せ指定*/
  text-align: center;
  margin-bottom: 200px;
  padding: 20px;
}

.charge__title {
  font-size: 24px;
  display: inline-block;
  background: #f9ebeb;
  /* margin: 15px; */
}

.block {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  margin-bottom: 10px;
}
section charge dl {
  display: flex;
  flex-direction: column;
}
.dt {
  font-size: 20px;

  font-weight: bold;
}
.dd {
  font-size: 20px;

  /* width: calc(100% - 300px); */
}

.fee {
  display: flex;
  max-width: 500px;
  width: 100%;
  justify-content: space-between;
  font-size: 20px;
}

.charge__text {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
  font-size: 20px;
}

@media (max-width: 768px) {
  .charge {
    padding-top: 10px;
    width: 338px;
    /* height: 150px; */
    padding-bottom: 10px;
  }
  .charge__title {
    /* padding-top: 5px; */
    font-size: 16px;
    display: inline-block;
    background: #f9ebeb;
    /* margin: 2px 5px; */
  }

  .dt {
    font-size: 16px;

    font-weight: bold;
  }
  .dd {
    font-size: 16px;

    /* width: calc(100% - 300px); */
  }
  .charge__text {
    max-width: 250px;
    margin: 0 auto;
    text-align: left;
    font-size: 16px;
  }

  .fee {
    display: flex;
    max-width: 250px;
    width: 100%;
    justify-content: space-between;
    font-size: 16px;
  }

  .block {
    margin-top: 5px;
    /* margin-bottom: 20px; */
  }
}

/* ===================================================
.footer section
   PC

   =================================================== */

.footer-inner {
  width: 330px;
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: flex-start; /* 左寄せ */
  gap: 20px;
  max-width: 400px; /* Figmaの幅311pxに近い値 */
  padding-bottom: 200px;
}

/* ロゴエリア */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__img {
  height: auto;
  width: 310px;
}

/* 店舗情報エリア */
.footer-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 電話・営業時間 */
.footer-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.8;
  border: 1px solid;
  padding: 10px;
  margin-bottom: 50px;
}

.footer-name {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 6px 0;
}

.footer-detail p {
  font-size: 16px;
  margin: 0;
  line-height: 1.8;
}

/* 住所エリア */
.footer-address {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-address p {
  font-size: 16px;
  margin: 0;
  line-height: 1.8;
  text-align: left;
}

.footer-copyright {
  text-align: center;
  font-size: 15px;
  padding: 10px;
}

@media (max-width: 768px) {
  .footer__wrap {
    /* footerを真ん中寄せに */
    display: flex;
    justify-content: center;
  }

  .footer-inner {
    width: 280px;

    padding-bottom: 200px;
  }

  .footer__img {
    /* height: auto; */
    width: 280px;
  }

  .footer-detail {
    font-size: 16px;
    line-height: 1;
  }
}