/*
==========================================
    サイト全体の共通設定
==========================================
*/
body {
    color: #595858;
    font-family: "FOT-筑紫オールド明朝 Pro R", "TsukuOldMinPro-R", "游明朝", "Yu Mincho medium",
        "YuMincho medium", "Hiragino Mincho ProN", "HGS明朝E", serif;
}

.wrap {
    width: 76vw;
    margin: 0 auto;
}

.pcbr {
    display: none;
}

h4 a {
    color: #A5A19E;
}

p a {
    color: #595858;
}

@media screen and (min-width: 479px) {
    .wrap {
        width: 84vw;
    }

    .pcbr {
        display: block;
    }

    .spbr {
        display: none;
    }
}

@media screen and (min-width: 767px) {}

@media screen and (min-width: 1023px) {
    .wrap {
        width: 84%;
        max-width: 1200px;
        margin: 0 auto;
    }
}



@media screen and (min-width: 1279px) {}


/*
==========================================
    fv
==========================================
*/
h2 {
    background: linear-gradient(90deg, #a2d7fb, #285ca2);
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.6));
    padding-top: 60px;
}

h2 img {
    display: block;
    margin: 0 auto;
    max-width: 1920px;
}

@media screen and (min-width: 479px) {}

@media screen and (min-width: 767px) {
    h2 {
        padding-top: 78px;
    }
}

@media screen and (min-width: 1023px) {}

@media screen and (min-width: 1279px) {}


/*
==========================================
    top
==========================================
*/
.sain_top h3 {
    color: #27A639;
    font-size: 5vw;
    letter-spacing: 0.4vw;
    text-align: center;
    margin: 0 auto;
    padding: 7.8vw 0vw 10vw;
}

.sain_top p {
    font-size: 3vw;
    line-height: 2;
    letter-spacing: 0.2vw;
    padding-bottom: 4.8vw;
}

.sain_top figure {
    position: relative;
    padding: 0 2.8vw 10.4vw;
}

.sain_top picture:last-of-type img {
    display: block;
    position: absolute;
    top: -9.2vw;
    left: -5.4vw;
    width: 24.7%;
}

@media screen and (min-width: 479px) {
    .sain_top {
        margin-top: 6.8vw;
        width: 100%;
    }

    .sain_top h3 {
        float: right;
        font-size: 2.7vw;
        text-align: left;
        padding: 0vw 0vw 1.7vw;
        width: 44vw;
    }

    .sain_top figure {
        float: left;
        width: 34vw;
    }

    .sain_top picture:last-of-type img {
        top: -3.2vw;
        left: 0vw;
        width: 16%;
    }

    .sain_top section {
        float: right;
        margin-bottom: 5vw;
        width: 44vw;
    }

    .sain_top p {
        font-size: 1.9vw;
        line-height: 1.75;
        letter-spacing: 0.2vw;
        padding-bottom: 2vw;
    }

}

@media screen and (min-width: 767px) {}

@media screen and (min-width: 1023px) {
    .sain_top {
        margin-top: 8.2%;
    }

    .sain_top figure {
        padding: 0 3.4% 9.2%;
        width: 41.4%;
    }

    .sain_top picture:last-of-type img {
        top: -5.7%;
        left: -0.5%;
        width: 16.6%;
    }

    .sain_top h3 {
        float: right;
        font-size: 1.95rem;
        text-align: left;
        letter-spacing: 0.03rem;
        line-height: 1.7;
        padding: 0 0 2.5%;
        width: 50.5%;
    }

    .sain_top section {
        float: right;
        width: 47.5%;
        padding-right: 3%;
        margin-bottom: 3%;
    }

    .sain_top p {
        font-size: 1.12rem;
        line-height: 1.7;
        letter-spacing: 0.06rem;
        padding-bottom: 8.2%;
    }
}

@media screen and (min-width: 1279px) {}

/*
==========================================
    contents
==========================================
*/
.sain_top_contents {
    margin-top: 4.8vw;
}

.sain_top_contents .sain_top_2col {
    margin-bottom: 7.8vw;
}

.sain_top_contents h3 {
    padding-bottom: 7.9vw;
}

.sain_top_contents .col_text {
    padding: 0 1vw;
    border-bottom: solid 1px #A5A19E;
}

.sain_top_contents .sain_top_2col:last-of-type {
    margin-bottom: 10.2vw;
}

.sain_top_contents .sain_top_2col:last-of-type .col_text {
    border-bottom: solid 0px #A5A19E;
}

.sain_top_contents h4 {
    color: #A5A19E;
    font-size: 4.5vw;
    letter-spacing: 0.3vw;
    padding: 1vw 0 0;
}

.sain_top_contents h4::before {
    content: "◉";
}

.sain_top_contents .col_text p:first-of-type {
    font-size: 3.2vw;
    letter-spacing: 0.01rem;
    padding-bottom: 2vw;
}

.sain_top_contents .col_text p:last-of-type {
    font-size: 4.45vw;
    letter-spacing: 0.17vw;
    line-height: 1.7;
    padding-bottom: 6.5vw;
}

.sain_top_contents .sain_top_2col .present p:first-of-type {
    font-size: 3.2vw;
    letter-spacing: 0.01rem;
    padding-bottom: 7vw;
}

.sain_top_contents .sain_top_2col:last-of-type h4::before {
    content: "";
}

.sain_top_contents .sain_top_2col:last-of-type p::before {
    content: "◉";
}

.sain_top_contents .sain_top_2col:last-of-type p {
    font-size: 3.2vw;
    letter-spacing: 0.01rem;
    line-height: 2;
    padding-bottom: 0;
}


@media screen and (min-width: 479px) {
    .sain_top_contents {
        clear: both;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 0 3vw;
    }

    .sain_top_contents h3 {
        width: 100%;
    }

    .sain_top_contents .sain_top_2col {
        width: 39vw;
        margin-bottom: 3.5vw;
    }

    .sain_top_contents .sain_top_2col:last-of-type {
        margin-bottom: 0;
    }

    .sain_top_contents .col_img {
        width: 33vw;
        margin: 0 auto;
    }

    .sain_top_contents .col_text {
        width: 33vw;
        margin: 0 auto;
        border-bottom: 0;
    }

    .sain_top_contents h4 {
        font-size: 2.3vw;
        letter-spacing: 0.1vw;
    }

    .sain_top_contents .col_text p:first-of-type {
        font-size: 1.8vw;
        padding-bottom: 1.6vw;
    }

    .sain_top_contents .col_text p:last-of-type {
        font-size: 2.8vw;
        padding-bottom: 5vw;
    }

    .sain_top_contents .sain_top_2col .present p:first-of-type {
        font-size: 1.8vw;
    }

    .sain_top_contents .sain_top_2col:last-of-type p:first-of-type {
        padding-bottom: 0;
    }

    .sain_top_contents .sain_top_2col:last-of-type p {
        font-size: 1.8vw;
        letter-spacing: 0.01rem;
        line-height: 2.3;
    }
}

@media screen and (min-width: 767px) {}

@media screen and (min-width: 1023px) {
    .sain_top_contents {
        gap: 0 2%;
        margin-top: 0;
        padding: 0 3.3%;
    }

    .sain_top_contents h3 {
        padding-bottom: 5.6%;
    }

    .sain_top_contents .sain_top_2col {
        display: flex;
        justify-content: space-between;
        width: 49%;
        margin-bottom: 3.5%;
        gap: 0 3%
    }

    .sain_top_contents .col_img {
        width: 61.2%;
        margin: 0 auto;
    }

    .sain_top_contents .col_text {
        width: 84%;
        margin: 0 auto;
        border-bottom: 0;
        padding: 0;
    }

    .sain_top_contents h4 {
        font-size: 1.05rem;
        letter-spacing: 0.15rem;
        padding: 0;
    }

    .sain_top_contents .col_text p:first-of-type {
        font-size: 1rem;
        padding-bottom: 4%;
        padding-top: 2%;
    }

    .sain_top_contents .col_text p:last-of-type {
        font-size: 1.2rem;
        letter-spacing: 0.1rem;
        line-height: 1.3;
        padding-bottom: 0;
    }

    .sain_top_contents .sain_top_2col .present p:first-of-type {
        font-size: 1rem;
        padding-bottom: 9px;
        padding-top: 5px;
    }

    .sain_top_contents .sain_top_2col:last-of-type p {
        font-size: 1rem;
        line-height: 1.4;
        padding-top: 5px;
    }
}

@media screen and (min-width: 1279px) {}

/*
==========================================
    back number
==========================================
*/
.sain_back-number {
    margin-top: 9vw;
}

.sain_back-number h3 {
    border-top: solid 1px rgba(77, 77, 77, 0.5);
    border-bottom: solid 1px rgba(77, 77, 77, 0.5);
    letter-spacing: 0.4vw;
    text-align: center;
    padding: 2.3vw;
    margin-bottom: 13.3vw;
}

.sain_back-number .back-number-item {
    display: flex;
    flex-direction: column-reverse;
    padding: 0 2.7vw 13vw;
}

.sain_back-number .back-number-item section {
    margin-top: 1vw;
}

.sain_back-number .back-number-item h4 {
    font-size: 3.7vw;
    letter-spacing: 0.25vw;
    margin-bottom: 1.4vw;
}

.sain_back-number .back-number-item h4 span {
    margin: 0 0.4em;
}

.sain_back-number .back-number-item h5 {
    font-size: 2.75vw;
    /* font-family: "TsukuGoPro-B", sans-serif; */
    font-weight: normal;
    letter-spacing: 0.08rem;
    margin-bottom: 0;
}

.sain_back-number .back-number-item p {
    font-size: 3vw;
    line-height: 1.27;
}

.sain_back-number .back-number-item a {
    display: block;
    color: #fff;
    font-size: 3vw;
    font-family: "TsukuGoPro-B", sans-serif;
    font-weight: normal;
    letter-spacing: 0.35vw;
    margin-top: 4vw;
    padding: 2.1vw;
    padding-left: 3.1vw;
}

.sain_back-number .back-number-item figure {
    margin-bottom: 5.3vw;
}

.back-number-item figure picture img {
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.sain_back-number .bn_accordion_ttl {
    text-align: center;
    border-top: solid 1px rgba(77, 77, 77, 0.5);
    border-bottom: solid 1px rgba(77, 77, 77, 0.5);
    padding: 2.9vw;
    margin-bottom: 13.3vw;
}

.sain_back-number .bn_accordion_inner {
    display: none;
    margin-bottom: 13.3vw;
}

.mail-magazine_bnr {
    width: 83vw;
    margin: 0 auto 13.3vw;
}

@media screen and (min-width: 479px) {
    .sain_back-number {
        margin-top: 5vw;
        padding: 0 3vw;
    }

    .sain_back-number h3 {
        font-size: 3vw;
        margin-bottom: 12.3vw;
    }

    .sain_back-number .back-number-item {
        flex-direction: row-reverse;
        justify-content: flex-start;
        gap: 0 3vw;
    }

    .sain_back-number .back-number-item div {
        width: 37vw;
    }

    .sain_back-number .back-number-item figure {
        width: 33vw;

    }

    .sain_back-number .back-number-item h4 {
        font-size: 2.8vw;
    }

    .sain_back-number .back-number-item h5 {
        font-size: 2vw;
    }

    .sain_back-number .back-number-item p {
        font-size: 1.8vw;
        line-height: 1.45;
    }

    .sain_back-number .back-number-item a {
        font-size: 2vw;
        margin-top: 1.8vw;
        padding: 0.8vw;
        padding-left: 1.8vw;
    }

    .sain_back-number .bn_accordion_ttl {
        font-size: 3vw;
        margin-bottom: 7.9vw;
    }
}

@media screen and (min-width: 767px) {}

@media screen and (min-width: 1023px) {
    .sain_back-number {
        margin-top: 10.1%;
        padding: 0 6%;
    }

    .sain_back-number h3 {
        font-size: 1.45rem;
        letter-spacing: 0.3rem;
        padding: 3.8%;
        margin-bottom: 10.8%;
    }

    .sain_back-number .back-number-item {
        flex-direction: row-reverse;
        justify-content: flex-start;
        gap: 0 5.4%;
        padding: 0 0.4% 3%;
    }

    .sain_back-number .back-number-item div {
        width: 50%;
    }

    .sain_back-number .back-number-item section {
        margin-top: 2.2%;
    }


    .sain_back-number .back-number-item h4 {
        font-size: 1.52rem;
        letter-spacing: 0.1rem;
        line-height: 1.4;
        margin-bottom: 3.9%;
    }

    .sain_back-number .back-number-item h5 {
        font-size: 1.05rem;
        margin-bottom: 0.4%;
    }

    .sain_back-number .back-number-item p {
        font-size: 1.25rem;
        letter-spacing: 0.03rem;
        line-height: 1.25;
    }

    .sain_back-number .back-number-item a {
        font-size: 1.1rem;
        letter-spacing: 0.08rem;
        margin-top: 6.4%;
        padding: 2.4%;
        padding-left: 3.6%;
        width: 72.3%;
    }

    .sain_back-number .back-number-item figure {
        width: 45%;
        margin-bottom: 8.2%;
    }

    .sain_back-number .bn_accordion_ttl {
        font-size: 1.55rem;
        padding: 5.1%;
        margin-bottom: 10.8%;
    }

    .mail-magazine_bnr {
        width: 73%;
        max-width: 935px;
    }

}

@media screen and (min-width: 1279px) {}


/*
  vol毎に違う色指定
*/
.winter h4 span,
.winter h5 {
    color: #a5a19e;
}

.winter a {
    background-color: #a5a19e;
}

.autumn h4 span,
.autumn h5 {
    color: #8c6239;
}

.autumn a {
    background-color: #8c6239;
}

.summer h4 span,
.summer h5 {
    color: #6b7cb2;
}

.summer a {
    background-color: #6b7cb2;
}

.spring h4 span,
.spring h5 {
    color: #d69787;
}

.spring a {
    background-color: #d69787;
}