@charset "utf-8";
/* CSS Document */

/*===============================================
●共通
===============================================*/
#mainImage .imgWrap {
	position: relative;
}
#onsenWrap #mainImage .imgWrap {
	background: url("../../images/onsen/main.jpg") no-repeat center center / cover;
}
#mainImage .imgWrap h1 {
	position: absolute;
	color: white;
}
#mainImage .imgWrap div {
	position: absolute;
	right: 3%;
	bottom: 7%;
}
#mainImage .imgWrap div p:not([class]) {
	color: #fff;
	font-size: calc(24 / 12 * 1em);
}
.slideArea {
	position: relative;
}
#headWrap .pageTitle p {
	text-align: center;
	line-height: 1.75;
	letter-spacing: 0.1em;
	font-family: "adobe-garamond-pro", serif;
}
.bx-caption {
	position: absolute;
	bottom: 16px;
	z-index: 100;
}
.bx-caption span {
	display: inline-block;
	font-size: calc(14 / 12 * 1em);
	color: #fff;
	line-height: 1;
	padding: 0.35em 1em;
	background-color: #a1b3b3;
}
:is(#box01, #box03) .bx-caption {
	right: 0;
}
#box02 .bx-caption {
	left: 0;
}
#firstWrap .textTitle {
	font-size: calc(15 / 12 * 1em);
	line-height: calc(25 / 15);
	letter-spacing: 0.05em;
	text-align: center;
}
#firstWrap .textTitle > span {
	display: inline-block;
}
#pageContents .textBox h3 {
	letter-spacing: 0.2em;
}

/* menuInfo
-----------------------------------------------*/
#menuInfo {
	margin-bottom: 10em;
}
#menuInfo h2 {
	border-top: 1px #b9c3c9 solid;
	border-bottom: 1px #b9c3c9 solid;
	text-align: center;
}
.menuInner {
	padding: 0 1em;
}
.menuTableWrapper:not(:first-of-type) {
	margin-top: 5em;
}
.menuTableWrapper h3 {
	margin-bottom: calc(15 / 12 * 1em);
}
.menuTableWrapper table th,
.menuTableWrapper table td {
	padding: 1em 0;
	line-height: 1.5;
}
.menuTableWrapper table th {
	width: 10em;
}
.menuTableWrapper table td {
	width: calc(100% - 10em);
}
.menuTableWrapper table td a.pcNoCall {
	color: #778288;
}
.menuTableWrapper li {
	line-height: 1.75;
}
#onsenWrap #box03 .slideBox,
#onsenWrap #box03 .slideBox li {
	width: 100% !important;
}
.mapWrapper {
	max-width: 630px;
	margin: calc(70 / 12 * 1em) auto 0;
	padding: 0 10px;
}
.map {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: calc(330 / 610 * 100%);
}
.map > * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/

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

	#mainImage .imgWrap h1 {
		font-size: 2.4em;
		right: 5%;
		bottom: 12%;
	}

	/* pageContents
	-----------------------------------------------*/
	#pageContents {
		padding: 0;
	}
	#pageContents section h2 {
		font-size: 1.4em;
		margin-bottom: 1em;
	}
	#pageContents section .img {
		text-align: center;
	}
	#pageContents section:not(:first-child) {
		padding-top: 8em;
	}
	#pageContents section:last-child {
		margin-bottom: 5.8em;
	}
	#pageContents section .textBox,
	#pageContents section .textBox02 {
		text-align: center;
	}
	#pageContents section h3 {
		font-size: 1.2em;
		margin-bottom: 3em;
	}
	#pageContents section .conIntro {
		font-size: 1.15em;
		padding: 2.5em 2em 0;
		line-height: 2em;
		text-align: center;
	}

	/* menuInfo
	-----------------------------------------------*/
	#menuInfo h2 {
		padding: 1em 0;
		margin-bottom: 5em;
	}
	#menuInfo section:first-child,
	#menuInfo table {
		margin-bottom: 5em;
	}
	#menuInfo ul {
		margin: 0 auto;
	}
	#menuInfo table th {
		width: 20%;
	}
	#menuInfo table td {
		padding-left: 1em;
	}
	#onsenWrap #menuInfo ul {
		margin-bottom: 2em;
	}
	#onsenWrap #menuInfo table {
		margin-bottom: 2em;
	}
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px) {
	.flexBox {
		display: flex;
		justify-content: center;
	}
	#mainImage .imgWrap h1 {
		right: 3%;
		bottom: 10%;
		font-size: 5.6em;
	}
	#onsenWrap #pageContents section:not(:last-of-type),
	#kikukawaWrap #pageContents section:not(:last-child),
	#ishigakiWrap #pageContents section:not(:last-child) {
		margin-bottom: 15em;
	}
	#headWrap .pageTitle p {
		font-size: 1.33em;
	}
	#pageContents .slideBox {
		width: 100%;
	}
	#mainImage .imgWrap div p:not([class]) {
		font-size: calc(57 / 12 * 1em);
	}
	#firstWrap {
		margin-bottom: calc(90 / 12 * 1em);
	}
	/* pageContents
	-----------------------------------------------*/
	#pageContents {
		margin-bottom: 15em;
	}
	#pageContents .flexBox .textBox {
		width: 22%;
		text-align: center;
	}
	#pageContents .flexBox .img,
	#pageContents .conIntro {
		padding-top: 2em;
		letter-spacing: 0.1em;
	}
	#pageContents .conIntro {
		font-size: 1.15em;
	}
	#pageContents .textBox h2 {
		font-size: 1.4em;
		margin: 3em 0 4em;
	}
	#pageContents .textBox h3 {
		font-size: 1.4em;
		line-height: 2.5em;
		writing-mode: vertical-rl;
		display: inline-block;
		text-align: justify;
		text-orientation: upright;
	}
	/* #pageContents #box01 .conIntro,
	#pageContents #box03 #cuisinesBox .conIntro {
		padding-right: 10%;
	} */
	#pageContents section .conIntro {
		line-height: 2.5em;
	}

	/* box01 */
	#box01 .flexBox .img {
		text-align: right;
	}

	/* box02 */
	#box02 .flexBox {
		flex-direction: row-reverse;
	}
	#box02 .flexBox .img .conIntro {
		text-align: right;
	}

	/* box03 */
	#box03 .conIntro {
		margin-bottom: 2em;
	}

	/* menuInfo
	-----------------------------------------------*/

	#menuInfo h2 {
		padding: 1em 0;
		margin-bottom: 6em;
		font-size: 1.3em;
	}
	.flexBox .img {
		width: calc(690 / 940 * 100%);
	}

	/* pageContents */
	#pageContents .textBox h2 {
		letter-spacing: 0.2em;
	}
	.menuInner {
		width: 100%;
		max-width: 400px;
		padding: 0 10px;
		margin: 0 auto;
	}
	.menuTableWrapper:not(:first-of-type) {
		margin-top: 5em;
	}
	.menuTableWrapper h3 {
		font-size: 1.3em;
		margin-bottom: calc(15 / 12 * 1em);
	}

	/* --------------------------------------------------------
	英語版ページの微調整
	-------------------------------------------------------- */
	

	body.englishPage #pageContents .textBox h3 {
		text-orientation: mixed;
		line-height: 2;
	}
}