/* ==========================================================================
   共通
   ========================================================================== */
* {
    box-sizing: border-box;
}
html {
    overflow-x: hidden;
}
html body {
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN",
        "Hiragino Mincho Pro", "ヒラギノ明朝 ProN", "ヒラギノ明朝 Pro",
        "Noto Serif JP", "ＭＳ 明朝", "MS Mincho", serif;
    min-width: 0;
    overflow-x: hidden;
}
html body p,
html body li,
html body .no_data {
    font-size: 1em !important;
}
p,
a {
    color: #222;
}
img {
    max-width: 100%;
    height: auto !important;
}
figure {
    margin: 0;
    padding: 0;
}
/* sr（screen reader only） */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
#header {
    padding: 0.5em 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}
#header h1, #header > div {
    flex: 0 2 40%;
    margin: 0.65em 0;
    font-size: 2em;
}
#header h1 img, #header > div img {
    vertical-align: middle;
    max-width: 420px;
}
#header nav {
    flex: 0 1 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2em;
}
.hamburger-button,
.menu-overlay {
    display: none; /* PCではボタンとオーバーレイを非表示 */
}

/*
 * メニュー項目
 */
#header nav > ul {
    flex: 0 1 calc(80% - 2em / 2);
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: 1em;
}
#header nav > ul li {
    flex: 0 1 auto;
}
#header nav > ul li a {
    transition: 0.3s;
}
#header nav > ul li a:hover {
    opacity: 0.8;
}
#header nav > ul li:nth-child(1) > a > img {
    max-width: 100px;
}
#header nav > ul li:nth-child(2) > a > img {
    max-width: 108px;
}
#header nav > ul li:nth-child(3) > a > img {
    max-width: 67px;
}
#header nav > ul li:nth-child(4) > a > img {
    max-width: 70px;
}

/*
 * Languageボタン
 */
.language-dropdown-wrapper {
    flex: 0 1 calc(20% - 2em / 2);
    position: relative;
    display: inline-block;
}
.language-dropdown {
    font-family: serif;
}
.language-dropdown > summary {
    list-style: none;
    display: block;
}
.language-dropdown > summary::-webkit-details-marker {
    display: none; /* Chrome/Safari */
}
.language-dropdown > summary {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #aaa;
    border-radius: 999px;
    cursor: pointer;
    background-color: #fff;
    color: #333;
    font-size: 1rem;
}
.language-dropdown .arrow {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-bottom: 2px solid #555;
    border-right: 2px solid #555;
    transform: rotate(45deg);
    margin-left: 12px;
    margin-bottom: 2px;
}
.language-dropdown > ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 8px;
    padding: 8px 0;
    width: 100%;
    min-width: 180px;
    list-style: none;
}
.language-dropdown li a {
    display: block;
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
}
.language-dropdown li a:hover {
    background-color: #f4f4f4;
}
.language-dropdown > ul {
    display: none; /* --- 開いた時の処理 --- */
}
.language-dropdown[open] > ul {
    display: block; /* 開いたら表示 */
}
.language-dropdown[open] .arrow {
    transform: rotate(-135deg); /* 上向き */
    margin-bottom: 0;
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
#footer {
    float: none;
    margin: 0;
    background-image: none;
}
.footer_area {
    background-color: #f8f8f8;
    border-top: 1px solid #cad1d1;
    position: relative;
}
.footer_area_inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2em;
}
.footer_area_inner_left img {
    max-width: 361px;
}

.footer_area_info {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2em;
}
.footer_area_info > .footer_subtitle {
    flex-basis: 100%;
}
.info_1, info_2 {
    flex-basis: 50%;
}

.footer_subtitle {
    font-size: 1.25em !important;
    font-weight: 700;
    position: relative;
    margin: 0.5em 0 0.5em;
}
.footer_subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.25em;
    border-bottom: 1px solid #000;
    width: 50%;
    min-width: 9em;
}
.facility_details {
    margin: 1em 0 2em;
    padding: 0 0 0 1em;
}

/*
 * コンテンツ
 */
/* 連絡先名 */
.contact_name {
    font-size: 1.1em !important;
    font-weight: 700;
    margin: 1.5em 0 0;
}

/* 営業時間等 */
.facility_details {
    margin-top: 0.75em;
}
.facility_details p {
    margin: 0;
    padding: 0;
    display: flex;
}
.facility_details p.contact_details {
    display: block;
}
.facility_details p > span:nth-child(1) {
    flex-basis: 6em;
    flex-shrink: 0;
    display: inline-block;
}
.facility_details p > span:nth-child(2) {
    flex: 1; 
}
span.text-group {
    display: inline-block;
    vertical-align: top;
}

/*
 * パンフレット
 */
.pamphlet_area {
    position: absolute;
    right: 0;
    bottom: 3em;
    width: 545px;
    height: 200px;
    background-image: url(/img/memorial-park/img_footer_pamphlet.png);
    background-size: cover;
    transition: 0.3s;
}
.pamphlet_area:hover {
    opacity: 0.8;
}
.pamphlet_area::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    background-image: url(/img/memorial-park/bg_footer_leaflet.png);
    width: calc(379px / 379 * 145);
    height: calc(145px * 90 / 379);
    background-size: contain;
}
.pamphlet_area a {
    display: block;
    width: 100%;
    height: 100%;
}
.pamphlet_area p {
    position: absolute;
    bottom: 1em;
    width: 10em;
    background-color: #fff;
    margin: 0;
    padding: 0.25em 1em;
    color: #222;
    display: flex;
    min-height: 35px;
}
.pamphlet_area p img {
    max-height: 16px;
    margin: auto 0;
    padding: 0;
}
.pamphlet_area p::after {
    content: "";
    position: absolute;
    top: calc(50% - 7px * 1.41421356 / 2);
    right: 1em;
    display: block;
    width: 8px;
    height: 8px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(-45deg);
}

/*
 * コピーライト
 */
.copyright {
    padding: 0 2em;
    text-align: center;
    font-size: 0.875em;
}

/* --------------------------------------------------------------------------
   トップへ戻るボタン
   -------------------------------------------------------------------------- */
#pageTopBtn {
    position: fixed;
    right: 3em;
    bottom: 3em;
    width: 26px;
    height: 89px;
    background-image: url(/img/memorial-park/page_top.png);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    cursor: pointer;
    filter: drop-shadow(0px 0px 1px rgb(255, 255, 255)) drop-shadow(0 0 1px rgb(255, 255, 255));
    z-index: 2;
}
#pageTopBtn.is-visible {
    opacity: 1;
    pointer-events: auto; /* クリックできるようにする */
}

/* ==========================================================================
   トップページ
   ========================================================================== */
/* --------------------------------------------------------------------------
   メインビジュアルスライドショー
   -------------------------------------------------------------------------- */
/*
 * スライドショー
 */
/* スライド表示調整 */
#top_photo {
    position: relative;
}
#mp_control_box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /*  */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 30;
    overflow: hidden;
}

#mp_control_box button {
    pointer-events: all;
}

#mp_control_box button[id^="mp_control_"] {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 3px 0px 0px;
    padding: 0px;
    width: 24px;
    height: 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 100%;
    border: 2px solid #fff;
    color: #fff;
    background-color: #222;
    background-repeat: no-repeat;
    background-size: 8px auto;
    text-align: left;
    text-indent: -9999em;
    overflow: hidden;
}

#mp_control_box button#mp_control_prev {
    /* right: JavaScriptにより指定; */
    transform: rotate(45deg) translateZ(0);
}

#mp_control_box button#mp_control_next {
    right: 3em;
    transform: rotate(-135deg) translateZ(0);
}

#mp_control_box button#mp_control_prev, #mp_control_box button#mp_control_next {
    position: absolute;
    bottom: 2.2em;
    width: 14px;
    height: 14px;
    margin: 0;
    background-size: cover;
    border-radius: 0;
    background-position: left top;
    background-color: transparent;
    cursor: pointer;
    border-top: none;
    border-right: none;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    filter: drop-shadow(0px 0px 1px rgb(255, 255, 255)) drop-shadow(0 0 1px rgb(255, 255, 255))
}

.control_box_wrap {
    position: absolute;
    right: 4em;
    bottom: 1.5em;
}
#mp_control_prev, #mp_control_next, .control_box_wrap {
	-webkit-appearance: none;
	appearance: none;
	transform: translateZ(0);
}
#mp_control_prev, #mp_control_next {
	background-color: transparent !important;
	padding: 0 !important;
	line-height: 1;
	display: block !important;
	vertical-align: middle !important;
}

#mp_control_box button#mp_control_pause {
    background-image: url(/img/top/photo/btn_slide_stop.png);
    background-position: center center;
    cursor: pointer;
}

#mp_control_box button#mp_control_play {
    display: none;
    background-image: url(/img/top/photo/btn_slide_play.png);
    background-position: 8px center;
    cursor: pointer;
}

/* スライドナビゲーションボタン */
ul.slick-dots {
    display: inline-block;
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.slick-dots li {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 3px;
    padding: 2px;
}

ul.slick-dots li button {
    display: block;
    margin: 0px;
    padding: 0px;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border-radius: 100%;
    text-indent: -9999em;
    text-align: left;
    overflow: hidden;
    border: 1px solid #000;
    cursor: pointer;
}

ul.slick-dots li.slick-active button {
    background: #222;
    color: #fff;
}

/* スライドショートリミング */
.main-slide_area_inner {
    width: 100%;
    height: 100%; /* 高さを固定 */
    max-height: 800px; /* 念のため最大値も指定 */
    overflow: hidden; /* はみ出し防止 */
}
.main-slide_area_inner .slick-list,
.main-slide_area_inner .slick-track {
    height: 100%;
}
.main-slide_area_inner .slick-track,
.main-slide_area_inner .slick-track p {
    height: 100%;
    margin: 0; /* <p> タグの余白をリセット */
    padding: 0;
}
.main-slide_area_inner .slick-track img {
    /* (1) 画像を親要素（800px）いっぱいに広げる */
    width: 100%;
    height: 100%;
    /* (2) 縦横比を維持したまま、はみ出た部分をトリミング */
    object-fit: cover;
    /* (オプション) トリミングする位置を中央に指定 */
    object-position: center center;
}
#top_photo_list p {
	margin: 0;
	display: flex;
}
#top_photo_list img {
    width: 100% !important;
    height: auto !important;
}

/*
 * スライド上のバナー画像
 */
/* imgのみ表示してそれ以外は非表示 */
.slide_over_bnr_inner p,
.slide_over_bnr_inner ul,
.slide_over_bnr_inner ol,
.slide_over_bnr_inner table,
.slide_over_bnr_inner h2,
.slide_over_bnr_inner h3,
.slide_over_bnr_inner h4,
.slide_over_bnr_inner h5,
.slide_over_bnr_inner h6,
.slide_over_bnr_inner div {
    display: none;
}
.slide_over_bnr_inner p:has(> img:first-child) {
    display: block;
}
.slide_over_bnr_inner {
    max-width: 33vw;
    max-height: 220px;
    overflow: hidden;
    transition: all 0.5s ease-out;
    display: block;
}
.slide_over_bnr.is-closed .slide_over_bnr_inner {
    max-height: 0;
    margin: 0;
    padding: 0;
}

.slide_over_bnr_inner img {
    width: auto !important;
    height: auto !important;
}

/* レイアウト */
.slide_over_bnr {
    left: 0;
    bottom: 0;
    position: absolute;
    transform: translateY(0%);
}
.slide_over_bnr p {
    margin: 0;
    padding: 0;
}
.slide_over_bnr p img {
    display: block;
}

/* 閉じるボタン */
.close-button {
    width: 24px;
    height: 24px;
    background-color: #000;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 10; /* ボタンが常に上に来るように */
    transition: all 0.5s; /* 背景色の変化を滑らかに */
}

/* 線の共通設定 */
.close-button::before,
.close-button::after {
    content: "";
    position: absolute;
    background-color: #fff;
    width: 12px;
    height: 2px;
    top: 50%;
    left: 50%;
    transition: transform 0.3s; /* 形の変化をアニメーションさせる */
}

/* 通常時（バナーが開いている時）＝「×」ボタン */
.close-button::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 1. 閉じている時（is-closed）のバナー本体のスタイル */
/* バナー自体は存在させるが、中身を隠して高さをなくす */
.slide_over_bnr.is-closed {
    padding: 0; /* 余白もなくす */
    background: none; /* 背景色があれば消す */
    overflow: visible; /* ★重要：枠外に出たボタンを表示し続けるため */
}

/* 2. 閉じている時（is-closed）のボタンのスタイル */
/* 光の明滅アニメーション定義 (追加)------------------------------------------------------- */
@keyframes pulse-white-glow {
    0% {
        /* 影なし（透明） */
        box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0);
    }
    50% {
        /* ぼかし強め・広がり強めの白い影 */
        /* 0 0 [ぼかし半径] [広がり半径] [色] */
        box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.8);
    }
    100% {
        /* 影なしに戻る */
        box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0);
    }
}

/* 背景色を変えたい場合はここで指定（例：少し薄くするなど） */
.slide_over_bnr.is-closed .close-button {
    background-color: #333;
    top: -24px;
    border-radius: 50% 50% 0 0;
    animation: pulse-white-glow 2s infinite ease-in-out;
    transform: rotate(360deg);
}

/* アイコンを「×」から「＾」に変形させる */
.slide_over_bnr.is-closed .close-button::before {
    /* 左側の線：角度を変えて少し左へずらす */
    transform: translate(-80%, -50%) rotate(-45deg);
}

.slide_over_bnr.is-closed .close-button::after {
    /* 右側の線：角度を変えて少し右へずらす */
    transform: translate(-20%, -50%) rotate(45deg);
}

/*
 * スクロールダウンボタン
 */
.scroll_down {
    position: absolute;
    bottom: 0px;
    left: 50%;
    filter: drop-shadow(0px 0px 1px rgb(255, 255, 255)) drop-shadow(0 0 1px rgb(255, 255, 255));
}

.scroll_down a {
    position: absolute;
    top: -60px;
    left: -2em;
    color: #000;
    font-size: 0.875em;
    font-family: "Josefin Sans", sans-serif;
    letter-spacing: 0.2em;
    text-decoration: none;
}

.scroll_down:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #000;
    animation: circlemove 1.6s ease-in-out 0.5s infinite,
        cirlemovehide 1.6s ease-out 0.5s infinite;
}

@keyframes circlemove {
    0% {
        bottom: 40px;
    }
    100% {
        bottom: 0px;
    }
}

@keyframes cirlemovehide {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    80% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
    }
}

.scroll_down:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 40px;
    background: #000;
}

/* --------------------------------------------------------------------------
   メッセージエリア
   -------------------------------------------------------------------------- */
.top_message_area_inner {
    width: 1840px;
    max-width: 100%;
    margin: 1.5em auto 0;
    padding: 0.5em;
    background-color: #222;
    color: #fff;
    font-size: 3.5em;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    filter: drop-shadow(0px 0px 1px rgb(255, 255, 255)) drop-shadow(0 0 1px rgb(255, 255, 255));
}
.top_message_area_inner::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #222;
}
.top_message_area_inner::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #222;
}

/* --------------------------------------------------------------------------
   コンセプト
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.concept_area {
    margin-top: 12.5em;
}

/*
 * 見出し2
 */
/* 親コンテナ */
.concept_area h2 {
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 0 0;
    padding: 7.5em 1em 0;
    position: relative;
}
.concept_area h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    bottom: auto;
    background-image: url(/img/memorial-park/bg_h2_concept.png);
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat;
    width: 613px;
    max-width: 100%;
    height: 0; /* 157pxだが計算ズレで画像がぼやけるので0に */
    padding-top: calc((157 / 613) * 100%); /* 実質的な高さ */
    z-index: -1;
}
/* 上の画像 */
.h2_middle {
    align-self: center;
}
.concept_area h2 .h2_middle {
    max-width: 568px;
}

/* 下の画像 */
.h2_bottom {
    align-self: flex-end;
}
.concept_area h2 .h2_bottom {
    max-width: 543px;
}

/*
 * テキストエリア
 */
.concept-text_wrap {
    margin: 5em 0;
    padding: 0 2em;
}
.concept-text_wrap p {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.25em !important;
    font-weight: 700;
    line-height: 3;
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   無限スライダー
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.infinity-slider_wrap {
    margin-top: 7.5em;
}
/*
 * スライドのスタイル
 */
.infinity-slider_inner .slick-slide {
    margin: 0 10px;
    /* width: 460px; <-- JSが設定するので削除 */
    padding: 0;

    /* * 幅が切り替わる時にカクつくのを防ぐ
   * (お好みで)
   */
    transition: width 0.3s ease;
}

/* * @media (max-width: ...) { ... } 
 * ↑ JSで幅を制御するため、
 * .slick-slide に関する @media はすべて削除します。
 */

/* 画像のスタイル (変更なし) */
.infinity-slider_inner .slick-slide img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/*
 * アニメーションとホバー (変更なし)
 * (JSから渡されるCSS変数を使います)
 */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(var(--marquee-total-width) * -1));
    }
}

.infinity-slider_inner .slick-track {
    animation: marquee var(--marquee-total-duration) linear infinite;
}

.infinity-slider_inner:hover .slick-track {
    animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   お知らせ
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.news_area {
    margin: 7.5em 0 10em;
    padding: 0 2em;
}

/*
 * 見出し2
 */
/* 親コンテナ */
.news_area h2 {
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 0 0;
    padding: 7.5em 0 0;
    position: relative;
}
.news_area h2::before {
    content: "";
    position: absolute;
    left: 5%;
    bottom: 1.5em;
    background-image: url(/img/memorial-park/bg_h2_news.png);
    background-size: 100% auto;
    background-position: bottom;
    background-repeat: no-repeat;
    width: 399px;
    max-width: 100%;
    height: 0; /* 117pxだが計算ズレで画像がぼやけるので0に */
    padding-top: calc((117 / 399) * 100%); /* 実質的な高さ */
    z-index: -1;
}

.news_area h2 .h2_middle {
    max-width: 156px;
}

/* 
 * 新着リスト
 */
.news_list_wrap {
    margin-top: 5em;
    padding: 0 10%;
    box-sizing: border-box;
}
.news_list_wrap .list_type_a_list {
    width: 100%;
    max-width: 1100px;
    margin: 0 0 0 auto;
    background: none;
}
.news_list_wrap .list_type_a_list .list_ccc {
    background-color: transparent;
}
.news_list_wrap .list_type_a_list .list_ccc ul {
    padding: 0;
}
.news_list_wrap .list_type_a_list .list_ccc ul li {
    padding: 2em 0;
    border-top: 2px solid #e6e6e6;
}
.news_list_wrap .list_type_a_list .list_ccc ul li:last-child {
    border-bottom: 2px solid #e6e6e6;
}
.list_pack {
    display: flex;
    align-items: center;
    gap: 3em;
}
.span_d {
    flex-basis: 30%;
    max-width: 215px;
}
.span_d img {
    aspect-ratio: 215/136;
    object-fit: cover;
    object-position: center;
}
.span_e {
    flex: 1;
}
.list_pack:not(:has(.span_d))::before {
    content: '';
    display: inline-block;
    width: 215px;
    height: 136px;
    max-width: 215px;
    min-width: 125px;
    flex-basis: 30%;
    vertical-align: middle;
    background-image: url("/img/memorial-park/noimage.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.list_pack a {
    color: #222;
    text-decoration: none;
}
.list_pack a:hover {
    text-decoration: underline;
}

/* お知らせ一覧リンク */
.news_list_wrap .list_type_a_list .text_d2 {
    margin-top: 2em;
    padding: 0;
    border-top: none;
    text-align: right;
}
.news_list_wrap .list_type_a_list .text_d2 a {
    color: #222;
}
.text_d,
.icon_rss {
    background: none;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   公園施設案内
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.fi_area_inner_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: space-between;
    padding: 0 2em 7.5em;
    position: relative;
}
.fi_area_inner_left,
.fi_area_inner_right {
    flex-basis: calc(50% - 1em);
}
.fi_area_inner_left {
    padding-top: 10em;
}
.fi_area_inner_right {
    text-align: center;
}

/*
 * 左側
 */
.fi_area_inner_left div {
    max-width: 750px;
    margin: 5em auto;
}
.fi_area_inner_left div p {
    margin: 2em 0;
}
.access_area_inner_link {
    text-align: right;
    margin-top: 2em;
    display: none;
}

/* 見出し */
.facility-information_area h2 {
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: 100%;
    margin: 0 auto 0 0;
    padding: 5em 0 0;
    position: relative;
}
.facility-information_area h2::before {
    content: "";
    position: absolute;
    left: 5%;
    bottom: 1.5em;
    background-image: url(/img/memorial-park/bg_h2_facility-information.png);
    background-size: 100% auto;
    background-position: bottom;
    background-repeat: no-repeat;
    width: 873px;
    max-width: 100%;
    height: 0; /* 275pxだが計算ズレで画像がぼやけるので0に */
    padding-top: calc((275 / 873) * 100%); /* 実質的な高さ */
    z-index: -1;
}
.facility-information_area h2 .h2_bottom {
    max-width: 240px;
}
.facility-information_area h2 img {
    margin-right: 2em;
}

/*
 * 右側
 */
/* 初期画像 */
.fi_area_inner_right img#modal-trigger {
    cursor: zoom-in;
    max-width: 450px;
    width: 100%;
}

/* モーダル本体 */
#image-modal {
    position: absolute; /* 親要素を基準に絶対配置 */
    top: 0;
    left: 0;
    right: 0;
    
    /* デザイン調整 */
    border: none;
    padding: 0;
    width: 90%;
    max-width: 1000px;
    box-sizing: border-box;
    
    /* 他の要素より上に表示させる */
    z-index: 1000;
    
    /* 閉じるためのカーソル */
    cursor: zoom-out;
    
    /* 念のため影をつける */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
#image-modal::before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000c;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
}

/* 画像の幅調整 */
#image-modal img {
    width: 100%;
    height: auto;
    display: block;
}

/* 閉じるボタンのスタイル（例） */
#image-modal #modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background: black;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
}

/* 下側 */
.fi_area_inner_photo {
    flex-basis: 100%;
    max-width: 1100px;
    margin: 7.5em auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3em 1em;
}
.fi_area_inner_photo_large {
    flex-basis: 100%;
}
.fi_area_inner_photo_small {
    flex-basis: calc(33% - 1em);
}
.fi_area_inner_photo_item a {
    transition: 0.3s;
    pointer-events: none;
}
.fi_area_inner_photo_item a:hover {
    opacity: 0.8;
}
.fi_area_inner_photo_item span {
    display: block;
    margin: 1em 0 0;
    padding: 0 1.5em;
    border-left: 5px solid #ccc;
    line-height: 0;
    position: relative;
}
.fi_area_inner_photo_item span::after {
    content: "";
    position: absolute;
    right: 12px;
    top: calc(50% - 12px * 1.41421356 / 2);
    width: 12px;
    height: 12px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    transform: rotate(-45deg);
}
.fi_area_inner_photo_item span img {
    margin: 0.25em 0;
    max-height: 21px;
}
.fi_area_inner_photo_item span img + br + img {
    max-height: 19px;
}

/* --------------------------------------------------------------------------
   アクセス
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.access_area {
    padding: 0 2em;
}
.access_area_inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    max-width: 1550px;
    margin: 2.5em auto 5em;
}

/*
 * 見出し
 */
.access_area_inner h2 {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: 100%;
    margin: 0 auto 0 0;
    padding: 5em 0 0;
    position: relative;
}
.access_area_inner h2::before {
    content: "";
    position: absolute;
    left: auto;
    right: auto;
    bottom: 1.5em;
    background-image: url(/img/memorial-park/bg_h2_access.png);
    background-size: 100% auto;
    background-position: bottom;
    background-repeat: no-repeat;
    align-self: center;
    margin: 0 auto;
    width: 506px;
    max-width: 100%;
    height: 0; /* 120pxだが計算ズレで画像がぼやけるので0に */
    padding-top: calc((120 / 506) * 100%); /* 実質的な高さ */
    z-index: -1;
}
.access_area_inner h2 .h2_middle {
    max-width: 148px;
}

/*
 * 左側
 */
.access_area_inner_left {
    flex-basis: calc(50% - 1em / 2);
    padding: 1.5em 0;
}
.access_area_inner_left h3 {
    border-bottom: 1px solid #7f7f7f;
    padding: 0.25em 0;
    font-size: 1.25em;
}
.access_area_inner_left p {
    line-height: 2;
}
.access_area_inner_left p + h3 {
    margin-top: 1.5em;
}
.access_area_inner_left iframe {
    margin-top: 1.5em;
    max-width: 100%;
}

/*
 * 右側
 */
.access_area_inner_right {
    flex-basis: calc(50% - 1em / 2);
    text-align: right;
    position: relative;
    line-height: 0;
    padding: 0;
    border: none !important;
}
.access_area_inner_right img {
    display: block;
}

.map_target_area {
    position: relative; /* ★ここがピンの基準になる */
    width: fit-content;
    /* ★重要：中身（画像）のサイズにフィットさせる設定★ */
    display: block;
    line-height: 0; /* 下の隙間対策 */
    margin-left: auto;
}
.pin_wrap {
    position: absolute;
    /* 幅と高さを0にすることで「点」として扱います */
    width: 0;
    height: 0;
    z-index: 10; /* 必要に応じて調整 */
}
.pin_body {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;

    /* ★ここがズレ防止のキモ★ */
    /* X軸-50%: ピンの中心を座標に合わせる */
    /* Y軸-100%: ピンの下端(針先)を座標に合わせる */
    transform: translate(-50%, -100%);

    /* 跳ねるアニメーション */
    animation: pin-bounce 1.5s infinite ease-in-out;
    z-index: 2;
}

.pin_body img {
    width: 100%;
    height: auto;
    display: block;
}
.pin_ripple {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;

    /* 波紋の中心を座標に合わせる */
    transform: translate(-50%, -50%);

    /* 広がるアニメーション */
    animation: ripple-effect 1.5s infinite linear;
    z-index: 1;
}

/* --- アニメーション定義 --- */
@keyframes pin-bounce {
    0%,
    100% {
        /* 地面に着いている時 (translateは維持したままYを調整) */
        transform: translate(-50%, -100%) translateY(0);
    }
    50% {
        /* 跳ねている時 */
        transform: translate(-50%, -100%) translateY(-15px);
    }
}

@keyframes ripple-effect {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   パララックスデザイン
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.parallax_area #meinimg {
    margin: 0;
    padding: 0;
}
/*
 * パララックス部分
 */
#meinimg #meinimg_a > div {
    background-attachment: fixed;
    background-position: center !important;
    height: 25lvh !important;
    min-height: 311px;
    aspect-ratio: 2011/311;

    /* スマホ時にアドレスバーが隠れた際のガタツキ防止のため */
    background-attachment: scroll !important;
    background-position: -9999px -9999px !important;
    background-repeat: no-repeat !important;
    clip-path: inset(0);
    z-index: 1;
    position: relative;
}
#meinimg #meinimg_a > div::before {
    /* スマホ時にアドレスバーが隠れた際のガタツキ防止のため */
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    background-image: inherit;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    will-change: transform;
    pointer-events: none;
}
#site_name {
    display: none;
}

/* --------------------------------------------------------------------------
   関連リンク
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.link_area {
    padding: 7.5em 2em;
}
.link_area_inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
.link_area_inner h2 {
    text-align: center;
}
.link_area_inner h2 img {
    max-width: 191px;
}
.link_area_inner .detail_free {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
}
.link_area_inner .detail_free p {
    flex-basis: calc(33% - 2em / 2 * 2);
    text-align: center;
}
.link_area_inner a {
    transition: 0.3s;
}
.link_area_inner a:hover {
    opacity: 0.8;
}
.link_area_inner img {
    height: auto !important;
}
.link_area_inner .detail_free img {
    border: 1px solid #ccc;
}

/* ==========================================================================
   大メニューページ
   ========================================================================== */
/* --------------------------------------------------------------------------
   下層ページ共通
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
#mymainback {
    clear: both;
    float: none;
}
#main {
    float: none;
    margin: 0 0 10em;
    padding: 2em;
}
#main_a {
    margin: 0 auto;
    padding: 0;
}
#main_body {
    max-width: 100%;
    width: 1100px;
    margin: 0 auto;
}

/*
 * パンくず
 */
.pankuzu {
    margin: 3em 3% 1em;
    padding: 0;
    background: none;
    font-size: 1em;
    text-align: right;
}

/*
 * 見出し1
 */
#main_header, .h1box, .h1box .h1, #main_header h1 {
    background: none;
    margin: 0;
    padding: 0;
}
#main_header {
    margin: 2em 0 7em;
}
#main_header h1 {
    font-size: 3em;
    text-align: right;
    padding: 0 3%;
}

body:not(.site-index-memorial-park) #main_body .list_c ul {
    margin: 0;
    padding: 0;
}
body:not(.site-index-memorial-park) #main_body .list_c ul li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #CBCBCB;
}
body:not(.site-index-memorial-park) #main_body .list_c ul li .span_c {
    background: none;
    padding: 0;
}
body:not(.site-index-memorial-park) #main_body .list_c ul li .span_c a {
    display: inline-block;
    width: 100%;
    padding: 1.5em 1em;
    position: relative;
    font-size: 1.5em;
    text-decoration: none;
    color: #222;
    transition: 0.3s;
}
body:not(.site-index-memorial-park) #main_body .list_c ul li .span_c a:hover {
    text-decoration: underline;
    opacity: 0.75;
}
body:not(.site-index-memorial-park) #main_body .list_c ul li .span_c a::after {
    content: '';
    position: absolute;
    top: calc(50% - 11px / 2);
    right: 1em;
    width: 11px;
    height: 11px;
    border-right: 1px solid #CBCBCB;
    border-bottom: 1px solid #CBCBCB;
    transform: rotate(-45deg);
}



/* ==========================================================================
   小メニューページ
   ========================================================================== */
body.site-list1-memorial-park #main_body .list_c ul li {
    padding: 2.5em 1em;
}
#main_body .list_ccc .span_a {
    float: none;
    display: inline-block;
    width: 100%;
    padding: 0 0 1em;
    background: none;
}
#main_body .list_ccc .span_b {
    display: inline-block;
    font-size: 1.25em;
}
#main_body .list_ccc .span_b a {
    text-decoration: none;
    color: #222;
}
#main_body .list_ccc .span_b a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   最終ページ
   ========================================================================== */
.detail_title {
    width: 11em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}
#detail_date {
    float: none;
    padding: 0 3%;
}
#detail_date .text_r {
    float: none;
}
.h1 {
    text-align: right;
}
#main_header h1 {
    font-size: 3em;
    text-align: left;
    padding: 0 3%;
    display: inline-block;
    margin-left: auto;
    max-width: 80%;
}
#main_body h2 {
    font-size: 2.625em;
    margin: 0.75em 0 0.5em;
    padding: 0.5em 0.75em;
    background: none;
    border: none;
    border-bottom: 1px solid #CBCBCB;
    position: relative;
}
#main_body h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 20%;
    height: 1px;
    background-color: #222;
}
#main_body h3 {
    background-image: none;
    background-color: #f5f5f5;
    margin: 0.75em 0 0.5em;
    padding: 0.5em 1em;
    font-size: 2em;
}
#main_body h4 {
    background: none;
    margin: 0.75em 0 0.5em;
    padding: 0.5em 1em;
    border-bottom: 1px solid #cbcbcb;
    font-size: 1.75em;
}
#main_body h5 {
    position: relative;
    margin: 1.25em 0 0;
    padding: 0.5em 1em;
    border-left: none;
    font-size: 1.5em;
}
#main_body h5::before {
    content: '';
    position: absolute;
    top: calc(50% - 50% / 2);
    left: 0;
    display: block;
    width: 5px;
    height: 50%;
    background-color: #cbcbcb;
}
#main_body h6 {
    position: relative;
    border-left: none;
    margin: 1.25em 0 0;
    padding: 0.5em 1.25em;
    font-size: 1.25em;
}
#main_body h6::before {
    content: '';
    position: absolute;
    top: calc(50% - 1px / 2);
    left: 0;
    width: 0.8em;
    height: 1px;
    background-color: #222;
}
#main_body a {
    color: #00f;
}
#main_body a:hover {
    text-decoration: none;
}
.print {
    text-align: right;
}
#main_body #print_mode_link {
    color: #222;
}
#main table, #main th, #main td {
    border-color: #cbcbcb !important;
}
#main th {
    background: #f5f5f5;
}


/* ==========================================================================
   レスポンシブここから
   ========================================================================== */

/* --------------------------------------------------------------------------
   1099px以下ここから
   -------------------------------------------------------------------------- */
@media all and (max-width: 1099px) {
    /*
     * フッター
     */
    .pamphlet_area {
        width: calc(545px * 0.8);
        height: calc(200px * 0.8);
    }
}
/* --------------------------------------------------------------------------
   1099px以下ここまで
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   991px以下ここから
   -------------------------------------------------------------------------- */
@media all and (max-width: 991px) {
    /*
     * ヘッダー
     */
    /* 1. 既存のnavを非表示にし、スライドインの準備 */
    #header {
        margin-bottom: 0;
    }
    #header h1, #header > div {
        flex: 0 2 50%;
    }
    #header h1 img, #header > div img {
        max-width: 300px;
    }
    #header nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 50%; /* 幅は50% */
        height: 100vh; /* 画面の高さ100% */
        min-width: 280px;
        background: #fff; /* 背景色（適宜変更） */
        z-index: 1000; /* ボタンやオーバーレイより手前に */

        /* 画面外（左側）に隠す */
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;

        /* スクロールできるように */
        overflow-y: auto;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0;
        padding: 5em 0;
    }

    /* 2. ハンバーガーボタンを右上に表示 */
    .hamburger-button {
        display: block;
        position: absolute; /* header基準で配置 */
        top: 0; /* 位置は適宜調整 */
        right: 1em; /* 位置は適宜調整 */
        z-index: 999; /* nav本体よりは後ろ */

        /* (ボタン自体のスタイリングは省略) */
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
    }
    /* (ハンバーガーの「三」の線のスタイル例) */
    .hamburger-button span {
        display: block;
        height: 2px;
        background: #333;
        margin: 6px 0;
        transition: 0.3s;
    }

    /* 3. オーバーレイ */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
        z-index: 998; /* nav本体の真後ろ */

        /* デフォルトは非表示 (JSで .menu-open 時に表示) */
        display: none;
        opacity: 0;
        transition: opacity 0.3s;
    }

    /* --- JSで body.menu-open が付いた時のスタイル --- */

    /* メニューをスライドインさせる */
    body.menu-open #header nav {
        transform: translateX(0);
        display: block;
    }

    /* オーバーレイを表示する */
    body.menu-open .menu-overlay {
        display: block;
        opacity: 1;
    }

    /* (おまけ) ハンバーガーを「×」印にする例 */
    body.menu-open .hamburger-button span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    body.menu-open .hamburger-button span:nth-child(2) {
        opacity: 0;
    }
    body.menu-open .hamburger-button span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    #header nav {
        display: block;
    }
    #header nav > ul {
        flex-wrap: wrap;
    }
    #header nav > ul li {
        flex: 0 1 100%;
    }
    #header nav > ul li a {
        padding: 0.5em 2em;
        width: 100%;
        display: inline-block;
        text-align: center;
    }

    .language-dropdown-wrapper {
        display: block;
        width: 180px;
        margin: 0 auto;
        padding: 2em;
    }

    /*
     * フッター
     */
    .footer_area_inner {
        padding: 2em 2em 15em;
    }
    .footer_area_inner_left {
        max-width: 361px;
        margin: 0 auto;
    }
    .info_1, info_2 {
        flex-basis: 100%;
    }

    /*
     * スライドショー
     */
    #top_photo_list img {
        width: 100% !important;
        height: 650px !important;
        object-fit: cover;
    }

    /*
     * コンセプト
     */
    .concept_area {
        margin-top: 5.5em;
    }
    .concept_area h2 {
        gap: 1.5em; 
    }
    .concept_area h2::before {
        width: 400px;
        top: 20%;
    }
    .concept_area h2 img.h2_middle,
    .concept_area h2 img.h2_bottom {
        max-height: 55px;
    }

    /*
     * お知らせ
     */
    .news_area h2::before {
        width: 210px;
    }
    .news_area h2 img.h2_middle {
        max-width: 110px;
        gap: 1.5em;
    }

    /*
     * 公園施設案内
     */
    .fi_area_inner_wrap {
        padding: 0 2em 3.5em;
    }
    .fi_area_inner_left,
    .fi_area_inner_right {
        flex-basis: 100%;
    }
    .facility-information_area h2::before {
        width: 455px;
    }
    .facility-information_area h2 img.h2_bottom {
        max-width: 168px;
        gap: 1.5em;
    }

    /*
     * アクセス
     */
    .access_area h2::before {
        width: 200px;
    }
    .access_area h2 img.h2_middle {
        max-width: 102px;
        gap: 1.5em;
    }
    .access_area_inner_left,
    .access_area_inner_right {
        flex-basis: 100%;
        text-align: center;
    }

    /*
     * 関連リンク
     */
    .link_area_inner h2 img {
        max-width: 131px;
    }
}
/* --------------------------------------------------------------------------
   991px以下ここまで
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   767px以下ここから
   -------------------------------------------------------------------------- */
@media all and (max-width: 767px) {
    /*
     * スライド
     */
    .main-slide_area_inner {
        max-width: none;
    }
    /* ナビゲーション */
    #mp_control_box button#mp_control_prev, #mp_control_box button#mp_control_next {
        top: auto;
        bottom: 3em;
        -webkit-tap-highlight-color: transparent;
    }
    #mp_control_box button#mp_control_prev {
        right: 2.5em;
        transform: rotate(135deg);
    }
    #mp_control_box button#mp_control_next {
        right: 2.5em;
        transform: rotate(-45deg);
    }
    .control_box_wrap {
        top: auto;
        right: 0.5em;
        bottom: 5em;
        transform: rotate(90deg);
    }
    #mp_control_pause, #mp_control_play {
        transform: rotate(-90deg);
    }
    ul.slick-dots {
        margin: 0 0 0.2em 0;
    }

    /* スクロールダウン */
    /*
    .scroll_down {
        left: auto;
        right: 3em;
        bottom: 50%;
    }
    */
    .scroll_down a {
        top: -45px;
        left: 0em;
        writing-mode: vertical-lr;
        text-shadow: 0px 0px 5px rgb(255, 255, 255);
    }

    /* バナー画像 */
    .slide_over_bnr {
        transform: translate(0, 50%);/* transform: translate(50%, 50%); //真ん中寄せ時 */
    }
    .slide_over_bnr_inner {
        max-width: 50vw;
    }

    /*
     * メッセージエリア
     */
    .top_message_area_inner {
        margin: 1.5em auto 0;
        font-size: 1.5em;
    }

    /*
     * コンセプト
     */
    .concept_area {
        margin-top: 10em;
    }
    .concept_area h2 {
        gap: 1em;
    }
    .concept_area h2 img.h2_middle, 
    .concept_area h2 img.h2_bottom {
        max-height: 40px;
    }
    /*
     * 公園施設案内
     */
    .fi_area_inner_photo_small {
        flex-basis: calc(50% - 1em);
    }

    /*
     * アクセス
     */
    .link_area_inner .detail_free {
        justify-content: center;
        gap: 1em 2em;
    }
    .link_area_inner .detail_free::after {
        content: '';
        flex-basis: calc(50% - 2em / 2 * 1);
    }
    .link_area_inner .detail_free p {
        flex-basis: calc(50% - 2em / 2 * 1);
        max-width: 100%;
        margin: 0;
    }

    #meinimg #meinimg_a > div {
        aspect-ratio: 1446/311;
    }
    
    /*
     * 下層
     */
    .pankuzu {
        font-size: 0.9em;
    }
    #main {
        margin: 0 0 7.5em;
        padding: 1em;
    }
    #main_header {
        margin: 2em 0;
    }
    #main_header h1 {
        font-size: 2em;
    }

    body:not(.site-index-memorial-park) #main_body .list_c ul li .span_c a {
        font-size: 1.2em;
    }

    body.site-list1-memorial-park #main_body .list_c ul li {
        padding: 1.5em 0.5em;
    }
    .list_ccc .span_a {
        padding: 0 0 0.75em;
    }
    .list_ccc .span_b {
        font-size: 1.15em;
    }
    #main_body h2 {
        font-size: 1.75em;
    }
    #main_body h3 {
        font-size: 1.5em;
    }
    #main_body h4 {
        font-size: 1.35em;
    }
    #main_body h5 {
        font-size: 1.25em;
    }
    #main_body h6 {
        font-size: 1.1em;
    }
    .print {
        display: none;
    }
}
/* --------------------------------------------------------------------------
   767px以下ここまで
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   599px以下ここから
   -------------------------------------------------------------------------- */
@media all and (max-width: 599px) {
    /*
     * ヘッダー
     */
    #header h1, #header > div {
        flex: 0 2 55%;
        margin: 0.25em 0.5em;
    }
    /*
     * フッター
     */
    .facility_details p > span:nth-child(1) {
        flex-basis: auto;
    }
    .facility_details p > span:nth-child(2) {
        margin-left: 1em;
    }
    .facility_details p {
        margin: 0 0 1em;
        flex-direction: column;
    }
    .footer_area_inner {
        padding: 2em 1em 12em;
    }
    .pamphlet_area {
        width: calc(545px * 0.6);
        height: calc(200px * 0.6);
    }

    /* トップへ戻るボタン */
    #pageTopBtn {
        right: 1em;
    }

    /*
     * スライド
     */
    /* バナー画像 */
    .slide_over_bnr {
        transform: translate(0, 50%);/* transform: translate(calc((100vw - 75vw)/2), 50%); //真ん中寄せ時 */
    }
    .slide_over_bnr_inner {
        max-width: 75vw;
    }

    
    
    /*
     * コンセプト
     */
     .concept_area {
        margin-top: 7.5em;
    }
    .concept-text_wrap {
        margin: 3em 0;
        padding: 0 1em;
    }
    .concept_area h2 {
        padding: 0.5em 1em 0;
        gap: 0.75em;
    }
    .concept_area h2::before {
        width: 311px;
        top: -50%;
        bottom: auto;
    }
    .concept_area h2 img.h2_middle, 
    .concept_area h2 img.h2_bottom {
        max-height: 45px;
    }

    .concept-text_wrap p {
        font-size: 1em !important;
    }

    /* 無限スライダー */
    .infinity-slider_wrap img {
        max-height: 150px;
    }

    /*
     * お知らせ
     */
     .news_area {
        margin: 10em 0 5em;
        padding: 0 1em;
    }
    .news_area h2::before {
        width: 160px;
    }
    .list_pack {
        gap: 1em;
    }
    .news_list_wrap {
        margin-top: 3em;
        padding: 0;
    }
    .news_list_wrap .list_type_a_list .list_ccc ul li {
        padding: 2em 0 1em;
    }
    .list_pack:not(:has(.span_d))::before {
        margin: 0 auto;
    }
    .span_d {
        display: inline-block;
        text-align: center;
        flex-basis: 30%;
    }
    .list_pack .span_d img {
        max-width: 125px;
        aspect-ratio: 1/1;
        object-fit: cover;
    }

    /*
     * 公園施設案内
     */
    .fi_area_inner_wrap {
        padding: 0 1em 2.5em;
    }
    .fi_area_inner_left {
        padding-top: 3.5em;
    }
    .fi_area_inner_left div {
        margin: 3em auto;
    }
    .facility-information_area h2::before {
        width: 325px;
    }
    .fi_area_inner_photo {
        margin: 5em auto 0;
        gap: 2em 1.5em;
    }
    .fi_area_inner_photo_small {
        flex-basis: calc(50% - 1.5em / 2);
    }
    .fi_area_inner_photo_item span {
        margin: 0;
        padding: 0 0.75em;
    }
    .fi_area_inner_photo_item span img {
        zoom: 0.7;
    }
    .fi_area_inner_photo_item span::after {
        right: 6px;
    }

    .fi_area_inner_right img#modal-trigger {
        max-width: 300px;
    }

    /*
     * アクセス
     */
    .access_area {
        padding: 0 1em;
    }
    .access_area_inner {
        margin: 0 auto 5em;
    }
    .access_area_inner h2 {
        padding: 4em 0 0;
    }
    .link_area_inner .detail_free p {
        flex-basis: calc(50% - 1em);
        max-width: 100%;
        margin: 0;
    }
    #meinimg #meinimg_a > div {
        height: 400px !important;
    }

    
}
/* --------------------------------------------------------------------------
   599px以下ここまで
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   480px以下ここから
   -------------------------------------------------------------------------- */
@media all and (max-width: 480px) {
    /*
     * ヘッダー
     */
    #header h1 img, #header > div img {
        max-width: 250px;
    }
    /*
     * フッター
     */
    .footer_area_inner_left > p:first-child {
        text-align: center;
    }
    .footer_area_inner_left img {
        max-width: 80%;
    }
    .footer_area_inner_left {
        max-width: 350px;
    }

    /*
     * コンセプト
     */
    .concept_area h2 {
        gap: 1em;
    }
    .concept_area h2 img.h2_middle, .concept_area h2 img.h2_bottom {
        width: auto;
        max-width: 100%;
    }
    .concept_area h2 .h2_middle {
        margin-top: 0.5em;
    }
    .concept-text_wrap p {
        max-width: 360px;
        line-height: 2.5;
    }
    .infinity-slider_wrap {
        margin-top: 4.5em;
    }

    /*
     * お知らせ
     */
    .news_area h2 img {
        max-width: 30%;
        width: 100px;
    }

    /*
     * 公園施設案内
     */
    .facility-information_area h2 img {
        max-width: 50%;
        width: 150px;
    }
    .fi_area_inner_photo {
        margin: 2.5em auto 0;
        gap: 2em 1em;
    }

    /*
     * アクセス
     */
    .access_area h2 img {
        max-width: 30%;
        width: 100px;
    }

    /*
     * 関連リンク
     */
    .link_area {
        padding: 5em 2em;
    }
    .link_area_inner h2 img {
        max-width: 40%;
        width: 120px;
    }

    /*
     * フッター
     */
    .footer_area_inner {
        padding: 1em 1em 10em;
    }
    .pamphlet_area {
        bottom: 3em;
    }
    .contact_details, .facility_details {
        font-size: 0.9375em !important;
    }
    .copyright {
        padding: 0 1em;
        font-size: 0.8em;
    }
}
/* --------------------------------------------------------------------------
   480px以下ここから
   -------------------------------------------------------------------------- */





/* --------------------------------------------------------------------------
   一時的に非表示
   -------------------------------------------------------------------------- */
.slide_over_bnr {
    display: none;
}

/*
.news_area {
    margin: 7.5em 0 5em;
    height: 0;
    opacity: 0;
}
.news_area h2 {
    display: none;
}
.news_area .news_list_wrap {
    display: none;
}
@media all and (max-width:991px){
    .news_area {
        margin: 0;
    }
}
*/

#header nav {
    justify-content: right;
}
.language-dropdown-wrapper {
    display: none;
}