@charset "UTF-8";
/* ---------------------------------------------------------------
	Mist.css
--------------------------------------------------------------- */
/* ---------------------------------------------------
	共通
------------------------------------------------------ */
@media screen and (max-width:1100px) {
	#mist #contents{ padding: 0 1%; box-sizing: border-box;}
	#mist section  { width: 98% !important;}
	#mist #tit_area{ margin: 10px auto 0; width: 98%; min-height: auto; position: relative;}
	#mist #tit_area h3{ padding: 30px 0 20px 2%; width: 55%;}
	#mist #tit_area>img{ width: 43%; float: none; right: 0; bottom: 0; position: absolute;}
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:640px) {
}
@media screen and (max-width:480px) {
	#mist #tit_area h3{ padding: 30px 0 20px; width: 100%;}
	#mist #tit_area h3 img{ margin: 0 auto 25px;}
	#mist #tit_area>img{ display: none;}
}

/* 下呂温泉みすと
------------------------------------------------------ */
@media screen and (max-width:1100px) {
	#mist.index #detail{ width: 98%;}
	#mist.index #detail figure{ width: 30%;}
	#mist.index #detail h4{ margin: 0 0 15px;}
	#mist.index #detail div div{ margin: 0 0 0 31%; width: 68%;}
	#mist.index #sec1>div{ width: 56%;}
	#mist.index #sec1 .note{ padding: 20px 3%;}
	#mist.index #sec1>dl{ margin: 0 0 5px 60%;}
	#mist.index #sec2 .detail_block,
	#mist.index #sec3>div{ width: 48%;}
	#mist.index #sec2>div{ padding: 30px 3%;}
}
@media screen and (max-width:768px) {
	#mist #tit_area h3 span br,
	#mist.index #detail .note br{ display: none;}
	#mist.index #detail figure{ padding: 25px 0 0;}
	#mist.index #detail h4{ padding: 25px 0 0; text-align: center;}
	#mist.index #detail h4 img:first-child{ margin: 0 auto 5px;}
	#mist.index #detail p{ margin: 25px auto 20px; width: 96%;}
	#mist.index #detail p br{ display: none;}
	#mist.index #detail table{ margin: 20px auto;}
	#mist.index #detail ul{ text-align: center;}
	#mist.index #detail li{ margin: 0 auto 10px;}
	#mist.index #detail li:first-child{ padding: 0;}
	
	#mist.index #sec1>div{ margin: 0 auto 25px; width: 98%; float: none;}
	#mist.index #sec1>dl{ margin: 0 auto 5px; width: 98%;}
	#mist.index #sec1>dl dt{ margin: 0 0 5px; width: 100%; float: none;}
	#mist.index #sec1>dl dd{ margin: 0 0 15px;}
	#mist.index #sec1>dl dd span{ display: inline-block; margin: 0 10px 0 0;}
}
@media screen and (max-width:640px) {
	#mist.index #detail figure{ padding: 0; width: 100%; float: none;}
	#mist.index #detail div div{ clear: both; margin: 0 auto 25px; width: 94%;}

	#mist.index #detail td{ font-size: 16px;}
	
	#mist.index #sec2 .detail_block,
	#mist.index #sec3>div{ margin: 0 auto 25px; width: 100%; float: none;}
	#mist.index #sec3 p { margin: 0 auto; width: 96%;}
}
@media screen and (max-width:480px) {
	#mist.index #detail h4{ padding: 0;}
	#mist.index #detail h4 img:first-child{ margin: 0 auto 10px;}
	#mist.index #detail p{ width: 100%;}
	#mist.index #detail td{ font-size: 14px;}
	#mist.index #detail p.note{ width: 98%;}
	#mist.index #sec2 dd { margin: 0;}
}
@media screen and (max-width:320px) {
	#mist.index #detail td{ margin: 0 0 5px; display: block; font-weight: normal;}
}


/* ご注文フォーム
------------------------------------------------------ */
@media screen and (max-width:1100px) {
	#mist.order #sec1,
	#mist.thanks section{ padding: 20px 3%;}
}
@media screen and (max-width:768px) {
	#mist.order #sec1 ol:not(.number) li span{ display: block; margin: 5px 0 0;}
}
@media screen and (max-width:640px) {
	#mist.order section dt,
	#mist.order section dd{ width: 100%; float: none; box-sizing: border-box;}
	#mist.order #sec1 dl{ padding: 15px 5px 10px;}
	#mist.order #sec1 dt{ margin: 0 0 5px; padding: 5px; background: #e3ece5;}
	#mist.order #sec1 dt br{ display: none;}
	#mist.order #sec1 ol:not(.number) li:first-of-type span{ margin: 15px 0 0;}
	#mist.order #sec1 textarea{ width: 100%;}
	#mist.order #sec2 p{ margin: 35px auto; width: 96%;}
	#mist.order #sec2 p br{ display: none;}
	#mist.order #sec2 dt{
		margin: 0 0 10px; padding: 5px 5px 5px 25px;
		background: #e3ece5 url(../../mist/img/icon.gif) no-repeat 5px center;
	}
}
@media screen and (max-width:480px) {
	#mist.order #sec1 p br{ display: none;}
}


/* 販売箇所一覧
------------------------------------------------------ */
@media screen and (max-width:1100px) {
	#mist.list section{ padding: 20px 3%; width: 98%;}
}
@media screen and (max-width:768px) {
	#mist.list section ul li{ width: 50%;}
}
@media screen and (max-width:640px) {
}
@media screen and (max-width:480px) {
	#mist.list section ul li{ clear: none; width: 100%; float: none;}
}