@charset "UTF-8";
/* CSS Document */

#mainimage{
background-image:url(img/mainimage.jpg);
}

#chart .pop{
left:-20px;
bottom:100px;
}

.typea{
left:29px;
top:339px;
}
.typeb{
left:235px;
top:339px;
}
.typec{
left:235px;
bottom:0;
}
.typed{
left:440px;
bottom:0;
}
.typee{
right:440px;
top:339px;
}
.typef{
right:440px;
bottom:0;
}
.typeg{
right:235px;
bottom:0;
}
.typeh{
right:29px;
bottom:202px;
}

.box_blue .title, .detail_box .blue{color:#2d64aa;}
.box_red .title, .detail_box .red{color:#af1414;}


#list .txtbox{
padding-right:9rem;}

#list .icon{
right:70px;
top:6rem;
}

#gripchart{
padding:9rem 0 10rem 0;
}
#gripchart .title img{
height:5.5rem;
}
#gripchart h2{
font-size:4rem;
line-height:1;
padding:1rem 0 5rem 0;
}


.detail_box .btn_box a.blue:hover{
background-color:#2d64aa;
}
.detail_box .btn_box a.red:hover{
background-color:#af1414;
}

#pagenavi{
background-color:rgba(150,150,150,0.1);
}
#pagenavi li a.blue{
border:2px solid #2d64aa;
color:#2d64aa;
}
#pagenavi li a.blue:hover{
background-color:#2d64aa;
color:#fff;
}
#pagenavi li a.red{
border:2px solid #af1414;
color:#af1414;
}
#pagenavi li a.red:hover{
background-color:#af1414;
color:#fff;
}


@media only screen and (max-width: 767px) {


#chart .anc_blue a,#chart .anc_red a{
width:5.5rem;
}

#chart .anc_blue a:before,#chart .anc_red a:before {
    content: "";
    display: block;
    padding-top: 203%;
}

#chart .pop{
left:-1rem;
bottom:10%;
width:12rem;
}

.typea{
    left: 0;
    top: 28.7%;
}
.typeb{
left:22%;
top:28.7%;
}
.typec{
    left: 0;
bottom:auto;
top:58.8%;
}
.typed{
left:22%;
bottom:auto;
top:58.8%;
}
.typee{
right:22%;
top:44.2%;
}
.typef{
right:44.3%;
bottom:0;
}
.typeg{
right:22%;
bottom:0;
}
.typeh{
right:0;
bottom:13.9%;
}


#list .txtbox{
padding-right:7rem;}
#list .icon{
right:-1rem;
top:4rem;
}
#list .icon img{
width:8rem;
}

#gripchart{
padding:9rem 0 10rem 0;
}
#gripchart .title{}
#gripchart h2{
font-size:2.4rem;
}

#detail_box .left img{
max-width:70%;
margin:0 auto;
}

.chartbox{
position:relative;
}
.chartbox .txt.sp{
display:block;
position:absolute;
border:1px solid #af1414;
border-radius:50%;
right:0;
bottom:1rem;
width:47%;
}
.chartbox .txt p{
display:block;
text-align:center;
font-size:1rem;
line-height:1.5;
position:absolute;
width:100%;
left:0;
right:0;
top:50%;
  -ms-transform: translateY(-50%);
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
}
.chartbox .txt:before {
    content: "";
    display: block;
    padding-top: 100%;
}
}