/* CSS Document */

@import url(navi.css);
@import url(common.css);


/*--ヘッダ--------------------------------------------------------*/

#header {
	width: 100%;
	height:550px;
	background: url("../img/top/top_bg.jpg")no-repeat;
	background-size: cover;
	position: relative;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}


#header img.img_kl{
	width:60%;
	max-width:400px;
	position:absolute;
	bottom:-10px;
	left:-10px;
z-index: 500;


}
#header img.img_kc{
	width:40%;
	max-width:283px;
	position:absolute;
	bottom:-10px;
	right:0;
	left:0;
	margin: auto;
	z-index: 300;


}
#header img.img_kr{
	position:absolute;
	bottom:-10px;
	right:-10px;
	z-index: 1000;
	width:60%;
	max-width:512px;
	


}
#header img.img_fuwa{
	position:absolute;
	top:20px;
	right:0;
	z-index:1;
width:70%;
		max-width:1165px;



}
	#header img.img_ap{
		width:70%;
		max-width:510px;
	position:absolute;
	top:80px;
	right:12%;
	z-index:50;
		animation: 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1 normal;
		animation-name: rolling1;
	
}
@keyframes rolling1 {
	0% { transform: translate(200px , 200px) ; }
	100% { transform: translate(0 , 0) ; }
}

#header #top{
	width:90%;

	margin: 0 auto;
	
	
}

#header #top img{
margin-top: 50px;
width:80%;
	height: auto;
	max-width: 502px;
	
	
}



#header #top #top_r{
	float: right;
	margin: 0;
	padding: 0;
	display: flex;
	-js-display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	overflow: hidden;
	position: relative;
	z-index: 9999;
	
}
#header #top #top_r img{
	margin: 0;
	vertical-align:top;
	width:100%;
	height: auto;
	padding: 0;
	
	
}
#header #top #top_r a{
	
	display: block;
	padding: 10px 20px 0px 20px;
	background-color:#008CBB;
	text-align: center;
	box-sizing: border-box;
}
#header #top #top_r a:hover{
	opacity: 0.7;
}
#header #top #top_r a:first-child{
	background-color:#005F7D ;
	border-bottom-left-radius: 5px;
}
#header #top #top_r a:last-child{
	border-bottom-right-radius: 5px;
}

#header #txt_img{
	clear:both;
	position: absolute;
	width:100%;
	max-width:807px;
	right: 10%;
	top:250px;

	z-index: 999999;
}
#header #top_txt{
	clear:both;
	position: absolute;
	width:100%;
	max-width:807px;
	
	top:310px;
	right: 10%;

	z-index: 999999;
	
	
	
}
#header #txt_img img.txtl{
	
	width:100%;
	max-width:330px;
	height: auto;
	z-index: 1;
}
#header  #txt_img img.txtr{
	
	width:100%;
	max-width:477px;
	height: auto;
	z-index: 2;
}
#header  #top_txt h1{
	font-size: 16px;
	margin: 20px 0 0 10px;
	line-height: 180%;
	font-weight: normal;
}
#header #top_txt h1:after{
	content:"は";}

#header #top_txt p{
	font-size: 16px;
	margin: 0 0 0 10px;
	line-height: 180%;
}

@media screen and (max-width: 1200px) {
	
	#header #top_txt,
	#header #txt_img{

	max-width:477px;
right: 5%;
	
	
}
#header #top_txt{
top:380px;
	
}
}

@media screen and (max-width: 830px) {
#header {
	width: 100%;
	height:550px;
	background: url("../img/top/top_bg.jpg")no-repeat top left -150px;
	background-size:  auto 80%;
	position: relative;
	margin: 0 auto ;
	padding: 0;
}
	#header #top img{
margin-top: 20px;

	
}

	#header #top #top_r{
		width:90%;
	float: none;
	flex-wrap:nowrap;


	
}
	#header #top #top_r img{
	margin: 0;
	vertical-align:top;
	width:80%;
	height: auto;
	padding: 0;
	
	
}

	#header #top #top_r a{
	display: block;
	padding: 10px 10px  0 10px  ;

}
		#header img.img_ap{

	position:absolute;
	top:130px;
	right:-100px;
	z-index:100;


}
	#header img.img_kl{
	bottom:120px;
		left:-80px;

}
	#header img.img_kc{
	bottom:120px;
	right:40%;
	left:auto;
		
	}
	#header img.img_kr{
	bottom:120px;
	right:-100px;
		


	


}
	#header #txt_img{

	right: 11%;
	top:250px;

}

#header #top_txt{
	position: absolute;
	top:auto;
	left: 0;
	bottom: 0;
	width:100%;
	max-width: 100%;
	margin: 0;
	background-color: #2F9ABA;
	padding: 20px 0;
	
	
}


	#header #top_txt h1{
		width:90%;
	background-color:#2F9ABA; 
	margin: 0 auto;
		padding: 0;
	box-sizing: border-box;
	color:#fff;}

#header #top_txt p{
	width:90%;
	margin: 0 auto;
	
	padding: 0 ;
	box-sizing: border-box;
	color:#fff;
}
#header #txt_img img.txtl{
	display: block;
	width:70%;
	max-width:330px;
	height: auto;
	z-index: 1;
}

#header #txt_img{
max-width:60%;

	
	
	
}

}

@media screen and (max-width: 460px) {
	#header #top img{

width:100%;
		z-index: 1;

	
	
}
		#header img.img_kl{
	bottom:140px;
			left:-60px;
	

}
	#header img.img_kc{
	bottom:140px;

		
	}
	#header img.img_kr{
	bottom:140px;
right:-80px;
		


	


}

}




/*--WTDM------*/

#itdm {
	width:85%;
	margin: 50px auto;
	
}

#itdm #it_box{
	display:flex;
	-js-display: flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	
}
#itdm #it_box .inner_it{

	max-width:391px;
	margin: 0 5px;
	padding: 0;
	
}
#itdm #it_box .inner_it img{
	max-width:391px;
	width:100%;
	height: auto;
	vertical-align: bottom;
	
}
	
	

#itdm #it_box .inner_it h2{
	display: inline-block;
	width:35%;
	color: #005F7D;
	background-color: #B5DFEC;
	text-align: center;
	padding: 0 10px;
	box-sizing: border-box;
	font-size:16px;
	line-height: 47px;
	margin: 0;
}
#itdm #it_box .inner_it p{
	display: inline-block;
	width:58%;
	margin :0 0 0 2%;
	font-weight: 500;

	
}
#itdm #it_box a{
	text-decoration: none;
	
}
#itdm #it_box a:hover{
	opacity: 0.7;
	
}
/*--smp----------------------------------*/
@media screen and (max-width: 1250px) {
#itdm #it_box .inner_it h2{
	display:block;
	width:100%;
	
}
#itdm #it_box .inner_it p{
	display: block;
	width:100%;
	margin :0 ;
	text-align: center;
	
	
}

}
@media screen and (max-width: 840px) {
	#itdm #it_box{
	display:block;
		
	
}
	#itdm #it_box .inner_it{

	max-width:100%;
		height: auto;
	margin: 20px 0;
	padding: 0;
	
}

	#itdm #it_box .inner_it img{
    width:50%;
	float: left;
		overflow: hidden;
	
	
}
#itdm #it_box .inner_it h2{

	text-align: left;
	padding: 0 10px 0 52%;

}
#itdm #it_box .inner_it p{
	text-align: left;
	padding: 0 10px 0 52%;

	box-sizing: border-box;
	

	
}

}


#itdm #overseas{
	width:90%;
	margin: 80px auto 50px auto;
	max-width:1040px;
	display:flex;
	-js-display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	

}
#itdm #overseas .over_in{
	width:50%;
}
#itdm #overseas .over_in p{
	font-size: 17px;
	font-weight: 500;
	line-height: 180%;
	margin: 0;
	
	
}
#itdm #overseas .over_in a{
	text-decoration: none;
	color:#005F7D;
	font-weight: 600;
	font-size: 20px;
	margin:20px 0 0;
	display: inline-block;
	vertical-align: top;
	
	
	
	
}
#itdm #overseas .over_in img{
	width:100%;
	vertical-align:bottom; 
	
}
#itdm #overseas .over_in img.ap{
	display: inline-block;
	vertical-align: top;
	max-width:30px; 
	margin:20px 0 0;
		
}
/*--smp----------------------------------*/
@media screen and (max-width: 840px) {
#itdm #overseas{
	
	flex-direction:column-reverse;
}
	#itdm #overseas .over_in{
	width:100%;
}
	#itdm #overseas .over_in p{

	margin: 20px 0 0 0;
	
	
}

}

/* ------海外旅行の前に--------------------------------------------------------- */

#before{
	width:100%;
	background:url("../img/top/before_bg.jpg")no-repeat right #EDEDF0;
	

}


#before .be_in{
		width:90%;
	max-width:1040px;
	margin: 0 auto;
	padding: 20px 0 60px 0;
	box-sizing: border-box;
}	
#before  .be_in h3{
	font-size:20px;
	font-weight: 600;
	color:#005F7D;
	margin-top: 50px;
	
} 

#before .be_in p{
font-size:17px;
	font-weight: 600;
margin-top: 25px;	

} 

a.btnblue {
	display: inline-block;
	padding:10px 50px;
	margin: 10px 10px 0 0;
	font-size:17px;
	font-weight:bold;
	text-decoration:none;
	border:1px solid #B9E1ED;
	background-color:#ffffff;
	box-sizing: border-box;
	text-align: center;
}

a.btnblue:hover {
	background-color:#B9E1ED;
	color: #ffffff;
}
/*--smp----------------------------------*/
@media screen and (max-width: 640px) {
	
	
#before{

	background-position: top;
	background-size:auto 400px;
	background-color: #fff;

}#before .be_in{
		width:90%;
	max-width:1040px;
	margin:  0 auto;
	padding: 405px 0 70px 0;
	box-sizing: border-box;
}

}
/*--smp----------------------------------*/
@media screen and (max-width: 420px) {
	a.btnblue {
	width:100%;
}
}
/*---------------image area icons------------------------------------------*/

#company{
	width:100%;
	background: #95D9F8;
	padding-left: 10%;
	box-sizing: border-box;

}
#company img{
	float:left;
	width:100%;
	height: auto;
	max-width:388px;
}
#company #com_box{
	width:90%;
	max-width:1200px;
	margin: 0 auto;
	
	padding:50px 0 50px 35%;
	box-sizing: border-box;
}
 #company #com_box h3{
	font-size:20px;
	font-weight: 600;
	color:#005F7D;

	
} 

#company #com_box p{
font-size:17px;
	font-weight: 600;
	width:90%;
	margin-top: 25px;
	

} 
a.btnwhite {
	display: inline-block;
	padding:10px 50px;
	margin: 10px 10px 0 0;
	font-size:17px;
	font-weight:bold;
	text-decoration:none;
	background-color:#ffffff;
	box-sizing: border-box;
	text-align: center;
}

a.btnwhite:hover {
	background-color:#B9E1ED;
	color: #ffffff;
}
/*--smp----------------------------------*/

@media screen and (max-width: 840px) {
#company{
	width:100%;
	background: #fff;
	padding-left: 0;

}
	#company img{
	float:none;
	max-width:100%;
}
#company #com_box{
	width:90%;
	max-width:1200px;
	margin: 0 auto;
	
	padding:50px 0 ;
	box-sizing: border-box;
}
 

#company #com_box p{
font-size:17px;
	font-weight: 600;
	width:100%;
	margin-top: 25px;
	

} 
	a.btnwhite {
	border:1px solid #B9E1ED;
}
}
/*--smp----------------------------------*/

@media screen and (max-width: 420px) {
		a.btnwhite {
	width:100%;
}
}

/*--clearコンテンツ------------------------*/

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

#clr1, .clr1 {
	width:100%;
	clear:both;
	height:1px;
	border:none;
	color:none;
	line-height:1px;
}

#clr, .clr {
	width:100%;
	clear:both;
	border:none;
	color:none;
}

hr.clear {
	height: 1px;
	border: none;
	border-top: 1px solid #d6d6d6;
	clear: both;
	margin: 0;
	padding: 0;
}

hr.clear_dot {
	height: 1px;
	border: none;
	border-top: 1px dotted #666666;
	clear: both;
	margin: 0;
	padding: 0;
}


#clr, .clr {width:100%; clear:both; text-align:center;}
#clr1, .clr1 {width:100%; height:1px; line-height:1px; clear:both;}


.fuwafuwa {
	-webkit-animation:fuwafuwa 3s infinite linear alternate;
	animation:fuwafuwa 3s infinite linear alternate;
}

@-webkit-keyframes fuwafuwa {
0% {-webkit-transform:translate(0, 0) rotate(-3deg);}
50% {-webkit-transform:translate(0, -3px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(3deg);}
}

@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(-3deg);}
50% {transform:translate(0, -3px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(3deg);}
}