@charset "utf-8";
/* CSS Document */
/* 大枠1800, 内枠1600　*/
/* レスポンシブル設定は850px～ 1em = 16px*/

html{scroll-behavior: smooth; overflow-x: hidden;}

article{/*overflow: hidden;*/}
/*section{max-width: 1600px; width: 100%;}*/

article{max-width: 1800px; width:100%; margin: auto; background: #FFF;}
#contents{max-width: 1800px; width:100%; margin: auto; background: #FFF; /*border: 1px solid #ccc;*/}
@media screen and (max-width: 1100px) {
    #contents{margin: 90px auto 0;}
}


/* TOPビジュアル */
section#top_visual{max-width: 1500px; width: 100%; background: /*#FFFF99*/#f1fbf2; position: relative; height: 600px;margin: auto;}
/*
section#top_visual:before{content: ""; background: #f1fbf2; width: 100vw; height: 100%; position: absolute; left: -100vw;}
section#top_visual:after{content: ""; background: #f1fbf2; width: 100vw; height: 100%; position: absolute; right: -100vw; top:0;}*/

section#top_visual img{position: absolute; width: auto; height: 700px; left: 0; top:0; z-index: 1;}
section#top_visual h1{font-size: 35px; font-weight: 800; line-height: 120%;}
section#top_visual h1{position: relative; z-index: 2; top:62%; left: -100px; /*background: #1cbb10;*/ background: rgba(28,187,16,0.8); color: #FFF; text-align: left; width: 780px; padding: 30px 20px 30px 150px;}

@media screen and (max-width: 1500px) {
    section#top_visual{height: auto;}
   
    section#top_visual img{position: relative; width: 100%; height: auto; left: 0; top:0; z-index: 1;}
    section#top_visual h1{position: absolute; top:50%; left: 0px; width: 485px; text-align: left; padding: 30px 20px 30px 50px;}
     /*
    section#top_visual h1{width: 100%; padding: 30px 20px; top:-6px; left: 0;}
    section#top_visual h1 br{display: none;}
    */
}
@media screen and (max-width: 1150px) {
    section#top_visual h1{position: relative;width: 100%; padding: 30px 20px; top:-6px; left: 0;}
    section#top_visual h1 br{display: none;}
}
@media screen and (max-width: 800px) {
    section#top_visual h1{width: 100%; padding: 20px 20px; top:-6px; left: 0;}
    section#top_visual h1{font-size: 30px; font-weight: 800; line-height: 120%;}
}


/* 私たちの会社 our_company */
section#our_company{max-width: 1500px; width: 100%; background: #f1fbf2; position: relative; height: auto; margin: auto; padding: 100px 0;}
section#our_company:before{content: ""; background: #f1fbf2; width: 100vw; height: 100%; position: absolute; left: -100vw; top:0;}
section#our_company:after{content: ""; background: #f1fbf2; width: 100vw; height: 100%; position: absolute; right: -100vw; top:0;}
section#our_company h2{width: 100%; font-weight: 400; text-align: center; margin: 50px auto 50px;}

section#our_company .youtube {max-width: 720px; width: 90%; height: auto; margin: auto;}
section#our_company .youtube iframe{width: 100%; aspect-ratio: 16 / 9;}

@media screen and (max-width: 1500px) {
    section#our_company{position: relative; height: auto; margin: auto; padding: 50px 0;}
    section#our_company h2{width: 100%; font-weight: 400; text-align: center; margin: auto auto 50px;}
    
}


/* Message */
section#Message{max-width: 1200px; width: 100%; background: #FFF; position: relative; height: auto; margin: auto; padding: 70px 20px ; display: flex; justify-content: center; align-items:flex-end; flex-wrap: wrap;}
section#Message h2{width: 100%; font-weight: 400; text-align: center; margin: auto auto 50px;}
section#Message div{width: 60%; text-align: left; position: relative; padding-top: 70px;}
section#Message div p{margin-bottom: 2em; line-height: 120%;}
section#Message div p:first-child{position: absolute; top:0px; width: 200%; z-index: 3;}
section#Message div p:last-child{margin-bottom: 0;}
section#Message img{width: calc(40% - 20px); height: auto; object-fit: cover; border-radius: 12px; margin-left: 20px; position: relative; top:20px; z-index: 2;}
@media screen and (max-width: 850px) {
    section#Message div{width: 100%; padding-top: 0px;}
    section#Message div p:first-child{position: relative; top:0px; width: 100%;}
    section#Message img{width: calc(70% - 0px); height: auto; object-fit: cover; border-radius: 12px; margin: 30px auto auto;}
}
@media screen and (max-width: 500px) {
    section#Message img{width: calc(90% - 0px);}
}


/* 数字で見る大塚精工 */
section#Otsuka_Seiko_in_Numbers{max-width: 1100px; width: 100%; background: #f1f3fb; position: relative; margin: auto; padding: 50px 50px;}
section#Otsuka_Seiko_in_Numbers:before{content: ""; background: #f1f3fb; width: 100vw; height: 100%; position: absolute; left: -100vw; top:0;}
section#Otsuka_Seiko_in_Numbers:after{content: ""; background: #f1f3fb; width: 100vw; height: 100%; position: absolute; right: -100vw; top:0;}
section#Otsuka_Seiko_in_Numbers h2{width: 100%; font-weight: 400; text-align: center; margin: auto auto auto;}
section#Otsuka_Seiko_in_Numbers h2 + p{width: 100%; text-align: center; margin: auto auto 50px;}

section#Otsuka_Seiko_in_Numbers ul{width: 100%; display: flex; flex-wrap:wrap; justify-content: space-between;}
section#Otsuka_Seiko_in_Numbers ul li{width: 32%; padding: 30px 0; border: 3px solid #99cc00; margin-bottom: 20px; background: #FFF; }

section#Otsuka_Seiko_in_Numbers ul li b{font-size: 120px; font-weight: 800; color: #1733bf; line-height: 100%; letter-spacing: 0.4rem;}
section#Otsuka_Seiko_in_Numbers ul li b{-webkit-text-stroke: 8px #1733bf; text-stroke: 8px #1733bf; paint-order: stroke;}
section#Otsuka_Seiko_in_Numbers ul li b small{font-size: 16px; font-weight: bold; color: #222; letter-spacing: 0rem;}
section#Otsuka_Seiko_in_Numbers ul li b small{-webkit-text-stroke: 0px #222; text-stroke: 0px #222; paint-order: stroke;}

section#Otsuka_Seiko_in_Numbers ul li h3{font-size: 18px; font-weight: bold; color: #99cc00; }
section#Otsuka_Seiko_in_Numbers ul li p{font-size: 12px; font-weight: bold; width: calc(100% - 20px); margin: auto 10px; line-height: 120%;}

section#Otsuka_Seiko_in_Numbers ul li:nth-child(n+7){padding: 10px 0;}
section#Otsuka_Seiko_in_Numbers ul li img{width: 70%; height: auto; margin: auto;}
section#Otsuka_Seiko_in_Numbers ul li:last-child{position: relative; z-index: 1; /*padding-top: 218px;*/}
section#Otsuka_Seiko_in_Numbers ul li:last-child img{position: relative; top:0; left: -50px; z-index: 2; width: calc(100% + 95px); height:auto;}

section#Otsuka_Seiko_in_Numbers ul + p{font-size: 12px; font-weight: bold; text-align: right;}

@media screen and (max-width: 850px) {
    section#Otsuka_Seiko_in_Numbers ul{justify-content: space-around;}
    section#Otsuka_Seiko_in_Numbers ul li{width: 48%;}
    section#Otsuka_Seiko_in_Numbers ul li b{font-size: 90px;}
}
@media screen and (max-width: 500px) {
    section#Otsuka_Seiko_in_Numbers ul li{width: 90%;}
    section#Otsuka_Seiko_in_Numbers ul li b{font-size: 80px;}
}


/* 募集要項 info_recruit */
section#info_recruit{max-width: 1200px; width: 100%; background: #FFF; position: relative; margin: auto; padding: 50px 50px;}
/*
section#info_recruit:before{content: ""; background: #FFF; width: 100vw; height: 100%; position: absolute; left: -100vw; top:0;}
section#info_recruit:after{content: ""; background: #FFF; width: 100vw; height: 100%; position: absolute; right: -100vw; top:0;}
*/

section#info_recruit h2{width: 100%; margin: auto auto 50px; padding-bottom: 20px; border-bottom: 3px solid #99cc00;}
section#info_recruit dl{width: 80%; margin: auto; display: flex; flex-wrap:wrap; }
section#info_recruit dl dt{width: 100%; font-weight: bold; color: #1733bf; text-align: left;}
section#info_recruit dl dd{width: 100%; text-align: left; border-bottom: 1px solid #222; padding: 20px 0px; margin-bottom: 20px;}
section#info_recruit dl dd{position: relative;}
section#info_recruit dl dd:before{content: ""; background: #222; width: 30px; height: 1px; position: absolute; left: -30px; bottom:-1px;}
section#info_recruit dl dd:after {content: ""; background: #222; width: 30px; height: 1px; position: absolute; right: -30px; bottom:-1px;}

section#info_recruit dl dd ul.indent li{text-indent: -1em; padding-left: 1em;}

section#info_recruit dl dd div{width: 100%; display: flex; margin-bottom: 20px;}
section#info_recruit dl dd div p{width: 100px; text-align: left; position: relative; left: -10px;}
section#info_recruit dl dd div ul{width: calc(100% - 100px);}


section#info_recruit dl dt.flex_dt{width: 100px;}
section#info_recruit dl dd.flex_dd{width: calc(100% - 100px); padding: 0 0 20px 0px;}
section#info_recruit dl dd.flex_dd:before{content: ""; background: #222; width: 130px; height: 1px; position: absolute; left: -130px; bottom:-1px;}

section#info_recruit dl dd:last-child{padding-bottom: 100px;}

@media screen and (max-width: 700px) {
    section#info_recruit dl dd div{width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 20px;}
    section#info_recruit dl dd div p{width: 100%; text-align: left; position: relative; left: -10px;}
    section#info_recruit dl dd div ul{width: calc(100% - 0px);}
    
    section#info_recruit dl dt.flex_dt{width: 100%;}
    section#info_recruit dl dd.flex_dd{width: calc(100% - 0px); padding: 0 0 20px 0px;}
    
}




/* 採用情報　フッタ */
footer div{width: 100%; background: #FFF; padding: 100px 0 50px;}
footer div p{width:fit-content; text-align: center; color: #1cbb10; font-weight: bold; font-size: 22px; position: relative; margin: auto auto 50px;}
footer div p{-webkit-text-stroke: 1px #1cbb10; text-stroke: 1px #1cbb10; paint-order: stroke;}


footer div p:before{content: ""; display: block; width: 2px; height: 40px; background: #1cbb10; position: absolute; top:0px; left: -20px; transform:rotate(-25deg);}
footer div p:after{content: ""; display: block; width: 2px; height: 40px; background: #1cbb10; position: absolute; top:0px; right: -20px; transform:rotate(25deg);}
footer div span{display: block; font-size: 0; text-align: center;}
footer div span img{width: 260px; height: auto; margin: auto;}
footer div span img:hover{pointer-events: none; opacity: 1;}

footer div + p{padding: 50px 50px 0; font-size: 12px;}

@media screen and (max-width: 1100px) {
    footer div + p{width: 100%; background: #1cbb10; color: #FFF; padding: 50px 0; font-size: 12px;}
}
@media screen and (max-width: 500px) {
    footer div p{font-size: 18px;}
    footer div span img{width: 70%; height: auto; margin: auto;}
}
@media screen and (max-width: 400px) {
    footer div p{font-size: 16px;}
}



