/* ============================================================
   custom.css — ENWIT
   Pinegrow が style.css を再生成しても影響を受けないよう、
   手書きの追加スタイルはこのファイルに集約する。
   読み込み順は style.css の後（後勝ち）。
   既存トークン（--mincho/--latin/--green/--hair/--paper-deep
   /--ink/--ink-soft/--ink-faint 等）を継承して使用する。
   ============================================================ */
/* ------------------------------------------------------------
   Products: アイコン帯（第一層）
   役割＝「観察と記録」の標本箱。クリック対象ではなく世界観の提示。
   アプリ3＋グッズ1の計4点を横並び。140×140 正方形アイコンを前提。
   ------------------------------------------------------------ */
.pgp-specimens {
    padding-block: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
}

.pgp-specimen-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(22px, 4vw, 52px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.pgp-specimen {
    flex: 0 0 auto;
    width: clamp(64px, 12vw, 96px);
    margin: 0;
    text-align: center;
}

.pgp-specimen img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;

    /* 標本箱トーン：わずかに沈ませて記録感を出す */
    filter: grayscale(100%) contrast(.96);
    opacity: .92;
    transition: opacity .4s ease, filter .4s ease;
}

/* 帯全体にホバーすると他が静まり、触れた一点だけ起き上がる
   ＝ activity gallery と同じ grayscale→明度の作法に揃える */
.pgp-specimen-strip:hover .pgp-specimen img {
    opacity: .5;
}

.pgp-specimen-strip .pgp-specimen:hover img {
    opacity: 1;
    filter: grayscale(0%) contrast(1);
}

.pgp-specimen .label {
    display: block;
    margin-top: .7em;
    font-family: var(--latin);
    font-style: italic;
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--ink-faint);
    line-height: 1.4;
}

@media (max-width: 620px){
    .pgp-specimen-strip {
        gap: 26px 30px;
    }

    .pgp-specimen {
        width: 76px;
    }

    .pgp-specimen .label {
        font-size: .68rem;
    }
}

/* ------------------------------------------------------------
   Products: 転換セクション（第二層と第三層の橋渡し）
   「見せる」から「深く語る」へ降りていく短い導入。
   読みたい人だけが下層へ進める静かなアンカー。
   ------------------------------------------------------------ */
.pgp-bridge {
    padding-block: clamp(40px, 6vw, 80px);
    background: var(--paper-deep);
    border-top: 1px solid var(--hair);
}

.pgp-bridge .wrap {
    text-align: center;
}

.pgp-bridge p {
    font-family: var(--mincho);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 2.0;
    letter-spacing: .06em;
    color: var(--ink-soft);
    margin: 0 auto;
    max-width: 32em;
}

.pgp-bridge .pgp-bridge-link {
    display: inline-block;
    margin-top: 1.4em;
    font-family: var(--latin);
    font-style: italic;
    font-size: .95rem;
    letter-spacing: .08em;
    color: var(--green);
    text-decoration: none;
    border-bottom: 1px solid var(--hair);
    padding-bottom: .15em;
    transition: border-color .3s ease;
}

.pgp-bridge .pgp-bridge-link:hover {
    border-color: var(--green);
}

/* *** リスの失踪 *** */
.critter-divider {
    position: relative;
    height: 56px;
    margin: 0;
    overflow: hidden;
    color: var(--ink, #2B2B2B);
}

.critter-divider::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 0.5px solid var(--border, #d8d4cc);
}

.critter-runner {
    position: absolute;
    bottom: -6px;
    left: -90px;
    width: 80px;
    opacity: 0;
    pointer-events: none;
}

/* 4コマのフレームを重ねる */
.critter-runner .sq-cycle {
    position: relative;
}

.critter-runner .frame {
    position: absolute;
    inset: 0;
    opacity: 0;
}

/* 走行クラスが付いたときだけ再生 */
.critter-divider.is-running .critter-runner {
    opacity: 1;
    animation: sq-cross 11s linear forwards;

    /* 横移動。時間は live-animals.js の crossMs と揃える。
       JSが左右交互に dir-rtl を付け外しして往復ループさせる */
}

/* 右→左の回：逆向きキーフレーム＋左右反転で進行方向を向かせる */
.critter-divider.is-running.dir-rtl .critter-runner {
    animation-name: sq-cross-rev;
    transform: scaleX(-1);
}

.critter-divider.is-running .frame {
    animation: sq-flip 0.48s steps(1) infinite;

    /* 足の回転テンポ */
}

.critter-divider.is-running .f1 {
    animation-delay: 0s;
}

.critter-divider.is-running .f2 {
    animation-delay: 0.12s;
}

.critter-divider.is-running .f3 {
    animation-delay: 0.24s;
}

.critter-divider.is-running .f4 {
    animation-delay: 0.36s;
}

/* 中央停止中は足のパタパタを止め、接地ポーズ(f3)で固定する
   （JSが is-paused を付け外し）。どのタイミングで止まっても
   ジャンプ中のコマにならないよう f3 を強制表示する。 */
.critter-divider.is-running.is-paused .frame {
    animation: none;
    opacity: 0;
}

.critter-divider.is-running.is-paused .f3 {
    opacity: 1;
}

@keyframes sq-cross {
    0% {
        left: -90px;
    }

    /* 中央まで来る（約4秒・enterMs と一致） */
    36% {
        left: calc(50% - 40px);
    }

    /* ここで約3秒停止（pauseMs と一致） */
    64% {
        left: calc(50% - 40px);
    }

    100% {
        left: calc(100% + 10px);
    }
}

/* 右→左：sq-cross の左右を入れ替えたもの（中央停止は同じ） */
@keyframes sq-cross-rev {
    0% {
        left: calc(100% + 10px);
    }

    36% {
        left: calc(50% - 40px);
    }

    64% {
        left: calc(50% - 40px);
    }

    100% {
        left: -90px;
    }
}

@keyframes sq-flip {
    0%,
    24.9% {
        opacity: 1;
    }

    25%,
    100% {
        opacity: 0;
    }
}

/* アクセシビリティ: 動きを減らす設定の人には出さない */
@media (prefers-reduced-motion: reduce) {
    .critter-divider.is-running .critter-runner {
        animation: none;
        opacity: 0;
    }

    .critter-divider.is-running .frame {
        animation: none;
    }
}

/* ============================================================
   .cta-link ── 標準の誘導テキストリンク（下線＋色）
   custom.css の末尾に追記。Pinegrow管理外＝消えない。
   ※ style.css 側には .cta-link 単独定義を置かない（competition回避）
   ============================================================ */
/* 標準：明朝・バーガンディ・下線。本文/セクション末尾の「○○を見る →」等に。
   services の sv-row-cta と見た目を統一（サイト全体で下線リンクを揃える）。 */
.cta-link {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-family: var(--mincho);
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);

    /* ← これが「下線」。cta-linkを付ければ付く */
    padding-bottom: .15em;
    transition: color .25s, border-color .25s;
}

.cta-link:hover {
    color: var(--green);
    border-color: var(--green);
}

/* 鳥アイコン(link-icon)を内包しても矛盾しない：見た目=cta-link / 内外=is-* */
.cta-link .link-icon {
    vertical-align: middle;
}

/* 末尾の矢印（任意。テキスト矢印を使う場合の微動き） */
.cta-link .sv-arrow,
.cta-link .arrow {
    transition: transform .25s;
}

.cta-link:hover .sv-arrow,
.cta-link:hover .arrow {
    transform: translateX(.2em);
}

/* ── 任意の変種（必要なら）────────────────────────────
   .cta-link.is-quiet  控えめ版：下線をhairに、色をink-soft（補助的な遷移）
   .cta-link.is-latin  ラテンイタリック版（旧out-linkの趣き。英字リンク向け） */
.cta-link.is-quiet {
    color: var(--ink-soft);
    border-bottom-color: var(--hair);
}

.cta-link.is-quiet:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.cta-link.is-latin {
    font-family: var(--latin);
    font-style: italic;
}

/* === Profile: 代表者 SNS リンク === */
.rep-sns {
    list-style: none;
    margin: .5em 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4em .9em;
    align-items: center;
}

.rep-sns a {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    color: var(--ink-soft);
    text-decoration: none;
    font-family: var(--latin);
    font-size: .85rem;
    letter-spacing: .04em;
    transition: color .25s;
}

.rep-sns a:hover {
    color: var(--accent);
}

.rep-sns-ic {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    display: block;
    flex-shrink: 0;
}

/* === ENWIT:CONTACT FORM — 博物画トーンの静的フォーム === */
/* custom.css に置く（Pinegrow上書き対策）。入力欄スタイルは新規定義。 */
.contact-page {
    background: var(--paper);
}

.cf-hero {
    padding: clamp(72px,10vw,130px) 0 clamp(20px,3vw,32px);
}

.cf-h1 {
    font-family: var(--mincho);
    font-weight: 600;
    font-size: clamp(1.8rem,4vw,2.8rem);
    letter-spacing: .06em;
    color: var(--ink);
    margin: 0 0 .6em;
}

.cf-lead {
    font-family: var(--mincho);
    font-size: 1.05rem;
    line-height: 1.95;
    color: var(--ink-soft);
    margin: 0;
    max-width: 36em;
}

.cf-sec {
    padding-block: clamp(28px,4vw,52px) clamp(60px,8vw,100px);
}

.cf-wrap {
    max-width: 720px;
}

/* フィールドグループ */
.cf-group {
    border: none;
    margin: 0 0 clamp(28px,4vw,44px);
    padding: 0;
}

.cf-legend {
    font-family: var(--mincho);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: .06em;
    color: var(--accent);
    padding: 0 0 .8em;
    margin-bottom: 1.2em;
    border-bottom: 1px solid var(--hair);
    width: 100%;
}

.cf-note {
    font-size: .9rem;
    color: var(--ink-faint);
    margin: 0 0 1em;
}

.cf-field {
    margin-bottom: 1.3em;
}

.cf-label {
    display: block;
    font-family: var(--mincho);
    font-size: .95rem;
    letter-spacing: .04em;
    color: var(--ink);
    margin-bottom: .5em;
}

.cf-req {
    font-family: var(--latin);
    font-style: italic;
    font-size: .7rem;
    letter-spacing: .1em;
    color: var(--accent-tint);
    margin-left: .5em;
    vertical-align: .1em;
}

/* 入力欄：博物画トーン（罫線主体・角丸控えめ） */
.cf-input {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--hair);
    border-radius: 2px;
    padding: .75em .9em;
    transition: border-color .25s, box-shadow .25s;
}

.cf-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(67,1,1,.08);
}

.cf-textarea {
    resize: vertical;
    line-height: 1.8;
}

/* チェックボックス群 */
.cf-checks {
    display: flex;
    flex-direction: column;
    gap: .7em;
}

.cf-checks-alt {
    margin-top: 1.2em;
    padding-top: 1.2em;
    border-top: 1px dashed var(--hair);
}

.cf-check {
    display: inline-flex;
    align-items: flex-start;
    gap: .6em;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

.cf-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    margin-top: .15em;
    border: 1px solid var(--hair);
    border-radius: 2px;
    background: var(--white);
    cursor: pointer;
    transition: background .2s, border-color .2s;
    position: relative;
}

.cf-check input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.cf-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%,-50%) rotate(45deg);
    width: .3em;
    height: .6em;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
}

.cf-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cf-check:hover {
    color: var(--ink);
}

/* コンサルの入れ子 */
.cf-check-nest {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.cf-subchecks {
    display: flex;
    gap: 1.4em;
    padding-left: 1.8em;
}

.cf-sub {
    font-size: .92rem;
    color: var(--ink-faint);
}

/* 同意 */
.cf-consent {
    margin: 0 0 2em;
    padding: 1.1em 1.2em;
    background: var(--paper-deep);
    border-radius: 2px;
}

/* 送信ボタン（btn相当のボックス＝強い行動。ここはフォームの結論なのでボックス） */
.cf-submit-row {
    display: flex;
    flex-direction: column;
    gap: .8em;
    align-items: flex-start;
}

.cf-submit {
    font-family: var(--mincho);
    font-size: 1.05rem;
    letter-spacing: .1em;
    color: var(--paper);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 2px;
    padding: .85em 2.6em;
    cursor: pointer;
    transition: background .3s, color .3s;
}

.cf-submit:hover {
    background: var(--green);
    border-color: var(--green);
}

.cf-submit:disabled {
    opacity: .5;
    cursor: default;
}

.cf-submit-note {
    font-size: .9rem;
    color: var(--ink-faint);
    margin: 0;
}

.cf-submit-note.is-error {
    color: var(--accent);
}

/* honeypot：完全に隠す */
.cf-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* 完了表示 */
.cf-done {
    padding: clamp(28px,4vw,44px);
    background: var(--paper-deep);
    border: 1px solid var(--hair);
    border-radius: 2px;
    text-align: center;
}

.cf-done-title {
    font-family: var(--mincho);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--accent);
    margin: 0 0 .6em;
}

@media (max-width: 560px){
    .cf-subchecks {
        flex-direction: column;
        gap: .5em;
    }
}