@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");
}

#detail h2{
    font-size: 3.4rem;
    line-height: 1;
    font-weight: 500;
    padding-top: 5em;
}
#detail .read{
    font-weight: 500;
    font-size: 2.2rem;
    line-height: 1.8;
    padding: 2em 0 2.5em 0;
}
.box1{}
.box1 ul{
    display: flex;
    justify-content: space-around;
}
.box1 li{
    width: 22%;
    padding: 3em 2em 2em 2em;
    position: relative;
    border-radius: 2em;
}
.box1 li:nth-child(1){ border: 0.3em solid #5ec921;}
.box1 li:nth-child(2){ border: 0.3em solid #00aee3;}
.box1 li:nth-child(3){ border: 0.3em solid #1270a3;}
.box1 li:nth-child(4){ border: 0.3em solid #423a3e;}
.box1 li .icon{
    text-align: center;
    width: 5em;
    margin: 0 auto;
}
.box1 li .title{
    font-size: 2.2rem;
    font-weight: 500;
    padding: 1.5em 0 1.2em 0;
}
.box1 li .txt{
    text-align: justify;
}
.box1 li .arrow{
    position: absolute;
    left: -0.3em;
    top: 42%;
    width: 1.5em;
}
.box1 .line{
    padding: 2em 2em 4em 0;
}

.innerobx{
    background-repeat: no-repeat;
    background-size: auto 100%;
}
.innerobx .container{
    text-align: justify;
    position: relative;
}
.innerobx h3{
    font-size: 2.6rem;
    line-height: 1.3;
    font-weight: 500;
    padding-bottom: 1.2em;
}
.innerobx p{
    text-align: justify;
}
.innerobx a{
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
    display: inline-block;
    padding: 0.8em 2em;
    margin-top: 3em;
}
.innerobx a:hover{
    background-color: #fff;
    color: #000;
}
.inner1{
    background-image: url("img/image1.png");
    background-position: 75% 50%;
}
.inner1 .txtbox{
    padding: 2em 55% 9em 0;
}
.inner2{}
.inner2 .txtbox{
    padding: 7em 0 5em 55%;
}
.inner2 .images{
    position: absolute;
    width: 60%;
    left: -5em;
    bottom: 2em;
    z-index: -1;
}
.inner3{
    background-image: url("img/image3.png");
    background-position: 65% 50%;
}
.inner3 .txtbox{
    padding: 5em 55% 1em 0;
}


@media only screen and (max-width: 767px) {
    #mainimage h2 {
    top: 35%;
}
#detail h2{
    font-size: 2.8rem;
    line-height: 1;
    padding-top: 3em;
}
#detail .read{
    font-size: 2rem;
    line-height: 1.8;
    padding: 2em 0 2.5em 0;
}
.box1{}
.box1 ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.box1 li{
    width: 48%;
    padding: 2em 1em 1em 1em;
    border-radius: 1em;
    margin-bottom: 1.5em;
}
.box1 li:nth-child(1){ border: 0.2em solid #5ec921;}
.box1 li:nth-child(2){ border: 0.2em solid #00aee3;}
.box1 li:nth-child(3){ border: 0.2em solid #1270a3;}
.box1 li:nth-child(4){ border: 0.2em solid #423a3e;}
.box1 li .icon{
    width: 4em;
}
.box1 li .title{
    font-size: 2rem;
    padding: 1em 0 1em 0;
}
.box1 li .txt{
    font-size: 1.6rem;
}
.box1 li .arrow{
    left: -0.2em;
    top: 6.6em;
    width: 1em;
}
.box1 .line{
    padding: 0 2em 4em 0;
}

.innerobx h3{
    font-size: 2.2rem;
    line-height: 1.3;
    padding-bottom: 1.2em;
}
.innerobx p{
}
.innerobx a{
    margin-top: 2em;
    width: 100%;
    text-align: center;
}
.inner1{
    background-size: 120% auto;
    background-position: 20% 100%;
}
.inner1 .txtbox{
    padding: 0 0 16em 0;
}
.inner2{}
.inner2 .txtbox{
    padding: 4em 0 14em 0;
}
.inner2 .images{
    width: 100%;
    left: 0;
    bottom: 0;
}
.inner3{
    background-size: 90% auto;
    background-position: 100% 100%;
}
.inner3 .txtbox{
    padding: 5em 0 13em 0;
}
    
}