:root {
    --title-fontsize-1000-1440-23-25: clamp(1.4375rem, 1.1534rem + 0.4545vw, 1.5625rem);
    --title-fontsize-480-1000-22-23: clamp(1.375rem, 1.3173rem + 0.1923vw, 1.4375rem);
    --title-fontsize-250-480-19-21: clamp(1.1875rem, 1.0516rem + 0.8696vw, 1.3125rem);

    --fontsize-1000-1440-18-20: clamp(1.125rem, 0.8409rem + 0.4545vw, 1.25rem);
    --fontsize-480-1000-17-18: clamp(1.0625rem, 1.0048rem + 0.1923vw, 1.125rem);
    --fontsize-250-480-17-18: clamp(1.0625rem, 0.9946rem + 0.4348vw, 1.125rem);
}


span.st-animation {
    display: inline-block;
    font-weight: normal !important;
}



.section-title {
    margin: 0 auto;
    font-size: var(--title-fontsize-1000-1440-23-25);
    background-image: linear-gradient(to right, #24a424 100%, #fff 0px);
    background-size: auto 1px;
    background-repeat: repeat-x;
    background-position: right bottom;
    position: relative;
    display: inline-block;
    font-weight: normal !important;
}

.footer-menu1 .menu-item a .footer-menu2 .menu-item a {
    font-size: 18px;
}

@media screen and (max-width:1000px) {
    .footer-menu1 .menu-item a .footer-menu2 .menu-item a {
        font-size: 17px;
    }

}

@media screen and (max-width:480px) {
    .footer-menu1 .menu-item a .footer-menu2 .menu-item a {
        font-size: 17px;
    }

}



/* スクロールインジケーター（縦の棒）
.scroll-indicator-container {    
    position: absolute;    
    bottom: 20px;
    right: 5px;    
    z-index: 5;
}

.scroll-indicator-container span{    
    color: white;
    text-align: center;
}
.scroll-indicator {
    width: 1px;
    height: 50px;
    background-color: #ffffff;
    opacity: 0.8;
    animation: bounce 1.5s infinite;
    margin: 0 auto;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(3px);
    }
    50% {
        transform: translateY(0);
    }
} */

/* ----------------------------セクションタイトルアニメーション区間終了--------------------------------------------------------------------- */



main #main-section1 {
    position: relative;
    margin-top: 10vw;
    margin-bottom: 20vw;


}

main #main-section1 #section1-title-container {
    text-align: center;
    justify-content: center;
}

main #section1-title-container .section1-title {
    margin-top: 5vw;
}






main #main-section1 #section1-btns .section1-btn img {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 2vw;
    height: 3vw;
}



main #main-section1 #section1-btns {
    padding: 0 10vw 0 10vw;


    display: grid;
    grid-template-areas:

        "section1-btn1 section1-btn2 section1-btn3"
        "section1-btn4 section1-btn4 section1-btn4"

    ;

    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5vw;
    transition: 0.15s;
    position: relative;
    margin-top: 5vw;
    opacity: 1;
}

@media screen and (max-width: 1000px) {
    main #main-section1 #section1-btns {
        padding: 0 10vw 0 10vw;
        grid-template-areas:

            "section1-btn1 section1-btn2"
            "section1-btn3 section1-btn4"

        ;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 480px) {
    main #main-section1 #section1-btns {
        padding: 0 5vw 0 5vw;
        display: flex;
        flex-direction: column;

    }

    main #main-section1 #section1-btns .section1-btn img {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 10px;
        height: 20px;
    }
}




.section1-btn1 {
    grid-area: section1-btn1;
    margin: 0 1vw;
}

.section1-btn2 {
    grid-area: section1-btn2;
    margin: 0 1vw;

}

.section1-btn3 {
    grid-area: section1-btn3;
    margin: 0 1vw;
}

.section1-btn4 {
    grid-area: section1-btn4;
    margin: 0 1vw;
}




main #main-section1 .section1-btn {
    background-color: #f6e1be;
    padding: 6.2vw;
    /* セクション１のグリッドのボタンの幅が設定されているよ！ */
    position: relative;
    border-radius: 0px;

}


main #main-section1 .section1-btn:hover {
    background-color: #00a52766;
    transition: 0.2s;


    .section1-catchfrase {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: var(--fontsize-1000-1440-17-19);
        color: black;
        text-wrap: nowrap;
        z-index: 2;
        animation: p-fadein-and-out 0.2s linear normal both;
    }

}

@keyframes p-fadein-and-out {
    0% {
        opacity: 0;
        top: 65%;
    }

    100% {
        opacity: 1;
        top: 60%;
    }
}


main #main-section1 #section1-btns .section1-btn .section1-semi-title {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--title-fontsize-1000-1440-23-25);
    color: black;
    z-index: 2;
    font-weight: 100;
}

main #main-section1 #section1-btns .section1-btn .section1-catchfrase {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: black;
    text-wrap: nowrap;
    z-index: 2;
}

main #main-section1 #section1-bg1 {
    width: 35vw;
    height: 35vw;
    position: absolute;
    top: -10%;
    left: 8%;
    background-color: #fff0db;
    border-radius: 999px;
    z-index: 0;

}

main #main-section1 #section1-bg2 {
    width: 15vw;
    height: 15vw;
    position: absolute;
    right: 10%;
    bottom: -27%;
    background-color: #fff0db;
    border-radius: 999px;
}

/* SECTION1 */
/* タブレット、スマホ用 */
@media screen and (max-width:1000px) {
    .section-title {
        font-size: var(--title-fontsize-480-1000-22-23);
    }

    main #main-section1 #section1-btns {
        margin: 5vw 3vw 0 3vw;
    }

    main #main-section1 #section1-btns .section1-btn {
        padding: 7vw;
    }

    main #main-section1 #section1-btns .section1-btn .section1-semi-title {
        font-size: 2vw;
    }

    main #main-section1 #section1-btns .section1-btn .section1-catchfrase {
        font-size: 1.5vw;
        padding: 3vw 0 0 0;
    }

}



@media screen and (max-width:480px) {

    .section-title {
        font-size: var(--title-fontsize-250-480-19-21);
    }

    main #main-section1 #section1-btns .section1-btn .section1-semi-title {
        font-size: var(--title-fontsize-250-480-19-21);

    }

    main #main-section1 #section1-btns .section1-btn .section1-catchfrase {
        font-size: var(--fontsize-250-480-17-18);
        padding: 3vw 0 0 0;
    }

    main #main-section1 .section1-btn {
        min-height: 50px;
        min-width: 240px;
    }


}





/* ------------> */

/* sviamge区間 */
.svimage-container {
    position: relative;
    width: 100%;
    height: 7vw;
    z-index: 3;
}

.svimage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40vw;
    opacity: 0.5;
    filter: blur(2px);
}

/* ---------------------------> */









main #main-section2 {
    position: relative;
    background-color: #fff8ed;
    overflow: hidden;
    display: flex;
    padding: 20vw 5vw 40vw 5vw;
    background-image: url("http://localhost:8888/hasimotoyakkyoku/wp/wp-content/uploads/2025/01/section2bottom.svg");
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    gap: 4vw;
}

main #section2-left {
    position: relative;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}


main #section2-left div.section2-left-thumbnail-mask {
    position: relative;
    margin: 0 auto;
    width: 30vw;
    height: 30vw;
    overflow: hidden;
    min-width: 150px;
    min-height: 150px;
}

main #section2-left .section2-left-thumbnail-mask img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
}



main #section2-right {
    grid-area: section2-right;
    margin: 0 auto;
    position: relative;
    border-radius: 40px;
}

main #main-section2 #section2-title-container {
    text-align: center;
    justify-content: center;
}

main #main-section2 #section2-title-container #section2-title {
    color: #2c2c2c;
    padding: 5px 20px;
    font-size: var(--title-fontsize-1000-1440-23-25) !important;
    display: inline-block;
    text-wrap: nowrap;
    margin: 0 0 50px 0;
    text-align: left;
}

main #main-section2 #section2-explanation {
    padding-bottom: 11vw;
    font-size: var(--fontsize-1000-1440-17-19);
    color: #2c2c2c;
    padding: 10vw 0 0 7vw;
    display: block;
    margin-bottom: 20px;
    line-height: 1.8;
}

.sect2-exp {
    line-height: 3.0;
    /* spanタグの行間を少し広げる */
    display: block;
}

main #section2-right>img {
    position: absolute;
}

main #section2-right .kourai {
    right: -10vw;
    top: -15vw;
    width: 18vw;
}

main #section2-right .suribati {
    left: -45vw;
    bottom: -20vw;
    width: 20vw;
}

main #section2-right .leaf {
    right: -7vw;
    bottom: -20vw;
    width: 10vw;
}

main #section2-right .leafflower {
    left: -40vw;
    top: -15vw;
    width: 10vw;
}



@media screen and (max-width:1000px) {

    main #main-section2 {
        padding: 20vw 5vw 25vw 5vw;
        background-image: url("http://localhost:8888/hasimotoyakkyoku/wp/wp-content/uploads/2025/01/section2bottom.svg");
        background-size: contain;
        background-position: bottom center;
        background-repeat: no-repeat;
    }


    main #main-section2 #section2-title-container #section2-title {
        font-size: var(--title-fontsize-480-1000-22-23);
    }

    main #main-section2 #section2-explanation {
        font-size: var(--fontsize-480-1000-17-18);
    }

    main #section2-right .kourai {
        right: -10vw;
        top: -10vw;
        width: 150px;
    }

    main #section2-right .suribati {
        left: -40vw;
        bottom: -10vw;
        width: 120px;
    }

    main #section2-right .leaf {
        right: 0;
        bottom: -10vw;
        width: 80px;
    }

    main #section2-right .leafflower {
        left: -40vw;
        top: -10vw;
        width: 80px;
    }


}

@media screen and (max-width:480px) {

    main #main-section2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    div.section2-left {
        width: 100%;
        margin: 0 auto;
    }

    main #main-section2 #section2-title-container #section2-title {
        margin-top: 50px;
        font-size: 14px !important;
        text-wrap: wrap;
        letter-spacing: 1px;
    }

    main #main-section2 #section2-explanation {
        font-size: 18px;
        line-height: 25px;
        margin: 0 auto;
        letter-spacing: 1px;
    }

    main #section2-right .kourai {
        display: none;
    }

    main #section2-right .suribati {
        display: none;
    }

    main #section2-right .leaf {
        display: none;
    }

    main #section2-right .leafflower {
        display: none;
    }


}









/* ニュースセクションの全体スタイル */




.news-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: transparent;
}

/* .news-container-title {
    width: 100%;
    color: #2c2c2c;
    font-size: 20px;
    text-align: center;
    background-image: none;
} */

/* 各ニュースアイテムのスタイル */
.news-item {
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #fffdf8;
    transition: transform 0.2s, box-shadow 0.2s;
    /* ホバー時のアニメーション */
    z-index: 2;
    height: 70px;
}


.news-item h3 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    color: #2b2b2b;
    /* タイトルの色 */
    margin: 0;
    /* 余白をリセット */
    text-align: center;
}

.news-item p span {
    margin: 0 0 0 5vw;
    font-size: 12px;
}

/* ニュースタイトルのリンク */
.news-item h3 a {
    margin-left: 5vw;
    text-decoration: none;
    /* 下線を消す */
    color: #2b2b2b;
    /* リンクの色 */
    transition: color 0.2s;
    /* カラー変更のアニメーション */
}

/* ホバー時のリンク色 */
.news-item h3 a:hover {
    color: #005177;
    /* 濃い青に変更 */
}

/* ニュース本文 */
.news-item p {
    font-size: 16px;
    /* 本文のフォントサイズ */
    color: #6b6b6b;
    /* 本文の色 */
}

@media screen and (max-width:1000px) {

    .news-item {
        height: 40px;
    }


    .news-item h3 {
        font-size: 12px;
    }

    .news-item p span {
        margin: 0 0 0 5vw;
        font-size: 10px;
    }


    /* ニュース本文 */
    .news-item p {
        font-size: 15px;
        /* 本文のフォントサイズ */
    }
}

@media screen and (max-width:768px) {
    .news-item h3 {
        font-size: 12px;
    }
}

@media screen and (max-width:480px) {

    .news-item {
        justify-content: center;
    }

    .news-item {
        height: 30px;
    }


    .news-item h3 {
        font-size: 14px;

    }

    .news-item h3 a {
        text-wrap: nowrap;
        font-size: 12px;
    }

    .news-item p span {
        display: block;
        margin: 0;
        font-size: 10px;
    }


    /* ニュース本文 */
    .news-item p {
        font-size: 13px;
        /* 本文のフォントサイズ */
    }
}