/* ============================================================
    共通設定
============================================================ */
:root {
    --main-blue: #0073BD;
    --sub-blue: #E2F3FF;
    --main-text: #333333;
    --point01: #C03936;
    --bg-spot: #FFF5E0;
}

body,
header {
    background-image: url(/2601/img/background.jpg);
}


/* ============================================================
    トップページ
============================================================ */



/* ============================================================
    マガジン
============================================================ */
.spot-info {
    background-color: var(--bg-spot);
}

.spot-info:before,
.spot-name {
    color: var(--point01);
}

.magazine-inner h3 {
    margin-bottom: calc(var(--mp-sm)/ -2);
}

.magazine-inner h3 span {
    display: inline-block;
    padding-bottom: 1.5rem;
    background-image: linear-gradient(to right, var(--point01) 3px, transparent 3px);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 1rem 3px;
}

.carousel-card .card-name {
    color: var(--point01);
}

#last {
    background-color: var(--point01);
    color: #FFFFFF;
}

#last .section-title.flex {
    align-items: end;
}

#last .section-title .img-wrapper {
    width: 25%;
    margin-top: 0;
}

#last .section-title .text-box {
    width: 70%;
    text-align: left;
}

#last figcaption {
    color: #E2F3FF;
}

#senryu .senryu-inner {
    background-color: #F5F1DF;
}

.senryu-line-top {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    display: block
}

.senryu-line-bottom {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    transform: rotate(-180deg);
    display: block
}


@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1280px) {
    .magazine-inner h3 {
        margin-bottom: calc(var(--mp-sm)/ -4);
    }
}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 768px) {

    #last .section-title .img-wrapper,
    #last .section-title .text-box,
    #last .flex .img-wrapper {
        width: 100%;
        text-align: left;
    }

    #last .section-title .img-wrapper {
        margin-top: calc(var(--mp-xl) * -1);
    }

    #last .flex .img-wrapper {
        width: 100%;
    }

    #last .section-title .img-wrapper img {
        max-width: 200px;
    }
}

@media screen and (max-width: 420px) {}