@charset "UTF-8";

/*----- article -----*/
main#archive,
main#single,
main#common {
    position: relative;
    padding: 300px 0 0;
}
main#archive::before,
main#single::before,
main#common::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: url("../images/bg_contents5_top.svg") no-repeat center bottom;
    background-size: max(1500px, 100vw) max(150px, 10vw);
}
main#archive section#news,
main#single section#news {
    background: #E5ECE8 url("../images/bg_contents5_bottom.svg") no-repeat center top;
    background-size: max(1500px, 100%) max(450px, 30vw);
    padding: 75px 0 150px;
}
main#archive section#column,
main#single section#column {
    background: #E5ECE8 url("../images/bg_contents5_bottom.svg") no-repeat center top;
    background-size: max(1500px, 100%) max(450px, 30vw);
    padding: 75px 0 150px;
}
main#common section.common {
    background: #E5ECE8 url("../images/bg_contents5_bottom.svg") no-repeat center top;
    background-size: max(1500px, 100%) max(450px, 30vw);
    padding: 75px 0 150px;
}
main#common section.common p.txt {
    font-size: calc( 18 / var(--root-font-size) * 1rem );
    text-align: center;
    padding: 0 5% 75px;
}
main#archive section#column ul.archive.flexWrap {
    justify-content: space-between;
}
main#archive section#column ul.archive.flexWrap::after {
    content: "";
    display: block;
    width: calc(100% / 3);
}
main#single article {
    width: 90%;
    max-width: 1000px;
    border-top: #3A644B solid 1px;
    padding: 50px 0 150px;
    margin: 25px auto 0;
}
main#single article div.flexWrap {
    padding: 0 15px 15px;
}
main#single section#news .articleTtl,
main#single section#column .articleTtl {
    line-height: 1.5;
    padding: 0 15px 75px;
}

.content p {
    line-height: 2;
    padding: 0 15px 2em;
}
.content p.center {
    text-align: center;
}
.content a {
    text-decoration: underline;
}
.content a:hover {
    text-decoration: none;
}
.content figure {
    margin: 0;
}
.content img {
    max-width: 100%;
    height: auto;
    margin: 25px 0;
}

.content .is-style-headline1 {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: #FFF;
    border: #3A644B solid 1.5px;
    border-radius: 150px;
    font-size: calc( 18 / var(--root-font-size) * 1rem );
    padding: 15px 50px;
    margin: 0 0 25px;
}
.content .is-style-headline1::before {
    content: "";
    position: absolute;
    bottom: -1.5px;
    left: 45px;
    z-index: 9;
    background: #FFF;
    width: 4px;
    height: 3px;
}
.content .is-style-headline1::after {
    content: "";
    position: absolute;
    top: -1.5px;
    right: 45px;
    z-index: 9;
    background: #FFF;
    width: 4px;
    height: 3px;
}

#pagenation,
.pagenation {
    width: 100%;
}
#pagenation {
    margin: 50px 0 0;
}
#pagenation ul {
    display: flex;
    justify-content: center;
}
#pagenation ul li {
   font-size: calc( 20 / var(--root-font-size) * 1rem );
   margin: 0 5px!important;
}
#pagenation ul li .page-numbers {
    display: block;
    width: 35px;
    height: 40px;
    color: inherit;
    background: transparent;
    border-radius: 20px;
    line-height: 36px;
    text-align: center;
}
#pagenation ul li span.page-numbers.current {
    color: #FFF;
    background: #3A644B;
}
#pagenation ul li .prev.page-numbers,
#pagenation ul li .next.page-numbers {
    position: relative;
    display: block;
    width: 56px;
    height: 40px;
    color: inherit;
    background: transparent;
    border-radius: none;
    text-align: center;
}
#pagenation ul li .prev.page-numbers .arrow,
#pagenation ul li .next.page-numbers .arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 56px;
    height: 16px;
    margin: auto 0;
    transition: 0.5s 0s;
}
#pagenation ul li .prev.page-numbers .arrow {
    background: url("../images/arrow_yoko.svg") no-repeat center center;
    background-size: contain;
    transform: scale(-1, 1);
}
#pagenation ul li:hover .prev.page-numbers .arrow {
    left: -5px;
}
#pagenation ul li .next.page-numbers .arrow {
    background: url("../images/arrow_yoko.svg") no-repeat center center;
    background-size: contain;
}
#pagenation ul li:hover .next.page-numbers .arrow {
    left: 5px;
}
.pagenation {
    display: flex;
    justify-content: center;
    margin: 50px 0 0;
}

@media screen and (max-width: 960px) {
main#archive,
main#single,
main#common {
    position: relative;
    background: #E5ECE8;
    padding: 150px 0 0;
}
main#archive::before,
main#single::before,
main#common::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: url("../images/bg_contents2_top.svg") no-repeat center bottom;
    background-size: max(750px, 100vw) max(225px, 30vw);
}
main#archive section#news,
main#single section#news {
    background: #F1F5F3 url("../images/bg_contents2_bottom.svg") no-repeat center top;
    background-size: max(750px, 100%) max(225px, 30vw);
    padding: 75px 0;
}
main#archive section#column,
main#single section#column {
    background: #F1F5F3 url("../images/bg_contents2_bottom.svg") no-repeat center top;
    background-size: max(750px, 100%) max(225px, 30vw);
    padding: 75px 0;
}
main#common section.common {
    background: #F1F5F3 url("../images/bg_contents2_bottom.svg") no-repeat center top;
    background-size: max(750px, 100%) max(225px, 30vw);
    padding: 75px 0;
}
main#common section.common p.txt {
    font-size: calc( 16 / var(--root-font-size) * 1rem );
    text-align: center;
    padding: 0 5% 50px;
}
main#archive section#column ul.archive.flexWrap {
    justify-content: space-between;
}
main#archive section#column ul.archive.flexWrap::after {
    content: none;
}
main#archive section#column ul li.article {
    width: 47.5%;
    margin: 0 0 50px;
}
main#archive section#column div.flexWrap ul.category li {
    position: relative;
    border: #3A644B solid 1px;
    border-radius: 15px;
    font-family: "Zen Maru Gothic", sans-serif;
    line-height: 22px;
    padding: 0 0.5em;
    margin: 2.5px 5px 2.5px 0;
}
main#archive section#column div.flexWrap ul.category li:last-child {
    margin: 2.5px 0;
}
main#archive section#column ul li.article .articleTtl {
    color: #3A644B;
    font-size: calc( 16 / var(--root-font-size) * 1rem );
}
main#archive section#column ul li.article figure {
    margin: 0 0 25px;
}
main#single article {
    width: 90%;
    max-width: 1000px;
    border-top: #3A644B solid 1px;
    padding: 50px 0;
    margin: 0 auto;
}
main#single article div.flexWrap {
    padding: 0 0 15px;
}
main#single section#news .articleTtl,
main#single section#column .articleTtl {
    padding: 0 0 50px;
}

.content p {
    line-height: 2;
    padding: 0 0 2em;
}
.content p.center {
    text-align: center;
}
.content a {
    text-decoration: underline;
}
.content a:hover {
    text-decoration: none;
}
.content figure {
    margin: 0;
}
.content img {
    max-width: 100%;
    height: auto;
    margin: 25px 0;
}

.content .is-style-headline1 {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: #FFF;
    border: #3A644B solid 1.5px;
    border-radius: 150px;
    font-size: calc( 18 / var(--root-font-size) * 1rem );
    padding: 15px 25px;
    margin: 0 0 25px;
}
.content .is-style-headline1::before {
    content: "";
    position: absolute;
    bottom: -1.5px;
    left: 45px;
    z-index: 9;
    background: #FFF;
    width: 4px;
    height: 3px;
}
.content .is-style-headline1::after {
    content: "";
    position: absolute;
    top: -1.5px;
    right: 45px;
    z-index: 9;
    background: #FFF;
    width: 4px;
    height: 3px;
}
}