@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
common
font-family: 'Noto Sans JP', sans-serif;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body#home {
  color: #00234e;
  line-height: 1.8; 
  background: #fff;
  font-family: 'Noto Sans JP', sans-serif;
}
body#ct_about {
  color: #00234e;
  line-height: 1.8; 
  background: #fff;
  font-family: 'Noto Sans JP', sans-serif;
}
body {
  color: #00234e;
  line-height: 1.8; 
  background: #00234e;
  font-family: 'Noto Sans JP', sans-serif;
}
a {
  color: #00234e; 
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.clickable a, .clickable a:hover {
  color: #00234e;
}
.linkText{color:#00234e; 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;}
.mgBt1em{margin-bottom:1em;}


/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#00234e;
  text-align:center;
  color:#fff;
	overflow: hidden!important;
}
#splash {
  -ms-overflow-style: none!important; /* IE, Edge 対応 */
  scrollbar-width: none!important;    /* Firefox 対応 */
}

#splash::-webkit-scrollbar {
  display: none!important; /* Chrome, Safari 対応 */
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
    width:80vw;
}

#splashNone {
    /*2回目以降*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background:#00234e;
  text-align:center;
	overflow: hidden!important;
}

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
    fill-opacity: 0;/*最初は透過0で見えない状態*/
    transition: fill-opacity .5s;/*カラーがつく際のアニメーション0.5秒で変化*/
    fill: none;/*塗りがない状態*/
    stroke: #fff;/*線の色*/
  }

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path{
    fill: #fff;/*塗りの色*/
    fill-opacity: 1!important;/*透過1で見える状態*/
    stroke: none;/*線の色なし*/
  }

#topNews{position: absolute; top: 14%; right: 1.5%; width: min( 26.667vw , 400px)!important;}
.tpNewsInner{}
.tpNewBox{background:rgba(255,255,255,0.8); padding: 2em 1.5em; border-radius: 10px;}
.tpNewBox p{font-size: min( 1.067vw , 1.6rem); position: relative; margin-bottom: 0; justify-content: flex-start; align-items: center;}
.tpNewBox p::after{content: "＜"; position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-weight: 800;}
.tpNewBox p span.neT{font-size: min( 1.333vw , 2.0rem); color: #4c6583; display: inline-block; margin-right: 1em;}


.newsIcon span{position:relative; padding: 0.2em 2.5em 0.2em 1em; background-color: #8091A6; color: white;}
.newsIcon span a{color: white;}
.newsIcon span a:hover{color: white;}
.newsIcon span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 15px; width: min( 0.867vw , 13px); height: min( 0.867vw , 13px); border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
.newsIcon span::after {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 15px; width: min( 1vw , 15px); height: 2px; background-color: #fff;}


/* ----------------------------------------------------
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; /*justify-content: flex-start;*/}
/*#header .headInner #hd-logo {width: 10%;}
#header .headInner #hd-logo p {width: min(6vw, 90px); display: inline-block; margin-right: 1em;}*/
#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;}
#home #header .headInner #hd-logo span,
#ct_about #header .headInner #hd-logo span{color: #00234e;}


#header .headInner ul {padding-right: min(1.333vw, 20px);}
#home #header .headInner ul li a,
#ct_about #header .headInner ul li a{color: #00234e; margin:0  min(0.667vw, 10px); font-weight: 600;}
#header .headInner ul li a{color: #fff; margin:0  min(0.667vw, 10px); font-weight: 600;}
/*#header .headInner ul li:last-child a{margin-right: 0;}*/
#header.fixed {position: fixed; background: #fff; opacity: 0; animation: fade 0.9s ease  forwards;}
#header.fixed .headInner ul li a{color: #00234e;}
#header.fixed #hd-logo span{color: #00234e;}


#header.fixed .ctHead {display: none!important;}
#header.fixed .ctHeadFix {display: block!important;}
#header .ctHeadFix {display: none!important;}




@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: 0 auto; padding:0 0 min( 4.667vw , 70px ) 0; background-color: #00234e;}
#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;}


/* ----------------------------------------------------
home (common)
---------------------------------------------------- */
#homVisual {height: 60.667vw; max-height: 91rem; width: 100%; display: block !important; background: #00234e; position: relative;}
#homVisual .homSlider {background-repeat: no-repeat; background-size: cover; background-position: left top; height: 60.667vw; max-height: 91rem;  width: 100%; display: flex; display: -webkit-flex; align-items: center;}
/*#homVisual .homSlider::before{content: ""; width: 100%; height: 100%; background:rgba(0,0,0,0.1); position: absolute; left: 0; top: 0;}*/
.homSlider01 {background-image: url("../img/top/topSlide01.jpg"); background-position: center center;} 
.homSlider02 {background-image: url("../img/top/topSlide02.jpg"); background-position: center center;} 
.homSlider03 {background-image: url("../img/top/topSlide03.jpg"); background-position: center center;}
.homSlider04 {background-image: url("../img/top/topSlide04.jpg"); background-position: center center;}

.topMV_tx{position:absolute; top: 52%; left: 50%; transform: translate(-50%,-50%); width: min( 69.467vw , 1024px );}

/*トップページconcept*/
#concept{background-color:#00234e; padding: min( 6.667vw , 100px ) 0;}
#concept h2{width: 60%; margin: 0 auto min( 3.33vw , 100px ) auto; display: block;}
#concept .conceptRead{font-size: min( 1.867vw , 2.8rem ); color: white; text-align: center; line-height: 2.5;}

/*トップページMessage*/
#message :hover{opacity: 1!important;}
#message .grid1:hover,
#message .grid2:hover,
#message .grid3:hover,
#message .grid4:hover,
#message .grid5:hover{-webkit-filter:brightness(1.15);
    -moz-filter:brightness(1.15);
    -ms-filter:brightness(1.15);
    filter:brightness(1.15);}
#message{background:linear-gradient(180deg, #fff 0%, #fff 3%, #8091a6 3%, #8091a6 97%, #fff 97%, #fff 100% ); margin: min( 5.333vw , 80px ) 0;}
#message h3{display: none;}
#message .inrContent{background:url("../img/top/message_title.svg") no-repeat left center; background-size: auto 94%;}
#message .messRead{width:13%; writing-mode: vertical-rl; font-size: min( 1.467vw , 2.2rem ); line-height: 2.2; font-weight: 600;　text-orientation: upright; padding-right: 2em;}
#message .messButAria{width:87%; display: grid;
  grid-template-columns: 50% 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: min( 1.33vw , 20px );
grid-row-gap: min( 1.33vw , 20px );
  grid-auto-flow: row;
  grid-template-areas:
    "grid1 grid2 grid3"
    "grid1 grid4 grid5";
	height: min( 50.663vw , 760px );
}
.grid1 {grid-area: grid1; background: url("../img/top/mess_president.jpg") no-repeat 0 0; background-size: cover; }

.grid2 { grid-area: grid2; background: url("../img/top/mess_new.jpg") no-repeat 0 0; background-size: cover;}
.grid3 { grid-area: grid3; background: url("../img/top/mess_carrer.jpg") no-repeat 0 0; background-size: cover;}
.grid4 { grid-area: grid4; background: url("../img/top/mess_handy.jpg") no-repeat 0 0; background-size: cover;}
.grid5 { grid-area: grid5; background: url("../img/top/mess_matehan.jpg") no-repeat 0 0; background-size: cover;}
.grid1:hover {filter: alpha(opacity=60) !important;	opacity: .6 !important;
  -webkit-transition: all 0.2s ease-in-out!important; -moz-transition: all 0.2s ease-in-out!important; -o-transition: all 0.2s ease-in-out!important; transition: all 0.2s ease-in-out!important;}
/*.grid2:hover {background: url("../img/top/mess_new.jpg") no-repeat 0 0; background-size: cover; filter: alpha(opacity=60) !important;	opacity: .6 !important;
  -webkit-transition: all 0.2s ease-in-out!important; -moz-transition: all 0.2s ease-in-out!important; -o-transition: all 0.2s ease-in-out!important; transition: all 0.2s ease-in-out!important;}
.grid3:hover {background: url("../img/top/mess_carrer.jpg") no-repeat 0 0; background-size: cover; filter: alpha(opacity=60) !important;	opacity: .6 !important;
  -webkit-transition: all 0.2s ease-in-out!important; -moz-transition: all 0.2s ease-in-out!important; -o-transition: all 0.2s ease-in-out!important; transition: all 0.2s ease-in-out!important;}
.grid4:hover {background: url("../img/top/mess_handy.jpg") no-repeat 0 0; background-size: cover; filter: alpha(opacity=60) !important;	opacity: .6 !important;
  -webkit-transition: all 0.2s ease-in-out!important; -moz-transition: all 0.2s ease-in-out!important; -o-transition: all 0.2s ease-in-out!important; transition: all 0.2s ease-in-out!important;}
.grid5:hover {background: url("../img/top/mess_matehan.jpg") no-repeat 0 0; background-size: cover; filter: alpha(opacity=60) !important;	opacity: .6 !important;
  -webkit-transition: all 0.2s ease-in-out!important; -moz-transition: all 0.2s ease-in-out!important; -o-transition: all 0.2s ease-in-out!important; transition: all 0.2s ease-in-out!important;}*/


#message .mesBtWrap{position:relative;}
#message .mesBt{position: absolute; bottom: 0; left: 0; display: inline; z-index: 3; margin-bottom: 0; color: white; background-color: #00234e; padding: 0.5em 0.3em; line-height: 1.3;}
#message .mesBt span{position:relative; padding-right: 1.3em;}
#message .mesBt span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 2px;width: min( 1.067vw , 16px); height: min( 1.067vw , 16px); background: url("../img/common/aroow_w.svg") no-repeat right center;}
#message .presiText{position:absolute; left: 5%; top: 5%; writing-mode: vertical-rl; font-size: min( 1.467vw , 2.2rem ); line-height: 2.2; font-weight: 600;　text-orientation: upright; }

.mesBtWrap a{width: 100%; height: 100%; display: flex; display: -webkit-flex; justify-content: center;}
.mesBtWrap a:hover{filter: alpha(opacity=60) !important;	opacity: .6 !important;
  -webkit-transition: all 0.2s ease-in-out!important; -moz-transition: all 0.2s ease-in-out!important; -o-transition: all 0.2s ease-in-out!important; transition: all 0.2s ease-in-out!important;}


span.menteAarow::before{top:inherit!important; bottom: min( 0.2vw , 3px)!important;}
span.menteAarow::after{top:inherit!important; bottom: min( 0.6vw , 9px)!important;}


/*.grid1 a:hover{background: url("../img/top/mess_president.jpg") no-repeat 0 0; opacity: 0.6;}*/




/*トップメッセージ　モーダル指定*/
.tpMessMordel{background-color: rgba(255,255,255,0.8); width: 75%; max-width: 1120px; margin: 0 auto; position: relative; opacity: 0; transition: opacity 1s; padding: min( 9vw , 130px ) 0;}
/*.popup-modal-dismiss{position: absolute; top: 2%; left: 2%;}*/
.tpMessMordel.mfp-ready{opacity: 0.8;}
.tpMessMordel.mfp-removing{opacity: 0;}
.tpMessMordel .contenerIn{width:79%; margin: 0 auto 3em auto;}

.tpMessMordel .contenerIn .mesPopCtTex{width:100%;}
.tpMessMordel .contenerIn .mesPopCtTex_presi{width:57%;}

.tpMessMordel .contenerIn .mesPopPhoto{width: 34%;}
.tpMessMordel .contenerIn .mesPopCtTex h3{font-size: min( 1.6vw , 2.4rem ); margin-bottom: 1em; font-weight: 600; text-align: center;}
.tpMessMordel .contenerIn .mesPopCtTex_presi h3{font-size: min( 1.6vw , 2.4rem ); margin-bottom: 1em; font-weight: 600; text-align: left;}

.tpMessMordel .contenerIn .mesPopPhoto .mesPopName{margin-top: 1em; text-align: center;}
.tpMessMordel .contenerIn .mesPopPhoto .mesPopName span{font-size: min( 1.733vw , 2.6rem ); font-weight: 600; display: block;}




/*トップページWhatsASKUL*/	
#whatsAskul	{background-color: #ccd3dc; padding: min( 2.667vw , 40px) 0; position: relative;}
/*#whatsAskul:hover{cursor: pointer; opacity: 0.4;}*/
#whatsAskul h3{display: none;}
#whatsAskul .whatInner{width: 70%; max-width: 1000px; margin-left: auto; margin-right: auto; position: relative; display: flex; display: -webkit-flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; padding: min( 3.667vw , 55px) 0;}
#whatsAskul .whatsBox,
#whatsAskul .askulBox{width: 35%; text-align: center;}
#whatsAskul .whatsBox p,
#whatsAskul .askulBox p{text-align: center; font-weight: 600; width: 100%;}
#whatsAskul .t_wahts,#whatsAskul .t_askul{margin-bottom: min( 3.66vw , 55px);}
#whatsAskul .t_wahts{background: url("../img/top/whats.svg") no-repeat 0 0;}
#whatsAskul .t_askul{background: url("../img/top/askul.svg") no-repeat 0 0;}

#whatsAskul .askulMark{width: 15%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#whatsAskul .wrkBt{display: inline; z-index: 3; margin-bottom: 0; background-color: #00234e; padding: 0.2em 1em;}
#whatsAskul .wrkBt span{position:relative; padding-right: 1.3em; color: #fff;}
#whatsAskul .wrkBt span a{color: #fff;}
#whatsAskul .wrkBt span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 2px; width: min( 1.067vw , 16px); height: min( 1.067vw , 16px); background: url("../img/common/aroow_w.svg") no-repeat right center;}
.whatsRead img{width:50%;}

#whatsAskul:hover{background-color: #fff;}
#whatsAskul:hover .t_wahts{background: url("../img/top/whats_ov.svg") no-repeat 0 0;}
#whatsAskul:hover .t_askul{background: url("../img/top/askul_ov.svg") no-repeat 0 0;}
#whatsAskul.clickable{transition: all 0s ease-in-out;}
#whatsAskul .readmoreBut{background: url("../img/common/readmoreBut.svg");}
#whatsAskul.clickable a:hover{transition: all 0s ease-in-out!important; filter: alpha(opacity=100)!important; opacity: 1!important;}


/*トップページjob_mem*/
.jobmSP_t{display:none;}
#job_mem{background-color: #ccd3dc; padding: 0 0 min( 5.333vw , 80px ) 0;}
.jobmemTitle{background-color: #fff; padding: min( 5.333vw , 80px ) 0 0 0;}
.jobmemTitle h3{color: #8091a6; font-size: min( 4.4vw , 6.6rem ); padding: 0; margin: 0; letter-spacing: 0.05em; font-weight: 600; line-height: 0.85;}
#job_mem .jmInner{width: 73%; max-width: 1100px; margin: 0 auto;}
#job_mem .jmInner .jm2clum{width: 47%; text-align: center;}
#job_mem .jmInner .jm2clum2{width: 47%; text-align: center;}
#job_mem .jmInner .jm2clum .jmImg{transition: transform .6s ease;}
#job_mem .jmInner .jm2clum:hover .jmImg{transform: scale(1.1);}
#job_mem .jmInner .jm2clum:hover {opacity: 0.6!important;}

#job_mem .jmInner .jm2clum .jmRead{margin: min( 1.667vw , 25px ) 0;}

#job_mem .jmInner .jm2clum .jmLink span{position:relative; padding: 0.2em 2.5em 0.2em 1em; background-color: #00234e; color: white;}
#job_mem .jmInner .jm2clum .jmLink span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 15px; width: min( 0.867vw , 13px); height: min( 0.867vw , 13px); border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
#job_mem .jmInner .jm2clum .jmLink span::after {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 15px; width: min( 1vw , 15px); height: 2px; background-color: #fff;}	

.jmImg{position:relative;}
.jmLink{position:absolute; bottom: 1px; right: 0; z-index: 5;}



/*トップページstory*/
#story {position:relative; margin-top: min( 5.333vw , 80px );}
#story .inrContent{position:relative;}
#story .storyTitle{position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4%; z-index: 6;}
#story #project,
#story #dx{min-height: min( 46.667vw , 700px ); width: 50%; display: flex; display: -webkit-flex; justify-content: center; align-content: center; flex-wrap: wrap; flex-flow: column; position: relative;}
#story #project::before,
#story #dx::before{width: 100%; height: 100%; background-color: rgba(0,35,78,0.5); position: absolute; top: 0; left: 0; content: "";}
#story #project:hover::before,
#story #dx:hover::before{width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; content: ""; transition: all 0.2s ease-in-out!important;}
#story #project{background: url("../img/top/project_photo.jpg") no-repeat 0 0; background-size: cover;}
#story #dx{background: url("../img/top/dx_photo.jpg") no-repeat 0 0; background-size: cover;}
#story h3{width: 32%; margin: 0 auto; z-index: 3;}
#story .storyText{color: white; text-align: center; margin: 2em 0; z-index: 3;}
#story #project a, #story #dx a{width:100%; height: 100%; z-index: 4; position: absolute;}
#story .jobBt{display: inline-block; text-align: center; width: 100%; z-index: 3; margin-bottom: 0;}
#story .jobBt {color: white;}
#story .jobBt span{position:relative; padding-right: 1.3em;}
#story .jobBt span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 2px; width: min( 1.067vw , 16px); height: min( 1.067vw , 16px); background: url("../img/common/aroow_w.svg") no-repeat right center;}


#story .wrkBt{display: inline; text-align: center; z-index: 3; margin-bottom: 0;}
#story .wrkBt span{background-color: #00234e; position:relative; color: #fff; padding: 0.2em 2.5em 0.2em 1em;}
#story .wrkBt span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 15px;width: min( 1.067vw , 16px); height: min( 1.067vw , 16px); background: url("../img/common/aroow_w.svg") no-repeat right center;}


/*#whatsAskul .wrkBt{display: inline; z-index: 3; margin-bottom: 0; color: whatsAskul; background-color: #fff; padding: 0.2em 1em;}
#whatsAskul .wrkBt span{position:relative; padding-right: 1.3em; color: #00234e;}
#whatsAskul .wrkBt span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 2px; width: min( 0.867vw , 13px); height: min( 0.867vw , 13px); border-top: 2px solid #00234e; border-right: 2px solid #00234e; transform: rotate(45deg);}
#whatsAskul .wrkBt span::after {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 1px; width: min( 1vw , 15px); height: 2px; background-color: #00234e;}*/


/*トップページWORK STYLE*/
#work_style{background:linear-gradient(180deg, #fff 0%, #fff 3%, #8091a6 3%, #8091a6 97%, #fff 97%, #fff 100% ); margin: min( 5.333vw , 80px ) 0;}
#work_style h3{display: none;}
#work_style .inrContent{background:url("../img/top/work_style_title.svg") no-repeat left center; background-size: auto 94%; width: 70%; max-width: 1060px;}
#work_style .wrkRead{width:12%; writing-mode: vertical-rl; font-size: min( 2.4vw , 3.6rem ); line-height: 2.2; font-weight: 600;　text-orientation: upright;}

#work_style .wrkP{width:85%; position: relative; background: url("../img/top/work_style_photo.jpg") no-repeat 0 0; height: min( 39.8vw , 597px ); background-size: cover;}


#work_style .wrkP a{position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%;}
#work_style .wrkP a:hover::before{width: 100%; height: 100%; background-color: rgba(255,255,255,0.5); position: absolute; top: 0; left: 0; content: ""; transition: all 0.7s ease-in-out!important;}
#work_style .wrkP a.clickable{}




#work_style .wrkBt{position: absolute; bottom: 0; right: 0; display: inline; z-index: 3; margin-bottom: 0; color: white; background-color: #00234e; padding: 0.2em 1em;}
#work_style .wrkBt span{position:relative; padding-right: 1.3em;}
#work_style .wrkBt span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 2px;width: min( 1.067vw , 16px); height: min( 1.067vw , 16px); background: url("../img/common/aroow_w.svg") no-repeat right center;}

.wrkP .homSlider {background-repeat: no-repeat; background-size: cover; background-position: left top; height: min( 39.6vw , 594px ); max-height: 59.4rem;  width: 100%; display: flex; display: -webkit-flex; align-items: center;}
.workSlider01 {background-image: url("../img/top/work_style_photo.jpg"); background-position: center center;} 
.workSlider02 {background-image: url("../img/top/work_style_photo02.jpg"); background-position: center center;} 

/*トップページ採用情報*/
#recruit{background-color: #00234e; padding-bottom: min( 6.667vw , 100px );}
#recruit h3{font-size: min( 2.667vw , 4rem ); text-align: center; font-family: 'Libre Franklin', sans-serif; color: #fff; letter-spacing: 0.18em; font-weight: 600; padding: min( 4vw , 60px ) 0;}
#recruit ul li{background-color: white; display: block; position: relative; text-align: center; width: 24%; height: min( 6.667vw , 100px ); line-height: min( 6.667vw , 100px ); font-weight: 600;}
#recruit ul li a{width: 100%; height: 100%; display: flex; display: -webkit-flex; justify-content: center; align-items: center;}
#recruit li a:hover{filter: alpha(opacity=60) !important;	opacity: .6 !important;
  -webkit-transition: all 0.2s ease-in-out!important; -moz-transition: all 0.2s ease-in-out!important; -o-transition: all 0.2s ease-in-out!important; transition: all 0.2s ease-in-out!important;}

#recruit ul li .triangle{display: block; height: 0; width: 0; position: absolute; bottom: 6px; right: 6px; border-left: min( 1.33vw , 20px ) solid transparent; border-bottom: min( 1.33vw , 20px ) solid #00234e;}


/* ----------------------------------------------------
コンテンツタイトル
---------------------------------------------------- */
.contentsTitle{padding: min( 18vw , 270px ) 0 min( 2vw , 30px ) 0; font-size: min( 2.233vw , 3.5rem ); color: white; text-align: center; font-weight: 600; letter-spacing: 0.1em;}
.contentsTitle p,.contentsSubTitle p{position: relative; margin-bottom: 2em;}
.contentsTitle p span,.contentsSubTitle p span{position: absolute; top: 0.3em; left: 50%; transform: translateX(-50%); color: #334f71; font-size: min( 4.8vw , 7.2rem ); font-family: 'Libre Franklin', sans-serif; line-height: 1; z-index: -1; width: 100%;}
.contTopRead{color: white; text-align: center; line-height: 2.4;}

.contentsSubTitle{padding: min( 4.667vw , 70px ) 0 0 0; font-size: min( 2.233vw , 3.5rem ); color: white; text-align: center; font-weight: 600; letter-spacing: 0.1em;}




/* ----------------------------------------------------
What's ASKUL
---------------------------------------------------- */
#ct_about .contentsTitle{color:#00234e;}
#ct_about .contTopRead{color:#00234e;}

#ct_about{position: relative;}
#ct_about .aboutBack{background:url("../img/about/main_bg.jpg") no-repeat 0 0; background-size: cover; width: 100%; height: min( 53.33vw , 800px ); position: absolute; top: 0; left: 0; }
#ct_about .triangle{margin: min( 4.667vw , 70px ) auto min( 11.3vw , 170px ) auto; width: 65%; max-width: 970px;}
#ct_about .triangle h3{font-size: min( 2.133vw , 3.2rem ); font-weight: 600; text-align: center; margin-bottom: min( 3.667vw , 55px );}

.numberWrap{}
.numberWrap li{margin: 0 0 min( 2vw , 30px ) 0; border: 3px solid #e5e9ed;}
.numberWrap li:first-child{border: none;}
.numberWrap li img{object-fit: cover; width: 100%; height: 100%;}
.numberWrap .numTitle{width: 26%;}
.numberWrap .num01{width: 28%;}
.numberWrap .num02{width: 19%;}
.numberWrap .num03{width: 19%;}
.numberWrap .num04{width: 32%;}
.numberWrap .num05{width: 31%;}
.numberWrap .num06{width: 32%;}
.numberWrap .num07{width: 23%;}
.numberWrap .num08{width: 23%;}
.numberWrap .num09{width: 23%;}
.numberWrap .num10{width: 23%;}

.lightBlue{background-color: #ccd3dc; padding: min( 3.667vw , 55px ) 0 min( 4.667vw , 70px ) 0; }
.serviceWrap{margin-top: min( 4.667vw , 70px );}
.serviceWrap h4{margin-bottom: min( 4.667vw , 70px ); margin-bottom: min( 3.667vw , 55px ); font-size: min( 2.267vw , 3.4rem ); color: white; font-weight: 600; background-color: #00234e; text-align: center;}
.servRead{margin-bottom: min( 3.667vw , 55px ); text-align: center;}


.sevcontainer img{width:80%; margin: 0 auto;}
.sevcontainer {  display: grid;
  grid-template-columns: 43% 27% 27%;
  /*grid-template-rows: /*1fr26em;*/
  gap: 0px min( 1.333vw , 20px );
  grid-auto-flow: row;
  grid-template-areas:
    "sev01 sev02 sev03";
}

.sev02 {
	background-color: white;
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 0.8fr 1.2fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "sev02img"
    "sev02name"
    "sev02text"; 
  grid-area: sev02; 
}
.sev02img { grid-area: sev02img; text-align: center; align-self: center; }
.sev02name { grid-area: sev02name; }
.sev02text { grid-area: sev02text; }
.sev01 {
	background-color: white;
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 0.8fr 1.2fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "sev01topImg"
    "sev01topName"
    "sev01text"; 
  grid-area: sev01; 
}
.sev01topImg {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "sev01_01img sev01_02img"; 
  grid-area: sev01topImg; 
}
.sev01_01img { grid-area: sev01_01img; text-align: center; align-self: center; }
.sev01_02img { grid-area: sev01_02img; text-align: center; align-self: center; }
.sev01topName {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "sev01_01name sev01_02name"; 
  grid-area: sev01topName; 
}
.sev01_01name { grid-area: sev01_01name; }
.sev01_02name { grid-area: sev01_02name; }
.sev01text { grid-area: sev01text; }
.sev03 {
	background-color: white;
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 0.8fr 1.2fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "sev03img"
    "sev03name"
    "sev03text"; 
  grid-area: sev03; 
}
.sev03img { grid-area: sev03img; text-align: center; align-self: center; }
.sev03name { grid-area: sev03name; }
.sev03text { grid-area: sev03text; }

.sev02name,.sev03name {text-align:center; padding: 0 1em; font-weight: 600;} 
.sev01_01name,.sev01_02name  {text-align:center; padding: 0 0.5em; font-weight: 600;} 
.sev01text,.sev02text,.sev03text {text-align:center; font-size: min( 1.067vw , 1.6rem );}  

.servBtLineTx{text-align:center; font-size: min( 1.067vw , 1.6rem ); border-top: 6px solid #ccd3dc;padding-top: min( 1.333vw , 20px );}


.sev01,.sev02,.sev03{/*height:24em;*/height:21.6em;}
.sev01topImg,.sev02img,.sev03img{/*height:11em;*/height:9em;}
.sev01_01name,.sev01_02name,.sev02name,.sev03name{height: 3.5em; font-size: min( 1.2vw , 1.8rem ); }







.servTab01{width: 48%; margin: 0 auto; background-color: white;}
.servTab01 th{width: 50%;}
.servTab01 th img{width: 82%;}
.servTab01 td{padding: min( 1.333vw , 20px );}

.servName{text-align:center; font-weight: 600; font-size: min( 1.2vw , 1.8rem ); margin-bottom: min( -1.333vw , -20px ); }

.servTab02{width: 85%; margin: min( 1.667vw , 25px ) auto 0 auto; background-color: white;}
.servTab02 th img{width: 75%;}
.servTab02 th{padding-top: min( 1.333vw , 20px );}
.servTab02 td{padding: min( 1.333vw , 20px );}
.servTab02 td.vrt_Top{vertical-align: top;}
.servTab02 .blueSideLine{background-color:#ccd3dc; width: 2%;}
.servTab02 td{width: 32%;}

.servTab02_sp{display: none;}






.attemptWrap{margin-top: min( 4.667vw , 70px );}
.attemptWrap h4{margin-bottom: min( 4.667vw , 70px ); margin-bottom: min( 3.667vw , 55px ); font-size: min( 2.267vw , 3.4rem ); color: white; font-weight: 600; background-color: #00234e; text-align: center;}
.attemptWrap ul{display: flex; display: -webkit-flex; justify-content: space-between;}
.attemptWrap ul li{width: 24%;}

.attemptWrap ul li .listInner{display: flex; display: -webkit-flex; flex-direction: column; background-color: red;}


.attemptWrap ul li .servImg{}
/*.attemptWrap ul li .servName{flex-grow: 1;}*/
.attemptWrap ul li .servTxt{}



.attemptcontainer {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px min( 1.333vw , 20px );
  grid-auto-flow: row;
  grid-template-areas:
    "attempt01 attempt02 attempt03";
	width: 75%;
	margin: 0 auto;
}

.attempt01 {
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: min( 16vw , 240px ) 1fr 1fr; 
  gap: 0 0px; 
  grid-template-areas: 
    "atp01_img"
    "atp01_name"
    "atp01_txt"; 
  grid-area: attempt01; 
}
.atp01_img { grid-area: atp01_img; }
.atp01_name { grid-area: atp01_name; align-self: center; font-weight: 600; text-align: center;}
.atp01_txt { grid-area: atp01_txt; border-top: 6px solid #fff;}
.attempt02 {
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: min( 16vw , 240px ) 1fr 1fr; 
  gap: 0 0px; 
  grid-template-areas: 
    "atp02_img"
    "atp02_name"
    "atp02_txt"; 
  grid-area: attempt02; 
}
.atp02_img { grid-area: atp02_img; }
.atp02_name { grid-area: atp02_name; align-self: center; font-weight: 600; text-align: center;}
.atp02_txt { grid-area: atp02_txt; border-top: 6px solid #fff;}
.attempt03 {
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: min( 16vw , 240px ) 1fr 1fr; 
  gap: 0 0px; 
  grid-template-areas: 
    "atp03_img"
    "atp03_name"
    "atp03_txt"; 
  grid-area: attempt03; 
}
.atp03_img { grid-area: atp03_img; }
.atp03_name { grid-area: atp03_name; align-self: center; font-weight: 600; text-align: center;}
.atp03_txt { grid-area: atp03_txt; border-top: 6px solid #fff;}


.aptIn{margin-top:1em;}

.atp01_name,.atp02_name,.atp03_name{font-size: min( 1.2vw , 1.8rem );}
.atp01_txt,.atp02_txt,.atp03_txt{font-size: min( 1.067vw , 1.6rem );}

#ct_about #footer {background-color: #ccd3dc;}
#ct_about #footer .ftCopy {color: #00234e;}
#ct_about #footer .snsLinkTx a{color: #00234e;}

.sev03img img,.sev02img img{width:63.7%; margin: 1em auto 0 auto;}



/* ----------------------------------------------------
職種紹介
---------------------------------------------------- */
#jobWrap_sp{display:none;}
#jobWrap {width: 66%; max-width: 1000px; margin: min( 6.667vw , 100px ) auto min( 11.3vw , 170px ) auto; position: relative; background: url("../img/jobs/illust_back.png")no-repeat center bottom; background-size: 100% auto; min-height: min( 42.667vw , 640px ); display: block;}
#jobWrap .iconIllust{width: min( 9.8vw , 147px ); text-align: center; margin-bottom: 0.8em;}
#jobWrap .iconIllust.innCircle{width: min( 8vw , 120px );}
#jobWrap .iconText{margin: min( -1.33vw , -20px ) 0 0 0;}
#jobWrap .job_illustBt a{display: flex; display: -webkit-flex; align-items: center; flex-flow: column;}
.iconText span{background-color: white; font-size: min( 1.067vw , 1.6rem ); font-weight: 600; padding: 0.01em 0.3em;}
#jobWrap .jobIcon01 {position: absolute; top: min( -1vw , -15px ); left: min( 28.333vw , 425px );}
#jobWrap .jobIcon02 {position: absolute; top: min( 2.467vw , 37px ); left: min( 48.333vw , 725px );}
#jobWrap .jobIcon03 {position: absolute; top: min( 15.33vw , 230px ); right: 0;}
#jobWrap .jobIcon04 {position: absolute; top: min( 28vw , 420px ); left: min( 48.333vw , 725px );}
#jobWrap .jobIcon05 {position: absolute; bottom: 0; left: min( 32.667vw , 490px );}
#jobWrap .jobIcon06 {position: absolute; bottom: 0; left: min( 17vw , 255px );}
#jobWrap .jobIcon07 {position: absolute; bottom: min( 6.667vw , 100px ); left: min( 2.467vw , 37px );}
#jobWrap .jobIcon08 {position: absolute; top: min( 10.533vw , 158px ); left: 0;}
#jobWrap .jobIcon09 {position: absolute; top: min( 1vw , 15px ); left: min( 13.133vw , 197px );}
#jobWrap .jobIcon10 {position: absolute; bottom: min( 16vw , 240px ); left: min( 42.8vw , 657px );}
#jobWrap .jobIcon11 {position: absolute; bottom: min( 16vw , 240px ); left: min( 13.333vw , 200px );}

.job_illustBt{transition: transform .6s ease;}
.job_illustBt:hover{transform: scale(1.2);}
.job_illustBt a img:hover,.job_illustBt a:hover{opacity: 1!important;}



.jobIconClick{margin:4em 0 0 0; text-align: center; color: white; position: relative;}
.jobIconClick::after{content: ""; width: min( 2.667vw , 40px ); height: min( 1.333vw , 20px ); background:url("../img/jobs/jobIconArrow.svg") no-repeat 0 0; position: absolute; left: 50%; bottom: -2em; transform: translateX(-50%);}

/*モーダル指定*/
.jobMordel{background-color: rgba(255,255,255,0.8); width: 53%; max-width: 800px; margin: 0 auto; position: relative; opacity: 0; transition: opacity 1s; padding: min( 6vw , 90px ) 0;}
/*.popup-modal-dismiss{position: absolute; top: 2%; left: 2%;}*/
.jobMordel.mfp-ready{opacity: 0.8;}
.jobMordel.mfp-removing{opacity: 0;}
.mfp-wrap .mfp-content{opacity: 0; transition: opacity 0.6s;}
.mfp-wrap.mfp-ready .mfp-content {opacity: 1;}
.mfp-wrap.mfp-removing .mfp-content {opacity: 0;}
.jobMordel h3{padding: 0 0 min( 2.33vw , 35px ) 0; text-align: center;}
.jobMordel h3 span{background-color: #00234e; color: white; font-size: min( 2vw , 30px ); font-weight: 600; padding: 0.1em 0.3em;}
.jobMordel .contenerIn{width:83.7%; margin: 0 auto;}
.jobMordel .contenerIn .jobCtTex{width:53.7%;}
.jobMordel .contenerIn .jobCtTex h4{color: #667b95; font-size: min( 1.33vw , 2rem ); line-height: 2; font-weight: 600;}
.jobMordel .contenerIn .jobCtTex .jobCtRead{}
.jobMordel .contenerIn .jobCtTex .jobCtLinkRead{color: #667b95; margin-top: 1.5em; margin-bottom: 0; font-weight: 600;}
.jobMordel .contenerIn .jobCtTex .workManLink{position: relative; padding-left: 1.5em; margin-bottom: 0;}
.jobMordel .contenerIn .jobCtTex .workManLink::before {content: "→"; position: absolute; top: 0.2em; left: 0; color: #667b95;}
.jobMordel .contenerIn .jobCtTex .workManLink span a{color: #b64c1e; text-decoration: underline; font-size: min( 1.33vw , 2rem ); font-weight: 600;}
.jobMordel .contenerIn .jobCtIllust{width:40.7%;}

.jobMordel .contenerIn .jobCtTex ul{margin-left: 1em;}
.jobMordel .contenerIn .jobCtTex ul li{list-style:decimal; margin-bottom: 0.8em;}

#job06Contener .workManLink,#job10Contener .workManLink{display:inline-block; margin-right: 1.5em;}
#job06Contener .flex,#job10Contener .flex{justify-content: flex-start;}




/* ----------------------------------------------------
社員紹介index
---------------------------------------------------- */
#occupation {margin-top: 4em;}
#occupation .ocInner{width: 89%; max-width: 1070px; margin: 0 auto;}
.mateUl{width: 92%!important; max-width: 1100px!important;}

#occupation .ocInner.dep01{background: url("../img/employee/depTitle01.svg") no-repeat 0 0; background-size: 3% auto;}
#occupation .ocInner.dep02{background: url("../img/employee/depTitle02.svg") no-repeat 0 0; background-size: 3% auto;}
#occupation .ocInner.dep03{background: url("../img/employee/depTitle03.svg") no-repeat 0 0; background-size: 7% auto;}
#occupation .ocInner h3{writing-mode: vertical-rl; font-size: min( 1.867vw , 2.8rem ); line-height: 2; font-weight: 600; text-orientation: upright; color: white; position: relative; width: 8%;}
#occupation .ocInner h3 p{display: none;}
#occupation .ocInner ul{width: 92%; margin-bottom: min( 10vw , 150px );}
#occupation .ocInner ul.flex{justify-content: flex-start;}
#occupation .ocInner ul li{position: relative; margin-bottom: min( 5.667vw , 85px ); width: 30%; margin-right: 5%;}
#occupation .ocInner ul li.flex{flex-flow: column;}
#occupation .ocInner ul li:nth-of-type(3n){margin-right: 0;}
#occupation .ocInner ul li img{transition: transform .6s ease;}
#occupation .ocInner ul li:hover img{transform: scale(1.1);}
#occupation .ocInner ul li p{margin-bottom: 0;}
#occupation .ocInner ul li p.ocSpec{position: absolute; top: 73%; left: 50%; transform: translateX(-50%); background-color: white; width: 70%; text-align: center; font-weight: 600; padding: 0.8em 0.3em;}
#occupation .ocInner ul li p.ocSpec span{display: block; width: 100%;}
#occupation .ocInner ul li p.ocSpec span.ocDepartment{font-size: min( 1vw , 1.5rem );}
#occupation .matehanBnr{background:url("../img/employee/bnr_matehan.jpg") no-repeat 0 0; background-size: cover; border: 7px solid #00234e; width: min( 40vw , 600px ); margin: 0 auto; position: relative; margin-bottom: min( 7.33vw , 110px ); padding: min( 4.667vw , 70px ) 0; text-align: center;}
#occupation .matehanBnr::before{border: 1px solid #fff; position: absolute; top: min( -0.667vw , -10px ); left: min( -0.667vw , -10px ); bottom: min( -0.667vw , -10px ); right: min( -0.667vw , -10px ); content: "";}
#occupation .matehanBnr p{margin-bottom:0; text-align: center; background-color: #00234e; display: inline; padding: 0.1em 0.5em;}
#occupation .matehanBnr p span{color: white; font-weight: 600; position: relative; padding-right: 1.3em;}
#occupation .matehanBnr p span a{color: white;}
#occupation .matehanBnr p span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 2px; width: min( 0.867vw , 13px); height: min( 0.867vw , 13px); border-top: 2px solid white; border-right: 2px solid white; transform: rotate(45deg);}
#occupation .matehanBnr p span::after {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 1px; width: min( 1vw , 15px); height: 2px; background-color: white;}

/*社員紹介下層*/
#staffWrap{width:67%; max-width: 1000px; margin: min( 22vw , 330px ) auto min( 4.667vw , 70px ) auto; position: relative;}
#staffWrap .stMain{width:66%; margin: 0 auto; position: absolute; top: min( -8vw , -120px ); left: 50%; transform: translateX(-50%);}
#staffWrap .stMain .stM_img{width:63%; min-height: min( 20vw , 300px );}
#staffWrap .stMain .stM_tx{width:33%; flex-flow: column; justify-content: center;}

#staffWrap .stMain.stM06{width:76%; margin: 0 auto; position: absolute; top: min( -8vw , -120px ); left: 50%; transform: translateX(-50%);}
#staffWrap .stMain.stM06 .stM_img{width:53%; min-height: min( 20vw , 300px );}
#staffWrap .stMain.stM06 .stM_tx{width:43%; flex-flow: column; justify-content: center;}

#staffWrap .stMain .stM_tx .st_Name{color: white; font-size: min( 1.6vw , 2.4rem ); margin-bottom: 0; font-weight: 600; margin-top: 2.5em;}
#staffWrap .stMain .stM_tx .st_Spec{font-size: min( 1.067vw , 1.6rem ); margin: 2.5em 0 0 0;}
#employeeStaff .fracWhiteBox{padding-top:min( 16vw , 240px )}
#employeeStaff .fracInnaer{width:100%;}
.st_annotation{font-size: min( 0.8vw , 1.2rem ); text-align: right; width: 80%; margin: 0 auto;}
.stUnder_bt{margin-top: min( 4.667vw , 70px );}
.stUnder_bt li{width: 47%; margin-bottom: min( 2vw , 30px );}
.stUnder_bt .ocImg{width: 33%;}
.stUnder_bt .ocSpec{width: 67%; background-color: white; justify-content: center; align-items: center; text-align: center; flex-flow: column;}
.stUnder_bt .ocSpec .ocDepartment{font-size: min( 1.2vw , 1.8rem); display: block; font-weight: 600;}
.stUnder_bt .ocSpec .ocName{font-size: min( 1.6vw , 2.4rem ); display: block; font-weight: 600;}

.stUnder_bt.enj{justify-content: center;}
.stUnder_bt.enj .ocSpec .ocDepartment{letter-spacing: -0.1em;}




/* ----------------------------------------------------
プロジェクトストーリーindex
---------------------------------------------------- */
#ct_project{position: relative;}
#ct_project .projectBack{background:url("../img/project/main_bg.jpg") no-repeat 0 0; background-size: cover; width: 100%; height: min( 53.33vw , 800px ); position: absolute; top: 0; left: 0; }
.prBnWrap{width:72%; max-width: 1090px; margin: min( 9.333vw , 140px ) auto min( 4.667vw , 70px ) auto;}
.prBnWrap.flex{justify-content: center;}
.prBnWrap .prBn{width:47%; min-height: min( 22.667vw , 340px ); margin-bottom: min( 3.667vw , 55px )}
.prBnWrap .prBn:first-child{margin-right: 5%;}
.prBnWrap .prBn.flex{flex-flow: column; justify-content: center; align-items: center;}
.prBnWrap .prBn h3{width: 100%; padding-top: 1em; z-index: 3;}
.prBnWrap .prBn .prBnRead{color: white; display: block; margin: min( 1.667vw , 25px ) 0 min( 2vw , 30px ) 0; text-align: center; z-index: 3;}
.prBnWrap .prBn .moreBt{margin-bottom: 0; color: white; z-index: 3;}
.prBnWrap .prBn .moreBt span a{color: white;}
.prBnWrap .prBn .moreBt span{background-color: #00234e; position:relative; color: #fff; padding: 0.2em 2.5em 0.2em 1em;}
.prBnWrap .prBn .moreBt span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 15px; width: min( 1.067vw , 16px); height: min( 1.067vw , 16px); background: url("../img/common/aroow_w.svg") no-repeat right center;}
.prBnWrap .prBack01{background: url("../img/project/storyBg01.jpg") no-repeat 0 0; background-size: cover;}
.prBnWrap .prBack02{background: url("../img/project/storyBg02.jpg") no-repeat 0 0; background-size: cover;}
.prBnWrap .prBack03{background: url("../img/project/storyBg03.jpg") no-repeat 0 0; background-size: cover;}



.prBnWrap .prBack01,.prBnWrap .prBack02,.prBnWrap .prBack03{position: relative;}

.prBnWrap .prBack01::before,
.prBnWrap .prBack02::before,
.prBnWrap .prBack03::before{width: 100%; height: 100%; background-color: rgba(0,35,78,0.5); position: absolute; top: 0; left: 0; content: "";}

.prBnWrap .prBack01:hover::before,
.prBnWrap .prBack02:hover::before,
.prBnWrap .prBack03:hover::before{width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; content: ""; transition: all 0.2s ease-in-out!important; opacity: 1!important;}

.prBnWrap .prBack01:hover,
.prBnWrap .prBack02:hover,
.prBnWrap .prBack03:hover{opacity: 1!important;}



/*project下層*/
.proInrContent{width: 66%; max-width: 1000px; margin: min( 17.333vw , 260px ) auto min( 4.667vw , 70px ) auto;}
.proInrContent02{width: 80%; max-width: 1200px; margin: min( 17.333vw , 260px ) auto min( 4.667vw , 70px ) auto;}
.proInrContent .prCatch,.proInrContent02 .prCatch{text-align: center; color: white; font-size: min( 1.867vw , 2.8rem ); font-weight: 600; letter-spacing: 0.1em;}
.proInrContent .projectRead,.proInrContent02 .projectRead{text-align: center; color: white; margin: min( 2vw , 30px ) 0 min( 7.333vw , 110px ) 0; line-height: 2.3;}
.proInrContent .proMemClum{}
/*.proInrContent .proMemClum.c2{width: 65%; margin: 0 auto;}
.proInrContent .proMemClum.c2 li{width: 45%; margin-bottom: 1em;}*/
.proInrContent .proMemClum li{width: 30%;}
.proInrContent02 .proMemClum li{width: 23%;}

.prTitle{text-align: center; margin-bottom: 2.5em;}
.prTitle img{width: 70%;}
.proInrContent02 .prTitle img{width: 58.334%;}

.prSubtitle{text-align: center; margin-top: 4em;}
.prSubtitle span{font-size: min( 1.867vw , 2.8rem ); font-weight: 600; color: white; border-bottom: 1px solid white; letter-spacing: 0.1em;}

.memImg{width: 76%; margin: 0 auto;}
.memName{color: white; font-size: min( 1.6vw , 2.4rem ); text-align: center; margin: 0.6em 0;}
.memName span{padding: 0 0.3em;}
.proMemClum li:nth-child(1) span{background-color: #59538d;}
.proMemClum li:nth-child(2) span{background-color: #c5803b;}
.proMemClum li:nth-child(3) span{background-color: #008080;}
.proMemClum li:nth-child(4) span{background-color: #57317c;}

.proMemClum.pjtt02 li:nth-child(1) span{background-color: #c5803b;}
.proMemClum.pjtt02 li:nth-child(2) span{background-color: #146BB3;}
.proMemClum.pjtt02 li:nth-child(3) span{background-color: #59538d;}
.proMemClum.pjtt02 li:nth-child(4) span{background-color: #008080;}

.memSpec{font-size: min( 1.067vw , 1.6rem ); color: white; line-height: 1.5;}
.fractionBox{margin-top: min( 3.667vw , 55px);}
.fractionBox .frcTitle{}
.fractionBox .frcTitle.flex{justify-content: center;}
.fractionBox .frcTitle .fracNum{width: 13%; margin-right: 4%;}
.fractionBox .frcTitle .fracNum.flex{align-items: center;}
.fractionBox .frcTitle .fracTitle{color:white; font-size: min( 1.733vw , 2.6rem ); font-weight: 600; line-height: 1.5; text-align: center;}
.fracWhiteBox{background-color:white; color: #00234e; padding: min( 6vw , 90px) 0;}
.fracCtCaset{width: 80%; margin: 0 auto; padding-bottom: min( 4.667vw , 70px);}
.fracCtCaset.noBtPad{padding-bottom: 0;}
.fracCtCaset h5{position: relative; font-size: min( 1.6vw , 2.4rem ); margin-bottom: min( 1.667vw , 25px ); font-weight: 600; line-height: 1.3; text-indent: -1.1em; padding-left: 1.5em;}
.fracCtCaset h5:before {position: absolute; top: 0.6em; left: 0; width: min( 1.333vw , 20px); height: 4px; content: ''; background: #8091a6;}
.fracCtCaset h5 span {position: relative; padding-left: 1.1em;}
.empClume .box {width: 100%!important;}
.empClume .clear-after {
  display: none; /* 交差を検出するため最初はfloat解除しない */
  clear: both;
  height: 0;
}
.empClume .clear {
  clear: both; /* 後続要素のレイアウト崩れを防止する */
}
.empClume .space {float: right; height: 5em; /* 仮の高さ */}
.empClume .space.left {float: left;}
.empClume .photo {width: 50%; float: right; clear: both; margin-left: 1em; margin-top: 0.3em;}
.photo.left {margin-left: 0; margin-right: 1em; float: left;}
.empClume .photo img {width: 100%; height: auto; vertical-align: top;}
 /* 高さ設定 */
.empClume .space.em0 {height: 0em;}
.empClume .space.em2 {height: 2em;}
.empClume .space.em3 {height: 3em;}
.empClume .space.em4 {height: 4em;}
.empClume .space.em5 {height: 5em;}
.empClume .space.em6 {height: 6em;}
.empClume .space.em6_5 {height: 6.5em;}
.empClume .space.em7 {height: 7em;}
.empClume .space.em8 {height: 8em;}
.empClume .space.em8_5 {height: 8.5em;}
.empClume .space.em9 {height: 9em;}
.empClume .space.em10 {height: 10em;}
.empClume .space.em11 {height: 11em;}
.empClume .space.em12 {height: 12em;}
.empClume .space.em13 {height: 13em;}
.empClume .space.em14 {height: 14em;}
.empClume .space.em15 {height: 15em;}
.empClume .space.em16 {height: 16em;}
.empClume .space.em17 {height: 17em;}
.empClume .space.em18 {height: 18em;}
.empClume .space.em19 {height: 19em;}
.empClume .space.em20 {height: 20em;}
.empClume p{font-size: min( 1.2vw , 1.8rem);}
.fracInnaer{}
.fraCaseName{width: 7%; color: white;}
.fraCaseName span{padding: 0 0.2em; line-height: 1;}
.fraCaseName .nm01{background-color: #59538d;}
.fraCaseName .nm02{background-color: #c5803b;}
.fraCaseName .nm03{background-color: #008080;}
.fraCaseName .nm04{background-color: #146BB3;}
.fracInnaer{width:92%;}
.underProImg{width: 64%; margin: 2em auto 0 auto;}

/* ----------------------------------------------------
DXindex
---------------------------------------------------- */
#ct_dx{position: relative;}
#ct_dx .dxBack{background:url("../img/dx/main_bg.jpg") no-repeat 0 0; background-size: cover; width: 100%; height: min( 53.33vw , 800px ); position: absolute; top: 0; left: 0; }
.dxBnWrap{width:72%; max-width: 1090px; margin: min( 9.333vw , 140px ) auto min( 4.667vw , 70px ) auto;}
.dxBnWrap .dxBn{width:47%; min-height: min( 22.667vw , 340px ); margin-bottom: min( 3.667vw , 55px );}
.dxBnWrap .dxBn:first-child{width: 100%;}
.dxBnWrap.ctDXbnwrap .dxBn:first-child{width: 47%;}
.dxBnWrap .dxBn.flex{flex-flow: column; justify-content: center; align-items: center;}
.dxBnWrap .dxBn h3{width: 100%; padding-top: 1em; z-index: 3;}
.dxBnWrap .dxBn .dxBnRead{color: white; display: block; margin: min( 1.667vw , 25px ) 0 min( 2vw , 30px ) 0; text-align: center; z-index: 3;}
.dxBnWrap .dxBn .moreBt{margin-bottom: 0; color: white; z-index: 3;}
.dxBnWrap .dxBn .moreBt span a{color: white; position:relative;}
.dxBnWrap .dxBn .moreBt span{background-color: #00234e; position:relative; color: #fff; padding: 0.2em 2.5em 0.2em 1em;}
.dxBnWrap .dxBn .moreBt span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 15px; width: min( 1.067vw , 16px); height: min( 1.067vw , 16px); background: url("../img/common/aroow_w.svg") no-repeat right center;}


.dxBnWrap .dxBack_special{background: url("../img/dx/dxBg_special.jpg") no-repeat 0 0; background-size: cover; background-position: center center; position: relative;}
.dxBnWrap .dxBack_special_under{background: url("../img/dx/dxBg_special_under.jpg") no-repeat 0 0; background-size: cover;}
.dxBnWrap .dxBack01{background: url("../img/dx/dxBg01.jpg") no-repeat 0 0; background-size: cover;}
.dxBnWrap .dxBack02{background: url("../img/dx/dxBg02.jpg") no-repeat 0 0; background-size: cover;}
.dxBnWrap .dxBack03{background: url("../img/dx/dxBg03.jpg") no-repeat 0 0; background-size: cover;}
.dxBnWrap .dxBack04{background: url("../img/dx/dxBg04.jpg") no-repeat 0 0; background-size: cover;}

.dxBnWrap .dxBack_special,
.dxBnWrap .dxBack_special_under,
.dxBnWrap .dxBack01,
.dxBnWrap .dxBack02,
.dxBnWrap .dxBack03,
.dxBnWrap .dxBack04{position: relative;}

.dxBnWrap .dxBack_special::before,
.dxBnWrap .dxBack_special_under::before,
.dxBnWrap .dxBack01::before,
.dxBnWrap .dxBack02::before,
.dxBnWrap .dxBack03::before,
.dxBnWrap .dxBack04::before{width: 100%; height: 100%; background-color: rgba(0,35,78,0.5); position: absolute; top: 0; left: 0; content: "";}

.dxBnWrap .dxBack_special:hover::before,
.dxBnWrap .dxBack_special_under:hover::before,
.dxBnWrap .dxBack01:hover::before,
.dxBnWrap .dxBack02:hover::before,
.dxBnWrap .dxBack03:hover::before,
.dxBnWrap .dxBack04:hover::before{width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; content: ""; transition: all 0.2s ease-in-out!important; opacity: 1!important;}

.dxBnWrap .dxBack_special:hover,
.dxBnWrap .dxBack_special_under:hover,
.dxBnWrap .dxBack01:hover,
.dxBnWrap .dxBack02:hover,
.dxBnWrap .dxBack03:hover,
.dxBnWrap .dxBack04:hover{opacity: 1!important;}




/*DX下層*/
.dxMainWrap{width:80%; max-width: 1200px; margin: min( 4.667vw , 70px ) auto min( 9.333vw , 140px ) auto; position: relative;}
.dxMainWrap .dxNameBox2{position: absolute; bottom: -4em; left: 50%; transform: translateX(-50%); width: 56%;}
.dxMainWrap .dxNameBox3{position: absolute; bottom: -4em; left: 50%; transform: translateX(-50%); width: 88%;}
.dxMainWrap .dxNmIn{background-color: white; padding: 1em 2em; text-align: center; flex-flow: column; justify-content: center;}
.dxMainWrap .dxNmIn p{margin-bottom: 0; font-weight: 600;}
.dxMainWrap .dxName{font-size: min( 1.733vw , 2.6rem );}
.dxMainWrap .dxNmIn:nth-child(1) .dxName{color: #595388;}
.dxMainWrap .dxNmIn:nth-child(2) .dxName{color: #c0803b;}
.dxMainWrap .dxNmIn:nth-child(3) .dxName{color: #008080;}
.dxU_read{width:80%; max-width: 1200px; margin: min( 18vw , 270px ) auto 0 auto; text-align: center; color: white;}
.dxU_read .dxU_r01{font-size: min( 1.867vw , 2.8rem ); font-weight: 600;}
.dxU_read .dxU_title{width: 80%; margin: min( 3.667vw , 55px ) auto; }
.dxInrContent{width: 66%; max-width: 1000px; margin: 0 auto min( 4.667vw , 70px ) auto;}

.dxAnote{color:white; text-align: center; margin-top: 1em;}

/* ----------------------------------------------------
働き方紹介
---------------------------------------------------- */
#ct_workStyle{position: relative;}
#ct_workStyle .workStyBack{background:url("../img/work_style/main_bg.jpg") no-repeat 0 0; background-size: cover; width: 100%; height: min( 53.33vw , 800px ); position: absolute; top: 0; left: 0; }
.demandMan{margin: min( 9.333vw , 140px ) auto min( 4.667vw , 70px ) auto;}
.demandMan .flex{justify-content: center; align-items: center;}
.demandMan .dmTitle{text-align: center; margin-bottom: min( 3.667vw , 55px ); }
.demandMan .dmTitle span{background-color: white; font-size: min( 1.33vw , 2rem ); font-size: min( 1.467vw , 2.2rem ); line-height: 1; padding: 0.2em 0.5em;}
.demandMan .dmCatch{font-size: min( 3.867vw , 5.8rem ); text-align: right; border-right: 3px solid white; color: white; font-weight: 600; letter-spacing: 0.1em; line-height: 1.4; padding-right: 0.3em;}
.demandMan .dmRead{color: white; padding-left: 1.5em; font-weight: 600;}

/*教育キャリア*/
/*#educationWrap:first-child {margin-top: 3em;}
#educationWrap {background: url("../img/work_style/wrsTitle01.svg") no-repeat 0 0; background-size: 5% auto;}
#educationWrap h3{writing-mode: vertical-rl; font-size: min( 1.867vw , 2.8rem ); line-height: 2; font-weight: 600; text-orientation: upright; color: white; position: relative; width: 6%;}
#educationWrap h3 p{display: none;}*/
#educationWrap{}

.wrsWhiteWrap{width: 100%; background-color: #fff; padding: min( 3.867vw , 58px ) 0;}
.wrsWhiteWrap .wrs3clum{}
.wrsWhiteWrap .wrs3clum.flex{justify-content: center; margin: 0 auto; width: 90%;}
.wrsWhiteWrap .wrs3clum .wrs3Inner{width: 33%; padding: 0 1%; display: flex; display: -webkit-flex; flex-direction: column; flex: 1 0 auto; /* fix IE11 */}
lum .wrs3Inner:last-child{border-right: none;}
.wrsWhiteWrap .wrs3clum .wrs3Inner .wrsItem{display: flex; display: -webkit-flex; flex-direction: column; flex: 1 0 auto; /* fix IE11 */}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edSubTitle{text-align:center;}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edSubTitle span{padding: 0.02em .5em; background-color: #00234e; color: white; font-size: min( 1.467vw , 2.2rem );}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edSubRead  > *{
   flex-shrink: 0; /* fix IE11 */
}
.edInterviewTitle{display: flex; display: -webkit-flex; align-items: center; justify-content: center; position: relative; color: transparent; -webkit-text-stroke: 1px #00234e; font-family: 'Libre Franklin', sans-serif; font-size: min( 2vw , 3rem ); text-align: center; margin: 2.5em 0 1em 0;}
.edInterviewTitle::before,.edInterviewTitle::after{border-top: 2px solid #00234e; content: ""; width: 40%;}
.edInterviewTitle::before{margin-right: 0.8em;}
.edInterviewTitle::after{margin-left: 0.8em;}

.ikujiInt.flex{align-items:center;}

.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox{position: relative; border: 1px solid #00234e; padding: 1em 1em 0 1em; min-height: 19em;}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewText{text-align: center; font-weight: 600; min-height: 5.5em; display: flex; display: -webkit-flex; justify-content: center; flex-flow: column;}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewText span{font-size: min( 0.867vw , 1.3rem ); letter-spacing: -0.05em;}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewPhoto{}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewMore{background-color: #fff; position: absolute; bottom: -0.85em; right: 1em; margin-bottom: 0; padding: 0 0.5em; color: #b64c1e; font-weight: 600;}
.edInterviewMore span a{color: #b64c1e;}
.edInterviewMore span a:hover{background-color: white; opacity: 1!important;}
.edInterviewMore span{position:relative; padding-right: 1.3em;}
.edInterviewMore span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 2px; width: min( 1.067vw , 16px); height: min( 1.067vw , 16px); background: url("../img/common/aroow_b.svg") no-repeat right center;}
.wrsWhiteWrap .atherEd{margin: 0 auto; width: 76%;}
.wrsWhiteWrap .atherEd .athE_title{text-align: center;}
.wrsWhiteWrap .atherEd .athE_title span{font-size: min( 1.467vw , 2.2rem ); border-bottom: 5px solid #00234e; font-weight: 600;}
.wrsWhiteWrap .atherEd .athClum{border-bottom: dotted 1px #00234e; margin-bottom: min( 2vw , 30px );}
.wrsWhiteWrap .atherEd .athClum:last-child{border-bottom: none; margin-bottom: 0;}
.wrsWhiteWrap .atherEd .athClum .athIcon{width: 12%;}
.wrsWhiteWrap .atherEd .athClum .athSubTitle{width: 26%; padding-top: 1vw;}
.wrsWhiteWrap .atherEd .athClum .athSubTitle span{color: #00234e; font-weight: 600;}
.wrsWhiteWrap .atherEd .athClum .athSubtext{width: 62%; /*padding-top: 1vw;*/}
/*社内制度*/
#systemWrap {background: url("../img/work_style/wrsTitle02.svg") no-repeat 0 0; background-size: 5% auto; border-top: 3px solid #00234e; margin-bottom: min( 4.667vw , 70px );}
#systemWrap h3{writing-mode: vertical-rl; font-size: min( 1.867vw , 2.8rem ); line-height: 2; font-weight: 600; text-orientation: upright; color: white; position: relative; width: 6%;}
#systemWrap h3 p{display: none;}
#systemWrap .wrsWhiteWrap .atherEd .athClum{padding-bottom: min( 1.333vw , 20px );}

.childcare{width: 76%; margin: 0 auto;}
.childcare.flex{align-items: flex-start;}
.childcare span{background-color: #00234e; color: white; font-size: min( 1.867vw , 2.8rem ); padding: 0 1em; line-height: 1.4; letter-spacing: 0.05em;}
.childcare p{width: 76%;}

.childInterviewBox{position: relative; border: 1px solid #00234e; padding: 1em; width: 52%; margin: 0 auto;}
.childInterviewBox .childInterviewPhoto{width: 30%;}
.childInterviewBox .childInterviewTxBox{width: 60%;}
.childInterviewBox .childInterviewTitle{color: transparent; -webkit-text-stroke: 1px #00234e; font-family: 'Libre Franklin', sans-serif; font-size: min( 2vw , 3rem ); margin-bottom: 0;}
.childInterviewBox .childInterviewText{font-weight: 600; margin-bottom: 0;}
.childInterviewBox .childInterviewMore{background-color: #fff; position: absolute; bottom: -0.85em; right: 1em; margin-bottom: 0; padding: 0 0.5em; color: #b64c1e; font-weight: 600;}
.childInterviewMore span a{color: #b64c1e;}
.childInterviewMore span a:hover{background-color: white; opacity: 1!important;}
.childInterviewMore span{position:relative; padding-right: 1.3em;}
.childInterviewBox .childInterviewMore span::before {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 2px; width: min( 1.067vw , 16px); height: min( 1.067vw , 16px); background: url("../img/common/aroow_b.svg") no-repeat right center;}



.crosiRead{color: white; text-align: center; margin: min( 3.667vw , 55px ) 0 min( 2vw , 30px ) 0;}



/*フォトカラム*/
#photoClum .container {width: 100%; max-width: 1500px; margin: 0 auto;
display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.4fr 1fr;
  grid-template-rows: min( 14.133vw , 212px ) min( 14.133vw , 212px ) min( 14.133vw , 212px ) min( 14.133vw , 212px ) min( 14.133vw , 212px ) min( 14.133vw , 212px ) min( 11.467vw , 172px ) min( 11.467vw , 172px ) min( 14.133vw , 212px ) min( 14.133vw , 212px );
  gap: min( 1vw , 15px ) min( 1vw , 15px );
  grid-auto-flow: row;
  grid-template-areas:
    "p01 p01 p01 p02"
    "p01 p01 p01 p03"
    "p05 p06 p07 p03"
    "p08wrap p08wrap p08wrap p09"
    "p08wrap p08wrap p08wrap p10"
    "p12wrap p12wrap p13 p10"
    "p12wrap p12wrap p13 p11"
    "p14wrap p14wrap p14wrap p14wrap"
    "p14wrap p14wrap p14wrap p14wrap"
    "p15wrap p15wrap p15wrap p16";
}
#photoClum img{object-fit:cover; width: 100%; height: 100%;}
#photoClum .p01 { grid-area: p01;}
#photoClum .p02 { grid-area: p02;}
#photoClum .p03 { grid-area: p03;}
#photoClum .p05 { grid-area: p05;}
#photoClum .p06 { grid-area: p06;}
#photoClum .p07 { grid-area: p07;}
#photoClum .p09 { grid-area: p09;}
#photoClum .p10 { grid-area: p10;}
#photoClum .p11 { grid-area: p11;}
#photoClum .p08wrap {  display: grid;
  grid-template-columns: 1fr 1.2fr 0.8fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: min( 1vw , 15px ) min( 1vw , 15px );
  grid-auto-flow: row;
  grid-template-areas:
    "p08in01 p08in01 p08in02"
    "p08in01 p08in01 p08in02"
    "p08in01 p08in01 p08in02";
  grid-area: p08wrap;
}
#photoClum .p08in01 { grid-area: p08in01;}
#photoClum .p08in02 { grid-area: p08in02;}
#photoClum .p12wrap {  display: grid;
  grid-template-columns: 1fr 0.5fr 1.5fr;
  grid-template-rows: 1fr 0.5fr 1.5fr;
  gap: min( 1vw , 15px ) min( 1vw , 15px );
  grid-auto-flow: row;
  grid-template-areas:
    "p12in01 p12in01 p12in02"
    "p12in01 p12in01 p12in02"
    "p12in03 p12in03 p12in03";
  grid-area: p12wrap;
}
#photoClum .p12in01 { grid-area: p12in01;}
#photoClum .p12in02 { grid-area: p12in02;}
#photoClum .p12in03 { grid-area: p12in03;}
#photoClum .p13 { grid-area: p13;}
#photoClum .p14wrap {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: min( 1vw , 15px ) min( 1vw , 15px );
  grid-auto-flow: row;
  grid-template-areas:
    "p14in01 p14in02 p14in02"
    "p14in01 p14in02 p14in02";
  grid-area: p14wrap;
}
#photoClum .p14in02 { grid-area: p14in02; }
#photoClum .p14in01 { grid-area: p14in01; }
#photoClum .p15wrap {  display: grid;
  grid-template-columns: 1fr 0.5fr 1.5fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: min( 1vw , 15px ) min( 1vw , 15px );
  grid-auto-flow: row;
  grid-template-areas:
    "p15in01 p15in01 p15in02"
    "p15in01 p15in01 p15in02"
    "p15in01 p15in01 p15in02";
  grid-area: p15wrap;
}
#photoClum .p15in01 { grid-area: p15in01; }
#photoClum .p15in02 { grid-area: p15in02; }
#photoClum .p16 { grid-area: p16; }
#photoClum .p17 { grid-area: p17; }

.wrAriaTitle{position:relative; color: white; font-size: min( 2.9337vw , 4.4rem ); text-align: center; margin-bottom: min( 4.667vw , 70px ); min-height: 3em;}
.wrAriaTitle p.wraJp{position:absolute; top: 0; left: 0; z-index: 2; width: 100%; text-align: center;}
.wrAriaTitle p.wraEn{position:absolute; top: 15%; left: 50%; z-index: 1; width: 48%; text-align: center; transform: translateX(-50%);}

#workMovie{margin-bottom: min( 4.667vw , 70px )}
#youtube-movie {margin: 0 auto; width: 100%; max-width: 850px;}
#youtube-movie-content {padding-top: 56.25%; position: relative; width: 100%;}
#youtube-movie-content iframe {height: 100% !important; left: 0; position: absolute; top: 0; width: 100% !important;}
.yt-wrapper img {position: absolute; top: 0; left: 0; width: 100%; cursor: pointer;}
.yt-wrapper img.is-hide {opacity: 0; pointer-events: none; visibility: hidden; transition: .5s;}



/*モーダル指定*/
.intMordel{background-color: rgba(255,255,255,0.8); width: 75%; max-width: 1120px; margin: 0 auto; position: relative; opacity: 0; transition: opacity 1s; padding: min( 6vw , 90px ) 0 min( 3.66vw , 55px) 0;}
.popup-modal-dismiss{position: relative; display: block; text-align: center; width: 10%; margin: 0 auto;}
.intMordel.mfp-ready{opacity: 0.8;}
.intMordel.mfp-removing{opacity: 0;}
.intMordel h3{padding: 0 0 min( 5.667vw , 85px ) 0; text-align: center;}
.intMordel h3 span{color: #00234e; font-size: min( 2vw , 30px ); font-weight: 600; padding: 0.1em 0.3em;}
.intMordel .contenerIn{width:83.7%; margin: 0 auto;}
.intMordel h4{position: relative; font-size: min( 1.6vw , 2.4rem ); margin-bottom: min( 1.667vw , 25px ); font-weight: 600; line-height: 1.3; text-indent: -1.1em; padding-left: 1.5em;}
.intMordel h4:before {position: absolute; top: 0.6em; left: 0; width: min( 1.333vw , 20px); height: 4px; content: ''; background: #8091a6;}
.intMordel h4 span {position: relative; padding-left: 1.1em;}
.intinFirst{width: 100%; position: relative;}
.intinFirst .intInnerCaset{width: 64%;}
.intinFirst .intInnerPhoto{width: 34%; position: relative; top: 0; right: -3%;}
.intinFirst .intinName{display: block; text-align: center; margin-bottom: 0; line-height: 1.3; margin-top: 0.5em;}
.intinFirst .intinName span{display: block; font-size: min( 1.733vw , 2.6rem ); font-weight: 600;}
.intInnerCaset{width:100%; margin: 0 auto min( 4.667vw , 70px) auto;}
.intinBottm{border-top:1px solid #00234e; margin-top: min( 3.66vw , 55px); padding: min( 3.66vw , 55px) 0 0 0;}
.intinBottm p{width:83.7%; margin: 0 auto;}

.detaSienceMem{margin-bottom: min( 4.667vw , 70px);}
.detaSienceMem li{width: 24%; text-align: center;}
.detaSienceMem .dsMemImg{margin-bottom: min( 0.667vw , 15px );}
.detaSienceMem .dsMemName{font-size: min( 1.6vw , 2.4rem ); margin:0 auto min( 0.667vw , 15px ) auto; font-weight: 600; width: 85%; color: white;}
.detaSienceMem .dsMemSpec{font-size: min( 0.933vw , 1.4rem ); margin-bottom: 0; line-height: 1.3;}

.detaSienceMem li:nth-child(1) .dsMemName{background-color: #c5803b;}
.detaSienceMem li:nth-child(2) .dsMemName{background-color: #59538d;}
.detaSienceMem li:nth-child(3) .dsMemName{background-color: #9b5e80;}
.detaSienceMem li:nth-child(4) .dsMemName{background-color: #008080;}

.detaWrap .nm01{background-color: #c5803b;}
.detaWrap .nm02{background-color: #59538d;}
.detaWrap .nm03{background-color: #9b5e80;}
.detaWrap .nm04{background-color: #008080;}

.dxUl {width: 80%; margin: 0 auto;}
.dxUl li{list-style: disc; margin-bottom: 0.5em;}


.readmoreBut{width: min( 13.333vw , 200px); display: block; margin: 0 auto;}
.redmoreP{z-index: 3;}
#work_style .redmoreP{position: absolute; bottom: 0; right: 0; display: inline; z-index: 3; margin-bottom: 0;}

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

@media (min-width:768px) {

/* ----------------------------------------------------
common(pc)
---------------------------------------------------- */
/* hover */
a:hover {
  opacity: .8!important; filter: alpha(opacity=80)!important;
  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)!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;
}
.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;/* width: 80%;*/}
	
#navGlobal li{position: relative;}
#navGlobal li a::after {
	position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #326ec7;
bottom: -1px;
transform: scale(0, 1);
transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;}
#navGlobal li a:hover::after {transform: scale(1, 1);}


	
	
}

@media (max-width: 1800px) and (min-width: 1250px) {
#staffWrap .stMain .stM_tx .st_Name{margin-top: 0.5em;}
}
@media (max-width: 1800px) {#whatsAskul .askulMark {width: 17%;	}}
@media (max-width: 1600px) {#whatsAskul .askulMark {width: 19%;	}}
@media (max-width: 1400px) {#whatsAskul .askulMark {width: 21%;	}
.tpNewBox{padding: 3em 1em;}
	
}
@media (max-width: 1450px) {
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox{min-height: 18em;}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewText{font-size: min( 1.133vw , 17px);}

}
@media (max-width: 1300px) {
#message .mesBt span{font-size: min( 1.067vw , 16px);}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox{min-height: 16em;}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewText{min-height: 6.9em;}
}
@media (max-width: 1180px) {

.tpNewBox{padding: 2em 2em;}
}
	
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
tabletSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 1200px) and (min-width: 768px) {
/* 高さ設定 */

.empClume .space.em5 {height: 3em;}
.empClume .space.em6 {height: 4em;}
.empClume .space.em6_5 {height: 4.5em;}
.empClume .space.em7 {height: 5em;}
.empClume .space.em8 {height: 6em;}
.empClume .space.em8_5 {height: 6.5em;}
.empClume .space.em9 {height: 7em;}
.empClume .space.em10 {height: 8em;}
.empClume .space.em11 {height: 9em;}
.empClume .space.em12 {height: 10em;}
.empClume .space.em13 {height: 11em;}
.empClume .space.em14 {height: 12em;}
.empClume .space.em15 {height: 13em;}
.empClume .space.em16 {height: 14em;}
.empClume .space.em17 {height: 15em;}
.empClume .space.em18 {height: 16em;}
.empClume .space.em19 {height: 17em;}
.empClume .space.em20 {height: 18em;}

}
@media (max-width: 915px) {
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewText{min-height: 10.9em; font-size: 1.4vw;/*font-size: 3.4vw;*/}
	
.sev01,.sev02,.sev03{/*height:22em;*/height:19em;}
.sev01topImg,.sev02img,.sev03img{/*height:9em;*/height:8em;}
.sev01_01name,.sev01_02name,.sev02name,.sev03name{height: 3.5em; font-size: 1.0vw; letter-spacing: -0.1em;}	
.sev01text,.sev02text,.sev03text {font-size: 0.7vw; height: 9em; letter-spacing: -0.15em;}  
	#staffWrap .stMain{top:-10vw;}
	#staffWrap .stMain.stM06{top:-10vw;}
	
@media (orientation: landscape) {
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewText{min-height: 5.5em; font-size: 1.0vw;}
.sev01text,.sev02text,.sev03text {font-size: 1vw;} 
}
	
}

@media (max-width: 820px) {
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewText{min-height: 10.9em; font-size: 1.0vw;}
.sev01text,.sev02text,.sev03text {font-size: 1.2vw;} 
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
spSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 767px) {
#mainContainer{ width: 100%; position: relative;}
.inrContent {width: 90%;}
.br_spOnly{display:block;}
.br_pcOnly{display:none;}
.order1{order:1;}
.order2{order:2}
	
.readmoreBut{width: 35vw;}	
	
/*ハンバーガー*/
#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: none;}
#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%; align-items: baseline;}
#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; color: white;}
#home #header .headInner ul li a{color: white;}
	
#btnRecruit {right: 0; top: 0;  z-index: 120; }
#btnRecruit p{height: 16vw; width: 16vw; }
#btnRecruit p a{font-size:3vw; }
#btnRecruit p a::after{ width: 3vw; height: 3vw;}
	
#header .headInner #hd-logo span {
    /* display: block; */
    font-size: 2.5vw;
    margin-bottom: 1vw;
}	

@media (orientation: landscape) {
#header {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;}


#topNews{top: 75vw; right: inherit; width: 100%!important;}
.tpNewsInner{width: 90%; margin: 0 auto;}
.tpNewBox{padding: 1em 1.5em;}
.tpNewBox p{font-size: 2.6vw}
.tpNewBox p span.neT{font-size: 3vw;}

.newsIcon span{position:relative; padding-right: 1.8em;}
.newsIcon span::before {right: 8%; width: 1.7vw; height: 1.7vw; border-top: 2px solid white; border-right: 2px solid white; transform: rotate(45deg);}
.newsIcon span::after {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 8%; width: 1.96vw; height: 2px; background-color: white;}		
	

/* ----------------------------------------------------
footer (sp)
---------------------------------------------------- */
#footer {padding:6vw 0 20vw 0; z-index: 2;}
#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;}	

/* ----------------------------------------------------
メインビジュアル
---------------------------------------------------- */
#homVisual {height: 80.667vw;}
#homVisual .homSlider {height: 80.667vw;}
	
#homVisual .visAria{background: url("../img/mainVisual.jpg") no-repeat center 10vw; background-size: cover; margin-top: 18vw; min-height: 80.6vw;}
#homVisual .visAria h2 p{margin: 0 2.3vw 0 0;}
#homVisual .visAria h2 span{font-size: 6.0vw;}
#homVisual h3{font-size: 4.5vw; margin-top: 7.3vw;}
#homVisual .homRead{font-size: 3.4vw; margin: 5vw 0 8vw 0; line-height: 2.1;}
	
	
/*トップページconcept*/
#concept{background-color:#00234e; padding: 15vw 0 6vw 0;}
#concept h2{width: 70%; margin: 0 auto min( 3.33vw , 100px ) auto; display: block;}
#concept .conceptRead{font-size: 3.4vw; color: white; text-align: center; line-height: 2.5;}

/*トップページMessage*/
#message{background:linear-gradient(90deg, #fff 0%, #fff 10%, #8091a6 10%, #8091a6 90%, #fff 90%, #fff 100% ); margin: 12vw 0 18vw 0;}
#message h3{display: block; width: 80%; margin: 0 auto; padding: 5vw 0;}
#message .inrContent{background:none;}
#message .messInner{flex-flow:column;}	
#message .messRead{width: 100%; writing-mode: horizontal-tb; font-size: 3.4vw; text-align: center; margin-bottom: 5vw;}
	
#message .messButAria{width:100%; display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-column-gap: 3vw;
grid-row-gap: 3vw;
  grid-auto-flow: row;
  grid-template-areas:
    "grid1 grid1"
    "grid2 grid3"
	"grid4 grid5";
	height: 70vh;
}
	
.grid1 {grid-area: grid1; background: url("../img/top/mess_president.jpg") no-repeat 0 20%; background-size: cover; height: 30vh;}
.grid2 { grid-area: grid2; background: url("../img/top/mess_new.jpg") no-repeat 0 20%; background-size: cover; height: 20vh;}
.grid3 { grid-area: grid3; background: url("../img/top/mess_carrer.jpg") no-repeat 0 20%; background-size: cover; height: 20vh;}
.grid4 { grid-area: grid4; background: url("../img/top/mess_handy.jpg") no-repeat 0 20%; background-size: cover; height: 20vh;}
.grid5 { grid-area: grid5; background: url("../img/top/mess_matehan.jpg") no-repeat 0 20%; background-size: cover; height: 20vh;}
	
@media (orientation: landscape) {/* スマホ横 */
#message .messButAria{height: 250vh;}
#message .mesBtWrap,.grid1,.grid2{min-height: 50vw;}
}	

#message .mesBt{padding: 0.2em 0.5em;}
#message .mesBt span{font-size: 3.0vw;}
#message .mesBt span::before {width: 3vw; height: 3vw; background-position: right 20%;}		
#message .presiText{writing-mode: horizontal-tb; font-size: 3.4vw; text-align: left; line-height: 2;}	
span.menteAarow::before{top:inherit!important; bottom: 1vw!important;}
span.menteAarow::after{top:inherit!important; bottom: 1.8vw!important;}
	
/*トップメッセージ　モーダル指定*/
.tpMessMordel{width: 90%; padding: 10vw 0;}
.tpMessMordel .contenerIn{width:80%; flex-flow: column;}
.tpMessMordel .contenerIn .mesPopCtTex_presi{width:100%;}
.tpMessMordel .contenerIn .mesPopPhoto{width: 100%;}
.tpMessMordel .contenerIn .mesPopCtTex h3{font-size: 4.2vw;}
.tpMessMordel .contenerIn .mesPopCtTex_presi h3{font-size: 4.2vw;text-align: center;}
.tpMessMordel .contenerIn .mesPopPhoto .mesPopName{margin-top: 1em; text-align: center;}
.tpMessMordel .contenerIn .mesPopPhoto .mesPopName span{font-size: 4vw;}

	
	
	
/*トップページWhatsASKUL*/	
#whatsAskul	{padding: 3vw;}
#whatsAskul h3{display: block; margin: 0 auto;}
#whatsAskul .whatInner{width: 72%; flex-flow: column; padding: min( 3.667vw , 55px) 0;}
#whatsAskul .whatsBox{margin: 3vw auto;	}
#whatsAskul .whatsBox,
#whatsAskul .askulBox{width: 100%; text-align: center;}
#whatsAskul .t_wahts,#whatsAskul .t_askul{display: none;}
#whatsAskul .askulMark{display: none;}
#whatsAskul .wrkBt span::before {width: 3vw; height: 3vw; background-position: right 20%;}	
	

/*トップページjob_mem*/	
#job_mem{padding: 0 0 5.67vw 0;}
#job_mem .jmInner{width: 90%; flex-flow: column;}
#job_mem .jmInner .jm2clum{width: 100%; text-align: center; margin-bottom: 10vw;}
#job_mem .jmInner .jm2clum2{width: 100%; text-align: center;}
#job_mem .jmInner .jm2clum2 h3{font-size: 4.8vw;}
#job_mem .jmInner .jm2clum .jmRead{margin: 3.3vw 0;}
#job_mem .jmInner .jm2clum .jmLink span::before {width: 3vw; height: 3vw; background-position: right 20%;}		

.jobmSP_t{background-color: white; padding: 6vw 0 0 0; display: block; margin: 0 calc(50% - 50vw); width: 100vw;}
.jobmSP_t h3{color: #8091a6; font-size: 7vw; padding: 0; margin: 0; letter-spacing: 0.05em; font-weight: 600; line-height: 0.85; text-align: center;}
	
/*トップページstory*/
#story.flex{flex-flow: column; margin-top: 12vw}
#story .storyTitle{width: 10%; transform: rotateZ(90deg); top: 27%!important; left: 45%!important;}
#story #project,
#story #dx{min-height: 65.3vw; width: 100%;}
#story h3{width: 32%; }
#story .storyText{color: white; text-align: center; margin: 2em 0; z-index: 3;}
#story .jobBt span{position:relative; padding-right: 1.3em;}
#story .jobBt span::before {right: 2%; width: 3vw; height: 3vw; background-position: right 20%;}
#story .wrkBt span{position:relative; padding-right: 1.3em;}
#story .wrkBt span::before {right: 2%; width: 3vw; height: 3vw; background-position: right 20%;}
	
/*トップページWORK STYLE*/
#work_style{background:linear-gradient(90deg, #fff 0%, #fff 10%, #8091a6 10%, #8091a6 90%, #fff 90%, #fff 100% ); margin: 12vw 0;}
#work_style h3{display: block; width: 80%; margin: 0 auto; padding: 5vw 0;}
#work_style .inrContent{background:none; width: 90%;}
#work_style .worksInner{flex-flow:column;}
#work_style .wrkRead{width:100%; writing-mode: horizontal-tb; font-size: 4.4vw; text-align: center; margin-bottom: 5vw;}
#work_style .wrkP{width:100%; position: relative;}

#work_style .wrkBt{position: absolute; bottom: 0; right: 0; display: inline; z-index: 3; margin-bottom: 0; color: white; background-color: #00234e; padding: 0.2em 1em;}
#work_style .wrkBt span{position:relative; padding-right: 1.3em;}
#work_style .wrkBt span::before {width: 3vw; height: 3vw; background-position: right 20%;}

	
/*トップページ採用情報*/
#recruit h3{font-size: 5.4vw;}
#recruit ul{}
#recruit ul li{background-color: white; display: block; position: relative; text-align: center; width: 48%; margin-left: 0; height: inherit; line-height: inherit; padding: 1em 0.5em; margin: 0.5em 0;}
#recruit ul li .triangle{bottom: 0.8vw; right: 0.8vw; border-left: 2.6vw solid transparent; border-bottom: 2.6vw solid #00234e;}	
	
#recruit ul li a{line-height: 1.4; height: 11vw;}	
	
/* ----------------------------------------------------
コンテンツタイトル
---------------------------------------------------- */	
.contentsTitle{padding: 22vw 0 3vw 0; font-size: 4.3vw;}
.contentsSubTitle{padding: 10vw 0 0 0; font-size: 4.3vw;}
.contentsTitle p,.contentsSubTitle p{position: relative; margin-bottom: 2em;}
.contentsTitle p span{font-size: 8vw;}
.contentsSubTitle p span{font-size: 7vw;}
	
.contTopRead{line-height: 2.0;}
	
	
/* ----------------------------------------------------
What's ASKUL
---------------------------------------------------- */
#ct_about .aboutBack{height: 60vw;}
#ct_about .triangle{margin: 10vw auto 20vw auto; width: 90%;}
#ct_about .triangle h3{font-size: 3.2vw; margin-bottom: 5vw;}

.numberWrap{}
.numberWrap li{margin: 0 0 2.5vw 0;}
.numberWrap li img{object-fit: cover; width: 100%; height: 100%;}
.numberWrap .numTitle{width: 100%; text-align: center; margin:0 auto 6vw auto;}

.numberWrap .num01{width: 100%;}
.numberWrap .num02{width: 48%;}
.numberWrap .num03{width: 48%;}
.numberWrap .num04{width: 100%;}
.numberWrap .num05{width: 100%;}
.numberWrap .num06{width: 48%;}
.numberWrap .num07{width: 48%;}
.numberWrap .num08{width: 100%;}
.numberWrap .num09{width: 100%;}
.numberWrap .num10{width: 100%;}	
	
	
.lightBlue{padding: 8vw 0 ; }
.serviceWrap{margin-top: 4vw;}
.serviceWrap h4{margin-bottom: 5vw; font-size: 3.2vw;}
.servRead{margin-bottom: min( 3.667vw , 55px ); text-align: center;}

.sevcontainer img{width:80%; margin: 0 auto;}
.sevcontainer {display: block;}

.sev01text,.sev02text,.sev03text {height: inherit; font-size: 2.8vw; padding-bottom: 1em;}  

.servBtLineTx{font-size: 2.8vw;}
.sev01,.sev02,.sev03{height:inherit; margin-bottom: 4vw; display: block;}
.sev01topImg,.sev02img,.sev03img{height:inherit;}
.sev02img img,.sev03img img{width: 50%;}
.sev01_01name,.sev01_02name,.sev02name,.sev03name{height: inherit; font-size: 3.2vw;}
	

	
.attemptWrap{margin-top: 16vw;}
.attemptcontainer { display: block; width: 100%;}

.attemptWrap h4{margin-bottom: 5vw; font-size: 3.2vw;}
	
.attempt01,.attempt02,.attempt03,.attempt04 {display: block; width: 70%; margin: 0 auto 7vw auto;}
.atp01_img,.atp02_img,.atp03_img,.atp04_img{text-align: center;}
.atp01_img img,.atp02_img img,.atp03_img img,.atp04_img img{width: 50%;}
.atp01_name,.atp02_name,.atp03_name,.atp04_name {font-size: 3.2vw; padding: 0.5em 0;}
.atp01_txt,.atp02_txt,.atp03_txt,.atp04_txt{font-size: 2.8vw; border-top: 3px solid #fff;}	
	
	
	
.servTab01{width: 100%;}
.servTab01 th{width: 50%;}
.servTab01 th img{width: 82%;}
.servTab01 td{padding: 3vw;}

.servName{font-size: 3vw; margin-bottom: -3vw; letter-spacing: -0.05em;}
.servTab02_sp .servName{margin: -4vw 0 1.5vw 0;}
.servTab02{display:none;}
	
.servTab02_sp{width: 100%; margin: 4vw auto; background-color: white; display: block;}
.servTab02_sp p{text-align: center; padding: 3vw; margin-bottom: 0;}
.servTab02_sp p img{width: 65%; margin: 0 auto;}
	
.servBtLineTx {border-top: 3px solid #ccd3dc;}
.servTab02_sp .servBtLineTx {border-top: 0;}
	.spLinerBlue{height: 3px;
  width: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 3vw, rgba(204, 211, 220, 1) 3vw 87vw, rgba(255, 255, 255, 1) 87vw);}
	
	
/* ----------------------------------------------------
職種紹介
---------------------------------------------------- */
#jobWrap{display:none;}
#jobWrap_sp {width:95%; margin: 10vw auto 5vw auto; display:block;}
.jobIconClick::after{width: 5vw; height: 2.5vw; bottom: -1em;}
#jobWrap_sp .iconRead{color:white; text-align: center; margin-top: 4vw;}
#jobWrap_sp ul{}
#jobWrap_sp ul.flex{justify-content: flex-end; align-items: flex-end;}
#jobWrap_sp ul li.jb_spIcon{width: 30%; margin: 3vw 0;}	
#jobWrap_sp ul li.jb_spArrow_LR{width: 5%; text-align: center; padding-bottom: 5%;}
#jobWrap_sp ul li.jb_spArrow_LR img{width: 30%;}	
#jobWrap_sp ul li.jb_spArrow_Bt{width: 30%; text-align: center;}	
#jobWrap_sp ul li.jb_spArrow_Bt img{width: 70%;}
#jobWrap_sp .sp_iconText{background-color: white; padding: 0.01em 0.1em; text-align: center; font-size: 2.8vw; font-weight: 600;}
/*モーダル指定*/
.jobMordel{width: 80%; padding: 10vw 0;}
.jobMordel h3{padding: 0 0 2.5vw 0;}
.jobMordel h3 span{font-size: 4.2vw;}
.jobMordel .contenerIn{width:83.7%; margin: 0 auto;}
.jobMordel .contenerIn .jobCtTex{width:100%;}
.jobMordel .contenerIn .jobCtTex h4{font-size: 3.8vw;}
.jobMordel .contenerIn .jobCtTex .workManLink span a{font-size: 3.8vw;}
.jobMordel .contenerIn .jobCtIllust{width:70%; margin: 0 auto 5vw auto;}
.mfp-close {
  line-height: inherit!important;
  right: 3%!important;
  top: 0%!important;
  padding:0!important;
  font-size: 5.2vw!important;
  }	
	
/* ----------------------------------------------------
社員紹介index
---------------------------------------------------- */
#occupation .ocInner.flex{flex-flow: column;}
#occupation .ocInner.dep01,#occupation .ocInner.dep02,#occupation .ocInner.dep03{background: none;}
#occupation .ocInner h3{writing-mode: horizontal-tb; font-size: 3.8vw; margin: 0 auto 3vw auto; width: 100%; text-align: center;}
#occupation .ocInner h3 p{display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; width: 90%; margin: 0 auto;}
#occupation .ocInner ul{width: 100%; margin-bottom: 10vw;}
#occupation .ocInner ul.flex{justify-content: space-between; flex-flow: column;}
#occupation .ocInner ul li{margin-bottom: 5vw; width: 100%; margin-right: 0; height: 25vw;}
#occupation .ocInner ul li.flex{flex-flow:wrap;}
#occupation .ocInner ul li:nth-of-type(3n){margin-right: 0;}
#occupation .ocInner ul li p.ocSpec{width: 50%; position: relative; top: inherit; left: inherit; transform: inherit; display: flex; display: -webkit-flex; flex-flow: column; justify-content: center;}
#occupation .ocInner ul li p.ocSpec span.ocDepartment{font-size: 3.2vw;}
#occupation .ocInner ul li p.ocSpec span.ocName{font-size: 4.6vw;}
/*#occupation .ocInner ul li p.ocImg{width:50%; overflow:hidden; height: 25vw;}
#occupation .ocInner ul li p.ocImg img{object-fit: cover; margin-top: -4vw;}*/
#occupation .ocInner ul li p.ocImg{width:50%; height: 25vw;}
#occupation .ocInner ul li p.ocImg img{object-fit: cover; width: 100%; height: 100%;}	
	
#occupation .matehanBnr{border: 4px solid #00234e; width: 72%; margin-bottom: 8vw; padding: 7vw 0; }	
#occupation .matehanBnr p span::before {width: 1.7vw; height: 1.7vw;}
#occupation .matehanBnr p span::after {right: 1px; width: 1.96vw;}		
	
/*社員紹介下層*/
#staffWrap{width:90%; margin: 40vw auto min( 4.667vw , 70px ) auto; position: relative;}
#staffWrap .stMain,#staffWrap .stMain.stM06{width:85%; top: -12vw;}
#staffWrap .stMain .stM_tx .st_Name,#staffWrap .stMain.stM06 .stM_tx .st_Name{font-size: 4.6vw; margin-top: 0; letter-spacing: -0.1em;}
#staffWrap .stMain .stM_tx .st_Spec,#staffWrap .stMain.stM06 .stM_tx .st_Spec{font-size: 3.0vw; margin: 1em 0; line-height: 1.3; letter-spacing: -0.1em;}
#staffWrap .stMain.stM06 .stM_img{width:63%;}
#staffWrap .stMain.stM06 .stM_tx{width:33%;}
#employeeStaff .fracWhiteBox{padding-top:32vw;}

.st_annotation{font-size: 2.8vw; width: 90%;}
.stUnder_bt{margin-top: 5vw;}
.stUnder_bt li{width: 48.5%; margin-bottom: 2vw;}
.stUnder_bt .ocImg{width: 33%;}
.stUnder_bt .ocSpec{width: 67%; background-color: white; justify-content: center; align-items: center; text-align: center; flex-flow: column;}
.stUnder_bt .ocSpec .ocDepartment{font-size: 2.4vw; letter-spacing: -0.1em;}
.stUnder_bt .ocSpec .ocName{font-size: 3.6vw;}	
	
	
	
	
	
/* ----------------------------------------------------
プロジェクトストーリーindex
---------------------------------------------------- */
#ct_project .projectBack{height: 60vw;}
.prBnWrap{width:90%; margin: 10vw auto 5vw auto;}
.prBnWrap .prBn{width:90%; min-height: 45.33vw; margin-bottom: 7.33vw}
.prBnWrap .prBn:first-child{margin-right: 0;}
.prBnWrap .prBn .prBnRead{margin: 3vw 0 5vw 0;}
.prBnWrap .prBn .moreBt span::before {width: 3vw; height: 3vw; background-position: right 20%;}

/*project下層*/
.proInrContent,.proInrContent02{width: 90%; margin: 25vw auto 5vw auto;}
.proInrContent .prCatch,.proInrContent02 .prCatch{font-size: 4.2vw;}
.proInrContent .projectRead,.proInrContent02 .projectRead{margin: 3vw auto 9vw auto; line-height: 1.8; text-align: left;}
.proInrContent .proMemClum{justify-content: center;}
.proInrContent .proMemClum li,.proInrContent02 .proMemClum li{width: 47%; margin-bottom: 4vw;}
.memName{font-size: 3.2vw;}
.memName span{padding: 0 0.3em;}
.proMemClum li:nth-child(1){margin-right: 6%;}
	
.prSubtitle{text-align: center; margin-top: 4em;}
.prSubtitle span{font-size: 4vw;}	

.memSpec{font-size: 3.2vw;}
.fractionBox{margin-top: 5vw;}
.fractionBox .frcTitle .fracTitle{font-size: 3.6vw;}
.fracWhiteBox{padding: 8vw 0; margin-top: 2vw;}
.fracCtCaset{width: 90%; padding-bottom: 5vw;}
.fracCtCaset h5{font-size: 3.2vw; margin-bottom: 2.8vw; line-height: 1.3;}
.fracCtCaset h5:before {width: 3vw; height: 4px; top: 0.5em;}
.empClume .box {display: flex; display: -webkit-flex; flex-flow: column;}
.empClume .space {display: none;}
.empClume .space.left {display: none;}
.empClume .photo {width: 100%; float: none; margin-left: 0; margin-bottom: 1em;}
.photo.left {margin-right: 0; float: none;}
.empClume .photo img {width: 100%; height: auto; vertical-align: top;}
.empClume.flex{flex-flow: column;}
.fraCaseName{width: 100%; color: white; margin-bottom: 0;}
.fraCaseName span{padding: 0 1.5em; line-height: 1;}

.fracInnaer{width:100%; display: flex; flex-flow: column;}
.underProImg{width: 80%; margin: 2em auto 0 auto;}	
	
.empClume p {font-size: 3.2vw;}	
	
	
/* ----------------------------------------------------
DXindex
---------------------------------------------------- */
#ct_dx .dxBack{height: 60vw;}
.dxBnWrap{width:90%; margin: 10vw auto 5vw auto;}
.dxBnWrap.flex{justify-content: center;}
.dxBnWrap .dxBn{width:90%; min-height: 45.33vw; margin-bottom: 7.33vw;}
.dxBnWrap .dxBn:first-child{width:90%;}
.dxBnWrap.ctDXbnwrap .dxBn:first-child{width: 90%;}
.dxBnWrap .dxBn:first-child h3{overflow: hidden;}
.dxBnWrap .dxBn:first-child h3 img{width:200%; margin-left: -50%;}
.dxBnWrap.ctDXbnwrap .dxBn:first-child h3 img{width:100%; margin-left: 0%;}
.dxBnWrap .dxBn .dxBnRead{margin: 3vw 0 5vw 0;}
.dxBnWrap .dxBn .moreBt span::before {width: 3vw; height: 3vw; background-position: right 20%;}
.dxBnWrap .dxBack_special {background-position: center center;}	
	
/*DX下層*/
.dxMainWrap{width:90%; margin: 7vw auto 3vw auto;}
.dxMainWrap .dxNameBox2,.dxMainWrap .dxNameBox3{position: relative; bottom: inherit; left: inherit; transform: inherit; width: 100%; padding: 1em 2em 0.5em 2em; background-color: white; }
.dxMainWrap .dxNmIn{padding: 0; text-align: center; display: block; width: 100%;}

.dxMainWrap .dxSpec{font-size: 3.0vw;}
.dxMainWrap .dxName{font-size: 4.0vw; padding-bottom: 0.5em;}
.dxU_read{width:90%; margin: 25vw auto 0 auto;}
.dxU_read .dxU_r01{font-size: 4.4vw;}
.dxU_read .dxU_title{width: 100%; margin: 5vw auto; }
.dxInrContent{width: 90%; margin: 10vw auto 5vw auto;}	
	
	
/* ----------------------------------------------------
働き方紹介
---------------------------------------------------- */
#ct_workStyle .workStyBack{height: 60vw;}
.demandMan{margin: 10vw auto 5vw auto;}
.demandMan .flex{flex-flow: column;}
.demandMan .dmTitle{text-align: center; margin-bottom: min( 3.667vw , 55px ); }
.demandMan .dmTitle span{font-size: 3vw;}
.demandMan .dmCatch{font-size: 3.8vw; text-align: center; border-right: none; padding-right: 0;}
.demandMan .dmRead{text-align: center;}

/*教育キャリア*/
#educationWrap {background: none; background-size: 5% auto;}
#educationWrap h3{writing-mode: horizontal-tb; font-size: 3.8vw; margin: 0 auto 3vw auto; width: 100%; text-align: center;}
#educationWrap h3 p{display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; width: 60%; margin: 0 auto;}
	
.wrsWhiteWrap{width: 100%; padding: 7vw 0;}
.wrsWhiteWrap .wrs3clum{}
.wrsWhiteWrap .wrs3clum.flex{justify-content: center; flex-flow: column;}
.wrsWhiteWrap .wrs3clum .wrs3Inner{width: 90%; border-right: none; padding: 0 3% 12vw 3%; display: block; margin: 0 auto;}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edSubTitle span{font-size: 3.2vw;}
	

.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewText span{font-size: 2.8vw!important; }
@media (orientation: landscape) {
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewText{min-height: 5.5em; font-size: 2.8vw;}	
}
	
.edInterviewTitle {font-size: 5vw;}
.edInterviewTitle::before,.edInterviewTitle::after {width: 20%;;}
	
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewMore{background-color: #fff; position: absolute; bottom: -0.85em; right: 1em; margin-bottom: 0; padding: 0 0.5em; color: #b64c1e; font-weight: 600;}
.edInterviewMore span::before {width: 1.7vw; height: 1.7vw;}
.edInterviewMore span::after {right: 1px; width: 1.96vw;}

.wrsWhiteWrap .atherEd{margin: 2vw auto 0 auto; width: 90%;}
.wrsWhiteWrap .atherEd .athE_title{margin-bottom: 6vw;}
.wrsWhiteWrap .atherEd .athE_title span{font-size: 3.2vw;}
.wrsWhiteWrap .atherEd .athClum{margin-bottom: 5vw; flex-flow: column;}

.wrsWhiteWrap .atherEd .athClum .athIcon{width: 30%; margin: 0 auto 1em auto;}
.wrsWhiteWrap .atherEd .athClum .athSubTitle{width: 100%; padding-top: 1vw; text-align: center;}

.wrsWhiteWrap .atherEd .athClum .athSubtext{width: 100%;}
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewPhoto{margin-bottom: 5vw;}
	
/*社内制度*/
	
#systemWrap {background: none; margin-top: 8vw;}
#systemWrap h3{writing-mode: horizontal-tb; font-size: 3.8vw; margin: 0 auto 3vw auto; width: 100%; text-align: center;}
#systemWrap h3 p{display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; width: 60%; margin: 0 auto;}	
	
#systemWrap .wrsWhiteWrap .atherEd .athClum{padding-bottom: 2vw}

.childcare{width: 100%; margin: 0 auto;}
.childcare.flex{align-items: flex-start; flex-flow: column;}
.childcare span{font-size: 3.6vw; display: block; margin: 0 auto;}
.childcare p{width: 90%; margin: 3vw auto;}
	
	
.childInterviewBox{width: 90%; margin-bottom: 5vw}
.childInterviewBox .childInterviewPhoto{width: 30%;}
.childInterviewBox .childInterviewTxBox{width: 60%;}
.childInterviewBox .childInterviewTitle{color: transparent; -webkit-text-stroke: 1px #00234e; font-family: 'Libre Franklin', sans-serif; font-size: min( 2vw , 3rem ); margin-bottom: 0;}
.childInterviewBox .childInterviewText{font-weight: 600; margin-bottom: 0;}


.childInterviewBox .childInterviewMore span::before {width: 3vw; height: 3vw;}



.crosiRead{color: white; text-align: center; margin: min( 3.667vw , 55px ) 0 min( 2vw , 30px ) 0;}



/*フォトカラム*/
#photoClum .container {width: 100%; max-width: 1500px; margin: 0 auto;
display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.4fr 1fr;
  gap: min( 1vw , 15px ) min( 1vw , 15px );
  grid-auto-flow: row;
  grid-template-areas:
    "p01 p01 p01 p02"
    "p01 p01 p01 p03"
    "p05 p06 p07 p03"
    "p08wrap p08wrap p08wrap p09"
    "p08wrap p08wrap p08wrap p10"
    "p12wrap p12wrap p13 p10"
    "p12wrap p12wrap p13 p11"
    "p14wrap p14wrap p14wrap p14wrap"
    "p14wrap p14wrap p14wrap p14wrap"
    "p15wrap p15wrap p15wrap p16";
}
#photoClum img{object-fit:cover; width: 100%; height: 100%;}
#photoClum .p01 { grid-area: p01;}
#photoClum .p02 { grid-area: p02;}
#photoClum .p03 { grid-area: p03;}
#photoClum .p05 { grid-area: p05;}
#photoClum .p06 { grid-area: p06;}
#photoClum .p07 { grid-area: p07;}
#photoClum .p09 { grid-area: p09;}
#photoClum .p10 { grid-area: p10;}
#photoClum .p11 { grid-area: p11;}
#photoClum .p08wrap {  display: grid;
  grid-template-columns: 1fr 1.2fr 0.8fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: min( 1vw , 15px ) min( 1vw , 15px );
  grid-auto-flow: row;
  grid-template-areas:
    "p08in01 p08in01 p08in02"
    "p08in01 p08in01 p08in02"
    "p08in01 p08in01 p08in02";
  grid-area: p08wrap;
}
#photoClum .p08in01 { grid-area: p08in01;}
#photoClum .p08in02 { grid-area: p08in02;}
#photoClum .p12wrap {  display: grid;
  grid-template-columns: 1fr 0.5fr 1.5fr;
  grid-template-rows: 1fr 0.5fr 1.5fr;
  gap: min( 1vw , 15px ) min( 1vw , 15px );
  grid-auto-flow: row;
  grid-template-areas:
    "p12in01 p12in01 p12in02"
    "p12in01 p12in01 p12in02"
    "p12in03 p12in03 p12in03";
  grid-area: p12wrap;
}
#photoClum .p12in01 { grid-area: p12in01;}
#photoClum .p12in02 { grid-area: p12in02;}
#photoClum .p12in03 { grid-area: p12in03;}
#photoClum .p13 { grid-area: p13;}
#photoClum .p14wrap {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: min( 1vw , 15px ) min( 1vw , 15px );
  grid-auto-flow: row;
  grid-template-areas:
    "p14in01 p14in02 p14in02"
    "p14in01 p14in02 p14in02";
  grid-area: p14wrap;
}
#photoClum .p14in02 { grid-area: p14in02; }
#photoClum .p14in01 { grid-area: p14in01; }
#photoClum .p15wrap {  display: grid;
  grid-template-columns: 1fr 0.5fr 1.5fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: min( 1vw , 15px ) min( 1vw , 15px );
  grid-auto-flow: row;
  grid-template-areas:
    "p15in01 p15in01 p15in02"
    "p15in01 p15in01 p15in02"
    "p15in01 p15in01 p15in02";
  grid-area: p15wrap;
}
#photoClum .p15in01 { grid-area: p15in01; }
#photoClum .p15in02 { grid-area: p15in02; }
#photoClum .p16 { grid-area: p16; }
#photoClum .p17 { grid-area: p17; }

.wrAriaTitle{position:relative; color: white; font-size: 3.6vw; text-align: center; margin-bottom: min( 4.667vw , 70px ); min-height: 3em;}
.wrAriaTitle p.wraJp{position:absolute; top: 0; left: 0; z-index: 2; width: 100%; text-align: center;}
.wrAriaTitle p.wraEn{position:absolute; top: 15%; left: 50%; z-index: 1; width: 60%; text-align: center; transform: translateX(-50%);}

#workMovie{margin-bottom: min( 4.667vw , 70px )}
#youtube-movie {margin: 0 auto; width: 100%; max-width: 850px;}
#youtube-movie-content {padding-top: 56.25%; position: relative; width: 100%;}
#youtube-movie-content iframe {height: 100% !important; left: 0; position: absolute; top: 0; width: 100% !important;}
.yt-wrapper img {position: absolute; top: 0; left: 0; width: 100%; cursor: pointer;}
.yt-wrapper img.is-hide {opacity: 0; pointer-events: none; visibility: hidden; transition: .5s;}



/*モーダル指定*/
.intMordel{background-color: rgba(255,255,255,0.8); width: 75%; max-width: 1120px; margin: 0 auto; position: relative; opacity: 0; transition: opacity 1s; padding: min( 6vw , 90px ) 0 min( 3.66vw , 55px) 0;}
.popup-modal-dismiss{position: relative; display: block; text-align: center; width: 20%; margin: 0 auto;}
.intMordel.mfp-ready{opacity: 0.8;}
.intMordel.mfp-removing{opacity: 0;}
.intMordel h3{padding: 0 0 min( 5.667vw , 85px ) 0; text-align: center;}
.intMordel h3 span{color: #00234e; font-size: min( 2vw , 30px ); font-weight: 600; padding: 0.1em 0.3em;}
.intMordel .contenerIn{width:83.7%; margin: 0 auto;}
.intMordel h4{position: relative; font-size: min( 1.6vw , 2.4rem ); margin-bottom: min( 1.667vw , 25px ); font-weight: 600; line-height: 1.3; text-indent: -1.1em; padding-left: 1.5em;}
.intMordel h4:before {position: absolute; top: 0.6em; left: 0; width: min( 1.333vw , 20px); height: 4px; content: ''; background: #8091a6;}
.intMordel h4 span {position: relative; padding-left: 1.1em;}
.intinFirst{width: 100%; position: relative;}
.intinFirst .intInnerCaset{width: 64%;}
.intinFirst .intInnerPhoto{width: 34%; position: relative; top: 0; right: -3%;}
.intinFirst .intinName{display: block; text-align: center; margin-bottom: 0; line-height: 1.3; margin-top: 0.5em;}
.intinFirst .intinName span{display: block; font-size: min( 1.733vw , 2.6rem ); font-weight: 600;}
.intInnerCaset{width:100%; margin: 0 auto min( 4.667vw , 70px) auto;}
.intinBottm{border-top:1px solid #00234e; margin-top: min( 3.66vw , 55px); padding: min( 3.66vw , 55px) 0 0 0;}
.intinBottm p{width:83.7%; margin: 0 auto;}
	
	
	
	

	
	
	
/*モーダル指定*/
.intMordel{width: 90%; padding: 10vw 0;}
.intMordel h3{padding: 0 0 2.5vw 0;}
.intMordel h3 span{font-size: 4.2vw;}
	
.intMordel h4{font-size: 3.2vw; margin-bottom: 2.8vw; line-height: 1.3;}
.intMordel h4:before {width: 3vw; height: 4px; top: 0.5em;}
.intinFirst{width: 100%; position: relative;}
.intinFirst .intInnerCaset{width: 100%;}
.intinFirst .intInnerPhoto{width: 100%; right: 0; margin-bottom: 5vw;}
.intinFirst .intinName{margin-bottom: 3vw;}
.intinFirst .intinName span{font-size: 4.6vw;}
.intInnerCaset{width:100%; margin: 0 auto min( 4.667vw , 70px) auto;}
.intinBottm{margin-top: 4vw; padding: 4vw 0 0 0;}
.intinBottm p{width:83.7%; margin: 0 auto;}	
	
.detaSienceMem{margin-bottom: 6vw;}
.detaSienceMem li{width: 48%; margin-top: 4vw;}
.detaSienceMem .dsMemImg{margin-bottom: 2vw;}
.detaSienceMem .dsMemName{font-size: 3.2vw;}
.detaSienceMem .dsMemSpec{font-size: 2.4vw; margin-bottom: 0; line-height: 1.3;}
	
	
}
	
	
	
	
	
@media (max-width: 670px) {
.wrsWhiteWrap .wrs3clum .wrs3Inner .edInterviewBox .edInterviewText{min-height: 5.9em; font-size: 3.0vw;}
	}