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


/*#blog*/
#blog {
    max-width: 1245px;
    margin: auto;
    color: #333;
}

.blog-grid-box {
    display: grid;
    gap: 2em;
    grid-template-columns: 900px 1fr;
}

.blog-left {
	overflow: hidden;
}

.blog-main {
    width: 100%;
}
.blog-main > figure {
    width: 100%;
    aspect-ratio: 4/1;
    overflow: hidden;
}
.blog-main > figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-main .article {
    padding: 1em;
    background: #fff;
    margin: 1em 0;
}
.blog-main .blog-t {
    margin: 0.5em 0 1em;
    font-weight: bold;
    font-size: 3em;
}
.blog-main .update {
    font-size: 0.5em;
    margin-top: 0.5em;
    color: var(--dark-gray);
}
.blog-main .main-text{}
.blog-main .main-text p {
    line-height: 1.7em;
    font-size: 1.2em;
}
.blog-main .main-text h1 {
    text-align: left;
    font-size: 2em;
    font-weight: bold;
}
.blog-main .main-text h2 {
    text-align: left;
    font-size: 1.6em;
    color: #333;
}
.blog-main .main-text img {
    display: block;
    width: 68%;
    aspect-ratio: 3/2;
    object-fit: cover;
    margin: 2em auto;
}

.blog-list {
    padding: 1em;
    margin: 1em auto;
}
.blog-list .list-title {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 1em;
}
.blog-list ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,280px);
    gap: 1em;
}
.blog-list li {
    width: 100%;
}
.blog-list a {
    display: block;
    height: 100%;
    overflow: hidden;
}
.blog-list figure {
    width: 100%;
    aspect-ratio: 3/2;
    position: relative;
}
.blog-list figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-list figure figcaption {
    position: absolute;
    bottom: 0;
    background: #00000075;
    width: 100%;
    color: #fff;
    padding: 0.2em 1em;
}
.blog-list .article-title {
    background: #fff;
    padding: 1em;
    color: #4397CB;
    height: 100%;
}

.blog-right {
	overflow: hidden;
}
.right-title {
    font-size: 1.4em;
    margin-bottom: 1em;
}
.right-text {}
.right-button {
    margin: 0.4em 0 1em;
    display: block;
    background: #4397CB;
    color: #fff;
    padding: 1em;
}
.blog-right .banner {
    display: block;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 1.4em;
    color: #fff;
    padding: 2em 1em;
}
.blog-right .banner-top {
    background: #294574;
}
.blog-right .banner-stf {
    background: #03a9f4;
}
.blog-right .banner-triforce {
    background: #0e69b2;
}
.blog-right .new-list {}
.blog-right .new-list li {
    margin-bottom: 1em;
}
.blog-right .new-list li a {
    display: flex;
    gap: 1em;
}
.blog-right .new-list figure {
    width: 30%;
}
.blog-right .new-list figure img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
}
.blog-right .new-list .article-title {
    color: #4697ca;
    width: calc( 70% - 1em );
}