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


/* =========================================================
　温泉
========================================================= */


/* カテゴリータイトル
--------------------------------------------------------- */
.c_title::before {
	content: "Hot Spring";
}
@media screen and (max-width:767px) {
	.c_title {
		background: url(../common/img/category_title.png) no-repeat center bottom, url(images/category_title_bg.jpg) no-repeat center center;
		background-size: 220px auto, cover;
	}
}
@media screen and (min-width:768px) , print {
	.c_title {
		background: url(../common/img/category_title.png) no-repeat center bottom, url(images/category_title_bg.jpg) no-repeat center center;
		background-size: 340px auto, cover;
	}
}


/* 外湯内湯のご案内
--------------------------------------------------------- */
@media screen and (max-width:767px) {
	.pickup {
		background: #f6efe8;
		text-align: center;
		padding: 0 0 2em;
	}
	.pickup br {
		display: none;
	}
	.pickup h3 {
		font-size: 200%;
		line-height: 1.4;
	}
	.pickup img {
		padding: 0 0 .4em;
	}
	.pickup p {
		text-align: left;
		padding: 0 10px;
	}
	.pickup .image h3 {
		color: #c64;
	}
	.pickup .spa h3 {
		color: #488;
	}
	.pickup h3::after {
		content: "";
		display: block;
		height: 2px;
		width: 4em;
		margin: .4em auto .2em;
	}
	.pickup .image h3::after {
		background: #c64;
	}
	.pickup .spa h3::after {
		background: #488;
	}
	.pickup .spa img {
		max-width: 1000px;
		margin: 2em auto 0;
	}
}
@media screen and (min-width:768px) , print {
	.pickup {
		background: #f6efe8;
		text-align: center;
	}
	.pickup h3 {
		font-size: 200%;
	}
	.pickup .image h3 {
        margin: 35px 0 10px;
		color: #c64;
        line-height: 1.4;
	}
	.pickup .spa h3 {
		color: #488;
	}
	.pickup h3::after {
		content: "";
		display: block;
		height: 2px;
		width: 4em;
		margin: .4em auto .2em;
	}
	.pickup .image h3::after {
		background: #c64;
	}
	.pickup .spa h3::after {
		background: #488;
	}
	.pickup .spa img {
		max-width: 1000px;
		margin: 2em auto 0;
	}
}

.image {
	margin-top: 20px;
	margin-bottom: 50px;
}


/* 館内設備のご案内
--------------------------------------------------------- */
@media screen and (max-width:767px) {
	.interior {
		font-size: 80%;
		line-height: 1.6;
		margin: 4em auto 6em;
		max-width: 1000px;
	}
	.interior h4 {
		font-size: 180%;
		color: #c22;
		text-align: center;
	}
	.interior_box .interior_box_01 {
		background: #f6f6f6 url(images/interior_01.jpg) no-repeat 50vw center;
		background-size: 50% auto;
		padding: 1em 51% 1em 10px;
	}
	.interior_box .interior_box_02 {
		background: #fff url(images/interior_02.jpg) no-repeat 50vw center;
		background-size: 50% auto;
		padding: 1em 51% 1em 10px;
	}
	.interior_box .interior_box_03 {
		background: #f6f6f6 url(images/interior_03.jpg) no-repeat 50vw center;
		background-size: 50% auto;
		padding: 1em 51% 1em 10px;
	}
	.interior_box .interior_box_04 {
		background: #fff url(images/interior_04.jpg) no-repeat 50vw center;
		background-size: 50% auto;
		padding: 1em 51% 1em 10px;
	}
	.interior_box section > img {
		display: none;
	}
	.interior_box section h5 {
		font-size: 120%;
		font-weight: bold;
	}
}
@media screen and (min-width:768px) , print {
	.interior {
		font-size: 80%;
		line-height: 1.6;
		margin: 4em auto 6em;
		max-width: 1000px;
		padding: 0 20px;
	}
	.interior h4 {
		font-size: 200%;
		color: #c22;
		text-align: center;
	}
	.interior_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.interior_box section {
		width: 24%;
	}
	.interior_box section h5 {
		font-size: 120%;
		text-align: center;
		font-weight: bold;
	}
}


/* コラム　泉質
--------------------------------------------------------- */
@media screen and (max-width:767px) {
	.column {
		padding: 2em 3em;
		background: #f0e9da url(../common/img/column_bg.png) no-repeat left top;
    	background-size: 30px 30px;
	}
	.column_text br {
		display: none;
	}
	.column_text h4 {
		line-height: 1.4;
		font-size: 160%;
		text-align: center;
	}
	.column_text h4:after {
		content: "";
		display: block;
		width: 15%;
		height: 2px;
		margin: .6em auto .8em;
		background: #c99633;
	}
	.column_text h4 br {
		display: none;
	}
	.column_text .capton {
		font-size: 80%;
	}
}
@media screen and (min-width:768px) , print {
	.column {
		margin: 4em auto;
		max-width: 1000px;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		padding: 0 20px 0 0px;
		background: #f0e9da ;
	}
	.column_text {
		flex: 0 0 500px;
		padding: 2em;
		background: #f0e9da url(../common/img/column_bg.png) no-repeat left top;
    	background-size: 30px 30px;
	}
	.column_text h4 {
		line-height: 1.4;
		font-size: 180%;
	}
	.column_text h4:after {
		content: "";
		display: block;
		width: 15%;
		height: 2px;
		margin: .6em auto .8em 0;
		background: #c99633;
	}
	.column_text .capton {
		font-size: 70%;
	}
	.column_photo {
		flex: 1 1 auto;
		background: url(images/column_01.jpg) no-repeat center center;
		background-size: 114%;
	}
	.column_photo img {
		display: none;
	}
}


/* 天峰の湯、朝峰の湯
--------------------------------------------------------- */
@media screen and (max-width:767px) {
	.type {
		background: #eee;
	}
	.type h3 {
		font-size: 180%;
		text-align: center;
		padding: 1em 10px 0;
		line-height: 1.4;
	}
	.type_st_box ,.type_sp-a_box{
		padding: .6em 10px 2em;
	}

	.type_st_box h4 span ,
	.type_sp-a_box h4 span {
		font-size: 60%;
		font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	}
	.type p {
		padding: 0;
	}
	.type p.text {
		padding-bottom: 1em;
	}
	.type a {
		background: #c93 url(../common/img/arrow_w.png) no-repeat 98% center;
		background-size: 7px auto;
		display: block;
		color: #fff;
		padding: .6em;
		margin: .5em 0;
		text-align: center;
	}
	.type_st_box h4 ,
	.type_sp-a_box h4
	{
		text-align: center;
		font-size: 160%;
		margin: .4em 0;
		line-height: 1;
	}
	.type_sp-a_box h4 {
		color: #CC9933
	}
	.type_st h4 {
		color: #075335;
	}
	.type_sp-a_box h4:after{
		content: "";
		display: block;
		height: 2px;
		width: 4em;
		margin: .4em auto .2em;
    	background: #c99633;
	}
		.type_st_box h4:after{
		content: "";
		display: block;
		height: 2px;
		width: 4em;
		margin: .4em auto .2em;
		background: #005533;
	}
}

@media screen and (min-width:768px) , print {
	.type {
		font-size: 100%;
	}
	.type h3 {
		font-size: 180%;
		text-align: center;
	}
	.type_st ,
	.type_sp-a ,
	.type_sp-b ,
	.type_dx {
		height: 460px;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.type_st {
		flex-direction: row;
		background: url(images/main_02_bg.jpg) no-repeat center center;
		background-size: cover;
	}
	.type_st > p img {
		display: none;
	}
	.type_sp-a {
		flex-direction: row-reverse;
		background: url(images/main_01_bg.jpg) no-repeat center center;
		background-size: cover;
	}
	.type_sp-a > p img {
		display: none;
	}
	.type_sp-a_box {
		background: #fff ;
		opacity: 0.9;
		padding: 20px 20px 40px;
		margin: 0 0 0 40px;
		width: 400px;
		height: 140px;
	}
	.type_st_box {
		background: #fff ;
		opacity: 0.9;
		padding: 20px 20px 40px;
		margin: 0;
		width: 400px;
		height: 140px;
		position: absolute;
		bottom: 0;
		right: 40px;
	}
	.type_st_box h4 ,
	.type_sp-a_box h4{
		font-size: 170%;
		line-height: 1.2;
	}
	.type_sp-a_box h4 {
		color: #CC9933
	}
	.type_st h4 {
		color: #075335;
		text-align: left;
		margin-left: 20px;
	}
	.type_sp-a_box h4:after{
		content: "";
		display: block;
		width: 15%;
		height: 2px;
		margin: .4em auto .4em .8em;
		background: #c99633;
	}
	.type_st_box h4:after{
		content: "";
		display: block;
		width: 15%;
		height: 2px;
		margin: .4em auto .4em 0;
		background: #005533;
	}
	.type_sp-a p,.type_st p{
		text-align: start;
	}
	.type_st_box h4 span ,
	.type_sp-a_box h4 span{
		font-size: 40%;
		display: block;
		font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	}
	.type p {
		font-size: 86%;
		padding: 0px 0.5em 0px 1.7em;
	}
	.type p.text {
		padding-bottom: 1.8em;
	}
	.type a {
		background: #c93 url(../common/img/arrow_w.png) no-repeat 98% center;
		background-size: 7px auto;
		display: block;
		color: #fff;
		padding: .6em;
		margin: .5em 0;
		text-align: center;
	}
}


/*ひのきと温泉、展望露天風呂
--------------------------------------------------------- */
@media screen and (max-width:767px) {
	.tenbou:before,.onsen:before{
		content: "";
		display: block;
		height: 160px;
		margin: 0 -10px 1em -10px;
	}
	.onsen:before {
		background: url(images/bg_sp_01.jpg) no-repeat right top;
		background-size: 100% auto;
	}
	.tenbou:before {
		background: url(images/bg_02.jpg) no-repeat right top;
		background-size: 100% auto;
	}
	.tenbou,.onsen{
		padding: 0 10px;
	}
	.tenbou p br , .onsen p br {
		display: none;
	}
	.interior {
		font-size: 80%;
		line-height: 1.6;
		margin: 4em auto 6em;
		max-width: 1000px;
	}
	h3.yellow {
		font-size: 160%;
		line-height: 1.4;
		color: #c89533;
	}
	h3.green {
		font-size: 160%;
		line-height: 1.4;
		color: #053;
	}
	.interior_box_hinoki{
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
	}
	.interior h4 {
		font-size: 180%;
		color: #c22;
		text-align: center;
	}
	.interior_box_hinoki .interior_box_01,.interior_box_tenbou .interior_box_01 {
		width: 50%;
		height: 50%;
		padding: 10px;
	}
	.interior_box_hinoki .interior_box_02,.interior_box_tenbou .interior_box_02  {
		width: 50%;
		height: 50%;
		padding: 10px;
	}
	.interior_box_hinoki .interior_box_03,.interior_box_tenbou .interior_box_03 {
		width: 50%;
		height: 50%;
		padding: 10px;
	}
	.interior_box_hinoki .interior_box_04,.interior_box_tenbou .interior_box_04 {
		width: 50%;
		height: 50%;
		padding: 10px;
	}
	.interior_box_hinoki section h5 {
		font-size: 120%;
		font-weight: bold;
	}
}

@media screen and (min-width:768px) , print {
	.onsen {
		padding: 4em 0 29em 10%;
		background: url(images/bg_left.png) no-repeat right top, url(images/bg_01.jpg) no-repeat right center;
		background-size: 63% 100%, 62% auto ,25% auto ;
		height: 400px;
	}
	.tenbou {
		padding: 4em 0 4em 60%;
		background: url(images/bg_right.png) no-repeat left top, url(images/bg_02.jpg) no-repeat left center;
		background-size: 62.5% 100%, 62% auto;
		height: 494px;
		background-color: #fff6f0;
	}
	   .onsen_caption {
        font-size: 80%;
    }
	h3.yellow {
		font-size: 240%;
		line-height: 1.4;
		color: #c89533;
	}
	h3.green {
		font-size: 240%;
		line-height: 1.4;
		color: #005533;
	}
	.interior_box_hinoki,.interior_box_tenbou{
		padding: 4em 10% 4em 10%;
		display:flex; 
		margin-top: -150px;
	}
	.interior {
		font-size: 80%;
		line-height: 1.6;
		margin: 4em auto 6em;
		max-width: 1000px;
		padding: 0 20px;
	}
	.interior h4 {
		font-size: 200%;
		color: #c22;
		text-align: center;
	}
	.interior_box_hinoki,.interior_box_tenbou {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.interior_box_hinoki section {
		width: 25%;
        padding: 0 .6%;
	}
	.interior_box_hinoki section h5 ,.interior_box_tenbou section h5 {
		font-size: 120%;
		text-align: center;
		font-weight: bold;
	}
}

.label_y{
	color: #c89533;
	font-size: 120%;
}
.label_g{
	color: #005533;
	font-size: 120%;
}


h4.yellow {
	font-size: 170%;
	line-height: 1.4;
	color: #c89533;
}


/*タトゥー*/
.tattoo{
    max-width: 900px;
    margin: 60px auto 80px;
    border: solid 2px #006e4f;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
}
.tattoo > h3{
	color:#006e4f;
	font-weight: bold;
	font-size: 1.4em;
}
.tattoo > h3,
.tattoo > p{
	margin: 0.5em 0;
}
@media screen and (max-width: 999px) {
	.tattoo{
    max-width: 100%;
    margin: 60px 20px 80px;
}
}

.tattoo > h4{
	color:#006e4f;
	font-weight: bold;
	font-size: 1.2em;
	font-family: 'Zen Old Mincho', serif;
}