@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
common
font-family: 'Noto Sans JP', sans-serif;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body {
  color: #000;
  line-height: 1.8; 
  background: #00234e;
  font-family: 'Noto Sans JP', sans-serif;
}
a {
  color: #000; 
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.clickable a, .clickable a:hover {
  color: #000;
}
.linkText{color:#4299E1; text-decoration: underline;}
#mainContainer {width: 100%; overflow: hidden; }
.flex {display: flex; display: -webkit-flex; justify-content: space-between; flex-wrap: wrap;}
.inrContent {width: 80%; max-width: 1200px; margin-left: auto; margin-right: auto; position: relative;}
img {width: 100%; height: auto;}

.br_spOnly{display:none;}
.br_pcOnly{display:block;}

/* ----------------------------------------------------
header (common)
---------------------------------------------------- */
#header  {position: fixed; left: 0; top: 0; z-index: 99; width: 100%; height: min( 9.333vw , 140px); display: flex; display: -webkit-flex; align-items: center; justify-content: space-between;}
#header .headInner {width: 80%; max-width: 1200px; margin: 0 auto;}

#header .headInner #hd-logo p{width: min(8vw, 120px); display: inline-block; margin-right: 1em;}
#header .headInner #hd-logo{display: flex; display: -webkit-flex; justify-content: flex-start; flex-wrap: wrap;}
#header .headInner #hd-logo span {font-weight: 600; line-height: 2; color: white;}


#header .headInner ul {}
#header .headInner ul li a{color: white; margin-right: min(3.33vw, 50px); font-weight: 600;}
#header.fixed {position: fixed; background: #00234e; opacity: 0; animation: fade 0.9s ease  forwards;}
@keyframes fade {
   0% {opacity: 0; }
   100% {opacity: 1; }
}

#btnRecruit {position: absolute; right: 0; top: 0; }
#btnRecruit p {margin: 0;  text-align: center; color: #fff; background: #b74c1e; height: 100%; height: min( 9.333vw , 140px ); width: min( 9.333vw , 140px );  z-index: 120; display: flex; display: -webkit-flex; justify-content:center; align-items: center; cursor: pointer; flex-direction: column;}
#btnRecruit p a{color: #fff; /*font-size: min( 1.267vw , 1.9rem );*/ font-weight: 600; padding-bottom: 1em; position: relative;}
#btnRecruit p a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0%;
  width: min( 1.03vw , 20px );
  height: min( 1.03vw , 20px );
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-50%, 0%) rotate(135deg);
}

@media (min-width:768px) {
#btnRecruit:hover p  {filter: alpha(opacity=60) !important;	opacity: .6 !important;
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
	/* サブメニュー */
	.hdLinkRecruit {position: absolute; right: 0; top: min( 9.333vw , 140px ); background: #b74c1e; width: min( 33.33vw , 500px ); display: none; color: white;}
	.hdLinkRecruit a{color: white; display: block;}
	.hdLinkRecruit ul {width: 90%; margin: 0 auto;}
	.hdLinkRecruit ul li{border-bottom: 1px solid white; padding: 1em 2em; text-align: center;}
	.hdLinkRecruit ul li:last-child{border-bottom: none;}
}

/* ----------------------------------------------------
footer (common)
---------------------------------------------------- */
#footer {margin: min( 6.667vw , 100px ) auto 0 auto; padding-bottom: min( 4.667vw , 70px );}
#footer .pagetop{width:8%; margin: 0 auto;}
#footer .ftCopy {color: white; text-align: center;}
.ftLogo_icon{margin: min( 6.667vw , 100px ) auto min( 6.667vw , 40px ) auto; width: 34%; max-width: 515px;}
.ftLogo_icon.flex{align-items:center;}
.ftLogo_icon .ftLogo{width: 49%; margin: 0 auto;}


.ftLogo_sns{margin: 0 auto min( 6.667vw , 40px ) auto; width: 47%; max-width: 700px;}
.ftLogo_sns.flex{align-items:center; justify-content: center;}


.snsLogo{width:min( 3.667vw , 55px ); margin-right: 0.7em;}
.snsInner{margin: 0 3%; align-items: center;}
.snsInner:first-child{width: 40%; justify-content: flex-end;}
.snsInner:last-child{width: 45%; justify-content: flex-start;}
.snsLinkTx{display:inline-block;}
.snsLinkTx a{color: white; text-decoration: underline;}


/* ----------------------------------------------------
Top
---------------------------------------------------- */
#homVisual {position: relative;}
.homImg{overflow: hidden; position: relative; width: 100%; min-height: 100vh; min-height: 100svh;}
.homImg video {position: absolute; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; width: 100%; height: 100%; z-index: 1;}
.homImg::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
	background: url("../img/top/main_layer.svg") no-repeat center center;
	background-size: cover;
    top: 0;
    left: 0;
    z-index: 2;
}

.homVisuCopy{position:absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: block; width: 32%;}
.homVisuCopy img{object-fit: cover;}


/* ----------------------------------------------------
MATEHAN
---------------------------------------------------- */
#matehan{position: relative; text-align: center; padding-top: min( 4.333vw , 65px );}
#matehan .inrContent{justify-content: center; align-items: flex-end;}
#matehan h3{margin:0 auto min( 2.667vw , 40px ) auto; width: 50%;}

#matehan .matehanBg{width: 40%; margin-right: 1em;}
#matehan .matehanRead{width: 41%; padding-bottom: 2em;}
#matehan .matehanRead .matehanLine{width: 14%; margin: 0 auto 1em auto;}
#matehan .matehanRead .matehanText{color:white; text-align: left; line-height: min( 4.333vw , 6.5rem ); font-size: min( 1.333vw , 2.0rem ); }


/* ----------------------------------------------------
JOB DESCRIPTION
---------------------------------------------------- */
#job_description{background: url("../img/top/job_bg.jpg") no-repeat right bottom; min-height: min( 39.667vw , 595px ); background-size: cover;}
#job_description.flex{flex-flow: column; justify-content: center;}
#job_description .jobInner{width: 42%; color: white;}
#job_description .jobInner h3{width: 100%;}
#job_description .jobInner .jobText{margin: min( 2vw , 30px) 0; text-align: center; width: 100%; line-height: 2;}
#job_description .jobInner .jobBt{display: block; text-align: center; width: 100%; font-size: min( 1.333vw , 2rem);}
#job_description .jobInner .jobBt a{color: white;}
#job_description .jobInner .jobBt span{position:relative; padding-left: 0.5em; padding-right: 1.8em; background-color: #00234e;}
#job_description .jobInner .jobBt span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 10px; width: min( 1.067vw , 16px); height: min( 1.067vw , 16px); background: url("../img/common/aroow_w.svg") no-repeat right center;}



/*blank*/
.blank{background-color:white; height: min( 4.333vw , 65px ); }

/* ----------------------------------------------------
MEMBER
---------------------------------------------------- */
#member{background: url("../img/top/member_bg.jpg") no-repeat right top;}
#member .memTitle{width: 28%; color: white;}
#member .memTitle.flex{align-items: center; flex-flow: column; justify-content: center;}
#member .memTitle h3{color: white; font-size: min( 2.533vw , 3.8rem ); text-align: center; padding: 0 0 min( 4vw , 60px ) 0; letter-spacing: 0.18em; font-weight: 600; width: 100%;}
#member .memTitle h3 .topCt_tilte span{width: 100%;}
#member .memTitle p{text-align: center;}
#member ul{width: 70%; margin: 0;}
#member ul li{min-height: min( 33.333vw , 500px ); width: 31%; position: relative; cursor: pointer; overflow: hidden;}
#member ul li a{flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%;}
#member ul li.mem01{background: url("../img/top/member01_blue.jpg") no-repeat center 30%; background-size: cover;}
#member ul li.mem01:hover{background: url("../img/top/member01_col.jpg") no-repeat center 30%; background-size: cover;}
#member ul li.mem02{background: url("../img/top/member02_blue.jpg") no-repeat center 30%; background-size: cover;}
#member ul li.mem02:hover{background: url("../img/top/member02_col.jpg") no-repeat center 30%; background-size: cover;}
#member ul li.mem03{background: url("../img/top/member03_blue.jpg") no-repeat center 40%; background-size: cover;}
#member ul li.mem03:hover{background: url("../img/top/member03_col.jpg") no-repeat center 40%; background-size: cover;}
#member ul li:hover .memDeta{opacity: 1; margin: 0;}
#member ul li .memDeta{opacity: 0; color: white; transition:all 0.6s ease; margin-left: min( -5.33vw , -80px); text-align: center; position: relative;}
#member ul li .memDeta .memName{font-size: min( 2vw , 3rem); font-weight: 600;}
#member ul li .memDeta .memCont{font-size: min( 1.067vw , 1.6rem );}
#member ul li .memBt{position:absolute; bottom: 0.2em; right: 0.2em; opacity: 0; transition:all 0.9s ease; color: white; font-size: min( 1.333vw , 2rem);}
#member ul li:hover .memBt{opacity: 1; right: 2em; bottom: 0.2em; position: absolute;}
#member ul li .memBt span{position:relative; padding-left: 0.5em; padding-right: 1.8em; background-color: #00234e;}
#member ul li .memBt span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 10px; width: min( 1.067vw , 16px); height: min( 1.067vw , 16px); background: url("../img/common/aroow_w.svg") no-repeat right center;}

/* ----------------------------------------------------
RECRUIT
---------------------------------------------------- */
#recruit{}
#recruit .rectitl{display: flex; display: -webkit-flex; justify-content:flex-end; align-items: center;}
#recruit h3{color: white; font-size: min( 2.533vw , 3.8rem ); text-align: center; letter-spacing: 0.18em; font-weight: 600; margin-bottom: 1.6em;}
#recruit .recBox{background-color: #8091a6; height: min( 35.333vw , 530px ); display: flex; display: -webkit-flex; justify-content:flex-start; align-items: center; position: relative;}
#recruit .recBox .recInner{width: 68%; max-width: 1020px; margin: 0 auto; z-index: 5; display: flex; display: -webkit-flex; align-items: flex-end; flex-flow: column; }
.recInin{width: 65%;}

#recruit .recBox ul{display: flex; display: -webkit-flex; justify-content:space-between; align-items: center; z-index: 5; flex-wrap: wrap;}
#recruit .recBox ul li{background-color: white; display: block; position: relative; text-align: center; width: 46%; margin-bottom: 1em; height: min( 6.667vw , 100px ); line-height: min( 6.667vw , 100px ); font-weight: 600;}
#recruit .recBox ul li.ile25{background-color: #a04c1e; color: white;}
#recruit .recBox ul li.ile25 a{color: white;}
#recruit .recBox ul li a{color: #00234e;}	

#recruit .recBox ul li .triangle{display: block;
  height: 0;
  width: 0;
  position: absolute;
  bottom: 6px;
  right: 6px;
  border-left: 20px solid transparent;
  border-bottom: 20px solid #00234e;}
#recruit .recBox ul li.ile25 .triangle{border-bottom: 20px solid #fff;}
#recruit .recBox .recRobo01,#recruit .recBox .recRobo02{position: absolute; bottom: 0; left: 0;}
#recruit .recBox ul li.ileTx{background-color: transparent; height: inherit; line-height: inherit; color: white; font-size: min( 1.6vw , 2.4rem );}


/* ----------------------------------------------------
movie
---------------------------------------------------- */
#movie{}
#movie h3{color: white; font-size: min( 2.533vw , 3.8rem ); text-align: center; padding: min( 4vw , 60px ) 0; letter-spacing: 0.18em; font-weight: 600;}
.movieClum{}
.movieClum li{width: 47%; position: relative;}
.movieClum .mvTitle{text-align: center;}
.movieClum .mvTitle span{background-color: white; padding: 0 0.3em; color: #00234e; font-size: min( 2vw , 3rem); font-weight: 600; letter-spacing: 0.1em; line-height: 1;}
.movieClum #askul_movie {margin: 0 auto; width: 100%; max-width: 570px;}
.movieClum #movie-content {padding-top: 56.25%; position: relative; width: 100%; height: 0; overflow: hidden;}
.movieClum #movie-content iframe {height: 100% !important; left: 0; position: absolute; top: 0; width: 100% !important; z-index: 99;}

.movieClum #movie-content iframe:hover{opacity: 0.5; cursor: pointer!important;}

.topCt_tilte{margin-bottom:0; position: relative; text-align: center;}
.topCt_tilte span{position: absolute; top: 0.4em; left: 50%; transform: translateX(-50%); color: #3d5878; z-index: -1; font-size: min( 3.067vw , 4.6rem ); font-weight: 600; font-family: 'Libre Franklin', sans-serif; letter-spacing: 0.3em;}


/* ----------------------------------------------------
社員紹介
---------------------------------------------------- */
#employee .empWrap{width: 80%; max-width: 1200px; margin: min( 9.333vw , 140px) auto 0 auto; padding-top: min( 34.33vw , 515px );}
#employee .empWrap.empMainVis01{background: url("../img/employee/st01_main.jpg") no-repeat right 0;}
#employee .empWrap.empMainVis02{background: url("../img/employee/st02_main.jpg") no-repeat 0 0;}
#employee .empWrap.empMainVis03{background: url("../img/employee/st03_main.jpg") no-repeat 0 0;}
#employee .empWrap .empWhiteBox{width: 83%; background-color: white; margin: 0 auto; padding-top: min( 6.667vw , 40px ); color: #00234e;}

#employee .empWrap .empWhiteBox .nameDeta{margin-bottom: min( 4.16vw , 50px );}
#employee .empWrap .empWhiteBox .nameDeta.flex{justify-content: center; align-items: center;}
#employee .empWrap .empWhiteBox .nameDeta .name{padding-right: min( 2vw , 30px); font-size: min( 1.6vw , 2.4rem ); font-weight: 600;}
#employee .empWrap .empWhiteBox .nameDeta .deta{padding-left: min( 2vw , 30px); font-size: min( 1.067vw , 1.6rem ); border-left: 1px solid #00234e; font-weight: 600;}

#employee .empCtCaset{width: 80%; margin: 0 auto; padding-bottom: min( 6vw , 90px);}
#employee .empCtCaset h2{position: relative; font-size: min( 1.6vw , 2.4rem ); margin-bottom: min( 1.667vw , 25px ); font-weight: 600;}
#employee .empCtCaset h2:before {position: absolute; top: calc(50% - 1px); left: 0; width: min( 1.333vw , 20px); height: 4px; content: ''; background: #8091a6;}
#employee .empCtCaset h2 span {position: relative; padding-left: 1.3em;}


#employee .empCtCaset .empClume .box {width: 100%!important;}
#employee .empCtCaset .empClume .clear-after {
  display: none; /* 交差を検出するため最初はfloat解除しない */
  clear: both;
  height: 0;
}
#employee .empCtCaset .empClume .clear {
  clear: both; /* 後続要素のレイアウト崩れを防止する */
}
#employee .empCtCaset .empClume .space {float: right; height: 5em; /* 仮の高さ */}
#employee .empCtCaset .empClume .space.left {float: left;}
#employee .empCtCaset .empClume .photo {width: 50%; float: right; clear: both; margin-left: 1em; margin-top: 0.3em;}
#employee .empCtCaset .empClume .photo.left {margin-left: 0; margin-right: 1em; float: left;}
#employee .empCtCaset .empClume .photo img {width: 100%; height: auto; vertical-align: top;}
 /* 高さ設定 */
#employee .empCtCaset .empClume .space.em4 {height: 4em;}
#employee .empCtCaset .empClume .space.em4_5 {height: 4.5em;}
#employee .empCtCaset .empClume .space.em5 {height: 5em;}
#employee .empCtCaset .empClume .space.em6 {height: 6em;}
#employee .empCtCaset .empClume .space.em6_5 {height: 6.5em;}
#employee .empCtCaset .empClume .space.em7 {height: 7em;}
#employee .empCtCaset .empClume .space.em8 {height: 8em;}
#employee .empCtCaset .empClume .space.em9 {height: 9em;}
#employee .empCtCaset .empClume .space.em10 {height: 10em;}
#employee .empCtCaset .empClume .space.em11 {height: 11em;}

#employee .empCtCaset .empClume p{font-size: min( 1.2vw , 1.8rem);}

#employee .localNav{width:42%; margin: min( 4.667vw , 70px ) auto min( 4.16vw , 50px ) auto;}
#employee .localNav li{position: relative; width: 47%;}
#employee .localNav p{margin: 0; color: #00234e;}
#employee .localNav p.lcNav_n{position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); background-color: white; text-align: center; padding: min( 1vw , 15px); width: 75%; font-weight: 600;}
#employee .localNav p.lcNav_n span{font-size: min( 0.93vw , 1.4rem); display: block;}
#employee .localNav .lcNav_p{width: 100%;}

.changeTex{text-align:center; margin-top: 2em;}


/* ----------------------------------------------------
仕事内容
---------------------------------------------------- */
#works{position: relative;}
#works .wrBack{background:url("../img/works/main.jpg") no-repeat 0 0; background-size: cover; width: 100%; height: min( 53.33vw , 800px ); position: absolute; top: 0; left: 0; }
#works .workWrap{width: 80%; max-width: 1200px; margin: min( 9.333vw , 140px) auto 0 auto;}
.workWrap h2{padding: min( 6.667vw , 100px ) 0 0.1em 0; font-size: min( 2.233vw , 3.5rem ); color: white; text-align: center; font-weight: 600; letter-spacing: 0.1em; border-bottom: double 6px #8091a6; margin-bottom: 1em;}
.workContM{width: 78%; margin: 0 auto;}
.workWrap .workRead{color: white; text-align: center; line-height: 2.4;}
.timeSchedule{margin-top: min( 5.667vw , 85px); color: white;}
.timeSchedule h3 {text-align: center;}
.timeSchedule h3 span{background-color: white; color: #00234e; font-size: min( 2vw , 3rem); padding: 0.05em 0.5em; line-height: 1; font-weight: 600;}
.scheduleWrap{background:url("../img/works/line02.svg") repeat-y center top; background-size: 0.6% auto; margin-top: min( 4.667vw , 70px); padding-bottom: min( 2.667vw , 40px); }
.scheduleWrap .timeWrap{width: 45%;}
.scheduleWrap .timeWrap .timeTitle{text-align: center; margin: min( 2vw , 30px) 0 min( 4.16vw , 50px ) 0;}
.scheduleWrap .timeWrap .timeTitle span{font-size: min( 2.233vw , 3.5rem ); padding-left: 1.4em; position: relative; letter-spacing: 0.1em;}
.scheduleWrap .timeWrap .timeTitle span::after{content: '▶'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: min( 2.233vw , 3.5rem ); color: #4c6583;}
.scheduleWrap .timeWrap .timeInner p{margin-bottom: 0;}
.scheduleWrap .timeWrap .timeInner .timeLine{width: 25%; font-size: min( 1.773vw , 2.6rem ); font-weight: 600; text-align: right; line-height: 1;}
.timeDot_s{background:url("../img/works/line01.svg") repeat-y center 1%; background-size: 5% auto; color: #8091a6; font-size: min( 1.067vw , 1.6rem ); /*height: 4.5em;*/ width: 5%; position: relative;}
.timeDot_s.min30{padding-bottom: 1.5em;}
.timeDot_s.min60{padding-bottom: 2.5em;}


.timeDot_s::after{content: '●'; position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-size: min( 1.067vw , 1.6rem ); color: #4c6583;}
.timeDot_s span,.timeDot_l span{background-color: #00234e; width: 1em; height: 2em; display: block;}
.timeDot_l{background:url("../img/works/line01.svg") repeat-y center 1%; background-size: 5% auto; color: #8091a6; font-size: min( 1.6vw , 2.4rem ); height: 10.5em; width: 5%; position: relative;}
.timeDot_l::after{content: '●'; position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-size: min( 1.6vw , 2.4rem ); color: #4c6583;}
.timeDot_s.noLine{background:none; height: inherit;}
.timeDot_s.noLine::after{content: '●'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: min( 1.067vw , 1.6rem ); color: #4c6583;}
.scheduleWrap .timeWrap .timeInner .timeCont{/*width: 72.4%;*/width: 65%;}
.scheduleWrap .timeWrap .timeInner .timeCont .timeBigTx{font-size: min( 1.6vw , 2.4rem ); display: block; position: relative; padding-left: 1em; line-height: 1;}
.scheduleWrap .timeWrap .timeInner .timeCont .timeBigTx02{font-size: min( 1.6vw , 2.4rem ); display: block; position: relative; padding-left: 1em; line-height: 1;}
.scheduleWrap .timeWrap .timeInner .timeCont .timeSmallTx{display: block; margin-top: 0.5em;}

.scheduleWrap .timeWrap .timeInner .timeCont .timeBigTx::after{content: '---'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: min( 1.067vw , 1.6rem ); color: #fff;}
.scheduleWrap .timeWrap .timeInner .timeCont .timeBigTx02::after{content: '---'; position: absolute; left: 0; top: 15%; transform: translateY(-50%); font-size: min( 1.067vw , 1.6rem ); color: #fff;}


.workAria{background: url("../img/works/workAria_bg.jpg") no-repeat 0 0; background-size: cover; margin-top: min( 9.333vw , 140px); padding: min( 5.33vw , 80px) 0;}
.workAria h2{padding: 0 0 0.1em 0; font-size: min( 2.233vw , 3.5rem ); color: #00234e; text-align: center; font-weight: 600; letter-spacing: 0.1em; border-bottom: double 6px #8091a6; margin-bottom: 1em;}
.workAria h3{text-align: center;}
.workAria h3 span{background-color: #00234e; color: white; font-size: min( 2vw , 3rem); padding: 0.05em 0.5em; line-height: 1; font-weight: 600;}
.workAria .wrAriaRead{margin: min( 1.667vw , 25px ) 0 min( 4.16vw , 50px ) 0; text-align: center; color: #00234e;}

.carrerPass{padding: min( 5.33vw , 80px) 0 0 0; margin-bottom: min( 9.333vw , 140px); background-color: #667b95;}
.carrerPass h2{padding: 0 0 0.1em 0; font-size: min( 2.233vw , 3.5rem ); color: white; text-align: center; font-weight: 600; letter-spacing: 0.1em; border-bottom: double 6px #fff; margin-bottom: 1em;}
.carrerPass h3{text-align: center;}
.carrerPass h3 span{background-color: white; color: #8091a6; font-size: min( 2vw , 3rem); padding: 0.05em 0.5em; line-height: 1; font-weight: 600;}
.carrerPass .carPsRead{margin: min( 1.667vw , 25px ) 0 min( 4.16vw , 50px ) 0; text-align: center; color: white;}
.carrerPass .carPsImg_pc{background:url("../img/works/carrerPass_pc_bg.svg") repeat-x 0 0;}
.carrerPass .carPsImg_pc img{width: 93%; margin: 0 auto; display: block;}





/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
pcSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width:768px) {
/* ----------------------------------------------------
common(pc)
---------------------------------------------------- */
/* hover */
a:hover {
  opacity: .8 !important; filter: alpha(opacity=80);
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
a img:hover {
  opacity: .8 !important; filter: alpha(opacity=80);
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.clickable:hover {
  filter: alpha(opacity=60) !important;	opacity: .6 !important;
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
#btnGlobal, .navChild {display: none;}
#header.fixed #grandMenu {display: block!important;}
#header #grandMenu {display: block!important;}
}


@media (max-width: 1750px) {

	
	
}
	
	

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
tabletSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 1200px) and (min-width: 768px) {
.homImg::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
	background: url("../img/top/main_layer_sp.svg") no-repeat center center;
	background-size: cover;
    top: 0;
    left: 0;
    z-index: 2;
}
}
@media (max-width: 915px) {
@media (orientation: landscape) {
	.homVisuCopy {width: 25%;}
}
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
spSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 767px) {
	#mainContainer{ width: 100%; position: relative;}
	
.br_spOnly{display:block;}
.br_pcOnly{display:none;}
.order1{order:1;}
.order2{order:2}

/*ハンバーガー*/
#btnGlobal {position: absolute; right: 16vw; top: 0; z-index: 120;	background: #fff; display: flex;	display: -webkit-flex; justify-content: center; align-items: center;}
#btnGlobal .btnWrapGlobal {	position: relative;	}
#btnGlobal .btnLine { height: 3px; background: #00234e; position: absolute; right:0; width: 100%;}
#btnGlobal .btnLine.btnLineT {  top: 0;}
#btnGlobal .btnLine.btnLineM { top: 50%; transform: translateY(-50%);}
#btnGlobal .btnLine.btnLineB { bottom: 0; }
#btnGlobal.active .btnLine {background: #00234e;}
#btnGlobal.active .btnLine.btnLineT { display: none;}
#btnGlobal.active .btnLine.btnLineM { transform: translateY(0) rotate(45deg) ;}
#btnGlobal.active .btnLine.btnLineB { transform: rotate(-45deg); bottom:inherit; top: 50%;}
#btnGlobal .btnLine.btnLineM, #btnGlobal .btnLine.btnLineB {-moz-transition: all, ease-in-out, 0.3s;  -o-transition: all, ease-in-out, 0.3s;  -webkit-transition: all, ease-in-out, 0.3s; transition: all, ease-in-out, 0.3s;}	
	
#grandMenu {background: #00234e; width: 100%; height: 100%; position: fixed; z-index: 100;  left: 0; top: 0; display: none; overflow: auto;}
#grandMenu a {color: #fff;}
#ct_about #header .headInner ul li a {color: #fff;}
#grandMenu #navGlobal {flex-flow: column; margin-left: 0; right: 0; left: 0; display: block!important;}
	
#grandMenu #navGlobal li {border-bottom: 1px solid #fff; line-height: 1; width: 90%; margin: 0 auto;}
#grandMenu #navGlobal li a {display:  block; position: relative; }
#header .headInner ul li:last-child a{margin-right:1em;}
#grandMenu #navGlobal li a::after {content:""; position: absolute;  top: 50%; border-top:1px solid #fff; border-right: 1px solid #fff; transform:  rotate(45deg) translateX(-50%); transition: all 0.3s  ease}
#grandMenu #navGlobal li.btn-navChild a::after { transform:  rotate(135deg);}
#grandMenu #navGlobal li.btn-navChild a.active::after {transform:  rotate(-45deg);}
#grandMenu #navGlobal li.btn-navChild .navChild {display: none;}
#grandMenu #navGlobal li.btn-navChild .navChild  li {border-bottom: none; }
#grandMenu #navGlobal li.btn-navChild .navChild a::after {transform:  rotate(45deg) ;}	
	
@media (orientation: portrait) { /* スマホ縦 */
	#btnGlobal {width: 16vw; height: 16vw;}
	#btnGlobal .btnWrapGlobal {	position: relative;	width: 7vw;	height: 5vw;}
	#grandMenu {padding: 20vw 8%;}
	#grandMenu #navGlobal li { font-size: 4.2vw; }
	#grandMenu #navGlobal li a {padding: 4vw 0;}
	#grandMenu #navGlobal li a::after {right: 2vw; width: 2vw; height: 2vw;}
	#grandMenu #navGlobal li.btn-navChild .navChild  li {font-size: 3.7vw; padding-left: 3.7vw;}
}
@media (orientation: landscape) {/* スマホ横 */
	#btnGlobal {width: 7rem; height: 7rem;}
	#btnGlobal .btnWrapGlobal {	width: 3rem;	height: 2rem;}
	#grandMenu {padding: 8rem 8%;}
	#grandMenu #navGlobal li { font-size: 1.8rem; }
	#grandMenu #navGlobal li a {padding: 2rem 0;}
	#grandMenu #navGlobal li a::after {right: 1rem; width: 1rem; height: 1rem;}
	#grandMenu #navGlobal li.btn-navChild .navChild  li {font-size: 1.6rem; padding-left: 2rem;}	
}	
  
/* ----------------------------------------------------
header (sp)
---------------------------------------------------- */
#header  {height: 16vw;  padding: 3vw 18vw 3vw 4vw ;}
#header .headInner {width: 100%;}
#header .headInner.flex {align-items: flex-end;}
#header .headInner #hd-logo {display: flex; display: -webkit-flex; flex-flow: column; width: 100%;}
	
#header .headInner #hd-logo p {width: 30%; display: block;}
#header .headInner #hd-logo span {display: block; font-size: 2.5vw; margin-bottom: 1vw;}
#header .headInner ul{position: absolute; right: 18%;}
#header .headInner ul li a{margin-right: 1em; font-size: 3.0vw; line-height: 1;}	
#btnEntry {right: 0; top: 0; height: 16vw; width: 16vw;  z-index: 120; }
#btnEntry p {font-size:3vw;}
#btnRecruit p a {font-size:3.0vw;}
#btnRecruit p a::after {width: 3vw; height: 3vw;}
	
	
#btnRecruit {right: 0; top: 0;  z-index: 120; }
#btnRecruit p {font-size:3vw; height: 16vw; width: 16vw; }	
	
@media (orientation: landscape) {
#header {height: 10vw; }
#btnEntry {height: 10vw;}
#header .headInner #hd-logo span {line-height: 0.5; padding-top: 1em;}
#btnRecruit p {height: 10vw;}
}

/* sサブメニュー */
#btnRecruit p {position: relative; z-index: 10;}
#nvBgFix {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #b74c1e; z-index: 10; display: none;}
.hdLinkRecruit {display: none; position: absolute; right: 5vw;  top:  20vw;  z-index: 15; margin: 0 auto; width:90vw;}
.hdLinkRecruit ul  {}
.hdLinkRecruit ul li {border-bottom: 1px solid #fff; line-height: 1; width: 90%; margin: 0 auto; padding: 4vw 0; position: relative;}
.hdLinkRecruit ul li a {color: #fff;}
.hdLinkRecruit ul li a::after {content:""; position: absolute;  top: 50%; border-top:1px solid #fff; border-right: 1px solid #fff; transform:  rotate(45deg) translateX(-50%); transition: all 0.3s  ease; right: 2vw;
    width: 2vw;
    height: 2vw;}
	

/* ----------------------------------------------------
footer (sp)
---------------------------------------------------- */
#footer {margin-top: 10vw; padding-bottom:10vw;}
#footer .ftCopy {font-size: 2.8vw;}
#footer .pagetop{width:20%;}
.ftLogo_icon{margin: 6vw auto 4vw auto; width: 54%;}
.ftLogo_icon .snsIcon a{width: 45%;}

.ftLogo_sns{margin: 0 auto 5vw auto; width: 100%;}
.ftLogo_sns.flex{align-items:center; justify-content: center;}


.snsLogo{width:20%; margin-right: 0; margin-bottom: 0.5em;}
.snsInner{margin: 0 0; flex-flow: column; align-items: center;}
.snsInner:first-child{width: 45%; justify-content: center;}
.snsInner:last-child{width: 45%; justify-content: center;}
.snsLinkTx{display:inline-block;}
.snsLinkTx a{color: white; text-decoration: underline;}

/* ----------------------------------------------------
Top
---------------------------------------------------- */
.homVisuCopy{width: 55%;}
.homImg::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
	background: url("../img/top/main_layer_sp.svg") no-repeat center center;
	background-size: cover;
    top: 0;
    left: 0;
    z-index: 2;
}
@media (orientation: landscape) {
	.homVisuCopy {width: 30%;}
}
	
/* ----------------------------------------------------
MATEHAN
---------------------------------------------------- */
#matehan{min-height: 100%; padding: 18vw 0 5vw 0; background: url("../img/top/matehan_bg.png") no-repeat 0 0; background-size: cover; position: relative; background-position: right bottom;}
#matehan::before{width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; content: "";}
#matehan .inrContent{justify-content: flex-end;}
#matehan .matehanBg{display: none;}
#matehan h3{top: inherit; left: inherit; transform: inherit;/*width: 58vw; font-size: 6vw; position: relative;*/ text-align: center; width: 90%; }
#matehan .matehanRead{width: 100%; padding-top: 5vw;}

#matehan .matehanRead .matehanLine{width: 10%; margin: 0 auto 1em auto;}
#matehan .matehanRead .matehanText{margin-left: 0; text-align: center; margin-bottom: 4.7em; line-height: 3.5; font-size: 3.8vw;}
	
	
/* ----------------------------------------------------
JOB DESCRIPTION
---------------------------------------------------- */
#job_description{min-height: inherit; padding: 9vw 0 5vw 0; position: relative;}
#job_description::before{width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; content: "";}
#job_description .jobInner{width: 100%;}
#job_description .jobInner h3{width: 80%; margin: 0 auto}
#job_description .jobInner .jobText{margin: 4vw 0;}
#job_description .jobInner .jobBt{font-size: 3.8vw;}
#job_description .jobInner .jobBt span{position:relative; padding-right: 1.8em;}
#job_description .jobInner .jobBt span::before {right: 5%; width: 3vw; height: 3vw; background-position: right 20%;}
	
	
/*blank*/
.blank{height: 6vw; }

/* ----------------------------------------------------
MEMBER
---------------------------------------------------- */
#member{background: url("../img/top/member_bg.jpg") no-repeat right top; padding: 7vw 0;}
#member .flex{flex-flow: column;}
#member .memTitle{width: 100%;}
#member .memTitle.flex{align-items: center; flex-flow: column; justify-content: center;}
#member .memTitle h3{font-size: 5.4vw; margin-bottom: 0.5em;}

#member ul{width: 100%; margin: 0;}
#member ul li{min-height: 25vw; width: 100%; margin-bottom: 3vw; display: flex; align-items: center;}
#member ul li a{align-items: flex-start; padding-left: 1.5em;}
#member ul li.mem01,#member ul li.mem01:hover{background: url("../img/top/member01_col.jpg") no-repeat center 20%; background-size: cover;}
#member ul li.mem02,#member ul li.mem02:hover{background: url("../img/top/member02_col.jpg") no-repeat center 15%; background-size: cover;}
#member ul li.mem03,#member ul li.mem03:hover{background: url("../img/top/member03_col.jpg") no-repeat center 20%; background-size: cover;}

#member ul li .memDeta{opacity: 1; margin-left: 0;}
#member ul li .memDeta .memName{font-size: 3.6vw; text-align: left; margin: 0;}
#member ul li .memDeta .memCont{font-size: 3.4vw; text-align: left; margin: 0;}
#member ul li .memBt{position:absolute; bottom: 0; right: 0; opacity: 1; color: white; margin-bottom: 0!important; transition: all 0s ease;}
#member ul li .memBt{font-size: 3.8vw; line-height: 1.35}
#member ul li .memBt span{position:relative; padding-right: 1.8em;}
#member ul li .memBt span::before {right: 5%!important; width: 3vw; height: 3vw; background-position: right 20%;}
#member ul li:hover .memBt{bottom: 0; right: 0}
	

/* ----------------------------------------------------
RECRUIT
---------------------------------------------------- */
#recruit h3{font-size: 5.4vw; margin-bottom: 0.5em;}
#recruit .recBox{height: 45vw;}
#recruit .recBox ul{width: 60%; align-items: flex-end; margin-left: 40%;}
#recruit .recBox ul li{background-color: white; display: block; position: relative; text-align: center; width: 45%; margin-left: 0; height: inherit; line-height: inherit; padding: 0.5em; margin: 0 0 0.4em 0; font-size: 3.0vw; color: #00234e;}
	
#recruit .recBox ul li.ileTx{font-size: 3.0vw; padding: 0; color: #00234e;}	

	
#recruit .recBox ul li .triangle{bottom: 0.8vw; right: 0.8vw; border-left: 2.6vw solid transparent; border-bottom: 2.6vw solid #00234e;}
#recruit .recBox ul li.ile25 .triangle{bottom: 0.8vw; right: 0.8vw; border-left: 2.6vw solid transparent; border-bottom: 2.6vw solid #fff;}
#recruit .recBox .recInner{width: 85%;}
.recInin{width: 100%; }

	
	
/* ----------------------------------------------------
movie
---------------------------------------------------- */
#movie{}
#movie h3{font-size: 5.4vw; padding: 4vw 0; margin-bottom: 0.5em;}
.movieClum.flex{flex-flow: column;}
.movieClum li{width: 100%; margin-bottom: 5vw;}
.movieClum .mvTitle span{font-size: 3.2vw;}

.topCt_tilte span{top: 0.9em; font-size: 5vw;}
	
/* ----------------------------------------------------
社員紹介
---------------------------------------------------- */
#employee .empWrap{width: 100%; margin: 16vw auto 0 auto; padding-top: 35vw;}
#employee .empWrap.empMainVis01,
#employee .empWrap.empMainVis02,
#employee .empWrap.empMainVis03{background-size: 100% auto;}
#employee .empWrap .empWhiteBox{width: 90%; padding-top: 7vw;}
#employee .empWrap .empWhiteBox .nameDeta{margin-bottom: 8vw;}
#employee .empWrap .empWhiteBox .nameDeta.flex{flex-flow: column;}
#employee .empWrap .empWhiteBox .nameDeta .name{padding-right: 0; font-size: 5.2vw;}
#employee .empWrap .empWhiteBox .nameDeta .deta{padding-left: 0; font-size: 3.4vw; border-left: none; text-align: center; line-height: 1.5;}
#employee .empCtCaset{width: 90%; padding-bottom: 10vw;}
#employee .empCtCaset h2{font-size: 3.7vw; margin-bottom: 2.8vw; line-height: 1.2;}
#employee .empCtCaset h2:before {width: 3vw; height: 4px; top: 0.5em;}
#employee .empCtCaset h2 span {position: relative; padding-left: 1.3em; display: block;}
#employee .empCtCaset .empClume .box {display: flex; display: -webkit-flex; flex-flow: column;}
#employee .empCtCaset .empClume .space {display: none;}
#employee .empCtCaset .empClume .space.left {display: none;}
#employee .empCtCaset .empClume .photo {width: 100%; float: none; margin-left: 0; margin-top: 1em;}
#employee .empCtCaset .empClume .photo.left {margin-right: 0; float: none;}
#employee .empCtCaset .empClume .photo img {width: 100%; height: auto; vertical-align: top;}
#employee .empCtCaset .empClume p{font-size: 3.2vw;}	
#employee .localNav{width:80%; margin: 7vw auto 20vw auto;}
#employee .localNav li{position: relative; width: 47%;}
#employee .localNav p{margin: 0;}
#employee .localNav p.lcNav_n{bottom: -8vw; padding: 1vw; width: 75%;}
#employee .localNav p.lcNav_n span{font-size: 2.8vw; line-height: 1.3;}
	
	
	
/* ----------------------------------------------------
仕事内容
---------------------------------------------------- */
#works .wrBack{height: 60vw; background-position: right 0;}
#works .workWrap{width: 90%; margin: 16vw auto 0 auto;}
.workContM{width: 100%; margin: 0 auto;}
.workWrap h2{padding: 7vw 0 3vw 0; font-size: 5.6vw;}
.workWrap .workRead{line-height: 2.0;}
.timeSchedule{margin-top: 5.4vw;}
.timeSchedule h3 span{font-size: 3.8vw;}
.scheduleWrap{background:none; margin-top: 5vw; padding-bottom: 3vw;}
.scheduleWrap.flex{flex-flow: column;}
.scheduleWrap .timeWrap{width: 100%; margin-bottom: 8vw;}
.scheduleWrap .timeWrap .timeTitle{text-align: left; margin: 2vw 0 4.8vw 0; padding-left: 0.5em;}
.scheduleWrap .timeWrap .timeTitle span{font-size: 4.5vw;}
.scheduleWrap .timeWrap .timeTitle span::after{font-size: 4.5vw;}

.scheduleWrap .timeWrap .timeInner .timeLine{font-size: 3.9vw; line-height: 1.5;}
.timeDot_s{font-size: 2.8vw; }
.timeDot_s::after{font-size: 2.8vw; line-height: 2;}
.timeDot_s span,.timeDot_l span{background-color: #00234e; width: 1em; height: 2em; display: block;}
.timeDot_l{font-size: 3.8vw; height: inherit;}
.timeDot_l::after{font-size: 3.8vw; line-height: 2;}
.timeDot_s.noLine::after{font-size: 2.8vw;}
.scheduleWrap .timeWrap .timeInner .timeCont .timeBigTx{font-size: 3.9vw; line-height: 1.5; padding-left: 1.5em;}
.scheduleWrap .timeWrap .timeInner .timeCont .timeBigTx02{font-size: 3.9vw; line-height: 1.5; padding-left: 1.5em;}
.scheduleWrap .timeWrap .timeInner .timeCont .timeSmallTx{padding-bottom: 1em;}	
	
.scheduleWrap .timeWrap .timeInner .timeCont .timeBigTx::after{font-size: 3.2vw;}	
.scheduleWrap .timeWrap .timeInner .timeCont .timeBigTx02::after{font-size: 3.2vw; top: 25%;}	
.timeDot_s.min30{padding-bottom: 2.5em;}
.timeDot_s.min60{padding-bottom: 3.5em;}
	
.workAria{margin-top: 10.6vw; padding: 10.6vw 0;}
.workAria h2{font-size: 5.6vw;}
.workAria h3 span{font-size: 3.8vw;}
.workAria .wrAriaRead{margin: 2vw 0 4vw 0;}
	
.carrerPass{padding: 10.6vw 0 0 0; margin-bottom: 10vw;}
.carrerPass h2{font-size: 5.6vw;}
.carrerPass h3 span{font-size: 3.8vw;}
.carrerPass .carPsRead{margin: 2vw 0 4vw 0;}
.carrerPass .closeUp{background-color: #00234e; padding: 1em 0 8.6vw 0; margin-top: 0;}
.carrerPass .closeUp span a{background-color: #fff; color: #00234e;}

	
	
.closeUp{text-align: center; margin-top: 1em;}
.closeUp span a{background-color: #00234e; color: white; padding: 0.2em 0.8em;}
#wrUp{background-color: #fff; overflow: scroll; padding: 20vw 10vw;}
#wrUp img{width: 300%;}
.mfp-close {
  line-height: inherit!important;
  right: 3%!important;
  top: 0%!important;
  padding:0!important;
  font-size: 5.2vw!important;
  }	
#cpUp{background-size: 300% auto; overflow: scroll;}
#cpUp img{width: 300%;}
	
	
}