@charset "UTF-8";
/*スマホ用
----------------------------------*/
/*@media only screen and (max-width: 1035px) {
  .FEATURE-box .text {width: 100%;}
.FEATURE-box .right {width: 100%;}
.FEATURE-box .left {width: 100%;}  
}*/

@media only screen and (max-width: 1000px) {

header .head {background: #fff;}
header .read {font-size: 20px;}
header .contents {display: none;}
header .sp-logo-box {display: block;}
header .sp-logo-box h1 {width: 100%; text-align: center; padding: 40px 0; background: #2f373a;}
header .slide-area {padding: 0; background-size: 310%; height: 100vh; animation: none;}
header .slide-area .read {top: 175px;}
.scroll {bottom: 15%;}
.scroll img {width:35px;}
.contents ul.NEWS-area li span {margin-bottom: 15px; display: block;}
.contents {width: 90%; margin:0 5%;}
br.sp-br {display: block;}
.sp-zone {display: block;}
.pc-zone {display: none;}

header h1.sp-index-logo {width: 100%; position: absolute; float: none; z-index: 999; text-align: center; padding: 100px 0;}
header .sp-navi {display: block;}














/*btn-navi*/
.Btn-navi {padding: 10px 5px; right: 10px; bottom: 13%; position: fixed; background: #1685b7; width: 40px; display:block; line-height:1em; z-index:9999; transition: .3s;}
.Btn-navi .name {font-weight: bold; position: relative; bottom: -25px; vertical-align:middle; text-align:center; color:#ffffff; font-size:7.3px; line-height: 1em; }
.Btn-navi .menuBtn {display: inline-block; position: relative; width: 40px; height:30px;}
.menu-icon {display: block; position: absolute; top: 20%; left: 50%; width: 24px; height: 2px; margin: -1px 0 0 -12px; background: #ffffff; transition: .2s;}
.menu-icon:before,.menu-icon:after {display: block; content: ""; position: absolute; top: 50%; left: 0; width: 24px; height: 2px; background: #ffffff; transition: .3s;}
.menu-icon:before {margin-top: -8px;}
.menu-icon:after {margin-top: 6px;}
.menuBtn:hover .menu-icon:before {margin-top: -10px;}
.menuBtn:hover .menu-icon:after {margin-top: 8px;}
.Btn-navi.close .name { color:#ffffff; overflow: hidden; left: 0px; width: 100%; font-size: 7.3px; line-height: 10px; text-align: center; font-weight: bold; height: 8px;}
.Btn-navi.close .name:before {display: block; content: 'CLOSE'; overflow: hidden; margin-right: 20px: }
.Btn-navi.close .menu-icon:before,.Btn-navi.close .menu-icon:after {background: #ffffff;}
.Btn-navi.close .menuBtn .menu-icon {background: transparent;}
.Btn-navi.close .menuBtn .menu-icon:before, .Btn-navi.close .menuBtn .menu-icon:after {margin-top: 0;}
.Btn-navi.close .menuBtn .menu-icon:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.Btn-navi.close .menuBtn .menu-icon:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
#mainhead .Btn-navi{ position: absolute; left:5px; top:5px; }
#mainhead .Btn-navi.close { opacity: 0; display: none;}
#fixBtn-navi {position: fixed;  width: auto; bottom: 20px; right:15px;}
#fixBtn-navi.Btn-navi .menuBtn { display: block; background-color:#333; border-radius: 10px; padding:10px 0px 0px;}
#fixBtn-navi.Btn-navi .menuBtn .menu-icon {margin-top: -6px;}
#fixBtn-navi .menu-icon,#fixBtn-navi .menu-icon:before,#fixBtn-navi .menu-icon:after {background-color: #ffffff;}
#fixBtn-navi .menu-icon:before{margin-top: -7px;}
#fixBtn-navi .menu-icon:after {margin-top: 5px;}
#fixBtn-navi.close .menu-icon:before,#fixBtn-navi.close .menu-icon:after {margin-top: 0;}
#fixBtn-navi.close .menu-icon {background: transparent;}
#fixBtn-navi .name { color: #ffffff; display: block; position: relative; left:0px; bottom: -17px;}
#fixBtn-navi .name:before { display: inline; content: 'MENU';}
#fixBtn-navi.close .name:before { display: inline; content: 'CLOSE';}
#fixBtn-navi.close .name { color: #ffffff;}
#cavor.Btn-navi {width: 100%; height: 100%; position: fixed; top:0px; left: -100%; transition:0s;  z-index: 999;}
#cavor.Btn-navi .menuBtn {display:block; width: 100%; height: 100%; background:rgba(255,255,255,0.6); }
#cavor.close { left: 0px; }
.navi {
    background: #dcebff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内部上下左右余白*/
    position: fixed;
    left: -70%; /*メニュー横幅①と合わせる*/
    top: 0;
    transition: .2s; /*0.3s は変化するのにかかる時間*/
    width: 70%; /*メニュー横幅①*/
    z-index: 1000;
}
.Btn-navi:hover + .navi-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 999;
}
/*.navi-background {width: 100%; height: 100%; position: fixed; top: 0px; left: 0%; transition: 0s; z-index: 999;}*/
.navi-background a.background-btn{display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.6);}
.navi.open { left: 0; }
.navi-background {z-index: 999; display: none; position: fixed; width: 100%; height: 100%; top: 0; left:0; }
.navi-background.open {display: block; background: rgba(255,255,255,0.6); }
.navi.open {padding-bottom: 10px; padding-top: 30px; text-align: center;}
.navi.open ul li {font-size: 14px; margin-bottom: 15%;}
.navi.open ul li a {font-size: 4vw; color: #5272db; font-weight: bold; display: block; padding-bottom: 4%; border-bottom: 1px solid #fff;}

.Btn-navi_first {padding: 5px; background: #816a29; width: 40px; display:none; line-height:1em; z-index:9999; transition: .3s;}
.Btn-navi_first .name { vertical-align:middle; text-align:center; color:#ffffff; font-size:7.3px; line-height: 1em; }
.Btn-navi_first .menuBtn {display: inline-block; position: relative; width: 40px; height:30px;}
/*footer .navi ul {display: block; padding: 30px 0px;}*/
footer .navi ul {
    font-size: 12px;
    height: 280px;
    overflow: auto;
    /* background-color: #FFF; */
    padding: 10px 10px;
    margin-bottom: 15px;
    /* border: 1px solid #CCC; */
    display: block;
    padding: 30px 0px;
}





header .header-flex {display: none;}
header {position: relative; padding: 3% 0;}
header .head-area { width: 100%; padding-left: 0%; display: block; height: auto;}
header .head-area h1 {width: 30%; margin: auto;}

footer .footer-area {padding: 10% 0 20% 0;}
footer .footer-area ul.main {display: none;}
footer .footer-area h1 {width: 50%; margin: auto;}

.top-wrap {margin-top: 0;}



.top-wrap .news-area ul li {width: 100%;}
.top-wrap .news-area ul li a {border-bottom: 1px solid #fff; font-size: 3.5vw;}
.top-wrap .news-area ul li a .topics {font-size: 3.5vw;}
.top-wrap .news-area ul li:nth-child(1) {padding-right: 10%;}
.top-wrap .news-area ul li:nth-child(1) {clip-path: none; background: #5272db;}
.top-wrap .news-area ul li:nth-child(2) {clip-path: none; background: #5272db;}
.top-wrap .news-area ul li:nth-child(3) {clip-path: none; background: #5272db;}
.top-wrap .news-area ul li:first-child a {width: 90%; padding-left: 5%; padding-right: 10%;}

.top-wrap .news-area ul li {
    display: none;
}

.top-wrap .news-area ul li:nth-child(1) {
    display: block;
}

.top-wrap .wrap-content h2 {font-size: 7vw;}
.top-wrap .wrap-content h2 span:after {display: none;}
.top-wrap .wrap-content h2 span {margin-bottom: 0; display: block; margin-right: 0;margin-bottom: 15px; line-height: 2em;}

.top-wrap .wrap-content .read {font-size: 4vw;}
.top-wrap .wrap-content .company-content ul {width: 100%; display: block;}
.top-wrap .wrap-content .company-content ul li {width: 100%;}
.top-wrap .wrap-content .company-content ul li img {width: 100%; margin-left: 0%;}
.top-wrap .wrap-content .company-content ul li a {margin-bottom: 10%;}
.top-wrap .wrap-content .txtarea {clip-path: none;}
.top-wrap .wrap-content .txtarea p {font-size: 3.5vw;}
.top-wrap .wrap-content .txtarea:after,.top-wrap .wrap-content .company-content ul li:nth-child(2) .txtarea:after {display: none;}
.top-wrap .wrap-content .business-content .photo { width: 100%;}
.top-wrap .wrap-content .business-content .text {position: relative; transform: initial; margin-top: 10%; width: 90%; margin: 10% auto auto; font-size: 4vw;}
.top-wrap .wrap-content .business-content .text .btnarea {margin: 30px auto auto auto; width: 100%;}
.top-wrap .wrap-content .business-content .text .linkbtn {margin: 0px 5% auto auto; display: block;}
.top-wrap .wrap-content .linkbtn {margin: auto; width: 100%; border: none;}
.top-wrap .wrap-content .linkbtn:before {display: none;}
.top-wrap .wrap-content .linkbtn span {font-size: 3.5vw; left: -210%; position: static; width: 100%; display: block; text-align: center; font-weight: bold;}
.top-wrap .wrap-content .list-content .linkbtn {display: none;}
.top-wrap .wrap-content .txtarea {width: 90%; padding: 5%; position: relative;}

.list-content ul {width: 90%; display: block;}
.list-content ul.employeelist li {width: 100%;margin-bottom: 25%;}
.list-content ul li {width: 100%;margin-bottom: 25%;}


.page-content .content h2 {font-size: 5vw;}
.page-content .content h3 {font-size: 4vw;}
.page-content .content .read {margin-bottom: 10%;}


.title-area #breadCrumb {margin-top: 0;}
#company .page-content .content.table-area .flex-area {display: block;}
#company .page-content .content.table-area .flex-area .text-area {width: 100%;}
#company .page-content .content.table-area .flex-area .photo {width: 100%;}

.title-area h1 {text-shadow: 1px 1px 2px #333; color: #fff; background-color: rgba(82,114,219,0.8); background-blend-mode: lighten;}
.title-area h1 span {font-size: 13vw; text-shadow: 1px 1px 2px #333;}

.entry-btn a {width: 100%;}

#section .flex-area {display: block;}
#section .table-area {font-size: 3.5vw;}
#section .table-area {margin-bottom: 100px;}
#section .flex-area .photo {width: 100%; margin-bottom: 10%;}
#section .flex-area .text-area.position {width: 100%; font-size: 3.5vw;}


#employee .list-content ul li {width: 100%;margin-bottom: 25%;}
#employee .flex-area.single {display: block;}
#employee .flex-area.single .text-area .title {font-size: 4vw;}
#employee .flex-area.single .text-area {width: 100%;}
#employee .flex-area.single .photo {width: 100%; margin-bottom: 10%;}
#employee .flex-area.single .photo h2 {font-size: 6vw;}
#employee .flex-area.single .photo p {font-size: 4.5vw; line-height: 1.7em;}
#employee .flex-area.single .text-area .area {font-size: 3.5vw; line-height: 1.7em;}

#safety .photo-area .flex-area {display: block;}
#safety .photo-area .flex-area li {width: 100%; margin-bottom: 5%;}
#safety .photo-area .flex-area.clm3 li:last-child,#safety .photo-area .flex-area.clm3 li:last-child{width: 100%;}

#recruit .rewelfarelist span.list {width: 100%; margin-bottom: 15px; margin-right: 0px;}

.page-content .content.btn-area ul {display: block;}
.page-content .content.btn-area ul li {width: 100%; margin-bottom: 2%;}
#recruit .page-content .content.rearea {padding: 3% 3% 10% 3%;}

.servicelist ul li {width: 100%;}



.sp-menu-list {position: fixed; display: block; bottom: 0; left: 0; width: 100%;}
.sp-menu-list ul {display: flex !important; justify-content: center;}
.sp-menu-list ul li {width: 50%; border: 1px solid #fff; background: #5272db;}
.sp-menu-list ul li a {width: 100%; text-align: center; font-size: 3.5vw; color: #fff; padding: 7% 0; text-align: center; display: block; font-weight: bold;}





.blogContent .mw_wp_form dt {float: none; width: 100%; font-weight: bold;}
.blogContent .mw_wp_form dd {float: none; padding: 0; margin-bottom: 10%;}
.mwform-checkbox-field label, .mwform-radio-field label {width: 100%;
    display: block;}



}
@media only screen and (max-width: 680px) {
header h1.sp-index-logo {padding: 100px 0;}
header .slide-area .read {top: 175px;}
}
@media only screen and (max-width: 480px) {
    
}
@media only screen and (max-width: 320px) {
    
}