@charset "UTF-8";


#main #eyecatch{margin: 96px auto 0; /*max-width:1290px; */ min-height: 718px;background: #221815; margin-bottom: 10px; text-align: center; position: relative;}
#main #eyecatch img{margin: auto; position: absolute; left: calc(50% - 960px);}
#main #eyecatch h1,
#main #eyecatch p{font-size: 0; opacity: 0;}
#main #eyecatch img[src="./img/top_eyecatch_v2.png"] {display: block;}
#main #eyecatch img[src="./img/top_eyecatch_v2_sp.png"] {display: none;}
#main #eyecatch img[src="./img/top_eyecatch_v2_sp_txt.png"] {display: none;}

#main #solution{max-width:1320px; margin: 100px auto 20px; text-align: center;}
#main #solution{background-image: url(/img/top_solition_title.png);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: right top;}

@media only screen and (max-width: 1320px) {
	#main #solution{background-position: center top;}
}
#main #solution h2,
#main #solution h2 + p{font-size: 0; opacity: 0;}
#main #solution img.img_solution{margin: 200px auto 100px;}
#main #solution ul{display: flex; gap:10px; list-style: none; margin-bottom: 50px;}

#main #solution h3{margin-bottom: 50px;}
#main #solution h3 + p{width: 60%; text-align: left; margin: auto auto 30px; font-size: 1.2em;}

#main #solution img.img_solution_bottom{width: 100%; height: auto;}
#main #solution img[src="./img/solution_06.png"] + ul{display: none;}


#main #Forming_technology{max-width:1320px; margin: 100px auto 20px; text-align: center;}
#main #Forming_technology{background-image: url(/img/top_technology_title.png);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: right top;}

@media only screen and (max-width: 1320px) {
	#main #Forming_technology{background-position: center top;}
}

#main #Forming_technology h2{font-size: 0; opacity: 0;}
#main #Forming_technology ul{display: flex; list-style: none; margin: 150px auto 50px;}
#main #Forming_technology ul li img{width: 90%; height: auto;}


#main #product{max-width:1320px; height: 800px; margin: 100px auto 20px; text-align: center;}
#main #product{background-image: url(/img/top_product.png);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: right top;}

@media only screen and (max-width: 1320px) {
	#main #product{background-position: center top;}
}

#main #product h2,
#main #product p,
#main #product dl{font-size: 0; opacity: 0;}

#main #product img[src="./img/product_01.png"] {display: none;}

#main #product a{position: relative; top:320px; left: 390px; color: #000; text-decoration: none;}

#main #product a img{margin-bottom: 10px;}
#main #product a i img{position: relative; top:4px;}

#main #product a:hover{text-decoration: underline;}


#main #Who_we_are{max-width:1290px; margin: auto;}
#main #Who_we_are{background-image: url(/img/top_sec_back_02_01.png);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: left top;
    padding-top:144px;
}

#main #Who_we_are .container{
background-image: url(/img/top_sec_back_02_02.png);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: left top;
margin: auto; max-width: 1125px; padding: 100px 0 0; text-align: center;}

#main #Who_we_are .container h2{font-size: 0; opacity: 0;}
#main #Who_we_are .container p{font-size: 1.3em; line-height: 1.8em; margin-bottom: 2.2em;}



#main #Value_Proposition{max-width:1290px; margin: auto;}
#main #Value_Proposition{background-image: url(/img/top_sec_back_03.png);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: right top;}

#main #Value_Proposition .container{margin: auto; max-width: 1290px; padding: 140px 0 0; text-align: center;}
#main #Value_Proposition .container h2{font-size: 0; opacity: 0;}
#main #Value_Proposition .container p{font-size: 1.3em; line-height: 1.86em; margin-bottom: 2.2em;}


#main #Value_Proposition .container .recommend{max-width:1290px; margin: auto; 
overflow: hidden; position: relative; top:-30px;}
#main #Value_Proposition .container .recommend>img{width: 100%;}
#main #Value_Proposition .container .recommend>img+ul{background: #f2c817; padding: 50px 50px; display: flex; justify-content:center; align-items: center; flex-wrap: wrap; width: 100%; margin: auto; list-style: none;}
#main #Value_Proposition .container .recommend>img+ul>li{width: 350px; border: 8px solid black; border-radius: 4px; margin: 30px 50px; background: #f2c817;}

#main #Value_Proposition .container .recommend>img+ul>li>dl{background: #FFF; margin: 10px;}

#main #Value_Proposition .container .recommend>img+ul>li>dl dt{position: relative; text-align: center;
font-size: 1.8em; line-height: 120%; font-weight: 900; padding-bottom: 20px;}
#main #Value_Proposition .container .recommend>img+ul>li>dl dt i{font-style: normal; border: 8px solid black; border-radius: 4px; width:260px; height: 85px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.8); position: relative; top:-40px; margin: auto;}

#main #Value_Proposition .container .recommend>img+ul>li:nth-child(2)>dl dt i{background-color: rgba(232, 56, 40, 0.8);}
#main #Value_Proposition .container .recommend>img+ul>li:nth-child(3)>dl dt i{background-color: rgba(0, 74, 45, 0.8);}
#main #Value_Proposition .container .recommend>img+ul>li:nth-child(4)>dl dt i{background-color: rgba(35, 58, 139, 0.8);}

#main #Value_Proposition .container .recommend>img+ul>li>dl dt:before{content: ""; width: 100%; height: 12px; background: #f2c817; position: absolute; left: 0; top: -20px;}
#main #Value_Proposition .container .recommend>img+ul>li>dl dt:after{content: ""; width: calc(100% - 20px); height: 5px; border-radius: 4px; background: #f2c817; position: absolute; left: 10px; bottom: 0;}

#main #Value_Proposition .container .recommend>img+ul>li>dl dd{display: flex; align-items: center; height: 170px; padding: 0 10px; text-align: left;}

#main #Value_Proposition .container .consultation{position: relative; top:-100px; margin: auto; width: 1128px; text-align: center;}

#main #Value_Proposition .container .consultation h3{z-index: 9; position: absolute; top:-40px; left: calc(50% - 380px); margin: auto; text-align: left;}

#main #Value_Proposition .container .consultation h3 span{color: #FFF; text-align: left; background-color: rgba(0, 0, 0, 0.6); /*line-height: 142%;*/ padding: 5px 20px; font-size: 1.4em; display: inline-block;}
#main #Value_Proposition .container .consultation h3 span i{font-style: normal; background-color: rgba(0, 0, 0, 0.6);  color: #f2c817; padding: 0 10px;}

#main #Value_Proposition .container .consultation h3+img+div{background: #e9eaea; min-height: 630px;}
#main #Value_Proposition .container .consultation h3+img+div>ul{list-style: none;
display: flex; justify-content:space-between; align-items: center; flex-wrap: wrap; padding-top: 70px;}

#main #Value_Proposition .container .consultation h3+img+div>ul li{width: 40%; font-size: 1.4em;}
#main #Value_Proposition .container .consultation h3+img+div>ul li b{font-size: 1.5em;
background:linear-gradient(transparent 80%, #f2c817 80%);}



#main #Value_Proposition .container .consultation h3+img+div>ul li:before,
#main #Value_Proposition .container .consultation h3+img+div>ul li:after{content: "";
position: absolute; right: 0; left: 0; width: 0; height: 0; margin: auto;}

#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(1){width: 400px; position: relative; left: -50px;}
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(1):before{bottom: 20px; 
    right: -460px; border-style: solid; border-color: transparent transparent #898989 transparent; border-width: 0 65px 37px 0;}
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(1):after{bottom: 26px; right:-430px; border-style: solid; border-color: transparent transparent #fff transparent; border-width: 0 46px 26px 0; z-index: 10;}

#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(2){width: 450px; position: relative; left: -40px; font-size: 1.0em;}
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(2):before{bottom: -49px; 
    left: -374px; border-style: solid; border-color: transparent #898989 transparent transparent; 
    border-width: 40px 26px 46px 1px; transform:rotate(58deg);} 
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(2):after{bottom: -32px; left: -342px; border-style: solid; border-color: transparent #fff transparent transparent; 
    border-width: 40px 26px 46px 1px; transform:rotate(58deg); z-index: 2;}

#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(3){position: absolute; left: 300px; top:250px;}

#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(4){width: 400px; position: relative; left: 24px; top:85px; font-size: 1.0em;}
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(4):before{bottom: 76px; 
    right: -418px; border-style: solid; border-color: transparent transparent transparent #898989; border-width: 34px 0px 44px 20px; transform:rotate(210deg);}
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(4):after{bottom: 56px; 
    right: -382px; border-style: solid; border-color: transparent transparent transparent #FFF; border-width: 34px 0px 44px 20px; transform:rotate(210deg); z-index: 2;}

#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(5){width: 435px; position: relative; left: 12px; bottom: -42px;}
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(5):before{top: 20px; 
    left: -451px; border-style: solid; border-color: transparent #898989 transparent transparent; 
    border-width: 40px 26px 46px 1px; transform:rotate(147deg);}
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(5):after{top: 36px; 
    left: -416px; border-style: solid; border-color: transparent #FFF transparent transparent; 
    border-width: 40px 26px 46px 1px; transform:rotate(147deg); z-index: 2;}



#main #Value_Proposition .container .consultation h3+img+div>ul li div{border: 6px solid #898989; border-radius: 16px; padding: 15px 10px; background: #FFF;}

#main #Value_Proposition .container .video-area{width: 1128px; color: #fff; margin: auto; padding: 40px 0; position: relative; top:-52px; background: linear-gradient(105deg, #3e3a39 0%, #3e3a39 27%, #221815 27%, #221815 100%);}
#main #Value_Proposition .container .video-area h3{font-size: 1.4em; font-weight: normal; border: 4px solid #f2c817; border-radius: 2px; display: inline-block; padding: 20px 40px; height: 79px;}
#main #Value_Proposition .container .video-area h3 span{background: #221815; padding: 10px; display: block; position: relative; top:-36px; line-height: 152%;}
#main #Value_Proposition .container .video-area h3 small{font-size:80%; display: block; padding-top: 0.4em;}
#main #Ready_for_dreation .container .video-area h3+div{margin: -10px auto 30px; position: relative; max-width: 640px;}


#main #Value_Proposition .container .video-area h3+div{margin: -10px auto 30px; position: relative; max-width: 640px;}
#main #Value_Proposition .container .video-area h3+div:before{content: ""; width: calc(100% - 5px); height: 10px; background: #FFF; position: absolute; left: 10px; bottom: -5px;}
#main #Value_Proposition .container .video-area h3+div:after{content: ""; width: 10px; height: calc(100% - 10px); background: #FFF; position: absolute; right: -5px; top: 10px;}




@media only screen and (max-width: 768px) { /*スマホ版  --------------------------------------------------------- */

#main #eyecatch img[src="./img/top_eyecatch_v2.png"] {display: none;}
#main #eyecatch img[src="./img/top_eyecatch_v2_sp.png"] {display: block;}
#main #eyecatch img[src="./img/top_eyecatch_v2_sp_txt.png"] {display: block;}
	
#main #eyecatch img[src="./img/top_eyecatch_v2_sp.png"]{position: relative; left: auto; width: 100%; height: 620px; object-fit:cover; object-position: center bottom;}
#main #eyecatch img[src="./img/top_eyecatch_v2_sp_txt.png"]{position: absolute; left: 0; top:30%; width: 100%; height: auto;}

#main #eyecatch{margin: 33px auto 0; min-height: auto; background: none;}
	
#main #eyecatch h1{width: calc(100% - 60px); margin: 30px 20px 30px 20px; font-size: 24px; opacity: 1;}
#main #eyecatch p{width: calc(100% - 0px); margin: auto; padding: 30px 40px; text-align: left; font-size: 20px; opacity: 1; background: #D9D9D9; 
	border-top: 1px solid #000; border-bottom: 1px solid #000;}

#main #eyecatch .container {
    display: block;
    max-width: 100%;
    padding: 38px 0 10px;
    text-align: center;
}


#main #solution{width:100%; margin: 50px auto 20px; text-align: center; border-top: 1px solid #000; background-image:none;}
#main #solution .container { max-width: 100%; position: relative; padding: 0;}
	
#main #solution h2{font-size: 24px; opacity: 1; background: #000; color: #FFF; width: calc(100% - 0px); padding: 30px; border-top: 20px solid #FCCF00; margin-bottom: 0;}
#main #solution h2 + p{font-size: 16px; opacity: 1; width: calc(100% - 0px); padding: 20px 30px; background: #FCCF00; border-bottom: 1px solid #000; margin-bottom: 30px;}

#main #solution img.img_solution{margin: 20px auto 10px; width: 228px; height: auto;}
#main #solution ul{display: flex; flex-wrap: wrap; gap:10px; list-style: none; width: 228px; margin: auto auto 20px; padding-left: 0;}
#main #solution ul li{width: 100%;}
#main #solution ul li img{width: 100%; height: auto;}
#main #solution img[src="./img/solution_06.png"] {display: none;}
#main #solution img[src="./img/solution_06.png"] + ul{display: block; background: #FCCF00; width: calc(100% + 0px); padding: 50px 0;}
#main #solution img[src="./img/solution_06.png"] + ul li{text-align: center; padding-bottom: 50px; font-size: 20px;}
#main #solution img[src="./img/solution_06.png"] + ul li img{width: 80%; height: auto; display: block; margin: auto auto 20px;}
	#main #solution img[src="./img/solution_06.png"] + ul + p{font-size: 0px;}

#main #solution h3{padding: 0px 20px; margin-bottom: 20px;}
#main #solution h3 + p{width: 100%; text-align: left; margin: auto auto 30px; font-size: 1.2em; padding: 20px 20px; }
	
	
#main #Forming_technology{width:100%; margin: 50px auto 20px; text-align: center; background-image:none;}

#main #Forming_technology h2{font-size: 24px; opacity: 1; background: #000; color: #FFF; width: calc(100% - 0px); padding: 30px; 
	border-top: 20px solid #FCCF00; border-bottom: 20px solid #FCCF00; margin-bottom: 0; position: relative;}
#main #Forming_technology h2:before{content: ""; display: block; width: 100%; height: 20px; background: #000; position: absolute; left: 0; top:-21px; z-index: -1;}
#main #Forming_technology h2:after {content: ""; display: block; width: 100%; height: 20px; background: #000; position: absolute; left: 0; bottom:-21px; z-index: -1;}
	
	

#main #Forming_technology ul{display: flex; flex-wrap: wrap; list-style: none; margin: 50px auto 50px; padding: 0; 
	position: relative; width:calc(100% + 60px); left: -30px; }
#main #Forming_technology ul li img{width: 100%; height: auto;}


#main #product{width:100%; margin: 50px auto 0px; text-align: center; background-image:none;}
#main #product{background-image: none; height: auto;}
#main #product h2{font-size: 24px; opacity: 1; background: #000; color: #FFF; width: calc(100% - 0px); padding: 30px; 
	border-top: 20px solid #FCCF00; border-bottom: 20px solid #FCCF00; margin-bottom: 30px; position: relative;}
#main #product h2:before{content: ""; display: block; width: 100%; height: 20px; background: #000; position: absolute; left: 0; top:-21px; z-index: -1;}
#main #product h2:after {content: ""; display: block; width: 100%; height: 20px; background: #000; position: absolute; left: 0; bottom:-21px; z-index: -1;}
	


#main #product p{font-size: 20px; opacity: 1; width: calc(100% - 40px); margin: auto 20px 30px;}

#main #product div{background: #FCCF00; position: relative; margin-top: 100px; padding-top: 60%; padding-bottom: 150px;}

#main #product img[src="./img/product_01.png"] {display:block; margin: auto auto 30px; width: calc(100% - 80px); height: auto; 
	position: absolute; left: 40px; top:-80px;}

#main #product dl{opacity: 1;}
#main #product dl dt{font-size: 28px; margin-bottom: 6px;}
#main #product dl dd{font-size: 22px;}
	
#main #product a{position: relative; top:30px; left: 0px;}

#main #solution h3{margin-bottom: 50px;}
#main #solution h3 + p{width: calc(100% - 20px); text-align: left; margin: auto auto 30px; font-size: 1.2em;}

#main #solution img.img_solution_bottom{width: 100%; height: auto;}

}