@charset "utf-8";

#hero{
padding: 150px 50px;
max-width: calc(1600px + (50vw - 800px));
width: 100vw;
margin:0 0 50px auto;
background: linear-gradient( 90deg, rgba(208, 247, 235, 1) 0%, rgba(255, 233, 195, 1) 100% );
}

#cate{
max-width:1600px;
width: 90vw;
margin: 0 auto 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#main{
max-width:1200px;
width: 100%;
}
#main .all{
font-size: 1.88em;
margin: 0 0 30px 0;
}
#main .all strong{
font-size: 1.33em;
}
#main .clist{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#main .cbox{
max-width: 370px;
width: 48%;
margin: 0 0 30px 0;
}
#main .cbox figure{
border-radius: 0 30px;
overflow: hidden;
}
#main .cbox .date{
display:flex;
justify-content: space-between;
font-size: 0.8em;
}
#main .cbox .date span{
background: #000;
color: #fff;
font-weight: bold;
padding: 5px;
}

#main .ebox .ttl{
margin: 0 0 2em 0;
}
#main .ebox .ttl h2{
font-size: 2.25em;
}
#main .ebox .ttl span{
background: #000;
color: #fff;
font-weight: bold;
padding: 0 5px;
}

#main .ebox figure{
display: table;
margin: 30px auto;
border-radius: 0 30px;
overflow: hidden;
}


.ebody p{
margin: 0 0 2em 0;
}
.ebody p img{
margin: 0 0 1em 0;
}

.ebody h2{
background: #E6F8EF;
font-weight: bold;
font-size: 1.88em;
padding: 0.5em;
margin: 0 0 1em 0;
}
.ebody h3{
font-size: 1.5em;
font-weight: bold;
border-bottom: #1DB687 solid 2px;
padding: 0 0 0.5em 0;
margin: 0 0 1em 0;
}
.ebody h4{
font-size: 1.13em;
font-weight: bold;
margin: 0 0 1em 0;
}

.ebody a{
color: #1DB687;
}

#main .ebox + ul {
display: flex;
justify-content:space-between;
}
#main .ebox + ul li{
width: 280px;
}
#main .ebox + ul li a{
border-radius: 20px;
border: #1DB687 solid 1px;
display: block;
background: #fff;
padding: 20px;
text-align: center;
font-size: 1.38em;
font-weight: bold;
position: relative;
}
#main .ebox + ul li.prev a:before{
content: "←";
color: #1DB687;
position: absolute;
left: 20px;
top: 50%;
transform: translate(0,-50%);
}
#main .ebox + ul li.next a:after{
content: "→";
color: #1DB687;
position: absolute;
right: 20px;
top: 50%;
transform: translate(0,-50%);
}




#side{
width:340px;
}
#side p{
color: #1DB687;
font-size: 1.8em;
}
#side li{
border-bottom: #1DB687 solid 1px;

}
#side li a{
display: block;
padding: 20px 0;
position: relative;
}
#side li a:after{
content: "→";
color: #1DB687;
position: absolute;
top: 50%;
right: 0;
transform: translate(0,-50%);
}



@media (max-width: 768px) {

#hero{
padding: 10vw 5vw;
margin:0 0 10vw auto;
}

#cate{
margin: 0 auto 10vw auto;
}

#main{
margin:0 0 10vw 0; 
}
#main .all{
font-size: 1.5em;
margin: 0 0 5vw 0;
}
#main .cbox{
margin: 0 0 5vw 0;
}


#main .ebox .ttl h2{
font-size: 2.25em;
}
#main .ebox .ttl span{
background: #000;
color: #fff;
font-weight: bold;
padding: 0 5px;
}

#main .ebox figure{
display: table;
margin: 30px auto;
border-radius: 0 30px;
overflow: hidden;
}


.ebody p{
margin: 0 0 2em 0;
}
.ebody p img{
margin: 0 0 1em 0;
}

.ebody h2{
font-size: 1.35em;
}
.ebody h3{
font-size: 1.13em;
}
.ebody h4{
font-size: 1em;
}
#main .ebox + ul {
flex-wrap: wrap;
justify-content: center;
}
#main .ebox + ul li{
max-width: 500px;
width: 80vw;
margin: 0 0 2vw 0;
}
#main .ebox + ul li a{
padding: 3vw 2vw;
font-size: 1.13em;
}
#main .ebox + ul li.prev a:before{
left: 2vw;
}
#main .ebox + ul li.next a:after{
right: 2vw;
}




#side{
width: 100%;
margin: 0 0 10vw 0;
}
#side li a{
padding: 3vw 0;
}



}