@charset "utf-8";

/*====================================================================

　コース内容用css

====================================================================*/

/* clearfix */
.clearfix { width: 100%; }
.clearfix:after {
	content: ""; 
	display: block; 
	clear: both;
}

/* modelcourse */
.modelcourse {
	margin-top: 15px;
}
#main .modelcourse h4 {
	border: none;
	background: #eee;
	padding: 10px 20px;
	font-weight: normal;
	font-size: 110%;
}
.modelcourse h4 span {
	border-left: 5px solid #ca0e0e;
	padding: 0 0 0 10px;
}
.modelcourse > div {
	background: url(../images/tourism/arrow.gif) no-repeat bottom center;
	padding: 0 0 40px 0;
	margin-bottom: 20px;
}
.modelcourse > div:last-child {
	background: none;
	padding: 0;
}
.modelcourse .box2 {
	width: 60%;
	float: left;
}
.modelcourse figure img {
	float: right;			/*画像を左へ回り込み*/
	background-color: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 5px;			/*余白。ここに上の行で設定した背景色が出ます。*/
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
	width: 35%;		/*写真の幅*/
	height: auto;	/*写真の高さ*/
}
.modelcourse h5 {
	font-size: 110%;
	color: #ca0e0e;
}

/*「お申し込み」ブロック
---------------------------------------------------------------------------*/
.contact {
	border: 5px solid #eee;
	padding: 10px 20px;
	margin: 20px 0;
}
#main .contact h3 {
	position: relative;
	padding: 0;
	margin-bottom: 20px;
	font-size: 130%;
	text-align: center;
	background-image: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border-radius: 0;
	border: none;
}
#main .contact h3::after {
	content: "";
	display: inline-block;
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 80px;
	margin-left: -40px;
	border-bottom: 2px solid #ca0e0e;
	vertical-align: bottom;
}
.contact .tel {
	width: 100%;
}
.contact .tel dt {
	float: left;
	clear: left;
	width: 8em;
	font-size: 120%;
	font-weight: bold;
	padding-bottom: 0.5em;
}
.contact .tel dd {
	font-size: 140%;
	font-weight: bold;
	padding-left: 8em;
}
.contact .tel dd a {
	color: #ca0e0e;
	text-decoration: none;
}
.contact .formBtn {
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	margin: 10px 0;
}
.contact .formBtn a {
	color: #ca0e0e;
	background: #ddd;
	text-decoration: none;
	display: block;
	padding: 7px 0;
	border-radius: 4px;
}
.contact .formBtn a:hover {
	color: #666;
	background: #fae6e6;
}

/*テーブル１
---------------------------------------------------------------------------*/
table {
	width: 100%;
}
table, table td, table th{
	border: 1px solid #CCC;	/*テーブルの枠線の幅、線種、色*/
	line-height: 2;
}
/*テーブル内の右側*/
table td{
	padding: 10px;
}
/*テーブル内の左側*/
table th{
	width: 180px;
	padding: 10px;
	text-align: center;
	background-color: #e2e2e3;	/*背景色*/
}
/*テーブル１行目に入った見出し部分*/
table th.tamidashi{
	width: auto;
	text-align: left;
	color: #FFF;	/*文字色*/
	background-color: #333;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b), to(#333));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#4b4b4b, #333);	/*同上*/
	background-image: linear-gradient(#4b4b4b, #333);			/*同上*/
}
/*テーブルのキャプション設定*/
table caption{
	padding: 10px;
	border-top: 1px solid #CCC;		/*上側の線の幅、線種、色*/
	border-right: 1px solid #CCC;	/*右側の線の幅、線種、色*/
	border-left: 1px solid #CCC;	/*左側の線の幅、線種、色*/
	text-align: left;
	background-color: #e9ddae;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#efe6c5), to(#e9ddae));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#efe6c5, #e9ddae);	/*同上*/
	background-image: linear-gradient(#efe6c5, #e9ddae);			/*同上*/
	font-weight: bold;	/*文字を太字にする設定*/
}


/*ここからタブレット用（481px～800px）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:481px) and (max-width:800px){
	
}


/*ここからスマートフォン用（480px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width : 480px){
	/* modelcourse */
	.modelcourse .box2 {
		width: 100%;
		float: none;
	}
	.modelcourse figure img {
		float: none;			/*画像を左へ回り込み*/
		width: 95%;		/*写真の幅*/
	}
	
	/*「お申し込み」ブロック
	---------------------------------------------------------------------------*/
	.contact .tel dt {
		float: none;
		width: 100%;
		padding-bottom: 0;
	}
	.contact .tel dd {
		padding-left: 0;
	}
	
	/*テーブル
	---------------------------------------------------------------------------*/
	table {
		width: 100%;
	}
	/*テーブル内の右側*/
	table td{
		width: auto;
		padding: 2px;
	}
	/*テーブル内の左側の見出し部分*/
	table th{
		width: 100px;
		padding: 2px;
	}
}