@charset "utf-8";


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

    body.archive-body {
        padding-top: calc( 100vw * 144 / 780 );
        background: url(../images/page-bg.png) no-repeat 100% calc( 100vw * 144 / 780 ) / 80% auto;
    }

    #archive-mv {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    #archive-mv > h1 {
        margin: 0;
        padding: 8.0vw 5%;
        text-align: left;
    }
    #archive-mv > h1 span:nth-of-type(1) {
        position: relative;
        display: block;
        margin: 0;
        padding: 0;
        font-size: 4.0vw;
        font-weight: 500;
    }
    #archive-mv > h1 span:nth-of-type(1)::after {
        position: absolute;
        content: "";
        top: calc( 100% + 0.8em );
        left: 0;
        width: 88px;
        height: 1px;
        background: #e2e2e2;
    }
    #archive-mv > h1 span:nth-of-type(2) {
        display: block;
        margin: 0.8em 0 0;
        padding: 0;
        font-size: 12.0vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        line-height: 1.2;
    }
    #archive-mv > h1 span:nth-of-type(2)::first-letter {
        color: #5aa7d1;
    }

    .breadcrumbs {
        margin: 0;
        padding: 0 5%;
        width: 100%;
        font-size: 2.8vw;
        font-weight: 400;
    }
    .breadcrumbs > a {
        display: inline-block;
        padding: 0 1.5em 0 0;
        color: #2e2e2e;
    }
    .breadcrumbs > span {
        display: inline-block;
        padding: 0 1.5em 0 0;
        color: #a7a7a7;
    }
    .breadcrumbs > :is(a,span) + :is(a,span)::before {
        display: inline-block;
        padding: 0 1.5em 0 0;
        content: ">";
        color: #5aa7d1;
    }

    .archive-main {
        margin: 0 auto;
        padding: 12.0vw 0;
        width: 90%;
    }
    .archive-main p {
        margin: 1.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 40 / 16 );
    }
    .archive-main p.center {
        text-align: center;
    }

    .archive-tab {
        margin: 8.0vw 0 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0 2.0vw;
    }
    .archive-tab > a {
        display: grid;
        place-items: center;
        margin: 0;
        width: 30.0vw;
        height: auto;
        aspect-ratio: 296 / 56;
        font-size: 3.6vw;
        font-weight: 500;
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 4.0em;
    }
    .archive-tab > a.active {
        position: relative;
        color: #fff;
        background: #5aa7d1;
        border: 1px solid #5aa7d1;
    }

    .archive-grid {
        margin: 8.0vw auto 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 4.0vw 0;
    }
    .archive-grid .archive-item {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .archive-grid .archive-item .pic {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 400 / 225;
    }
    .archive-grid .archive-item .pic figure {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .archive-grid .archive-item .pic figure:empty {
        background: #e2e2e2;
        border-radius: 2.0vw;
    }
    .archive-grid .archive-item .pic figure img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }
    .archive-grid .archive-item .pic .cat {
        position: absolute;
        top: 5%;
        left: 5%;
        width: max-content;
        margin: 0;
        padding: 0.5em 1.0em;
        color: #fff;
        font-size: 2.8vw;
        font-weight: 500;
        background: #5aa7d1;
        border-radius: 4.0em;
    }
    .archive-grid .archive-item .title {
        margin: 0.8em 0 0;
        padding: 0;
        width: 100%;
        font-size: 4.0vw;
        font-weight: 500;
        text-align: left;
    }
    .archive-grid .archive-item p {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 22 / 16 );
    }
    .archive-grid .archive-item .date {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 2.8vw;
        font-weight: 400;
        text-align: left;
        line-height: 1.0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0 1.0vw;
    }
    .archive-grid .archive-item .date::before {
        content: "";
        margin: 0;
        padding: 0;
        width: 1.5em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-clock-cyan.svg) no-repeat center / contain;
    }

}


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

    body.archive-body {
        padding-top: 144px;
        background: url(../images/page-bg.png) no-repeat 100% 144px / 36% auto;
    }

    #archive-mv {
        margin: 0 auto;
        padding: 112px max( 5%, calc( 50vw - 640px ) ) 48px;
        width: 100%;
    }
    #archive-mv > h1 {
        margin: 0;
        padding: 0;
        text-align: left;
    }
    #archive-mv > h1 span:nth-of-type(1) {
        position: relative;
        display: block;
        margin: 0;
        padding: 0;
        font-size: 19px;
        font-weight: 500;
    }
    #archive-mv > h1 span:nth-of-type(1)::after {
        position: absolute;
        content: "";
        top: calc( 100% + 0.8em );
        left: 0;
        width: 88px;
        height: 1px;
        background: #e2e2e2;
    }
    #archive-mv > h1 span:nth-of-type(2) {
        display: block;
        margin: 0.8em 0 0;
        padding: 0;
        font-size: 70px;
        font-weight: 700;
        font-family: var(--font-alphabet);
        line-height: 1.2;
    }
    #archive-mv > h1 span:nth-of-type(2)::first-letter {
        color: #5aa7d1;
    }

    .breadcrumbs {
        margin: 0;
        padding: 0 max( 5%, calc( 50vw - 640px ) );
        width: 100%;
        font-size: 13px;
        font-weight: 400;
    }
    .breadcrumbs > a {
        display: inline-block;
        padding: 0 1.5em 0 0;
        color: #2e2e2e;
    }
    .breadcrumbs > span {
        display: inline-block;
        padding: 0 1.5em 0 0;
        color: #a7a7a7;
    }
    .breadcrumbs > :is(a,span) + :is(a,span)::before {
        display: inline-block;
        padding: 0 1.5em 0 0;
        content: ">";
        color: #5aa7d1;
    }

    .archive-main {
        margin: 0 auto;
        padding: 104px 0;
        width: 90%;
        max-width: 1280px;
    }
    .archive-main p {
        margin: 1.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 40 / 16 );
    }
    .archive-main p.center {
        text-align: center;
    }

    .archive-tab {
        margin: 48px 0 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0 16px;
    }
    .archive-tab > a {
        display: grid;
        place-items: center;
        margin: 0;
        width: 296px;
        height: auto;
        aspect-ratio: 296 / 56;
        font-size: 16px;
        font-weight: 500;
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 4.0em;
    }
    .archive-tab > a.active {
        position: relative;
        color: #fff;
        background: #5aa7d1;
        border: 1px solid #5aa7d1;
    }

    .archive-grid {
        margin: 72px auto 0;
        padding: 0;
        width: 100%;
        max-width: 1232px;
        display: grid;
        grid-template-columns: repeat( 3, 1fr );
        gap: 0 40px;
    }
    .archive-grid .archive-item {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .archive-grid .archive-item .pic {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 400 / 225;
    }
    .archive-grid .archive-item .pic figure {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .archive-grid .archive-item .pic figure:empty {
        background: #e2e2e2;
        border-radius: 10px;
    }
    .archive-grid .archive-item .pic figure img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }
    .archive-grid .archive-item .pic .cat {
        position: absolute;
        top: 5%;
        left: 5%;
        width: max-content;
        margin: 0;
        padding: 0.5em 1.0em;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        background: #5aa7d1;
        border-radius: 4.0em;
    }
    .archive-grid .archive-item .title {
        margin: 0.8em 0 0;
        padding: 0;
        width: 100%;
        font-size: 19px;
        font-weight: 500;
        text-align: left;
    }
    .archive-grid .archive-item p {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 22 / 16 );
    }
    .archive-grid .archive-item .date {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 13px;
        font-weight: 400;
        text-align: left;
        line-height: 1.0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0 8px;
    }
    .archive-grid .archive-item .date::before {
        content: "";
        margin: 0;
        padding: 0;
        width: 1.5em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-clock-cyan.svg) no-repeat center / contain;
    }

}