@charset "utf-8";


/**
 * スマホ用設定
 */
@media ( width < 768px ) {

    body {
        background: url(../images/page-bg.webp) no-repeat fixed center / cover, #0184b7;
    }

    main#archive-backnumber {
        margin: 0 auto;
        padding: calc( 80px + 12.0vw ) 0 12.0vw;
        width: 100%;
    }
    main#archive-backnumber section {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        container-type: inline-size;
    }
    #archive-backnumber .head {
        position: relative;
        margin: 0 auto;
        padding: 2.0cqw 0;
        width: 50%;
        height: auto;
        background: #c47900;
    }
    #archive-backnumber .head::before {
        position: absolute;
        content: "";
        top: 0;
        right: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca1.svg) no-repeat center / contain;
        transform: translateX(66%) scale( 1.5, 1.5 );
    }
    #archive-backnumber .head::after {
        position: absolute;
        content: "";
        top: 0;
        left: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca1.svg) no-repeat center / contain;
        transform: translateX(-66%) scale( -1.5, 1.5 );
    }
    #archive-backnumber .head .text-head {
        margin: 0 auto;
        padding: 0;
        width: 60%;
        height: auto;
    }

    #archive-backnumber #archive-list {
        margin: 12.0vw auto;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.0vw;
    }
    #archive-backnumber #archive-list .archive-item {
        margin: 0;
        padding: 4.0vw;
        width: 100%;
        background: #fff;
        border: 1.0vw solid #e42929;
    }
    @media ( hover: hover ) {
        #archive-backnumber #archive-list .archive-item:hover {
            opacity: 0.5;
            filter: brightness( 100% );
        }
    }
    #archive-backnumber #archive-list .archive-item .pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9
    }
    #archive-backnumber #archive-list .archive-item .pic:empty {
        background: #f0f0f0;
    }
    #archive-backnumber #archive-list .archive-item .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #archive-backnumber #archive-list .archive-item .title {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 4.0vw;
        font-weight: 600;
        text-align: left;
    }
    #archive-backnumber #archive-list .archive-item .date {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        color: #e42929;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: left;
    }

    .page-info {
        margin: 8.0vw auto;
        width: 90%;
        padding: 0;
        display: grid;
        align-items: center;
        grid-template-columns: 1fr;
    }
    .page-info .page-pos {
        margin: 0;
        width: 100%;
        color: var(--fg-color);
        font-size: clamp( 16px, 4.2vw, 20px );
        font-family: var(--fong-alphabet);
        font-weight: 500;
        text-align: center;
    }
    .page-info .page-numbers {
        margin: 0;
        padding: 0 0 8.0vw;
        width: 100%;
        list-style: none;
        border: 0;
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 2.0vw;
    }
    .page-info ul.page-numbers li {
        margin: 0;
        padding: 0;
        width: 2.0em;
        height: 2.0em;
        font-size: 4.0vw;
        list-style: none;
    }
    .page-info ul.page-numbers li .page-numbers {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        list-style: none;
        color: var(--fg-color);
        font-size: 4.0vw;
        font-weight: 500;
        line-height: 1.0;
        background: #fff;
        border: 0;
        border-radius: 2px;
        display: grid;
        place-items: center;
        overflow: hidden;
    }
    .page-info ul.page-numbers li .page-numbers.current {
        color: #fff;
        background: #005272;
    }
    .page-info ul.page-numbers li .page-numbers.next {
        position: relative;
        width: 2.0em;
        border-radius: 100%;
        translate: 0.5em 0;
    }
    .page-info ul.page-numbers li .page-numbers.next::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 100%;
    }
    .page-info ul.page-numbers li .page-numbers.next::after {
        position: absolute;
        content: "";
        top: calc( 40% - 1px );
        right: 42%;
        width: 20%;
        height: 20%;
        border-right: 2px solid #0184b7;
        border-bottom: 2px solid #0184b7;
        rotate: -45deg;
    }
    .page-info ul.page-numbers li .page-numbers.prev {
        position: relative;
        width: 2.0em;
        border-radius: 100%;
        translate: -0.5em 0;
    }
    .page-info ul.page-numbers li .page-numbers.prev::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 100%;
    }
    .page-info ul.page-numbers li .page-numbers.prev::after {
        position: absolute;
        content: "";
        top: calc( 40% - 1px );
        left: 42%;
        width: 20%;
        height: 20%;
        border-left: 2px solid #0184b7;
        border-bottom: 2px solid #0184b7;
        rotate: 45deg;
    }
    .page-info ul.page-numbers li .page-numbers.dots {
        color: #fff;
        width: 2.0em;
        background: transparent;
    }

}


/**
 * PC用設定
 */
@media ( width >= 768px ) {

    body {
        background: url(../images/page-bg.webp) no-repeat fixed center / cover, #0184b7;
    }

    main#archive-backnumber {
        margin: 0 auto;
        padding: 180px 0 80px;
        width: 100%;
    }
    main#archive-backnumber section {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        max-width: 1200px;
        container-type: inline-size;
    }
    #archive-backnumber .head {
        position: relative;
        margin: 0 auto;
        padding: 2.0cqw 0;
        width: 50%;
        height: auto;
        background: #c47900;
    }
    #archive-backnumber .head::before {
        position: absolute;
        content: "";
        top: 0;
        right: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca1.svg) no-repeat center / contain;
        transform: translateX(66%) scale( 1.5, 1.5 );
    }
    #archive-backnumber .head::after {
        position: absolute;
        content: "";
        top: 0;
        left: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca1.svg) no-repeat center / contain;
        transform: translateX(-66%) scale( -1.5, 1.5 );
    }
    #archive-backnumber .head .text-head {
        margin: 0 auto;
        padding: 0;
        width: 40%;
        height: auto;
    }

    #archive-backnumber #archive-list {
        margin: 80px auto;
        padding: 0;
        width: 90%;
        max-width: 1200px;
        display: grid;
        grid-template-columns: repeat( 3, 1fr );
        gap: 20px;
    }
    #archive-backnumber #archive-list .archive-item {
        display: block;
        margin: 0;
        padding: 24px;
        width: 100%;
        background: #fff;
        border: 4px solid #e42929;
        transition: opacity 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #archive-backnumber #archive-list .archive-item:hover {
            opacity: 0.5;
            filter: brightness( 100% );
        }
    }
    #archive-backnumber #archive-list .archive-item .pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9
    }
    #archive-backnumber #archive-list .archive-item .pic:empty {
        background: #f0f0f0;
    }
    #archive-backnumber #archive-list .archive-item .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #archive-backnumber #archive-list .archive-item .title {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 18px;
        font-weight: 600;
        text-align: left;
    }
    #archive-backnumber #archive-list .archive-item .date {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        color: #e42929;
        font-size: 16px;
        font-weight: 500;
        text-align: left;
    }

    .page-info {
        margin: 80px auto;
        width: 90%;
        max-width: 1200px;
        padding: 0;
        display: grid;
        align-items: center;
        grid-template-columns: 1fr;
    }
    .page-info .page-pos {
        margin: 0;
        width: 100%;
        color: var(--fg-color);
        font-size: 18px;
        font-family: var(--fong-alphabet);
        font-weight: 500;
        text-align: center;
    }
    .page-info .page-numbers {
        margin: 0;
        padding: 0 0 80px;
        width: 100%;
        list-style: none;
        border: 0;
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 10px;
    }
    .page-info ul.page-numbers li {
        margin: 0;
        padding: 0;
        width: 2.0em;
        height: 2.0em;
        font-size: 18px;
        list-style: none;
    }
    .page-info ul.page-numbers li .page-numbers {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        list-style: none;
        color: var(--fg-color);
        font-size: 18px;
        font-weight: 500;
        line-height: 1.0;
        background: #fff;
        border: 0;
        border-radius: 2px;
        display: grid;
        place-items: center;
        overflow: hidden;
    }
    .page-info ul.page-numbers li .page-numbers.current {
        color: #fff;
        background: #005272;
    }
    .page-info ul.page-numbers li .page-numbers.next {
        position: relative;
        width: 2.0em;
        border-radius: 100%;
        translate: 0.5em 0;
    }
    .page-info ul.page-numbers li .page-numbers.next::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 100%;
    }
    .page-info ul.page-numbers li .page-numbers.next::after {
        position: absolute;
        content: "";
        top: calc( 40% - 1px );
        right: 42%;
        width: 20%;
        height: 20%;
        border-right: 2px solid #0184b7;
        border-bottom: 2px solid #0184b7;
        rotate: -45deg;
    }
    .page-info ul.page-numbers li .page-numbers.prev {
        position: relative;
        width: 2.0em;
        border-radius: 100%;
        translate: -0.5em 0;
    }
    .page-info ul.page-numbers li .page-numbers.prev::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 100%;
    }
    .page-info ul.page-numbers li .page-numbers.prev::after {
        position: absolute;
        content: "";
        top: calc( 40% - 1px );
        left: 42%;
        width: 20%;
        height: 20%;
        border-left: 2px solid #0184b7;
        border-bottom: 2px solid #0184b7;
        rotate: 45deg;
    }
    .page-info ul.page-numbers li .page-numbers.dots {
        color: #fff;
        width: 2.0em;
        background: transparent;
    }

}