@charset "utf-8";


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

    #mv {
        margin: calc( 100vw * 144 / 780 ) auto 0;
        width: 100%;
        z-index: 1;
    }
    #mv .mv-bg {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 5 / 2;
        z-index: 0;
    }
    #mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #mv .mv-pic {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        height: 100%;
        aspect-ratio: 1924 / 1010;
    }
    #mv .mv-pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        clip-path: polygon( 50% 0, 100% 0, 100% 100%, 0 100% );
    }
    #mv .mv-txt {
        position: absolute;
        top: 50%;
        left: 10%;
        width: 80%;
        translate: 0 -50%;
    }
    #mv .mv-txt .common-h1 {
        margin: 0;
        color: #fff;
        line-height: 1.3;
    }
    #mv .mv-txt .common-h1 span:nth-of-type(1) {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 8.0vw;
        font-family: var(--font-alphabet);
        font-weight: 500;
        text-align: left;
        letter-spacing: 0.02em;
    }
    #mv .mv-txt .common-h1 span:nth-of-type(2) {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 4.0vw;
        font-weight: 500;
        text-align: left;
        letter-spacing: 0.04em;
    }

    main {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    main.archive {
    }

    #archive-list {
        margin: 0 auto;
        padding: 12.0vw 4.0vw 32.0vw;
        width: 100%;
        background: #fff;
        display: grid;
        grid-template-columns: repeat( 2, 1fr );
        gap: 8.0vw 4.0vw;
    }

    .archive-cats {
        grid-column: span 2;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 2.0vw 2.0vw;
    }
    .archive-cats > a {
        display: block;
        margin: 0;
        padding: 0.5em 1.0em;
        color: #fff;
        font-size: 3.2vw;
        line-height: 1.0;
        background: #001c5c;
    }
    .archive-cats > a.active {
        background: var(--color-theme);
    }
    @media ( hover: hover ) {
        .archive-cats > a:hover {
            color: #fff;
        }
    }

    .archive-box {
        display: block;
        margin: 0;
        padding: 0 0 4.0vw;
        width: 100%;
        box-shadow: 0 0 4px rgba( 0, 0, 0, 0.2 );
    }
    .archive-box .pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .archive-box .pic:empty {
        background: #eee;
    }
    .archive-box .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .archive-box .date {
        margin: 0.5em auto 0;
        padding: 0;
        width: 90%
        color: var(--fg-color);
        font-size: 3.2vw;
        font-weight: 400;
        text-align: left;
    }
    .archive-box .title {
        display: block;
        margin: 0.5em auto 0;
        padding: 0;
        width: 90%;
        color: var(--fg-color);
        font-size: 3.6vw;
        font-weight: 500;
        text-align: left;
    }
    .archive-box .desc {
        margin: 0.5em auto 0;
        padding: 0;
        width: 90%;
        color: var(--fg-color);
        font-size: 3.2vw;
        font-weight: 400;
        text-align: left;
    }

    .page-info {
        margin: 0 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: 4.0vw 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: clamp( 16px, 4.2vw, 20px );
        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: clamp( 16px, 4.2vw, 20px );
        font-weight: 500;
        line-height: 1.0;
        border: 1px solid var(--fg-color);
        border-radius: 2px;
        display: grid;
        place-items: center;
        border-radius: 100%;
        overflow: hidden;
    }
    .page-info ul.page-numbers li .page-numbers.current {
        color: #fff;
        background: var(--fg-color);
    }
    .page-info ul.page-numbers li .page-numbers.next {
        width: 2.0em;
        border: 1px solid transparent;
    }
    .page-info ul.page-numbers li .page-numbers.prev {
        width: 2.0em;
        border: 1px solid transparent;
    }
    .page-info ul.page-numbers li .page-numbers.dots {
        width: 2.0em;
        border: 1px solid transparent;
    }

}


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

    #mv {
        margin: 0 auto;
        width: 100%;
        z-index: 1;
    }
    #mv .mv-bg {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 505;
        z-index: 0;
    }
    #mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #mv .mv-pic {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        height: 100%;
        aspect-ratio: 1924 / 1010;
    }
    #mv .mv-pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        clip-path: polygon( 50% 0, 100% 0, 100% 100%, 0 100% );
    }
    #mv .mv-txt {
        position: absolute;
        top: 50%;
        left: 10%;
        width: 80%;
        translate: 0 -50%;
    }
    #mv .mv-txt .common-h1 {
        margin: 0;
        color: #fff;
        line-height: 1.3;
    }
    #mv .mv-txt .common-h1 span:nth-of-type(1) {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 80px;
        font-family: var(--font-alphabet);
        font-weight: 500;
        text-align: left;
        letter-spacing: 0.02em;
    }
    #mv .mv-txt .common-h1 span:nth-of-type(2) {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 24px;
        font-weight: 500;
        text-align: left;
        letter-spacing: 0.04em;
    }

    main {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    main {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    main.archive {
        background: #f0f0f0;
    }

    #archive-list {
        margin: 0 auto;
        padding: 80px 60px 160px;
        width: 90%;
        max-width: 1200px;
        background: #fff;
        display: grid;
        grid-template-columns: repeat( 3, 1fr );
        gap: 60px 40px;
    }

    .archive-cats {
        grid-column: span 3;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 20px 20px;
    }
    .archive-cats > a {
        display: block;
        margin: 0;
        padding: 0.5em 1.0em;
        color: #fff;
        font-size: 16px;
        line-height: 1.0;
        background: #001c5c;
    }
    .archive-cats > a.active {
        background: var(--color-theme);
    }
    @media ( hover: hover ) {
        .archive-cats > a:hover {
            color: #fff;
        }
    }

    .archive-box {
        display: block;
        margin: 0 auto;
        padding: 0 0 20px;
        width: 100%;
        box-shadow: 0 0 4px rgba( 0, 0, 0, 0.2 );
    }
    .archive-box .pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .archive-box .pic:empty {
        background: #eee;
    }
    .archive-box .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .archive-box .date {
        margin: 0.5em auto 0;
        padding: 0;
        width: 90%;
        color: var(--fg-color);
        font-size: 14px;
        font-weight: 400;
        text-align: left;
    }
    .archive-box .title {
        display: block;
        margin: 0.5em auto 0;
        padding: 0;
        width: 90%;
        color: var(--fg-color);
        font-size: 18px;
        font-weight: 500;
        text-align: left;
    }
    .archive-box .desc {
        margin: 0.5em auto 0;
        padding: 0;
        width: 90%;
        color: var(--fg-color);
        font-size: 16px;
        font-weight: 400;
        text-align: left;
    }

    .page-info {
        margin: 0 auto;
        width: 90%;
        max-width: 1024px;
        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: 40px 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;
        border: 1px solid var(--fg-color);
        border-radius: 2px;
        display: grid;
        place-items: center;
        border-radius: 100%;
        overflow: hidden;
    }
    .page-info ul.page-numbers li .page-numbers.current {
        color: #fff;
        background: var(--fg-color);
    }
    .page-info ul.page-numbers li .page-numbers.next {
        width: 2.0em;
        border: 1px solid transparent;
    }
    .page-info ul.page-numbers li .page-numbers.prev {
        width: 2.0em;
        border: 1px solid transparent;
    }
    .page-info ul.page-numbers li .page-numbers.dots {
        width: 2.0em;
        border: 1px solid transparent;
    }

}