@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');
/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;

}
html {
	font-size: 62.5%;
}
body, table, input, textarea, select, option,button {
    font-family: 'Noto Sans Japanese', sans-serif;

}
p,li{  font-weight: 600;
  letter-spacing: 0.2rem;
  font-size: 1.6rem;
  line-height: 3rem;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
img {
	vertical-align: top;
	max-width: 100%;
    height: auto;
}
a,
a:link {
	text-decoration: none;
}


.fade-in {
  opacity: 0; 
  transform: translateY(50px); 
  transition: opacity 1s ease-out, transform 1s ease-out; 
}

.fade-in.visible {
  opacity: 1; 
  transform: translateY(0); 
}


/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
    width:100%;
	color: #000;
	background-color: #FFF;
    margin:auto;
}
body.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#container {
    overflow: hidden;
	text-align: left;
}
#main {
    margin-bottom: 7rem;
    display: block;
}
a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}
.heading-container {
    text-align: center;
  }
@media all and (min-width: 750px) {
	.sp {
		display: none !important;
	}
}
@media all and (max-width: 750px) {
	body {
		min-width: inherit;
		font-size: 1.2rem;
	}
	a:hover,
	a:hover img {
		opacity: 1 !important;
	}
	.pc {
		display: none !important;
	}
	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
    #main {
        margin-bottom: 3rem;
    }
  }
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
@media (min-width: 751px) {
#gHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: top 0.3s ease-in-out; /* トップ位置の変更にトランジション効果を追加 */
}

#gHeader.hidden {
  top: -120px; /* ヘッダーを隠す位置 */
  opacity: 0; /* ヘッダーを透明にする */
  transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out; /* トップ位置と透明度の変更にトランジション効果を追加 */
}

#gHeader.visible {
  top: 0px; /* ヘッダーを表示する位置 */
  opacity: 1; /* ヘッダーを不透明にする */
  transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out; /* トップ位置と透明度の変更にトランジション効果を追加 */
}
.hInner {
  width:100% ;
  height: 120px;
  background-color: #000;
  margin: 0 auto;
}
.headmenu{
  max-width: 1000px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左寄せ */
  margin: 0 auto;
  padding:20px;
}
.headmenu h1 {
  flex-shrink: 0; /* ロゴが縮小するのを防ぐ */
  margin: 0px auto 0 0 ; 
}
.headmenu ul {
  display: flex;
  align-items: center;
}
/* メニュー項目のスタイル */
.headmenu ul li.gmenus {
  position: relative; /* ::after のための相対位置 */
  margin-right: 3rem; /* 項目間の余白 */
  line-height: 40px;
}

/* リンクのスタイル */
.headmenu ul li.gmenus a {
  display: block; /* リンクをブロック要素にする */
  text-decoration: none; /* リンクの下線を削除 */
  position: relative; /* ::after のための相対位置 */
  overflow: hidden; /* ボーダーが外にはみ出さないようにする */
  padding-bottom: 1rem;
}

/* 初期状態の下ボーダー */
.headmenu ul li.gmenus a::after {
  content: '';
  position: absolute;
  left: 50%; /* 左端から50%の位置に設定 */
  bottom: 0;
  transform: translateX(-50%); /* ボーダーの中央を要素の中央に合わせる */
  width: 8px; /* 初期状態の幅 */
  height: 1px; /* ボーダーの高さ */
  background-color: #CBA422; /* ボーダーの色 */
  transition: width 0.3s ease, left 0.3s ease, transform 0.3s ease; /* アニメーション効果 */
}

/* ホバー時のスタイル */
.headmenu ul li.gmenus a:hover::after {
  width: 100%; /* ボーダーの幅を全幅に */
  left: 0; /* ホバー時の左端の位置 */
  transform: translateX(0%); /* ホバー時の変形をリセット */
}
.headmenu a:hover{
 opacity: 0.8;
}
.headmenu ul li.yoyaku {
  margin-right: rem;

}
.headmenu ul li.yoyaku a{
color: #fff;
font-size: 1.2rem;
font-weight: 300;
border: #fff 1px solid;
border-radius: 50px;
padding:.8rem 2.5rem;
}
.headmenu ul li.sns {
  margin-top: 10px;
  margin-left: 2rem;
}
}
/* スマートフォン用のスタイル（幅750px以下） */
@media (max-width: 750px) {
  /* ImageMap用の画像スタイル */
  .mall {
      position: fixed; /* 画面の最下部に固定 */
      bottom: 0;
      left: 0;
      width: 100%; /* 画像を画面幅に合わせる */
      z-index: 1111; /* 他の要素より高いz-index */
  }

  /* ヘッダー部分の固定スタイル */
  .hInner.sp {
      position: fixed; /* 画面の最下部に固定 */
      bottom: 0;
      width: 100%;
      padding: 2rem;
      background-color: #000;
      z-index: 200; /* ハンバーガーメニューより高いz-index */
  }
    /* ハンバーガーメニューのスタイル */
    .openmenu {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 50px;
      padding-top: 2rem;
      transform: translateY(100%);
      transition: transform 0.5s ease;
      background-color: #222;
      z-index: 100;
      height: 40vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  .openmenu li {
      margin-bottom: 1rem; /* 項目間のマージン */
      text-align: left; /* テキスト中央揃え */
      
  }

  .openmenu li img {
      width: 50%; /* 画像の幅 */
      height: auto; /* 画像の高さ */
      margin-left: 40px;
  }


  .openmenu.active {
      display: block;
      animation: slideUp 0.5s ease forwards;
  }

  @keyframes slideUp {
      from {
          transform: translateY(100%);
      }
      to {
          transform: translateY(0);
      }
  }

  .openmenu.closing {
      animation: slideDown 0.5s ease forwards;
  }

  @keyframes slideDown {
      from {
          transform: translateY(0);
      }
      to {
          transform: translateY(100%);
      }
  }
}

/* 初期状態としてのスライドアップアニメーションを設定 */
.opening-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #CAA422; /* 黄色の背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  overflow: hidden; /* はみ出た内容を非表示に */
  z-index: 99999;
}

/* ロゴのフェードイン */
.opening-logo {
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards; /* 1秒かけてフェードイン */
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* スライドアップアニメーション */
@keyframes opslideUp {
  from { top: 0; }
  to { top: -100%; }
}



/*------------------------------------------------------------
	mainimg
------------------------------------------------------------*/

.video-container {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

.centered-logo, .centered-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.centered-logo {
  top: 50%;
  transform: translate(-50%, -50%);
}

.centered-text {
  top: 60%; /* ロゴの下に配置 */
}

.centered-text h2 {
  text-align: center;
  font-size: 1.8rem;
  color: #fff;
  letter-spacing: .9rem;
  font-weight: 600;
  margin-top: 10rem;
  text-wrap: nowrap;
}

.l-section-container {
  position: absolute;
  width: 100%;
  bottom: 0;
}

.c-scrolldown {
  width: 2px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden;
}

.c-scrolldown .c-line {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 50%);
  background-position: 0 -100px;
  background-size: 100% 200%;
  animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}

@keyframes scrolldown {
  0% {
      background-position: 0 -100px;
  }
  75% {
      background-position: 0 0;
  }
  100% {
      background-position: 0 100px;
  }
}
/* スマートフォン用のスタイル */
@media (max-width: 750px) {
  .mainimg {
      background-image: none; /* モバイルでは動画を背景に表示するため、背景画像を非表示にする */
      height: 90vh; /* 90vhから50vhに変更 */
  }

  .background-video {
    display: block; /* 動画を表示 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  .centered-logo {
      top: 40%;
      transform: translate(-50%, -50%);
  }
 
  .centered-text {
      top: 45%; /* ロゴの下に配置 */
  }

  .centered-text h2 {
      font-size: 2.2rem;
      letter-spacing: .3rem;
      line-height: 40px;
  }
}
@media (max-width: 750px) {
.c-scrolldown {
  width: 2px;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden;
}
.c-scrolldown .c-line {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 50%);
  background-position: 0 -50px;
  background-size: 100% 200%;
  animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}

@keyframes scrolldown {
  0% {
      background-position: 0 -50px;
  }
  75% {
      background-position: 0 0;
  }
  100% {
      background-position: 0 50px;
  }
}
}

/*------------------------------------------------------------
	section1
------------------------------------------------------------*/

.section1 {
  background-image: url("../img/top/section1bg.png");
  background-position:center top;
  background-repeat: no-repeat;
  background-size: 108px;
  max-width: 1440px;
  padding-top:7rem;
  margin: 7rem auto 8rem auto;
}
.section1 p{
  text-align: center;
  margin-bottom: 6rem;
}
.yoyakubtn1 .btn {
  margin:0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0px 20px;
  width: 30rem;
  min-height: 70px;
  background: #000; /* 黒背景 */
  color: #fff; /* 白色テキスト */
  font-family: sans-serif;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: background-color .2s, color .2s ease;
  border-radius: 5px;
}

.yoyakubtn1 .btn .text {
  font-size: 1.6rem;
  letter-spacing: .4rem;
  font-weight: 600;
  z-index: 2; /* テキストを前面に */
}
.yoyakubtn1 .btn::before, .headbtn .btn::after {
  transition: width .5s ease-in-out, background-color .5s ease-in-out, border-color .5s ease-in-out;
}

.yoyakubtn1 .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #CBA422; /* 黄色のボーダー */
  transition: width .5s ease, background-color .5s ease;
  width: 10px;
  z-index: 1; /* 背景をテキストより後ろに */
}

.yoyakubtn1 .btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 30px; /* 矢印の位置を調整 */
  width: 11px; /* 矢印画像の幅を設定 */
  height: 23px; /* 矢印画像の高さを設定 */
  background-image: url("../img/top/yajirushi.png"); /* 矢印画像のパスを設定 */
  background-size: cover; /* 背景画像をコンテナサイズに合わせる */
  transform: translateY(-50%); /* 縦方向の中央に配置 */
  z-index: 2;
}

.yoyakubtn1 .btn:hover::before {
  width: 100%;
  background-color: #CBA422; 
}

.yoyakubtn1 .btn:hover::after {
  border-color: #fff; 
}
@media (max-width: 750px) {
  .section1 p {
    font-size: 1.6rem;
    line-height: 3.5rem;
  }
}
/*------------------------------------------------------------
	section2
------------------------------------------------------------*/
.section2 {
  display: flex;
  width: 100%; /* エリアをフル幅に設定 */
  margin: 0 auto 10rem auto;
  overflow: hidden;
}

.section2 .imgarea {
  width: 45%; /* 左側エリアの幅を設定 */
  overflow: hidden;
}

.section2 .imgarea img {
  width: 100%; /* 画像の横幅をエリアの幅に合わせる */
  height: auto; /* 画像の縦幅を自動調整 */
  object-fit: cover; /* 画像を縦横比を保持して切り取るように設定 */
}

.section2 .textarea {
  flex-grow: 1; /* 残りのスペースを使用 */
  padding: 0 60px; /* 左右のパディングを設定 */
}


.section2 .textarea h3,
.section2 .textarea p {
  max-width: 100%;
}

.section2 .textarea h3 {
  margin-bottom: 3rem;
}

.section2 .textarea .border {
  margin-left: -15rem;
  margin-bottom: 2rem;
}

.section2 .textarea p {
  margin: 0;
}
/* スマートフォン用のスタイル（幅750px以下） */
@media (max-width: 750px) {
  .section2 {
      flex-direction: column; /* 子要素を縦並びに変更 */
  }

  .section2 .imgarea,
  .section2 .textarea {
      width: 100%; /* 横幅を100%に設定 */
      padding: 0; /* 必要に応じてパディングを調整 */
  }

  .section2 .imgarea img {
      width: 90%; /* 画像の横幅を100%に設定 */
      height: auto; /* 画像の高さを自動調整 */
      margin-bottom: 10rem;
      object-fit: contain; /* 画像全体が見えるように設定 */
  }

  .section2 .textarea {
    text-align: center;
      padding: 0; /* テキストエリアのパディングを調整 */
  }
  .section2 .textarea p{
    font-size: 1.6rem;
    line-height: 3.5rem;
  }

  .section2 .textarea .border {
    margin-bottom: 4rem;
  }
}

/*------------------------------------------------------------
	section3
------------------------------------------------------------*/
.section3 {
  max-width: 1440px;
  margin: 0 auto 10rem auto;
  text-align: center;
}
.section3 h3{
margin-bottom:4rem ;
}
.section3 .border{
  margin-bottom:4rem ;
}
.section3 h4{
  margin-bottom:1.5rem ;
  font-size: 2.5rem;
  }
.section3 .outline{
  background-image: url('../img/top/slistbg.png');
  background-repeat: no-repeat;
  background-position-y: 320px;
  background-position-x: right;
  background-size: 1125px;
}

.section3 ul {
  margin:auto;
  max-width: 1000px;
  display: flex;
  justify-content: space-between; /* 項目間の均等な間隔 */
  padding: 0; /* デフォルトのパディングを削除 */
  list-style: none; /* リストのスタイルを無効に */

}
.section3 li {
  padding-top: 250px;
  text-align: center;
  width: 30%; /* 各リスト項目の幅を設定 */
  background-repeat: no-repeat;
  background-size: 204px;
  background-position: top center; /* 画像を上部中央に配置 */
}

.section3 li:nth-child(1) {
  background-image: url('../img/top/slist3.png');
}

.section3 li:nth-child(2) {
  background-image: url('../img/top/slist1.png');
  }

.section3 li:nth-child(3) {
  background-image: url('../img/top/slist2.png');
}
/* スマートフォン用のスタイル（幅750px以下） */
@media (max-width: 750px) {
  .section3 {
    max-width: 1440px;
    margin: 0 auto 0 auto;
    text-align: center;
  }
  .section3 .border {
    position: relative;
    margin-left: 50%;
     margin-bottom: 3rem;
  }

  .section3 li:nth-child(1) {
    background-image: url('../img/top/s/slist1.png');
  }
  
  .section3 li:nth-child(2) {
    background-image: url('../img/top/s/slist2.png');
  }
  
  .section3 li:nth-child(3) {
    background-image: url('../img/top/s/slist3.png');
  }

  /* リスト要素が縦に並ぶように調整 */
  .section3 ul {
    flex-direction: column; /* リスト項目を縦並びにする */
    align-items: center; /* リスト項目を中央揃えにする */
  }

  .section3 li {
    width: 60%; /* 各リスト項目の幅を画面幅の60%に設定 */
    background-size: contain; /* 背景画像を要素内に収める */
    background-position: top center; /* 背景画像を上部中央に配置 */
    background-repeat: no-repeat; /* 背景画像の繰り返しを無効にする */
    margin-bottom: 10rem; /* 各リスト項目間のマージンを設定 */
    padding-top: 65%; /* 背景画像のための上部のパディングを設定 */
    margin-left: auto; /* 左マージンを自動に設定 */
    margin-right: auto; /* 右マージンを自動に設定 */
  }

  .section3 h4 {
    margin-top: 0; /* h4の上部マージンを削除 */
    margin-bottom: 1.5rem;
    font-size: 2rem;
  }
  .section3 .outline{
    background-image: url('../img/top/slistbg.png');
    background-repeat: no-repeat;
    background-position-y: 29%;
    background-position-x: right;
  }
 .section3 p{
  font-size: 1.4rem;
  line-height: 3.5rem;
 }
}

/*------------------------------------------------------------
	section4
------------------------------------------------------------*/
.section4 {
  max-width: 1440px;
  margin: 0 auto 10rem auto;
  text-align: center;
}
.section4 h3{
margin-bottom:4rem ;
}
.section4 p{
  margin-top: 10rem;
  background-image: url('../img/top/ssbg.png');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 796px;
  }
.simple-slider {
  width: 80%; /* PC版での幅 */
  position: relative; /* 追加: 相対位置指定 */
}

.simple-slider img {
  width: 100%;
}

.simple-slider [class^="swiper-button-"]::after {
  content: "";
}

/* 矢印のサイズ調整 */
.simple-slider [class^="swiper-button-"] {
  width: 65px;
  height: 65px;
  top: auto;
  bottom: 0;
  position: absolute; /* 追加: 絶対位置指定 */
}

/* 矢印の位置調整 */
.simple-slider .swiper-button-next {
  right: calc(50% - 10%); /* ドットの右側に配置 */
}
.simple-slider .swiper-button-prev {
  left: calc(50% - 10%); /* ドットの左側に配置 */
}

/* ドットナビゲーションコンテナのスタイル */
.swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

.swiper-pagination-bullet {
  background: url('../img/top/slide_dot.png') no-repeat center center;
  background-size: cover;
  width: 8px;
  height: 8px;
  margin: 16px; /* ドット間のマージン */
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: url('../img/top/slide_active.png') no-repeat center center;
  background-size: cover;
  width: 14px;
  height: 14px;
}
/* スマホ版の設定 */
@media (max-width: 750px) {
  .simple-slider {
    width: 90%; /* スマホ版での幅 */
  }
  .section4 p {
    font-size: 1.6rem;
    line-height: 3.5rem;
  }
  /* 矢印のサイズ調整 */
.simple-slider [class^="swiper-button-"] {
  width: 65px;
  height: 65px;
  top: auto;
  bottom: 0;
  position: absolute; /* 追加: 絶対位置指定 */
}

/* 矢印の位置調整 */
.simple-slider .swiper-button-next {
  right: calc(50% - 30%); /* ドットの右側に配置 */
}
.simple-slider .swiper-button-prev {
  left: calc(50% - 30%); /* ドットの左側に配置 */
}
}

/*------------------------------------------------------------
	section5
------------------------------------------------------------*/
.section5{
  background-color: #000;
  color: #fff;
  width: 100%;
  margin: 0 auto 10rem auto;
  text-align: center;
  padding: 8rem 0 12rem 0;
}
.section5 h4{
  background-color: #CBA422;
  width: 32rem;
  margin:6rem auto;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: .5rem;
  border-radius: 5px;
  line-height: 5rem;
}
.section5 p.price{
  margin-bottom: 3rem;
}
.section5 p.price img{
  margin-bottom: 2rem;
}
.section5 p.time{
  margin:0 auto 10rem auto;
  width: 52rem;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding:1rem;
}
.section5 p.note{
  text-align: left;
  width: 52rem;
  font-size: 1.1rem;
  margin:-3rem auto 8rem auto;
}


.blo {
  font-weight: 500;
  font-size: 2rem;
  margin-bottom: 20px;
  align-items: center; /* 線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.blo span{
  position:relative;
  display:block;
  top:-5px;
}
.blo::before,
.blo::after {
  background-color: #fff; /* 線の色 */

  content: "";
  height: 2px; /* 線の高さ */
  width: 25px; /* 線の長さ */
}
.blo::before {
  margin-right: 5px; /* 文字との余白 */
  transform: rotate(60deg); /* 傾ける */
}
.blo::after {
  margin-left: 5px; /* 文字との余白 */
  transform: rotate(-60deg); /* 傾ける */
}

.yoyakubtn2 .btn {
  margin:0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0px 20px;
  width: 30rem;
  min-height: 70px;
  background: #fff; /* 黒背景 */
  color: #000; /* 白色テキスト */
  font-family: sans-serif;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: background-color .2s, color .2s ease;
  border-radius: 5px;
}

.yoyakubtn2 .btn .text {
  font-size: 1.6rem;
  letter-spacing: .4rem;
  font-weight: 600;
  z-index: 2; /* テキストを前面に */
}
.yoyakubtn2 .btn::before, .headbtn .btn::after {
  transition: width .5s ease-in-out, background-color .5s ease-in-out, border-color .5s ease-in-out;
}

.yoyakubtn2 .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #CBA422; /* 黄色のボーダー */
  transition: width .5s ease, background-color .5s ease;
  width: 10px;
  z-index: 1; /* 背景をテキストより後ろに */
}

.yoyakubtn2 .btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 30px; /* 矢印の位置を調整 */
  width: 11px; /* 矢印画像の幅を設定 */
  height: 23px; /* 矢印画像の高さを設定 */
  background-image: url("../img/top/yajirushi2.png"); /* 矢印画像のパスを設定 */
  background-size: cover; /* 背景画像をコンテナサイズに合わせる */
  transform: translateY(-50%); /* 縦方向の中央に配置 */
  z-index: 2;
}

.yoyakubtn2 .btn:hover::before {
  width: 100%;
  background-color: #CBA422; 
}

.yoyakubtn2 .btn:hover::after {
  border-color: #fff; 
}

/* スマホ版の設定 */
@media (max-width: 750px) {
  .section5{
    padding: 8rem 0 3rem 0;
    margin: 0 auto 0rem auto;
  }
  .section5 h4{
    background-color: #CBA422;
    width: 60%;
    margin:6rem auto 5rem auto;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: .5rem;
    border-radius: 5px;
    line-height: 4rem;
    padding: 1rem;
  }
  .section5 p.price{
    margin-bottom: 3rem;
    font-size: 1.2rem;
  }
  .section5 p.price img{
    margin-bottom: 2rem;
    max-width: 90%;
  }
  .section5 p.time{
    margin:0 auto 10rem auto;
    max-width: 90%;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    padding:1rem;
    font-size: 1.2rem;
  }
  .section5 p.note{
    text-align: left;
    font-size: 1.2rem;
    margin:-3rem auto 0rem auto;
    max-width: 90%;
  }
}



/*------------------------------------------------------------
	section6
------------------------------------------------------------*/
.section6{
  max-width: 1440px;
  margin: 0 auto 10rem auto;
  text-align: center;
  padding: 8rem 0 0 0;
}
.section6 ul.equip {
  margin:5rem auto;
  max-width: 1000px; /* コンテナの幅を設定 */
  padding:0 20px;
  display: flex; /* Flexboxを有効化 */
  flex-wrap: wrap; /* 項目がコンテナの幅を超える場合に折り返す */
  justify-content: space-between; /* 項目間のスペースを均等に配置 */
}
.section6 ul.equip li {
  width: calc((100% / 3) - 15px); /* 3列で均等に配置 (余白を考慮) */
  margin-bottom: 4rem; /* 下の余白を設定 */
}

.section6 ul.equip img {
  width: 100%; /* 画像をリストアイテムの幅に合わせる */
  height: auto; /* 画像の高さを自動調整 */
  margin-bottom: 2rem;
}
.section6 ul.kitchen h4{
  font-size: 2rem;
  margin-bottom: 2rem;
}
.section6 ul.kitchen {
margin:5rem auto;
max-width: 1000px; /* コンテナの幅を設定 */
padding:0 20px;
display: flex; /* Flexboxを有効化 */
flex-wrap: wrap; /* 項目がコンテナの幅を超える場合に折り返す */
justify-content: space-between; /* 項目間のスペースを均等に配置 */
}
.section6 ul.kitchen li{
  width: calc((100% / 3) - 60px); /* 3列で均等に配置 (余白を考慮) */
  border:#000 4px solid;
  padding: 20px 20px 50px 20px;
}
.section6 ul.kitchen li img{
  width: 100%; /* 画像をリストアイテムの幅に合わせる */
  height: auto; /* 画像の高さを自動調整 */
  margin-bottom: 3rem;
}
.section6 ul.etc{
  max-width: 1000px; /* コンテナの幅を設定 */
  padding:0 20px;
  margin:5rem auto;
  display: flex; /* Flexboxを有効化 */
  flex-wrap: wrap; /* 項目がコンテナの幅を超える場合に折り返す */
  justify-content: space-between; /* 項目間のスペースを均等に配置 */
 margin-bottom: 1.5rem;
}
.section6 ul.etc li{
  width: calc((100% / 3) - 3rem); /* 3列で均等に配置 (余白を考慮) */
  margin-bottom: 4rem; /* 下の余白を設定 */
  background-color: #000;
  color: #fff;
  padding: 1rem;
  border-radius: 5px;
}
.section6 ul.other{
  max-width: 1000px; /* コンテナの幅を設定 */
  padding:0 20px;
  margin:5rem auto;
  display: flex; /* Flexboxを有効化 */
  flex-wrap: wrap; /* 項目がコンテナの幅を超える場合に折り返す */
  justify-content: space-between; /* 項目間のスペースを均等に配置 */
 margin-bottom: 1.5rem;
  margin-bottom:0;
}
.section6 ul.other h4{
  font-size: 2.5rem;
  border-bottom: #000 2px solid;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.section6 ul.other li {
  width: calc((100% / 2) - 160px); 
  border:#000 4px solid;
  padding: 30px 70px 50px 70px;
}
.section6 ul.other li p{
  text-align: left;
  font-size:1.5rem ;
  letter-spacing: .2rem;
}
/* スマホ版の設定 */
@media (max-width: 750px) {
  .section6{
    padding: 8rem 0 0 0;
  }
  .section6 ul.equip {
    width: 92%; /* 全体の幅を設定 */
}
.section6 ul.equip li {
    width: calc((100% / 2) - 2%); /* 2列に設定し、画像間のマージンを5%に */
    margin-right: 2%; /* 右のマージンを5%に設定 */
    margin-bottom: 1.5rem;
}
.section6 ul.equip li:nth-child(even) {
    margin-right: 0; /* 偶数番目の項目の右マージンを0に設定 */
}
.section6 ul.equip li {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 3.5rem;
}
.section6 ul.equip img {
  margin-bottom: 1rem;
}
.section6 ul.kitchen {
  width: 92%; /* 全体の幅を設定 */
  padding: 0;
}
.section6 ul.kitchen li {
  width: 92%; /* 1列で全幅を使用するように設定 */
  border: #000 4px solid; /* 以前のボーダースタイルを維持 */
  padding: 3rem; /* 以前のパディングスタイルを維持 */
  margin-bottom: 4rem; /* リストアイテム間の余白を設定 */
  margin-right: 0;
}

.section6 ul.kitchen li img {
  width: 100%; /* 画像をリストアイテムの幅に合わせる */
  height: auto; /* 画像の高さを自動調整 */
  margin-bottom: 3rem; /* 画像下の余白を維持 */
}
.section6 ul.etc {
  width: 95%; /* コンテナの幅を95%に設定 */
  margin: 3rem auto 5rem auto; /* 上下に1remのマージン、左右は自動で中央揃え */
  display: flex; /* Flexboxを有効化 */
  flex-wrap: wrap; /* 項目がコンテナの幅を超える場合に折り返す */
  justify-content: space-between; /* 項目間のスペースを均等に配置 */
  box-sizing: border-box; /* ボックスサイズを境界ボックスに設定 */

}

.section6 ul.etc li {
  width: calc(33.33% - 3rem); /* 各アイテムの幅を3分の1から余白を差し引いたものに設定 */
  margin-bottom: 1rem; /* 下の余白を設定 */
  font-size: 1.2rem;
  line-height: 1.2rem;
}

.section6 ul.other {
  width: 90%; /* コンテナの幅を全幅に設定 */
  padding: 0; /* コンテナの左右に余白を追加 */
  box-sizing: border-box; /* パディングを幅に含める */
  margin: 0 auto 0 auto; /* コンテナを中央に配置 */
}

.section6 ul.other li {
  width: 100%; /* 各アイテムをコンテナ幅全体に広げる */
  margin-top: 3rem; /* アイテム間の下余白を設定 */
  padding: 4rem; /* アイテムの左右に余白を追加 */
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
}
.section6 ul.other h4{
  font-size: 3rem;
  padding-bottom: 2.5rem;
  margin-bottom: 1.5rem;
}
  .section6 ul.other li p{
    text-align: left;
    font-size:2rem ;
    padding: 2rem;
    letter-spacing: .2rem;
  }
}


/*------------------------------------------------------------
	section7
------------------------------------------------------------*/
.section7{
  width: 100%;
  margin: 0 auto 0 auto;
  text-align: center;
  padding: 0 0 0 0;
}
.section7 p.address{
  font-size: 2rem;
  line-height: 4rem;
  margin: 3rem auto;
  letter-spacing: .3rem;
}
.section7 p.note{
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.scetion7 iframe {

  width: 100%;
  height:400px;
}

/* スマホ版の設定 */
@media (max-width: 750px) {
  .section7{
    padding: 0 0 0 0;
  }
  .section7 p.address{
    font-size: 1.6rem;
    line-height: 3rem;
    padding: 0 ;
  }
  .section7 p.note{
    letter-spacing: 0.2rem;
    font-size: 1.2rem;
    line-height:20px;
    margin-bottom: 3rem;
  }
  .scetion7 .map {
    width: 90%;
  }
}
/*------------------------------------------------------------
	section8
------------------------------------------------------------*/
.section8{
  max-width: 1440px;
  margin: 0 auto 10rem auto;
  text-align: center;
  padding: 8rem 0 0 0;
}
.section8 ul {
  width: 600px;
  margin:5rem auto 12rem auto;
}
.section8 li {
  width: 600px;
  margin:6rem auto 0 auto;
  padding-bottom: 1rem;
  border-bottom: #000 2px solid;
}

.section8 h5 {
  background-image: url('../img/top/qaicon1.png'); /* 上向き矢印の画像 */
  background-position-y: center;
  background-position-x: left ;
  background-size:40px ;
  background-repeat: no-repeat;
  cursor: pointer; /* クリック可能なことを示す */
  position: relative;
  padding:1rem 1rem 1rem 8rem;
  text-align: left;
  font-size:2.5rem;

}

.section8 .arrow {
  position: absolute;
  right: 0; /* 右端に配置 */
  top: 50%; /* 縦の中心に配置 */
  transform: translateY(-50%) rotate(180deg); /* 縦の中心に合わせる */
  background-image: url('../img/top/yajirushi3.png'); /* 上向き矢印の画像 */
  background-size: cover;
  width: 22px; /* 矢印のサイズ */
  height: 12px;
}

.section8 p {
  background-image: url('../img/top/qaicon2.png'); /* 上向き矢印の画像 */
  background-position-y: 1rem;
  background-position-x: left ;
  background-size:40px ;
  background-repeat: no-repeat;
  display: none;
  text-align: left;
  margin-top: 2rem;
  padding:1rem 1rem 2rem 8rem;
  font-size: 1.5rem;

}

.section8 .open .arrow {
  transform: translateY(-50%); /* 矢印を下向きに反転 */
}
/* スマホ版の設定 */
@media (max-width: 750px) {
  .section8{
    padding: 8rem 0 0 0;
  }
  .section8 ul {
    width:95%;
    margin:5rem auto 12rem auto;
  }
  .section8 li {
    width: 95%;
    margin:8rem auto 0 auto;
  }
  .section8 h5 {
    padding:1rem 1rem 1rem 6rem;
    font-size: 1.6rem;
  }
  .section8 p {

    display: none;
    text-align: left;
    margin-top: 2rem;
    padding:1rem 1rem 2rem 6rem;
    font-size: 1.2rem;
  
  }
}

/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/

footer {
  width: 100%;
  padding: 80px 0 20px 0;
  position: relative;
  background-color: #000;
}
footer p{
  text-align: center;
}
footer p a:hover {
  opacity: 0.7;
}
footer p.foot_logo{
margin-bottom: 2.5rem;
}
footer p.foot_sns{

  width: 80px;
  margin:auto;
}
footer .copyright{
  margin-top:15rem;
}
@media all and (max-width: 750px) {
  footer {
    width: 100%;
    padding: 5rem 0 20rem 0;
    position: relative;
    background-color: #000;
  }

  footer .copyright{
    margin-top:3rem;
  }
}