@charset "UTF-8";
/* =============================================================
   site-v3.css — 2026-09-30 ロシナンテ追加分
   site-v2.css の「あと」に読み込む増分レイヤー。
   9/30 井上さまとのお打ち合わせで決まった修正のためのもの。
     1. GN に Instagram と LINE（準備中）のマーク
     2. 見学は LINE へ誘導（LINE の準備中は「準備中」表示＋お電話を案内）
     3. ブログは外部サイトへのバナー（準備中）
     4. 採用情報ページ（仮）と、トップの「一緒に働きませんか」バナー
   ★style.css・site-v2.css は1行も触っていない。新しいものは全部 .nh- 接頭辞。
   ============================================================= */

/* -------------------------------------------------------------
   0. 「準備中」の札（共通）
   ------------------------------------------------------------- */
.nh-soon {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fdf3e0;
    color: #8a5a00;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

/* -------------------------------------------------------------
   1. GN の SNS マーク（Instagram／LINE 準備中）
   2026-09-30 rev.2：目立たせる（髙野さん）。
     PC   … ブランド色で塗った丸（Instagram はグラデーション・LINE は緑）
     スマホ… メニューの下に「Instagram」「LINE」の文字付きボタン
   ★ .global-nav a の既存指定（ハンバーガー内の大きな行・PCの下線）に
     負けないよう、.nh-sns の中だけ詳しく指定している。
   ------------------------------------------------------------- */
.site-header .global-nav .nh-sns {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
}

.site-header .global-nav .nh-sns .nh-sns-link {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px 14px;
    border-radius: 18px;
    color: #fff;
    font-weight: 900;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.nh-sns-ig,
.site-header .global-nav .nh-sns .nh-sns-ig {
    background: radial-gradient(circle at 30% 107%, #fdd76b 0%, #f7924a 22%, #e1306c 55%, #c13584 72%, #833ab4 100%);
}

.nh-sns-line,
.site-header .global-nav .nh-sns .nh-sns-line {
    background: #06c755;
}

.site-header .global-nav .nh-sns a.nh-sns-link::after {
    display: none;
}

.site-header .global-nav .nh-sns a.nh-sns-link:hover,
.site-header .global-nav .nh-sns a.nh-sns-link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(107, 81, 66, .22);
    color: #fff;
    filter: brightness(1.06);
}

.site-header .global-nav .nh-sns .nh-sns-line.is-pending {
    cursor: default;
}

.nh-sns-mark {
    display: inline-flex;
}

.nh-sns-link svg {
    width: 24px;
    height: 24px;
}

.nh-sns-text {
    font-family: var(--font-en);
    font-size: 14px;
    letter-spacing: .02em;
}

/* 準備中の札（LINE） */
.nh-sns-link .nh-soon {
    position: absolute;
    top: -8px;
    right: -6px;
    padding: 0 7px;
    background: #fff;
    font-size: 10px;
    box-shadow: 0 2px 6px rgba(107, 81, 66, .18);
}

@media (min-width: 1280px) {
    .site-header .global-nav .nh-sns {
        display: flex;
        gap: 10px;
        margin: 0 0 0 12px;
    }

    /* PCは丸いマークだけ（文字は読み上げ用の aria-label が担う） */
    .site-header .global-nav .nh-sns .nh-sns-link {
        width: 42px;
        height: 42px;
        min-height: 0;
        padding: 0;
        border-radius: 50%;
        box-shadow: 0 6px 14px rgba(107, 81, 66, .18);
    }

    .site-header .global-nav .nh-sns .nh-sns-text {
        display: none;
    }

    .nh-sns-link svg {
        width: 22px;
        height: 22px;
    }

    .site-header .global-nav .nh-sns .nh-soon {
        top: auto;
        right: auto;
        bottom: -11px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 項目が1つ増えた（採用情報）＋SNSマークの分、少し詰める。
       site-v2 と同じ詳細度で、あとに読むこちらが勝つ（見学ボタンは a.nav-cta の方が強いので対象外） */
    .site-header:not(.scrolled) .global-nav a,
    .site-header.scrolled .global-nav a {
        padding-right: 9px;
        padding-left: 9px;
    }
}

/* フッターの SNS（文字付きの丸ボタン） */
.nh-footer-sns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 10px 0 22px;
}

.nh-footer-sns .nh-sns-link {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 6px 14px rgba(107, 81, 66, .16);
    transition: transform .25s ease;
}

.nh-footer-sns a.nh-sns-link:hover,
.nh-footer-sns a.nh-sns-link:focus-visible {
    transform: translateY(-2px);
    color: #fff;
}

.nh-footer-sns .nh-sns-link svg {
    width: 20px;
    height: 20px;
}

/* -------------------------------------------------------------
   2. 見学は LINE へ（お問い合わせページ #visit）
   ------------------------------------------------------------- */
.nh-visit {
    display: grid;
    align-items: center;
    gap: 22px 34px;
    grid-template-columns: auto 1fr;
    padding: clamp(28px, 4vw, 44px);
    border: 2px solid #cdeedb;
    border-radius: var(--nh-radius);
    background: linear-gradient(135deg, #effaf3 0%, #fdf9f1 100%);
}

.nh-visit-icon {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 28px;
    background: #06c755;
    color: #fff;
    box-shadow: 0 12px 24px rgba(6, 199, 85, .22);
}

.nh-visit-icon svg {
    width: 58px;
    height: 58px;
}

.nh-visit h2 {
    margin: 4px 0 10px;
    font-size: clamp(21px, 3.2vw, 28px);
}

.nh-visit p {
    margin: 0 0 16px;
    color: var(--nh-brown-light);
    font-size: 15px;
    line-height: 1.9;
}

.nh-line-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    background: #06c755;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(6, 199, 85, .22);
    transition: transform .25s ease, background-color .25s ease;
}

a.nh-line-btn:hover,
a.nh-line-btn:focus-visible {
    transform: translateY(-2px);
    background: #05b34c;
    color: #fff;
}

.nh-line-btn svg {
    width: 22px;
    height: 22px;
}

/* 準備中：押せない見た目にする（リンクにしていない） */
.nh-line-btn.is-pending {
    background: #9fd9b6;
    box-shadow: none;
    cursor: default;
}

.nh-line-btn .nh-soon {
    background: #fff;
}

.nh-visit .nh-visit-sub {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fff;
    color: var(--nh-brown);
    font-size: 14px;
}

.nh-visit-sub a {
    color: var(--nh-green-deep);
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .nh-visit {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .nh-visit-icon {
        margin-inline: auto;
        width: 76px;
        height: 76px;
        border-radius: 22px;
    }

    .nh-visit-icon svg {
        width: 44px;
        height: 44px;
    }

    .nh-visit .nh-visit-sub {
        text-align: left;
    }
}

/* 問い合わせ先のカード（LINE／TEL／MAIL／FORM）
   2026-09-30 rev.2：「寂しい」「改行をどうにか」「マウスオンで反転」（髙野さん）
   アイコン＋ラベル＋本文＋補足＋矢印の横組み。マウスオンで面が各色に塗られ、文字は白に反転する。
   メールアドレスは @ の前（<wbr>）でだけ折り返す。 */
.nh-routes {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1040px;
    margin-inline: auto;
    text-align: left;
}

.nh-nowrap {
    white-space: nowrap;
}

@media (max-width: 720px) {
    .nh-routes {
        grid-template-columns: 1fr;
    }
}

.nh-route {
    --route: var(--nh-salmon-deep);
    --route-soft: #fdeee9;
    display: grid;
    align-items: center;
    gap: 16px;
    grid-template-columns: 58px minmax(0, 1fr) 36px;
    min-height: 112px;
    padding: 20px 22px;
    border: 2px solid transparent;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
    color: var(--nh-brown);
    transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.nh-route-line { --route: #06a247; --route-soft: #e3f7ea; }
.nh-route-tel { --route: var(--nh-green-deep); --route-soft: #eef6e3; }
.nh-route-mail { --route: var(--nh-salmon-deep); --route-soft: #fdeee9; }
.nh-route-form { --route: #b9821f; --route-soft: #fdf3e0; }

.nh-route-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--route-soft);
    color: var(--route);
    transition: background-color .3s ease, color .3s ease;
}

.nh-route-icon svg {
    width: 26px;
    height: 26px;
}

.nh-route-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.nh-route-label {
    color: var(--route);
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    transition: color .3s ease;
}

.nh-route-main {
    font-family: var(--font-en), var(--font-round), sans-serif;
    font-size: clamp(17px, 1.9vw, 21px);
    font-weight: 800;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* メールは長いので一段小さく（@ の前でだけ折り返す） */
.nh-route-mail .nh-route-main {
    font-size: clamp(14px, 1.45vw, 16px);
}

.nh-route-sub {
    color: var(--nh-brown-light);
    font-size: 12.5px;
    transition: color .3s ease;
}

.nh-route-sub .nh-soon {
    margin-left: 4px;
}

.nh-route-arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--route-soft);
    color: var(--route);
    font-size: 16px;
    transition: transform .3s ease, background-color .3s ease, color .3s ease;
}

/* マウスオン：面を塗って白抜きに反転 */
.nh-route:hover,
.nh-route:focus-visible {
    background: var(--route);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(107, 81, 66, .18);
}

.nh-route:hover .nh-route-label,
.nh-route:hover .nh-route-sub,
.nh-route:focus-visible .nh-route-label,
.nh-route:focus-visible .nh-route-sub {
    color: #fff;
}

.nh-route:hover .nh-route-icon,
.nh-route:hover .nh-route-arrow,
.nh-route:focus-visible .nh-route-icon,
.nh-route:focus-visible .nh-route-arrow {
    background: #fff;
    color: var(--route);
}

.nh-route:hover .nh-route-arrow,
.nh-route:focus-visible .nh-route-arrow {
    transform: translateX(4px);
}

.nh-route:focus-visible {
    outline: 3px solid rgba(107, 81, 66, .3);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    /* スマホは矢印を外して、メールアドレスの幅を確保する */
    .nh-route {
        gap: 12px;
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 16px;
    }

    .nh-route-icon {
        width: 48px;
        height: 48px;
    }

    .nh-route-arrow {
        display: none;
    }

    .nh-route-mail .nh-route-main {
        font-size: 14px;
    }
}

/* 仮のフォーム（WPでは Contact Form 7） */
.nh-form {
    display: grid;
    gap: 18px;
    padding: clamp(24px, 4vw, 40px);
    border-radius: var(--nh-radius);
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
}

.nh-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
}

.nh-form input,
.nh-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--nh-line);
    border-radius: 10px;
    font: inherit;
    font-size: 16px;
}

.nh-form textarea {
    min-height: 150px;
}

.nh-form .nh-req {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--nh-salmon-deep);
    color: #fff;
    font-size: 11px;
}

.nh-form-note {
    margin: 0;
    color: var(--nh-brown-light);
    font-size: 13px;
}

/* -------------------------------------------------------------
   3・4. トップのバナー（採用＋ブログ）
   ------------------------------------------------------------- */
.nh-banners {
    display: grid;
    gap: 22px;
    grid-template-columns: 3fr 2fr;
}

@media (max-width: 860px) {
    .nh-banners {
        grid-template-columns: 1fr;
    }
}

.nh-banner {
    display: grid;
    position: relative;
    overflow: hidden;
    align-content: end;
    min-height: 280px;
    padding: 30px 30px 28px;
    border-radius: var(--nh-radius);
    color: #fff;
    isolation: isolate;
}

.nh-banner img {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.nh-banner::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, rgba(74, 59, 50, 0) 20%, rgba(74, 59, 50, .78) 100%);
    content: "";
}

a.nh-banner:hover img,
a.nh-banner:focus-visible img {
    transform: scale(1.05);
}

.nh-banner-kicker {
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2em;
    opacity: .92;
}

.nh-banner strong {
    display: block;
    margin: 2px 0 8px;
    font-family: var(--font-round);
    font-size: clamp(24px, 3.4vw, 34px);
    line-height: 1.35;
}

.nh-banner-text {
    display: block;
    font-size: 14.5px;
    line-height: 1.8;
}

.nh-banner-more {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 9px 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--nh-brown);
    font-size: 14px;
    font-weight: 700;
}

.nh-banner-recruit .nh-banner-more {
    background: var(--nh-salmon);
    color: #fff;
}

/* ブログは外部サイトが準備中：リンクにしていない */
.nh-banner.is-pending {
    cursor: default;
}

.nh-banner.is-pending .nh-banner-more {
    background: rgba(255, 255, 255, .9);
    color: var(--nh-brown-light);
}

/* お知らせ一覧の下に置く小さい版（2026-09-30：お知らせが上、バナーは1/4程度） */
.nh-banner.nh-banner-mini {
    width: min(100%, 300px);
    min-height: 170px;
    margin: 44px auto 0;
    padding: 18px 20px 16px;
    border-radius: 18px;
}

.nh-banner-mini strong {
    margin-bottom: 2px;
    font-size: 20px;
}

.nh-banner-mini .nh-banner-kicker {
    font-size: 11px;
}

.nh-banner-mini .nh-banner-text {
    display: none;
}

.nh-banner-mini .nh-banner-more {
    margin-top: 8px;
    padding: 6px 14px;
    font-size: 12.5px;
}

/* -------------------------------------------------------------
   5. 採用情報ページ
   ------------------------------------------------------------- */
.nh-recruit-lead {
    display: grid;
    align-items: center;
    gap: 30px 44px;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 860px) {
    .nh-recruit-lead {
        grid-template-columns: 1fr;
    }
}

.nh-recruit-lead figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--nh-radius);
}

.nh-recruit-lead img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.nh-recruit-lead h2 {
    margin: 0 0 16px;
    font-size: clamp(22px, 3.2vw, 30px);
    line-height: 1.5;
}

.nh-recruit-lead p {
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 2;
}

.nh-points {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 860px) {
    .nh-points {
        grid-template-columns: 1fr;
    }
}

.nh-points li {
    padding: 26px 24px;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--nh-shadow-soft);
}

.nh-points b {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-round);
    font-size: 18px;
}

.nh-points .nh-pic {
    /* site-v2 の .nh-pic はカード右上に絶対配置。ここでは文の上に置く */
    position: static;
    display: block;
    opacity: 1;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
}

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

/* 仮置きの注記（先方に確認いただくための目印。公開前に外す） */
.nh-temp-note {
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1.5px dashed #e3b75c;
    border-radius: 12px;
    background: #fffaf0;
    color: #8a5a00;
    font-size: 13.5px;
    line-height: 1.8;
}