*{
	background-repeat:no-repeat;
	line-height:140%;
	margin:0;
	padding:0;
	outline: none
}

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
 
a {text-decoration:none; overflow:hidden; color:#333}
a:hover {color:#666}

img {border: none; line-height:0; vertical-align:bottom;max-width: 100%;-webkit-backface-visibility: hidden}
img[data-echo]{ 
	min-width:50px; 
	min-height:50px; 
	background-image:url(../images/common/loader-white.gif); 
	background-position:center center;
	border:solid 1px #ddd;
	border-radius:5px
}
img[data-echo].loaded{background-image:none}


.clear{clear:both; height:0; line-height:0; font-size:0}

.space10 {height: 10px}
.space20 {height: 20px}
.space30 {height: 30px}
.space40 {height: 40px}
.space100 {height: 100px}

.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}

.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}

.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml40{margin-left:40px}
.ml50{margin-left:50px}

.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr40{margin-right:40px}
.mr50{margin-right:50px}


.font10{font-size:10px}
.font12{font-size:12px}
.font14{font-size:14px}
.bold{font-weight:bold}
.txt-left{text-align:left}
.txt-center{text-align:center}
.txt-right{text-align:right}
.red{color:#C00}

ul.no-list-style li{list-style: none}

.alpha{
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.alpha:hover{
	filter: alpha(opacity=70);
	-moz-opacity:0.75;
	opacity:0.75;
}

.wrap-alpha a{
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.wrap-alpha a:hover{
	filter: alpha(opacity=70);
	-moz-opacity:0.75;
	opacity:0.75;
}
.transition-01{ 
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.transition-02{ 
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.transition-03{ 
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}

.transition-a a{ 
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

/* Scroll Trigger */

.trigger{
	-webkit-transition: -webkit-transform 1.0s ease, opacity 1.0s ease;	
	-moz-transition: -moz-transform 1.0s ease, opacity 1.0s ease;	
	-o-transition: -o-transform 1.0s ease, opacity 1.0s ease;	
	-ms-transition: -ms-transform 1.0s ease, opacity 1.0s ease;	
	transition: transform 1.0s ease, opacity 1.0s ease;	
}
.trigger-2{
	-webkit-transition: -webkit-transform  1.5s ease, opacity  1.5s ease;	
	-moz-transition: -moz-transform  1.5s ease, opacity  1.5s ease;	
	-o-transition: -o-transform  1.5s ease, opacity 1.5s ease;	
	-ms-transition: -ms-transform  1.5s ease, opacity  1.5s ease;	
	transition: transform 1.5s ease, opacity 1.5s ease;	
}
.trigger-3{
	-webkit-transition:  -webkit-transform 1.0s ease 1.0s, opacity 1.0s ease 1.0s;	
	-moz-transition:  -moz-transform 1.0s ease 1.0s, opacity 1.0s ease 1.0s;	
	-o-transition:  -o-transform 1.0s ease 1.0s, opacity 1.0s ease 1.0s;	
	-ms-transition:  -ms-transform 1.0s ease 1.0s, opacity 1.0s ease 1.0s;	
	transition: transform 1.0s ease .5s, opacity 1.0s ease .5s;	
}


.invisible {
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	-ms-transition: opacity .5s ease;
	transition: opacity .5s ease;
	opacity: 0.0;
}

.visible {
	-webkit-transition: opacity 1.0s ease;
	-moz-transition: opacity 1.0s ease;
	-o-transition: opacity 1.0s ease;
	-ms-transition: opacity 1.0s ease;
	transition: opacity 1.0s ease;
	opacity: 1.0;
}

.fromTopIn{
	-webkit-transform: translate(0,0);	
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
	opacity: 1.0;
}

.fromTopOut{
	-webkit-transform: translate(0,-10px);	
	-moz-transform: translate(0,-10px);
	-o-transform: translate(0,-10px);
	-ms-transform: translate(0,-10px);
	transform: translate(0,-20px);
	opacity: 0.0;
}

.fromBottomIn{
	-webkit-transform: translate(0,0);	
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
	opacity: 1.0;
}

.fromBottomOut
{
	-webkit-transform: translate(0,10px);	
	-moz-transform: translate(0,10px);
	-o-transform: translate(0,10px);
	-ms-transform: translate(0,10px);
	transform: translate(0,20px);
	opacity: 0.0;
}

.fromLeftIn
{
	-webkit-transform: translate(0,0);	
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
	opacity: 1.0;
}

.fromLeftOut
{
	-webkit-transform: translate(-10px,0);	
	-moz-transform: translate(-10px,0);
	-o-transform: translate(-10px,0);
	-ms-transform: translate(-10px,0);
	transform: translate(-20px,0);
	opacity: 0.0;
}

.fromRightIn
{
	-webkit-transform: translate(0,0);	
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
	opacity: 1.0;
}

.fromRightOut
{
	-webkit-transform: translate(10px,0);	
	-moz-transform: translate(10px,0);
	-o-transform: translate(10px,0);
	-ms-transform: translate(10px,0);
	transform: translate(20px, 0);
	opacity: 0.0;
}

.scaleUpIn
{
	-webkit-transform: scale(1.0,1.0);
	-moz-transform: scale(1.0,1.0);
	-o-transform: scale(1.0,1.0);
	-ms-transform: scale(1.0,1.0);
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleUpOut
{
	-webkit-transform: translate(0,0);	
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: scale(1.2,1.2);
	opacity: 0.0;
}

.scaleDownIn
{
	-webkit-transform: scale(1.0,1.0);	
	-moz-transform: scale(1.0,1.0);
	-o-transform: scale(1.0,1.0);
	-ms-transform: scale(1.0,1.0);
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleDownOut
{
	-webkit-transform: scale(0.7,0.7);	
	-moz-transform: scale(0.7,0.7);
	-o-transform: scale(0.7,0.7);
	-ms-transform: scale(0.7,0.7);
	transform: scale(0.7,0.7);
	opacity: 0.0;
}

.rotateIn{
	-webkit-transform: rotate(0deg)scale(1);
	transform: rotate(0deg)scale(1);
	opacity: 1.0;
}
.rotateOut{
	-webkit-transform: rotate(30deg) scale(.9);
	transform: rotate(30deg) scale(.9);
	opacity: 0.0;
}


.bd-01{background: linear-gradient(transparent 60%, rgba(252,238,33,.6) 0%); font-weight: bold}
.bd-02{background: linear-gradient(transparent 60%, rgba(228,0,3,.4) 0%); font-weight: bold}
.bd-03{background: linear-gradient(transparent 60%, rgba(0,65,219,0.50)  0%); font-weight: bold}

.cursor{cursor:pointer; cursor:hand}

th,td{text-align:left}

input[type="text"]:focus {outline: 0;}
button:focus {outline: 0;-webkit-appearance: none;border-radius: 0;}

.fl-left{float:left; margin: 0 1em 1em 0}
.fl-right{float:right; margin: 0 0 1em 1em}

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

.fl-left{float:none; margin: 0; display: block; margin-bottom: 1em}
.fl-right{float:none; margin: 0 ; display: block; margin-bottom: 1em}


}
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.clearfix { display: inline-table}
.clearfix{zoom:1}/** for IE7 **/

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.link a{color:#0052a5}
.link a:hover{color:#ffb700}

#window-size{position: fixed; bottom:10px; left: 10px; width: 200px; background-color: #fff; font-size: 16px; font-weight: bold; z-index: 9999; text-align: center;padding: 10px; display: none}

#ie-notice{background-color: #fff; padding: 10px; text-align: center; font-size: 16px; font-weight: bold; color:red}



/** ***********************************************

COMMON

*********************************************** **/

.lines{position: fixed;top:0;left: 0; width: 100%;height: 100%;z-index: -1}
.lines .inner{max-width: 1300px; height: 100%; border-left:solid 1px #eee; border-right:solid 1px #eee;}
.lines .inner::after{content:""; width: 1px; background-color: #eee; height: 100%; position: absolute; top:0; left: 50%}

.cols-2{font-size:0;}
.cols-2 .col{font-size:14px; display: inline-block; vertical-align: top; width :50%}

.cols-3{font-size:0;}
.cols-3 .col{font-size:14px; display: inline-block; vertical-align: top; width :33.33333%}

.cols-4{font-size:0;}
.cols-4 .col{font-size:14px; display: inline-block; vertical-align: top; width :25%}

.pc{display: block}
.sp{display: none}


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

.pc{display: none}
.sp{display: block}

.cols-2 .col,
.cols-3 .col,
.cols-4 .col{width :100%}

.lines{display: none}

}

.tr{display:table;table-layout: fixed;border-collapse: collapse;width: 100%}
.td{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;}
.th{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;font-weight:bold}

.reset{ font-size:0; letter-spacing:.5}
.reset li{font-size:14px; letter-spacing:normal}

.full{width:100%; height:auto}

.hr-list{letter-spacing: -0.5em}
.hr-list li{display:inline-block; vertical-align:top;letter-spacing: normal}

.table-style-01{width:100%}
.table-style-01 table{width:100%;border-collapse:separate;border-spacing:1px;}
.table-style-01 th{padding:10px; text-align:right;}
.table-style-01 td{padding:10px;}


.table-style-02{width:100%;background-color:#ccc}
.table-style-02 table{width:100%;border-collapse:separate;border-spacing:1px;}
.table-style-02 th{text-align:right; padding:8px 10px; vertical-align:top; white-space:nowrap;background:#eee}
.table-style-02 td{ padding:8px 10px; background-color:#fff}

.bt-blue a{color:#fff; display:block; padding:15px 10px; text-align:center; background-color:#269FE0;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px; border-bottom:solid 3px #069}
.bt-blue a:hover{background-color:#CCC;border-bottom:none; margin-top:11px!important}

.bt-blue-02 a{color:#fff; display:block; padding:10px 10px; text-align:center; background-color:#269FE0;-webkit-border-radius: 4px;-moz-border-radius:4px;border-radius:4px}
.bt-blue-02 a:hover{background-color:#CCC}

.bt-orange a{color:#fff; display:block; padding:15px 10px; text-align:center; background:#F90;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px; border:solid 1px #fff;
	background: -moz-linear-gradient(top ,#F90, #F60);
    background: -webkit-gradient(linear, left top, left bottom, from(#F90), to(#F60));
    background: linear-gradient(to bottom, #F90, #F60);
}
.bt-orange a:hover{background:#F60}


body{
	-webkit-text-size-adjust: 100%;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	font-size: 100%;
	font-weight: 300;
	overflow-x: hidden
}
.ie body{font-weight: 500}
.mincho{font-family: "游明朝体", "Yu Mincho", YuMincho, 'Hiragino Mincho ProN', "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;}

.inner{width:100%; max-width: 1300px; margin:0 auto; position:relative}


/**  Slick Base  fadeする場合はslick.cssの読み込みが必要**/

.slick{overflow: hidden; width: 100%; position: relative;-webkit-backface-visibility: hidden}
.slick li.slick-slide{display: inline-block; vertical-align: middle;overflow: hidden}
.slick li.slick-slide img{width: 100%; height: auto}
.slick-arrow{position: absolute; top:50%; font-size: 50px; margin-top: -50px; z-index: 2}
.slick-prev{left:10px}
.slick-next{right:10px}

.slick-dots{text-align: center; position: absolute; bottom:0px; left: 0 ;width: 100%}
.slick-dots li{display: inline-block; width: 10px; height: 10px; margin: 0 5px; background-color: #ddd; border-radius: 100%; text-indent: -9999px; cursor: pointer}
.slick-dots li.slick-active{background-color:#0071bc}



/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; font-size:12px}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;overflow:visible}

#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}

#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

#cboxOverlay{background:#000;}
#colorbox{outline:none}
#cboxContent{margin:0px;background:#fff}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxTitle{position:absolute; bottom:-30px; left:0; color:#fff; font-size:14px; font-weight: 500;text-align: center; width: 100%}
#cboxCurrent{position:absolute; bottom:-30px; left:0px; color:#ccc; font-size: 12px}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:none;}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}


#colorbox .slick-arrow{color:#fff; font-size: 40px}
#cboxPrevious .slick-arrow{margin-top: -25px; left: -40px}
#cboxNext .slick-arrow{margin-top: -35px; right: -40px}
#cboxClose{font-size:40px; color:#fff; position: absolute; top:-60px; right: 0}



/** ***********************************************

HEADER

*********************************************** **/
#sec-news{background-color:#eddf21;text-align: center}
#sec-news .inner{padding: 15px 10px; font-size: 14px;font-weight: bold}
#sec-news p a{display: inline-block; max-width:60%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; vertical-align: middle}
#sec-news p a{color:#0071bc; font-weight: bold; text-decoration: underline;}
#sec-news .date{font-size: 12px; margin-right: 10px}
#sec-news .new{font-style: normal; font-size: 10px; color:#de1c24;margin-left: 10px}
#sec-news .lang{position: absolute; top:15px; right:0; font-size: 14px; letter-spacing: .5px}

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

#sec-news .inner{padding: 10px 10px; font-size: 12px}

}


#header .block-1{padding: 15px 10px}
#header h1{font-size: 12px; margin-bottom: 5px; font-weight: normal}

#header .logo-mark{max-width: 100px;float:left;margin-right: 5px}
#header h2.logo{font-size: 24px; letter-spacing: 2px; margin-bottom: 5px}
#header .logo-en{font-size: 12px; letter-spacing: 1px}

#header .wrap-phone{max-width: 300px; text-align: right; margin: 0 0 0 auto}
#header .item-1{font-size: 30px; font-weight: bold; letter-spacing: 1px}
#header .item-2{font-size: 12px; font-weight: bold}


#gnavi{background-color: rgba(0,79,159,1.00); text-align: center}
#gnavi li{display: inline-block; list-style: none; vertical-align: middle}
#gnavi a{color:#fff; font-weight: bold; display: block; padding: 15px 5px; margin: 0 15px;border-bottom:solid 2px rgba(0,79,159,1.00)}
#gnavi a:hover,
#gnavi a.on{color:#eddf21;border-bottom:solid 2px #eddf21}


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

#header h1{font-size: 10px}
#header h2.logo{font-size: 20px}
#header .logo-en{font-size: 10px}

#sec-news .lang{top:15px; right:10px; font-size: 13px}
#header .item-1{font-size: 25px;margin: 6px 0 3px}
#gnavi li a{font-size: 14px; margin: 0 5px}

}


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

#gnavi{display: none}
#sec-news .lang{top:15px; left:10px;right: inherit}


#sec-news .lang{display: none}
#sec-news .date{display: none}
#sec-news p a{max-width:80%;}
#header h2.logo{font-size: 16px}
#header .col-2{display: none}

}


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

#header .logo-mark{max-width: 60px}
#header h2.logo{font-size: 14px}

}

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

#header .logo-mark{max-width: 40px}
#header h2.logo{font-size: 13px}

}




#bt-nav,
#show-menu{display: none}
@media screen and (max-width: 700px) {

#bt-nav {display: block; position: fixed; top:70px; right:10px;background-color: rgba(0,79,159,1.00);padding: 8px; z-index: 9999}
#bt-nav .item-01{border-top:solid 1px #fff;width:30px; display:block}
#bt-nav .item-02{border-top:solid 1px #fff;width:30px; display:block; margin-top:8px}
#bt-nav .item-03{border-top:solid 1px #fff;width:30px; display:block; margin-top:8px}

#bt-nav.on .item-01{
	-webkit-transform: rotate(-36deg);
	transform: rotate(-36deg);
	transform-origin:right;
}
#bt-nav.on .item-02{width:0}
#bt-nav.on .item-03{
	-webkit-transform: rotate(36deg);
	transform: rotate(36deg);
	transform-origin:right;
}


#show-menu{display: block; position: fixed; top:0; left: -80%; z-index: 9998; width:80%; height: 100%;background-color: rgba(0,79,159,1.00);}
#show-menu.on{left: 0}
#show-menu li a{display: block; color:#fff; padding: 10px 20px; width: 100%;border-bottom:solid 1px #fff;position: relative}
#show-menu li i{font-size: 20px; position: absolute; top:11px; right:10px}

}

/** ***********************************************

TOP MAIN

*********************************************** **/

#slide-1{overflow: hidden; width: 100%; position: relative;-webkit-backface-visibility: hidden; max-height: 600px}

#slide-1 li.slick-slide{position: relative; -webkit-filter: blur(3px);filter: blur(3px);background-color: #000}
#slide-1 li.slick-slide img{opacity: .8}
#slide-1 li.slick-active{-webkit-filter: blur(0px);filter: blur(0px);}
#slide-1 li.slick-active img{opacity: 1}

#slide-1 .slick-arrow{position: absolute; top:50%; font-size: 50px; margin-top: -50px; z-index: 2; color:#fff}
#slide-1 .slick-prev{left:-20px}
#slide-1 .slick-next{right:-20px}
#slide-1:hover .slick-prev{left:10px}
#slide-1:hover .slick-next{right:10px}
#slide-1 li.slick-slide p{ color:#fff; font-weight: bold;  max-width: 1030px; position: absolute; top:35%; left: 100px; z-index: 10;line-height: 300%;}
#slide-1 li.slick-slide span{background-color: rgba(0,0,0,.7);padding: 8px 10px;font-size: 24px;letter-spacing: 1px;}
#slide-1 li.slick-slide img{position: relative; z-index: 1}



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

#slide-1 li.slick-slide p{top:35%; left: 20px;}

}

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

#slide-1 li.slick-slide p{left: 0;width: 96%; margin: 0 2%}
#slide-1 li.slick-slide span{font-size: 18px}

}

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

#slide-1 li.slick-slide p{top:50px;line-height: 200%}
#slide-1 li.slick-slide span{font-size: 12px}

}

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

#slide-1 li.slick-slide p{top:20px}

}


section{position: relative}
.sec-common{min-height: 500px}
.title-area{background-color: rgba(232,238,246,1.00); text-align: center;padding: 20px}
.title-area h2::before{content: ""; width: 40px; background-color: #000;height: 1px; display: inline-block; vertical-align: middle; margin-right: 30px}
.title-area h2{font-size: 34px; font-weight: bold;letter-spacing: 2px; }
.title-area h2.h2-01::after{content: "Our Four Strengths"; display: block; font-size: 12px; color:#666; font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";display: block; font-weight: normal;letter-spacing: 1px}
.sec-common .content{padding: 80px 0}




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

.title-area h2::before{width: 30px; margin-right: 20px}
.title-area h2{font-size: 24px; }
.title-area h2.h2-01::after{font-size: 10px}
.sec-common .content{padding: 50px 0}

}


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

.title-area h2::before{width: 20px; margin-right: 10px}
.title-area h2{font-size: 20px; }

}

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

.title-area h2::before{display: none}
.title-area h2{font-size: 20px; }

}


#sec-02{position: relative;overflow-x: hidden}
#sec-02 .num{color:rgba(0,79,159,1.00); font-weight: bold;}
#sec-02 .cols-2{margin-bottom: 50px}
#sec-02 .cols-2 h3{font-size: 35px; font-weight: bold; letter-spacing: 2px}
#sec-02 .cols-2 .num{font-size: 70px;display: inline-block; vertical-align:baseline; margin-right: 10px}
#sec-02 .cols-2 .col-2{padding: 0 100px}
#sec-02 .cols-2 .col-2 p{font-size: 20px;line-height: 200%;font-weight: bold;margin-top: 20px}
#sec-02 .cols-2 .col-2 p .bd-01{color:#de1c24}
#sec-02 .cols-2 .col-2 .bt{margin-top: 40px}

.bt a{display:block; background-color: rgba(208,20,90,1.00);color:#fff; padding: 20px 0; max-width: 400px; margin: 0 auto; text-align: center; font-size: 18px; font-weight: bold;position: relative;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.bt a::before{content:"";width: 30px;height: 1px; background-color: #fff;position: absolute; top:50%;left: 20px;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;}
.bt a:hover{padding-left: 10px;opacity: .8}
.bt a:hover::before{left: 30px}



#sec-02 .cols-3 h3{font-size: 25px; font-weight: bold; letter-spacing: 2px; margin-bottom: 20px}
#sec-02 .cols-3 .num{font-size: 50px;display: inline-block; vertical-align:baseline; margin-right: 10px}
#sec-02 .cols-3 .col{padding: 0 20px}
#sec-02 .cols-3 p{font-size: 16px; font-weight: bold;line-height: 180%}

#sec-02 .rec.addclassOut{width: 300px; height: 300px;background-color:coral;position: absolute; top:-150px; left: -150px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	opacity: 0;
}

#sec-02 .rec.addclassIn{width: 300px; height: 300px;background-color: rgba(0,79,159,1.00);position: absolute; top:-150px; left: -150px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	opacity: 1;
}


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

#sec-02 .cols-2 h3{font-size: 25px}
#sec-02 .cols-2 .num{font-size: 50px}
#sec-02 .cols-2 .col-2{padding: 0 20px}
#sec-02 .cols-2 .col-2 p{font-size: 16px;line-height: 180%}

.bt a{font-size: 16px}
.bt a::before{width: 20px;left: 20px}
.bt a:hover::before{left: 30px}


#sec-02 .cols-3 h3{font-size: 20px}
#sec-02 .cols-3 .num{font-size: 30px;margin-right: 5px}
#sec-02 .cols-3 .col{padding: 0 10px}
#sec-02 .cols-3 p{font-size: 14px; font-weight: normal;line-height: 160%}

#sec-02 .rec.addclassIn{width: 200px; height: 200px; top:-120px; left: -100px;}

}


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

#sec-02 .rec.addclassIn{top:-150px; left: -150px;}

}

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

.bt a::before{display: none}

}




#sec-03 .col{background-position: center; background-size: cover;min-height: 300px; text-align: center;position: relative}
#sec-03 .col::before{content:""; position: absolute; width: 100%; height: 300px; background-color: rgba(0,0,0,.4);display: block}
#sec-03 .col a{display: block; width: 100%; height: 300px; color:#fff; padding-top: 110px;position: relative; z-index: 2}
#sec-03 .col:hover{opacity: .8}
#sec-03 .col-1{ border-right:1px solid #fff}

#sec-03 .col h3{font-size: 34px;letter-spacing: 2px; text-shadow: 1px 1px 1px #666}
#sec-03 .col .en{font-size: 12px; letter-spacing: 1px; color:#ddd; margin-top: 10px;font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";}


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

#sec-03 .col{min-height: 200px}
#sec-03 .col::before{height: 200px}
#sec-03 .col a{height: 200px;padding-top: 65px}

#sec-03 .col h3{font-size: 28px}
#sec-03 .col .en{font-size: 10px}

}


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

#sec-03{margin-bottom: 100px}

}



#sec-04{margin-bottom: 200px}
#sec-04 .img-01{max-width: 900px;width: 100%; height: auto}
#sec-04 .txts{position: absolute; right:0; top:250px;max-width: 500px;padding: 50px; background-color: #fff;}
#sec-04 p{font-size: 20px; letter-spacing: 1px; margin-bottom: 30px;line-height: 180%; font-weight: bold}
#sec-04 .sdk{position: absolute; top:-100px; left: 20px; color:rgba(255,255,255,.6); font-size: 150px}

.title-line{background-color: rgba(0,79,159,1.00);height: 150px; width: 100%;position: absolute; top:-75px; left: 0; z-index: 0; overflow: hidden}
.title-line .inner{position: relative}
.title-line h3{font-size: 30px;color:#fff;position: absolute; top:50px; right: 100px;text-align: center;z-index: }
.title-line h3::before{content: ""; width: 40px; background-color: #fff;height: 1px; display: inline-block; vertical-align: middle; margin-right: 30px}
.title-line h3 span{display: block; font-size: 12px; letter-spacing: 1px;font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";font-weight: normal; margin-left: 15px; margin-top: 5px}
.title-line .rec{width: 100px; height: 100px;background-color:#fff;position: absolute; top:-50px; 
right:-50px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

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

.title-line{top:-120px}
.title-line h3{top:20px}
}


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

#sec-04{margin-bottom: 250px}
#sec-04 .sdk{font-size: 130px}
.title-line{top:-150px}
.title-line h3{font-size: 24px;top:50px}
.title-line h3 span{font-size: 10px}
#sec-04 .title-line h3 span{margin-left: 32px}

}


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

#sec-04{margin-bottom: 150px}
#sec-04 .sdk{font-size: 60px;top:-50px; left: 20px}
#sec-04 .txts{ right:5%; top:200px;width: 90%; padding: 20px; }
#sec-04 p{font-size: 16px;}

}

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

.title-line h3{width: 80%}

}




#sec-05{margin-bottom: 200px}
#sec-05 .img-01{max-width: 900px;margin: 0 0 0 auto; display: block;width: 100%; height: auto}
#sec-05 .txts{position: absolute; left:0; top:250px;max-width: 500px;padding: 50px; background-color: #fff}
#sec-05 p{font-size: 20px; letter-spacing: 1px; margin-bottom: 30px;line-height: 180%; font-weight: bold}

#sec-05 .title-line h3{left: 100px;text-align: left}
#sec-05 .title-line h3 span{margin-left: 73px}
#sec-05 .title-line .rec{left:-50px}
#sec-05 .sdk{position: absolute; top:200px; right: 300px; color:#fff; font-size: 35px; font-weight: bold; background-color:rgba(0,0,0,.8); padding: 10px 20px; letter-spacing: 2px}


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

#sec-05 .sdk{top:100px}

}

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

#sec-05{margin-bottom: 100px}
#sec-05 .sdk{position: absolute; top:70px; right: 0;left: 0; color:#fff; font-size: 25px; padding: 10px 20px;width: 80%; text-align: center}
#sec-05 .txts{ right:5%; top:200px;width: 90%; padding: 20px; }
#sec-05 p{font-size: 16px;}

}

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

#sec-05 .title-line h3{left: 50px;text-align: left}

}


#sec-06{background-color: rgba(0,79,159,1.00);color:#fff;position: relative}
#sec-06 .inner{padding: 30px}
#sec-06 .p1{font-weight: bold; font-size: 13px;margin-bottom: 5px}
#sec-06 .p2{font-weight: bold; font-size: 24px; letter-spacing: 1px}

#sec-06 .bt{ position: absolute; top:40px; right:50px;width: 200px}
#sec-06 .bt a{background-color: #fff;color: rgba(0,79,159,1.00);font-size: 16px;padding: 10px 0}
#sec-06 .bt a::before{background-color:rgba(0,79,159,1.00); width: 20px}



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

#sec-06 .p2{font-size: 18px;max-width: 70%}
#sec-06 .bt{ position: absolute; top:40px; right:20px;width: 200px}

}

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

#sec-06 .p2{font-size: 18px;max-width: 100%}
#sec-06 .bt{ position: inherit; top:0; right:0;width: 100%; margin-top: 10px}

}

#back-top {
	position: absolute;
	top: -30px;
	right:0;
	z-index:999;
	display: block;
	text-align: center;
	width: 50px;
	color:#fff;
	background-color:rgba(0,79,159,1.00);
	font-size: 10px;line-height: 80%
}
#back-top i{display: block; font-size: 30px;line-height: 100%}


/** ***********************************************

FOOTER

*********************************************** **/
#footer{background-color: #333;padding: 50px 0; color:#fff}
#footer a{color:#fff}
#footer .inner{padding: 0 10px}
#footer .col-1{border-right:solid 1px #666; width: 35%; vertical-align: middle}
#footer .col-2{width: 65%; padding: 0 50px; vertical-align: middle}

#footer .p1{font-size: 24px; letter-spacing: 1px; margin-bottom: 3px; font-weight: bold}
#footer .p2{font-size: 14px; letter-spacing: 1px; margin-bottom: 20px}
#footer .p3{font-size: 16px; letter-spacing: 1px; margin-bottom: 10px}
#footer .p4{font-size: 17px;font-weight: bold; letter-spacing: 1px}

#footer .p3 .map{font-size: 10px; background-color: #eddf21; color:#000; display: inline-block; padding: 0 10px; margin-left: 10px; font-weight: bold; letter-spacing: 0}


#footer .ft-menu{margin-bottom: 10px}
#footer .ft-menu li{display: inline-block; list-style: none;margin-right: 14px; margin-bottom: 10px}

#footer .bn-ev{box-shadow: 3px 3px 3px #000; max-width: 350px;width: 100%; height: auto}

#copy{font-size: 10px; letter-spacing: 2px; color:#ccc;position: fixed; bottom:250px; right: -180px;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}



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

#copy{text-align: center;width: 100%; padding: 20px;display: block; color:#ccc;position: inherit; bottom:0px; right: 0px;-webkit-transform: rotate(0deg);transform: rotate(0deg);}

}


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

#footer .col-1{padding-right: 10px}
#footer .p1{font-size: 18px;}
#footer .p2{font-size: 10pxx}
#footer .p3{font-size: 14px}
#footer .p4{font-size: 14px}

}

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

#footer{padding: 30px 0}
#footer .col-1{border-right:none; width: 100%; text-align: center;margin-bottom: 30px}
#footer .col-2{width: 100%; padding: 0 10px; vertical-align: middle; text-align: center;margin-bottom: 30px}


#footer .ft-menu{display: none}
#footer .col-3 img{max-height: 200px; width: auto;}

}


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

#copy{letter-spacing: 1px}

}


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

#footer .col-2{width: 100%;}
#footer .col-3{width: 100%;}

}






/** ***********************************************

PAGE COMMON

*********************************************** **/



#title-area{height: 360px; width: 100%;  background-position: center; background-size: cover;position: relative}
#title-area::after{content:"";width: 100%; height: 100%; background-color: rgba(0,0,0,.4);position: absolute; top:0; left: 0}

#title-area .inner{z-index: 2; color:#fff; text-align: center;padding-top: 50px}

#title-area h2.title{font-size: 40px; letter-spacing: 4px;margin-bottom: 30px}

#title-area .bnavi li{display: inline-block; font-size: 14px}
#title-area .bnavi li::after{content:" / "; color:#fff}
#title-area .bnavi li a{color:#fff;}
#title-area .bnavi li a:hover{text-decoration: underline}


#page-01 .inner{background-color: #fff;margin-top: -150px; max-width: 1298px;min-height: 500px; padding: 30px 20px; font-size: 0}

#page-01 .inner.single{font-size: 16px}
#page-01 .inner.single .item{max-width:900px; margin: 0 auto}


#page-01 .left{width: 78%;min-height: 500px;display: inline-block; vertical-align: top;padding: 0 50px 0 20px; font-size: 16px}
#page-01 .right{width: 22%;min-height: 500px;display: inline-block; vertical-align: top;font-size: 16px}
.right{position: relative; z-index: 1000}


.img-right .wrap-img{float: right; padding: 0 0 1em 2em; max-width: 400px}
.img-right .wrap-txt{font-size: 16px}

.img-left .wrap-img{float: left; padding: 0 2em 1em 0; max-width: 400px}
.img-left .wrap-txt{font-size: 16px}


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

#page-01 .inner{max-width: 1100px}

}
@media screen and (max-width: 1024px) {

#page-01 .left{width: 100%;padding: 0; font-size: 14px }
#page-01 .right{display: none}

}
@media screen and (max-width: 800px) {

.img-right .wrap-img{max-width: 300px}
.img-right .wrap-txt{font-size: 14px}
.img-left .wrap-img{max-width: 300px}
.img-left .wrap-txt{font-size: 14px}

}

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

#title-area h2.title{font-size: 30px}
.img-right .wrap-img{max-width: 100%;float:none; padding: 0 0 1em 0}
.img-right .wrap-txt{font-size: 14px}
.img-left .wrap-img{max-width: 100%;float:none; padding: 0 0 1em 0}
.img-left .wrap-txt{font-size: 14px}

}



/** ***********************************************

ABOUT

*********************************************** **/


#page-01 .item{padding-bottom: 40px; margin-bottom: 12px;position: relative}
#page-01 .item:last-child::after{display: none}
#page-01 .item::after{content: ""; display: block; width: 30px; height: 1px; background-color: #ddd;position: absolute; bottom:20px; left: -40px}
#page-01 .item h3.title{font-size: 30px; font-weight: bold; border-bottom:solid 1px #000; padding-bottom: 10px; margin-bottom: 20px}
#page-01 .cont{padding: 10px}
#page-01 .item p{margin-bottom: 1em; line-height: 200%}
#page-01 .item p:last-child{margin-bottom: 0}



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

#page-01 .item{padding-bottom: 40px; margin-bottom: 12px;position: relative}
#page-01 .item::after{content: ""; display: block; width: 50px; height: 1px; background-color: #ddd;position: absolute; bottom:20px; left: -40px}
#page-01 .item h3.title{font-size: 18px; font-weight: bold; border-bottom:solid 1px #000; padding-bottom: 10px; margin-bottom: 20px}
#page-01 .cont{padding: 10px 0}

}

#rnavi{width: 100%;background-color: rgba(232,238,246,1.00);border-bottom:solid 1px rgba(232,238,246,1.00);padding: 1px;position: absolute; top:0; right: 0}
#rnavi a{display: block; font-weight: bold; font-size: 14px; padding: 15px; background-color: #fff;margin-bottom: 1px}
#rnavi a::before{content:"▶ "; font-size: 10px; margin-right: 5px}

#rnavi a:hover,
#rnavi a.on{opacity: 1;background-color:rgba(0,79,159,1.00);color:#fff }



.wrap-table-01{padding-bottom: 20px}
.wrap-table-01 table{border-collapse: collapse}
.wrap-table-01 th{border-bottom:solid 1px rgba(0,79,159,1.00);padding: 15px; font-size: 16px; text-align: center; width: 150px;line-height: 160%}
.wrap-table-01 td{border-bottom:solid 1px #eee;padding: 15px; padding-left: 50px; font-size: 16px}
.notice{color:#de1c24;line-height: 160%}





#item-05 ul{margin-left: 20px; margin-bottom: 20px}




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

.wrap-table-01 table{border-collapse: collapse}
.wrap-table-01 th{padding: 15px; font-size: 14px; text-align: left; width: 100%;line-height: 160%;display: block; border-bottom:0; padding-bottom: 0}
.wrap-table-01 td{border-bottom:solid 1px #eee;padding: 15px; padding-left: 15px; font-size: 14px;display: block}
.notice{font-size: 12px}

#item-05 ul li{font-size: 14px}

.wrap-table-02 th{padding: 15px;font-size: 14px; width: 35%}
.wrap-table-02 td{padding: 15px; padding-left: 20px; font-size: 14px; background-color: #fff}
.wrap-table-02 .notice{font-weight: normal; font-size: 12px}
.title-h4{margin-bottom: 10px}



}




/** ***********************************************

EQUIPMENT

*********************************************** **/

.wrap-table-02{padding-bottom: 20px}
.wrap-table-02 table{border-collapse: separate; border-spacing: 1px; background-color: #ddd;width: 100%}
.wrap-table-02 th{padding: 20px; background-color: rgba(232,238,246,1.00); font-size: 16px; text-align: left; line-height: 160%;text-align: left;}
#equipment .wrap-table-02 th{width: 70%}
.wrap-table-02 th .sub{font-weight: normal; font-size: 15px; margin-top: 10px; line-height: 180%; padding-left: 1em}
.wrap-table-02 td{padding: 20px; font-size: 16px; background-color: #fff; text-align: center}
.wrap-table-02 .notice{font-weight: normal; font-size: 14px}
.title-h4{margin-bottom: 10px}
.title-h4::before{content: "ー "}

.eq-images .col{padding: 5px;text-align: center; margin-bottom: 10px}
.eq-images .col a{display: block; background-color: #f5f5f5}
.eq-images .col img{max-height: 240px; width: auto}
.eq-images .cap{display: block; margin-top: 5px; font-size: 14px}
.eq-images td{padding: 5px}

@media screen and (max-width: 500px) {
.wrap-table-02 th{font-size: 13px}
.wrap-table-02 td{font-size: 13px}
.wrap-table-02 th .sub{font-size: 12px}
.eq-images .cap{font-size: 12px}
.eq-images .col{width:50%!important}
}


/** ***********************************************

PROCESS

*********************************************** **/


#process #item-01{padding-top: 20px}
#process #item-01 .catch{font-size: 24px;margin-bottom: 20px; color:rgba(0,79,159,1.00)}

.wrap-chart .box{text-align: center; font-size: 24px; font-weight: bold;padding: 20px;color:rgba(0,79,159,1.00);border:solid 1px rgba(0,79,159,1.00);background-color: rgba(232,238,246,1.00);margin-bottom: 50px;position: relative}

.wrap-chart .box-1::after{content:""; width: 100px; height: 50px;background-color:rgba(0,79,159,1.00); margin: 0 auto; display: block ;position: absolute; bottom:-51px;left:50%; margin-left: -50px}
.wrap-chart .box-1:last-child::after{display: none}

.wrap-chart .wrap-box{font-size: 0; margin-bottom: 50px}
.wrap-chart .box-2{width: 49%; margin: 0; display: inline-block}
.wrap-chart .box-2:nth-child(1){margin-right: 1%}
.wrap-chart .box-2:nth-child(2){margin-left: 1%}

.wrap-chart .box-2::before{content:""; width: 100px; height: 50px;background-color:rgba(0,79,159,1.00); margin: 0 auto; display: block ;position: absolute; top:-51px;left:50%; margin-left: -50px}
.wrap-chart .box-2::after{content:""; width: 100px; height: 50px;background-color:rgba(0,79,159,1.00); margin: 0 auto; display: block ;position: absolute; bottom:-51px;left:50%; margin-left: -50px}


#process .orange{background-color: rgba(254,252,169,1.00); border:solid 1px rgba(236,91,36,1.00)}
#process .orange p{color: rgba(236,91,36,1.00)}
#process .orange .p2{background-color: rgba(236,91,36,1.00); color:#fff;display: inline-block;padding: 0 20px;font-size: 18px}
.wrap-chart .box .col{padding: 10px}
.wrap-chart .box .cap{display: block;margin: 0 auto;margin-top: 5px;color:#333}

.wrap-chart .box-0{width: 49%; margin: 0; display: inline-block;margin-right: 1%; background-color: #fff;
border:none}
.wrap-chart .box-0::after{content:""; width: 100px; height: 398px;background-color:rgba(0,79,159,1.00); margin: 0 auto; display: block ;position: absolute; bottom:-61px;left:50%; margin-left: -50px;z-index: 0}

.ie .wrap-chart .box-0::after{height: 404px;bottom:-66px}

.wrap-chart .box-3{padding: 0;  width: 49%; margin: 0; display: inline-block;margin-left: 1%; background-color: #fff;
border:none}

.wrap-chart .box-3::before{content:""; width: 100px; height: 50px;background-color:rgba(0,79,159,1.00); margin: 0 auto; display: block ;position: absolute; top:-50px;left:50%; margin-left: -50px}
.wrap-chart .box-3::after{content:""; width: 100px; height: 50px;background-color:rgba(0,79,159,1.00); margin: 0 auto; display: block ;position: absolute; bottom:-51px;left:50%; margin-left: -50px}


.wrap-chart .box-3 li{text-align: center; font-size: 16px; font-weight: bold;padding: 5px;color:rgba(0,79,159,1.00);border:solid 1px rgba(0,79,159,1.00);background-color: rgba(232,238,246,1.00);margin-bottom: 10px;position: relative}

.wrap-chart .box-3 li::after{content:""; width: 100px; height: 10px;background-color:rgba(0,79,159,1.00); display: block ;position: absolute; bottom:-11px;left:50%; margin-left: -50px}

.wrap-chart .box-3 li:last-child{margin-bottom: 0}



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

#process #item-01 .catch{font-size: 20px}
.wrap-chart .box{font-size: 18px}
#process .orange .p2{font-size: 14px}

.wrap-chart .sp{margin: 0 auto; }
}



/** ***********************************************

PRODUCTS

*********************************************** **/


#products .eq-images .col{padding: 10px;text-align: center; margin-bottom: 15px}
#products .eq-images .col a{display: table-cell;vertical-align: middle; background-color: #fff;height: 240px;width: 250px;border:solid 1px #eee;position: relative;transition: all 0.2s ease-out;}
#products .eq-images .col a:hover{border:solid 1px #ccc}
#products .eq-images .col a i{position: absolute;bottom:5px; right:5px;opacity: .2;transition: all 0.2s ease-out;}
#products .eq-images .col a:hover i{opacity: 1}
#products .eq-images .col img{max-height: 240px;height:auto; width: auto;transition: all 0.2s ease-out;}
#products .eq-images .cap{display: block; margin-top: 8px; font-size: 15px}


@media screen and (max-width: 500px) {
#products .eq-images .col{padding:5px;margin-bottom: 10px}
#products .eq-images .col a{height: 140px;width: 50%;}
#products .eq-images .col img{max-height: 140px}
#products .eq-images .cap{font-size: 12px}
}


/** ***********************************************

ACCESS

*********************************************** **/

#access iframe{width: 100%; height: 400px}
#access #item-01{padding-top: 20px}
#access #item-01 .catch{font-size: 24px;margin-bottom: 0px; color:rgba(0,79,159,1.00)}


#access .bts{margin-top: 20px; text-align: center}
#access .bt{font-weight: bold;margin: 0 10px}
#access .bt i{font-size: 20px; margin-right: 5px;}
#access .bt-1{display: inline-block; padding: 20px; background-color: #eddf21}
#access .bt-2{display: inline-block; padding: 20px; background-color:#009a8e; color:#fff}

#access h4.title{font-size: 20px;margin-bottom: 20px}
#access #item-03 p.p1{margin-bottom: 0; font-weight: bold}
#access #item-03 p.p1::before{content:"― "}
#access #item-03 p.p2{margin-left: 20px}


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

#access #item-01 .catch{font-size: 20px}

}



/** ***********************************************

CONTACT

*********************************************** **/


#contact #item-01 .catch{font-size: 24px;margin-bottom: 0px; color:rgba(0,79,159,1.00)}
#contact h4.title{font-size: 20px;margin-bottom: 20px}
#form{max-width: 600px}
#contact dl{text-align: left; padding-top: 10px}
#contact dt{font-size: 16px; font-weight: bold; text-align: left; padding-bottom: 10px}
#contact dt:before{content:"― "}
#contact dd{padding-bottom: 20px}
#contact dt .req{color:red; font-size: 12px; margin-left: 10px; font-weight: normal}

#contact input[type='text'],
#contact input[type='email']{padding: 5px; width: 100%; font-size: 16px;border:solid 1px #ddd}
#contact input[type='radio']{margin-right: 5px}
#contact label{font-size:14px; margin-right: 10px}

#contact textarea{padding: 5px; width: 100%; height: 250px; font-size: 16px; border:solid 1px #ddd}



#contact .item-1{font-size: 40px; font-weight: bold; letter-spacing: 1px}
#contact .item-2{font-size: 14px; font-weight: bold}

#contact .wrap-bts{text-align: center}
#contact .wpcf7-confirm,
#contact .wpcf7-submit,
#contact .wpcf7-back{background-color: rgba(0,79,159,1.00);color:#fff; padding: 20px 0; 
width: 400px; margin: 0 auto; text-align: center; font-size: 16px; font-weight: bold;position: relative;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	border:none;
	display: block;
	cursor: pointer
}

#contact .wpcf7-confirm:hover,
#contact .wpcf7-submit:hover,
#contact .wpcf7-back:hover{opacity: .8}

#contact .wpcf7-confirm{display:block}
#contact .wpcf7-back{display: inline-block; width: 200px; background-color: #999; margin-right:4px}
#contact .wpcf7-submit{display: inline-block; width: 200px}


.wrap-img-c{text-align: center}

.list-news li{padding-bottom: 5px; border-bottom:solid 1px #ddd; margin-bottom: 5px; list-style: none}
.list-news .date{font-size: 13px; margin-right: 10px}
.list-news .new{font-size: 10px; color:#de1c24;margin-left: 10px; font-weight: bold}

.post{margin-top: 50px; font-size: 14px; color:#999; letter-spacing: 1px}


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

#contact #item-01 .catch{font-size: 18px}
#contact .item-1{font-size: 30px}
#contact .wpcf7-confirm,
#contact .wpcf7-submit,
#contact .wpcf7-back{width: 100%}

}


/** ***********************************************

RECRUIT

*********************************************** **/

#recruit .wrap-table-02 td{text-align: left!important}

.form-style-01 dl{text-align: left; padding-top: 10px; max-width: 800px; margin: 0 auto}
.form-style-01 dt{font-size: 16px; font-weight: bold; text-align: left; padding-bottom: 10px}
.form-style-01 dt:before{content:"― "}
.form-style-01 dd{padding-bottom: 20px}
.form-style-01 dd span{font-size: 14px}
.form-style-01 dt .req{color:red; font-size: 12px; margin-left: 10px; font-weight: normal}

.form-style-01 input[type='text'],
.form-style-01 input[type='email']{padding: 5px; width: 100%; font-size: 16px;border:solid 1px #ddd}
.form-style-01 input[type='radio']{margin-right: 5px}
.form-style-01 label{font-size:14px; margin-right: 10px}

.form-style-01 textarea{padding: 5px; width: 100%; height: 250px; font-size: 16px; border:solid 1px #ddd}

.form-style-01 input.txt-s{width: 50px;margin-right: 5px}

.form-style-01 .item-1{font-size: 40px; font-weight: bold; letter-spacing: 1px}
.form-style-01 .item-2{font-size: 14px; font-weight: bold}

.form-style-01 .wrap-bts{text-align: center}
.form-style-01 .wpcf7-confirm,
.form-style-01 .wpcf7-submit,
.form-style-01 .wpcf7-back{background-color: rgba(0,79,159,1.00);color:#fff; padding: 20px 0; 
width: 400px; margin: 0 auto; text-align: center; font-size: 16px; font-weight: bold;position: relative;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	border:none;
	display: block;
	cursor: pointer
}

.form-style-01 .wpcf7-confirm:hover,
.form-style-01 .wpcf7-submit:hover,
.form-style-01 .wpcf7-back:hover{opacity: .8}

.form-style-01 .wpcf7-confirm{display:block}
.form-style-01 .wpcf7-back{display: inline-block; width: 200px; background-color: #999; margin-right:4px}
.form-style-01 .wpcf7-submit{display: inline-block; width: 200px}



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

.form-style-01 .item-1{font-size: 30px}
.form-style-01 .wpcf7-confirm,
.form-style-01 .wpcf7-submit,
.form-style-01 .wpcf7-back{width: 100%}

}




div.wpcf7 {
	margin: 0;
	padding: 0;
}

div.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	margin: 0;
	padding: 0;
	border: 0;
}

div.wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
	border: 2px solid #ff0000;
}

div.wpcf7-mail-sent-ok {
	border: 2px solid #398f14;
}

div.wpcf7-mail-sent-ng,
div.wpcf7-aborted {
	border: 2px solid #ff0000;
}

div.wpcf7-spam-blocked {
	border: 2px solid #ffa500;
}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
	border: 2px solid #f7e700;
}

.wpcf7-form-control-wrap {
	position: relative;
}

span.wpcf7-not-valid-tip {
	color:#de1c24;
	font-size: 14px;
	font-weight: bold;
	display: block;
	background-color: rgba(255,0,4,.4);
	padding: 3px 5px
}

.use-floating-validation-tip span.wpcf7-not-valid-tip {
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 100;
	border: 1px solid #ff0000;
	background: #fff;
	padding: .2em .8em;
}

span.wpcf7-list-item {
	display: inline-block;
	margin: 0 0 0 1em;
}

span.wpcf7-list-item-label::before,
span.wpcf7-list-item-label::after {
	content: " ";
}

.wpcf7-display-none {
	display: none;
}

div.wpcf7 .ajax-loader {
	visibility: hidden;
	display: inline-block;
	background-image: url('../../images/ajax-loader.gif');
	width: 16px;
	height: 16px;
	border: none;
	padding: 0;
	margin: 0 0 0 4px;
	vertical-align: middle;
}

div.wpcf7 .ajax-loader.is-active {
	visibility: visible;
}

div.wpcf7 div.ajax-error {
	display: none;
}

div.wpcf7 .placeheld {
	color: #888;
}

div.wpcf7 input[type="file"] {
	cursor: pointer;
}

div.wpcf7 input[type="file"]:disabled {
	cursor: default;
}

div.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}