@charset "utf-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height:1.8}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {display:block}
ul, ol {list-style:none}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}
ins {background-color:#ff9;color:#000;text-decoration:none}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom:1px dotted #000;cursor:help}
table {border-collapse:collapse;border-spacing:0}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}
input, select {vertical-align:middle}

/*========================================

BASIC

=======================================*/
html{-webkit-text-size-adjust:100%}
body{color:#221815; font-size:14px;font-family:'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;background:#ffffff; line-height:1.6;}
.Hv a {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;opacity:1;}
.Hv a:hover {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}
.HvOc a {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;opacity:1;}
.HvOc a:hover {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s; opacity:0.5;}
.spView {display:none;}
.fc-red {color:#E34043;}

/*========================================

header

=======================================*/
#top {position:relative; top:0;}
nav {background:url(../img/bg-nav.png) repeat;width: 100%;padding:15px 0;color: #ffffff;font-size: 12px; overflow:hidden; position:fixed; top:0; z-index:50;}
nav .cnt {width: 1200px;margin:0 auto;}
nav .cnt .logo {float:left;display:inline-block;margin-top:4px; width:147px; height:27px;}
nav .cnt .logo img { width:100%; height:auto;}
nav .cnt ul{float:right;display:inline-block; width:650px;}
nav .cnt ul li { float:left; width:20%; color:#fff; text-align:center; letter-spacing:1px;}
nav .cnt ul li span {font-weight:bold; font-size:16px; display:block;letter-spacing:2px;}
nav a {color: #ffffff; text-decoration:none;-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}
nav a:hover {color: #00A8E9;-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}

#MV {height: 950px;margin-bottom:0;}
#container {position: relative; z-index: 3;}
#MV h1 {text-align:center;margin-top:440px;}
#MV .description {margin-top:15px;text-align:center;font-size:110%;color:#ffffff;letter-spacing:2px;padding-bottom: 20%;}
video { display: block; }
video#bgvid {position: fixed;right: 0;bottom: 0;min-width: 100%;min-height: 100% !important;width: auto;height:auto !important;z-index: -100;background-size: cover;}



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

article

******************/
.wrapper {width: 100%;min-width:1000px; margin-top:0;}

#marketing {background:#fff; padding:200px 0;}
#marketing .cnt{ width:1200px; margin:0 auto; overflow:hidden;}
#marketing .cnt h2 { text-align:center; font-size:26px; letter-spacing:2px; color:#5E5D5C; margin-bottom:10px;}
#marketing .cnt h3 { text-align:center; font-size:14px; letter-spacing:1px; color:#898989; margin-bottom:60px;}
#marketing .cnt .circle {width:900px; margin:0 auto 60px; height:160px;}
#marketing .cnt .circle li { float:left; width:20%;}
#marketing .cnt .circle li img{ width:100%; height:auto;}
#marketing .cnt .circle li .image{ width:60%; padding:0 20%; text-align:center; margin-bottom:10px;}
#marketing .cnt .circle li p{ text-align:center; color:#898989; line-height:1.6;}
#marketing .cnt .circle li p span{ line-height:3;}
#marketing .cnt .details {overflow:hidden; width:900px; margin:0 auto 60px;}
#marketing .cnt .details li {width:46%; float:left; background:url(../img/bg-details.png) repeat; padding:1%; margin-bottom:20px; }
#marketing .cnt .details li .det {background:#fff; padding:2%;min-height:390px;}
#marketing .cnt .details li:nth-child(2n) {float:right;}
#marketing .cnt .details li .det .image { width:60%; margin:0 auto;}
#marketing .cnt .details li .det .image img { width:100%; height:auto; margin:0 auto 10px;}
#marketing .cnt .details li .det h4 { width:100%; text-align:center; color:#85D0F4; border-top: 1px solid #D7D7D7; padding:10px 0 5px;}
#marketing .cnt .details li .det h5 { text-align:center; color:#00A8E9; font-size:20px; letter-spacing:2px; line-height:1.4; margin-bottom:20px;}
#marketing .cnt .details li .det p {text-align:left;}

#about {background:url(../img/bg-about.jpg) no-repeat top center; background-size:100%;}
#about .cnt {width:100%; margin:0 auto;  text-align:left; color:#FFFFFF; }
#about .cnt .mask { background:url(../img/mask-about.png) repeat;margin-left:50%; padding:200px 0 200px 2%; width:48%;overflow:hidden;}
#about .cnt .block { width:500px; float:left; overflow:hidden;}
#about .cnt .block h2 { font-size:26px; letter-spacing:2px;}
#about .cnt .block h3 { font-size:18px; letter-spacing:1px; font-weight:normal; margin-bottom:20px;}
#about .cnt .block p { line-height:1.6; margin-bottom:1%;}
#about .cnt .block p.end { margin-bottom:20px;}
#about .cnt .block dl {overflow:hidden; width:100%; border-bottom:1px dotted #EFEFEF; padding-bottom:3px; margin-bottom:10px;}
#about .cnt .block dl dt { float:left; width:20%;}
#about .cnt .block dl dd { float:right; width:80%;}


#culture {background:url(../img/bg-culture.jpg) no-repeat top center; background-size:100%;}
#culture .cnt {width:100%; margin:0 auto;  text-align:left; color:#FFFFFF; overflow:hidden;}
#culture .cnt .mask { background:url(../img/mask-culture.png) repeat;margin-right:50%; padding:200px 2% 200px 0; width:48%;overflow:hidden;}
#culture .cnt .block { width:500px; float:right;}
#culture .cnt .block h2 { font-size:26px; letter-spacing:2px;}
#culture .cnt .block h3 { font-size:18px; letter-spacing:1px; font-weight:normal; margin-bottom:20px;}
#culture .cnt .block p { line-height:1.6; margin-bottom:1%;}
#culture .cnt .block p.end { margin-bottom:20px;}
#culture .cnt .block dl {overflow:hidden; width:100%; border-bottom:1px dotted #EFEFEF; padding-bottom:3px; margin-bottom:10px;}
#culture .cnt .block dl dt { float:left; width:20%;}
#culture .cnt .block dl dd { float:right; width:80%;}

#recruit {background:url(../img/bg-recruit.jpg) no-repeat top center; background-size:100%;}
#recruit .cnt {width:100%; margin:0 auto;  text-align:left; color:#FFFFFF; overflow:hidden;}
#recruit .cnt .mask { background:url(../img/mask-recruit.png) repeat;margin-left:50%; padding:200px 0 200px 2%; width:48%;overflow:hidden;}
#recruit .cnt .block { width:500px; float:left; overflow:hidden;}
#recruit .cnt .block h2 { font-size:26px; letter-spacing:2px;}
#recruit .cnt .block h3 { font-size:18px; letter-spacing:1px; font-weight:normal; margin-bottom:20px;}
#recruit .cnt .block p { line-height:1.6; margin-bottom:1%;}
#recruit .cnt .block p.end { margin-bottom:30px;}
#recruit .cnt .block .btn { font-size:16px; margin-top: 20px;padding-top: 20px;overflow: hidden;height: 60px;}
#recruit .cnt .block .btn a { border:2px solid #fff;color: #fff; text-decoration:none; padding:10px 20px; overflow:hidden; height:60px;}
#recruit .cnt .block .btn a:hover {background-color: #fff;border-color: #59b1eb;color: #59b1eb;}
#recruit .cnt .block .btn a:hover::before, #recruit .cnt .block .btn a:hover::after {height: 0;background-color: #fff;-webkit-box-sizing: border-box;}

 /*****************
footer
******************/
#footer  {width:100%; background:#4d98ce; text-align:center; color:#fff; padding:15px 0 20px; }
#footer .Back { margin-bottom:15px;}
#footer .logo {margin-bottom:10px;}
#footer .copyright { font-size:16px;}

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

animation

******************/
.animation {}
.fadeInDown {-webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; visibility: visible !important;}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

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

recruit

******************/
#contents{ margin-top:100px; width:800px; margin:100px auto 0;}
/* #contact-wrap */
#contact-wrap{padding:148px 0 296px;background:url(../images/basic/bg_sec_large.png) no-repeat center bottom;}
#contact-wrap h1 {text-align:center; font-size:26px; letter-spacing:2px; color:#5E5D5C; margin-bottom:20px;}
#contact-wrap p{margin:-20px 0 50px;font-size:16px;line-height:2;text-align:center;}
#contact-wrap .btn-conntact{width:325px;padding:0;margin:0 auto;color:#fff;font-size:16px;line-height:58px;text-align:center;background:#007bb7;display:block; border-radius:58px;-webkit-border-radius:58px;-moz-border-radius:58px;-ms-border-radius:58px;-o-border-radius:58px;}

#contactForm-wrap{max-width:847px;margin:0 auto;}
#contactForm-wrap .sec{margin:0 0 30px;}
#contactForm-wrap .sec p{margin:0 0 30px;text-align:left;line-height:1;}
#contactForm-wrap .sec p sup{color:#e94518;}
#contactForm-wrap .sec input{width:90%;height:46px;padding:0 5%;font-size:16px;line-haihgt:46px;border:1px solid #cdcece;}
#contactForm-wrap .sec select{width:50%;height:46px;padding:0 5%;font-size:16px;line-haihgt:46px;border:1px solid #cdcece;}
#contactForm-wrap .sec textarea{width:90%;height:175px;padding:5%;font-size:16px;border:1px solid #cdcece;}
#contactForm-wrap #btn-sendMail{margin:50px 0 0;}
#contactForm-wrap #btn-sendMail #send{display:none;}
#contactForm-wrap #btn-sendMail .btn{width:292px;margin:0 auto;color:#fff;font-size:16px;text-align:center;line-height:55px;border:1px solid #cdcece;background:#e61044;display:block;cursor:pointer;}


.MainVisual { width:100%;}
.MainVisual img{ width:100%; height:auto;}


#RecMV { width:100%; background:#fff; padding:60px 0 20px; font-size:16px; text-align:center;}
#RecMV .cnt { width:980px; margin:0 auto;}
#RecMV .cnt .block {}
#RecMV .cnt .block h1 { color:#1e9ed9; font-size:27px; margin-bottom:20px;}
#RecMV .cnt .block p { font-size:16px; margin-bottom:25px;}
#RecMV .cnt .block .Btns { width:500px; margin:0 auto;}
#RecMV .cnt .block .Btns .L-Btn { background-color:#00b6cc; width:200px; height:43px; color:#fff; float:left; background-image:url(../img/arrow-right.png); background-repeat:no-repeat; background-position: 180px 12px;}
#RecMV .cnt .block .Btns .L-Btn span { padding:0 10px 0 20px; font-size:16px; letter-spacing:1px;line-height: 2.8;}
#RecMV .cnt .block .Btns .R-Btn { background-color:#1e9ed9; width:200px; height:43px; color:#fff; float:right; background-image:url(../img/arrow-right.png); background-repeat:no-repeat; background-position: 180px 12px;}
#RecMV .cnt .block .Btns .R-Btn span { padding:0 10px 0 20px; font-size:16px; letter-spacing:1px;line-height: 2.8;}
#RecMV .cnt .block .Btns a .L-Btn, #RecMV .cnt .block .Btns a .R-Btn {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;opacity:1;}
#RecMV .cnt .block .Btns a:hover .L-Btn, #RecMV .cnt .block .Btns a:hover .R-Btn {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s; opacity:0.5;}


#Message { width:100%; background:#fff; padding:150px 0; font-size:16px;}
#Message .Cnt{ width:980px; margin:0 auto;}
#Message .Cnt h2{text-align:center; color:#000; font-size:30px; font-weight:normal; letter-spacing:1px; margin-bottom:10px;}
#Message .Cnt h2 span{display:block; color:#a8a9a9; font-size:16px; font-weight:normal; letter-spacing:1px;font-family: 'Muli', sans-serif;}
#Message .Cnt h3{text-align:center;font-size:24px; color:#e95e94; margin-bottom:50px; font-weight:normal; letter-spacing:1px;}
#Message .Cnt p{ line-height:1.6; margin-bottom:15px;}
#Message .Cnt .block { width:100%; overflow:hidden;}
#Message .Cnt .block .photo { float:left; width:46%;}
#Message .Cnt .block .photo img{width:100%; height:auto;}
#Message .Cnt .block .txt { float:right; width:50%;}
#Message .Cnt .block .txt .gbox { background:#e8e8e8; padding:15px 15px 0; overflow:hidden; margin-bottom:15px;}

#NewComer { width:100%; background:#f4f4f4; padding:150px 0; font-size:16px;}
#NewComer .Cnt{ width:980px; margin:0 auto 50px;}
#NewComer .Cnt h2{text-align:center; color:#000; font-size:30px; font-weight:normal; letter-spacing:1px; margin-bottom:10px;}
#NewComer .Cnt h2 span{display:block; color:#a8a9a9; font-size:16px; font-weight:normal; letter-spacing:1px;font-family: 'Muli', sans-serif;}
#NewComer .Cnt h3{text-align:center;  font-size:24px; color:#00b6cc; margin-bottom:50px; font-weight:normal; letter-spacing:1px;}
#NewComer .Cnt p{ line-height:1.6; margin-bottom:15px; text-align:center;}
#NewComer .Cnt p.end{margin-bottom:50px;}
#NewComer .Photo{width:1200px; margin:0 auto -8px; overflow:hidden;}
#NewComer .Photo img{ width:100%; height:auto;}
#NewComer .Det {width:1200px; margin:0 auto; overflow:hidden; color:#fff; font-size:16px; line-height:1.4; text-align:center;}
#NewComer .Det p{ line-height:1.6; margin-bottom:15px; text-align:center;}
#NewComer .Det h4{ font-size:18px; margin-bottom:16px;}
#NewComer .Det ul{ overflow:hidden; width:100%; text-align:center;}
#NewComer .Det ul li{ float:left; width:100%;}
#NewComer .Det .Left{ padding:20px 0; background:#00b3ba; width:50%; float:left;}
#NewComer .Det .Right{ padding:20px 0; background:#00aea5; width:50%; float:right;}

#MidCareer { width:100%; background:#fff; padding:150px 0; font-size:16px;}
#MidCareer .Cnt{ width:980px; margin:0 auto 50px;}
#MidCareer .Cnt h2{text-align:center; color:#000; font-size:30px; font-weight:normal; letter-spacing:1px; margin-bottom:10px;}
#MidCareer .Cnt h2 span{display:block; color:#a8a9a9; font-size:16px; font-weight:normal; letter-spacing:1px;font-family: 'Muli', sans-serif;}
#MidCareer .Cnt h3{text-align:center;  font-size:24px; color:#1e9ed9; margin-bottom:50px; font-weight:normal; letter-spacing:1px;}
#MidCareer .Cnt p{ line-height:1.6; margin-bottom:15px; text-align:center;}
#MidCareer .Cnt p.end{margin-bottom:50px;}
#MidCareer .Photo{width:1200px; margin:0 auto -8px; overflow:hidden;}
#MidCareer .Photo img{ width:100%; height:auto;}
#MidCareer .Det {width:1200px; margin:0 auto; overflow:hidden; color:#fff; font-size:16px; line-height:1.4; text-align:center;}
#MidCareer .Det p{ line-height:1.6; margin-bottom:15px; text-align:center;}
#MidCareer .Det h4{ font-size:18px; margin-bottom:16px;}
#MidCareer .Det .Left{ padding:20px 0; background:#00b3ba; width:50%; float:left; height:130px;}
#MidCareer .Det .Right{ padding:20px 0; background:#00aea5; width:50%; float:right; height:130px;}

#RecInfo { width:100%; background:#f4f4f4; padding:150px 0; font-size:16px;}
#RecInfo .Cnt{ width:980px; margin:0 auto 60px;}
#RecInfo .Cnt h2{text-align:center; color:#000; font-size:30px; font-weight:normal; letter-spacing:1px; margin-bottom:50px;}
#RecInfo .Cnt h2 span{display:block; color:#a8a9a9; font-size:16px; font-weight:normal; letter-spacing:1px;font-family: 'Muli', sans-serif;}
#RecInfo .Cnt dl {border-top:1px dotted #A0A0A0; overflow:hidden;}
#RecInfo .Cnt dl.end {border-bottom:1px dotted #A0A0A0;}
#RecInfo .Cnt dl dt{padding:20px 0; float:left; width:30%; margin-right:5%; text-align:right;}
#RecInfo .Cnt dl dd{padding:20px 0;float:right; width:65%;}


#Entry { width:100%; background:#fff; padding:150px 0; font-size:16px;}
#Entry .Cnt{ width:980px; margin:0 auto;}
#Entry .Cnt h2{text-align:center; color:#000; font-size:30px; font-weight:normal; letter-spacing:1px; margin-bottom:10px;}
#Entry .Cnt h2 span{display:block; color:#a8a9a9; font-size:16px; font-weight:normal; letter-spacing:1px;font-family: 'Muli', sans-serif;}
#Entry .Cnt h3{text-align:center;  font-size:24px; color:#e95e94; margin-bottom:50px; font-weight:normal; letter-spacing:1px;}
#Entry .Cnt { text-align:center;}
.FootImg { width:100%; margin:0 0 -7px;}
.FootImg img{ width:100%; height:auto;}
.mask {background:url(../img/mask.png) repeat; position:relative;}








@media screen and (max-width: 1200px) { /* Tablet Display - width:1200px under - */
/*========================================
header
=======================================*/



#MV {height: 950px;margin-bottom:0;}
#container {position: relative; z-index: 3;}
#MV h1 {text-align:center;margin-top:440px;}
#MV .description {margin-top:15px;text-align:center;font-size:110%;color:#ffffff;letter-spacing:2px;padding-bottom: 0;
video { display: block; }
video#bgvid {position: fixed;right: 0;bottom: 0;min-width: 100%;min-height: 100%;width: auto;height: auto;z-index: -100;background-size: cover;}

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

article

******************/
.wrapper {width: 100%;min-width:847px;}
#marketing {padding:200px 0;}
#marketing .cnt{ width:100%; margin:0 auto; overflow:hidden;}
#marketing .cnt .circle {width:90%; margin:0 auto 60px; height:160px;}
#marketing .cnt .circle li { float:left; width:20%;}
#marketing .cnt .circle li img{ width:100%; height:auto;}
#marketing .cnt .circle li .image{ width:60%; padding:0 20%; text-align:center; margin-bottom:10px;}
#marketing .cnt .circle li p{ text-align:center; color:#898989; line-height:1.6;}
#marketing .cnt .circle li p span{ line-height:3;}
#marketing .cnt .details {overflow:hidden; width:90%; margin:0 auto 60px;}
#marketing .cnt .details li {width:46%; float:left; background:url(../img/bg-details.png) repeat; padding:1%; margin-bottom:20px; }
#marketing .cnt .details li .det {background:#fff; padding:2%;min-height:390px;}
#marketing .cnt .details li:nth-child(2n) {float:right;}
#marketing .cnt .details li .det .image { width:60%; margin:0 auto;}
#marketing .cnt .details li .det .image img { width:100%; height:auto; margin:0 auto 10px;}
#marketing .cnt .details li .det h4 { width:100%; text-align:center; color:#85D0F4; border-top: 1px solid #D7D7D7; padding:10px 0 5px;}
#marketing .cnt .details li .det h5 { text-align:center; color:#00A8E9; font-size:20px; letter-spacing:2px; line-height:1.4; margin-bottom:20px;}
#marketing .cnt .details li .det p {text-align:left;}

#about {background-size:cover;}
#about .cnt {width:100%; margin:0 auto;  text-align:left; color:#FFFFFF; }
#about .cnt .mask { background:url(../img/mask-about.png) repeat;margin-left:50%; padding:160px 0 160px 2%; width:48%;overflow:hidden;}
#about .cnt .block { width:90%; float:left; overflow:hidden;}
#about .cnt .block h2 { font-size:26px; letter-spacing:2px;}
#about .cnt .block h3 { font-size:18px; letter-spacing:1px; font-weight:normal; margin-bottom:20px;}
#about .cnt .block p { line-height:1.6; margin-bottom:1%;}
#about .cnt .block p.end { margin-bottom:20px;}
#about .cnt .block dl {overflow:hidden; width:100%; border-bottom:1px dotted #EFEFEF; padding-bottom:3px; margin-bottom:10px;}
#about .cnt .block dl dt { float:left; width:20%;}
#about .cnt .block dl dd { float:right; width:80%;}


#culture {background-size:cover;}
#culture .cnt {width:100%; margin:0 auto;  text-align:left; color:#FFFFFF; overflow:hidden;}
#culture .cnt .mask { background:url(../img/mask-culture.png) repeat;margin-right:50%; padding:160px 2% 160px 0; width:48%;overflow:hidden;}
#culture .cnt .block { width:90%; float:right;}
#culture .cnt .block h2 { font-size:26px; letter-spacing:2px;}
#culture .cnt .block h3 { font-size:18px; letter-spacing:1px; font-weight:normal; margin-bottom:20px;}
#culture .cnt .block p { line-height:1.6; margin-bottom:1%;}
#culture .cnt .block p.end { margin-bottom:20px;}
#culture .cnt .block dl {overflow:hidden; width:100%; border-bottom:1px dotted #EFEFEF; padding-bottom:3px; margin-bottom:10px;}
#culture .cnt .block dl dt { float:left; width:20%;}
#culture .cnt .block dl dd { float:right; width:80%;}

#recruit {background-size:cover;}
#recruit .cnt {width:100%; margin:0 auto;  text-align:left; color:#FFFFFF; overflow:hidden;}
#recruit .cnt .mask { background:url(../img/mask-recruit.png) repeat;margin-left:50%; padding:160px 0 160px 2%; width:48%;overflow:hidden;}
#recruit .cnt .block { width:90%; float:left; overflow:hidden;}
#recruit .cnt .block h2 { font-size:26px; letter-spacing:2px;}
#recruit .cnt .block h3 { font-size:18px; letter-spacing:1px; font-weight:normal; margin-bottom:20px;}
#recruit .cnt .block p { line-height:1.6; margin-bottom:1%;}
#recruit .cnt .block p.end { margin-bottom:30px;}
#recruit .cnt .block .btn { font-size:16px; margin-top: 20px;padding-top: 20px;overflow: hidden;height: 60px;}
#recruit .cnt .block .btn a { border:2px solid #fff;color: #fff; text-decoration:none; padding:10px 20px; overflow:hidden; height:60px;}
#recruit .cnt .block .btn a:hover {background-color: #fff;border-color: #59b1eb;color: #59b1eb;}
#recruit .cnt .block .btn a:hover::before, #recruit .cnt .block .btn a:hover::after {height: 0;background-color: #fff;-webkit-box-sizing: border-box;}
}


@media screen and (max-width: 847px) { /* SP Display - width:847px under - */

.spView {display:inline;}
.pcView {display:none;}
/*========================================
header
=======================================*/
.wrapper {margin-top: 10%;}
#header {width:100%;}
#header .inline { background:url(../img/bg-nav.png) repeat; padding:15px 2%;width:96%; position:fixed; z-index:500; top:0;}
#header .inline .Logo {float:left; width:50%;}
#header .inline .menu { float:right; width:20%;}
aside{display: none;box-sizing: border-box;width: 50%;height: 100%;padding: 60px 15px 15px;line-height: 42px;text-align: center;position: absolute;top: 0;left: 100%;z-index: 2;}
nav {background:url(../img/bg-nav.png) repeat;width: 100%;padding:15px 0;color: #ffffff;font-size: 16px; overflow:hidden; position:fixed; top:63px;}
nav li { text-align:left;padding-left: 5%;}

#menuButton {display: block;width: 42px;height:42px;position: fixed;top: 10px;right: 10px;z-index: 3;}
#menuButton span {display: block;background: #fff;width: 24px;height: 2px;position: absolute;left: 9px;transition: all 0.4s;-webkit-transition: all 0.4s;-moz-transition: all 0.4s;}
#menuButton span:first-child {top: 12px;}
#menuButton span:nth-child(2) {margin-top: -1px;top: 50%;}
#menuButton span:last-child {bottom: 12px;}
#menuButton.active span:first-child {-webkit-transform: translateY(8px) rotate(45deg);-moz-transform: translateY(8px) rotate(45deg);-ms-transform: translateY(8px) rotate(45deg);transform: translateY(8px) rotate(45deg);}
#menuButton.active span:nth-child(2) {opacity: 0;}
#menuButton.active span:last-child {-webkit-transform: translateY(-8px) rotate(-45deg);-moz-transform: translateY(-8px) rotate(-45deg);-ms-transform: translateY(-8px) rotate(-45deg);transform: translateY(-8px) rotate(-45deg);}


#MV {height:500px;margin-bottom:0; background-size:cover;}
#container {position: relative; z-index: 3; }
#MV h1 {text-align: center; width: 80%; margin: 0 10% 0; padding-top: 160px; z-index: 1500; position: absolute;}
#MV h1 img{ width:100%; height:auto;}
#MV .description { text-align: center; font-size: 110%; color: #ffffff;letter-spacing: 2px;width: 80%; margin: 60% 10% 0; z-index: 1500; position: absolute;}
video { display: block; }
video#bgvid { display:none;}


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

article

******************/
.wrapper {width: 100%;min-width:320px;}
#marketing {padding:5% 0;}
#marketing .cnt{ width:100%; margin:0 auto; overflow:hidden;}
#marketing .cnt h2 { text-align:center; font-size:20px; letter-spacing:2px; color:#5E5D5C; margin-bottom:10px;}
#marketing .cnt h3 { text-align:center; font-size:16px; letter-spacing:1px; color:#898989; margin-bottom:60px;}
#marketing .cnt .circle3 {width:90%; margin:0 auto 20px; height:140px;}
#marketing .cnt .circle3 li { float:left; width:33%;}
#marketing .cnt .circle3 li img{ width:100%; height:auto;}
#marketing .cnt .circle3 li .image, #marketing .cnt .circle2 li .image{ width:80%; padding:0 10%; text-align:center; margin-bottom:10px;}
#marketing .cnt .circle3 li p, #marketing .cnt .circle2 li p{ text-align:center; color:#898989; line-height:1.6; font-size:12px;}
#marketing .cnt .circle3 li p span{ line-height:3;}
#marketing .cnt .circle2 {width:60%; margin:0 auto 30px; height:160px;}
#marketing .cnt .circle2 li { float:left; width:50%;}
#marketing .cnt .circle2 li img{ width:100%; height:auto;}

#marketing .cnt .details {overflow:hidden; width:90%; margin:0 auto 60px;}
#marketing .cnt .details li {width:98%; float:left; background:url(../img/bg-details.png) repeat; padding:1%; margin-bottom:20px; }
#marketing .cnt .details li .det {background:#fff; padding:2%;min-height:80px;overflow: hidden;}
#marketing .cnt .details li:nth-child(2n) {float:left;}
#marketing .cnt .details li .det .image { width:20%; float:left; margin-top: 14%;}
#marketing .cnt .details li .det .image img { width:100%; height:auto; margin:0 auto;}
#marketing .cnt .details li .det .txt { float:right; width:74%; border-left:1px solid #D7D7D7; padding:2%;}
#marketing .cnt .details li .det h4 {text-align:left;padding:0; font-size:12px; border-top:none; border-top:none;}
#marketing .cnt .details li .det h5 {text-align:left;font-size:16px; letter-spacing:1px; line-height:1.4; margin-bottom:10px;}
#marketing .cnt .details li .det p {text-align:left;}

#about {background-size:cover;}
#about .cnt {width:100%; margin:0 auto;  text-align:left; color:#FFFFFF; }
#about .cnt .mask { background:url(../img/mask-about.png) repeat;margin-left:0; padding:10% 2%; width:96%;overflow:hidden;}
#about .cnt .block { width:96%; margin:0 auto; float:none; overflow:hidden;}
#about .cnt .block h2 { font-size:22px; letter-spacing:2px; text-align:left;}
#about .cnt .block h3 { font-size:16px; letter-spacing:1px; font-weight:normal;text-align:left; margin-bottom:20px;}
#about .cnt .block p { line-height:1.6; margin-bottom:1%;}
#about .cnt .block p.end { margin-bottom:20px;}
#about .cnt .block dl {overflow:hidden; width:100%; border-bottom:1px dotted #EFEFEF; padding-bottom:3px; margin-bottom:10px;}
#about .cnt .block dl dt { float:left; width:20%;}
#about .cnt .block dl dd { float:right; width:80%;}


#culture {background-size:cover;}
#culture .cnt {width:100%; margin:0 auto;  text-align:left; color:#FFFFFF; overflow:hidden;}
#culture .cnt .mask { background:url(../img/mask-culture.png) repeat;margin-right:0; padding:10% 2%; width:96%;overflow:hidden;}
#culture .cnt .block { width:96%; margin:0 auto; float:none; overflow:hidden;}
#culture .cnt .block h2 { font-size:22px; letter-spacing:2px;}
#culture .cnt .block h3 { font-size:16px; letter-spacing:1px; font-weight:normal; margin-bottom:20px;}
#culture .cnt .block p { line-height:1.6; margin-bottom:1%;}
#culture .cnt .block p.end { margin-bottom:20px;}
#culture .cnt .block dl {overflow:hidden; width:100%; border-bottom:1px dotted #EFEFEF; padding-bottom:3px; margin-bottom:10px;}
#culture .cnt .block dl dt { float:left; width:20%;}
#culture .cnt .block dl dd { float:right; width:80%;}

#recruit {background-size:cover;}
#recruit .cnt {width:100%; margin:0 auto;  text-align:left; color:#FFFFFF; overflow:hidden;}
#recruit .cnt .mask { background:url(../img/mask-recruit.png) repeat;margin-left:0; padding:10% 2%; width:96%;overflow:hidden;}
#recruit .cnt .block {width:96%; margin:0 auto; float:none; overflow:hidden;}
#recruit .cnt .block h2 { font-size:22px; letter-spacing:2px;}
#recruit .cnt .block h3 { font-size:16px; letter-spacing:1px; font-weight:normal; margin-bottom:20px;}
#recruit .cnt .block p { line-height:1.6; margin-bottom:1%;}
#recruit .cnt .block p.end { margin-bottom:30px;}
#recruit .cnt .block .btn { font-size:16px; margin-top: 20px;padding-top: 20px;overflow: hidden;height: 60px;margin: 0 auto; width: 70%;text-align: center;}
#recruit .cnt .block .btn a { border:2px solid #fff;color: #fff; text-decoration:none; padding:10px 20px; overflow:hidden; height:60px;}
#recruit .cnt .block .btn a:hover {background-color: #fff;border-color: #59b1eb;color: #59b1eb;}
#recruit .cnt .block .btn a:hover::before, #recruit .cnt .block .btn a:hover::after {height: 0;background-color: #fff;-webkit-box-sizing: border-box;}

#contents {width:100%;}
#contact-wrap{padding:80px 0 30px;; width:98%; min-width:98%; margin:0 auto;}
#contact-wrap h1 {text-align:center; font-size:20px; letter-spacing:2px; color:#5E5D5C; margin-bottom:20px;}
#contactForm-wrap{margin:0 2% 2%;}
#contactForm-wrap .sec p{margin:0 0 2%;}
#contactForm-wrap #btn-sendMail{margin:15% 0 0;}
#contactForm-wrap #btn-sendMail .btn{width:80%;}
#contactForm-wrap .sec textarea{width:90%;height:100px;padding:5%;font-size:16px;border:1px solid #cdcece;}
#contactForm-wrap .sec input{width:90%;height:46px;padding:0 5%;font-size:16px;line-haihgt:46px;border:1px solid #cdcece;}

.BackGr{width:100%; text-align:center; position:relative; z-index:100; margin:0 auto;}
.BackGr img{width:100%;text-align:center;margin:0 auto;}
.viewer {margin: 0 auto;width: 100%;height: auto;text-align: left;overflow: hidden;}
.viewer ul {width: 100%;height:auto; min-height: 530px;text-align: left;overflow: hidden;position: relative;}
.viewer ul li {top: 0;left: 0;width: 100%;height:auto;display: none;position: absolute;}
.viewer ul li img{ width:100%; height:auto;}

#RecMV { width:100%;padding:50px 0; margin-top:-30px;}
#RecMV .cnt { width:94%; margin: 10% auto 0;}
#RecMV .cnt .block { width:96%; float:none;padding:2%;}
#RecMV .cnt .block h1 { text-align:center;font-size:18px; margin-bottom:15px;}
#RecMV .cnt .block p {font-size:14px; margin-bottom:2%;}
#RecMV .cnt .block .Btns { width:100%; margin:0 auto; overflow:hidden;}
#RecMV .cnt .block .Btns .L-Btn {width:48%; height:43px;background-position: 90% 12px;}
#RecMV .cnt .block .Btns .R-Btn {width:48%; height:43px;background-position: 90% 12px;}

#Message {width:100%; padding:5% 0; margin:0 auto;}
#Message .Cnt{ width:96%; margin:0 auto; overflow:hidden;}
#Message .Cnt h2{font-size:20px;}
#Message .Cnt h2 span{font-size:12px;}
#Message .Cnt h3{font-size:18px; margin-bottom:4%;}
#Message .Cnt p{font-size:14px; margin-bottom:2%;}
#Message .Cnt .block { width:100%; overflow:hidden;}
#Message .Cnt .block .photo {float:none; width:100%; margin-bottom:1%}
#Message .Cnt .block .txt { float:none; width:96%; margin:0 auto; overflow:hidden}
#Message .Cnt .block .txt .gbox {padding:2%; width:96%; overflow:hidden; margin-bottom:15px;}

#NewComer { width:96%; background:#f4f4f4; padding:5% 2%; font-size:16px;}
#NewComer .Cnt{ width:100%; margin:0 auto 50px;}
#NewComer .Cnt h2{font-size:20px;}
#NewComer .Cnt h2 span{font-size:12px;}
#NewComer .Cnt h3{font-size:18px; margin-bottom:4%;}
#NewComer .Cnt p{font-size:14px; margin-bottom:2%;}
#NewComer .Cnt p.end{margin-bottom:50px;}
#NewComer .Photo{width:98%; margin:0 auto -8px; overflow:hidden;}
#NewComer .Photo img{ width:100%; height:auto;}
#NewComer .Det {width:98%; margin:0 auto; overflow:hidden; color:#fff; font-size:16px; line-height:1.4; text-align:center;}
#NewComer .Det p{ line-height:1.6; margin-bottom:15px; text-align:center;}
#NewComer .Det h4{ font-size:18px; margin-bottom:16px;}
#NewComer .Det ul{ overflow:hidden; width:100%; text-align:center;}
#NewComer .Det ul li{ float:left; width:100%;}
#NewComer .Det .Left{ padding:2%; width:96%; float:none;}
#NewComer .Det .Right{ padding:2%;width:96%; float:none;}

#MidCareer { width:100%; background:#fff; padding:5% 0; font-size:16px;}
#MidCareer .Cnt{ width:96%; margin:0 auto 50px;}
#MidCareer .Cnt h2{font-size:20px;}
#MidCareer .Cnt h2 span{font-size:12px;}
#MidCareer .Cnt h3{font-size:18px; margin-bottom:4%;}
#MidCareer .Cnt p{font-size:14px; margin-bottom:2%;}
#MidCareer .Cnt p.end{margin-bottom:50px;}
#MidCareer .Photo{width:98%; margin:0 auto 15px; overflow:hidden;}
#MidCareer .Photo img{ width:98%; height:auto;}
#MidCareer .Det {width:100%; margin:0 auto; overflow:hidden; color:#fff; font-size:16px; line-height:1.4; text-align:center;}
#MidCareer .Det p{font-size:14px; margin-bottom:2%;}
#MidCareer .Det h4{ font-size:18px; margin-bottom:16px;}
#MidCareer .Det .Left{ padding:2%;width:96%; float:none;}
#MidCareer .Det .Right{ padding:2%;width:96%; float:none;}

#RecInfo { width:100%; background:#f4f4f4; padding:5% 0; font-size:16px;}
#RecInfo .Cnt{ width:96%; margin:0 auto 60px;}
#RecInfo .Cnt h2{font-size:20px;}
#RecInfo .Cnt h2 span{font-size:12px;}
#RecInfo .Cnt dl { width:98%; font-size:14px;}
#RecInfo .Cnt dl.end {border-bottom:1px dotted #A0A0A0;}
#RecInfo .Cnt dl dt{padding:10px 0 0 0; float:left; width:100%; margin-right:0; text-align:left; font-weight:bold;}
#RecInfo .Cnt dl dd{padding:0 0 10px 0;float:left; width:100%; width:100%;}


#RecMV .cnt .block .Btns .L-Btn span { padding:0 10px 0;}
#RecMV .cnt .block .Btns .R-Btn span { padding:0 10px;}


#Entry { width:100%; background:#fff; padding:5% 0; font-size:16px;}
#Entry .Cnt{ width:96%; margin:0 auto;}
#Entry .Cnt h2{font-size:20px;}
#Entry .Cnt h2 spanh2 span{font-size:12px;}
#Entry .Cnt h3{font-size:18px; margin-bottom:4%;}
#Entry .Cnt { text-align:center; font-size:14px;}
.FootImg { width:100%; margin:0 0 -7px;}
.FootImg img{ width:100%; height:auto;}
.mask {background:url(../img/mask.png) repeat; position:relative;}

.MainVisual { width:100%; margin-top:-37px;}
.MainVisual img{ width:100%; height:auto;}
#contactForm-wrap .sec select{width:90%;height:46px;padding:0 5%;font-size:16px;line-haihgt:46px;border:1px solid #cdcece;}

}