﻿
/* CSS Document */

#main,
#sub{ border: 1px solid #999966; }
#main h3{
	height: 33px;
	margin-bottom: 5px;
	padding: 2px 0 0 20px;
	font-size: 150%;
	font-weight: bold;
	color: #FFF;
	background: url('bg_bus.jpg') no-repeat;
}

#main table{
	width: 85%;
	margin: 10px 20px;
}
#main div.point_img{padding:0 5px 10px 5px;float:left;}
#main div.point_img storong{ font-size:17px;font-weight:200;}
#main div.point_txt{margin:5px;width:300px;float:left;}

#sub h4{
	color: #00F;
	margin: 10px 20px;
	text-align: center;
	font-size: 150%;
	font-weight: bold;
	display:none;
}

#outwk{padding:0;margin:0;}
#spot {
	border:10px solid #B81B26;
	padding-bottom: 15px;
}
#spot div.guide{ padding:20px 5px;margin-bottom:20px; }
#spot div.leftph{float:left;padding-right:20px;width:435px;}
#spot div.rightph{float:left;padding-left:20px;width:435px;}
#spot div.rtitle{float:left;vertical-align:top;width:435px;}
#spot div.rinfo{float:left;padding-top:50px;width:435px;}
#spot div.op{ padding:20px 10px;}
#spot div.rightph{float:left;padding-left:20px;width:435px;}
#spot div.leftph{float:left;padding-right:20px;width:435px;}
#spot div.ltitle{float:left;vertical-align:top;width:435px;}
#spot div.linfo{padding-top:50px;width:435px;}
#part_info{padding-top:20px;}


dl.pln dt{
	padding: 10px;
	text-align: center;
	font-size: 134%;
	font-weight: bold;
	color: #FFF;
	background: #F09702;
}
dl.pln dt.sm{
	padding: 10px;
	text-align: center;
	font-size: 134%;
	font-weight: bold;
	color: #FFF;
	background: #336600;
}
dl.pln dt.pw{
	padding: 10px;
	text-align: center;
	font-size: 134%;
	font-weight: bold;
	color: #FFF;
	background:#6600CC;
}

dl.pln dt em.first{font-size:142%;font-weight:bold;color:#FFFF00;padding-right:10px;}
dl.pln dt em{font-size:134%;font-weight:bold;color:#FFFFFF;padding-right:10px;}
dl.pln dd{padding:3px 0 2px 0;}
dl.pln dd b{color:#990000;}
dl.pln dd div.icon{float:left;}
dl.pln dd div.date{padding-left:90px;font-weight:bold;}
dl.pln dd div.course{padding-left:65px;}
dl.pln dd div.time{padding-left:120px;}

dl.pln dd.order p.plnPrice{
	display: inline-block;
}
dl.pln dd.order p.plnPrice span.title{
	font-weight: bold;
	font-size: 109%;
	color:#333333;
}
dl.pln dd.order p.plnPrice span.price{
	font-size: 175%;
	font-weight: bold;
	color: #FF1717;
}

div.box1{padding:5px;margin:0 0 10px 0;height:auto;}
div.plan_intro{color:#663300; height:auto; padding:0 0 10px 0;}
div.plan_intro div#izumo_ph5{background:url('izumo_info01.png') center top;
height:310px; padding:0;margin:10px 0 25px 0;
}
div.plan_intro div#izumo_ph5 dl{width:60%; padding:0;margin:0;}
div.plan_intro div#izumo_ph5 dl dt{color:#FF66CC; font-weight:bold;font-size:20px;}
div.plan_intro div#izumo_ph5 dl dd{padding-left:30px;;font-size:15px;}

div.plan_intro div#izumo_ph5b{background:url('izumo_info02.png') center top;
height:300px; padding:0;margin:25px 0 25px 0;
}
div.plan_intro div#izumo_ph5b dl{width:60%; padding:0;margin:0;}
div.plan_intro div#izumo_ph5b dl dt{color:#FF66CC; font-weight:bold;font-size:20px;}
div.plan_intro div#izumo_ph5b dl dd{padding-left:30px;;font-size:15px;}


div.plan_intro div#izumo_ph5c{background:url('izumo_info03.png') center top;
height:330px; padding:0;margin:25px 0 50px 0;
}
div.plan_intro div#izumo_ph5c dl{width:60%; padding:0;margin:0;}
div.plan_intro div#izumo_ph5c dl dt{color:#FF66CC; font-weight:bold;font-size:20px;}
div.plan_intro div#izumo_ph5c dl dd{padding-left:30px;;font-size:15px;}


dl.pln dd.order p.plnPrice span.spcl{color:#FF6600;font-weight:bold;}
dl.pln dd.order p.plnPrice span.lunch{color:#009933;font-weight:bold;}




#stay_main{border:2px solid #FF5050;margin:10px 0;width:auto;height:auto;font-family:Arial, Helvetica, sans-serif;font-size:12px;float:left;vertical-align:top;width:950px}



/* プラン共通
----------------------------------------------------*/
h3.planTitle{
	position: relative;
	height: 45px;
	padding: 3px 0 0 70px;
	color: #000;
	font-size: 200%;
	font-weight: bold;
	background: url(_common/plan_titlebg.jpg) no-repeat;
}
h3.planTitle span{
	font-size: 75%;
	padding-left: 20px;
}
h3.planTitle img{
	position: absolute;
	left: -10px;
	top: -25px;
}
.plan{
	margin-bottom: 30px;
	padding: 10px 20px 20px;
	background: url(_common/plan_bg.jpg);
	border-radius: 0 0 5px 5px !important;
	-moz-border-bottom-left-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}
.plan em{
	display: inline-block;
	font-size: 117%;
	margin-bottom: 10px;
}







/* ホテル宿泊プラン
----------------------------------------------------*/
dl.busStopInfo{
	margin: -5px 0 10px 0;
	padding: 5px 30px;
	background: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
dl.busStopInfo dt.bin{
	float: left;
	padding: 4px 10px 0 20px;
	color: #E3007E;
	font-weight: bold;
}
dd.busStop{
	float: left;
}
dd.busStop dl{
	margin-right: 5px;
	padding: 5px 8px;
	font-size: 84%;
	background: #FCE6F2;
}
dd.busStop dl dt,
dd.busStop dl dd{
	float: left;
	padding: 0 2px;
}

.htlBox{
	margin-bottom: 10px;
	padding: 10px;
	background: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0 0 5px #AAA;
	-moz-box-shadow: 0 0 5px #AAA;
	-webkit-box-shadow: 0 0 5px #AAA;
}
.htlBox:last-of-type{ margin-bottom: 0; }
.htlTitle{
	margin-bottom: 10px;
	padding: 3px 3px 3px 20px;
	min-height: 44px;
	background: #E3007E;
	border-radius: 5px 5px 0 0 !important;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-moz-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
.htlTitle h4{
	float: left;
	padding-top: 7px;
	color: #FFF;
	font-size: 175%;
	font-weight: bold;
}
dl.priceBox{
	min-height: 44px;
	float: right;
	padding: 0 5px;
	line-height: 1.2;
	background: #FCE6F2;
	border-radius: 0 5px 0 0 !important;
	border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
dl.priceBox dt{
	padding-left: 25px;
	color: #E3007E;
	font-size: 175%;
	font-weight: bold;
	background: url(_common/plan_markstars.jpg) no-repeat left center;
}
dl.priceBox dt span.high{ font-size: 86%; }
dl.priceBox dt span.caption{
	padding-left: 10px;
	color: #333;
	font-size: 57%;
	font-weight: normal;
}
dl.priceBox dt span.caption span{
	color: #E3007E;
	font-weight: bold;
	margin: 0;
}
dl.priceBox dd{ padding-left: 25px; }


/* ホテル宿泊プラン：詳細
----------------------------------------------------*/
.htlMain{
	float: left;
	width: 485px;
}
dl.htlImg{
	position: relative;
	font-size: 84%;
}
dl.htlImg dd { margin-bottom: 5px; }
dd.roomImg{
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
}
dd.etcImg{  }
dd.etcImg dl{
	float: left;
	width: 240px;
	margin-right: 5px
}
dd.etcImg dl:nth-of-type(even){ margin-right: 0; }


/* ホテル情報
----------------------------------------------------*/
.htlSide{
	float: right;
	width: 395px;
}
.htlSide table {  }
.htlSide table caption{
	padding: 3px 0;
	color: #FFF;
	text-align: center;
	font-size: 117%;
	font-weight: bold;
	background: #E3007E;
}
.htlSide table th,
.htlSide table td{
	padding: 8px 5px;
	border-bottom: 1px dotted #E3007E;
}
.htlSide table th{
	background: #FCE6F2;
	white-space: nowrap;
	vertical-align: top;
}
.htlSide td.sppriv{
	padding:0 0 0 5px;
	margin:0;
}
.htlSide em.priv{
	font-weight:bold;
	color:#FF3399;
	padding-right:0;
	padding-bottom:0;
	margin-bottom:0;
	padding-top:2px;
}
.htlSide em.toku{
	font-weight:bolder;
	color:#0033CC;
	font-size:12px;
	padding-right:5px;
	padding-bottom:0;
	margin-bottom:0;
	padding-top:2px;
}
.htlSide dl dt{
	padding-bottom:0;
	margin-bottom:0;
	padding-top:2px;	
}
.htlSide dl dd{
	font-size:11px;
	padding-left:8px;
}

/* 日帰りプラン&ホテル宿泊：申込みボタン
----------------------------------------------------*/
ul.dayOrder{ margin-left: 5px; }
dl.stayOrder{
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
dl.stayOrderLtd,
dl.stayOrder:last-of-type{ padding-top: 15px; }
dl.stayOrder dt,
dl.stayOrderLtd dt{
	margin-bottom: 10px;
	padding: 3px 0;
	color: #E3007E;
	text-align: center;
	font-size: 117%;
	font-weight: bold;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-moz-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
dl.stayOrder dt.stayBus{ background: #B7E4F9 url(_common/plan_markbus.jpg) no-repeat 100px 0.4em; }
dl.stayOrder dt.stayCar{ background: #B7E4F9 url(_common/plan_markcar.png) no-repeat 100px 0.4em; }
dl.stayOrderLtd dt.stayBus{ background: #FFE4A4 url(_common/plan_markbus.png) no-repeat 100px 0.4em; }


ul.dayOrder li,
dl.stayOrder dd,
dl.stayOrderLtd dd{
	float: left;
	margin-left: 5px;
	line-height: 1.2;
	font-size: 117%;
	font-weight: bold;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
dl.stayOrder dd,
dl.stayOrderLtd dd { margin-left: 12px; }
dl.stayOrder dd:first-of-type,
dl.stayOrderLtd dd:first-of-type{ margin-left: 5px; }
ul.dayOrder li a,
dl.stayOrder dd a,
dl.stayOrderLtd dd a{
	display: table-cell;
	width: 150px;
	height: 65px;
	vertical-align: middle;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	background: url(_common/order_btnbg01.jpg) no-repeat;
	text-shadow: 1px 1px 0 #000;
}
dl.stayOrderLtd dd a{
	height: 75px;
	background: url(_common/order_btnbg02.jpg) no-repeat;
}
ul.dayOrder li a:hover,
dl.stayOrder dd a:hover,
dl.stayOrderLtd dd a:hover{
	text-shadow: 2px 2px 0 #000;
	background-position: -150px 0;
}
dl.schedule dd
{
	float: left;
	margin: 5px 3px 5px 3px;
	line-height: 1.2;
	font-size: 117%;
	font-weight: bold;
	
}


dl.schedule dd a{
	display: table-cell;
	margin: 5px 3px 5px 3px;
 
	width: 200px;
	height: 60px;
	vertical-align: middle;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	background: url(_common/plan_sign2.png) no-repeat;
	text-shadow: 1px 1px 0 #000;

}

dl.schedule dd a:hover{
	text-shadow: 2px 2px 0 #000;
	background-position: -200px 0;
}
	
/*左サイド　設定etc*/
.plan_details{width:620px;height:290px;}
.pln_bar{
	margin:0;padding:0;background-color:#ff8c00;height:40px;
}
.pln_title{
	color:#FFFFFF;font-family:'Meiryo UI''arial unicode ms';font-size:25px; font-weight:bold; margin-left:5px;
}
.set_date{
	margin:5px 3px;padding:1px 0;height:250px;
}
.set_date table{font-size:16px;padding:0;margin:1px 0;width:615px;border:1px #8BB1B1 solid;}
.set_date table td.item{
	background-color:#ffffcc;padding:1px 7px;margin:0;font-family:'Arial, Helvetica, sans-serif';border:1px #8BB1B1 solid; font-weight:bold; width:210px;}
.set_date table td.day{padding:5px;width:400px;font-size:17px; line-height:150%;font-family:arial unicode ms;margin:0;}
.set_date table td.day span{color:#ff0000; font-size:14px;}
.set_date table td.day small{color:#333333; font-size:14px;}

#attent{margin:0 0 2px 0;padding:2px 0;}
#attent table{font-size:13px;margin:5px 0 0 0;padding:0; line-height:150%;width:100%;border-style:none;}
#attent table td{border-style:none;}
#attent table td.tour{width:100%;}
#attent table td.list{padding:1px 0;margin:0;vertical-align:top;}
#attent table td.warning{ color:#333333;padding:0 0 1px 2px;}
#attent table td.infom_li{width:100px;}
#attent table td.infom2{width:505px;padding:1px 0;margin:0;}
#attent table td.infom3{width:15px;padding:1px 0;margin:0;}

#attent ul{margin:2px 5px;}
#attent ul li{ line-height:110%;}




/*右サイドスケジュールタブ*/
#tabarea{
	width:310px;height:320px;
	padding:0;
	margin:0;
}
.cp_tab *, .cp_tab *:before, .cp_tab *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_tab ::selection {
	background:#FF6262;
}
.cp_tab {
	margin: 0 auto;
}
.cp_tab input[type=radio] {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	-webkit-appearance: none;
	        appearance: none;
	display: none;
}
.cp_tab > label {
	display: block;
	float: left;
	margin-right: 5px;
	padding: 5px 20px;
	cursor: pointer;
	transition: background-color 0.3s;
}
.cp_tab > label:hover,
.cp_tab > input:checked + label {
	border-radius: 6px 6px 0 0;
	background-color:#FF6262;
}
.cp_tab .cp_tabpanels {
	clear: both;
	perspective: 300px;
	min-height: 100px;/* エリアの高さ */
}
.cp_tab .cp_tabpanels .cp_tabpanel {
	line-height: 1.4em;
	position: absolute;
	z-index: 0;
	width: 100%;
	padding: 5px 5px 5px;
	transition: opacity 0.3s, transform 1s;
	transform: rotateX(-20deg);
	transform-origin: top center;
	opacity: 0;
	border: 1px solid #FF6262;
	background:#FF6262;
/*	background: #DCEDC8;*/
}
.cp_tab #tab4_1:checked ~ .cp_tabpanels .cp_tabpanel:nth-of-type(1),
.cp_tab #tab4_2:checked ~ .cp_tabpanels .cp_tabpanel:nth-of-type(2),
.cp_tab #tab4_3:checked ~ .cp_tabpanels .cp_tabpanel:nth-of-type(3),
.cp_tab #tab4_4:checked ~ .cp_tabpanels .cp_tabpanel:nth-of-type(4) {
	z-index: 1;
	transform: rotateX(0);
	opacity: 1;
}
@media screen and (max-width: 300px) {
	.cp_tab {
		width: 300px;
	}
	.cp_tab > label {
		display: none;
	}
	.cp_tab .cp_tabpanels .cp_tabpanel {
	position: relative;
	margin-bottom: 1em;
	padding: 0.5em;
	transform: none;
	opacity: 1;
	border: none;
	}
	.cp_tab .cp_tabpanels .cp_tabpanel h2 {
		border-bottom: 1px solid #7CB342;
		padding-bottom: 0.5em;
	}

/*左サイド　設定etc*/
.plan_details{width:620px;height:290px;}
.pln_bar{
	margin:0;padding:0;background-color:#ff8c00;height:40px;
}
.pln_title{
	color:#FFFFFF;font-family:'arial unicode ms';font-size:25px; font-weight:bold; margin-left:5px;
}
.set_date{
	margin:5px 3px;padding:1px 0;height:250px;
}
.set_date table{font-size:16px;padding:0;margin:2px 0;width:100%;border:1px #8BB1B1 solid;}
.set_date table td.item{
	background-color:#ffffcc;padding:3px 7px;margin:0;font-family:'Arial, Helvetica, sans-serif';border:1px #8BB1B1 solid; font-weight:bold;
}
.set_date table td.day{
	padding:5px;width:400px;font-size:17px; line-height:150%;font-family:arial unicode ms;font-weight:bold;margin:0;
}
.set_date table td.day span{
	color:#ff0000;
}

#attent{margin:0 0 2px 0;padding:2px 0;}
#attent table{font-size:13px;margin:5px 0 0 0;padding:0; line-height:150%;width:100%;border-style:none;}
#attent table td{border-style:none;}
#attent table td.tour{width:100%;}
#attent table td.list{padding:1px 0;margin:0;vertical-align:top;}
#attent table td.warning{ color:#333333;padding:0 0 1px 2px;}
#attent table td.infom_li{width:100px;}
#attent table td.infom2{width:505px;padding:1px 0;margin:0;}
#attent table td.infom3{width:15px;padding:1px 0;margin:0;}




	
