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


/* ---------------------------------------------------------------------------------------------

   特定箇所指定

--------------------------------------------------------------------------------------------- */

#breakfast{
	margin-bottom: 75px;
}

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

#breakfast{
	margin-bottom: 50px;
}
	
}

.fa-pagelines{
	color: #b393bf;
	font-size: clamp(22px, 2vw, 30px);
}
.fa-concierge-bell{
	color: #b393bf;
	font-size: clamp(20px, 2vw, 24px);
}



/* ---------------------------------------------------------------------------------------------

   こだわりの食材

--------------------------------------------------------------------------------------------- */
#kodawari{
	position: relative;
}

.kodawari-back{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background-image: url(../restaurant-images/japanese-paper_00147.jpg);
	background-repeat: repeat;
	z-index: 1;
}

.kodawari-image{
	width: 100%;
	margin-bottom: 50px;
	position: relative;
	z-index: 5;
}

.kodawari-image li{
	float: left;
	width: 33.33%;
}

.kodawari-image li img{
	width: 100%;
	height: auto;
}

.kodawari-image .top_fade{
	margin-top: 5%;
}

#kodawari .text-20{
	width: 90%;
	text-align: center;
	position: relative;
	z-index: 5;
	letter-spacing: 0.25em;
	margin: 0 auto;
}


/* ---------------------------------------------------------------------------------------------

   Swiper-slideer ※swiper2.css に記述

--------------------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------------------

   夕食メイン

--------------------------------------------------------------------------------------------- */
.dinner-main{
	width: 100%;
	height: 800px;
	background-image: url(../restaurant-images/dinner-main.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 75px; 
	border-radius: 0 50% 0 50%;
}

@media screen and (max-width:1250px) {
	
.dinner-main{
	height: 600px;
}
	
}

@media screen and (max-width:750px) {
	
.dinner-main{
	height: 400px;
	margin-bottom: 50px;
	border-radius: 0 25% 0 25%;
}
	
}

@media screen and (max-width:500px) {
	
.dinner-main{
	height: 350px;
}
	
}



/* ---------------------------------------------------------------------------------------------

   朝食メイン

--------------------------------------------------------------------------------------------- */
.breakfast-main{
	width: 100%;
	height: 800px;
	background-image: url(../restaurant-images/breakfast-main.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 75px;
	border-radius: 0 50% 0 50%;
}

@media screen and (max-width:1250px) {
	
.breakfast-main{
	height: 600px;
}
	
}

@media screen and (max-width:750px) {
	
.breakfast-main{
	height: 400px;
	margin-bottom: 50px;
	border-radius: 0 25% 0 25%;
}
	
}

@media screen and (max-width:500px) {
	
.breakfast-main{
	height: 350px;
}
	
}



/* ---------------------------------------------------------------------------------------------

   About ※全共通

--------------------------------------------------------------------------------------------- */
.about-leftBox{
	float: left;
	width: 45%;
}

.about-rightBox{
	float: right;
	width: 45%;
}

.meal-about{
	margin-bottom: 50px;
}

.meal-about th,.meal-about td.re-td{
	font-size: clamp(14px, 2vw, 16px);
	border-bottom: 0.5px solid #ccc;
	padding: 10px 5px;
}

.meal-about th{
	font-weight: normal;
	text-align: left;
	width: 20%;
}

.meal-about td.irre-td{
	font-size: clamp(10px, 2vw, 12px);
	line-height: 1.75 !important;
	border-bottom: 0.5px solid #ccc;
	padding: 10px 0;
}

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

.about-leftBox{
	float: none;
	width: 100%;
}
.about-rightBox{
	float: none;
	width: 100%;
}
	
.meal-about{
	margin-top: 50px;
}
	
}



/* 梅背景
------------------------------------------------------------*/
#dinner{
	position: relative;
}
#breakfast{
	position: relative;
}

.ume{
	position: absolute;
	top: 25px;
	right: 25px;
	width: 480px;
	height: 329px;
	background: url(../restaurant-images/ume.png) no-repeat 0 0;
}

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

.ume{
	right: -150px;
}
	
}

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

.ume{
	right: -25px;
	width: 240px;
	height: 165px;
	background: url(../restaurant-images/ume2.png) no-repeat 0 0;
}
	
}

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

.ume{
	right: -50px;
}
	
}

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

.ume{
	right: -75px;
}
	
}

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

.ume{
	right: -100px;
}
	
}


/* ---------------------------------------------------------------------------------------------

   特選料理

--------------------------------------------------------------------------------------------- */
.specialty-dishes{
	width: 100%;
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.specialty-dishes li{
	flex: 1;
	text-align: center;
}

.specialty-dishes figure{
	width: 100%;
	overflow: hidden;
	margin-bottom: 15px;
}

.specialty-dishes figure img{
	width: 100%;
	height: auto;
	display: block;
}

.specialty-name{
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 500;
	color: #333;
	line-height: 1.6;
	letter-spacing: 0.05em;
	padding: 0 10px;
}

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

.specialty-dishes{
	flex-direction: column;
	gap: 40px;
	margin-top: 30px;
}

.specialty-dishes li{
	width: 100%;
}

.specialty-name{
	font-size: clamp(15px, 3vw, 18px);
	margin-top: 10px;
}
	
}




/* ---------------------------------------------------------------------------------------------

   一品料理セクション

--------------------------------------------------------------------------------------------- */

#a_la_carte {
	padding: 60px 0;
}

#a_la_carte .fa-utensils {
	color: #b393bf;
	font-size: clamp(20px, 2vw, 24px);
}

/* 料理長おすすめ */
.a-la-carte-recommend {
	text-align: center;
	margin-bottom: 60px;
}

.recommend-title {
	background-color: #c94640;
	color: #fff;
	display: inline-block;
	padding: 10px 40px;
	font-size: clamp(16px, 2vw, 20px);
	margin-bottom: 30px;
	font-weight: bold;
}

.specialty-dishes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.specialty-dishes li {
	flex: 1;
	min-width: 280px;
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 20px;
	box-sizing: border-box;
}

.specialty-dishes figure {
	width: 100%;
	overflow: hidden;
	aspect-ratio: 4/3;
}

.specialty-dishes figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.specialty-description {
	font-size: clamp(13px, 1.5vw, 15px);
	line-height: 1.8;
	margin: 10px 0;
	color: #666;
}

.specialty-price {
	font-size: clamp(18px, 2.5vw, 24px);
	font-weight: bold;
	color: #333;
	margin-top: 15px;
}

.specialty-price .tax {
	font-size: clamp(13px, 1.5vw, 16px);
	font-weight: normal;
	color: #666;
}

/* 肉料理・魚料理・その他 */
#a_la_carte .contents1200.clearfix {
	margin-top: 50px;
}

#a_la_carte .contents1200.clearfix:first-of-type {
	margin-top: 0;
}

.a-la-carte-left,
.a-la-carte-right {
	float: left;
	width: 48%;
	box-sizing: border-box;
}

.a-la-carte-left {
	margin-right: 4%;
}

.a-la-carte-category {
	font-size: clamp(20px, 2.5vw, 26px);
	font-weight: bold;
	margin-bottom: 25px;
	padding-bottom: 10px;
	border-bottom: 2px solid #b393bf;
}

.a-la-carte-image {
	width: 100%;
	overflow: hidden;
	margin-bottom: 15px;
	aspect-ratio: 4/3;
}

.a-la-carte-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.a-la-carte-image-caption {
	font-size: clamp(13px, 1.5vw, 15px);
	text-align: center;
	color: #666;
	line-height: 1.6;
}

/* メニューテーブル */
.meal-menu {
	width: 100%;
	border-collapse: collapse;
	/*background-color: #fff;*/
}

.meal-menu tbody tr {
	border-bottom: 1px dotted #ccc;
}

.meal-menu tbody tr:last-child {
	border-bottom: none;
}

.meal-menu td {
	padding: 15px 10px;
	vertical-align: middle;
}

.menu-item {
	font-size: clamp(14px, 1.8vw, 16px);
	line-height: 1.8;
}

.menu-sub {
	font-size: clamp(12px, 1.5vw, 14px);
	color: #888;
	display: block;
	margin-top: 5px;
}

.menu-price {
	text-align: right;
	font-size: clamp(14px, 1.8vw, 16px);
	white-space: nowrap;
	font-weight: bold;
}

.menu-price .tax {
	font-size: clamp(12px, 1.5vw, 14px);
	font-weight: normal;
	color: #666;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
	#a_la_carte {
		padding: 40px 0;
	}

	.specialty-dishes {
		flex-direction: column;
	}

	.specialty-dishes li {
		min-width: 100%;
	}

	.a-la-carte-left,
	.a-la-carte-right {
		float: none;
		width: 100%;
		margin: 0 0 30px 0;
	}

	.contents1200.clearfix {
		margin-bottom: 30px;
	}
}

@media screen and (max-width: 550px) {
	.recommend-title {
		padding: 8px 30px;
	}

	.specialty-dishes li {
		padding: 15px;
	}

	.meal-menu td {
		padding: 12px 8px;
	}
}


/* ---------------------------------------------------------------------------------------------

   朝食セクション

--------------------------------------------------------------------------------------------- */

#breakfast .fa-utensils {
	color: #b393bf;
	font-size: clamp(20px, 2vw, 24px);
}

/* メイン画像 */
.breakfast-main-image {
	width: 100%;
	overflow: hidden;
	margin: 30px 0;
}

.breakfast-main-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* サブ画像3枚 */
.breakfast-sub-images {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 30px 0 50px;
}

.breakfast-sub-images li {
	flex: 1;
	overflow: hidden;
}

.breakfast-sub-images li img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 4/3;
}

/* 日田満喫の品揃え豊富な朝食 */
.breakfast-info-box {
	background-color: #fff;
	padding: 40px;
	margin: 50px 0;
	border: 1px solid #e0e0e0;
}

.breakfast-title {
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: bold;
	margin-bottom: 25px;
	padding-bottom: 15px;
	border-bottom: 2px solid #b393bf;
}

.breakfast-details {
	display: flex;
	gap: 40px;
	margin-bottom: 25px;
	padding: 20px 0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}

.breakfast-time,
.breakfast-location {
	display: flex;
	align-items: center;
	gap: 15px;
}

.breakfast-details .label {
	background-color: #b393bf;
	color: #fff;
	padding: 8px 20px;
	font-size: clamp(13px, 1.5vw, 15px);
	font-weight: bold;
	white-space: nowrap;
}

.breakfast-details .time,
.breakfast-details .place {
	font-size: clamp(15px, 1.8vw, 18px);
	font-weight: bold;
}

.breakfast-details .place a {
	color: #b393bf;
	text-decoration: none;
}

.breakfast-details .place a:hover {
	text-decoration: underline;
}

.breakfast-description {
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.9;
	color: #333;
}

/* 温泉かゆセクション */
.onsen-gayu-section {
	display: flex;
	gap: 30px;
	margin: 50px 0;
	background-color: #f8f8f8;
	border: 1px solid #ddd;
	padding: 40px;
}

.onsen-gayu-left {
	flex-shrink: 0;
}

.onsen-gayu-header {
	display: flex;
	align-items: stretch;
}

.onsen-gayu-title {
	background-color: #fff;
	border: 2px solid #333;
	padding: 25px 20px;
	font-size: clamp(32px, 4vw, 48px);
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	writing-mode: vertical-rl;
	letter-spacing: 0.1em;
}

.recommend-label {
	background-color: #c94640;
	color: #fff;
	padding: 10px 8px;
	font-size: clamp(15px, 1.8vw, 20px);
	font-weight: bold;
	writing-mode: vertical-rl;
	text-align: center;
	letter-spacing: 0.1em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.onsen-gayu-right {
	flex: 1;
}

.onsen-gayu-image {
	width: 100%;
	overflow: hidden;
	margin-bottom: 20px;
}

.onsen-gayu-image img {
	width: 100%;
	height: auto;
	display: block;
}

.onsen-gayu-subtitle {
	font-size: clamp(18px, 2vw, 24px);
	font-weight: bold;
	text-align: center;
	margin: 20px 0;
	color: #333;
}

.onsen-gayu-description {
	font-size: clamp(13px, 1.5vw, 15px);
	line-height: 1.9;
	margin: 20px 0;
	color: #333;
}

/* おすすめボックス */
.onsen-gayu-recommend {
	margin-top: 30px;
}

.recommend-box {
	display: flex;
	gap: 30px;
}

.recommend-image {
	flex-shrink: 0;
	width: 420px;
	overflow: hidden;
}

.recommend-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.recommend-content {
	flex: 1;
}

.recommend-content .recommend-title {
	font-size: clamp(18px, 2vw, 24px);
	font-weight: bold;
	margin-bottom: 15px;
	color: #333;
}

.onsen-recommend-title {
	font-size: clamp(18px, 2vw, 24px);
	font-weight: bold;
	margin-bottom: 15px;
	color: #333;
}

.recommend-list {
	list-style: none;
	padding: 0;
}

.recommend-list li {
	font-size: clamp(13px, 1.5vw, 15px);
	line-height: 1.8;
	padding-left: 1.5em;
	position: relative;
	margin-bottom: 8px;
	color: #333;
}

.recommend-list li:before {
	content: "・";
	position: absolute;
	left: 0;
	color: #b393bf;
	font-weight: bold;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
	.breakfast-sub-images {
		flex-direction: column;
	}

	.breakfast-sub-images li img {
		aspect-ratio: auto;
	}

	.breakfast-info-box {
		padding: 25px;
	}

	.breakfast-details {
		flex-direction: column;
		gap: 15px;
	}

	.onsen-gayu-section {
		flex-direction: column;
		padding: 25px;
	}

	.recommend-box {
		flex-direction: column;
	}

	.recommend-image {
		width: 100%;
	}
}

@media screen and (max-width: 550px) {
	.breakfast-info-box {
		padding: 20px;
	}

	.breakfast-details .label {
		padding: 6px 15px;
	}

	.onsen-gayu-section {
		padding: 20px;
	}

	.onsen-gayu-title {
		padding: 15px 20px;
	}

	.recommend-box {
		padding: 15px;
	}
}


/* ---------------------------------------------------------------------------------------------

   レストラン情報セクション

--------------------------------------------------------------------------------------------- */

#restaurant_info {
	background-color: #f5f5f5;
	padding: 60px 0;
}

.restaurant-info-container {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.restaurant-info-left {
	flex-shrink: 0;
}

.restaurant-info-title {
	background-color: #fff;
	border: 2px solid #333;
	padding: 40px 20px;
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: bold;
	writing-mode: vertical-rl;
	letter-spacing: 0.2em;
	text-align: center;
}

.restaurant-info-right {
	flex: 1;
}

.restaurant-info-table {
	width: 100%;
	background-color: #fff;
	border-collapse: collapse;
	margin-bottom: 30px;
}

.restaurant-info-table th {
	background-color: #e8e8e8;
	padding: 20px;
	text-align: left;
	font-size: clamp(15px, 1.8vw, 18px);
	font-weight: bold;
	border: 1px solid #ddd;
	width: 150px;
	vertical-align: top;
}

.restaurant-info-table td {
	padding: 20px;
	font-size: clamp(14px, 1.6vw, 16px);
	border: 1px solid #ddd;
}

.info-row {
	display: flex;
	gap: 20px;
	margin-bottom: 10px;
}

.info-row:last-child {
	margin-bottom: 0;
}

.info-label {
	font-weight: bold;
	min-width: 60px;
}

.info-value {
	flex: 1;
}

.restaurant-info-images {
	display: flex;
	gap: 20px;
	margin-bottom: 55px;
}

.restaurant-info-images figure {
	flex: 1;
	overflow: hidden;
}

.restaurant-info-images figure img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 16/9;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
	#restaurant_info {
		padding: 40px 0;
	}

	.restaurant-info-container {
		flex-direction: column;
		gap: 30px;
	}

	.restaurant-info-title {
		writing-mode: horizontal-tb;
		padding: 15px 30px;
	}

	.restaurant-info-table th {
		width: 100px;
		padding: 15px;
	}

	.restaurant-info-table td {
		padding: 15px;
	}

	.restaurant-info-images {
		flex-direction: column;
	}
}

@media screen and (max-width: 550px) {
	.restaurant-info-table th,
	.restaurant-info-table td {
		display: block;
		width: 100%;
	}

	.restaurant-info-table th {
		border-bottom: none;
	}

	.info-row {
		flex-direction: column;
		gap: 5px;
	}

	.info-label {
		min-width: auto;
	}
}


/* ---------------------------------------------------------------------------------------------

   

--------------------------------------------------------------------------------------------- */

.text-center {
	text-align: center;
}

.img-cover {
	border-radius: 10px;
}