@charset "UTF-8";
/* =============================================================
   site-v2.css — 2026-09-16 ロシナンテ追加分
   style.css（富田さん制作）の「あと」に読み込む増分レイヤー。
   ベンチマーク3本（嘉瀬こどもの森／明星幼稚園／リニエ シューレ）を
   参考にパーツと動きを足したもの。新しいものは全部 .nh- 接頭辞で、
   既存クラスとぶつからないようにしてある。
   既存への上書きは §1 のみ（色をロゴに合わせる分）。
   ============================================================= */

/* -------------------------------------------------------------
   1. 配色をロゴに合わせる
   ロゴ（ネイチャーハピネス心育）は水彩の暖色。
   既存の #0078d7（強い青）＋ #a9df00（ライム）はロゴと合わず、
   ベンチマーク3本もすべて自然で柔らかい色だったため寄せる。
   旧トークンは残す（既存CSSが参照しているため）。
   ------------------------------------------------------------- */
:root {
    --nh-salmon: #ee8a76;      /* ロゴ「心」の色 */
    --nh-salmon-deep: #d96f5b;
    --nh-pink: #e8709e;        /* ロゴ 右の子ども */
    --nh-yellow: #f2b33f;      /* ロゴ 左の子ども */
    --nh-green: #8cbf63;       /* ロゴ 葉 */
    --nh-green-deep: #6a9a45;
    --nh-sage: #a9c48c;
    --nh-purple: #a98cc4;
    --nh-sky: #7cb6cf;
    --nh-brown: #6b5142;       /* ロゴ 文字色＝本文の基準色 */
    --nh-brown-light: #8d7668;
    --nh-cream: #fdf9f1;
    --nh-cream-deep: #f6efe1;
    --nh-line: #e8ddc9;
    --nh-shadow: 0 18px 40px rgba(107, 81, 66, .12);
    --nh-shadow-soft: 0 10px 24px rgba(107, 81, 66, .08);
    --nh-radius: 22px;

    /* 既存トークンの寄せ替え（既存パーツもロゴ色になる） */
    --color-text: #4a3b32;
    --color-muted: #8d7668;
    --color-blue: #ee8a76;
    --color-deep-blue: #d96f5b;
    --color-lime: #8cbf63;
    --color-cream: #fdf9f1;
    --color-line: #e8ddc9;
}

body {
    color: var(--color-text);
}

/* 下層ページの水玉背景も暖色へ */
body.page-lower {
    background-image: radial-gradient(circle, rgba(238, 138, 118, .07) 2px, transparent 3px);
}

/* -------------------------------------------------------------
   2. 共通の小物
   ------------------------------------------------------------- */
.nh-wrap {
    width: min(1120px, calc(100% - 48px));
    margin-inline: auto;
}

.nh-wrap-narrow {
    width: min(880px, calc(100% - 48px));
    margin-inline: auto;
}

.nh-section {
    position: relative;
    padding: 96px 0;
}

.nh-section-cream {
    background: var(--nh-cream);
}

.nh-section-sage {
    background: linear-gradient(180deg, #f2f7ea 0%, #e9f1de 100%);
}

/* 見出し（英字キッカー＋日本語） */
.nh-head {
    margin-bottom: 44px;
    text-align: center;
}

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

.nh-kicker {
    display: block;
    margin: 0 0 6px;
    color: var(--nh-salmon);
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.nh-head h2 {
    margin: 0;
    font-size: clamp(24px, 4.2vw, 34px);
    line-height: 1.5;
    letter-spacing: .02em;
}

.nh-head p {
    max-width: 44em;
    margin: 14px auto 0;
    color: var(--nh-brown-light);
    font-size: 15px;
}

.nh-head-left p {
    margin-inline: 0;
}

/* 縦書きの英字ラベル（嘉瀬・明星の左端ラベル） */
.nh-vlabel {
    position: absolute;
    top: 96px;
    left: 24px;
    color: rgba(107, 81, 66, .3);
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3em;
    writing-mode: vertical-rl;
    pointer-events: none;
}

/* 波形の区切り（嘉瀬・明星のアーチ） */
.nh-wave {
    display: block;
    width: 100%;
    height: clamp(40px, 6vw, 82px);
}

.nh-wave path {
    fill: currentColor;
}

/* 丸い矢印ボタン＝HOVER-06（背景が左から差し込み・リングが回る） */
.nh-round-btn {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 14px;
    padding: 14px 20px 14px 28px;
    overflow: hidden;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    color: var(--nh-brown);
    font-weight: 700;
    font-size: 15px;
    transition: color .3s ease;
}

.nh-round-btn::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s cubic-bezier(.2, .8, .3, 1);
    background: var(--nh-salmon);
    content: "";
}

.nh-round-btn > * {
    position: relative;
    z-index: 1;
}

.nh-round-btn .nh-ring {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}

.nh-round-btn .nh-ring::after {
    content: "\2192";
}

.nh-round-btn:hover,
.nh-round-btn:focus-visible {
    color: #fff;
}

.nh-round-btn:hover::before,
.nh-round-btn:focus-visible::before {
    transform: scaleX(1);
}

.nh-round-btn:hover .nh-ring,
.nh-round-btn:focus-visible .nh-ring {
    transform: rotate(360deg);
}

/* -------------------------------------------------------------
   3. 右端の縦タブ（リニエ シューレ）
   スマホでは出さない（下部固定バーがあるため）
   ------------------------------------------------------------- */
.nh-rail {
    display: none;
}

@media (min-width: 1100px) {
    .nh-rail {
        display: flex;
        position: fixed;
        top: 50%;
        right: 0;
        z-index: 900;
        flex-direction: column;
        gap: 8px;
        transform: translateY(-50%);
    }

    .nh-rail a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 20px 10px;
        border-radius: 10px 0 0 10px;
        background: var(--nh-brown);
        box-shadow: -4px 6px 16px rgba(107, 81, 66, .18);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .12em;
        writing-mode: vertical-rl;
        transition: padding-right .25s ease, background-color .25s ease;
    }

    .nh-rail a.nh-rail-accent {
        background: var(--nh-salmon);
    }

    .nh-rail a:hover,
    .nh-rail a:focus-visible {
        padding-right: 18px;
        background: var(--nh-salmon-deep);
    }
}

/* -------------------------------------------------------------
   4. ヒーロー（リニエ＝傾いた写真3枚／明星＝大きなキャッチ）
   ------------------------------------------------------------- */
.nh-hero {
    position: relative;
    padding: 132px 0 0;
    overflow: hidden;
    background: linear-gradient(180deg, #eef5e6 0%, #f7f2e6 62%, var(--nh-cream) 100%);
}

.nh-hero-blob {
    position: absolute;
    top: -18%;
    left: 50%;
    z-index: 0;
    width: 140%;
    height: 78%;
    transform: translateX(-50%);
    border-radius: 0 0 52% 48% / 0 0 26% 24%;
    background: linear-gradient(160deg, #cfe3b8 0%, #b9d9a5 100%);
    opacity: .55;
}

.nh-hero-inner {
    display: grid;
    position: relative;
    z-index: 2;
    gap: 34px;
    justify-items: center;
}

/* 写真3枚を少し傾けて重ねる */
.nh-hero-photos {
    display: flex;
    justify-content: center;
    width: min(1000px, calc(100% - 32px));
}

.nh-hero-photos figure {
    width: clamp(150px, 26vw, 288px);
    margin: 0;
    overflow: hidden;
    border: 6px solid #fff;
    border-radius: 26px;
    box-shadow: var(--nh-shadow);
    line-height: 0;
}

.nh-hero-photos img {
    width: 100%;
    height: clamp(180px, 30vw, 320px);
    object-fit: cover;
}

.nh-hero-photos figure:nth-child(1) {
    transform: rotate(-5deg) translateY(14px);
}

.nh-hero-photos figure:nth-child(2) {
    z-index: 2;
    margin-inline: -16px;
    transform: rotate(1.5deg);
}

.nh-hero-photos figure:nth-child(3) {
    transform: rotate(5deg) translateY(10px);
}

/* 立ち上がり（LOAD） */
.nh-hero-photos figure {
    animation: nh-card-in .9s cubic-bezier(.2, .8, .3, 1) backwards;
}

.nh-hero-photos figure:nth-child(1) { animation-delay: .05s; }
.nh-hero-photos figure:nth-child(2) { animation-delay: .18s; }
.nh-hero-photos figure:nth-child(3) { animation-delay: .31s; }

@keyframes nh-card-in {
    from {
        transform: translateY(46px) rotate(0deg);
        opacity: 0;
    }
}

/* 丸いバッジ（リニエの「0歳〜15歳」）
   ※ mask で縁をギザギザにすると中の文字まで削れるため、
      縁取りは内側の破線リング（::before）で表現する */
.nh-badge {
    display: grid;
    position: absolute;
    top: clamp(96px, 14vw, 156px);
    right: max(14px, calc(50% - 548px));
    z-index: 3;
    place-content: center;
    width: clamp(104px, 13vw, 136px);
    height: clamp(104px, 13vw, 136px);
    margin: 0;
    transform: rotate(-7deg);
    border-radius: 50%;
    background: var(--nh-salmon);
    box-shadow: var(--nh-shadow);
    color: #fff;
    text-align: center;
    line-height: 1.35;
}

.nh-badge::before {
    position: absolute;
    inset: 7px;
    border: 1.5px dashed rgba(255, 255, 255, .6);
    border-radius: 50%;
    content: "";
}

.nh-badge small {
    display: block;
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    opacity: .92;
}

.nh-badge strong {
    display: block;
    margin: 2px 0;
    font-family: var(--font-round);
    font-size: clamp(14px, 1.9vw, 18px);
}

.nh-badge small:last-child {
    font-family: var(--font-jp);
    font-size: 11px;
    letter-spacing: .04em;
}

@media (max-width: 767px) {
    .nh-badge {
        top: 82px;
        right: 10px;
        width: 88px;
        height: 88px;
    }

    .nh-badge strong {
        font-size: 13px;
    }
}

.nh-hero-copy {
    width: min(1000px, calc(100% - 48px));
    text-align: center;
}

.nh-hero-copy h1 {
    margin: 0 0 16px;
    color: var(--nh-brown);
    font-size: clamp(26px, 5.4vw, 52px);
    line-height: 1.45;
    letter-spacing: .02em;
}

.nh-hero-copy h1 .nh-accent {
    color: var(--nh-salmon);
}

/* LOAD-01 1文字ずつ立ち上がる */
.nh-rise span {
    display: inline-block;
    transform: translateY(.5em);
    animation: nh-rise .7s cubic-bezier(.2, .8, .3, 1) forwards;
    opacity: 0;
}

@keyframes nh-rise {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.nh-hero-lead {
    max-width: 40em;
    margin: 0 auto 26px;
    color: var(--nh-brown-light);
    font-size: clamp(14px, 1.7vw, 17px);
}

.nh-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.nh-hero-foot {
    position: relative;
    z-index: 2;
    margin-top: 42px;
    color: var(--nh-cream);
}

/* -------------------------------------------------------------
   5. マーキー帯（明星の MEISEI LETTER）＝SCROLL-07 の簡易版
   ------------------------------------------------------------- */
.nh-marquee {
    padding: 14px 0;
    overflow: hidden;
    background: var(--nh-salmon);
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
}

.nh-marquee-track {
    display: flex;
    width: max-content;
    animation: nh-marquee 32s linear infinite;
    gap: 40px;
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .28em;
    white-space: nowrap;
}

@keyframes nh-marquee {
    to {
        transform: translateX(-50%);
    }
}

.nh-marquee:hover .nh-marquee-track {
    animation-play-state: paused;
}

/* -------------------------------------------------------------
   6. お悩みブロブ（リニエ「子育てのお悩みを解決するために」）
   ------------------------------------------------------------- */
.nh-worry-grid {
    display: grid;
    gap: 40px 28px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

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

.nh-worry-blob {
    display: grid;
    position: relative;
    place-items: center;
    width: clamp(160px, 20vw, 196px);
    height: clamp(160px, 20vw, 196px);
    margin: 0 auto -34px;
    border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
    animation: nh-blob 14s ease-in-out infinite;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
}

.nh-worry:nth-child(2) .nh-worry-blob { animation-delay: -4s; }
.nh-worry:nth-child(3) .nh-worry-blob { animation-delay: -8s; }

@keyframes nh-blob {
    50% {
        border-radius: 54% 46% 44% 56% / 44% 56% 44% 56%;
    }
}

.nh-worry-blob img {
    width: 54%;
    height: auto;
}

.nh-worry-tag {
    display: inline-block;
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--nh-brown);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.nh-worry-body {
    display: grid;
    place-content: center;
    min-height: 152px;
    padding: 48px 24px 24px;
    border-radius: 44% 56% 48% 52% / 22% 22% 78% 78%;
    color: #fff;
    font-size: 15px;
    line-height: 1.8;
}

.nh-worry:nth-child(1) .nh-worry-body { background: var(--nh-sage); }
.nh-worry:nth-child(2) .nh-worry-body { background: var(--nh-salmon); }
.nh-worry:nth-child(3) .nh-worry-body { background: var(--nh-yellow); }

.nh-worry-answer {
    margin-top: 52px;
    text-align: center;
}

.nh-worry-answer p {
    margin: 0 auto;
    max-width: 34em;
    font-family: var(--font-round);
    font-size: clamp(17px, 2.6vw, 24px);
    line-height: 1.85;
}

.nh-worry-answer .nh-accent {
    color: var(--nh-salmon);
}

/* -------------------------------------------------------------
   7. コンセプト
   ------------------------------------------------------------- */
.nh-concept {
    display: grid;
    align-items: center;
    gap: 48px;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .nh-concept {
        grid-template-columns: 1.05fr .95fr;
    }
}

.nh-concept-photo {
    position: relative;
    margin: 0;
    line-height: 0;
}

.nh-concept-photo img {
    width: 100%;
    height: clamp(260px, 42vw, 430px);
    border-radius: 48% 52% 46% 54% / 46% 48% 52% 54%;
    object-fit: cover;
}

.nh-concept-catch {
    margin: 0 0 22px;
    font-family: var(--font-round);
    font-size: clamp(24px, 4.4vw, 40px);
    line-height: 1.5;
}

.nh-concept-catch .nh-accent {
    color: var(--nh-salmon);
}

.nh-concept p {
    color: var(--nh-brown-light);
    font-size: 15.5px;
}

/* -------------------------------------------------------------
   8. 支援の3本柱（リニエのサービスカード＝左に色帯＋番号）
   HOVER-08：アイコンはそのまま、文字エリアだけ反転
   ------------------------------------------------------------- */
.nh-pillars {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.nh-pillar {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 30px 26px 30px 32px;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}

.nh-pillar::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    content: "";
}

.nh-pillar:nth-child(1)::before { background: var(--nh-sage); }
.nh-pillar:nth-child(2)::before { background: var(--nh-salmon); }
.nh-pillar:nth-child(3)::before { background: var(--nh-yellow); }

.nh-pillar:hover {
    transform: translateY(-6px);
    box-shadow: var(--nh-shadow);
}

.nh-pillar-no {
    margin: 0 0 14px;
    color: var(--nh-brown-light);
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
}

.nh-pillar-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 50%;
}

.nh-pillar:nth-child(1) .nh-pillar-icon { background: #edf4e3; }
.nh-pillar:nth-child(2) .nh-pillar-icon { background: #fdeeea; }
.nh-pillar:nth-child(3) .nh-pillar-icon { background: #fdf3e0; }

.nh-pillar-icon img {
    width: 28px;
    height: 28px;
}

.nh-pillar h3 {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.6;
}

.nh-pillar-dots {
    margin: 12px 0 14px;
    border: 0;
    border-top: 1px dashed var(--nh-line);
}

.nh-pillar p {
    margin: 0;
    color: var(--nh-brown-light);
    font-size: 14.5px;
}

/* -------------------------------------------------------------
   9. 5領域（バッジ5つ）
   ------------------------------------------------------------- */
.nh-domains {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}

.nh-domain {
    padding: 26px 18px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    text-align: center;
}

.nh-domain-no {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 800;
}

.nh-domain:nth-child(1) .nh-domain-no { background: var(--nh-salmon); }
.nh-domain:nth-child(2) .nh-domain-no { background: var(--nh-yellow); }
.nh-domain:nth-child(3) .nh-domain-no { background: var(--nh-green); }
.nh-domain:nth-child(4) .nh-domain-no { background: var(--nh-sky); }
.nh-domain:nth-child(5) .nh-domain-no { background: var(--nh-purple); }

.nh-domain h3 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.6;
}

.nh-domain p {
    margin: 0;
    color: var(--nh-brown-light);
    font-size: 13.5px;
    line-height: 1.8;
}

/* -------------------------------------------------------------
   10. 1日の流れ（時刻付きタイムライン）
   ------------------------------------------------------------- */
.nh-tabs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 34px;
}

.nh-tabs button {
    padding: 10px 22px;
    border: 1.5px solid var(--nh-line);
    border-radius: 999px;
    background: #fff;
    color: var(--nh-brown-light);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.nh-tabs button.is-active {
    border-color: var(--nh-salmon);
    background: var(--nh-salmon);
    color: #fff;
}

.nh-timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 clamp(64px, 11vw, 104px);
    list-style: none;
}

.nh-timeline::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: clamp(38px, 7vw, 62px);
    border-left: 2px dashed var(--nh-line);
    content: "";
}

.nh-timeline li {
    position: relative;
    padding: 0 0 30px;
}

.nh-timeline li:last-child {
    padding-bottom: 0;
}

.nh-timeline time {
    position: absolute;
    top: 2px;
    left: calc(clamp(64px, 11vw, 104px) * -1);
    width: clamp(58px, 10vw, 92px);
    color: var(--nh-salmon);
    font-family: var(--font-en);
    font-size: clamp(13px, 1.7vw, 15px);
    font-weight: 800;
    text-align: right;
}

.nh-timeline li::before {
    position: absolute;
    top: 6px;
    left: calc(clamp(26px, 4.2vw, 44px) * -1);
    width: 13px;
    height: 13px;
    border: 3px solid var(--nh-salmon);
    border-radius: 50%;
    background: #fff;
    content: "";
}

.nh-timeline h3 {
    margin: 0 0 4px;
    font-size: 17px;
}

.nh-timeline p {
    margin: 0;
    color: var(--nh-brown-light);
    font-size: 14.5px;
}

.nh-timeline-note {
    margin: 26px 0 0;
    color: var(--nh-brown-light);
    font-size: 13px;
    text-align: center;
}

/* -------------------------------------------------------------
   11. 写真タイルの入口（明星の6枚メニュー）
   HOVER-07：写真が寄り、白がかかって文字が左から描かれる
   ------------------------------------------------------------- */
.nh-tiles {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}

.nh-tile {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: var(--nh-shadow-soft);
    line-height: 0;
}

.nh-tile img {
    width: 100%;
    height: clamp(120px, 15vw, 158px);
    transition: transform .6s cubic-bezier(.2, .8, .3, 1);
    object-fit: cover;
}

.nh-tile-veil {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: background-color .4s ease;
}

.nh-tile-name {
    display: flex;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(74, 59, 50, 0) 0%, rgba(74, 59, 50, .74) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.nh-tile-more {
    position: absolute;
    bottom: 14px;
    left: 14px;
    max-width: 0;
    overflow: hidden;
    color: var(--nh-brown);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: max-width .5s cubic-bezier(.2, .8, .3, 1);
}

.nh-tile:hover img,
.nh-tile:focus-visible img {
    transform: scale(1.08);
}

.nh-tile:hover .nh-tile-veil,
.nh-tile:focus-visible .nh-tile-veil {
    background: rgba(255, 255, 255, .78);
}

.nh-tile:hover .nh-tile-name,
.nh-tile:focus-visible .nh-tile-name {
    opacity: 0;
}

.nh-tile:hover .nh-tile-more,
.nh-tile:focus-visible .nh-tile-more {
    max-width: 200px;
}

/* -------------------------------------------------------------
   12. お知らせ（明星のカード横並び）
   HOVER-03：画像ズーム＋タイトル下線が左から伸びる
   ------------------------------------------------------------- */
.nh-news {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.nh-news-card {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    transition: transform .3s ease, box-shadow .3s ease;
}

.nh-news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nh-shadow);
}

.nh-news-label {
    align-self: flex-start;
    margin: 0 0 12px;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.nh-label-news { background: #fdeeea; color: var(--nh-salmon-deep); }
.nh-label-prepare { background: #edf4e3; color: var(--nh-green-deep); }
.nh-label-recruit { background: #fdf3e0; color: #b9821f; }

.nh-news-card h3 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.65;
}

.nh-news-card h3 span {
    display: inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size .45s cubic-bezier(.2, .8, .3, 1);
}

.nh-news-card:hover h3 span {
    background-size: 100% 1px;
}

.nh-news-card time {
    margin-top: auto;
    color: var(--nh-brown-light);
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 700;
}

/* -------------------------------------------------------------
   13. 空き状況
   ------------------------------------------------------------- */
.nh-slots {
    padding: 34px clamp(20px, 4vw, 40px);
    border-radius: var(--nh-radius);
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
}

.nh-slot-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.nh-slot-day {
    padding: 18px 10px;
    border-radius: 14px;
    background: var(--nh-cream);
    text-align: center;
}

.nh-slot-day h3 {
    margin: 0 0 10px;
    font-size: 16px;
}

.nh-slot-day p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 4px;
    color: var(--nh-brown-light);
    font-size: 13px;
}

.nh-mark {
    font-family: var(--font-en);
    font-size: 17px;
    font-weight: 800;
}

.nh-mark-open { color: var(--nh-green-deep); }
.nh-mark-few { color: #d59b1c; }
.nh-mark-full { color: var(--nh-salmon-deep); }

.nh-slot-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    margin: 22px 0 0;
    padding: 0;
    color: var(--nh-brown-light);
    font-size: 13px;
    list-style: none;
}

.nh-slot-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nh-slot-cta {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px dashed var(--nh-line);
    text-align: center;
}

.nh-slot-cta p {
    margin: 0 0 16px;
    color: var(--nh-brown-light);
    font-size: 14px;
}

/* -------------------------------------------------------------
   14. ご利用の流れ（4ステップ）
   ------------------------------------------------------------- */
.nh-steps {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    counter-reset: nh-step;
}

.nh-step {
    position: relative;
    padding: 34px 22px 26px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    counter-increment: nh-step;
}

.nh-step::before {
    position: absolute;
    top: -16px;
    left: 22px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--nh-salmon);
    color: #fff;
    content: "STEP " counter(nh-step);
    font-family: var(--font-en);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    text-align: center;
}

.nh-step h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.nh-step p {
    margin: 0;
    color: var(--nh-brown-light);
    font-size: 14px;
}

/* -------------------------------------------------------------
   15. 料金
   ------------------------------------------------------------- */
.nh-fee-table {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border-collapse: collapse;
    box-shadow: var(--nh-shadow-soft);
    font-size: 14.5px;
}

.nh-fee-table th,
.nh-fee-table td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--nh-line);
    text-align: left;
}

.nh-fee-table thead th {
    background: var(--nh-cream-deep);
    font-size: 13.5px;
}

.nh-fee-table tbody th {
    width: 56%;
    font-weight: 500;
}

.nh-fee-table td {
    color: var(--nh-salmon-deep);
    font-weight: 700;
    white-space: nowrap;
}

.nh-fee-table tr:last-child th,
.nh-fee-table tr:last-child td {
    border-bottom: 0;
}

.nh-note {
    margin: 18px 0 0;
    padding: 0;
    color: var(--nh-brown-light);
    font-size: 13px;
    line-height: 1.9;
    list-style: none;
}

.nh-note li {
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.nh-note li::before {
    content: "※ ";
}

/* -------------------------------------------------------------
   16. 事業所概要（定義リスト）
   ------------------------------------------------------------- */
.nh-dl {
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
}

.nh-dl > div {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--nh-line);
}

@media (min-width: 720px) {
    .nh-dl > div {
        grid-template-columns: 220px 1fr;
    }
}

.nh-dl > div:last-child {
    border-bottom: 0;
}

.nh-dl dt {
    padding: 16px 20px;
    background: var(--nh-cream-deep);
    font-size: 14px;
    font-weight: 700;
}

.nh-dl dd {
    margin: 0;
    padding: 16px 20px;
    font-size: 14.5px;
}

/* -------------------------------------------------------------
   17. 写真の帯（明星のフッター上グリッド）
   ------------------------------------------------------------- */
.nh-photo-band {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    line-height: 0;
}

.nh-photo-band img {
    width: 100%;
    height: clamp(110px, 13vw, 168px);
    transition: transform .6s cubic-bezier(.2, .8, .3, 1);
    object-fit: cover;
}

.nh-photo-band img:hover {
    transform: scale(1.06);
}

/* -------------------------------------------------------------
   18. CTA帯
   ------------------------------------------------------------- */
.nh-cta {
    padding: 72px 0;
    background: linear-gradient(135deg, #f3f8ea 0%, #fdf1ea 100%);
    text-align: center;
}

.nh-cta h2 {
    margin: 0 0 10px;
    font-size: clamp(22px, 3.6vw, 32px);
}

.nh-cta p {
    margin: 0 0 28px;
    color: var(--nh-brown-light);
    font-size: 15px;
}

.nh-cta-routes {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    max-width: 840px;
    margin-inline: auto;
}

.nh-cta-route {
    display: block;
    padding: 22px 18px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    transition: transform .3s ease, box-shadow .3s ease;
}

.nh-cta-route:hover {
    transform: translateY(-4px);
    box-shadow: var(--nh-shadow);
}

.nh-cta-route span {
    display: block;
    margin-bottom: 4px;
    color: var(--nh-salmon);
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
}

.nh-cta-route strong {
    display: block;
    font-size: clamp(15px, 2vw, 19px);
    word-break: break-all;
}

/* -------------------------------------------------------------
   19. スクロールで現れる（既存 .reveal を上書きせず別名）
   ------------------------------------------------------------- */
.nh-in {
    transform: translateY(26px);
    opacity: 0;
    transition: transform .4s cubic-bezier(.2, .8, .3, 1), opacity .4s ease;  /* 2026-10-22 .8s→.4s */
}

/* 開いた時点で画面に見えているものは、動かさずにすぐ出す（site-v2.js が is-now を付ける） */
.nh-in.is-now {
    transition: none;
}

.nh-in.is-in {
    transform: none;
    opacity: 1;
}

.nh-in-d1 { transition-delay: .09s; }
.nh-in-d2 { transition-delay: .18s; }
.nh-in-d3 { transition-delay: .27s; }
.nh-in-d4 { transition-delay: .36s; }

/* -------------------------------------------------------------
   20. 下層ページの共通ヘッダ
   ------------------------------------------------------------- */
.nh-pagehead {
    position: relative;
    padding: 148px 0 56px;
    overflow: hidden;
    background: linear-gradient(180deg, #eef5e6 0%, var(--nh-cream) 100%);
    text-align: center;
}

.nh-pagehead h1 {
    margin: 0;
    font-size: clamp(24px, 4.6vw, 38px);
}

.nh-pagehead p {
    max-width: 40em;
    margin: 14px auto 0;
    color: var(--nh-brown-light);
    font-size: 15px;
}

.nh-crumb {
    padding: 14px 0;
    color: var(--nh-brown-light);
    font-size: 12.5px;
}

.nh-crumb a:hover {
    text-decoration: underline;
}

.nh-crumb span {
    margin: 0 8px;
    opacity: .5;
}

/* 目次（ページ内アンカー） */
.nh-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 0 56px;
    padding: 0;
    list-style: none;
}

.nh-anchors a {
    display: inline-block;
    padding: 9px 20px;
    border: 1.5px solid var(--nh-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 700;
    transition: border-color .25s ease, color .25s ease;
}

.nh-anchors a:hover {
    border-color: var(--nh-salmon);
    color: var(--nh-salmon);
}

/* -------------------------------------------------------------
   21. FAQ（アコーディオン）
   ------------------------------------------------------------- */
.nh-faq {
    display: grid;
    gap: 14px;
}

.nh-faq-item {
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
}

.nh-faq-q {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 20px 22px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    text-align: left;
    cursor: pointer;
}

.nh-faq-q::before {
    flex: none;
    color: var(--nh-salmon);
    content: "Q";
    font-family: var(--font-en);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
}

.nh-faq-q::after {
    flex: none;
    margin-left: auto;
    transition: transform .3s ease;
    content: "\002B";
    color: var(--nh-brown-light);
    font-size: 20px;
    line-height: 1.4;
}

.nh-faq-q[aria-expanded="true"]::after {
    transform: rotate(45deg);
}

.nh-faq-a {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0 22px 22px;
    color: var(--nh-brown-light);
    font-size: 14.5px;
}

.nh-faq-a::before {
    flex: none;
    color: var(--nh-sage);
    content: "A";
    font-family: var(--font-en);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
}

.nh-faq-a[hidden] {
    display: none;
}

/* -------------------------------------------------------------
   22. 動きを止める設定への配慮
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nh-hero-photos figure,
    .nh-rise span,
    .nh-worry-blob {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .nh-marquee-track {
        animation: none;
    }

    .nh-in {
        transform: none;
        opacity: 1;
        transition: none;
    }
}

/* -------------------------------------------------------------
   23. インラインSVGアイコン（2026-09-16 追加）
   既存の img アイコンは旧配色（青・ライム）で新しい配色と
   合わなかったため、新セクションだけ currentColor の線画に置換。
   既存ページの img アイコンはそのまま（触っていない）。
   ------------------------------------------------------------- */
.nh-worry-blob svg {
    width: 52%;
    height: auto;
}

.nh-worry:nth-child(1) .nh-worry-blob svg { color: var(--nh-sage); }
.nh-worry:nth-child(2) .nh-worry-blob svg { color: var(--nh-salmon); }
.nh-worry:nth-child(3) .nh-worry-blob svg { color: var(--nh-yellow); }

.nh-pillar-icon svg {
    width: 28px;
    height: 28px;
}

.nh-pillar:nth-child(1) .nh-pillar-icon svg { color: var(--nh-green-deep); }
.nh-pillar:nth-child(2) .nh-pillar-icon svg { color: var(--nh-salmon-deep); }
.nh-pillar:nth-child(3) .nh-pillar-icon svg { color: #b9821f; }

/* -------------------------------------------------------------
   24. スマホの作り直し（2026-09-16 実機確認で判明）
   ヒーローの写真3枚が 375px では横幅を超え、.nh-hero が
   overflow:hidden のため見出し「心豊かに。」が切れていた。
   グリッドのトラック幅を画面幅に固定し、写真を縮める。
   ------------------------------------------------------------- */
.nh-hero-inner {
    width: 100%;
}

@media (max-width: 600px) {
    .nh-hero {
        padding-top: 118px;
    }

    .nh-hero-photos {
        width: 100%;
        padding-inline: 8px;
    }

    .nh-hero-photos figure {
        width: 30vw;
        border-width: 4px;
        border-radius: 18px;
    }

    .nh-hero-photos img {
        height: 34vw;
    }

    .nh-hero-photos figure:nth-child(2) {
        margin-inline: -9px;
    }

    .nh-hero-copy {
        width: calc(100% - 32px);
    }

    .nh-hero-copy h1 {
        font-size: 27px;
        line-height: 1.5;
    }

    .nh-hero-lead {
        font-size: 14px;
    }

    .nh-hero-cta {
        gap: 10px;
    }

    .nh-round-btn {
        padding: 12px 16px 12px 22px;
        font-size: 14px;
    }

    .nh-round-btn .nh-ring {
        width: 30px;
        height: 30px;
    }

    /* 悩みブロブ：円と色面のつながりを見せる */
    .nh-worry-blob {
        width: 132px;
        height: 132px;
        margin-bottom: -44px;
    }

    .nh-worry-body {
        min-height: 128px;
        padding: 54px 22px 22px;
        border-radius: 46% 54% 48% 52% / 26% 26% 74% 74%;
        font-size: 14px;
    }

    .nh-worry-grid {
        gap: 30px 20px;
    }

    .nh-section {
        padding: 66px 0;
    }

    .nh-vlabel {
        display: none;
    }

    .nh-worry-answer p,
    .nh-concept-catch {
        font-size: 19px;
    }
}

/* =============================================================
   25. 2026-09-17 改訂
   ・空き状況はトップ／下層から撤去（会員ページへ集約）
   ・トップは導線、中身は下層。重複をなくすための部品
   ・下層に写真を足して厚みを出すための部品
   ============================================================= */

/* ---------- 「詳しく見る」導線行 ---------- */
.nh-more {
    margin-top: 34px;
    text-align: center;
}

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

/* ---------- ワイド写真帯（ベンチマークの大きい写真） ---------- */
.nh-band {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(260px, 38vw, 440px);
    overflow: hidden;
    text-align: center;
}

.nh-band img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nh-band::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(74, 59, 50, .18) 0%, rgba(74, 59, 50, .42) 100%);
    content: "";
}

.nh-band-inner {
    position: relative;
    z-index: 2;
    width: min(760px, calc(100% - 48px));
    color: #fff;
    text-shadow: 0 2px 14px rgba(58, 45, 37, .45);
}

.nh-band-inner p.nh-band-catch {
    margin: 0;
    font-family: var(--font-round);
    font-size: clamp(20px, 3.6vw, 34px);
    line-height: 1.7;
}

.nh-band-inner p.nh-band-sub {
    margin: 14px 0 0;
    font-size: clamp(13px, 1.8vw, 15.5px);
    line-height: 1.9;
}

/* 帯の上下を波形で抜く */
.nh-band-wave-top,
.nh-band-wave-bottom {
    position: absolute;
    left: 0;
    z-index: 3;
    width: 100%;
    color: var(--nh-cream);
}

.nh-band-wave-top { top: -1px; transform: scaleY(-1); }
.nh-band-wave-bottom { bottom: -1px; }

/* ---------- 写真グリッド（下層・キャプション付き） ---------- */
.nh-shots {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.nh-shot {
    margin: 0;
}

.nh-shot img {
    width: 100%;
    height: clamp(180px, 22vw, 240px);
    border-radius: 18px;
    box-shadow: var(--nh-shadow-soft);
    object-fit: cover;
}

.nh-shot figcaption {
    margin-top: 10px;
    color: var(--nh-brown-light);
    font-size: 13.5px;
    line-height: 1.8;
}

/* 傾けて重ねる2枚組（リニエ） */
.nh-pair {
    display: flex;
    justify-content: center;
    padding-block: 12px;
}

.nh-pair figure {
    width: clamp(160px, 30vw, 330px);
    margin: 0;
    overflow: hidden;
    border: 6px solid #fff;
    border-radius: 22px;
    box-shadow: var(--nh-shadow);
    line-height: 0;
}

.nh-pair img {
    width: 100%;
    height: clamp(170px, 26vw, 280px);
    object-fit: cover;
}

.nh-pair figure:nth-child(1) { transform: rotate(-3.5deg); }
.nh-pair figure:nth-child(2) { margin-left: -18px; transform: rotate(3deg) translateY(16px); }

/* ---------- 支援カードに写真を載せる ---------- */
.nh-pillar-photo {
    display: block;
    width: calc(100% + 58px);
    height: clamp(150px, 18vw, 190px);
    margin: -30px -26px 22px -32px;
    object-fit: cover;
}

/* ---------- 5領域のコンパクト版（トップ用・説明文なし） ---------- */
.nh-domains-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nh-domains-row li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px 12px 12px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    font-size: 15px;
    font-weight: 700;
}

.nh-domains-row b {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-en);
    font-size: 13px;
}

.nh-domains-row li:nth-child(1) b { background: var(--nh-salmon); }
.nh-domains-row li:nth-child(2) b { background: var(--nh-yellow); }
.nh-domains-row li:nth-child(3) b { background: var(--nh-green); }
.nh-domains-row li:nth-child(4) b { background: var(--nh-sky); }
.nh-domains-row li:nth-child(5) b { background: var(--nh-purple); }

/* ---------- トップの圧縮版：3本柱（タイトル＋1行） ---------- */
.nh-brief {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.nh-brief-item {
    display: block;
    position: relative;
    padding: 0 0 22px;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    transition: transform .3s ease, box-shadow .3s ease;
}

.nh-brief-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--nh-shadow);
}

.nh-brief-item img {
    width: 100%;
    height: clamp(140px, 16vw, 168px);
    transition: transform .6s cubic-bezier(.2, .8, .3, 1);
    object-fit: cover;
}

.nh-brief-item:hover img {
    transform: scale(1.06);
}

.nh-brief-no {
    display: block;
    margin: 18px 22px 8px;
    color: var(--nh-brown-light);
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .2em;
}

.nh-brief-item h3 {
    margin: 0 22px 8px;
    font-size: 17.5px;
    line-height: 1.6;
}

.nh-brief-item p {
    margin: 0 22px;
    color: var(--nh-brown-light);
    font-size: 14px;
}

/* ---------- トップの圧縮版：1日の流れ（3コマ） ---------- */
.nh-flow3 {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    counter-reset: nh-f3;
}

.nh-flow3 > div {
    position: relative;
    padding: 28px 22px 24px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    counter-increment: nh-f3;
}

.nh-flow3 time {
    display: block;
    margin-bottom: 6px;
    color: var(--nh-salmon);
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 800;
}

.nh-flow3 h3 {
    margin: 0 0 6px;
    font-size: 17px;
}

.nh-flow3 p {
    margin: 0;
    color: var(--nh-brown-light);
    font-size: 14px;
}

/* ---------- タイムラインに写真を添える ---------- */
.nh-timeline figure {
    margin: 12px 0 0;
    line-height: 0;
}

.nh-timeline figure img {
    width: 100%;
    max-width: 380px;
    height: clamp(150px, 20vw, 200px);
    border-radius: 16px;
    box-shadow: var(--nh-shadow-soft);
    object-fit: cover;
}

/* ---------- ステップに写真 ---------- */
.nh-step img {
    width: calc(100% + 44px);
    height: 132px;
    margin: -34px -22px 20px;
    border-radius: 18px 18px 0 0;
    object-fit: cover;
}

.nh-step-withphoto {
    padding-top: 0;
    overflow: hidden;
}

.nh-step-withphoto::before {
    top: 144px;
}

@media (max-width: 600px) {
    .nh-band { min-height: 230px; }
    .nh-pair figure { width: 46vw; }
    .nh-pair img { height: 34vw; }
    .nh-domains-row li { font-size: 13.5px; padding: 10px 16px 10px 10px; }
}

/* =============================================================
   26. 2026-09-17 ロゴを部位ごとに動かす
   元の logo.webp を8つの部品に切り分けて、元の位置に並べ直している
   （生成＝scripts/oneshot/anera_pages_20260916/split_logo.py）。
   並べ直した絵は元画像と同じ。動かすのは部品ごと。
   ============================================================= */
.nh-logo {
    display: block;
    line-height: 0;
}

.nh-logo-stage {
    display: block;
    position: relative;
    width: 286px;
    max-width: 100%;
    aspect-ratio: 1327 / 537;
}

.nh-lp {
    position: absolute;
    width: auto;
    height: auto;
    /* 動きの基準点は部品ごとに変える */
    transform-origin: 50% 50%;
}

/* 部品の位置（parts.json の % をそのまま） */
.nh-lp-tagline     { left: 1.5072%;  top: 0;        width: 82.1402%; }
.nh-lp-mark        { left: 0;        top: 11.1732%; width: 37.6790%; }
.nh-lp-child-left  { left: 9.7965%;  top: 49.9069%; width: 9.9472%;  transform-origin: 50% 100%; }
.nh-lp-child-right { left: 20.0452%; top: 48.7896%; width: 10.7008%; transform-origin: 50% 100%; }
.nh-lp-heart       { left: 16.4280%; top: 35.3818%; width: 6.7822%;  }
.nh-lp-kanji       { left: 37.3022%; top: 20.1117%; width: 46.1191%; }
.nh-lp-badge       { left: 78.7491%; top: 43.9479%; width: 20.9495%; }
.nh-lp-english     { left: 35.7950%; top: 70.7635%; width: 61.1907%; }

/* ---------- ページを開いたとき（LOAD）---------- */
.nh-lp {
    animation-duration: .8s;
    animation-timing-function: cubic-bezier(.2, .9, .3, 1);
    animation-fill-mode: backwards;
}

.nh-lp-mark        { animation-name: nh-logo-mark;   animation-delay: .05s; }
.nh-lp-child-left  { animation-name: nh-logo-jump;   animation-delay: .40s; }
.nh-lp-child-right { animation-name: nh-logo-jump;   animation-delay: .52s; }
.nh-lp-heart       { animation-name: nh-logo-pop;    animation-delay: .66s; }
.nh-lp-kanji       { animation-name: nh-logo-rise;   animation-delay: .22s; }
.nh-lp-badge       { animation-name: nh-logo-pop;    animation-delay: .46s; }
.nh-lp-english     { animation-name: nh-logo-fade;   animation-delay: .58s; }
.nh-lp-tagline     { animation-name: nh-logo-fade;   animation-delay: .70s; }

/* 2026-10-22 表示速度：組み上がるのはトップページだけ。下層では最初から完成したロゴを出す
   （ページを移るたびに約1.5秒かけて組み上がり、遅く見えていた） */
body:not(.home) .nh-lp {
    animation: none;
}

@keyframes nh-logo-mark {
    from { transform: rotate(-16deg) scale(.86); opacity: 0; }
}

@keyframes nh-logo-jump {
    0%   { transform: translateY(42%) scale(.7); opacity: 0; }
    62%  { transform: translateY(-12%) scale(1.04); opacity: 1; }
}

@keyframes nh-logo-pop {
    0%   { transform: scale(0); opacity: 0; }
    68%  { transform: scale(1.18); opacity: 1; }
}

@keyframes nh-logo-rise {
    from { transform: translateY(24%); opacity: 0; }
}

@keyframes nh-logo-fade {
    from { opacity: 0; }
}

/* ---------- マウスを乗せたとき（HOVER）---------- */
.nh-logo:hover .nh-lp-child-left,
.nh-logo:focus-visible .nh-lp-child-left {
    animation: nh-logo-hop .55s ease-out;
}

.nh-logo:hover .nh-lp-child-right,
.nh-logo:focus-visible .nh-lp-child-right {
    animation: nh-logo-hop .55s ease-out .08s;
}

.nh-logo:hover .nh-lp-heart,
.nh-logo:focus-visible .nh-lp-heart {
    animation: nh-logo-beat .8s ease-in-out;
}

@keyframes nh-logo-hop {
    30% { transform: translateY(-14%) scale(1.05); }
}

@keyframes nh-logo-beat {
    20% { transform: scale(1.22); }
    40% { transform: scale(.98); }
    60% { transform: scale(1.12); }
}

/* ヘッダーが縮んだときはロゴも小さく */
.site-header.scrolled .nh-logo-stage {
    width: 218px;
    transition: width .25s ease;
}

@media (max-width: 767px) {
    .nh-logo-stage { width: 200px; }
    .site-header.scrolled .nh-logo-stage { width: 170px; }
}

@media (prefers-reduced-motion: reduce) {
    .nh-lp { animation: none !important; opacity: 1; transform: none; }
}

/* =============================================================
   27. 2026-09-17 お悩みブロブのバランス直し
   元は「白い円が宙に浮き、下に浅い器が離れて置かれている」状態だった。
   ・白い円に色の輪郭を付けて、円として見えるようにする
   ・円が色の面に「はまる」まで深く重ねる
   ・面が横に広がりすぎて皿に見えていたので、幅を抑えて丈を出す
   ============================================================= */
.nh-worry-grid {
    gap: 44px 30px;
}

.nh-worry-blob {
    position: relative;
    z-index: 2;
    width: 136px;
    height: 136px;
    margin: 0 auto -68px;
    border: 2px solid currentColor;
    background: #fff;
}

.nh-worry:nth-child(1) .nh-worry-blob { color: var(--nh-sage); }
.nh-worry:nth-child(2) .nh-worry-blob { color: var(--nh-salmon); }
.nh-worry:nth-child(3) .nh-worry-blob { color: var(--nh-yellow); }

.nh-worry-blob svg {
    width: 46%;
}

.nh-worry-tag {
    top: -14px;
    padding: 6px 18px;
    font-size: 12.5px;
}

.nh-worry-body {
    display: grid;
    place-content: center;
    width: min(100%, 290px);
    min-height: 196px;
    margin: 0 auto;
    padding: 84px 26px 30px;
    border-radius: 46% 54% 48% 52% / 34% 34% 66% 66%;
    font-size: 14.5px;
    line-height: 1.85;
}

.nh-worry-body p {
    margin: 0;
}

@media (max-width: 600px) {
    .nh-worry-blob {
        width: 118px;
        height: 118px;
        margin-bottom: -60px;
    }

    .nh-worry-body {
        min-height: 172px;
        padding: 74px 22px 26px;
        font-size: 14px;
    }
}

/* =============================================================
   28. 2026-09-17 グローバルナビ
   ★この形のヘッダーでハンバーガーに畳む意味がないため、
     広い画面では最初からメニューを並べ、スクロールしたら
     ハンバーガーに切り替える（髙野さんご指示）。
     1280px 未満は従来どおり常にハンバーガー。
     ※1200pxで試したところナビが78pxはみ出したため1280pxにした。
   ============================================================= */
@media (min-width: 1280px) {
    /* --- ページ上部：メニューを並べる --- */
    .site-header:not(.scrolled) .header-inner {
        display: flex;
        align-items: center;
        gap: 18px;
        width: min(1320px, 100%);
    }

    .site-header:not(.scrolled) .menu-button,
    .site-header:not(.scrolled) .menu-close,
    .site-header:not(.scrolled) .header-tel {
        display: none;
    }

    .site-header:not(.scrolled) .global-nav {
        display: flex;
        position: static;
        z-index: auto;
        align-items: center;
        gap: 2px;
        width: auto;
        min-height: 0;
        margin-left: auto;
        padding: 0;
        transform: none;
        background: none;
    }

    /* ナビを並べている間はロゴを小さくして場所をあける */
    .site-header:not(.scrolled) .nh-logo-stage {
        width: 232px;
    }

    .site-header:not(.scrolled) .global-nav a {
        position: relative;
        min-height: 0;
        padding: 10px 11px;
        border-radius: 999px;
        background: none;
        color: var(--nh-brown);
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* 下線が左から伸びる（HOVER-03 と同じ考え方） */
    .site-header:not(.scrolled) .global-nav a::after {
        position: absolute;
        right: 11px;
        bottom: 6px;
        left: 11px;
        height: 2px;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .3s cubic-bezier(.2, .8, .3, 1);
        border-radius: 2px;
        background: var(--nh-salmon);
        content: "";
    }

    .site-header:not(.scrolled) .global-nav a:hover::after,
    .site-header:not(.scrolled) .global-nav a:focus-visible::after {
        transform: scaleX(1);
    }

    .site-header:not(.scrolled) .global-nav a.nav-cta {
        margin-left: 8px;
        padding: 11px 20px;
        background: var(--nh-salmon);
        color: #fff;
    }

    .site-header:not(.scrolled) .global-nav a.nav-cta::after {
        display: none;
    }

    .site-header:not(.scrolled) .global-nav a.nav-cta:hover {
        background: var(--nh-salmon-deep);
    }

    /* 文字が背景に沈まないよう、上部でも薄い白地を敷く */
    .site-header:not(.scrolled) .header-inner {
        background: rgba(255, 255, 255, .72);
        backdrop-filter: blur(6px);
        box-shadow: 0 8px 24px rgba(107, 81, 66, .07);
    }

    /* --- スクロール後：ハンバーガーへ戻る --- */
    .site-header.scrolled .menu-button {
        display: grid;
    }
}

/* =============================================================
   29. 2026-09-20 こぱんはうすさくら の見せ方に寄せる
   髙野さんご指示：
     ・セクションの背景に枠を置く
     ・英字は小さすぎ → 背景に大きく敷いてアクセントにする
     ・カードに飾りつけ／ピクトグラム
     ・ロゴを分解した部品を装飾として使う
     ・追従メニューは右に統一（下の固定バーは撤去）
     ・PC版のGNはハンバーガーにしない
   ============================================================= */

/* ---------- 見出しの背景に敷く大きな英字 ---------- */
.nh-head {
    position: relative;
    z-index: 1;
}

.nh-bigen {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -78%);
    color: rgba(107, 81, 66, .07);
    font-family: var(--font-en);
    font-size: clamp(54px, 10vw, 138px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.nh-head-left .nh-bigen {
    left: 0;
    transform: translate(-4%, -74%);
}

.nh-panel-salmon .nh-bigen,
.nh-panel-sage .nh-bigen {
    color: rgba(255, 255, 255, .38);
}

/* ---------- セクションを囲む角丸パネル ---------- */
.nh-panel {
    position: relative;
    padding: clamp(34px, 5vw, 66px) clamp(22px, 4vw, 58px);
    border-radius: clamp(24px, 3.4vw, 44px);
}

/* 後ろにずらして重ねる薄い面（こぱんはうすの2枚重ね） */
.nh-panel::after {
    position: absolute;
    z-index: -2;
    top: 44px;
    right: -34px;
    bottom: -34px;
    left: 44px;
    border-radius: clamp(24px, 3.4vw, 44px);
    content: "";
}

.nh-panel-salmon { background: #f6b5a7; }
.nh-panel-salmon::after { background: #fbdcd4; }

.nh-panel-sage { background: #b9d49b; }
.nh-panel-sage::after { background: #dcebcd; }

.nh-panel-cream { background: var(--nh-cream-deep); }
.nh-panel-cream::after { background: #fdf6e8; }

.nh-panel-white {
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
}

.nh-panel-white::after { background: #f4efe4; }

.nh-panel-salmon,
.nh-panel-sage { color: #4a3b32; }

.nh-panel-salmon .nh-kicker,
.nh-panel-sage .nh-kicker { color: #fff; }

.nh-panel-salmon .nh-head p,
.nh-panel-sage .nh-head p { color: #5d4a3e; }

.nh-panel > * {
    position: relative;
    z-index: 1;
}

/* ---------- ボタン：点線のリング ---------- */
.nh-round-btn .nh-ring {
    border-style: dashed;
    border-color: var(--nh-salmon);
}

.nh-round-btn:hover .nh-ring,
.nh-round-btn:focus-visible .nh-ring {
    border-style: solid;
    border-color: #fff;
}

/* ---------- ロゴの部品を装飾に使う ---------- */
.nh-deco-kid {
    position: absolute;
    z-index: 3;
    width: clamp(54px, 7vw, 100px);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.nh-deco-heart {
    position: absolute;
    z-index: 3;
    width: clamp(26px, 3.2vw, 44px);
    animation: nh-float 5s ease-in-out infinite;
    pointer-events: none;
}

.nh-deco-leaf {
    position: absolute;
    z-index: 0;
    width: clamp(70px, 9vw, 130px);
    opacity: .45;
    pointer-events: none;
}

@keyframes nh-float {
    50% { transform: translateY(-9px) rotate(-5deg); }
}

/* ---------- カードの背景に薄いピクトグラム ---------- */
.nh-pic {
    position: absolute;
    right: -8px;
    bottom: -10px;
    width: 100px;
    height: 100px;
    opacity: .1;
    pointer-events: none;
}

.nh-pic svg {
    width: 100%;
    height: 100%;
}

/* ---------- 1日の流れ：縦に並べて、右に詳細 ---------- */
.nh-day {
    display: grid;
    align-items: start;
    gap: 26px;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .nh-day {
        grid-template-columns: 330px 1fr;
        gap: 32px;
    }
}

.nh-day-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nh-day-list button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: var(--nh-brown);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.nh-day-list button time {
    flex: none;
    width: 4.8em;
    color: var(--nh-salmon);
    font-family: var(--font-en);
    font-size: 13.5px;
    font-weight: 800;
}

.nh-day-list button span {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.5;
}

.nh-day-list button::after {
    margin-left: auto;
    color: var(--nh-line);
    content: "\203A";
    font-size: 20px;
    line-height: 1;
}

.nh-day-list button:hover,
.nh-day-list button:focus-visible,
.nh-day-list button.is-active {
    transform: translateX(5px);
    background: var(--nh-salmon);
    box-shadow: var(--nh-shadow-soft);
    color: #fff;
}

.nh-day-list button.is-active time,
.nh-day-list button:hover time,
.nh-day-list button.is-active::after,
.nh-day-list button:hover::after {
    color: #fff;
}

.nh-day-panes {
    position: relative;
}

.nh-day-pane {
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
}

.nh-day-pane[hidden] {
    display: none;
}

.nh-day-pane img {
    display: block;
    width: 100%;
    height: clamp(180px, 23vw, 250px);
    object-fit: cover;
}

.nh-day-pane-body {
    padding: 24px 26px 28px;
}

.nh-day-pane-body .nh-day-time {
    display: inline-block;
    margin-bottom: 9px;
    padding: 5px 15px;
    border-radius: 999px;
    background: #fdeeea;
    color: var(--nh-salmon-deep);
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 800;
}

.nh-day-pane-body h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.nh-day-pane-body p {
    margin: 0;
    color: var(--nh-brown-light);
    font-size: 15px;
}

.nh-day-hint {
    margin: 0 0 14px;
    color: var(--nh-brown-light);
    font-size: 13px;
}

/* ---------- トップに出すFAQ ---------- */
@media (min-width: 900px) {
    .nh-faq-2col {
        display: grid;
        align-items: start;
        gap: 12px 20px;
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- 追従メニューを右に統一 ---------- */
.fixed-contact {
    display: none !important;
}

body {
    padding-bottom: 0;
}

.nh-rail {
    display: flex;
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 900;
    flex-direction: column;
    gap: 8px;
    transform: translateY(-50%);
}

.nh-rail a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 9px;
    border-radius: 12px 0 0 12px;
    background: var(--nh-brown);
    box-shadow: -4px 6px 16px rgba(107, 81, 66, .18);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    writing-mode: vertical-rl;
    transition: padding-right .25s ease, background-color .25s ease;
}

.nh-rail a.nh-rail-accent { background: var(--nh-salmon); }
.nh-rail a.nh-rail-tel { background: var(--nh-green-deep); }

.nh-rail a:hover,
.nh-rail a:focus-visible {
    padding-right: 17px;
    background: var(--nh-salmon-deep);
}

.nh-rail svg {
    flex: none;
    width: 17px;
    height: 17px;
    rotate: 90deg;
}

@media (max-width: 767px) {
    .nh-rail a {
        padding: 13px 6px;
        font-size: 11px;
        letter-spacing: .04em;
    }

    .nh-rail svg { width: 14px; height: 14px; }
}

/* ---------- PC版のGNはハンバーガーにしない（2026-09-20） ---------- */
@media (min-width: 1280px) {
    .site-header.scrolled .header-inner {
        display: flex;
        align-items: center;
        gap: 18px;
        width: min(1320px, 100%);
    }

    .site-header.scrolled .menu-button,
    .site-header.scrolled .menu-close,
    .site-header.scrolled .header-tel {
        display: none;
    }

    .site-header.scrolled .global-nav {
        display: flex;
        position: static;
        z-index: auto;
        align-items: center;
        gap: 2px;
        width: auto;
        min-height: 0;
        margin-left: auto;
        padding: 0;
        transform: none;
        background: none;
    }

    .site-header.scrolled .global-nav a {
        position: relative;
        min-height: 0;
        padding: 10px 11px;
        border-radius: 999px;
        background: none;
        color: var(--nh-brown);
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
    }

    .site-header.scrolled .global-nav a.nav-cta {
        margin-left: 8px;
        padding: 11px 20px;
        background: var(--nh-salmon);
        color: #fff;
    }

    .site-header.scrolled .nh-logo-stage {
        width: 232px;
    }
}

@media (max-width: 900px) {
    .nh-panel::after {
        top: 26px;
        right: -16px;
        bottom: -20px;
        left: 26px;
    }
}

/* =============================================================
   30. 2026-09-20 下層ページのセクションもパネルで囲む
   マークアップは変えず、色付きセクションの中身を
   そのままパネルに見せる（トップと同じ見え方に揃える）。
   ============================================================= */
.nh-section-cream,
.nh-section-sage {
    background: none;
}

.nh-section-cream > .nh-wrap,
.nh-section-cream > .nh-wrap-narrow,
.nh-section-sage > .nh-wrap,
.nh-section-sage > .nh-wrap-narrow {
    position: relative;
    padding: clamp(34px, 5vw, 62px) clamp(22px, 4vw, 54px);
    border-radius: clamp(24px, 3.4vw, 44px);
}

.nh-section-cream > .nh-wrap::after,
.nh-section-cream > .nh-wrap-narrow::after,
.nh-section-sage > .nh-wrap::after,
.nh-section-sage > .nh-wrap-narrow::after {
    position: absolute;
    z-index: -2;
    top: 40px;
    right: -30px;
    bottom: -30px;
    left: 40px;
    border-radius: clamp(24px, 3.4vw, 44px);
    content: "";
}

.nh-section-cream > .nh-wrap,
.nh-section-cream > .nh-wrap-narrow {
    background: var(--nh-cream-deep);
}

.nh-section-cream > .nh-wrap::after,
.nh-section-cream > .nh-wrap-narrow::after {
    background: #fdf6e8;
}

.nh-section-sage > .nh-wrap,
.nh-section-sage > .nh-wrap-narrow {
    background: #b9d49b;
}

.nh-section-sage > .nh-wrap::after,
.nh-section-sage > .nh-wrap-narrow::after {
    background: #dcebcd;
}

.nh-section-sage .nh-kicker { color: #fff; }
.nh-section-sage .nh-bigen { color: rgba(255, 255, 255, .38); }
.nh-section-sage .nh-head p { color: #5d4a3e; }

.nh-section-cream > * ,
.nh-section-sage > * {
    z-index: 1;
}

/* 下層ページ：白い節も枠で囲って、他と並びを揃える */
.nh-section:not(.nh-section-cream):not(.nh-section-sage) > .nh-wrap-narrow > .nh-dl,
.nh-section:not(.nh-section-cream):not(.nh-section-sage) > .nh-wrap-narrow > .nh-fee-table {
    overflow: hidden;
}

/* 5領域のカードにも小さな飾り */
.nh-domain {
    position: relative;
    overflow: hidden;
}

.nh-domain::after {
    position: absolute;
    right: -24px;
    bottom: -30px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: currentColor;
    opacity: .06;
    content: "";
}

.nh-domain:nth-child(1) { color: var(--nh-salmon); }
.nh-domain:nth-child(2) { color: var(--nh-yellow); }
.nh-domain:nth-child(3) { color: var(--nh-green); }
.nh-domain:nth-child(4) { color: var(--nh-sky); }
.nh-domain:nth-child(5) { color: var(--nh-purple); }

.nh-domain h3,
.nh-domain p {
    position: relative;
    z-index: 1;
    color: var(--color-text);
}

.nh-domain p { color: var(--nh-brown-light); }

/* ステップのカードにも飾り */
.nh-step {
    position: relative;
    overflow: hidden;
}

.nh-step::after {
    position: absolute;
    right: -30px;
    bottom: -34px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--nh-salmon);
    opacity: .05;
    content: "";
}

.nh-step h3,
.nh-step p {
    position: relative;
    z-index: 1;
}

/* 下層ページの見出しにも大きな英字（band の中は除く） */
.nh-pagehead {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .nh-section-cream > .nh-wrap::after,
    .nh-section-cream > .nh-wrap-narrow::after,
    .nh-section-sage > .nh-wrap::after,
    .nh-section-sage > .nh-wrap-narrow::after {
        top: 24px;
        right: -14px;
        bottom: -18px;
        left: 24px;
    }
}

/* =============================================================
   31. 2026-09-21 髙野さんご指示
     1. お悩みの円の中身をロゴの部品にして、マウスオンで動かす
     2. 支援の3カードはマウスオンで反転
     3. 5領域は上3・下2で、大きさを揃える
     4. はじめての方へのタイルはコンパクトに
     5. 写真帯はゆっくり流す＋キャプション
     6. ご利用の流れは横並び5ステップ（こぱんはうす西千葉）
   ============================================================= */

/* ---------- 1. お悩みの円：ロゴの部品＋マウスオン ---------- */
.nh-worry-fig {
    width: auto;
    height: 58%;
    transition: transform .35s cubic-bezier(.2, .8, .3, 1);
    -webkit-user-select: none;
    user-select: none;
}

.nh-worry-fig-heart {
    height: 40%;
}

.nh-worry:hover .nh-worry-fig-kid,
.nh-worry:focus-within .nh-worry-fig-kid {
    animation: nh-worry-hop .6s ease-out;
}

.nh-worry:hover .nh-worry-fig-heart,
.nh-worry:focus-within .nh-worry-fig-heart {
    animation: nh-worry-beat .85s ease-in-out;
}

.nh-worry:hover .nh-worry-blob,
.nh-worry:focus-within .nh-worry-blob {
    transform: translateY(-5px);
    box-shadow: var(--nh-shadow);
}

.nh-worry-blob {
    transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}

@keyframes nh-worry-hop {
    30% { transform: translateY(-15%) rotate(-6deg) scale(1.06); }
    60% { transform: translateY(-4%) rotate(3deg); }
}

@keyframes nh-worry-beat {
    20% { transform: scale(1.24); }
    42% { transform: scale(.97); }
    64% { transform: scale(1.13); }
}

/* ---------- 2. 支援の3カード：マウスオンで反転 ---------- */
.nh-brief-item {
    position: relative;
    transition: transform .35s cubic-bezier(.2, .8, .3, 1),
                box-shadow .35s ease,
                background-color .35s ease;
}

.nh-brief-item h3,
.nh-brief-item p,
.nh-brief-no {
    transition: color .3s ease;
}

.nh-brief-item:nth-child(1):hover { background: var(--nh-green-deep); }
.nh-brief-item:nth-child(2):hover { background: var(--nh-salmon); }
.nh-brief-item:nth-child(3):hover { background: #d79a28; }

.nh-brief-item:hover h3,
.nh-brief-item:hover p,
.nh-brief-item:hover .nh-brief-no {
    color: #fff;
}

.nh-brief-item:hover .nh-pic {
    color: #fff !important;
    opacity: .2;
}

/* ---------- 3. 5領域：上3・下2、大きさを揃える ---------- */
.nh-domains-row {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(6, 1fr);
    justify-content: center;
    max-width: 880px;
    margin-inline: auto;
}

.nh-domains-row li {
    display: flex;
    grid-column: span 2;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 62px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.nh-domains-row li:nth-child(4) { grid-column: 2 / span 2; }
.nh-domains-row li:nth-child(5) { grid-column: 4 / span 2; }

.nh-domains-row li:hover {
    transform: translateY(-4px);
    box-shadow: var(--nh-shadow);
}

.nh-domains-row b {
    flex: none;
    width: 30px;
    height: 30px;
}

@media (max-width: 700px) {
    .nh-domains-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .nh-domains-row li,
    .nh-domains-row li:nth-child(4),
    .nh-domains-row li:nth-child(5) {
        grid-column: span 1;
        min-height: 56px;
        font-size: 13px;
    }

    .nh-domains-row li:nth-child(5) {
        grid-column: 1 / span 2;
    }
}

/* ---------- 4. はじめての方へのタイル：コンパクトに ---------- */
.nh-tiles {
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
}

.nh-tile {
    border-radius: 14px;
}

.nh-tile img {
    height: clamp(88px, 9.5vw, 116px);
}

.nh-tile-name {
    padding: 8px 10px;
    font-size: 12.5px;
}

.nh-tile-more {
    bottom: 10px;
    left: 11px;
    font-size: 12px;
}

/* ---------- 5. 写真帯：ゆっくり流す＋キャプション ---------- */
.nh-flowband {
    position: relative;
    padding: 12px 0 18px;
    overflow: hidden;
}

.nh-flowband-track {
    display: flex;
    width: max-content;
    animation: nh-flowband 78s linear infinite;
    gap: 14px;
}

.nh-flowband:hover .nh-flowband-track,
.nh-flowband:focus-within .nh-flowband-track {
    animation-play-state: paused;
}

@keyframes nh-flowband {
    to { transform: translateX(-50%); }
}

.nh-flowband figure {
    flex: none;
    width: clamp(220px, 24vw, 320px);
    margin: 0;
}

.nh-flowband img {
    width: 100%;
    height: clamp(148px, 16vw, 208px);
    border-radius: 18px;
    object-fit: cover;
}

.nh-flowband figcaption {
    margin-top: 9px;
    color: var(--nh-brown-light);
    font-size: 12.5px;
    line-height: 1.7;
}

.nh-flowband-note {
    margin: 14px 0 0;
    color: var(--nh-brown-light);
    font-size: 12px;
    text-align: center;
}

/* ---------- 6. ご利用の流れ：横並び5ステップ ---------- */
.nh-steps5 {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    counter-reset: nh-s5;
}

@media (min-width: 720px) {
    .nh-steps5 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
    .nh-steps5 {
        gap: 12px;
        grid-template-columns: repeat(5, 1fr);
    }
}

.nh-s5 {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: 30px 18px 26px;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    counter-increment: nh-s5;
    text-align: center;
}

/* ステップ間の矢印（PCのみ） */
@media (min-width: 1040px) {
    .nh-s5:not(:last-child)::after {
        position: absolute;
        top: 50%;
        right: -13px;
        z-index: 2;
        transform: translateY(-50%);
        color: var(--nh-salmon);
        content: "\25B6";
        font-size: 13px;
        line-height: 1;
    }
}

.nh-s5-no {
    display: block;
    margin-bottom: 12px;
    color: var(--nh-salmon);
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .18em;
}

.nh-s5-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #fdeeea;
    color: var(--nh-salmon-deep);
}

.nh-s5:nth-child(2) .nh-s5-icon { background: #f2f7ea; color: var(--nh-green-deep); }
.nh-s5:nth-child(3) .nh-s5-icon { background: #eaf2f7; color: #4f88a5; }
.nh-s5:nth-child(4) .nh-s5-icon { background: #fdf3e0; color: #b9821f; }
.nh-s5:nth-child(5) .nh-s5-icon { background: #f5eef7; color: #8a6aa8; }

.nh-s5-icon svg {
    width: 30px;
    height: 30px;
}

.nh-s5 h3 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.55;
}

.nh-s5 p {
    margin: 0;
    color: var(--nh-brown-light);
    font-size: 13.5px;
    line-height: 1.85;
}

@media (prefers-reduced-motion: reduce) {
    .nh-flowband-track { animation: none; }
    .nh-worry-fig { animation: none !important; }
}

/* =============================================================
   32. 2026-09-21（2回目）髙野さんご指示
     1. お悩みのイラストは、マウスオンではなく ずっとゆっくり動かす
     2. 「はじめての方へ」は 牛浜こども園 のような配置に
        （実測＝272x181・比率1.5の横長／写真全面／白いラベル帯が左下）
        https://www.ushihama-kodomoen.com/
   ============================================================= */

/* ---------- 1. お悩みのイラスト：ずっとゆっくり ---------- */
.nh-worry-fig {
    width: auto;
    height: 56%;
    transform-origin: 50% 85%;
}

.nh-worry-fig-heart {
    height: 40%;
    transform-origin: 50% 50%;
}

/* マウスオンの動きは外す（ご指示） */
.nh-worry:hover .nh-worry-fig-kid,
.nh-worry:focus-within .nh-worry-fig-kid,
.nh-worry:hover .nh-worry-fig-heart,
.nh-worry:focus-within .nh-worry-fig-heart {
    animation-name: inherit;
}

.nh-worry-fig-kid {
    animation: nh-sway 6.5s ease-in-out infinite;
}

.nh-worry-fig-heart {
    animation: nh-pulse 4.2s ease-in-out infinite;
}

/* 3つが同じ動きに見えないよう、始まりをずらす */
.nh-worry:nth-child(1) .nh-worry-fig { animation-delay: 0s; }
.nh-worry:nth-child(2) .nh-worry-fig { animation-delay: -2.4s; }
.nh-worry:nth-child(3) .nh-worry-fig { animation-delay: -1.2s; }

@keyframes nh-sway {
    0%, 100% { transform: rotate(-3.5deg) translateY(0); }
    50%      { transform: rotate(3.5deg) translateY(-5%); }
}

@keyframes nh-pulse {
    0%, 100% { transform: scale(1); }
    38%      { transform: scale(1.11); }
    62%      { transform: scale(1.02); }
}

/* 円じたいはマウスオンでふわっと（ここは残す） */
.nh-worry:hover .nh-worry-blob,
.nh-worry:focus-within .nh-worry-blob {
    transform: translateY(-5px);
    box-shadow: var(--nh-shadow);
}

/* ---------- 2. はじめての方へ：牛浜こども園の配置 ---------- */
.nh-tiles {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .nh-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .nh-tiles { grid-template-columns: repeat(3, 1fr); }
}

.nh-tile {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: var(--nh-shadow-soft);
    line-height: 0;
    transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}

.nh-tile img {
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.2, .8, .3, 1);
    object-fit: cover;
}

/* 白いラベル帯（左下に重なる） */
.nh-tile-name {
    display: inline-flex;
    position: absolute;
    right: auto;
    bottom: 0;
    left: 0;
    align-items: center;
    gap: 10px;
    padding: 13px 22px 13px 20px;
    border-radius: 0 16px 0 16px;
    background: #fff;
    box-shadow: none;
    color: var(--nh-brown);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color .3s ease, color .3s ease, padding-right .3s ease;
}

.nh-tile-name::after {
    color: var(--nh-salmon);
    content: "\2192";
    font-size: 15px;
    transition: transform .3s ease, color .3s ease;
}

/* 前の見せ方（白いベール＋文字）は使わない */
.nh-tile-veil,
.nh-tile-more {
    display: none;
}

.nh-tile:hover,
.nh-tile:focus-visible {
    transform: translateY(-5px);
    box-shadow: var(--nh-shadow);
}

.nh-tile:hover img,
.nh-tile:focus-visible img {
    transform: scale(1.07);
}

.nh-tile:hover .nh-tile-name,
.nh-tile:focus-visible .nh-tile-name {
    padding-right: 26px;
    background: var(--nh-salmon);
    color: #fff;
}

.nh-tile:hover .nh-tile-name::after,
.nh-tile:focus-visible .nh-tile-name::after {
    transform: translateX(3px);
    color: #fff;
}

@media (max-width: 559px) {
    .nh-tile-name {
        padding: 11px 18px;
        font-size: 13.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nh-worry-fig { animation: none !important; }
}