.mincho{
	font-family:  Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "Noto Sans Japanese", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.btn{
	border-radius: 0;
}

header#indexMain{
	background: #000;
}

	main #HyFlex {
		background:url(../../images/top/img_hyflex_bg.jpg) no-repeat center center;
		background-size:cover;
		height: 100vh;
		min-height: 850px;
	}
.max1600{
	max-width: 1600px;
	height: 100%;
/*	border: 1px solid #ccc;*/
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}


.max1500{
	max-width: 1500px;
	height: 100%;
/*	border: 1px solid #ccc;*/
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0 20px;
}
#pagetop {
	position: relative;
	z-index: 9999;
	background-color: rgba(0,91,172,0.9);
	padding-bottom: 8px;
}
#pagetop nav #nav ul li a {
    border-bottom: 4px solid rgba(62,143,201,0.5);
}
#pagetop nav #nav ul li a:hover {
    border-bottom: 4px solid rgba(255,255,255,0.5);
-webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
}

#Paragon{
	height: 100vh;
	overflow: hidden;
	background: url(../../images/top/img_paragon2.jpg) center center no-repeat;
	background-size: cover;
	position: relative;min-height: 600px;
}

#Paragon .container,#INO_series .container{
	padding: 15px;max-width: 1500px;
}

#Paragon .txt-paragon{
	width: 40%;
	height: auto;
	margin-top: 170px;margin-top: 104px;
}
#Paragon .link{position:absolute; bottom:60px; /*right: 30px;*/
width: 100%;max-width: 1500px;display: flex;justify-content: flex-end;left: 0;right: 0;margin: auto;}
#Paragon .link img{margin-right: 30px;}

#INO_series .containerr{
	padding: 15px;
} 
#INO_series .txt-ino-series{
	width: 40%;
	height: auto;
	margin-top: 130px;
}
.link-INO_series{margin: -40px auto 0;display: block;max-width: 830px;width:100%;}
.link-INO_series img{display:block;width:100%;}

#bb-react .txt-bb-react{
	width: 55%;
	height: auto;margin: 104px auto 0;display: block;/*filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));*/
}
.link-bb-react{margin: 40px auto 0;display: block;max-width: 1070px;width:100%;justify-content: space-between;justify-content: center;
width:100%;display:-webkit-box;display:-moz-box;display:-ms-box;display:-webkit-flexbox;display:-moz-flexbox;display:-ms-flexbox;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.link-bb-react img{width:410px;margin-right:250px;}
.link-bb-react img:last-child{margin-right:0;}

.top-main-item-box{max-width: 1500px;position: relative;margin: auto;height: 100%;}


@media screen and (max-width: 1100px){
	.link-bb-react img { width: 40%; margin-right: 10%;}
}
@media screen and (max-width: 1024px){
	.link-INO_series img {display: block; width: 100%;position: absolute; top: 0;bottom: 0; margin: auto; right: 0;left: 0;max-width: 830px;padding-top: 100px;}
	#bb-react .txt-bb-react {margin: 22vh auto 0;}
}

@media screen and (max-width: 767px){
	#Paragon .txt-paragon{
		width: 80%;
		margin-top: 50vh;margin: 50vh auto 0;
display: block;
	}
	#Paragon .link{width: 80%;}
	#Paragon .link img{text-align: center;margin-right: 0px;}
	#INO_series .txt-ino-series {width: 80%; margin-top:22vh;}
	.link-INO_series {margin: 0px auto 0;width: 80%;}
	.link-INO_series img {position: static;padding-top: 0px;}
	#bb-react .txt-bb-react {width: 80%;margin: 22vh auto 0;}
}

@media screen and (max-width: 600px){
	#INO_series {height: calc(85vh + 64px);height:90vh !important;min-height: 550px !important;}
	#Paragon ,#bb-react{ height: 85vh !important;min-height: 500px !important;}
	#Paragon{min-height: 600px !important;}
	#Paragon .txt-paragon {margin: 40vh auto 0;}
	/*#iq1204 {min-height: 0; height: 85vh;}*/
}


section#HyFlex{
	background: url(../../images/top/img_hyflex_bg.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
    min-height: 850px;
}
#HyFlex .mainBox{
	width: 48%;
	height: 100%;
	min-height: 850px;

	position: absolute;
	left: 6%;

	margin-top: 150px;
}
#HyFlex .mainBox h2{
	margin-top: 40px;
}
#HyFlex .mainBox img{
	width: 100%;
	height: auto;
}

#HyFlex .imgLogo{
	max-width: 48%;
}
#HyFlex .button{
	font-size: 16px;
	width: auto;
	padding-left: 30px;
	padding-right: 30px;
	background: rgba(205,32,31,0.8);
	border: 0;
	color: rgba(255,255,255,1);
	font-weight: 500;
}
#HyFlex .button i{
	font-size: 11px;
	margin-right: 5px;
}
#HyFlex .button:hover{
	color: rgba(255,255,255,0.8);
-webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
}
.button::before {
	display: none;
}
/*
.button:hover::before {
	display: inline-block;
	left: 1.5rem;
	color: #fff;
	-webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
*/
#HyFlex .imgMain{
	position: absolute;
	width: auto;
	max-height: 83%;
	top: -200px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#HyFlex .txtBox{
	width: 480px;
	position: absolute;
	right: 8%;
	margin-top: 150px;
	color: #fff;
}
#HyFlex .txtBox h2{
	margin-top: -10px;
}

#HyFlex .txtBox p{
	font-size: 16px;
	line-height: 2.5rem;
	font-weight: 100;
	margin-top: 50px;
}
#HyFlex .txtBox p.catch{
	font-size: 22px;
	line-height: 3rem;
}

#HyFlex .txtBox .link li img{
	margin: 20px 0;
}

#HyFlex .txtBox .link li img:hover{
	opacity: 0.8;
-webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
}
#INO_series{
	position: relative;
	width: 100%;
	height: calc(100vh - 64px);
	min-height: 850px;
	background-image: url(/images/top/ino_series-bg.jpg);
	background-size: cover;
	background-position: right;
}
#bb-react{
	position: relative;
	width: 100%;
	height: calc(100vh - 64px);
	min-height: 850px;
	background-image: url(/images/top/bb-react-bg.jpg);
	background-size: cover;
	background-position: right;
}

#iq1204{
	position: relative;
	width: 100%;
	height: calc(100vh - 64px);
	min-height: 850px;
	background-image: url(/images/top/img_iq1204_bg.png);
	background-size: cover;
	background-position: right;
}
#iq1204 .mainBox{
	position: relative;
	width: 52%;
	height: 100%;

}
#iq1204 h2{
	margin-top: 0;
	position: absolute;
	top: 30px;
}
#iq1204 h2 img{
	width: 330px;
}
#iq1204 .imgMain{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
#iq1204 p img{
	position: absolute;
	bottom: 40px;
	width: 450px;
	height: auto;
}
#iq1204 p.btn,
#freedom p.btn,
#INO_series p.btn,
#bb-react p.btn{
	position: absolute;
	right: 20px;
	bottom: 30px;
	border: 1px solid #fff;
}
#Paragon p.btn{border: 1px solid #fff;margin-right: 20px;}

.Paragon-more-btn{width: 100%;max-width: 1500px;position: absolute;right: 0px;bottom: 30px;display: flex;justify-content: flex-end;left: 0;margin: auto;}

#Paragon .btn a,.top-main-item p.btn a{color: #fff;}
#freedom p.btn a{
	padding: 6px 12px;
	border: 1px solid #000;
}
#iq1204 p.btn a{
	color: #fff;
}
#freedom p.btn{
	border: none;
	padding: 0;
}
#freedom{
	position: relative;
	width: 100%;
	height: calc(100vh - 64px);
	min-height: 850px;
	background: #f7f7f7;
}
#freedom .max1500{
	background-image: url(/images/top/img__intega_bg.jpg);
	background-size: cover;
	background-position: center center;
}
#freedom h3,
#freedom p{
	margin-top: 30px;
}
#freedom .row{
	margin: 0;
}
#freedom h3 img{
	width: calc(100% - 30px);
	height: auto;
}
#freedom .mainBox{
	width: 42%;
	margin-top: 30px;
}

#freedom .mainBox h2{
	margin-top: 0;
	border-bottom: 1px solid #000;
}
#freedom .mainBox h2 img{
	width: 55%;
}

#freedom .mainBox .imgMain{
	width: 78%;
	height: auto;
	margin: 0 auto;
}


@media screen and (min-width: 768px) and (max-width: 1300px){
	#HyFlex .txtBox p.ex{
/*		background: rgba(27,33,65,0.2);*/
	}
	#HyFlex .mainBox{
		width: 50%;
	}
	#HyFlex .mainBox h2{
		position: relative;
		z-index: 10;
	}

	#HyFlex .imgMain{
		transform: rotate( -8deg );
		left: -30%;
		z-index: 0;
		top: -280px;
	}
	#HyFlex .txtBox{
		width: 45%;
	}


}
@media screen and (max-width: 767px){
	img{
		width: 100%;
		height: auto;
	}
	header#indexMain {
		height: auto;
	}
	.max1600,
	.max1500{
		position: relative ;
		height: auto;
		max-height: none;
		text-align: center;
	}
	header#indexMain{
		min-height: 0;
	}
	#HyFlex .mainBox{
		width: 70%;
		margin-top: calc(100vw * 0.05);
		left: 15%;
		top: 10%;
		height: auto;
		/*
		height: 50%;
		min-height: 50vw;
		*/
	}
	#HyFlex .mainBox h2{
		display: none;
		margin-top: 20%;
	}
	#HyFlex .mainBox p{
		display: none;
	}
	#HyFlex .imgMain{
		position: relative;
		right: 0;
		top: 10%;
		z-index: 0;
		margin: 0;
		width: 90%;
	}


	#HyFlex .txtBox{
		width: auto;
		margin: 0 20px;
		position: relative;
		right: 0;
	}
	#HyFlex .txtBox h2{
		text-align: left;
		margin-top: 10px;
	}

	#HyFlex .txtBox p.ex{
		font-size: 1.2rem;
		line-height: 1.6rem;
	}
	#HyFlex .txtBox p.catch{
		font-size: 1.6rem;
		line-height: 1.8rem;
		width: auto;
	}

	#HyFlex .HyFlexHead img{
		margin-top: 45%;
	}

	#iq1204{
		min-height: 0;
		height: auto;
	}
	#iq1204 .mainBox,
	#freedom .mainBox{
		width: auto;
	}
	#iq1204:before{
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		position: absolute;
	}
	#iq1204 h2{
		width: 50%;
	}
	#iq1204 h2 img {
		width: 100%;
	}

	#iq1204 p img {
		width: 45%;
		height: auto;
		top: 30px;
		right: 0px;
		text-align: right;
	}
	#iq1204 .imgMain {
		position: relative;
		margin: 80px auto 50px;
	}
	#iq1204 p.btn{
		position: relative;
		text-align: center;
		left: 0px;
		right: 0px;
		background: rgba(0,0,0,0.7);
	}
	#freedom{
		height: 107vw;
		min-height: 0;
		background: none;
	}
	#freedom .max1500{
		background: url(/images/top/img__intega_bg_mini.jpg) no-repeat;
		background-size: contain;
		height: 107vw;
	}
	#freedom .mainBox{
		display: none;
	}
	#freedom p.btn{
		text-align: center;
		left: 0;
		right: 0;
	}
	#freedom p.btn a{
		background: rgba(255,255,255,0.7);
	}
	#bb-react p.btn,#INO_series p.btn{right: 0;left:0;margin:auto;border:none;padding:0;}
	#bb-react p.btn a,#INO_series p.btn a{border: 1px solid #fff;padding: 6px 12px;}
}