@charset "utf-8";

/* swiper
---------------------------------------------------------------------- */
#content .swiper-container{
	padding-bottom: 70px;
	z-index: 0;
}

#content .swiper-button-arw{
	width: 50px;
	height: 50px;
	border: 1px solid #0066b3;
	background-size: 50px;
	top: auto;
	bottom: 0;
	box-sizing: border-box;
	outline: none;
	transition: all 0.4s ease;
}
	#content .swiper-button-prev{ background-image: url(../img/swiper-prevBLU.svg); left: 0; }
	#content .swiper-button-next{ background-image: url(../img/swiper-nextBLU.svg); right: 0; }

#content .swiper-button-arw:hover{
	background-color: #0066b3;
}
	#content .swiper-button-prev:hover{ background-image: url(../img/swiper-prevWHT.svg); }
	#content .swiper-button-next:hover{ background-image: url(../img/swiper-nextWHT.svg); }

#content .swiper-button-arw::after{
	display: none;
}


/* block
---------------------------------------------------------------------- */
#content .block{
	padding: 100px 0;
}

#content .block h2{
	margin-bottom: 50px;
	color: #0066b3;
	text-align: center;
	font-size: 26px;
}
	#content #search h2{ color: #ffffff; }

#content .block h2 span{
	display: inline-block;
	margin-top: 15px;
	font-size: 10px;
	font-weight: normal;
	line-height: 1em;
	position: relative;
}
	#content .block h2 span::before,
	#content .block h2 span::after{
		content: "";
		display: block;
		width: 80px;
		height: 1px;
		background: #0066b3;
		position: absolute;
		top: 50%;
	}
	#content .block h2 span::before{ left: -100px; }
	#content .block h2 span::after{ right: -100px; }

		#content #search h2 span::before,
		#content #search h2 span::after{ background: #ffffff; }

#content .blockInner{

}



/* Kv
---------------------------------------------------------------------- */
#kv{
	position: relative;
}

#kv #kvSlide{}

#content #kv .swiper-container{
	padding-bottom: 0;
}

#kv .swiper-slide{
	color: #0066b3;
	/*min-height: 750px;*/
	/*background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;*/
	position: relative;
}
	/*#kv .slide01{ background-image: url(../img/kv01.jpg); }*/


	/*#kv .swiper-slide::before {
		content: "";
		display: block;
		padding-top: 62.5%;
	}*/

#kv .swiper-slide .txtArea{
	margin: 0 auto;
	width: 100%;
	max-width: 1048px;
	box-sizing: border-box;
	position: absolute;
	top: 40%;
	right: 0;
	left: 0;
}
	#kv .slide01 .txtArea{ padding: 30% 0 0 0; }

#kv .swiper-slide .tit{
	margin-bottom: 10px;
	font-weight: bold;
	line-height: 1em;
}
	#kv .slide01 .tit{ font-size: 60px; }
	

#kv .swiper-slide p{
	line-height: 2.15em;
}
	#kv .slide03 p,
	#kv .slide04 p{ font-size: 20px; line-height: 2em; }

#kv .swiper-pagination{
	bottom: 25px;
}

#kv .swiper-pagination-bullet{
	width: 50px;
	height: 4px;
	background: #828282;
	border-radius: 0;
	opacity: 1;
}

#kv .swiper-pagination-bullet-active{
	background: #0066b3;
}

/* kvArw */
#kv .kvArw{
	line-height: 1em;
	position: absolute;
	right: 11px;
	bottom: 55px;
}

#kv .kvArw a{
	display: block;
	padding: 0 3px 225px 0;
	position: relative;
}
	#kv .kvArw a::before,
	#kv .kvArw a::after{
		content: "";
		display: block;
		width: 1px;
		position: absolute;
		left: 3px;
	}
		#kv .kvArw a::before{ height: 200px; background: #b8b8b8; top: 140px; }
		#kv .kvArw a::after{ height: 30px; background: #000000; top: 140px; animation: kvArwLine 1.75s ease 0s infinite normal none; }

@keyframes kvArwLine {
	0% { transform: translateY(0); opacity: 0; }
	80% { transform: translateY(170px); opacity: 1; }
	100% { transform: translateY(170px); opacity: 0; }
}

#kv .kvArw a span{
	position: relative;
}
	#kv .kvArw a span::before,
	#kv .kvArw a span::after{
		content: "";
		display: block;
		width: 1px;
		position: absolute;
		left: 7px;
		transform: rotate(30deg);
	}
		#kv .kvArw a span::before{ height: 15px; background: #b8b8b8; top: 227px; }
		#kv .kvArw a span::after{ height: 15px; background: #000000; top: 227px; animation: kvArwLine2 1.75s ease 0s infinite normal none; }

@keyframes kvArwLine2 {
	0% { transform: translateY(-140px) translateX(70px) rotate(30deg); opacity: 0; }/* 2:1 */
	80% { transform: translateY(0) translateX(0) rotate(30deg); opacity: 1; }
	100% { transform: translateY(0) translateX(0) rotate(30deg); opacity: 0; }
}



/* products
---------------------------------------------------------------------- */
#products{
	background: #f2f2f2;
}

#products a{
	display: block;
}

#products a:hover{
	text-decoration: none;
}
	#products a:hover p{ color: #0066b3; }

#products .imgArea{
	margin-bottom: 15px;
	width: 320px;
	/*height: 320px;*/
	background: #ffffff;
}
	#products .imgArea::before{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		border: 1px solid #828282;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
	}

#products .imgInner{
	padding: 20px;	
}

#products .imgArea .icon{
	margin-bottom: 5px;
}

#products .imgArea .icon span{
	display: inline-block;
	padding: 5px;
	color: #0066b3;
	border: 1px solid #4f88b3;
	font-size: 14px;
	line-height: 1em;
}

#products .imgArea h3{
	margin-bottom: 5px;
	font-size: 16px;
}

#products .imgArea .model{
	margin-bottom: 5px;
	font-size: 12px;
}

#products .imgArea .img{
	display: block;
}

#products p{
	font-size: 14px;
	line-height: 1.7em;
}



/* search
---------------------------------------------------------------------- */
#search{
	color: #ffffff;
	background: #0e3c71 url(../img/searchBg.jpg) no-repeat center center;
	background-size: cover;
}

#search .lead{
	margin-bottom: 25px;
	font-size: 14px;
	line-height: 2.2em;
}

#search .searchArea{
	margin-bottom: 30px;
}

#search .searchArea form{
	margin: 0 auto;
	width: 800px;
	box-shadow: 0px 0px 8px #0e3c71;
	position: relative;
}

#search .searchArea input[type=text]{
	padding: 5px 60px 5px 10px;
	width: 100%;
	font-size: 24px;
	line-height: 1em;
	border: none;
	outline: none;
	box-sizing: border-box;
	border-radius: 0;
}

#search .searchArea button[type=submit]{
	border: none;
	width: 50px;
	height: 100%;
	background: #0066b3 url(../img/search_top.svg) no-repeat center center;
	background-size: auto;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	outline: none;
	cursor: pointer;
}

#search .searchArea button[type=submit]:hover{
	opacity: 0.7;
}



/* news
---------------------------------------------------------------------- */
#content  #news{
	padding: 100px 0 0 0;
}

#news .inner{
	padding-bottom: 50px;
	border-bottom: 1px solid #448fc7;
}

/* newsNav */
#news .newsNav{
}

#news .newsNav ul{
	display: flex;
	padding: 0 120px;
	justify-content: space-around;
}

#news .newsNav ul li{
	padding-bottom: 15px;
	position: relative;
}

#news .newsNav ul li a{
	font-size: 16px;
	line-height: 1em;
}
	#news .newsNav ul li a::after{
		content: "";
		display: block;
		width: 100%;
		height: 0;
		background: #0066b3;
		position: absolute;
		left: 0;
		bottom: -1px;
		transition: all 0.2s ease;
	}

#news .newsNav ul li a.on,
#news .newsNav ul li a:hover{
	color: #0066b3;
	text-decoration: none;
	font-weight: bold;
}

#news .newsNav ul li a.on::after,
#news .newsNav ul li a:hover::after{
	height: 4px;
}

/* newsLIst */
#news .newsLIst{
	margin-bottom: 30px;
	border-top: 1px solid #deded9;
}

#news .newsBlock{
	display: none;
}
	#news #newsAll{ display: block; }

#news .newsbox{
	border-bottom: 1px solid #deded9;
}

#news .newsbox a{
	display: flex;
	padding: 15px 65px 15px 10px;
	min-height: 80px;
	align-items: center;
	box-sizing: border-box;
}
	#news .newsbox a:hover{
		text-decoration: none;
		background: #eaf5ff;
	}

	#news .newsbox a:hover .txt{
		color: #0066b3;
		text-decoration: underline;
	}

#news .newsbox .dataArea{
	display: flex;
	margin-right: 30px;
	width: 270px;
}

#news .newsbox .data{
	margin-right: 30px;
	width: 120px;
	font-weight: bold;
}

#news .newsbox .cat{
	width: 120px;
}

#news .newsbox .cat span{
	display: inline-block;
	padding: 3px 5px;
	font-size: 12px;
	line-height: 1em;
	border: 1px solid #d2d2d2;
	background: #ffffff;
}
	#news .newsbox .cat span + span{ margin-top: 5px; }

#news .newsbox .txt{
	width: 673px;
	line-height: 1.8em;
}



/* ir
---------------------------------------------------------------------- */
#content #ir{
	padding: 50px 0 100px 0;
}

#ir .blockInner{
	margin-bottom: 30px;
	overflow: hidden;
}

#ir .blockL{
	float: left;
	width: 640px;
}

#ir .blockR{
	float: right;
	width: 375px;
}

#ir h3{
	padding-bottom: 5px;
	font-size: 16px;
	border-bottom: 1px solid #deded9;
}

/* stockweather */
#ir .stockweather{
	padding: 20px 0 0 0;
}

#ir .stockweather iframe{
	border: 0;
	width: 100%;
	height: 100%;
}

/* irList */
#ir .irList{}

#ir .irbox{
	border-bottom: 1px solid #deded9;
}

#ir .irbox a{
	display: flex;
	padding: 15px 15px 15px 10px;
	min-height: 88px;
	align-items: center;
	box-sizing: border-box;
}
	#ir .irbox a:hover{
		text-decoration: none;
		background: #eaf5ff;
	}

	#ir .irbox a:hover .txt{
		color: #0066b3;
		text-decoration: underline;
	}

#ir .irbox .data{
	margin-right: 50px;
	width: 120px;
	font-weight: bold;
}

#ir .irbox .txt{
	width: 445px;
	line-height: 1.8em;
}



/* featured
---------------------------------------------------------------------- */
#featured{
	background: #f2f2f2;
}

#featured a{
	display: block;
}

#featured a:hover{
	color: #0066b3;
	text-decoration: none;
}

#featured .img{
	margin-bottom: 15px;
	width: 320px;
	background: #ffffff;
}
	#featured .img::before{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		border: 1px solid #828282;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
	}

#featured h3{
	margin-bottom: 5px;
	font-size: 20px;
	line-height: 1.4;
}

#featured p{
	font-size: 14px;
	line-height: 1.7em;
}



/* support
---------------------------------------------------------------------- */
#support{}

#support ul{
	display: flex;
	margin: 0 auto 50px;
	width: 1050px;
}

#support ul li{
	width: 160px;
}
	#support ul li + li{
		margin-left: 18px;
	}

#support ul li a{
	display: block;
	text-align: center;
	color: #0066b2;
	font-size: 16px;
}

#support ul li span{
	display: block;
}

#support ul li span.img{
	width: 160px;
	height: 160px;
	background: #ddeaf5;
}

#support ul li span.txt{
	padding-top: 5px;
}

#support ul li a:hover{
	text-decoration: none;
}



/* link
---------------------------------------------------------------------- */
#link{}

#link ul{
	display: flex;
	margin: 0 auto;
	width: 1000px;
}

#link ul li{
	width: 180px;
}
	#link ul li + li{
		margin-left: 20px;
	}

#link ul li a{
	display: block;
}

#link ul li span.img{
	display: block;
	width: 180px;
}

#link ul li span.txt{
	display: block;
	padding-top: 5px;
	padding-left: 13px;
	position: relative;
}

#link ul li span.txt::before{
	content: '';
	display: block;
	margin-top: 13px;
	width: 5px;
	height: 5px;
	border-top: 2px solid #444444;
	border-right: 2px solid #444444;
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	left: 0;
}

#link ul li a:hover{
	color: #0066b3;
}

#link ul li a:hover span.txt::before{
	border-top-color: #0066b3;
	border-right-color: #0066b3;
}
#contact_box{position: fixed;right: 0;top: 40%;z-index: 1;background: rgba(255, 255, 255,.98);border: 2px solid #0066b3;}
#contact_box h3{background-color:#EEE; text-align:center;margin:0;padding:4px;}
#contact_box div{line-height: 1.6em;padding: 10px;font-size: 16px;}

@media only screen and (max-width: 768px) {

	/* swiper
	---------------------------------------------------------------------- */
	#content .swiper-container{ padding-bottom: 16.4vw; }
	#content .swiper-button-arw{ width: 10.66666667vw; height: 10.66666667vw; background-size: 10.66666667vw; }
		#content .swiper-button-prev{ left: 5.333333333vw; }
		#content .swiper-button-next{ right: 5.333333333vw; }

	#content .swiper-button-arw:hover{ background-color: transparent; }
	#content .swiper-button-prev:hover{ background-image: url(../img/swiper-prevBLU.svg); }
	#content .swiper-button-next:hover{ background-image: url(../img/swiper-nextBLU.svg); }


	/* block
	---------------------------------------------------------------------- */
	#content .block{ padding: 13.2vw 0; }
	#content .block h2{ margin-bottom: 6.8vw; font-size: 5.333333333vw; }
	#content .block h2 span{ margin-top: 4vw; font-size: 2.666666667vw; }
		#content .block h2 span::before,
		#content .block h2 span::after{ width: 16vw; }
		#content .block h2 span::before{ left: -20vw; }
		#content .block h2 span::after{ right: -20vw; }

	/* Kv
	---------------------------------------------------------------------- */
	#kv .slide01{ background-image: url(../img/kv01_sp.jpg); }
	#kv .swiper-slide::before { padding-top: 177.6%; }
	
	#kv .swiper-slide .txtArea{ max-width: none; padding-right: 5.333333333vw; padding-left: 5.333333333vw; }
		#kv .slide01 .txtArea{ padding-top: 80vw; }

	#kv .swiper-slide .tit{ margin-bottom: 3.2vw; }
		#kv .slide01 .tit{ font-size: 9.6vw; }

	#kv .swiper-slide p{ font-size: 3.2vw; line-height: 2em; }

	#kv .swiper-pagination{ bottom: 4.8vw; }
	#kv .swiper-pagination-bullet{ margin: 0 1.2vw; width: 16vw; }

	#kv .kvArw{ width: 2.933333333vw; right: 4vw; bottom: 4.4vw; }
	#kv .kvArw a{ padding: 0 0 16.8vw 0; }
		#kv .kvArw a::before,
		#kv .kvArw a::after{ left: 0.8vw; }
			#kv .kvArw a::before{ height: 14.4vw; top: 29.4vw; }
			#kv .kvArw a::after{ height: 2.4vw; top: 29.4vw; animation: kvArwLineSP 1.75s ease 0s infinite normal none; }
			@keyframes kvArwLineSP {
				0% { transform: translateY(0); opacity: 0; }
				90% { transform: translateY(12vw); opacity: 1; }
				100% { transform: translateY(12vw); opacity: 0; }
			}
		#kv .kvArw a span::before{ height: 4vw; top: 17.4vw; left: 1.8vw; }
		#kv .kvArw a span::after{ height: 2vw; top: 19.4vw; left: 1.4vw; animation: kvArwLine2SP 1.75s ease 0s infinite normal none; }
		@keyframes kvArwLine2SP {
			0% { transform: translateY(-9vw) translateX(4.5vw) rotate(30deg); opacity: 0; }
			90% { transform: translateY(0) translateX(0) rotate(30deg); opacity: 1; }
			100% { transform: translateY(0) translateX(0) rotate(30deg); opacity: 0; }
		}

	/* products
	---------------------------------------------------------------------- */
	#products .inner{ padding: 0; }
	#products a:hover p{ color: #444444; }
	#products .imgArea{ margin-bottom: 2vw; width: 100%; /*height: 69.145vw;*/ }
	#products .imgInner{ padding: 3.2vw; }
	#products .imgArea .icon{ margin-bottom: 0.8vw; }
	#products .imgArea .icon span{ padding: 0.8vw; font-size: 3.2vw; }
	#products .imgArea h3{ margin-bottom: 0.8vw; font-size: 4vw; }
	#products .imgArea .model{ margin-bottom: 0.8vw; font-size: 2.933333333vw; line-height: 1.2em; }
	#products .imgArea .img{ /*left: 3.2vw; bottom: 3.2vw; right: 3.2vw;*/ }
	#products .imgArea .img img{ width: 100%; }
	#products p{ font-size: 3.466666667vw; line-height: 1.5em; }

	/* search
	---------------------------------------------------------------------- */
	#search .lead{	margin-bottom: 6.8vw; font-size: 2.933333333vw; line-height: 1.8em; }
	#search .searchArea{ margin-bottom: 6.8vw; }
	#search .searchArea form{ width: 100%; }
	#search .searchArea input[type=text]{ padding: 1vw 12vw 1vw 2vw; font-size: 4.266666667vw; line-height: 2em; }
	#search .searchArea button[type=submit]{ width: 11.2vw; }
	#search .searchArea button[type=submit]:hover{ opacity: 1; }

	/* news
	---------------------------------------------------------------------- */
	#content  #news{ padding: 13.2vw 0 0 0; }
	#news .inner{ padding-bottom: 6.6vw; border: none; position: relative; }
		#news .inner::after{
			content: "";
			display: block;
			margin: 0 auto;
			height: 1px;
			width: 89.33333333vw;
			background: #448fc7;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
		}

	#news .newsNavSP{
		position: relative;
	}
		#news .newsNavSP::after{
			content: "";
			display: block;
			margin-top: -1.5vw;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 3vw 1.5vw 0 1.5vw;
			border-color: #ffffff transparent transparent transparent;
			position: absolute;
			top: 50%;
			right: 4vw;
		}

	#news select{
		padding: 2.4vw;
		width: 100%;
		color: #ffffff;
		font-size: 4.266666667vw;
		border: none;
		background: #0066b3;
		outline: none;
		box-sizing: border-box;
		border-radius: 0;
		-webkit-appearance: button;
		appearance: button;
		
	}
		#news select::-webkit-search-decoration { display: none; }
		#news select::focus { outline-offset: -2px; }

	/* newsLIst */
	#news .newsLIst{ margin-bottom: 5.6vw; border-top: none; }
	#news .newsbox a{ display: block; padding: 5.2vw 0; min-height: 0; }
		#news .newsbox a:hover,
		#news .newsbox a:hover .txt{ color: #444444; text-decoration: none; background: #ffffff; }

	#news .newsbox .dataArea{ display: block; margin: 0 0 2vw 0; width: 100%; overflow: hidden; }
	#news .newsbox .data{ float: left; margin: 0 1.6vw 0 0; width: auto; }
	#news .newsbox .cat{ float: left; margin: 0; width: auto; }
	#news .newsbox .cat span{ display: inline-block; padding: 0.4vw 0.8vw; font-size: 3.2vw; }
		#news .newsbox .cat span + span{ margin: 0 0 0 0.8vw; }
	#news .newsbox .txt{ width: 100%; font-size: 3.733333333vw; line-height: 1.42em; }

	/* ir
	---------------------------------------------------------------------- */
	#content #ir{ padding: 6.6vw 0 13.2vw 0; }
	#ir .blockInner{ margin-bottom: 6.8vw; }
	#ir .blockL,
	#ir .blockR{ float: none; width: 100%; }
		#ir .blockL{ margin-bottom: 6.8vw; }
	#ir h3{ padding-bottom: 1.6vw; font-size: 4vw; }
	#ir .irbox a{ display: block; padding: 5.2vw 0; min-height: 0; }
		#ir .irbox a:hover,
		#ir .irbox a:hover .txt{ color: #444444; text-decoration: none; background: #ffffff; }
	#ir .irbox .data{ margin: 0 0 2.8vw 0; width: 100%; }
	#ir .irbox .txt{ width: 100%; font-size: 3.733333333vw; line-height: 1.42em; }

	/* featured
	---------------------------------------------------------------------- */
	#featured .inner{ padding: 0; }
	#featured a:hover{ color: #444444; }
	#featured .img{ margin-bottom: 3.2vw; width: 100%; }
	#featured .img img{ width: 100%; }
	#featured h3{ margin-bottom: 1.6vw; font-size: 4vw; }
	#featured p{ font-size: 3.466666667vw; line-height: 1.53em; }

	/* support
	---------------------------------------------------------------------- */
	#support ul{ margin: 0 0 2.4vw 0; width: auto; flex-wrap: wrap; justify-content: space-between; }
	#support ul li{ width: 28vw; margin: 0 2.666666667vw 4.4vw 0; }
		#support ul li + li{ margin-left: 0; }
		#support ul li:nth-child(3n){ margin-right: 0; }
	#support ul li a{ font-size: 3.733333333vw; }
	#support ul li span.img{ width: 28vw; height: 28vw; } /* 画像高さ */
	#support ul li span.txt{ padding-top: 1vw; }

	/* link
	---------------------------------------------------------------------- */
	#link ul{ margin-bottom: -8.8vw; width: auto; flex-wrap: wrap; justify-content: space-between; }
	#link ul li{ width: 38.66666667vw; margin-bottom: 8.8vw; }
		#link ul li + li{ margin-left: 0; }

	#link ul li span.img{ width: auto; }
	#link ul li span.txt{ padding-top: 1vw; padding-left: 3.5vw; font-size: 3.2vw; line-height: 1.6em; }
		#link ul li span.txt::before{ margin-top: 2.8vw; width: 1.2vw; height: 1.2vw; }
	#link ul li a:hover{ color: #444444; }
		#link ul li a:hover span.txt::before{ border-top-color: #444444; border-right-color: #444444; }
}