@charset "utf-8";
@import url(common/style.css);

#reserveBox {
	background-color: #8f1533;
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  color: #fff;
  letter-spacing: 1.5px;
  padding: 15px 0;
}
#reserveBox:not(.topkv) {
  padding: 15px 0;
}
@media only screen and (max-width: 750px) {
  #reserveBox {
    padding: 0 0 20px;
  }
}
#reserveBox:not(.topkv) {
  /*border-top: 1px solid #fff;*/
}
.priceBox__text-add_Box img {
  width: 90%;
  max-width: 100%;
  margin: 0 auto;
}

.reserveBox--bottom {
	border-top: 1px solid rgb(255 255 255 / 36%);
}

#meritBox {
	background-color: #ebf1f4;
}

.infoBox {
	margin-top: 60px;
}

.infoBox p {
	color: var(--color2);
	text-align: center;
	font-size: 40px;
	/* letter-spacing: 0.6rem; */
	font-weight: bold;
}

.infoBox a {
	background-color: var(--color2);
	color: #fff;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	line-height: 200%;
}

.infoBox>div {
	color: #fff;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	line-height: 200%;
}

.infoBox a.noPage {
	opacity: 0.125;
	pointer-events: none;
	cursor: default;
}

.infoBox.orange p {
	color: var(--color5);
}

.infoBox.orange a {
	background-color: var(--color5);
	color: #fff;
}

#informationBox .centerTitle span {
	position: relative;
}

#informationBox .centerTitle span:before {
	position: absolute;
	left: 50%;
	top: 110%;
	width: 60%;
	margin-left: -30%;
	content: '';
	border-top: 2px solid var(--color3);
}

.infoTxt.txt1.--color4 {
	color: var(--color4);
}

.alpha.--color4 {
	background-color: var(--color4);
}
.txtCont__center {
    text-align: center;
}
@media only screen and (max-width: 750px) {
	#informationBox .centerTitle {
		text-align: center !important;
	}

	.infoBox a {
		max-width: 100%;
	}

	.infoBox p {
		font-size: 7.6vw;
		letter-spacing: 0.75vw;
	}

	/*
	.txt1 {
		letter-spacing: 3.5vw !important;
	}
*/

}

#btnSpace {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-top: 40px;
	margin-bottom: 100px;
}

#btnSpace .oneBoxSpace {
	width: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
	position: relative;
}

#btnSpace .topBtnSpace7,
#btnSpace .topBtnSpace8,
#btnSpace .topBtnSpace9 {
	display: none;
}

#btnSpace .oneBoxSpace .csBox {
	display: none;
	z-index: 5;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.75);
}

#btnSpace .oneBoxSpace .csBox>div {
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

#btnSpace .oneBoxSpace img {
	max-width: 100%;
}

#btnSpace .oneBoxSpace .csBox>div p {
	text-align: center;
	font-size: 40px;
	color: #fff;
	letter-spacing: 1rem;
	font-weight: bold;
}

#btnSpace .oneBoxSpace.comingSoon .csBox {
	display: block;
}

/*#btnSpace .oneBoxSpace:nth-child(odd) .inner > div{*/
#btnSpace .oneBoxSpace:nth-child(even) .inner>div {
	flex-direction: row-reverse;
}

#btnSpace .oneBoxSpace .inner {
	position: relative;
	z-index: 1;
}

#btnSpace .oneBoxSpace .inner>div {
	display: flex;
	justify-content: space-between;
}

.imgSpace {
	width: 60%;
}

.txtSpace {
	width: 35%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.txtSpace h3.leftTitle {
	text-align: left;
	font-size: 20px;
	font-size: 24px;
	margin-top: 40px;
	margin-bottom: 40px;
	font-weight: 600;
	line-height: 40px;
	color: var(--color2);
	/*   letter-spacing:-0.10rem; */
}

.txtSpace .lineeSeparetor:before {
	width: 30%;
}

.readMore {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	position: relative;
	background-color: var(--color5);
	padding: 10px 40px;
	float: left;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.readMore>span {
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 0 10px 10px;
	border-color: transparent transparent #fff transparent;
	transform: rotate(0deg);
}

@media only screen and (max-width: 750px) {
	#btnSpace .oneBoxSpace {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	#btnSpace .topBtnSpace7,
	#btnSpace .topBtnSpace8,
	#btnSpace .topBtnSpace9 {
		display: block;
	}

	#btnSpace .oneBoxSpace .inner>div,
	#btnSpace .oneBoxSpace:nth-child(even) .inner>div {
		flex-direction: column;
	}

	.readMore {
		float: none;
		margin-left: auto;
		margin-right: auto;
		width: max-content;
	}

	.txtSpace h3.leftTitle {
		font-size: 5vw;
		line-height: 10vw;
	}

	.readMore {
		font-size: 5vw;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 2vw;
		padding: 2vw 10vw;
	}

	.readMore>span {
		right: 1vw;
		bottom: 1vw;
		border-width: 0 0 2vw 2vw;
	}

	.imgSpace>img {
		margin-left: auto;
		margin-right: auto;
	}

	.txtSpace h3.leftTitle {
		text-align: center;
	}
}

/* 20240724 改修 */

#btnSpace .oneBoxSpace .inner .div_f724 .div_f724-br {
	display: none;
}

@media only screen and (max-width: 750px) {
	#btnSpace .oneBoxSpace .inner .div_f724 {
		display: flex;
		gap: 0 3.4vw;
	}

	#btnSpace .oneBoxSpace .inner .lineeSeparetor {
		margin-top: 10px;
		margin-bottom: 30px;
	}

	#btnSpace .oneBoxSpace .inner .div_f724 .imgSpace {
		width: 45%;
	}

	#btnSpace .oneBoxSpace .inner .div_f724 .txtSpace {
		width: 55%;
	}

	#btnSpace .oneBoxSpace .inner .div_f724 .div_f724-br {
		display: block;
	}

	#btnSpace .oneBoxSpace .inner .div_f724 .leftTitle {
		text-align: left;
		font-size: 4vw;
		line-height: 6vw;
		margin-top: 10px;
	}

	#btnSpace .oneBoxSpace .inner .div_b724.readMore {
		width: 220px !important;
	}

	#btnSpace .oneBoxSpace:nth-child(even) .inner .div_f724 {
		flex-direction: row-reverse;
	}

	#btnSpace .oneBoxSpace:nth-child(odd) .inner .div_f724 .imgCapAfter {
		text-align: left;
	}

	#btnSpace .oneBoxSpace .inner .i724 {
		height: 8vw;
		width: auto !important;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

/* 20240731 add */
#priceBox {
	width: 100%;
	background-color: #8f1533;
  font-family: "Zen Old Mincho", serif;
  color: #fff;
  letter-spacing: 1.5px;
  padding: 20px 0 ;
  text-align: center;
}

@media only screen and (max-width: 750px) {
}

#priceBox img {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
#priceBox ul.priceBox__caption{
	display: block;
	margin: 0 auto;
	padding:10px 0;
  width: 90%;
  max-width: 590px;
}
#priceBox ul.priceBox__caption>li{
	text-indent: -1em;
	padding-left: 1em;
	font-size: 10px;
	line-height: 1.5em;
	padding-bottom: .25em;
	text-align: left;
}

/* add 2024/10/23 */
.top-banner {
	position: fixed;
	top: 200px;
	z-index: 15;
	right: 2%;
	margin-left: auto;
	margin-right: auto;
}

.top-banner a {
	max-width: 300px;
	margin-right: 0;
	margin-left: auto;
	display: flex;
	flex-direction: column;
}

@media only screen and (max-width: 1024px) {
	.top-banner a {
		max-width: 20vw;
		margin-right: 0;
		margin-left: auto;
	}
}

@media only screen and (max-width: 960px) {
	.top-banner__wrap {
		top: 230px;
		right: 0;
		width: 94%;
	}
}

@media only screen and (max-width: 960px) {
	.top-banner__wrap {
		top: 230px;
		right: 0;
		width: 94%;
	}
}

@media only screen and (max-width: 750px) {
  .top-banner__wrap {
    position: fixed;
     z-index: 200;
  }
  .top-banner {
    top: auto;
    bottom: 100px;
    z-index: 100;
    width: 95%;
    margin: 0 auto;
  }
	.top-banner a {
		max-width: 100%;
	}
  .top-banner a img {
    width: 100%;
  }
}


.close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close-btn span {
	position: relative;
	width: 10px;
}

.close-btn span::before,
.close-btn span::after {
	content: "";
	width: 100%;
	height: 2px;
	display: inline-block;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
}

.close-btn span::before {
	transform: rotate(45deg);
}

.close-btn span::after {
	transform: rotate(-45deg);
}

/* 2024/10/30 */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0, 0, 0, 50%);
	padding: 40px 20px;
	overflow: auto;

	display: none;
	position: fixed;
	z-index: 100;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
}

.modal:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	margin-left: -0.2em;
}

.modal-content {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 800px;
	width: 90%;
}

.modal-container {
	/* background: #fff; */
	border-radius: 20px;
}

.modal-content a{
	cursor: pointer;
}

a.modal-container img:hover {
	opacity: 0.8;
}

.modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.modal__close span {
	position: relative;
	width: 10px;
}

.modal__close span::before,
.modal__close span::after {
	content: "";
	width: 100%;
	height: 2px;
	display: inline-block;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
}

.modal__close span::before {
	transform: rotate(45deg);
}

.modal__close span::after {
	transform: rotate(-45deg);
}


.infoBox .information__link {
	background: transparent;
	box-shadow: 5px 5px 10px #ccc;
	border-radius: 20px;
}

.infoBox a.information__link:hover {
	opacity: 0.65;
}


/* 2024/12/18 add  */
/*  */

.sp__br {
	display: none;

}

@media only screen and (max-width: 750px) {
	.sp__br {
		display: block;
	}
}

/* end 2024/12/18 add  */


.kv__obi a {
  color: #fff;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.kv__obi a:hover {
  opacity: 0.8;
}

.priceBox__text-add img {
  max-width: 100%;
}
/* 2024/12/26 add */
@media only screen and (min-width: 750px) {
	/* 2024/02/21 add */
	.priceBox__text-add {
		display: flex;
    justify-content: center;
	}

	/* end 2024/02/21 add */
	.priceBox__text-add img {
		padding-top: 0px;
		margin-bottom: 0px;
    max-width: 100%;
	}
}

.pt20 {
  padding-top: 20px; 
}

#priceBox .reserveBox__text-add_ttl {
  font-weight: 700;
  font-size: 2.8vw;
}
@media only screen and (max-width: 1024px) {
  #priceBox .reserveBox__text-add_ttl {
    padding-top: 20px;
    font-size: 4vw;
  }
}
@media only screen and (max-width: 750px) {
  #priceBox .reserveBox__text-add_ttl {
    font-size: 28px;
    text-align: center;
  }
}

.priceBox__text-add_ttl_span {
  font-size: clamp(18px, 2vw, 20px);
}
@media only screen and (max-width: 750px) {
  .priceBox__text-add_ttl_span {
    font-size: 18px;
  }
}
.priceBox__text-add_ttl_span02 {
  display: block;
  font-size: clamp(38px, 1.8vw, 44px);
}
@media only screen and (max-width: 750px) {
  .priceBox__text-add_ttl_span02 {
    font-size: 25px;
    text-align: center;
  }
  .priceBox__text-add_ttl_span02 > span {
    display: block;
  }
}

#reserveBox .reserveBox__text-add_ttl2 {
  font-size: clamp(38px, 1.8vw, 44px);
}
@media only screen and (max-width: 750px) {

  .priceBox__text-add_ttl_span02 > span {
    font-size: 30px;
  }
  #reserveBox .reserveBox__text-add_ttl2 {
    font-size: 38px;
    line-height: 0.8;
  }
}
#reserveBox .reserveBox__text-add_ttl3 {
    border: 1px solid #fff;
    font-size: 30px;
    padding: 0.5rem 1rem;
    margin: 10px 0 0;
    display: inline-block;
}
@media only screen and (max-width: 750px) {
  #reserveBox .reserveBox__text-add_ttl3 {
    font-size: 22px;
  }
}

#priceBox .reserveBox__text-add_ttl .sml {
  font-weight: normal;
}
@media only screen and (max-width: 750px) {

}

#priceBox .reserveBox__text-add_ttl .f20 {
  font-size: 1.4vw;
  font-weight: normal;
}
@media only screen and (max-width: 750px) {

}

.reserveBox__text-add_thumb {
  padding-left: 30px;
  font-size: clamp(16px, 1.8vw, 27px);
}
@media only screen and (max-width: 750px) {
  .reserveBox__text-add_thumb {
    padding-left: 0;
    font-size: 20px;
  }
}

.reserveBox__text-add_thumb > span {
  font-size: 10px;
}
@media only screen and (max-width: 750px) {
  .reserveBox__text-add_thumb > span {
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
  }
}



/* end 2024/12/26 add */


.top-message-info {
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 50px;

}
@media only screen and (max-width: 750px) {
	.top-message-info {
		padding-left: 0px;
		padding-right: 0px;

	}
}

.top-message-info__inner {
	padding-top: 26px;
	padding-bottom: 26px;
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid #707070;
	border-bottom: 1px solid #707070;
	text-align: center;
}

@media only screen and (max-width: 750px) {
	.top-message-info__inner {
		padding-top: 15.5px;
		padding-bottom: 17.5px;
	}
}

.top-message-info__title {
	font-size: 24px;
	font-weight: bold;
	line-height: calc(28/24);
	text-align: left;
	display: inline-block;
	text-align: left;
}

@media only screen and (max-width: 750px) {
	.top-message-info__title {
		font-size: 18px;

		line-height: calc(23/18);
		text-align: left;
	}
}

.top-message-info__text {
	padding-top: 26px;
	text-align: center;
	color: #3C4449;
}

@media only screen and (max-width: 750px) {
	.top-message-info__text {
		padding-top: 18px;
	}
}

.top-message-info__text a {
	display: inline;
	color: #3C4449;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 2025/01/22 */
.reserveBox--bottom__text-add-inner {
	padding-top: 26px;
	padding-bottom: 26px;
	max-width: 670px;
}

@media only screen and (max-width: 750px) {
	.reserveBox--bottom__text-add-inner {
		padding-top: 0px;
		padding-bottom: 0px;
	}
}

.info {
    text-align: center;
    letter-spacing: 0.1em;
    margin: 2rem 0 3rem 0;
}
.info .container {
    max-width: 1000px;
    padding: 1.4rem;
    box-shadow: 0 0 5px #ccc;
}
.info h4 {
    font-family: 'Ryumin Pro', sans-serif;
    margin-bottom: 1rem;
}
.info p {
    font-size: 0.8rem;
    color: #c0272d;
}

/*2026/03/07*/
/* 背景を消す設定 */
#priceBox {
    background-color: transparent !important; /* 背景色をなくす */
    background-image: none !important;
    color: #333; /* 背景が白くなる場合、文字色を濃い色に変更（必要に応じて） */

/* 画像を横幅いっぱいにする設定 */
#priceBox img,
.priceBox__text-add_Box img,
.priceBox__text-add img {
    width: 100% !important;
    max-width: 100% !important;
}