@charset "UTF-8";

/* font-family: "EB Garamond", serif; */
/* font-family: "Noto Sans JP", sans-serif; */
/* font-family: "Philosopher", sans-serif; */
/* font-family: "Bowlby One SC", sans-serif; */
/* font-family: "Story Script", sans-serif; */
/* font-family: "Parisienne", cursive; */
/* ==============

共通部分の設定
（初期設定）

================ */
html{
  font-size: 62.5%;
  /* 16*62.5%=10px 1rem=10px */
}
body{
  font-size: 2rem;
  font-family: "Bowlby One SC", sans-serif; 
  color: #3f3f3f;
  line-height: 1;
  letter-spacing: 0.05em;
  background-color: #fff; /* わずかにベージュがかった温かみのある白 */
  /* または、非常に薄い和紙の画像などを敷く */
}
a{
  color: #fff;
  text-decoration: none;
  transition: .3s ease-in-out;
}
a:hover{
  opacity: .8;
  /* 不透明度80% */
}
img{
  /* レスポンシブサイトを作る際に必須 */
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  /* たまに現れる画像下の余白を無くす */
}
ul{
  list-style: none;
}
/* 共通のスタイル */
.inner{
  max-width: 1000px;
  margin: 0 auto;
}
.flexB{
  display: flex;
  justify-content: space-between;
}
/* セクションのタイトル */
.section-ttl{
  font-size: 7rem;
  font-family: "Parisienne", cursive;
  text-align: center;
  font-weight: normal;
  text-transform: uppercase;
  /* テキストを大文字に表記する */
  margin-bottom: 4rem;
  color: #fff;
  text-shadow: 
    0 0 5px #fff,  /* 横オフセット 縦オフセット ぼかし半径 色 */
    0 0 10px #fff,
    0 0 20px #fff;
}

.section-ttl span{
  display: block;
  font-size: 2rem;
  font-family: "Bowlby One SC", sans-serif; 
}
.section-ttl span::before{
  /* 擬似要素でspanの上に線を引く */
  content: "";
  /* 擬似要素を入れる際にマストの項目！文字などを入れるプロパティ。今回は線を引くので値は空なので""としておく */
  display: block;
  /* 幅や高さを指定する際は必要 */
  width: 120px;
  /* 線の幅を設定 */
  border-bottom: 1px solid #fff;
  /* borderで1pxの線を引く */
  margin: 0.6rem auto;
  /* 英字と日本語との距離、そして中央配置 */
}

@media(max-width:768px){
  body{
    font-size: 1.4rem;
  }
  .section-ttl{
    font-size: 6rem;
  }
  .section-ttl span{
    font-size: 1.5rem;
  }
  .section-ttl span::before{
    width: 80px;
    margin: .5rem auto .7rem;
  }
  .inner{
    padding: 0 1.4rem;
  }
  .flexB{
    flex-direction: column;
  }
}
/* max-width:768px */

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

header

================ */
header{
  background: #000;
  font-family: "Parisienne", cursive;
  padding: 3.6rem 3.73% 1.8rem;
}
.logo{
  font-weight: normal;
  font-size: 3.6rem;
}
header nav ul{
  display: flex;
  gap: 3rem;
  font-size: 1.8rem;
  align-items: flex-end;
}

@media(max-width:768px){
  header{
    padding: 1.5rem 0 1.3rem;
  }
  .logo{
    font-size: 3.2rem;
  }
  nav{
    display: none;
    /* ハンバーガーメニューを作るまで非表示にしておく */
  }

}
/* max-width:768px */

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

mv

================ */
.mv{
  position: relative;
}

.mv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); /* 0.2の部分を大きくするともっと暗くなります */
  z-index: 1; /* 写真より上に配置 */
}

.mv__ttl{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  /* x y の順番 */
  /* topとleftに50%をかけると微妙にズレた位置に配置されるため、要素の半分ずつを戻してあげると全体が上下左右中央に配置される */
  color: #fff;
  font-family: "Bowlby One SC", sans-serif;
  font-weight: normal;

/* 文字サイズ固定 */
    font-size: 70px;
    color: #fff;
    font-weight: bold;
    text-shadow: 
    0 0 5px #fff,  /* 横オフセット 縦オフセット ぼかし半径 色 */
    0 0 15px #fff;

}
.mv__ttl span{
  display: block;
  font-size: 2.8rem;
  margin-top: 1rem;
  text-align: center;
}

/* 画像を画面の端から端まで表示する */
.mv img, .mv {
    width: 100% !important;
    max-width: none !important; /* 1000pxなどの制限を解除 */
    height: auto;
    display: block;
}


.sp_onry{
  display: none;
}

@media(max-width:768px){
.mv__ttl{
  font-size: 3rem;
  width: 100%;
  text-align: center;
}
.mv__ttl span{
  font-size: 2rem;
}
}
/* max-width:768px */

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

concept

================ */
.concept{
  padding: 7rem 3.73% 10rem;
}
.concept p{
  line-height: 2;
}
.profile-text table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: #fff;
    border: 1px solid #ddd; /* 外枠 */
}

.profile-text table th {
  width: 120px;       /* 見出しの幅を固定して、縦のラインを揃える */
  padding: 15px 0;    /* 上下の余白 */
  text-align: left;
  font-weight: bold;
  white-space: nowrap; /* 項目名が途中で改行されないようにする */
}

.profile-text table td {
  padding: 15px 0 15px 20px; /* 左側に20pxの余白を作って見出しと離す */
  vertical-align: top;       /* 説明文が長くなっても上端で揃える */
  line-height: 1.7;          /* 行間を広げて読みやすくする */
}




/* #region プロフィール横並び設定 */

/* 画像と文章を包む箱を横並びにする */
#concept .profile-content {
  display: flex !important;
  align-items: flex-start !important; /* 上端を揃える */
  gap: 50px !important;              /* 画像と文章の間隔 */
  margin-top: 40px !important;
}

/* 画像側の幅を固定 */
#concept .profile-image {
  flex: 0 0 300px !important; /* 画像の横幅を300pxに固定 */
}

#concept .profile-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 10px; /* 四角のままでも、少し角を丸くすると綺麗です */
}

/* 文章側の設定 */
#concept .profile-text {
  flex: 1 !important; /* 残りの幅をすべて使う */
}

#concept .profile-text p {
  text-align: left !important;
  line-height: 2.0 !important; /* 文章が長いので行間を広めに */
  margin: 0 !important;
}

/* #region プロフィール画像の円形リセットと横並び微調整 */

/* 1. 画像を強制的に正方形の円にする */
#concept .profile-image {
  flex: 0 0 350px !important; /* 円の大きさをここで決めます */
  width: 350px !important;
  height: 350px !important;
}

#concept .profile-image img {
  /* 現在 250px 程度になっているものを、320px くらいに大きくします */
    width: 320px !important; 
    height: auto !important;
    border-radius: 10px !important; /* 角の丸みもお好みで調整してください */
    object-fit: cover !important;
  /* ↓ この3点セットで「綺麗な円」になります */
  aspect-ratio: 1 / 1 !important; 
  object-fit: cover !important;
  border-radius: 50% !important; 
  
  border: 5px solid #f7f7f7 !important; /* 枠線 */
  box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important; /* 影 */
}

/* 2. 右側の文章の「上」を画像の「上」に合わせる */
#concept .profile-text {
  flex: 1 !important;
  padding-top: 10px !important; /* 画像の丸みとの視覚的なバランス調整 */
}

#concept .profile-text p {
  font-size: 1.6rem !important;
  line-height: 1.9 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* 3. 横並びのコンテナの最終調整 */
#concept .profile-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important; /* これで上端が揃います */
  gap: 50px !important;
  max-width: 1000px !important;
  margin: 40px auto 0 !important;
}

/* #endregion */

/* スマホでは縦に並べる */
@media screen and (max-width: 768px) {
  #concept .profile-content {
    flex-direction: column !important;
    align-items: center !important;
  }
  #concept .profile-image {
    flex: 0 0 auto !important;
    width: 80% !important;
    margin-bottom: 20px;
  }
}
/* #endregion */



@media(max-width:768px){
  .concept{
    padding: 5.3rem 0 5rem;
  }
}
/* max-width:768px */

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

items

================ */
.items{
  padding: 10rem 3.73%;
}
.items ul{
  gap: 5%;
  /* 5rem / 1000px * 100 = 5% %の計算 */
}
.items li{
  width: calc((100% - 10%) / 3);
  /* ul全体の幅（この場合1000px）から余白分の50pxが2つあるので100pxを引いたものを3等分するという計算
  結果、伸縮しても同じ等分を保ってくれるようになる */
}
.items li h3{
  font-size: 3rem;
  font-weight: normal;
  border-bottom: 1px solid #fff;
  margin: 2rem 0 1rem;
  padding-bottom: 1rem;
  color: #fff;
  -webkit-text-stroke: 0.3px #fff;
  text-align: center;
}
.items li p{
  line-height: 1.625;
  color: #fff;
}


/* 2. 画像自体の設定 */
#items .inner li img {
    width: 100%;             /* 横幅をいっぱいにする */
    display: block;
    transition: transform 0.5s ease; /* 0.5秒かけてゆっくり拡大させる */
}

/* 3. マウスを乗せた（hover）時の動き */
#items .inner li:hover img {
    transform: scale(1.1);   /* 1.1倍にふわっと拡大 */
}

/* （おまけ）マウスを乗せた時に枠に少し影をつけるとかっこいいです */
#items .inner li:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}




@media(max-width:768px){
  .items{
    padding: 5rem 0;
  }
  .items ul{
    gap: 3rem;
    max-width: 400px;
  }
  .items li{
    width: 100%;
  }
  .items li h3{
    font-size: 3rem;
    margin: 1rem 0 0.7rem;
  }
  .items li p{
    line-height: 1.642;
  }
}
/* max-width:768px */

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

shop info

================ */
.shopinfo{
  padding-bottom: 10rem;
}
.shopinfo__ttl{
  padding-top: 26.5%;
  /* 高さ / 幅 * 100 = 比率
  heightでは%は効かないのでpadding-topもしくはpadding-bottomで高さをとる */
  position: relative;
  margin-bottom: 4rem;
}
.shopinfo__ttl .section-ttl{
  /* .shopinfoエリアの中の.section-ttlだけに適用する場合は.section-ttlだけでなく、.shopinfoもしくは.shopinfo__ttlの中の.section-ttlと書く */
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  color: #fff;
  font-size: 70px;
}
.shopinfo__ttl .section-ttl span::before{
  /* ::beforeにつけたborderの色だけを変える場合も同じく頭に.shopinfoもしくは.shopinfo__ttlをつけること */
  border-color: #fff;
  /* 今回はboderの色だけ変更なのでborder-colorとした。 */

  font-size: 1.6rem;
}
.shopinfo__detail{
  padding: 0 3.73%;
}
.map{
  width: 50%;
}
.map iframe{
  width: 100%;
}
.shopinfo table{
  width: 45%;
}
.shopinfo table th{
  width: 30.2%;
  text-align: left;
  font-weight: normal;
}
.shopinfo table tr{
  vertical-align: top;
}
.shopinfo .flexB{
  gap: 5%;
}


/* --- 温泉情報の微調整（追加分） --- */

/* テーブル内の行間を少し広げて読みやすくする */
.shopinfo table td {
  padding-bottom: 2rem;
  line-height: 1.8;
  vertical-align: top;
}

/* 項目名（th）を少し強調 */
.shopinfo table th {
  color: #333;
  font-weight: bold;
  white-space: nowrap; /* 項目名が途中で改行されないように */
}

/* スマホ時、エピソードが長くなっても読みやすいように余白を調整 */
@media(max-width:768px){
  .shopinfo table td {
    padding-bottom: 1.5rem;
    font-size: 1.4rem;
  }
}



@media(max-width:768px){
.shopinfo{
  padding-bottom: 5rem;
}
.shopinfo__ttl{
  padding-top: 43%;
  margin-bottom: 2rem;
}
.shopinfo .flexB{
  gap: 4rem;
}
.map{
  width: 100%;
  position: relative;
  padding-top: 64.84%;
}
.map iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.shopinfo table{
  width: 100%;
}
.shopinfo table tr{
  display: flex;
  flex-direction: column;
}
.shopinfo table th,.shopinfo table td{
  margin-bottom: 0.7rem;
}
.shopinfo table td{
  line-height: 1.43;
}
.shopinfo table br{
  display: none;
}
.shopinfo__ttl .section-ttl{
  /* .shopinfoエリアの中の.section-ttlだけに適用する場合は.section-ttlだけでなく、.shopinfoもしくは.shopinfo__ttlの中の.section-ttlと書く */
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  color: #fff;
  font-size: 4rem;
}



/* 1. 地図と文字の入った「箱」の設定 */
.shopinfo__detail .inner {
  display: flex !important;
  align-items: flex-start !important; /* 上端を揃える基本命令 */
  gap: 40px !important;
  padding-top: 50px !important;
}

/* スマホでは縦に並べる */
@media screen and (max-width: 768px) {
  #concept .profile-content {
    flex-direction: column !important;
    align-items: center !important;
  }
  #concept .profile-image {
    flex: 0 0 auto !important;
    width: 80% !important;
    margin-bottom: 20px;
  }
}



}
/* max-width:768px */

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

contact

================ */
.contact{
  background: #000;
  color: #fff;
  padding: 10rem 0;
  text-align: center;
}
.contact .section-ttl span::before{
  border-color: #fff;
}
.contact .contact_txt{
  font-size: 1.4rem;
  line-height: 1.7;
}
.contact .contact_btn{
  border: 1px solid #fff;
  display: block;
  /* aタグはインライン要素なので、そのままだとwidthは適用されない。幅を指定したいときはブロック要素（もしくはinline-block）にする */
  width: 400px;
  /* height: 50px;
  line-height: 50px; 
  1行テキストのボタンのみ適用可能*/
  padding: 1.6rem 0;
  /* 一般的な適用の仕方 */
  margin: 3rem auto;
}
.contact .contact_tel{
  font-size: 1.8rem;
  text-transform: uppercase;
  margin-bottom: 1.7rem;
}
.contact .contact_tel a{
  font-family: "Bowlby One SC", sans-serif;
  font-weight: bold;
  font-size: 3rem;
}
.contact .contact_hour{
  font-size: 1.4rem;
  letter-spacing: 0;
}

/* --- やり直し用：スライダー設定 --- */

/* 元の花の画像を消し、枠を確定させる */
.shopinfo__ttl {
  background: none !important;
  overflow: hidden; /* 画像が外に漏れるのを防ぐ */
}

/* スライダーを背景として配置 */
.onsen-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 画像を横一列に並べる */
.onsen-slider-inner {
  display: flex;
  width: 400%; /* 画像4枚分 */
  height: 100%;
  animation: onsen-scroll 60s linear infinite;
}

.onsen-slider-inner img {
  width: 25%; /* 400%の内の1枚分 */
  height: 100%;
  object-fit: cover;
}

/* 文字をスライダーより前に出す */
.shopinfo__ttl .section-ttl {
  z-index: 10;
}

/* 画像を少し暗くして文字を読みやすくする */
.onsen-slider::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.3);
}

/* アニメーション */
@keyframes onsen-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-75%); }
}

/* テーブル内の文字間隔の調整 */
.shopinfo table td {
  padding-left: 10px;
  line-height: 1.6;
}

/* --- テーブルのレイアウト調整 --- */

.shopinfo table {
  border-collapse: collapse; /* 隙間をなくして計算しやすくする */
}

.shopinfo table th {
  width: 120px;       /* 見出しの幅を固定して、縦のラインを揃える */
  padding: 15px 0;    /* 上下の余白 */
  text-align: left;
  vertical-align: top; /* 文字の開始位置を上に揃える */
  font-weight: bold;
  white-space: nowrap; /* 項目名が途中で改行されないようにする */
}

.shopinfo table td {
  padding: 15px 0 15px 20px; /* 左側に20pxの余白を作って見出しと離す */
  vertical-align: top;       /* 説明文が長くなっても上端で揃える */
  line-height: 1.7;          /* 行間を広げて読みやすくする */
}

/* スマホ用の調整（画面が狭い時） */
@media(max-width:768px){
  .shopinfo table th {
    width: auto;
    padding-bottom: 5px;
  }
  .shopinfo table td {
    padding-left: 0;
    padding-top: 0;
    margin-bottom: 20px;
  }
}

/* --- 「これからの目標」セクションのレイアウト復元 --- */

.contact {
  background: #000 !important; /* 背景を黒に固定 */
  color: #fff !important;      /* 文字を白に固定 */
  padding: 10rem 0 !important;
  text-align: center !important;
}
.contact p {
    line-height: 1.2;          /* 行の間隔をゆったりさせる（標準は1.5〜1.6） */
    letter-spacing: 0.05em;  /* 文字同士の横の間隔をわずかに広げて上品に */
}

.contact .section-ttl {
  color: #fff !important;
  margin-bottom: 4rem;
}

.contact .contact_txt {
  font-size: 1.6rem;
  line-height: 1.8;
  margin-bottom: 4rem;
  padding: 0 10%; /* 左右に少し余白を持たせる */
}
.contact_tel a {
 text-transform: none !important; /* アドレスを小文字に */
 font-size: 3rem !important;    /* スマホで見やすいサイズに微調整 */
}

/* ボタンのデザインをフォトショップに合わせる */
.contact .contact_btn {
  border: 1px solid #fff !important;
  color: #fff !important;
  text-decoration: none;
  display: inline-block; /* 中央寄せにするため */
  width: 400px;
  max-width: 90%; /* スマホではみ出さないよう */
  padding: 1.6rem 0;
  margin: 4rem auto 0;
  transition: 0.3s;
}

/* マウスを乗せた（ホバーした）時の動き */
.contact .contact_btn:hover {
  background-color: #ff0000 !important; /* YouTubeの赤色 */
  border-color: #ff0000 !important;
  color: #fff !important;
  transform: scale(1.05); /* 少しだけ大きくして「ボタン感」を出す */
  transition: all 0.3s ease;
}

/* お問い合わせセクションのロゴ調整 */
.contact_logo {
    text-align: center;
    margin-bottom: 20px;
}

.contact_logo img {
    width: 150px; /* ロゴの大きさを調整 */
    height: auto;
    margin-top: 20px;
}


@media screen and (max-width: 768px) {
    .contact_logo img {
        width: 100px; /* スマホでは少し小さくする */
    }
}




@media(max-width:768px){
  .contact{
    padding: 5rem 1.4rem 8rem;
  }
  .contact p {
    line-height: 1.2;          /* 行の間隔をゆったりさせる（標準は1.5〜1.6） */
    letter-spacing: 0.05em;  /* 文字同士の横の間隔をわずかに広げて上品に */
}

  .contact .contact_txt{
    line-height: 1.642;
    text-align: left;
    display: flex;
    justify-content: center;
  }
  .contact .contact_btn{
    width: 300px;
    padding: 1.2rem 0;
    margin-top: 4rem;
  }
  .contact .contact_tel{
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
  }
  .contact .contact_tel a{
    font-size: 2.4rem;
  }
}
/* max-width:768px */

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

footer

================ */
footer{
  background: #000;
  color: #fff;
  padding: 2.1rem 3.73%;
  font-size: 1.2rem;
}
@media(max-width:768px){
  footer{
    padding: 2rem 0;
    text-align: center;
    font-size: 1rem;
  }
}
/* max-width:768px */


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

Contact Page

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

.contact-page{
  padding: 10rem 0;
}
.contact-page__read-txt{
  line-height: 2;
  margin-bottom: 3.2rem;
}
.contact-page__tel-box{
  border: 1px solid #000;
  max-width: 400px;
  margin: 0 auto 4.5rem;
  padding: 2rem 0;
  text-align: center;
}
.tel-box__ttl{
  font-size: 1.6rem;
  font-weight: normal;
  margin-bottom: 1.1rem;
}
.tel-box__tel{
  text-transform: uppercase;
  font-size: 2.4rem;
  margin-bottom: 0.7rem;
}
.tel-box__tel a{
  color: #3f3f3f;
  font-size: 3rem;
  font-family: "Bowlby One SC", sans-serif;
  font-weight: bold;
}
.tel-box__hour{
  font-size: 1.4rem;
}
.required{
  background:#fd5460;
  color: #fff;
  font-size: 1rem;
  display: inline-block;
  padding: 0.3rem 0.4rem;
}
.form__txt{
  margin-bottom: 2rem;
}
.form__txt .required{
  margin-right: 0.5rem;
}
.form__list{
  margin-bottom: 6rem;
}
.form__list dt{
  background: #e1e1e1;
  padding: 1rem 0 0.9rem 1.5rem;
}
.form__list dt .required{
  margin-left: 1rem;
  position: relative;
  top: -1px;
}
.form__list dd{
  padding: 1.6rem;
}

/* form parts reset */
input,textarea{
  appearance: none;
  outline: none;
  /* どちらもフォーム特有のスタイルを打ち消すためのCSS */
}
input::placeholder,textarea::placeholder{
  color: #e1e1e1;
  /* 入力見本の文字色を設定 */
}
.textbox,.textarea{
  border: 1px solid #e1e1e1;
  padding: 1.3rem 2rem 1.5rem;
  width: 100%;
  border-radius: 5px;
}
.radio{
  width: 16px;
  height: 16px;
  border: 1px solid #e1e1e1;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.5rem;
  margin-left: 7rem;
}
.radio:first-of-type{
  margin-left: 0;
}
/* ラジオボタンを選択したとき */
.radio:checked{
  background: #e1e1e1;
  box-shadow: 0 0 0 1px #fff,0 0 0 2px #e1e1e1;
  /* 
  今回使ったbox-shadowは影としての使用ではなく、線を作るために使用した。0 0 0 は左からXの距離、Yの距離、ぼかしになるが全て0にし、最後の影の範囲のみ適用。左側から内側→外側に線ができる仕組み。
  */
}
.form__list dd:nth-of-type(6){
  padding: 3.3rem 1.6rem 2.7rem;
}
.form__list dd:last-of-type(6){
  padding: 3.3rem 1.6rem 2.7rem;
}
.textarea{
  height: 160px;
  min-height: 160px;
}
.submit-btn{
  background: #000;
  color: #fff;
  display: block;
  width: 360px;
  margin: 0 auto;
  /* height: 60px; 
  buttonタグに関してだけ、heightを入れることで高さ＆テキストを上下中央に配置される*/
  padding: 2.2rem 0;
}

@media(max-width:768px){
  .contact-page{
  padding: 5rem 0 6rem;
}
.contact-page .inner{
  padding: 0 1.2rem;
 }
  .contact-page__read-txt{
    margin-bottom: 2rem;
    letter-spacing: 0;
  }
  .contact-page__tel-box{
    padding: 1.8rem 0 2.4rem;
    margin-bottom: 3rem;
  }
  .tel-box__ttl{
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  .tel-box__tel{
    font-size: 1.2rem;
    margin-bottom: 1.1rem;
  }
  .tel-box__tel a{
    font-size: 2.4rem;
  }
  .tel-box__hour{
    font-size: 1.2rem;
  }
  .form__txt{
    margin-bottom: 2.8rem;
  }
  .form__txt .required{
    margin-right: 1.2rem;
  }
  .form__list{
    margin-bottom: 4rem;
  }
  .form__list dt{
    padding: .9rem 0 .9rem 1.2rem;
  }
  .form__list dd{
    padding: 2rem 0 2.8rem;
  }
  .textbox,.textarea{
    padding: 1rem 1.2rem .8rem;
  }
  .form__list dd:nth-of-type(6){
    padding: 1.9rem 0 2.7rem;
  }
  .radio{
    margin-right: 0.4rem;
    margin-left: 5.2rem;
    margin-bottom: 1.8rem;
    vertical-align: top;
  }
  .sp_onry{
    display: block;
  }
  .radio:nth-of-type(3){
    margin-left: 0;
  }
  .radio:nth-of-type(n+3){
    margin-bottom: 0;
  }
  .textarea{
    height: 150px;
    min-height: 150px;
  }
  .submit-btn{
    width: 100%;
    padding: 1.8rem 0;
  }
  .contact .contact_tel{
    font-size: 1rem;
  }
  .contact .contact_tel a{
    font-size: 2rem;
  }
}

/* プロフィールと同じ「表の見た目」だけを強制する */
.design-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid #333 !important; /* 外枠 */
    margin-top: 20px !important;
}

.design-table th, 
.design-table td {
    border: 1px solid #333 !important; /* 中の格子線 */
    padding: 15px !important;           /* プロフィールと同じ余白 */
    text-align: left !important;
    font-size: 1.5rem;
}

.design-table th {
    background-color: #f4f4f4 !important; /* 項目側のグレー */
    width: 140px !important;              /* 項目幅をプロフィールと統一 */
    font-weight: bold;
}

.design-table td {
    background-color: #fff !important;
    line-height: 1.6;
}



@media screen and (max-width: 768px) {
    /* 1. 画像を確実にセンターに配置 */
    .profile-image {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* 子要素（img）を中央へ */
        margin-bottom: .2px !important;
    }

    .profile-image img {
        width: 250px !important;
        height: 250px !important;
        margin: 0 !important; /* flexで制御するため0にする */
        display: block !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    /* 2. 地図と場所（表）の間を空ける */
    .shopinfo__detail .map {
        margin-bottom: 20px !important; /* 地図の下に隙間を作る */
    }

    /* 3. 「思い出」の下の変な空間を消し、格子を整える */
    .design-table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 0 !important; /* 表自体の下の余白をリセット */
    }

    .design-table tr {
        display: table-row !important;
    }

    .design-table th, 
    .design-table td {
        display: table-cell !important;
        border: 1px solid #333 !important;
        padding: 12px 10px !important;
        vertical-align: middle !important;
    }

    /* tdの中にある余計な余白を消す（変な空間の原因） */
    .design-table td p {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. VISIONの文章とメールアドレス周り */
    .contact_txt {
        white-space: pre-wrap !important;
        line-height: 2 !important;
        padding: 0 20px !important;
    }

    

    .contact_tel {
        margin-top: 40px !important;
        font-size: 2rem;
    }
}

@media screen and (max-width: 768px) {

    /* 1. 「ご依頼・お問い合わせ」と「アドレス」を上下に分けて間を空ける */
    .contact_tel {
        margin-top: 40px !important;
        text-transform: none !important; /* 大文字を解除 */
        line-height: 2.5 !important;    /* 行の間隔を広げて隙間を作る */
    }

    .contact_tel a {
        display: block !important;       /* アドレスを強制的に次の行へ送る */
        text-transform: none !important; /* アドレスを小文字に */
        font-family: sans-serif !important; /* 見やすいフォントに */
        font-size: 2rem !important;    /* スマホで見やすいサイズに微調整 */
    }
}

/* PC画面（769px以上）の調整 */
@media screen and (min-width: 769px) {

    /* 1. プロフィール画像を縦中央にする（これは現状維持） */
    #concept .profile-content {
        display: flex !important;
        align-items: center !important;
    }

    /* 2. 地図と表の親要素：高さを揃える魔法の命令 */
    .shopinfo__detail .inner.flexB {
        display: flex !important;
        align-items: stretch !important; /* これで左右の背の高さを揃えます */
    }

    /* 3. 左側の地図エリア：高さを自動にする */
    .shopinfo__detail .map {
        flex: 1; /* 幅を柔軟に */
        height: auto !important; /* 450px固定を解除 */
        display: flex !important;
    }

    .shopinfo__detail .map iframe {
        height: 100% !important; /* 親（450px）と同じ高さまで伸びる */
        width: 100% !important;
    }

    /* 4. 右側の表：高さを100%にして、地図と同じにする */
    .shopinfo__detail table {
        height: 100% !important; /* これで下の隙間が埋まります */
        margin: 0 !important;
        flex: 1; /* 幅を柔軟に */
    }

    /* 5. 表の文字を縦方向の真ん中に配置する */
    .shopinfo__detail table th,
    .shopinfo__detail table td {
        vertical-align: middle !important;
        padding: 20px !important; /* 伸びた分、少し余白があると綺麗です */
    }
}

/* --- プロフィールから地図まで背景を繋げる設定 --- */
main {
    background-image: url(../images/nekotohukurou.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* スクロールしても動かないように固定 */
    position: relative;
    z-index: 0;
}

/* --- スマホ版（768px以下）の調整 --- */
@media screen and (max-width: 768px) {
    main {
        /* スマホ用の背景画像に切り替え */
        background-image: url(../images/nekotohukurou_sp.jpg) !important;
    }

    /* MV（メインビジュアル）の崩れを修正 */
    .mv {
        height: auto !important;
        min-height: 300px; /* MVが潰れないように高さを確保 */
    }

    .mv img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    .mv__ttl {
        font-size: 4rem !important; /* 文字が大きすぎる場合はここで調整 */
        width: 90%;
    }

    /* 地図セクションの背景を地図の下までしっかり伸ばす */
    .shopinfo {
        padding-bottom: 5rem;
    }
}



/* --- 共通の戻るボタンデザイン --- */
.back-to-roots,
.back-to-top {
    text-align: center;
    margin-top: 50px; /* 上の要素との間隔 */
}

.back-btn {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid #fff;
    color: #fff !important;
    font-size: 1.5rem;
    text-decoration: none;
    background-color: #000; /* 背景が透けるように設定 */
    transition: all 0.3s ease;
}

/* ホバー時（マウスを置いた時） */
.back-btn:hover {
    background-color: #fff;
    color: #000 !important;
    transform: translateY(-3px);
}

/* ページ最上部へ戻るボタンは、夜空の背景に合わせて少し白っぽくしても綺麗です */
.back-to-top .back-btn {
    border-color: #fff;
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.3);
}

.back-to-top .back-btn:hover {
    background-color: #fff;
    color: #000 !important;
}

/* スルスルとスクロールさせる設定 */
html {
    scroll-behavior: smooth;
}



/* --- 流れ星の演出（強化版） --- */
.shooting-star-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.shooting-star {
    position: absolute;
    top: -10%;
    width: 8px; /* 太さを2pxから4pxにアップ */
    height: 300px; /* 長さを長くして勢いを出す */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    opacity: 0;
    /* 光の輝き（グロー効果）を追加 */
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
    animation: shooting-animation 6s infinite ease-in;
}

/* 各星の出現位置とタイミングをバラバラにする */
.shooting-star:nth-child(1) { left: 80%; animation-delay: 0s; }
.shooting-star:nth-child(2) { left: 40%; animation-delay: 2.5s; }
.shooting-star:nth-child(3) { left: 60%; animation-delay: 5s; }
.shooting-star:nth-child(4) { left: 20%; animation-delay: 7.5s; }

@keyframes shooting-animation {
    0% {
        top: -150px;
        transform: translateX(0) rotate(45deg);
        opacity: 0;
    }
    1% {
        opacity: 1; /* 流れ始めた瞬間にパッと光る */
    }
    20% {
        /* 画面を横切る動き：translateXを大きくしてスピード感を出す */
        top: 100%;
        transform: translateX(-800px) rotate(45deg);
        opacity: 0;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}


/* --- 1. 背景専用レイヤーの設定 --- */
.bg-layer {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -10; /* 一番奥に配置 */
    
    /* これまでmainに書いていた背景設定をここに移動 */
    background-image: url(../images/nekotohukurou.png);
    background-size: cover;
    background-position: center;
    /* fixedは position:fixed で実現しているので不要 */
}

/* --- 2. 流れ星の設定（真ん中に配置） --- */
.shooting-star-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5; /* 背景(-10)より手前、コンテンツ(0以上)より奥 */
    pointer-events: none;
}

/* --- 3. メインコンテンツの設定（手前に配置） --- */
main {
    position: relative;
    z-index: 1; /* 星(-5)より手前 */
    background: transparent !important; /* main自体の背景は透明にする */
}

/* main::before（白いベール）を使っていた場合は、それも調整 */
main::before {
    display: none; /* 一旦消すか、bg-layerの中に移す必要があります */
}
@media screen and (max-width: 768px) {
    /* mainではなく、bg-layerの画像を変える */
    .bg-layer {
        background-image: url(../images/nekotohukurou_sp.jpg) !important;
    }
    
    main {
        background: transparent !important;
    }
}

/* 特定の文字を赤くする設定 */
.highlight-red {
    color: #ff4d4d; /* 少し鮮やかで読みやすい赤 */
    font-weight: bold; /* 強調するために太字にするのがおすすめ */
}

.highlight-blue {
    color: #c3f2ff; /* 少し鮮やかで読みやすい赤 */
    font-weight: bold; /* 強調するために太字にするのがおすすめ */
}