@charset "UTF-8";
/* CSS Document */



/* TOP PAGE */
#mainVisualWrapper { margin: 0 auto 80px auto; padding: 120px 0 0 0;}
#mainVisual { }
#mainVisual .mainBox { flex-basis: 47.02%;  }
#mainVisual .mainBox:after { content: ''; display: block; clear: both;}
#mainVisual .mainBox .textBox { float: right; width: calc(100% - 20px); max-width: 500px; padding: 70px 0 0 0; margin: 0 0 0 20px;}
#mainVisual .mainBox h2 { color: #fff; font-size: 55px; line-height: 1.41; font-weight: bold; margin: 0 0 1em 0;}
#mainVisual .mainBox h2 .strong01 { color: #bcbcbc; }
#mainVisual .mainBox h2 .strong02 { color: #ecbe21; }
#mainVisual .mainBox p { color: #fff; font-size: 17px; line-height: 1.76; margin: 0 0 1.7em 0;}
#mainVisual .subBox { flex-basis: 52.98%; position: relative;}
#mainVisual .subBox:after { content: ''; display: block; clear: both;}
#mainVisual .subBox .content { position: relative; float: left; width: 100%; max-width:640px; overflow: visible;}
#mainVisual .subBox .bg { width: 93.75%; left: 17.18%; top:0; position: absolute; transform: translateY(33.33%);}
#mainVisual .subBox .pointList { flex-wrap: nowrap; position: relative; z-index: 2; }
#mainVisual .subBox .pointList li { margin: 0 6px 0 0; }
#mainVisual .subBox .piontList li:last-of-type { margin: 0;}
#mainVisual .subBox .feature { width: 50%; margin: 0 auto 1.25% auto; position: relative; z-index: 2;}
#mainVisual .subBox .comment { position: absolute; top:0; width: 25.31%; transform: translateY(50%); z-index: 2;}
#mainVisual .subBox .commentIEEE { position: absolute; right:0; top:0; width: 20%; transform: translateX(1%) translateY(1%); z-index: 2;}
#mainVisual .subBox h3 { width: 60%; margin: 0 auto 70% auto; position: relative; z-index: 2;}
#mainVisual .subBox h4 { width: 100%; max-width: 504px; margin: 0 auto 0 auto; position: relative; z-index: 2;}


#navAnchor {margin-bottom: 60px;}
#navAnchor .content1080 a { display: block; font-size: 14px; border-radius: 1em; padding: 1.2em 0; background: linear-gradient( to right , #5486b6 , #143066 , #143066); background-size:200% 100%; color: #fff; text-decoration: none; position: relative; transition: all 0.5s linear 0s; width: 23%; text-align: center; font-weight: bold; letter-spacing: 0.1em;}
#navAnchor .content1080 a::after {position: absolute; content: ''; display: block; right:2em; top:50%; background: url("../img/company/arrow_01.svg") center center no-repeat; pointer-events: none; width: 1em; height: 1em; transform: translateY(-50%);}
#navAnchor .content1080 a:hover { text-decoration: none; background-position: 100% 0; color: #fff;}

.btnChild {width: 100%; text-align: center; margin: 2rem 0 0;}
.btnChild a {font-weight: bold;}

#feature { }
#feature h3 { text-align: center; color: #fff; margin: 0 auto 65px auto;}
#featureBox { background:rgba(255,255,255,0.85); position: relative; box-sizing: border-box; padding: 80px 60px 80px 60px; border-radius: 40px; margin: 0 auto 120px auto;}
#featureBox .icon { width: 74px; position: absolute; top:0; left: 50%; transform: translateX(-50%) translateY(-50%);}
#featureBox h4 { text-align: center; font-weight: bold; margin: 0 auto 110px auto;}
#featureBox .stepBox { margin: 0 auto 80px auto;}
#featureBox .stepBox .imgBox {  }
#featureBox .stepBox .textBox h5 { position: relative; padding: 0 0 0 0; margin: 0 0 20px 0; font-weight: bold;}
#featureBox .stepBox .textBox h5 .num { display: block; line-height: 1; font-size:133%; width: 1.88em; padding: 0.4em 0; text-align: center; background: #223062; color: #fff; box-sizing: border-box; height: 1.88em; margin: 0 0 0.75em 0; border-radius: 50%;}
#featureBox .stepBox .textBox {  align-self: center;}
#featureBox .stepBox .textBox p {margin: 0 0 20px 0;}
#featureBox .background { background: #fff; position: relative; padding: 60px; border-radius: 40px; margin: 60px auto 0 auto; box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);}
#featureBox .background:before { content: ''; display: block; position: absolute; left: 50%; top:-35px; width: 100%; max-width: 360px; background: #fff; border-top-left-radius: 20px; border-top-right-radius: 20px; transform: translateX(-50%); height:35px; box-shadow: -5px -5px 5px 0px rgba(0,0,0,0.05); line-height: 1; }
#featureBox .background h5 { text-align: center; font-weight: bold; position: absolute; left: 50%; top:0; line-height: 1; transform: translateX(-50%) translateY(-50%); display: inline-block; }
#featureBox .background .bgBox { flex-basis: calc( ( 100% - 60px ) / 3 ); margin: 0 0 40px 0;}
#featureBox .background .bgBox h6 { text-align: center; margin: 0 0 10px 0; font-weight: bold;}
#featureBox .background .bgBox .sub { position: absolute; bottom:100%; right:0; line-height: 1; font-weight: normal;}
#featureBox .background .textBox2 { flex-basis: calc( 100% - 140px);}
#featureBox .background .noteBox { flex-basis: 120px;}
#featureBox #step01 .imgBox { flex-basis: 50%;  }
#featureBox #step01 .textBox {flex-basis: 44.79%;  }
#featureBox #step02 .imgBox { flex-basis: 50%; }
#featureBox #step02 .textBox {flex-basis: 44.79%;  }
#featureBox #step03 .imgBox { flex-basis: 50%;}
#featureBox #step03 .textBox {flex-basis: 44.79%;  }
#featureBox .patentBox { box-sizing: border-box; padding: 0 0 80px 0; border-bottom: #fff solid 2px; text-align: center; margin: 0 auto 40px auto;}
#featureBox .patentBox p { margin: 0 auto 60px auto;}
#featureBox .patentBox h5 { padding: 0 0 5px 0; display: inline-block; margin: 0 auto 20px auto; position: relative; border-bottom: #223062 solid 2px;overflow: visible; font-weight: bold;}
#featureBox .patentBox h5::after { content: ''; display: block; background: url("../img/common/icon_check.svg") center center / 100% 100% no-repeat; width:40px; height: 40px; position: absolute; right: -50px; top:50%; transform: translateY(-50%);}
#featureBox .patentBox h6 { display: inline-block; margin: 0 auto 0 auto;  padding: 0.5em 1em; background: #fff; border-radius: 5px; margin: 0 auto 20px auto; font-weight: bold;}
#featureBox .patentBox p.fontSize10 { display: inline-block; margin: 0 auto 40px auto; border-bottom: #fff solid 2px; padding: 0 0 5px 0;}
#featureBox .patentBox figure { width: 100%; max-width:772px; margin: 0 auto 0 auto;}
#featureBox .movieList { }
#featureBox .movieList h5 { text-align: center; margin: 0 auto 1em auto; line-height: 1.4;}
#featureBox .movieList h5 .underBar03 { max-width: 234px;}
#featureBox .movieList ul li { flex-basis: calc( ( 100% - 40px ) / 2);}
#featureBox .movieList ul li a { display: block; margin: 0 0 20px 0;}
#featureBox .movieList ul li h6 { text-align: center; margin: 0 0 10px 0; font-weight: bold;}
#featureBox .movieList ul li h6 .num { font-size: 120%; margin: 0 0.5em 0 0; display: inline-block; background: #fff; border-radius: 5px; padding: 0.25em 0; width: 1.5em; line-height: 1.2; text-align: center;}
#featureBox .movieList ul li p { display: block; max-width: 400px; display: block; margin: 0 auto;}

#caseStudy {box-sizing: border-box; padding: 0 0 80px 0; border-bottom: #fff solid 2px; text-align: center; margin: 0 auto 40px auto; }
#caseStudy h4 { text-align: center; position: relative; margin: 0 auto 80px auto;}
#caseStudy .caseBox {margin: 0 0 40px;}
#caseStudy .caseBox .photoBox { flex-basis: 43.70%;}
#caseStudy .caseBox .photoBox figure {border-radius: 20px; overflow: hidden;}
#caseStudy .caseBox .textBox { flex-basis: 42.6%; padding: 20px 0;  border-top: 1px solid #fff; border-bottom: 1px solid #fff;  text-align: left;}
#caseStudy .caseBox .textBox sup {font-size: 18px;}
#caseStudy .caseBox .textBox h5 { margin: 0 0 20px 0; font-weight: bold; position: relative;}
#caseStudy .caseBox .textBox h5 .categoryTerm {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); display: inline-block; padding: 0.25em 3em; text-align: center; border-radius: 1.2em; line-height: 1.2; border: #fff solid 2px; margin-left: 10px;}
#caseStudy .caseBox .textBox .category { margin: 0 0 30px 0; }
#caseStudy .caseBox .textBox .category .categoryTerm { display: inline-block; padding: 0.25em 3em; text-align: center; border-radius: 1.2em; line-height: 1.2; border: #fff solid 2px;}
#caseStudy .caseBox .textBox p {display: block; line-height: 1.65;}
#caseStudy .caseBox .textBox .moreLink {margin: 15px 0;}
#caseStudy .caseBox .textBox .tag ul li {display: inline-block; margin-right: 10px;}

#talk { box-sizing: border-box; padding: 0 0 80px 0; text-align: center; margin: 0 auto 40px auto;}
#talk h4 { text-align: center; margin: 0 auto 40px auto;}
#talk h4 .underBar04 { max-width: 490px;}
#talk .talkLink { display: block; width: 100%; max-width: 730px; margin: 0 auto;}


#about { background: #fff; position: relative; padding: 80px 0 120px 0;}
#about .content { width: calc( 100% - 40px ) ; max-width: 1080px;  margin: 0 auto; }
#about .logoBox { width: 100px; margin: 0 auto 50px auto;}
#about h3 { text-align: left; margin: 0 auto 50px auto; position: relative;}
#about h3 .sub { display: inline-block; position: absolute; left:150px; top:50%; transform: translateY(-50%);}
#about h3:before { content: ''; display: block; height: 1px; width: calc( 100% - 260px); position: absolute;  background: #b2b7c8; left: 260px; top:50%; transform: translateY(-50%);}
#about h4 { text-align: center; margin: 0 auto 50px auto; font-weight: bold;}
#about #profile { width:100%; max-width: 720px; margin: 0 auto 0 auto;}
#about #profile .textBox { flex-basis: 55.55%;}
#about #profile .textBox p { margin: 0 0 50px 0; line-height: 2;}
#about #profile .photoBox { flex-basis: 34.72%;}
#about #profile .photoBox img { margin: 0 0 20px 0;}
#about #profile .photoBox figcaption { text-align: center; }

#tech { background: #fff; position: relative; padding: 40px 0 0 0;}
#tech .content { width: calc( 100% - 40px) ; margin: 0 auto; text-align: center; max-width: 1080px;}
#techBox { border-radius: 20px; background: #e9eaef; padding: 60px 30px; margin: 60px auto 60px auto}
#techBox .logoBox { width: 100%; max-width:305px; margin: 0 auto 50px auto;}
#techBox .techBox { }
#techBox #tech01 {margin: 0 auto 10px auto; position: relative;}
#techBox #tech01 .btnChild {max-width: 171px; width: 100%; position: absolute; bottom: 4%; left: 16%;}
#techBox #tech01 + .arrow { width: 120px; margin: 0 auto 80px auto;}

#techBox #tech02 { background: #fff; border-radius: 20px; padding:120px 80px 80px 80px; position: relative; overflow: visible; width: 94.11%; margin: 0 auto; box-sizing: border-box; box-shadow: 0 0 5px 5px rgba(0,0,0,0.05); }
#tech h3 { text-align: center; margin: 0 auto 40px auto; font-weight: bold;}
#tech #seminar { }
#tech #seminar h5 { text-align: center; margin: 0 auto 40px auto;}
#tech #seminar h5 .underBar03 { max-width: 670px;}
#tech #seminar .talkLink { display: block; width: 100%; max-width: 730px; margin: 0 auto;}
#techBox #tech02  h4 { margin: 30px auto 0 auto; position: absolute; left: 50%; top:0; transform: translateX(-50%) translateY(-75%); display: inline-block; box-sizing: border-box; padding:1em; border-radius: 20px; background: #fff; max-width: 720px; display: block; width:calc( 100% - 80px);}
#techBox #tech02  h4 span { position: relative; padding: 0 0 10px 0; display: inline-block;}
#techBox #tech02  h4 span:after { content: ''; display: block; height: 2px; width: 100%; position: absolute; left: 0; bottom:0; background: #ebb43b; }
#techPoint01 { background: #e9eaef; position: relative; border-radius: 20px; padding: 40px 20px; margin: 0 auto 10px auto;}
#techPoint01 figure { width: 100%; max-width:350px; margin: 0 auto 0 auto;}
#techPoint01 .comment { position: absolute; left: 50%; top:0; background: #ebb93b; max-width: 100%; transform: translateX(-50%) translateY(-50%); display: inline-block; white-space: nowrap; padding: 0.5em 2em; box-sizing: border-box; border-radius: 10px;}
#techPoint01 .comment:after { content: ''; display: block;position: absolute; left: 50%; bottom:0; transform: rotate(-45deg) translateX(-50%); background: #ebb93b; width: 1em; height: 1em;}
#techPoint01 + .plus { width: 100%; max-width: 42px; margin: 0 auto 10px auto;}
#techPoint02 { background: #e9eaef; padding: 40px 20px; border-radius: 20px; margin: 0 auto 10px auto;}
#techPoint02 h5 { margin: 0 auto 30px auto;}
#techPoint02 figure { width: 100%; max-width:340px; mix-blend-mode:darken; margin: 0 auto 30px auto;}
#techPoint02 + .arrow { width: 100%; max-width: 33px; margin: 0 auto 10px auto; position: relative; overflow: visible;}
#techPoint02 + .arrow .comment { position: absolute; left: 20px; top:50%; transform: translateY(-50%);width:295px; max-width: calc( 40vw - 50px) }
#techPoint03 { background: linear-gradient( to right , #5486b6 , #143066); border-radius: 20px; padding:60px 100px; text-align: center;}
#techPoint03 h5 { margin: 0 auto 30px auto;}
#techPoint03 h5 + p { text-align: left;}
#techPoint03 .linkage { margin: 50px auto 50px auto; }
#techPoint03 .keyBox { margin: 0 auto 30px auto; width: 100%; max-width:180px; }
#techPoint03 h6 { margin: 30px auto 0 auto;}
#techPoint03 h6 span { position: relative; padding: 0 0 10px 0; display: inline-block;}
#techPoint03 h6 span:after { content: ''; display: block; height: 2px; width: 100%; position: absolute; left: 0; bottom:0; background: #ebb43b; }

#series { background: #fff; padding: 40px 0 40px 0; }
#series h3 { text-align: center; margin: 0 auto 1.5em auto; font-weight: bold}
#series h3 b { font-size: 136%;}
#series .brandList { margin: 0 auto 100px auto;}
#series .brandList ul li { flex-basis: calc( ( 100% - 20px ) / 2 ); margin: 0 0 20px 0; border-radius: 20px; overflow: hidden; box-shadow: 0 0 5px 10px rgba(0,0,0,0.05); }
#series .brandList ul li:nth-of-type(1) { flex-basis: 100%;}
#series .brandList .brandBox { padding: 30px 30px 30px 120px;  box-sizing: border-box; height: 100%; position: relative; text-align: center;}
#series .brandList .brandBox:before { position: absolute; left: 0; top:0; background: linear-gradient( to right , #5486b6 , #143066); content: ''; display: block; width: 100%; height: 5px;}
#series .brandList .brandBox .brandLogo { width: 100%; max-width: 256px; margin: 0 auto 0 auto;}
#series .brandList .brandBox .brandText { text-align: left; font-size: 16px; line-height: 1.68; margin: 0 0 1em 0;}
#series .brandList ul li:nth-of-type(1) .brandBox { padding: 30px 120px;}
#series .brandList ul li:nth-of-type(1) .brandBox .brandText { text-align: center;}
#series .brandList .brandBox .moreLink { margin: 0 auto 0 auto;}
#series .brandList .brandBox .num { width: 30px; top:50%; transform: translateY(-50%); left: 30px; position: absolute;}
#series .movieList { }
#series .movieList h4 { text-align: center; margin: 0 auto 1em auto; line-height: 1.4; font-weight: bold;}
#series .movieList ul li { flex-basis: calc( ( 100% - 10px ) / 2);}

#investmentInfo { background: #fff; padding: 40px 0 300px 0; }
#investmentInfo h3 { text-align: center; position: relative; margin: 0 auto 1em auto;}


@media screen and ( min-width:1340px ) {
	
}

@media screen and ( max-width:1339px ) {
	
}
@media screen and ( max-width:1079px ) {
	#mainVisual .mainBox h2 { font-size: 5.2vw;}
	#mainVisual .mainBox p { font-size: 1.57vw;}
	#techBox { padding: 60px 20px 20px 20px;}
	#techBox #tech02  h4 { font-size: 2.8vw;}
	#techBox #tech01 + .arrow { width: 120px; margin: 0 auto 12% auto;}
	#techBox #tech02 { padding: 120px 20px 20px 20px; }
	#techPoint03 { padding: 100px 20px;}
}
@media screen and ( max-width:767px ) {
	/* TOP PAGE */
	#mainVisual .mainBox { flex-basis: 100%; order:2}
	#mainVisual .mainBox .textBox { float: none; max-width: none; margin: 0 auto;}
	#mainVisual .mainBox h2 { font-size: 8vw; text-align: center;}
	#mainVisual .mainBox p { font-size: 4.2vw; text-align: center;}
	#mainVisual .subBox { flex-basis: 100%; order: 1; }
	#mainVisual .subBox .content { max-width: none; width: calc( 100% - 40px); margin: 0 auto; float: none;}
	
	#navAnchor .content1080 a {width: 49%; margin-bottom: 2%;}

	#featureBox { padding: 60px 30px;}
	#featureBox .icon { width: 60px;}
	#featureBox h4 { text-align: left; margin: 0 auto 50px auto;}
	#featureBox #step01 .imgBox { flex-basis: 100%; margin: 0 0 40px 0; }
	#featureBox #step01 .textBox {flex-basis: 100%; }
	#featureBox #step02 .imgBox { flex-basis: 100%; margin: 0 0 40px 0; }
	#featureBox #step02 .textBox {flex-basis: 100%; }
	#featureBox #step03 .imgBox { flex-basis: 100%; margin: 0 0 40px 0; }
	#featureBox #step03 .textBox {flex-basis: 100%; }
	#featureBox .stepBox { text-align: center; }
	#featureBox .stepBox h5 { text-align: left;}
	#featureBox .stepBox p { text-align: left;}	
	#featureBox .background { border-radius: 20px; padding: 50px 30px 30px 30px;}
	#featureBox .background:before { width: calc( 100% - 40px);}
	#featureBox .background h5 { display: block; width: 100%; text-align: center;}
	#featureBox .background .bgBox { flex-basis: 100%; margin: 0 0 40px 0;}
	#featureBox .background .bgBox figure { width: 80%; margin: 0 auto;}
	#featureBox .background .bgBox h6 {}
	#featureBox .background .bgBox .sub {}
	#featureBox .background .textBox2 { flex-basis: 100%; margin: 0 0 20px 0;}
	#featureBox .background .noteBox { flex-basis: 100%;}
	#featureBox .patentBox p { text-align: left;}
	#featureBox .movieList ul li { flex-basis: 80%; margin: 0 10% 40px 10%;}
	#caseStudy .caseBox .photoBox { flex-basis: 100%; margin: 0 0 20px 0; }
	#caseStudy .caseBox .textBox { flex-basis: 100%}
	#about .content { width: calc(100% - 40px ); margin: 0 auto;}
	#about .logoBox { width: 60px; margin: 0 auto 40px auto;}
	#about #profile .textBox { flex-basis: 100%; margin: 0 0 20px 0; text-align: center; order: 2;}
	#about #profile .textBox p { text-align: left;}
	#about #profile .photoBox { flex-basis:60%; margin: 0 20% 20px 20%; order:1; }

	#techBox { padding: 60px 20px 60px 20px;}
	#techBox #tech01 + .arrow { width: 120px; margin: 0 auto 18% auto;}
	#techBox #tech01 .btnChild {bottom: 4%; margin: 0; width: 100%; left: 0; max-width: unset; text-align: left; padding-left: 11%;}
	#techBox #tech01 .btnChild a {font-size: 2vw; padding-top: 1vw; padding-bottom: 1vw;}
	#techBox #tech02  h4 { font-size: 4vw;}

	
	#series .brandList ul li { flex-basis: 100%;}
	#series .brandList .brandBox,
	#series .brandList ul li:nth-of-type(1) .brandBox { padding: 30px 30px 30px 80px; }
	#series .brandList ul li:nth-of-type(1) .brandBox .brandText { text-align: left;}
	#series .brandList .brandBox .brandLogo { max-width: 180px; margin: 0 auto 20px auto;}
	#series .movieList ul li { flex-basis: 80% ; margin: 0 10% 20px 10%;}
}

@media screen and ( max-width:480px ) {
	#techBox #tech01 .btnChild {bottom: 3.5%;}
	#techBox #tech01 .btnChild a {padding-top: 0; padding-bottom: 0;}
}

@media screen and ( max-width: 600px ){
	#mainVisual	.IEEEcontent {font-size: 8px; line-height: 14px; text-decoration: underline;}
}
@media screen and ( min-width: 600px ){
	#mainVisual	.IEEEcontent {text-decoration: underline;}
}