@charset "UTF-8";

@property --font-size-base {
    syntax: "<length>";
    inherits: false;
    /* ベースサイズ（35px） */
    initial-value: 35px;
}

:root {
    /* 1pxあたり何emになるかを動的計算 */
    --to-em: calc(tan(atan2(1px, var(--font-size-base))) * 1em);
}

/* ==========================================
Base
========================================== */
body {
    /* MIN:320px(13px) MAX:900px(35px) */
    font-size: clamp(0.813rem, 0.054rem + 3.79vw, 2.188rem);
}

/* ==========================================
共通レイアウト
========================================== */
.pc {
    display: none !important;
}

.in {
    width: calc((840/900)*100%);
}

/* ==========================================
共通パーツ
========================================== */
.section-title {
    font-size: calc(42 * var(--to-em));
}

.section-subtitle {
    font-size: calc(24 * var(--to-em));
    margin-top: 0.25em;
    letter-spacing: 0;
}

.page-title-section {
    margin-top: 5.75rem;
    margin-bottom: 3.4375rem;
}

.btn-more {
    font-size: calc(30 * var(--to-em));
    letter-spacing: 0.05em;
    padding: 0;
    border-radius: 0.6666666666666667em;
    width: 9.366666666666667em;
    height: 2em;
    padding-right: 1em;
}

/* アイコンのスタイル */
.btn-arrow-right::after {
    content: '〉';
    margin-left: 0;
    position: absolute;
    top: 0;
    right: 0.5666666666666667em;
}

/* ==========================================
ページ固有の特定のパーツ
========================================== */
.p-firstview {
    .swiper {
        width: 100%;
        height: auto;
        aspect-ratio: 900/366;
    }

    .swiper-pagination {
        margin: 2.7777777777777777vw auto 0 0;
    }
}

.p-firstview__content {
    height: 100%;
    bottom: 0;
    padding-left: 0;

    .in {
        height: 100%;
        padding-top: 2.666666666666667vw;
        position: relative;
    }
}

.p-firstview__copy {
    width: 36.888888888888886vw;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: 2vw;
}

.route-info {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 79%;
    left: 49.6%;
    transform: translateX(-50%);
}

/* ==========================================
News Section
========================================== */
.news-section {
    padding: calc(23 * var(--to-em)) 0 calc(91 * var(--to-em));
}

.section-title-wrap {
    margin-bottom: calc(24 * var(--to-em));
}

.news-list {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

.news-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    padding: calc(16 * var(--to-em)) 3% calc(7 * var(--to-em)) 3%;
}

.news-category {
    grid-area: 1 / 1 / 2 / 2;
    font-size: calc(26 * var(--to-em));
    margin-top: 0.4230769230769231em;
    margin-left: 0;
    margin-right: 1em;
}

.category-badge {
    padding: 0 1.923076923076923em;
    border-radius: 0.5384615384615385em;
}

.news-date {
    grid-area: 1 / 2 / 2 / 3;
    font-size: calc(30 * var(--to-em));
    letter-spacing: 0.04em;
    margin-top: 0.2666666666666667em;

}

.news-title {
    grid-area: 2 / 1 / 3 / 3;
    font-size: calc(32 * var(--to-em));
}

.news-arrow {
    grid-area: 1 / 3 / 3 / 4;

    width: calc(82 * var(--to-em));
    height: calc(82 * var(--to-em));
    margin-bottom: calc(10 * var(--to-em));
    margin-right: calc(33 * var(--to-em));

    span {
        font-size: calc(31 * var(--to-em));
    }
}

.news-archive-layout {
    grid-template-columns: 1fr;
}

.news-sidebar-card {
    padding: calc(18 * var(--to-em));
}

.news-filter-list,
.news-year-list {
    gap: calc(10 * var(--to-em));
}

.news-filter-list a,
.news-year-list a {
    font-size: calc(26 * var(--to-em));
}

.pagination,
.news-archive-pagination .page-numbers {
    gap: calc(10 * var(--to-em));
}

.pagination a,
.pagination span,
.news-archive-pagination .page-numbers a,
.news-archive-pagination .page-numbers span {
    min-width: calc(58 * var(--to-em));
    height: calc(58 * var(--to-em));
    font-size: calc(24 * var(--to-em));
}

.news-single-card {
    padding: calc(18 * var(--to-em));
}

.news-single-meta {
    gap: calc(20 * var(--to-em));

    .category-badge {
        font-size: 0.9em;
    }
}

.news-single-back {
    text-align: center;
}

.route-view-all,
.news-view-all {
    text-align: center;
    margin-top: calc(44 * var(--to-em));
}

.news-single-nav {
    grid-template-columns: 1fr;
}

/* ==========================================
Route Intro Section
========================================== */
.route-intro-section {
    padding: calc(38 * var(--to-em)) 0 calc(100 * var(--to-em));
}

.route-intro-content {
    flex-direction: column;
    gap: calc(85 * var(--to-em));
}

.route-map {}

.route-text {
    width: 100%;

    p {
        margin-top: calc(25 * var(--to-em));
        line-height: 1.5;
    }
}

.route-icon {
    width: 25.333333333333336vw;
    bottom: -13%;
    right: 1%;
}

/* ==========================================
Featured Images Section
========================================== */
.featured-images-section {
    padding: calc(101 * var(--to-em)) 0 calc(81 * var(--to-em));
}

.featured-grid {
    grid-template-columns: 1fr;
    gap: calc(71 * var(--to-em));
}

.featured-item img {
    height: auto;
    aspect-ratio: 841/435;
}

.featured-item h3 {
    font-size: calc(35 * var(--to-em));
    letter-spacing: 0.03em;
    padding: 0.2285714285714286em 1em 0.4857142857142857em;
}

/* ==========================================
Resources Section
========================================== */
.resources-section {
    padding: calc(126 * var(--to-em)) 0 calc(117 * var(--to-em));
    background-color: var(--bg-color);
}

.resources-grid {
    grid-template-columns: 1fr;
    gap: calc(55 * var(--to-em));
}

.resource-card {
    border-radius: calc(43 * var(--to-em));
    padding: calc(82 * var(--to-em)) 2.125rem calc(85 * var(--to-em));
}

.resource-card h3 {
    font-size: calc(35 * var(--to-em));
    letter-spacing: 0.02em;
}

.resource-desc {
    font-size: calc(30 * var(--to-em));
    letter-spacing: 0.05em;
    display: block;
    margin-top: 0.9em;
}

.resource-card:first-child .resource-icon {
    img {
        width: 26.88888888888889vw;
        left: 45%;
        bottom: -27%;
    }
}

.resource-card:last-child {
    padding: calc(62 * var(--to-em)) calc(50 * var(--to-em)) calc(79 * var(--to-em));

    .resource-icon img {
        width: 100%;
        position: relative;
        top: calc(10 * var(--to-em));
    }

    h3 {
        padding-left: 2em;
    }
}

/* ==========================================
banner
========================================== */
.partner-section {
    padding: calc(62 * var(--to-em)) 0 2.875rem;
}

.partner-logos {
    flex-direction: column;
    gap: calc(74 * var(--to-em));
}

.partner-logo:nth-child(1) {
    img {
        width: 24.8vw;
    }
}

.partner-logo:nth-child(2) {
    img {
        width: 56vw;
    }
}

.partner-logo:nth-child(3) {
    margin-top: calc(17 * var(--to-em));

    img {
        width: 75.6vw;
    }
}

/* ==========================================
Header
========================================== */
.header-container {
    align-items: center;
    width: calc((840/900)*100%);
    margin: 0.33333333333333337vw auto 2.888888888888889vw;
}

.header-logo {
    margin-left: 0.7777777777777778vw;

    a {
        display: flex;
    }

    img {
        width: 28.444444444444443vw;
    }

    p {
        font-size: calc(35 * var(--to-em));
        font-weight: var(--font-weight-bold);
        margin-top: 1.028571428571429em;
        letter-spacing: 0.04em;
        line-height: 1.4;
    }
}

/* ==========================================
Footer
========================================== */
footer {
    padding: calc(120 * var(--to-em)) 0 calc(105 * var(--to-em));
}

.footer-container {
    justify-content: center;
}

.footer-info {
    flex-direction: column;
    gap: calc(53 * var(--to-em));
}

.footer-logo {
    text-align: center;

    img {
        width: 64.66666666666666vw;
    }
}

.company-info {
    address {
        font-size: calc(35 * var(--to-em));
        line-height: 1.9;
        margin-top: 0.5714285714285714em;
        margin-left: 0.2em;
    }
}

.company-info-name {
    font-size: calc(42 * var(--to-em));
    text-align: center;
}