@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); max-width: none; width: auto;}
#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{display: block; margin: 200px auto 100px; max-width: 100%; height: auto;}
#main #solution ul{display: flex; gap:10px; list-style: none; margin-bottom: 50px; flex-wrap: wrap; justify-content: center; padding-left: 0;}

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

#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; padding-left: 0;}
#main #Forming_technology ul li img{width: 90%; height: auto;}

@media only screen and (max-width: 768px) {
#main #Forming_technology ul{display: flex; flex-direction: column; align-items: center; width: 100%; margin: 50px auto;}
#main #Forming_technology ul li{width: 100%;}
#main #Forming_technology ul li img{width: 100%; max-width: 100%; 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 a{position: relative; top:320px; left: 390px; color: #000; text-decoration: none; display: inline-block;}

#main #product a img{margin-bottom: 10px; max-width: 100%; height: auto;}
#main #product a i img{position: relative; top:4px; width: 16px; height: 16px; display: inline-block; vertical-align: middle;}

#main #product a:hover{text-decoration: underline;}
#main #product img[src="./img/product_01.png"] {display: none;}


#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 {
    margin: 72px auto 0;
    min-height: auto;
    padding: 20px 15px 30px;
    background: none;
  }

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

  #main #eyecatch img {
    position: static;
    left: auto;
  }

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

  #main #eyecatch img[src="./img/top_eyecatch_v2_sp.png"] {
    display: block;
    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"] {
    display: block;
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    height: auto;
  }

  #main #eyecatch h1 {
    display: block;
    width: calc(100% - 60px);
    margin: 30px 20px 30px 20px;
    font-size: 24px;
    opacity: 1;
  }

  #main #eyecatch p {
    display: block;
    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 #solution {
    margin-top: 50px;
  }

  #main #solution img.img_solution {
    margin: 200px auto 50px;
  }

  #main #solution h3 + p {
    width: 100%;
    padding: 0 15px;
    font-size: 1em;
  }

  #main #solution ul {
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 30px;
  }

  #main #solution ul li {
    width: 100%;
    max-width: 320px;
  }

  #main #solution ul li img {
    width: 100%;
    height: auto;
  }

  #main #Forming_technology ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 50px auto;
  }

  #main #Forming_technology ul li {
    width: 100%;
  }

  #main #Forming_technology h2 {
    font-size: 24px;
    opacity: 1;
    background: #000;
    color: #fff;
    width: 100%;
    padding: 30px;
    margin-bottom: 0;
    position: relative;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  #main #Forming_technology h2:before,
  #main #Forming_technology h2:after {
    content: "";
    display: block;
    width: 100%;
    height: 20px;
    background: #000;
    position: absolute;
    left: 0;
    z-index: -1;
  }

  #main #Forming_technology h2:before {
    top: -21px;
  }

  #main #Forming_technology h2:after {
    bottom: -21px;
  }

  /* Make #solution h2 and following p visible on small screens like #Forming_technology */
  #main #solution h2 {
    font-size: 24px;
    opacity: 1;
    background: #000;
    color: #fff;
    width: 100%;
    padding: 30px;
    margin-bottom: 20px;
    position: relative;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  #main #solution h2:before,
  #main #solution h2:after {
    content: "";
    display: block;
    width: 100%;
    height: 20px;
    background: #000;
    position: absolute;
    left: 0;
    z-index: -1;
  }

  #main #solution h2:before {
    top: -21px;
  }

  #main #solution h2:after {
    bottom: -21px;
  }

  #main #solution h2 + p,
  #main #solution p {
    font-size: 20px;
    opacity: 1;
    width: calc(100% - 40px);
    margin: auto 20px 30px;
    text-align: left;
  }

  #main #Forming_technology ul li img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  #main #product {
    width: 100%;
    margin: 50px auto 0;
    text-align: center;
    background-image: none;
    height: auto;
  }

  #main #product h2 {
    font-size: 24px;
    opacity: 1;
    background: #000;
    color: #fff;
    width: 100%;
    padding: 30px;
    margin-bottom: 50px;
    position: relative;
  }

  #main #product h2:before,
  #main #product h2:after {
    content: "";
    display: block;
    width: 100%;
    height: 20px;
    background: #000;
    position: absolute;
    left: 0;
    z-index: -1;
  }

  #main #product h2:before {
    top: -21px;
  }

  #main #product h2:after {
    bottom: -21px;
  }

  #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: 0;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

  #main #product dl {
    opacity: 1;
    margin: 0 0 20px;
  }

  #main #product dl dt {
    font-size: 28px;
    margin-bottom: 6px;
  }

  #main #product dl dd {
    font-size: 22px;
  }

  #main #product a {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    margin-top: 10px;
  }

  #main #product a img {
    display: block;
    margin: 0 auto 10px;
    width: min(100%, 320px);
    height: auto;
  }
}