@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: #FFFFE4;
    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ここから*/
.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:182px;
    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:131px;
    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:3px solid #B3B3B3;
    margin:70px auto 0;
}

.result_box h2{
    width:100%;
    background:#FF454F;
    color:#fff;
    font-size:2.5em;
    text-align: center;
    font-weight: 800;
}
.result_box h2 span{
    font-size:1.5em;
}
.result_contents{
    width:900px;
    margin:20px auto;
}

.infection_title{
    display: block;
    color:#FF0F0F;
    font-size:3em;
    font-weight: 600;
}
.result_contents .percent_img{
    width:410px;
    margin:20px 0 0;
    float:left;
}
.result_contents .girl_img{
    width:160px;
    float:left;
}
.result_contents p{
    width:260px;
    margin:0 20px;
    padding:10px 20px;
    font-size:1.1em;
    text-align: justify;
    text-justify: inter-ideograph;    
    border:2px solid #B3B3B3;
    border-radius: 10px;
    float:left;
}

.kit_list_contents{
    width:900px;
    background: #E7EFFF;
    padding: 20px;
    margin:25px auto 50px;
}
.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{
    background-image: url("../img/mens_button_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    width:170px;
    height:45px;
    line-height:45px;
    color: #fff;
    font-size:1em;
    font-weight: 500;
    text-align: center;
    margin: 0 10px;
    float:left;
    text-shadow:  #0036BD 1px 1px 10px, #0036BD -1px 1px 10px,
    #0036BD 1px -1px 10px, #0036BD -1px -1px 10px;
}
.woman_btn{
    background-image: url("../img/ladys_button_bg.png");
    text-shadow:  #FF47A7 1px 1px 10px, #FF47A7 -1px 1px 10px,
    #FF47A7 1px -1px 10px, #FF47A7 -1px -1px 10px;
}
.dual_btn{
    background-image: url("../img/ryouyou_button_bg.png");
    text-shadow:  #007900 1px 1px 10px, #007900 -1px 1px 10px,
    #007900 1px -1px 10px, #007900 -1px -1px 10px;
}

.men_btn a,.woman_btn a,.dual_btn a{
    display: block;
    text-decoration: none;
    color:#fff;
}

.men_btn:hover{
    opacity: 0.8;
    border-radius: 5px;
}
.woman_btn:hover{
    opacity: 0.8;
    border-radius: 5px;
}
.dual_btn:hover{
    opacity: 0.8;
    border-radius: 5px;
}
#result_b h2{
    background:#29ABE2;
}

#result_c h2{
    background:#39B54A;
}

#result_d h2{
    background:#F15A24;
}

#result_e h2{
    background:#6D4D84;
}

#result_f h2{
    background:#005EAD;
}

/*------------------------------結果の設定*/
/*----------------------------------------------タブレット*/
@media (min-width: 641px) and (max-width: 999px){
.result_box{
    background: #fff;
    border:3px solid #B3B3B3;
    margin:50px auto 0;
}

.result_box h2{
    width:100%;
    background:#FF454F;
    font-size:2em;
}

.result_contents{
    width:700px;
    margin:20px auto;
}

.infection_title{
    font-size:1.5em;
    margin-left:30px;
}
.result_contents .percent_img{
    width:200px;
    margin:20px 0 0 20px;
}
.result_contents .girl_img{
    width:100px;
}
.result_contents p{
    width:320px;
    margin:-10px 10px 0;
    padding:10px;
    font-size:0.9em;   
}

.kit_list_contents{
    width:660px;
    padding: 20px;
    margin:10px auto 20px;
}
}

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


.result_box h2{
    font-size:6.5vw;
    padding:1.5vw 0;
}
.result_box h2 span{
    font-size:8vw;
}
.result_contents{
    width:100%;
    margin:5vw auto;
}

.infection_title{
    font-size:7vw;
    margin:0 0 0 10vw;
}
.result_contents .percent_img{
    width:70vw;
    margin:3vw 10vw 7vw;
    float:inherit;
}
.result_contents .girl_img{
    width:27vw;
    float:inherit;
    position: absolute;
    top:7vw;
    right:3vw;
}
.result_contents p{
    width:76vw;
    margin:0 auto;
    padding:4vw;
    font-size:4.5vw;   
    border:0.3vw solid #B3B3B3;
    border-radius: 3vw;
    float:inherit;
}

.kit_list_contents{
    width:76vw;
    padding: 4vw;
    margin:5vw auto;
}
.kit_list_contents h3{
    font-size:5vw;
    padding:1vw 0;
}
.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:5vw;
    float:inherit;
}
.kit_btn{
    float:inherit;
}
.men_btn,.woman_btn,.dual_btn,.dual_btn2{
    background-image: url("../img/mens_button_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    width:100%;
    height:18vw;
    line-height:18vw;
    font-size:5vw;
    margin: 3vw auto;
    float:inherit;
    text-shadow:  #0036BD 0.5vw 0.5vw 1vw, #0036BD -0.5vw 0.5vw 1vw,#0036BD 0.5vw -0.5vw 1vw, #0036BD -0.5vw -0.5vw 1vw;
}
.woman_btn{
    background-image: url("../img/ladys_button_bg.png");
    text-shadow:  #FF47A7 0.5vw 0.5vw 1vw, #FF47A7 -0.5vw 0.5vw 1vw,#FF47A7 0.5vw -0.5vw 1vw, #FF47A7 -0.5vw -0.5vw 1vw;
}
.dual_btn{
    background-image: url("../img/ryouyou_button_bg.png");
    text-shadow:  #007900 0.5vw 0.5vw 1vw, #007900 -0.5vw 0.5vw 1vw,#007900 0.5vw -0.5vw 1vw, #007900 -0.5vw -0.5vw 1vw;
}

}


/*------------------------------戻るボタンの設定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;}