@charset "utf-8";
/* =======================================

CommonElements

======================================= */
body {font-size: 100%;line-height: 160%;/*font
-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;*/
font-family: 'Noto Sans JP', sans-serif;color: #333;background: #fff;position: relative;overflow: hidden;visibility: hidden;}
a:link {text-decoration: nderline;color: #0000ff;}
a:visited {text-decoration: nderline;color: #0000ff;}
a:active {text-decoration: nderline;color: #0000ff;}
a:hover {text-decoration: none;color: #0000ff;}
p {padding: 0 0 30px 0;color: #666;}
/* #container
--------------------------- */
#container {top: 0;left: 0;width: 100%;position: absolute;z-index: 1;}
/* .stageBase
--------------------------- */
.stageBase {width: 100%;position: relative;}
.stageBase .fieldWrap {padding: 100px 0 0 0;}
/* .stageSlide
--------------------------- */
.stageSlide {position: relative;overflow: hidden;visibility: hidden;}
.stageSlide .slideWrap {top: 0;left: 0;position: absolute;overflow: hidden;}
.stageSlide .slideWrap:before,
.stageSlide .slideWrap:after {content: " ";display: table;}
.stageSlide .slideWrap:after {clear: both;}
.stageSlide .slideWrap {*zoom: 1;}
.stageSlide .slidePanel {float: left;overflow: hidden;}
.stageSlide .sdPrev,
.stageSlide .sdNext {margin-top: -20px;top: 50%;width: 40px;height: 40px;display: block;position: absolute;z-index: 99;filter: drop-shadow(0 0 4px rgba(255,255,155,1));}
.stageSlide .sdPrev {left: 20px;background: transparent url(../img/slide_prev.png) no-repeat left top;background-size: contain;}
.stageSlide .sdNext {right: 20px;background: transparent url(../img/slide_next.png) no-repeat left top;background-size: contain;}
.stageSlide .slideNav {bottom: 70px;left: 0;width: 100%;height: 15px;text-align: center;position: absolute;z-index: 200;}
.stageSlide .slideNav a {margin: 0 5px;width: 15px;height: 15px;display: inline-block;overflow: hidden;background: #039;opacity: 0.8;border-radius: 50%;border: 2px solid rgba(255,255,255,0.8);}
.stageSlide .slideNav a.pnActive {background: #09f;opacity: 1;}
/* #pageNav
--------------------------- */
#pageNav {top: 0;right: 0;text-align: center;z-index: 2;display: inline-block;position: relative;width: 100%;}
#pageNav ul {}
#pageNav ul li {display: inline-block;overflow: hidden;}
#pageNav ul li a {display: inline-block;transition: color 0.3s ease;color: #595757;line-height: 1.5;text-decoration: none;padding: 0 0.6rem;font-size: 100%;}
#pageNav ul li,#pageNav ul li a {}
#pageNav ul li.activeStage a {background: #c0d6ff}
/* #pageDown
--------------------------- */
#pageDown {bottom: 0;left: 0;width: 100%;height: 70px;text-align: center;position: absolute;overflow: hidden;z-index: 100;padding: 15px 0 0 0;filter: drop-shadow(0 1px 3px rgba(0,102,204,1))  drop-shadow(0 0 2px rgba(0,102,204,1));}
#pageDown a {margin: 0 auto;width: 30px;height: 30px;background: transparent url(../img/next_arw.png) no-repeat center center;display: block;}
/* #1640px
--------------------------- */

.stageBase .fieldWrap {position: relative;padding-top: 0;height: 100%;}
.cont {position: absolute;top: 0;left: 10%;z-index: 100;display: block;width: 80%;height: 100%;justify-content: center;align-items: center;}
.contInner {text-align: center;flex-basis: 100%;padding-top: 0;}

.stageSlide .slideNav {bottom: 20px;}
#pageDown a {width: 36px;height: 76px;background: transparent url(../img/common/scrolldown.svg) no-repeat center center;display: block;}
.bgs {background-size: cover !important;}
.v1 {background: url(../img/bg/v1.jpg) no-repeat center top;}
.v2 {background: url(../img/bg/v2.jpg) no-repeat center top;}
.v3 {background: url(../img/bg/v3.jpg) no-repeat center top;}
header {position: fixed;top: 0;left: 0;z-index: 1000;display: table;width: 100%;height: 73px;border-bottom: 1px solid #76777a;background: #fff;vertical-align: middle;transition: top 0.3s ease;}
#Hinner {display: block;padding: 1.5rem 0 1rem;vertical-align: bottom;text-align: center;}
.Hlogo {display: inline-block;width: auto;height: 20px;vertical-align: bottom;}
header h1 {background: transparent;}
#Hinner h1 {display: block;margin: 0;vertical-align: bottom;line-height: 1;margin:0 0 1.25rem;}
.stageBase h2 {position: relative;z-index: 10;display: inline-block;margin: 10rem 0 2rem 5%;padding-left: 12px;border-left: 4px solid #fff;color: #fff;text-align: left;font-size: 1.3rem;line-height: 1;letter-spacing: 2px;}
.stageBase h2.Tit {border-left: 4px solid #fff;color: #fff;filter: drop-shadow(0 0 4px rgba(8,78,167,1.5));}
.stageBase h2.TitB {border-left: 4px solid #000;color: #333;}
.stageBase h2.noTit {position: relative;z-index: 10;display: inline-block;margin: 0 0 0 10%;margin-top: 120px;padding-left: 12pxcolor: #ccc;text-align: left;font-size: 18px;line-height: 1.4;}
.stageBase h2.noTitB {position: relative;z-index: 10;display: inline-block;margin: 0 0 2em 10%;margin-top: 120px;padding-left: 12px;color: #333;text-align: left;font-size: 18px;line-height: 1.4;}
.stageBase h2 small {display: block;margin-top: 8px;font-size: 80%;}
/*.newsList
--------------------------- */
.newsList {margin-bottom: 2em;color: #666;}
.newsList dt {float: left;}
.newsList dd {margin: 0 0 1em 6em;}

/*.stage1CC--------------------------- */
#stage2 .fieldWrap{padding-top: 0;}
/*#stage2.stageBase h2{margin-top: 0;}*/
#stage2 .cont{position: relative;top: 0;}
.stage1CC {position: relative;min-height: 82px;max-width: 1415px;width: 100%;height: 20%;margin: 10% auto;}
.stage1C1 {z-index: 20;color: #fff;text-align: center;letter-spacing: 2;font-weight: bold;font-size: 1.4rem;line-height: 2;font-feature-settings: 'palt';}
.spBR {display: inline;}
.stage1CC .w1,.stage1CC .w2,.stage1CC .w3 {position: absolute;top: 0;height: 40%;}
.stage1CC .w1 {left: 0;}
.stage1CC .w2 {right: 0;}
.stage1CC .w3 {left: 0;width: 100%;}
.WP {display: block;margin: 0 8%;font-size: 14px;line-height: 1.6;position: relative;margin-bottom: 4rem !important;}
#stage4.stageBase h2.TitB{margin-bottom: 0;}
.WP > p {padding: 0 0 1em 0;}
.WP h3 {line-height: 1;margin-bottom: 1em;text-indent: -0.35em;}
.LR {display: flex;flex-wrap: nowrap;}
#stage7 .LR {flex-wrap: wrap;}
.LR > div {flex-basis: 100%;width: 100%;position: relative;}
#stage7 .LR > div:nth-of-type(1){margin-bottom: 2rem;}
#stage7 .LR > div:nth-of-type(1) img{width: 100%;}
#stage7 .LR > div:nth-of-type(2){width: 100%;}

/*.stage6--------------------------- */
#stage6 .stageSlide .sdNext:after {content: '受賞歴';display: block;width: 1em;height: 5em;position: absolute;bottom: -6em;line-height: 1.2;color: #333;}
#stage6 .stageSlide .sdPrev:after {content: '略歴';display: block;width: 1em;height: 6em;position: absolute;bottom: -7em;line-height: 1.2;color: #333;}
#stage6 .stageSlide .sdNext:after,#stage6 .stageSlide .sdPrev:after {left: 1em;font-size: 14px;}
#stage6 .slidePanel2 .newsList dd {margin: 0 0 0.75em 5em;position: relative;}
#stage6 .slidePanel2 .LR {justify-content: space-between;}
#stage6 .slidePanel2 .LR div {flex-basis: 48%;width: 48%;}
#stage6 .newsList dd:nth-of-type(1) img {width: 26% ;min-width: 64px;float: right;margin: 0 0 1em 2em;height: auto;}
#stage6 .WP {margin-top: 2em;}

/*.stage7
--------------------------- */
#stage7 .newsList dd:nth-of-type(1) img {width: 30% !important;float: right;display: none;}

/*.stage8
--------------------------- */
#stage8 .stageSlide .sdNext:after {content: '応募先';display: block;width: 1em;height: 5em;position: absolute;bottom: -6em;line-height: 1.2;color: #333;}
#stage8 .stageSlide .sdPrev:after {content: '勤務概要';display: block;width: 1em;height: 6em;position: absolute;bottom: -7em;line-height: 1.2;color: #333;}
#stage8 .stageSlide .sdNext:after,#stage8 .stageSlide .sdPrev:after {left: 1em;font-size: 14px;}

/*.stage4
--------------------------- */
.consept {position: relative;}
.consept img {width: 100%;height: auto;}
.overlay {position: absolute;top: 0;left: 0;}

/*.popup
--------------------------- */
.worksList {display: flex;margin: 0 5%;align-content: space-between;flex-flow: row wrap;margin-top: 0;}
.worksList a {display: block;flex-basis: calc((100% - 5em) / 6 );margin-bottom: 1em;position: relative;margin-right: 1em;}
.worksList a:nth-child(6n) {margin-right: 0;}
.worksList a img {display: block;width: 100%;height: auto;vertical-align: bottom;}
.worksList a:before {content: "";background: rgba(6,53,159,0.7);display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 10;transition: opacity 0.3s ease-out;}
.worksList a:hover:before {opacity: 0;}
.slideWrap {position: relative;}
#popupWorks {width: 100%;height: calc(100% - 72px);background: rgba(0,0,0,0.8);position: fixed;left: 0;top: 72px;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;z-index: 1000;display: none;cursor: pointer;}
.fadeinWorksList {animation: kf_fadein ease-in-out 0.3s 1;}
@keyframes kf_fadein {0% {opacity: 0;}
100% {opacity: 100;}
}
  
.slideCaption {opacity: 0;}
.consept {position: relative;}
.mapKD {min-height: 400px;}
#btn_close {position: absolute;right: 6px;top: 0;width: 32px;height: 32px;display: block;cursor: pointer;}
#screenW {width: 45%;height: 45%;position: relative;}

.vSPILB{display: inline-block;}
.vPCILB{display: none;}


  body{visibility: visible !important;overflow: scroll!important;}
  #stage1,#stage2{min-height: 100vh !important;overflow: hidden;margin-bottom: 75px;}
  #stage9{min-height: 100vh !important;padding-bottom: 150px;}
  #stage1 #outer{overflow: hidden;}
  .stageSlide{visibility: visible !important;}
  .stageSlide .slidePanel{width: 100%}
#outer,#stage1.stageBase .fieldWrap{height: 100vh !important;}
#outer,#stage2.stageBase .fieldWrap{min-height: 100vh !important;}
  /*#stage4.stageBase .fieldWrap,#stage2.stageBase .fieldWrap{height: 100vh !important;}*/
  #stage4 p{text-align: center;font-size: 1.2rem;line-height: 1.6;margin: 2rem auto;width: 90%;position: relative;}
  .ultraWide #stage2,.ultraWide #stage3,.ultraWide #stage4{min-height: 160vh  !important;}
.ultraWide #stage2.stageBase .fieldWrap ,.ultraWide #stage3.stageBase .fieldWrap,.ultraWide #stage4.stageBase .fieldWrap{height: 200vh !important;}
  .ultraWide #stage2,.ultraWide #stage3,.ultraWide #stage4{min-height: 200vh  !important;}
  .ultraWide .stageBase h2{margin-top: 90px}
  .ultraWide #screenW{width: 40% !important;}
  #container{position: relative !important;}

	
@media screen and ( min-width:640px) {
	.newsList dd {margin: 0 0 1em 7em;}
	#pageNav ul li a {padding: 0 0.75rem;font-size: 110%;}
	/*.stage1CC--------------------------- */
.stage1CC {min-height: 90px;}
.stage1C1 {z-index: 20;color: #fff;text-align: center;letter-spacing: 2;font-weight: bold;font-size: 24px;line-height: 2.3;font-feature-settings: 'palt';}
.spBR {display: inline;}
.stage1CC .w1,.stage1CC .w2,.stage1CC .w3 {position: absolute;top: 0;height: 100%;}
/*SP landscape*/}

@media screen and ( min-width:768px) {
/*html{font-size: 16px;}*/
#stage4 p{text-align: center;font-size: 1.4rem;}
.stageBase h2 {font-size: 1.6rem;}
/*tablet Portlate*/}

@media screen and (min-width:980px) {
.vSPILB{display: none;}
.vPCILB{display: inline-block;}
.WP {margin: 0 10%;}

/*#stage2 .fieldWrap{padding-top: 12rem;}*/
#stage4 p{text-align: center;font-size: 1.5rem;}
.Hlogo {height: 23px;}
#pageNav ul li a {padding: 0 1.5rem;font-size: 112%;}
#stage7 .LR {flex-wrap: nowrap;}
.LR > div:nth-of-type(1){flex-basis: 40%;width: 40%;margin-bottom: -1rem !important;}
#stage7 .LR > div:nth-of-type(1) img{width: calc(100% - 3rem);}
.LR > div:nth-of-type(2){flex-basis: 60%;width: 60%;}
.stageBase h2 {margin: 11rem 0 2rem 10%;}
.mapKD {min-height: 320px;position: absolute;left: 0;bottom: 0;}
.mapKD + p{display: none;}
#screenW {width: 70%;height: 60%;position: relative;top: 4%;}
#btn_close {position: absolute;right: 3px;top: 0;width: 32px;height: 32px;display: block;}
.worksList {margin: 0 10%;margin-top: 2em;}

/*.stage1CC--------------------------- */
.stage1CC {min-height: 105px;}
.stage1C1 {z-index: 20;color: #fff;text-align: center;letter-spacing: 2;font-weight: bold;font-size: 24px;line-height: 2.3;font-feature-settings: 'palt';position: relative;width: 110%;left: -5%;top: -2rem;}
.spBR {display: none;}
.stage1CC .w1,.stage1CC .w2,.stage1CC .w3 {position: absolute;top: 0;height: 100%;}
.stage1CC .w1 {left: 0;}
.stage1CC .w2 {right: 0;}
.stage1CC .w3 {left: 0;width: 100%;}

#stage6 .newsList dd:nth-of-type(1) img {width: 15.5rem !important;}

/*tablet landscape*/}

@media screen and (min-width:1280px) {
	.mapKD {min-height: 360px;}
	}

@media screen and (min-width:1620px) {
	
	#conceptEgg{max-width: 1620px;margin: 0 auto;}
	.stageBase h2{margin-top: 12rem !important;}
	}

@media screen and (max-width:769px) and (orientation: portrait)  {
	.worksList a {display: block;flex-basis: calc((100% - 2em) / 3 );margin-bottom: 1em;position: relative;margin-right: 1em;}
	.worksList a:nth-child(6n){margin-right: 1em;}
	.worksList a:nth-child(3n){margin-right: 0;}
	.stage1CC {margin: 20 0 20% !important;}
	.stage1CC .w1,.stage1CC .w2,.stage1CC .w3 {height: 100% !important;}
	}

@media screen and (max-width:769px) and (orientation: landscape)  {
	#Hinner{padding: 1rem 0 0.75rem;}
	#Hinner h1{margin: 0 0 1rem;}
	#screenW {width: 56%;height: 56%;position: relative;top: 9%;}
	#stage2 .fieldWrap{/*padding-top: 10rem;*/}
.stage1CC {margin: 0 0;}
.stage1CC .w1,.stage1CC .w2,.stage1CC .w3 {height: 90% !important;}
	.stage1C1{font-size: 1.2rem;line-height: 1.6;}
	}

@media screen and (max-width:375px) and (orientation: landscape)  {
	#Hinner{padding: 1rem 0 0.75rem;}
	#Hinner h1{margin: 0 0 1rem;}
	#screenW {width: 40%;height: 40%;position: relative;top: 9%;}
	}
@media screen and (max-width:420px) 	{
	.cont{width: 90%;left: 5%;}
.stage1CC {margin: 20% 0 15%;}
.stage1CC .w1,.stage1CC .w2,.stage1CC .w3 {height: 65% !important;}
	.stage1C1{font-size: 1.2rem;}
	#conceptEgg{margin: 2em 0 1em !important;}
/*5.4inchSP*/}

@media screen and (max-width:375px) {
	#pageNav ul li a {padding: 0 0.3rem;font-size: 90%;}
	#logoOuter span{flex-basis: 65%;max-width: 65%;}
	.stage1CC {margin: 15% 0 5% !important;}
	.stage1C1{font-size: 0.95rem;}
	.stage1CC .w1,.stage1CC .w2,.stage1CC .w3 {height: 50% !important;}
/*4inchSP*/}
	

/*.smallPC
--------------------------- */
@media (orientation: portrait) {
.spBR {display: inline !important;}
#screenW {width: 100%;height: 60%;position: relative;}
.worksList {margin: 5% 8% 0;}
.WP {line-height: 1.6;margin: 2em 8% 1em;}
.v1 {background: url(../img/bg/v1.jpg) no-repeat center top;background-size: cover;}
.v2 {background: url(../img/bg/v2.jpg) no-repeat center top;background-size: cover;}
.v3 {background: url(../img/bg/v3sp.jpg) no-repeat center top;background-size: cover;}
/*デバイスが縦向きの場合の記述*/}