@charset "UTF-8";

:root {
    --main-color: #FCEDA8;
    --sub-color: #4CAF50;

    /* テキストフォント */
    --font-base-family: 'Noto Sans JP', sans-serif;
    --font-base-size: 17px;
    --font-base-weight-medium: 500;
    --font-base-weight-bold: 700;
    --font-base-weight-black: 900;
    --font-base-line-height: 1.8;

    /* テキストカラー */
    --base-text-color: #343434;
    --green-text: #0C9B23;
    --white-text: #FFFFFF;

    /* 丸角緑ボタン背景グラデーション */
    --marukado-button-gradient: linear-gradient(180deg, #4CAF50 0%, #359B39 100%);
    --marukado-button-gradient-hover: linear-gradient(180deg, #3BA840 0%, #128717 100%);
}

/* ===========================================================================
ヒーローエリア
=========================================================================== */

.hero {
    position: relative;
    min-height: calc(52vw + (2 * 16.88vw) + 3.5vw + 4.2vw);
    /* ↑ 52vw: hero-links top
         2*16.88vw: リンク画像2行分の高さ
         3.5vw: row-gap（縦ギャップ）
         4.2vw: 82px */
}

/* ヒーロー背景 */
.hero-bg {
    position: absolute;
    width: 100%;
    height: 66.51vw; /* PC画面幅1920px基準 */
    /* height: 1277px; */
    background-image:
        linear-gradient(
            to bottom,
            #553016 0%,
            #40220F00 7%
        ),
        url('../../image/top/hero-bg.webp');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    z-index: -2;
}

/* キャッチコピー */
.hero-text-image {
    position: absolute;
    top: 5.73vw; /* PC画面幅1920px基準 */
    /* top: 110px; */
    left: 50%;
    transform: translateX(-50%);
    display: block;
}

.hero-illustration img {
    position: absolute;
    top: 31.77vw; /* PC画面幅1920px基準 */
    width: 100%;
}

/* 3×2 リンク画像グリッド */
.hero-links {
    position: absolute;
    top: 52vw;         /* PC画面幅1920px基準 */
    left: 50%;
    transform: translateX(-46%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2.5vw; /* PC画面幅1920px基準 */
    row-gap: 2.9vw;    /* PC画面幅1920px基準 */
    width: 59.43vw;    /* PC画面幅1920px基準 */
    /* width: 1141px; */
    max-width: 1141px;
    z-index: 2;
}

.hero-links .hero-links-content {
    position: relative;
    display: inline-block;
}

/* 1行目の奇数 */
.hero-links .hero-links-content:nth-child(1),
.hero-links .hero-links-content:nth-child(3) {
    transform: translateY(-1.5vw);
}

/* 2行目の偶数 */
.hero-links .hero-links-content:nth-child(4),
.hero-links .hero-links-content:nth-child(6) {
    transform: translate(-1.2vw, -1.5vw);
}

/* 5番目：左だけ（Yはそのまま） */
.hero-links .hero-links-content:nth-child(5) {
    transform: translateX(-1.2vw);
}

/* リンク画像の調整 */
.hero-links .hero-links-content-image {
    width: 17.91vw; /* PC画面幅1920px基準 */
    max-width: 344px;
    min-width: 149px;
    /* width: 344px; */
    height: auto;
    display: block;
}

.hero-text-image img {
    width: clamp(188px, 15.57vw, 299px); /* PC画面幅1920px基準 */
    height: clamp(92px, 24.27vw, 466px); /* PC画面幅1920px基準 */
}

.hero-links-text {
    color: var(--white-text);
    font-weight: var(--font-base-weight-black);
    font-size: clamp(13px, calc(13px + 14 * ((100vw - 769px) / 1151)), 26px); /* PC画面幅769px～1920px基準 */
    /* font-size: 26px; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0px 0px 11.3px #000000;
}

/* 緑ボタン */
.hero-links-content .common-button {
    position: absolute;
    top: 97%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hero-links-content .common-button > a {
    height: min(2.083vw, 40px);
    text-align: center;
    white-space: nowrap;
    font-size: clamp(0.75rem, 0.499rem + 0.52vw, 1.125rem); /* PC画面幅769px～1920px基準 */
    /* font-size: clamp(0.75rem, 0.499rem + 0.52vw, 1.058rem); */
    padding: 1.333em 2.778em 1.333em 1.111em;

    background-size: clamp(0.75rem, 0.416rem + 0.7vw, 1.25rem) auto; /* PC画面幅769px～1920px基準 */
    background-position: calc(100% - 1.111em) center;
}

/* ===========================================================================
システム紹介エリア
=========================================================================== */

.main-content-1 {
    background-color: var(--main-color);
}

.main-content-1 .main-content-1-kaisetsu {
    font-weight: bold;
}

.junkanzu {
    /* padding: 37px 152px 165px 171px; */
    padding-top: 37px;
    padding-bottom: 165px;
    padding-right: 7.92vw; /* PC画面幅1920px基準 */
    padding-left: 8.91vw;  /* PC画面幅1920px基準 */
}

.junkanzu img {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ===========================================================================
新着情報エリア
=========================================================================== */

.main-content-2 {
    position: relative;
    z-index: 0;
    padding-top: 2.8vw; /* PC画面幅1920px基準 */
}

.main-content-2::before {
    content: "";
    position: absolute;
    /* top: 0; */
    top: 2px;
    left: 0;
    width: 100%;
    /* aspect-ratio: 1920 / 55.5; */
    height: 100%;
    background-image: url('../../image/top/newinfo-uetuchi.svg');
    background-repeat: repeat-x;
    background-position: top center;
    background-size: contain;
    background-size: 100% auto;
    z-index: -1;
}

.main-content-2 .new-info-ecosakukun {
    position: absolute;
    top: -4%;
    left: 50%;
    transform: translate(-220%, -50%);
    width: 92px;
    height: auto;
}

.main-content-2 .new-info-ecomityan {
    position: absolute;
    top: -3%;
    left: 50%;
    transform: translate(80%, -50%);
    width: 105px;
    height: auto;
}

.main-content-2 .new-info-ninjin-left {
    position: absolute;
    top: -0%;
    left: 50%;
    transform: translate(-210%, -50%);
    width: 190px;
    height: auto;
    z-index: -2;
}

.main-content-2 .new-info-ninjin-center {
    position: absolute;
    top: -1%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 190px;
    height: auto;
    z-index: -2;
}

.main-content-2 .new-info-ninjin-right {
    position: absolute;
    top: 0.1%;
    left: 50%;
    transform: translate(100%, -50%);
    width: 190px;
    height: auto;
    z-index: -2;
}

.background-color-beige {
    background-color: #F0E19D;
    position: relative;
    z-index: 0;
}

.main-content-2 .background-color-beige .container-1200 {
    padding-top: 1.4vw;     /* PC画面幅1920px基準 */
    /* padding-top: 2px; */
    padding-bottom: 4.12vw; /* PC画面幅1920px基準 */
    /* padding-bottom: 80px; */
}

.new-info-lists {
    display: flex;
    flex-direction: column;
    /* gap: 1.04vw; */
    gap: 20px;
    padding: 42.5px 0 35px 0;
}

.new-info-content {
    display: flex;
    gap: 40px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--green-text);
    background-color: #FFFFFF;
    padding: 25px 50px 25px 30px;
}

.new-info-date {
    color: var(--green-text);
    font-weight: bold;
    white-space: nowrap;
}

.main-content-2 .common-button > a {
    padding: 0.75em 2.778em 0.75em 1.111em;
    background-position: calc(100% - 1.111em) center;
}

/* ===========================================================================
アクセス案内エリア
=========================================================================== */

.main-content-3 {
    position: relative;
    z-index: 0;
    background-image: url('../../image/top/company-bg-green.webp');
    background-repeat: repeat;
    background-position: top center;
    background-size: 48px auto;
    padding-top: 7.3vw; /* PC画面幅1920px基準 */
}

.main-content-3::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../image/top/newinfo-shitatuchi.svg');
    background-repeat: repeat-x;
    background-position: top center;
    background-size: 100% auto;
    z-index: -1;
}

.main-content-3 .midashi::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 25px;
    background-image: url('../../image/basic/happa_yellow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.main-content-3 .midashi {
    color: var(--white-text);
}

.main-content-3 .access-map {
    padding: 55px 50px 41px 50px;
    width: 100%;
}

.main-content-3 .access-map img {
    border-radius: 20px;
    border: 10px solid #269A2B;
}

.main-content-3 .access-map img {
    width:min(1100px, 100%);
    height: auto;
    display: block;
}

.main-content-3 .main-content-3-text {
    padding-bottom: 170px;
    font-size: 18px;
    font-weight: bold;
    color: var(--white-text);
}

/* ▼ ～768px：タブレット */
@media screen and (max-width: 768px) {

    .container-1200 {
        padding-left: 20px;
        padding-right: 20px;
    }

    /*===========================================================================
    *   main
    ===========================================================================*/

    main {
        overflow: hidden;
    }

    /* ===========================================================================
    ヒーローエリア
    =========================================================================== */

    .hero {
        position: relative;
        height: 280vw; /* PC画面幅768px基準 */
        /* height: 2150px; */
    }

    /* ヒーロー背景 */
    .hero-bg {
        height: 600px;
        /* height: 1277px; */
        background-image:
            linear-gradient(
                to bottom,
                #553016 0%,
                #40220F00 4%
                ),
            url(../../image/top/hero-bg-mobile.webp);
        top: 0;
    }

    /* キャッチコピー */
        .hero-text-image {
        top: 92px;
    }

    .hero-illustration img {
        top: 54.69vw; /* PC画面幅768px基準 */
    }

    .hero-text-image img {
        width: 39.1vw; /* PC画面幅768px基準 */
        height: auto;
    }

    /* 3×2 リンク画像グリッド */
    .hero-links {
        top: 117.19vw; /* PC画面幅768px基準 */
        /* top: 490px; */
        transform: translateX(-50%);
        grid-template-columns: repeat(2, 1fr);
        column-gap: 10px;
        row-gap:45.76px;
        width: auto;
        max-width: none;
    }

    /* 偶数番目だけ下にずらす（2,4,6） */
    .hero-links .hero-links-content:nth-child(even) {
        transform: translateY(50px);
    }

    /* 4番目だけもう少し下にずらす */
    .hero-links .hero-links-content:nth-child(4) {
        transform: translateY(42px);
    }
    
    /* 6番目だけもう少し下にずらす */
    .hero-links .hero-links-content:nth-child(6) {
        transform: translateY(50px);
    }

    /* 1行目の奇数 （Y上ずらしをリセット）*/
    .hero-links .hero-links-content:nth-child(1),
    .hero-links .hero-links-content:nth-child(3) {
        transform: translateY(0px);
    }

    /* 5番目：左だけ（X左ずらしをリセット） */
    .hero-links .hero-links-content:nth-child(5) {
        transform: translateX(0px);
    }

    .hero-links .hero-links-content .hero-links-content-image {
        width: 44.79vw;  /* PC画面幅768px基準 */
        height: 33.13vw; /* PC画面幅768px基準 */
        /* width: 344px;
        height: 254px; */
        /* gap: 5px; */
    }

    .hero-links-text {
        font-size: clamp(1.25rem, 0.451rem + 2.97vw, 1.875rem);
    }

    .hero-links-content .common-button > a {
        padding: 1em 1.875em 1em 0.625em;
        width: auto;
        height: 45px;
        /* font-size: 18px; */
        font-size: clamp(16px, 0.097rem + 3.7vw, 1.875rem); /*スマホ画面幅390px～768px基準*/
        gap: 5px;

        background-size: clamp(0.938rem, -0.03rem + 3.97vw, 1.875rem) auto;
        /* background-size: 20px auto; */
        background-position: calc(100% - 0.625em) center;
        /* background-position: calc(100% - 20px) center; */
    }

    /* ===========================================================================
    システム紹介エリア
    =========================================================================== */

    .main-content-1 .main-content-1-kaisetsu {
        font-size: 16px;
    }

    .junkanzu {
        padding-right: 0;
        padding-left: 0;
        padding-top: 3.9vw;
        padding-bottom: 100px;
    }

    /* ===========================================================================
    新着情報エリア
    =========================================================================== */

    .main-content-2 {
        padding-top: 2.7vw; /* PC画面幅768px基準 */
    }

    .main-content-2 .new-info-ecosakukun {
        top: -2%;
        transform: translate(-200%, -50%);
        width: 55px;
    }

    .main-content-2 .new-info-ecomityan {
        top: -2%;
        transform: translate(90%, -50%);
        width: 60px;
    }

    .main-content-2 .new-info-ninjin-left {
        transform: translate(-180%, -50%);
        width: 125px;
    }

    .main-content-2 .new-info-ninjin-center {
        top: -1%;
        width: 125px;
    }
    .main-content-2 .new-info-ninjin-right {
        transform: translate(80%, -50%);
        width: 125px;
    }

    .new-info-date,
    .new-info-text {
        font-size: 16px;
    }

    .new-info-content {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 20px 30px 20px 20px;
    }

    .new-info-lists {
        margin: 0;
        padding-top: 31px;
        padding-bottom: 40px;
    }

    .main-content-2 .background-color-beige .container-1200 {
        padding-top: 30px;
        padding-bottom: 60px;
    }

    .main-content-2 .common-button > a {
        font-size: 18px;
        line-height: 1.5px;
        padding: 0 106px 0 86px;

        background-position: calc(100% - 86px) center;
    }

    /* ===========================================================================
    アクセス案内エリア
    =========================================================================== */

    .main-content-3 .midashi::before {
        width: 26px;
        height: 20px;
    }

    .main-content-3 .access-map {
        padding: 25px 0 28px 0;
    }

    .main-content-3 .main-content-3-text {
        padding-bottom: 131px;
        font-size: 16px;
    }

}

@media screen and (min-width: 550px) and (max-width: 768px) {
    .hero-bg {
        height: 900px;
    }
}

@media screen and (min-width: 530px) and (max-width: 620px) {
    .hero-illustration img {
        top: 57vw; /* PC画面幅620px基準 */
    }
}

@media screen and (min-width: 431px) and (max-width: 529px) {
    .hero-illustration img {
        top: 60vw; /* PC画面幅620px基準 */
    }
}

/* ▼ 430px：スマホ */
@media screen and (max-width: 430px) {

    .hero {
        height: 300vw; /* PC画面幅430px基準 */
        /* height: 1250px; */
    }

    /* 3×2 リンク画像グリッド */
    .hero-links {
        top: 132.56vw; /* PC画面幅620px基準 */
        /* top: 570px; */
        column-gap: 8px;
        row-gap:45.76px;
    }

    .hero-text-image img {
        width: 188px;
        height: 273px;
    }

    .hero-illustration img {
        top: 300px;
    }

    .hero-links .hero-links-content .hero-links-content-image {
        width: 180px;
        height: 136.6px;
        gap: 5px;
    }

    /* 偶数番目だけ下にずらす（2,4,6） */
    .hero-links .hero-links-content:nth-child(even) {
        transform: translateY(23px);
    }

    /* 4番目だけもう少し下にずらす */
    .hero-links .hero-links-content:nth-child(4) {
        transform: translateY(35px);
    }

    .hero-links-text {
        font-size: 18px;
    }

    .hero-links-content .common-button > a {
        height: 35px;
        padding: 0.71875em 1.875em 0.71875em 0.625em;
    }

    /* ===========================================================================
    システム紹介エリア
    =========================================================================== */

    .junkanzu {
        padding-top: 6px;
    }

}

/* ▼ 375px：スマホ */
@media screen and (max-width: 375px) {

    .hero {
        height: 1125px;
    }

    .hero-links {
        top: 490px;
        column-gap: 5px;
    }

}