@charset "UTF-8";
/* ---------------------------------------------------------------
	Mist.css
--------------------------------------------------------------- */
/* 共通
------------------------------------------------------ */
#mist h2{ background: url(../../mist/img/title_bg.png) no-repeat center top;}
#mist #contents  { clear: both; margin: 0 auto; width: 100%; max-width: 1100px;}
#mist #breadcrumb{ clear: both; margin: 5px auto; width: 100%; text-align: right;}

#mist section { margin: 0 auto 70px; width: 1005px;}

#mist section h4{
	margin: 0 0 20px; color: #41271b; font-size: 18px;
	border-bottom: 1px solid #8ec4c5;
}
#mist section h4 span{
	display: block; margin: 0 0 10px; padding: 0 0 0 10px;
	border-left: 7px solid #44a3aa;
}

#mist section h5 {
	margin: 0 0 10px; padding: 5px; color: #39858b;
	text-align: center; background: #daedee;
}

#mist section a:hover img{ opacity: 0.75; filter: alpha(opacity=75); -moz-opacity: 0.75;}


#mist #tit_area{
	clear: both; margin: 10px 0 0; min-height: 179px; position: relative;
	background: url(../../mist/img/tit_bg.png) no-repeat left top;
}
#mist #tit_area h3{ padding: 30px 0 0 120px; width: 550px; float: left; box-sizing: border-box;}
#mist #tit_area h3 img{ display: block; margin: 0 0 25px;}
#mist #tit_area h3 span{ display: block; margin: 0 0 0 10px; font-weight: normal;}
#mist #tit_area>img{ display: block; width: 475px; float: left;}




/* 下呂温泉みすと
------------------------------------------------------ */
#mist.index #detail{ clear: both; margin: 0 auto 20px; width: 940px;}

#mist.index #detail>div{
	margin: 0 0 20px; border: 20px solid #fff; box-sizing: border-box;
	box-shadow: 0 0 10px rgba(235,225,211,0.75);
	background:
		url(../../mist/img/detail_bg_icon.png) no-repeat left top,
		url(../../mist/img/detail_bg.jpg) repeat center top;
}

#mist.index #detail figure{ width: 340px; float: left; text-align: center;}
#mist.index #detail figure img{ display: block; margin: 15px auto 0;}
#mist.index #detail div div{ margin: 0 0 0 385px; width: 480px;}
#mist.index #detail h4{ margin: 0 0 15px -45px; padding: 35px 0 0; border-bottom: 0;}
#mist.index #detail h4 img{ display: inline-block;}
#mist.index #detail h4 img:first-child{ margin: -40px 5px 0 0;}
#mist.index #detail p{ margin: 0 0 20px;}
#mist.index #detail table{ margin: 20px 0;}
#mist.index #detail td{ font-size: 18px; font-weight: bold;}
#mist.index #detail td span{ font-size: 12px;}
#mist.index #detail ul{}
#mist.index #detail li{ display: inline-block;}
#mist.index #detail li:first-child{ padding: 0 10px 0 0;}
#mist.index #detail .note{ color: #b41616;}


/* 使い方 */
#mist.index #sec1{ clear: both;}
#mist.index #sec1>div{ margin: 0; width: 570px; float: left;}
#mist.index #sec1>div>img{ margin: 0 30px 15px 0; float: left;}
#mist.index #sec1 ol{ }
#mist.index #sec1 ol li{ margin: 0 0 25px;}

#mist.index #sec1 .note{ clear: both; padding: 20px 30px; background: #e3ece5;}
#mist.index #sec1 .note ul{ margin: 0 0 15px 12px; color: #39858b;}
#mist.index #sec1 .note li{ position: relative;}
#mist.index #sec1 .note li:before{
	display: block; top: 0; left: -12px; position: absolute;
	margin: 0 5px 0 0; width: 12px; height: 12px; content: "※";
}
#mist.index #sec1 .note p{
	padding: 5px; color: #a37d58;
	text-align: center; border: 1px solid #a37d58;
}

#mist.index #sec1>dl{ margin: 0 0 5px 640px;}
#mist.index #sec1>dl dt{
	float: left; width: 80px; padding: 0 0 0 20px; box-sizing: border-box;
	font-weight: bold; background: url(../../mist/img/icon.gif) no-repeat left center;
}
#mist.index #sec1>dl dd{ margin: 0 0 0 80px;}
#mist.index #sec1>dl:first-of-type dt{ float: none; width: 100%;}
#mist.index #sec1>dl:first-of-type dd{ margin: 0;}
#mist.index #sec1>dl dd span{ display: block;}
#mist.index #sec1>dl ul{ margin: 0 0 15px; border-top: 1px solid #643130; border-bottom: 1px solid #643130;}
#mist.index #sec1>dl li{ border-bottom: 1px dashed #643130;}
#mist.index #sec1>dl li:last-child{ border-bottom: 0;}
#mist.index #sec1>dl p{ margin: 10px 0 0; color: #a37d58;}


/* お支払い・送料について */
#mist.index #sec2 { clear: both;}
#mist.index #sec2>div{ padding: 30px; background: #fff;}
#mist.index #sec2 dl{ clear: both; margin: 0 0 25px;}
#mist.index #sec2 dt{
	padding: 0 0 0 20px; box-sizing: border-box; font-weight: bold;
	background: url(../../mist/img/icon.gif) no-repeat left center;
}
#mist.index #sec2 dd { margin: 0 0 0 20px;}
#mist.index #sec2 dd span { display: block; margin: 20px 0 0; color: #39858b; font-weight: bold;}

#mist.index #sec2 .detail_block { width: 450px; float: left;}
#mist.index #sec2 .detail_block:last-child{ float: right;}

#mist.index #sec2 .detail_block table { margin: 0; width: 100%; border-collapse: collapse;}
#mist.index #sec2 .detail_block table,
#mist.index #sec2 .detail_block th,
#mist.index #sec2 .detail_block td { padding: 5px; border: 1px solid #cbb493;}
#mist.index #sec2 .detail_block th { padding: 5px 10px; font-weight: normal; background: #f0e3d1;}
#mist.index #sec2 .detail_block th.tit { text-align: center; background: #fcf9f1;}
#mist.index #sec2 .detail_block td { text-align: center;}


/* FAX・TELでのご注文について */
#mist.index #sec3{ clear: both;}
#mist.index #sec3>div{ width: 480px; float: left;}
#mist.index #sec3>div:last-child{ float: right;}

#mist.index #sec3 p { padding: 15px 0;}
#mist.index #sec3 p span { display: block; margin: 0 0 20px; font-size: 16px; font-weight: bold;}
#mist.index #sec3 a { display: block; margin:  20px 0;}




/* ご注文フォーム
------------------------------------------------------ */
/* 共通 */
#mist.order section{ margin: 0 auto 70px; width: 940px; box-sizing: border-box;}
#mist.order section dl{ clear: both; margin: 0; padding: 15px 10px; border-bottom: 1px dotted #8ec4c5;}
#mist.order section dt{ margin: 0; width: 30%; float: left;}
#mist.order section dd{ margin: 0; width: 68%; float: right;}

#mist.order .note,
#mist.thanks .note{ color: #b41616;}

#mist.order span.note{ display: inline-block;}
#mist.order p.note{ margin: 15px 0 5px;}


/* form */
#mist.order #sec1{
	padding: 20px 30px;
	background: rgba(255,255,255,0.75);
	box-shadow: 0 0 10px rgba(235,225,211,0.75);
}

#mist.order #sec1 form { margin: 35px 0; border-top: 1px dotted #8ec4c5;}
#mist.order #sec1 ul,
#mist.order #sec1 ol{ margin: 0; list-style: none; line-height: 1.8;}
#mist.order #sec1 ul li{ display: inline-block; width: 30%;}
#mist.order #sec1 li span{ display: inline-block; margin: 0 5px 0 0; width: 75px;}
#mist.order #sec1 label{ margin: 0; display: inline-block; cursor: pointer;}
#mist.order #sec1 input{ margin: 0 5px 0 0; padding: 0; font-size: 13px;}
#mist.order #sec1 input[type="tel"],
#mist.order #sec1 input[type="text"],
#mist.order #sec1 input[type="email"],
#mist.order #sec1 select,
#mist.order #sec1 textarea {
	margin: 5px 0; padding: 2px; max-width: 100%; font-size: 13px;
	border: 1px solid #ddd; box-sizing: border-box;
}

#mist.order #sec1 .mfp_buttons { margin: 15px auto 20px; width: 98%; text-align: center;}
#mist.order #sec1 .mfp_buttons button{
	cursor: pointer; width: 30%; padding: 3px 0; font-size: 14px; text-align: center;
	line-height: 25px; letter-spacing: 3px; border-radius: 5px;
}

#mist.order #sec1 #order_submit{ color: #fff; background: #44a3aa; border: 1px solid #44a3aa;}
#mist.order #sec1 #order_reset { color: #44a3aa; background: #fff; border: 1px solid #44a3aa;}


/* 特定商取引法に関する法律に基づく表記 */
#mist.order #sec2{ padding: 20px 0;}
#mist.order #sec2 p{ margin: 35px 10px;}
#mist.order #sec2 dl:first-of-type{ margin: 35px 0 0; border-top: 1px dotted #8ec4c5;}
#mist.order #sec2 dl:last-of-type{ margin: 0 0 35px;}
#mist.order #sec2 dt{
	padding: 0 0 0 20px; box-sizing: border-box;
	font-weight: bold; background: url(../../mist/img/icon.gif) no-repeat left center;
}
#mist.order #sec2 dd{}


/* サンクスページ */
#mist.thanks section{
	margin: 0 auto 70px; padding: 20px 30px; width: 940px; box-sizing: border-box;
	background: rgba(255,255,255,0.75); box-shadow: 0 0 10px rgba(235,225,211,0.75);
}
#mist.thanks section dl{ margin: 25px 0;}
#mist.thanks section dt{
	margin: 0 0 10px; padding: 0 0 0 20px; font-size: 16px; font-weight: bold;
	background: url(../../mist/img/icon.gif) no-repeat left center;
}
#mist.thanks section dd{}



/* 販売箇所一覧
------------------------------------------------------ */
#mist.list section{
	width: 940px; padding: 20px 30px; box-sizing: border-box;
	background: rgba(255,255,255,0.75); box-shadow: 0 0 10px rgba(235,225,211,0.75);
}
#mist.list section h5,
#mist.list section p{ margin: 15px 0 20px;}

#mist.list section ul{ margin: 0 auto 25px; width: 98%; line-height: 2;}
#mist.list section ul li{ width: 33.3%; float: left; position: relative;}



/* ---------------------------------------------------
	clear
------------------------------------------------------ */
#mist section:after,
#mist #tit_area:after,
#mist.index #detail>div:after,
#mist.index #sec2>div:after,
#mist.list ul:after,
#mist.order #sec1 dl:after,
#mist.order #sec2 dl:after{ clear: both; content: "."; display: block; height: 0; font-size: 0; visibility: hidden; }