@charset "UTF-8";

#htlSide-A {
    position: absolute !important;
    left: 0 !important;
    top: 890px !important;
}

#con_mv { background-image:url("https://www.seizanyamato.jp/img/hotspring/mv.jpg") !important; }

.intro .button .btn1 a:before  { background-image:url("https://www.seizanyamato.jp/img/hotspring/btn01.jpg"); }
.intro .button .btn2 a:before  { background-image:url("https://www.seizanyamato.jp/img/hotspring/btn02.jpg"); }
.intro .button .btn3 a:before  { background-image:url("https://www.seizanyamato.jp/img/hotspring/btn03.jpg"); }
.intro .button .btn4 a:before  { background-image:url("https://www.seizanyamato.jp/img/hotspring/btn04.jpg"); }

#hotspring .box { padding:80px 20px 0px; background:#ededed; }
#hotspring #spa5 {padding: 80px 20px 80px;}
#hotspring .box + .box { margin-top:0px; }
#hotspring .box h3 { margin-bottom:50px; text-align:center; font-size:30px; }
#hotspring .spa_box { display:flex; background:#fff; flex-direction:row-reverse; }
#hotspring .spa_box + .spa_box { margin-top:20px; }
#hotspring .spa_box .pic {
	width:58%; min-height:550px;
	background-size:cover; background-position:center; background-repeat:no-repeat;
	-webkit-box-shadow: inset 0 0 36px 0 rgba(22,23,21,0.2); -moz-box-shadow: inset 0 0 36px 0 rgba(22,23,21,0.2); box-shadow: inset 0 0 36px 0 rgba(22,23,21,0.2); }
	#hotspring #hoshi .pic { background-image:url("https://www.seizanyamato.jp/img/hotspring/hoshinoyu.jpg"); }
	#hotspring #kaze .pic { background-image:url("https://www.seizanyamato.jp/img/hotspring/kazenoyu.jpg"); }
	#hotspring #tsuki .pic { background-image:url("https://www.seizanyamato.jp/img/hotspring/tsukinoyu.jpg"); }
	#hotspring #hana .pic { background-image:url("https://www.seizanyamato.jp/img/hotspring/hananoyu.jpg"); }
	#hotspring #suzume .pic { background-image:url("https://www.seizanyamato.jp/img/hotspring/suzumenoyu.jpg"); }
#hotspring .spa_box .txt { width:42%; padding:40px 20px; display:flex; justify-content:center; align-items:center; }
#hotspring .spa_box .txt .title { display:flex; justify-content:center; width:100%; }
#hotspring .spa_box .txt h4 { font-size:28px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
#hotspring .spa_box .txt .detail { margin-top:100px; font-size:15px; line-height:2; }
#hotspring .spa_box .txt .time { margin-top:45px; font-weight:bold; }
#hotspring .spa_box .txt .time dt { font-size:15px; margin-bottom:20px; padding-bottom:20px; line-height:1; border-bottom:1px solid #c2c2c2; }
#hotspring .box .notice { margin-top:50px; text-align:center; line-height:2; }
	#spa4 .notice { font-size:14px; }

#hotspring .info { width:760px; margin:auto; }
	#spa3 .info { margin-top:50px; }
#hotspring .info h4 { margin-bottom:30px; font-size:24px; text-align:center; }
#hotspring .info .detail { text-align:center; line-height:2; font-size:15px; }
#hotspring .info .notice { text-align:center; line-height:2; margin-top:0; }
#hotspring .info table { width:100%; margin:25px 0; border-top:1px solid #c2c2c2; }
#hotspring .info tr { vertical-align:top; }
#hotspring .info th, #hotspring .info td { padding:25px 0; border-bottom:1px dotted #c2c2c2; line-height:2; }
#hotspring .info th { font-size:16px; text-align:left; padding-right:40px; white-space:nowrap; }
#hotspring .info td .serif { font-size:16px; }

/*#hotspring .box#spa5 { padding:30px 0; }
#spa5 .info h4 { position:relative; cursor:pointer; margin-bottom:0!important; }
#spa5 .info h4:before {
	content:""; display:block; width:30px; height:30px; background:#fff; border-radius:50%;
	position:absolute; top:50%; right:10px; margin-top:-15px; }
#spa5 .info h4:after {
	content:""; display:block; width:8px; height:8px; border-top:1px solid #000; border-left:1px solid #000;
	position:absolute; top:50%; right:20px; margin-top:-7px; transform:rotate(-135deg); }
#spa5 .info h4.open:after { margin-top:-3px; transform:rotate(45deg); }
#spa5 .info .accordion { margin-top:30px; padding-bottom:30px; }*/


@media (max-width: 1000px) {
	#hotspring .spa_box .pic { width:60%; min-height:500px; }
	#hotspring .spa_box .txt { width:40%; }
	#hotspring .spa_box .txt .detail { margin-top:50px; }
	#hotspring .info { width:100%; padding:0 5%; }
}

@media (max-width: 768px) {	
	#hotspring .box { padding:40px 0; }
	#hotspring .box h3 { margin-bottom:40px; font-size:24px; }
	#hotspring .spa_box { display:block; }
	#hotspring .spa_box + .spa_box { margin-top:0; }
	#hotspring .spa_box .pic { width:100%; height:0; min-height:0; padding-top:60%; }
	#hotspring .spa_box .txt { width:100%; padding:5%; display:block; }
	#hotspring .spa_box .txt h4 { font-size:20px; text-align:center; -webkit-writing-mode:unset; -ms-writing-mode:unset; writing-mode:unset; }
	#hotspring .spa_box .txt .detail { margin-top:20px; font-size:14px; }
	#hotspring .spa_box .txt .time { margin-top:20px; }
	#hotspring .spa_box .txt .time dt { margin-bottom:12px; padding-bottom:12px; }
	#hotspring .box .notice { margin-top:30px; padding:0 5%; }
	#spa2 .info { margin-top:40px; }
	#spa3 .info { margin-top:30px; }
	#hotspring .info h4 { margin-bottom:20px; font-size:20px; }
	#hotspring .info .detail { font-size:14px; }
}

@media (max-width: 400px) {	
	#hotspring .box h3 { margin-bottom:20px; font-size:22px; }
	#hotspring .spa_box .txt h4 { font-size:18px; }
	#hotspring .spa_box .txt .detail { margin-top:10px; }
	#hotspring .info h4 { margin-bottom:10px; font-size:18px; }
	#hotspring .info th, #hotspring .info td { display:block; width:100%; padding:12px 0; }
	#hotspring .info th { padding-bottom:0; border-bottom:0; font-size:14px; }
	#hotspring .info td { padding-top:0; }
	#hotspring .info td .serif { font-size:13px; }
	#hotspring .info > p { text-align:left; }
	
	#spa5 .info h4 { text-align:left; }
	#spa5 .info h4:before { width:24px; height:24px; right:6px; margin-top:-12px; }
	#spa5 .info h4:after { width:6px; height:6px; right:14px; margin-top:-5px; }
}
