@charset "UTF-8";
/* ==========================================================================
   アクセス時の演出「循環の輪に、若葉が芽吹く。」
   集める → めぐる → 芽吹く → ひろがる（波の縁で画面が上がり、ページが現れる）
   トップページ（index.php）と管理画面で使う。1回の訪問につき一度だけ。
   ========================================================================== */

.dc-intro {
    /* 色はここで決め、キャンバスもこの値を読む */
    --i-ground: #F3FAF7;
    --i-ink:    #05543C;
    --i-sub:    #00794F;
    --i-ring:   #00794F;
    --i-arrow:  #00A469;
    --i-leaf-1: #00A469;
    --i-leaf-2: #55B565;
    --i-leaf-3: #2E8B57;
    --i-earth-1:#D6EDE2;
    --i-earth-2:#8FCB9B;
    --i-earth-3:#55B565;
    --i-dust-1: #8FB5A2;
    --i-dust-2: #B9A98A;
    --i-dust-3: #6F8A7E;
    --i-spark:  #F0C64A;

    position: fixed;
    inset: 0;
    z-index: 5000;
    background: var(--i-ground);
    overflow: visible;
    transition: transform 1.1s cubic-bezier(.76, 0, .24, 1);
    /* 読み込みに失敗して始まらないときの保険：3秒で自動的に外す */
    animation: dcIntroFailsafe 0s linear 3s forwards;
}
.dc-intro.is-running { animation: none; }

/* 管理画面の色 */
.dc-intro--admin {
    --i-ground: #EEF4F0;
    --i-ink:    #0F2A20;
    --i-sub:    #00794F;
}

/* 画面が上がるとき、下の縁を波の形にする（サイトの「波」の区切りと同じ考え方） */
.dc-intro::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: clamp(48px, 9vw, 110px);
    background: var(--i-ground);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v40c-150 50-300 60-450 30S450 0 300 30 75 90 0 60z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v40c-150 50-300 60-450 30S450 0 300 30 75 90 0 60z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.dc-intro.is-leaving { transform: translateY(calc(-100% - clamp(48px, 9vw, 110px))); }

html.dc-intro-off .dc-intro { display: none; }
html.dc-intro-lock, html.dc-intro-lock body { overflow: hidden; }

.dc-intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.dc-intro__text {
    position: absolute;
    left: 16px;
    right: 16px;
    top: var(--text-top, 70%);
    text-align: center;
    pointer-events: none;
}
.dc-intro__title {
    margin: 0;
    font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 1rem + 2.2vw, 2.4rem);
    letter-spacing: .14em;
    line-height: 1.5;
    color: var(--i-ink);
    white-space: nowrap;
}
.dc-intro__title span {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(.3em);
    transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1), filter 1.2s cubic-bezier(.22, 1, .36, 1), transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.dc-intro__title span.is-on { opacity: 1; filter: none; transform: none; }
.dc-intro__sub {
    margin: .7em 0 0;
    font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    font-size: clamp(.82rem, .76rem + .3vw, .98rem);
    letter-spacing: .16em;
    color: var(--i-sub);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
    word-break: keep-all;
}
.dc-intro__sub.is-on { opacity: 1; transform: none; }

.dc-intro__skip {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    right: 16px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--i-ink) 25%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--i-ground) 80%, transparent);
    color: var(--i-ink);
    font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    font-size: .8rem;
    letter-spacing: .08em;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s, background .3s;
}
.dc-intro__skip.is-on { opacity: 1; pointer-events: auto; }
.dc-intro__skip:hover { background: var(--i-ground); }

@keyframes dcIntroFailsafe { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
    .dc-intro { display: none; }
}
@media print {
    .dc-intro { display: none !important; }
}