@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&display=swap');
body {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  letter-spacing: 0.1em;
  margin: auto;
  /*font-family: "montserrat-alternates", sans-serif;*/
  font-weight: 300;
  font-style: normal;
  background-color: #e4d9ce;
}
:root {
  --text-color: #f5f5f5;
  --main-color: #c9ada6;
  --hover-color: #686565;
  --bg-color: #f5f5f5;
  --sub-color: #f8f8f8;
  --pc-header: 12rem;
  --sp-header: 6rem;
}
h1, h2, h3, h4, h5, p {
  color: #f0f0f0;
}
p {
  line-height: 2;
  text-align: center;
  font-size: 1em;
  letter-spacing: 0.15em;
}
.spacer {
  border-top: 1px solid #f5f5f5;
  padding-bottom: 2rem;
  margin: 2rem auto 0 auto;
  width: 7%;
}
h2 {
  font-size: 3rem;
  font-weight: 300;
  line-height: 160%;
  letter-spacing: 0.2em;
  text-align: center;
}
h3 {
  font-size: 1.6rem;
  font-weight: 100;
  padding-left: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: center;
  line-height: 2.5rem;
}
h4 {
  font-weight: 400;
  font-size: 1rem;
  display: flex;
  align-items: center;
  color: #947d59;
  font-weight: 400;
  font-size: 30px;
  line-height: 37px;
  letter-spacing: 0.05em;
}
h5 {
  color: #947d59;
  padding: 1rem 0 1rem 0;
}
/*戻る矢印*/
.gotop {
  display: block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  padding-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  font-size: 85%;
  text-decoration: none;
  color: #333;
  opacity: 0.5;
  position: relative;
  position: fixed;
  bottom: 0;
  right: 0;
}
.gotop::before {
  content: "";
  display: block;
  border-top: 4px solid #333;
  border-right: 4px solid #333;
  width: 30%;
  height: 30%;
  top: 25%;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  transform: rotate(-45deg);
}
.gotop:hover {
  opacity: 1;
}
/*戻る矢印ここまで*/
/*フォントクラス*/
.font_montserrat_normal {
  font-family: "montserrat-alternates", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.font_montserrat_regular {
  font-family: "montserrat-alternates", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.josefin-sans-uniquifier {
  font-family: "Josefin Sans", serif !important;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

/*ham-------------------------*/
.btn_open {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #3f3e3eef;
  transform: translateY(105%);
  transition: 0.8s;
}
.is_active {
  transform: translateY(0%);
  transition: 0.8s;
}
.btn_head {
  display: flex;
  justify-content: space-around;
  margin-bottom: 100px;
}
.btn_head p{
  padding-top: 2rem;
}
.btn_open_top {
  margin: 1em;
  font-family: "Josefin Sans", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 2rem;
}
.btn_open_top img{
  width: 50%;;
}
.btn_logo{
  margin-top: 0.8rem;
}
.btn_open_inner {
  display: flex;
  justify-content: center;
}
.btn_open ul {
  display: block;
  width: 135px;
}
.btn_open ul li {
  padding: 1em 0;
}
.b_nav_right {
  margin-left: 10%;
  padding-top: 1em;
}
.b_nav_right a {
  color: #d3af7d;
  font-size: 0.9em;
}
/*メイン------------------------*/
main {
  color: #f5f5f5;
}
main a {
  text-decoration: none;
  color: #f5f5f5;
}
/*アイキャッチ*/
.i_c {
  width: 100%;
  background-color: #c9ada6;
}
/*ヘッダー--------------------------------------------------*/
.header {
  width: 100%; /* ヘッダー全体の幅 */
  background-color: #aab196 /* 背景色を設定 */
}
header ul {
  list-style: none;
}
.h_inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.h_inner .flex_left {
  width: 100%;
}
.flex_right {
  width: 100%;
}
.h_nav {
  display: flex;
  justify-content: flex-end;
}
.h_nav li {
  display: block;
  height: auto;
}
.h_nav .booking {
  background-color: #927b5975;
}
.h_nav li:hover {
  opacity: 0.7;
  transition: 1.2s;
}
.h_nav .logo_sp {
  display: none;
}
/**/
.h_inner {
  display: flex; /* 子要素を横並びに */
  justify-content: space-between; /* 左右に配置 */
  align-items: center; /* 高さを揃える */
}
.logo {
  font-family: "Josefin Sans", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  width: auto;
  height: 100%;
  font-size: 2rem;
  text-align: center;
  padding: 1.3rem 0 0.5rem 2rem;
}
.logo img {
  max-height: 100px; /* ロゴ画像の高さを統一 */
  height: auto; /* 縦横比を維持 */
}
.navigation {
  display: flex; /* ナビゲーションを横並びに */
}
.nav_list {
  display: flex; /* リスト項目を横並びに */
  list-style: none; /* リストマーカーを削除 */
}
.nav_list li {
  margin-left: 1rem; /* 各リスト項目間に余白を追加 */
}
.nav_list li a img {
  max-height: 120px; /* アイコン画像の高さを統一 */
  height: auto; /* 縦横比を維持 */
  display: block; /* ブロック要素として扱う */
}
.booking_group .booking {
  flex: 1; /* 子要素の幅を均等に */
}
/**/
.booking_group {
  display: flex;
  background-color: #947d59c4; /* 背景色 */
  gap: 0; /* 隙間をなくす */
}
.booking_group .booking {
  flex: 1; /* 幅を均等に設定 */
  text-align: center; /* 中央揃え */
  padding: 0; /* パディングをリセット */
  margin: 0; /* マージンをリセット */
  height: 50px; /* 高さを統一 */
}
.booking_group .booking img {
  max-width: 100%; /* 画像が親要素を超えないように設定 */
  height: auto; /* 縦横比を保持 */
  display: block; /* ブロック要素として扱う */
}
/**/
/*ヘッダーアニメーション--------------------------------------------------*/
#header {
  position: fixed;
  top: -100px; /* 初期状態で画面外に隠す */
  left: 0;
  width: 100%;
  z-index: 10;
  transition: top 0.3s ease-in-out; /* スムーズなアニメーション */
  background-color: rgba(3, 3, 3, 0.1);
}
/*footer*/
footer {
  background-color: #aab196;
  color: #f5f5f5;
}
footer p {
  text-align: left;
}
footer a {
  text-decoration: none;
  color: #f5f5f5;
}
.f_center{
  font-size: 0.8rem;
}
.f_logo {
  font-size: 2rem;
}
.txt {
  font-family: "Noto Sans JP", sans-serif;
}
.f_flex {
  display: flex;
  justify-content: space-between;
}
.wrap {
  padding: 5%;
  max-width: 960px;
  margin: 0 auto;
}
/* f_left スタイル調整 */
.f_left {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 上下に適度な間隔 */
}

/* 営業時間部分のスタイル */
.open_time {
  font-size: 0.8rem;
  padding: 0.5rem 0;
}

.open_time-title {
  font-size: 0.9rem;
  line-height: 1;
}

.open_time ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.open_time li {
  margin: 0.1rem 0;
  line-height: 1.2;
}


/*セクション--------------*/
#index_page section {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 1rem;
}
#activity, #hotel, #service, #access, #column {
  min-height: 343px;
  background-size: cover;
}
#activity {
  background-image: url(image/c_pc_01.png);
}
#hotel {
  background-image: url(image/c_pc_02.png);
}
#service {
  background-image: url(image/c_pc_03.png);
}
#access {
  background-image: url(image/c_pc_04.png);
}
#column {
  background-image: url(image/c_pc_01.png);
}
.btn01 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 影の設定 */
  color: #ffffff; /* テキストの色を白に設定 */
}
.btn02 {
  position: absolute; /* 親要素に対する絶対配置 */
  bottom: 10px; /* 下端からの距離 */
  right: 10px; /* 右端からの距離 */
}
/*セクション子ページ*/
/*concept*/
#concept {
  background-color: #c9ada6;
  padding-top: 7rem;
  padding-bottom: 7rem;
}
#concept h2 {
  margin-bottom: 2rem;
}
/* #hotel, #activity, #service, #access*/
.menu_card {
  display: block;
  height: 273px;
  position: relative;
}
.menu_card h2 {
  position: absolute;
  top: 3%;
  left: 3%;
}
.menu_card p {
  position: absolute;
  bottom: -40px;
  right: 3%;
}
/*セクション共通*/
.content {
  display: block;
  text-align: center; /* 子要素を中央揃え */
  margin: 0 auto 5rem auto;
  width: 100%; /* 全幅 */
}
.content-desc p {
  color: #947d59;
  text-align: left;
  padding-left: 1rem;
}
.content h3 {
  font-weight: 400;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  color: #947d59;
  font-weight: 400;
  font-size: 30px;
  line-height: 37px;
  letter-spacing: 0.05em;
}
.content h3::after {
  content: '';
  flex: 1 0 0;
  border-top: 1px solid #937f50;
  margin-left: 30px;
}
.room_type {
  width: 95%;
  margin: 0 auto;
  padding-top: 5rem;
}
.amenity h4 {
  display: block;
  font-size: 1.5rem;
  margin-top: 1rem;
}
.amenity p {
  color: #937f50;
  font-size: 1rem;
  padding-bottom: 1rem;
}
.room-photo {
  margin-top: 5rem;
  padding-bottom: 5rem;
}
/*1カラム対応*/
.cylum1 {
  width: 100%; /* 親要素に幅を100%に設定 */
  margin: 0 auto; /* スライダーを中央揃え */
  padding-top: 3rem;
}
.cylum1 .your-class {
  width: 100%; /* スライダーを親要素にフィットさせる */
  overflow: hidden; /* 画像がはみ出さないようにする */
}
.cylum1 .your-class img {
  display: block; /* 画像をブロック要素にする */
  width: 100%; /* 画像を親要素の幅に合わせる */
  height: auto; /* 画像の縦横比を保持 */
}
.cylum1 .slick-dots {
  display: block; /* ドットを表示 */
  position: absolute; /* スライダーの下部に配置 */
  bottom: 10px; /* 位置を調整 */
  left: 50%; /* 中央揃え */
  transform: translateX(-50%); /* 中央に揃える */
  z-index: 10; /* 他の要素より前面に表示 */
}
.cylum1 .slick-dots li button {
  width: 10px; /* ドットの大きさ */
  height: 10px;
  border-radius: 50%; /* 丸くする */
  border: none; /* 枠線を削除 */
}
/*２（４：６）カラム対応*/
.room_type_inner {
  display: flex;
  gap: 20px; /* 左右の余白を設定 */
  align-items: stretch; /* 高さを揃える */
}
.room_type_left, .room_type_right {
  flex: 1; /* 各カラムを1:1の幅で表示 */
  min-width: 0; /* コンテンツがはみ出さないように設定 */
  padding: 10px;
  box-sizing: border-box; /* パディングを幅に含める */
}
.room_type_right {
  flex: 6; /* 幅を6割に設定 */
}
.room_type_left p {
  word-wrap: break-word; /* 長い単語を折り返し */
  white-space: normal; /* 改行を許可 */
  line-height: 1.5; /* 行間を調整 */
}
.room_type_left, .room_type_right {
  flex: 1; /* 比率を同じにする */
  position: relative; /* 子要素の位置指定の基準を作る */
}
/* 左カラム: 縦横比を保持 */
/* 2カラム対応 */
.room_type_inner {
  display: flex; /* 横並びにする */
  gap: 20px; /* カラム間の余白を設定 */
  align-items: stretch; /* 高さを揃える */
}
.room_type_left, .room_type_right {
  flex: 1; /* 比率を同じにする */
  box-sizing: border-box; /* パディングを幅に含める */
  position: relative; /* 子要素の位置指定の基準を作る */
}
/* 左カラム */
.room_type_left {
  flex: 4; /* 幅を4割に設定 */
  overflow: hidden; /* 内容がはみ出さないようにする */
  aspect-ratio: 960 / 530; /* 縦横比を直接指定 */
  display: flex; /* Flexboxでレイアウト */
  flex-direction: column; /* 内容を縦方向に並べる */
  align-items: flex-start; /* 上揃え */
  justify-content: flex-start; /* 縦方向も上揃え */
}
.room_type_left .content-desc {
  width: 100%; /* 親要素に合わせる */
  padding: 10px; /* 内側の余白 */
  overflow: auto; /* 内容が多い場合スクロール可能に */
  line-height: 1.5; /* 行間を調整 */
}
/* 右カラム */
.room_type_right {
  flex: 6; /* 幅を6割に設定 */
  border-radius: 15px;
}
.room_type_right .your-class {
  width: 100%; /* 親要素の幅に合わせる */
  overflow: hidden; /* スライダーの画像がはみ出さないようにする */
}
.room_type_right .your-class img {
  display: block; /* 画像をブロック要素にする */
  max-width: 100%; /* 画像が親要素の幅を超えないようにする */
  height: auto; /* 画像の縦横比を保持 */
  margin: 0 auto; /* 画像を中央揃え */
}
/* スリック（スライダー全体） */
.your-class {
  width: 100%; /* スライダーの幅を親要素に合わせる */
  margin: 0 auto; /* 真ん中に表示 */
}
.your-class img {
  display: block; /* 画像をブロック要素にする */
  max-width: 100%; /* 画像がスライダーの幅を超えないようにする */
  height: auto; /* 画像の縦横比を保持 */
}
/* Slickドットのデフォルトスタイルを適用 */
.room_type_right .slick-dots {
  position: static; /* デフォルトの位置 */
  display: block; /* デフォルトのドット表示 */
}
.room_type_right .slick-dots li button {
  width: auto; /* デフォルトサイズ */
  height: auto;
  background-color: initial; /* 元の色 */
  opacity: 1; /* デフォルトの不透明度 */
}
.room_type_right .slick-dots li.slick-active button {
  background-color: initial; /* アクティブ時のデフォルト色 */
}
/*sandbath-------------------------------*/
.bold {
  font-weight: bold;
}
#sandbath p {
  color: #937f50;
}
#sandbath .content {
  width: 95%;
  margin: 0 auto;
}
.center {
  text-align: center; /* テキストを中央揃え */
  margin: 0 auto 1rem auto; /* 要素を親要素内で中央揃え */
  display: flex; /* フレックスボックスを使用 */
  justify-content: center; /* 水平方向に中央揃え */
  align-items: center; /* 垂直方向に中央揃え */
  flex-direction: column; /* 内容を縦に配置 */
  padding-top: 3rem;
}
.center .desc_p {
  text-align: center; /* 段落内のテキストも中央揃え */
  font-size: 1rem; /* フォントサイズを設定 */
}
#sandbath section {
  margin-top: 0;
}
#sandbath h4 {
  text-align: center; /* テキストを中央揃え */
  margin: 0 auto; /* 中央揃えの補完 */
  display: block; /* 必要に応じてブロック要素に */
}
/**/
.cylum2_50_50 {
  display: flex; /* 横並びにする */
  gap: 20px; /* 子要素間の余白 */
  justify-content: center;  
}
.cylum2_50_50-left, .cylum2_50_50-right {
  box-sizing: border-box; /* パディングを含めた幅計算 */
  width: 450px;
  height: 450px;
}
#sandbath .cylum2_50_50 p, #sandbath .cylum2_50_50 h5 {
  text-align: left;
}
#sandbath .cylum2_50_50-left, #sandbath .cylum2_50_50-right {
  border-radius: 50px; /* 丸みのあるボーダー */
  background-color: #f5f5f5; /* 背景色を設定 */
  margin: 1rem 10px; /* サイドの余白を追加 */
  /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ボックスに影を追加 */
  padding: 1.8rem;
}
/*gaide-----------------------------------------*/
.gaide {
  padding-top: 1.5srem;
}
.gaide ul {
  list-style: none; /* デフォルトのリストマーカーを削除 */
  padding: 0;
  margin: 0 auto;
  display: grid; /* グリッドレイアウトを使用 */
  grid-template-columns: repeat(2, 1fr); /* 2列に分割 */
  gap: 10px; /* 各項目間の余白 */
  max-width: 760px;
  margin-bottom: 5rem;
}
.gaide li {
  font-size: 1.2rem; /* 必要に応じてフォントサイズを調整 */
  color: #937f50; /* テキストの色を設定 */
  line-height: 1.5; /* 行間を調整 */
  text-align: left;
  padding: 1rem 0 1rem 3rem;
  font-weight: bold;
}
.chek {
  display: inline-flex; /* インラインフレックスで中央揃え */
  justify-content: center; /* 横方向中央揃え */
  align-items: center; /* 縦方向中央揃え */
  width: 24px; /* 丸の直径 */
  height: 24px; /* 丸の直径 */
  border-radius: 50%; /* 丸くする */
  background-color: #c9ada6; /* 丸の背景色 */
  color: #ffffff; /* チェックマークの色（白） */
  font-size: 1rem; /* チェックマークのサイズ */
  flex-shrink: 0; /* サイズがテキストの影響を受けないようにする */
  margin-right: 0.5rem; /* テキストとの間にスペースを追加 */
}
.chek::before {
  content: "\2713"; /* チェックマーク（✓）を挿入 */
}
.list-rubi {
  display: block; /* ブロック要素として表示 */
  font-size: 0.9rem; /* 少し小さい文字サイズを設定 */
  line-height: 1; /* 行間を詰める */
  position: relative; /* 相対位置を使用 */
  top: 0.5em; /* 下方向にずらす */
}
.gaide p {
  text-align: left;
  padding-left: 1rem;
}
.gaide_info_inner {
  padding: 0;
  margin-left: 1.5rem;
  font-size: 0.9rem;
}
.gaide.gaide_info {
  border-radius: 50px; /* 楕円形の角丸 */
  padding: 10px; /* 内側の余白を設定 */
  margin: 20px auto; /* 外側の余白を設定（中央揃えの場合） */
  max-width: 80%; /* 横幅を制限 */
  background-color: #f5f5f5; /* 背景色を追加 */
  text-align: left; /* テキストを左寄せ */
}
#sandbath .content {
  margin-bottom: 5rem;
}
#sandbath h3 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}
/*　インフォメーションボタン*/
.info_btn {
  margin-top: 3rem;
  width: 45%; /* 幅を画面の50%に設定 */
  display: inline-block; /* ボタンをインラインブロック化 */
  padding: 10px 20px; /* ボタン内の余白 */
  background-color: #937f50; /* ボタンの背景色 */
  font-size: 1rem; /* フォントサイズ */
  text-align: center; /* テキストを中央揃え */
  text-decoration: none; /* 下線を削除 */
  border: none; /* 枠線を削除 */
  border-radius: 50px; /* 丸みを帯びたボタン */
  cursor: pointer; /* カーソルをポインターに変更 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* アニメーション */
}
.info_btn:hover {
  background-color: #937f508a; /* ホバー時の背景色を白に */
  color: #937f50; /* ホバー時の文字色を元の背景色に */
}
.info_btn p {
  margin: 0; /* pタグの余白を削除 */
  color: #f5f5f5 !important;
}
/*bath_info-------------------------------------------------*/
#bath_info h4 {
  font-size: 1.3rem;
  color: #c9ada6;
  border-top: 1px dotted #937f50;
  padding-top: 0.7rem;
}
#bath_info .none_border {
  border: none;
}
#bath_info h4, #bath_info p {
  text-align: left;
}
.bath_info_inner {
  display: flex; /* 子要素を横並びにする */
  gap: 1rem; /* 子要素間の余白を設定 */
  margin-bottom: 2rem; /* 各行の下に余白を追加 */
  align-items: flex-start; /* 子要素を上揃え */
}
.bath_info_inner_left {
  flex: 1; /* 幅を1割に設定 */
  max-width: 20%; /* 左カラムの最大幅を設定 */
}
.bath_info_inner_left img {
  width: 100%; /* 画像をカラムにフィット */
  height: auto; /* 縦横比を維持 */
  display: block; /* ブロック要素にする */
  min-width: 30%;
  border-radius: 30px;
  border: 5px double #c9ada6;
}
.bath_info_inner_right {
  flex: 4; /* 幅を4割に設定 */
  max-width: 80%; /* 右カラムの最大幅を設定 */
  padding: 0.5rem;
}
.bath_info_inner_right p {
  margin-bottom: 1rem; /* 各段落の間に余白を追加 */
  line-height: 1.6; /* 行間を調整 */
}
/*honki_plan--------------------------*/
#honki_plan {
  color: #937f50;
}
#honki_plan h2 {
  background-color: #f4c3b4;
  font-size: 2rem;
}
#honki_plan h5 {
  font-size: 1.2rem;
  margin-top: 1rem;
  line-height: 1.5rem;
}
#honki_plan {
  text-align: center;
  font-weight: bold;
}
.arrow-list li {
  position: relative;
  margin-bottom: 2rem; /* 項目間に余白を追加 */
  margin-left: 1rem;
}
.arrow-list li:not(:last-child)::after {
  content: "↓"; /* 矢印を表示 */
  position: absolute;
  bottom: -1.5rem; /* 矢印を項目の下に配置 */
  left: 50%; /* 中央揃え */
  transform: translateX(-50%); /* 中央揃えを補正 */
  color: #686565; /* 矢印の色 */
  font-size: 0.8rem; /* 矢印のサイズ */
}
/* al_none クラスで矢印を非表示にする */
.arrow-list.al_none li:not(:last-child)::after {
  content: ""; /* 擬似要素を空にして非表示 */
}
.sc-list2-inner,.sc-list1-inner {
  display: flex;
}
.sc-list1-inner .sc-time{
  display: none;
}
.sc-list {
  display: flex;
  justify-content: center
}
.sc-list1, .sc-list2 {
  width: 50;
  background-color: #f3f3f3;
  padding: 2rem;
  border-radius: 50px;
  margin: 1rem;
}
.sc-list1-inner li,
.sc-list2-inner li{
  text-align: left;
}
.rounded-list {
  padding: 0; /* 内側の余白 */
  margin: 1rem auto; /* 上下の余白 */
  border-radius: 15px; /* 角を丸くする */
  width: 500px;
}
.rounded-list .list-title {
  font-size: 1rem; /* フォントサイズ */
  font-weight: bold; /* 太字 */
  color: #686565; /* テキスト色 */
  text-align: left; /* 左揃え */
  border-bottom: 1px solid #ddd; /* 下線を追加 */
  padding-bottom: 0rem; /* タイトルの内側の余白 */
}
.rounded-list .list-title 
.rounded-list ul {
  list-style: none; /* リストマーカーを削除 */
  margin: 0; /* 外側の余白を削除 */
  padding: 0; /* 内側の余白を削除 */
}
.rounded-list li {
  margin: 0.5rem 0; /* 各項目の上下に余白 */
  padding: 0.3rem; /* 内側の余白 */
  font-size: 0.8rem; /* フォントサイズ */
  color: #686565; /* テキスト色 */
  border-bottom: 1px dotted #686565; /* 各項目の下に区切り線 */
  text-align: left;
}
.rounded-list li:last-child {
  border-bottom: none; /* 最後の項目の区切り線を削除 */
}
#honki_plan h6 {
  background-color: #ffe7e0;
  color: #eb807c;
  padding: 0.4rem;
  border-radius: 60px;
  margin-bottom: 2rem;
}
.plan_desc{
  width: 80%;
  font-size: 0.8rem;
  margin: 0 auto;
}
.list_br{
  padding-left: 4.2rem;
}
/*column.html---------------------------------------------*/
#column-page .content {
  width: 98%;
}
#column-page section {
  padding-bottom: 2rem;
}
#column-page h3 {
  margin-top: 3rem;
  margin-bottom: 2rem;
  margin-left: 30px;
}
#column-page p {
  color: #947d59;
}
.colum-page-1colum p {
  text-align: left;
}
.colum-page-1colum {
  width: 80%;
  margin: 0 auto 20px auto;
  text-align: justify;
}
.reaction-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto;
  /*background-color: #f9f9f9;*/
  padding: 20px;
  border-radius: 100px;
}
.reaction-table {
  width: 85%;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 1rem;
  text-align: left;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}
.reaction-table th, .reaction-table td {
  padding: 15px;
}
.reaction-header {
  background-color: #f8d7da;
  color: #a94442;
  text-align: center;
  font-weight: bold;
  border-radius: 20px 0 0 0;
}
.reaction-footer {
  background-color: #f8d7da;
  border-radius: 0 0 0 20px;
  height: 10px;
}
.cause-header {
  background-color: #d4edda;
  color: #155724;
  text-align: center;
  font-weight: bold;
  border-radius: 0 20px 0 0;
}
.cause-footer {
  background-color: #d4edda;
  color: #155724;
  text-align: center;
  font-weight: bold;
  border-radius: 0 0 20px 0;
  height: 10px;
}
.reaction {
  background-color: #fdecef;
  width: 50%;
  text-align: left;
}
.cause {
  background-color: #e2f7e1;
  width: 50%;
  text-align: left;
}
.reaction-row:nth-child(odd) td {
  background-color: #fdfdfe;
  color: #947d59;
}
.reaction-row:nth-child(even) td {
  background-color: #ffffff;
  color: #947d59
}
.tr:last-child {
  border-radius: 50px;
}
/*以下のような変化がみられる場合が－－－－*/
#column-page h4 {
  margin-left: 20px;
  border-left: 18px solid #947d59; /* 左のボーダー */
  padding-left: 10px; /* テキストとボーダー間の余白 */
  font-size: 1.5rem; /* フォントサイズ */
  line-height: 1.2; /* 行の高さをフォントサイズに合わせる */
  margin-top: 0; /* 不要な上下の余白を削除 */
  margin-bottom: 0; /* 不要な上下の余白を削除 */
}
.reaction-section {
  margin: 20px auto;
  width: 79%;
  background-color: #fdf3ec;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.reaction-section h4 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-left: 20px;
  border-left: 5px solid #947d59;
  color: #5a4633;
}
.reaction-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.reaction-item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 20px;
  margin: 0;
  border-radius: 8px;
  border: 1px solid #eee;
}
.reaction-number {
  font-size: 1.2rem;
  font-weight: bold;
  color: #d96e50;
  margin-bottom: 10px;
}
.reaction-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #5a4633;
  margin-bottom: 10px;
}
.reaction-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #5a4633;
  text-align: left;
  text-indent: 1rem;
}
/*天照石の6つの作用！体内の血液・水を浄化し体を整えます*/
.tensyou-seki {
  background-color: #fdf3ec;
  padding: 20px;
  margin: 20px auto;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 80%;
}
#column-page .tensyou-seki h4 {
  font-size: 1.5rem;
  text-align: center;
  background-color: #aaa996;
  display: inline-block;
  width: 100%;
  color: white;
  padding: 10px;
  border: none; /* 他の影響を防ぐため明示的に指定 */
  border-radius: 8px; /* 角丸のみ適用 */
  margin-left: 0;
}
.tensyou-seki .effects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}
.tensyou-seki .effect-item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tensyou-seki .effect-item h5 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #5a4633;
  margin-bottom: 5px;
}
.tensyou-seki .effect-item p {
  font-size: 1rem;
  color: #5a4633;
  line-height: 1.5;
}
.tensyou-seki .img_flex {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
.tensyou-seki .img_flex img {
  width: 49%;
  border: 2px solid #ddd;
  border-radius: 8px;
}
/*天香石のセラミックが放射するエネルギーによる体温変化*/
.energy-section {
  width: 80%;
  margin: 20px auto; /* セクションを中央揃え */
  padding: 20px;
  background-color: #fdf3ec; /* 優しい背景色 */
  border-radius: 12px; /* 角丸 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ソフトな影 */
  font-size: 1rem; /* 読みやすいフォントサイズ */
  color: #5a4633; /* テキストカラー */
  line-height: 1.8; /* 行間を広げて読みやすく */
  text-align: justify; /* 文章を両端揃え */
}
.energy-section {
  text-align: center; /* 親要素でテキストを中央揃え */
}
.energy-section h4 {
  font-size: 1.5rem; /* フォントサイズ */
  margin: 0 auto; /* 左右中央揃え */
  padding: 10px; /* 内側の余白 */
  color: #5a4633; /* テキスト色 */
  border-radius: 8px; /* 角を丸くする */
  display: block; /* h4をブロック要素に戻す */
  max-width: 100%; /* 最大幅を指定 */
  border: none !important;
}
.energy-section p {
  margin-bottom: 15px; /* 各段落の間に余白 */
  text-indent: 1.5em; /* 段落の最初を字下げ */
  text-align: left;
}
/*service.html------------------------------*/
/* 全体 */
#service-page .content {
  padding-top: 3rem;
  padding-bottom: 1rem;
  width: 95%;
}
.price-section {
  padding-bottom: 2rem;
  margin-bottom: 80px !important;
}
#service-page h3 {
  padding-bottom: 2rem;
  padding-left: 2rem;
}
.price-table {
  width: 80%;
  margin: 0 auto; /* 中央揃え */
  border-collapse: separate; /* 角丸を有効にする */
  border-radius: 12px; /* 角丸を適用 */
  overflow: hidden; /* テーブルのはみ出しを防ぐ */
  border-spacing: 0; /* セルの間隔をなくす */
  border: 1px solid #dcd0c5; /* テーブル全体のボーダー */
}
/* 価格表とスケジュール表の背景色 */
.price-table tr:nth-child(odd) td {
  background-color: #e9ddd1; /* ベース背景色より少し濃い目 */
  color: #5a4633; /* テキストカラー */
}
.price-table tr:nth-child(even) td {
  background-color: #f3ebe2; /* ベース背景色と同系色で淡く */
  color: #5a4633; /* テキストカラー */
}
.schedule-table td {
  color: #5a4633; /* テキストカラー */
}
/* 表ヘッダー */
.schedule-table th {
  font-weight: bold;
  color: #5a4633; /* テキストカラー */
}
/* テーブル共通のボーダー */
.price-table td, .schedule-table th, .schedule-table td {
  padding: 15px; /* セルの余白 */
  font-size: 1rem; /* テキストのサイズ */
  text-align: left; /* テキスト左揃え */
}
/* 注意書き */
.payment-note {
  font-size: 0.9rem; /* 小さいフォントサイズ */
  color: #947d59; /* テキストカラー */
  text-align: center; /* 中央揃え */
  margin-top: 10px; /* 上余白 */
  text-align: center;
}
/* テーブルを中央揃え */
.price-table, .schedule-table {
  margin: 0 auto; /* 上下は余白なし、左右は自動で中央揃え */
  width: 80%; /* 表の幅を調整 */
  max-width: 800px; /* 最大幅を設定 */
  border-collapse: collapse; /* セルのボーダーを重ねて表示 */
}
/**faq-------------------------------------------**/
#faq {
  width: 95%; /* 幅を95% */
  margin: 280px auto 80px auto; /* 左右中央揃え */
  margin-top: 0 !important;
  background-color: #fdf3ec; /* 背景色 */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  }
#faq h3 {
  padding: 0;
}
/* FAQセクション全体のスタイル */

/* #faq 内の h3 の中央揃えと左右の線 */
#faq h3 {
  display: flex; /* Flexboxを使用 */
  align-items: center; /* 縦方向中央揃え */
  justify-content: center; /* 横方向中央揃え */
  position: relative; /* 疑似要素の基準点 */
  font-size: 1.5rem; /* フォントサイズ */
  color: #5a4633; /* テキスト色 */
  margin: 1.5rem 0; /* 上下余白 */
  margin-bottom: 2rem;
}
#faq h3::before, #faq h3::after {
  content: ''; /* 疑似要素で線を作成 */
  flex: 1; /* 左右の線を均等に伸ばす */
  height: 1px; /* 線の太さ */
  background-color: #5a4633; /* 線の色 */
}
#faq h3::before {
  margin-right: 1rem; /* 文字との間隔 */
}
#faq h3::after {
  margin-left: 1rem; /* 文字との間隔 */
}
/* FAQリストのスタイル */
.faq_list {
  margin: 0;
  padding: 0;
  list-style: none; /* リストマーカーを削除 */
  text-align: left;
}
/* 各FAQアイテムのスタイル */
.faq_item {
  padding-top: 0.5rem;
  margin-bottom: 1.5rem;
}
/* 質問部分のスタイル */
.faq_question {
  font-weight: bold;
  font-size: 1rem;
  color: #5a4633; /* 質問のテキストカラー */
  padding-bottom: 10px;
}
/* 回答部分のスタイル */
.faq_answer {
  font-size: 0.9rem;
  color: #7a6652; /* 回答のテキストカラー */
  line-height: 1.6;
  padding-left: 1.5rem;
  padding-bottom: 10px;
}
/**access.html--------------------------------------------**/
#access-page .content {
  padding-top: 3rem;
  padding-bottom: 4rem;
  width: 95%;
  margin: 0 auto;
}
#access-page h3 {
  padding-left: 1rem;
}
#access-page p {
  color: #5a4633;
  padding-bottom: 1rem;
}
.map iframe {
  border-radius: 20px;
}

/* ============================================= */
/* レスポンシブ対応 - スマホ向け (768px以下) */
/* ============================================= */
/*改行on off----------------------*/
.res_br{
  display: none;
}
@media (max-width: 768px) {
  .res_br{
    display: block;
  }
}
/*ヘッダーのレスポンシブ－－－－－－－*/
@media (max-width: 768px) {
  .logo_pc {
    display: none;
  }
  .h_nav .logo_sp {
    display: block;
  }
  .h_nav li {
    width: 20%;
  }
  .logo{
    flex: 1;
  padding: 1.3rem 0.2rem 0.5rem 0.2rem;
  font-size: 1.2rem;
  min-width: 75px;
  }
}
/*フッターのレスポンシブ－－－－－－－*/
@media (max-width: 768px) {
  .f_flex {
    display: block;
  }
  .f_right p {
    padding-top: 1em;
    text-align: center;
  }
  address{
    text-align: center;
  }
  footer nav{
    display: flex;
    justify-content: flex-start;
  }
  footer nav p:last-child{
    text-indent: 1rem;
  }
}
/*セクションのレスポンシブ*/
@media (max-width: 768px) {
  #activity {
    background-image: url(image/c_sp_01.png);
  }
  #hotel {
    background-image: url(image/c_sp_02.png);
  }
  #service {
    background-image: url(image/c_sp_03.png);
  }
  #access {
    background-image: url(image/c_sp_04.png);
  }
  #activity, #hotel, #service, #access {
    height: auto;
    width: 100%;
    background-size: cover;
    min-height: auto;
  }
  .btn02 {
    margin-bottom: 50px;
  }
}
/*フォントサイズ*/
@media (max-width: 768px) {
  #sandbath,
  #hotel-page,
  #service-page,
  #column-page{
    font-size: 0.8rem;
  }
  #sandbath h3,
  #hotel-page h3,
  #service-page h3,
  #column-page h3{
    font-size: 1.2rem;
    margin: 0;
    padding-left: 0;
  }
  #sandbath h3::after,
  #hotel-page h3::after,
  #service-page h3::after{
    margin-left: 10px;
  }
}
/*content*/
@media (max-width: 768px) {
  .content{
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .tensyo-midashi{
    font-size: 1rem !important;  
  }
  .tensyo-midashi::after{
    margin-left: 0 !important;
  }
}

/*各ページのレスポンシブ-----------------------------------*/
/*index.html*/
@media (max-width: 768px) {
  #index_page h2{
    font-size: 2rem;
    margin-bottom: 0;
  }
  #index_page h3{
    font-size: 1.2rem;
    margin-bottom: 12px;
    line-height: 1.5rem;
  }
  .spacer{
    width: 40%;
    padding: 8px;
    margin: 0 auto;
  }
  #index_page p{
    font-size: 0.8rem;
  }
}
/*activity.html*/
@media (max-width: 768px){
  .cylum2_50_50 {
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column; /* 子要素を縦並びに */
    align-items: center; /* 子要素を中央揃え */
    gap: 10px; /* 子要素間の余白を設定 */
    margin: 20px auto; /* 全体を中央に揃える */
  }
    .cylum2_50_50-left,
    .cylum2_50_50-right {
      width: 100% ; /* 幅を100%に固定 */
      height: 100% ; 
      flex: none ; /* フレックス設定を解除 */
      aspect-ratio: auto !important; /* 縦横比を無効化 */
      gap: 0;
      padding: 1.5rem !important;
      margin: 0 !important;
      min-height: auto !important;
    }
    .cylum2_50_50 .cylum2_50_50-left h4,
    .cylum2_50_50 .cylum2_50_50-right h4 {
      text-align: left;
      display: block;
      font-size: 1.2rem;
      line-height: 20px;
  }
  .cylum2_50_50 .cylum2_50_50-left h5,
  .cylum2_50_50 .cylum2_50_50-right h5{
      font-size: 1rem;
      padding: 12px 0 8px 0;      
    }
    .gaide ul{
      display: block;
      margin-bottom: 40px;
    }
    .gaide ul li{
      padding: 8px 0 8px 1rem;
      font-size: 1rem;
    }
    .gaide.gaide_info {
      all: unset ; /* 既存のスタイルをリセット */
      display: block ; /* 必要に応じて指定 */
      width: 100% ;
      margin: 0 auto ;
      padding: 20px 20px 20px 0 ;
      box-sizing: border-box;
      background-color: #f5f5f5;
      border-radius: 50px ;
    } 
    .gaide.gaide_info p{
      font-weight: bold;
      font-size: 0.7rem;
    }
    #bath_info h4{
      text-indent: 0;
      padding-bottom: 15px;
    }
    .bath_info_inner{
      display: block;
    }
    .bath_info_inner_left img{
      padding: 0;
      width: 95%;
      margin: 0 auto;
    }
    .bath_info_inner {
      display: block; /* 子要素を縦並びにする */
    }
    .bath_info_inner_left,
    .bath_info_inner_right {
      max-width: 100%; /* 両カラムを画面全体幅に */
      flex: none; /* フレックス設定を解除 */
    }
    }
/* honki_plan レスポンシブ */
@media (max-width: 768px) {

  #honki_plan h2 {
    font-size: 1.5rem; /* タイトルサイズを調整 */
    margin-bottom: 1rem;
    text-align: center;
  }

  #honki_plan h5 {
    font-size: 1rem; /* プラン内容サイズを調整 */
    text-align: center;
    margin-bottom: 2rem;
  }

  /* sc-list のカラムを縦並びに */
  .sc-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* 一日目と二日目の各セクション */
  .sc-list1, .sc-list2 {
    width: 95%; /* 幅を100%に */
    margin: 0 auto;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .sc-list2{
    margin-bottom: 1rem;
  }

  .sc-list1 h6, .sc-list2 h6 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }

  .arrow-list {
    margin: 0;
    padding: 0;
    list-style: none; /* リストマーカーを削除 */
  }

  .arrow-list li {
    font-size: 0.9rem; /* リスト項目サイズを調整 */
    line-height: 1.5; /* 行間を調整 */
    text-align: left;
    padding: 0.3rem 0;
  }

  .sc-time {
    display: flex;
    flex-direction: column; /* 時間を縦並び */
    gap: 0.5rem;
  }
  .sc-list1-inner .sc-time {
    display: block; /* モバイル画面で表示 */
    margin: 0; /* 外側の余白を削除 */
    padding: 0; /* 内側の余白を削除 */
    text-align: right; /* 時間を右揃え */
    margin-right: 10px; /* 必要に応じて余白を調整 */
  }
  .info_btn{
    width: 90%;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  #sandbath .content{
    margin-bottom: 2rem;
  }
}


/*hotel.html*/
@media (max-width: 768px){
.amenity h4 {
  font-size: 1.2rem;
  margin-top: 0rem;
}
.amenity p {
  color: #937f50;
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
}
.room_type_inner{
  display: block;
}
.room_type_left{
  width: 100%;
  aspect-ratio: auto;
  padding: 0;
}
.room_type{
  padding-top: 1rem;
}
}
/*service.html----------------------------*/
@media (max-width: 768px) {
  #service-page h3{
    margin-bottom: 0;
    padding-bottom: 1rem;
  }
  #service-page .content{
    margin: 0 auto;
  }
  #service-page .price-table{
    width: 100%;
  }
  .payment-note{
    font-size: 0.7rem;
  }
  #service-page .schedule-section .schedule-table{
    width: 95%;
    margin: 0 auto;
  }
  #service-page .schedule-section th{
    font-size: 0.8rem;
  }
  .schedule-table {
    display: block; /* テーブルをブロック要素に */
    width: 100%;
  }
  .schedule-table th{
    padding-bottom: 0;
  }
  .schedule-table td{
    padding-bottom: 0.3rem ;
  }
  .schedule-table tr {
    display: flex; /* 行をフレックスボックスに */
    flex-direction: column; /* 縦に配置 */
    margin-bottom: 1rem; /* 行ごとに余白を追加 */
    border-bottom: 1px solid #ddd; /* 行の下に区切り線 */
  }
}
/* FAQレスポンシブ対応 */
@media (max-width: 768px) {
  #faq{
    width: 100%;
    margin-top: 3rem;
  }
  #faq h3 {
    font-size: 1.2rem;
  }
  .faq_question {
    font-size: 0.8rem;
    margin-top: 0.5rem;
  }
  .faq_answer {
    font-size: 0.7rem;
    text-indent: 0;
    padding-left: 1rem;
  }
}

/*-----------------------------------*/
@media (max-width: 768px) {
  #column-page .content{
  margin: 1rem auto;
  width: 95%;
  }
  #column-page section{
    margin-bottom: 1rem !important;
  }
  .reaction-container, .reaction-table{
    width: 100%;
    margin: 0;
    gap: 0;
    padding: 0;
  }
  .reaction-header,
  .cause-header{
    font-size: 0.9rem;
  }
  .reaction-table tbody{
    font-size: 0.8rem;
  }
  /*reaction-section*/
  .reaction-section{
    width: 100%;
    margin-top: 50px;
  }
  .reaction-section h4{
    border: none !important;
    padding-bottom: 1rem;
    font-size: 0.9rem !important;
    text-align: center !important;
    display: inline-block;
  }
  .reaction-title{
    font-size: 0.9rem;
  }
  .reaction-section p{
    font-size: 0.8rem;
  }
  .reaction-item {
    margin-bottom: 1rem !important;
  }
  /*tensyou-seki*/
  .tensyou-seki{
    width: 100%;
  }
  .effects{
    display: block !important;
  }
  .effect-item{
    margin-bottom: 1rem;
  }
  .effect-item h5{
    padding: 5px 0;
  }
  /*energy-section*/
  .energy-section{
    width: 100%;
  }
  .energy-section h4{
    font-size: 1.2rem !important;
  }
  .energy-section p{
    font-size: 0.8rem;
  }
}

/*プライバシーポリシー*/
#policy-page .content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.8;
}

#policy-page .content h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #5a4633;
}

#policy-page .content h3 {
  font-size: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

#policy-page .content p {
  margin-bottom: 1rem;
  color: #333;
  text-align: start;
  text-indent: 1rem;
}

#policy-page .content ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

#policy-page .content ul li {
  margin-bottom: 0.5rem;
  color: #7a6652;
  text-align: start;
}