@charset "utf-8";

/* ────────────────────── *
 *                                              *
 * コンテンツ                                   *
 *                                              *
 * ────────────────────── */

#contents {
    padding: 6.0rem 0;
    position: relative;
}
#contents .inner {
    background: #fff;
    width: 120.0rem;
    padding: 7.0rem 5.0rem 11.0rem;
    margin: 0 auto;
    border-radius: 1.0rem;
    box-sizing: border-box;
}
#contents .inner h1 {
    font-size: 3.0rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 1.5rem;
    margin: 0 auto 6.0rem;
    position: relative;
}
#contents .inner h1::after {
    content: "";
    background: url("../../image/common/bg-head.png") no-repeat center center / cover;
    width: 23.0rem;
    height: 1.4rem;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
}
#contents .inner .blog {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#contents .inner .blog .left {
    width: 80.0rem;
}
#contents .inner .blog .left p.category-head {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 4.0rem;
    margin: 0 auto 4.0rem;
    position: relative;
}
#contents .inner .blog .left p.category-head::after {
    content: "";
    background: url("../../blog/image/bg-list-separator.png") repeat-x left center / 1.2rem 0.4rem;
    width: 100%;
    height: 0.4rem;
    position: absolute;
    left: 0;
    bottom: 0;
}
#contents .inner .blog .left p.noentry {
    font-size: 1.6rem;
    line-height: 1.75;
    text-align: center;
    margin-bottom: 2.0rem;
}
#contents .inner .blog .left .item {
    position: relative;
}
#contents .inner .blog .left .item::after {
    content: "";
    background: url("../../blog/image/bg-list-separator.png") repeat-x left center / 1.2rem 0.4rem;
    width: 100%;
    height: 0.4rem;
    position: absolute;
    left: 0;
    bottom: 0;
}
#contents .inner .blog .left .item a {
    padding: 4.0rem 0;
    position: relative;
    transition: opacity .5s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#contents .inner .blog .left .item:first-of-type a {
    padding: 0 0 4.0rem;
}
#contents .inner .blog .left .item a:hover {
    opacity: 0.6;
}
#contents .inner .blog .left .item p.thumbnail {
    width: 26.0rem;
}
#contents .inner .blog .left .item p.thumbnail img {
    border-radius: 1.0rem;
}
#contents .inner .blog .left .item .article {
    width: 51.0rem;
}
#contents .inner .blog .left .item .article dl.meta {
    margin-bottom: 1.0rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
#contents .inner .blog .left .item .article dl.meta dt {
    font-size: 1.6rem;
    margin-right: 1.5rem;
    padding: 0.3rem 0;
}
#contents .inner .blog .left .item .article dl.meta dd ul {
    font-size: 1.4rem;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#contents .inner .blog .left .item .article dl.meta dd ul li {
    color: #fff;
    background: #6bb0f7;
    padding: 0.5rem 1.0rem;
    margin-right: 1.0rem;
    margin-bottom: 0.5rem;
    border-radius: 5.0rem;
}
#contents .inner .blog .left .item .article h2 {
    font-size: 2.8rem;
    line-height: 1.5;
    font-weight: 700;
    text-decoration: underline;
    margin-bottom: 1.0rem;
}
#contents .inner .blog .left .item .article p.body {
    font-size: 1.6rem;
    line-height: 1.75;
    margin-bottom: 2.0rem;
}
#contents .inner .blog .left .item .article p.more {
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-align: right;
    position: absolute;
    right: 0;
    bottom: 2.0rem;
}
#contents .inner .blog .left .item .article p.more span {
    background: #3e3e3e;
    display: inline-block;
    padding: 0.5rem 2.0rem;
    border-radius: 5.0rem;
}
#contents .inner .blog .left ol.pagination {
    font-size: 2.6rem;
    font-weight: 700;
    margin: 6.0rem auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#contents .inner .blog .left ol.pagination li {
    margin: 0 1.0rem;
}
#contents .inner .blog .left ol.pagination li a {
    color: #6bb0f7;
    background: #fff;
    width: 4.6rem;
    height: 4.6rem;
    border: 0.2rem solid #6bb0f7;
    border-radius: 1.0rem;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#contents .inner .blog .left ol.pagination li.current span {
    color: #fff;
    background: #6bb0f7;
    width: 4.6rem;
    height: 4.6rem;
    border: 0.2rem solid #6bb0f7;
    border-radius: 1.0rem;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* 右 */
#contents .inner .blog .right {
    width: 24.0rem;
}
#contents .inner .blog .right h3 {
    font-size: 2.0rem;
    font-weight: 700;
    color: #fff;
    background: #6bb0f7;
    text-align: center;
    padding: 0.5rem 2.0rem;
    margin-bottom: 2.0rem;
    border-radius: 5.0rem;
}
#contents .inner .blog .right ul.archive {
    font-size: 1.6rem;
    line-height: 1.7;
    padding-left: 3.0rem;
    margin-bottom: 8.0rem;
}
#contents .inner .blog .right ul.archive li {
    margin-bottom: 1.0rem;
    list-style-type: disc;
}
#contents .inner .blog .right ul.archive li:last-child {
    margin-bottom: 0;
}

/* 記事本体 */
#contents .inner .blog .left .blog-detail {
    width: 100%;
    padding-bottom: 7.0rem;
    margin: 0 auto 6.0rem;
    position: relative;
}
#contents .inner .blog .left .blog-detail::after {
    content: "";
    background: url("../../blog/image/bg-list-separator.png") repeat-x left center / 1.2rem 0.4rem;
    width: 100%;
    height: 0.4rem;
    position: absolute;
    left: 0;
    bottom: 0;
}
#contents .inner .blog .left .blog-detail dl.meta {
    margin-bottom: 5.0rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
#contents .inner .blog .left .blog-detail dl.meta dt {
    font-size: 1.6rem;
    margin-right: 1.5rem;
    padding: 0.5rem 0;
}
#contents .inner .blog .left .blog-detail dl.meta dd ul {
    font-size: 1.4rem;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#contents .inner .blog .left .blog-detail dl.meta dd ul li {
    color: #fff;
    background: #6bb0f7;
    padding: 0.5rem 1.0rem;
    margin-right: 1.0rem;
    margin-bottom: 0.5rem;
    border-radius: 5.0rem;
}
#contents .inner .blog .left .blog-detail h2 {
    font-size: 2.8rem;
    line-height: 1.5;
    font-weight: 700;
    padding-bottom: 1.6rem;
    margin-bottom: 2.0rem;
    position: relative;
}
#contents .inner .blog .left .blog-detail h2::after {
    content: "";
    background: url("../../blog/image/bg-list-separator.png") repeat-x left center / 1.2rem 0.4rem;
    width: 100%;
    height: 0.4rem;
    position: absolute;
    left: 0;
    bottom: 0;
}
#contents .inner .blog .left .blog-detail .blog-body {
    font-size: 1.6rem;
    line-height: 1.75;
}
#contents .inner .blog .left .blog-detail .blog-body p {
    margin-bottom: 3.0rem;
}
#contents .inner .blog .left .blog-detail .blog-body img {
    width: auto;
}
#contents .inner .blog .left .navigation {
    font-size: 2.0rem;
    line-height: 1;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#contents .inner .blog .left .navigation .prev, 
#contents .inner .blog .left .navigation .next {
    text-align: center;
    width: 18.0rem;
}
#contents .inner .blog .left .navigation .prev a, 
#contents .inner .blog .left .navigation .next a {
    color: #fff;
    background: #6bb0f7;
    display: block;
    padding: 1.2rem;
    border-radius: 1.0rem;
}
#contents .inner .blog .left .navigation .list {
    color: #6bb0f7;
    text-decoration: underline;
    text-align: center;
    margin: 0 6.0rem;
}