@charset "utf-8";

.shindan {

}
.shindan .centering{
    position: relative;
}
.shindan .centering:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    margin: auto;
    width: 1003px;
    height: 97%;
    background: url(https://www.leivy.jp/leivy_theme/images/product/bg_middle_shindan.png) repeat-y top center;
}
.shindan .screen {
    display: none;
    text-align: center;
    position: relative;
    padding: 140px 120px 150px;
}
.shindan .screen:before{
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
     width: 1003px;
    height: 84px;
    background: url(https://www.leivy.jp/leivy_theme/images/product/bg_top_shindan.png) no-repeat top center;
}
.shindan .screen:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: -2px;
    width: 1003px;
    height: 45px;
    background: url(https://www.leivy.jp/leivy_theme/images/product/bg_btm_shindan.png) no-repeat bottom center;
}
.shindan .screen.active {
    display: block;
}
.shindan h2.question {
    font-size: 34px;
    margin-bottom: 30px;
    font-weight: bold;
    position: relative;
    display: inline-block;
    line-height: 1.6;
    position: relative;
}
.shindan h2.question span {
    display: block;
    font-size: 28px;
}
.shindan h2.question:before{
    content: "";
    position: absolute;
    top: 0;
    left: -70px;
    width: 42px;
    height: 115px;
    background: url(https://www.leivy.jp/leivy_theme/images/product/pic_shindanttl_side.svg) no-repeat top center;
}
.shindan h2.question:after{
    content: "";
    position: absolute;
    top: 0;
    right: -70px;
    width: 42px;
    height: 115px;
    background: url(https://www.leivy.jp/leivy_theme/images/product/pic_shindanttl_side.svg) no-repeat top center;
    transform: scaleX(-1);
}
.shindan h3{
    display: flex;
    align-items: center;
    gap: 0 30px;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 50px;
}
.shindan h3 span{
    text-align: left;
}
.shindan .lead {
    font-size: 16px;
    margin-bottom: 30px;
   	display: none;
}
.shindan .start .lead {
	display: block;
}
.shindan .buttons {
    display: flex;
    gap: 0 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.shindan button {
    padding: 15px 0 18px;
    margin-top: 50px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-size: 18px;
    width: 260px;
    border: 1px solid #A4D9E1;
    font-family: "Noto Sans JP", sans-serif;
    transition: .3s;
}
.shindan .start {
    background: #A4D9E1;
    color: #fff;
    position: relative;
}
.shindan .start:before {
    content: "";
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotateZ(45deg);
    transition: .3s;
}
.shindan .start:after {
    content: "";
    position: absolute;
    top: 0;
    right: 22px;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 2px; 
    background: #fff;
    transition: .3s;
}
.shindan .yes {
    background: none;
}
.shindan .no {
    background: none;
}
.shindan .yes:hover,
.shindan .no:hover {
    background: #A4D9E1;
    color: #fff;
}
.shindan .type{
    background: #EDF8F9;
    text-align: center;
    padding: 30px 0 35px;
    margin-bottom: 50px;
}
.shindan .type span{
    font-size: 24px;
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
    line-height: 1.5;
}
.shindan .result-item{
    margin-bottom: 80px;
}
.shindan .result-item > span{
    color: #A4D9E1;
    font-size: 20px;
    font-weight: bold;
    display: block;
}
.shindan .result-item > p{
        
}
.shindan .result-item .result-name {
    font-size: 26px;
    font-weight: bold;
    margin: 30px 0 40px;
    padding: 0 10px;
    display: inline-block;
    background: linear-gradient(transparent 60%, #EDF8F9 60%);
    line-height: 1.6;
}
.shindan .result-item ul{
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	gap: 40px 60px;
    margin: 50px 0 0;
}
.shindan .result-item ul li{
	text-align: center;
	position: relative;
}
.shindan .result-item ul li p{
	margin-top: 10px;
}
.shindan .result-item ul li img{
	position: relative;
}
.shindan .result-item ul li .labo{
	position: absolute;
	top: 0;
	right: 0;
	width: 67px;
	height: 67px;
	border-radius: 100px;
	color: #fff;
	display: flex;
	font-size: 12px;
	font-weight: bold;
	justify-content: center;
	align-items: center;
}
.shindan .result-item ul li .labo.cool{
	background: #A4D9E0;
}
.shindan .result-item .btn_shindan_detail{
	margin: 80px 0 0;
}
.shindan .result-item .btn_shindan_detail a{
	display: block;
	width: 340px;
	background: #6F6363;
    border: 1px solid #6F6363;
	color: #fff;
	text-align: center;
	padding: 15px 0;
	position: relative;
	margin: auto;
    border-radius: 100px;
    transition: .3s;
}
.shindan .result-item .btn_shindan_detail a:after {
	content: "";
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotateZ(45deg);
	transition: .3s;
}
.shindan .result-item .btn_shindan_detail a:hover{
	background: #fff;
    color: #6F6363;
}
.shindan .result-item .btn_shindan_detail a:hover:after {
	border-top: 2px solid #6F6363;
	border-right: 2px solid #6F6363;
}
.shindan .progress{
    position: absolute;
    bottom: 90px;
    left: 0;
    right: 0;
    text-align: center;
}
.shindan .restart {
    background: #A4D9E1;
    color: #fff;
    margin: 0;
    position: relative;
}
.shindan .restart:before {
	content: "";
	position: absolute;
	top: 0;
	left: 20px;
	bottom: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotateZ(45deg);
	transition: .3s;
}
.shindan .restart:after {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 2px; 
    background: #fff;
}
.shindan .restart:hover,
.shindan .start:hover {
    background: #fff;
    color: #A4D9E1;
}
.shindan .restart:hover:before{
    border-bottom: 2px solid #A4D9E1;
	border-left: 2px solid #A4D9E1;
}
.shindan .start:hover:before {
    border-top: 2px solid #A4D9E1;
    border-right: 2px solid #A4D9E1;
}
.shindan .restart:hover:after,
.shindan .start:hover:after {
    background: #A4D9E1;
}
.shindan .fade-in {
	animation: fadeIn 1s ease forwards;
}

/*	SP	*/
.shindan_sp {

}
.shindan_sp .centering{
    position: relative;
}
.shindan_sp .centering:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    margin: auto;
    width: 100%;
    height: 98%;
    background: url(https://www.leivy.jp/leivy_theme/images/product/bg_middle_shindan_sp.png) repeat-y top center / 100%;
}
.shindan_sp .screen {
    display: none;
    text-align: center;
    position: relative;
	padding: 22vw 10vw 22vw;
}
.shindan_sp .screen:before{
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
	width: 100%;
    height: 84px;
    background: url(https://www.leivy.jp/leivy_theme/images/product/bg_top_shindan_sp.png) no-repeat top center / 100%;
}
.shindan_sp .screen:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: -2px;
    width: 100%;
    height: 45px;
    background: url(https://www.leivy.jp/leivy_theme/images/product/bg_btm_shindan_sp.png) no-repeat bottom center / 100%;
}
.shindan_sp .screen.active {
    display: block;
}
.shindan_sp .screen#start {
	padding: 18vw 10vw 22vw;
}
.shindan_sp h2.question {
    font-size: calc(40/ 750 * 100vw);
    font-weight: bold;
    display: block;
    line-height: 1.5;
    position: relative;
    width: 90%;
    margin: 0 auto calc(50/ 750 * 100vw);
}
.shindan_sp h2.question span {
    display: block;
    font-size: calc(24/ 750 * 100vw);
}
.shindan_sp h2.question:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -7vw;
	width: 7vw;
	height: 25vw;
	margin: auto;
	background: url(https://www.leivy.jp/leivy_theme/images/product/pic_shindanttl_side.svg) no-repeat center / 100%;
}
.shindan_sp h2.question:after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -7vw;
	width: 7vw;
	height: 25vw;
	margin: auto;
	background: url(https://www.leivy.jp/leivy_theme/images/product/pic_shindanttl_side.svg) no-repeat center / 100%;
    transform: scaleX(-1);
}
.shindan_sp h3{
    display: flex;
    align-items: center;
    gap: 0 4vw;
    justify-content: center;
    font-size: calc(28/ 750 * 100vw);
    margin-bottom: calc(50/ 750 * 100vw);
}
.shindan_sp h3 img{
    width: 18%;
}
.shindan_sp h3 span{
    text-align: left;
    width: 80%;
}
.shindan_sp .lead + img{
  	width: 80%;  
}
.shindan_sp h3 + img{
	width: 60%;
}
.shindan_sp .lead {
    font-size: calc(26/ 750 * 100vw);
    margin-bottom: calc(50/ 750 * 100vw);
    display: none;
}
.shindan_sp .start .lead {
	display: block;
}
.shindan_sp .buttons {
    display: flex;
    gap: 3vw 0;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: calc(50 / 750 * 100vw);
}
.shindan_sp button {
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-size: calc(30/ 750 * 100vw);
    width: 85%;
	height: 13.6vw;
    background: none;
    font-family: "Noto Sans JP", sans-serif;
    color: #5F5151;
}
.shindan_sp .start {
    background: #A4D9E1;
    color: #fff;
    position: relative;
}
.shindan_sp .start:before {
    content: "";
    position: absolute;
    top: 0;
    right: 5vw;
    bottom: 0;
    margin: auto;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotateZ(45deg);
}
.shindan_sp .start:after {
    content: "";
    position: absolute;
    top: 0;
    right: 5.1vw;
    bottom: 0;
    margin: auto;
    width: 8vw;
    height: 2px; 
    background: #fff;
}
.shindan_sp .yes {
    border: 1px solid #A4D9E1;
}
.shindan_sp .no {
    border: 1px solid #A4D9E1;
}
.shindan_sp .type{
    background: #EDF8F9;
    text-align: center;
    padding: calc(30/ 750 * 100vw) calc(20/ 750 * 100vw) calc(30/ 750 * 100vw);
    margin-bottom: calc(50/ 750 * 100vw);
    line-height: 1.5;
	font-size: calc(24/ 750 * 100vw);
}
.shindan_sp .type span{
    font-size: calc(26/ 750 * 100vw);
    font-weight: bold;
    display: block;
    margin-bottom: calc(30/ 750 * 100vw);
    line-height: 1.5;
}
.shindan_sp .result-item{
    margin-bottom: calc(50/ 750 * 100vw);
}
.shindan_sp .result-item > span{
    color: #A4D9E1;
    font-size: calc(28/ 750 * 100vw);
    font-weight: bold;
    display: block;
}
.shindan_sp .result-item > p{
	font-size: calc(24/ 750 * 100vw);
	text-align: left;
}
.shindan_sp .result-item .result-name {
    font-size: calc(32/ 750 * 100vw);
    font-weight: bold;
    margin: calc(50/ 750 * 100vw) 0 calc(50/ 750 * 100vw);
    padding: 0 10px;
    display: block;
    background: linear-gradient(transparent 60%, #EDF8F9 60%);
    line-height: 1.6;
}
.shindan_sp .result-item ul{
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	gap: 5vw;
    margin: calc(80/ 750 * 100vw) 0 0;
}
.shindan_sp .result-item ul li{
	width: 46%;
	text-align: center;
	position: relative;
}
.shindan_sp .result-item ul li p{
	margin-top: 10px;
}
.shindan_sp .result-item ul li img{
	position: relative;
	width: 50%;
}
.shindan_sp .result-item ul li:only-of-type{
	width: 100%;
}
.shindan_sp .result-item ul li:only-of-type img{
	width: 28%;
}
.shindan_sp .result-item ul li .labo{
	position: absolute;
	top: 0;
	right: 0;
	width: 10vw;
	height: 10vw;
	border-radius: 50vw;
	color: #fff;
	display: flex;
	font-size: calc(22/ 750 * 100vw);
	font-weight: bold;
	justify-content: center;
	align-items: center;
}
.shindan_sp .result-item ul li .labo.cool{
	background: #A4D9E0;
}
.shindan_sp .result-item .btn_shindan_detail{
    margin: calc(100 / 750 * 100vw) auto 0;
    width: 85%;
}
.shindan_sp .result-item .btn_shindan_detail a{
	display: block;
	width: 100%;
	background: #6F6363;
    border-radius: 30vw;
	color: #fff;
	text-align: center;
	padding: calc(36 / 750 * 100vw) 0;
	position: relative;
	margin: auto;
	font-size: calc(30/ 750 * 100vw);
}
.shindan_sp .result-item .btn_shindan_detail a:after {
	content: "";
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotateZ(45deg);
	transition: .3s;

}
.shindan_sp .progress{
    position: absolute;
    bottom: 12vw;
    left: 0;
    right: 0;
    text-align: center;
}
.shindan_sp .restart {
    background: #A4D9E1;
    color: #fff;
    margin: 0;
    position: relative;
}
.shindan_sp .restart:before {
	content: "";
	position: absolute;
	top: 0;
	left: 5vw;
	bottom: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotateZ(45deg);
	transition: .3s;
}
.shindan_sp .restart:after {
    content: "";
    position: absolute;
    top: 0;
    left: 5.1vw;
    bottom: 0;
    margin: auto;
    width: 8vw;
    height: 2px; 
    background: #fff;
}
.shindan_sp .fade-in {
	animation: fadeIn 1s ease forwards;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}