@charset "utf-8";

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url("../font/IBMPlexSansJP-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url("../font/IBMPlexSansJP-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url("../font/IBMPlexSansJP-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url("../font/IBMPlexSansJP-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url("../font/IBMPlexSansJP-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url("../font/IBMPlexSansJP-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url("../font/IBMPlexSansJP-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

:root {
    --color-green: #007524;
    --color-light-green: #4AAF67;
    --color-deep-green: #004B17;
    --color-red: #D54444;
    --color-ochre: #BA7F00;
    --color-blue: #0F92D4;
    --bgColor-green: #DCEBE0;
    --bgColor-light-green: #EDFFF2;
    --bgColor-cream: #F8F2E9;
    --base-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
    --body-space: clamp(15px, 2rem, 20px);
    --speed-normal: 0.25s;
    --speed-scale: .3s cubic-bezier(0.33, 1, 0.68, 1);
    --link-icon-w: 1.25rem;
    --sec-margin: 3.125rem;
    --sec-margin-s: 1.875rem;
    --sec-margin-l: 6.25rem;
    --arrow-move: 3px;
    --arrow-move-l: -3px;
    --base-font-setting: 1;
}


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

ul, ol {
    list-style: none;
}

html {
    font-size: calc(16px * var(--base-font-setting));
    /* font-size: 16px; */
    scroll-behavior: smooth;
    scrollbar-gutter: stable
}
html:has(.noScrl) {
    scroll-behavior: auto;
}
@media screen and (max-width: 1280px) {
    html {
        font-size: calc(14px * var(--base-font-setting));
        /* font-size: 14px */
    }
}
body {
    line-height: 1.6;
    background: #fff;
    overflow-x: hidden;
    color: #000;
    font-family: "IBM Plex Sans JP", sans-serif;
    /* font-weight: 500; */
    /* padding: 4.6875rem 0 0 3.125rem; */
    position: relative;
}

* {
    font-family: "IBM Plex Sans JP", sans-serif;
    box-sizing: border-box;
}
/* Tab 等で :focus-visible が付いたときだけアウトライン表示 */
*:focus-visible {
    outline: 3px solid var(--color-light-green)!important;
    /* outline-color: red!important; */
    outline-offset: -2px;
}
img {
    vertical-align: bottom;
    max-width: 100%;
}

.svg {
    max-width: 100%;
    width: 100%;
    vertical-align: middle;
    height: auto;
    /* padding: 1px; */
    overflow: visible;
}

@media screen and (min-width: 961px) {
    body {
        /* min-width: 1080px; */
    }
}

@media screen and (max-width: 1024px) {
    html {
        /* font-size: 16px; */
    }
}

@media screen and (max-width: 768px) {
    :root {
        --body-space: 2rem;
        --body-space: 1.25rem;
    }

    html {
        /* font-size: 14px; */
    }

    body {
        min-width: 0;
        /* overflow: hidden; */
    }
}

@media screen and (max-width: 640px) {
    html {
        /* font-size: 16px; */
    }
}

@media screen and (max-width: 500px) {
    :root {
        --body-space: 1.125rem;
    }

    html {
        font-size: calc(13px * var(--base-font-setting));
        /* font-size: 13px; */
    }
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

nav ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    background: transparent;
    text-decoration: none;
    color: #0049BA;
    transition: var(--speed-normal) text-decoration-thickness;
    text-decoration: underline;
}

a.link {
    /* color: var(--main-color2); */
    /* color: #bc0022; */
    /* text-decoration: underline; */
}

a.link.color2 {
    color: #0a5dbb;
}

a:hover {
    text-decoration-thickness: 3px;
}

/* a:focus だけだと *:focus-visible より詳細度が高く、Tab でも枠が消えるため :not(:focus-visible) に限定 */
a:focus:not(:focus-visible) {
    outline: none;
}

a:hover img {
    /* opacity: .85 */
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    /* background-color: #ff9; */
    /* color: #000; */
    /* font-style: italic; */
    /* font-weight: bold; */
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    border-collapse: collapse;
    /* table-layout: fixed; */
    /* word-break: keep-all; */
    /* background: #fff; */
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    width: 100%;
    -webkit-appearance: none;
    outline: none;
    margin: 0;
    font-family: "IBM Plex Sans JP", sans-serif;
}

button {
    -webkit-appearance: none;
    outline: none;
    margin: 0;
    font-family: "IBM Plex Sans JP", sans-serif;
}

label input[type="radio"], label [type="checkbox"] {
    display: none
}

input:not([type="radio"], [type="checkbox"]), select {
    vertical-align: middle;
    padding: 0;
    border: 2px solid #ccc;
    background-color: #fff;
    height: 2.95rem;
    font-size: 1.125rem;
    padding: 0.3rem 1.8rem 0.3rem .8rem;
    border-radius: var(--base-radius);
}

/* 共通
====================================================*/
body {
    background: var(--bgColor-cream);
}

section .secInner {
    max-width: 1440px;
    margin: auto;
    /* padding: 0 1rem; */
}

/* ---
　ヘッダー
 --- */
.header {
    padding: 0 1rem
}
.fixedHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fff;
    box-shadow: var(--base-shadow);
    padding: 0;
    transform: translateY(-105%);
    transition: transform var(--speed-normal, 0.3s ease);
    overflow: visible;
    z-index: 10;
}
.fixedHeader.on {
    transform: translateY(0);
}
#fixHeader {
    z-index: 1000;
    position: relative;
    background: #fff;
}
.fixedHeader #fixHeadInner {
    max-width: 1440px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    height: 4.875rem;
}
.fixedHeader #fixHeadInner .logo {
    width: 8.125rem;
}
/* 追従ヘッダー：PC時は .fixedHeader-pc のみ、SP時は .fixedHeader-sp のみ */
.fixedHeader-pc {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    /* padding: 0 0 0 1.875rem; */
    gap: 1rem;
}
.fixedHeader-sp {
    display: none;
}
#header {
    padding: 1.6875rem 1rem;
    position: relative;
    max-width: 1920px;
    margin: auto;
}

#header #headInner {
    max-width: 1440px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logo {
    width: 10.625rem
}

#headMenu {
    font-weight: 500
}

#headMenu ul {
    display: flex;
    gap: .3rem;
    position: relative;
}

#headMenu li > a {
    color: #000;
    display: flex;
    align-items: center;
    line-height: 1;
    gap: 0.3725rem;
    padding: .5em 1em;
    border-radius: 100px;
    transition: var(--speed-normal) background, var(--speed-normal) border-color;
    border: 1px solid transparent;
    text-decoration: none;
}

#headMenu li > a:hover {
    background: #fff;
    border-color: #555;
}

#headMenu li > a .icon {
    width: 1.125rem;
    margin-bottom: 0.125rem;
}

/* ---
　メニュー
 --- */
#menuArea {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    background: #fff;
    border-radius: 1000px;
    height: 5.375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    box-shadow: var(--base-shadow);
}

.headerMenu {
    flex: 1;
    padding: 0 3.125rem 0 1.875rem;
    padding: 0 calc(4.125rem - var(--base-font-setting) * var(--base-font-setting) * 1rem) 0 calc(2.875rem - var(--base-font-setting) * var(--base-font-setting) * 1rem);
    font-weight: 700;
}

.headerMenu ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.headerMenu li a {
    font-size: 1.25rem;
    font-size: min(1.25rem,24px);
    color: #000;
    text-decoration: none;
    transition: var(--speed-normal) color;
    padding: 0.5rem;
    display: flex;
    text-align: center;
}
html:not([lang="ja"]) .headerMenu li a {
    line-height: 1.2;
}
.fixedHeader .headerMenu li a {
    font-size: min(1.125rem,24px);
}

.headerMenu li.current a,
.headerMenu li.on a,
.headerMenu li a:hover {
    color: var(--color-green)
}

.headerMenu li a span {
    display: inline-block;
    position: relative;
}

.headerMenu li a span:after {
    content: "";
    display: block;
    position: absolute;
    width: 0%;
    height: 5px;
    border-radius: 10px;
    background: var(--color-light-green);
    left: 50%;
    transform: translateX(-50%);
    transition: var(--speed-normal) width;
}

.headerMenu li.current a span:after,
.headerMenu li.on a span:after,
.headerMenu li a:hover span:after {
    width: 100%
}

#searchBtnWrap ,
.searchBtnWrap {
    width: 7.875rem;
}

#searchBtnWrap .btn ,.searchBtnWrap .btn {
    background: var(--color-green);
    height: 3rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: bold;
    align-items: center;
    line-height: 1;
    letter-spacing: 2px;
    margin-top: 0;
}

#searchBtnWrap .btn:hover ,.searchBtnWrap .btn:hover {
    filter: saturate(200%);
}

#searchBtnWrap .btn .icon ,.searchBtnWrap .btn .icon {
    width: 1.125rem;
    margin-bottom: 0.125rem;
}

/* 子階層エリア（1コンテナ・.headerMenu のクリックでパネル切替）。追従から開いたときは fixed */
body.is-subMenuOpen {
    overflow: hidden;
}
/* PC時は .header 直下で絶対配置。SP時は is-open で fixed 全画面（下のメディアで上書き） */
.header .headerSubMenuWrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: calc(100% - var(--body-space, 2rem) * 2);
    max-width: 1440px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--base-shadow, 0 4px 20px rgba(0,0,0,.12));
    /* padding: 3.125rem min(5%,6.25rem) 3.125rem; */
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 1000;
    margin-top: 0.625rem;
    border: 3px solid #000;
    /* max-height: 60vh; */
    /* overflow: hidden; */
}
/* 追従ヘッダーから開いたとき：画面上部に固定表示 */
.headerSubMenuWrap.from-fixed {
    position: fixed;
    top: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
}
.headerSubMenuWrap.is-open {
    opacity: 1;
    visibility: visible;
}
/* フィルター（黒い半透明）。表示は jQuery の fadeIn/fadeOut で制御。クリックで閉じる */
.headerSubMenuFilter {
    z-index: -1;
    background: rgba(34,34,34,0.8);
    cursor: pointer;
    display: none;
}
/* 固定ヘッダー用：#menuArea を起点に position:absolute。サイズは 100vw で横全画面、下は十分に伸ばす */
#menuArea .headerSubMenuFilter--normal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    bottom: -9999px;
    display: none;
}
/* 固定ヘッダーから開いたとき JS で #menuArea に is-filter-open を付与 */
#menuArea.is-filter-open .headerSubMenuFilter--normal {
    z-index: -1;
}
/* 追従用（fixedHeader 内に単体で配置）：position:fixed で画面左上起点・全画面 */
.fixedHeader .headerSubMenuFilter--fixed {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: none;
}
.fixedHeader.is-subMenu-open .headerSubMenuFilter--fixed {
    z-index: 0;
}
.headerSubMenuWrap .headerSubMenuClose {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    font-weight: 500;
    --close-color: #000;
    color: var(--close-color);
    /* transition: var(--speed-normal); */
    z-index: 10;
}
.headerSubMenuWrap .headerSubMenuClose:hover {
    color: var(--color-green);
}
.headerSubMenuWrap .headerSubMenuClose .icon {
    width: 3rem;
    height: 3rem;
    position: relative;
    display: block;
    transform: rotate(45deg);
}
.headerSubMenuWrap .subMenuContent {position: relative;z-index: 1;padding: 3.125rem min(5%,6.25rem) 3.125rem;padding: 3.125rem min(5vw,6.25rem) 3.125rem;max-height: 60vh;overflow: auto;}
.headerSubMenuWrap .headerSubMenuClose .icon:before ,
.headerSubMenuWrap .headerSubMenuClose .icon:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--close-color);
    /* transition: var(--speed-normal); */
    border-radius: 2px;
}
.headerSubMenuWrap .headerSubMenuClose .icon:before {
    transform: rotate(90deg);
    top: 50%;
}
.headerSubMenuWrap .headerSubMenuClose .icon:after {
    left: 0;
    top: 50%;
}
.headerSubMenuWrap .headerSubMenuClose:hover .icon:before ,
.headerSubMenuWrap .headerSubMenuClose:hover .icon:after {
    background: var(--color-green)
}

/* 閲覧支援モーダル（PC用・吹き出し風）。枠線は検索表示と同じ緑、幅800px（ウィンドウ幅は超えない） */
.supportModalFilter {
    display: none !important;
}
@media screen and (min-width: 1001px) {
    .langModalLi {
        /* position: relative; */
    }
    .langModalWrap {
        position: absolute;
        top: 100%;
        right: 1em;
        left: auto;
        margin-top: 0.5rem;
        transform: none;
        width: min(calc(100vw - var(--body-space, 2rem) * 2), 620px);
        max-width: 600px;
        background: #fff;
        border-radius: 12px;
        box-shadow: var(--base-shadow, 0 4px 20px rgba(0, 0, 0, .12));
        padding: 3.125rem min(5%, 1.5rem) 1.5rem;
        border: 3px solid var(--color-blue);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
        z-index: 1000;
        pointer-events: none;
    }
    .langModalWrap.supportModalWrap {
        max-width: 600px
    }
    .langModalWrap.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.is-langModalOpen .header:not(.fixedHeader) #headMenu li > a.js-openLang {
        color: var(--color-blue);
    }
    body.is-langModalOpen .header:not(.fixedHeader) #headMenu li > a.js-openLang .text {
        color: var(--color-blue);
    }
    .supportModalLi {
        /* position: relative; */
    }
    .supportModalWrap {
        position: absolute;
        top: 100%;
        right: 1em;
        left: auto;
        margin-top: 0.5rem;
        transform: none;
        width: min(calc(100vw - var(--body-space, 2rem) * 2), 800px);
        max-width: 800px;
        background: #fff;
        border-radius: 12px;
        box-shadow: var(--base-shadow, 0 4px 20px rgba(0, 0, 0, .12));
        padding: 3.125rem min(5%, 1.5rem) 1.5rem;
        border: 3px solid var(--color-green);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
        z-index: 1000;
        pointer-events: none;
    }
    .supportModalWrap.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    /* PC：閲覧支援押下時はリンクをアクティブ表示（文字色を緑に） */
    body.is-supportModalOpen .header:not(.fixedHeader) #headMenu li > a.js-openSupport {
        color: var(--color-green);
    }
    body.is-supportModalOpen .header:not(.fixedHeader) #headMenu li > a.js-openSupport .text {
        color: var(--color-green);
    }
    /* テスト機能用に、拡大比率を計算。font-sizeのみ--font-baseでスケール。閉じる・padding等は固定値のまま。実運用時は--font-baseは1のまま */
    #supportModalWrap {
        --font-base: 1;
    }
    #supportModalWrap .supportModalBody .pageLinksTtl {
        font-size: calc(var(--font-base) * 1rem);
    }
    #supportModalWrap .supportModalBody .pageLinksTtl::before {
        width: calc(var(--font-base) * 0.3125rem);
        height: calc(var(--font-base) * 0.875rem);
    }
    #supportModalWrap .supportModalBody .pageLinksTtl::after {
        top: calc(var(--font-base) * 0.9375rem);
        width: calc(var(--font-base) * 0.3125rem);
        height: calc(var(--font-base) * 0.5rem);
    }
    #supportModalWrap .supportFontSizeBtn {
        font-size: calc(var(--font-base) * 1.125rem);
    }
    #supportModalWrap .supportFontSizeSample .supportFontSizeSampleTtl {
        font-size: calc(var(--font-base) * 1.5rem);
    }
    #supportModalWrap .supportFontSizeSample .supportFontSizeSampleTtl.supportFontSizeSampleText--2x {
        font-size: calc(var(--font-base) * 3rem);
    }
    #supportModalWrap .supportFontSizeSample .supportFontSizeSampleTtl.supportFontSizeSampleText--large {
        font-size: calc(var(--font-base) * 2rem);
    }
    #supportModalWrap .supportFontSizeSample .supportFontSizeSampleTtl.supportFontSizeSampleText--small {
        font-size: calc(var(--font-base) * 1.125rem);
    }
    #supportModalWrap .supportFontSizeSampleNote {
        font-size: calc(var(--font-base) * 1.125rem);
    }
    #supportModalWrap .supportVoiceBtn {
        font-size: calc(var(--font-base) * 1.125rem);
    }
    #supportModalWrap .supportVoiceBtn .icon .svg {
        width: calc(var(--font-base) * 1.5rem);
        height: calc(var(--font-base) * 1.5rem);
    }
}
.supportModalWrap {
    background: #fff;
    border-radius: 10px;
    padding: 50px;
}
.supportModalClose {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    font-weight: 500;
    --close-color: #000;
    color: var(--close-color);
}
.supportModalClose:hover {
    color: var(--color-green);
}
/* Language モーダル（青枠）：閉じるホバーは緑ではなく青に合わせる（hachijo_260416） */
.langModalWrap .supportModalClose:hover,
.langModalWrap .supportModalClose:hover .text {
    color: var(--color-blue);
}
.langModalWrap .supportModalClose:hover .icon:before,
.langModalWrap .supportModalClose:hover .icon:after {
    background: var(--color-blue);
}
.supportModalClose .icon {
    width: 3rem;
    height: 3rem;
    position: relative;
    display: block;
    transform: rotate(45deg);
}
.supportModalClose .icon:before,
.supportModalClose .icon:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--close-color);
    border-radius: 2px;
}
.supportModalClose .icon:before {
    transform: rotate(90deg);
    top: 50%;
}
.supportModalClose .icon:after {
    left: 0;
    top: 50%;
}
.supportModalClose:hover .icon:before,
.supportModalClose:hover .icon:after {
    background: var(--color-green);
}
.supportModalBody .pageLinksTtl:not(:first-child) {
    margin-top: 1.5rem;
}
.langBtns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.75rem;
}
.langBtn {
    position: relative;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    font-size: 1.125rem;
    cursor: pointer;
    transition: var(--speed-normal) background;
    height: 60px;
    min-width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    color: #000;
}
.langBtn:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-light-green);
    left: -2px;
    top: -2px;
    border-radius: 3px;
    transition: var(--speed-normal) opacity;
    opacity: 0;
    pointer-events: none;
}
.langBtn:hover {
    background: var(--bgColor-light-green);
}
.langBtn:hover:before {
    opacity: 1;
}
.langBtn.current {
    background: var(--color-green);
    color: #fff;
    border-color: var(--color-green);
}
.langBtn:visited {
    color: #000;
}
.langBtn.current:visited {
    color: #fff;
}
.langBtn.current:hover {
    background: var(--color-green);
}
.langBtn.current:hover:before {
    opacity: 0;
}
/* PC：文字サイズ変更＋音声読み上げを横並び、その下に文字サイズ表示例 */
@media screen and (min-width: 1001px) {
    .supportModalBody .supportModalRow {
        display: flex;
        gap: 2rem 20px;
        align-items: flex-start;
    }
    .supportModalBody .supportModalCol {
        min-width: 0;
    }
    .supportModalBody .supportModalCol--fontSize {
        /* flex: 1; */
    }
    .supportModalBody .supportModalCol--voice {
        flex: 0 0 auto;
    }
    .supportModalBody .supportModalRow .pageLinksTtl {
        margin-top: 0;
    }
    .supportModalBody .supportModalCol--voice .pageLinksTtl {
        margin-top: 0;
    }
    .supportModalBody .supportModalCol--fontSize .pageLinksTtl:not(:first-child),
    .supportModalBody .supportModalCol--voice .pageLinksTtl:not(:first-child) {
        margin-top: 1.5rem;
    }
    .supportModalBody .supportFontSizeSample {
        margin-top: 1rem;
        width: 100%;
    }
}
.supportFontSizeBtns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.supportFontSizeBtn {
    position: relative;
    padding: 0.5rem 0.2rem;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--speed-normal) background;
    height: 60px;
    min-width: 60px;
    font-size: 1.125rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.supportFontSizeBtn:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-light-green);
    left: -2px;
    top: -2px;
    border-radius: 3px;
    transition: var(--speed-normal) opacity;
    opacity: 0;
    pointer-events: none;
}
.supportFontSizeBtn:hover {
    background: var(--bgColor-light-green);
}
.supportFontSizeBtn:hover:before {
    opacity: 1;
}
.supportFontSizeBtn.current {
    background: var(--color-green);
    color: #fff;
    border-color: var(--color-green);
}
.supportFontSizeBtn.current:hover {
    background: var(--color-green);
    color: #fff;
}
.supportFontSizeBtn.current:hover:before {
    opacity: 0;
}
/* 文字サイズ表示例：枠で囲う。高さ66px固定、テキスト上下中央。左に緑バー（.contentsArea h2.ttl:before 同様） */
.supportFontSizeSample {
    margin-top: 0.75rem;
    padding: 25px;
    background: var(--bgColor-light-green, #EDFFF2);
    box-sizing: border-box;
}
.supportFontSizeSample .supportFontSizeSampleTtl {
    height: 66px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 15px;
    font-size: 1.5rem;
    font-weight: 600;
    position: relative;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    line-height: 1;
    vertical-align: middle;
}
.supportFontSizeSample .supportFontSizeSampleTtl:before {
    content: "";
    /* position: absolute; */
    left: 0;
    width: 6px;
    height: 2.25rem;
    background: #4AAF67;
    border-radius: 4px;
    margin-right: 0.875rem;
}
/* 文字サイズは .supportFontSizeSampleTtl に付与するクラスで変更 */
.supportFontSizeSample .supportFontSizeSampleTtl.supportFontSizeSampleText--2x {
    font-size: 3rem;
}
.supportFontSizeSample .supportFontSizeSampleTtl.supportFontSizeSampleText--large {
    font-size: 2rem;
}
.supportFontSizeSample .supportFontSizeSampleTtl.supportFontSizeSampleText--small {
    font-size: 1.125rem;
}
.supportFontSizeSample .pageLinksTtl {
    margin-top: 0;
}
.supportFontSizeSampleNote {
    margin: 0.75rem 0 0;
    font-size: 1.125rem;
}
.supportVoiceBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem 0;
    padding: 0 15px 0 10px;
    border: 1px solid #aaa;
    background: #fff;
    border-radius: 3px;
    font-size: 1.125rem;
    cursor: pointer;
    transition: var(--speed-normal) background;
    height: 60px;
    box-sizing: border-box;
}
.supportVoiceBtn:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-light-green);
    left: -2px;
    top: -2px;
    border-radius: 3px;
    transition: var(--speed-normal) opacity;
    opacity: 0;
    pointer-events: none;
}
.supportVoiceBtn:hover {
    background: var(--bgColor-light-green);
}
.supportVoiceBtn:hover:before {
    opacity: 1;
}
.supportVoiceBtn .icon .svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-light-green);
}

/* SP時のみメニュー内に閲覧支援ブロックを表示（アクセス・緊急情報・Language → 文字サイズ変更 → 音声読み上げ → メニュー） */
.spUtilityLinks {
    display: none;
}
.supportContentInMenu {
    display: none;
}
.langContentInMenu {
    display: none;
}
@media screen and (max-width: 1000px) {
    .spUtilityLinks {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 0;
        list-style: none;
        margin: 0 0 1.5rem -1rem;
        padding: 0;
        /* justify-content: center; */
        /* justify-content: space-between; */
        /* max-width: 350px; */
    }
    .spUtilityLinks li {
        margin: 0;
        /* width: 25%; */
        max-width: 150px;
        max-width: 11rem;
    }
    .spUtilityLinks a {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: #000;
        text-decoration: none;
        font-size: 1.25rem;
        font-weight: 500;
        padding: 0.25rem 1rem;
        border: 1px solid transparent;
        border-radius: 1000px;
        transition: var(--speed-normal);
        line-height: 1;
    }
    .spUtilityLinks a .icon {
        width: 1.25rem;
        height: 1.25rem;
    }
    .spUtilityLinks a:hover {
        /* color: var(--color-green); */
        border: 1px solid #aaa;
        /* background: var(--bgColor-light-green); */
    }
    .spUtilityLinks a.js-openSupportSp.is-active {
        color: var(--color-green);
    }
    .spUtilityLinks a.js-openLangSp.is-active {
        color: var(--color-blue);
    }
    /* SP：閲覧支援・Language の矢印（閉じ＝下向きchevron、開き＝1本線。背景なし・線自体に色） */
    .spUtilityLinks a .arrow {
        position: relative;
        display: flex;
        width: 1.2rem;
        /* height: 1.5rem; */
        margin-left: auto;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        transition: var(--speed-normal);
    }
    .spUtilityLinks a .arrow:before,
    .spUtilityLinks a .arrow:after {
        content: "";
        display: block;
        position: absolute;
        width: 50%;
        height: 2px;
        top: calc(50% + 2px);
        transition: var(--speed-normal);
        margin-top: -2px;
    }
    .spUtilityLinks a .arrow:before {
        left: 50%;
        transform-origin: left bottom;
        transform: rotate(-40deg);
    }
    .spUtilityLinks a .arrow:after {
        right: 50%;
        transform-origin: right bottom;
        transform: rotate(40deg);
    }
    .spUtilityLinks a.is-active .arrow:before,
    .spUtilityLinks a.is-active .arrow:after {
        transform: rotate(0deg);
        top: 50%;
        width: 44%;
    }
    /* 閲覧支援：線の色を緑に */
    .spUtilityLinks a.js-openSupportSp .arrow:before,
    .spUtilityLinks a.js-openSupportSp .arrow:after {
        background: var(--color-light-green);
    }
    .spUtilityLinks a.js-openSupportSp.is-active .arrow:before,
    .spUtilityLinks a.js-openSupportSp.is-active .arrow:after {
        background: var(--color-green);
    }
    /* Language：線の色を青に */
    .spUtilityLinks a.spUtilityLink--lang .arrow:before,
    .spUtilityLinks a.spUtilityLink--lang .arrow:after {
        background: var(--color-blue);
    }
    .spUtilityLinks a.spUtilityLink--lang.is-active .arrow:before,
    .spUtilityLinks a.spUtilityLink--lang.is-active .arrow:after {
        background: var(--color-blue);
    }
    .supportContentInMenu {
        display: none;
        margin-bottom: 1rem;
    }
    .langContentInMenu {
        display: none;
        margin-bottom: 1rem;
    }
    .supportContentInMenu.is-open {
        /* display: block; */
    }
    .langContentInMenu.is-open {
        /* display: block; */
    }
    /* SP：文字サイズ変更と音声読み上げを横並び、入り切らないときは自動で折り返し */
    .supportContentInMenuRow {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem 2.5rem;
        align-items: flex-start;
    }
    .supportContentInMenuCol {
        min-width: 0;
        /* flex: 1 1 240px; */
    }
    .supportContentInMenuCol--voice {
        flex: 0 1 auto;
        min-width: 200px;
    }
    .supportContentInMenu .supportContentInMenuRow .pageLinksTtl {
        margin-top: 0;
    }
    .supportContentInMenu .supportContentInMenuCol .pageLinksTtl:not(:first-child) {
        margin-top: 1.5rem;
    }
    .supportContentInMenu .pageLinksTtl:not(:first-child) {
        margin-top: 1.5rem;
    }
    .supportContentInMenu .supportFontSizeBtns {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    .supportContentInMenu .supportFontSizeBtn {
        padding: 0.5rem 0.2rem;
        border: 1px solid #ccc;
        background: #fff;
        border-radius: 3px;
        font-size: 1.25rem;
    }
    .supportContentInMenu .supportFontSizeBtn.current {
        background: var(--color-green);
        color: #fff;
        border-color: var(--color-green);
    }
    /* SPでは文字サイズ表示例は非表示（PCのみ） */
    .supportContentInMenu .supportFontSizeSample {
        display: none !important;
    }
    .supportContentInMenu .supportVoiceBtn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem 0.25rem;
        /* margin-top: 0.5rem; */
        padding: 0.75rem 1.25rem;
        border: 1px solid #ccc;
        background: #fff;
        border-radius: 3px;
        font-size: 1.25rem;
    }
    .supportContentInMenu .supportVoiceBtn .icon .svg {
        width: 1.5rem;
        height: 1.5rem;
        color: var(--color-light-green);
    }
    .langContentInMenu .langBtns {
        margin-top: 0.5rem;
    }
    .langContentInMenu .langBtn {
        padding: 0.5rem 0.2rem;
        border: 1px solid #ccc;
        background: #fff;
        border-radius: 3px;
        font-size: 1.25rem;
        height: 60px;
        min-width: 60px;
    }
    .langContentInMenu .langBtn.current {
        background: var(--color-green);
        color: #fff;
        border-color: var(--color-green);
    }
}
@media screen and (max-width: 600px) {
    .spUtilityLinks li {
        /* width: 50%; */
        /* max-width: 50%; */
        min-width: 50%;
    }
}
/* PC（1001px以上）ではSP用の閲覧支援ブロックを非表示 */
@media screen and (min-width: 1001px) {
    .spUtilityLinks,
    .supportContentInMenu,
    .langContentInMenu {
        display: none !important;
    }
}
/* SPでは閲覧支援はメニュー内表示のためモーダルは使わない */
@media screen and (max-width: 1000px) {
    .supportModalWrap,
    .langModalWrap,
    .supportModalFilter {
        display: none !important;
    }
}

/* 検索表示時は子階層を隠して検索ブロックのみ表示（PC/SP共通） */
.headerSubMenuWrap.is-search .subMenuContent--menu { display: none; }
.headerSubMenuWrap.is-search .subMenuContent--search { display: block; }

/* 検索オーバーレイ中身：共通スタイル（レスポンシブで同じ。SPで気になるところだけメディアクエリで調整） */
.headerSubMenuWrap .subMenuContent--search .menuSearchTtl { font-size: 1.125rem; font-weight: 700; margin: 0 0 0.75rem; color: #000; }
.headerSubMenuWrap .menuSearchForm {display: flex;gap: 0;margin-bottom: 1.25rem;/* border: 1px solid #aaa; *//* border-radius: 10px; *//* overflow: hidden; */}
.headerSubMenuWrap .menuSearchInputWrap {display: flex;align-items: center;flex: 1;border: 1px solid #ccc;border-radius: 10px 0 0 10px;/* background: #fff; */padding: 0 0.625rem;gap: 0.75rem;}
.headerSubMenuWrap .menuSearchIcon {display: flex;align-items: center;justify-content: center;/* padding: 0 0.5rem; */color: #999;--color1: var(--color-light-green)}
.headerSubMenuWrap .menuSearchIcon .svg {width: 1.25rem;}
.headerSubMenuWrap .menuSearchInput {flex: 1;padding: 0.5rem 0.75rem;border: none;font-size: 1.125rem;background: transparent;min-height: 3.75rem;}
.headerSubMenuWrap .menuSearchBtn {padding: 0.5rem 0.5rem;background: var(--color-green);color: #fff;border: none;border-radius: 0 10px 10px 0;font-weight: 700;cursor: pointer;display: flex;align-items: center;justify-content: center;width: 6.25rem;font-size: 1.25rem;transition: var(--speed-normal) filter;}
html[lang="ja"] .headerSubMenuWrap .menuSearchBtn { letter-spacing: 0.6rem; text-indent: 0.6rem; }
.headerSubMenuWrap .menuSearchBtn:hover {
    filter: saturate(200%);
}
.headerSubMenuWrap .menuSearchKeywordsTtl { font-size: 0.875rem; color: #666; margin: 0 0 0.5rem; }
.headerSubMenuWrap .menuSearchKeywords { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.headerSubMenuWrap .menuSearchKeywords .keywordPill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; background: #f0f0f0; border-radius: 999px; font-size: 0.875rem; color: #333; text-decoration: none; transition: background .2s ease; }
.headerSubMenuWrap .menuSearchKeywords .keywordPill:hover { background: #e0e0e0; }
.headerSubMenuWrap .menuSearchKeywords .keywordPill .arrow .svg { width: 0.625rem; height: 0.625rem; color: var(--color-green); }

@media screen and (min-width: 1001px) {
    .headerSubMenuWrap.is-search { border-color: var(--color-green); }
    .fixedHeader-pc { display: flex; }
    .fixedHeader-sp { display: none !important; }
    .headerSubMenuWrap .spMenuTtl,
    .headerSubMenuWrap .spNaviTtl,
    .headerSubMenuWrap .spNaviGrid,
    .headerSubMenuWrap .spOtherTtl,
    .headerSubMenuWrap .spOtherList ,
    .headerSubMenuWrap .tabBlock{ display: none !important; }
    .headerSubMenuWrap .subMenuContent--search { display: none; }
    .headerSubMenuWrap.is-search .subMenuContent--search { display: block; }
    .headerSubMenuWrap .subMenuPanel { position: relative; }
    .headerSubMenuWrap .subMenuPanel { display: none; }
    .headerSubMenuWrap .subMenuPanel.is-active { display: block; }
    .headerSubMenuWrap .subMenuPanelTrigger { display: none; }
    .headerSubMenuWrap .subMenuPanelHead {
        /* display: flex; */
        /* align-items: center; */
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #eee; /* グレー線は常時 */
        /* position: sticky; */
        /* background: #fff; */
        /* top: -1.725rem; */
    }
    /* subMenuPanelHead のタイトル部分をリンクに。ホバーで色変更・緑の下線が左から右に伸びる */
    .headerSubMenuWrap .subMenuPanelTtl {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.5rem;
        font-weight: 700;
        color: #000;
        text-decoration: none;
        position: relative;
        padding-bottom: 0.75rem;
        margin-bottom: -0.75rem;
        transition: color .2s ease;
    }
    .headerSubMenuWrap .subMenuPanelTtl::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 3px;
        background: #4AAF67;
        transition: width .25s ease;
    }
    .headerSubMenuWrap .subMenuPanelTtl:hover {
        color: var(--color-green);
    }
    .headerSubMenuWrap .subMenuPanelTtl:hover::after {
        width: 100%;
    }
    .headerSubMenuWrap .subMenuPanelTtl .icon {
        width: 2.625rem;
    }
    .headerSubMenuWrap .subMenuPanelTtl .arrow {
        align-items: center;
        justify-content: center;
        /* flex-shrink: 0; */
        width: 1.125rem;
        transition: var(--speed-normal) transform;
    }

    .headerSubMenuWrap .subMenuPanelTtl:hover .arrow {
        transform: translateX(var(--arrow-move));
    }
    .headerSubMenuWrap .subMenuPanelTtl .arrow .svg {/* width: 0.75rem; *//* height: 0.75rem; */}
    .headerSubMenuWrap .subMenuPanelBody ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 1rem;
    }
    .headerSubMenuWrap .subMenuPanelBody ul li { margin: 0; padding: 0; }
    .headerSubMenuWrap .subMenuPanelBody ul li a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.25rem;
        color: #000;
        text-decoration: none;
        font-size: 1.125rem;
        transition: var(--speed-normal);
        border-radius: 5px;
        min-height: 3.375rem;
        font-weight: 500;
    }
    .headerSubMenuWrap .subMenuPanelBody ul li a:hover {
        color: var(--color-green);
        background: var(--bgColor-light-green);
    }
    .headerSubMenuWrap .subMenuPanelBody ul li a .icon {
        width: 1.125rem;
        color: var(--color-green);
        line-height: 0;
        transition: var(--speed-normal) transform;
    }
    .headerSubMenuWrap .subMenuPanelBody ul li a:hover .icon {
        transform: translateX(var(--arrow-move));
    }

    #spHeadBtns { display: none; }
    .header:first-of-type { position: relative; z-index: 9999; }
    .fixedHeader .headerSubMenuWrap { display: none; }
    .header:not(.fixedHeader) .headerSubMenuWrap { display: block; }
}

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

    #menuArea,
    #headMenu {
        display: none
    }

    #spHeadBtns {
        display: flex;
        gap: 1px;
    }

    .header {
        padding: 0;
        box-shadow: none;
        height: clamp(50px, 4.25rem, 60px);
    }

    #header {
        padding: 0;
        position: relative;
        z-index: 30;
        height: 100%;
    }

    /* 固定・追従とも同じロゴスタイル */
    #logo,
    .fixedHeader #fixHeadInner .logo {
        width: 8.625rem;
        /* width: 20%; */
        /* min-width: 140px; */
        width: 140px;
        margin-left: 1rem;
        padding: 0.5rem 0;
    }

    /* 固定・追従とも同じSPボタンエリア */
    #spHeadBtns,
    .fixedHeader-sp {
        display: flex;
        gap: 1px;
    }

    /* 固定・追従とも同じボタン見た目 */
    #spHeadBtns a,
    .fixedHeader-sp a {
        display: flex;
        flex-direction: column;
        width: clamp(50px, 4.25rem, 60px);
        height: clamp(50px, 4.25rem, 60px);
        background: var(--color-green);
        color: #fff;
        font-size: clamp(12px, 0.8725rem, 14px);
        align-items: center;
        justify-content: center;
        font-weight: bold;
        line-height: 1;
        gap: 0.5em;
        text-decoration: none;
        transition: var(--speed-normal);
    }
    #spHeadBtns a:hover, .fixedHeader-sp a:hover {
        filter: saturate(200%);
    }
    #spHeadBtns a .icon,
    .fixedHeader-sp a .icon {
        width: 1.5rem;
        width: 1.5em;
    }

    /* 検索ボタン（緑・角丸） */
    #spSearch a,
    .fixedHeader-sp .fixedHeader-spSearch a {
        background: var(--color-green);
        border-radius: 0 0 0 6px;
    }

    /* メニューボタン（濃い緑） */
    #spMenu a,
    .fixedHeader-sp .fixedHeader-spMenu a {
        background: #3B9755;
    }

    /* SPボタン：通常時は default、開いているときは閉じる表示に切替（ズレ防止のため表示切替のみ） */
    #spHeadBtns .spBtn-default,
    #spHeadBtns .spBtn-close,
    .fixedHeader-sp .spBtn-default,
    .fixedHeader-sp .spBtn-close {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
    }
    #spHeadBtns .spBtn-close,
    .fixedHeader-sp .spBtn-close {
        display: none;
    }
    #spHeadBtns .spHeadBtn.is-close-state .spBtn-default,
    .fixedHeader-sp .spHeadBtn.is-close-state .spBtn-default {
        display: none;
    }
    #spHeadBtns .spHeadBtn.is-close-state .spBtn-close,
    .fixedHeader-sp .spHeadBtn.is-close-state .spBtn-close {
        display: flex;
    }
    #spHeadBtns .spHeadBtn.is-close-state,
    .fixedHeader-sp .spHeadBtn.is-close-state {
        background: #000 !important;
        color: #fff;
    }
    #spHeadBtns .spHeadBtn.is-close-state:hover,
    .fixedHeader-sp .spHeadBtn.is-close-state:hover {
        filter: brightness(1.1);
    }
    /* 閉じる用Xアイコン（CSS描画） */
    #spHeadBtns .icon--close,
    .fixedHeader-sp .icon--close {
        width: 1.5em;
        height: 1.5em;
        position: relative;
        display: block;
        transform: rotate(45deg);
    }
    #spHeadBtns .icon--close::before,
    #spHeadBtns .icon--close::after,
    .fixedHeader-sp .icon--close::before,
    .fixedHeader-sp .icon--close::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        top: 50%;
        left: 0;
    }
    #spHeadBtns .icon--close::before,
    .fixedHeader-sp .icon--close::before {
        transform: rotate(90deg);
    }

    /* 追従ヘッダー：SP時は .fixedHeader-pc 非表示、中身は上で共通化 */
    .fixedHeader-pc {
        display: none !important;
    }
    .fixedHeader #fixHeadInner {
        padding: 0;
        height: auto;
    }

    /* SP: オーバーレイは is-open で全画面表示。1ソースでCSSで切り替え */
    .headerSubMenuWrap .headerSubMenuClose {
        display: none !important;
    }
    .header .headerSubMenuWrap {
        display: none;
        position: fixed;
        /* inset: 0; */
        left: 0;
        top: clamp(50px, 4.25rem, 60px);
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        transform: none;
        border-radius: 0;
        /* border: none !important; */
        overflow: auto;
        padding: 1rem var(--body-space) 3rem;
        /* padding-top: 6rem; */
        z-index: 1010;
        height: calc(100dvh - clamp(50px, 4.25rem, 60px));
        border: 1rem solid #fff;
        border-width: 1rem 0;
        box-shadow: none;
    }
    .header .headerSubMenuWrap {
    }
    .headerSubMenuWrap.is-open {
        display: block;
        /* border: none !important; */
    }
    .headerSubMenuWrap .pageLinksTtl {
        font-size: 1.25rem
    }
    .headerSubMenuWrap .pageLinksTtl:not(:first-child) {
        margin-top: 2rem;
    }
    .headerSubMenuWrap.is-search {
        /* border: none !important; */
    }
    /* SP: メニュー開いたときは検索を非表示、検索開いたときだけ検索表示 */
    .headerSubMenuWrap .subMenuContent--search { display: none; }
    .headerSubMenuWrap.is-search .subMenuContent--menu { display: none; }
    .headerSubMenuWrap.is-search .subMenuContent--search { display: block; }
    .headerSubMenuWrap .subMenuPanel { display: block; }
    /* SP用アコーディオン：開閉は .subMenuPanelTrigger .js-spAccordionBtn クリック。開くと Head（リンク）＋ Body が表示 */
    .headerSubMenuWrap .subMenuPanel {
        /* border: 1px solid #aaa; */
        border-radius: 10px;
        margin-bottom: 0.5rem;
        overflow: hidden;
        box-shadow: 0px 0px 0px 1px #aaa;
    }
    .headerSubMenuWrap .subMenuPanel.is-open {
        border-color: var(--color-green);
        box-shadow: 0px 0px 0px 2px var(--color-green);
    }
    .headerSubMenuWrap .subMenuPanelTrigger {
        display: block;
    }
    .headerSubMenuWrap .subMenuPanelTrigger .js-spAccordionBtn {
        display: flex;
        align-items: center;
        /* align-items: stretch; */
        justify-content: space-between;
        width: 100%;
        /* padding: 0.75rem 1rem; */
        font-size: 1.125rem;
        font-weight: 700;
        color: #000;
        text-align: left;
        text-decoration: none;
        /* background: #fff; */
        cursor: pointer;
        gap: 0.5rem;
        height: 4.25rem;
        transition: var(--speed-normal) background;
    }
    .headerSubMenuWrap .subMenuPanelTrigger .js-spAccordionBtn:hover {
        background: var(--bgColor-light-green)
    }
    .headerSubMenuWrap .subMenuPanelTrigger .js-spAccordionBtn .text {
       padding: 1rem
    }
    .headerSubMenuWrap .subMenuPanelTrigger .arrow {
        position: relative;
        display: flex;
        height: 100%;
        width: 3.25rem;
        /* aspect-ratio: 3 / 4; */
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: var(--color-light-green);
        color: var(--color-green);
        transition: var(--speed-normal);
    -1px -1px -1px
        CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
    }
    .headerSubMenuWrap .subMenuPanelTrigger .arrow:before,
    .headerSubMenuWrap .subMenuPanelTrigger .arrow:after {
        content: "";
        display: block;
        position: absolute;
        width: 25%;
        height: 2px;
        background: #fff;
        top: calc(50% + 3px);
        transition: var(--speed-normal);
    }
    .headerSubMenuWrap .subMenuPanelTrigger .arrow:before {
        left: 50%;
        transform-origin: left bottom;
        transform: rotate(-40deg);
    }
    .headerSubMenuWrap .subMenuPanelTrigger .arrow:after {
        right: 50%;
        transform-origin: right bottom;
        transform: rotate(40deg);
    }
    .headerSubMenuWrap .is-open .subMenuPanelTrigger .arrow:before,
    .headerSubMenuWrap .is-open .subMenuPanelTrigger .arrow:after {
        transform: rotate(0deg);
        top: 50%;
        width: 20%;
    }
    .headerSubMenuWrap .subMenuPanel.is-open .subMenuPanelTrigger .arrow {
        background: var(--color-green);
        color: #fff;
        /* transform: rotate(180deg); */
    }
    .headerSubMenuWrap .subMenuPanelHead,
    .headerSubMenuWrap .subMenuPanelBody {
        display: none;
        border-top: 1px solid #eee;
        width: calc(100% - 1.5rem);
        margin: 0 auto;
    }
    /* 開閉表示は JS の slideDown/slideUp で制御（is-open は矢印回転・枠色用） */
    .headerSubMenuWrap .subMenuPanelHead .subMenuPanelTtl {
        padding: 0.75rem 1rem;
        padding: 0.75rem 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #000;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        min-height: 4.25rem;
        transition: var(--speed-normal) color, var(--speed-normal) background;
    }
    .headerSubMenuWrap .subMenuPanelHead .subMenuPanelTtl:hover {
        color: var(--color-green);
        background: var(--bgColor-light-green);
    }
    .headerSubMenuWrap .subMenuPanelHead .subMenuPanelTtl .icon { display: none; }
    .headerSubMenuWrap .subMenuPanelHead .subMenuPanelTtl .arrow {
        order: -1;
        flex-shrink: 0;
        color: var(--color-green);
        transition: var(--speed-normal) transform;
    }
    .headerSubMenuWrap .subMenuPanelHead .subMenuPanelTtl:hover .arrow {
        transform: translateX(var(--arrow-move));
    }
    .headerSubMenuWrap .subMenuPanelHead .subMenuPanelTtl .arrow .svg { width: 1.125rem; color: var(--color-green); }
    .headerSubMenuWrap .subMenuPanelBody {
        padding: 0 0rem 1rem;
        border: none;
        border-top: 1px solid #eee;
        border-radius: 0;
    }
    .headerSubMenuWrap .subMenuPanelBody ul {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 0.25rem;
    }
    .headerSubMenuWrap .subMenuPanelBody ul li a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0;
        color: #000;
        text-decoration: none;
        font-size: 1.125rem;
        transition: var(--speed-normal) color, var(--speed-normal) background;
        font-weight: 500;
        min-height: 3.375rem;
    }
    .headerSubMenuWrap .subMenuPanelBody ul li a:hover {
        color: var(--color-green);
        background: var(--bgColor-light-green);
    }
    .headerSubMenuWrap .subMenuPanelBody ul li a .icon {
        width: 1.125rem;
        flex-shrink: 0;
        color: var(--color-green);
        transition: var(--speed-normal) transform;
    }
    .headerSubMenuWrap .subMenuPanelBody ul li a:hover .icon {
        transform: translateX(var(--arrow-move));
    }
    .headerSubMenuWrap .subMenuPanelBody ul li a .icon .svg {
        width: 1.125rem;
        color: var(--color-green);
        flex-shrink: 0;
    }
    .headerSubMenuWrap .spNaviGrid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 1rem;
        list-style: none;
        margin: 0 0 1.25rem;
        padding: 0;
    }
    .headerSubMenuWrap .spNaviGrid li a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 1rem 0.5rem;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-sizing: border-box;
        text-decoration: none;
        color: #000;
        font-size: 1.125rem;
        font-size: 1.375rem;
        font-size: 1.25rem;
        font-weight: 600;
        aspect-ratio: 1 / 1;
        transition: var(--speed-normal) background;
        text-align: center;
    }
    .headerSubMenuWrap .spNaviGrid li a:hover {
        background: var(--bgColor-light-green);
    }
    .headerSubMenuWrap .spNaviGrid li a::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        border: 2px solid var(--color-light-green);
        left: -2px;
        top: -2px;
        border-radius: 10px;
        transition: var(--speed-normal) opacity;
        opacity: 0;
    }
    .headerSubMenuWrap .spNaviGrid li a:hover::before {
        opacity: 1;
    }
    .headerSubMenuWrap .spNaviGrid li a .icon {
        text-align: center;
        transition: var(--speed-normal) filter;
    }
    .headerSubMenuWrap .spNaviGrid li a:hover .icon {
        filter: saturate(120%) brightness(1.1);
    }
    .headerSubMenuWrap .spNaviGrid li a .icon .svg {
        width: 40%;
        max-width: 13rem;
        color: var(--color-green);
    }
    .headerSubMenuWrap .spOtherList {
        margin: 0;
        padding: 0;
        border: 1px solid #aaa;
        border-radius: 10px;
        overflow: hidden;
    }
    .headerSubMenuWrap .spOtherList li:not(:first-child) {
        border-top: 1px solid #aaa;
    }
    .headerSubMenuWrap .spOtherList li a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        color: #000;
        text-decoration: none;
        font-size: 1.25rem;
        font-weight: 500;
        min-height: 4rem;
        transition: var(--speed-normal) color, var(--speed-normal) background;
    }
    .headerSubMenuWrap .spOtherList li a:hover {
        color: var(--color-green);
        background: var(--bgColor-light-green);
    }
    .headerSubMenuWrap .spOtherList li a .icon {
        width: 1.125rem;
        flex-shrink: 0;
        color: var(--color-green);
        transition: var(--speed-normal) transform;
    }
    .headerSubMenuWrap .spOtherList li a:hover .icon {
        transform: translateX(var(--arrow-move));
    }
    .headerSubMenuWrap .spOtherList li a .icon .svg {
        width: 1.125rem;
        color: var(--color-green);
    }
    .headerSubMenuWrap .spOtherList li a .text {
        flex: 1
    }
    .headerSubMenuWrap .subMenuContent {
        padding: 1.5rem var(--body-space, 1rem);
        max-height: none;
    }
    /* SP時検索オーバーレイ：余白・キーワードピル薄緑・入力エリア */
    .headerSubMenuWrap.is-search .subMenuContent--search {
    }
    .headerSubMenuWrap.is-search .subMenuContent--search .menuSearchKeywords .keywordPill {
        background: var(--bgColor-light-green, #e8f5e9);
    }
    .headerSubMenuWrap.is-search .subMenuContent--search .menuSearchKeywords .keywordPill:hover {
        background: #c8e6c9;
    }
}
@media screen and (max-width: 768px) {
    .headerSubMenuWrap .spNaviGrid {
        grid-template-columns: repeat(3,1fr)
    }
}
@media screen and (max-width: 640px) {
    .headerSubMenuWrap .subMenuPanelBody ul {
        grid-template-columns: 1fr
    }
}
@media screen and (max-width: 550px) {
    .headerSubMenuWrap .spNaviGrid {
        grid-template-columns: repeat(2,1fr)
    }
}

/* ---
　フッター
 --- */
#footer {
    background: #32394E;
    color: #fff;
}

.footInner {
    max-width: 1440px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3.4375rem var(--body-space) 2.4375rem;
    gap: 3rem;
}

.footProfile h2 {
    font-size: 1.25rem;
    font-weight: 800;
}

.footProfile p {
    font-size: 0.875rem;
    font-weight: 300;
}

.footLinks ul {
    display: flex;
    gap: 1rem 2rem;
    font-size: 1rem;
    flex-wrap: wrap;
}

.footLinks a {
    color: #fff;
    display: flex;
    gap: 0.3725rem;
    text-decoration: none;
}

.footLinks a .icon {
    width: 1.25rem;
    --color1: var(--color-light-green)
}

.footLinks a .text {
    position: relative;
}

.footLinks a .text:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #fff;
    transition: var(--speed-normal) width;
}

.footLinks a:hover .text:before {
    width: 100%;
}

#copy {
    background: #000;
    padding: 1.25rem var(--body-space);
    text-align: center;
    font-size: 0.875rem;
}

@media screen and (max-width: 768px) {
    .footInner {
        display: block;
    }

    .footLinks ul {
        margin-top: 2rem
    }
}


/* ---
　ボタン
 --- */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: 0.9375rem;
    font-size: clamp(14.5px, 0.9375rem, 20px);
    margin: 0.25rem auto 0;
    font-weight: 600;
    gap: 0.35rem;
    text-decoration: none;
    transition: var(--speed-normal) background, var(--speed-normal) border-color, var(--speed-normal) filter;
}

.btn .arrow {
    transition: var(--speed-normal) transform;
}

.btn:hover .arrow {
    transform: translateX(var(--arrow-move));
}


.closeBtnWrap {
    margin-top: 1.5rem;
}

.closeBtnWrap .btn {
    background: #555;
    color: #fff;
    font-size: 1.125rem;
    max-width: 280px;
    min-height: 3.375rem;
    transition: var(--speed-normal)
}
.closeBtnWrap .btn:hover {
    background: #000;
}
.closeBtnWrap .btn .icon {
    position: relative;
    width: 1.75em;
    height: 1.75em;
    margin-right: -1.75em;
    margin-top: -0.125em;
}

.closeBtnWrap .btn .icon:before,
.closeBtnWrap .btn .icon:after {
    content: "";
    display: block;
    position: absolute;
    width: 60%;
    height: 2px;
    background: #fff;
    left: 20%;
    top: 50%;
    margin-top: -1px;
    border-radius: 1px;
}

.closeBtnWrap .btn .icon:before {
    transform: rotate(45deg);
}

.closeBtnWrap .btn .icon:after {
    transform: rotate(-45deg);
}

/* TOPページ
====================================================*/
#topPage .ttlBlock:has(.ttlLead) {
    display: flex;
    gap: 1.875rem;
}

#topPage .ttlBlock .ttlLead {
    padding-left: 1.875rem;
    border-left: 1px solid #ccc;
}

#topPage .iconTtl {
    font-size: 2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#topPage .iconTtl .icon {
    width: 1.875rem;
    height: 1em;
    line-height: 0;
}
#topPage .iconTtl .text {
    flex: 1
}
@media screen and (max-width: 768px) {
    #topPage .ttlBlock:has(.ttlLead) {
        flex-direction: column;
        gap: 1.25rem;
    }

    #topPage .ttlBlock .ttlLead {
        padding-left: 0;
        border: none;
    }
}

/* ---
　お知らせエリア
 --- */
#topEmergencyNotice {
    margin-top: var(--sec-margin-s);
    padding: 0 var(--body-space);
}

#topNotice {
    padding: var(--sec-margin) var(--body-space) 0;
}

#topNotice .noticeBox {
    /* margin-top: 1.5625rem; */
}

dl.newsBlock {
    /* display: flex; */
    border-radius: 10px;
    display: grid;
    grid-template-columns: 15.625rem 1fr;
    overflow: hidden;
}

dl.newsBlock>dt {
    align-content: center;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.25rem 0.5rem;
    padding: 2rem 0;
}

dl.newsBlock>dd {
    /* display: flex; */
    background: #fff;
    padding: 1.875rem;
    align-self: center;
}

dl.newsBlock>dt .ttlText {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    justify-content: center;
    line-height: 1;
}

dl.newsBlock>dt .ttlText .icon {
    width: 1.25em;
}

#emergencyNotice dl.newsBlock {
    border: 3px solid #D54444;
    --icon-color: #D54444;
}

#emergencyNotice dl.newsBlock>dt {
    background: var(--color-red);
    color: #fff;
}

#emergencyNotice dl.newsBlock>dt .icon {
    --color6: #fff;
}

dl.newsBlock>dt .moreBtn .btn {
    background: #fff;
    color: #000;
    width: 120px;
    height: 44px;
    /* font-size: 0.9375rem; */
    font-size: 1rem;
    margin: 0.25rem auto 0;
    line-height: 1;
    /* gap: 0.3rem; */
}

dl.newsBlock>dt .moreBtn .btn:hover {
    background: var(--bgColor-light-green);
}

#emergencyNotice dl.newsBlock>dt .moreBtn .btn:hover {
    background: #FFEAEA;
}

.btn .arrow {
    width: 1.125em;
}

dl.newsBlock>dt .moreBtn .btn .arrow {
    --color1: var(--icon-color);
}

#importantNotice dl.newsBlock {
    --icon-color: #BA7F00;
    border: 5px solid #BA7F00;
    grid-template-columns: 18.75rem 1fr;
}

#importantNotice dl.newsBlock>dt {
    background: #BA7F00;
    color: #fff;
    font-size: 1.375rem;
    padding: 2rem 1rem;
}
#importantNotice dl.newsBlock>dt .ttlText {
    background: #fff;
    color: #BA7F00;
    border-radius: 5px;
    padding: 0.4rem 0.75rem 0.25rem;
    gap: 0.5rem;
    min-width: 0;
    display: inline-flex;
}
#importantNotice dl.newsBlock>dt .ttlText .text {
    min-width: 0;
    flex: 1;
    word-wrap: break-word;
    display: block;
}
#importantNotice dl.newsBlock>dt .icon {
    transform: rotate(-15deg);
    padding-bottom: 0.35rem;
}
#importantNotice dl.newsBlock>dd {
    padding: 1.25rem 1.875rem;
}

.emergencyInfoList li {
    padding: 0 1.25rem;
}

#emergencyNotice .emergencyInfoList li {
    padding: 0;
}

#emergencyNotice .emergencyInfoList li:not(:first-child) {
    margin-top: 1.25rem;
    padding-top: 1.25rem !important;
    border-top: 1px solid #ccc;
}

.emergencyBlock .emergencyInfoList li {
    padding: 1.875rem;
    border-bottom: 1px solid #ccc;
    border-top: 0;
}

.emergencyInfoList li:not(:first-child) {
    margin-top: 0;
}

/* .emergencyBlock .emergencyInfoList li:first-child {
    padding-top: 1.25rem;
}
.emergencyBlock .emergencyInfoList li:last-child {
    padding-bottom: 1.25rem!important;
} */
.emergencyInfoList dt {
    font-size: 1.125rem;
    font-weight: bold;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem
}

.emergencyInfoList dt .annoText {
    color: var(--color-red);
    font-size: 1em;
}

.emergencyInfoList dt .emergencyLink {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    text-decoration: none;
}

.newsList .newsListInner {
    color: #000;
    padding: 0 1.25rem;
    padding: 0 1.5rem 0 0.75rem;
    position: relative;
    display: block;
    text-decoration: none;
    font-size: 1rem;
}
.newsList .newsListInner > p {
    font-size: 1.125rem;
}

#importantNotice .newsList .newsListInner {
    padding-left: 0
}

a.newsListInner:hover {
    /* text-decoration: underline; */
}

a.newsListInner p.ttl {
    transition: var(--speed-normal) color;
}

a.newsListInner:hover p.ttl {
    text-decoration-thickness: 3px;
    color: var(--color-green);
}

#importantNotice a.newsListInner:hover p.ttl {
    color: #BA7F00;
}

.newsListInner .icon {
    position: absolute;
    right: -1.3725rem;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    --color1: var(--icon-color, var(--color-light-green));
    width: var(--link-icon-w);
    transition: var(--speed-normal) transform;
}

.newsListInner .icon:has(use[href="#icon_arrow_fill-r"]) {
    --color1: #fff;
}
a.newsListInner:hover .icon {
    transform: translateX(var(--arrow-move)) translateY(-50%);
}

.newsListInner dt {
    /* font-weight: bold; */
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* gap: 1rem; */
    /* margin-bottom: 0.25rem; */
}

@media screen and (max-width: 768px) {
    dl.newsBlock {
        display: block;
    }

    dl.newsBlock>dt {
        padding: 1rem 2rem;
        line-height: 1;
        min-height: 4rem;
        gap: 0.75rem;
        flex-direction: row;
        justify-content: space-between;
    }

    dl.newsBlock>dt .moreBtn .btn {
        margin-top: 0;
        font-size: clamp(14px, 1.125rem, 20px);
        height: 3rem;
        /* min-width: 200px; */
    }
}


/* ---
　スライダー
 --- */
#topVisual {
    background: var(--bgColor-green);
    padding: 2rem var(--body-space) 0;
    margin-top: var(--sec-margin-s);
    margin-bottom: 3.5rem;
    border: 1px solid var(--color-light-green);
    border-width: 1px 0;
}

#topVisual .slideWrap {
    position: relative
}

#topVisual .slideWrap .slideCtrlWrap {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    /* justify-content: space-between; */
    align-items: baseline;
    gap: 1rem;
    width: 44.4%;
    padding-left: 2.875rem;
    /* flex-wrap: wrap; */
    font-size: 1rem;
    font-size: clamp(15px, 1rem, 20px);
    flex-wrap: wrap;
}

#topVisual .slideItem:nth-child(n+2) {
    display: none;
}
#topVisual .slider.slick-initialized .slideItem:nth-child(n+2) {
    display: block;
}
.sliderCtrl {
    display: flex;
    align-items: center;
    gap: 1rem;
    line-height: 1;
}

.sliderControls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sliderControls a {
    width: 1.5em;
    transition: var(--speed-normal) opacity;
    /* width: clamp(23px,1.5em,40px); */
}

.sliderControls a:hover {
    opacity: 0.6;
}

.js-slider-playPause .iconPlay {
    display: none;
}

.js-slider-playPause .iconPause {
    display: inline-block;
}

/* 再生待機（＝autoplay していない） → 再生アイコン表示 */
.js-slider-playPause.is-paused .iconPlay {
    display: inline-block;
}

.js-slider-playPause.is-paused .iconPause {
    display: none;
}

#slideCounter {
    display: flex;
    font-weight: bold;
    color: #555;
    align-items: baseline;
    line-height: 1;
    gap: 0.5rem;
}

#slideCounter .current {
    color: #0B6AB7;
    font-size: 187.5%;
}

#slideCounter .sl,
#slideCounter .total {
    font-size: 112.5%
}

/* 数字部分フェード用 */
#slideCounter .current {
    /* display: inline-block; */
    /* transition: opacity 0.7s ease; */
    opacity: 1;
}

/* change クラスが付いたとき：フェードアウト */
#slideCounter.change .current {
    opacity: 0;
}

.slideCtrlWrap .btn {
    background: #fff;
    width: 16.25em;
    height: 3.375em;
    color: #000;
    font-weight: 600;
    border: 2px solid #ccc;
    font-size: 93.75%;
}

.slideCtrlWrap .btn:hover {
    background: var(--bgColor-light-green);
    border-color: var(--color-green);
}

.slideCtrlWrap .btn .icon {
    width: 1.25rem;
}

.slideInner {
    display: flex;
    /* align-items: center; */
    /* height: 100%; */
    align-items: stretch;
    gap: 2.875rem;
    color: #333;
    text-decoration: none;
}

.slideInner .slideImg {
    width: 55.6%;
    max-width: 800px;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 16 / 9;
    /* aspect-ratio: 3 / 2; */
    /* aspect-ratio: 4 / 3; */
    aspect-ratio: 5 / 3;
}

.slideInner .slideImg img {
    /* transition: var(--speed-scale) transform;
    transition: 0.5s ease-in-out transform; */
    object-fit: cover;
    width: 100%;
    height: 100%;
}

a.slideInner:hover .slideImg img {
    /* transform: scale(1.08); */
}
a.slideInner.hover .slideImg img {
    /* transform: scale(1.08);
    transform: scale(1.15); */
}
@keyframes zoom-and-back {
  0%   { transform: scale(1.00); }   /* 最初 */
  45%  { transform: scale(1.1); } /* 最大（1.2倍） */
  100% { transform: scale(1); }   /* 最後（元に戻る） */
}

/* 3. マウスオーバーした時だけアニメーションを実行 */
a.slideInner.hover .slideImg img {
  /* 0.6秒かけて、1回だけ、アニメーションを実行 */
  animation: zoom-and-back 1.35s cubic-bezier(0.33, -0.1, 0.51, 0.91) forwards;
}
.slideInner .slideTextArea {
    /* width: 44.4%; */
    display: flex;
    flex-direction: column;
    /* padding: 0 7% 0 2.875rem; */
    /* height: 100%; */
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 5rem;
    padding-bottom: 8rem;
    max-width: 535px;
    flex: 1;
}

.slideInner .slideTtl {
    box-decoration-break: clone;
    font-size: 2.375rem;
    font-weight: bold;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    width: 100%;
}

.slideInner .slideTtl span {
    background: #fff;
    transition: var(--speed-normal) background, var(--speed-normal) color;
}

/* a.slideInner:hover .slideTtl span  */
a.slideInner.hover .slideTtl span {
    background: #0B6AB7;
    color: #fff;
}

.slideInner .text {
    font-size: 1.125rem;
    width: 100%;
    transition: var(--speed-normal) color;
}

a.slideInner:hover .text {
    color: #000;
}

.thumbnail {
    /* margin-top: 1.875rem; */
    transform: translateY(3.4375rem);
    margin-top: -1.5625rem;
    height: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
    align-items: flex-start;
    justify-content: center;
    gap: 0.75rem;
}
.thumbnail.slick-initialized {
    display: block;
}
.thumbnailImg {
    width: 150px !important;
    /* height: 100%; */
    float: none;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    aspect-ratio: 5 / 3;
}

.thumbnailImg:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 0 0px 0 var(--color-green);
    border-radius: 10px;
}

.thumbnailImg.slick-current:after {
    box-shadow: inset 0px 0 0px 3px var(--color-light-green);
}

.thumbnailImg img {
    transition: var(--speed-normal);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnailImg.slick-current img,
.thumbnailImg:hover img {
    opacity: 0.6;
}

.thumbnailImg img {}

@media screen and (max-width: 1080px) {
    .slideInner .slideTextArea {
        padding-bottom: 0;
    }

    #topVisual .slideWrap .slideCtrlWrap {
        position: static;
        margin: auto;
        width: 100%;
        padding: 0;
        justify-content: center;
        margin-top: 2rem;
    }
}

@media screen and (max-width: 768px) {
    #topVisual .slideWrap {
        max-width: 600px;
        margin: auto;
        padding-bottom: 2rem;
    }

    #topVisual .slideWrap .slideCtrlWrap {
        flex-direction: column;
        font-size: 1.1725rem;
        /* font-size: 1.3725rem; */
        align-items: center;
    }

    .sliderCtrl {
        width: 100%;
        justify-content: center;
        position: relative;
    }

    .sliderControls a {
        width: 1.9em;
    }

    #slideCounter {
        position: absolute;
        right: 0;
    }

    .slideInner {
        flex-direction: column;
        container-type: inline-size;
        gap: 1.75rem;
    }

    .slideInner .slideTtl {
        font-size: clamp(26px, 4.7cqw, 2.375rem);
    }

    .slideInner .slideImg {
        width: 100%;
    }

    .thumbnail {
        display: none!important;
    }
}

/* ---
　便利ナビ
 --- */
#topNavi {
    padding-top: 9.6875rem;
    padding-top: var(--sec-margin-l);
}

#topNavi .naviHead {
    padding: 0 var(--body-space);
}

.tabBlock {
    margin-top: 1.5625rem;
}

/* .js-tabCtrl クリック後の scrollIntoView 用（固定ヘッダー分を SP で確保） */
@media screen and (max-width: 1000px) {
    .js-tabScroll {
        scroll-margin-top: 4.875rem;
    }
}

.tabBlock .tabArea {
    padding: 0;
}
#topNaviBlock.tabBlock .tabArea {
    padding: 0 var(--body-space);
}

.tabBlock .tabArea ul {
    max-width: 1440px;
    margin: 0 auto -1px;
    display: flex;
    gap: 10px;
}

.tabBlock .tabArea ul li {
    /* width: 25% */
    flex: 1;
}

.tabBlock .tabArea ul li a {
    display: flex;
    height: 3.75rem;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    border: 1px solid #555;
    border-radius: 5px 5px 0 0;
    background: rgba(255, 255, 255, 0.3);
    position: relative;
    /* padding-top: 4px;  */
    padding: 4px 0.25rem 0;
    text-decoration: none;
    transition: var(--speed-normal) background, var(--speed-normal) color;
    line-height: 1.2;
}
html:not([lang="ja"]) .tabBlock .tabArea ul li a {
    line-height: 0.9;
}
#topNaviBlock.tabBlock .tabArea ul li {
    width: 25%;
    flex: auto;
}
#topNaviBlock.tabBlock .tabArea ul li a {
    font-size: 1.25rem;
    text-align: center;
}
.tabBlock .tabArea ul li:not(.current) a:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-green);
}

.tabBlock .tabArea ul li.current a {
    font-weight: bold;
    border-bottom-color: #fff;
    background: #fff;
}

.tabBlock .tabArea ul li a:after {
    content: "";
    background: #007524;
    height: 4px;
    width: 60%;
    position: absolute;
    left: 20%;
    bottom: 0;
    border-radius: 4px;
    opacity: 0;
}

.tabBlock .tabArea ul li.current a:after {
    opacity: 1;
}

.tabBlock .naviCont {
    background: #fff;
    border: 1px solid #555;
    border-width: 1px 0 1px 0;
    padding: 3.75rem var(--body-space);
}

.tabBlock .naviCont .cont {
    display: none;
    max-width: 1240px;
    margin: auto;
}

.tabBlock .naviPanelLink {
    display: flex;
    flex-wrap: wrap;
    --gap: 2.5rem;
    --gap: calc(4rem - var(--base-font-setting) * var(--base-font-setting) * 1.5rem);
    justify-content: flex-start;
    gap: var(--gap);
    align-items: stretch;
}

.tabBlock .naviPanelLink li {
    width: calc((100% - var(--gap) * 3) / 4);
    font-size: 1.375rem;
    /* height: 100%; */
}

.tabBlock .naviPanelLink li .small {
    font-size: 1.125rem;
    display: block;
}
.tabBlock .naviPanelLink li.wide {
    width: calc((100% - var(--gap)) / 2);
    font-size: 1.75rem;
}

.tabBlock .naviPanelLink li.wide .small {
    font-size: 1.25rem;
    display: block;
}
.header .tabBlock .naviPanelLink li {
    font-size: 1.125rem
}
.header .tabBlock .naviPanelLink li.wide {
    font-size: 1.3725rem;
}
.header .tabBlock .naviCont {
    
padding: 1.75rem var(--body-space);
    
border-bottom: none;
}
.tabBlock .naviPanelLink li a {
    position: relative;
    border-radius: 10px;
    color: #000;
    font-weight: 600;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 2.1875rem 1rem;
    padding: 1rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 0.3725rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
    transition: var(--speed-normal) background;
    text-decoration: none;
    text-align: center;
    height: 100%;
    min-height: 13.5rem;
}
html:not([lang="ja"]) .tabBlock .naviPanelLink li a {
    line-height: 1.3
}
.tabBlock .naviPanelLink li a:hover {
    background: var(--bgColor-light-green);
}

.tabBlock .naviPanelLink li a:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-light-green);
    left: -2px;
    top: -2px;
    border-radius: 10px;
    transition: var(--speed-normal) opacity;
    opacity: 0;
}

.tabBlock .naviPanelLink li a:hover:before {
    opacity: 1;
}

.tabBlock .naviPanelLink li.wide a {
    flex-direction: row;
    min-height: 11rem;
}

.tabBlock .naviPanelLink li a .icon {
    width: 6.75rem;
    transition: var(--speed-normal) filter;
}

.tabBlock .naviPanelLink li a:hover .icon {
    filter: saturate(120%) brightness(1.1);
}

.tabBlock .naviPanelLink li.wide a .icon {
    width: 6.75rem;
}

/* 便利ナビ：外部リンク（target="_blank"）の .text の後にアイコン */
.tabBlock .naviPanelLink li a[target="_blank"] .text::after {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    margin-left: 0.25rem;
    vertical-align: middle;
    background-image: url(../images/common/icon/icon_link_outlink.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -0.125em;
}

.panelMoreBtn .btn {
    max-width: 25rem;
    margin-top: 2.5rem;
    border: 2px solid #ccc;
    height: 4rem;
    color: #000;
    transition: var(--speed-normal) background, var(--speed-normal) border-color;
}

.panelMoreBtn .btn:hover,
.moreBtnWrap a.btn:hover {
    background: var(--bgColor-light-green);
    border-color: var(--color-green);
}

.panelMoreBtn .btn:hover .arrow,
.moreBtnWrap a.btn:hover .arrow {
    transform: translateY(var(--arrow-move));
}

@media screen and (max-width: 768px) {
    #topNavi {
        padding-top: 3rem
    }

    .tabBlock .tabArea ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tabBlock .tabArea ul li {
        width: calc((100% - 20px)/ 3);
        /* max-width: 240px; */
        /* flex: 0; */
        flex: none;
    }
    .header .tabBlock .tabArea ul li {
        flex: 1;
    }
    #topNaviBlock.tabBlock .tabArea ul li ,
    #headerSubMenuWrap .tabBlock .tabArea ul li {
        width: calc((100% - 10px)/ 2);
        max-width: 240px;
    }

    .tabBlock .naviPanelLink {
        --gap: 1.25rem
    }

    .tabBlock .tabArea ul li a {
        height: 4.5rem;
        padding: 4px 0.25rem;
    }
    .tabBlock .tabArea ul li a br {
        /* display: none; */
    }

    .tabBlock .tabArea ul li.current a {
        border-bottom-color: #555;
    }

    .tabBlock .tabArea ul li a:after {
        bottom: 7px;
    }
}

@media screen and (max-width: 640px) {
    .tabBlock .naviPanelLink li {
        width: calc((100% - var(--gap)) / 2);
        font-size: 1.375rem;
    }

    .tabBlock .naviPanelLink li.wide {
        width: 100%;
        font-size: 1.75rem;
    }
}
@media screen and (max-width: 480px) {
    .header .tabBlock .tabArea ul li {
        flex: none;
        width: calc(50% - 5px);
    }
}

/* ---
　404：メイン（テキスト左・画像右）
 --- */
.page404Item {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.page404Item .textArea {
    flex: 1;
    min-width: 0;
}
.page404Item .textArea p {
    /* margin-bottom: 1rem; */
}
.page404Item .textArea ul li {
    padding-left: 1rem;
    text-indent: -1rem;
}
.page404Item .textArea ul li:before {
    content: "・";
    margin-right: 0.5rem;
    color: #000;
    font-size: 1.25rem;
    font-weight: 500;
    display: inline-block;
    width: 1rem;
    text-align: center;
    text-indent: 0;
}
.page404Item .imgArea {
    width: 40%;
    max-width: 350px;
    flex-shrink: 0;
}

.page404Item .imgArea img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 640px) {
    .page404Item {
        flex-direction: column;
    }

    .page404Item .imgArea {
        order: 0;
        width: 40%;
        max-width: 100%;
        margin: auto;
        min-width: 150px;
    }
}

/* 404：検索エリアの上余白 */
#page404Search {
    padding-top: 3rem;
    margin-top: 2rem;
}

/* 404：キーワードから探す（ヘッダー検索と同様のスタイル） */
.seachItemArea .subMenuContent--search {
    display: block;
    padding: 0 var(--body-space);
    max-width: 1440px;
    margin: 0 auto;
}

.seachItemArea .subMenuContent--search .pageLinksTtl {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: #000;
}

.seachItemArea .menuSearchForm {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
}

.seachItemArea .menuSearchInputWrap {
    display: flex;
    align-items: center;
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 10px 0 0 10px;
    padding: 0 0.625rem;
    gap: 0.75rem;
}

.seachItemArea .menuSearchIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    --color1: var(--color-light-green);
}

.seachItemArea .menuSearchIcon .svg {
    width: 1.25rem;
}

.seachItemArea .menuSearchInput {
    flex: 1;
    padding: 0.5rem 0.75rem;
    padding-left: 0;
    border: none;
    font-size: 1.125rem;
    background: transparent;
    min-height: 3.75rem;
}

.seachItemArea .menuSearchBtn {
    padding: 0.5rem 0.5rem;
    background: var(--color-green);
    color: #fff;
    border: none;
    border-radius: 0 10px 10px 0;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.25rem;
    font-size: 1.25rem;
    letter-spacing: 0.6rem;
    text-indent: 0.6rem;
    transition: var(--speed-normal) filter;
}

.seachItemArea .menuSearchBtn:hover {
    filter: saturate(200%);
}

.seachItemArea .subMenuContent--search .pageLinksTtl:not(:first-of-type) {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* 404：便利ナビエリアの上余白・topNaviの上下padding・下線を解除 */
#page404Navi {
    padding-top: 3rem;
    margin-top: 2rem;
}

#page404Navi #topNavi {
    padding-top: 0;
    padding-bottom: 0;
    border: none;
}
#page404Navi .tabBlock .tabArea {
    padding: 0;
}
#page404Navi .tabBlock .naviCont {
    /* border-top: none; */
    border-bottom: none;
    padding: 2rem 0;
}
#page404Navi .tabBlock .naviPanelLink {
    --gap: 30px;
}
@media screen and (max-width: 768px) {
    #page404Navi .tabBlock .naviPanelLink {
        --gap: 1rem
    }
}
/* 404：便利ナビ（TOPと同じ見出しスタイル） */
#page404Navi #topNavi .ttlBlock:has(.ttlLead) {
    display: flex;
    gap: 1.875rem;
}

#page404Navi #topNavi .ttlBlock .ttlLead {
    padding-left: 1.875rem;
    border-left: 1px solid #ccc;
}

#page404Navi #topNavi .iconTtl {
    font-size: 2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#page404Navi #topNavi .iconTtl .icon {
    width: 1.875rem;
}

@media screen and (max-width: 768px) {
    #page404Navi #topNavi .ttlBlock:has(.ttlLead) {
        flex-direction: column;
        gap: 1.25rem;
    }

    #page404Navi #topNavi .ttlBlock .ttlLead {
        padding-left: 0;
        border: none;
    }
}

/* ---
　お知らせ　ピックアップ
 --- */
.topColumn1 {
    display: grid;
    grid-template-columns: 1fr 32%;
    --padding-set: 4.375rem 4.375rem;
}

#topInfo {
    padding: 4.375rem;
    padding: var(--padding-set);
}

#topInfo .infoTab {
    display: flex;
}

#topInfo .infoTab li {
    width: 50%;
    border-bottom: 3px solid #ccc;
}

#topInfo .infoTab li.current {
    border-bottom-color: var(--color-green);
}

#topInfo .infoTab li a {
    display: flex;
    justify-content: center;
    line-height: 1;
    padding-bottom: 0.5rem;
    text-decoration: none;
}

#topInfo h2 {
    /* font-size: 1.375rem;
    color: #000;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem; */
}

#topInfo h2 .icon {
    --color10: var(--color-green)
}

#topInfo .secInner {
    max-width: 1000px;
    margin: 0 0 0 auto;
}

#topPickUp {
    padding: 4.375rem;
    /* background: var(--bgColor-green); */
    background: #F0FEF4 url(../images/top/pickup_bg.webp) no-repeat center bottom;
    background-size: cover;
    /* padding-right: 1rem; */
    padding: var(--padding-set);
}

#topPickUp .secInner {
    max-width: 300px;
    margin-left: 0;
}

#topPickUp h2 {
    font-size: 2rem;
    color: var(--color-green);
    margin-bottom: 1.325rem;
    display: flex;
    align-items: center;
    line-height: 0;
    gap: 0.4rem;
    overflow: hidden;
}
#topPickUp h2 .text {
    position: relative;
    display: block;
}
#topPickUp h2 .text:after {
    content: "";
    height: 2px;
    display: block;
    position: absolute;
    width: 100vw;
    background: #007524;
    left: 100%;
    margin-left: 0.7rem;
    top: 50%;
    margin-top: -2px;
}
#topPickUp .pickupImgList li:not(:first-child) {
    margin-top: 1.5rem;
}

#topPickUp .pickupImgList li a {
    font-size: 1.125rem;
    font-size: clamp(16px, 1.125rem, 20px);
    font-weight: 500;
    color: #000;
    transition: var(--speed-normal) color;
    text-decoration: none;
    display: block;
    background: #fff;
    padding: 3px 3px 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#topPickUp .pickupImgList li a:hover {
    color: var(--color-green);
}

#topPickUp .pickupImgList li a .img {
    border-radius: 7px;
    overflow: hidden;
}

#topPickUp .pickupImgList li a .img img {
    transition: var(--speed-scale) transform;
}

#topPickUp .pickupImgList li a:hover .img img {
    transform: scale(1.1);
}

#topPickUp .pickupImgList li a .textWrap {
    /* margin-top: 0.75rem; */
    display: flex;
    justify-content: space-between;
    --color1: var(--color-light-green);
    align-items: center;
    line-height: 1.4;
    padding: 0.75rem 2px;
    padding-left: 0.625rem;
    font-weight: bold;
}

#topPickUp .pickupImgList li a .textWrap .icon {
    width: 1.125em;
    transition: var(--speed-normal) transform;
}

#topPickUp .pickupImgList li a .textWrap .icon:has(use[href="#icon_external_link"]) {
    width: 1.15rem;
    --color3: var(--color-light-green);
}

#topPickUp .pickupImgList li a:hover .textWrap .icon {
    transform: translateX(var(--arrow-move));
}

#topInfo .infoCont {
    display: none;
}

#topInfo .newsPanelList {
    padding: 1.25rem 0
}

#topInfo .newsPanelList li {
    border: none;
    padding-top: 0;
}

#topInfo .newsPanelList li:not(:first-child) {
    /* margin-top: 1.25rem; */
}

.newsPanelList .newsListInner {
    border-bottom: 1px solid #ccc;
    background: #fff;
    display: flex;
    color: #000;
    padding: 1.875rem;
    padding-right: 2.25rem;
    border-radius: 10px;
    position: relative;
    font-size: clamp(14.5px, 1rem, 20px);
    text-decoration: none;
}

#topInfo .newsListInner .icon {
    --color1: var(--color-light-green);
    right: 0.625rem
}

.newsList dt {
    display: flex;
    /* flex-wrap: wrap; */
    gap: 1rem;
    gap: 0.25rem 0.7rem;
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

.newsList p.date {
    /* font-weight: 700; */
    font-size: 93.75%;
    width: 7.7rem;
    margin-bottom: 0;
}

.newsList .labelWrap {
    flex-wrap: wrap;
    display: flex;
    gap: 0.5rem 0.75rem;
    flex: 1;
}

.newsList p.label {
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    height: 1.5625rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    font-size: 87.5%;
    line-height: 1;
    --labelBG: #fff;
    --labelFontColor: #000;
    --labelBorderColor: #000;
    background: var(--labelBG);
    color: var(--labelFontColor);
    border: 1px solid var(--labelBorderColor);
    line-height: 1.5625rem;
    display: block;
    min-width: 8.125rem;
    text-align: center;
    margin: 0;
}

.newsList p.label.wide {
    min-width: 10rem
}

p.label.genre1 {
    --labelBG: #D0F2D1;
    --labelBorderColor: #D0F2D1;
}

p.label.genre2 {
    --labelBG: #FBDDDD;
    --labelBorderColor: #FBDDDD;
}

p.label.genre3 {
    --labelBG: #FFE3B5;
    --labelBorderColor: #FFE3B5;
}

p.label.genre4 {
    --labelBG: #CFEBF9;
    --labelBorderColor: #CFEBF9;
}

p.label.genre5 {
    --labelBG: #D0F1E2;
    --labelBorderColor: #D0F1E2;
}

p.label.genre6 {
    --labelBG: #FFD0C4;
    --labelBorderColor: #FFD0C4;
}

p.label.genre7 {
    --labelBG: #DFDDFB;
    --labelBorderColor: #DFDDFB;
}

p.label.genre8 {
    --labelFontColor: #007524;
    --labelBorderColor: #007524;
}

p.label.genre9 {
    --labelFontColor: #007DBC;
    --labelBorderColor: #007DBC;
}

p.label.genre10 {
    --labelFontColor: #0058BC;
    --labelBorderColor: #0058BC;
}

p.label.genre11 {
    --labelFontColor: #C32778;
    --labelBorderColor: #C32778;
}

p.label.genre12 {
    --labelFontColor: #9D6B00;
    --labelBorderColor: #9D6B00;
}

p.label.genre13 {
    --labelBG: #eee;
    --labelBorderColor: #eee;
}

.newsList .ttl {
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}

.newsList a .ttl {
    text-decoration: underline;
}

#topInfo .infoMoreBtn .btn {
    background: var(--color-green);
    color: #fff;
    height: 4rem;
    max-width: 25rem;
    transition: var(--speed-normal) filter;
    font-size: 1rem;
}

#topInfo .infoMoreBtn .btn:hover {
    filter: saturate(200%);
}

@media screen and (max-width: 1080px) {
    .topColumn1 {
        --padding-set: 4.375rem 2rem;
    }
}

@media screen and (max-width: 960px) {
    .topColumn1 {
        display: block;
        --padding-set: 3.25rem var(--body-space);
    }

    #topPickUp .secInner {
        max-width: 100%
    }

    .pickupImgList {
        display: flex;
        align-items: flex-start;
        gap: 1.75rem
    }

    #topPickUp .pickupImgList li {
        margin-top: 0 !important;
    }
}
@media screen and (max-width: 768px) {
    .newsList dt {
        flex-wrap: wrap;
    }
    .newsList p.label,
    .newsList p.label.wide {
        min-width: 5rem;
    }
    .newsList .labelWrap {
        flex: 1;
    }
    #keijiban-results .newsList dt {
        margin-bottom: 0.75rem;
    }
    #keijiban-results .newsList p.date {
        width: 100%;
    }
}
@media screen and (max-width: 640px) {
    .pickupImgList {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    #topPickUp .pickupImgList li {
        width: calc(50% - 0.75rem);
    }
}

@media screen and (max-width: 500px) {
    #topPickUp .pickupImgList li {
        width: 100%;
    }

    #topPickUp .pickupImgList li a img {
        max-width: 100%;
        width: 100%
    }

    #topInfo .newsPanelList .newsListInner {
        /* font-size: 1.125rem; */
        padding: 1.5em;
        padding-right: 2.25em;
    }
}

/* ---
　八丈町ってこんなところ
 --- */
#topAbout {
    /* background: #fff url(../images/top/about_bg.webp) no-repeat left top; */
    /* padding-left: 36%; */
    background-size: auto 100%;
    display: grid;
    grid-template-columns: 1fr 64%;
    background: #fff;
}

#aboutImg {
    height: 100%
}

#aboutImg img {
    object-fit: cover;
    height: 100%;
    object-position: center
}

.aboutInner {
    /* width: 64%; */
    /* margin-left: auto; */
    background: #fff;
    padding: 7.6875rem var(--body-space);
}

.aboutInnerBlock {
    max-width: 945px;
    margin: auto;
}

.aboutInnerBlock .aboutTtl {
    display: grid;
    grid-template-columns: 9.25rem 1fr;
    grid-template-rows: 1fr auto;
    gap: 0.25rem 1.25rem;
    margin-bottom: 2.5rem;
}

.aboutInnerBlock .aboutTtl .icon {
    grid-row: 1/3;
    grid-column: 1/2;
    --color7: #3CB5E5;
}

.aboutInnerBlock .aboutTtl h2 {
    grid-row: 1/2;
    grid-column: 2/3;
    font-size: 2rem;
    font-weight: 600;
}

.aboutInnerBlock .aboutTtl .lead {
    font-weight: 500;
}

.aboutInnerBlock .aboutList {
    display: flex;
    --gap: 1.25rem;
    gap: 2rem var(--gap);
    flex-wrap: wrap;
}

.aboutInnerBlock .aboutList li {
    width: calc((100% - var(--gap) * 2) / 3)
}

.aboutInnerBlock .aboutList li.wide {
    width: calc((100% - var(--gap))/2)
}

.aboutInnerBlock .aboutList li a {
    color: #000;
    text-decoration: none;
    display: block;
}

.aboutInnerBlock .aboutList li a .ttl {
    font-size: 1.5rem;
    font-weight: 600;
    transition: var(--speed-normal) color;
}
.aboutInnerBlock .aboutList li a .ttl.iconExternalLink {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
}
.aboutInnerBlock .aboutList li a .ttl.iconExternalLink .icon {
    width: 1.15rem;
    --color3: var(--color-light-green);
}

.aboutInnerBlock .aboutList li a:hover .ttl {
    color: var(--color-blue);
}

.aboutInnerBlock .aboutList li a .text {
    font-size: 0.875rem;
    font-size: clamp(13px, 0.875rem, 20px);
}

.aboutInnerBlock .aboutList li a .img {
    margin-bottom: 0.75rem;
    overflow: hidden;
    box-shadow: var(--base-shadow);
    border-radius: 5px;
    transition: var(--speed-normal) box-shadow;
}

.aboutInnerBlock .aboutList li a:hover .img {
    box-shadow: none;
}

.aboutInnerBlock .aboutList li a img {
    transition: var(--speed-scale) transform;
}

.aboutInnerBlock .aboutList li a:hover img {
    transform: scale(1.1);
}

@media screen and (max-width: 960px) {
    #topAbout {
        /* padding-top: 30rem; */
        /* grid-template-columns: 1fr; */
        display: block;
    }

    .aboutInner {
        width: 100%;
        padding: 2rem var(--body-space);
    }
}

@media screen and (max-width: 640px) {
    .aboutInnerBlock .aboutList li {
        width: 100% !important;
    }

    .aboutInnerBlock .aboutList li a .img img {
        width: 100%
    }

    .aboutInnerBlock .aboutTtl {
        grid-template-columns: 25% 1fr;
        grid-template-rows: 1fr auto;
        align-items: center;
        gap: 1.25rem 0.725rem;
        container-type: inline-size;
    }

    .aboutInnerBlock .aboutTtl .icon {
        grid-row: 1/2;
        grid-column: 1/2;
    }

    .aboutInnerBlock .aboutTtl h2 {
        grid-row: 1/2;
        grid-column: 2/3;
        font-size: clamp(16px, 8.5cqw, 30px);
    }

    .aboutInnerBlock .aboutTtl .lead {
        grid-column: 1/3;
    }
}

/* ---
　町政情報
 --- */
#topGovernment {
    padding: 6.25rem var(--body-space) 5rem;
}

.governmentListArea {}

.governmentListArea ul {
    border: 1px solid #ccc;
    border-radius: 10px;
    display: flex;
    overflow: hidden;
    margin-top: 1.875rem;
}

.governmentListArea ul a {
    display: flex;
    align-items: center;
    color: #000;
    justify-content: flex-start;
    padding: 1.25rem;
    background: #fff;
    gap: 1rem;
}

.governmentListArea ul li:not(:first-child) a {
    border-left: 1px solid #ccc;
}

.governmentListArea .imgList li {
    width: 25%;
    display: flex;
}

.governmentListArea .imgList a {
    font-size: 1.25rem;
    font-weight: 600;
    width: 100%;
    transition: var(--speed-normal) background, var(--speed-normal) color;
    text-decoration: none;
}

.governmentListArea .imgList a:hover {
    background: var(--bgColor-light-green);
    color: var(--color-green);
}

.governmentListArea .imgList a .img {
    width: 45%;
    max-width: 118px;
}

.governmentListArea .imgList a .text {
    flex: 1
}

.governmentListArea .iconList {
    max-width: 1200px;
    margin: 1.875rem auto 0;
    align-items: stretch;
}

.governmentListArea .iconList li {
    width: calc(100% / 3);
    /* height: 100%; */
    display: flex;
}

.governmentListArea .iconList a {
    font-size: 1.125rem;
    font-weight: 500;
    gap: 0.5rem;
    line-height: 1;
    width: 100%;
    height: 100%;
    transition: var(--speed-normal) background, var(--speed-normal) color;
    text-decoration: none;
}

.governmentListArea .iconList a:hover {
    background: var(--bgColor-light-green);
    color: var(--color-green);
}

.governmentListArea .iconList a .icon {
    width: 1.45rem;
}

.governmentListArea .iconList a .icon.bill {
    width: 1.65rem
}

.governmentListArea .iconList a .icon.book {
    --color3: #777
}

.governmentListArea .iconList a:hover .icon {
    --color3: var(--color-green) !important;
    --color5: var(--color-green) !important;
}

@media screen and (max-width: 1080px) {
    .governmentListArea ul {
        flex-wrap: wrap;
    }

    .governmentListArea .imgList li {
        width: 50%
    }

    .governmentListArea .imgList li:not(:first-child) a {
        border-left: none;
    }

    .governmentListArea .imgList li:nth-child(even) a {
        border-left: 1px solid #ccc;
    }

    .governmentListArea .imgList li:nth-child(n + 3) a {
        border-top: 1px solid#ccc
    }
}

@media screen and (max-width: 640px) {
    .governmentListArea li {
        width: 100% !important;
    }

    .governmentListArea ul a {
        border: none !important;
    }

    .governmentListArea ul li:not(:first-child) a {
        border-top: 1px solid #ccc !important;
    }
}

/* ---
　八丈島広報推進連携協定
 --- */
#topPR {
    padding: 0 var(--body-space) 6.25rem;
}
#topPR .secInner {
    padding-top: 5rem;
    border-top: 1px solid #555;
}

.prListArea {
    margin-top: 1.875rem;
}
.prListArea .imgList {
    display: flex;
    flex-wrap: wrap;
    --pr-gap: 1.25rem;
    gap: var(--pr-gap);
}
.prListArea .imgList li {
    width: calc((100% - var(--pr-gap) * 3) / 4);
}

.prListArea .imgList li a {
    display: flex;
    background: #fff;
    align-items: center;
    font-size: 1.125rem;
    color: #000;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
    font-weight: 600;
    text-decoration: none;
    transition: var(--speed-normal) background, var(--speed-normal) color;
}
.prListArea .imgList li a:hover {
    background: var(--bgColor-light-green);
    color: var(--color-green);
}
.prListArea .imgList li a[target="_blank"] .icon {
    display: block;
    width: 1rem;
    height: 1rem;
    top: 0.625rem;
    right: 0.625rem;
    line-height: 0;
    position: absolute;
    --color3: var(--color-light-green);
}
.prListArea .imgList li a .text {
    padding: 1.625rem 0.875rem;
}
@media screen and (max-width: 1080px) {
    .prListArea .imgList li {
        width: calc((100% - var(--pr-gap) ) / 2);
    }
}
@media screen and (max-width: 640px) {
    .prListArea .imgList li {
        width: 100%;
    }
}
/* ---
　関連サイト　SNS
 --- */
#topLinks {
    background: #fff;
    padding: 5rem var(--body-space);
}

.topColumn2 {
    display: grid;
    grid-template-columns: 1fr 24rem;
    --padding-set: 3.25rem;
    gap: var(--padding-set);

}

.topColumn2 .ttlBlock {
    margin-bottom: 2rem
}
#topSNS .ttlBlock {
    position: relative;
}
#topPage .topColumn2 .ttlBlock .icon {
    width: 1.5rem;
}
#topSNS .ttlBlock .snsChara {
    position: absolute;
    bottom: -2rem;
    right: 0;
}

#topSite .siteLinks {
    display: flex;
    flex-wrap: wrap;
    --gap: 1.25rem;
    gap: var(--gap);
}

#topSite .siteLinks li {
    width: calc((100% - var(--gap) * 2) / 3);
}

#topSite .siteLinks li a {
    transition: var(--speed-normal) opacity;
    display: block;
}

#topSite .siteLinks li a:hover {
    opacity: 0.7;
}

#topSNS {
    padding-left: var(--padding-set);
    border-left: 1px solid #555;
}

.snsLinks li:not(:first-child) {
    margin-top: 1.25rem;
}

.snsLinks a {
    display: flex;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    padding: 2em 0.5em;
    border-radius: 10px;
    align-items: center;
    gap: 1em;
    justify-content: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.snsLinks a::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    top: -100px;
    left: 0;
    width: 30px;
    height: 100%;
    opacity: 0;
    transition: cubic-bezier(0.32, 0, 0.67, 0);
    z-index: 2;
}

.snsLinks a:hover::before {
    animation: kiran 0.3s linear;
}

@keyframes kiran {
    0% {
        transform: scale(2) rotate(45deg);
        opacity: 0;
    }

    20% {
        transform: scale(10) rotate(45deg);
        opacity: 0.6;
    }

    40% {
        transform: scale(15) rotate(45deg);
        opacity: 0.4;
    }

    80% {
        transform: scale(25) rotate(45deg);
        opacity: 0.2;
    }

    100% {
        transform: scale(30) rotate(45deg);
        opacity: 0;
    }
}

.snsLinks a:hover {}

.snsLinks a .icon {
    width: 3em;
}

.snsLinks a span {
    display: block;
}

.snsLinks a .small {
    font-size: 93.75%;
    font-weight: 500;
}

.snsLinks a .large {
    font-size: 137.5%;
    font-weight: bold;
}

.sns_x a {
    background: #000;
}

.sns_yt a {
    background: #FF0302;
}

.sns_ig a {
    background: url(../images/common/icon/sns/ig_bg.webp) no-repeat center;
    background-size: cover;
}

@media screen and (max-width: 1080px) {
    .topColumn2 {
        --padding-set: 2rem
    }
}

@media screen and (min-width: 961px) and (max-width: 1080px) {
    #topSite .siteLinks li {
        width: calc((100% - var(--gap)) / 2);
    }
}

@media screen and (max-width: 960px) {
    .topColumn2 {
        grid-template-columns: 1fr;
        gap: 3.75rem;
    }

    #topSNS {
        padding-left: 0;
        border: none;
    }

    .snsLinks {
        display: flex;
        --gap: 1.75rem;
        gap: var(--gap);
        flex-wrap: wrap;
        justify-content: center;
    }

    .snsLinks li {
        margin: 0 !important;
        /* flex: 1; */
        min-width: 300px;
        width: calc((100% - var(--gap)*2)/3);
    }

    #topLinks {
        padding: 3rem var(--body-space)
    }
}

@media screen and (max-width: 640px) {
    #topSite .siteLinks li {
        width: calc((100% - var(--gap)) / 2)
    }

    .snsLinks {
        gap: 1.25rem;
        max-width: 400px;
        margin: auto;
    }

    .snsLinks li {
        width: 100%;
        container-type: inline-size;
    }

    .snsLinks li a {
        font-size: 4cqw;
    }
}


/* 下層共通
====================================================*/
/* ---
　パンくず
 --- */
#breadcrumbs {
    padding: 1.5rem var(--body-space);
}

#breadcrumbs ul {
    max-width: 1440px;
    margin: auto;
    display: flex;
    padding: 0 3rem;
    font-size: 0.875rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#breadcrumbs a {}

#breadcrumbs ul li:not(:first-child):before {
    content: ">";
    margin-right: 0.5rem;
    font-size: 80%;
    vertical-align: middle;
}

/* ---
　メインコンテンツ
 --- */
#contentsWrap {
    padding: 0rem var(--body-space) 5rem;
}

#contentsMain {
    max-width: 1440px;
    margin: auto;
    background: #fff;
    border-radius: 10px;
    padding: 3.75rem var(--body-space) 5rem;
    overflow: hidden;
    overflow: clip;
}

#contentsMain.full {
    padding: 3.75rem 0 0;
}

.emergency #contentsMain {
    background: #FFEAEA
}

.subSectionsInner {
    display: grid;
    grid-template-columns: 1fr 20rem;
    grid-template-columns: calc(100% - 22.5rem) 18.5rem;
    gap: 2.5rem;
    max-width: 1280px;
    margin: auto;
}

.column1 .subSectionsInner {
    display: block;
    max-width: 1200px;
}

#contentsMain .secInner {
    max-width: 1280px;
}

.emergency #contentsMain .secInner {
    max-width: 1200px;
}

#contentsMain .secInner+.secInner {
    margin-top: var(--sec-margin);
}

.contentsHeadSec {
    margin-bottom: var(--sec-margin)
}

.full .contentsHeadSec {
    padding-left: var(--body-space);
    padding-right: var(--body-space)
}

.subSections .contentsHeadSec {
    /* margin-bottom: 0; */
}

.contentsTtlWrap {
    /* margin-bottom: 3.125rem; */
}

.subSections .contentsTtlWrap {
    border-bottom: 4px solid #D2D2D2;
    position: relative;
}

.subSections .contentsTtlWrap .upDate {
    font-size: 0.9375rem;
    color: #333
}

.subSections .contentsTtlWrap:after {
    content: "";
    display: block;
    position: absolute;
    height: 4px;
    width: 18.75rem;
    background: var(--color-light-green);
    bottom: -4px;
    left: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.contentsTtl {
    display: flex;
    font-size: 2.5rem;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}

.emergency .contentsTtl {
    background: #D54444;
    color: #fff;
    font-size: 2.125rem;
    font-weight: 600;
    height: 5rem;
    border-radius: 3px;
    line-height: 1;
    padding: 1rem;
    gap: 0.625rem;
}

.subSections .contentsTtl {
    font-size: 2.125rem;
    font-weight: 600
}
.subSections .contentsTtl .small {
    font-size: 1.75rem;
}
.contentsTtl .icon {
    width: 1.5em;
}

.emergency .contentsTtl .icon {
    --color6: #fff;
    width: 1.875rem;
    line-height: 0;
}

.backLink a {
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    line-height: 0;
    margin-top: 0.625rem;
}

.backLink a .icon {
    width: 1.5rem;
    line-height: 0;
    margin-top: -0.125rem;
    transition: var(--speed-normal) transform;
}

.backLink a:hover .icon {
    transform: translateX(var(--arrow-move-l));
}

.contentsCtrlWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.addCalendarBtn .btn {
    border: 2px solid #4AAF67;
    max-width: 17.8125rem;
    min-height: 2.75rem;
    color: #000;
    font-size: 1rem;
    margin-top: 0.625rem;
    font-weight: 500;
    line-height: 1;
    transition: var(--speed-normal);
    text-align: center;
    padding: 0.45rem 1rem;
}
.addCalendarBtn .btn:hover {
    background: var(--bgColor-light-green);
    color: var(--color-green);
}
.addCalendarBtn .btn .icon {
    width: 1.3rem;
    /* transition: var(--speed-normal) transform; */
}
.addCalendarBtn .btn:hover .icon {

}
.secBtnWrap .btn {
    border: 2px solid #ccc;
    max-width: 400px;
    height: 4rem;
    color: #000;
    font-size: 1.125rem;
}

.secBtnWrap .btn .svg {
    --color1: var(--color-light-green);
}

.secBtnWrap .btn:hover {
    background: var(--bgColor-light-green);
    border-color: var(--color-green);
}

/* ---
　サイドメニュー
--- */
.sideLink h3.ttl {
    display: flex;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    align-items: center;
    padding: 0.925rem 0 0.625rem;
}

.sideLink h3.ttl .icon {
    width: 1.5rem;
}

.sideLink h3.ttl .text {
    flex: 1;
}

.sideLink ul li a {
    display: flex;
    justify-content: space-between;
    color: #000;
    padding: 1.25rem 0.5rem 1.25rem 1rem;
    text-decoration: none;
    transition: var(--speed-normal) color;
    align-items: center;
}

.sideLink ul li:not(.topLink):not(.current) a {
    background: #fff;
}

.sideLink ul li:not(.current) a:hover {
    color: var(--color-green);
    font-weight: 600;
}

.sideLink ul li.topLink a {
    font-weight: 600;
    background: var(--color-green);
    color: #fff !important;
    font-size: 1.25rem;
    --color1: var(--color-light-green);
    --color7: #fff;
    transition: var(--speed-scale) filter;
}

.sideLink ul li.topLink a:hover {
    filter: saturate(200%);
}

.sideLink ul li.current a {
    font-weight: 600;
    background: var(--bgColor-light-green);
}

.sideLink ul li.current a .icon.icon:has(use[href="#icon_arrow_fill-r"]) {
    --color1: #fff;
}

.sideLink ul li.topLink a .icon {
    /* --color1: #fff; */
}

.sideLink ul li a .icon {
    width: var(--link-icon-w);
    --color1: var(--color-light-green);
    transition: var(--speed-normal) transform;
}

.sideLink ul li a .text {
    flex: 1;
    padding-right: 0.125rem;
}
.sideLink ul li:not(.current) a:hover .icon {
    transform: translateX(var(--arrow-move));
}

.sideLink ul li a.idxLink .icon {
    --color1: #fff;
}

.sideLink ul li {
    border-bottom: 1px solid #aaa;
}

.sideLink ul li:nth-child(n + 7) {
    display: none
}

#sideMenu .sideLink ul li:nth-child(n + 7) {
    display: list-item;
}

@media screen and (max-width: 1280px) {
    .subSectionsInner {
        grid-template-columns: 1fr 18.5rem;
        grid-template-columns: calc(100% - 21rem) 18.5rem;
    }
}

@media screen and (max-width: 960px) {
    .subSectionsInner {
        grid-template-columns: 1fr;
        grid-template-columns: 100%;
    }
}


/* ---
　新着エリア
 --- */
.newsArea {
    margin-top: var(--sec-margin)
}

.newsArea dl.newsBlock {
    border: 1px solid var(--color-green);
    /* max-width: 1100px; */
    --icon-color: var(--color-light-green);
}

.newsArea dl.newsBlock>dt {
    background: var(--color-green);
    color: #fff;
}

dl.news>dt .ttlText {
    display: flex;
    justify-content: center;
    font-size: 1.25rem;
    align-items: baseline;
    gap: 0.25em;
    line-height: 1;
}

.newsArea dl.newsBlock>dt .ttlText .icon {
    width: 1.125em;
    --color10: #fff;
}

dl.news>dd {
    padding: 1.25rem 1.875rem;
}
@media screen and (min-width: 769px) {
    .newsArea .newsList .newsListInner dl {
        display: flex;
        align-items: baseline;
    }
    .newsArea .newsList .newsListInner dt {
        margin-bottom: 0;
    }
}
.news .newsListInner {
    color: #000;
    padding-right: 1.5rem;
    position: relative;
    display: block;
    text-decoration: none
}

.newsList>li:not(:first-child) {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ccc;
}

.news .newsListInner .icon {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    --color1: var(--color-light-green);
    width: 1.25rem;
}

.newsList.bdType>li:last-child {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #ccc;
}

/* ---
　目次 ページ内リンク
 --- */
.pageLinksArea {
    background: #f0f0f0;
    border-radius: 5px;
    padding: 1.25rem 1.875rem;
    padding: 1.25rem var(--body-space);
}

.pageLinksTtl {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1rem
}
.pageLinksTtl .labelName {
    display: inline-flex;
    margin-left: 0.75rem;
    font-size: 80%;
    /* background: var(--bgColor-light-green); */
    /* padding: 0 0.5em; */
    /* justify-content: center; */
    /* align-items: center; */
    /* border-radius: 3px; */
    /* height: 1.25rem; */
}
.tglTtlWrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-right: 0;
    color: #000;
    text-decoration: none;
}
.tglTtlWrap .pageLinksTtl {
    margin-bottom: 0;
}
.tglTtlWrap__end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.tglTtlWrap .tglActionText {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.toggleType:not(.is-open) .tglTextClose {
    display: none;
}
.toggleType.is-open .tglTextOpen {
    display: none;
}
.wp-block-accordion-heading__toggle-icon,
.tglTtlWrap .tglIcon {
    position: relative;
    background: var(--color-light-green);
    text-indent: -9999px;
    transform: none!important;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 3px;
    overflow: hidden;
    flex: 0 0 auto;
}
.wp-block-accordion-heading__toggle-icon:before,
.wp-block-accordion-heading__toggle-icon:after,
.tglTtlWrap .tglIcon:before,
.tglTtlWrap .tglIcon:after {
    content: "";
    display: block;
    position: absolute;
    width: 40%;
    height: 2px;
    background: #fff;
    top: calc(50% + 2px);
    transition: var(--speed-normal);
}
.wp-block-accordion-heading__toggle-icon:before,
.tglTtlWrap .tglIcon:before {
    left: 50%;
    transform-origin: left bottom;
    transform: rotate(-40deg);
}
.wp-block-accordion-heading__toggle-icon:after,
.tglTtlWrap .tglIcon:after {
    right: 50%;
    transform-origin: right bottom;
    transform: rotate(40deg);
}
.toggleType.is-open .tglTtlWrap .tglIcon {
    background: var(--color-green);
}
.toggleType.is-open .tglTtlWrap .tglIcon::before,
.toggleType.is-open .tglTtlWrap .tglIcon::after {
    top: 50%;
    width: 26%;
}
.toggleType.is-open .tglTtlWrap .tglIcon::before {
    transform: rotate(0deg);
    margin-left: -1px;
}
.toggleType.is-open .tglTtlWrap .tglIcon::after {
    transform: rotate(0deg);
    margin-right: -1px;
}
/* 分野別トグル: 初期は閉じる。クリック開閉は slideDown/slideUp。サーバーで開くときは tglBody に style=display:block（.is-open とCSSで display:block するとアニメが潰れる） */
.toggleType .tglBody {
    display: none;
    margin-top: 0.75rem;
}
.pageLinksTtl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0.3125rem;
    height: 0.875rem;
    background: var(--color-light-green);
}

.pageLinksTtl::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0.9375rem;
    width: 0.3125rem;
    height: 0.5rem;
    background: var(--color-green);
}

.pageLinksBtnList {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9375rem;
}

.pageLinksBtnList a {
    background: #DCEBE0;
    background: var(--pageLinkBtnsColor,#DCEBE0);
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.425rem calc(0.6625rem + 0.5125em);
    box-shadow: 0 2px 0 0 rgb(0, 117, 36, 0.3);
    line-height: 1.6;
    min-height: 2.75rem;
    gap: 0.125rem;
}

.pageLinksBtnList a:hover,
.pageLinksBtnList .current a {
    color: #fff;
    --pageLinkBtnsColor: var(--color-green)!important;
    --pageLinkBtnsColor: var(--eventLabelActiveColor,var(--color-green))!important;
    box-shadow: none!important;
}
.pageLinksBtnList .current a {
    padding: 0.425rem 0.6rem;
}

.pageLinksBtnList.arrowR a:hover, {

}
.pageLinksBtnList a:hover .arrow {
    transform: translateY(var(--arrow-move));
}

.pageLinksBtnList a .arrow {
    width: 1em;
    --color1: var(--color-light-green);
    margin-top: -3px;
}
.pageLinksBtnList.arrowR a:hover .arrow {
    --color3: #fff;
    transform: translateX(var(--arrow-move));
}
.pageLinksBtnList a .check {
    width: 1.25em;
}

.pageLinksTextList {
    padding-top: 0.625rem;
}

.pageLinksTextList li {
    border-bottom: 1px solid #ccc;
    padding: 0 0.5rem 0.625rem;
    margin-bottom: 0.625rem;
}

.pageLinksTextList li a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #000;
    text-decoration: none;
    transition: var(--speed-normal) color;
}

.pageLinksTextList li a:hover {
    color: var(--color-green);
}

.pageLinksTextList li a .icon {
    /* width: calc(var(--link-icon-w) * 0.8); */
    width: 1.25rem;
    --color1: var(--color-light-green);
    text-align: center;
    transition: var(--speed-normal) transform;
}

.pageLinksTextList li a:hover .icon {
    transform: translateY(var(--arrow-move));
}

.pageLinksTextList li a .icon svg {
    width: 80%
}

/* フィルターメニュー */
.filterMenu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    font-size: 1rem
}

.filterMenu .filterTtl {
    background: #DCEBE0;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    line-height: 1
}

.filterCheck {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filterCheck.col {
    flex-direction: row;
    flex-wrap: wrap
}
.filterCheck.col li {
    flex: 1;
    word-break: keep-all;
    white-space: nowrap
}
@media screen and (max-width: 700px) {
    .filterCheck.col li {
        white-space: wrap
    }
}
.filterCheck label {
    display: flex;
    background: #fff;
    border-radius: 5px;
    min-height: 2.25rem;
    align-items: center;
    line-height: 1.2;
    padding: 0.625rem;
    gap: 0.625rem;
    border-bottom: 2px solid #ccc;
    cursor: pointer;
    transition: var(--speed-normal)
}

.filterCheck label:hover {
    background: var(--bgColor-light-green)
}

.filterCheck label .check {
    display: block;
    position: relative;
    width: 1rem;
    height: 1rem;
    border: 1px solid #aaa
}

.filterCheck label .check:after {
    content: "";
    display: block;
    position: absolute;
    width: 60%;
    height: 25%;
    border: 3px solid var(--color-light-green);
    border-width: 0 0 3px 3px;
    transform: rotate(-45deg);
    left: 20%;
    top: 16%;
    opacity: 0;
    transition: var(--speed-normal)
}

.filterCheck label:has(input:checked) .check:after {
    opacity: 1
}

.filterCheck label .text {
    flex: 1
}

@media screen and (max-width: 500px) {
    .filterMenu {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.25rem 0;
    }
    .filterCheck.col li {
        white-space: nowrap
    }
}

/* ---
　indexリンク
 --- */
.indexImgList {
    display: grid;
    grid-template-columns: max(200px, 23.5%) 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 2.5rem;
}

.indexImgList .indexList {
    align-self: self-start;
}

.indexImgList .img {
    grid-row: 1/3
}

.indexImgList .img img {
    /* position: sticky; */
    /* top: 1rem; */
    border-radius: 10px;
}

.indexImgList:not(:first-of-type) {
    margin-top: var(--sec-margin)
}

.indexImgList .ttlLink {
    /* border-bottom: 1px solid var(--color-light-green); */
    grid-column: 2/3;
}

.indexImgList:has(li:nth-child(9)) {
    /* background: var(--bgColor-cream); */
}

.ttlLink a,
.indexList a {
    display: flex;
    align-items: center;
    color: #000;
    font-size: 1.125rem;
    gap: 0.5rem;
    text-decoration: none;
    transition: var(--speed-normal) background, var(--speed-normal) color;
}

.indexImgList .ttlLink a {
    font-size: 1.5rem;
    padding: 0.75rem 0;
}

.indexImgList .ttlLink a:hover,
.indexList a:hover {
    color: var(--color-green);
    background: var(--bgColor-light-green);
}

.ttlLink a .icon,
.indexList a .icon {
    width: var(--link-icon-w);
    transition: var(--speed-normal) transform;
}

.ttlLink a:hover .icon,
.indexList a:hover .icon {
    transform: translateX(var(--arrow-move));
}

.indexList a .icon {
    --color1: var(--color-light-green);
}

.indexList a.idxLink .icon {
    --color1: #fff;
}

.indexImgList .ttlLink a .text,
.indexImgList .ul li a .text {
    flex: 1
}

.indexImgList a .icon svg {}

.indexList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.25rem;
    border-top: 1px solid var(--color-light-green);
}

.indexList.wide {
    grid-template-columns: 1fr
}

.indexList.noBd {
    border-top: none;
    margin-top: -1.25rem;
}


.indexList li {
    border-bottom: 1px solid #ccc
}

.indexList a {
    padding: 0.875rem 0;
    font-size: 1.125rem;
}

.ttlLink a .text,
.indexList a .text {
    flex: 1
}

.indexImgList .moreBtnWrap {
    grid-column: 2/3
}

.moreBtnWrap a.btn {
    font-size: 1rem;
    font-weight: 600;
    height: 3.375rem;
    border: 2px solid #ccc;
    justify-content: center;
    width: 100%;
    max-width: 25rem;
    margin: 1.25rem auto 0;
    color: #000;
    transition: var(--speed-normal) background, var(--speed-normal) border-color;
}

.indexImgList .moreBtnWrap a.btn .text {}


/* ---
　記事領域
--- */
.contentsArea {
    line-height: 1.8;
    font-size: 1.125rem;
    overflow-wrap: break-word;
}

.contentsArea.articlePage {
    font-size: 1.125rem
}

.contentsArea h2.ttl,
.contentsArea h2.wp-block-heading {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.875rem;
    position: relative;
    font-size: 1.5rem;
    margin-top: var(--sec-margin);
    margin-bottom: 1.5625rem;
    font-weight: 600;
}

.contentsArea h2.ttl.ptn2 ,
.contentsArea.articlePage h2.wp-block-heading {
    border: none;
    font-size: 1.75rem;
    padding: 0;
    margin-bottom: 1.25rem;
}

.contentsArea h2.ttl span {
    padding-left: 0.875rem;
}
.contentsArea.articlePage h2.wp-block-heading {
    /* padding-left: 0.875rem; */
}
.contentsArea.articlePage h2.wp-block-heading span {
    padding-left: 0;
}

.contentsArea h2.ttl:before,
.contentsArea h2.wp-block-heading:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 2.25rem;
    vertical-align: middle;
    background: #4AAF67;
    border-radius: 4px;
    left: 0.8758rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.contentsArea h2.ttl.ptn2:before {
    height: 2.625rem
}
.contentsArea h2.wp-block-heading:before {
    margin-right: 0.875rem;
}
.contentsArea h2.wp-block-heading.ttl:before {
    margin-right: 0;
}

.contentsArea h3.subTtl,
.contentsArea h3.wp-block-heading {
    font-size: 1.375rem;
    font-weight: 600;
    padding: 0 0 0.375rem;
    margin-bottom: 1.5625rem;
    margin-bottom: 0.3125rem;
    margin-top: 1.5625rem;
    /* background:
        linear-gradient(var(--color-green), var(--color-green)) left bottom / 100% 2px no-repeat,
        linear-gradient(var(--color-light-green), var(--color-light-green)) left calc(100% - 4px) / 100% 2px no-repeat; */

    /* text-decoration: underline;
    text-decoration-color: #B1E9C0;
    text-decoration-thickness: 1px;
    text-underline-offset: 8px; */
    position: relative;
    z-index: 0;
    text-indent: -2.075rem;
    padding-left: 2.075rem;
}
.contentsArea h3.wp-block-heading:before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%224.5%22%20fill%3D%22%23007524%22/%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%227.5%22%20fill%3D%22%234AAF67%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    width: 1.575rem;
    margin-right: 0.5rem;
    height: 1.2em;
    text-indent: 0;
    vertical-align: middle;
}



.contentsArea h4.subTtl2,
.contentsArea h4.wp-block-heading {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.875rem;
    margin-top: 1.875rem;
    position: relative;
    line-height: 1.3;
    padding: 0.25rem;
    /* padding-left: calc(0.625rem + 4px); */
    padding: 0.25rem calc(1rem + 2px);
    padding: 0.25rem 0;
    /* border: none; */
    display: flex;
    align-items: stretch;
    /* display: grid; */
    gap: 0.35rem;
    align-items: center;
}
.contentsArea h4.wp-block-heading:before,
.contentsArea h4.wp-block-heading:after {
    content: "";
    background: #bbb;
    border: none;
    min-width: 1.25rem;
    height: 1px;
}

.contentsArea h4.wp-block-heading:before {
    width: 1.25rem;
}
.contentsArea h4.wp-block-heading:after {
    flex: 1;
}
/* .contentsArea h4.subTtl2:after,
.contentsArea h4.wp-block-heading:after {
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 100%;
    border-radius: 10px;
    background: var(--color-green);
    left: 0;
    top: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
} */

.contentsArea p {
    margin-bottom: 0.5rem
}

.contentsArea .img {
    /* text-align: center; */
    margin-bottom: 1rem;
}

.contentsArea .img.center {
    text-align: center;
}

.contentsArea .img img {
    /* width: 100%; */
    /* max-width: 100%; */
    max-width: min(100%, 720px);
}

.contentsArea .boxStyle {
    padding: 0.625rem;
    border: 2px solid var(--color-light-green);
    border-radius: 5px;
    margin-top: 1.875rem;
}

.contentsArea .boxStyle .boxTtl {
    background: var(--color-green);
    color: #fff;
    border-radius: 3px;
    padding: 0.5rem 0.875rem;
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    margin-top: 0;
    text-indent: 0;
}
.contentsArea .boxStyle .boxTtl:before {
    content: none!important;
}
.contentsArea .boxStyle.type2 {
    border-color: #F0F0F0;
    background: #F0F0F0;
}

.contentsArea .boxStyle.type2 .boxTtl {
    background: none;
    color: #000;
    margin-bottom: 0;
}

.contentsArea .boxStyle .boxInner {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.contentsArea .listStyle,
.contentsArea .dotListStyle,
.contentsArea .wp-block-list {
    counter-reset: item;
    list-style: none;
    padding-left: 0.9375rem;
}

.contentsArea .listStyle .listStyle,
.contentsArea .wp-block-list .wp-block-list {
    padding-left: 0.325rem
}

.contentsArea .listStyle>li,
.contentsArea .listStyle2>li,
.contentsArea ol.wp-block-list>li {
    counter-increment: item;
    position: relative;
    padding-left: 1rem;
}

.contentsArea .dotListStyle>li,
.contentsArea ul.wp-block-list>li {
    padding-left: 1rem;
    position: relative;
    margin-bottom: 0.3125rem;
    margin-bottom: 0.25rem;
}

.contentsArea .listStyle,
.contentsArea ol.wp-block-list {


}
.contentsArea .listStyle>li,
.contentsArea ol.wp-block-list>li {
    margin-bottom: 0.625rem;
    margin-bottom: 0.25rem;
}

.contentsArea .listStyle>li::marker,
.contentsArea .listStyle2>li::marker,
.contentsArea ol.wp-block-list>li::marker {
    content: none;
}

.contentsArea .listStyle>li:before,
.contentsArea ol.wp-block-list>li:before {
    content: counter(item, decimal)".";
    width: 2rem;
    margin-left: -2rem;
    display: inline-block;
    text-align: right;
    padding-right: 0.25rem;
    box-sizing: border-box;
}

.contentsArea .dotListStyle>li:before,
.contentsArea ul.wp-block-list>li:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: var(--color-green);
    display: block;
    position: absolute;
    left: 0.25rem;
    left: 0.025rem;
    top: 0.65rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* listStyle2: ➊➋形式（nth-child で指定） */
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(1):before,
.contentsArea .listStyle2>li:nth-child(1):before { content: "➊"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(2):before,
.contentsArea .listStyle2>li:nth-child(2):before { content: "➋"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(3):before,
.contentsArea .listStyle2>li:nth-child(3):before { content: "➌"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(4):before,
.contentsArea .listStyle2>li:nth-child(4):before { content: "➍"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(5):before,
.contentsArea .listStyle2>li:nth-child(5):before { content: "➎"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(6):before,
.contentsArea .listStyle2>li:nth-child(6):before { content: "➏"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(7):before,
.contentsArea .listStyle2>li:nth-child(7):before { content: "➐"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(8):before,
.contentsArea .listStyle2>li:nth-child(8):before { content: "➑"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(9):before,
.contentsArea .listStyle2>li:nth-child(9):before { content: "➒"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(10):before,
.contentsArea .listStyle2>li:nth-child(10):before { content: "➓"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(11):before,
.contentsArea .listStyle2>li:nth-child(11):before { content: "⓫"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(12):before,
.contentsArea .listStyle2>li:nth-child(12):before { content: "⓬"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(13):before,
.contentsArea .listStyle2>li:nth-child(13):before { content: "⓭"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(14):before,
.contentsArea .listStyle2>li:nth-child(14):before { content: "⓮"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(15):before,
.contentsArea .listStyle2>li:nth-child(15):before { content: "⓯"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(16):before,
.contentsArea .listStyle2>li:nth-child(16):before { content: "⓰"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(17):before,
.contentsArea .listStyle2>li:nth-child(17):before { content: "⓱"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(18):before,
.contentsArea .listStyle2>li:nth-child(18):before { content: "⓲"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(19):before,
.contentsArea .listStyle2>li:nth-child(19):before { content: "⓳"; }
.contentsArea ol.wp-block-list.listStyle2>li:nth-child(20):before,
.contentsArea .listStyle2>li:nth-child(20):before { content: "⓴"; }

.contentsArea ol.wp-block-list.listStyle2>li,
.contentsArea .listStyle2>li {
    margin-bottom: 0.75rem;
}
.contentsArea ol.wp-block-list.listStyle2>li:before,
.contentsArea .listStyle2>li:before {
    width: 1.95rem;
    margin-left: -1.95rem;
    display: inline-flex;
    text-align: center;
    padding-right: 0.25em;
    /* background: var(--color-green); */
    height: 1em;
    /* color: #fff; */
    border-radius: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    /* padding: 0; */
    font-size: 1.625rem;
    /* margin-right: 0.25rem; */
    line-height: 1.8;
    font-weight: 600;
    color: var(--color-light-green);
    vertical-align: middle;
}

.boxInner .listStyle,
.boxInner .wp-block-list,
.boxInner ol.wp-block-list {
    padding-left: 0.5rem;
}

.contentsArea span.bold {
    font-weight: 600;
}

.contentsArea span.small {
    font-size: 0.9375rem
}

.annoText {
    font-size: 0.9375rem
}

.annoText li {
    padding-left: 1em;
    text-indent: -1em
}

.contentsArea a.link {}

/* 外部リンク */
.contentsArea a.outLink {
    /* font-weight: 600; */
    color: #0049BA;
}

.contentsArea a.link:after,
.contentsArea a[target="_blank"]:after,
.contentsArea a.file:after,
.contentsArea a[href*=".doc"]:after,
.contentsArea a[href*=".docx"]:after,
.contentsArea a[href*=".rtf"]:after,
.contentsArea a[href*=".xls"]:after,
.contentsArea a[href*=".xlsx"]:after,
.contentsArea a[href*=".zip"]:after,
.contentsArea a[href*=".csv"]:after {
    content: "";
    display: inline-block;
    width: 1.625em;
    height: 1.5em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 0.125rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* ここでファイル種別、リンク種別に応じてアイコン設定 */
/* 外部リンクアイコン */
.contentsArea a.outLink:after ,
.contentsArea a[target="_blank"]:after {
    background-image: url(../images/common/icon/icon_link_outlink.png);
    background-image: url(../images/common/icon/icon_link_outlink.svg);
    margin-bottom: 0.125rem;
}
#page404Navi .tabBlock .naviPanelLink a:after {
    content: none;
}
/* ファイルリンクアイコン（class="file" または href に Word/Excel の拡張子を含む。? 付きにも対応） */
.contentsArea a.file:after,
.contentsArea a[href*=".doc"]:after,
.contentsArea a[href*=".docx"]:after,
.contentsArea a[href*=".rtf"]:after,
.contentsArea a[href*=".xls"]:after,
.contentsArea a[href*=".xlsx"]:after,
.contentsArea a[href*=".zip"]:after,
.contentsArea a[href*=".csv"]:after {
    background-image: url(../images/common/icon/icon_link_file.png);
    background-image: url(../images/common/icon/icon_link_file.svg);
}

.inquiryBox {
    background: #F0F0F0;
    border-radius: 4px;
    padding: 1.875rem;
    margin-top: var(--sec-margin);
}

.contentsArea .inquiryBox h2.inquiryTtl ,
.contentsArea .inquiryBox h2.wp-block-heading.inquiryTtl {
    display: flex;
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.9375rem;
    padding-bottom: 0.625rem;
    gap: 0.625rem;
    align-items: center;
    font-size: 1rem
}

.inquiryBox .inquiryTtl .icon {
    width: 1.5em;
}

.inquiryBox .inquiryTtl .text {
    font-size: 125%;
    font-weight: 600;
}

.contentsArea .inquiryText .name {
    font-weight: 500;
    font-size: 1.125rem;
    margin-bottom: 0;
}

.contentsArea .inquiryText .inquiryDetail {
    margin-bottom: 0.25rem;
}

.contentsArea .inquiryText .inquiryDetail strong {
    display: inline-block;
    min-width: 5em;
}

.contentsArea .inquiryText .detail>div {
    display: flex;
}
.contentsArea .inquiryText .detail {
    font-size: 1rem;
}

.contentsArea .inquiryText .detail>div dt {
    white-space: nowrap;
    padding-right: 1em
}

.contentsArea .inquiryText .detail>div dd {
    flex: 1;
}

/* inquiryTtl が wp-block-heading の場合（CMS出力）: h2デフォルトを打ち消し + アイコン */
.contentsArea h2.wp-block-heading.inquiryTtl {
    border: none;
    border-bottom: 1px solid #aaa;
    border-radius: 0;
    padding: 0 0 0.625rem 0;
    margin-top: 0;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.contentsArea h2.wp-block-heading.inquiryTtl:before {
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background: url(../images/common/icon/icon_tel.svg) no-repeat center / contain;
    border-radius: 0;
    vertical-align: middle;
    flex-shrink: 0;
}

.contentsArea table {
    /* table-layout: fixed; */
    width: 100%;
    margin-bottom: 1rem
}

.contentsArea table thead {
    border-bottom: none;
}
.contentsArea table th,
.contentsArea table td {
    border: 1px solid #555;
    text-align: left;
    padding: 0.625rem;
    vertical-align: middle;
}

.contentsArea table th {
    font-weight: 600;
    background: #DCEBE0;
    color: var(--color-green)
}

.contentsArea .tableStyle2 th {
    padding: 0.25rem 0.625rem
}

/* ブロックパレットの文字色・背景色: inc/editor-color-palette.php から wp_add_inline_style で出力 */

/* 栄養成分テーブル */
.wp-block-table.nutritionTable table {
    max-width: 100%;
    font-size: 1.125rem;
    background: #EDFFF2;
    border-radius: 10px;
    overflow: hidden;
    border-spacing: 0 1rem;
    border-collapse: separate;
    margin-bottom: 0.375rem;
}
.nutritionTable table td,
.nutritionTable table th {
    border: none;
    text-align: center;
}
.nutritionTable table td:not(:first-child),
.nutritionTable table th:not(:first-child) {
    border-left: 1px solid #ddd;
}
.nutritionTable table td {
    min-width: 200px;
    padding: 0 0.5rem;
}
.nutritionTable table tr {

}

/* レシピテーブル */
.wp-block-table.recipeTable table {
    width: auto;
    min-width: min(100%,670px);
    max-width: 100%;
    font-size: 1.125rem;
}
.recipeTable table td,
.recipeTable table th {
    border: none;
}
.recipeTable table td {
    min-width: 200px;
}
.recipeTable table tr {
    border-bottom: 1px solid #AAAAAA;
}
.recipeTable table tr td:last-child {
    text-align: right;
}

/* Flexible Table Block ? テーマスタイルの適用 */
.contentsArea .wp-block-flexible-table-block-table table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}
.contentsArea .wp-block-flexible-table-block-table table thead {
    border-bottom: none;
}
.contentsArea .wp-block-flexible-table-block-table table th,
.contentsArea .wp-block-flexible-table-block-table table td {
    border: 1px solid #555;
    text-align: left;
    padding: 0.625rem;
    vertical-align: middle;
}
.contentsArea .wp-block-flexible-table-block-table table th {
    font-weight: 600;
    background: #DCEBE0;
    color: var(--color-green);
}
/* FTB: th のフォント太さをプラグインのデフォルトで上書きされないように保証 */
.contentsArea .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table th {
    font-weight: 600;
}

/* Flexible Table Block ? リモート互換（二重クラス・直下table用） */
.contentsArea .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}
.contentsArea .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table thead {
    border-bottom: none;
}
.contentsArea .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table th,
.contentsArea .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table td {
    border: 1px solid #555;
    text-align: left;
    padding: 0.625rem;
    vertical-align: middle;
}
.contentsArea .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table th {
    font-weight: 600;
    background: #DCEBE0;
    color: var(--color-green);
}

.wp-block-media-text>.wp-block-media-text__content {
    padding: 0 1.875rem;
}
.wp-block-media-text>.wp-block-media-text__content:has(.nutritionTable) {
    padding-right: 0;
}
@media screen and (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content {
        padding: 0;
    }
    .recipeTable table td {
        min-width: 0;
    }
}
.wp-block-accordion {
    /* margin-bottom: 0.9375rem */
}
.wp-block-accordion-item {
    border: 1px solid #ddd;
    padding: 0.9375rem 1.25rem;
    border-radius: 5px;
    box-shadow: 0 2px 0 #ddd;
    margin-bottom: 0.9375rem
    /* transition: .25s; */
}
.wp-block-accordion-item.is-open {
    border-color: #4AAF67;
    box-shadow: 0 0 0 #ddd;
}
.wp-block-accordion-panel {
    padding-top: 0.625rem;
    padding-top: 0.9375rem;
    margin-top: 0.9375rem;
    border-top: 1px solid #aaa
}
.wp-block-accordion-heading__toggle {
    gap: 0 0.75rem
}
.wp-block-accordion-heading__toggle-icon {
    position: relative;
    background: var(--color-light-green);
    text-indent: -9999px;
    transform: none!important;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 3px;
}

.wp-block-accordion-heading__toggle-icon:before,
.wp-block-accordion-heading__toggle-icon:after {
    content: "";
    display: block;
    position: absolute;
    width: 40%;
    height: 2px;
    background: #fff;
    top: calc(50% + 2px);
    transition: var(--speed-normal);
    /* transition: 10s; */
}

.wp-block-accordion-heading__toggle-icon:before {
    left: 50%;
    transform-origin: left bottom;
    transform: rotate(-40deg);
}

.wp-block-accordion-heading__toggle-icon:after {
    right: 50%;
    transform-origin: right bottom;
    transform: rotate(40deg);
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    background: var(--color-green);
}
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon:before,
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon:after {
    transform: rotate(0deg);
    top: 50%;
    width: 26%;
}
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon:before {
    margin-left: -1px;

}
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon:after {
    margin-right: -1px;
}

.pagerWrap {
    margin-top: 2.5rem;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.pager a {
    display: flex;
    font-size: 1.125rem;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000;
}

.pager .ellipsis a {
    pointer-events: none;
    cursor: default;
    padding: 0 0.3125rem;
}

.pager .ctrl a {
    background: var(--bgColor-green);
    border: 2px solid var(--bgColor-green);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    transition: var(--speed-normal);
}

.pager .ctrl a:hover {
    border-color: var(--color-light-green);
}

.pager .ctrl a .svg {
    width: 1rem;
}

.pager li:not(.ctrl):not(.ellipsis) a {
    height: 2.3125rem;
    min-width: 2.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #aaa;
    border-radius: 3px;
    transition: var(--speed-normal) background;
    position: relative;
}

.pager li:not(.ctrl):not(.ellipsis) a:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-light-green);
    left: -2px;
    top: -2px;
    border-radius: 3px;
    transition: var(--speed-normal) opacity;
    opacity: 0;
}

.pager li:not(.ctrl):not(.ellipsis):not(.current) a:hover:before {
    opacity: 1
}

.pager li:not(.ctrl):not(.ellipsis) a:hover {
    background: var(--bgColor-light-green)
}

.pager li.current a {
    background: var(--color-green) !important;
    color: #fff;
    line-height: 0;
    border-color: var(--color-green) !important;
}


/* 緊急情報 */
#emergency {
    padding: 1.875rem 1rem 1rem;
}
.emergencyBlock {
    --emergency-main: #CA3434;
}

.emergencyBlock.type2 {
    --emergency-main: #FFCC24;
}

#emergency .emergencyInner {
    border: 2px solid var(--emergency-main);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    position: relative;
    /* padding-bottom: 1.75rem; */
}

#emergency .container {
    position: relative;
}
#emergency .emergencyHead {
    width: 100%;
    min-height: 4.75rem;
    border: 0;
    background: #fff;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    position: relative;
    padding: 0.75rem 3.75rem 0.75rem 1rem;
    color: var(--emergency-main);
    transition: .25s;
    transition-property: color,background;
}

#emergency.type2 .emergencyHead {
    color: #000;
}
#emergency.is-open .emergencyHead {
    background: var(--emergency-main);
    color: #fff;
}
#emergency.type2.is-open .emergencyHead {
    color: #000
}
#emergency .emergencyHead:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

#emergency .emergencyHead .headIcon {
    width: 2em;
    line-height: 0;
    --color6: var(--emergency-main);
    transition: .25s;
}

#emergency.is-open .emergencyHead .headIcon {
    --color6: #fff;
}
#emergency.type2 .emergencyHead .headIcon {
    --color6: #000;
}
#emergency .emergencyHead .headIcon .svg {
    width: 100%;
    height: auto;
}

#emergency .emergencyHead .headTextSuffix {
    display: inline;
}

#emergency.is-open .emergencyHead .headTextSuffix {
    display: none;
}

#emergency .emergencyHead .headAction {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    min-width: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#emergency .emergencyHead .toggleIcon {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--emergency-main);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -0.3rem;
}

#emergency.type2 .emergencyHead .toggleIcon {
    border-color: #000
}
/* #emergency.is-open .emergencyHead .toggleIcon {
    transform: rotate(-45deg);
    top: calc(50% + 3px);
} */

#emergency:not(.is-open) .emergencyHead .toggleIcon {
    /* top: calc(50% - 3px); */
}

#emergency .emergencyHead .headCloseText {
    display: none;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    flex-direction: column;
    gap: 0.25rem;
}

#emergency .emergencyHead .headCloseText::before {
    content: "";
    width: 2rem;
    height: 2rem;
    display: inline-block;
    /* margin-left: 0.35em; */
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
    transform: rotate(45deg);
}

#emergency.is-open .emergencyHead .headCloseText {
    display: flex;
    align-items: center;
}

#emergency.is-open .emergencyHead .toggleIcon {
    display: none;
}

#emergency .emergencyBody {
    padding: 1rem clamp(15px,10%,7.5rem);
    max-height: max(300px,50vh);
    overflow: auto;
    margin-bottom: 1.75rem!important;
}
#emergencyMore {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%,-50%);
    width: 80%;
    pointer-events: none;
}
#emergencyMore #emergencyMoreBtn {
    border: 2px solid var(--emergency-main);
    background: var(--emergency-main);
    /* border-radius: 5px; */
    /* padding: 0.5em 2em; */
    /* text-decoration: none; */
    /* color: #000; */
    /* font-weight: bold; */
    height: 3.125rem;
    max-width: 400px;
    pointer-events: all;
    font-size: 1.25rem;
    color: #fff;
    margin-top: 0;
    transition: var(--speed-normal)
}
#emergencyMore #emergencyMoreBtn svg {
    --color3: #fff;
    transition: var(--speed-normal);
}
#emergencyMore #emergencyMoreBtn .arrow {
    width: 0.9rem;
}
#emergencyMore #emergencyMoreBtn:hover {
    background: #fff;
    color: var(--emergency-main);
}
.type2 #emergencyMore #emergencyMoreBtn {
    color: #000;
}
#emergencyMore #emergencyMoreBtn:hover .arrow {
    transform: translateY(2px);
}
#emergencyMore #emergencyMoreBtn:hover .arrow svg {
    --color3: var(--emergency-main);
}
#emergency .emergencyHead .headTitle {
    margin: 0;
    font-size: 1.625rem;
    /* font-weight: bold; */
}

#emergency .emergencyContent,
#emergency .contentsArea {
    padding: 1.75rem 1.5rem;
}
#emergency .contentsArea {
    padding-top: 1rem
}


#emergency .emergencyContent p,
#emergency .contentsArea p {
    line-height: 1.9;
}

#emergency .emergencyContent .emergencyLabel,
#emergency .contentsArea .emergencyLabel {
    margin: 1.25rem 0;
    border: 1px solid var(--emergency-main);
    background: #fff;
    color: var(--emergency-text);
    font-weight: bold;
    padding: 0.6rem 1rem;
}


.emergencyBlock .contentsArea > *:first-child {
    margin-top: 0;
}
.emergencyBlock .contentsArea h2.wp-block-heading {
    border-color: var(--emergency-main);
    border-width: 2px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    margin-bottom: 1.25rem;
}
.emergencyBlock .contentsArea h2.wp-block-heading:before {
    background: var(--emergency-main);
    height: 2.1rem;
}
.emergencyBlock .contentsArea h3.wp-block-heading {
    text-indent: 0;
    padding-left: 0;
    text-decoration: underline;
    text-decoration-thickness: 0.4em;
    text-underline-offset: -0.05em;
    text-decoration-color: color-mix(in srgb, var(--emergency-main) 30%, transparent);
    margin-top: 0.7rem;
    text-decoration-skip-ink: none;
}
.emergencyBlock .contentsArea h3.wp-block-heading:before {
    content: none;
}
.emergencyBlock .contentsArea h4.wp-block-heading {
    
margin-top: 0.7rem;
}
@media screen and (max-width: 768px) {
    #emergency .emergencyHead {
        font-size: 1.1rem;
        padding: 0.75rem 3rem 0.75rem 0.75rem;
        justify-content: flex-start;
    }

    #emergency .emergencyHead .headTitle {
        font-size: 1.125rem;
    }

    #emergency .emergencyHead .headCloseText {
        right: 1.9rem;
        font-size: 0.6875rem;
    }

    #emergency .emergencyContent,
    #emergency .contentsArea {
        padding: 1.25rem 1rem;
    }
    #emergency .emergencyBody {
        padding: 1rem;
    }


    .pageLinksList li {
        min-width: calc((100% - 2rem)/3);
    }

    .indexImgList {
        grid-template-columns: max(50px, 20%) 1fr;
        gap: 1.25rem 1.25rem;
    }

    .indexImgList .ttlLink {
        place-content: center
    }

    .indexImgList .img {
        grid-row: 1/2;
    }

    .indexList {
        grid-column: 1/3;
        grid-template-columns: 1fr;
    }

    .indexImgList .moreBtnWrap {
        grid-column: 1 / 3
    }

    .indexList li {
        padding: 0 0.5rem
    }
}

@media screen and (max-width: 500px) {
    .pageLinksList li {
        /* min-width: calc((100% - 1rem)/2); */
    }
}

/* アクセス */
#accessMapSection {
    background: #96E6E6;
    padding-bottom: 4.375rem;
}

#mapInner {
    display: flex;
    padding-right: 1.5rem;
    align-items: flex-start;
}

#mapInner #map {
    max-width: 640px;
    flex: 1;
    /* position: sticky; */
    /* top: 0; */
}

#accessRoutes {
    width: 55%;
    max-width: 640px;
    /* display: flex; */
    flex-direction: column;
    /* gap: 3.125rem 0; */
}

@media screen and (min-width: 769px) {
    #accessRouteItems {
        display: block !important;
    }
}

#accessRouteItems .routeCont {
    background: #fff;
    margin-top: 3.125rem;
    border-radius: 5px;
    box-shadow: var(--base-shadow);
}

#accessRouteItems .routeCont#route1 { --routeColor: #5460C3 }
#accessRouteItems .routeCont#route2 { --routeColor: #0C74C0 }
#accessRouteItems .routeCont#route3 { --routeColor: #C75300 }
#accessRouteItems .routeCont#route4 { --routeColor: #007FA9 }

#accessRouteItems .routeCont .routeHead {
    background: var(--routeColor);
    border-radius: 5px 5px 0 0;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 1.375rem;
    font-weight: bold;
    position: relative;
    min-height: 4.25rem;
    padding-left: 4.25rem;
    line-height: 1.2;
}

#accessRouteItems .routeCont .routeHead .icon {
    background: #fff;
    border: 4px solid var(--routeColor);
    border-radius: 1000px;
    width: 4.625rem;
    aspect-ratio: 1 / 1;
    position: absolute;
    left: -1.5rem;
    padding: 0.3725rem;
}

#accessRouteItems .routeCont .routeHead .ttl {
    padding-top: 0.275rem
}

#accessRouteItems .routeCont .routeDetail {
    padding: 1.25rem 1.875rem 1.875rem;
}

#accessRouteItems .routeCont .routeDetail .leadText {
    font-size: 1rem;
}

#accessRouteItems .routeCont .routeDetail .col {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1rem;
    /* flex-wrap: wrap; */
}

#accessRouteItems .routeCont .routeDetail .col>p {
    width: 50%;
    max-width: 240px;
}

#accessRouteItems .routeCont .routeDetail .btn {
    border: 2px solid #ccc;
    height: 4rem;
    color: #000;
    line-height: 1;
    font-size: 1.125rem;
    text-align: center;
    padding: 0.25rem 1rem 0;
}

#accessRouteItems .routeCont .routeDetail .btn:hover {
    background: var(--bgColor-light-green);
    border-color: var(--color-green);
}

#accessRouteItems .routeCont .routeDetail .btn span:after {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 0.25rem;
    background-image: url(../images/common/icon/icon_link_outlink.png);
    margin-bottom: 0.125rem;
}

#accessRouteItems .routeCont .routeDetail .contactList>div {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

#accessRouteItems .routeCont .routeDetail .contactList>div:not(:first-child) {
    margin-top: 0.625rem;
}

#accessRouteItems .routeCont .routeDetail .contactList dt {
    width: 15rem;
    text-align: center;
    color: var(--color-green);
    font-weight: 600;
    padding: 0.625rem;
    border: 1px solid;
    border-radius: 3px;
    line-height: 1;
}

#accessRouteItems .telBlock {
    display: table;
    font-size: 1rem;
}

#accessRouteItems .telBlock .tel {
    display: table-row;
}

#accessRouteItems .telBlock .tel span {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}

#accessRouteItems .telBlock .tel .num {
    font-weight: 600;
    font-size: 112.5%;
    padding-left: 0.75rem;
}

@media screen and (max-width: 768px) {
    #accessMapSection {
        padding-bottom: var(--sec-margin);
    }

    #accessRoutes {
        display: none
    }

    #accessRouteItems {
        background: #fff;
        padding: 0 1rem 3rem;
        border-radius: 10px;
        overflow: clip;
    }

    #accessRouteItems .routeCont {
        --base-size: 2.4275rem;
        margin-top: 2rem;
        border: 2px solid var(--routeColor);
        border-radius: var(--base-size) 5px 5px 5px;
        overflow: hidden;
        box-shadow: none;
    }

    #accessRouteItems .routeCont .routeHead {
        border-radius: calc(var(--base-size) - 3px) 2px 0 var(--base-size);
        padding-left: 0;
        height: calc(var(--base-size) * 2);
        min-height: 0;
        margin-top: -2px;
        margin-left: -2px;
        gap: 0.3725rem;
        padding-right: 1rem;
    }

    #accessRouteItems .routeCont .routeHead .icon {
        width: calc(var(--base-size) * 2);
        position: static;
    }

    #accessRouteItems .routeCont .routeDetail {
        padding: 1.25rem 1.875rem;
    }

    #mapInner {
        flex-direction: column;
        padding-right: 0;
        position: relative;
        display: block;
    }

    #spRouteBtnWrap {
        padding: 0 var(--body-space);
        position: sticky;
        bottom: 1rem;
        left: 0;
        z-index: 1000;
        /* transform: translateY(80vh); */
        /* margin-top: -80vh; */
        margin-top: 2rem;
    }

    #spRouteBtnWrap .btn {
        background: var(--color-green);
        color: #fff;
        font-size: 1.275rem;
        justify-content: space-between;
        border: 4px solid var(--color-green);
        margin: 0;
        gap: 1rem;
        max-width: 400px;
        margin: auto;
        padding-right: 0.5rem;
    }

    #spRouteBtnWrap .btn:hover {
        filter: saturate(200%);
    }

    #spRouteBtnWrap .btn .icon {
        --color3: #fff;
        width: 2rem;
    }

    #spRouteBtnWrap .btn .iconimg {
        width: 4.875rem;
    }

    #spRouteBtnWrap .btn .text {
        flex: 1;
    }
}

@media screen and (max-width: 580px) {
    #accessRouteItems .routeCont {}

    #accessRouteItems .routeCont .routeDetail .leadText {
        font-size: 1.125rem;
    }

    #accessRouteItems .routeCont .routeDetail .col {
        flex-direction: column;
        gap: 0;
        padding: 0;
        margin: 1rem 0 1.875rem;
    }

    #accessRouteItems .routeCont .routeDetail .col>p {
        width: 100%
    }

    #accessRouteItems .routeCont .routeDetail .col>p.btnWrap {
        max-width: 300px;
    }

    #accessRouteItems .routeCont .routeDetail .contactList {
        font-size: 1.125rem;
    }

    #accessRouteItems .routeCont .routeDetail .contactList>div {
        justify-content: center;
        gap: 0.5rem;
    }

    #accessRouteItems .routeCont .routeDetail .contactList>div:not(:first-child) {
        margin-top: 1rem
    }

    #accessRouteItems .routeCont .routeDetail .contactList dt {
        width: auto;
        padding: 0.625rem 2rem;
        width: 100%;
    }

    #accessRouteItems .telBlock {
        font-size: 1.125rem;
    }

    #accessRouteItems .telBlock .tel .num {
        font-size: 100%;
    }
}

/* 温泉 */
#onsenSection {
    background: #96E6E6;
    padding: 4.5rem 2.5rem 4.375rem;
}

#onsenMap {
    position: relative;
}
#onsenLogo {
    position: absolute;
    width: 34%;
    left: 0;
    top: 0;
    z-index: 9;
    /* opacity: 0; */
}
#onsenMap {
    position: relative;
    /* background: url(../images/onsen-konzatsu/test.svg) no-repeat; */
    background-size: contain;
    padding: 1.8% 3.9% 0 1.8%;
    container-type: inline-size;
}
#onsenMapImg {
    position: relative;
}
#onsenMapImg .onsenLeadText {
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
    font-size: calc(var(--base-font-setting) * 1.875cqw);
    font-size: min(calc(var(--base-font-setting) * 1.875cqw),30px);
    font-weight: 600;
    line-height: 1.75;
    top: -4.5rem;
    margin-top: 7cqw;
}
#onsenMapImg picture {
    /* padding: 0 5% 0 0%; */
    display: block;
}
.onsenItem {
    position: absolute;
    width: 5.4%;
}
#onsen1 {bottom: 28.8%;left: 73.8%;}
#onsen2 {bottom: 18.2%;left: 48.7%;}
#onsen3 {bottom: 29.7%;left: 40.8%;}
#onsen4 {bottom: 23.6%;left: 54.6%;}
#onsen5 {bottom: 21.9%;left: 66.2%;}
#onsen6 {bottom: 11%;left: 52.6%;}
#onsenMapImg .onsenItem .balloonItem {
    position: absolute;
}
#onsenMapImg .onsenItem .balloonItem a {
    text-decoration: none;
    position: relative;
    display: block;
    transition: var(--speed-normal)
}
#onsenMapImg .onsenItem .balloonItem a > img {
    transition: var(--speed-normal)
}
#onsenMapImg .onsenItem:has(.pin a:hover) .balloonItem a > img ,
#onsenMapImg .onsenItem .balloonItem a:hover > img {
    transform:scale(1.02);
}
#onsenMapImg .onsenItem .balloonItem .textWrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#onsenMapImg .onsenItem#onsen1 .balloonItem .textWrap {
    padding: 0 1.4% 5.2%;
}
#onsenMapImg .onsenItem#onsen2 .balloonItem .textWrap,
#onsenMapImg .onsenItem#onsen3 .balloonItem .textWrap {
    padding-right: 5.5%;
    padding-left: 0.7%;
}
#onsenMapImg .onsenItem#onsen4 .balloonItem .textWrap {
    padding-bottom: 3.9%
}
#onsenMapImg .onsenItem#onsen5 .balloonItem .textWrap,
#onsenMapImg .onsenItem#onsen6 .balloonItem .textWrap {
    top: auto;
    bottom: 0;
    padding-top: 6%;
}
#onsenMapImg .onsenItem .balloonItem .text {
    font-size: calc(var(--base-font-setting) * 2.15cqw);
    font-size: min(calc(var(--base-font-setting) * 2.05cqw),30px);
    color: #000;
    font-weight: 600;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#onsenMapImg .onsenItem .balloonItem.crowdItem {

}
#onsenMapImg .onsenItem .balloonItem.textItem {
    /* display: flex; */
}
#onsenMapImg .onsenItem .balloonItem .crowd {
    display: flex;
    width: 31.5cqw;
    width: 36cqw;
    justify-content: center;
    gap: 1rem;
    padding: 1cqw 2.5cqw 0;
}
#onsenMapImg .onsenItem .balloonItem .crowd li {
    flex: 1;
    position: relative;
}
#onsenMapImg .onsenItem .balloonItem .crowd p.word {
    position: absolute;
    width: 90%;
    background: #fff;
    height: 3cqw;
    /* height: 3em; */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1000px;
    color: #000;
    left: 5%;
    bottom: 10%;
    font-size: 1.55cqw;
    font-weight: bold;
    border: 1px solid #fff;
    line-height: 1;
    padding-top: 0.25rem;
}
#onsenMapImg .onsenItem .balloonItem .crowd p.word.type1 {
    color: #555;
    background: #e6e6e6;
}
#onsenMapImg .onsenItem .balloonItem .crowd p.word.type2 {
    color: #fff;
    background: #f15a24;
}
#onsenMapImg .onsenItem .balloonItem .crowd p.word.type3 {
    color: #f15a24;
    background: #fff;
}
#onsenMapImg .onsenItem .balloonItem .crowd p.word.type4 {
    color: #fff;
    background: #555555;
}
#onsenMapImg .onsenItem .balloonItem .crowd p.word.type5 {
    color: #5273d6
}
#onsenMapImg .onsenItem .balloonItem .crowd p.img .text {

}
#onsen1 .balloonItem ,
#onsen2 .balloonItem ,
#onsen3 .balloonItem {
    width: 27.4cqw;
    width: 35.5cqw;
}
#onsen1 .balloonItem {
    left: 40%;
    bottom: 94%;
    left: -110%;
    bottom: 100%;
}
#onsen2 .balloonItem {
    right: 91.9%;
    top: -7.1%;
}
#onsen3 .balloonItem {
    right: 106%;
    bottom: 20.5%;
}
#onsen4 .balloonItem {
    width: 18.6cqw;
    left: -100%;
    bottom: 93.1%;
}
#onsen5 .balloonItem {
    width: 18.6cqw;
    left: 78%;
    top: 79%;
}
#onsen6 .balloonItem {
    width: 18.6cqw;
    left: 75%;
    top: 84.1%;
}
.onsenItem .pin a {
    transition: var(--speed-normal)
}
.onsenItem .pin a:hover,
.onsenItem:has(a:hover) .pin a {
    filter:saturate(150%) brightness(1.1);
    transform: translateY(-3px);
}
.onsenModal {
    background: #fff;
    padding: 2.5rem;
    border-radius: 5px;
    max-width: 1200px;
    position: relative;
}
.onsenModal .contentsArea {
    font-size: 1rem;
}
.onsenModal .ttlWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid #D2D2D2;
    margin-bottom: 1.5rem;
    position: relative;
    padding: 0 0 0.75rem;
    gap: 1.25rem 0.5rem;
}
.onsenModal .ttlWrap:after {
    content: "";
    display: block;
    position: absolute;
    height: 4px;
    width: 18.75rem;
    background: var(--color-light-green);
    bottom: -4px;
    left: 0;
}
.onsenModal .ttlWrap h2 {
    font-size: 2.125rem;
    font-weight: 600;
    line-height: 1;
}

/* ホエールウォッチングカメラ（モーダル）— onsenModal と見た目を揃える */
.wwcModal {
    background: #fff;
    padding: 1.75rem 1.5rem 1.25rem;
    border-radius: 5px;
    max-width: 1200px;
    position: relative;
    width: 100%;
}
.wwcModal .contentsArea {
    font-size: 1rem;
}
.wwcModal .ttlWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid #D2D2D2;
    margin-bottom: 1.5rem;
    position: relative;
    padding: 0 0 0.75rem;
    gap: 1.25rem 0.5rem;
}
.wwcModal .ttlWrap:after {
    content: "";
    display: block;
    position: absolute;
    height: 4px;
    width: 18.75rem;
    background: var(--color-light-green);
    bottom: -4px;
    left: 0;
}
.wwcModal .ttlWrap h2 {
    font-size: 2.125rem;
    font-weight: 600;
    line-height: 1;
}
.wwcModal .movieWrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.wwcModal .movieWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.onsenModal .konzatsu {
    display: flex;
    gap: 0.625rem;
}
.onsenModal .konzatsu .item {
    display: flex;
    align-items: center;
    border-radius: 4px 100px 100px 4px;
    background: var(--onsen-color,#000);
    border: 4px solid var(--onsen-color,#000);
    padding-left: 1rem;
    gap: 0.85rem;
}
.onsenModal .konzatsu .item.man {
    --onsen-color: #5174D5;
}
.onsenModal .konzatsu .item.wom {
    --onsen-color: #EC547A;
}
.onsenModal .konzatsu .item .name {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1;
}
.onsenModal .konzatsu .item .label {
    display: flex;
    border-radius: 100px;
    padding: 0.75rem 1rem;
    align-items: center;
    background: #fff;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
}
.onsenModal .konzatsu .item .label.type1 {
    color: #555;
    background: #e6e6e6;
}
.onsenModal .konzatsu .item .label p {
    margin-bottom: 0;
    vertical-align: middle;
    display: flex;
    align-items: center;
}
.onsenModal .konzatsu .item .label p:not(:first-child):before {
    content: "";
    display: inline-block;
    margin-right: 0.5rem;
    height: 1.2rem;
    background: #ccc;
    width: 1px;
}
.onsenModal .konzatsu .item .label.type1 .crowd {
    color: #555
}
.onsenModal .konzatsu .item .label.type2 {
    color: #ed5479;
    color: #fff;
    background: #f15a24;
    border: 1px solid;
}
.onsenModal .konzatsu .item .label.type3 {
    color: #f15a24;
    background: #fff;
    border: 1px solid #fff;
}
.onsenModal .konzatsu .item .label.type4 {
    color: #fff;
    background: #555555;
    border: 1px solid;
}
.onsenModal .konzatsu .item .label.type5 .crowd {
    color: #5273d6
}
.onsenCol {
    display: flex;
    gap: 1.875rem;
}
.onsenCol .img {
    flex: 1;
    min-width: 250px;
}
.onsenCol .table {
    width: 70%;
    max-width: 540px;
}
@media screen and (min-width: 769px) {
    #onsenMapImg .onsenItem .balloonItem .text .icon {
        display: none
    }
}
@media screen and (max-width: 1000px) {
    #onsenSection {
        padding: 2.5rem 2.6rem 2.875rem 0.5rem;
    }
    #onsenLogo {
        width: 27%;
        top: 1%;
        left: 3%;
    }
    #onsenMapImg .onsenLeadText {
        top: -1.9rem;
        right: -3rem;
        font-size: calc(var(--base-font-setting) * 2.075cqw);
        margin-top: 0;
    }
    #onsen1 .balloonItem,
    #onsen2 .balloonItem,
    #onsen3 .balloonItem {
        width: 41cqw;
    }
    #onsen4 .balloonItem,
    #onsen5 .balloonItem,
    #onsen6 .balloonItem {
        width: 24cqw
    }
    #onsenMapImg .onsenItem .balloonItem .crowd {
        width: 41cqw;
    }
    #onsenMapImg .onsenItem .balloonItem .crowd p.word {
        height: 4.7cqw;
        font-size: 2cqw;
    }
    #onsen1 .balloonItem {
        left: -20%;
        bottom: 110%;
        left: -140%;
        bottom: 170%;
    }
    #onsen2 .balloonItem {
        right: 106%;
        top: -5.1%;
    }
    #onsen3 .balloonItem {
        right: 115%;
        bottom: 0.5%;
    }
    #onsen4 .balloonItem {
        left: -133%;
        bottom: 100%;
    }
    #onsen5 .balloonItem {
        left: 77%;
        top: 83%;
    }
    #onsen6 .balloonItem {
        left: 80%;
        top: 107%;
    }
    #onsenMapImg .onsenItem .balloonItem .text {
        font-size: calc(var(--base-font-setting) * 2.5cqw);
    }
}
@media screen and (max-width: 768px) {
    .onsenModal {
        padding: 2.5rem 5%;
    }
    .wwcModal {
        padding: 2.5rem 5%;
    }
    #onsenSection {
        padding: 1rem;
        overflow: hidden;
    }
    #onsenMapImg picture {
        width: 70%;
        margin-left: auto;
        margin-top: -10%;
    }
    #onsenLogo {
        width: 50%;
        top: 2%;
    }
    .onsenItem {
        position: static;
        width: 100%;
        margin-top: 1.25rem;
    }
    .onsenItem .pin {
        display: none;
    }
    #onsenMapImg .onsenItem .balloonItem {
        position: static;
        width: 100%!important;
    }
    #onsenMapImg .onsenItem .balloonItem > a > img {
        display: none;

    }
    #onsenMapImg .onsenLeadText {
        position: static;
        text-align: center;
        font-size: 1.3725rem;
        margin-top: 1.5rem;
    }
    #onsenMapImg .onsenItem .balloonItem > a {
        background: #fff;
        border: 1px solid #555;
        border-radius: 10px;
    }
    #onsenMapImg .onsenItem .balloonItem > a:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        border: 2px solid var(--color-light-green);
        left: -2px;
        top: -2px;
        border-radius: 10px;
        transition: var(--speed-normal) opacity;
        opacity: 0;
    }
    #onsenMapImg .onsenItem .balloonItem > a:hover {
        background: var(--bgColor-light-green);
    }
    #onsenMapImg .onsenItem .balloonItem > a:hover:before {
        opacity: 1;
    }
    #onsenMapImg .onsenItem .balloonItem .textWrap {
        position: static;
        padding: 5%!important;
        text-align: left;
        display: block;
    }
    #onsenMapImg .onsenItem .balloonItem .text {
        font-size: 1.75rem;
    }
    #onsenMapImg .onsenItem .balloonItem .text .icon {
        width: 1.2em;
    }
    #onsenMapImg .onsenItem .balloonItem .crowd {
        padding: 0 1rem!important;
        width: 100%;
        max-width: 510px;
        gap: 1.5rem;
        margin: 1.5rem auto 0;
    }
    #onsenMapImg .onsenItem .balloonItem .crowd li{
        container-type: inline-size
    }
    #onsenMapImg .onsenItem .balloonItem .crowd p.word {
        font-size: 11.5cqw;
        height: 2.1em;
        bottom: 25%;
        width: 88%;
        left: 6%;
        bottom: 8%;
    }
    .onsenModal .onsenCol {
        flex-direction: column;
    }
    .onsenModal .onsenCol .img {
        order: 1
    }
    .onsenModal .onsenCol .table {
        order: 2;
        width: 100%;
        max-width: 100%
    }
    .onsenModal .ttlWrap {
        flex-direction: column-reverse;
        align-items: flex-start
    }
    .onsenModal .konzatsu {
        flex-wrap: wrap;
    }
    .onsenModal .konzatsu .item {
        border-radius: 10px 100px 100px 10px;
    }
}

/* イベントカレンダー */
/* イベントラベルの色と枠線の色を設定 */
.eventAll{--eventLabelColor: #FFFFFF;--eventBoderColor: rgba(120,120,120,0.3);}
.event1  {--eventLabelColor: #FFEEEE;--eventBoderColor: rgba(213,68,68,0.3);--eventLabelActiveColor: #CD3535}
.event2  {--eventLabelColor: #FEF2E8;--eventBoderColor: rgba(230,154,48,0.3);--eventLabelActiveColor: #BF5900}
.event3  {--eventLabelColor: #FBF8D3;--eventBoderColor: rgba(213,187,37,0.3);--eventLabelActiveColor: #946D00}
.event4  {--eventLabelColor: #E6F5E0;--eventBoderColor: rgba(49,159,39,0.3);--eventLabelActiveColor: #498400}
.event5  {--eventLabelColor: #DBF6E1;--eventBoderColor: rgba(0,117,36,0.3);--eventLabelActiveColor: #008761}
.event6  {--eventLabelColor: #E6F9FA;--eventBoderColor: rgba(20,135,143,0.3);--eventLabelActiveColor: #007D9F}
.event7  {--eventLabelColor: #E5F3FF;--eventBoderColor: rgba(50,99,163,0.3);--eventLabelActiveColor: #0071DB}
.event8  {--eventLabelColor: #E3E3E3;--eventBoderColor: rgba(120,120,120,0.3);--eventLabelActiveColor: #555555}
.event9  {--eventLabelColor: #F0E4F5;--eventBoderColor: rgba(137,47,159,0.3);--eventLabelActiveColor: #955EAE}
.event10 {--eventLabelColor: #FFE9F2;--eventBoderColor: rgba(153,46,80,0.3);--eventLabelActiveColor: #BE4F7F}

/* ジャンルボタンの背景色を設定 */
.pageLinksBtnList a[class*="event"] {
    --pageLinkBtnsColor: var(--eventLabelColor);
    box-shadow: 0 2px 0 0 var(--eventBoderColor);
}
.pageLinksBtnList a[class*="event"]:hover {
    --pageLinkBtnsColor: var(--eventLabelActiveColor);
}

.calendarNoEvent {
    color: #CA3434;
    font-size: 1rem;
    margin: 0.75rem 0 0.5rem;
}

.calendarHead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.calendarHead .calendarCtrl {
    display: flex;
    align-items: center;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    gap: 0.25rem;
    line-height: 1;
}
.calendarHead .calendarCtrl .icon {
    --color3: var(--color-light-green);
    width: 1rem;
    margin-top: -0.125rem;
}
.calendarHead .date {
    font-weight: 600;
}
.calendarHead .date .year {
    font-size: 1.25rem;
}
.calendarHead .date .month {
    font-size: 1.875rem;
}
.calendarHead .date .month .num {
    font-size: 2.5rem;
}
.calendarWrap {
    overflow-x: auto;
}
.calenderTable {
    width: 1280px;
    table-layout: fixed;
    border: 1px solid #999999;
    border-width: 0 1px 0 1px;
    /* --cols: 7;
    --line-color: #999999;
    background-image:
    linear-gradient(
      to right,
      transparent calc(100% - 1px),
      var(--line-color) calc(100% - 1px)
    );

    background-size: calc(100% / var(--cols)) 100%;
    background-repeat: repeat; */
    --cols: 7;
    /* background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' viewBox='0 0 1 1'>\<rect x='0' y='0' width='1' height='1' fill='%23999'/>\</svg>");

  background-size: 1px 100%;
  background-repeat: repeat-x;
  background-position: calc(100% / var(--cols)) 0; */
    overflow: hidden;
}

.calenderTable thead,
.calenderTable tbody {
    border-bottom: 1px solid #999999;
}
.calenderTable tbody {
    height: 180px;
}
.calenderTable thead {
    border-top: 1px solid #999999;
}
.calenderTable thead th {
    font-weight: 500;
    font-size: 1.125rem;
    padding: 5px 0;
    vertical-align: middle;
    position: relative;
    height: 40px;
    line-height: 0;
}
.calenderTable thead th:not(:last-child):after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 10000px;
    width: 1px;
    background: #999999;
}
.calenderTable thead th.sun {
    background: #FFF3F3;
    color: #D54444;
}
.calenderTable thead th.sat {
    background: #EDF7FA;
    color: #3B6CB5;
}

.calenderTable tr.dayInfo {
    height: 40px;
}
.calenderTable tr.dayInfo td {
    padding: 5px 10px 0;
    color: #333;
}

.calenderTable tr.dayInfo td p {
    display: flex;
    gap: 0.25rem;
}
.calenderTable tr.dayInfo td .day {
    font-size: 1.625rem;
    font-weight: 600;
    width: 2rem;
}
.calenderTable tr.dayInfo td.sat {
    color: #3B6CB5
}
.calenderTable tr.dayInfo td.holi ,
.calenderTable tr.dayInfo td.sun {
    color: #CA3434;
}
.calenderTable tr.dayInfo td.past {
    opacity: 0.5;
    opacity: 0.2;
    flex: 1;
}
.calenderTable tr.dayInfo td .holiName {
    font-size: 1rem;
    align-self: center;
    font-weight: 600;
}

.calenderTable tr.eventInfo td {
    padding: 0 5px 5px;
    color: #333;
}
.calenderTable tr.eventInfo td .labelWrap {
    width: 100%;
    position: relative;
}
.calenderTable tr.eventInfo td .labelWrap .label {
    display: flex;
    background-color: var(--eventLabelColor);
    color: #000;
    font-weight: 500;
    padding: 0.625rem;
    border-radius: 5px;
    text-decoration-thickness: 1px;
}

.calenderTable tr.eventInfo td .labelWrap .label:hover {
    color: var(--eventLabelActiveColor);
}
.calenderTable tr.eventInfo td .labelWrap .label .genre {
    font-size: 0.875em;
    opacity: 0.9;
}

@media screen and (max-width: 768px) {
    .calenderTable {
        width: 900px;
    }
    .calenderTable tbody {
        height: 130px;
    }
}

/* 検索結果 */
.searchHitText {
    display: flex;
    font-size: 1.125rem;
    font-weight: 600;
    gap: 0.25rem;
    align-items: baseline;
    margin-bottom: 0.75rem;
}
.searchHitText p {
    margin-bottom: 0;
}
.searchHitText .num {
    color: var(--color-green);
}
.searchHitText .num span {
    font-size: 1.5rem;
}
.searchResultArea {
    margin-top: 1.875rem;
}
.searchResultItem .newsPanelList .newsListInner {
    border: 1px solid #ccc;
}
.searchResultItem .newsListInner .icon {
    right: 0.5rem;
}
.searchResultItem .newsList>li:not(:first-child) {
    border: none;
    padding-top: 0
}
/* 検索キーワードマーカー：インラインのまま、折り返しでも色がつく */
.searchResultItem .newsPanelList .newsListInner .searchHitWord {
    display: inline;
    padding: 0 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.searchResultItem .newsPanelList .newsListInner .searchHitWord.word1 { background-color: #FBFF7B; }
.searchResultItem .newsPanelList .newsListInner .searchHitWord.word2 { background-color: #C8FF9E; }
.searchResultItem .newsPanelList .newsListInner .searchHitWord.word3 { background-color: #A8FFFF; }
.searchResultItem .newsPanelList .newsListInner .searchHitWord.word4 { background-color: #EED0FF; }
.searchResultItem .newsPanelList .newsListInner .searchHitWord.word5 { background-color: #FFC3C4; }
.searchResultItem .newsPanelList .newsListInner .searchHitWord.word6 { background-color: #FFDDA6; }
.noSearchResult {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F0F0;
    border-radius: 5px;
    min-height: 17.5rem;
}
.noSearchResult p {
    margin: 0;
    color: #666;
}

/* ホエールウォッチングカメラ */
#wwcSection {
    /* margin-top: 1.875rem; */
    background: #96E6E6;
    padding: 4.5rem 7% 8rem 13%;
}
.whaleCont {
    display: flex;
    /* gap: 1.875rem; */
    background: #F0F0F0;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 3.125rem;
    width: calc(100% - var(--body-space) * 2);
    max-width: 1280px;
    margin: -1rem auto 2.5rem;
}
.whaleCont .img {
    width: 100%;
    width: 10rem;
}
.whaleCont .text {
    font-size: 1.25rem;
    line-height: 1.5;
    flex: 1;
    padding: 0 1.875rem;
}
#wwcSection .wwcMap {
    container-type: inline-size;
    position: relative;
    max-width: 1080px;
    margin: auto;
}
#wwcSection .wwcList ul li {
    position: absolute;
}
/* ナズマド*/
#wwcSection .wwcList ul li#wwc1 {
    left: 14.3%;
    top: 6.2%;
}
/* 八重根港*/
#wwcSection .wwcList ul li#wwc2 {
    left: 30.6%;
    top: 48.7%;
}
/* 乙千代ヶ浜*/
#wwcSection .wwcList ul li#wwc3 {
    left: 37.1%;
    top: 73.4%;
}
/* 底土海水浴場*/
#wwcSection .wwcList ul li#wwc4 {
    left: 55.7%;
    top: 28.5%;
}
/* 洞輪沢*/
#wwcSection .wwcList ul li#wwc5 {
    left: 67%;
    top: 68.1%;
}
/* 藍ヶ江*/
#wwcSection .wwcList ul li#wwc6 {
    left: 55.1%;
    top: 85.6%;
}

#wwcSection .wwcList ul li a {
    display: block;
    position: relative;
    width: auto;
}
#wwcSection .wwcList ul li a.stopped {
    pointer-events: none;
}
#wwcSection .wwcList ul li a .pin {
    /* position: relative; */
    transition: var(--speed-normal)
}
#wwcSection .wwcList ul li a.stopped .pin {
    filter: grayscale(1) opacity(0.8)
}
#wwcSection .wwcList ul li a:hover .pin {
    filter:saturate(150%) brightness(1.05);
    transform: translateY(-3px);
}
#wwcSection .wwcList .textImgWrap {
    position: absolute;
    width: 27.7785cqw;
    background: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0px 0px 15px rgba(0,0,0,0.25));
    transform: translateY(-50%);
    overflow: hidden;
}
#wwcSection .wwcList .stopped .textImgWrap {
    background: #eee;
}
#wwcSection .wwcList .textImgWrap[class*="posiL"] {
    right: 100%;
    margin-right: 0.5em;
}
#wwcSection .wwcList .textImgWrap[class*="posiR"] {
    left: 100%;
    margin-left: 0.5em;
}
#wwcSection .wwcList ul li#wwc1 .textImgWrap { top: 50%; }
#wwcSection .wwcList ul li#wwc2 .textImgWrap { top: 50%; }
#wwcSection .wwcList ul li#wwc3 .textImgWrap {top: 100%;transform: translateY(-30%);}
#wwcSection .wwcList ul li#wwc4 .textImgWrap {bottom: 0%;transform: translateY(11%);}
#wwcSection .wwcList ul li#wwc5 .textImgWrap {bottom: 0%;transform: translateY(-5%);}
#wwcSection .wwcList ul li#wwc6 .textImgWrap {top: 100%;transform: translateY(-50%);}
#wwcSection .wwcList ul li a .pin img {
    display: block;
    max-width: none;
    height: 100%;
    width: auto;
    height: 6.8525cqw;
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.15));
}
#wwcSection .stopped .textImgWrap .imgArea {
    position: relative;
}
#wwcSection .stopped .textImgWrap .imgArea .stopText {
    position: absolute;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    font-size: 1.5em;
    background: #000;
    padding-top: 0.2em;
}
#wwcSection .textImgWrap .textArea {
    display: flex;
    align-items: center;
    font-size: calc(1.485cqw * var(--base-font-setting));
    padding: 0.5em;
    gap: 0.5em;
}
#wwcSection .textImgWrap .textArea .icon {
    width: 1.3725em;
    margin-left: auto;
}
#wwcSection .textImgWrap .textArea .label {
    display: flex;
    background: #BEDFFE;
    color: #063A82;
    font-size: 112.5%;
    font-weight: 500;
    min-width: 5em;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    line-height: 1.4;
    min-height: 1.6875em;
}
#wwcSection .textImgWrap .textArea .text {
    font-size: 137.5%;
    font-weight: 500;
    color: #000
}
/* PC：モーダルアイコン / SP：外部リンクアイコン（1000px で切替） */
#wwcSection .textImgWrap .textArea .wwc-icon-sp {
    display: none;
}

@media screen and (max-width: 1000px) {
    .whaleCont {
        margin: 0;
        width: 100%;
        border-radius: 0;
        padding: 0.9325rem;
    }
    .whaleCont .img {
        border-radius: 5px;
        overflow: hidden;
    }
    #wwcSection {
        padding: 2rem var(--body-space, 1rem) 3rem;
    }
    #wwcSection .wwcMap {
        max-width: none;
    }
    #wwcSection .wwcMap .mapImg {
        display: none;
    }
    #wwcSection .wwcList ul {
        position: relative;
        /* display: flex; */
        /* flex-direction: column; */
        gap: 0.75rem;
        margin: 0;
        padding: 0;
        /* flex-wrap: wrap; */
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #wwcSection .wwcList ul li {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100%;
    }
    #wwcSection .wwcList ul li a {
        display: flex;
        align-items: stretch;
        width: 100%;
        text-decoration: none;
        color: inherit;
        position: relative;
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid;
    }
    /* マップ用ピンは非表示（リストのみ） */
    #wwcSection .wwcList ul li a .pin {
        display: none;
    }
    #wwcSection .wwcList .textImgWrap {
        position: static !important;
        width: 100%;
        margin: 0 !important;
        transform: none;
        /* border: 1px solid; */
        filter: none;
        border-radius: 0;
    }
    #wwcSection .wwcList a:hover .textImgWrap {
        background: var(--bgColor-light-green);
        border-color: var(--color-green);
    }
    #wwcSection .wwcList ul li#wwc1 .textImgWrap,
    #wwcSection .wwcList ul li#wwc2 .textImgWrap,
    #wwcSection .wwcList ul li#wwc3 .textImgWrap,
    #wwcSection .wwcList ul li#wwc4 .textImgWrap,
    #wwcSection .wwcList ul li#wwc5 .textImgWrap,
    #wwcSection .wwcList ul li#wwc6 .textImgWrap {
        top: auto;
        bottom: auto;
        transform: none;
    }
    #wwcSection .wwcList .stopped .textImgWrap {
        background: #eee;
        opacity: 1;
    }
    /* サムネイルは SP リストでは非表示 */
    #wwcSection .wwcList .textImgWrap .imgArea {
        position: static;
    }
    #wwcSection .wwcList .textImgWrap .imgArea img {
        display: none;
    }
    #wwcSection .stopped .textImgWrap .imgArea .stopText {
        background: rgba(0,0,0,0.5);
        font-size: 1.2em;
    }
    #wwcSection .textImgWrap .textArea {
        flex: 1;
        font-size: calc(1.125rem * var(--base-font-setting));
        padding: 0.875rem 1rem;
        gap: 0.625rem;
        min-height: 3.25rem;
    }
    #wwcSection .textImgWrap .textArea .label {
        flex-shrink: 0;
        min-width: 4.5em;
    }
    #wwcSection .textImgWrap .textArea .text {
        flex: 1;
        text-align: left;
    }
    #wwcSection .textImgWrap .textArea .icon {
        flex-shrink: 0;
        width: 1.25em;
        margin-left: auto;
    }
    #wwcSection .textImgWrap .textArea .wwc-icon-pc {
        display: none !important;
    }
    #wwcSection .textImgWrap .textArea .wwc-icon-sp {
        display: block !important;
    }
    /* 停止中は外部リンクアイコンも非表示 */
    #wwcSection .wwcList ul li a.stopped .wwc-icon-sp {
        display: none !important;
    }
}
@media screen and (max-width: 768px) {
    #wwcSection .wwcList ul {
        grid-template-columns: 1fr
    }
}
#wwcInfoSection {
    padding: 1.5rem var(--body-space) 2.5rem;
    font-size: 1.125rem;
}
.liveGalleryLinkArea .btn {
    max-width: 500px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.75rem;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 1.5rem;
    padding: 0 2.5rem;
    color: #000;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}
.liveGalleryLinkArea .btn .text {
    line-height: 1;
}
.liveGalleryLinkArea .btn:hover {
    background: var(--bgColor-light-green);
    border-color: var(--color-green);
}
.liveGalleryLinkArea .btn:after {
    content: none!important;
}
.liveGalleryLinkArea .btn .icon {
    position: absolute;
    width: 1em;
    right: 1rem;
    display: block;
}

/* youtubeの埋め込み調整用 .wp-embed-aspect-16-9 */
.wp-embed-aspect-16-9  iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    vertical-align: bottom;
    width: 100%;
}
.column1 .wp-embed-aspect-16-9 iframe {
    max-width: 900px;
}
/* class */
@media screen and (max-width: 768px) { .pc { display: none !important; } }
@media screen and (min-width: 769px) { .sp { display: none !important; } }
@media screen and (max-width: 1080px) { .o1080 { display: none !important; } }
@media screen and (min-width: 1081px) { .u1080 { display: none !important; } }
@media screen and (max-width: 768px) { .o768 { display: none !important; } }
@media screen and (min-width: 769px) { .u768 { display: none !important; } }
@media screen and (max-width: 640px) { .o640 { display: none !important; } }
@media screen and (min-width: 641px) { .u640 { display: none !important; } }
@media screen and (max-width: 480px) { .o480 { display: none !important; } }
@media screen and (min-width: 481px) { .u480 { display: none !important; } }
.fc-red { color: var(--main-color); }
.dilb { display: inline-block; }
.fll { float: left; }
.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }
.note { font-size: .85rem; color: #555; font-weight: normal; }
.note.red { color: var(--main-color); }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w100 { width: 100px; }
.w200 { width: 200px; }
.w100p { width: 100%; }
.mxw-60 { max-width: 60px !important; }
.mxw-100 { max-width: 100px !important; }
.mxw-150 { max-width: 150px !important; }
.mxw-200 { max-width: 200px !important; }
.mxw-250 { max-width: 250px !important; }
.mxw-300 { max-width: 300px !important; }
.mxw-380 { max-width: 380px !important; }
.mxw-400 { max-width: 400px !important; }
.mxw-600 { max-width: 600px !important; }
/* margin-top */
.mt0 { margin-top: 0 !important; }
.mt1 { margin-top: 1px; }
.mt2 { margin-top: 2px; }
.mt3 { margin-top: 3px; }
.mt4 { margin-top: 4px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt1rem { margin-top: 1rem; }
.mt2rem { margin-top: 2rem; }
.mt3rem { margin-top: 3rem; }
.mt4rem { margin-top: 4rem; }
/* margin-right */
.mr1 { margin-right: 1px; }
.mr2 { margin-right: 2px; }
.mr3 { margin-right: 3px; }
.mr4 { margin-right: 4px; }
.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
/* margin-bottom */
.mb0 { margin-bottom: 0 !important; }
.mb1 { margin-bottom: 1px; }
.mb2 { margin-bottom: 2px; }
.mb3 { margin-bottom: 3px; }
.mb4 { margin-bottom: 4px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb1rem { margin-bottom: 1rem; }
.mb2rem { margin-bottom: 2rem; }
.mb3rem { margin-bottom: 3rem; }
.mb4rem { margin-bottom: 4rem; }
/* margin-left */
.ml1 { margin-left: 1px; }
.ml2 { margin-left: 2px; }
.ml3 { margin-left: 3px; }
.ml4 { margin-left: 4px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
/* padding-top */
.pt1 { padding-top: 1px; }
.pt2 { padding-top: 2px; }
.pt3 { padding-top: 3px; }
.pt4 { padding-top: 4px; }
.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt40 { padding-top: 40px; }
/* padding-right */
.pr1 { padding-right: 1px; }
.pr2 { padding-right: 2px; }
.pr3 { padding-right: 3px; }
.pr4 { padding-right: 4px; }
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
/* padding-bottom */
.pb1 { padding-bottom: 1px; }
.pb2 { padding-bottom: 2px; }
.pb3 { padding-bottom: 3px; }
.pb4 { padding-bottom: 4px; }
.pb5 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
/* padding-left */
.pl1 { padding-left: 1px; }
.pl2 { padding-left: 2px; }
.pl3 { padding-left: 3px; }
.pl4 { padding-left: 4px; }
.pl5 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
/* padding */
.pg1 { padding: 1px; }
.pg2 { padding: 2px; }
.pg3 { padding: 3px; }
.pg4 { padding: 4px; }
.pg5 { padding: 5px; }
.pg10 { padding: 10px; }
.pg15 { padding: 15px; }
.pg20 { padding: 20px; }
.pg30 { padding: 30px; }
.pg40 { padding: 40px; }

/* ============================================================
   404 Not Found
   ============================================================ */
.notFoundContent {
    text-align: center;
    padding: 3rem 1rem;
}
.notFoundCode {
    font-size: 5rem;
    font-weight: 700;
    color: var(--color-green);
    line-height: 1;
    margin: 0 0 1rem;
}
.notFoundMessage {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}
.notFoundDescription {
    color: #666;
    margin: 0 0 2.5rem;
}
.notFoundActions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.notFoundBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.notFoundBtn:hover {
    opacity: 0.8;
}
.notFoundBtn .icon {
    display: flex;
    align-items: center;
}
.notFoundBtn .icon .svg {
    width: 1rem;
    height: 1rem;
}
.notFoundBtn--top {
    background: var(--color-green);
    color: #fff;
}
.notFoundBtn--top .icon {
    color: #fff;
}
.notFoundBtn--back {
    background: #f0f0f0;
    color: #333;
}
.notFoundBtn--back .icon {
    color: #333;
}

/* ============================================================
   ブロックエディター調整
   ============================================================ */
sup {
    font-size: 0.75em;
    vertical-align: super;
}

.wp-block-image .aligncenter figcaption {
    text-align: center;
}
.boxStyle .wp-block-media-text {
    gap: 0.5rem 1rem;
}
.boxStyle .wp-block-media-text>.wp-block-media-text__content {
    padding: 0;
}



/* ============================================================
   印刷用CSS
   ============================================================ */
@media print {

    /* -------
       共通
       ------- */
    html {
        font-size: 12px;
    }
    body {
        width: 210mm;
        margin: auto;
    }
    .header,
    #footer ,
    #sideMenu {
        display: none;
    }
    .sp {
        display: none !important;
    }
    .fixedHeader,
    #spHeadBtns,
    .supportModalWrap,
    #headerSubMenuWrap {
        display: none !important;
    }
    .headerMenu {
        padding: 0 0.525rem 0 0
    }
    .headerMenu li a {
        font-size: 1.125rem;
    }
    #searchBtnWrap,
    .searchBtnWrap {
        width: 6.275rem;
    }

    /* -------
       TOP
       ------- */
    #topVisual .slideWrap .slideCtrlWrap {
        width: 60%;
        padding-left: 1rem;
    }

    /* TOPスライダー */
    .slideInner .slideImg {
        width: 40%;
        align-self: flex-start;
    }
    .slideInner .slideImg img {
        object-fit: contain;
    }
    .slideInner .slideTtl {
        font-size: 2rem;
    }
    .topColumn1 {
        --padding-set: 2rem 2rem;
    }
    .aboutInner {
        padding: 3.5rem var(--body-space);
    }
    .slick-track {
        width: 100%!important;
    }
    .slick-initialized .slick-slide {
        display: none!important;
    }
    .slick-initialized .slick-slide.slick-active {
        max-width: 755px!important;
        left: 0!important;
        display: block!important;
    }


    /* 町政情報 */
    #topGovernment {
        padding: 3.5rem var(--body-space);
    }
    .governmentListArea ul {
        flex-wrap: wrap;
    }
    .governmentListArea .imgList li {
        width: 50%;
    }
    .governmentListArea .imgList li:not(:first-child) a {
        border-left: none;
    }
    .governmentListArea .imgList li:nth-child(even) a {
        border-left: 1px solid #ccc;
    }
    .governmentListArea .imgList li:nth-child(n+3) a {
        border-top: 1px solid #ccc;
    }

    /* 関連サイト・SNS */
    .topColumn2 {
        gap: 1.5rem;
        --padding-set: 1.5rem;
    }
    #topSite .siteLinks li {
        width: calc((100% - var(--gap)) / 2);
    }
    /* SNSリンクの背景を印刷に反映（ブラウザの「背景のグラフィック」相当） */
    .snsLinks a {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* -------
       下層ページ
       ------- */
    /* 下層共通 */
    #breadcrumbs ul {
        padding-left: 0;
    }
    .subSectionsInner {
        display: block;
    }
    .moreBtnWrap:has(.js-more-idx-link) {
        display: none;
    }
    .indexList li {
        display: block!important;
    }

    .contentsArea table th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* -------
       アクセス
       ------- */
    /* アクセスマップ */
    #spRouteBtnWrap,
    .closeBtnWrap {
        display: none;
    }

    /* -------
       温泉混雑
       ------- */
    /* 温泉混雑 */
    #onsenMapImg .onsenItem .balloonItem .text .icon {
        display: none;
    }
    #onsenSection ,
    .onsenModal .ttlWrap:after ,
    .onsenModal .konzatsu .item {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .onsenModal {
        display: block!important;
        /* margin-top: 1.5rem; */
        break-inside: avoid;
        padding: 1rem 1rem 0;
    }
    .onsenCol .img {
        width: 200px;
        min-width: 200px;
    }

}

/* --------------------------------------------------
   ホエールウォッチング（ライブカメラ）
   -------------------------------------------------- */
/* ホエールウォッチングカメラ（モーダル）— onsenModal と見た目を揃える */
.wwcModal {
    background: #fff;
    padding: 1.75rem 1.5rem 1.25rem;
    border-radius: 5px;
    max-width: 1200px;
    position: relative;
    width: 100%;
}
.wwcModal .contentsArea {
    font-size: 1rem;
}
.wwcModal .ttlWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid #D2D2D2;
    margin-bottom: 1.5rem;
    position: relative;
    padding: 0 0 0.75rem;
    gap: 1.25rem 0.5rem;
}
.wwcModal .ttlWrap:after {
    content: "";
    display: block;
    position: absolute;
    height: 4px;
    width: 18.75rem;
    background: var(--color-light-green);
    bottom: -4px;
    left: 0;
}
.wwcModal .ttlWrap h2 {
    font-size: 2.125rem;
    font-weight: 600;
    line-height: 1;
}
.wwcModal .movieWrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.wwcModal .movieWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ホエールウォッチングカメラ */
#wwcSection {
    /* margin-top: 1.875rem; */
    background: #96E6E6;
    padding: 4.5rem 7% 8rem 13%;
}
.whaleCont {
    display: flex;
    /* gap: 1.875rem; */
    background: #F0F0F0;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 3.125rem;
    width: calc(100% - var(--body-space) * 2);
    max-width: 1280px;
    margin: -1rem auto 2.5rem;
}
.whaleCont .img {
    width: 100%;
    /* max-width: 100%; */
    width: 10rem;
}
.whaleCont .text {
    font-size: 1.25rem;
    line-height: 1.5;
    flex: 1;
    padding: 0 1.875rem;
}
#wwcSection .wwcMap {
    /* margin-bottom: 1.875rem; */
    /* background: #96E6E6; */
    /* padding: 4.5rem 2.5rem 4.375rem; */
    container-type: inline-size;
    position: relative;
    max-width: 1080px;
    margin: auto;
}
#wwcSection .wwcMap .mapImg {
    /* max-width: 1080px; */
    /* margin: auto; */
}
#wwcSection .wwcList {
    /* margin-top: 1.875rem; */
}
#wwcSection .wwcList ul {
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* gap: 1.875rem; */
    /* opacity: 0.5; */
}
#wwcSection .wwcList ul li {
    /* width: calc(50% - 0.9375rem); */
    position: absolute;
}
/* ナズマド*/
#wwcSection .wwcList ul li#wwc1 {
    left: 14.3%;
    top: 6.2%;
}
/* 八重根港*/
#wwcSection .wwcList ul li#wwc2 {
    left: 30.6%;
    top: 48.7%;
}
/* 乙千代ヶ浜*/
#wwcSection .wwcList ul li#wwc3 {
    left: 37.1%;
    top: 73.4%;
}
/* 底土海水浴場*/
#wwcSection .wwcList ul li#wwc4 {
    left: 55.7%;
    top: 28.5%;
}
/* 洞輪沢*/
#wwcSection .wwcList ul li#wwc5 {
    left: 67%;
    top: 68.1%;
}
/* 藍ヶ江*/
#wwcSection .wwcList ul li#wwc6 {
    left: 55.1%;
    top: 85.6%;
}

#wwcSection .wwcList ul li a {
    display: block;
    /* border: 1px solid #ddd; */
    /* border-radius: 5px; */
    /* padding: 0.9375rem; */
    position: relative;
    /* height: 4.625rem; */
    /* height: 5.5cqw; */
    width: auto;
}
#wwcSection .wwcList ul li a.stopped {
    pointer-events: none;
}
#wwcSection .wwcList ul li a .pin {
    /* position: relative; */
    transition: var(--speed-normal)
}
#wwcSection .wwcList ul li a.stopped .pin {
    filter: grayscale(1) opacity(0.8)
}
#wwcSection .wwcList ul li a:hover .pin {
    filter:saturate(150%) brightness(1.05);
    transform: translateY(-3px);
}
#wwcSection .wwcList .textImgWrap {
    position: absolute;
    width: 27.7785cqw;
    background: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0px 0px 15px rgba(0,0,0,0.25));
    transform: translateY(-50%);
    overflow: hidden;
}
#wwcSection .wwcList .stopped .textImgWrap {
    background: #eee;
}
#wwcSection .wwcList .textImgWrap[class*="posiL"] {
    right: 100%;
    margin-right: 0.5em;
}
#wwcSection .wwcList .textImgWrap[class*="posiR"] {
    left: 100%;
    margin-left: 0.5em;
}
#wwcSection .wwcList ul li#wwc1 .textImgWrap { top: 50%; }
#wwcSection .wwcList ul li#wwc2 .textImgWrap { top: 50%; }
#wwcSection .wwcList ul li#wwc3 .textImgWrap {top: 100%;transform: translateY(-30%);}
#wwcSection .wwcList ul li#wwc4 .textImgWrap {bottom: 0%;transform: translateY(11%);}
#wwcSection .wwcList ul li#wwc5 .textImgWrap {bottom: 0%;transform: translateY(-5%);}
#wwcSection .wwcList ul li#wwc6 .textImgWrap {top: 100%;transform: translateY(-50%);}
#wwcSection .wwcList ul li a .pin img {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* height: 4.625rem; */
    display: block;
    max-width: none;
    height: 100%;
    width: auto;
    height: 6.8525cqw;
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.15));
}
#wwcSection .stopped .textImgWrap .imgArea {
    position: relative;
}
#wwcSection .stopped .textImgWrap .imgArea:before {
    /* content: ""; */
    /* display: block; */
    /* position: absolute; */
    /* width: 100%; */
    /* height: 100%; */
    /* background: rgba(0,0,0,0.5); */
    /* top: 0; */
    /* left: 0; */
}
#wwcSection .stopped .textImgWrap .imgArea .stopText {
    position: absolute;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    font-size: 1.5em;
    background: #000;
    padding-top: 0.2em;
}
#wwcSection .textImgWrap .textArea {
    display: flex;
    align-items: center;
    font-size: calc(1.485cqw * var(--base-font-setting));
    padding: 0.5em;
    gap: 0.5em;
}
#wwcSection .textImgWrap .textArea .icon {
    width: 1.3725em;
    margin-left: auto;
}
#wwcSection .textImgWrap .textArea .label {
    display: flex;
    background: #BEDFFE;
    color: #063A82;
    font-size: 112.5%;
    font-weight: 500;
    min-width: 5em;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    line-height: 1.4;
    min-height: 1.6875em;
}
#wwcSection .textImgWrap .textArea .text {
    font-size: 137.5%;
    font-weight: 500;
    color: #000
}
/* PC：モーダルアイコン / SP：外部リンクアイコン（1000px で切替） */
#wwcSection .textImgWrap .textArea .wwc-icon-sp {
    display: none;
}

@media screen and (max-width: 1000px) {
    .whaleCont {
        margin: 0;
        width: 100%;
        border-radius: 0;
        padding: 0.9325rem;
    }
    .whaleCont .img {
        border-radius: 5px;
        overflow: hidden;
    }
    #wwcSection {
        padding: 2rem var(--body-space, 1rem) 3rem;
    }
    #wwcSection .wwcMap {
        max-width: none;
    }
    #wwcSection .wwcMap .mapImg {
        display: none;
    }
    #wwcSection .wwcList ul {
        position: relative;
        /* display: flex; */
        /* flex-direction: column; */
        gap: 0.75rem;
        margin: 0;
        padding: 0;
        /* flex-wrap: wrap; */
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #wwcSection .wwcList ul li {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100%;
    }
    #wwcSection .wwcList ul li a {
        display: flex;
        align-items: stretch;
        width: 100%;
        text-decoration: none;
        color: inherit;
        position: relative;
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid;
    }
    /* マップ用ピンは非表示（リストのみ） */
    #wwcSection .wwcList ul li a .pin {
        display: none;
    }
    #wwcSection .wwcList .textImgWrap {
        position: static !important;
        width: 100%;
        margin: 0 !important;
        transform: none;
        /* border: 1px solid; */
        filter: none;
        border-radius: 0;
    }
    #wwcSection .wwcList a:hover .textImgWrap {
        background: var(--bgColor-light-green);
        border-color: var(--color-green);
    }
    #wwcSection .wwcList ul li#wwc1 .textImgWrap,
    #wwcSection .wwcList ul li#wwc2 .textImgWrap,
    #wwcSection .wwcList ul li#wwc3 .textImgWrap,
    #wwcSection .wwcList ul li#wwc4 .textImgWrap,
    #wwcSection .wwcList ul li#wwc5 .textImgWrap,
    #wwcSection .wwcList ul li#wwc6 .textImgWrap {
        top: auto;
        bottom: auto;
        transform: none;
    }
    #wwcSection .wwcList .stopped .textImgWrap {
        background: #eee;
        opacity: 1;
    }
    /* サムネイルは SP リストでは非表示 */
    #wwcSection .wwcList .textImgWrap .imgArea {
        position: static;
    }
    #wwcSection .wwcList .textImgWrap .imgArea img {
        display: none;
    }
    #wwcSection .stopped .textImgWrap .imgArea .stopText {
        background: rgba(0,0,0,0.5);
        font-size: 1.2em;
    }
    #wwcSection .textImgWrap .textArea {
        flex: 1;
        font-size: calc(1.125rem * var(--base-font-setting));
        padding: 0.875rem 1rem;
        gap: 0.625rem;
        min-height: 3.25rem;
    }
    #wwcSection .textImgWrap .textArea .label {
        flex-shrink: 0;
        min-width: 4.5em;
    }
    #wwcSection .textImgWrap .textArea .text {
        flex: 1;
        text-align: left;
    }
    #wwcSection .textImgWrap .textArea .icon {
        flex-shrink: 0;
        width: 1.25em;
        margin-left: auto;
    }
    #wwcSection .textImgWrap .textArea .wwc-icon-pc {
        display: none !important;
    }
    #wwcSection .textImgWrap .textArea .wwc-icon-sp {
        display: block !important;
    }
    /* 停止中は外部リンクアイコンも非表示 */
    #wwcSection .wwcList ul li a.stopped .wwc-icon-sp {
        display: none !important;
    }
}
@media screen and (max-width: 768px) {
    #wwcSection .wwcList ul {
        grid-template-columns: 1fr
    }
}
#wwcInfoSection {
    padding: 1.5rem var(--body-space) 2.5rem;
    font-size: 1.125rem;
}
.liveGalleryLinkArea .btn {
    max-width: 500px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.75rem;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 1.5rem;
    padding: 0 2.5rem;
    color: #000;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}
.liveGalleryLinkArea .btn .text {
    line-height: 1;
}
.liveGalleryLinkArea .btn:hover {
    background: var(--bgColor-light-green);
    border-color: var(--color-green);
}
.liveGalleryLinkArea .btn:after {
    content: none!important;
}
.liveGalleryLinkArea .btn .icon {
    position: absolute;
    width: 1em;
    right: 1rem;
    display: block;
}

@page {
  size: A4;
  margin: 20mm;
}