html {
    scroll-behavior: smooth;
}


body {
    background-color: #FFF1D8;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.3'/%3E%3C/svg%3E"),
        radial-gradient(circle 45rem at 90% 10rem,
            rgba(255, 224, 90, 0.3) 0%,
            transparent 35%),
        linear-gradient(90deg,
            #C8F1F3 0%,
            #E6EDE8 20%,
            #F8DFBB 40%,
            #F8DFBB 60%);
}

.main {
    overflow: hidden;
}

/* パンくずリスト */
.breadcrumb {
    width: 112rem;
    margin: 0 auto 8rem;
    padding-top: 16rem;
}

.breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb li {
    color: #1E2328;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: calc(5 / 100 * 16 / 10 * 1rem);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.breadcrumb li::after {
    content: "";
    margin-top: 1rem;
    width: 1rem;
    height: 1rem;
    border-top: 0.2rem solid #777;
    border-right: 0.2rem solid #777;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}



.breadcrumb li:last-child:after {
    display: none;
}

.breadcrumb a {
    text-decoration: none;
}

.breadcrumb li[aria-current="page"] {
    color: #EE7B49;
}


/* heroセクション */
.hero__img1 {
    position: relative;
}

.hero__img1 img {
    width: 30.8rem;
    height: 30.8rem;
    position: absolute;
    top: -3rem;
    right: 0rem;
}

.hero__img2 {
    position: relative;
}

.hero__img2 img {
    width: 31.4rem;
    height: 31.4rem;
    position: absolute;
    top: -3rem;
    right: 14rem;
}

.hero {
    width: 112rem;
    margin: 0 auto;
}

.hero__subtitle {
    color: #EE7B49;
    font-size: 2rem;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: calc(15 / 100 * 20 / 10 * 1rem);
    margin-bottom: 2rem;
}

.hero__subtitle::before {
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: inline-block;
    background-color: #EE7B49;
    margin-right: 2rem;

}

.hero h1 {
    color: #1E2328;
    font-size: 3.2rem;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: calc(10 / 100 * 32 / 10 * 1rem);
    margin-bottom: 2rem;
}

.hero__text {
    color: #1E2328;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(28 / 16);
    letter-spacing: calc(10 / 100 * 32 / 10 * 1rem);
}

.hero ul {
    display: flex;
    gap: 2rem;
    margin-top: 8rem;
    margin-bottom: 8rem;
}

.hero li {
    color: #EE7B49;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: calc(5 / 100 * 16 / 10 * 1rem);
    width: fit-content;
    background-color: #F5F5F5;
    border: #EE7B49 0.1rem solid;
    border-radius: 3rem;
    box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    cursor: pointer;
}

.hero li:hover {
    background-color: #EE7B49;
    color: #F5F5F5;
}
.hero a{
    display: block;
    padding: 1rem 2rem;
}






/* messageセクション */
.message {
    width: 112rem;
    margin: 0 auto 8rem;
    
}

.message h2 {
    color: #1E2328;
    font-size: 2.4rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(36 / 24);
    letter-spacing: calc(15 / 100 * 24 / 10 * 1rem);
}

.message h2::before,
.history h2::before {
    content: "";
    width: 0.3rem;
    height: 8rem;
    background-color: #EE7B49;
    display: inline-block;
    margin-right: 4rem;
    vertical-align: middle;
}

.message h3 {
    color: #1E2328;
    font-size: 4rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: calc(10 / 100 * 40 / 10 * 1rem);
    margin-top: 4rem;
    margin-bottom: 8rem;
}

.message h3 span {
    color: #1E2328;
    font-size: 3.2rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: calc(10 / 100 * 32 / 10 * 1rem);
}

.message__box {
    display: flex;
    width: 112rem;
    gap: 4rem;
    align-items: center;
}

.message__text {
    color: #1E2328;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(28 / 16);
    letter-spacing: calc(5 / 100 * 16 / 10 * 1rem);
    padding-bottom: 4rem;
    margin-bottom: 4rem;
    position: relative;
}

.message__text::after {
    content: "";
    width: 52rem;
    height: 0.1rem;
    background-color: #EE7B49;
    display: inline-block;
    position: absolute;
    bottom: 0rem;
    left: 0rem;

}

.message__img img {
    width: 48rem;
    height: auto;
    border-radius: 1.2rem;
}

.message__president {
    color: #1E2328;
    font-size: 2rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: calc(10 / 100 * 20 / 10 * 1rem);
    text-align: center;
}

.message__president span {
    color: #1E2328;
    font-size: 2.4rem;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: calc(10 / 100 * 24 / 10 * 1rem);
}



/* ヒストリーセクション */
.history {
    width: 112rem;
    margin: 0 auto;
    
}

.history h2 {
    color: #1E2328;
    font-size: 2.4rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(36 / 24);
    letter-spacing: calc(15 / 100 * 24 / 10 * 1rem);
}



.history dl {
    width: 108rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10.2rem;
    margin-left: 4rem;
}

.history dt {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: calc(10 / 100 * 24 / 10 * 1rem);
    width: 6.4rem;
    margin-bottom: 12.7rem;
    position: relative;
}

.history dt:last-of-type {
    margin-bottom: 8rem;
}

.history dt:after {
    content: "";
    width: 0.2rem;
    height: 9.7rem;
    background-color: #FFC2A8;
    position: absolute;
    top: 5rem;
    left: 50%;
}

.history dt:nth-last-of-type(1)::after {
    content: none;
}

.history dd {
    width: 100rem;
    display: flex;
    align-items: center;
}

.history dd:nth-last-of-type(1) {
    width: 100rem;
    display: flex;
    align-items: start;
    margin-top: 0.5rem;
}

.history .month {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: calc(10 / 100 * 20 / 10 * 1rem);
    margin-left: 21.6rem;
    width: 5rem;
    position: relative;
}

.history .month::after {
    content: "";
    width: 2rem;
    height: 0.1rem;
    background-color: #1E2328;
    position: absolute;
    top: 50%;
    right: -4.4rem;

}

.history__text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: calc(28 / 16);
    letter-spacing: calc(5 / 100 * 16 / 10 * 1rem);
    margin-left: 7.2rem;
}

.history dd:nth-of-type(2) {
    display: block;
}

.history dd div {
    display: flex;
    align-items: center;
    margin-top: 4rem;
}




/* トップページへ */
.to-top p {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 2rem;
    color: #1E2328;
    letter-spacing: calc(5 / 100 * 20 / 10 * 1rem);

}

.to-top__box {
    padding-bottom: 15.1rem;
}

.to-top {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: 23.6rem;
    margin: 0 auto;
}

.circle {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #EE7B49;

    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 0.2rem;
    margin: 0;
    border-radius: 999rem;
    background-color: #F5F5F5;
}

.arrow::before,
.arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.1rem);
    right: 0;
    width: 1rem;
    height: 0.2rem;
    border-radius: 9999px;
    background-color: #F5F5F5;
    transform-origin: calc(100% - 1px) 50%;
}

.arrow::before {
    transform: rotate(45deg);
}

.arrow::after {
    transform: rotate(-45deg);
}

/* トップページへここまで */


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

    /* パンくずリスト */
    .breadcrumb {
        width: 33.5rem;
        margin: 0 auto 2rem;
        padding-top: 11.6rem;
    }

    .breadcrumb ol {
        gap: 1.2rem;
        margin-bottom: 2rem;
    }

    .breadcrumb li {
        gap: 1rem;
        font-size: 1.2rem;
        line-height: calc(100 / 100);
        letter-spacing: calc(5 / 100 * 12 / 10 * 1rem);
    }

    .breadcrumb li::after {
        width: 0.7rem;
        height: 0.7rem;
    }


    /* heroセクション */

    .hero__img1 img {
        width: 14.4rem;
        height: 14.4rem;
        top: 1rem;
        right: -3rem;
    }

    .hero__img2 img {
        width: 14.4rem;
        height: 14.4rem;
        top: 1rem;
        right: 3rem;
    }

    .hero {
        width: 33.5rem;
        margin: 0 auto;
    }

    .hero__subtitle {
        font-size: 1.4rem;
        letter-spacing: calc(15 / 100 * 14 / 10 * 1rem);
        margin-bottom: 1.2rem;
    }

    .hero__subtitle::before {
        content: "";
        width: 1rem;
        height: 1rem;
        margin-right: 1.2rem;
    }

    .hero h1 {
        font-size: 2.4rem;
        letter-spacing: calc(10 / 100 * 24 / 10 * 1rem);
        margin-bottom: 1.2rem;
    }

    .hero__text {
        font-size: 1.4rem;
        line-height: 1.75;
        letter-spacing: calc(5 / 100 * 14 / 10 * 1rem);
        margin-bottom: 7.2rem;
    }

    .hero ul {
        display: none;
    }


    /* messageセクション */
    .message {
        width: 33.5rem;
        margin: 0 auto 7.2rem;
    }

    .message h2 {
        font-size: 1.8rem;
        line-height: 1.5;
        letter-spacing: calc(15 / 100 * 18 / 10 * 1rem);
    }

    .message h2::before,
    .history h2::before {
        height: 4rem;
        margin-right: 1.6rem;
    }

    .message h3 {
        font-size: 2rem;
        letter-spacing: calc(5 / 100 * 20 / 10 * 1rem);
        margin-top: 2rem;
        margin-bottom: 2.4rem;
    }

    .message h3 span {
        font-size: 1.6rem;
        letter-spacing: calc(5 / 100 * 16 / 10 * 1rem);
    }

    .message__box {
        width: 33.5rem;
        gap: 2.4rem;
        flex-direction: column-reverse;
    }

    .message__text {
        font-size: 1.4rem;
        line-height: 1.9;
        letter-spacing: calc(5 / 100 * 14 / 10 * 1rem);
        padding-bottom: 2.4rem;
        margin-bottom: 2.4rem;
    }

    .message__text::after {
        width: 33.5rem;
    }

    .message__img img {
        width: 33.5rem;
        height: auto;
    }

    .message__president {
        font-size: 1.4rem;
        letter-spacing: calc(10 / 100 * 14 / 10 * 1rem);
        text-align: right;
    }

    .message__president span {
        font-size: 1.8rem;
        letter-spacing: calc(10 / 100 * 18 / 10 * 1rem);
    }


    /* 沿革ここから */

    .history {
        width: 33.5rem;
        margin: 0 auto;
    }

    .history h2 {
        font-size: 1.8rem;
    }

    .history h2::before {
        height: 4rem;
        top: -0.6rem;
        left: -2rem;
        margin-left: 0rem;
    }

    .history dl {
        margin-top: 2rem;
        width: 33rem;
        margin-left: 0rem;
    }

    .history dt {
        font-size: 1.8rem;
        margin-bottom: 4.5rem;
    }

    .history dt:last-of-type {
        margin-bottom: 0rem;

    }

    .history dd {
        align-items: start;
    }

    .history .month {
        font-size: 1.4rem;
        margin-left: 0rem;
    }

    .history .month::after {
        right: -1.7rem;
    }

    .history__text {
        font-size: 1.3rem;
        width: 25rem;
        margin-left: 3.2rem;
    }

    .history dt:after {
        height: 2.4rem;
        top: 3.2rem;
        left: 40%;
    }

    .history dd div {
        margin-top: 0rem;
    }

    .month-top {
        margin-top: 0rem;
    }

    .history__text-top {
        margin-top: 0rem;
    }

    .history__text-bottom {
        margin-top: 1.6rem;
    }

    .month-bottom {
        margin-top: 1.6rem;
    }

    /* 沿革ここまで */

    /* トップへ */
    .to-top p {
        font-size: 1.6rem;
    }

    .to-top {
        gap: 2.4rem;
        width: 16.7rem;
    }

    .to-top__box {
        margin-top: 3.6rem;
        padding-bottom: 15.1rem;
    }
}