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

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

#webchart .title img {
    height: auto;
	margin-bottom:2rem;
}


.box_purple .title,.detail_box .purple{color:#784691;}


#list .title {
    font-size: 2.5rem;
    line-height: 1.3;
	font-weight:bold;
}

#list .txtbox{
padding-right:19rem;}
#list .icon{
right:35px;
top:15rem;
}

.detail_box {
    padding: 9rem 0 5.5rem 0;
}
.detail_box .titlebox {
    font-size: 2.5rem;
	font-weight:bold;
    line-height: 1.3;
    position: relative;
}
.detail_box .titlebox::before, .detail_box .titlebox::after {
    background-image: url(img/detail_titleline.png);
    width: 251px;
}
.detail_box .indent{
text-indent:-1em;
padding-left:1em;
font-size:1.3rem;
margin-top:-0.5rem;
}
.detail_box .d_box h3 sup{
font-size:45%;
}
sup,
sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;  
}
sup {
    bottom: 2ex;
}
sub {
    top: .5ex;
}

.detail_box .left{
margin-left:-6rem;
padding-top: 7rem;
}

.wihte_arrow{
background-image:url(img/footer_line.png);
background-repeat:repeat-x;
background-position:50% 100%;
height:72px;
}

.detail_box .btn_box a.purple:hover{
background-color:#784691;
}

#pagenavi{
background-color:#fff;
}
#pagenavi ul {
    text-align: center;
	margin-left:0;
}
#pagenavi li a.purple{
border:2px solid #784691;
color:#784691;
}
#pagenavi li a.purple:hover{
background-color:#784691;
color:#fff;
}

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

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



#list .title {
    font-size: 2rem;
    line-height: 1.3;
	font-weight:bold;
}

#list .txtbox{
padding-right:0;
}
#list .txtbox .txt{
padding:0 3.5rem 3.5rem 3.5rem; }
#list .txtbox a{
width:75%;
}
#list .txtbox .image{
padding:2rem 30% 0 30%;
display:block;
}
#list .icon{
display:none;
}

.detail_box {
    padding: 3.5rem 0 5.5rem 0;
}

.detail_box .titlebox {
    font-size: 1.8rem;
    line-height: 1.3;
}
.detail_box .titlebox::before, .detail_box .titlebox::after {
    width: 5rem;
    background-position: 90% 50%;
}

.detail_box .left {
    margin-left: 0;
    padding-top: 0;
	float:none;
}
.detail_box .indent{
margin-top:0;
}

.chartbox img{
margin-bottom:1rem;
}

.wihte_arrow{
height:4rem;
background-size:auto 4rem;
}

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

}