@CHARSET "UTF-8";
/*******************************************************************************
 * 天然温泉　海王 館内ご案内
 * WEB SITE ver.2021
 * RESPONSIVE
*******************************************************************************/
@import url(html5-doctor-reset-stylesheet.min.css);
@import url(base.css);
@import url(common.css);

/******************************************************************************

 * 共通
 
******************************************************************************/
h1+figure{
    max-width:800px;
	width:90%;
}
.contentsArea{
    max-width:800px;
	width:90%;
    margin:0 auto 8rem;
}
.contentsArea>div{
	margin:0 -1rem;	
}
.contentsArea>div>div{
	display:flex;
	flex-wrap: wrap;
}
.contentsArea figure {
	padding:1.5rem 1rem;
}
.contentsArea>div>div>figure {
	width:50%;
}
.contentsArea figcaption {
	font-size:1.6rem;
	line-height:1.3;
	margin-top:0.5rem;
	text-align:right;
	font-weight:normal;
}
/** SMART PHONE **/
@media screen and (max-width: 768px){
    .contentsArea{
        margin:0 auto 4rem;
    }
	.contentsArea>div>div{
		flex-direction: column;
	}
    .contentsArea figure {
        padding:1rem;
    }
	.contentsArea>div>div>figure {
		width:100%;
	}
	.contentsArea figcaption {
		font-size:1.5rem;
		padding-right:0.4rem;
	}
}

/******************************************************************************

 * おとこ湯＆おんな湯
 
******************************************************************************/
#men h2,
#women h2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 1rem;
}
#men h2>span,
#women h2>span{
    width:45%;
}
#men h2>span>img,
#women h2>span>img{
    width:70%;
}
#men h2>img,
#women h2>img{
    width:55%;
}
/** SMART PHONE **/
@media screen and (max-width: 768px){
    #men h2>span,
    #women h2>span{
        width:40%;
    }
    #men h2>span>img,
    #women h2>span>img{
        width:90%;
    }
    #men h2>img,
    #women h2>img{
        width:60%;
    }
}

/******************************************************************************

 * 海王店内 #kaiou
 
******************************************************************************/
#kaiou {
	margin:8rem auto 0;
	background:url(../img/spa/bg_kaiou.png) top center no-repeat;
	background-size:contain;
	padding-top:10rem;
}
#kaiou h2{
	margin:0 auto 1rem;
	font-size:3.5rem;
	line-height:1.3;
	text-align:center;	
}
#kaiou>div>p {
	text-align:center;
	font-size:2.2rem;
	line-height:1.4;
	margin-bottom:2rem;
}
#kaiou>div>div>figure{
	width:33.333%;
	padding:1rem 2rem;
}
#kaiou figcaption{
	text-align:center;	
}
/** SMART PHONE **/
@media screen and (max-width: 768px){
	#kaiou h2{
		font-size:2.5rem;
	}
	#kaiou {
		margin:3rem auto 0;
		padding-top:13%;
	}
	#kaiou>div>p {
		font-size:1.6rem;
	}
	#kaiou>div>div{
		flex-direction: row;
	}
	#kaiou>div>div>figure{
		width:50%;
		padding:1rem 2rem;
	}
}