/*
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
*/

#hadashindan .pc-only{
    display: block;
}
#hadashindan .sp-only{
    display: none;
}
#hadashindan #btnPageTop > a{
    z-index: 80;
}
/*init*/
#hadashindan .question li{
    display: none;
}
#hadashindan #result li{
    display: none;
}
#hadashindan .select{
    display: none;
}
#hadashindan{
    max-width: 970px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    font-size: 16px;
    margin-top: 20px;
}
#hadashindan #hada_wrap.res{
    padding-top: 0;
    height: auto;
}

#hadashindan #hada_wrap{
    position: relative;
    height: 0;
    padding-top: 70%;
}

#hadashindan>div>div{
    position: absolute;
    top:0;
    left: 0;
    width: 970px;
}

#hadashindan>div>div:last-child{
    position: relative;
}

#hadashindan #start{
    position: relative;
    z-index: 80;
}

#hadashindan #start>div>div{
    position: absolute;
    left: 50%;
    margin-left:-250px;
    bottom: 30px;
    cursor: pointer;
}


#hadashindan #questions{
    position: relative;
    width: 100%;
    /*height: calc((80vw / 770) * 518 );*/
}
#hadashindan section ul{
    position: relative;
}

#hadashindan .question{
    height: 580px;
    position: relative;
}
#hadashindan .question.heightauto{
    height:auto;
}

#hadashindan .question li{
    position:absolute;
    top: 0;
    left: 0;
    font-size: 50px;
}

#hadashindan .select{
    width: 100%;
    text-align: center;
    margin-top: -70px;
}
#hadashindan .select li{
    display: inline-block;
    margin-right: 20px;
}

/* #result */
#hadashindan #result{
    width: 100%;
    margin-bottom: 80px;
}
#hadashindan .resultContents{
    margin-top: 50px;
    width: 880px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../img/result_arrow.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 100px;
}
#hadashindan .titleResult{
    margin-bottom: 20px;
}
#hadashindan .items{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#hadashindan .item{
    background-image: url(../img/item_border.png);
    background-repeat: repeat-y;
    background-position: right;
}

#hadashindan .items>.item:last-child{
    background: none;
}
#hadashindan .fontSmall{
    font-size:80%;
    line-height: 80%;
}
#hadashindan .genre{
    text-align: center;
    margin-bottom: 20px;
    border: 2px solid #ccc;
    padding: 5px;
    font-size: 16px;
    border-radius: 5px;
    line-height: 1.5em;
}
#hadashindan .title{
    font-weight:bold;
    color:#0c84c0;
    font-size: 16px;
    line-height: 1.5em;
}
#hadashindan .thumb{
    text-align: center;
}
#hadashindan .detail{
    font-size:16px;
    color: #25b5aa;
    line-height: 1.5em;
}
#hadashindan .cart{
    margin-top: 15px;
    margin-bottom: 30px;
    text-align: center;
}
#hadashindan .itemKit{margin-top: 20px;width: 100%;}
#hadashindan .itemKit .kit{
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


#hadashindan .kit>div{-webkit-box-sizing: border-box;box-sizing: border-box;padding-left: 5px;padding-right: 5px;}
#hadashindan .kit>div:nth-child(1){
    width: 30%;
}
#hadashindan .kit>div:nth-child(2){
    width: 45%;
    font-size: 14px;
    background-image: url(../img/item_border.png);
    background-repeat: repeat-y;
    background-position: right;
    padding-top: 10px;
}
#hadashindan .kit>div:nth-child(3){
    width: 25%;
    font-size: 14px;
}
#hadashindan .kit p{
    color: #25b5aa;
}
#hadashindan .kit p.price{
    color: #0c84c0;
    padding-bottom: 16px;
    background-image: url(../img/kit_border.png);
    background-repeat: repeat-x;
    background-position: bottom left;
    margin-bottom: 16px;
}
#hadashindan .kit .thumb{
    text-align: left;
}
#hadashindan .kit .cart{
    margin-top: 100px;
}
#hadashindan .allCart{
    text-align: center;
    margin-top: 50px;
}

#hadashindan .typeAC .item{
    width: 25%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}
#hadashindan .typeBasic .item{
    width: 33%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}


#hadashindan #again{
    text-align: center;
    margin-top: 50px;
}
#hadashindan .result-ac1 .genre,
#hadashindan .result-ac2 .genre{
    border-color: #25b5aa;
    color: #25b5aa;
}
#hadashindan .result-ac1 .title,
#hadashindan .result-ac2 .title{
    height: 160px;;
}

#hadashindan .result-bc1 .genre,
#hadashindan .result-bc2 .genre,
#hadashindan .result-bc3 .genre,
#hadashindan .result-bc4 .genre{
    border-color: #ffc016;
    color: #ffc016;
}
#hadashindan .result-bc1 .title,
#hadashindan .result-bc2 .title,
#hadashindan .result-bc3 .title,
#hadashindan .result-bc4 .title{
    color: #8f5d47;
    margin-bottom: 35px;
}
#hadashindan .result-bc1 .detail,
#hadashindan .result-bc2 .detail,
#hadashindan .result-bc3 .detail,
#hadashindan .result-bc4 .detail{
    color: #555;
}
#hadashindan .result-bc1 .item .thumb,
#hadashindan .result-bc2 .item .thumb,
#hadashindan .result-bc3 .item .thumb,
#hadashindan .result-bc4 .item .thumb{
    float: left;
}
#hadashindan .result-bc1 .item .text,
#hadashindan .result-bc2 .item .text,
#hadashindan .result-bc3 .item .text,
#hadashindan .result-bc4 .item .text{
    float: right;
    padding-right: 20px;
}

#hadashindan .clearfix::after{
    content: "";
    display: block;
    clear: both;
}


@media screen and ( max-width:768px ){
    #hadashindan .pc-only{
        display: none;
    }
    #hadashindan .sp-only{
        display: block;
    }
    #hadashindan{
        width: 100%;
        max-width: 100%;
    }
	
    #hadashindan #hada_wrap{
        height: 0;
        padding-top: 110%;
        position: relative;
    }
	
    #hadashindan>div>div{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
    }
	
    #hadashindan #start{
        position: relative;
/*        z-index: 10000;*/
    }
	
    #hadashindan #start>div>div{
        position: absolute;
        left:0;
        margin-left:0;
        bottom: 55px;
        cursor: pointer;
        width: 100%;
    }
	
    #hadashindan #start>div>img{width: 100%;}
    #hadashindan #start>div>div{
        text-align: center;
        margin-top: -10rem;
    }
    #hadashindan #start>div>div>img{
        width: 70%;
    }
    
    #hadashindan #questions{
        position: relative;
        width: 100%;
    }
    #hadashindan section ul{
        position: relative;
    }
    #hadashindan .question img{
        width: 100%;
    }
    #hadashindan .question{
        height: 105vw;
        position: relative;
    }
	
    #hadashindan .question li{
        position:absolute;
        top: 0;
        left: 0;
        font-size: 50px;
    }
	
    #hadashindan .select{
        width: 100%;
        text-align: center;
        margin-top: -5rem;
    }
    #hadashindan .select li{
        display: inline-block;
        margin-right: 20px;
        width: 40%;
    }
    #hadashindan .select li img{
        width: 100%;
    }
    #hadashindan .select li:last-child{
        margin-right: 0;
    }

    /* #result */
    #hadashindan #result{
        width: 100%;
        margin-bottom: 80px;
    }
    #hadashindan .resultContents{
        margin-top: 5vw;
        width:100%;
        margin-right: auto;
        margin-left: auto;
        background-image: url(../img/result_arrow.jpg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%;
        padding-top: 15vw;
    }
    #hadashindan .result-image img{
        width: 100%;
    }
    #hadashindan .titleResult{
        margin-bottom: 20px;
    }
    #hadashindan .titleResult img{
        width: 100%;
    }
    #hadashindan .items{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    #hadashindan .item{
        background-image: url(../img/item_border.png);
        background-repeat: repeat-y;
        background-position: right;
        width: 50% !important;
        margin-bottom: 2rem;
    }
    #hadashindan .items>.item:last-child{
        background-image: url(../img/item_border.png);
        background-repeat: repeat-y;
        background-position: right;
    }
    #hadashindan .items>.item:nth-child(2n){
        background: none;
    }
    
    #hadashindan .fontSmall{
        font-size:80%;
        line-height: 130%;
    }
    #hadashindan .title{
        font-weight:bold;
        color:#0c84c0;
        font-size: 3.2vw;
    }
    #hadashindan .genre{
        font-size: 3.5vw;
    }
    #hadashindan .thumb{
        text-align: center;
    }
    #hadashindan .detail{
        font-size:1rem;
        color: #25b5aa;
        font-size: 3.2vw;
    }
    #hadashindan .cart{
        margin-top: 15px;
        margin-bottom: 30px;
        text-align: center;
    }
    #hadashindan .itemKit{
		margin-top: 20px;width: 100%;
	}
    #hadashindan .itemKit .kit{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }


    #hadashindan .kit>div{
		-webkit-box-sizing: border-box;box-sizing: border-box;padding-left: 5px;padding-right: 5px;
	}
    #hadashindan .kit>div:nth-child(1){
        width: 40%;
    }
    #hadashindan .kit>div:nth-child(1) img{
        width: 100%;
    }
    #hadashindan .kit>div:nth-child(2){
        width: 60%;
        font-size: 3vw;
        background-image: none;
        padding-top: 10px;
    }
    #hadashindan .kit>div:nth-child(3){
        width: 100%;
        font-size: 0.8rem;
    }
    #hadashindan .kit p{
        color: #25b5aa;
    }
    #hadashindan .kit p.price{
        color: #0c84c0;
        padding-bottom: 1rem;
        background-image: url(../img/kit_border.png);
        background-repeat: repeat-x;
        background-position: bottom left;
        margin-bottom: 1rem;
    }
    #hadashindan .kit .thumb{
        text-align: left;
    }
    #hadashindan .kit .cart{
        margin-top: 50px;
    }
    #hadashindan .allCart{
        text-align: center;
        margin-top: 1rem;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    #hadashindan .allCart img{
        width: 100%;
    }



    #hadashindan #again{
        text-align: center;
        margin-top: 50px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    #hadashindan #again img{
        width: 100%;
    }
    #hadashindan .result-ac1 .genre,
    #hadashindan .result-ac2 .genre{
        border-color: #25b5aa;
        color: #25b5aa;
    }
    #hadashindan .result-ac1 .title,
    #hadashindan .result-ac2 .title{
        height: 13vw;
    }
    #hadashindan .result-ac1 .item:nth-child(3) .title,
    #hadashindan .result-ac1 .item:nth-child(4) .title,
    #hadashindan .result-ac2 .item:nth-child(3) .title,
    #hadashindan .result-ac2 .item:nth-child(4) .title{
        height: 35vw;
    }

    #hadashindan .result-bc1 .genre,
    #hadashindan .result-bc2 .genre,
    #hadashindan .result-bc3 .genre,
    #hadashindan .result-bc4 .genre{
        border-color: #ffc016;
        color: #ffc016;
    }
    #hadashindan .result-bc1 .title,
    #hadashindan .result-bc2 .title,
    #hadashindan .result-bc3 .title,
    #hadashindan .result-bc4 .title{
        color: #8f5d47;
        margin-bottom: 2rem;
        height: 13vw;
    }
    #hadashindan .result-bc1 .detail,
    #hadashindan .result-bc2 .detail,
    #hadashindan .result-bc3 .detail,
    #hadashindan .result-bc4 .detail{
        color: #555;
    }
    #hadashindan .result-bc1 .item .thumb,
    #hadashindan .result-bc2 .item .thumb,
    #hadashindan .result-bc3 .item .thumb,
    #hadashindan .result-bc4 .item .thumb{
        float: none;
    }
    #hadashindan .result-bc1 .item .text,
    #hadashindan .result-bc2 .item .text,
    #hadashindan .result-bc3 .item .text,
    #hadashindan .result-bc4 .item .text{
        float: none;
        padding-right: 20px;
    }  
}






/*SFCC カートCSS*/

#hadashindan .cart button.clickOnAddToCartContentAsset.btnCustom01{
	width: 100%;
	margin: 0 auto;
	border-radius: 5px;
	padding: 5% 0!important;
}

#hadashindan .itemKit .cart button.clickOnAddToCartContentAsset.btnCustom01{
	width: 95%;
}


#hadashindan .allCart button.clickOnAddToCartContentAsset.btnCustom04{
	width: 70%;
	margin: 0 auto;
	border-radius: 5px;
	padding: 2% 0!important;
    font-size: 1.5em;
}


@media screen and ( max-width:768px ){
	#hadashindan .itemKit .cart button.clickOnAddToCartContentAsset.btnCustom01{
		padding: 3% 0!important;
	}
	
	#hadashindan .allCart button.clickOnAddToCartContentAsset.btnCustom04{
		width: 100%;
		padding: 4% 0!important;
		font-size: 1.6rem;
	}	
	
	
	
}