@charset "UTF-8";
/*-------------
vars
-------------*/
:root{
    --inner-width: 1200px;
    --inner-wid-width: clamp(var(--min-width), 87vw, 1670px);
    --inner-width_sp: 92vw;
    --inner-sides: 30px;
    --inner-sides_sp: 8vw;
    --min-width: var(--inner-width);
    --inner-width_sp: calc(100vw - (var(--inner-sides_sp) * 2));
    
    --theme-grad: linear-gradient(135deg, #f8ffb5, #44fff2);
    --theme-grad_rad: radial-gradient(#f8ffb5, #44fff2);
    --base-black: #1F3D2A;
    --accent-black: #1a1a1a;
    --accent-green: #1F3D2A;
    --bg-beige: #f5f0eb;
    --bg-beige2: #ecefe4;
    --bg-green: #A2B46B;
    
    --accent-gray: #ccc;
    --border-gray: #ccc;
    --bg-gray: #e6e6e6;
    --bg-light-gray: #f0f0f0;
    --text-gray: #999;
    
    --accent-blue: #146af5;
    --accent-yellow: #fcee21;
    --text-red: #e60012;

    --bg-arrow: url(../images/arrow_right.svg) no-repeat center right / auto;
    --bg-arrow_white: url(../images/arrow_right_white.svg) no-repeat center right / auto;
    --bg-arrow-slide: arrow-slide 1.5s ease infinite;
    
    /* --font-sans: "Noto Sans JP", sans-serif; */
    --font-sans: "YuGothic", "Yu Gothic", "游ゴシック", "Hiragino Sans", "Meiryo", sans-serif;
    --font-serif: "Shippori Mincho", serif;
    --font-en-sans: "Lexend", var(--font-sans);
    --font-en-serif: "Cinzel", var(--font-serif);
    --fontsize-base: 1.6rem;
    --line-height: calc(1em + min(1em, 16px));
    --letter-spacing: .05em;

    --linear: .5s linear;
    --ease: .5s ease;
}
@media screen and (max-width:768px){
    :root{
        --inner-width: var(--inner-width_sp);
        --inner-sides: var(--inner-sides_sp);
        --inner-wid-width: var(--inner-width_sp);
        --min-width: 320px;
        
        --bg-light-gray: var(--bg-gray);
        
        --fontsize-base: 1.5rem;
        --line-height: calc(1em + min(1em, 14px));
    }
}
@keyframes arrow-slide{
    0%{
        background-position: left 0 center;
    }
    20%{
        background-position: left 14px center;
    }
    40%{
        background: none;
    }
    60%{
        background-position: left -14px center;
    }
    80%{
        background-position: left 0 center;
    }
}

/*-------------
base
-------------*/
html{
    /* 1rem = 10px → 9px（サイト全体のフォントを10%縮小） */
    font-size: 56.25%;
}
body{
    width: 100%;
    min-width: calc(var(--inner-width) + (var(--inner-sides) * 2));
    background: #fff;
    color: var(--base-black);
    font-feature-settings: "palt" 1, "kern" 1;
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    font-size: var(--fontsize-base);
    line-height: normal;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
}
@media screen and (max-width:768px){
    body{
        min-width: 320px;
    }
}
::selection{
    background: var(--accent-black);
    color: #fff;
}
.wrapper{
    position: relative;
}
.wrapper, .container{
    container-type: inline-size;
}
.wrapper *, .container *{
    --container-sides: calc(50cqw - (var(--inner-width) / 2));
}
h1, h2, h3, h4, h5, h6,
*:not(:where(span, a, b, i, em, strong, small, sub, sup, abbr, code, label, time, mark, q)){
    --my-1em: 1em;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
}
img{
    max-width: 100%;
    height: auto;
}
@media screen and (max-width:768px){
    img{
        width: 100%;
    }
}
body._preload *:not([data-effect]),
body._preload *:not([data-effect])::before,
body._preload *:not([data-effect])::after{
    transition: none!important;
}
@media screen and (min-width:769px){
    @keyframes view-fade-in {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes view-fade-out {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    @view-transition {
        navigation: auto;
    }
    ::view-transition-old(root) {
        animation: view-fade-out 1s ease-out;
    }
    ::view-transition-new(root) {
        animation: view-fade-in 1s ease-out;
    }
}

/*-------------
common
-------------*/
@media screen and (min-width:769px){
    .sp{
        display: none!important;
    }
}
@media screen and (max-width:768px){
    .pc{
        display: none!important;
    }
}
.clearfix::after,
.cf::after{
    content: "";
    display: block;
    clear: both;
}
.floatL, .l{
    float: left;
}
.floatR, .r{
    float: right;
}
.clearBoth, .c_b{
	clear:both;
}
.dispIB{
    display: inline-block;
}
img.dispIB{
    width: revert-layer;
    height: revert-layer;
}

/* margin */
.mRkern{
    margin-right: -.4em;
}
.mLkern{
    margin-left: -.4em;
}
.mLRkern{
    margin-right: -.4em;
    margin-left: -.4em;
}
.mB0{
	margin-bottom: 0px!important;
}
.mB5{
	margin-bottom: 5px!important;
}
.mB10{
	margin-bottom: 10px!important;
}
.mB15{
	margin-bottom: 15px!important;
}
.mB20{
	margin-bottom: 20px!important;
}
.mB30{
	margin-bottom: 30px!important;
}
.mR10{
	margin-right: 10px!important;
}

/* text */
.textInd, .txt_ind {
    text-indent: calc((1em + var(--letter-spacing)) * -1);
    padding-left: calc(1em + var(--letter-spacing));
}
.ffsPalt{
	font-feature-settings: "palt" 1;
}
.ffSans{
    font-family: var(--font-sans)!important;
}
.ffSerif{
    font-family: var(--font-serif)!important;
}
.ffSansEN{
    font-family: var(--font-en-sans)!important;
}
.ffSerifEN{
    font-family: var(--font-en-serif)!important;
}
.txtBlk{
    color: var(--accent-black)!important;
}
.txtRed{
    color: var(--text-red)!important;
}
.textSmall{
    font-size: max(.7em, 10px);
}
.textCenter, .txt_c{
    text-align: center;
}
.textRight, .txt_r{
    text-align: right;
}
.wsNowrap{
    white-space: nowrap;
}
@media screen and (min-width:769px){
    *:has(> wbr:not(.sp)){
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}
@media screen and (max-width:768px){
    *:has(> wbr.sp){
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}
.txt_b, .fWb{
    font-weight: bold;
}
.fW500{
    font-weight: 500;
}
.fW600{
    font-weight: 600;
}
mark{
    background: linear-gradient(to top, var(--accent-yellow) .0 .5em, rgba(255,255,255,0) .5em);
    color: var(--accent-black);
    font-weight: 500;
}
mark._not-bg{
    background: none;
}

/* a */
@media (any-hover: hover){
    :where(a:hover){
        text-decoration: none;
    }
}
.textLink:not(:hover){
    text-decoration: underline;
}
@media screen and (min-width:769px){
    body:not(.viewing_mobile) a[href^="tel:"]{
        text-decoration: none!important;
        pointer-events: none;
    }
}
.fadeHover{
    transition: opacity var(--ease);
}
@media (any-hover: hover){
    .fadeHover:hover{
        opacity: .7;
    }
    .undHover:not(:hover),
    .hoverUnd:hover{
        text-decoration: underline;
    }
}
:where(a:has(> img:only-child)),
:where(a:has(> picture:only-child)){
    transition: opacity var(--ease);
}
@media (any-hover: hover){
    :where(a:has(> img:only-child)):hover,
    :where(a:has(> picture:only-child)):hover{
        opacity: .7;
    }
}

/* loading */
@keyframes loading-dots{
    0%,
    80%,
    100%{
        box-shadow: 0 var(--dotSize) 0 calc(var(--dotSize) * -.75) var(--dotColor);
    }
    40%{
        box-shadow: 0 var(--dotSize) 0 0 var(--dotColor);
    }
}
.loadingDots{
    --dotSize: 20px;
    --dotColor: var(--accent-gray);
    position: relative;
}
@media screen and (max-width:768px){
    .loadingDots{
        --dotSize: 14px;
    }
}
.loadingDots,
.loadingDots::before,
.loadingDots::after{
    width: var(--dotSize);
    height: var(--dotSize);
    border-radius: 50%;
    animation-fill-mode: both;
    animation: loading-dots 1.8s infinite ease-in-out;
}
.loadingDots{
    transform: translate(calc(var(--dotSize) / -2), calc(var(--dotSize) * -1.5));
    font-size: 0;
    animation-delay: -0.16s;
}
.loadingDots::before,
.loadingDots::after{
    position: absolute;
    top: 0;
    z-index: 1;
    content: '';
}
.loadingDots::before{
    left: calc((var(--dotSize) + 10px) * -1);
    animation-delay: -0.32s;
}
.loadingDots::after{
    left: calc(var(--dotSize) + 10px);
}

/*-------------
data-effect
-------------*/
.wrapper *{
    --fade-transition: transform .8s ease, opacity .8s ease;
}
@media screen and (max-width:768px){
    :root{
        --fade-transition: transform .4s ease, opacity .4s ease;
    }
}
*[data-effect^="fade"]{
    opacity: 0;
    transition: var(--fade-transition);
}
*[data-effect="fade-up"]{
    transform: translateY(min(50dvh, 20%));
}
.wrapper *{
    --fade-left: translateX(max( -20%, calc(var(--container-sides) * -1)));
}
*[data-effect="fade-left"]{
    transform: var(--fade-left);
}
.wrapper *{
    --fade-right: translateX(min(var(--container-sides), 20%));
}
*[data-effect="fade-right"]{
    transform: var(--fade-right);
}
*[data-effect^="fade"][class*="_fade"]{
    opacity: 1;
    transform: none;
}

/*-------------
button
-------------*/
.readMore a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 68px;
    border-radius: 99px;
    background: var(--accent-black);
    color: #fff;
    font-family: var(--font-en-serif);
    font-size: 1.8rem;
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .readMore a{
        height: 58px;
        font-size: 1.6rem;
    }
}

/* beforeGrad */
@keyframes before-grad{
    0%{
        background-position: left 0 center;
    }
    100%{
        background-position: left 100% center;
    }
}
.beforeGrad a::before{
    opacity: 0;
    mix-blend-mode: color;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--theme-grad);
    background-size: 200%;
    content: "";
    pointer-events: none;
    animation: before-grad 3s linear infinite alternate;
    animation-play-state: paused;
    transition: opacity var(--ease);
}
@media (any-hover: hover){
    .beforeGrad a:hover::before{
        opacity: 1;
        animation-play-state: running;
    }
}

/* viewmoreBtn */
.viewmoreBtn-box{
    width: min(var(--inner-width), 100%);
    margin: 60px auto;
    padding-top: 60px;
    border-top: solid 1px var(--accent-gray);
}
@media screen and (max-width:768px){
    .viewmoreBtn-box{
        margin-top: 30px;
        padding-top: 30px;
    }
}
.viewmoreBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    width: 480px;
    height: 69px;
    margin: 0 auto;
    border-radius: 99px;
    background: var(--accent-black);
    color: #fff;
    font-family: var(--font-en-serif);
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
}
.viewmoreBtn::before{
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    transform: rotate(90deg);
    background: var(--bg-arrow_white);
    content: "";
}
@media (any-hover: hover){
    .viewmoreBtn:hover::before{
        animation: var(--bg-arrow-slide);
    }
}
@media screen and (max-width:768px){
    .viewmoreBtn{
        gap: 0 8px;
        width: 100%;
        height: 58px;
        font-size: 1.6rem;
    }
    .viewmoreBtn::before{
        width: 14px;
        height: 14px;
        background: var(--bg-arrow_white);
    }
}

/*-------------
site-loading
-------------*/
html.is-loading,
html.is-loading body{
    overflow: hidden;
}

.site-loading{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    z-index: 999;
    width: 100%;
    height: 100dvh;
    background: #fff;
    opacity: 1;
    transition: opacity .8s ease; /* JSの FADE_DURATION と揃える */
}
.site-loading._loaded{
    opacity: 0;
    pointer-events: none;
}

/* ロゴ */
.site-loading-logo{
    display: block;
    width: min(320px, 62vw);
    height: auto;
    opacity: 0;
    transition:
        opacity 1.5s cubic-bezier(.22,.61,.36,1),
        transform 1.5s cubic-bezier(.22,.61,.36,1);
}
.site-loading._show .site-loading-logo{
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* body._preload の transition:none!important を打ち消す */
body._preload .site-loading-logo{
    transition:
        opacity 1.5s cubic-bezier(.22,.61,.36,1),
        transform 1.5s cubic-bezier(.22,.61,.36,1) !important;
}

@media screen and (max-width:768px){
    .site-loading-logo{
        width: min(240px, 70vw);
    }
}

/* アニメーションを好まないユーザー向け */
@media (prefers-reduced-motion: reduce){
    .site-loading,
    .site-loading-logo{
        transition-duration: .01ms !important;
    }
    .site-loading-logo{
        transform: none;
    }
}
/*-------------
accordion
-------------*/
.accordion-btn:not(.is--ready){
    pointer-events: none;
}
.accordion-btn.is--ready{
    cursor: pointer;
}
@media screen and (max-width:768px){
    .accordion-btn_sp:not(.is--ready){
        pointer-events: none;
    }
    .accordion-btn_sp.is--ready{
        cursor: pointer;
    }
}
.accordion-btn:not(._active):not([data-target-class]) + *:not(.accordion-container),
.accordion-content{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
@media screen and (max-width:768px){
    .accordion-btn_sp:not(._active):not([data-target-class]) + *:not(.accordion-container),
    .accordion-content_sp{
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
}
.accordion-container{
    overflow: hidden;
    transition: height .3s ease;
}
.accordion-container.is--hit_low{
    transition: height .2s ease;
}
.accordion-container:not(.is--open){
    height: 0!important;
}
@media screen and (min-width:769px){
    .accordion-container.is--limit_sp{
        height: auto!important;
    }
}

/*-------------
bg-gradation
-------------*/
.bg-gradation{
    --grad-opacity: 1;
    opacity: var(--grad-opacity);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translateZ(0);
    width: 100%;
    height: 660px;
    font-size: 0;
    user-select: none;
    pointer-events: none;
    transition: opacity .5s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
}
.bg-gradation._hide{
    opacity: 0;
}
.bg-gradation::before{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 290px;
    background: linear-gradient(to top, rgba(255,255,255,.6), rgba(255,255,255,0));
    content: "";
}
.bg-gradation::after{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: linear-gradient(to top, #fff, rgba(255,255,255,0));
    content: "";
}
@media screen and (max-width:768px){
    .bg-gradation{
        height: 120vw;
    }
    .bg-gradation::before{
        height: 50vw;
    }
    .bg-gradation::after{
        height: 45vw;
    }
}
.bg-gradation._bottom{
    top: auto;
    bottom: 0;
    height: 690px;
}
.bg-gradation._bottom::before{
    top: 0;
    bottom: auto;
    transform: rotate(180deg);
    height: 360px;
}
.bg-gradation._bottom::after{
    top: 0;
    bottom: auto;
    transform: rotate(180deg);
    height: 300px;
}
@media screen and (max-width:768px){
    .bg-gradation._bottom{
        height: 600px;
    }
    .bg-gradation._bottom::before{
        height: 90px;
    }
    .bg-gradation._bottom::after{
        height: 60px;
    }
}
.bg-gradation-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .5s ease;
}

/*-------------
header
-------------*/
body{
    --header-ini-hit: 100px;
    --header-hit: var(--header-ini-hit);
}
@media screen and (max-width:768px){
    body{
        --header-ini-hit: 100px;
    }
}
.header{
    position: relative;
    z-index: 99;
    width: 100%;
    height: var(--header-ini-hit);
    background: #fff;
}
.header .header-inner{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0 40px;
    position: relative;
    z-index: 99;
    width: 100%;
    height: var(--header-hit);
    padding: 0 var(--inner-sides);
    background: #fff;
}
.header .header-inner:not(._fixed){
    transition: opacity var(--ease), background var(--ease), backdrop-filter var(--ease);
}
@media screen and (max-width:768px){
    .header .header-inner{
        display: flex;
        align-items: center;
        z-index: 100;
        padding-right: 0;
    }
}
.header .header-inner._fixed{
    opacity: 0;
    transform: translateY(calc(var(--header-hit) * -1));
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(4px);
}
.header .header-inner._fixed._down{
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s ease, transform .5s ease;
}
.header .header-inner._fixed._up{
    opacity: 0;
    transform: translateY(calc(var(--header-hit) * -1));
}

/* logo */
.header .header-logo{
    display: flex;
    align-items: center;
    margin-right: auto;
}
.header .header-logo img{
    width: auto;
    max-width: none; /* 共通の max-width:100% を解除して縮ませない */
    height: 59px;
}
/*-------------
追従ヘッダー（._fixed）だけの調整
fixed はビューポート基準の幅になるため、狭い画面でも1行に収まるようにする
-------------*/
@media screen and (min-width:769px){
    /* 余白を詰める */
    .header .header-inner._fixed{
        gap: 0 clamp(20px, 2.5vw, 40px);
    }
    .header .header-inner._fixed .header-nav-list{
        gap: 0 clamp(16px, 2.2vw, 36px);
    }
    /* リンクの文字を少し小さくする（1440px以上は1.8remのまま） */
    .header .header-inner._fixed .header-nav a{
        font-size: clamp(1.4rem, 1.22vw, 1.8rem);
    }
}
/* さらに狭くなったらロゴを隠す（縮小はさせない） */
@media screen and (min-width:769px) and (max-width:1099px){
    .header .header-inner._fixed .header-logo{
        display: none;
    }
}
@media screen and (max-width:768px){
    .header .header-logo{
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        padding-right: 65px;
    }
    .header .header-logo img{
        width: auto;
        max-width: 100%;
        height: 54px;
    }
}

/* menu-btn（SPのみ） */
.header-menu-btn{
    display: none;
}
@media screen and (max-width:768px){
    .header .header-menu-btn{
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex: 0 0 auto;
        position: absolute;
        top: 5px;
        right: 0;
        z-index: 1;
        width: 65px;
        height: 65px;
        margin-left: auto;
        padding: 0 0 12px;
        background: none;
        color: #6f7d74;
        font-family: var(--font-en-serif);
        font-size: 1.1rem;
        line-height: 1;
        letter-spacing: .1em;
        pointer-events: auto;
        cursor: pointer;
    }
    /* ハンバーガーの2本線 */
    .header .header-menu-btn::before,
    .header .header-menu-btn::after{
        position: absolute;
        left: 50%;
        width: 26px;
        height: 1px;
        margin-left: -13px;
        background: var(--accent-green);
        content: "";
        transition: transform var(--ease);
    }
    .header .header-menu-btn::before{
        top: 22px;
    }
    .header .header-menu-btn::after{
        top: 30px;
    }
    /* 開いている時はバツ印＋CLOSE */
    .header .header-menu-btn._open::before{
        transform: translateY(4px) rotate(20deg);
    }
    .header .header-menu-btn._open::after{
        transform: translateY(-4px) rotate(-20deg);
    }
    .header .header-menu-btn._open .header-menu-btn-label{
        font-size: 0;
    }
    .header .header-menu-btn._open .header-menu-btn-label::after{
        font-size: 1.1rem;
        content: "CLOSE";
    }
    /* メニューを開いている間はヘッダーの背景を消す */
    .header .header-inner:has(.header-menu-btn._open){
        background: none;
    }
}

/* nav */
.header .header-menu,
.header .header-nav{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    align-items: center;
}
.header .header-nav a{
    color: var(--accent-green);
    font-size: 1.8rem;
    letter-spacing: .04em;
    white-space: nowrap;
}
@media screen and (max-width:768px){
    /* 全画面のオーバーレイ（淡い緑） */
    .header .header-menu{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: auto;
        padding: var(--header-ini-hit) var(--inner-sides) 20px;
        background: #edf0e6;
        transition: opacity .5s ease;
        transform: translate3d(0, 0, 10px);
    }
    .header .header-menu:not(._active),
    .header .header-menu:not(._active) *{
        z-index: -999;
        pointer-events: none;
        animation-play-state: paused;
    }
    .header .header-menu:not(._show){
        opacity: 0;
    }
    /* 白いパネル */
    .header .header-nav{
        display: flex;
        flex-direction: column;
        position: relative;
        height: 100%;
        padding: 0 30px calc(50px + env(safe-area-inset-bottom));
        border-radius: 30px;
        background: #fff;
        overflow: hidden;
        pointer-events: none;
        transition: transform .5s ease;
    }
    .header .header-menu:not(._show) .header-nav{
        transform: scale(.96);
    }
    .header .header-nav *{
        pointer-events: auto;
    }
    /* パネル右上の縦書きキャッチ */
    .header-menu-catch{
        writing-mode: vertical-rl;
        position: absolute;
        top: 30px;
        right: 30px;
        color: var(--accent-green);
        font-size: 2.6rem;
        font-weight: bold;
        line-height: 1;
        letter-spacing: .18em;
    }
}
.header .header-nav-list{
    display: flex;
    justify-content: flex-end;
    gap: 0 36px;
}
.header .header-nav-list-item a{
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    padding: 0 4px;
    line-height: calc(1em + 4px);
}
@media (any-hover: hover){
    .header .header-nav-list-item a{
        transition: opacity var(--ease);
    }
    .header .header-nav-list-item a:hover{
        opacity: .6;
    }
}
@media screen and (max-width:768px){
    .header .header-nav-list{
        width: 100%;
        display: block;
        margin-top: 200px;
    }
    .header .header-nav-list-item a{
        display: block;
        height: auto;
        padding: 16px 0;
        font-size: 1.8rem;
        line-height: 1;
    }
}

/* contact（緑のピルボタン） */
.header .header-contact{
    margin-left: 0;
}
.header .header-contact a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 14px;
    position: relative;
    width: auto;
    height: 46px;
    padding: 0 10px 0 26px;
    border-radius: 999px;
    background: var(--accent-green);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: .04em;
    transition: opacity var(--ease);
}
.header .header-contact a::before{
    content: none;
}
.header .header-contact a::after{
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    background-image: url(../images/arrow_right.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px auto;
    content: "";
}
@media (any-hover: hover){
    .header .header-contact a:hover{
        opacity: .8;
    }
}
@media screen and (max-width:768px){
    .header .header-contact{
        width: 100%;
        margin: 46px 0 0;
    }
    .header .header-contact a{
        justify-content: center;
        gap: 0;
        width: 100%;
        height: 40px;
        padding: 0;
        font-size: 1.8rem;
    }
    .header .header-contact a::after{
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        background-size: 7px;
        background-position: 7px center;
    }
}

/*-------------
footer
-------------*/
.footer{
    position: relative;
    margin: 100px var(--inner-sides) 0;
    padding: 61px 0 60px;
}
@media screen and (max-width:768px){
    .footer{
        margin-inline: 0;
        margin-top: 60px;
        padding: 24px 0 min(60px, calc(30px + env(safe-area-inset-bottom)));
    }
}
.footer-top{
    display: flex;
    align-items: flex-start;
    gap: 0 14px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}
.footer-top::before{
    flex: 1 1 auto;
    height: 1px;
    border-top: solid 1px var(--accent-green);
    content: "";
}
@media screen and (max-width:768px){
    .footer-top{
        gap: 0 10px;
    }
}
.footer-pagetop{
    flex: 0 0 auto;
    transform: translateY(-50%);
    pointer-events: auto;
}
.footer-pagetop a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    color: var(--accent-green);
    font-family: var(--font-en-sans);
    font-size: 1.6rem;
    line-height: 1;
    transition: background var(--ease);
}
.footer-pagetop a::before{
    flex: 0 0 auto;
    transform: rotate(-90deg);
    width: 14px;
    height: 14px;
    background: var(--bg-arrow);
    content: "";
}
@media (any-hover: hover){
    .footer-pagetop a:hover::before{
        animation: var(--bg-arrow-slide);
    }
}
@media screen and (max-width:768px){
    .footer-pagetop a{
        gap: 8px;
        padding: 13px 0;
        font-size: 1.4rem;
    }
}
.footer-inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 60px;
    width: var(--inner-wid-width);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .footer-inner{
        flex-direction: column;
        align-items: stretch;
        gap: 50px 0;
        width: var(--inner-width_sp);
        margin-inline: auto;
    }
}

/* 左：ロゴ・住所・SNS */
.footer-info{
    display: flex;
    align-items: flex-end;
    gap: 0 50px;
}
.footer-logo-mark{
    flex: 0 0 auto;
    display: block;
    width: 275px;
}
.footer-logo-mark img{
    width: 100%;
    height: auto;
}
.footer-detail{
    padding-bottom: 15px;
}
.footer-logo-name{
    display: block;
}
.footer-logo-corp{
    display: block;
    margin-bottom: 8px;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: .08em;
}
.footer-logo-main{
    display: block;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: .08em;
}
@media (any-hover: hover){
    .footer-logo-mark,
    .footer-logo-name{
        transition: opacity var(--ease);
    }
    .footer-logo-mark:hover,
    .footer-logo-name:hover{
        opacity: .7;
    }
}
.footer-address{
    margin-top: 22px;
    font-size: 1.6rem;
    line-height: calc(1em + 9px);
    font-style: normal;
}
.footer-sns{
    display: flex;
    gap: 0 12px;
    margin-top: 20px;
}
.footer-sns-item a{
    display: block;
    width: 26px;
    height: 26px;
}
.footer-sns-item img{
    width: 100%;
    height: auto;
}
@media (any-hover: hover){
    .footer-sns-item a{
        transition: opacity var(--ease);
    }
    .footer-sns-item a:hover{
        opacity: .7;
    }
}
@media screen and (max-width:768px){
    /* マーク＋園名を横並び、住所・SNSは下に全幅で置く */
    .footer-info{
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        align-items: center;
        gap: 0 25px;
    }
    .footer-detail{
        display: contents;
    }
    .footer-logo-mark{
        grid-row: 1;
        grid-column: 1;
        width: 120px;
        height: auto;
    }
    .footer-logo-name{
        grid-row: 1;
        grid-column: 2;
    }
    .footer-address{
        grid-row: 2;
        grid-column: 1 / -1;
        margin-top: 30px;
    }
    .footer-sns{
        grid-row: 3;
        grid-column: 1 / -1;
        margin-top: 20px;
    }
    .footer-logo-corp{
        margin-bottom: 12px;
        font-size: 1.6rem;
    }
    .footer-logo-main{
        font-size: 2.3rem;
    }
}

/* 右：ナビ・バナー・コピーライト */
.footer-side{
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}
.footer-nav-list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    gap: 8px 60px;
}
.footer-nav-list-item a{
    display: flex;
    align-items: center;
    gap: 0 16px;
    padding: 5px 0;
    color: var(--accent-green);
    font-size: 1.8rem;
    line-height: calc(1em + 4px);
}
.footer-nav-list-item a::before{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--accent-green);
    background-image: url(../images/arrow_right_white.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 6px auto;
    content: "";
}
@media (any-hover: hover){
    .footer-nav-list-item a{
        transition: opacity var(--ease);
    }
    .footer-nav-list-item a:hover{
        opacity: .6;
    }
}
@media screen and (max-width:768px){
    .footer-nav-list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px 25px;
    }
    .footer-nav-list-item a{
        gap: 0 10px;
        padding: 6px 0;
        font-size: 1.4rem;
    }
    .footer-nav-list-item a::before{
        width: 15px;
        height: 15px;
        background-size: 5px auto;
    }
}
.footer-bnr{
    display: flex;
    align-items: center;
    gap: 0 46px;
    margin-top: 40px;
    justify-content: space-between;
}
.footer-bnr-image{
    flex: 0 0 auto;
    width: 194px;
}
.footer-bnr-image img{
    width: 100%;
    height: auto;
}
.footer-bnr-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: 210px;
    height: 52px;
    border: solid 1px var(--base-black);
    color: var(--base-black);
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: .04em;
    text-align: center;
    transition: background var(--ease), color var(--ease);
}
@media (any-hover: hover){
    .footer-bnr-image{
        transition: opacity var(--ease);
    }
    .footer-bnr-image:hover{
        opacity: .7;
    }
    .footer-bnr-btn:hover{
        background: var(--base-black);
        color: #fff;
    }
}
@media screen and (max-width:768px){
    .footer-bnr{
        gap: 0 18px;
        margin-top: 50px;
    }
    .footer-bnr-image{
        flex: 0 1 auto;
        width: 155px;
    }
    .footer-bnr-btn{
        flex: 1 1 auto;
        width: auto;
        height: 44px;
        font-size: 1.4rem;
    }
}
.footer-copy{
    display: block;
    margin: 60px 0 0 auto;
    color: var(--accent-green);
    font-size: 1.6rem;
    line-height: calc(1em + 2px);
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .footer-copy{
        margin: 30px auto 0;
        font-size: 1.2rem;
        text-align: center;
    }
}

/*-------------
top-page
-------------*/
.top-page .bg-gradation._top{
    height: 100dvh;
    transition: none;
}
.top-page .bg-gradation._top::before,
.top-page .bg-gradation._top::after{
    content: none;
}
.top-page .bg-gradation._bottom{
    opacity: 1;
    position: absolute;
    top: auto;
    bottom: 0;
    height: 660px;
}
.top-page .bg-gradation._bottom::before{
    height: 330px;
    background: linear-gradient(to top, rgba(255,255,255,.6) 0 120px, rgba(255,255,255,0));
}
.top-page .bg-gradation._bottom::after{
    height: 150px;
}
@media screen and (max-width:768px){
    .top-page .bg-gradation._bottom{
        height: 630px;
    }
    .top-page .bg-gradation._bottom::before{
        height: 315px;
        background: linear-gradient(to top, rgba(255,255,255,.6) 0 120px, rgba(255,255,255,0));
    }
    .top-page .bg-gradation._bottom::after{
        height: 75px;
    }
}

/* header_fv */
.header._top,
.header_fv{
    position: absolute;
    top: 20px;
    right: var(--inner-sides);
    z-index: 99;
}
.header_fv .header-logo{
    display: none;
}
.header_fv .header-nav a{
    display: block;
    min-width: 110px;
    padding: 8px 0;
    color: var(--accent-black);
    font-family: var(--font-en-sans);
    font-size: 1.8rem;
    line-height: calc(1em + 2px);
    letter-spacing: 0;
}
.header_fv .header-nav-list-item a{
    border-bottom: solid 1px currentColor;
}
@media screen and (max-width:768px){
    .header_fv{
        top: 13px;
    }
    .header_fv .header-nav a{
        min-width: 90px;
        padding: 6px 0;
        font-size: clamp(13px, 3.94vw, 1.6rem);
    }
}
@media screen and (max-width:768px){
    .header._firstview .header-menu{
        transition: none!important;
    }
}

/* top-visual（ファーストビュー） */
.top-visual{
    display: flex;
    justify-content: flex-end;
    position: relative;
    height: calc(100dvh - var(--header-ini-hit) - 44px);
    min-height: 480px;
    max-height: 720px;
    padding-left: 130px;
}
@media screen and (max-width:768px){
    .top-visual{
        height: calc(100dvh - var(--header-ini-hit));
        min-height: 480px;
        max-height: none;
        padding-left: 90px;
    }
}

/* キャッチコピー（縦書き） */
.top-visual-catch{
    writing-mode: vertical-rl;
    position: absolute;
    left: 37px;
    bottom: 0;
    z-index: 2;
    color: var(--accent-green);
    font-size: 43px; /* 1440px時に48px → 10%縮小 */
    font-weight: bold;
    line-height: 1;
    letter-spacing: .18em;
    transition: opacity 1.2s ease .3s, transform 1.2s ease .3s;
    font-feature-settings: initial;
}
body:not(._loaded) .top-visual-catch,
body._loading .top-visual-catch{
    opacity: 0;
    transform: translateY(30px);
}
@media screen and (max-width:768px){
    .top-visual-catch{
        left: 25px;
        bottom: 0;
        font-size: 4rem; /* 375px時に30px */
        letter-spacing: .16em;
    }
}

/* スライダー */
.top-visual-slider{
    position: relative;
    width: calc(100% - 90px);
    height: 100%;
    border-radius: 80px 0 0 0;
    overflow: hidden;
    transition: opacity 1.2s ease, transform 1.2s ease;
}
body:not(._loaded) .top-visual-slider,
body._loading .top-visual-slider{
    opacity: 0;
    transform: translateY(30px);
}
@media screen and (max-width:768px){
    .top-visual-slider{
        width: calc(100% - 62px);
        height: 100%;
        aspect-ratio: auto; /* 高さは画面基準にするため比率指定は解除 */
        border-radius: 40px 0 0 0;
    }
}
/* keen-slider標準のレイアウトを打ち消して重ねる */
.top-visual-slider.keen-slider{
    display: block;
}
.top-visual-slider .top-visual-slide{
    opacity: 0;
    position: absolute!important;
    top: 0;
    left: 0;
    transform: none!important;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    transition: opacity 2.5s ease; /* JSの FADE と揃える */
}
.top-visual-slider .top-visual-slide._show{
    opacity: 1;
}
/* <picture>を挟んでも高さが崩れないようにする */
.top-visual-slide picture{
    display: block;
    width: 100%;
    height: 100%;
}
.top-visual-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@keyframes topVisualZoom {
    from{ transform: scale(1); }
    to  { transform: scale(1.14); }
}
.top-visual-slide._active img{
    animation: topVisualZoom 12s linear forwards;
}
@media (prefers-reduced-motion: reduce){
    .top-visual-slide._active img{
        animation: none;
    }
}

/*-------------
content
-------------*/
body{
    --fv-overlap: 230px; /* 白くなりきるまでの距離 */
}
@media screen and (max-width:768px){
    body{
        --fv-overlap: 90px;
    }
}
.content{
    position: relative;
    z-index: 1;
}
/* ファーストビューの上に、半透明から白へ変化しながら重なる
   --white-opacity はスクロール量に応じて script_top.js が 0〜1 で更新する
   （JSが動かない場合は 1 のまま＝白背景になる） */
.content.top{
    --white-opacity: 1;
    background: linear-gradient(to bottom,
        rgba(255,255,255,0) 0,
        rgba(255,255,255,calc(var(--white-opacity) * .5)) calc(var(--fv-overlap) * .45),
        rgba(255,255,255,var(--white-opacity)) var(--fv-overlap));
}
/* ファーストビューは画面に留まり、コンテンツがその上を通過する */
.top-page .top-visual{
    position: sticky;
    top: 0;
    z-index: 0;
}

/*-------------
top-about
-------------*/
.top-about{
    padding: 200px 0 140px;
}
@media screen and (max-width:768px){
    .top-about{
        padding: 120px 0 80px;
    }
}
.top-about-inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 40px;
    width: var(--inner-width);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .top-about-inner{
        flex-direction: column;
        gap: 60px 0;
        width: 100%;
        padding: 0 30px;
    }
}

/* テキスト */
.top-about-body{
    flex: 0 1 auto;
    padding-top: 4px;
}
.top-about-en{
    font-family: var(--font-en-serif);
    font-size: 2.0rem;
    line-height: 1;
    letter-spacing: .12em;
}
.top-about-title{
    margin-top: 26px;
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.85;
    letter-spacing: .06em;
}
.top-about-text{
    margin-top: 34px;
    font-size: 1.8rem;
    line-height: 2.05;
    letter-spacing: .04em;
}
.top-about-text p + p{
    margin-top: 2em;
}
@media screen and (max-width:768px){
    .top-about-en{
        font-size: 1.4rem;
    }
    .top-about-title{
        margin-top: 26px;
        font-size: 2.5rem;
        line-height: 1.85;
    }
    .top-about-text{
        margin-top: 30px;
        font-size: 1.5rem;
        line-height: 2.2;
    }
    .top-about-text p + p{
        margin-top: 1.5em;
    }
}

/* 写真 */
.top-about-pics{
    flex: 0 0 auto;
    position: relative;
    width: 746px;
    height: 670px;
}
.top-about-pic{
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(31,61,42,.12);
}
.top-about-pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-about-pic._main{
    top: 70px;
    left: 0;
    width: 515px;
    height: 558px;
}
.top-about-pic._sub01{
    top: 0;
    right: 0;
    z-index: 1;
    width: 332px;
    height: 250px;
}
.top-about-pic._sub02{
    right: 35px;
    bottom: 0;
    z-index: 1;
    width: 233px;
    height: 183px;
}
@media screen and (max-width:768px){
    /* 親の左右パディングを打ち消して画面幅いっぱいに */
    .top-about-pics{
        width: 100vw;
        margin-left: -30px;
        height: auto;
        aspect-ratio: 375 / 339;
    }
    .top-about-pic{
        border-radius: 30px;
    }
    /* 大：左端に振り切る */
    .top-about-pic._main{
        top: 6.2%;
        left: 0;
        width: 73.9%;
        height: auto;
    }
    /* 小1：右端に振り切る */
    .top-about-pic._sub01{
        top: 0;
        right: 0;
        width: 44.3%;
        height: 37.5%;
    }
    /* 小2：右下 */
    .top-about-pic._sub02{
        right: 8%;
        bottom: 0;
        width: 31.7%;
        height: 27.7%;
    }
}

/*-------------
top-sec（全幅の帯画像）
-------------*/
.top-sec{
    width: 100%;
    margin: 0 auto;
}
.top-sec img{
    display: block;
    width: 100%;
    height: auto;
}
.top-sec picture{
    display: block;
    width: 100%;
}

/*-------------
top-feature
-------------*/
.top-feature{
    padding: 140px 0 160px;
}
@media screen and (max-width:768px){
    .top-feature{
        padding: 70px 0 90px;
    }
}
.top-feature-inner{
    width: var(--inner-width);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .top-feature-inner{
        width: 100%;
        padding: 0 30px;
    }
}
.top-feature-en{
    font-family: var(--font-en-serif);
    font-size: 2.0rem;
    line-height: 1;
    letter-spacing: .12em;
}
.top-feature-title{
    margin-top: 10px;
    font-size: 5rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .06em;
}
@media screen and (max-width:768px){
    .top-feature-en{
        font-size: 1.4rem;
    }
    .top-feature-title{
        margin-top: 15px;
        font-size: 2.8rem;
    }
}

/* カード一覧 */
.top-feature-list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 100px 105px;
    margin-top: 70px;
}
@media screen and (max-width:768px){
    .top-feature-list{
        grid-template-columns: minmax(0, 1fr);
        gap: 45px 0;
        margin-top: 40px;
    }
}
.top-feature-item a{
    display: block;
    position: relative;
}
.top-feature-image{
    display: block;
    border-radius: 10px;
    overflow: hidden;
}
.top-feature-image img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 647 / 424;
    object-fit: cover;
    transition: transform .6s ease;
}
@media (any-hover: hover){
    .top-feature-item a:hover .top-feature-image img{
        transform: scale(1.1);
    }
}

/* 左上のアイコン */
.top-feature-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -30px;
    left: -30px;
    z-index: 2;
    width: 94px;
    height: 94px;
    border-radius: 50%;
}
.top-feature-icon img{
    width: 100%;
    height: auto;
}
@media screen and (max-width:768px){
    .top-feature-icon{
        top: -10px;
        left: -10px;
        width: 46px;
        height: 46px;
    }
}

/* 右下のラベル
   左上＝通常の角丸、左下＝逆R（カードの下辺へ滑らかに繋げる） */
.top-feature-item{
    --label-notch: 14px; /* 逆Rの半径 */
}
.top-feature-label{
    display: flex;
    align-items: center;
    gap: 0 16px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 14px 0 0 26px;
    border-radius: 18px 0 10px 0; /* 左上＝角丸 / 右下＝カードの角丸に合わせる */
    background: #fff;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: .04em;
}
/* 左下の逆R */
.top-feature-label::before{
    position: absolute;
    bottom: 0;
    left: calc(var(--label-notch) * -1);
    width: var(--label-notch);
    height: var(--label-notch);
    background: radial-gradient(circle at 0 0,
        transparent var(--label-notch),
        #fff calc(var(--label-notch) + 1px));
    pointer-events: none;
    content: "";
}
.top-feature-label::after{
    position: absolute;
    bottom: 100%;
    right: 0;
    width: var(--label-notch);
    height: var(--label-notch);
    background: radial-gradient(circle at 0 0,
        transparent var(--label-notch),
        #fff calc(var(--label-notch) + 1px));
    pointer-events: none;
    content: "";
}
@media screen and (max-width:768px){
    .top-feature-item{
        --label-notch: 10px;
    }
    .top-feature-label{
        gap: 0 10px;
        padding: 11px 0 0 16px;
        border-radius: 14px 0 10px 0;
        font-size: 1.4rem;
    }
}

/* ラベル内の矢印 */
.top-feature-arrow{
    flex: 0 0 auto;
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-green);
}
.top-feature-arrow::before{
    position: absolute;
    top: 50%;
    left: 8.5px;
    transform: translateY(-50%);
    width: 9px;
    height: 13px;
    background: #fff;
    clip-path: polygon(0 0, 2.5px 0, 9px 6.5px, 2.5px 13px, 0 13px, 6.5px 6.5px);
    content: "";
}
@media screen and (max-width:768px){
    .top-feature-arrow{
        width: 17px;
        height: 17px;
    }
    .top-feature-arrow::before{
        left: 6px;
        width: 7px;
        height: 9px;
        clip-path: polygon(0 0, 2px 0, 7px 4.5px, 2px 9px, 0 9px, 5px 4.5px);
    }
}

/* 詳しく見るボタン */
.top-feature-more,
.top-news-more{
    display: flex;
    justify-content: flex-end;
    margin-top: 70px;
}
.top-feature-more a,
.top-news-more a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    position: relative;
    width: 210px;
    height: 50px;
    border: solid 1px var(--accent-green);
    border-radius: 999px;
    background: #fff;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: .04em;
    padding-right: 10px;
    transition: background var(--ease), color var(--ease);
}
.top-feature-more a::after,
.top-news-more a::after{
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-green);
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.top-feature-more a::before,
.top-news-more a::before{
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    z-index: 1;
    width: 8px;
    height: 11px;
    background: #fff;
    clip-path: polygon(0 0, 2px 0, 8px 5.5px, 2px 11px, 0 11px, 6px 5.5px);
    content: "";
}
@media (any-hover: hover){
    .top-feature-more a:hover,
    .top-news-more a:hover{
        background: var(--accent-green);
        color: #fff;
    }
    .top-feature-more a:hover::after,
    .top-news-more a:hover::after{
        background: #fff;
    }
    .top-feature-more a:hover::before,
    .top-news-more a:hover::before{
        background: var(--accent-green);
    }
}
@media screen and (max-width:768px){
    .top-feature-more,
    .top-news-more{
        justify-content: center;
        margin-top: 40px;
    }
    .top-feature-more a,
    .top-news-more a{
        width: 165px;
        height: 35px;
        font-size: 1.4rem;
    }
    .top-feature-more a::after {
        width: 17px;
        height: 17px;
        right: 12px;
    }
    .top-feature-more a::before {
        right: 16px;
        width: 7px;
        height: 9px;
        clip-path: polygon(0 0, 2px 0, 7px 4.5px, 2px 9px, 0 9px, 5px 4.5px);
    }
    .top-feature-more a::after, .top-news-more a::after{
        width: 17px;
        height: 17px;
        right: 12px;
    }
    .top-feature-more a::before,  .top-news-more a::before {
        right: 16px;
        width: 7px;
        height: 9px;
        clip-path: polygon(0 0, 2px 0, 7px 4.5px, 2px 9px, 0 9px, 5px 4.5px);
    }
}

/*-------------
top-news
-------------*/
.top-news{
    padding: 90px 0 85px;
    background: var(--bg-beige);
}
@media screen and (max-width:768px){
    .top-news{
        padding: 80px 0 75px;
    }
}
.top-news-inner{
    display: flex;
    align-items: flex-start;
    gap: 0 76px;
    min-width: var(--inner-width);
    margin: 0 auto;
    max-width: 1200px;
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .top-news-inner{
        flex-direction: column;
        gap: 40px 0;
        width: 100%;
        padding: 0 30px;
    }
}

/* 左カラム（見出し＋ボタン） */
.top-news-head{
    flex: 0 0 210px;
}
.top-news-en{
    font-family: var(--font-en-serif);
    font-size: 2.0rem;
    line-height: 1;
    letter-spacing: .12em;
}
.top-news-title{
    margin-top: 26px;
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .06em;
}
.top-news-head .top-news-more{
    justify-content: flex-start;
    margin-top: 40px;
}
@media screen and (max-width:768px){
    .top-news-head{
        flex: 0 0 auto;
        width: 100%;
    }
    .top-news-en{
        font-size: 1.4rem;
    }
    .top-news-title{
        margin-top: 15px;
        font-size: 2.8rem;
    }
    /* SPはボタンをリストの下に出す */
    .top-news-head .top-news-more{
        display: none;
    }
}

/* 記事一覧 */
.top-news-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto; 
    gap: 0 70px;
    flex: 1 1 auto;
}
@media screen and (max-width:768px){
    .top-news-list{
        grid-template-columns: minmax(0, 1fr);
        gap: 19px 0;
        width: 100%;
    }
}
.top-news-item a{
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    height: 100%;
}
.top-news-image{
    display: block;
    overflow: hidden;
}
.top-news-image img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 329 / 227;
    object-fit: cover;
    transition: transform .6s ease;
}
@media (any-hover: hover){
    .top-news-item a:hover .top-news-image img{
        transform: scale(1.05);
    }
}
.top-news-text{
    display: block;
    padding: 20px 20px 24px;
}
.top-news-meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}
.top-news-date{
    display: block;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: .04em;
}
.top-news-item-cat{
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    padding: 1px 10px 0;
    color: #6c8073;
    border: 2px solid #6c8073;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: calc(1em + 3px);
    letter-spacing: .04em;
}
.top-news-item-title{
    display: block;
    margin-top: 14px;
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    /* SPは写真とテキストを横並びに */
    .top-news-item a{
        display: flex;
        align-items: stretch;
        height: 98px;
    }
    .top-news-image{
        flex: 0 0 150px;
    }
    .top-news-image img{
        width: 150px;
        height: 100%;
        aspect-ratio: auto;
    }
    .top-news-text{
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 16px 0 22px;
    }
    .top-news-item-title{
        margin-top: 8px;
        font-size: 1.4rem;
        line-height: 1.6;
    }
    .top-news-date{
        font-size: 1.2rem;
    }
}

/* 一覧を見るボタン（SPはリストの下） */
.top-news-more_sp{
    display: none;
}
@media screen and (max-width:768px){
    .top-news-more_sp{
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 30px 0 0;
    }
}

/*-------------
top-contact
-------------*/
.top-contact{
    padding: 180px 0 0;
    background: #fff;
    position: relative;
}
@media screen and (max-width:768px){
    .top-contact{
        padding: 70px 0 0;
    }
}
.top-contact-panel{
    position: relative;
    width: var(--inner-wid-width);
    margin: 0 auto;
    padding: 0 min(120px, 7.2%);
    border-radius: 30px;
    background: var(--bg-green);
}
@media screen and (max-width:768px){
    .top-contact-panel{
        width: var(--inner-width_sp);
        padding: 58px 0 0;
        border-radius: 24px;
        overflow: hidden; /* 写真の下端をパネルの角丸で切る */
    }
}
.top-contact-inner{
    display: flex;
    gap: 0 min(120px, 7.2%);
}
@media screen and (max-width:768px){
    .top-contact-inner{
        flex-direction: column;
        width: 100%;
    }
}

/* テキスト */
.top-contact-body{
    margin: 0 auto;
    padding: min(110px, 7.5%) 0;
}
.top-contact-title{
    font-size: clamp(40px, 2.5vw, 50px);
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: .06em;
    color: #fff;
}
.top-contact-text{
    margin-top: 20px;
    font-size: 1.8rem;
    color: #fff;
    line-height: 2.1;
    letter-spacing: .04em;
}
.top-contact-more{
    margin-top: 44px;
}
.top-contact-more a{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 260px;
    height: 50px;
    padding-right: 20px;
    border-radius: 999px;
    background: var(--accent-green);
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .04em;
    transition: opacity var(--ease);
}
.top-contact-more a::after{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    content: "";
}
.top-contact-more a::before{
    position: absolute;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
    z-index: 1;
    width: 8px;
    height: 11px;
    background: var(--accent-green);
    clip-path: polygon(0 0, 2px 0, 8px 5.5px, 2px 11px, 0 11px, 6px 5.5px);
    content: "";
}
@media (any-hover: hover){
    .top-contact-more a:hover{
        opacity: .8;
    }
}
.top-contact-more-tel{
    font-size: 3.0rem;
    font-weight: bold;
    color: #fff;
    margin-top: 20px;
}
@media screen and (max-width:768px){
    .top-contact-body{
        order: 1; /* テキストを先に */
        flex: 0 0 auto;
        margin-right: 0;
        width: 100%;
        padding: 0 20px;
        text-align: center;
    }
    .top-contact-title{
        font-size: 2.8rem;
    }
    .top-contact-text{
        margin-top: 20px;
        font-size: 1.6rem;
        line-height: 2.2;
    }
    .top-contact-more{
        margin-top: 32px;
    }
    .top-contact-more a{
        width: 215px;
        height: 35px;
        margin: 0 auto;
        padding-right: 24px;
        font-size: 1.4rem;
    }
    .top-contact-more a::after{
        width: 17px;
        height: 17px;
        right: 12px;
    }
    .top-contact-more a::before {
        right: 16px;
        width: 7px;
        height: 9px;
        clip-path: polygon(0 0, 2px 0, 7px 4.5px, 2px 9px, 0 9px, 5px 4.5px);
    }
    .top-contact-more-tel{
        font-size: 2.5rem;
        margin-top: 15px;
    }
}

/* 写真 */
.top-contact-pics{
    position: relative;
    width: min(745px, 53%);
}
.top-contact-pic{
    position: absolute;
    border-radius: 30px;
    overflow: hidden;
}
.top-contact-pic img{
    display: block;
    max-width: 100%;
    height: auto;
}
.top-contact-pic picture{
    display: block;
    width: 100%;
    height: 100%;
}
.top-contact-pic._pic01{
    top: -95px;
    left: min(65px, 13.7%);
    z-index: 1;
    max-width: calc(100% - 105px);
}
.top-contact-pic._pic02{
    top: 176px;
    right: 0;
    z-index: 2;
    max-width: 50%;
}
.top-contact-pic._pic03{
    bottom: -83px;
    left: 0;
    z-index: 1;
}
@media screen and (max-width:768px){
    /* SPは1枚だけをテキストの下に敷く */
    .top-contact-pics{
        order: 2; /* 写真をテキストの後ろに */
        position: static;
        width: 100%;
        height: auto;
        margin-top: 58px;
    }
    .top-contact-pic{
        border-radius: 0;
    }
    .top-contact-pic._pic01{
        position: static;
        width: 100%;
        max-width: none;
    }
    .top-contact-pic._pic02,
    .top-contact-pic._pic03{
        display: none;
    }
}

/*---------------------
page-header
------------------------*/
.page-header{
    padding-top: 100px;
}
@media screen and (max-width:768px){
    .page-header{
        padding-top: 30px;
    }
}
.page-header__title{
    font-size: 5rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .06em;
    text-align: center;
}
/* 英字を出す場合はこの指定を有効にする
.page-header__title-inner::before{
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-en-serif);
    font-size: 2.0rem;
    line-height: 1;
    letter-spacing: .12em;
    content: attr(data-pagetitle-en);
}
*/
@media screen and (max-width:768px){
    .page-header__title{
        font-size: 2.8rem;
    }
}

/* メイン画像（上の角だけ大きく丸める） */
.page-header__image{
    width: min(100% - 120px, 1420px);
    margin: 105px auto 0;
    border-radius: 100px 100px 0 0;
    overflow: hidden;
}
.page-header__image picture{
    display: block;
    width: 100%;
}
.page-header__image img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1670 / 520;
    object-fit: cover;
}
@media screen and (max-width:768px){
    .page-header__image{
        width: calc(100% - 40px);
        margin-top: 40px;
        border-radius: 40px 40px 0 0;
    }
    .page-header__image img{
        aspect-ratio: 175 / 89;
    }
}

/* 画像下のリード文 */
.page-lead{
    padding: 112px 0;
    text-align: center;
}
.page-lead__title{
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: .06em;
}
.page-lead__text{
    margin-top: 50px;
    font-size: 1.8rem;
    line-height: 2.4;
    letter-spacing: .04em;
}
/* 下の区切り線 */
.page-lead::after{
    display: block;
    width: 30px;
    height: 2px;
    margin: 112px auto 0;
    background: #1F3D2A;
    content: "";
}
@media screen and (max-width:768px){
    .page-lead{
        padding: 25px var(--inner-sides_sp);
    }
    .page-lead__title{
        font-size: 2.0rem;
    }
    .page-lead__text{
        margin-top: 26px;
        font-size: 1.5rem;
        line-height: 2.2;
    }
    .page-lead::after{
        margin-top: 35px;
    }
    .page-lead::after{
        width: 10px;
        height: 1px;
    }
}

/*---------------------
content
------------------------*/
.sec-title1{
    font-size: 5rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .06em;
}
.sec-title1:before{
    color: var(--base-black);
    content: attr(data-en);
    margin-bottom: 10px;
    font-family: var(--font-en-serif);
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 1;
    display: block;
    letter-spacing: .12em;
}
@media screen and (max-width:768px){
    .sec-title1{
        margin-top: 15px;
        font-size: 2.8rem;
    }
    .sec-title1:before{
        font-size: 1.4rem;
    }
}
/*---------------------
page-sec1
------------------------*/
.page-sec1{
    padding: 10px 0 130px;
}
@media screen and (max-width:768px){
    .page-sec1{
        padding: 5px 0 65px;
    }
}
.page-sec1__image{
    width: min(100% - 60px, 1200px);
    margin: 80px auto 0;
}
.page-sec1__image img{
    display: block;
    max-width: 1024px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.page-sec1__text{
    margin-top: 60px;
    font-size: 1.8rem;
    line-height: 2.4;
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    /* 図が横長で縮小すると読めないため、横スクロールで見せる */
    .page-sec1__image{
        width: 100%;
        margin-top: 40px;
        padding: 0 var(--inner-sides_sp);
    }
    .page-sec1__text{
        margin-top: 35px;
        padding: 0 var(--inner-sides_sp);
        font-size: 1.5rem;
        line-height: 2.2;
    }
}

/*---------------------
page-sec2（給食・食育）
------------------------*/
.page-sec2{
    padding: 100px 0 120px;
    background: var(--bg-beige2);
}
@media screen and (max-width:768px){
    .page-sec2{
        padding: 70px 0 80px;
    }
}
.page-sec2__inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 60px;
    width: min(100% - 60px, 1200px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .page-sec2__inner{
        flex-direction: column;
        gap: 30px 0;
        width: 100%;
        padding: 0 30px;
    }
}

/* テキスト */
.page-sec2__body{
    flex: 1 1 auto;
}
.page-sec2__title{
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.9;
    letter-spacing: .06em;
}
.page-sec2__text{
    margin-top: 40px;
    font-size: 1.8rem;
    line-height: calc(1em + 22px);
}
.page-sec2__text p + p{
    margin-top: 2em;
}
@media screen and (max-width:768px){
    .page-sec2__title{
        font-size: 2.4rem;
        line-height: 1.7;
    }
    .page-sec2__text{
        margin-top: 26px;
        font-size: 1.5rem;
        line-height: calc(1em + 20px);
    }
    .page-sec2__text p + p{
        margin-top: 2em;
    }
    .page-sec2__text br{
        display: none;
    }
}
.page-sec2__image{
    flex: 0 0 auto;
    width: 660px;
    border-radius: 30px;
    overflow: hidden;
}
.page-sec2__image img{
    display: block;
    width: 100%;
    height: auto;
}
@media screen and (max-width:768px){
    .page-sec2__image{
        width: 100%;
        border-radius: 15px;
    }
}
/*---------------------
about-facilities
------------------------*/
.about-facilities{
    padding: 130px 0 140px;
}
@media screen and (max-width:768px){
    .about-facilities{
        padding: 45px 0 60px;
    }
}
.about-facilities__inner{
    width: min(100% - 60px, 1200px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .about-facilities__inner{
        width: 100%;
        padding: 0 var(--inner-sides_sp);
    }
}
.about-facilities__list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 95px;
    margin-top: 90px;
}
@media screen and (max-width:768px){
    .about-facilities__list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 20px;
        margin-top: 40px;
    }
}
.about-facilities__image{
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
}
.about-facilities__image img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 410 / 292;
    object-fit: cover;
    transition: transform .6s ease;
}
@media (any-hover: hover){
    .about-facilities__image:hover img{
        transform: scale(1.05);
    }
}
.about-facilities__caption{
    margin-top: 23px;
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
}
@media screen and (max-width:768px){
    .about-facilities__image{
        border-radius: 8px;
    }
    .about-facilities__caption{
        margin-top: 12px;
        font-size: 1.4rem;
    }
}
.about-facilities__note{
    margin-top: 90px;
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: .04em;
    text-align: right;
}
@media screen and (max-width:768px){
    .about-facilities__note{
        margin-top: 40px;
        font-size: 1.3rem;
        text-align: left;
    }
}

/*---------------------
about-features（クラス編成）
------------------------*/
.about-features{
    padding: 60px 0 100px;
}
@media screen and (max-width:768px){
    .about-features{
        padding: 0 0 60px;
    }
}
.about-features__inner{
    width: min(100% - 60px, 1420px);
    margin: 0 auto;
    /* 左右paddingは「最低限の余白」として機能させ、
       実際の見た目の余白は下の 1024px センタリングで決まる */
    padding: 120px var(--inner-sides);
    border-radius: 30px;
    background: var(--bg-beige);
}
/* 中のコンテンツは 1024px 固定（最大＝最小） */
.about-features__inner > *{
    width: 1024px;
    max-width: 100%;
    margin-inline: auto;
}
@media screen and (max-width:768px){
    .about-features__inner{
        width: calc(100% - 60px);
        padding: 50px var(--inner-sides_sp);
        border-radius: 20px;
    }
    .about-features__inner > *{
        width: 100%;
    }
    .about-features__inner .sec-title1{
        text-align: center;
    }
}

/* クラス一覧 */
.about-features__list{
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 10px 120px;
    margin-top: 40px;
}
@media screen and (max-width:768px){
    .about-features__list{
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: 8px 0;
        margin-top: 50px;
    }
}
.about-features__item{
    display: flex;
    align-items: center;
    gap: 0 28px;
}
.about-features__icon{
    flex: 0 0 auto;
    width: 85px;
}
.about-features__icon img{
    display: block;
    width: 100%;
    height: auto;
}
.about-features__body{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 20px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 15px 0;
    border-bottom: 2px dotted #707070;
    font-size: 2.0rem;
    line-height: 1.5;
    letter-spacing: .04em;
}
.about-features__name{
    display: flex;
    font-weight: bold;
    gap: 0 1em;
}
.about-features__count{
    flex: 0 0 auto;
}
@media screen and (max-width:768px){
    .about-features__item{
        gap: 0 16px;
        /* 罫線は行全体（アイコンの下も含む）に引く */
        padding-bottom: 9px;
        border-bottom: 2px dotted #707070;
    }
    .about-features__icon{
        width: 60px;
    }
    .about-features__body{
        padding: 0;
        border-bottom: none;
        font-size: 1.5rem;
    }
}
/*---------------------
about-overview
------------------------*/
.about-overview{
    width: min(100% - 60px, 1024px);
    margin: 0 auto;
    padding: 100px 0 140px;
}
@media screen and (max-width:768px){
    .about-overview{
        width: 100%;
        padding: 20px var(--inner-sides_sp) 70px;
    }
}

/* 概要テーブル */
.page-tb1{
    width: 100%;
    margin-top: 60px;
    font-size: 2.0rem;
    line-height: 2.4;
    letter-spacing: .04em;
}
.page-tb1 th,
.page-tb1 td{
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e0;
    text-align: left;
    vertical-align: top;
}
.page-tb1 tr:last-child th,
.page-tb1 tr:last-child td{
    border-bottom: none;
}
.page-tb1 th{
    width: 210px;
    font-weight: bold;
}
@media screen and (max-width:768px){
    .page-tb1{
        margin-top: 30px;
        font-size: 1.5rem;
        line-height: 1.7;
    }
    /* SPも見出しと内容を横並びのまま維持する */
    .page-tb1 th,
    .page-tb1 td{
        font-size: 1.5rem;
        padding: 19px 0;
    }
    .page-tb1 th{
        width: 95px;
    }
}

/* 地図 */
.page-map{
    margin-top: 70px;
    aspect-ratio: 1170 / 613;
    overflow: hidden;
}
.page-map iframe{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 30px;
}
@media screen and (max-width:768px){
    .page-map{
        margin-top: 35px;
        aspect-ratio: 1 / 1;
    }
}

/*---------------------
about-ourstory
------------------------*/
.about-ourstory{
    padding: 0 0 30px;
}
@media screen and (max-width:768px){
    .about-ourstory{
        padding: 0 0 20px;
    }
}
.about-ourstory__inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 70px;
    width: min(100% - 60px, 1024px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .about-ourstory__inner{
        flex-direction: column;
        gap: 25px 0;
        width: 100%;
        padding: 0 var(--inner-sides_sp);
    }
}
.about-ourstory__body{
    flex: 1 1 auto;
    min-width: 350px;
}
.about-ourstory__title{
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.85;
    letter-spacing: .06em;
}
.about-ourstory__title::before{
    display: block;
    margin-bottom: 24px;
    font-family: var(--font-en-serif);
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .12em;
    content: attr(data-en);
}
.about-ourstory__text{
    margin-top: 50px;
    font-size: 1.8rem;
    line-height: calc(1em + 22px);
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    /* SPは 見出し → 画像 → 本文 の順にする。
       __body を display:contents で消して __inner のflexに直接参加させ order で並べ替える
       ※ .about-ourstory__body{flex:1 1 auto} より後に書くこと */
    .about-ourstory__body{
        display: contents;
        min-width: inherit;
    }
    .about-ourstory__title{
        order: 1;
        font-size: 2.4rem;
        line-height: 1.7;
    }
    .about-ourstory__title::before{
        margin-bottom: 14px;
        font-size: 1.4rem;
    }
    .about-ourstory__text{
        order: 3;
        margin-top: 0;
        font-size: 1.4rem;
        line-height: 2.1;
    }
    .about-ourstory__text br{
        display: none;
    }
}
.about-ourstory__image{
    flex: 0 1 689px;
    min-width: 0;
    max-width: 727px;
}
.about-ourstory__image img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 727 / 658;
}
@media screen and (max-width:768px){
    .about-ourstory__image{
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }
    .about-ourstory__image img{
        aspect-ratio: inherit;
    }
}

/* 園舎の紹介 モーダル */
.modal-content-wrap {
    border-radius: 30px;
}
/* modal-window.css が add_head() で後読みされるため、
   親セレクタを1つ足して詳細度を上げてから縦スクロールを止める */
.modal-window .modal-content-wrap{
    overflow-y: hidden;
}
.modal-facility{
    width: fit-content;
    max-width: min(1000px, 100%);
    margin-inline: auto;
}
.modal-facility img{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    /* 44px = modal-content-wrap の max-height 差分 / 58px = figcaption の高さ */
    max-height: calc(90vh - 44px - 58px);
    margin-inline: auto;
}
/* キャプションが無いものはその分だけ高さを使える */
.modal-facility:not(:has(figcaption)) img{
    max-height: calc(90vh - 44px);
}
.modal-facility figcaption{
    padding: 18px 20px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
}
@media screen and (max-width:768px){
    .modal-content-wrap {
        border-radius: 15px;
    }
    .modal-facility{
        width: fit-content;
        max-width: 100%;
    }
    .modal-facility img{
        /* SPは figcaption が 44px 程度 */
        max-height: calc(90vh - 44px - 44px);
    }
    .modal-facility:not(:has(figcaption)) img{
        max-height: calc(90vh - 44px);
    }
    .modal-facility figcaption{
        padding: 12px 15px;
        font-size: 1.3rem;
    }
}

/*---------------------
feature-sec（園の特徴 各項目）
------------------------*/
.feature-sec{
    padding: 0 0 130px;
}
@media screen and (max-width:768px){
    .feature-sec{
        display: flex;
        flex-direction: column;
        padding: 35px 0 0;
        text-align: center;
    }
    .feature-sec + .feature-sec{
        padding-top: 45px;
    }
}

/* 上段：メイン画像＋テキスト */
.feature-sec__head{
    display: flex;
    align-items: center;
    gap: 0 60px;
    /* 画像は画面端まで、テキスト側はコンテンツ幅で止める */
    padding-right: max(var(--inner-sides), calc((100% - 1200px) / 2));
}
.feature-sec._reverse .feature-sec__head{
    flex-direction: row-reverse;
    padding-right: 0;
    padding-left: max(var(--inner-sides), calc((100% - 1200px) / 2));
}
@media screen and (max-width:768px){
    /* __head / __body を display:contents で消して、
       中の要素を .feature-sec 直下のflexに直接参加させ order で並べ替える
       ※ 上の .feature-sec__head{display:flex} より必ず後に書くこと
         （メディアクエリは詳細度を上げないため、前に書くと後勝ちで打ち消される） */
    .feature-sec__head,
    .feature-sec._reverse .feature-sec__head,
    .feature-sec__body{
        display: contents;
    }
}

.feature-sec__image{
    flex: 0 1 1180px;
    min-width: 0;
}
.feature-sec__image img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1180 / 718;
    object-fit: cover;
    border-radius: 0 20px 20px 0;
}
.feature-sec._reverse .feature-sec__image img{
    border-radius: 20px 0 0 20px;
}
@media screen and (max-width:768px){
    .feature-sec__image{
        order: 3;
        flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-top: 24px;
    }
    /* 通常は左詰め（右側に余白を残す） */
    .feature-sec__image{
        align-self: flex-start;
    }
    .feature-sec__image img{
        border-radius: 0 12px 12px 0;
    }
    /* 反転時は右詰め（左側に余白を残す） */
    .feature-sec._reverse .feature-sec__image{
        align-self: flex-end;
    }
    .feature-sec._reverse .feature-sec__image img{
        border-radius: 12px 0 0 12px;
    }
}

/* テキスト */
.feature-sec__body{
    flex: 1 1 auto;
    min-width: 420px;
    text-align: center;
}
.feature-sec__icon{
    width: 94px;
    margin: 0 auto;
}
.feature-sec__icon img{
    display: block;
    width: 100%;
    height: auto;
}
.feature-sec__title{
    margin-top: 30px;
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .06em;
}
.feature-sec__text{
    margin-top: 30px;
    font-size: 1.8rem;
    line-height: 2.2;
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .feature-sec__icon{
        order: 1;
        width: 50px;
    }
    .feature-sec__title{
        order: 2;
        margin-top: 20px;
        padding: 0 var(--inner-sides_sp);
        font-size: 2rem;
    }
    /* SPは1行に収める */
    .feature-sec__title br{
        display: none;
    }
    .feature-sec__text{
        order: 5;
        margin-top: 30px;
        padding: 0 var(--inner-sides_sp);
        font-size: 1.5rem;
        line-height: 2.6;
    }
}

/* 下段：スライダー */
.feature-sec__slider{
    display: flex;
    align-items: center;
    gap: 0 25px;
    width: min(100% - 60px, 1200px);
    margin: 100px auto 0;
}
@media screen and (max-width:768px){
    /* SPも矢印は写真の外側。2枚を見切れなしで並べる */
    .feature-sec__slider{
        order: 4;
        gap: 0 15px;
        width: calc(100% - 44px);
        margin: 24px auto 0;
    }
}
.feature-sec__track{
    /* flex-basis を 0 にして中身の幅に引っ張られないようにする */
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    overflow: hidden; /* 4枚目以降がはみ出して見えないように */
}
/* スライドさせない状態（PCで枚数が3枚以下のとき） */
.feature-sec__slider._static .feature-sec__track{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 30px;
    width: 100%;
    transform: none;
}
.feature-sec__slider._static .feature-sec__slide{
    transform: none!important;
    min-width: 0!important;
    max-width: none!important;
}
.feature-sec__slider._static .feature-sec__arrow{
    display: none;
}
.feature-sec__slide img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 440 / 292;
    object-fit: cover;
    border-radius: 20px;
}
@media screen and (max-width:768px){
    .feature-sec__slide img{
        aspect-ratio: 4 / 3;
        border-radius: 20px;
    }
}

/* 矢印 */
.feature-sec__arrow{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    outline: none;
    background: var(--bg-green);
    cursor: pointer;
    appearance: none;
    transition: opacity var(--ease);
}
.feature-sec__arrow::before{
    width: 8px;
    height: 11px;
    background: #fff;
    clip-path: polygon(0 0, 2px 0, 8px 5.5px, 2px 11px, 0 11px, 6px 5.5px);
    content: "";
}
.feature-sec__arrow._prev::before{
    transform: rotate(180deg);
}
.feature-sec__arrow:disabled{
    opacity: .3;
    cursor: default;
    display: none;
}
@media (any-hover: hover){
    .feature-sec__arrow:not(:disabled):hover{
        opacity: .75;
    }
}
@media screen and (max-width:768px){
    .feature-sec__arrow{
        width: 30px;
        height: 30px;
    }
    .feature-sec__arrow::before{
        width: 8px;
        height: 10px;
        clip-path: polygon(0 0, 2px 0, 8px 5px, 2px 10px, 0 10px, 6px 5px);
    }
}

/*---------------------
news-list
------------------------*/
.content.news{
    margin-top: 50px;
}
.news-index{
    padding: 70px 0 100px;
    background: var(--bg-beige);
}
@media screen and (max-width:768px){
    .content.news{
        margin-top: 30px;
    }
    .news-index{
        padding: 40px 0 60px;
    }
}
.news-index__inner{
    width: min(100% - 60px, 1200px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .news-index__inner{
        width: 100%;
        padding: 0 var(--inner-sides_sp);
    }
}

/* カテゴリタブ（ベージュ帯の外・白背景の上に置く） */
.news-tab{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px var(--inner-sides) 43px;
}
.news-tab__btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 43px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid var(--accent-green);
    border-radius: 999px;
    outline: none;
    background: #fff;
    color: var(--accent-green);
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .04em;
    cursor: pointer;
    appearance: none;
    transition: background var(--ease), color var(--ease);
}
.news-tab__btn._active{
    background: var(--accent-green);
    color: #fff;
}
@media (any-hover: hover){
    .news-tab__btn:not(._active):hover{
        background: rgba(31,61,42,.08);
    }
}
@media screen and (max-width:768px){
    .news-tab{
        gap: 8px 8px;
        padding: 20px var(--inner-sides_sp) 25px;
    }
    .news-tab__btn{
        width: calc(50% - 4px);
        height: 44px;
        font-size: 1.6rem;
    }
}

/* 記事一覧 */
.news-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 37px;
}
@media screen and (max-width:768px){
    .news-list{
        grid-template-columns: minmax(0, 1fr);
        gap: 20px 0;
    }
}
.news-list__item._hide{
    display: none;
}
/* カード全体が白い角丸ボックス */
.news-list__item a{
    display: block;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}
.news-list__image{
    display: block;
    overflow: hidden;
}
.news-list__image img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 870 / 580;
    object-fit: cover;
    transition: transform .6s ease;
}
@media (any-hover: hover){
    .news-list__item a:hover .news-list__image img{
        transform: scale(1.05);
    }
}
.news-list__meta{
    display: flex;
    align-items: center;
    gap: 0 12px;
    margin: 22px 24px 0;
}
.news-list__date{
    color: #6c8073;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .04em;
}
.news-list__cat{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    color: #6c8073;
    border: 2px solid #6c8073;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .04em;
}
.news-list__title{
    color: #3e5848;
    display: block;
    margin: 10px 24px 30px;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .news-list__item a{
        border-radius: 14px;
    }
    .news-list__meta{
        margin: 15px 18px 0;
    }
    .news-list__title{
        margin: 8px 18px 20px;
        font-size: 1.5rem;
    }
}

/* ページ送り */
.news-pager{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    margin-top: 70px;
}
@media screen and (max-width:768px){
    .news-pager{
        gap: 0 10px;
        margin-top: 30px;
    }
}
.news-pager__btn{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    border: 1px solid #b1b1b1;
    border-radius: 50%;
    outline: none;
    background: #fff;
    color: #b1b1b1;
    font-family: var(--font-en-serif);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    transition: background var(--ease), color var(--ease), opacity var(--ease);
}
.news-pager__btn._active{
    background: var(--accent-green);
    color: #fff;
    pointer-events: none;
}
.news-pager__btn._disabled{
    opacity: .3;
    cursor: default;
}
@media (any-hover: hover){
    .news-pager__btn:not(._active):not(._disabled):hover{
        background: var(--accent-green);
        color: #fff;
    }
    .news-pager__btn:not(._active):not(._disabled):hover:before{
        background: #fff;
    }
}
/* 前後の矢印 */
.news-pager__btn._prev,
.news-pager__btn._next{
    font-size: 0;
    background: #dfe3e0;
    border-color: #dfe3e0;
}
.news-pager__btn._prev::before,
.news-pager__btn._next::before{
    width: 8px;
    height: 10px;
    background: var(--accent-green);
    clip-path: polygon(0 0, 2px 0, 8px 5px, 2px 10px, 0 10px, 5px 5px);
    content: "";
}
.news-pager__btn._prev::before{
    transform: rotate(180deg);
}
@media screen and (max-width:768px){
    /* SPは矢印を出さず数字のみ（表示するページ数はJS側で5つに絞る） */
    .news-pager__btn{
        width: 50px;
        height: 50px;
        font-size: 1.6rem;
    }
    .news-pager__btn._prev,
    .news-pager__btn._next,
    .news-pager__num-btn:not(._range){
        display: none;
    }
}

/*---------------------
news-detail（お知らせ詳細）
------------------------*/
.news-detail{
    width: min(100% - 60px, 1000px);
    margin: 0 auto;
    padding: 0 0 0;
}
@media screen and (max-width:768px){
    .news-detail{
        width: 100%;
        padding: 0 var(--inner-sides_sp) 0;
    }
}

/* 記事ヘッダー */
.news-detail__head{
    position: relative;
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e6e6;
}
.news-detail__head::after{
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100px;
    height: 1px;
    background: var(--accent-green);
    content: "";
}
.news-detail__meta{
    display: flex;
    align-items: center;
    gap: 0 12px;
}
.news-detail__date{
    font-size: 1.6rem;
    font-weight: 600;
    color: #6c8073;
    line-height: 1;
    letter-spacing: .04em;
}
.news-detail__cat{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    color: #6c8073;
    border: 1px solid #6c8073;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .04em;
}
.news-detail__title{
    margin-top: 14px;
    font-size: 3.2rem;
    font-weight: bold;
    line-height: calc(1em + 8px);
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .news-detail__title{
        margin-top: 10px;
        font-size: 2.7rem;
    }
    .news-detail__head::after{
        width: 90px;
    }
}
.news-detail-visual{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    margin: 50px 0;
}
.news-detail-visual__pic:not(:only-child){
    max-width: calc(50% - 12px);
}
.news-detail-visual__pic img{
    max-height: 500px;
    object-fit: contain;
}
@media screen and (max-width:768px){
    .news-detail-visual{
        flex-direction: column;
        gap: 15px 0;
        margin: 30px 0;
    }
    .news-detail-visual__pic:not(:only-child){
        max-width: none;
    }
    .news-detail-visual__pic img{
        max-height: none;
    }
}

/*---------------------
記事本文（エディタ出力）
------------------------*/
.news-body{
    margin-top: 50px;
    font-size: 1.6rem;
    line-height: calc(1em + 11px);
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .news-body{
        margin-top: 30px;
        font-size: 1.4rem;
    }
}
.news-body > * + *{
    margin-top: 1.5em;
}

/* 見出し */
.news-body h2{
    display: flex;
    align-items: center;
    gap: 0 14px;
    margin-top: 2em;
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.5;
}
.news-body h2::before{
    flex: 0 0 auto;
    align-self: stretch;
    width: 4px;
    min-height: 1em;
    border-radius: 2px;
    background: var(--accent-green);
    content: "";
}
/* 見出し3は下に罫線 */
.news-body h3{
    margin-top: 2em;
    padding-bottom: 11px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.5;
}
/* 見出し4はベージュの丸＋緑の点 */
.news-body h4{
    display: flex;
    align-items: center;
    gap: 0 10px;
    margin-top: 2em;
    font-size: 2.1rem;
    font-weight: bold;
    line-height: 1.5;
}
.news-body h4::before{
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-green) 0 4px, var(--bg-beige) 4px);
    content: "";
}
.news-body h5{
    margin-top: 2em;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.5;
}
.news-body h2 + *,
.news-body h3 + *,
.news-body h4 + *,
.news-body h5 + *{
    margin-top: .8em;
}
.news-body p{
    line-height: calc(1em + 11px);
    font-size: 1.6rem;
}
@media screen and (max-width:768px){
    .news-body h2{ font-size: 2.4rem; margin-top: 30px;}
    .news-body h3{ font-size: 2.2rem; margin-top: 30px;}
    .news-body h4{ font-size: 1.9rem; margin-top: 30px;}
    .news-body h5{ font-size: 1.7rem; margin-top: 30px;}
    .news-body p{
        font-size: 1.4rem;
    }
}
/* 本文中のリンク */
.news-body a{
    color: #4e65a5;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (any-hover: hover){
    .news-body a:hover{
        text-decoration: none;
    }
}

/* 画像 */
.news-body figure,
.news-body .news-body__figure{
    margin-top: 2em;
}
.news-body img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
/* 1枚のときは中央に少し小さく */
.news-body__figure._single{
    width: min(100%, 752px);
    margin-inline: auto;
}
/* 2枚並び */
.news-body__figure._col2{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 19px;
}
@media screen and (max-width:768px){
    .news-body__figure._col2{
        grid-template-columns: minmax(0, 1fr);
        gap: 12px 0;
    }
}

/*---------------------
関連リンク・添付ファイル
------------------------*/
.news-links{
    margin-top: 50px;
    padding: 30px 40px;
    border-radius: 5px;
    background: var(--bg-beige);
}
@media screen and (max-width:768px){
    .news-links{
        margin-top: 30px;
        padding: 20px;
    }
}
.news-links__item + .news-links__item{
    margin-top: 10px;
}
.news-links__item a{
    display: flex;
    align-items: center;
    gap: 0 10px;
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: .04em;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.news-links__item a::before{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: center / contain no-repeat;
    content: "";
}
.news-links__item._link a::before{
    background-image: url(../images/icon_link.svg);
}
.news-links__item._blank a::before{
    background-image: url(../images/icon_blank2.svg);
}
.news-links__item._file a::before{
    background-image: url(../images/icon_file.svg);
}
@media (any-hover: hover){
    .news-links__item a:hover{
        text-decoration: none;
    }
}

/*---------------------
記事ナビ
------------------------*/
.news-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 20px;
    margin-top: 120px;
}
@media screen and (max-width:768px){
    .news-nav{
        flex-wrap: wrap;
        gap: 12px 10px;
        margin-top: 80px;
    }
}
.news-nav__btn{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 60px;
    padding: 0 40px;
    border-radius: 30px;
    background: var(--bg-beige);
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: .04em;
    transition: opacity var(--ease);
}
.news-nav__btn._prev,
.news-nav__btn._next{
    flex: 0 0 200px;
    background: var(--bg-beige);
}
.news-nav__btn._index{
    flex: 0 0 300px;
    background: var(--accent-green);
    color: #fff;
}
.news-nav__btn._disabled{
    opacity: .4;
    pointer-events: none;
}
@media (any-hover: hover){
    .news-nav__btn:hover{
        opacity: .75;
    }
}
/* 矢印はボタンの左右端に固定する */
.news-nav__btn::before{
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%) rotate(180deg);
    width: 7px;
    height: 10px;
    background: var(--accent-green);
    clip-path: polygon(0 0, 2px 0, 7px 5px, 2px 10px, 0 10px, 5px 5px);
    content: "";
}
.news-nav__btn._index::before{
    background: #fff;
}
.news-nav__btn._next::before{
    left: auto;
    right: 18px;
    transform: translateY(-50%);
}
@media screen and (max-width:768px){
    .news-nav__btn{
        height: 46px;
        padding: 0 32px;
        font-size: 1.3rem;
    }
    .news-nav__btn._prev,
    .news-nav__btn._next{
        flex: 1 1 0;
        height: 60px;
    }
    .news-nav__btn._index{
        flex: 0 0 100%;
        order: 3;
        height: 60px;
    }
    .news-nav__btn::before{
        left: 12px;
    }
    .news-nav__btn._next::before{
        left: auto;
        right: 12px;
    }
}

/* 下部のカテゴリタブ */
.news-detail__tab{
    margin-top: 45px;
    padding-top: 45px;
    border-top: 1px solid var(--accent-green);
}
.news-detail__tab .news-tab{
    padding: 0;
}
.news-detail__tab .news-tab__btn{
    width: 200px;
    height: 43px;
    font-size: 1.6rem;
}
@media screen and (max-width:768px){
    .news-detail__tab{
        margin-top: 30px;
        padding-top: 30px;
    }
    .news-detail__tab .news-tab__btn{
        width: calc(50% - 4px);
        height: 44px;
        font-size: 1.6rem;
    }
}

/*---------------------
flow-season（季節ごとの行事）
------------------------*/
.flow-season{
    width: min(100% - 60px, 1420px);
    margin: 0 auto;
    padding: 0 0 100px;
}
@media screen and (max-width:768px){
    .flow-season{
        width: 100%;
        padding: 0 var(--inner-sides_sp) 60px;
    }
}

/* 季節ごとのブロック */
.flow-season__list{
    margin-top: 60px;
}
.flow-season__block{
    display: flex;
    align-items: flex-start;
    gap: 0 120px;
}
/* 偶数ブロックは左右を入れ替える */
.flow-season__block._reverse{
    flex-direction: row-reverse;
}
.flow-season__block + .flow-season__block{
    margin-top: 120px;
}
@media screen and (max-width:768px){
    .flow-season__list{
        margin-top: 30px;
    }
    /* SPは 見出し → 写真 → リスト の順に並べる */
    .flow-season__block,
    .flow-season__block._reverse{
        flex-direction: column;
        gap: 0;
    }
    .flow-season__block + .flow-season__block{
        margin-top: 45px;
    }
    .flow-season__body{
        display: contents;
    }
    .flow-season__title{
        order: 1;
    }
    .flow-season__image{
        order: 2;
        margin-top: 20px;
    }
    .flow-list{
        order: 3;
    }
}

/* 写真 */
.flow-season__image{
    flex: 0 1 550px;
    min-width: 0;
}
.flow-season__image img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 647 / 425;
    object-fit: cover;
    border-radius: 30px;
}
@media screen and (max-width:768px){
    .flow-season__image{
        flex: 0 0 auto;
        width: 100%;
    }
    .flow-season__image img{
        border-radius: 20px;
    }
}

/* 行事リスト */
.flow-season__body{
    flex: 1 1 auto;
    min-width: 647px;
    max-width: 647px;
}
.flow-season__title{
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .06em;
}
.flow-list{
    margin-top: 18px;
}
.flow-list__item{
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 22px 0;
    border-bottom: 1px solid #707070;
}
.flow-list__item:last-child{
    border-bottom: none;
}
.flow-list__month{
    flex: 0 0 80px;
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1.7;
    letter-spacing: .04em;
}
.flow-list__body{
    flex: 1 1 auto;
    min-width: 0;
}
.flow-list__name{
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1.7;
    margin-bottom: 8px;
    display: block;
    letter-spacing: .04em;
}
.flow-list__text{
    margin-top: 8px;
    font-size: 1.8rem;
    line-height: 2;
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .flow-season__body{
        max-width: inherit;
        min-width: inherit;
    }
    .flow-season__title{
        font-size: 2.0rem;
    }
    .flow-list{
        margin-top: 25px;
    }
    /* SPは「月＋行事名」を1行に、説明文は左端から全幅で */
    .flow-list__item{
        display: block;
        padding: 15px 0;
    }
    .flow-list__body{
        display: contents;
    }
    .flow-list__month{
        display: inline-block;
        flex: none;
        margin-right: 1em;
        font-size: 2.0rem;
    }
    .flow-list__name{
        display: inline;
        margin-bottom: 0;
        font-size: 2.0rem;
    }
    .flow-list__text{
        display: block;
        margin-top: 6px;
        font-size: 1.5rem;
        line-height: calc(1em + 15px);
    }
    .flow-list__text br{
        display: none;
    }
}

/* 毎月の行事 */
.flow-monthly{
    margin-top: 90px;
    padding: 45px 30px 50px;
    border-radius: 12px;
    background: var(--bg-beige);
    text-align: center;
}
.flow-monthly__title{
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .08em;
}
.flow-monthly__text{
    margin-top: 22px;
    font-size: 1.8rem;
    line-height: 2.2;
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .flow-monthly{
        margin-top: 50px;
        padding: 55px 30px;
    }
    .flow-monthly__title{
        font-size: 2rem;
    }
    .flow-monthly__text{
        margin-top: 15px;
        font-size: 1.5rem;
        line-height: calc(1em + 15px);
    }
    .flow-monthly__text br{
        display: none;
    }
}

/*---------------------
flow-schedule（一日の流れ）
------------------------*/
.flow-schedule{
    width: min(100% - 60px, 1200px);
    margin: 0 auto;
    padding: 50px 0 110px;
}
@media screen and (max-width:768px){
    .flow-schedule{
        width: 100%;
        padding: 0 var(--inner-sides_sp) 60px;
    }
}
.flow-schedule__body{
    --start: 7;      /* 開始時刻 */
    --end: 18;       /* 終了時刻 */
    --hour: 120px;   /* 1時間あたりの高さ */
    --col: 435px;    /* 片側のカラム幅 */
    --gap: 130px;    /* カラム間の余白 */
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 0 var(--gap);
    margin-top: 55px;
}
@media screen and (max-width:768px){
    /* SPは上下に分ける */
    .flow-schedule__body{
        width: auto;
        --hour: 74px;
        display: block;
        margin-top: 30px;
    }
}
.flow-schedule__group{
    flex: 0 0 var(--col);
    min-width: 0;
}
@media screen and (max-width:768px){
    .flow-schedule__group{
        width: 100%;
    }
    .flow-schedule__group + .flow-schedule__group{
        margin-top: 55px;
    }
}

/* 見出しの帯 */
.flow-schedule__label{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    padding: 0 15px;
    border-radius: 30px 30px 0 0;
    background: #6b7f4e;
    color: #fff;
    font-size: 2.1rem;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: .04em;
    text-align: center;
}
@media screen and (max-width:768px){
    .flow-schedule__label{
        height: 48px;
        padding: 0 8px;
        font-size: 1.4rem;
        border-radius: 15px 15px 0 0;
    }
}

/* タイムライン */
.flow-schedule__chart{
    position: relative;
    height: calc((var(--end) - var(--start)) * var(--hour) + 60px);
    margin-top: 60px;
}
@media screen and (max-width:768px){
    .flow-schedule__chart{
        margin-top: 40px;
        padding-left: 52px; /* 左に時刻ラベルの場所を空ける */
    }
}

/* 時刻の目盛り */
.flow-schedule__hours{
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* PCは2つ目の目盛りを隠し、1つ目を中央まで伸ばして共有する */
.flow-schedule__group + .flow-schedule__group .flow-schedule__hours{
    display: none;
}
.flow-schedule__hour{
    position: absolute;
    top: calc((var(--h) - var(--start)) * var(--hour));
    left: 0;
    width: calc(200% + var(--gap));
    transform: translateY(-50%);
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .04em;
    text-align: center;
}
/* 点線はカラムの幅ぶんだけ引く（中央の時刻部分には引かない） */
.flow-schedule__hour::before,
.flow-schedule__hour::after{
    position: absolute;
    top: 50%;
    width: var(--col);
    border-top: 1px dashed #6b7f4e;
    content: "";
}
.flow-schedule__hour::before{
    left: 0;
}
.flow-schedule__hour::after{
    right: 0;
}
.flow-schedule__hour span{
    position: relative;
}
@media screen and (max-width:768px){
    .flow-schedule__group + .flow-schedule__group .flow-schedule__hours{
        display: block;
    }
    .flow-schedule__hour{
        width: 100%;
        font-size: 1.4rem;
        text-align: left;
    }
    .flow-schedule__hour::before{
        width: 100%;
    }
    .flow-schedule__hour::after{
        content: none;
    }
    .flow-schedule__hour span{
        padding: 0 8px 0 0;
        background: #fff;
    }
}

/* 項目
   --t に時刻を小数で入れる（例 7:30 → 7.5） */
.flow-schedule__list{
    --from: 7.5; /* 縦線の開始時刻。最初の項目の --t と揃える */
    position: relative;
    height: 100%;
}
/* 縦線は最初の丸ちょぼの位置から下へ引く */
.flow-schedule__list:before{
    content: "";
    background: #1f3d2a;
    width: 1px;
    position: absolute;
    top: calc((var(--from) - var(--start)) * var(--hour));
    bottom: 0;
    left: 10px;
}
.flow-schedule__item{
    --lh: 1.2; /* line-height。1行目の中心を時刻に合わせるために使う */
    position: absolute;
    top: calc((var(--t) - var(--start)) * var(--hour));
    left: 0;
    transform: translateY(calc(var(--lh) * -.5em));
    width: 100%;
    padding-left: 32px;
    font-size: 2rem;
    font-weight: bold;
    line-height: var(--lh);
    letter-spacing: .04em;
}
/* 2行以上でも1行目の高さに合わせる */
.flow-schedule__item::before{
    position: absolute;
    top: calc(var(--lh) * .5em);
    left: 11px;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border: 1px solid var(--accent-green);
    border-radius: 50%;
    background: #fff;
    content: "";
}
@media screen and (max-width:768px){
    .flow-schedule__item{
        --lh: 1.6;
        padding-left: 18px;
        font-size: 1.4rem;
    }
    .flow-schedule__item::before{
        left: 0;
        width: 12px;
        height: 12px;
    }
    .flow-schedule__list:before{
        left: 0;
    }
}

/*---------------------
flow-gallery（ギャラリー）
------------------------*/
.flow-gallery{
    padding: 50px 0;
    overflow: hidden;
}
@media screen and (max-width:768px){
    .flow-gallery{
        padding: 0;
    }
}
.flow-gallery > .sec-title1{
    width: min(100% - 60px, 1200px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .flow-gallery > .sec-title1{
        width: 100%;
        padding: 0 var(--inner-sides_sp);
    }
}

/* 流れ続けるスライダー（画面幅いっぱい） */
.flow-gallery__slider{
    width: 100%;
    margin-top: 55px;
}
@media screen and (max-width:768px){
    .flow-gallery__slider{
        margin-top: 30px;
    }
}
.flow-gallery__slide{
    flex: 0 0 auto;
    width: 345px;
    min-width: 345px;
    max-width: 345px;
}
.flow-gallery__slide img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 515 / 389;
    object-fit: cover;
}
@media screen and (max-width:768px){
    .flow-gallery__slide{
        width: 200px;
        min-width: 200px;
        max-width: 200px;
    }
}

/*-------------
404
-------------*/
.content._404{
    padding: 100px 0;
}
.err404{
    width: var(--inner-width);
    margin: 0 auto;
    text-align: center;
}
.err404-title{
    margin-bottom: 23px;
    font-size: 36px;
    font-weight: bold;
    line-height: calc(1em + 8px);
}
.err404-title::after{
    display: block;
    margin-top: 12px;
    color: var(--accent-green);
    font-size: 2rem;
    line-height: 1;
    content: attr(data-en);
}
.err404-btn{
    width: 360px;
    margin: 45px auto 0;
}
.err404-btn a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 14px;
    position: relative;
    width: auto;
    height: 60px;
    padding: 0 10px 0 26px;
    border-radius: 999px;
    background: var(--accent-green);
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .04em;
    transition: opacity var(--ease);
}
.err404-btn a::after{
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    background-image: url(../images/arrow_right.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px auto;
    content: "";
}
@media screen and (max-width:768px){
    .content._404{
        padding: 30px 0 80px;
    }
    .err404{
        text-align: left;
    }
    .err404-title{
        margin: 21px 0 24px;
        font-size: 2.7rem;
    }
    .err404-title::after{
        font-size: 1.6rem;
    }
    .err404-btn{
        width: 100%;
        margin-top: 30px;
    }
    .err404-btn a{
        justify-content: center;
        gap: 0;
        width: 100%;
        height: 50px;
        padding: 0;
        font-size: 1.6rem;
    }
    .err404-btn a::after{
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        background-size: 7px;
        background-position: 7px center;
    }
}
@media (any-hover: hover){
    .err404-btn a:hover{
        opacity: .8;
    }
}