@charset "UTF-8";
/*サイト全体*/
* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  overflow-y: auto; /* ← 縦スクロールは1本にする */
  overflow-x: hidden; /* 横は出さない */
}
html {
  font-size: 100%; /*ユーザー設定の文字サイズを正しく反映*/
}
header {
  width: 100%;
  display: flex; /* 横並びにする */
  justify-content: space-between; /* 左右に配置 */
  align-items: center; /* 縦方向を中央に揃える */
  height: 95px; /* 高さを指定すると中央揃えが安定 */
}
ul {
  display: flex;
  list-style: none;
  justify-content: flex-end;
}
li {
  margin-left: 40px;
  padding: 20px;
}
a {
  text-decoration: none;
  color: #AE9293;
}
nav {
  margin-left: auto; /*メニューを右端に置く方法その２*/
}
a:hover {
  opacity: 0.5;
}
body {
  font-family: Yu Mincho, 游明朝;
  color: #AE9293;
  background-color: #fff;
  margin: 0;
  padding: 0;
}
section {
  padding: 50px 0 50px 0;
}
h2 {
  font-family: Yu Mincho, 游明朝;
  font-size: 2rem;
  color: #AE9293;
  padding: 20px 0 20px 0;
}
h3 {
  font-family: Yu Mincho, 游明朝;
  font-size: 1.5rem;
  color: #AE9293;
  padding: 20px 0 20px 0;
}
h4 {
  font-size: 1.2rem;
  padding: 10px 0 10px 0;
}
.salon img, .yomogi img, .menu img, .relax img {
  filter: drop-shadow(8px 8px 8px #aaa);
}
.side-text {
  margin: 0 auto;
  padding: 100px 30px 100px 30px;
}
.top {
  display: flex;
  justify-content: center; /* 横方向：中央寄せ */
  align-items: center; /* 縦方向：中央揃え */
  gap: 40px; /* テキストと画像の間隔 */
}
.top img {
  max-width: 70%;
  margin: 0 auto;
}
.topimg img {
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 0 50px 0;
}
/*Salon*/
.salon {
  display: flex;
  justify-content: center; /* 横方向：中央寄せ */
  align-items: center; /* 縦方向：中央揃え */
  gap: 40px; /* テキストと画像の間隔 */
}
.salon img {
  max-width: 50%;
  margin: 0 auto;
  padding: 50px 0 50px 0;
}
/*index_よもぎ蒸し*/
.yomogi {
  display: flex;
  justify-content: center; /* 横方向：中央寄せ */
  align-items: center; /* 縦方向：中央揃え */
  gap: 40px; /* テキストと画像の間隔 */
}
.yomogi img {
  margin-left: 0;
  max-width: 50%;
  padding: 50px 0 50px 0;
}
.staff {
  display: flex;
  justify-content: center;
  align-items: center; /* 縦方向も中央揃え */
  max-width: 1000px; /* サイトの幅を制御 */
  margin: 0 auto; /* 中央寄せ */
  padding: 50px 10px; /* 余白 */
  gap: 40px; /* テキストと画像の間隔 */
}
.staff img {
  width: 20%; /* 親要素に対して20% */
  height: auto;
}
.staff-text {
  width: 80%;
  margin: 0; /* autoは不要 */
  padding: 0 20px; /* 横方向に余白だけ */
}
.staff-text h2 {
  padding: 0; /* 横方向に余白だけ */
}
.message {
  padding: 0 0 10px 0;
  font-size: 0.9rem;
}
.profile {
  font-size: 0.9rem;
}
/*index_メニュー*/
.menu {
  display: flex;
  justify-content: center; /* 横方向：中央寄せ */
  align-items: center; /* 縦方向：中央揃え */
  gap: 40px; /* テキストと画像の間隔 */
}
.menu img {
  max-width: 50%;
  margin: 0 auto;
  padding: 50px 0 50px 0;
}
/*view moreボタン*/
.btn6 {
  position: relative;
  border: none;
  border-bottom: 1px solid #98626B;
  width: 150px;
  max-width: 90%;
  margin-left: auto; /* ← これで右に寄せる */
  display: block; /* ← margin auto を効かせるために必要 */
}
.btn6::before {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: #98626B;
  rotate: 40deg;
  position: absolute;
  right: -3px;
  bottom: 9px;
}
/* index_relax */
.relax {
  display: flex;
  justify-content: center; /* 横方向：中央寄せ */
  align-items: center; /* 縦方向：中央揃え */
  gap: 40px; /* テキストと画像の間隔 */
  max-width: 1000px; /* 中央に収める最大幅（お好みで調整） */
  margin: 0 auto; /* セクション全体を中央寄せ */
  padding: 50px 20px; /* 余白（スマホ時にも対応できるように左右にも余白） */
}
.relax img {
  max-width: 50%;
  height: auto;
}
/*予約*/
.reserv {
  display: flex;
  justify-content: space-between; /* 左右に並べる */
  align-items: center; /* 縦方向の中央揃え */
  width: 70%; /* 全体の横幅を70%に */
  margin: 0 auto; /* ページ中央に配置 */
  /* gap: 40px;*/ /* テキストと画像の間隔 */
}
.reserv-text {
  flex: 1; /* 横幅を均等にとる（50%） */
  padding: 0 10px 20px 0;
}
.reserv-p {
  padding: 0 0 10px 0;
}
.reserv a {
  flex: 1; /* 横幅を均等にとる（50%） */
}
.reserv img {
  width: 100%; /* 親（aタグ）の幅いっぱいに広がる */
  height: auto; /* 縦横比を保持 */
  display: block;
  padding-top: 30px;
}
/*アクセス*/
.access {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上揃え */
  gap: 40px;
  width: 80%;
  margin: 0 auto;
}
.access-text {
  flex: 1;
  max-width: 50%;
}
.map-box {
  flex: 1;
  max-width: 50%;
  position: relative; /* 子要素（キャプション）の基準 */
}
.map-box img {
  width: 100%;
  height: auto;
  border: solid #AE9293 1px;
  display: block;
}
.map-caption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
}
.map-caption a {
  color: #AE9293;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-size: 0.8rem;
  text-decoration: none;
}
/*メニューページ＿よもぎ蒸し*/
.menu_yomogi img {
  max-width: 30%;
}
.linkimg {
  width: 50%;
}
.container img {
  opacity: 0.7;
  max-width: 100%;
}
.container {
  width: 100%;
  position: relative;
}
.container img {
  width: 100%;
}
.container p {
  position: absolute;
  top: 30px;
  left: 20px;
  font-size: 30px;
  color: #fff;
  padding: 30px;
  margin: 0;
}
.menu-text {
  padding: 20px 50px 20px 50px;
}
.nagarep {
  padding: 10px 0 20px 0;
}
.subheading {
  color: #AE9293;
}
.highlights {
  padding: 10px 0 10px 0;
}
.relaxp {
  padding: 30px 0 0 0;
}
.option {
  padding-bottom: 30px;
}
.menu_yomogi h2 {
  padding: 50px 50px 0 50px;
}
/*メニューページ_ヒーリング*/
.healing img {
  max-width: 30%;
}
ol.sample1 {
  counter-reset: list;
  list-style-type: none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0;
}
ol.sample1 li {
  position: relative;
  margin: 9px 0 9px 0px;
  padding-left: 40px;
  font-size: 14px;
  line-height: 30px;
  border: solid 1px #AE9293;
  border-radius: 20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
ol.sample1 li:before {
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 0px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  background: #AE9293;
  border-radius: 50%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.sample1 li:hover {
  background: #AE9293;
  color: #fff;
}
ol.sample1 li:hover:before {
  background: #fff;
  color: #AE9293;
}
/*レビュー*/
.review {
  max-width: 90%;
  margin: 0 auto;
  padding: 30px 0 30px 0;
  border-bottom: 1px solid #98626B;
}
.review img {
  width: 80px;
  border: 1px solid #98626B;
  border-radius: 50%; /* 丸くする */
}
.name {
  padding: 5px 0 10px 0;
  font-size: 1.1rem;
}
/*faqページ*/
.faq-text {
  padding: 20px 0 20px 0;
}
.faqsite img {
  max-width: 30%;
}
.faqsite h3 {
  padding: 30px 0 5px 0;
}
.faqpage {
  width: 80%;
  margin: 0 auto; /* 中央寄せ */
  padding: 0 20px 50px 20px; /* スマホで端がくっつかないように余白 */
  box-sizing: border-box;
}
.accordion-003 {
  max-width: 100%;
  margin-bottom: 7px;
  border-bottom: 1px solid #d0d0d0;
}
.accordion-003 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  /* padding: 1em 2em;*/
  padding: 1em;
  color: #AE9293;
  font-weight: 600;
  cursor: pointer;
}
.accordion-003 summary::-webkit-details-marker {
  display: none;
}
.accordion-003 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 2px solid #98626B;
  border-right: 2px solid #98626B;
  content: '';
  transition: transform .3s;
}
.accordion-003[open] summary::after {
  transform: rotate(225deg);
}
.accordion-003 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 2em 1.5em;
  color: #AE9293;
  transition: transform .5s, opacity .5s;
}
.accordion-003[open] p {
  transform: none;
  opacity: 1;
}
/***追従するトップへ戻るボタン***/
#page-top {
  position: fixed;
  right: 5px;
  bottom: 70px;
  height: 50px;
  text-decoration: none;
  font-weight: bold;
  transform: rotate(90deg);
  font-size: 90%;
  line-height: 1.5rem;
  color: #98626B;
  padding: 0 0 0 35px;
  border-top: solid 1px;
}
#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 15px;
  border-top: solid 1px;
  transform: rotate(35deg);
  transform-origin: left top;
}
/*Instagram*/
.instagram img {
  width: 50px;
}
.instagram {
  text-align: center;
  font-size: 0.7rem;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  padding: 50px;
}
.instagram p {
  padding-bottom: 15px;
}
/*注釈*/
.smallfont {
  font-size: 0.8rem;
  padding: 5px 0 5px 0;
}
.smallfont_low {
  font-size: 0.7rem;
  padding: 2px 0 5px 0;
}
/*フッター*/
footer {
  background-color: #AE9293;
  padding: 10px;
}
footer p {
  text-align: center;
  color: #ffffff;
  font-size: 0.7rem;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
/*-----------------------------------
レスポンシブ：スマホ用
-----------------------------------*/
@media screen and (max-width: 768px) {
  body {
    font-size: 0.9rem;
  }
  section, .side-text, .menu-text, .faqpage {
    max-width: 100%;
    margin: 0 auto;
  }
  .menu-text {
    padding: 0 10px 0 10px;
  }
  /* 横並びを縦並びに */
  .top {
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
  }
  /* 横並びを縦並びに */
  .salon, .yomogi, .menu, .reserv, .access, .staff, .relax {
    flex-direction: column;
    gap: 0px;
    width: 90%;
    margin: 0 auto;
  }
  /* staff画像 */
  .staff {
    flex-direction: column;
    align-items: center;
    padding-top: 70px;
  }
  .staff img {
    width: 150px; /* お好みで調整 */
    max-width: 70%; /* 上限 */
    height: auto; /* 縦横比保持 */
    margin: 0; /* 中央寄せは親の align-items で制御 */
  }
  /* テキスト幅調整 */
  .staff-text, .access-text, .map-box, .reserv-text, .side-text {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    text-align: left;
  }
  /* flex内画像調整 */
  .top img, .salon img, .yomogi img, .menu img, .reserv img, .access img, .relax img {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  .top {
    background: no-repeat url("../images/top.jpg");
background-position: center;
    background-size: 115% auto;
    height: 80vh;
    position: relative; /* 疑似要素を重ねるために必要 */
    overflow: hidden;
  }
  /* フェード用の白幕をかぶせる */
  .top::before {
    content: "";
    position: absolute;
    inset: 0; /* 上下左右ぜんぶ覆う */
    background: #fff; /* 白い幕から始める */
    opacity: 1;
    animation: fadeOut 3s ease forwards; /* ← 長めに */
  }
  .top img {
    display: none;
  }
  /* 画像を後ろに */
  .salon img {
    order: 2; /* 後ろに並べる */
  }
  /* テキストを先頭に */
  .salon .side-text {
    order: 1; /* 前に並べる */
  }
  /* 見出しサイズ調整 */
  h2 {
    font-size: 1.5rem;
    padding: 20px 0 20px 0;
  }
  h3 {
    font-size: 1.1rem;
    line-height: 35px;
  }
  h4 {
    font-size: 1.0rem;
    padding: 10px 0 10px 0;
  }
  .menu_yomogi h2 {
    padding: 30px 0 20px 10px;
  }
  .subheading {
    font-size: 1.3rem;
  }
  .option {
    padding-bottom: 20px;
  }
  .salon p, .yomogi p {
    padding: 0 0 10px 0;
  }
  /* ロゴ切り替え */
  .topimg {
    display: none;
  }
  /* h1.logo自体を中央寄せ */
  h1.logo {
    display: block;
    text-align: center;
    margin: 10px 0 0 0; /* 上下の余白 */
  }
  /* ロゴ画像のサイズ */
  h1.logo img {
    width: 120px; /* お好みで調整 */
    height: auto;
    max-width: 90%; /* 画面幅が狭いときに縮小 */
  }
  .btn6 {
    padding-top: 50px;
  }
  header {
    position: fixed; /* 上に固定 */
    top: 0; /* 画面の上端 */
    left: 0;
    width: 100%; /* 横幅いっぱい */
    z-index: 10000; /* メニューより前面に */
    background: #fff; /* 背景色を指定するとスクロール時に透けない */
  }
  body {
    padding-top: 80px; /* headerの高さ分だけ余白を作る */
  }
  .container {
    padding-top: 0px;
  }
  .top {
    padding-top: 50px;
  }
  .container img {
    width: 100%;
    height: auto;
  }
  .faqpage {
    width: 100%;
    margin: 0 auto;
    padding-top: 50px;
  }
  .menu_yomogi img {
    width: 100%; /* 横幅いっぱい */
    height: auto; /* 縦横比を保つ */
    max-width: 100%;
    padding: 0; /* 不要な余白を削除 */
  }
  .container p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%; /* 横幅を確保（ディスプレイ幅の80%） */
    max-width: 500px; /* 広すぎ防止 */
    font-size: 0.9rem;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
  }
  .access {
    padding-top: 70px;
  }
  /* レビュー */
  .review {
    max-width: 95%;
    margin: 0 auto;
    padding: 30px 0 30px 0;
    border-bottom: 1px solid #98626B;
  }
  .review img {
    width: 80px;
    border: 1px solid #98626B;
    border-radius: 50%; /* 丸くする */
  }
}
/*-----------------------------------
PC用ロゴ
-----------------------------------*/
@media screen and (min-width: 769px) {
  .topimg {
    display: block;
  }
  h1.logo {
    display: none;
  }
}
.lgoo1 {
  position: relative;
  margin: 0 !important;
  height: 300px;
  font-family: serif;
}
/* PC用デフォルト */
.header__navi_01 {
  position: static; /* 固定やスライド解除 */
  background: none;
  width: auto;
  height: auto;
  transform: none;
  transition: none;
}
.header__navi_01 ul {
  display: flex;
  padding: 0;
}
.header__navi_01 li {
  margin: 0 20px;
}
.sp-menu-btn_01 {
  display: none; /* PCでは非表示 */
}
/*-----------------------------------
レスポンシブ：スマホ用のメニュー
-----------------------------------*/
@media screen and (max-width: 768px) {
  /* スマホ時：スライドメニュー化 */
  .header__navi_01 {
    position: absolute;
    top: 0;
    left: 0;
    background: #ada59c;
    width: 70%;
    height: 100vh;
    transform: translateX(-100%);
    transition: all 0.6s;
  }
  .header__navi_01.active {
    transform: translateX(0%);
  }
  .header__navi_01 ul {
    flex-direction: column;
    padding-top: 80px;
    text-align: center;
  }
  .header__navi_01 li a {
    color: #fff;
  }
  /* スマホ時はハンバーガーボタンを表示 */
  .sp-menu-btn_01 {
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 50px; /* ボタンサイズ */
    height: 50px;
    background: #ada59c; /* ボタンの背景色 */
    border: none; /* 枠線なし */
    border-radius: 50%; /* 丸くする */
    cursor: pointer;
    z-index: 1000;
  }
  /* ハンバーガー線 */
  .sp-menu-btn_01 .line {
    display: block;
    position: absolute;
    width: 25px; /* 線の長さ */
    height: 3px; /* 線の太さ */
    background: #fff; /* 線の色は白 */
    left: 50%; /* 中央揃え */
    transform: translateX(-50%);
    transition: all 0.3s ease-in-out;
    border-radius: 2px; /* ここで角丸指定 */
  }
  .sp-menu-btn_01 span:nth-child(1) {
    top: 14px;
  }
  .sp-menu-btn_01 span:nth-child(2) {
    top: 22px;
  }
  .sp-menu-btn_01 span:nth-child(3) {
    top: 30px;
  }
  /* メニュー開いた時のアニメーション */
  .sp-menu-btn_01.active span:nth-child(1) {
    top: 22px;
    transform: translateX(-50%) rotate(-45deg);
  }
  .sp-menu-btn_01.active span:nth-child(2) {
    opacity: 0;
  }
  .sp-menu-btn_01.active span:nth-child(3) {
    top: 22px;
    transform: translateX(-50%) rotate(45deg);
  }
}
/* 横スクロール防止 */
html, body {
  overflow-x: hidden;
}
/* スマホ時 li の余白を減らす */
@media screen and (max-width: 768px) {
  li {
    margin-left: 0;
    padding: 10px 0; /* 縦だけ余白 */
  }
  .map-box {
    max-width: 95%;
    margin: 0 auto; /* 中央に配置 */
    text-align: center; /* 中身を中央に */
  }
  .map-box img {
    display: block;
    margin: 0 auto; /* 画像自体も中央に */
    max-width: 100%;
    height: auto;
  }
}
/* アニメーション対象：top.jpg */
.slide-img {
  opacity: 0;
  transform: translateX(50px);
  animation: slideIn 1.5s ease-out forwards;
  animation-delay: 0.5s;
}
/* ロゴはそのまま表示 */
.logo-img {
  opacity: 1;
  transform: none;
}
/* アニメーション定義 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* 続きを読む */
.txt-hide {
  display: none;
  padding-top: 20px;
}
button.more {
  width: 120px;
  margin: 20px 0 0 auto; /* ←右寄せのポイント！ */
  display: block;
  background-color: #fff;
  color: #AE9293;
  padding: 10px 15px;
  //border: 1px solid #AE9293;
  border: none;
  outline: 0;
  transition: .5s;
  -erbkit-transition: .5s;
}
button.more::after {
  content: "...続きを読む";
  transition: .2s;
  -erbkit-transition: .2s;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
button.more.on-click::after {
  content: "×閉じる";
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
#wrap {
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1.5rem;
}
/* ▼ 続きを読む（スマホ優先） */
.txt-show {
  display: block;
}
.txt-hide {
  display: none;
}
.more {
  display: block;
}
.pc-full-text {
  display: none;
}
/* ▼ PC（768px以上）で切り替え */
@media screen and (min-width: 768px) {
  .txt-show, .txt-hide, .more {
    display: none !important;
  }
  .pc-full-text {
    display: block !important;
  }
}


@media screen and (max-width: 768px) {
  .top {
    padding-top: 0;
height: 80vh; /* 90 → 80 */
  }
}