@charset "UTF-8";

#main #eyecatch{margin: 102px auto 0; max-width:1290px; min-height: 670px; background: #221815; margin-bottom: 10px;}
#main #eyecatch .container{display: flex; align-items: center; margin: auto;
    max-width: 970px; padding: 55px 0 65px;}
#main #eyecatch .container>ul{margin-left: 3.8em; list-style: none;}
#main #eyecatch .container>ul li{position: relative; padding: 40px 0 30px;}
#main #eyecatch .container>ul li:after{content: ""; width: 108%; height: 8px; background: #f2c817; border-radius: 6px;position: absolute; left: -16px; bottom: 0;}

#main #eyecatch .container>ul li:last-child:after{height: 0px;}

@media only screen and (max-width: 969px) {
    #main #eyecatch .container{width: 100%;}
    #main #eyecatch .container>img{width: 60%; height: auto;}
}
#main #eyecatch h1{font-size: 0; opacity: 0;}


#main #News{max-width:100%; margin: auto auto 20px;}
#main #News .container{background-image: url(/img/top_sec_back_news.png);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: 50px top;}

#main #News .container{margin: 50px auto; max-width: 1290px; padding: 70px 0 0; text-align: center;}
#main #News .container h2{font-size: 0; opacity: 0;}
#main #News .container h2+div{border: 2px solid #f2c817; padding: 20px;  margin-left: 50px;}
#main #News .container dl{width: 100%; font-size: 1.3em; line-height: 1.8em;
display: flex; flex-wrap: wrap; margin-bottom: 0;}
#main #News .container dl dt{width: 250px; font-weight: 800; position: relative; padding-left: 100px;}
#main #News .container dl dt i{display:flex; justify-content: center; align-items: center; font-style: normal; color: #FFF; background: #FF0000; position: absolute; left: 20px; top:5px;
height: 28px; width: 70px; line-height: 100%; font-size: 1.2em; padding-bottom: 4px;}
#main #News .container dl dd{width: calc(100% - 250px);line-height: 110%; text-align: left; padding: 7px 0;}

@media only screen and (max-width: 600px) {
    #main #News .container dl dt{width: 100%; text-align: center; padding-left: 0}
    #main #News .container dl dt i{left: calc(50% - 140px);}
    #main #News .container dl dd{width: calc(100% - 0px);}
}

@media only screen and (max-width: 768px) {
    #main #eyecatch{margin: 71px auto 0; }
}


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

#main #Ready_for_dreation .container{margin: auto; border: 0px solid red; max-width: 1125px; padding: 130px 0 0; text-align: center;}

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

#main #Ready_for_dreation .container .video-area{background: #222; color: #fff; margin-top: 69px; padding: 30px 0; background: linear-gradient(-70deg, #3e3a39 0%, #3e3a39 30%, #221815 30%, #221815 100%);}
#main #Ready_for_dreation .container .video-area h3{font-size: 1.3em; font-weight: normal; border: 3px solid #f2c817; border-radius: 2px; display: inline-block; padding: 20px 20px; height: 60px;}
#main #Ready_for_dreation .container .video-area h3 span{background: #221815; padding: 6px; display: block; position: relative; top:-30px; line-height: 150%;}
#main #Ready_for_dreation .container .video-area h3 small{font-size:80%;}

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




#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: 75px auto 0;
    min-height: auto;
    margin-bottom: 10px;
}

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

#main #eyecatch .container>img {
    width: 60%;
    min-width: 200px;
    height: auto;
}

#main #eyecatch .container>ul {
    margin-left: 0;
    list-style: none;
    width:100%;
    padding:0 15px;
}

#main #eyecatch .container>ul li {
    position: relative;
    padding: 20px 0 20px;
    text-align: center;
}

#main #eyecatch .container>ul li:after {
    width: 100%;
    left: 0px;
}

#main #eyecatch .container>ul li img {
width:80%;
}


#main #News .container h2+div {
    padding: 20px;
    margin: 0 10px;
}




#main #News .container {
    background-position: 50% top;
    margin:30px auto;
}

#main #Ready_for_dreation {
    background-position: 45% top;
}

#main #Ready_for_dreation .container p , #main #Who_we_are .container p , #main #Value_Proposition .container p {
    font-size: 1.2em;
    line-height: 1.5em;
    margin-bottom: 1.8em;
}

#main .txt_inner {
    background-color: #F0F1F1;
    padding:0 10px 10px;
    text-align: left;
}

#main #Ready_for_dreation .container .video-area , #main #Value_Proposition .container .video-area  {
    margin-top: 40px;
    padding: 30px 0;
    width: 100%;
}

#main #Ready_for_dreation .container .video-area h3+div , #main #Value_Proposition .container .video-area h3+div{
    margin: -10px auto 30px;
    width:90%;
    max-width: 640px;
    }

#main #Who_we_are {
    background-position: 55% top;
}

#main #Who_we_are .container {
    background-position: 55% top;
    background-size: 160%;
    padding: 60px 0 15px;
}

#main #Value_Proposition {
    background-size: auto auto;
    background-position: 45% top;
}

#main #Value_Proposition .txt_inner {
    background-color: #E9EAEA;
}


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

#main #Value_Proposition .container .consultation h3 {
    z-index: 1;
    position:relative;
    left:auto;
    margin: auto;
    text-align: center;
}

#main #Value_Proposition .container .consultation h3 span {
    color: #FFF;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px 20px;
    font-size: 1.3em;
    line-height: 1.5;
    margin-bottom:5px;
    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>ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top:0;
    margin-top:-30px;
    padding-left:0;
}

#main #Value_Proposition .container .consultation h3+img+div>ul li {
    width: 80%;
    font-size: 1.0em;
}

#main #Value_Proposition .container .consultation h3+img+div>ul li b {
    font-size: 1.3em;
}


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

#main #Value_Proposition .container .consultation h3+img+div>ul li {
    width: 90%;
    margin:0 auto 15px; 
    position: relative;
    left: 0px;
    margin-bottom:40px;
}

#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-of-type(1) ,
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-of-type(2) ,
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-of-type(4) ,
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-of-type(5) {
    width: 90%;
    margin:0 auto 15px; 
    position: relative;
    left: 0px;
    top:0;
    bottom:0;
    margin-bottom:40px;
    font-size: 1.2em;

}

#main #Value_Proposition .container .consultation ul li:nth-of-type(-n+2) div:before , #main #Value_Proposition .container .consultation ul li:nth-of-type(-n+2) div:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

#main #Value_Proposition .container .consultation ul li:nth-of-type(-n+2) div:after{
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 20px;
	margin-left: -20px;
}

#main #Value_Proposition .container .consultation ul li:nth-of-type(-n+2) div::before {
	border-color: rgba(137, 137, 137, 0);
	border-top-color: #898989;
	border-width: 28px;
	margin-left: -28px;
}



#main #Value_Proposition .container .consultation ul li:nth-of-type(n+4) div:before , 
#main #Value_Proposition .container .consultation ul li:nth-of-type(n+4) div:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}


#main #Value_Proposition .container .consultation ul li:nth-of-type(n+4) div::after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 20px;
	margin-left: -20px;
}

#main #Value_Proposition .container .consultation ul li:nth-of-type(n+4) div::before {
	border-color: rgba(137, 137, 137, 0);
	border-bottom-color: #898989;
	border-width: 28px;
	margin-left: -28px;
}

#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(1):before , 
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(1)::after , 
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(2):before , 
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(2)::after ,
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(4):before , 
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(4)::after , 
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(5):before , 
#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-child(5)::after {
border:none;
position: relative;
}


#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-of-type(3) {
    position: relative;
    left:0;
    top:0;
    padding:0;
    text-align: center;
    width:90%;
}

#main #Value_Proposition .container .consultation h3+img+div>ul li:nth-of-type(3) img {
    width:200px; height:250px;
	object-fit:cover;
    object-position: center top;
}

#main #Value_Proposition .container .video-area h3 {
    font-size: 1.3em;
}

#main #Ready_for_dreation .container .video-area h3 , #main #Value_Proposition .container .video-area h3 {
    font-size: 1.2em;
    font-weight: normal;
    border: none;
    border-radius: 0px;
    display: block;
    padding: 20px 5px 0;
    height: auto;
}



#main #Value_Proposition .container .recommend>img+ul {
    padding: 50px 20px;
}


#main #Value_Proposition .container .recommend>img+ul>li {
    width: 500px;
    border: 8px solid black;
    border-radius: 4px;
    margin: 30px 30px;
    background: #f2c817;
}

#main #Value_Proposition .container .recommend>img+ul>li>dl dt {
    font-size: 1.6em;
}

}


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

#main #Ready_for_dreation {
    background-image: url(../img/top_sec_back_01s.png);
    background-position: center top;
    background-size: contain;
}

#main #Ready_for_dreation .container {
    padding: 110px 0 0;
}

#main #Who_we_are {
    background-image: url(../img/top_sec_back_02_01s.png);
    background-position: center top;
    background-size: 100%;
    background-color: #f0f1f1;
    padding-top:120px;
}

#main #Value_Proposition {
    background-image: url(../img/top_sec_back_03s.png);
    background-position: center top;
    background-size: contain;
}

}