/* ページのレイアウト用* ******************************************	*/
/*																	*/
/*	（注意事項）ソースを変更し、アップロードした後は				*/
/*				TourAidのWeb site編集の「デザイン」を開き			*/
/*				「サイトのデザイン２」をSaveすること。				*/
/*																	*/
/* ****************************************************************	*/
body{
	animation: fadeIn 0s ease 0s 1 normal; /* FadeIn */
	-webkit-animation: fadeIn 0s ease 0s 1 normal; /* FadeIn */
	
	margin:0 auto;
	padding:0px;
	
	background-position: center center; /* 画像を常に天地左右の中央に配置 */
	background-repeat: no-repeat; /* 画像をタイル状に繰り返し表示しない */
	background-attachment: fixed; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-size: cover; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	color: #333333;
	font-family: Arial, "Meiryo UI", "Meiryo UI", "メイリオ", "游ゴシック", "HGｺﾞｼｯｸE", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif, Osaka;
	font-size:16px;
	line-height:1.4;
}

/* FadeIn */
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

/*全般の設定 ******************************** */
a{
	color:#ffffff;
	text-decoration:none;/*リンクの文字の下線を消す設定*/
}

a:hover {
	color: #ffffff;	/*リンクの文字の上にマウスが来た時この色に変わる*/
	text-decoration: none;	/*	*/
}

@media screen and (min-width: 681px) {
	input{
		padding:4px;
		font-size: 16px;
	}
	textarea{
		padding:4px;
		font-size: 16px;
	}
	select{
		padding:4px;
		font-size: 16px;
	}
}

@media screen and (max-width: 680px) {
	input{
		padding:4px;
		font-size: 24px;
		border: 2px #555555 solid;
	}
	textarea{
		padding:4px;
		font-size: 24px;
		border: 2px #555555 solid;
	}
	select{
		padding:2px;
		font-size: 24px;
	}
}

/*ヘッダーの設定 ******************************** */
@media screen {
	#header{
/*		position: fixed;	/* 位置固定 */
/*		z-index: 10;		/* 重なり最前面 */
		width: 100%;
		background-color: rgba(70, 130, 180, 0.5);
		color: #ffffff;
		margin:0 auto;
	}
}

@media screen and (min-width: 681px) {
	#header{
		padding:20px;
		line-height:1.0;
		font-size: 26px;
		font-weight:bold;
	}
}

@media screen and (max-width: 680px) {
	#header{
		padding:10px;
		font-size: 20px;
		line-height:1.0;
	}
}

#headermenu{
	float:left;
	margin: 5px 0px 0px 0px;;
	width:45px;
}

#headerlogoimg{
	float:left;
	width:160px;
}

#headerIcon{
	padding-right:60px;
	float:right;
}

/* トップ写真部分の設定 ******************************** */
@media screen and (min-width: 681px) {
	.catchlarge{
		width:92%;
		margin-top:100px;
		margin-bottom:70px;
		margin-left:auto;
		margin-right:auto;
		color:#ffffff;
		text-align:center;
		border: none;
		font-weight:bold;
		font-size: 40px;
		text-shadow: 2px  2px 2px #333,
					-2px  2px 2px #333,
					 2px -2px 2px #333,
					-2px -2px 2px #333;
	}

	.catchmedium{
		width:94%;
		margin-bottom:70px;
		margin-left:auto;
		margin-right:auto;
		padding:10px;
		color:#ffffff;
		background-color: rgba(85, 107, 47, 0.8);
		text-align:left;
		border: none;
		font-weight:bold;
		font-size: 24px;
		text-shadow: 1px  1px 1px #333,
					-1px  1px 1px #333,
					 1px -1px 1px #333,
					-1px -1px 1px #333;
	}
}

@media screen and (max-width: 680px) {
	.catchlarge{
		width:92%;
		margin-top:100px;
		margin-bottom:70px;
		margin-left:auto;
		margin-right:auto;
		color:#ffffff;
		text-align:center;
		border: none;
		font-weight:bold;
		font-size: 38px;
		text-shadow: 2px  2px 2px #333,
					-2px  2px 2px #333,
					 2px -2px 2px #333,
					-2px -2px 2px #333;
	}

	.catchmedium{
		width:92%;
		margin-bottom:70px;
		margin-left:auto;
		margin-right:auto;
		padding:10px;
		color:#ffffff;
		background-color: rgba(85, 107, 47, 0.8);
		text-align:left;
		border: none;
		font-weight:bold;
		font-size: 20px;
		text-shadow: 1px  1px 1px #333,
					-1px  1px 1px #333,
					 1px -1px 1px #333,
					-1px -1px 1px #333;
	}
}

.catchmedium a{
	color:#000000;
	text-decoration:none;/*リンクの文字の下線を消す設定*/
}

/*ツアーバナーの設定 ******************************** */
@media screen {
	.bannertour{
		position: relative;
		margin:15px 0px 0px 2%;
		color:#333;
		background-color: #e6e6fa;
		border: solid 10px BANNERBORDERCOLOR;
		font-weight:normal;
		height: 300px;
		line-height:1.4;
	}
}

@media screen and (min-width: 681px) {
	.bannertour{
		float:left;
		width: 46%;
		font-size: 18px;
	}
}

@media screen and (max-width: 680px) {
	.bannertour{
		width: 95%;
		font-size: 26px;
	}
}

.bannertour img {
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}

.bannertour a:hover {
	opacity:0.7;/*ＩＥ以外ブラウザ半透明70%の指定*/
	filter: alpha(opacity=70);/*IE用半透明70%の指定*/
}

@media screen {
	.bannercatch{
		position: absolute;
		top:00px;
		left:10px;
		width: 90%;
		height: auto;
		line-height:1.6;
		color:#ffffff;
		font-weight:bold;
		text-shadow: 1px  1px 1px #333,
					-1px  1px 1px #333,
					 1px -1px 1px #333,
					-1px -1px 1px #333;
	}
}

@media screen and (min-width: 681px) {
	.bannercatch{
		font-size: 20px;
	}
	.bannertitle a{
		color:#ffffff;
		text-decoration:none;/*リンクの文字の下線を消す設定*/
	}
}

@media screen and (max-width: 680px) {
	.bannercatch{
		font-size: 26px;
	}
	.bannercatch a{
		color:#ffffff;
		text-decoration:none;/*リンクの文字の下線を消す設定*/
	}
}

.bannercatch a:hover {
	color: #ffffff;	/*リンクの文字の上にマウスが来た時この色に変わる*/
	text-decoration: none;	/*	*/
}

@media screen {
	.bannertitle{
		position: absolute;
		top:40px;
		left:30px;
		width: 90%;
		height: auto;
		line-height:1.6;
		color:#ffffff;
		font-weight:bold;
		text-shadow: 1px  1px 1px #333,
					-1px  1px 1px #333,
					 1px -1px 1px #333,
					-1px -1px 1px #333;
	}
}

@media screen and (min-width: 681px) {
	.bannertitle{
		font-size: 30px;
	}
	.bannertitle a{
		color:#ffffff;
		text-decoration:none;/*リンクの文字の下線を消す設定*/
	}
}

@media screen and (max-width: 680px) {
	.bannertitle{
		font-size: 36px;
	}
	.bannertitle a{
		color:#ffffff;
		text-decoration:none;/*リンクの文字の下線を消す設定*/
	}
}

.bannertitle a:hover {
	color: #ffffff;	/*リンクの文字の上にマウスが来た時この色に変わる*/
	text-decoration: none;	/*	*/
}

@media screen {
	.bannertourtext{
		position: absolute;
		top:50px;
		left:24px;
		width: 90%;
		height: auto;
		line-height:1.6;
		color:#ffffff;
		font-weight:bold;
		text-shadow: 1px  1px 1px #333,
					-1px  1px 1px #333,
					 1px -1px 1px #333,
					-1px -1px 1px #333;
	}
}

@media screen and (min-width: 681px) {
	.bannertourtext{
		font-size: 18px;
	}
	.bannertourtext a{
		color:#ffffff;
		text-decoration:none;/*リンクの文字の下線を消す設定*/
	}
}

@media screen and (max-width: 680px) {
	.bannertourtext{
		font-size: 18px;
	}
	.bannertourtext a{
		color:#ffffff;
		text-decoration:none;/*リンクの文字の下線を消す設定*/
	}
}

.bannertourtext a:hover {
	color: #ffffff;	/*リンクの文字の上にマウスが来た時この色に変わる*/
	text-decoration: none;	/*	*/
}

/*ツアー説明写真の設定 ******************************** */
@media screen {
	.tourimg{
		position: relative;
		margin:15px 0px 0px 2%;
		color:#333;
		background-color: #e6e6fa;
		border: solid 10px #ffffff;
		font-weight:normal;
		height: 300px;
		line-height:1.4;
	}
}

@media screen and (min-width: 681px) {
	.tourimg{
		float:left;
		width: 46%;
		font-size: 18px;
	}
}

@media screen and (max-width: 680px) {
	.tourimg{
		width: 95%;
		font-size: 26px;
	}
}

.tourimg img {
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}

/* ツアー説明エリアの設定 ******************************** */
@media screen {
	.tourdetail{
		position: relative;
		background-color: #fff;
		border: solid 10px #ffffff;
		color:#333;
		font-weight:normal;
		line-height:1.4;
	}
}

@media screen and (min-width: 681px) {
	.tourdetail{
		float:left;
		margin:15px 0px 0px 0px;
		width: 46%;
		height: 300px;
		font-size: 18px;
	}
}

@media screen and (max-width: 680px) {
	.tourdetail{
		margin:0px 0px 0px 2%;
		width: 95%;
		font-size: 24px;
	}
}

.tourdetail a{
	color:#0000cd;
	text-decoration:none;/*リンクの文字の下線を消す設定*/
}

.tourdetail a:hover {
	color: #3fc3ff;	/*リンクの文字の上にマウスが来た時この色に変わる*/
	text-decoration: none;	/*	*/
}

/*地図部分の設定 ******************************** */
.frameMap{
	width:100%;
	border-width:1px;
	border-style:inset;
}

/*フッター部分の設定 ******************************** */
@media screen {
	#footer{
		width:100%;
		margin-top:40px;
		padding:30px;
		color: #aaa;
		text-align: center;
		background-color:rgba(40, 45, 51, 0.8) ;
	}

	#footer a:hover {
		color: #3fc3ff;	/*リンクの文字の上にマウスが来た時この色に変わる*/
	}
}

@media screen and (min-width: 681px) {
	#footer{
		font-size:16px;
	}
}

@media screen and (max-width: 680px) {
	#footer{
		font-size:14px;
	}
}

/* カレンダー説明部分の設定 ******************************** */
reversred {
	color:#0000cd;
	background-color:#ffffff;
}

cmark{
	font-family: "ＭＳ ゴシック";
}

cmarkexp{
	color:#3fc3ff;
	font-family: "ＭＳ ゴシック";
}

/* ヘッダーメニュの設定 ******************************** */
#fade-in2 li ul{
	opacity: 0;
	top: 50%;
	visibility: hidden;
	transition: .5s;
}
#fade-in2 li:hover ul{
	top: 100%;
	visibility: visible;
	opacity: 1;
}

.dropmenu{
	*zoom: 1;
	list-style-type: none;
	margin: 6px;
	padding: 0;
}
.dropmenu:before, .dropmenu:after{
	content: "";
	display: table;
}
.dropmenu:after{
	clear: both;
}
.dropmenu li{
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	font-size: 30px;
	font-weight:bold;
	text-align: left;
}
.dropmenu li a{
	display: block;
	margin: 0;
	color: #e0ffff;
	line-height: 1;
	text-decoration: none;
}
.dropmenu li ul{
	list-style: none;
	position: absolute;
	z-index: 9999;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
}
.dropmenu li ul li{
	width: 300px;
	font-size: 16px;
}
.dropmenu li ul li a{
	padding: 13px 15px;
/*	border-top: 1px solid #6495ed; */
	color: #ffffff;
	background: #6495ed;
	text-align: left;
}
.dropmenu li:hover > a{
	background: #4169e1;
}
.dropmenu li a:hover{
	background: #4169e1;
}