@charset "UTF-8";
/* CSS PC/SP共通レイアウト */

#_18spa{
	font-size: 15px;
}





/* コンテンツ幅 */
#_18spa .contents{
	max-width:900px;
	width: 100%;
	margin:0 auto;
}

#_18spa .contents1{
	max-width:1000px;
	width: 100%;
	margin:0 auto;
}





/* タイトル */
#_18spa .title{
	width: 100%;
	height: 430px;
	background-image:url("../img/18spa/img_spa_list_main.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
}

#_18spa .title div{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	text-align: center;
}

#_18spa .title_01{
	color: #ffffff;
	font-size: 58px;
	font-weight: 600;
}





/* 水上温泉 */
#_18spa .onsen_title{
	margin-top: 110px;
	text-align: center;
}

#_18spa .onsen_title p{
	font-size: 30px;
	font-weight: 600;
}

#_18spa .img_title_border{
	margin-top: 20px;
}

#_18spa .text{
	text-align: center;
	margin-top: 40px;
}
#_18spa .text p{
	text-align: center;
}
#_18spa .name{
	font-size: 18px;
	font-weight: 600;
	height:3em;
	line-height:1.4em;
	overflow:hidden;
	color: #00B4DC;
}

#_18spa .access{
	font-size: 14px;
	line-height: 20px;
	color: #000000;
}

#_18spa .img_spot{
	margin-top: 5px;
	margin-bottom: 5px;
	width:266px;
	height:180px;
	background-color:#FFF;
}
#_18spa .img_spot img{
	width: auto;
	height:100%;
	object-fit: cover;
}

#_18spa .onsen_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 90px;
	border-bottom: 1px solid #000000;
}

#_18spa .onsen_item{
	margin-bottom: 90px;
}

#_18spa .message{
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
	width:100%;
	font-size: 18px;
}

#_18spa .onsen_item .name{
	color: #00B4DC;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
	height:3em;
	line-height:1.4em;
	overflow:hidden;

}

#_18spa .onsen_item .thumbnail_img{
	text-align: center;
	width:266px;
	height:180px;
	background-color:#f0f0f0;
	overflow:hidden;
}
#_18spa .onsen_item .thumbnail_img img{
	width: auto;
	height:100%;
	object-fit: cover;
}


/* トップへ戻るボタン */
#_18spa .top_btn{
	margin-top: 120px;
	margin-bottom: 140px;
}





/*--------------------------------------------------*
 *   温泉地について
 *--------------------------------------------------*/
/* メインビジュアル */
#_18spa .onsen_main{
	width: 100%;
	height: 430px;
	background-image:url("../img/18spa/img_onsen_main.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#_18spa .onsen_main p{
	color: #ffffff;
}

#_18spa .main_text_01{
	font-size: 58px;
	font-weight: 600;
	line-height: 75px;
	letter-spacing: 8px;
	padding-top: 50px;
}

#_18spa .main_text_02{
	font-size: 34px;
	margin-top: 40px;
}





/* 温泉 */
#_18spa .onsen_title_box_01{
	background-color: #F0F0EC;
	padding-top: 5px;
	padding-bottom: 150px;
}

#_18spa .onsen_title_01{
	font-size: 34px;
	margin-top: -10px;
}

#_18spa .onsen_title_02{
	font-size: 14px;
}

#_18spa .onsen_title_box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 90px;
}

#_18spa .onsen_area{
	font-size: 14px;
	border: 2px solid #000000;
	padding: 0px 20px;
	background-color: #ffffff;
}

#_18spa .img_onsen{
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

#_18spa .onsen_subtitle{
	text-align: center;
	font-size: 20px;
	margin-bottom: 15px;
}

#_18spa .onsen_text_box{
	margin-top: 20px;
}

#_18spa .text_box_a{
	margin-top: 70px;
}

#_18spa .btn{
	display: flex;
	justify-content: center;
	margin-top: 50px;
}

#_18spa .bt_black_arrow{
	margin: 0px 15px;
}

/* 画像複数 */
#_18spa .img_onsen_01{
	margin-top: 10px;
}














/*--------------------------------------------------*
 *   みなかみ18湯
 *--------------------------------------------------*/
/* メインビジュアル1 */
#_18spa .onsen_main_18spa{
	width: 100%;
	height: 430px;
	background-image:url("../img/18spa/img_onsen_main_18spa.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#_18spa .onsen_main_18spa p{
	color: #000000;
}

#_18spa .main_text_18spa_01{
	font-size: 58px;
	font-weight: 600;
	line-height: 75px;
	letter-spacing: 8px;
	padding-top: 50px;
}

#_18spa .main_text_18spa_02{
	font-size: 34px;
	font-weight: 600;
	margin-top: 40px;
}

#_18spa .main_text_18spa_02 span{
	color: #00C8DC;
}




/* メインビジュアル2 */

/*2026/01/15修正ここから*/
#_18spa .onsen_main_18spa_map{
	width: 100%;
	height: 950px;
	position: relative;
}
#_18spa .onsen_main_18spa_map .img_map_pc{
	position: absolute;
	top: 0px;
	left: calc(50% + 50px);
}
@media screen and (min-width:1025px) and (max-width:1500px) {
#_18spa .onsen_main_18spa_map .img_map_pc{
	left: calc(50% + 0px);
}
}
/*2026/01/15修正ここまで*/

#_18spa .main_text_18spa_map_01{
	font-size: 34px;
	font-weight: 600;
	padding-top: 120px;
}

#_18spa .main_text_18spa_map_02{
	margin-top: 20px;
	line-height: 30px;
	padding-right: 540px;
}

#_18spa .btn_black_18spa_map{
	margin-top: 60px;
}





/* タイトル */
#_18spa .title_18spa{
	text-align: center;
	font-size: 30px;
	font-weight: 600;
	margin: 110px 0px;
	margin-bottom: 70px;
}





/* ページ内ボタン */
#_18spa .page1{
	text-align: center;
	margin: 0px 40px;
}

#_18spa .page2{
	text-align: center;
	margin: 0px 40px;
}

#_18spa .page3{
	text-align: center;
	margin: 0px 40px;
}

#_18spa .access_btn{
	display: flex;
	justify-content: center;
	margin-bottom: -10px;
	align-items: flex-end;
	height: 80px;
}

#_18spa .page1:hover {
    content: url("../img/18spa/page1_hover.png");
}

#_18spa .page2:hover {
    content: url("../img/18spa/page2_hover.png");
}

#_18spa .page3:hover {
    content: url("../img/18spa/page3_hover.png");
}





/* エリアタイトル */
#_18spa .title_18spa_02{
	text-align: center;
	font-size: 34px;
	font-weight: 600;
}

#_18spa .title_18spa_01{
	text-align: center;
	font-size: 14px;
	margin-top: 10px;
	display: flex;
    justify-content: center;
    align-items: center;
}

#_18spa .title_18spa_01::before,.title_18spa_01::after {
    content: "";
    height: 1px;
    width: 72px;
    background-color: #000000;
}

#_18spa .title_18spa_01::before {
    margin-right: 20px;
}

#_18spa .title_18spa_01::after {
    margin-left: 20px;
}





/* エリア */
#_18spa .area_box_18spa_01{
	background-color: #F0F0EC;
	padding-top: 100px;
	padding-bottom: 150px;
}

#_18spa .area_box_18spa{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 40px;
}

#_18spa .item_18spa{
	width: 30%;
	margin-bottom: 80px;
	display: flex;
	flex-direction: column;
}

#_18spa .item_18spa_01{
	margin-left: 45px;
}

#_18spa .item_18spa img{
	margin-bottom: 5px;
}

#_18spa .item_18spa_text_01{
	font-size: 18px;
	font-weight: 600;
}

#_18spa .item_18spa_text_02{
	font-size: 14px;
}

#_18spa .item_18spa_text_03{
	font-size: 14px;
}

#_18spa .btn_black_18spa{
	margin-top: 15px;
	margin-top: auto;
}

#_18spa .bt_black_arrow_01{
	margin-left: 0px;
	margin-top: 10px;
}
#_18spa .name{
	height:auto;
}




/* トップへ戻るボタン */
#_18spa .top_btn_18spa{
	margin-top: 100px;
	margin-bottom: 60px;
}



/*--------------------------------------------------*
 *   追加css(2026/04/14)
 *--------------------------------------------------*/
#_18spa .onsen_box{
	justify-content: flex-start;
}
#_18spa .onsen_item{
	width: 30%;
	margin-right: 5%;
}
#_18spa .onsen_item:nth-child(3n){
	margin-right: 0%;
}
#_18spa .item_18spa_01{
	margin-left: 0px;
}
#_18spa .item_18spa{
	margin-right: 5%;
}
#_18spa .item_18spa:nth-child(3n){
	margin-right: 0%;
}
#_18spa .onsen_item .thumbnail_img{
	text-align: center;
	width:100%;
	height:180px;
	background-color:#f0f0f0;
	overflow:hidden;
}
#_18spa .onsen_item .thumbnail_img img{
	width: auto;
	height:100%;
	object-fit: cover;
}
#_18spa .item_18spa_img{
	text-align: center;
	position: relative;
}
#_18spa .item_18spa_img .link_arrow{
	text-align: center;
	position: absolute;
	bottom: 0px;
	right: 0px;
}




/* スマホレイアウト */
@media (max-width: 1024px) {
	
	#_18spa{
		font-size: 14px;
	}





	/* コンテンツ幅 */
	#_18spa .contents{
		max-width:900px;
		width: 100%;
		margin:0 auto;
		padding: 0px 15px;
	}
	
	#_18spa .contents1{
		max-width:1000px;
		width: 100%;
		margin:0 auto;
		padding: 0px 15px;
	}
	
	
	
	
	
	/* タイトル */
	#_18spa .title_01{
		font-size: 24px;
	}
	
	#_18spa .title{
		width: 100%;
		height: 430px;
		background-image:url("../img/18spa/img_spa_list_main_sp.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		position: relative;
		margin-top: 30px;
	}
	
	
	
	
	
	/* 水上温泉 */
	#_18spa .onsen_title{
		margin-top: 40px;
	}

	#_18spa .onsen_title p{
		font-size: 22px;
	}

	#_18spa .img_title_border{
		margin-top: 15px;
	}

	#_18spa .text{
		margin-top: 30px;
		font-size: 15px;
	}

	#_18spa .access{
		font-size: 12px;
		line-height: 20px;
		margin-bottom: 50px;
	}

	#_18spa .img_spot{
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
	}

	#_18spa .onsen_box{
		display: block;
		margin-top: 70px;
	}

	#_18spa .onsen_item{
		margin-bottom: 55px;
	}
	#_18spa .onsen_item .name{
		margin-bottom: 5px;
		height:auto
	}
	
	



	
	/* トップへ戻るボタン */
	#_18spa .top_btn{
		margin-top: 55px;
		margin-bottom: 70px;
	}
	
	
	
	
	
	/*--------------------------------------------------*
	 *   温泉地について
	 *--------------------------------------------------*/
	/* メインビジュアル */
	#_18spa .onsen_main{
		width: 100%;
		height: 255px;
		background-image:url("../img/18spa/img_onsen_main_sp.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	#_18spa .onsen_main p{
		text-align: center;
	}

	#_18spa .main_text_01{
		font-size: 26px;
		line-height: 45px;
		letter-spacing: 2px;
		padding-top: 60px;
	}

	#_18spa .main_text_02{
		font-size: 22px;
		margin-top: 10px;
	}





	/* 温泉 */
	#_18spa .onsen_title_box_01{
		background-color: #F0F0EC;
		padding-top: 5px;
		padding-bottom: 60px;
	}
	
	#_18spa .onsen_title_01{
		font-size: 30px;
		margin-top: 0px;
		text-align: center;
	}

	#_18spa .onsen_title_02{
		font-size: 14px;
		text-align: center;
	}

	#_18spa .onsen_title_box{
		display: block;
		margin-top: 40px;
	}

	#_18spa .onsen_area{
		display: none;
	}

	#_18spa .img_onsen{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 20px;
	}

	#_18spa .onsen_subtitle{
		font-size: 16px;
		margin-bottom: 20px;
	}

	#_18spa .onsen_text_box{
		margin-top: 30px;
	}

	#_18spa .text_box_a{
		margin-top: 40px;
	}

	#_18spa .btn{
		display: flex;
		justify-content: center;
		margin-top: 50px;
	}

	#_18spa .bt_black_arrow{
		margin: 0px 5px;
	}
	
	#_18spa .bt_black_arrow a {
		height: 50px;
	}

	/* 画像複数 */
	#_18spa .img_onsen_01{
		margin-top: 0px;
		margin-left: 10px;
	}
	
	#_18spa .img_onsen_sp{
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}
	
	#_18spa .img_minakami{
		margin-top: 30px;
	}
	
	#_18spa .img_wave{
		text-align: center;
		margin-top: -2px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*--------------------------------------------------*
	 *   みなかみ18湯
	 *--------------------------------------------------*/
	/* メインビジュアル1 */
	#_18spa .onsen_main_18spa{
		width: 100%;
		height: 255px;
		background-image:url("../img/18spa/img_onsen_main_18spa_sp.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	#_18spa .onsen_main_18spa p{
		color: #000000;
	}

	#_18spa .main_text_18spa_01{
		font-size: 26px;
		font-weight: 600;
		line-height: 24px;
		letter-spacing: 0px;
		padding-top: 20px;
		text-align: center;
	}

	#_18spa .main_text_18spa_02{
		font-size: 22px;
		font-weight: 600;
		margin-top: 10px;
		margin-bottom: 30px;
		text-align: center;
	}

	#_18spa .main_text_18spa_02 span{
		color: #00C8DC;
	}
	
	#_18spa .onsen_main_18spa_img{
		text-align: center;
	}
	
	
	
	
	
	/* メインビジュアル2 */
	#_18spa .onsen_main_18spa_map{
		width: 100%;
		height: auto;
		background-image:none;
	}

	#_18spa .main_text_18spa_map_01{
		font-size: 20px;
		font-weight: 600;
		padding-top: 20px;
	}

	#_18spa .main_text_18spa_map_02{
		margin-top: 10px;
		margin-bottom: 30px;
		line-height: 24px;
		padding-right: 0px;
	}

	#_18spa .btn_black_18spa_map{
		margin-top: 60px;
	}
	
	#_18spa .onsen_main_18spa_map_img{
		text-align: center;
	}
	
	
	
	
	
	/* ページ内ボタン */
	#_18spa .page1{
		text-align: center;
		margin: 0px 15px;
	}

	#_18spa .page2{
		text-align: center;
		margin: 0px 15px;
	}

	#_18spa .page3{
		text-align: center;
		margin: 0px 15px;
	}

	#_18spa .modelcourses_btn{
		display: flex;
		justify-content: center;
		margin-bottom: -12px;
		align-items: flex-end;
		height: 80px;
	}

	#_18spa .page1:hover {
		content: url("../img/18spa/page1_hover_sp.png")
	}

	#_18spa .page2:hover {
		content: url("../img/18spa/page2_hover_sp.png");
	}

	#_18spa .page3:hover {
		content: url("../img/18spa/page3_hover_sp.png");
	}
	
	
	
	
	
	
	/* エリアタイトル */
	#_18spa .title_18spa_02{
		font-size: 20px;
	}
	
	#_18spa .title_18spa_01{
		font-size: 12px;
		margin-top: 5px;
	}

	#_18spa .title_18spa_01::before,.title_18spa_01::after {
		width: 25px;
	}
	
	#_18spa .title_18spa_01::before {
		margin-right: 10px;
	}

	#_18spa .title_18spa_01::after {
		margin-left: 10px;
	}

	
	
	
	
	
	/* エリア */
	#_18spa .text{
		text-align: center;
		margin-top: 40px;
		margin-bottom: 80px;
	}

	#_18spa .area_box_18spa_01{
		background-color: #F0F0EC;
		padding-top: 40px;
		padding-bottom: 50px;
	}

	#_18spa .area_box_18spa{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#_18spa .item_18spa{
		width: 48%;
		margin-bottom: 50px;
		display: flex;
		flex-direction: column;
	}
	
	#_18spa .item_18spa_01{
		margin-left: 0px;
	}
	
	#_18spa .item_18spa_img{
		text-align: center;
	}

	
	
	#_18spa .item_18spa img{
		margin-bottom: 5px;
	}

	#_18spa .item_18spa_text_01{
		font-size: 16px;
		font-weight: 600;
	}

	#_18spa .item_18spa_text_02{
		font-size: 11px;
		margin-bottom: 5px;
	}
	
	#_18spa .item_18spa_text_03{
		font-size: 11px;
		margin-bottom: 5px;
		margin-top: auto;
	}

	#_18spa .btn_black_18spa{
		margin-top: 15px;
		margin-top: auto;
		margin-left: -5px;
		margin-right: 5px;
	}
	
	#_18spa .bt_black_arrow{
		width: 100%;
	}
	
	#_18spa .bt_black_arrow a {
		height: 40px;
		font-size: 15px;
		background-size: 18px auto;
	}
	
	
	
	
	
	/* トップへ戻るボタン */
	#_18spa .top_btn_18spa{
		margin-top: 40px;
		margin-bottom: 50px;
	}



/*--------------------------------------------------*
 *   追加css(2026/04/14)
 *--------------------------------------------------*/
#_18spa .item_18spa{
	margin-right: 4%;
}
#_18spa .item_18spa:nth-child(2n){
	margin-right: 0%;
}
#_18spa .item_18spa_img .link_arrow img{
	width: 36px;
	height: 28px;
}

}