@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Montserrat:wght@300;400;500&display=swap");
.br-lg {
  display: none;
}

@media only screen and (max-width: 1200px) {
  .br-lg {
    display: block;
  }
}

.br-md {
  display: none;
}

@media only screen and (max-width: 991.98px) {
  .br-md {
    display: block;
  }
}

.br-sm {
  display: none;
}

@media only screen and (max-width: 767.98px) {
  .br-sm {
    display: block;
  }
}

.br-xs {
  display: none;
}

@media only screen and (max-width: 575.98px) {
  .br-xs {
    display: block;
  }
}

@font-face {
  font-family: "Canter";
  src: url("../FONTS/CanterBold.otf") format("opentype");
}

@font-face {
  font-family: "poppins.extralight";
  src: url("../FONTS/poppins.extralight.ttf") format("truetype");
}

@font-face {
  font-family: "poppins.light";
  src: url("../FONTS/poppins.light.ttf") format("truetype");
}

@font-face {
  font-family: "poppins.medium";
  src: url("../FONTS/poppins.medium.ttf") format("truetype");
}

body {
  font-family: "poppins.extralight";
}

h1, h2, h3, h4, h5 {
  font-family: 'Lora', serif;
}

p {
  line-height: 2em;
  letter-spacing: 0.2em;
}

@media screen and (max-width: 575.98px) {
  p {
    font-size: 0.8em;
    line-height: 2em;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
  }
}


ul {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  list-style: none;
}


.table {
  --bs-table-bg:none;
}

.canter {
  font-family: 'Canter';
  font-size: 3em;
  letter-spacing: 0.3em;
}

.cantercen {
  font-family: 'Canter';
  text-align: center;
  font-size: 3em;
  letter-spacing: 0.3em;
}

.canter2 {
  font-size: 2.2em;
  font-family: 'Canter';
  text-align: center;
  letter-spacing: 0px ;
}

.poppin {
  font-family: 'poppins.light';
  font-size: 1.5em;
  letter-spacing: 0.1em;
}

.navbar {
  font-family: 'Canter';
  font-size: 36px;
}

.navbar .nav-link, .navbar .dropdown-item {
      color: white;
    }

    .navbar .nav-link:hover, .navbar .dropdown-item:hover {
      color: #ccc;
    }

    .navbar .nav-link {
      padding-top: 1px;
      padding-bottom: 1px;
    }


.bg-body-tertiary {
  --bs-bg-opacity: 1;
  background-color: black !important;
}

.hero {
  background: url("../IMG/herobg2.jpg") center center/cover no-repeat fixed;
  height: 100vh;
}

/* モバイル用の背景画像設定 */
@media screen and (max-width: 575.98px) {
  .hero {
    background: url("../IMG/mobile_bg.png") no-repeat;
    background-size: 100%; /* 画像を縮小（ズームダウン）して表示する */
    background-position: center 60%; /* 画像を中央に配置 */
    background-color: black; /* 背景が足りない部分を黒にする */
    height: 100vh;
  }
}

/* ロゴのスタイル */
.herologo {
  max-width: 280px;
  max-height: 280px;
}

@media screen and (max-width: 575.98px) {
  .herologo {
    max-width: 180px;
    max-height: 180px;
  }
}


@media screen and (max-width: 575.98px) {
  .box {
   	padding-left: 5px;
	padding-right: 5px; 
  }
}


.contact-info {
    text-align: center; /* テキストを中央揃え */
	margin-top: 50px;
    font-size: 0.9em; /* 文字を小さく */
    line-height: 1.3; /* 行間の調整（必要に応じて変更） */
}

@media screen and (max-width: 575.98px) {
  .contact-info {
    text-align: center; /* テキストを中央揃え */
    font-size: 0.7em; /* 文字を小さく */
    line-height: 1.2; /* 行間の調整（必要に応じて変更） */
}
}


.brand table img {
  max-width: 100%;
}

.brand table td {
  padding: 0px;
  max-width: 110px;
}

.index-left img {
  width: 100%;
}

.index-right {
  font-size: 0.8em;
  text-align: end;
}

.index-right a {
  color: white;
  text-decoration: none;
}

.index-right h3 {
  font-family: "AvenirRegular";
  font-size: 1.1em;
}

@media screen and (max-width: 575.98px) {
  .index-right {
    text-align: center;
    padding-top: 70px;
    font-size: 0.5em;
  }
}

footer {
  background: black;
  color: white;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.about {
  padding-top: 80px;
  height: auto;
  background-color: black;
  color: white;
}

@media screen and (max-width: 575.98px) {
  .about {
    padding-top: 110px;
    height: auto;
  }

}

.aboutimg {
  width: 100%; 
  height: auto; 
  max-width: 600px;
}


.staff {
  border: #d3d1d1 3px solid;
  padding: 50px;
  font-family: 'Lora', serif;
  font-weight: lighter;
}

.staff table th {
  padding-right: 60px;
  padding-bottom: 10px;
}

.staff h3 {
  font-family: 'Canter';
  font-size: 60px;
  text-align: center;
}

.staffimg {
　display: block;
  margin: 0 auto;
  max-width: 330px;
  display: block;
  text-align: center;	
  margin-top: 70px;
}

@media screen and (max-width: 575.98px) {
  .staffimg  {
    max-width: 260px;
	margin-bottom: 100px;
	margin-top: 70px;
  }
}


.giftimg {
 display: block;
  margin: 0 auto;
　width: 100%; 
  height: auto; 
  max-width: 800px; 
  margin-top: 80px;
  text-align: center;
}



@media screen and (max-width: 575.98px) {
  .staff {
  	border: #d3d1d1 3px solid;
  	padding: 20px;
	font-size: 0.8em;
	}
	.staff h3 {
  	font-size: 55px;
	}
}


/* Book Now 右揃え */
.book-now {
  text-align: right;
  font-family: 'poppins.extralight';
  font-size: 1.3em;
  letter-spacing: 0.1em;
  margin-bottom: 50px;
}


.book-now a {
  color: white; /* リンクも白色 */
  text-decoration: none; /* 下線削除 */
}

.book-now a:hover {
  color: white; 
  text-decoration: none; 
}


iframe {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

@media screen and (max-width: 575.98px) {
  iframe {
    max-width: 350px;
    max-height: 200px;
  }
}

.accessright .table {
  --bs-table-color: white;
}

.accessright h4 {
  text-align: center;
  font-size: 60px;
  font-family: 'Canter';
}

i {
  color: white;
  font-size: 2em;
}


/* 価格表のスタイル */
.price {
  padding-top: 100px;
  background-color: #d3d1d1;
}

.price-category {
  padding-bottom: 100px;
  width: 80%;
}

.price-category ul {
  list-style: none;
  font-size: 12px;
  padding-left: 0;
}

.price-category ul li {
  padding-bottom: 10px;
}

.price-title {
  font-family: 'Canter';
  font-size: 11em;
  display: inline;
}

.price-title2 {
  font-family: 'Canter';
  font-size: 11em;
  display: inline;
}

@media screen and (max-width: 575.98px) {
  .price-title {
    font-size: 5em;
    display: inline;
    margin-left: -5px;
  }
  .price-title2 {
    font-size: 4.2em;
    display: inline;
    margin-left: -5px;
  }
}

.price-title-btm {
  font-size: 22px;
  display: inline;
  letter-spacing: -0.01em;
  margin-left: -12px;
}

.price-title-btm2 {
  font-size: 22px;
  display: inline;
  letter-spacing: -0.01em;
  margin-left: 7px;
}

/* リスト全体を右揃えにし、グリッドの価格に合わせる */
.price-title-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  padding-right: 15px;
  line-height: 0.25;
}

/* price-sub, tmenu-sub のスタイル */
.price-sub, .tmenu-sub {
  font-family: 'Lora', serif;
  font-size: 0.6em;
  font-weight: 600;
  line-height: 90%;
  margin-bottom: 10px; /* 各要素の間に余白を追加 */
}

/* tmenu-sub を2行で下揃えにするためのスタイル */
.tmenu-sub {
  display: flex;
  align-items: flex-end;  /* コンテンツを下に揃える */
  margin-bottom: 15px; /* 下に余白を追加 */
}

/* Inc.Toner などの小さい文字用 */
.price-sub2 {
  font-family: 'Lora', serif;
  letter-spacing: -0.01em;
  font-size: 0.6em;
  font-weight: 700;
}

.price-sub3 {
  font-family: 'Lora', serif;
  letter-spacing: -0.01em;
  font-size: 0.55em;
  font-weight: 700;
  text-align: center;
}

/* text-center と fw-normal のフォントを Poppins に変更 */
.text-center, .fw-normal {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  margin-bottom: 10px;
}

/* 4列のグリッド設定 */
.price-grid {
  display: grid;
  grid-template-columns: 55% repeat(3, 15%);
  gap: 0;
  width: 100%;
  line-height: 1.8;
}

/* 5列のグリッド設定 */
.price-grid2 {
  display: grid;
  grid-template-columns: 50% repeat(4, 12.5%);
  gap: 0;
  width: 100%;
  line-height: 1.8;
}

/* 金額部分と EX-S, S, M の中央揃え */
.price-sub, .price-grid .text-center, .price-grid2 .text-center {
  text-align: center;
  display: inline-block;
  justify-content: center;
  font-size: 0.7em;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* tmenu-sub と fw-normal を左揃え */
.tmenu-sub, .fw-normal {
  text-align: left;
  font-size: 0.7em;
  padding-left: 0;
  margin-left: 0;
  line-height: 1.2;
}

/* Cut & Head Spa と COLOUR の間にスペースを追加 */
.price-grid .fw-normal:last-child {
  margin-bottom: 20px;
}

/* グリッド内のアイテムに同じ幅を適用 */
.price-grid div, .price-grid2 div {
  padding-right: 0;
  margin-right: 0;
  width: 100%;
  line-height: 1.6;
}

.small-text {
  font-size: 0.7em;
  font-weight: normal;
  margin-left: 2px;
}

/* モバイル幅での調整 */
@media screen and (max-width: 575.98px) {
  .price-grid {
    grid-template-columns: 55% repeat(3, 15%);
  }

  .price-grid2 {
    grid-template-columns: 50% repeat(4, 12.5%);
  }

  .price-title-detail li {
    font-size: 0.7em;
  }

  .tmenu-sub, .fw-normal, .price-grid .text-center, .price-grid2 .text-center {
    font-size: 0.7em;
    padding: 0;
  }

  .price-sub {
    font-size: 0.7em;
    padding: 0;
  }
}

/* タブレットやPC用のフォントサイズ調整 */
@media screen and (min-width: 576px) {
  .tmenu-sub, .fw-normal, .price-grid .text-center, .price-grid2 .text-center, .price-sub {
    font-size: 1em;
  }
}






/* 営業時間デフォルトはPC向け、大きめの文字サイズ */
.grid-item {
  font-size: 18px; /* PCなどの大きな画面向けのフォントサイズ */
  padding: 10px;
  border: 1px solid #ccc; /* アイテムを分かりやすくするための枠線 */
}

/* モバイル対応: 幅が768px以下のときに文字を小さくする */
@media (max-width: 768px) {
  .grid-item {
    font-size: 14px; /* モバイル端末向けのフォントサイズ */
  }
}

/* さらに狭い幅（例：500px以下）のときはさらに小さく */
@media (max-width : 403px ){
  .grid-item {
    font-size: 12px; /* さらに小さいフォントサイズ */
  }
}

.heading {
  font-weight: bold;
}










/* コンテナ全体のスタイル */
.opening-hours-container {
  padding: 20px;
}

/* タイトルを左揃えにする */
.title {
  font-size: 2.5em;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  text-align: left; /* 左揃え */
}

/* グリッドコンテナのスタイル */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 常に3列表示 */
  gap: 100px;
  padding: 20px;
  text-align: center; /* グリッド内の要素を中央揃え */
}

/* グリッドアイテムのスタイル */
.grid-item {
  border: none; /* 枠線を消す */
}

/* グリッドアイテムのスタイル */
.grid-item h4 {
  font-size: 2.6em;
  margin-bottom: 10px;
  font-family: 'Canter';
  letter-spacing: 0px ;
}

/* 時間表示用のグリッド */
.hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 曜日と時間を2列に分割 */
  gap: 10px;
  text-align: left;
}


/* ソーシャルアイコンのスタイル - 左揃えで横並び */
.social-icons {
  margin-top: 10px; /* アイコンと曜日リストの間に少し余白を追加 */
  text-align: left; /* 左揃え */
}

.social-icons a {
  text-decoration: none;
  color: white;
  font-size: 0.7em;
  margin-right: 10px; /* アイコンの間隔を調整 */
}

.social-icons a:hover {
  color: #808080; /* ホバー時の色を変更 */
}

.bi-instagram {
  font-size: 1.2em; 
}

.bi-facebook {
  font-size: 1.2em; 
}


/* 曜日と時間それぞれのスタイル */
.hours-grid .day {
  font-weight: bold;
}

.hours-grid .time {
  text-align: right;
	color: #a9a9a9; 
}

/* モバイル用の文字サイズの調整 */
@media (max-width: 768px) {
  .title {
    font-size: 2em;
  }

  .grid-item h4 {
    font-size: 2.6em;
  }

  .hours-grid .day, .hours-grid .time {
    font-size: 0.9em;
  }

  .grid-container {
    gap: 20px;
    padding right: 10px;
	padding-left: 0px;  
	justify-items: start; /* モバイルでも左寄せ */
  }
}



.fsm{
	 font-size: 0.7em;
	 line-height:1.3em;
	 font-family: "poppins.extralight";
  }

.fsxm{
	 font-size: 0.6em;
	 line-height:1.3em;
	 font-family: "poppins.extralight";
  }

.fmm{
	 font-size: 0.9em;
	 font-family: "poppins.extralight";
  }


/* フッター全体を中央揃え */
footer {
  text-align: center;
}

/* ソーシャルアイコンのスタイル */
.social-icons2 {
  margin-top: 10px; /* 上部との間に余白を追加 */
}

.social-icons2 a {
  text-decoration: none;
  color: white; /* 必要に応じて色を変更 */
  font-size: 0.9em; /* アイコンのサイズ */
  margin: 0 2px; /* アイコン間の距離を調整 */
}

.social-icons2 a:hover {
  color: #808080; /* ホバー時の色 */
}




footer h5 {
  color: white; /* すべてのテキストを白色に */
}

footer a {
  color: white; /* リンクも白色にする */
  text-decoration: none; /* 下線を削除する */
}

footer a:hover {
  color: white; /* ホバー時も白色のまま */
  text-decoration: none; /* ホバー時の下線を消す */
}



/* 左側の背景を白、文字を黒にする */
.form-section {
    background-color:#ffffff; /* 背景色を白にする */
    padding: 60px 30px 60px 15px;
    color: black; /* 文字色を黒にする */
	font-size: 0.5em; 
	font-family: "poppins.light";
}

.form-field {
    margin-bottom: 10px;
}

.field-line {
    border-bottom: 1px solid black; /* 下線を黒にする */
    margin-top: 25px;
    height: 2px;
}

.field-options {
    margin-top: 5px;
	font-size: 1.4em;
	font-family: "poppins.medium";
    color: black; /* 文字を黒にする */
}

.option-separator {
    margin: 0 10px;
    color: black; /* 区切り線も黒に */
}

/* 右側のテキストセクション */
.text-section {
    line-height: 1.5;
}