html {
    font-size: 100%;
}
body{
    /*font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;*/
    font-family: 'Noto Sans JP', sans-serif;
    font-optical-sizing: auto;
    font-weight: 500; 
    font-style: normal;

    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--color-blue);

    overflow-x: hidden;
    max-width: 100%;
}

a {
    text-decoration: none;
}

a,
a:visited,
a:hover,
a:active {
  color: inherit;
}

a {
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.7;
}

img {
    max-width: 100%;
}

/*
h1 {
    font-size: 1.0em;
    font-weight: normal;
}

h2 {
    font-size: 1.0em;
    font-weight: normal;
}

h3 {
    font-size: 1.0em;
    font-weight: normal;
}
*/
h1 {
    font-size: 1.0em;
    font-weight: 600;
}

h2 {
    font-size: 1.0em;
    font-weight: normal;
}

h3 {
    font-size: 1.0em;
    font-weight: normal;
}

:root {
    --pc-width: 1280px;
    --sp-width: 375px;

    --sp-ratio: 100vw / var(--sp-width); /* 使う側でcalc必要 */ 

    --color-white: #FFFFFF;
    --color-lightgray: #E3E3E3;
    --color-darkgray: #2D2D2D;
    --color-gold: #C3B880;
    --color-red: #B04A00;

    --color-calendar-bg-1: #F5F3E6;
    --color-calendar-bg-2: #DBD9CD;
}

.font-underline {
    text-decoration: underline;
}

.font-regular {
    font-weight: 300 !important;
}
  
.font-medium {
    font-weight: 400 !important;
}

.font-semibold {
    font-weight: 500 !important;
}

.font-bold {
    font-weight: 600 !important;
}

.font-regular-medium {
    font-weight: 200 !important;
}

@media screen and (max-width: 768px) {
    .font-regular-medium {
        font-weight: 300 !important;
    }
}

.font-11-11 {
    font-size: 11px;
}

@media screen and (max-width: 768px) {
    .font-11-11 {
        font-size: calc(11px * var(--sp-ratio));
    }
}

.font-15-15 {
    font-size: 15px;
}

@media screen and (max-width: 768px) {
    .font-15-15 {
        font-size: calc(15px * var(--sp-ratio));
    }
}

.font-18-15 {
    font-size: 18px;
}

@media screen and (max-width: 768px) {
    .font-18-15 {
        font-size: calc(15px * var(--sp-ratio));
    }
}

.font-18-18 {
    font-size: 18px;
}

@media screen and (max-width: 768px) {
    .font-18-18 {
        font-size: calc(18px * var(--sp-ratio));
    }
}

.font-20-20 {
    font-size: 20px;
}

@media screen and (max-width: 768px) {
    .font-20-20 {
        font-size: calc(20px * var(--sp-ratio));
    }
}

.font-22-18 {
    font-size: 22px;
}

@media screen and (max-width: 768px) {
    .font-22-18 {
        font-size: calc(18px * var(--sp-ratio));
    }
}

.font-white {
    color: var(--color-white);
}

.font-red {
    color: var(--color-red);
}

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

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

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

.line-200-160 {
    line-height: 2.0;
}

@media screen and (max-width: 768px) {
    .line-200-160 {
        line-height: 1.6;
    }
}

.bg-white {
    background-color: var(--color-white);
}

.bg-lightgray {
    background-color: var(--color-lightgray);
}

.bg-darkgray {
    background-color: var(--color-darkgray);
}

.bg-gold {
    background-color: var(--color-gold);
}

.bg-red {
    background-color: var(--color-red);
}

.margin-top-10-0 {
    margin-top: 10px;
}
@media screen and (max-width: 768px) {
    .margin-top-10-0 {
        margin-top: calc(0px * var(--sp-ratio));
    }
}

/* 改行 */

.pc-br {
    display: inline;
}

@media screen and (max-width: 768px) {
    .pc-br {
        display: none;
    }
}

.sp-br {
    display: none;
}

@media screen and (max-width: 768px) {
    .sp-br {
        display: inline;
    }
}

/* ボタン */

.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 

    gap: 10px;

    /*border: 1px solid currentColor;*/
}

.btn-auto {
    width: auto;
    height: auto;

    padding: 0px 11px;

    border-radius: 5px;
}

@media screen and (max-width: 768px) {
    .btn-auto {
        width: auto;
        height: auto;
    
        padding: calc(3px * var(--sp-ratio)) calc(20px * var(--sp-ratio));
    
        border-radius: calc(30px * var(--sp-ratio));
    }
}

.border-1-1 {
    border: 1px solid currentColor;
}


@media screen and (max-width: 768px) {
    .border-1-1 {
        border-width: calc(1px * var(--sp-ratio));
    }
}

.top-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
    height: 100vh;
}

.top-header-keyvisual {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.top-header-keyvisual-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-header-keyvisual-logo {
    position: absolute;

    width: 390px;
    height: 390px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 10;
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 103px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .gradient-overlay {
        height: calc(80px * var(--sp-ratio));
    }
}

.header-nav-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;

    height: 81px; /* liの73px + 下線用余白8px */
}

@media screen and (max-width: 768px) {
    .header-nav-container {
        display: none;
    }
}

.header-nav-container-sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .header-nav-container-sp {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
    
        height: calc(80px * var(--sp-ratio));
    }
}

.header-nav-list {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    color: #B04A00; /* アンダーラインの色（::afterはcurrentColor） */
    padding-bottom: 8px; /* 下線のスペース確保 */
}

.header-nav-list li {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 240px;
    height: 73px;
}

/* ナビ下線スライダー（疑似要素） */
.header-nav-list::after {
    content: "";
    position: absolute;
    left: var(--underline-left, 0px);
    bottom: 0;
    width: var(--underline-width, 0px);
    height: 4px;
    background-color: currentColor;
    transition: left 0.25s ease, width 0.25s ease;
    will-change: left, width;
}

/* 初期配置計算時だけトランジションを無効化して瞬時に表示する */
.header-nav-list.is-initializing-underline::after {
    transition: none !important;
}

.header-nav-list li a {
    display: block;
    width: 100%;
    padding-top: 20px; /* ここでの調整、修正したほうがいいかも */
}


.header-nav-btn-container-sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .header-nav-btn-container-sp {
        position: fixed;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;

        left: calc(100vw * 305 / 750);
        bottom: calc(100vw * (50 - 32.3 - 15.4) / 750);

        z-index: 100;
    }
}

@media screen and (max-width: 768px) {
    .header-nav-btn-sp {
        width: calc(74px * var(--sp-ratio));
        height: calc(74px * var(--sp-ratio));

        margin-bottom: calc(50px * var(--sp-ratio));
    }
}

.nav-overlay {
    position: fixed;

    top: 0px;
    left: 0px;

    visibility: hidden;
    /*
    background-color: rgba(0, 0, 0, 0.65);
    */
    transition: visibility 0.5s;

    width: 100%;
    height: 100vh; /* 画面高に合わせる */
    overflow-y: auto; /* メニューが画面より高い場合にスクロール可能に */
    overscroll-behavior: contain; /* 画面外へのスクロールチェーンを防止 */
    -ms-scroll-chaining: none; /* 旧Edge対策（念のため） */
    -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */

    z-index: 2000;
}

@media screen and (max-width: 768px) {
    .nav-overlay {
        position: fixed;

        top: 0px;
        left: 0px;
    
        background-color: rgba(0, 0, 0, 0.65);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s;
    
        width: 100%;
        height: 100%;

            overflow-y: auto;
            overscroll-behavior: contain; /* 画面外へのスクロールチェーンを防止 */
            -ms-scroll-chaining: none; /* 旧Edge対策（念のため） */
            -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
        pointer-events: none; /* 非表示時はクリックを透過 */
        z-index: 2000;
    }
}

.nav-overlay-open {
    visibility: visible;
}

@media screen and (max-width: 768px) {
    .nav-overlay-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto; /* 表示時のみクリック可能 */
    }
}

/* PC: オーバーレイが開いたらクローズボタンをフェードイン */
.nav-overlay.nav-overlay-open + .nav-menu-close,
.nav-overlay.nav-overlay-open .nav-menu-close,
.nav-overlay-open ~ .nav-menu-close {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.nav {
    display: none;
}

@media screen and (max-width: 768px) {
    .nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: calc(100vw * 0 / 750);

        top: 0px;
        bottom: auto; /* デスクトップ用のbottom指定を打ち消す */
        left: 0px;

        width: 100%;
        height: auto;

        padding-top: calc(100vw * 0 / 750);
        padding-bottom: calc(100vw * 0 / 750);

        background-color: #FFFFFF;
        opacity: 1.0;

        transform: none; /* SPでは従来通り */
        transition: none;
        z-index: 2000;
    }
}

.nav-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: 100%;

    padding-bottom: 103px;
}

@media screen and (max-width: 768px) {
    .nav-container {
        position: relative;

        padding-bottom: 0;
    }
}

.nav-open {
    transform: translateY(0);
    /*visibility: visible;*/
}

@media screen and (max-width: 768px) {
    .nav-open {
        opacity: 1;
        visibility: visible;
    }
}

.nav-menu-close {
    display: none;
}

@media screen and (max-width: 768px) {
    .nav-menu-close {
        display: block;

        position: fixed;

        top: auto;
        right: calc(152.5px * var(--sp-ratio));
        bottom: calc(50px * var(--sp-ratio));

        /* SP: 初期は非表示・非ヒット、オーバーレイ開時のみ表示（フェード有効化） */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.5s ease, visibility 0.5s ease;

        z-index: 3000;
    }
}

/* is-fading は廃止。オーバーレイの開閉に同期してフェード */

.nav-menu-close img {
    width: 38.67px;
    height: 55.66px;
}

@media screen and (max-width: 768px) {
    .nav-menu-close img {
        width: calc(70px * var(--sp-ratio));
        height: calc(70px * var(--sp-ratio));
    }
}

@media screen and (max-width: 768px) {
    .nav-header-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

.nav-top {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    gap: 10px;

    width: 940px;

    padding-top: 30px;
    padding-bottom: 25px;
}

@media screen and (max-width: 768px) {
    .nav-top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: calc(335px * var(--sp-ratio));

        padding-top: calc(83px * var(--sp-ratio));
        padding-bottom: calc(30px * var(--sp-ratio));
    }
}

.nav-top a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 280px;
}

@media screen and (max-width: 768px) {
    .nav-top a {
        width: calc(335px * var(--sp-ratio));
    }
}

img.nav-logo {
    width: 175px;
    height: 50px;
}

@media screen and (max-width: 768px) {
    img.nav-logo {
        width: calc(100vw * 494.53 / 750);
        height: calc(100vw * 72.67 / 750);
    }
}

.nav-container-pc {

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;

    gap: 50px;

    width: 950px;
}

@media screen and (max-width: 768px) {
    .nav-container-pc {
        display: none;
    }
}

.nav-container-sp {

    display: none;
}

@media screen and (max-width: 768px) {
    .nav-container-sp {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: calc(15px * var(--sp-ratio));

        width: calc(375px * var(--sp-ratio));

        padding-top: calc(20px * var(--sp-ratio));
        padding-bottom: calc(170px * var(--sp-ratio));
    }
}

@media screen and (max-width: 768px) {
    .nav-header {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    
        width: 100%;
        height: calc(218px * var(--sp-ratio));
    }
}

@media screen and (max-width: 768px) {
    .nav-header-keyvisual {
        position: relative;
        width: 100%;
        height: calc(218px * var(--sp-ratio));
        overflow: hidden;
    }
}

@media screen and (max-width: 768px) {
    .nav-header-keyvisual-logo {
        position: absolute;

        width: calc(130px * var(--sp-ratio));
        height: calc(130px * var(--sp-ratio));
    
        top: 50%;
        left: 50%;
    
        transform: translate(-50%, -50%);
    
        z-index: 10;
    }
}

@media screen and (max-width: 768px) {
    .page-header-keyvisual-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media screen and (max-width: 768px) {
    .nav-header-gradient-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(40px * var(--sp-ratio));
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
        pointer-events: none;
    }
}

@media screen and (max-width: 768px) {
    .nav-header-text-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: calc(90px * var(--sp-ratio));
    }
}

@media screen and (max-width: 768px) {
    .nav-header-logo-sp {
        width: calc(184px * var(--sp-ratio));
        height: calc(184px * var(--sp-ratio));
    }
}

@media screen and (max-width: 768px) {
    .nav-sitemap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: calc(150px * var(--sp-ratio));
    }
}

@media screen and (max-width: 768px) {
    .nav-sitemap-sp {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: calc(15px * var(--sp-ratio));

        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 768px) {
    .nav-sitemap-sp ul {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: calc(7px * var(--sp-ratio));
    }
}

@media screen and (max-width: 768px) {
    .nav-sitemap-sp li {
        height: calc(27px * var(--sp-ratio));
        position: relative;

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

@media screen and (max-width: 768px) {
    .nav-sitemap-sp li a {        
        width: 100%;
    }
}

.nav-spacer {
    width: 1px;
    height: 100%;
}

.nav-noborder {
    border-width: 0px !important;
}

.hamburger-nav-text {
    width: auto;
    height: calc(28px * var(--sp-ratio));
}

/*
.nav-sitemap li::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-size: cover;
}
*/
/*
.nav-arrow-orange::before {
    background-image: url('images/arrow-orange.svg');
}

.nav-arrow-green::before {
    background-image: url('images/arrow-green.svg');
}

.nav-arrow-pink::before {
    background-image: url('images/arrow-pink.svg');
}

.nav-arrow-brown::before {
    background-image: url('images/arrow-brown.svg');
}
*/

.nav-sitemap-space {
    display: block;
}

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

.nav-footer-pc {
    display: flex;
    justify-content: space-between;

    width: 990px;
}

@media screen and (max-width: 768px) {
    .nav-footer-pc {
        display: none;
    }
}

.nav-footer-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;

    width: 100%;
}
 

@media screen and (max-width: 768px) {
    .nav-footer-content {
        display: none;
    }
}

.nav-footer-links {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
 
    white-space: nowrap;
}

.nav-footer-links-btn {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 15px;
}

.nav-footer-sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .nav-footer-sp {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: calc(100vw * 40 / 750);

        width: calc(335px * var(--sp-ratio));

        margin-top: calc(100vw * 30 / 750);
        margin-bottom: calc(100vw * 60 / 750);
    }
}

@media screen and (max-width: 768px) {
    .nav-footer-links-sp ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: calc(100vw * 20 / 750);

        list-style-type: none;
        margin: 0; /*margin-right: calc(100vw * 40 / 750);*/
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    .nav-footer-links-sp li {
        position: relative;
    }
}

@media screen and (max-width: 768px) {
    .nav-footer-links-sp li::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: calc(100vw * 24 / 750);
        height: calc(100vw * 24 / 750);
        background-image: url('images/arrow_s.svg');
        background-size: cover;
    }
}


/*
@media screen and (max-width: 768px) {
    .nav-footer-links-sp li {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: calc(100vw * 20 / 750);
    }
}
*/
@media screen and (max-width: 768px) {
    .nav-footer-links-sp li a {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: calc(100vw * 20 / 750);
    }
}

@media screen and (max-width: 768px) {
    .nav-footer-icon-sp {
        width: calc(100vw * 110 / 750);
        height: calc(100vw * 110 / 750);
    }
}

@media screen and (max-width: 768px) {
    .nav-footer-title-sp {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: calc(100vw * 520 / 750);
        height: calc(100vw * 110 / 750);

        border-radius: calc(100vw * 10 / 750);
        background-color: #E8E8E8;
    }
}
/*
@media screen and (max-width: 768px) {
    .nav-footer-title-sp img {
        height: calc(100vw * 34 / 750);
    }
}
*/

.nav-footer-bottom-sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .nav-footer-bottom-sp {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: calc(30px * var(--sp-ratio));

        width: 100%;
        height: calc(562px * var(--sp-ratio));

        padding-top: calc(40px * var(--sp-ratio));
    }
}

/*
@media screen and (max-width: 768px) {
    .nav-footer-bottom-sp img {
        height: calc(100vw * 128 / 750);
    }
}
*/
.nav-footer-link-space-sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .nav-footer-link-space-sp {
        display: block;
        width: 100%;
        height: calc(100vw * 32 / 750);
    }
}

.nav-footer-ig-sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .nav-footer-ig-sp {
        display: block;
        width: calc(100vw * 54 / 750);
        height: calc(100vw * 52 / 750);
    }
}




.page-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
    height: 330px;
}

.page-header-keyvisual {
    position: relative;
    width: 100%;
    height: 330px;
    overflow: hidden;
}

.page-header-keyvisual-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-header-keyvisual-logo {
    position: absolute;

    width: 184px;
    height: 184px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 10;
}

@media screen and (max-width: 768px) {
    .page-header-keyvisual-logo {
        width: calc(130px * var(--sp-ratio));
        height: calc(130px * var(--sp-ratio));
    }
}



.header-title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
}

.header-title-container-sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .header-title-container-sp {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        width: 100%;
        height: calc(60px * var(--sp-ratio));
    }
}

.header-title {
    padding: 30px 0;
}

@media screen and (max-width: 768px) {
    .header-title {
        padding: calc(10px * var(--sp-ratio)) 0;
    }
}

.header-title h1 {
    font-size: 1.0em;
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .header-title h1 {
        display: none;
    }
}

/*
.header-title p {
    font-size: 1.0em;
    font-weight: 400;
}
*/

.header-title-text-00 {
    width: 730px;
    height: 186px;
}

@media screen and (max-width: 768px) {
    .header-title-text-00 {
        width: calc(335px * var(--sp-ratio));
        height: calc(207px * var(--sp-ratio));
    }
}

.top-header-text-00 {
    width: 730px;
    height: 186px;
}

@media screen and (max-width: 768px) {
    .top-header-text-00 {
        width: calc(241.63 * var(--sp-ratio));
        height: calc(33.9px * var(--sp-ratio));
    }
}

.main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
    height: 100%;
}

.main-content-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: 730px;

    padding: 20px 0;

    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;
}

@media screen and (max-width: 768px) {
    .main-content-container {
        width: calc(326px * var(--sp-ratio));
        padding: calc(15px * var(--sp-ratio)) 0;

        border-left: calc(1px * var(--sp-ratio)) solid currentColor;
        border-right: calc(1px * var(--sp-ratio)) solid currentColor;
    }
}

.main-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
}

.main-content-div-container {
    width: 100%;
}

.main-content-hr-1 {
    width: 100%;
    height: 1px;

    border: none;
    border-top: 1px solid currentColor;
}

.main-content-hr-2 {
    width: 100%;
    height: 5px;

    border: none;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}

.main-content-title {
    width: 100%;
    height: 100%;

    margin: 20px 0;
}

.main-content-title-text-01 {
    width: 424.73px;
    height: 100.46px;
}

@media screen and (max-width: 768px) {
    .main-content-title-text-01 {
        width: calc(176.76px * var(--sp-ratio));
        height: calc(100.41px * var(--sp-ratio));
    }
}

.main-content-title-text-11 {
    width: 392.86px;
    height: 100.58px;
}

@media screen and (max-width: 768px) {
    .main-content-title-text-11 {
        width: calc(215.32px * var(--sp-ratio));
        height: calc(100.44px * var(--sp-ratio));
    }
}

.main-content-title-text-12 {
    width: 301.74px;
    height: 100.42px;
}

@media screen and (max-width: 768px) {
    .main-content-title-text-12 {
        width: calc(163.63px * var(--sp-ratio));
        height: calc(100.38px * var(--sp-ratio));
    }
}

.main-content-abstract {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    gap: 30px;

    width: 550px;

    padding: 45px 0;
}

@media screen and (max-width: 768px) {
    .main-content-abstract {
        width: calc(275px * var(--sp-ratio));
        padding: calc(15px * var(--sp-ratio)) 0;
    }
}

.main-content-image-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    gap: 30px;

    width: 730px;

    padding-top: 20px;
    padding-bottom: 30px;

    /*border-bottom: 1px solid currentColor;*/
}

@media screen and (max-width: 768px) {
    .main-content-image-text {
        gap: calc(15px * var(--sp-ratio));

        width: calc(375px * var(--sp-ratio));

        padding-top: calc(15px * var(--sp-ratio));
        padding-bottom: calc(25px * var(--sp-ratio));
    
        /*border-bottom: calc(1px * var(--sp-ratio)) solid currentColor;*/
    }
}

.main-content-img {
    width: 730px;
    height: 392px;
}

@media screen and (max-width: 768px) {
    .main-content-img {
        width: calc(375px * var(--sp-ratio));
        height: calc(201.37px * var(--sp-ratio));
    }
}

.main-content-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;

    width: 552px;

    padding: 40px 0;
}

@media screen and (max-width: 768px) {
    .main-content-text {
        gap: calc(10px * var(--sp-ratio));

        width: calc(295px * var(--sp-ratio));
        padding: calc(20px * var(--sp-ratio)) 0;
    }
}

.main-content-map {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;

    width: 552px;

    padding: 20px 0 40px 0;
}

@media screen and (max-width: 768px) {
    .main-content-map {
        gap: calc(20px * var(--sp-ratio));

        width: calc(291px * var(--sp-ratio));

        padding: calc(20px * var(--sp-ratio)) 0;
    }
}

/* 長文の強制折り返し（単語間スペースが無い文字列にも対応） */
.main-content-image-text p {
    width: 552px;

    white-space: normal;
    overflow-wrap: anywhere; /* 推奨 */
    word-break: break-word;  /* 互換用 */
    line-break: strict;      /* CJK向け */
}

@media screen and (max-width: 768px) {
    .main-content-image-text p {
        width: calc(295px * var(--sp-ratio));
    }
}

.calendar-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    gap: 10px;
}

.gallery-spacer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    height: auto;

    overflow: visible;
}

.gallery-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    column-gap: 30px;
    row-gap: 39px;

    width: 960px;
}

.gallery-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: 300px;
    height: 237px;

    background-color: var(--color-darkgray);
}

.gallery-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 300px;
}

.gallery-item-text p {
    width: 300px;
}

.gallery-pagination {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 20px;

    margin-top: 20px;
}

@media screen and (max-width: 768px) {
    .gallery-pagination-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        gap: calc(20px * var(--sp-ratio));
    }
}

@media screen and (max-width: 768px) {
    .gallery-container {
        display: grid;
        grid-template-columns: 1fr; /* 1列 */
        row-gap: calc(15px * var(--sp-ratio));

        width: 100%;
    }
    .gallery-item {
        width: calc(300px * var(--sp-ratio));
        height: calc(237px * var(--sp-ratio));
    }

    .gallery-item-img {
        width: calc(300px * var(--sp-ratio));
        height: calc(200px * var(--sp-ratio));
    }

    .gallery-item-text,
    .gallery-item-text p {
        width: 100%;
    }
    .gallery-page-indicator {
        font-size: calc(16px * var(--sp-ratio));
    }
}

.footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    gap: 25px;

    width: 100%;
    height: 100%;

    padding: 24px 0 26px 0;
}

@media screen and (max-width: 768px) {
    .footer {
        gap: calc(20px * var(--sp-ratio));
        padding: calc(20px * var(--sp-ratio)) 0 calc(170px * var(--sp-ratio)) 0;
    }
}

.footer-logo-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    
    width: 100%;
    height: 100%;
}

.footer-logo {
    width: 184px;
    height: 184px;
}

@media screen and (max-width: 768px) {
    .footer-logo {
        width: calc(184px * var(--sp-ratio));
        height: calc(184px * var(--sp-ratio));
    }
}

.footer-nav-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: 958px;
    height: 100%;
}

@media screen and (max-width: 768px) {
    .footer-nav-container {
        width: 100%;
    }
}

.footer-nav-list {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 60px;

    width: 100%;
}

@media screen and (max-width: 768px) {
    .footer-nav-list {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        gap: calc(15px * var(--sp-ratio));
    }
}

.footer-nav-div {
    display: block;
    line-height: 0; 
    width: 1px;
    height: 39px;
}

@media screen and (max-width: 768px) {
    .footer-nav-div {
        width: calc(325px * var(--sp-ratio));
        height: calc(1px * var(--sp-ratio));
    }
}

.footer-nav-text-00 {
    width: 190.92px;
    height: 28.26px;
}

@media screen and (max-width: 768px) {
    .footer-nav-text-00 {
        width: calc(190.92px * var(--sp-ratio));
        height: calc(28.26px * var(--sp-ratio));
    }
}

.footer-nav-text-01 {
    width: 107.73px;
    height: 28.42px;
}

@media screen and (max-width: 768px) {
    .footer-nav-text-01 {
        width: calc(107.73px * var(--sp-ratio));
        height: calc(28.42px * var(--sp-ratio));
    }
}

.footer-nav-text-02 {
    width: 133.23px;
    height: 28.35px;
}

@media screen and (max-width: 768px) {
    .footer-nav-text-02 {
        width: calc(133.23px * var(--sp-ratio));
        height: calc(28.35px * var(--sp-ratio));
    }
}

.footer-nav-text-03 {
    width: 166.38px;
    height: 27px;
}

@media screen and (max-width: 768px) {
    .footer-nav-text-03 {
        width: calc(166.38px * var(--sp-ratio));
        height: calc(27px * var(--sp-ratio));
    }
}

.footer-copyright-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 15px;
}

/* =====================
   Calendar Table
   ===================== */
.calendar {
    width: 552px; /* テキスト幅に揃える */
    border-collapse: collapse;
    table-layout: fixed;
    background-color: var(--color-calendar-bg-2);
}

@media screen and (max-width: 768px) {
    .calendar {
        width: calc(375px * var(--sp-ratio));
    }
}

.calendar-header-text-00 {
    width: 730px;
    height: 65px;
}

@media screen and (max-width: 768px) {
    .calendar-header-text-00 {
        width: calc(130.99px * var(--sp-ratio));
        height: calc(35.03px * var(--sp-ratio));
    }
}

.calendar thead th {
    font-weight: 600;
    text-align: left;
    background-color: var(--color-white); /* 見出しに薄いベージュ */
    border-top: 2px solid currentColor;

    padding: 0 20px;
    height: 60px;
}

@media screen and (max-width: 768px) {
    .calendar thead th {
        padding: 0 calc(20px * var(--sp-ratio));
        height: calc(50px * var(--sp-ratio));
    }
}

/* 列ごとの揃え */
.calendar thead th:nth-child(1) {
    text-align: left;
    width: 25%;
}
.calendar thead th:nth-child(2) {
    text-align: center;
}
.calendar thead th:nth-child(3) {
    text-align: right;
    width: 25%;
}


.calendar tbody td {
    padding: 0 20px;
    height: 60px;
}

@media screen and (max-width: 768px) {
    .calendar tbody td {
        padding: 0 calc(20px * var(--sp-ratio));
        height: calc(50px * var(--sp-ratio));
    }
}

/* 列ごとの揃え */
.calendar tbody td:nth-child(1) {
    text-align: left;
}
.calendar tbody td:nth-child(2) {
    text-align: center;
}
.calendar tbody td:nth-child(3) {
    text-align: right;
}

/* ゼブラストライプ */
.calendar tbody tr:nth-child(odd) {
    background-color: var(--color-calendar-bg-1);
}

@media screen and (max-width: 768px) {
    .calendar {
        width: 100%;
    }
    .calendar thead th,
    .calendar tbody td {
        padding: 10px 12px;
    }
}

.google-map-iframe {
    width: 684px;
    height: 429px;
}

@media screen and (max-width: 768px) {
    .google-map-iframe {
        width: calc(291.57px * var(--sp-ratio));
        height: calc(183px * var(--sp-ratio));
    }
}

/* =====================
   Gallery Modal
   ===================== */

.gallery-header-text-00 {
    width: 730px;
    height: 65px;
}

@media screen and (max-width: 768px) {
    .gallery-header-text-00 {
        width: calc(149.07px * var(--sp-ratio));
        height: calc(34.02px * var(--sp-ratio));
    }
}






.gallery-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex; /* 常にレイアウト確保（visibilityで制御） */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.gallery-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gallery-modal-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 90vw;
    max-height: 90vh;
    color: #FFFFFF;
}

.gallery-modal-top { width: 100%; text-align: center; }

.gallery-modal-media-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
}

.gallery-modal-media {
    max-width: 90vw;
    max-height: 80vh;
}

.gallery-modal-image {
    display: block;
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.gallery-modal-close {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 35px;
    height: 48.16px;
    cursor: pointer;
}

.gallery-modal-prev,
.gallery-modal-next {
    position: static;
    width: 58px;
    height: 23px;
    flex: 0 0 auto;
    flex-shrink: 0;
    cursor: pointer;
}

.gallery-modal-prev img,
.gallery-modal-next img {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-modal-counter {
    display: inline-block;
    padding: 4px 10px;
    color: #FFFFFF;
    font-weight: 600;
}

.gallery-modal-caption {
    max-width: 90vw;
    color: #FFFFFF;
    text-align: center;
}

.gallery-modal-nav {
    display: none;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .gallery-modal-close {
        top: calc(20px * var(--sp-ratio));
        right: calc(17px * var(--sp-ratio));
        width: calc(35px * var(--sp-ratio));
        height: calc(48.16px * var(--sp-ratio));
    }
    .gallery-modal-prev,
    .gallery-modal-next {
        width: calc(58px * var(--sp-ratio));
        height: calc(23px * var(--sp-ratio));
    }
    .gallery-modal-counter {
        padding: calc(4px * var(--sp-ratio)) calc(10px * var(--sp-ratio));
    }
    .gallery-modal-media-row .gallery-modal-prev,
    .gallery-modal-media-row .gallery-modal-next {
        display: none;
    }
    .gallery-modal-nav {
        display: flex;
    }
}

@media screen and (max-width: 768px) {
    .gallery-prev,
    .gallery-next {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: calc(10px * var(--sp-ratio));

        width: calc(140px * var(--sp-ratio));
        height: calc(40px * var(--sp-ratio));

        border-radius: calc(5px * var(--sp-ratio));
    }

    .gallery-prev img,
    .gallery-next img {
        width: calc(20px * var(--sp-ratio));
        height: calc(20px * var(--sp-ratio));
    }

}

/* =====================
   Access Route Modal
   ===================== */

.access-header-text-00 {
    width: 730px;
    height: 65px;
}

@media screen and (max-width: 768px) {
    .access-header-text-00 {
        width: calc(202.4px * var(--sp-ratio));
        height: calc(33.99px * var(--sp-ratio));
    }
}

@media screen and (max-width: 768px) {
    .main-content-access-text-00,
    .main-content-access-text-01,
    .main-content-access-text-02,
    .main-content-access-text-03,
    .main-content-access-text-04 {
        height: calc(24px * var(--sp-ratio));
    }
}

.access-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* fallback */
    height: 100dvh; /* アドレスバーを考慮した動的vh */
    display: flex; /* 常にレイアウト確保（visibilityで制御） */
    align-items: flex-start; /* 上寄せ */
    justify-content: center; /* 横方向センタリング */
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    overflow-y: auto; /* モーダル全体をスクロール可能に */
    -webkit-overflow-scrolling: touch;
    padding: 80px 0 40px 0; /* 上部に余白を確保（固定の閉じるボタン分） */
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.access-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.access-modal-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 90vw;
    max-height: none; /* 全体スクロールに委ねる */
    color: #FFFFFF;
}

.access-modal-top { width: 100%; text-align: center; }

.access-modal-title {
    display: inline-block;
    padding: 4px 10px;
    color: #FFFFFF;
    font-weight: 600;
}

.access-modal-close {
    position: fixed; /* 常に右上に固定 */
    top: 40px;
    right: 40px;
    width: 35px;
    height: 48.16px;
    cursor: pointer;
    z-index: 10001;
}

.access-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.access-modal-image {
    display: block;
    width: 540px;
    height: 343px;
    max-width: 90vw; /* 画面が狭い場合に縮小 */
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .access-modal-close {
        top: calc(20px * var(--sp-ratio));
        right: calc(17px * var(--sp-ratio));
        width: calc(35px * var(--sp-ratio));
        height: calc(48.16px * var(--sp-ratio));
    }
    .access-modal-overlay {
        padding-top: calc(60px * var(--sp-ratio));
        padding-bottom: calc(30px * var(--sp-ratio));
    }
}

/* =====================
   Global Nav Pinning (PC)
   ===================== */
@media screen and (min-width: 769px) {
    .top-header-keyvisual.is-pinned {
        position: fixed;
        top: calc(-100vh + 72px);
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1500;
    }

    .page-header-keyvisual.is-pinned {
        position: fixed;
        top: calc(-330px + 72px);
        left: 0;
        width: 100%;
        height: 330px;
        z-index: 1500;
    }
}