/* RESET
===============================*/
*{ margin:0; padding:0; box-sizing:border-box; font-size:1em;}
*:focus{ outline: none;}
html{ height:100%;}
ul,ol{ list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img{ vertical-align:top; line-height:0; font-size:0; border:none; width:100%; max-width:100%; height:auto;}
body{vertical-align:baseline; line-height:1.5; background:transparent; font-family: "Yu Gothic", YuGothic, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, Roboto, "Lato", sans-serif; font-size:100%; text-rendering:optimizeLegibility; height:100%;}


/* all theme
===============================*/
.clearfix { zoom:1; }
.clearfix:after { content:'.'; display:block; height:0; clear:both; visibility:hidden;}

a, a:active{ text-decoration: none; color: #2d2d2d;}
a:hover,a:hover img{opacity:0.8; transition: 0.3s;}

#wrapper{ width: 100%; position: relative; color:#2d2d2d; overflow-x:hidden;}
main{ padding-bottom: 100px;}


/* header
===============================*/
header{ width: 100%; height: 60px; position: fixed; top: 0; left: 0; background: #fff; transition: 0.4s; box-shadow:0px 6px 11px -7px #ccc; z-index: 99;}
header #header_inner{ width: 100%; max-width: 1000px; margin: 0 auto; position: relative;}
header #logo{ display: inline-block; width: 300px; height: 0; padding-top: 30px; background: url("../img/logo.png") no-repeat; background-size: contain; margin-top: 15px;}
header nav{ position: absolute; right: 0; top: 15px; z-index: 9;}
header nav a{ color: #2d2d2d; margin-right: 15px;}
header nav a:last-child{ margin-right: 0;}

.header_index{ background: none; box-shadow: none;}
.header_index #logo{  background: url("../img/logo_wh.png") no-repeat; background-size: contain;}
.header_index nav a{ color: #fff;}

#nav_btn{ display: none;}


/* main_img
===============================*/
/*#main_img{ background: url("../img/top_01.jpg") no-repeat; background-attachment: fixed; background-size: 100% auto; padding-top: 63.25%;}*/
video{ width: 100%; position: relative; top: 0; left: 0;}



/* section
===============================*/
section{ padding: 50px 0 0;}
section:last-child{ padding-bottom: 50px;}
section h2{ font-size: 3.5em; font-family: "Cinzel"; font-weight: 700; text-align: center; margin-bottom: 30px;}
.sec_inner{ width: 96%; max-width: 1000px; margin: 0 auto;}

/*servise*/
#servise{ margin-bottom: 80px;}
#servise h3{ font-family:Cinzel; font-weight: 700; font-size: 35px; margin-bottom: 27px;}
#servise h3 span{ font-weight: normal; font-size: 15px; display: block; line-height: 0.8;}
#servise_consul{ margin-bottom: 40px;}
#servise_consul, #servise_system{ background: #fff;}
#servise_consul ,#servise_system { position: relative; opacity: 0.7;}
#servise_consul h3{ position: absolute; top: 80px; left: 40px;}
#servise_consul p{ width: 40%; position: absolute; top: 170px; left: 40px;}
#servise_system h3{ position: absolute; top: 80px; right: 40px;}
#servise_system p{ width: 40%; position: absolute; top: 170px; right: 40px;}


/*works
#works{ background: #191c2a; padding:50px 0 120px;}
#works h2{ color: #fff;}
figure{ width: 32%; display: block; float: left; position: relative; overflow: hidden;}
figure:nth-of-type(even){ margin: 0 2%;}
figure{ display: block;}
figcaption{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.6); opacity: 0; color: #fff;}
figcaption h3, figcaption p{ width: 100%; position: absolute; bottom: -100%; transition: .5s; text-align: center;}
figcaption h3{ font-size: 1.3em;}
figcaption h3:after{ content: " 讒�"; font-size: 0.8em;}
figure:hover figcaption{ opacity: 0.7;}
figure:hover figcaption h3{ bottom: 120px; -webkit-transition-delay: .1s; transition-delay: .1s;}
figure:hover figcaption p{ bottom: 90px; -webkit-transition-delay: .3s; transition-delay: .3s;}*/


/*company*/
#company{ background: #d8dee4; margin: 0; padding: 50px 0 50px;}
#company table{ width: 100%; max-width: 500px; margin: 0 auto;}
#company table th{ padding-bottom: 14px;}
#company table td{ border-bottom: 1px dashed #c7ccd2; padding: 7px 0;}
#company table td:first-child{ width: 100px;}


/*section_04*/
#message p{ line-height: 1.8;}


/*recruitment*/
#recruit{ background: url("../img/OB82160.jpg") no-repeat; background-attachment: fixed; background-size: cover; margin-top: 80px; position: relative; height: 70vh;}
#recruit::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.3);}
#recruit .sec_inner div{ position: absolute; width: 100%;}
#recruit h2{ text-align: left; margin-bottom: 50px;}
#recruit h2 span{ display: block; font-size: 0.4em; font-weight: normal; line-height: 0.1;}
#recruit p{ margin-bottom: 30px;}
#recruit em{ font-style: normal; font-size: 1.5em; display: block;}
#recruit a{ display: block; text-align: center; border: 1px solid #000; padding: 10px 0; width: 180px; margin: 50px 0 0;}
#recruit a:hover{ background: rgba(255, 255, 255, 0.2);}


/* contact
===============================*/
#contact{ margin: 0; padding: 100px 0 150px; background: #c5d1de url("../img/paper_airplane.png") no-repeat 20% 70%; background-size: 400px;}
#contact h2{ margin-bottom: 10px; text-align: right; color: #646a71;}
#contact .left{ width: 40%; float: left; text-align: right; color: #646a71;}
#contact .left p{ font-size: 0.7em;}
#contact p.bd{ font-size: 1em; margin-top: 30px;}
#contact p.bd em{ font-style: normal; font-size: 1em; display: block; font-weight: bold;}
#contact .right{ width: 50%; float: right;}
#contact input, #contact textarea{ width: 100%; border: 1px solid #646a71; background: none; padding: 7px; margin-bottom: 10px; font-size: 0.8em}
#contact textarea{ height: 300px; resize: none;}
#contact .send_btn{ background: #191c2a; color: #fff; padding: 10px 0;}
#contact .send_btn:hover{ cursor: pointer; opacity: 0.7; transition: .3s;}


/* complete
===============================*/
#complete{ padding: 100px 0 0; min-height: 100vh;}
#complete .sec_inner:first-of-type{ border: 1px solid #ccc; background: #f2f2f2; padding: 50px 10px; text-align: center;}
#complete h2{ font-size: 45px;}
.note_tex{ color: #AC0009; font-size: 0.8em; margin-top: 50px;}



/* recruitement form
===============================*/
#recruit_page{ width: 96%; max-width: 550px;  margin: 0 auto; padding-top: 100px;}
#recruit_page li:nth-child(odd){ font-weight: bold; display: flex; align-items: center;}
#recruit_page li:nth-child(odd):after{ border-top: 1px solid #ccc; content: ""; flex-grow: 2; margin-left: 7px;}
#recruit_page li:nth-child(even){ font-size: 0.8em; margin-bottom: 12px;}
#app_form h2{ font-size: 2.5em;}
#app_form p{ font-size: 0.9em; margin-bottom: 10px;}
#app_form p span{ color:#B30306; display: block;}
#app_form input,#app_form textarea{ width: 100%; padding: 7px; font-size: 0.9em; margin-bottom: 10px;}
#app_form textarea{ height: 200px; resize: none;}
#app_form .send_btn{ background: #191c2a; color: #fff; padding: 10px 0;}
#app_form .send_btn:hover{ cursor: pointer; opacity: 0.7; transition: .3s;}


/* policy
===============================*/
#security{ padding-top: 100px;}
#privacy{ padding: 100px 0 150px;}
#security h2,#privacy h2{ font-size: 2.5em;}
#security p,#privacy p{ font-size: 0.9em;}
#security .right,#privacy .right{ text-align: right; margin-bottom: 20px;}
#privacy div{ margin-top: 40px;}
#privacy div h3{ font-weight: 700; font-size: 1.2em;}
#privacy div h3 + p{ margin: 20px 0;}
.count{ counter-reset: count; margin-top: 20px; font-size: 0.9em;}
.count li{ position: relative; padding-left: 1em; margin-bottom: 10px;}
.count li:before{counter-increment: count; content: counter(count)"."; position: absolute; left: 0;}
.count li > .bracket_count{ font-size: 1em; margin: 15px 0 25px;}
.bracket_count{ counter-reset: count; font-size: 0.9em;}
.bracket_count li{ position: relative; padding-left: 1.7em; margin-bottom: 10px;}
.bracket_count li:before{ counter-increment: count; content: '('counter(count)')'; position: absolute; left: 0;}






/* page_top
===============================*/
#page_top{ width: 50px; height: 50px;position: fixed; right: 20px; bottom: 105px; display: block; background: #003366; border-radius: 50%; z-index: 98; text-align: center;}
#page_top i{ font-size: 3em; color: #fff;}


/* footer
===============================*/
footer{ position:absolute; bottom: 0; text-align: center; width: 100%;}
footer a{ display: inline-block; font-size: 0.9em; margin-bottom: 5px; color: #fff;}
footer a{ margin-right: 10px;}
footer a:last-of-type{ margin-right: 0;}
footer a:after{ content: "|"; margin-left: 10px;}
footer a:last-of-type:after{ content:none; margin-left: 0;}
#footer_bg{ background: #003366; padding-top: 15px;}
footer p{color:#CFE7FF; font-size: 0.8em; padding: 15px 0;}


/* effect
===============================*/
.fadeIn_y{ animation: effect_y 2s both; -webkit-animation: effect_y 1s both; opacity: 1; transition: .5s;}
@keyframes effect_y{0%{ transform: translateY(-80px);} 100% {opacity:1; transform: translateY(0);}}
@-webkit-keyframes effect_y{0%{ transform: translateY(-80px);} 100% {opacity:1; transform: translateY(0);}}

.fadeIn_x{ animation: effect_x 2s both; -webkit-animation: effect_x 1s both; opacity: 1; transition: .5s;}
@keyframes effect_x{0%{ transform: translateX(-80px);} 100% {opacity:1; transform: translateY(0);}}
@-webkit-keyframes effect_x{0%{ transform: translateX(-80px);} 100% {opacity:1; transform: translateY(0);}}



/* under 768px
===============================*/
@media all and (max-width: 768px) {
/*header*/
header{ transition: top 0.65s ease-in; height: 40px;}
header #header_sp{ position: relative; background: #fff;}
header #logo{ margin-left: 2%; width: 220px; padding-top: 22px; margin-top: 10px;}
header nav{ top: -500px; background-image: linear-gradient(to bottom, #333333, #2f2f2f, #2a2a2a, #262626, #222222); width: 100%; padding-top: 10px; transition: .5s ease-in-out; z-index: -5;}
header nav a{ display: block; padding-bottom: 10px; text-align:center; color: #ccc;}
#nav_btn{ display: block; position: absolute; top: 7px; right: 2%; border: 0; background-color: transparent; z-index: 1;}
#nav_btn span{ width: 35px; height: 4px; display: block; background: #003366 !important; border-radius: 2px; transition: .35s ease-in-out;}
#nav_btn span + span{ margin-top: 7px;}
/*Animate accordion*/
header.open nav{ transform: translateY(540px);}
header.open span:nth-child(1){ margin-top:10px;  transform: rotate(45deg);}
header.open span:nth-child(2){ opacity: 0;}
header.open span:nth-child(3){ position: absolute; top: 2px; transform: rotate(-45deg);}

main{ padding-top: 40px;}

/*section*/
section h2{ font-size: 3em;}

/*servise*/
#servise_consul h3, #servise_system h3{ top: 30px;}
#servise_system h3{ line-height: 1;}
#servise_consul p, #servise_system p{ width: 70%; top: 120px;}

/*message*/
#message p{ font-size: 0.8em;}

/*recruitment*/
#recruit h2 span{ font-size: 0.35em;}
#recruit p{  font-size: 0.8em;}
#recruit a{ font-size: 0.8em; margin-top: 80px;}

/*contact*/
#contact{ padding-top: 50px; background-position: 90% 10%; background-size: 400px;}
#contact h2{ text-align: left;}
#contact .left{ width: 100%; float: none; text-align: left;}
#contact .right{ width: 100%; float: none; margin-top: 30px;}
#contact input, #contact textarea{ width: 100%; border: 1px solid #646a71; background: none; padding: 7px; margin-bottom: 10px; font-size: 0.8em}
#contact textarea{ height: 300px; resize: none;}
#contact .send_btn{ background: #191c2a; color: #fff; padding: 10px 0;}
#contact .send_btn:hover{ cursor: pointer; opacity: 0.7; transition: .3s;}
}

.pb50 { padding-bottom: 50px}
#special {
  margin-top: -1em;
  padding: 50px 0;
  background: #fbe7e8;
}
#special img{
  max-width: 1000px;
  width: 90%;
  margin: auto;
  display: block;
  box-shadow: 1px 1px 5px rgb(0,0,0,.1), 3px 3px 15px rgb(0,0,0,.2);
}

/* under 600px
===============================*/
@media all and (max-width: 600px) {
/*section*/
section h2{ font-size: 2.5em;}
/*servise*/
#servise_consul h3{ top: 20%; left: 3%;}
#servise_system h3{ top: 20%; left: 3%;}
#servise_consul p, #servise_system p{ width: 100%; position: static; margin-top: 20px;}
#recruit{ background: url("../img/OB82160_sp.jpg") no-repeat; background-size: cover; background-attachment: fixed;}
/*contact*/
#contact{ background-size: 200px;}
/*page top*/
#page_top{ width: 30px; height: 30px;}
#page_top i{ font-size: 1.5em; margin-top: 1px;}
}