@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');


/* topimage
--------------------------------------------------------------------------*/
#topimage-wrap {
  margin: 80px 0;
  height: calc(100vh - 80px);
  width: 100vw;
  /*background-color: #333;*/
}
.topimage-area {
  max-width: 1920px;
  /*background: url("../../img/topimage03.jpg") center left/cover no-repeat;*/
	position: relative;
	overflow: hidden;
}
#video-area {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: #96a6be;
}
#video {
	width: 100vw;
	height: auto;
	vertical-align: top;
	position: relative;
}
#video video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	min-height: 100%;
	min-width: 100%;
}
.topimg-area {
  display: flex;
  justify-content: flex-start;
  width: 44%;
}
.topimg {
  height: calc(100vh - 80px);
  width: 50%;
  position: relative;
  text-align: center;
  transition: width 0.6s ease;
}
.topimg:hover {width: 65%;}
.topimg.top01 {background: url("../../img/topimage01.png") center/cover no-repeat;}
.topimg.top02 {background: url("../../img/topimage02.png") center/cover no-repeat;}
.topimg .topimg-text {
  position: absolute;
  top: 56%;
  width: 100%;
  text-shadow: 2px 2px 3px #000;
  color: #e4c42c;
  transition: opacity 0.6s ease;
}
.topimg .topimg-title {
  margin: 150px auto 0;
  width: 100%;
  height: 108px;
}
.topimg.top01 .topimg-title {background: url("../img/topimage01-title.svg") center/contain no-repeat;}
.topimg.top02 .topimg-title {background: url("../img/topimage02-title.svg") center/contain no-repeat;}
/* midashi */
.topimg-midashi {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	height: 13vh;
	width: 53%;
	text-shadow: 3px 3px 7px rgba(0,0,0,0.8);
	line-height: 1.3;
	font-weight:bold;
	font-size: 3.1vw;
	font-feature-settings: "palt" 0;
	color: #d9b95f;
}

@media screen and (min-width: 1540px) and (max-width: 1980px) {
  .topimg .topimg-title {
    margin-top: 200px;
    height: 160px;
	}
}

@media screen and (max-width: 1366px) {
  .topimage-area {background-position: center left 40%;}
	#video {
		width: auto;
		height: 100vh;
		left: -15vw;
	}
	.topimg-midashi {font-size: 3.9vw;}
}

@media screen and (max-width: 1280px) {
  .topimage-area {background-position: center left 43%;}
	#video {
		width: auto;
		height: 100vh;
		left: -20vw;
	}
}

@media screen and (max-width: 1280px) and (max-height: 800px) {
	#video {
		width: auto;
		height: 100vh;
		left: -10vw;
	}
}

@media screen and (max-width: 1024px) {
	#video {
		width: auto;
		height: 100vh;
		left: -20vw;
	}
  .topimg .topimg-title {height: 120px;}
  .topimg .topimg-text {
		top: 50%;
		font-size: 1.38vw;
	}

}

@media screen and (min-width: 1024px) and (orientation: portrait) {
  #topimage-wrap,.topimage-area,.topimg {height: 47vh;}
	#video {
		width: auto;
		height: 50vh;
	}
}

@media screen and (max-width: 896px) {
  #topimage-wrap {
    margin: 55px 0 160px;
    height: calc(42vh - 80px);
  }
	#video {
		width: auto;
		height: 42vh;
		left: 0;
	}
  .topimage-area {background-position: center left;}
  .topimage-area,.topimg {height: 42vh;}
  .topimg-area {width: 55%;}
  .topimg .topimg-title {
    margin-top: 100px;
    height: 90px;
  }
  .topimg .topimg-text {font-size: 0.7rem;}
  .topimg .topimg-text {top: 55%;}
	.topimg-midashi {
		width: 43%;
		font-size: 3.5vw;
	}
}

@media screen and (max-width: 480px) {
  #topimage-wrap {
    margin: 55px 0 80px;
    height: calc(100vh - 53px);
  }
  #topimage-wrap,.topimage-area {height: calc(100vh - 53px);}
  .topimage-area {
    background-position: top left 67%;
    background-size: 230%;
  }
	#video-area {
		position: inherit;
		height: auto;
	}
	#video {
		width: auto;
		height: 40vh;
		left: -15vw;
	}
  .topimg-area {
    height: calc(65vh - 53px);
    width: 100%;
    background-color: #333;
  }
  .topimg  {height: 100%;}
  .topimg .topimg-title {
    margin: 30px auto 0;
    height: 150px;
    max-width: 180px;
  }
	.topimg .topimg-text {top: 45%;}
	.topimg-midashi {
		top: 14vh;
		margin: inherit;
		width: 90%;
		font-size: 6.5vw;
	}
}



/* kadai
--------------------------------------------------------------------------*/
#kadai-wrap {
  margin-bottom: 80px;
  background: #e8f7f9;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
/* kadai-box */
.kadai-box {
  position: sticky;
  top: 60px;
  padding: 200px 60px 50px 60px;
  background: url("../img/title-kadai.svg") top 70px left 60px/320px 95px no-repeat;
  width: calc(35% - 120px);
  max-width: 440px;
}
.kadai-box p:first-of-type {
  font-size: 1.5rem;
  font-weight: bold;
  color: #d9b95f;
}
.kadai-box-link {
  width: 100%;
  height: 60px;
  max-width: 260px;
  margin-top: 50px;
  border: solid #047cb5 1px;
}
.kadai-box-link a {
  display: block;
  color: #333;
  line-height: 60px;
  padding-left: 1em;
  background: linear-gradient(to right, rgba(217,185,95,1) 0%, rgba(217,185,95,0) 50%, transparent 50%, transparent 100%) 100% 0/200% auto no-repeat;
  transition: background-position 0.3s ease;
  position: relative;
}
.kadai-box-link a:hover {background-position: 0 0;}
.kadai-box-link a::before,
.kadai-box-link a::after {
  content: "";
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
  position: absolute;
}
.kadai-box-link a::before {
  width: 16px;
  height: 1px;
  background-color: #047cb5;
}
.kadai-box-link a::after {
  width: 11px;
  height: 11px;
  border-right: solid #047cb5 1px;
  border-top: solid #047cb5 1px;
  transform: rotate(45deg);
}
/* kadaibtn-wrap */
.kadaibtn-wrap {
  color: #fff;
  width: 65%;
  max-width: 1320px;
  display: flex;
  flex-wrap: wrap;
	gap: 3px;
}
.kadaibtn-wrap a {
	width: 100%;
	height: 100%;
	color: #fff;
}

/* kadai-link */
.kadai-link {
  width: calc(50% - 3px);
  max-width: 660px;
  text-align: center;
  /*cursor: pointer;*/
  position: relative;
  overflow: hidden;
}
.kadai-link::after {
  position: absolute;
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  transition:all 0.3s ease;
}
.kadai-link.kadai01::after {background: url("../../img/img-kadai01.jpg") right/cover no-repeat; left: 0;}
.kadai-link.kadai02::after {background: url("../../img/img-kadai02.jpg") right/cover no-repeat;}
.kadai-link.kadai03::after {background: url("../../img/img-kadai03.jpg") left/cover no-repeat;}
.kadai-link.kadai04::after {background: url("../../img/img-kadai04.jpg") left/cover no-repeat; left: 0;}
.kadai-link.kadai05::after {background: url("../../img/img-kadai05.jpg") right/cover no-repeat;}
.kadai-link.kadai06::after {background: url("../../img/img-kadai06.jpg") right/cover no-repeat;}
.kadai-link.kadai07::after {background: url("../../img/img-kadai07.jpg") left/cover no-repeat; left: 0;}
.kadai-link.kadai08::after {background: url("../../img/img-kadai08.jpg") left/cover no-repeat; left: 0;}
.kadai-link:hover::after {transform: scale(1.2);}

/* kadai-text */
.kadai-link .kadai-text {
  background: linear-gradient(to bottom, rgba(0,47,117,1) 20%,rgba(1,181,214,1) 100%);
  padding: 0 15px;
  width: calc(50% - 30px);
	height: 270px;
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	justify-content: center;
  transform: scale(1);
  position: relative;
  z-index: 5;
}
.kadai-link.kadai01 .kadai-text,.kadai-link.kadai04 .kadai-text,
.kadai-link.kadai07 .kadai-text,.kadai-link.kadai08 .kadai-text {margin-left: 50%;}
.kadai-link.kadai01 .kadai-text::after,.kadai-link.kadai02 .kadai-text::after,
.kadai-link.kadai03 .kadai-text::after,.kadai-link.kadai04 .kadai-text::after,
.kadai-link.kadai05 .kadai-text::after,.kadai-link.kadai06 .kadai-text::after,
.kadai-link.kadai07 .kadai-text::after,.kadai-link.kadai08 .kadai-text::after,
.kadai-link.kadai01 .kadai-text::before,.kadai-link.kadai02 .kadai-text::before,
.kadai-link.kadai03 .kadai-text::before,.kadai-link.kadai04 .kadai-text::before,
.kadai-link.kadai05 .kadai-text::before,.kadai-link.kadai06 .kadai-text::before,
.kadai-link.kadai07 .kadai-text::before,.kadai-link.kadai08 .kadai-text::before {
  content: "";
  position: absolute;
  top: 0;
  width: 29px;
  height: 100%;
}
.kadai-link.kadai03 .kadai-text::after,.kadai-link.kadai02 .kadai-text::after,
.kadai-link.kadai05 .kadai-text::after,.kadai-link.kadai06 .kadai-text::after {
  right: -28px;
  background: url("../../img/kadai-arrow-off.svg") center right/cover no-repeat;
}
_:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai03 .kadai-text::after,
_:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai02 .kadai-text::after,
_:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai05 .kadai-text::after,
_:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai06 .kadai-text::after {right: -25px;} /* ie11 */
.kadai-link.kadai03:hover .kadai-text::after,.kadai-link.kadai02:hover .kadai-text::after,
.kadai-link.kadai05:hover .kadai-text::after,.kadai-link.kadai06:hover .kadai-text::after {
  background: url("../../img/kadai-arrow-on.svg") center right/cover no-repeat;
}
.kadai-link.kadai01 .kadai-text::before,.kadai-link.kadai04 .kadai-text::before,
.kadai-link.kadai07 .kadai-text::before,.kadai-link.kadai08 .kadai-text::before {
  left: -28px;
  background: url("../../img/kadai-arrow-off.svg") center right/cover no-repeat;
  transform: scale(-1, 1);
}
_:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai01 .kadai-text::before,
_:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai04 .kadai-text::before,
_:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai07 .kadai-text::before,
_:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai08 .kadai-text::before {left: -25px;} /* ie11 */
.kadai-link.kadai01:hover .kadai-text::before,.kadai-link.kadai04:hover .kadai-text::before,
.kadai-link.kadai07:hover .kadai-text::before,.kadai-link.kadai08:hover .kadai-text::before {
  background: url("../../img/kadai-arrow-on.svg") center right/cover no-repeat;
}
/* kadai-btn */
.kadai-link .kadai-btn {
  margin: 20px auto 0;
	padding: 5px;
  width: calc(100% - 10px);
  max-width: 220px;
  border: solid #fff 1px;
  position: relative;
  background: linear-gradient(to right, rgba(217,185,95,1) 0%, rgba(217,185,95,0) 50%, transparent 50%, transparent 100%) 100% 0/200% auto no-repeat;
  transition: background-position 0.3s ease;
}
.kadai-link:hover .kadai-btn {background-position: 0 0;}
/*.kadai-link .kadai-btn::before {
  position: absolute;
  top: -35px;
  left: 0;
  right: 0;
  margin: auto;
  content: "克服的技术";
}*/
.kadai-link .kadai-btn p{letter-spacing:-1px;}

@media screen and (max-width: 1366px) {
	.kadai-box {width: calc(33% - 120px);}
	.kadaibtn-wrap {width: 67%;}
  .kadai-link .kadai-btn {max-width: 175px;}
  .kadai-link .kadai-btn,
  .kadai-link .kadai-btn::before {font-size: 0.9rem;}
  .kadai-link.kadai02::after {background-position: center right -25px;}
  .kadai-link.kadai05::after {background-position: center right -10px;}
  .kadai-link.kadai07::after {background-position: center left -10px;}
	.kadai-link .kadai-text {height: 220px;}
  .kadai-link .kadai-btn p{
	  line-height: 1.3;
	  letter-spacing:0;
   }
}

@media screen and (max-width: 1024px) {
  .kadai-box {
    padding: 120px 20px 40px 20px;
    background-position: top 30px left 20px;
    background-size: 230px 68px;
    width: calc(30% - 40px);
    font-size: 0.9rem;
  }
  .kadai-box p:first-of-type {font-size: 1.3rem;}
  .kadai-box-link {max-width: 240px;}
  .kadaibtn-wrap {
    width: 70%;
    font-size: 0.85rem;
  }
  .kadai-link.kadai01::after {background-position: center right -30px;}
  .kadai-link .kadai-btn {max-width: 145px;}
  .kadai-link .kadai-btn::before {font-size: 0.85rem;}
	.kadai-link .kadai-text {
		height: 175px;
		line-height: 1.3;
	}
}

@media screen and (max-width: 896px) {
  #kadai-wrap {display: inherit;}
  .kadai-box {
    position: relative;
    top: 0;
    padding: 30px 30px 30px 340px;
    background-position: top 30px left 30px;
    background-size: 280px 80px;
    width: auto;
    max-width: 100%;
    font-size: 0.9rem;
  }
  .kadai-box p:first-of-type {font-size: 1.5rem;}
  .kadai-box-link {
    max-width: calc(280px - 2px);
    position: absolute;
    left: 30px;
    bottom: 35px;
    font-size: 1.1rem;
  }
  .kadaibtn-wrap {
    width: 100%;
    font-size: 0.85rem;
  }
  .kadai-link.kadai05::after {background-position: center right;}
  .kadai-link.kadai07::after {background-position: center left;}
	.kadai-link .kadai-text {height: 190px;}
}

@media screen and (max-width: 480px) {
  .kadaibtn-wrap {display: inherit;}
  .kadai-box {
    padding: 130px 20px 30px;
    background-position: top 20px left 20px;
    background-size: 320px 95px;
    font-size: 1rem;
  }
  .kadai-box-link {
    margin: 0 auto;
    max-width: calc(100% - 40px);
    position: absolute;
    right: 0;
    left: 0;
    bottom: 20px;
  }
  .kadai-link {width: 100%;}
  .kadai-link.kadai02::after {background-position: right; left: 0;}
  .kadai-link.kadai03::after {background-position: right; right: 0; left: auto;}
  .kadai-link.kadai04::after {background-position: right; right: 0; left: auto;}
  .kadai-link.kadai05::after {left: 0;}
  .kadai-link.kadai07::after {right: 0; left: auto;}
  .kadai-link.kadai02 .kadai-text,.kadai-link.kadai05 .kadai-text {margin-left: 50%;}
  .kadai-link.kadai03 .kadai-text,.kadai-link.kadai04 .kadai-text,.kadai-link.kadai07 .kadai-text {margin-left: 0;}
  .kadai-link.kadai03 .kadai-text::after,.kadai-link.kadai04 .kadai-text::after,.kadai-link.kadai07 .kadai-text::after {
    right: -28px;
    background: url("../../img/kadai-arrow-off.svg") center right/cover no-repeat;
  }
  _:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai03 .kadai-text::after,
  _:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai04 .kadai-text::before,
  _:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai07 .kadai-text::after {right: -25px;} /* ie11 */
  .kadai-link.kadai03:hover .kadai-text::after,.kadai-link.kadai04:hover .kadai-text::after,.kadai-link.kadai07:hover .kadai-text::after {
    background: url("../../img/kadai-arrow-on.svg") center right/cover no-repeat;
  }
  .kadai-link.kadai02 .kadai-text::before,.kadai-link.kadai05 .kadai-text::before {
    left: -28px;
    background: url("../../img/kadai-arrow-off.svg") center right/cover no-repeat;
    transform: scale(-1, 1);
  }
  _:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai02 .kadai-text::before,
  _:-ms-lang(x)::-ms-backdrop, .kadai-link.kadai05 .kadai-text::before {left: -25px;} /* ie11 */
  .kadai-link.kadai02:hover .kadai-text::before,.kadai-link.kadai05:hover .kadai-text::before {
    background: url("../../img/kadai-arrow-on.svg") center right/cover no-repeat;
  }
}



/* overview
--------------------------------------------------------------------------*/
#overview-wrap {
  margin: 0 auto 90px;
	width: 100%;
  max-width: 1120px;
}
.table-company table {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	border-top: solid #808080 1px;
}
.table-company table th,
.table-company table td {
	padding: 25px;
	border-bottom: solid #808080 1px;
}
.table-company table th {
	width: 25%;
	text-align: left;
}
.table-company table td.rowspan {
	border-bottom: dashed #c0c0c0 1px;
}

@media screen and (max-width: 1160px) {
	#overview-wrap{
		margin: 0 15px 90px;
		width: calc(100% - 30px);
	}
}

@media only screen and (max-width:480px){
	.table-company table th,
	.table-company table td {
		display: block;
		width: calc(100% - 50px);
	}
	.table-company table th {
		padding-bottom: 0;
		border-bottom: none;
	}
	.table-company table td {
		padding-top: 10px;
	}
	.table-company table td.rowspan {
		padding-bottom: 10px;
	}
}



/* 印刷用
--------------------------------------------------------------------------*/
@media print {
  .topimage-area {display:none;}
  #topimage-wrap {
	  background:url(../img/topimage-print.jpg) center no-repeat;
	  background-size:contain;
	  width:100%;
	  height:65vh;
  }
  .kadai-link .kadai-text {height:200px;}
}