@charset "utf-8";
.under-main main{  background: #fff; overflow: hidden;}
@media screen and (min-width: 800.01px) {
.under-main main { margin-bottom: 0; }
.under-main #breadcrumbs { background: #fff;}
.under-main #breadcrumbs * { color: #111 !important;}
}
@media screen and (min-width: 800.01px) {
    
}
/**/
#page-about .imgBox .bkImg.campany{ background: url("../../img/about/mb01.webp") 50% 100% no-repeat #fff; background-attachment: fixed; background-size: cover; opacity: 0.8;}
#page-about .imgBox .bkImg.recruitment{ background: url("../../img/about/mb01.webp") 50% 100% no-repeat #fff; background-attachment: fixed; background-size: cover; opacity: 0.8;}

/*-------------------
#under-mvリセット
---------------------*/
#page-about #under-mv{ min-height: 300px;}
#page-about #under-mv .inner-wrap { padding: 20vh 3% 50px;}
#page-about #under-mv .inner-wrap .txt{ max-width: 360px;}
#page-about #under-mv .inner-wrap .txt span { margin-top: 20px;}
#page-about #under-mv #page-main{ padding-top: 30px;}

/**/
#page-about .imgBox{ width: 100%; height: 200px; background: #ddd; border-radius: 4px; margin: 40px 0; position: relative; overflow: hidden;}
#page-about .imgBox .bkImg{ width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1;}
#page-about .imgBox::before, 
#page-about .imgBox::after{ width: 100%; height: 100%; position: absolute; right: 0; top: 0; content: ""; }
#page-about .imgBox::before{ z-index: 10; background: var(--about-color); opacity: 0.8; animation: page-mv2 2.2s 1 forwards; }
#page-about .imgBox::after{ z-index: 15; background: #fff; animation: page-mv1 2.2s 1 forwards; }
_::-webkit-full-page-media, _:future, :root #page-mv .inner .imgBox .bkImg { background-attachment:inherit;}

@media screen and (max-width: 600px){
#page-about #under-mv .inner-wrap { padding: 20vh 3% 0;}
#page-about .imgBox{ margin: 20px 0 0;}

}

/*-------------------
#info #info-1
---------------------*/
#info { padding-bottom: 80px;}
#info #info-1{ display: flex; flex-direction: row; padding: 0 5%;}
#info #info-1 h2{ display: flex; font-size: 16px; font-weight: 500; margin-right: 40px; margin-top: 5px;}
#info #info-1 p{ flex: 1; display: flex; flex-direction: column;}
#info #info-1 p span{ display: block; margin-bottom: 15px; font-size: 14px;}
@media screen and (max-width: 700px){
#info { padding: 40px 0;}
}
@media screen and (max-width: 600px){
#info { }
#info #info-1{ flex-direction: column; padding: 0 5% 30px; overflow: hidden; margin-top: 0;}
#info #info-1 h2{ font-size: 5.6vw; letter-spacing: 0.2vw; padding-bottom: 40px; font-weight: 300;}
}
/*-------------------
#cp
---------------------*/
#cp{ border-bottom: solid 1px #eee;}
#cp .inner{ width: 94%; max-width: 800px; padding: 50px 5% 100px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.1);}
#cp .info-area{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#cp .info-area h2{ display: flex; justify-content: center; margin-bottom: 40px;}
#cp .info-area h2 span{ display: block; font-weight: 300; color: #333; transition: 1.8s; padding: 4px 10px; border-radius: 2px; line-height: 1em;}
#cp .info-area table *{ font-size: 13px; text-align: left; color: #555555; line-height: 1.4em;}
#cp .info-area table tr{ width: 100%; border-bottom: solid 1px #ddd;}
#cp .info-area table tr.set > *{ opacity: 0.5; transition: 0.6s; padding:25px 10px;}
#cp .info-area table tr.setView > *{ opacity: 1;}
#cp .info-area table tr th{ font-weight: 700; color: #222; white-space: nowrap;}
#cp .info-area table tr td span{ display: block; margin-bottom: 15px;}
#page-mv .inner .imgBox{}
/*-------------------
#info #info-1
---------------------*/
#recruit-main1 { padding-bottom: 80px; background: #fff;}
#recruit-main1 .inner{ display: flex; flex-direction: column; padding: 0 5% 30px; }
#recruit-main1 .inner h2{ display: flex; font-size: 16px; font-weight: 500; margin-bottom: 40px;}
#recruit-main1 .inner p{ flex: 1; display: flex; flex-direction: column;}
#recruit-main1 .inner p span{ display: block; margin-bottom: 15px; font-size: 14px;}
@media screen and (max-width: 700px){
#recruit-main1 { padding: 40px 0;}
}
@media screen and (max-width: 600px){
#recruit-main1 { padding: 50px 0;}
#recruit-main1 .inner{ padding: 0 5% 30px; }
#recruit-main1 .inner h2{ margin: 0 0 20px; font-size: 5.8vw; letter-spacing: 0.3em; font-weight:800;}
}

/*-------------------------------------------------------------------
プライバシーポリシー
#info #info-1
---------------------*/
#privacypolicy{ padding: 120px 0; display: flex; flex-direction: row; justify-content: center;}
#privacypolicy h1 span{ font-size: 22px;}
#privacypolicy .ppeng { width: 100%; padding: 5px 5px 60px; opacity: 0.6;}
#privacypolicy .ppeng *{ font-size: 16px;}
/**/
#privacypolicy .privacy-wrap { width: 100%; display:flex; flex-direction: column; padding:0 3%; max-width: 800px;}
#privacypolicy .privacy-wrap h2 { margin-bottom: 30px;}
#privacypolicy .privacy-wrap h2 * {font-size: 18px;}

#privacypolicy .privacy-wrap .box{ width: 100%; display:flex; flex-direction: column; margin-bottom: 40px;}
#privacypolicy .privacy-wrap .box h3{ font-weight: 400; font-size: 18px; margin-bottom: 10px;}
#privacypolicy .privacy-wrap p{ font-size: 14px; line-height: 1.6em;}
#privacypolicy .privacy-wrap .box ul{ width: 100%; display:flex; flex-direction: column;}
#privacypolicy .privacy-wrap .box ul li{ padding-left: 10px; text-indent: -15px; margin: 3px; font-size: 14px; line-height: 1.4em;}


@media screen and (max-width: 700px){
#privacypolicy #page-mv .inner .titleArea{ padding: 30px 0;}
#privacypolicy #page-mv .inner .titleArea h1 .setTit, 
#privacypolicy #page-mv .inner .titleArea h1 .setTit span, 
#privacypolicy #page-mv .inner .titleArea h1 .txtIn::after{ font-size: 6.4vw !important;}
#privacypolicy #page-mv .inner .titleArea h1{padding: 0;}
}






/*-------------------------------------------------------------------
採用
---------------------*/
#recruit-main1 { padding-bottom: 20px;}
#recruit-main1 .inner{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 4% 30px; }
#recruit-main1 .inner div{ display: flex; flex-direction: column;}
#recruit-main1 .inner div h2{ display: flex; font-size: 24px; font-weight: 300; margin-bottom: 40px; letter-spacing: 4px; line-height: 1.8em;}
#recruit-main1 .inner div h3{ display: block; font-size: 18px; line-height: 1.8em; font-weight: 600; margin: 40px 0 10px; letter-spacing: 2px;}
#recruit-main1 .inner div p{ max-width: 800px; flex: 1; display: flex; flex-direction: column;}
#recruit-main1 .inner div p span{ display: block; margin-bottom: 15px; font-size: 14px;}

@media screen and (max-width: 600px){
#recruit-main1 { }
#recruit-main1 .inner div h2{ margin: 0 0 20px; font-size: 5.3vw; letter-spacing: 0.1em; font-weight:800;}
}

/*-------------------
#recruit-list
---------------------*/
#recruit-list { padding-bottom: 80px;}
#recruit-list .inner{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 4% 30px; }
#recruit-list .inner .item{ width: 100%; max-width: 800px; display: flex;}
#recruit-list .inner .item .iBox{ width: 100%; display: flex; padding:30px 20px; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; margin-top: -1px; position: relative; z-index: 1; border-left: solid 1px #fff; border-right: solid 1px #fff; background: #fff;}
#recruit-list .inner .item a.iBox:hover{ border-left: solid 1px #ccc; border-right: solid 1px #ccc;  border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; box-shadow: 0 8px 16px rgba(0,0,0,.2); z-index: 10;}

#recruit-list .inner .item a.iBox::before{ width: 14px; height: 14px; content: ""; position: absolute; left: 20px; bottom: 40px; background: url("../../img24/common/arrow.png") 50% 50% no-repeat; background-size: cover; opacity: 0.1; transition: 1.0s;}
#recruit-list .inner .item a.iBox:hover::before{ opacity: 1; left: 30px;}
#recruit-list .inner .item span.iBox *{ opacity: 0.6;}
#recruit-list .inner .item .iBox .tit{ width: 200px; display: flex; flex-direction: column; margin: 0 20px 0 0;}
#recruit-list .inner .item .iBox .tit h2{ display: block; font-size:14px; letter-spacing:1px; font-weight: 500; margin-bottom: 10px; line-height: 1.4em;}
#recruit-list .inner .item .iBox .tit h3{ display: block; font-size:12px; font-weight: 200; letter-spacing: 1.5px;}
#recruit-list .inner .item .iBox p{ flex: 1; display: flex; flex-direction: column; font-size: 12px;}
#recruit-list .inner .item .iBox p span{ display: block; font-size: 10px; color: #555;}
#recruit-list .inner .item .iBox p span.mt{ margin-top: 8px;}


@media screen and (max-width: 600px){
#recruit-list .inner .item .iBox{ padding:20px; flex-direction: column;}
#recruit-list .inner .item .iBox .tit{ width: 100%; margin: 0 0 25px;}
#recruit-list .inner .item .iBox .tit h2{ margin-bottom: 6px;}
#recruit-list .inner .item .iBox p{ width: 100%; font-size: 11px;}
#recruit-list .inner .item a.iBox::before, 
#recruit-list .inner .item a.iBox:hover::before{ left: auto; right: 20px; bottom: 20px; opacity: 1;}
#recruit-list .inner .item .iBox .tit h2{ font-size:4.8vw; letter-spacing: 0.05em;}
#recruit-list .inner .item .iBox .tit h3{ font-size:3.4vw; letter-spacing: 0.05em; color: #777;}

}

/*-------------------
.job-info
---------------------*/
.job-info{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
.job-info#job-info1{ padding: 140px 4% 0px;}
.job-info#job-info2{ padding: 0 4% 80px;}
.job-info .inner{ width: 100%; max-width: 800px; position: relative;}
.job-info .inner .jobTtl{ width: 100%; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
.job-info .inner .jobTtl h1 *{ font-size: 22px;}
.job-info .inner .jobTtl p{ margin: 10px 0 80px; font-size: 13px;}
.job-info .inner .jobTtl p a{ font-size: 12px; color: var(--link-color); text-decoration: underline;}
.job-info .inner .jobTtl p a:hover{ color: var(--link-color-hover); }


/**/
.job-info#job-info1 .inner{ border-bottom: solid 1px #222; padding-bottom: 30px; margin-bottom: 60px;}
.job-info .inner h2{ display: flex; padding-bottom: 30px; margin-left: -10px;}
.job-info .inner h2 span{ display: block; font-size: 14px; font-weight: bold; letter-spacing: 5px; position: relative; padding: 2px 4px; background: var(--about-color);}

.job-info .inner .box{ display: flex;}
.job-info .inner .box * { font-size: 15px;}
.job-info .inner .box .tit, 
.job-info .inner .box .txt{ display: flex; flex-direction: column; align-items: flex-start;}
.job-info .inner .box .tit{ width: 120px; line-height: 1.4em; font-weight: 500; letter-spacing: 2px;}
.job-info .inner .box .tit.ls{ letter-spacing: 0;}
.job-info .inner .box .txt{ flex: 1; width: calc(100% - 110px);}
.job-info .inner .box .txt span{ display: block; line-height: 1.4em; margin-bottom: 20px;}
.job-info .inner .box dl{ width: 100%; display: flex; flex-direction: column; margin-bottom: 20px;}
.job-info .inner .box dl *{ display: block; width: 100%;}
.job-info .inner .box dl dt{}
.job-info .inner .box dl dd{ padding: 2px 5px 2px 20px; position: relative;}
.job-info .inner .box dl dd::before{ content: "・"; color: #000; position: absolute; left: 8px; top: 2px;}
.job-info .inner .box ul{ width: 100%; display: block; flex-direction: column; margin-bottom: 20px;}
.job-info .inner .box ul li{ display: flex; line-height: 1.4em; position: relative; padding-left: 16px;}
.job-info .inner .box ul li::before{ content: "・"; color: #000; position: absolute; left: 0px; top: 2px;}



/*-------------------
.job-info2
---------------------*/
#job-info2 .inner > p{ padding: 0 30px 30px; display: block; font-size: 12px; line-height: 1.6em;}
#job-info2 .inner > p.dot span{ width: 100%; display: block; padding-left: 10px; text-indent: -13px; font-size: 13px; line-height: 1.2em; margin-bottom: 6px;}
#job-info2 .inner .box .txt span a{ padding: 10px 20px; border: solid 1px #406E7C; background:#406E7C; color: #fff; border-radius: 4px; font-weight: 600; font-size: 14px;}
#job-info2 .inner .box .txt span a:hover{ background: #fff; color: #406E7C;}

@media screen and (max-width: 650px){
.job-info{ padding: 0 4% 40px;}
.job-info .inner h2{ padding-bottom: 70px;}
.job-info .inner h2 span{ padding-bottom: 0px;}
.job-info .inner h2 span::before{ bottom: -10px; height: 4px; background: #444;}


}