/*青木工業CSS*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin: 0;padding: 0;font-size: 100%;font: inherit;font-weight: normal;vertical-align: baseline;
}/*border: 0;*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul ,li {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
a {text-decoration: none;}
img {max-width: 100%;height: auto;vertical-align: bottom;}
*,*::after,*::before{box-sizing: border-box;word-wrap: break-word;}/*CSS リセット*/
/*{border: solid 1px red;}*/
body{width: 100%;font-size:16px;font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo',sans-serif;background-color: black;color: white;}
/*ヘッダー*/
header{width: 100%;}
.he-box {width: 98%;margin-top: 16px;position: fixed;top: 0;left: 0;z-index: 100;display: flex;align-items: flex-end;}
.he-logo{width:40px;margin-left: 3%;}
.he-logo img{width:100%;height: auto;display: block;}
.he-box h1{margin-left: 5px;font-size: 1.2em;font-weight: bold;font-family: serif;color: #222222;text-shadow: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;}
/*ヘッダーメニュー*/
.he-menu {width:70%;margin: 30px 0 0 auto;padding-top: 30px;}
.he-menu ul {text-align: right;white-space: nowrap;}
.he-menu li {margin:0 0 0 3%;display: inline-block;}
.he-menu a{display: block;}
.menu-btn {width: 100%;margin: auto;color: white;font-weight: bold;}
.menu-btn2 {width: 100%;margin: auto;padding:10px;background: linear-gradient(45deg, silver 0%, #cccccc 45%, #eeeeee 70%, #dddddd 85%, #cccccc 90%, silver 100%);color: black;font-weight: bold;border-radius: 1px;}
.menu-btn:hover {color: #AFEEEE;}
.menu-btn2:hover {background-color: #AFEEEE;}
/*ホーム*/
.homebox {width: 100%;margin-top: 30px;position: relative;height: 400px;}
.ho-box1 {width: 100%;}
.ho-box1 img{width: 100%;height: 400px;object-fit: cover;}
/*複数画像を自動差し替え*/
.image {position: absolute;width: 100%;opacity: 0;animation: change-img-anim 15s infinite;}
.image:nth-of-type(1) {animation: change-img-anim 15s infinite;animation-delay: 0s;}
.image:nth-of-type(2) {animation-delay: 5s;}
.image:nth-of-type(3) {animation-delay: 10s;}
@keyframes change-img-anim {0%{ opacity: 0;}30%{ opacity: 0.8;}36%{ opacity: 0.8;}45%{ opacity: 0;}100%{ opacity: 0;}}
.ho-box2 {width: 100%;}
.ho-box2-p1 {position: absolute;top: 20%;left: 50%;
transform: translate(-50%,-50%);font-size: 2em;color: white;font-weight: bold;white-space: nowrap;}
.ho-box2-p2 {position: absolute;top: 35%;left: 50%;
transform: translate(-50%,-50%);font-size: 1.5em;color: white;font-weight: bold;white-space: nowrap;}
.ho-box2-p3 {position: absolute;top: 40%;left: 40%;
font-family: "Yu Mincho", serif;font-size: 3.5em;font-weight: 900;
color: transparent;background: linear-gradient(0deg, #b39855 0% 30%, #fff9e6 65%, #b39855 75% 100%);-webkit-background-clip: text;
-webkit-text-stroke: 1px #E6DAB8;
white-space: nowrap;animation: slideIn 1s ease-out;}
@keyframes slideIn {
0% {
transform: translateY(100%);opacity: 0;
}
100% {
transform: translateY(0);opacity: 1;
}
}
.ho-box2-p4 {position: absolute;top: 70%;left: 50%;
transform: translate(-50%,-50%);font-size: 1.8em;color: white;font-weight: bold;white-space: nowrap;}
.ho-box2-p5 {position: absolute;top: 80%;left: 50%;
transform: translate(-50%,-50%);font-size: 1.8em;color: white;font-weight: bold;white-space: nowrap;}
.ho-p1 {width: 100%;margin-top: 30px;font-size: 1.3em;color: white;font-weight: bold;text-align: center;}
/*ホーム2*/
.home2box {width: 100%;margin-top: 30px;display:flex;justify-content: center;}
.ho2-box1 {width:40%;margin: 2%;}
.ho2-box1-img1 {width:100%;height: auto;}
.ho2-box1-p2 {font-size: 1.5em;color: #0686b2;font-weight: bold;text-align: center;line-height: 2;
background: linear-gradient(45deg, silver 0%, #cccccc 45%, #eeeeee 70%, #dddddd 85%, #cccccc 90%, silver 100%);color: black;border-bottom: solid 3px #B67B03;}
.ho2-box1-p3 {margin: 10px;font-size: 1em;color: white;letter-spacing: 0.12em;line-height: 1.6;}
.ho2-box2 {width:40%;margin: 2%;}
.ho2-box2-img2 {width:100%;height: auto;}
.ho2-box2-p2 {font-size: 1.5em;color: #0686b2;font-weight: bold;text-align: center;line-height: 2;
background: linear-gradient(45deg, silver 0%, #cccccc 45%, #eeeeee 70%, #dddddd 85%, #cccccc 90%, silver 100%);color: black;border-bottom: solid 3px #B67B03;}
.ho2-box2-p3 {margin: 10px;font-size: 1em;color: white;letter-spacing: 0.12em;line-height: 1.6;}
/*業務内容*/
.ji-box{width: 100%;margin-top: 30px;padding-top: 30px;}
.ji-box1 {width: 100%;margin-top: 30px;}
.ji-box1 h2{width: auto;font-size: 2em;color: white;font-weight: bold;color: transparent;background: linear-gradient(0deg, #b39855 0% 40%, #fff9e6 65%, #b39855 75% 100%);-webkit-background-clip: text;}
.ji-box2{width: 100%;margin-top: 30px;display:flex;justify-content: center;}
.ji-box2-1 {width: 40%;margin: 3%;}
.ji-box2-1 h3 {font-size: 1.5em;color: white;font-weight: bold;text-align: center;line-height: 2;border-bottom: solid 3px #B67B03;}
.ji-box2-1 img {width: 100%;height: auto;margin-top: 30px;}
.ji-box2-1 p {margin: 10px;font-size: 1em;color: white;letter-spacing: 0.12em;}
.ji-box2-2 {width: 40%;margin: 3%;}
.ji-box2-2 h3 {font-size: 1.5em;color: white;font-weight: bold;text-align: center;line-height: 2;border-bottom: solid 3px #B67B03;}
.ji-box2-2 img {width: 100%;height: auto;margin-top: 30px;}
.ji-box2-2 p {margin: 10px;font-size: 1em;color: white;letter-spacing: 0.12em;}
.ji-box3{width: 100%;margin-top: 30px;display:flex;justify-content: center;}
.ji-box3-1 {width: 40%;margin: 3%;}
.ji-box3-1 h3 {font-size: 1.5em;color: white;font-weight: bold;text-align: center;line-height: 2;border-bottom: solid 3px #B67B03;}
.ji-box3-1 img {width: 100%;height: auto;margin-top: 30px;}
.ji-box3-1 p {margin: 10px;font-size: 1em;color: white;letter-spacing: 0.12em;}
.ji-box3-2 {width: 40%;margin: 3%;}
.ji-box3-2 h3 {font-size: 1.5em;color: white;font-weight: bold;text-align: center;line-height: 2;border-bottom: solid 3px #B67B03;}
.ji-box3-2 img {width: 100%;height: auto;margin-top: 30px;}
.ji-box3-2 p {margin: 10px;font-size: 1em;color: white;letter-spacing: 0.12em;}
.ka-box{width:100%;margin-top: 30px;padding-top: 30px;}
.ka-box1 {width: 100%;margin-top: 30px;}
.ka-box1 h2{width: auto;font-size: 2em;color: white;font-weight: bold;color: transparent;background: linear-gradient(0deg, #b39855 0% 40%, #fff9e6 65%, #b39855 75% 100%);-webkit-background-clip: text;}
.ka-box2 {width: 85%;margin: 30px auto 0 auto;}
.ka-box2-tr {width: 100%;border-bottom: solid 1px black;}
.ka-box2-th {width: 250px;padding: 15px 15px;font-size: 1em;color: black;text-align: left;white-space: nowrap;background: linear-gradient(45deg, silver 0%, #cccccc 45%, #eeeeee 70%, #dddddd 85%, #cccccc 90%, silver 100%);}
.ka-box2-td {width: 800px;padding: 15px 15px;font-size: 1em;color: black;text-align: left;white-space: nowrap;background: linear-gradient(45deg, silver 0%, #cccccc 45%, #eeeeee 70%, #dddddd 85%, #cccccc 90%, silver 100%);}
/*採用情報*/
.sa-box{width:100%;margin-top: 30px;padding-top: 30px;}
.sa-box1 {width: 100%;margin-top: 30px;}
.sa-box1 h2{width: auto;font-size: 2em;font-weight: bold;color: transparent;background: linear-gradient(0deg, #b39855 0% 40%, #fff9e6 65%, #b39855 75% 100%);-webkit-background-clip: text;}
.sa-box2 {width: 75%;margin: 0 auto;}
.sa-box2-p1 {margin: 30px auto;font-size: 1.8em;color: white;font-weight: bold;}
.sa-box2-p2 {margin: 10px auto;font-size: 1em;color: white;}
.sa-box3 {width: 100%;display: flex;justify-content: center;}
.sa-box3-1 {width: 35%;height: 100px;margin: 5%;background: linear-gradient(45deg, silver 0%, #cccccc 45%, #eeeeee 70%, #dddddd 85%, #cccccc 90%, silver 100%);line-height: 100px;border-radius: 3px;}
.sa-box3-1 p {font-size: 1em;text-align: center;}
.sa-box3-1 a {color: black;font-weight: bold;}
.sa-box3-1 a:hover {border-bottom: solid 3px #B67B03;}
.sa-box3-2 {width: 35%;height: 100px;margin: 5%;background: linear-gradient(45deg, silver 0%, #cccccc 45%, #eeeeee 70%, #dddddd 85%, #cccccc 90%, silver 100%);;border-radius: 3px;}
.sa-box3-2-p1 {margin-top: 18px;font-size: 1em;color: black;font-weight: bold;text-align: center;}
.sa-box3-2-p2 {font-size: 1.3em;color: white;font-weight: bold;text-align: center;}
.sa-box3-2-p2 a {color: #b39855;font-weight: bold;}
.sa-box3-2-p2 a:hover {border-bottom: solid 3px #B67B03;}
/*募集要項*/
.sa-box4 {width: 100%;margin-top: 30px;}
.sa-box4-p1{width: auto;margin: 0 auto 0 5%;font-size: 1.3em;color: #0686b2;font-weight: bold;}
.sa-box4-p2{width: auto;margin: 10px auto 0 5%;font-size: 1em;color: #00cccc;font-weight: bold;}
.sa-box5 {width: 85%;margin: 30px auto 0 auto;}
.sa-box5-tr {width: 100%;border-bottom: solid 1px black;}
.sa-box5-th {width: 250px;padding: 15px 15px;font-size: 1em;color: black;text-align: left;white-space: nowrap;background: linear-gradient(45deg, silver 0%, #cccccc 45%, #eeeeee 70%, #dddddd 85%, #cccccc 90%, silver 100%);}
.sa-box5-td {width: 900px;padding: 15px 15px;font-size: 1em;color: black;text-align: left;white-space: nowrap;background: linear-gradient(45deg, silver 0%, #cccccc 45%, #eeeeee 70%, #dddddd 85%, #cccccc 90%, silver 100%);}
.sa-box5 p {padding: 15px;font-size: 1.2em;color: white;font-weight: bold;text-align: center;}
/*アクセス*/
.ac-box {width:100%;margin-top: 30px;padding-top: 30px;}
.ac-box1 {width: 100%;margin-top: 30px;}
.ac-box1 h2{width: auto;font-size: 2em;font-weight: bold;color: transparent;background: linear-gradient(0deg, #b39855 0% 40%, #fff9e6 65%, #b39855 75% 100%);-webkit-background-clip: text;}
.ac-box2 {width: 90%;margin: 30px auto 0 auto;}
.ac-box2 iframe {width: 100%;aspect-ratio: 16/9;}
/*お問い合わせ*/
.co-box {width: 100%;margin-top: 30px;padding-top: 30px;}
.co-box1 {width: 100%;margin-top: 30px;}
.co-box1 h2{width: auto;font-size: 2em;color: white;font-weight: bold;color: transparent;background: linear-gradient(0deg, #b39855 0% 40%, #fff9e6 65%, #b39855 75% 100%);-webkit-background-clip: text;}
.co-box2 {width: 90%;margin: 30px auto 0 auto;}
.co-box2 p {font-size: 1.1em;font-weight: bold;}
.co-box2 span {font-size: 1.1em;font-weight: bold;}
/*footer*/
.footer{width: 100%;margin-top: 30px;padding-top: 1em;background: white;}
.footer-menu{width: 100%;}
.footer-menu ul {text-align: center;}
.footer-menu li {padding: 0 10px;display: inline-block;border-left: solid 1px black;}
.li-r {border-right: solid 1px black;}
.footer-menu li a {color: black;}
.footer-menu li a:hover {border-bottom: solid 1px #B67B03;}
.fo-box1 {width: 100%;text-align: center;}
.fo-box1 img {width: 200px;height: auto;}
.fo-box2 {width: 100%;color: black;margin: 1em 0;text-align: center;}
.fo-box3 {width: 100%;color: black;padding: 1em 0;text-align: center;}
/*文章の区切り*/
.aks {display: inline-block;}
.aks-b {display: inline-block;font-weight: bold;}
/*文字縁取り*/
.futisilver{text-shadow: 1px 1px 1px black, -1px -1px 1px black, 2px 0px 2px silver, 0px 2px 2px silver, -2px 0px 2px silver, 0px -2px 2px silver,0 0 5px #000000;}
.futiblack{text-shadow: 1px 1px 1px black, -1px -1px 1px black,-1px 1px 1px black, 1px -1px 1px black;}
.futimidori{text-shadow: 1px 1px 1px #003300, -1px -1px 1px #003300,-1px 1px 1px #003300, 1px -1px 1px #003300;}
.shadow-white{text-shadow:2px 2px 2px white,-2px 2px 2px white, 2px -2px 2px white,-2px -2px 2px white;}
/*文字左横からスライド*/
.slide-in {animation: slideIn 1s ease-out;}
@keyframes slideIn {
0% {transform: translateX(100%);opacity: 0;}
100% {transform: translateX(0);opacity: 1;}
}
/* PCとスマホの表示 */
@media (min-width: 650px){
.hamburger-menubox{display: none;}/*PC画面でハンガーメニュー非表示*/
}
@media (max-width: 650px){
.he-menu{display: none;}/*スマホ画面でヘッダーメニュー非表示*/
.footer-menu{display: none;}/*スマホ画面でフッダーメニュー非表示*/
/*ヘッダー*/
.homebox {margin-top: 90px;}
/*ホーム*/
.ho-box2-p1 {font-size: 2em;}
.ho-box2-p2 {font-size: 1.2em;}
.ho-box2-p3 {font-size: 3em;left: 18%;}
.ho-box2-p4 {font-size: 1em;}
.ho-box2-p5 {font-size: 0.9em;}
.ho-p1 {width: 100%;font-size: 1.1em;}
/*ホーム2*/
.home2box {display: block;}
.ho2-box1 {width:98%;margin: 60px 1% 1% 1%;}
.ho2-box2 {width:98%;margin: 60px 1% 1% 1%;}
/*事業内容*/
.ji-box2{display: block;}
.ji-box2-1 {width: 98%;margin: 60px 1% 1% 1%;}
.ji-box2-2 {width: 98%;margin: 60px 1% 1% 1%;}
.ji-box3{display: block;}
.ji-box3-1 {width: 98%;margin: 60px 1% 1% 1%;}
.ji-box3-2 {width: 98%;margin: 60px 1% 1% 1%;}
/*採用情報*/
.sa-box2 {width: 75%;margin: 0 auto;}
.sa-box2-p1 {font-size: 1.3em}
.sa-box3 {display: block;}
.sa-box3-1 {width: 70%;margin: 0 auto;}
.sa-box3-2 {width: 70%;margin: 0 auto;}
.sa-box3-2-p1 {padding-top: 18px;}
/*募集要項*/
.sa-box5 {width: 98%;margin: 30px auto 0 auto;}
.sa-box5-th {width: auto;padding: 15px 10px;}
.sa-box5-td {width: auto;padding: 15px 10px;white-space: normal;}
.sa-box5 p {padding: 15px;font-size: 1em;color: black;font-weight: bold;text-align: center;}
/*会社概要*/
.ka-box2 {width: 98%;margin: 30px auto 0 auto;}
.ka-box2-th {width: auto;padding: 15px 5px;}
.ka-box2-td {width: auto;padding: 15px 5px;white-space: normal;}
/*アクセス*/
/*お問い合わせ*/
.co-box2 {width: 90%;margin: 30px auto 20px auto;}
.co-box2 p {font-size: 1em;font-weight: bold;}
.co-box2 span {font-size: 1em;font-weight: bold;}
/*footer*/
.footer{margin-top: 60px;}
}