@charset "utf-8";

/* ==========================================================================
   Lower Page Common Styles
   ========================================================================== */

/* 下層ページ共通：背景とフォント */
.areaMain {
    background-color: var(--color-lightgreen);
    padding: 2rem 4rem 4rem;
}

/* パンくずリスト */
.breadcrumb p {
    color: #333;
    margin: 0 0 13px 0;
    font-size: 1.4rem;
}

.breadcrumb p a {
    text-decoration: none;
    color: #333;
}

.breadcrumb p a:visited {
    color: #333;
}

/* 下層ページ共通：白枠コンテナ */
.main-container {
    width: 100%;
    max-width: 1118px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 2.0rem;
    padding: 6.0rem 5.2rem 3.2rem;
    box-sizing: border-box;
    overflow: hidden;
}

/* h1を包む専用のコンテナ */
.page-title-wrapper {
    text-align: center;
    width: 100%;
    margin-bottom: 4.0rem;
    /* 40px */
    overflow: visible;
    isolation: isolate;
    z-index: 0;
}

/* 共通の大見出し（h1） */
.page-title {
    position: relative;
    display: inline-block;
    color: #207142;
    font-weight: 600;
    font-size: 3.8rem;
    line-height: 1.3;
    /*     margin: 4.0rem auto; */
    text-align: center;
    z-index: 2;

    /* フチ取りは計算ズレを防ぐため px を維持 */
    text-shadow:
        3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
        2.1px 2.1px 0 #fff, -2.1px -2.1px 0 #fff, 2.1px -2.1px 0 #fff, -2.1px 2.1px 0 #fff,
        2.8px 1.2px 0 #fff, -2.8px -1.2px 0 #fff, 2.8px -1.2px 0 #fff, -2.8px 1.2px 0 #fff,
        1.2px 2.8px 0 #fff, -1.2px -2.8px 0 #fff, 1.2px -2.8px 0 #fff, -1.2px 2.8px 0 #fff,
        4px 4px 0px rgba(24, 123, 20, 0.2);
}

/* 疑似要素（水彩装飾） */
.page-title::before,
.page-title::after {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: .5;
}

/* 左側の水彩素材 */
.page-title::before {
    width: 12.0rem;
    height: 12.0rem;
    left: -9.0rem;
    background-image: url('../assets/img_h1_left.png');
    top: 2rem;
}

/* 右側の水彩素材 */
.page-title::after {
    width: 8rem;
    height: 8rem;
    right: -6rem;
    background-image: url('../assets/img_h1_right.png');
    bottom: -4rem;
}

/* サブテキスト (EVENT CALENDAR / ABOUT) */
.page-title span {
    display: block;
    font-size: 1.4rem;
    color: #AA7D49;
    letter-spacing: 0.2em;
    margin-top: 0.8rem;
    text-shadow: none;
    font-weight: 600;
}

/* --- レスポンシブ調整 --- */
@media (max-width: 768px) {
    .areaMain {
        padding: 2.0rem;
        /* 余白を狭く */
    }

    .main-container {
        padding: 4.0rem 2.0rem 2.4rem;
        /* 内側の余白を調整 */
    }

    .page-title {
        font-size: 2.8rem;
        /* タイトルを少し小さく */
    }

    .page-title::before,
    .page-title::after {
        width: 8.0rem;
        /* 装飾も小さく */
        height: 8.0rem;
    }

    .page-title::before {
        left: -4.0rem;
    }

    .page-title::after {
        right: -4.0rem;
    }
}