@charset "utf-8";
/* CSS Document */
/*  PC 1200px レスポンシブル設定は600px～ 1em = 16px */

#COMPANY section:nth-child(even){background: #fcfcfc;}


/* 会社情報 -------------------------------------------------------------------*/
#COMPANY article{background: rgba(255,255,255,1.0); border-bottom: 1px solid #ddd; padding-top: 50px;}


#COMPANY #Detail{text-align: center; }
#COMPANY #Detail section{margin: auto; padding: 50px 100px;}

@media screen and (max-width: 1200px) {
    #COMPANY #Detail section{margin: auto; padding: 50px 50px;}
}
@media screen and (max-width: 750px) {
    #COMPANY #Detail section{margin: auto; padding: 50px 50px;}
}

#COMPANY #Detail section dl,
#COMPANY #Detail section p{font-size: 1.2em; text-align: left;}
#COMPANY #Detail section ul li{font-size: 1.2em; text-align: left; text-indent: -1em; padding-left: 1em;}


#COMPANY #Detail h1{text-align: center; margin-bottom: 50px;}
#COMPANY #Detail h2{text-align: left;}
#COMPANY #Detail h3{text-align: left;}
#COMPANY #Detail h4{text-align: left;}



/* ハシバグループ概要 */
#COMPANY #Detail #detail_section_01{}
#COMPANY #Detail #detail_section_01 div{display: flex; flex-wrap: wrap;}
#COMPANY #Detail #detail_section_01 div dl{width: 70%; display: flex; flex-wrap: wrap; text-align: left; margin-bottom: 30px;}
#COMPANY #Detail #detail_section_01 div dl dt{width: 150px;}
#COMPANY #Detail #detail_section_01 div dl dd{width: calc(100% - 150px);}
#COMPANY #Detail #detail_section_01 div dl dt,
#COMPANY #Detail #detail_section_01 div dl dd{padding: 10px 0; border-bottom: 1px dotted #aaa;}
#COMPANY #Detail #detail_section_01 div p{width: calc(30% - 20px); padding: 20px 0 0 20px;}
#COMPANY #Detail #detail_section_01 div p img{display: block; width: 100%; height: auto; margin-bottom: 10px;}
@media screen and (max-width: 750px) {
    #COMPANY #Detail #detail_section_01 div dl{width: 100%;}
    #COMPANY #Detail #detail_section_01 div dl dt{width: 100%; font-weight: bold; padding: 10px 0 0; border: none;} 
    #COMPANY #Detail #detail_section_01 div dl dd{width: calc(100% - 0px);}
    #COMPANY #Detail #detail_section_01 div p{width: calc(100% - 0px); padding: 20px 0 0 0; text-align: center;}
    #COMPANY #Detail #detail_section_01 div p img{display: block; width: 80%; height: auto; margin: auto auto 30px;}
}

/* 沿革 */
#COMPANY #Detail #detail_section_02{}
#COMPANY #Detail #detail_section_02 dl{display: flex; flex-wrap: wrap; text-align: left; margin-bottom: 30px;}
#COMPANY #Detail #detail_section_02 dl dt{width: 100px;}
#COMPANY #Detail #detail_section_02 dl dd{width: calc(100% - 100px);}
#COMPANY #Detail #detail_section_02 dl dt,
#COMPANY #Detail #detail_section_02 dl dd{padding: 10px 0; border-bottom: 1px dotted #aaa;}

/* 設備情報 */
#COMPANY #Detail #detail_section_03{display: flex; flex-wrap: wrap;}
#COMPANY #Detail #detail_section_03 h2{width: 100%;}
#COMPANY #Detail #detail_section_03 table{border-collapse: collapse; width: 80%;}
#COMPANY #Detail #detail_section_03 table th{border: 1px solid #aaa; background: #ebebeb; padding: 4px 10px;}
#COMPANY #Detail #detail_section_03 table td{border: 1px solid #aaa; padding: 10px; background: #FFF;}
#COMPANY #Detail #detail_section_03 table td:nth-child(2),
#COMPANY #Detail #detail_section_03 table td:nth-child(3){text-align: left;}
#COMPANY #Detail #detail_section_03 div{width: calc(20% - 10px); margin-left: 10px; text-align: center;}
#COMPANY #Detail #detail_section_03 div img{width: 100%; height: auto; margin: auto;}
#COMPANY #Detail #detail_section_03 div p{margin-bottom: 20px; text-align: center;}

@media screen and (max-width: 750px) {
    #COMPANY #Detail #detail_section_03 table{width: 100%;}
    #COMPANY #Detail #detail_section_03 div{width: calc(100% - 0px); margin-left: 0px; padding: 20px;}
    #COMPANY #Detail #detail_section_03 div img{width: 80%; height: auto; margin: auto;}
}

/* SDGsにおける活動方針 */
#COMPANY #Detail #detail_section_04{}
#COMPANY #Detail #detail_section_04 div{display: flex; flex-wrap: wrap; align-items: center; width: 90%; margin: auto auto 30px;}
#COMPANY #Detail #detail_section_04 p{text-align: left;}
#COMPANY #Detail #detail_section_04 div img{width: 45%; height: auto;}
#COMPANY #Detail #detail_section_04 div p{width: 55%; font-size: 1.1em;}
#COMPANY #Detail #detail_section_04 dl{display: flex; flex-wrap: wrap; width: 83%; margin: auto auto 30px; font-size: 1.0em;}
#COMPANY #Detail #detail_section_04 dl dt{width: 120px; margin-bottom: 20px}
#COMPANY #Detail #detail_section_04 dl dd{width: calc(100% - 220px); text-align: left; padding-left: 40px;}
#COMPANY #Detail #detail_section_04 dl dd:nth-child(2) h3{margin-bottom: 20px; text-align: left; color: #ec6a06;}
#COMPANY #Detail #detail_section_04 dl dd:nth-child(4) h3{margin-bottom: 20px; text-align: left; color: #d39206;}
@media screen and (max-width: 750px) {
    #COMPANY #Detail #detail_section_04 div img{width: 100%; height: auto; margin: auto auto 10px;}
    #COMPANY #Detail #detail_section_04 div p{width: 100%;}
    #COMPANY #Detail #detail_section_04 dl dt{width: 100%; margin-bottom: 20px; text-align: center;}
    #COMPANY #Detail #detail_section_04 dl dt img{width: 40%; height: auto;}
    #COMPANY #Detail #detail_section_04 dl dd{width: calc(100% - 0px); text-align: center; padding-left: 0px;}
    #COMPANY #Detail #detail_section_04 dl dd:nth-child(2) h3{text-align: center!important;}
    #COMPANY #Detail #detail_section_04 dl dd:nth-child(4) h3{text-align: center!important;}
    #COMPANY #Detail #detail_section_04 dl dd p{font-size: 1em; margin-bottom: 30px; text-align: center;}
}
@media screen and (max-width: 500px) {
    #COMPANY #Detail #detail_section_04 dl{width: 90%;}
}


/* 品質環境方針 */
#COMPANY #Detail #detail_section_05{}
#COMPANY #Detail #detail_section_05 p{text-align: left; margin-bottom: 30px;}
#COMPANY #Detail #detail_section_05 ul{text-align: left;}
#COMPANY #Detail #detail_section_05 ul li{text-indent: -1em; padding-left: 1em; margin-bottom: 1em;}

/* 取り組み */
#COMPANY #Detail #detail_section_06{}
#COMPANY #Detail #detail_section_06 h2{font-weight: bold;}
#COMPANY #Detail #detail_section_06 div{display: flex; flex-wrap: wrap; margin-bottom: 30px;}
#COMPANY #Detail #detail_section_06 div p{width: 100%; margin-bottom: 10px;}
#COMPANY #Detail #detail_section_06 div div.img_area{width: calc(100% - 0px); margin-left: 0px; display: flex; }
#COMPANY #Detail #detail_section_06 div div.img_area img{width: auto; height: 200px; margin-right: 10px;}
@media screen and (max-width: 750px) {
    #COMPANY #Detail #detail_section_06 div div.img_area{text-align: center;}
    #COMPANY #Detail #detail_section_06 div div.img_area img{width: 70%; height: auto; margin: auto auto 10px auto;}
}

/* 福利厚生／社内行事 */
#COMPANY #Detail #detail_section_07{display: flex; flex-wrap: wrap;}
#COMPANY #Detail #detail_section_07 h2{width: 100%;}
#COMPANY #Detail #detail_section_07 ul:nth-child(2){width: 40%;}
#COMPANY #Detail #detail_section_07 ul:nth-child(2) li{margin-bottom: 1em;}
#COMPANY #Detail #detail_section_07 ul:nth-child(3){width: 60%; display: flex; flex-wrap: wrap; justify-content: center;}
#COMPANY #Detail #detail_section_07 ul:nth-child(3) li{width: 40%; margin-bottom: 10px;}
#COMPANY #Detail #detail_section_07 ul:nth-child(3) li img{width: 100%; height: auto;}
@media screen and (max-width: 750px) {
    #COMPANY #Detail #detail_section_07 ul:nth-child(2){width: 100%;}
    #COMPANY #Detail #detail_section_07 ul:nth-child(2) li{margin-bottom: 0.5em;}
    #COMPANY #Detail #detail_section_07 ul:nth-child(3){width: 100%; margin: auto;}
    #COMPANY #Detail #detail_section_07 ul:nth-child(3) li{width: 29%; margin-bottom: 10px;}
}

/* 採用情報 */
#COMPANY #Detail #detail_section_08{}
#COMPANY #Detail #detail_section_08 h2{}
#COMPANY #Detail #detail_section_08 p{font-size: 1.6em; margin-bottom: 1em;}
#COMPANY #Detail #detail_section_08 dl{display: flex; flex-wrap: wrap; margin-top: 50px; margin-bottom: 100px;}
#COMPANY #Detail #detail_section_08 dl dt{width: 50%;}
#COMPANY #Detail #detail_section_08 dl dt h3{font-size: 2.4em;}
#COMPANY #Detail #detail_section_08 dl dt h3 span:nth-child(1){display: block; padding-left: 50px;}
#COMPANY #Detail #detail_section_08 dl dt h3 span:nth-child(2){display: block; padding-left: 100px;}
#COMPANY #Detail #detail_section_08 dl dd{width: 50%; position: relative;}
#COMPANY #Detail #detail_section_08 dl dd img{width: 55%; height: auto;}
#COMPANY #Detail #detail_section_08 dl dd p:nth-child(2){font-size: 0.9em; position: absolute; top:50px; right: 0%;}
#COMPANY #Detail #detail_section_08 dl dd img:nth-child(3){position: absolute; top:150px; right: 0;}
#COMPANY #Detail #detail_section_08 dl dd p:nth-child(4){font-size: 0.9em; text-align: right; position: relative; top:145px; left: 0%;}

#COMPANY #Detail #detail_section_08 dl+h3{margin-bottom: 1em;}
#COMPANY #Detail #detail_section_08 dl+h3+div{text-align: left;}
#COMPANY #Detail #detail_section_08 dl+h3+div a{font-size: 1.2em; margin-right: 1em; text-decoration:underline;}
#COMPANY #Detail #detail_section_08 dl+h3+div+p{font-size: 1.6em; text-decoration:underline; padding-top: 0.5em;}

#COMPANY #Detail #detail_section_08 dl dt{font-family: 'Kaisei Tokumin', serif;
font-family: 'Yuji Syuku', serif;}


@media screen and (max-width: 1100px) {
    #COMPANY #Detail #detail_section_08 dl dt{width: 40%;}
    #COMPANY #Detail #detail_section_08 dl dt h3{font-size: 2.0em;}
    #COMPANY #Detail #detail_section_08 dl dt h3 span:nth-child(1){display: block; padding-left: 0px;}
    #COMPANY #Detail #detail_section_08 dl dt h3 span:nth-child(2){display: block; padding-left: 0px;}
    #COMPANY #Detail #detail_section_08 dl dd{width: 60%;}
}
@media screen and (max-width: 900px) {
    #COMPANY #Detail #detail_section_08 dl dt{width: 100%;}
    #COMPANY #Detail #detail_section_08 dl dt h3 span:nth-child(1){display: inline-block; padding-left: 50px;}
    #COMPANY #Detail #detail_section_08 dl dd{width: 100%; display: flex; flex-wrap: wrap;}
    #COMPANY #Detail #detail_section_08 dl dd img{width: 50%; height: auto; margin-top: 25px;}
    #COMPANY #Detail #detail_section_08 dl dd img:nth-child(3){position: relative; top:0px; right: 0;}
    #COMPANY #Detail #detail_section_08 dl dd{position: relative;}
    #COMPANY #Detail #detail_section_08 dl dd p:nth-child(2){position: absolute; top:0px; left: 0%;}
    #COMPANY #Detail #detail_section_08 dl dd p:nth-child(4){text-align: left; position: absolute; top:0px; left: 50%;}
}

@media screen and (max-width: 600px) {
    #COMPANY #Detail #detail_section_08 p{font-size: 1.2em; margin-bottom: 1em;}
    #COMPANY #Detail #detail_section_08 dl dt h3{font-size: 1.6em;}
    #COMPANY #Detail #detail_section_08 dl dt h3 span:nth-child(1){display: inline-block; padding-left: 16px;}
}
@media screen and (max-width: 550px) {
    #COMPANY #Detail #detail_section_08 dl dt h3 {text-align: center;}
    #COMPANY #Detail #detail_section_08 dl dt h3 span:nth-child(1){display: inline-block; padding-left: 0px;}
    #COMPANY #Detail #detail_section_08 dl dd img{width: 80%; height: auto; margin: auto;}
    #COMPANY #Detail #detail_section_08 dl dd p:nth-child(2){position: relative; top:0px; left: 0%; margin: auto auto 10px;}
    #COMPANY #Detail #detail_section_08 dl dd p:nth-child(4){text-align: left; position: relative; top:0px; left: 0%; margin: auto;}
}


/*

*/