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

#header li.navi04{
border-bottom:2px solid #fff;
}
#header li.navi04.active{
border-bottom:2px solid #000;
}

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


.box1{
    display: flex;
justify-content:space-between;
    margin-bottom: 6em;
}
.box h4{
font-weight:500;
font-size:2.2rem;
line-height:1.2;
padding-bottom:1.5em;
}

.box1 .innerbox{
    order: 2;
padding:0 0 1.5em 0;
text-align:justify;
    width: 57%;
}
.box1 h3{
    font-size: 3.4rem;
    line-height: 1.3;
    font-weight: 500;
    padding: 1em 0 0.8em 0;
}
.box1 .read{
}
.box1 .image{
width:35%;
}
.box1 .list{
font-weight:500;
}
.box1 .list p{
border-bottom:1px solid #b0b0b0;
padding:0.8em 0;
}
.box1 .list .title{
font-size:2rem;
padding:3em 0 0.5em 0;
text-indent:-0.5em;
border-bottom:none;
}

.box2{
    background-color: #fbfbfb;
    padding: 7em 0 4em 0;
}
.box2 .innerbox{
display:flex;
justify-content:space-between;
}
.box2 .txt{
width:46%;
text-align:justify;
padding-bottom:4em;
}
.box2 h4{
padding-top:1em;
}
.box2 .image{
width:45%;
text-align:right;
padding-bottom:4em;
}
.box2 .image p{
font-size:1.5rem;
padding-top:0.5em;
}


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


.box1{
    display: block;
}
.box h4{
font-size:2.2rem;
line-height:1.2;
padding-bottom:1.5em;
}

.box1 .inner{
padding:0 0 1.5em 0;
    width: 100%;
}
.box1 h3{
    font-size: 2.8rem;
    line-height: 1.3;
    padding: 1em 0 0.8em 0;
}
.box1 .image{
width:100%;
}
.box1 .list{
}
.box1 .list p{
padding:1em 0;
}
.box1 .list .title{
}



.box2{
    padding: 7em 0 4em 0;
}
.box2 .inner{
display:block;
}
.box2 .txt{
width:100%;
padding-bottom:3em;
}
.box2 h4{
padding-top:0;
}
.box2 .image{
width:100%;
text-align:right;
padding-bottom:5em;
}

}