@charset "utf-8";

body .sp-item {
	display: none;
}
body .pc-item {
  display: block;
}

@media screen and (max-width: 640px) {
	body {
		min-width: inherit;
		height:100%;
	}
	body .sp-item {
		display: block;
	}
	body .pc-item {
		display: none;
	}
	body .sp-item img {
		width:100%;
	}
}

/* ----------------------------------------------------
    共通
---------------------------------------------------- */

body {
	background: url(../images/bg-body.png) repeat center center;
	background-attachment: fixed;
}
.main {
	font-family: 'ヒラギノ角ゴシック','Hiragino Sans','Meiryo UI',sans-serif;
	font-weight: 400;
	line-height: 1.7;
	font-size: 20px;
	color:#333;
	background-color: #fff;
	text-align: justify;
	font-feature-settings: "palt";
	overflow-x: hidden;
	max-width: 750px;
	margin: 0 auto;
	box-shadow: 0 0 8px #ccc;
}
img {
	margin: 0 auto;
	width: 100%;
	height: auto;
}
video {
	width: 100%;
}
.inner {
	width: 724px;
	margin: 0 auto;
}
.marker {
	color: #333;
	background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 10%, rgba(255,255,150,1) 10%, rgba(255,255,150,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
}
.bold {
	font-weight: 700;
}

@media screen and (max-width: 640px) {
	img {
		max-width: 100%;
		height: auto;
	}
	body {
		width: 100%;
	}
	.inner {
		width: 94%;
	}
}

/* ----------------------------------------------------
    CTA
---------------------------------------------------- */
.btn {
	transition: all .2s;
}
.btn:hover {
	opacity: 0.8;
}

/* @media screen and (max-width: 640px) {} */

/* ----------------------------------------------------
    main
---------------------------------------------------- */

/* ----------------------------------------------------
    スライダー
---------------------------------------------------- */
.carousel-01,
.carousel-02 {
	position: relative;
}
.slide-image {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 3%;
	width: 87%;
}
.carousel-02 .slide-image {
	bottom: 3.5%;
}
.slider-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.slider-wrapper01,
.slider-wrapper02,
.slider-wrapper03 {
	display: flex;
	transition: transform 0.3s ease-in-out;
	width: 100%;
}

.slider-wrapper img {
	flex-shrink: 0;
	width: 100%;
	height: auto;
}

.slider-nav {
	position: absolute;
	bottom: 29.5%;
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}
.carousel-02 .slider-nav {
	bottom: 34.8%;
}

.slider-prev,
.slider-next {
	width: 80px;
	height: 80px;
	cursor: pointer;
	pointer-events: auto;
	padding: 0;
	border: none;
	background-color: transparent;
	filter: drop-shadow(0px 0px 6px rgba(153, 153, 153, 0.2));
}

.slider-prev {
	transform: rotate(180deg);
}

.arrow {
	width: 100%;
	height: 100%;
}

/* .slider-prev:before,
.slider-next:before {
	content: '';
  width: 20px;
  height: 20px;
  border: 0;
  border-top: solid 6px #333;
  border-right: solid 6px #333;
	border-radius: 6px;
  transform: rotate(60deg);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
	left: 50%;
	transform: translateX(-50%);
}

.slider-prev:hover,
.slider-next:hover {
	background: rgba(0, 0, 0, 0.7);
} */

.slider-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background 0.3s;
}

.dot.active {
	background: rgba(255, 255, 255, 0.9);
}

@media screen and (max-width: 640px) {
	.slider-prev,
	.slider-next {
		width: 13vw;
		height: 13vw;
		font-size: 18px;
	}

	.slider-nav {
		width: 98%;
	}

	.slider-dots {
		bottom: 15px;
	}

	.dot {
		width: 10px;
		height: 10px;
	}
}
.access {
	position: relative;
}
.access .map {
	position: absolute;
	top: 27%;
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	border: none;
	aspect-ratio: 16/9;
	object-fit: cover;
}
.access .map iframe {
	width: 100%;
	height: 100%;
}

/* ----------------------------------------------------
    footer
---------------------------------------------------- */
.footer {
	background-color: #CE93A7;
	color: #fff;
	padding: 40px 0;
	font-size: 24px;
	font-weight: 300;
	text-align: center;
}
.footer-link {
	width: 92%;
	margin: 0 auto;
}
.footer-link a {
	color: #fff;
	text-decoration: none;
	display: inline-block;
}
.copy-right {
	margin-top: 0.4em;
	text-align: center;
}

@media screen and (max-width: 640px) {
	.footer {
		font-size: 3.5vw;
		padding: 2em 0;
	}
}

/* ----------------------------------------------------
    固定ボタン
---------------------------------------------------- */
.fixed-bottom-link {
	position: fixed;
	padding: 10px 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 750px;
	filter: drop-shadow(3px 3px 4px #999);
	z-index: 100;
	display: none; /* 初期状態では非表示 */
	text-align: center;
}
.fixed-bottom-link.show {
	display: block; /* クラスが付与されたら表示 */
}
.fixed_btn a {
	display: inline-block;
	transition: .2s;
}
.fixed_btn a:hover {
	transform: scale(1.03);
	cursor: pointer;
}

/*フッターまでスクロールしたら消す*/
.is-hidden {
  visibility: hidden;
  opacity: 0;
}

@media screen and (max-width: 640px) {
	.fixed-bottom-link {
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
		width:94%;
	}
}


/* 固定フッター予約ボタン */
.footer-fixed-reserve {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding: 10px 0;
  font-size: 16px;
}

.footer-fixed-reserve ul {
  display: flex;
  margin: 0;
  padding: 0;
}

.footer-fixed-reserve li {
  flex: 1;
  text-align: center;
  list-style: none;
}

.footer-fixed-reserve a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
}

.footer-fixed-reserve .reserve-btn {
  background: linear-gradient(to right, #FF69B4, #FF1493);
}

.footer-fixed-reserve .line-btn {
  background: #25D366; /* LINEグリーン */
}

/* ホバーエフェクト */
.footer-fixed-reserve a:hover {
  opacity: 0.9;
}

/* iPhone Safe Area 対応 */
@supports(padding: max(0px)) {
  .footer-fixed-reserve {
    padding: calc(env(safe-area-inset-bottom) + 10px) 0 10px;
  }
}

#popupOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  display: none;
  z-index: 9999;
  max-width: 90%;
}

#popup img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

#popupClose {
  margin-top: 8px;
  display: inline-block;
  padding: 6px 12px;
  background: #333;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
}



/* === Popup (intercept back) additions === */
#popupOverlay {
  transition: opacity .2s ease;
  opacity: 0;
}
#popup {
  transform: translate(-50%, -50%) scale(.98);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  width: min(92vw, 540px);
  position: fixed;
}
#popupOverlay.active { display: block; opacity: 1; }
#popup.active { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.popup-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 10px; }
.popup-actions button {
  flex: 1; padding: 10px 12px; border: none; border-radius: 8px; cursor: pointer; font-size: 15px;
  background: #f1f5f9;
}
.popup-actions .danger { background: #ef4444; color: #fff; }
.icon-close { position: absolute; top: 8px; right: 10px; background: transparent; border: none; font-size: 22px; cursor: pointer; line-height: 1; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,1px,1px); white-space: nowrap; border: 0; }