@charset "utf-8";
body {
    font-size: 16px;
    font-family: "Roboto", "Noto Sans JP","Droid Sans","Verdana",  "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "游ゴシック", "YuGothic",sans-serif;
    overflow-x: hidden;
}


/*------------------------------全体の設定PCここから*/
section{
    width:1000px;
    margin: 0 auto;
}

/*------------------------------全体の設定*/
/*----------------------------------------------タブレット*/
@media (min-width: 641px) and (max-width: 999px){
    section{
    width:700px;
    margin: 0 auto;
}
    
}

/*------------------------------全体の設定*/
/*----------------------------------------------スマホ*/
@media (max-width: 640px) {
section{
    width:100vw;
    margin: 0 auto;
}
}






/*------------------------------ヘッダーの設定PCここから*/
header{
    width:100vw;
    background: #E7EFFF;
    padding:20px 20px 0;
}
.header_wrap{
    width:1000px;
    margin:0 auto;
}
.header_box{
    width:760px;
    margin:15px 0 0;
    float:left;
}
header h1{
    background: #000;
    color:#fff;
    font-size: 1.4em;
    font-weight: 600;
    text-align: center;
    padding:2px;
    border-radius: 30px;
}
.chart_mv_sp_img{
    display: none;
}
.chart_mv_img{
    display: block;
}
.chart_girl_img{
    width:200px;
    float:left;
}

/*------------------------------ヘッダーの設定*/
/*----------------------------------------------タブレット*/
@media (min-width: 641px) and (max-width: 999px){
header{
    padding:20px 20px 0;
}
.header_wrap{
    width:700px;
}
.header_box{
    width:550px;
    margin:20px 0 0;
    float:left;
}
header h1{
    font-size: 1.2em;
}
.chart_girl_img{
    width:150px;
    float:left;
}
}

/*------------------------------ヘッダーの設定*/
/*----------------------------------------------スマホ*/
@media (max-width: 640px) {
header{
    width:100vw;
    padding:0 0;
}
.header_wrap{
    width:100vw;
    margin:0 auto;
}
.header_box{
    width:54vw;
    margin:3vw 0 0 3vw;
}
header h1{
    width:96vw;
    font-size: 3.5vw;
    font-weight: 500;
    padding:0.5vw 0;
    margin:0 2vw;
    border-radius:10vw;
}
.chart_mv_sp_img{
    display: block;
}
.chart_mv_img{
    display: none;
}    
.chart_girl_img{
    width:39vw;
    margin:0 3vw 0 0;
    float:left;
}
  
}

/*------------------------------チャート画像の設定PCここから*/
.chart_img{
    width:1000px;
    text-align: center;
    margin:0 auto 30px;
}

.chart_img img{
    object-fit: cover;
}
/*------------------------------チャート画像の設定*/
/*----------------------------------------------タブレット*/
@media (min-width: 641px) and (max-width: 999px){
.chart_img{
    width:700px;
    margin:0 auto 20px;
}
}

/*------------------------------チャート画像の設定*/
/*----------------------------------------------スマホ*/
@media (max-width: 640px) {
.chart_img{
    width:90vw;
    margin:0 auto 3vw;
}
}



/*------------------------------ボタンの設定PCここから*/
.wrapper{
    background-image: url("../img/chart_bg.jpg");
    background-repeat:repeat-y;
    background-size: contain;
    height:100%;
    padding:50px 0;
}

#button .button_text,#back .button_text{
    width:1000px;
    margin:0 auto 20px;
    text-align: center;
}
.button_text p{
    color:#4B4B4B;
    font-size: 2em;
    font-weight: 600;
    padding:0 60px;
    display: inline-block;
    position: relative;
}

.button_text p:before {
	position: absolute;
	display: inline-block;
	content: '';
	top: 50%;
	width: 44px;
	height: 3px;
	background-color: #4B4B4B;
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
}
.button_text p:after {
	position: absolute;
	display: inline-block;
	content: '';
	top: 50%;
	width: 44px;
	height: 3px;
	background-color: #4B4B4B;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
.button_text p:before {
	left:0;
}
.button_text p:after {
	right: 0;
}



#button li{
    width:150px;
    color:#fff;
    text-align: center;
    font-size:1.5em;
    font-weight: 700;
    border-radius: 10px;
    margin:10px;
    padding:10px 0;
    box-shadow: 0 0 0 3px #fff inset;
    float:left;
}
#button li:nth-child(1){
    margin:10px 10px 10px 0;
    background: #FF454F;
    border:solid 3px #FF454F;
}
#button li:nth-child(2){
    background: #29ABE2;
    border:solid 3px #29ABE2;
}
#button li:nth-child(3){
    background: #39B54A;
    border:solid 3px #39B54A;
}
#button li:nth-child(4){
    background: #F15A24;
    border:solid 3px #F15A24;
}
#button li:nth-child(5){
    background: #6D4D84;
    border:solid 3px #6D4D84;
}
#button li:nth-child(6){
    margin:10px 0 10px 10px;
    background: #005EAD;
    border:solid 3px #005EAD;    
}
#button li span{
    font-size:2em;
}

#button li:hover{
    opacity: 0.7;
}

#button li a{
    display: block;
    text-decoration: none;
    color:#fff;
}


/*------------------------------ボタンの設定*/
/*----------------------------------------------タブレット*/
@media (min-width: 641px) and (max-width: 999px){
.wrapper{
    padding:30px 0;
}

#button .button_text,#back .button_text{
    width:700px;
}
.button_text p{
    font-size: 1.5em;
}


#button li{
    width:108px;
    font-size:1.2em;
    margin:5px;
    padding:10px 0;
}
#button li:nth-child(1){
    margin:5px 5px 5px 0;
}
#button li:nth-child(6){
    margin:5px 0 5px 5px;  
}
#button li span{
    display: block;
    font-size:2.5em;
    line-height:1em;
}

}

/*------------------------------ボタンの設定*/
/*----------------------------------------------スマホ*/
@media (max-width: 640px) {
.wrapper{
    background-image: url("../img/chart_bg_sp.jpg");
    height:100%;
    padding:5vw 0;
}

#button .button_text,#back .button_text{
    width:100vw;
    margin:0 auto 5vw;
}
.button_text p{
    font-size: 5vw;
    padding:0 11vw;
}

.button_text p:before {
	top: 50%;
	width: 12vw;
	height:0.5vw;
	-webkit-transform: rotate(65deg);
	transform: rotate(65deg);
}
.button_text p:after {
	top: 50%;
	width: 12vw;
	height:0.5vw;
	-webkit-transform: rotate(-65deg);
	transform: rotate(-65deg);
}




#button li{
    width:26vw;
    height:26vw;
    font-size:5vw;
    border-radius: 5vw;
    margin:2vw;
    padding:4vw 0 0;
    box-shadow: 0 0 0 1vw #fff inset;
}
#button li:nth-child(1){
    margin:2vw 2vw 2vw 7vw;
    border:solid 1vw #FF454F;
}
#button li:nth-child(2){
    border:solid 1vw #29ABE2;
}
#button li:nth-child(3){
    margin:2vw 7vw 2vw 2vw;
    border:solid 1vw #39B54A;
}
#button li:nth-child(4){
    margin:2vw 2vw 2vw 7vw;
    border:solid 1vw #F15A24;
}
#button li:nth-child(5){
    border:solid 1vw #6D4D84;
}
#button li:nth-child(6){
    margin:2vw 7vw 2vw 2vw;
    border:solid 1vw #005EAD;    
}
#button li span{
    display: block;
    font-size:12vw;
    line-height:0.8em;
}
  
}



/*------------------------------結果の設定PCここから*/

.result_box{
    background: #fff;
    border:5px solid #82BFE5;
    border-radius: 20px;
    margin:70px auto 0;
    padding:25px;
}

.result_box img{
    width:130px;
    margin:0 0 0 10px;
    float:left;
}
.result_box h2{
    width:100px;
    color:#FF454F;
    font-size:2em;
    font-weight: 800;
    line-height:2.3em;
    margin:20px 30px 0 0;
    float:left;
}
.result_box h2 span{
    display: block;
    font-size:4.3em;
}
.result_contents{
    width:800px;
    float:left;
}

.infection_title{
    display: block;
    font-size:1.3em;
    font-weight: 600;
}
.infection_list{
    margin:10px auto;
}
.infection_list li{
    width:255px;
    height:40px;
    line-height:40px;
    background: #FF454F;
    color:#fff;
    font-size:1.2em;
    font-weight: 600;
    margin:5px;
    padding:0 0 0 10px;
    float:left;
}

.infection_list li:hover{
    opacity: 0.8;
}
.infection_list li a{
    text-decoration: none;
    display: block;
    color:#fff;
}
.infection_list li i{
    float:right;
    margin:10px;
}
.result_contents p{
    font-size:1.1em;
    text-align: justify;
    text-justify: inter-ideograph;
}

.kit_list_contents{
    background: #E7EFFF;
    padding: 20px;
    margin:25px 0 0;
}
.kit_list_contents h3{
    background: #2779B4;
    color:#fff;
    font-size:1.2em;
    text-align: center;
    padding:3px;
}
.kit_list li{
    margin:15px 0;
    padding:0 0 15px;
    border-bottom:dotted 2px #4D4D4D;
}
.kit_list li span{
    display: block;
    line-height:42px;
    font-size:1.3em;
    font-weight: 600;
    float:left;
}
.kit_btn{
    float:right;
}
.men_btn,.woman_btn,.dual_btn,.dual_btn2{
    width:200px;
    height:45px;
    line-height:42px;
    background: #fff;
    font-size:1em;
    font-weight: 500;
    text-align: center;
    border:solid 3px #5789C0;
    border-radius: 50px;
    margin: 0 10px;
    float:left;
}
.woman_btn{
    border:solid 3px #E263A1;
}
.dual_btn{
    width:420px;
    border:solid 3px #5BC056;
}
.dual_btn2{
    width:420px;
    border:solid 3px #5789C0;
}
.men_btn a,.dual_btn2 a{
    display: block;
    text-decoration: none;
    color:#094C98;
}
.woman_btn a{
    display: block;
    text-decoration: none;
    color:#E52784;
}
.dual_btn a{
    display: block;
    text-decoration: none;
    color:#076A0F;
}
.men_btn:hover,.dual_btn2:hover{
    background: #BCD4EF;
    border:solid 3px #094C98;
}
.woman_btn:hover{
    background:#F1BAD5;
    border:solid 3px #E52784;
}
.dual_btn:hover{
    background:#D4FFD4;
    border:solid 3px #076A0F;
}
#result_b h2{
    color:#29ABE2;
}

#result_b .infection_list li{
    background: #29ABE2;
}

.result_box .b_girl_img,.result_box .c_girl_img{
    width:150px;
    margin:0 0 0 10px;
    float:left;
}

#result_c h2{
    color:#39B54A;
}

#result_c .infection_list li{
    background: #39B54A;
}

#result_d h2{
    color:#F15A24;
}

#result_d .infection_list li{
    background: #F15A24;
}

#result_e h2{
    color:#6D4D84;
}

#result_e .infection_list li{
    background: #6D4D84;
}

#result_f h2{
    color:#005EAD;
}

#result_f .infection_list li{
    background: #005EAD;
}

/*------------------------------結果の設定*/
/*----------------------------------------------タブレット*/
@media (min-width: 641px) and (max-width: 999px){
.result_box{
    margin:50px auto 0;
    padding:25px;
}

.result_box img{
    width:100px;
    margin:0 0 0 10px;
}
.result_box h2{
    width:70px;
    font-size:1.3em;
    line-height:2.3em;
    margin:20px 10px 0 0;
}
.result_box h2 span{
    font-size:4.5em;
}
.result_contents{
    width:540px;
}

.infection_title{
    font-size:1.2em;
}
.infection_list{
    margin:10px auto;
}
.infection_list li{
    width:170px;
    height:35px;
    line-height:35px;
    font-size:0.9em;
    font-weight: 500;
}
.result_contents p{
    font-size:1em;
}

.kit_list_contents h3{
    font-size:1em;
}
.kit_list li{
    margin:10px 0;
    padding:0 0 10px;
    border-bottom:dotted 1px #4D4D4D;
}
.kit_list li span{
    line-height:43px;
    font-size:1.1em;
}
.men_btn,.woman_btn,.dual_btn,.dual_btn2{
    width:200px;
    height:45px;
    line-height:43px;
    border:solid 2px #5789C0;
}
.woman_btn{
    border:solid 2px #E263A1;
}
.dual_btn{
    width:200px;
    border:solid 2px #5BC056;
}
.dual_btn2{
    width:200px;
    border:solid 2px #5789C0;
}

.men_btn:hover,.dual_btn2:hover{
    background: #BCD4EF;
    border:solid 2px #094C98;
}
.woman_btn:hover{
    background:#F1BAD5;
    border:solid 2px #E52784;
}
.dual_btn:hover{
    background:#D4FFD4;
    border:solid 2px #076A0F;
}

.result_box .b_girl_img,.result_box .c_girl_img{
    width:110px;
    margin:0 0;
}

}

/*------------------------------結果の設定*/
/*----------------------------------------------スマホ*/
@media (max-width: 640px) {
.result_box{
    width:86vw;
    border:0.5vw solid #82BFE5;
    border-radius: 5vw;
    margin:5vw auto 0;
    padding: 5vw;
    position: relative;
}

.result_box img{
    width:23vw;
    margin:0 0;
    float:inherit;
    position: absolute;
    top:-3vw;
    right:3vw;
}
.result_box h2{
    width:100%;
    font-size:7vw;
    line-height:auto;
    margin:0 auto;
    float:inherit;
}
.result_box h2 span{
    display:inline;
    font-size:15vw;
}
.result_contents{
    width:100%;
    float:inherit;
}

.infection_title{
    display: block;
    font-size:4.5vw;
    margin:0 0;
}
.infection_list{
    margin:4vw auto;
}
.infection_list li{
    width:35vw;
    height:9vw;
    line-height:9vw;
    font-size:3.5vw;
    font-weight: 500;
    padding:0 0 0 2vw;
    margin:1vw;
    float:left;
}
.infection_list li i{
    margin:3vw 2vw 3vw 0;
}  
.result_contents p{
    font-size:4vw;
}

.kit_list_contents{
    padding:4vw;
    margin:5vw 0 0;
}
.kit_list_contents h3{
    font-size:4.5vw;
    padding:0.5vw;
}
.kit_list li{
    margin:5vw 0;
    padding:0 0 3vw;
    border-bottom:dotted 0.5vw #4D4D4D;
}
.kit_list li span{
    line-height:1.5em;
    font-size:4.5vw;
    float:inherit;
}
.kit_btn{
    float:inherit;
}
.men_btn,.woman_btn,.dual_btn,.dual_btn2{
    width:100%;
    height:13vw;
    line-height:12vw;
    font-size:4vw;
    border:solid 0.5vw #5789C0;
    border-radius: 50vw;
    margin: 3vw auto;
    float:inherit;
}
.woman_btn{
    border:solid 0.5vw #E263A1;
}
.dual_btn{
    width:100%;
    border:solid 0.5vw #5BC056;
}
.dual_btn2{
    width:100%;
    border:solid 0.5vw #5789C0;
}

.men_btn:hover,.dual_btn2:hover{
    border:solid 0.5vw #094C98;
}
.woman_btn:hover{
    border:solid 0.5vw #E52784;
}
.dual_btn:hover{
    border:solid 0.5vw #076A0F;
}
.result_box .b_girl_img,.result_box .c_girl_img{
    width:25vw;
    margin:0 0;
    float:inherit;
    position: absolute;
    top:-3vw;
    right:3vw;
}

   
}


/*------------------------------戻るボタンの設定PCここから*/
#back{
    padding:150px 0 50px;
}


.back_btn{
    background-image: url("../img/button_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    width:300px;
    height:80px;
    line-height:80px;
    text-align: center;
    font-size:1.5em;
    font-weight: 700;
    font-family: 'Kosugi Maru', sans-serif;
    color:#fff;
    text-shadow:#D6475C 1px 1px 10px, #D6475C -1px 1px 10px,
    #D6475C 1px -1px 10px, #D6475C -1px -1px 10px;
    margin:50px auto;
}




/*------------------------------戻るボタンの設定*/
/*----------------------------------------------タブレット*/
@media (min-width: 641px) and (max-width: 999px){
#back{
    padding:50px 0;
}


.back_btn{
    font-size:1.2em;
    margin:20px auto;
}
    
}

/*------------------------------戻るボタンの設定*/
/*----------------------------------------------スマホ*/
@media (max-width: 640px) {
#back{
    padding:10vw 0;
}


.back_btn{
    background-image: url("../img/button_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    width:80vw;
    height:21vw;
    line-height:21vw;
    font-size:5vw;
    text-shadow:#D6475C 1vw 1vw 2vw, #D6475C -1vw 1vw 2vw,
    #D6475C 1vw -1vw 2vw, #D6475C -1vw -1vw 2vw;
    margin:5vw auto;
}    
}



/*------------------------------フッターの設定PCここから*/
footer{
    width:1000px;
    margin: 0 auto;
}
footer img{
    width:300px;
    margin:30px 350px;
}
.foot_nav{
    width:630px;
    margin:0 auto;
}

.foot_nav li{
    width:200px;
    height:40px;
    line-height:40px;
    font-size:0.7em;
    text-align: center;
    border:1px solid #999;
    margin:5px;
    float:left;
}

.foot_nav li a{
    display: block;
    text-decoration: none;
    color:#000;
}

.small_box{
    margin:0 auto;
}
small{
    display: block;
    font-size:0.6em;
    margin:15px 0;
    text-align: center;
}







/*------------------------------フッターの設定*/
/*----------------------------------------------タブレット*/
@media (min-width: 641px) and (max-width: 999px){
footer{
    width:700px;
}
footer img{
    width:200px;
    margin:30px 250px;
}
}

/*------------------------------フッターの設定*/
/*----------------------------------------------スマホ*/
@media (max-width: 640px) {
footer{
    width:100vw;
}
footer img{
    width:60vw;
    margin:10vw 20vw 5vw;
}
.foot_nav{
    width:80vw;
    margin:0 auto;
}

.foot_nav li{
    width:100%;
    height:10vw;
    line-height:10vw;
    font-size:3vw;
    border:0.2vw solid #999;
    margin:1vw 0;
    float:inherit;
}

small{
    font-size:2.5vw;
    margin:5vw 0;
}
    
}

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