@charset "utf-8";

/* ヘッダここから */
.header {
    margin: 32px 0;
}

.header-title {
    text-align: center;
    text-decoration: none;
    font-size: 25px;
    font-family: "Italianno", cursive;
    font-weight: 400;
    font-style: normal;
}

.header-site-menu ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-site-menu ul li {
    font-size: 20px;
    margin: 0 90px;
    font-family: "Overlock SC", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.toggle-menu-button {
    display: none;
    background: none;
    border: none; 
    cursor: pointer;
    width: 50px;
    height:50px;
    background-size: contain;
}
/* ヘッダここまで */

/* メインここから */
.main {
    margin: 32px 100px;
    text-align: center;
}

.main #container {
    margin: 0 auto;
    max-width: max-content;
}

.main h2 {
    text-align: center;
    color: #a9a9a9;
    font-size: 40px;
    margin-bottom: 31px;
    font-family: "Overlock SC", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.main p {
    line-height: 28px;
    color: #2f4f4f;
}

.main .contents {
    margin: 52px 0;
}

#syoukai1 h3 {
    margin-bottom: 15px;
    font-family: "Overlock SC", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.set{
    margin-right: 350px;
}
.slideshow .slick-slide img {
    margin: 0 auto;
}

.slideshow li img {
    width: 1000px;
    height: 500px;
}

.sp_br {
    display: none;
}

.syoukai2 .text {
    text-align: left;
}

.gazou1 img{
    width: 700px;
    height: 400px;
    margin-left: 400px;
}
/* メインここまで */

/* フッタここから */
.footer {
    margin-bottom: 7px;
}

.footer-site-menu ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-site-menu ul li {
    font-size: 17px;
    margin: 24px 50px;
    font-family: "Overlock SC", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.footer-tel,
.footer-time,
.footer-address,
.privacypolicy,
.copyright {
    text-align: center;
    color: #2f4f4f;
}

.footer-tel {
    font-size: 20px;
}
/* フッタここまで */

/* ハンバーガーメニューここから */
.header-site-menu ul.active {
    display: block;
    background-color: #b0c4de;
    text-align: center;
}

.header-site-menu ul.active li {
    padding: 3px 0;
}
/* ハンバーガーメニューここまで */

/* 上へ戻るボタンここから */
#top_btn {
    position: fixed;
    right: 35px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: white;
    color: #778899;
    border: solid 2px #778899;
    opacity: 0.9;
    z-index: 10;
}

#top_btn:hover {
    opacity: 0.6;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}
/* 上へ戻るボタンここまで */

/* ふわっと表示させるエフェクトここから */
/* 初期状態で非表示 */
.fade-in {
    opacity: 0;
    transform: translateY(20px); /* 少し下に配置 */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* アニメーションが適用されたときに表示 */
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* それぞれの要素に遅延を加える */
.syoukai1 {
    transition-delay: 0.2s; /* 少し遅れて表示 */
}

.gazou1 {
    transition-delay: 0.7s; /* 更に遅れて表示 */
}

.syoukai2{
    transition-delay: 0.3s; /* 更に遅れて表示 */
}
/* ふわっと表示させるエフェクトここまで */

/* レスポンシブデザインここから */
@media(max-width:800px) {
    /* ハンバーガーメニューここから */
    .toggle-menu-button {
        display: block;
        background-image: url(./../images/hamburger.png);
        position: absolute;
        top: 29px;  /* 上端に配置 */
        left: 20px;  /* 左端に配置 */
        z-index: 10;
    }
    /* ハンバーガーメニューここまで */

    .header-site-menu ul {
        display: none;
    }

    /* メインここから */
    .main {
        margin: 32px 15px;
    }

    .main #container {
        margin: 0 auto;
    }

    .main h2 {
        font-size: medium;
    }

    .sp_br {
        display: block;
    }

    #gazou1 img {
        width: 100%;
        margin: 0 auto;
    }

    .set{
        margin: 0;
    }

    .slideshow li img{
        width: auto;
        height: auto;
    }

    .gazou1 img{
        width: auto;
        height: auto;
        margin: 0;
    }
    /* メインここまで */

    /* フッタここから */
    .footer-site-menu ul {
        flex-direction: column;
    }
    .footer-site-menu ul li {
        margin: 11px 0;
        font-size: 16px;
    }
    /* フッタここまで */

}
/* レスポンシブデザインここまで */