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

body {
color: #000;
font-weight:500;
font-style: normal;
letter-spacing: 0.05em;
line-height:1.7;
position: relative;
 -webkit-text-size-adjust:100%;
}

h1 {
font-family:"Kaisei Decol";
font-weight:600;
font-size:60px;
margin: 30px 0 0 0;
padding: 0;
letter-spacing:8px;
text-decoration: none;
text-align:center;
}

h1 img {
width:150px;
display:inline-block;
vertical-align:middle;
margin:0 0 20px 0;
}

h1 span {
font-size:40px;
display:inline-block;
margin:0 0 0 0;
padding:0;
}

article.blog a {
 width:100%;
}

article.blog {
width:90%;
max-width:1200px;
margin:auto;
}

article.blog .blog_container {
gap: 30px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
flex-wrap:wrap;
}

article.blog div.blog_article {
 width:calc(25% - 20px);
}

article.blog div.blog_article a {
text-decoration:none;
 width:calc(25% - 20px);
 border-radius:20px;
 box-shadow: rgba(17, 17, 26, 0.02) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;

width:calc(100% - 25px);
color:#444;
font-size:14px;
line-height:1.5;
display:block;
padding:15px 15px 25px;
}

.blog_title {
background:#fafafa;
padding:10px;
margin:0 0 10px 0;
font-family:"Kaisei Decol";
font-weight:700;
font-size:18px;
line-height:1.2;
}

.blog_title span.blog_date {
font-size:14px;
font-family:"Zen Maru Gothic";
font-weight:700;
}


@media screen and (max-width:1300px) {
article.blog {
width:90%;
max-width:90%;
margin:auto;
}
}

@media screen and (max-width:1025px) {
article.blog {
max-width:100%;}
article.blog div.blog_article {
 width:calc(33.333% - 20px);}
}

@media screen and (max-width:840px) {
article.blog div.blog_article {
 width:calc(50% - 20px);}
}

@media screen and (max-width:767px) {
article.blog div.blog_article {
 width:calc(100%);}
}