/* 背景を固定するレイヤー */
.bg-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/bg_main.png');
  background-size: cover;
  background-position: center;
  z-index: -1; /* コンテンツの後ろに置く */
}

/* コンテンツ側 */
.container {
  position: relative;
  z-index: 1;
}

/* プレヘッダー */
header .banner_box {
	height: auto;
	width: 25%;
	margin-right: 1%;
}
header .banner_box * {
	height: auto;
	width: 100%;
}
.age-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}
.age-modal-content {
	font-size: 1.5vw;
	line-height: 1.8;
  background: rgba(0,0,0,0.8);
  padding: 2em;
  border-radius: 10px;
  text-align: center;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);

}
.age-modal-buttons {
  margin-top: 1.5em;
  display: flex;
  justify-content: space-around;
}
#heavenAgreeBtn {
  background: #d33;
  color: #fff;
	font-size: 1.2vw;
	padding: 0.5em 1em;
}
#heavenAgreeBtn:hover {
  background: #b11;
}
#heavenDisagreeBtn {
  background: #ccc;
	color: #000;
	font-size: 1.2vw;
	padding: 0.5em 1em;
}
#heavenDisagreeBtn:hover {
  background: #aaa;
}

/* ヘッダー */
header {
  position: fixed;
  z-index: 999;
  box-sizing: border-box;
	width: 100%;
}

.header_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: repeating-linear-gradient(
    45deg,
    #222,
    #222 10px,
    #2a2a2a 10px,
    #2a2a2a 20px
  );
  background-blend-mode: overlay;
  box-shadow: inset 0 0 50px rgba(255,255,255,0.1),
              inset 0 0 10px rgba(0,0,0,0.5);
  justify-content: space-between;
  align-items: center;
	width: 100%;
}

.header_logo {
  display: flex;
  align-items: center;
  width: 30%;
  justify-content: space-around;
}

.logo_text h1 {
  position: relative;
  font-size: 3vw;
  font-weight: 900;
  letter-spacing: 1px;
  font-family: "Philosopher", sans-serif;
  color: transparent;
  background: linear-gradient(180deg, #fff 0%, #ece8e8 30%, #d9d3d3 50%, #535050 70%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 2px rgba(255,255,255,0.4),
    0 -2px 3px rgba(0,0,0,0.7);
  overflow: hidden;
  border-bottom: 3px solid #e405d58c;
}

/* ✨光の反射エフェクト（ゆっくり・強く） */
.logo_text h1::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 40%; /* ← 少し細めでシャープに */
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,1) 45%, /* ← 強めの白で反射を強調 */
    rgba(255,255,255,0.95) 55%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  mix-blend-mode: screen;
  animation: shineSlide 6s ease-in-out infinite; /* ← 速度を遅めに */
  opacity: 0;
}

/* 💫 左→右ゆっくりキラン */
@keyframes shineSlide {
  0%, 80%, 100% {
    left: -150%;
    opacity: 0;
  }
  85% {
    opacity: 1;
    left: -30%;
  }
  90% {
    left: 120%;
    opacity: 1;
  }
  93% {
    opacity: 0.5;
  }
  95% {
    opacity: 0;
  }
}

.header_logo p {
  text-align: center;
  font-size: 0.9vw;
  letter-spacing: 5px;
  margin-top: 7px;
  color: #96969a;
  font-family: "Kosugi Maru", sans-serif;
}

.logo_img {
  width: 20%;
}

.logo_img img {
  width: 100%;
}

.header_banner {
	width: 30%;
	margin-right: 5%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.web_reservation {
	width: 50%;
}
.tel_reservation {
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tel_reservation a {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
  overflow: hidden;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  background-size: 200% 100%;
  animation: lightMove 3s linear infinite;
}
.tel_reservation a span {
	text-align: center;
	font-size: 1.2vw;
  line-height: 1.5;
  padding: 0.5em 1em;
	letter-spacing: 3px;
  background:-webkit-linear-gradient(to top,#ccb800 0%,#ccb800 45%,#fffd84 50%,#ebd303 55%,#ebd303 100%);
  background:linear-gradient(to top,#ccb800 0%,#ccb800 45%,#fffd84 50%,#ebd303 55%,#ebd303 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes lightMove {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.header_menu {
	position: absolute;
	width: 13%;
	background-color: rgba(0,0,0,0.6);
	border-top: 5px solid #e405d58c;
	border-bottom: 5px solid #e405d58c;
	top: 7vw;
	right: 0;
	border-radius: 10px 0 0 10px;
	padding: 1vw;
}

header ul li {
	list-style: none;
	padding: 1em 0;
}

.header_menu_link {
	display: flex;
	color: #e0e5e9;
	align-items: center;
	font-size: 1.2vw;
}

.header_menu_link img {
	width: 1em;
	margin-right: 10px;
}

.header_menu_link .active {
	display: none;
}
.header_menu_link.is-active .non_active {
	display: none;
}
.header_menu_link.is-active::before .active {
	display: none;
}

.header_menu_link.is-active .active {
	display: flex;
}

.header_menu_link.is-active::before .non_active {
	display: flex;
}

.header_area_sp {
	display: none;
}

/* フッター */
footer {
	background: repeating-linear-gradient(
    45deg,
    #222,
    #222 10px,
    #2a2a2a 10px,
    #2a2a2a 20px
  );
  background-blend-mode: overlay;
  box-shadow: inset 0 0 50px rgba(255,255,255,0.1),
              inset 0 0 10px rgba(0,0,0,0.5);
	width: 100%;
	padding-bottom: 1vw;
}

#pre_footer .banner_area {
  width: 95%;
  margin: auto;
}

.banner_area {
	width: 80%;
  margin-left: 3%;
  padding-top: 3vw;
	display: flex;
	justify-content: space-between;
}
.bottom_banner {
  padding-top: 0;
}

footer .banner_box {
	height: 3.5vw;
  margin-bottom: 3vw;
}

.banner_box * {
	height: 100%;
	width: auto;
}

.banner_box_sub {
	width: 45%;
  margin-bottom: 3vw;
}

.widget_area {
  margin-bottom:  3vw;
}
.widget_area div {
  margin-right: 5vw;
}
.widget_area iframe {
  height: 20vw;
}

.copyright {
	text-align: center;
}

.copyright p {
	font-size: 1.2vw;
	color: #ffffff;
}

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

	.bg-fixed {
	  background-image: url('../img/bg_main_sp.png');
	}

  /* pre header */
  .banner_box.heaven_entry {
    width: 40%;
    margin-bottom: 0;
  }
  .age-modal-content {
    font-size: 3.5vw;
  }
  #heavenAgreeBtn,
  #heavenDisagreeBtn {
    font-size: 3vw;
  }

	/* ハンバーガーメニュー */
	header .humberger_menu {
	}

	header #header_navi_toggle,
	header #header_navi_toggle span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}

	header #header_navi_toggle {
	  box-sizing: border-box;
	  position: absolute;
	  padding: 0;
	  width: 60%;
	  height: 6vh;
	  top: 0.7vw;
	  right: 1vw;
	  max-width: 3em;
	  z-index: 9;
	}

	header #header_navi_toggle span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 0.1vw;
		border-radius: 4px;
	  z-index: 6;
		background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
	  padding: 0.3vw;
	}

	header #header_navi_toggle p {
	  position: absolute;
	  width: 100%;
	  text-align: center;
	  color: #ffffff;
	  bottom: 5px;
    font-size: 2vw;
	}

	header #header_navi_toggle.active span:nth-of-type(1) {
		-webkit-transform: translateY(2vh) rotate(-45deg);
		transform: translateY(2vh) rotate(-45deg);
	}

	header #header_navi_toggle.active span:nth-of-type(2) {
		opacity: 0;
	}

	header #header_navi_toggle.active span:nth-of-type(3) {
		-webkit-transform: translateY(-2vh) rotate(45deg);
		transform: translateY(-2vh) rotate(45deg);
	}

	header #header_navi_toggle.active img {
		opacity: 0;
	}

	header #header_navi_toggle.active p {
		opacity: 0;
	}

	#header_navi {
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(7, 7, 7, 0.8);
		z-index: 5;
	}

	#header_navi ul {
  	padding-top: 60px;
		width: 60%;
    margin: auto;
  }

	#header_navi ul li {
		padding: 0.5em 0;
	}

  #header_navi ul li a {
    font-size: 4vw;
    padding: 1vh;
    font-weight: bold;
  }

  header #header_navi_toggle span:nth-of-type(1) {
  	top: 0.5vh;
  }

  header #header_navi_toggle span:nth-of-type(2) {
  	top: 2.5vh;
  }

  header #header_navi_toggle span:nth-of-type(3) {
  	top: 4.5vh;
  }

	.header_logo {
		width: 50%;
	}

	.logo_img {
    width: 25%;
	}

	.logo_text h1 {
    font-size: 4.5vw;
		border-bottom: 1.5px solid #e405d58c;
	}

	.header_logo p {
		font-size: 2vw;
	}

	.header_area_pc {
		display: none;
	}

	.header_area_sp {
		display: flex;
		width: 100%;
	}

	.header_banner {
    width: 35%;
    display: block;
    position: fixed;
    right: 0;
    bottom: 3vh;
    margin: 0;
	}

	.web_reservation {
    width: 100%;
		margin-bottom: 1vw;
	}

	.tel_reservation a span {
    font-size: 3vw;
    padding: 1em;
    letter-spacing: 2px;
	}

	.banner_area {
    width: 60%;
    margin-left: 5%;
    padding-top: 5vw;
    padding-bottom: 0;
    display: block;
	}

	.bottom_banner {
		padding-top: 0;
	}

	footer .banner_box,
	footer .banner_box * {
    height: auto;
    width: 100%;
	}

	.banner_box,
	.banner_box_sub {
		margin-bottom: 3vw;
	}

	.banner_box_sub {
		width: 100%;
	}

  .widget_area div {
    width: 100%;
    margin-bottom: 5vw;
    margin-right: 0;
  }
  .widget_area iframe {
    width: 100%;
    height: 50vh;
    overflow: scroll;
  }

	.copyright {
    width: 100%;
	}

	.copyright p {
    font-size: 3vw;
	}

}