@charset "utf-8";

/*  Layout
-----------------------------------------------------------------------------*/
/* Body */
html{font-size:62.5%;}
body.customize-support{margin-top:-32px !important;}
body {
background:#FFF;
color:#333; /*コンテンツの主となる文字色*/
font-size: 1.6rem; /*コンテンツの主となる文字サイズ*/
line-height: 1.8; /*コンテンツの主となる文字高さ*/
letter-spacing: 1px;
margin: 0;
font-family:"游ゴシック Medium", "Yu Gothic Medium","メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 /*コンテンツの主となるフォント 前の方が優先して使用されるため、必要に応じて前後を入れ替える*/
width:100%; height:100%;
word-break:break-word;
}

/*  link*/
a {color:#333; text-decoration: none;  }
a:visited { color:#333; text-decoration: none;  }
a:hover { color: #333; text-decoration:underline; }
a img { border: 0; }
a.link,
a.link:visited,
a.link:hover { color: #2F5883; text-decoration:underline; }


/* wrapper
-----------------------------------------------*/
#wrapper{min-width:1100px;}
#main{padding: 50px 0;}
@media only screen and (max-width :768px) {
	#wrapper{min-width:0;overflow-x:hidden; padding-top:48px;}
	#main{padding: 25px 0;}
}


/* breadcrumb
-----------------------------------------------*/
#breadcrumb {padding:15px 0;}
#breadcrumb li{display: inline-block;}
#breadcrumb li::after{content: "≫"; font-size: 1.2rem; display: inline-block; padding: 0 10px;}
#breadcrumb li:last-child::after{display: none;}

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


/* header
-----------------------------------------------*/
@keyframes header_up {0% {top:-88px;} 100% {top:0px;}}

.en #header{top:0px; left:0px; z-index: 1000; width:100%; box-sizing: border-box; padding: 18px 30px; display: flex; justify-content: space-between; align-items: center; transition: 0.5s;}
.en #header #logo { width: 150px; margin-right: auto; line-height: 1;}
.en #header #logo img{vertical-align:bottom; max-width: 100%; height: auto;}
.en #header #navi_lang {margin-left: auto;}
.en #header #navi_lang a{text-decoration: none;}
.en #header #navi_lang a::before {margin: auto; width: 18px; margin-right: 5px; height: 27px;  content: ""; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-size: contain; background-image: url(../../../common/images/icon_global.png); background-position:0px 3px;}
.en #header a,
.en #header a:visited{transition: .5s; color:#333; }

.en #header.upper a,
.en #header.upper a:visited{ }
.en #header.upper{position:fixed; background-color: rgba(255,255,255,0.9);animation:header_up 0.5s ease alternate; box-shadow:0px 0px 4px 1px #999; padding: 10px 15px; }
.en #header.upper #logo {width: 150px;}
.en #header.upper #logo img{width: 100%; height: auto; vertical-align: middle;}

.en #header #navi{margin: 0 auto;}
.en #header #navi ul{text-align:center;padding:0px 20px;}
.en #header #navi li{display:inline-block;margin-left:20px; margin-right: 20px;}
.en #header #navi li a{font-weight: 600; padding: 10px 0; text-decoration: none; position: relative;}
.en #header #navi li a::after{content: ""; display: block;  bottom: -8px;transition: 0.3s; opacity: 0; position: absolute; }
.en #header #navi li a:hover::after{width: 100%; height: 4px; background-color: #55BDE8; left: 0; bottom: -4px; position: absolute; opacity: 1;}
.en #header #navi li#navi_contact a{ background-color: #55BDE8; color: #fff;padding: 10px 25px 10px 20px; border-radius: 30px; position: relative;} 
.en #header #navi li#navi_contact a:after{content:"";position:absolute;top:50%;margin-top:-2px;right:10px; bottom: 0;width:6px;height:6px; border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg); z-index:999; opacity: 1;}
.en #header #navi li#navi_contact a:hover::after{right:8px !important; left:inherit; bottom: 0;}

.en #header .sp_navi-btn{display: none;}

@media only screen and (max-width :768px) {
.en#wrapper{ padding-top: 0px;}
.en #header{height:48px; padding: 5px 15px;}
.en #header #logo {width: 150px;}
.en #header #logo img{width: 100%; height: auto; vertical-align: middle;}
.en #header .sp_navi-btn{cursor: pointer; float:right; margin:11px 0vw 11px 5vw; width:34px; height: 26px;position: relative; display: block;}
.en #header .sp_navi-btn span{position: absolute;background:rgba(200,200,200,0.9); width:100%; height:4px; display: block;}
.en #header .sp_navi-btn span:nth-child(1){top:0px; left:0px; }
.en #header .sp_navi-btn span:nth-child(2){top:50%; margin-top:-2px; left:0px; }
.en #header .sp_navi-btn span:nth-child(3){bottom:0px; left:0px; }
.en #header #navi{display: none;background:rgba(255,255,255,0.9); position:fixed;top:48px; left:0px;width:100%; z-index: 10;}
.en #header #navi li{display:block;margin:0 auto 10px; width:90vw; text-align: left; border-bottom: 1px solid #ccc;}
.en #header #navi li a{display: block; position: relative; padding: 10px;}
.en #header #navi li a::after{content:"";position:absolute;top:50%;margin-top:-10px;right:15px;width:8px;height:8px; border-top:3px solid #fff;border-right:3px solid #fff;transform:rotate(45deg); z-index:999; opacity: 1;}
.en #header #navi li a:hover::after{ display: none;}
	
.navi_active .en #header{background:rgba(255,255,255,0.9);}
}

/* header_image
-----------------------------------------------*/

.en .header_image{background: linear-gradient(70deg, #22aeca, #53cfe9);  height: 200px; min-height: 200px; display: flex; align-items: center; position: relative;}
.en .header_image .cont > *{width: 100%;}
.en .header_image .cont::after{content: ""; display: block; width: 200px; height: 5px; background-color: #fff; position: absolute; bottom: 0;}
.en .header_image .header_image_title{color: #fff; font-size: 4.5rem; line-height: 1.2; word-break: keep-all;}

.en.company .header_image{ }

@media only screen and (max-width :768px) {
.en .header_image{height: initial; min-height: 120px; display: flex; align-items: center; position: relative;}
.en .header_image .cont {width: 100%; margin-left: 15px; margin-right: 15px;}
.en .header_image .cont::after{width: 120px;}
.en .header_image .header_image_title{font-size: 3.5rem; }
}

/* side
-----------------------------------------------*/
#side .side-box > *{margin-bottom: 20px;}

/* footer
-----------------------------------------------*/
/* cv_box */
.contact_cv_box{background-color: #53BDE6;}
.contact_cv_box .cont{width: 700px; max-width:700px;}
.contact_cv_box .link_btn.ico_btn{background-color: #fff; color: #53BDE6;}
.contact_cv_box .link_btn:after{ border-top-color: #53BDE6; border-right-color: #53BDE6;}
.contact_cv_box .ico_btn.video_ico::before{background-image: url( "../images/ico_video_blue.svg");}
.contact_cv_box .ico_btn.contact_ico::before{background-image: url( "../images/ico_contact_blue.svg");}
.contact_cv_box .ico_btn.document_ico::before{background-image: url( "../images/ico_document_blue.svg");}
.contact_cv_box .ico_btn.try_ico::before{background-image: url( "../images/ico_try_blue.svg");}
@media only screen and (max-width :768px) {
.contact_cv_box .cont{width:auto; max-width:inherit;}
.contact_cv_box .cont .trial_cv li{width: 100%; margin-right: 0 !important;}
}

#footer #cio_baner{ background-color: #EEEEEE; padding: 25px 0;}
#footer #cio_baner .cont{background-color: #fff; padding:20px 50px 20px 35px; justify-content: center; align-items: center; line-height: 1.6; position: relative;}
#footer #cio_baner .cont::after{content:"";position:absolute;top:50%;margin-top:-10px;right:15px;width:20px;height:20px; border-top:4px solid #eee;border-right:4px solid #eee;transform:rotate(45deg); z-index:999;}
#footer #cio_baner .cont:hover::after{right:10px;}
#footer #cio_baner .cont .cio_logo{margin-right: 20px;}
#footer #footer_navi {padding: 40px 0 0 0 ;}
#footer #footer_navi #footer_top{border-top: 1px solid #eee; width: 920px; display: flex; justify-content: center; margin: 0 auto; padding: 30px 10px; }
#footer #footer_navi #footer_top > li{margin: 0px 15px;}

#footer #footer_navi #footer_bottom{border-top: 1px solid #eee; padding: 30px 0; text-align: center; }
#footer #footer_navi #footer_bottom > li{display: inline-block; margin-right: 15px; padding-right: 15px; border-right: 1px solid #ddd; font-weight: bold;}
#footer #footer_navi #footer_bottom > li:last-child{border-right: none; margin-right: 0px; padding-right: 0px;}

#footer #footer_navi #footer_top > li a:link,
#footer #footer_navi #footer_bottom > li a:link{font-weight: bold;color: #1FACCA;}
#footer #footer_navi #footer_top > li a:visited,
#footer #footer_navi #footer_top > li a:active,
#footer #footer_navi #footer_bottom > li a:visited,
#footer #footer_navi #footer_bottom > li a:active{color: #1FACCA;}

#footer #copyright{text-align: center; padding: 40px 0; background: #EEEEEE;}
#footer_pagetop { position: fixed; bottom: 10px; right:10px; width: 50px; height: 50px;}
#footer_pagetop img{width: 100%; height: auto;}
@media only screen and (max-width :768px) {
#footer #cio_baner{ padding: 15px;}
#footer #cio_baner .cont{ padding:15px 25px 15px 15px; }
#footer #cio_baner .cont .cio_logo{margin-right: 0px; margin-bottom: 15px;}
#footer #footer_navi {padding: 40px 0 0 0 ;}
#footer #footer_navi #footer_top{bwidth:auto; display:block;width: auto; margin: 0 auto; padding: 15px 10px; margin-left: 15px; margin-right: 15px; text-align: center; }
#footer #footer_navi #footer_top > li{margin: 0 1.0%; display: inline-block; width: 30%;}
#footer #footer_navi #footer_top > li a{font-weight: bold;}
	
#footer #footer_navi #footer_bottom{ padding: 15px 0;}
#footer #footer_navi #footer_bottom > li{display: inline-block; margin-right: 15px; padding-right: 15px; border-right: 1px solid #ddd; font-weight: bold;}
#footer #footer_navi #footer_bottom > li:last-child{border-right: none; margin-right: 0px; padding-right: 0px;}

#footer #copyright{text-align: center; padding: 40px 0; background: #EEEEEE;}
#footer_pagetop { position: fixed; bottom: 10px; right:10px;}
#footer_pagetop { bottom:5px; right: 5px; width: 35px; height: 35px;} 
}