/**
 * COMS LP — nagasou-coms.css
 *
 * COMS × 永惣 ランディングページ 専用スタイル
 *
 * 設計方針:
 * ─ 名前空間: .ncoms-  （Cocoon / nagasou-front と競合しない）
 * ─ .nagasou-coms-body で全スコープを囲み Cocoon を完全上書き
 * ─ CSS カスタムプロパティで一元管理（:root / .nagasou-coms-body）
 * ─ coms-manga.css はそのまま維持（変更不要）
 * ─ WCAG 2.1 AA 準拠（コントラスト・フォーカスリング）
 * ─ prefers-reduced-motion 対応
 * ─ clamp() / min() / max() でスペースをスケール対応
 *
 * @package    CocoonChildMaster
 * @subpackage NagasouComs
 * @version    2026.1.0
 */


/* ══════════════════════════════════════════════════════════════
   デザイントークン
══════════════════════════════════════════════════════════════ */

:root {
    /* ── ブランドカラー ── */
    --ncoms-gold:        #C9A84C;
    --ncoms-gold-l:      #E8CF80;
    --ncoms-gold-bg:     rgba(201, 168, 76, 0.08);
    --ncoms-sky:         #5AAFE0;
    --ncoms-sky-d:       #2A7CAD;
    --ncoms-sky-pale:    #E8F5FB;
    --ncoms-olive:       #8BAB6E;
    --ncoms-olive-d:     #5B7A48;
    --ncoms-olive-pale:  #EFF4E8;
    --ncoms-ink:         #1E2420;
    --ncoms-ink-m:       #3D4A42;
    --ncoms-ink-l:       #6B7A6F;
    --ncoms-cream:       #FAFAF7;
    --ncoms-cream-d:     #F2F0EB;
    --ncoms-white:       #FFFFFF;

    /* ── シャドウ ── */
    --ncoms-shadow-sm:   0 2px 12px rgba(30, 36, 32, 0.06);
    --ncoms-shadow-md:   0 8px 32px rgba(30, 36, 32, 0.10);
    --ncoms-shadow-lg:   0 24px 64px rgba(30, 36, 32, 0.14);

    /* ── タイポグラフィ ── */
    --ncoms-serif:       'Noto Serif JP', 'Georgia', serif;
    --ncoms-display:     'Cormorant Garamond', 'Georgia', serif;
    --ncoms-sans:        'Noto Sans JP', 'Hiragino Kaku Gothic ProN',
                         'Hiragino Sans', 'YuGothic', 'Yu Gothic',
                         sans-serif;

    /* ── イージング ── */
    --ncoms-ease:        cubic-bezier(0.16, 1, 0.3, 1);
    --ncoms-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── スペース ── */
    --ncoms-container:   900px;
    --ncoms-container-w: 1100px;
    --ncoms-section-py:  clamp(80px, 10vw, 140px);

    /* ── アニメ遅延（JS / inline style で上書き） ── */
    --ncoms-delay:       0ms;
}


/* ══════════════════════════════════════════════════════════════
   BODY リセット（Cocoon 上書き）
══════════════════════════════════════════════════════════════ */

.nagasou-coms-body {
    font-family:          var(--ncoms-sans);
    background:           var(--ncoms-cream);
    color:                var(--ncoms-ink);
    line-height:          1.8;
    overflow-x:           hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Cocoon のレイアウト制御を無効化 */
.nagasou-coms-body #container,
.nagasou-coms-body #main,
.nagasou-coms-body .content-wrap {
    display: block;
    width:   100%;
    max-width: none;
    padding:   0;
    margin:    0;
    float:     none;
}

/* ──────────────────────────────────────────────────────
   ncoms-main スコープ リセット
────────────────────────────────────────────────────── */
.ncoms-main *,
.ncoms-main *::before,
.ncoms-main *::after {
    box-sizing: border-box;
}

.ncoms-main img {
    max-width:    100%;
    display:      block;
    height:       auto;
    vertical-align: bottom;
}

.ncoms-main ul,
.ncoms-main ol {
    list-style: none;
}


/* ══════════════════════════════════════════════════════════════
   スキップリンク（アクセシビリティ）
══════════════════════════════════════════════════════════════ */

.ncoms-skip-link {
    position: absolute;
    top:      -100%;
    left:     16px;
    z-index:  9999;
    padding:  8px 20px;
    background: var(--ncoms-ink);
    color:    var(--ncoms-white);
    font-size: 0.9rem;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top 0.2s;
}

.ncoms-skip-link:focus {
    top: 0;
}


/* ══════════════════════════════════════════════════════════════
   コンテナ
══════════════════════════════════════════════════════════════ */

.ncoms-container {
    max-width: var(--ncoms-container);
    margin:    0 auto;
    padding:   0 clamp(16px, 4vw, 32px);
}

.ncoms-container-wide {
    max-width: var(--ncoms-container-w);
    margin:    0 auto;
    padding:   0 clamp(16px, 4vw, 32px);
}


/* ══════════════════════════════════════════════════════════════
   スクロールリビール
══════════════════════════════════════════════════════════════ */

.ncoms-reveal {
    opacity:   0;
    transform: translateY(36px);
    transition:
        opacity   0.9s var(--ncoms-ease) var(--ncoms-delay),
        transform 0.9s var(--ncoms-ease) var(--ncoms-delay);
}

.ncoms-reveal.is-visible {
    opacity:   1;
    transform: translateY(0);
}

.ncoms-reveal-left {
    opacity:   0;
    transform: translateX(-48px);
    transition:
        opacity   0.9s var(--ncoms-ease) var(--ncoms-delay),
        transform 0.9s var(--ncoms-ease) var(--ncoms-delay);
}

.ncoms-reveal-right {
    opacity:   0;
    transform: translateX(48px);
    transition:
        opacity   0.9s var(--ncoms-ease) var(--ncoms-delay),
        transform 0.9s var(--ncoms-ease) var(--ncoms-delay);
}

.ncoms-reveal-left.is-visible,
.ncoms-reveal-right.is-visible {
    opacity:   1;
    transform: none;
}


/* ══════════════════════════════════════════════════════════════
   共通見出しパーツ
══════════════════════════════════════════════════════════════ */

.ncoms-kicker {
    display:        block;
    font-family:    var(--ncoms-display);
    font-style:     italic;
    font-size:      clamp(0.75rem, 1.4vw, 0.9rem);
    letter-spacing: 0.22em;
    color:          var(--ncoms-sky-d);
    margin-bottom:  clamp(12px, 2vw, 20px);
}

.ncoms-label {
    display:        block;
    font-family:    var(--ncoms-display);
    font-style:     italic;
    font-size:      0.85rem;
    letter-spacing: 0.20em;
    color:          var(--ncoms-sky-d);
    margin-bottom:  16px;
}

.ncoms-section-header {
    margin-bottom: clamp(40px, 6vw, 64px);
}

.ncoms-section-heading {
    font-family:    var(--ncoms-serif);
    font-size:      clamp(1.6rem, 4vw, 2.4rem);
    line-height:    1.5;
    letter-spacing: -0.01em;
    font-weight:    900;
    color:          var(--ncoms-ink);
    margin-bottom:  clamp(16px, 2.5vw, 24px);
}

.ncoms-specs .ncoms-section-heading,
.ncoms-interlude .ncoms-section-heading {
    color: var(--ncoms-white);
}

.ncoms-section-heading em {
    color:      var(--ncoms-sky-d);
    font-style: normal;
}

.ncoms-body-text {
    font-size:   clamp(0.95rem, 1.8vw, 1.05rem);
    line-height: 2.1;
    color:       var(--ncoms-ink-m);
    margin-bottom: 1.2em;
}

.ncoms-body-text:last-child {
    margin-bottom: 0;
}

.ncoms-body-text strong {
    color:       var(--ncoms-ink);
    font-weight: 700;
}


/* ══════════════════════════════════════════════════════════════
   オーナメント
══════════════════════════════════════════════════════════════ */

.ncoms-ornament {
    display:     flex;
    align-items: center;
    gap:         16px;
    margin-top:  clamp(48px, 8vw, 80px);
}

.ncoms-ornament__line {
    flex:         1;
    height:       1px;
    background:   linear-gradient(to right, transparent, rgba(30, 36, 32, 0.2), transparent);
}

.ncoms-ornament__gem {
    display:       block;
    width:         8px;
    height:        8px;
    background:    var(--ncoms-gold);
    transform:     rotate(45deg);
    flex-shrink:   0;
    border-radius: 1px;
}


/* ══════════════════════════════════════════════════════════════
   Section 1: HERO
══════════════════════════════════════════════════════════════ */

.ncoms-hero {
    position:        relative;
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    background:      linear-gradient(
        170deg,
        #0D2B42 0%,
        #1B5480 35%,
        #3A8EB8 65%,
        #7DC4E8 85%,
        #B8DFF0 100%
    );
}

/* ── 空・雲レイヤー ── */

.ncoms-hero__sky {
    position: absolute;
    inset:    0;
    z-index:  1;
    pointer-events: none;
}

.ncoms-hero__cloud {
    position:      absolute;
    border-radius: 50px;
    background:    rgba(255, 255, 255, 0.12);
    filter:        blur(20px);
    animation:     ncomsCloudDrift linear infinite;
}

.ncoms-hero__cloud--1 {
    width:  300px;
    height: 60px;
    top:    20%;
    left:   -10%;
    animation-duration: 60s;
    animation-delay:    0s;
}

.ncoms-hero__cloud--2 {
    width:  200px;
    height: 40px;
    top:    35%;
    left:   -5%;
    animation-duration: 45s;
    animation-delay:    -15s;
    background: rgba(255, 255, 255, 0.08);
}

.ncoms-hero__cloud--3 {
    width:  350px;
    height: 70px;
    top:    55%;
    left:   -15%;
    animation-duration: 75s;
    animation-delay:    -30s;
    background: rgba(255, 255, 255, 0.06);
}

@keyframes ncomsCloudDrift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(100vw + 400px)); }
}

/* ── 星 ── */

.ncoms-hero__stars {
    position: absolute;
    inset:    0;
    z-index:  1;
}

.ncoms-hero__star {
    position:      absolute;
    background:    #ffffff;
    border-radius: 50%;
    animation:     ncomsStarTwinkle ease-in-out infinite alternate;
}

@keyframes ncomsStarTwinkle {
    0%   { opacity: 0.1; transform: scale(0.8); }
    100% { opacity: 0.9; transform: scale(1.2); }
}

/* ── グラウンド ── */

.ncoms-hero__ground {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     200px;
    z-index:    2;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(78, 110, 72, 0.2) 60%,
        rgba(42, 68, 38, 0.4) 100%
    );
}

/* ── 車両画像 ── */

.ncoms-hero__vehicle {
    position:       absolute;
    z-index:        3;
    bottom:         0;
    right:          clamp(0px, 4vw, 80px);
    width:          clamp(280px, 40vw, 520px);
    pointer-events: none;
    padding-bottom: clamp(48px, 9vh, 110px);
    /* 浮遊アニメーション */
    animation:      ncomsVehicleFloat 5s ease-in-out infinite;
}

.ncoms-hero__vehicle-img {
    display:       block;
    width:         100%;
    height:        auto;
    /* ── ソフト丸角トリミング ──
     * 矩形写真を丸角カードに変換し、製品の「かわいさ・親しみやすさ」を演出。
     * border-radius: 24px は Airbnb / Apple の製品カードと同水準。
     */
    border-radius: clamp(16px, 2.5vw, 28px);
    /* ── ソフトシャドウ ──
     * 背景の空グラデーションに溶け込むよう、
     * シャドウカラーを空の深い青系で統一する。
     */
    box-shadow:
        0  8px  24px rgba(10, 30, 60, 0.30),
        0 24px  64px rgba(10, 30, 60, 0.20),
        0 48px 100px rgba(10, 30, 60, 0.12);
    /* 画像の白飛び防止 */
    background: transparent;
}

/* ── 浮遊アニメーション ──
 * 振れ幅 8px、周期 5秒。過剰な動きを避け「呼吸するような」自然さ。
 * ease-in-out で始点・終点を滑らかに。
 */
@keyframes ncomsVehicleFloat {
    0%,  100% { transform: translateY(0px); }
    50%        { transform: translateY(-8px); }
}

/* ── SP専用浮遊アニメーション ──
 * translateX(-50%) による水平センタリングを維持しつつ、
 * Y方向のみ浮遊する。
 * ベースの ncomsVehicleFloat（translateY のみ）との競合を回避するため SP専用化。
 */
@keyframes ncomsVehicleFloatSP {
    0%,  100% { transform: translateX(-50%) translateY(0px);  }
    50%        { transform: translateX(-50%) translateY(-8px); }
}

/* ── ヒーローコンテンツ ── */

.ncoms-hero__content {
    position:   relative;
    z-index:    10;
    text-align: left;
    padding:    clamp(100px, 14vh, 160px) clamp(20px, 6vw, 80px) clamp(60px, 10vh, 120px);
    max-width:  620px;
    margin-left: clamp(0px, 4vw, 60px);
    opacity:    0;
    transform:  translateY(32px);
    transition: opacity 1.0s var(--ncoms-ease) 0.3s,
                transform 1.0s var(--ncoms-ease) 0.3s;
}

.ncoms-hero.is-loaded .ncoms-hero__content {
    opacity:   1;
    transform: translateY(0);
}

.ncoms-hero__eyebrow {
    font-family:    var(--ncoms-display);
    font-style:     italic;
    font-size:      clamp(0.75rem, 1.4vw, 0.9rem);
    letter-spacing: 0.22em;
    color:          rgba(255, 255, 255, 0.65);
    margin-bottom:  clamp(12px, 2vw, 20px);
}

.ncoms-hero__title {
    font-family:    var(--ncoms-serif);
    font-size:      clamp(2.2rem, 5.2vw, 4.2rem);
    font-weight:    900;
    line-height:    1.35;
    letter-spacing: -0.02em;
    color:          var(--ncoms-white);
    margin-bottom:  clamp(16px, 2.5vw, 24px);
    /* PC で 1行あたり十分な幅を確保 */
    max-width:      680px;
}

.ncoms-hero__title em {
    font-style: normal;
    color:      var(--ncoms-gold-l);
}

/* タイトル改行制御
 * ─ PC : 2行に自然に収まるよう max-width 拡張・改行なし
 * ─ SP : span で明示的に改行
 */
.ncoms-hero__title-br {
    display: none;
}

/* ── PC大画面専用 改行制御スパン（em直後） ──
 * デフォルトは非表示。min-width: 1200px で block に切り替え。
 * SP用の ncoms-hero__title-br とは独立して管理。
 */
.ncoms-hero__title-br--pc {
    display: none;
}



@keyframes ncomsBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(1.4); }
}

/* ── スクロールインジケーター ── */

.ncoms-hero__scroll-indicator {
    position:   absolute;
    bottom:     clamp(20px, 4vh, 40px);
    left:       50%;
    transform:  translateX(-50%);
    z-index:    10;
    display:    flex;
    flex-direction: column;
    align-items: center;
    gap:         8px;
    opacity:     0;
    animation:  ncomsScrollFadeIn 0.6s var(--ncoms-ease) 1.4s forwards;
}

@keyframes ncomsScrollFadeIn {
    to { opacity: 1; }
}

.ncoms-hero__scroll-text {
    font-family:    var(--ncoms-display);
    font-style:     italic;
    font-size:      0.65rem;
    letter-spacing: 0.28em;
    color:          rgba(255, 255, 255, 0.45);
}

.ncoms-hero__scroll-line {
    display:       block;
    width:         1px;
    height:        48px;
    background:    linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
    animation:     ncomsScrollLine 2s ease-in-out infinite;
}

@keyframes ncomsScrollLine {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
    50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    51%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════
   Section 2: INTRO（安来の暮らし）
══════════════════════════════════════════════════════════════ */

.ncoms-intro {
    padding:    var(--ncoms-section-py) 0;
    background: var(--ncoms-white);
}

.ncoms-intro__lead {
    font-family:  var(--ncoms-serif);
    font-size:    clamp(1.75rem, 4.5vw, 3rem);
    font-weight:  900;
    line-height:  1.55;
    color:        var(--ncoms-ink);
    margin-bottom: clamp(36px, 5vw, 56px);
}

.ncoms-intro__scenery {
    margin-bottom: clamp(36px, 5vw, 56px);
    border-radius: 16px;
    overflow:      hidden;
    box-shadow:    var(--ncoms-shadow-md);
}

.ncoms-intro__scenery img {
    width:       100%;
    height:      clamp(200px, 40vw, 400px);
    object-fit:  cover;
    object-position: center;
}

.ncoms-tagline {
    margin-top:   clamp(28px, 4vw, 44px);
    padding:      clamp(20px, 3vw, 28px) clamp(20px, 3.5vw, 32px);
    border-left:  4px solid var(--ncoms-sky-d);
    background:   var(--ncoms-sky-pale);
    border-radius: 0 12px 12px 0;
    font-size:    clamp(0.95rem, 1.9vw, 1.1rem);
    line-height:  2.2;
    color:        var(--ncoms-ink-m);
    quotes:       none;
}

.ncoms-tagline strong {
    color:       var(--ncoms-sky-d);
    font-weight: 800;
}


/* ══════════════════════════════════════════════════════════════
   Section 4: ROAD INTERLUDE
══════════════════════════════════════════════════════════════ */

.ncoms-interlude {
    position:   relative;
    padding:    var(--ncoms-section-py) 0;
    background: var(--ncoms-ink);
    overflow:   hidden;
    color:      var(--ncoms-white);
}

.ncoms-interlude__grid {
    position:    absolute;
    inset:       0;
    z-index:     0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.ncoms-interlude__content {
    position:   relative;
    z-index:    1;
    text-align: center;
}

.ncoms-interlude__quote {
    font-family:    var(--ncoms-serif);
    font-size:      clamp(1.5rem, 4vw, 2.8rem);
    font-weight:    900;
    line-height:    1.7;
    color:          var(--ncoms-white);
    margin-bottom:  clamp(24px, 3.5vw, 36px);
}

.ncoms-interlude__quote em {
    color:      var(--ncoms-gold-l);
    font-style: normal;
}

.ncoms-interlude__sub {
    font-family:    var(--ncoms-display);
    font-style:     italic;
    font-size:      0.8rem;
    letter-spacing: 0.22em;
    color:          rgba(255, 255, 255, 0.4);
}

/* ── プルクォート ── */

.ncoms-pullquote {
    padding:    clamp(60px, 8vw, 100px) 0;
    background: var(--ncoms-cream-d);
    text-align: center;
}

.ncoms-pullquote__text {
    font-family:  var(--ncoms-serif);
    font-size:    clamp(1.45rem, 3.5vw, 2.4rem);
    font-weight:  900;
    line-height:  1.8;
    color:        var(--ncoms-ink);
    margin-bottom: clamp(16px, 2.5vw, 24px);
    quotes:       none;
}

.ncoms-pullquote__text em {
    color:      var(--ncoms-sky-d);
    font-style: normal;
}

.ncoms-pullquote__attr {
    font-family:    var(--ncoms-display);
    font-style:     italic;
    font-size:      0.85rem;
    letter-spacing: 0.10em;
    color:          var(--ncoms-ink-l);
}


/* ══════════════════════════════════════════════════════════════
   Section 5: FEATURES（6つの理由）
══════════════════════════════════════════════════════════════ */

.ncoms-features {
    padding:    var(--ncoms-section-py) 0;
    background: var(--ncoms-cream);
}

.ncoms-features__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   clamp(20px, 3vw, 32px);
    margin-top:            clamp(40px, 6vw, 64px);
}

/* Feature Card */
.ncoms-feature-card {
    background:    var(--ncoms-white);
    border-radius: 16px;
    padding:       clamp(24px, 3.5vw, 36px);
    border-top:    3px solid transparent;
    box-shadow:    var(--ncoms-shadow-sm);
    transition:    box-shadow 0.35s var(--ncoms-ease),
                   transform  0.35s var(--ncoms-ease);
}

.ncoms-feature-card:hover {
    box-shadow: var(--ncoms-shadow-lg);
    transform:  translateY(-4px);
}

.ncoms-feature-card--sky  { border-top-color: var(--ncoms-sky-d); }
.ncoms-feature-card--gold { border-top-color: var(--ncoms-gold);  }
.ncoms-feature-card--olive { border-top-color: var(--ncoms-olive); }

.ncoms-feature-card__num {
    display:        block;
    font-family:    var(--ncoms-display);
    font-style:     italic;
    font-size:      0.75rem;
    letter-spacing: 0.18em;
    color:          var(--ncoms-ink-l);
    margin-bottom:  12px;
}

.ncoms-feature-card__icon {
    display:       block;
    font-size:     2rem;
    margin-bottom: 12px;
}

.ncoms-feature-card__title {
    font-family:    var(--ncoms-serif);
    font-size:      clamp(1rem, 2vw, 1.2rem);
    font-weight:    800;
    line-height:    1.5;
    color:          var(--ncoms-ink);
    margin-bottom:  12px;
}

.ncoms-feature-card__text {
    font-size:   clamp(0.88rem, 1.5vw, 0.97rem);
    line-height: 2.0;
    color:       var(--ncoms-ink-m);
}

.ncoms-feature-card__photo {
    margin-top:    clamp(16px, 2.5vw, 24px);
    border-radius: 10px;
    overflow:      hidden;
    /* ── 画像の外枠を整えつつ比率変化に対応 ── */
    background:    #f4f2ec;
}

.ncoms-feature-card__photo img {
    /* ── 800×600（4:3）ネイティブ比率を維持してフル表示 ──
     * aspect-ratio: 4 / 3 でコンテナが比率を保持し、
     * height: auto で自然な高さを確保する。
     * object-fit: contain で上下のクリップを撤廃。
     * object-position: center bottom で被写体下部（地面・人物の足元）を優先表示。
     */
    display:          block;
    width:            100%;
    height:           auto;
    aspect-ratio:     4 / 3;
    object-fit:       contain;
    object-position:  center center;
    background-color: #f4f2ec; /* 余白部分の背景色（和紙色・画像に馴染む）*/
}


/* ══════════════════════════════════════════════════════════════
   Section 6: SPECS
══════════════════════════════════════════════════════════════ */

.ncoms-specs {
    position:   relative;
    padding:    var(--ncoms-section-py) 0;
    background: var(--ncoms-ink);
    color:      var(--ncoms-white);
    overflow:   hidden;
}

/* COMS ウォーターマーク */
.ncoms-specs::before {
    content:        'COMS';
    font-family:    var(--ncoms-display);
    font-size:      clamp(8rem, 18vw, 18rem);
    color:          rgba(255, 255, 255, 0.03);
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -50%);
    white-space:    nowrap;
    user-select:    none;
    pointer-events: none;
    z-index:        0;
}

.ncoms-specs .ncoms-container-wide > * {
    position: relative;
    z-index:  1;
}

.ncoms-specs .ncoms-label {
    color: rgba(255, 255, 255, 0.45);
}

.ncoms-specs .ncoms-body-text {
    color: rgba(255, 255, 255, 0.65);
}

/* BIGナンバー */
.ncoms-specs__numbers {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   clamp(24px, 4vw, 40px);
    margin:                clamp(40px, 6vw, 64px) 0;
    text-align:            center;
}

.ncoms-spec-num {
    padding:       clamp(24px, 3.5vw, 40px) clamp(16px, 2.5vw, 28px);
    background:    rgba(255, 255, 255, 0.04);
    border:        1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.ncoms-spec-num__label {
    font-size:      0.8rem;
    letter-spacing: 0.14em;
    color:          rgba(255, 255, 255, 0.45);
    margin-bottom:  8px;
}

.ncoms-spec-num__value {
    font-family:  var(--ncoms-display);
    font-size:    clamp(2.5rem, 5.5vw, 4rem);
    font-weight:  900;
    color:        var(--ncoms-gold-l);
    line-height:  1.1;
    margin-bottom: 12px;
}

.ncoms-spec-num__unit {
    font-size:   clamp(1rem, 2vw, 1.5rem);
    font-weight: 400;
    margin-left: 4px;
}

.ncoms-spec-num__note {
    font-size:   0.8rem;
    line-height: 1.9;
    color:       rgba(255, 255, 255, 0.45);
}

/* 比較テーブル */
/* ── テーブル全体ラッパー ── */
.ncoms-table-wrap {
    overflow-x:    auto;
    border-radius: 12px;
    margin-bottom: clamp(40px, 6vw, 60px);
    box-shadow:    0 0 0 1px rgba(255, 255, 255, 0.08);
    /* ── Cocoon の border-collapse リセット対策 ── */
    -webkit-overflow-scrolling: touch;
}

/* ── テーブル本体 ── */
.ncoms-compare-table {
    width:            100%;
    border-collapse:  collapse;
    font-size:        clamp(0.82rem, 1.5vw, 0.95rem);
    min-width:        560px;
    /* ── Cocoon の table { background: #fff } を上書き ── */
    background:       transparent !important;
}

/* ── ヘッダー行 ── */
.ncoms-compare-table thead tr {
    background: rgba(255, 255, 255, 0.06) !important;
}

.ncoms-compare-table th {
    padding:          14px 18px;
    text-align:       left;
    font-weight:      700;
    /* ── Cocoon の白背景・黒文字を上書き ── */
    background:       rgba(30, 36, 32, 0.95) !important;
    color:            rgba(255, 255, 255, 0.80) !important;
    letter-spacing:   0.04em;
    border-bottom:    1px solid rgba(255, 255, 255, 0.10) !important;
    border-top:       none !important;
    border-left:      none !important;
    border-right:     none !important;
}

/* コムス列ヘッダー（ゴールド強調） */
.ncoms-compare-table__coms-col {
    background: rgba(201, 168, 76, 0.15) !important;
    color:      var(--ncoms-gold-l) !important;
}

/* ── ボディ行 ── */
.ncoms-compare-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition:    background 0.2s;
}

.ncoms-compare-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02) !important;
}

.ncoms-compare-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04) !important;
}

.ncoms-compare-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}

/* ── セル共通 ── */
.ncoms-compare-table td {
    padding:    14px 18px;
    /* ── Cocoon の白背景・黒文字を上書き ── */
    background: transparent !important;
    color:      rgba(255, 255, 255, 0.75) !important;
    border-top:   none !important;
    border-left:  none !important;
    border-right: none !important;
}

/* 比較ポイント列（左端・薄い文字） */
.ncoms-compare-table__label {
    color:       rgba(255, 255, 255, 0.50) !important;
    font-size:   0.82rem;
    white-space: nowrap;
    background:  transparent !important;
}

/* コムス列（ゴールド強調） */
.ncoms-compare-table__coms {
    color:       var(--ncoms-gold-l) !important;
    font-weight: 700;
    background:  rgba(201, 168, 76, 0.06) !important;
}

/* バッジ */
.ncoms-badge {
    display:        inline-block;
    margin-left:    8px;
    padding:        2px 8px;
    background:     var(--ncoms-sky-d) !important;
    color:          var(--ncoms-white) !important;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    border-radius:  50px;
    white-space:    nowrap;
    vertical-align: middle;
}

/* 維持費比較カード */
.ncoms-cost-wrap {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:                   clamp(20px, 3vw, 32px);
}

.ncoms-cost-card {
    padding:       clamp(24px, 3.5vw, 36px);
    border-radius: 16px;
    border:        1px solid rgba(255, 255, 255, 0.10);
}

.ncoms-cost-card--coms {
    background: rgba(90, 175, 224, 0.12);
    border-color: rgba(90, 175, 224, 0.25);
}

.ncoms-cost-card--kei {
    background: rgba(255, 255, 255, 0.04);
}

.ncoms-cost-card__label {
    font-size:     0.85rem;
    font-weight:   700;
    color:         rgba(255, 255, 255, 0.55);
    margin-bottom: 16px;
    letter-spacing: 0.06em;
}

.ncoms-cost-item,
.ncoms-cost-total {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             12px;
    padding:         10px 0;
    border-bottom:   1px solid rgba(255, 255, 255, 0.06);
    font-size:       0.88rem;
    color:           rgba(255, 255, 255, 0.60);
}

.ncoms-cost-total {
    border-bottom:  none;
    padding-top:    16px;
    font-weight:    700;
    font-size:      0.95rem;
    color:          rgba(255, 255, 255, 0.80);
}

.ncoms-cost-item__val--low,
.ncoms-cost-total__val--low {
    color:       var(--ncoms-sky);
    font-weight: 700;
    white-space: nowrap;
}

.ncoms-cost-item__val--high,
.ncoms-cost-total__val--high {
    color:       rgba(255, 180, 120, 0.85);
    font-weight: 700;
    white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════
   Section 7: PERSONAS
══════════════════════════════════════════════════════════════ */

.ncoms-personas {
    padding:    var(--ncoms-section-py) 0;
    background: var(--ncoms-cream-d);
}

.ncoms-personas__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   clamp(24px, 4vw, 40px);
    margin-top:            clamp(40px, 6vw, 60px);
}

.ncoms-persona-card {
    background:    var(--ncoms-white);
    border-radius: 20px;
    padding:       clamp(28px, 4vw, 40px) clamp(24px, 3.5vw, 32px);
    border-top:    4px solid transparent;
    box-shadow:    var(--ncoms-shadow-sm);
    transition:    box-shadow 0.35s var(--ncoms-ease),
                   transform  0.35s var(--ncoms-ease);
}

.ncoms-persona-card:hover {
    box-shadow: var(--ncoms-shadow-md);
    transform:  translateY(-4px);
}

.ncoms-persona-card--sky  { border-top-color: var(--ncoms-sky-d); }
.ncoms-persona-card--olive { border-top-color: var(--ncoms-olive); }
.ncoms-persona-card--gold { border-top-color: var(--ncoms-gold);  }

.ncoms-persona-card__avatar {
    width:           72px;
    height:          72px;
    border-radius:   50%;
    background:      var(--ncoms-cream-d);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       2.2rem;
    margin-bottom:   20px;
    overflow:        hidden;
}

.ncoms-persona-card__avatar img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: center;
}

.ncoms-persona-card__name {
    font-family:   var(--ncoms-serif);
    font-weight:   800;
    font-size:     1.05rem;
    color:         var(--ncoms-ink);
    margin-bottom: 4px;
}

.ncoms-persona-card__sub {
    font-size:     0.8rem;
    color:         var(--ncoms-ink-l);
    margin-bottom: 16px;
    letter-spacing: 0.04em;
}

.ncoms-persona-card__voice {
    font-size:     clamp(0.88rem, 1.6vw, 0.98rem);
    line-height:   1.9;
    color:         var(--ncoms-sky-d);
    font-weight:   600;
    padding:       14px 16px;
    background:    var(--ncoms-sky-pale);
    border-radius: 10px;
    margin-bottom: 20px;
    position:      relative;
}

.ncoms-persona-card__voice::before {
    content:     '"';
    font-family: var(--ncoms-display);
    font-size:   2rem;
    color:       var(--ncoms-sky);
    line-height: 1;
    display:     block;
    margin-bottom: -4px;
}

.ncoms-persona-card__points {
    list-style:  none;
    padding:     0;
    margin:      0;
}

.ncoms-persona-card__points li {
    font-size:     0.88rem;
    line-height:   1.8;
    color:         var(--ncoms-ink-m);
    padding-left:  16px;
    position:      relative;
    margin-bottom: 4px;
}

.ncoms-persona-card__points li::before {
    content:   '✓';
    position:  absolute;
    left:      0;
    color:     var(--ncoms-olive);
    font-weight: 700;
}


/* ══════════════════════════════════════════════════════════════
   Section 8: Nagasou（永惣）
══════════════════════════════════════════════════════════════ */

.ncoms-eisou {
    padding:    var(--ncoms-section-py) 0;
    background: var(--ncoms-white);
}

.ncoms-eisou__layout {
    display:     grid;
    gap:         clamp(48px, 7vw, 80px);
    align-items: start;
}

/* 左カラム */
.ncoms-eisou__emblem {
    width:           120px;
    height:          120px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--ncoms-ink) 0%, var(--ncoms-ink-m) 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   24px;
    box-shadow:      var(--ncoms-shadow-md);
}

.ncoms-eisou__kanji {
    font-family: var(--ncoms-serif);
    font-size:   2.4rem;
    font-weight: 900;
    color:       var(--ncoms-white);
    letter-spacing: -0.02em;
}

.ncoms-eisou__company {
    font-family:   var(--ncoms-serif);
    font-size:     1.2rem;
    font-weight:   800;
    color:         var(--ncoms-ink);
    margin-bottom: 6px;
}

.ncoms-eisou__tagline {
    font-size:     0.85rem;
    color:         var(--ncoms-ink-l);
    margin-bottom: 24px;
    letter-spacing: 0.04em;
}

.ncoms-eisou__years {
    display:       inline-flex;
    align-items:   baseline;
    gap:           8px;
    padding:       8px 20px;
    background:    var(--ncoms-gold-bg);
    border:        1px solid rgba(201, 168, 76, 0.25);
    border-radius: 50px;
    margin-bottom: 24px;
}

.ncoms-eisou__years-num {
    font-family: var(--ncoms-display);
    font-size:   2rem;
    font-weight: 900;
    color:       var(--ncoms-gold);
    line-height: 1;
}

.ncoms-eisou__years-text {
    font-size:   0.85rem;
    color:       var(--ncoms-ink-m);
    font-weight: 600;
}

.ncoms-eisou__station-photo {
    margin-top:    24px;
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    var(--ncoms-shadow-sm);
}

.ncoms-eisou__station-photo img {
    width:       100%;
    height:      200px;
    object-fit:  cover;
}

/* =====================================================
   EMBLEM
   Headerブランド表現継承
===================================================== */

.ncoms-eisou__emblem {
    position: relative;
    width: 108px;
    height: 108px;
    margin-inline: auto;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 外側グロー */
.ncoms-eisou__emblem-glow {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(201,168,76,.30) 0%,
            rgba(201,168,76,.12) 40%,
            transparent 72%
        );
    animation: ncomsEmblemGlow 4s ease-in-out infinite;
}

@keyframes ncomsEmblemGlow {
    0%,100% {
        opacity: .45;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

/* 外リング */
.ncoms-eisou__emblem-ring-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--ncoms-gold);
}

/* 内リング */
.ncoms-eisou__emblem-ring-inner {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,.35);
}

/* 中央塗り */
.ncoms-eisou__emblem-fill {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #1E2C24 0%,
            #2B3D31 50%,
            #18211C 100%
        );
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        inset 0 1px 4px rgba(255,255,255,.08),
        0 8px 20px rgba(0,0,0,.18);
}

/* 上部光沢 */
.ncoms-eisou__emblem-fill::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52%;
    border-radius: 50% 50% 0 0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            transparent
        );
}

/* 永惣文字 */
.ncoms-eisou__emblem-kanji {
    position: relative;
    z-index: 1;
    font-family: var(--ncoms-serif);
    font-size: 1.65rem;
    font-weight: 400;
    color: var(--ncoms-gold-l);
    letter-spacing: .05em;
    text-shadow:
        0 0 8px rgba(201,168,76,.28);
}

/* 上下ダイヤ */
.ncoms-eisou__emblem-gem {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    background: var(--ncoms-gold);
}

.ncoms-eisou__emblem-gem--top {
    top: -3px;
}

.ncoms-eisou__emblem-gem--bottom {
    bottom: -3px;
}


/* 右カラム */
.ncoms-eisou__services {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    margin-top:     clamp(28px, 4vw, 40px);
}

.ncoms-eisou__service-item {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
    padding:     18px 20px;
    background:  var(--ncoms-cream);
    border-radius: 12px;
    transition:  background 0.2s;
}

.ncoms-eisou__service-item:hover {
    background: var(--ncoms-cream-d);
}

.ncoms-eisou__service-icon {
    font-size:    1.6rem;
    flex-shrink:  0;
    margin-top:   2px;
}

.ncoms-eisou__service-name {
    font-weight:   700;
    font-size:     0.97rem;
    color:         var(--ncoms-ink);
    margin-bottom: 4px;
}

.ncoms-eisou__service-desc {
    font-size:   0.85rem;
    line-height: 1.8;
    color:       var(--ncoms-ink-l);
}

@media (max-width: 767px){
  .ncoms-eisou__emblem{
      width:88px;
      height:88px;
  }

  .ncoms-eisou__emblem-kanji{
      font-size:1.35rem;
  }
}


/* ══════════════════════════════════════════════════════════════
   Section 9: FINAL CTA
══════════════════════════════════════════════════════════════ */

.ncoms-cta {
    padding:    var(--ncoms-section-py) 0;
    background: linear-gradient(
        160deg,
        #0D2B42 0%,
        #1B5480 40%,
        #3A8EB8 70%,
        #5AAFE0 100%
    );
    color:      var(--ncoms-white);
    text-align: center;
    position:   relative;
    overflow:   hidden;
}

.ncoms-cta::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(201, 168, 76, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.ncoms-cta__content {
    position:   relative;
    z-index:    1;
}

.ncoms-cta__eyebrow {
    font-family:    var(--ncoms-display);
    font-style:     italic;
    font-size:      clamp(0.75rem, 1.4vw, 0.9rem);
    letter-spacing: 0.22em;
    color:          rgba(255, 255, 255, 0.55);
    margin-bottom:  clamp(16px, 2.5vw, 24px);
}

.ncoms-cta__title {
    font-family:    var(--ncoms-serif);
    font-size:      clamp(2rem, 5.5vw, 4rem);
    font-weight:    900;
    line-height:    1.35;
    color:          var(--ncoms-white);
    margin-bottom:  clamp(24px, 4vw, 40px);
}

.ncoms-cta__title em {
    color:      var(--ncoms-gold-l);
    font-style: normal;
}

.ncoms-cta__photo {
    margin:        0 auto clamp(28px, 4vw, 44px);
    max-width:     720px;
    border-radius: 16px;
    overflow:      hidden;
    box-shadow:    var(--ncoms-shadow-lg);
}

.ncoms-cta__photo img {
    width:       100%;
    height:      clamp(200px, 35vw, 380px);
    object-fit:  cover;
    object-position: center;
}

.ncoms-cta__text {
    font-size:     clamp(1rem, 1.9vw, 1.15rem);
    line-height:   2.1;
    color:         rgba(255, 255, 255, 0.80);
    margin-bottom: clamp(32px, 5vw, 52px);
}

/* CTA ボタン */
.ncoms-cta__buttons {
    display:         flex;
    flex-wrap:       wrap;
    gap:             16px;
    justify-content: center;
    margin-bottom:   clamp(48px, 7vw, 80px);
}

.ncoms-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            8px;
    min-width:      200px;
    padding:        1rem 2rem;
    border-radius:  50px;
    font-size:      clamp(0.95rem, 1.7vw, 1.05rem);
    font-weight:    700;
    letter-spacing: 0.04em;
    text-decoration: none;
    border:         2px solid transparent;
    cursor:         pointer;
    transition:     background 0.25s var(--ncoms-ease),
                    color      0.25s var(--ncoms-ease),
                    box-shadow 0.25s var(--ncoms-ease),
                    transform  0.25s var(--ncoms-ease);
}

.ncoms-btn:hover {
    transform: translateY(-2px);
}

.ncoms-btn:focus-visible {
    outline:        3px solid var(--ncoms-gold-l);
    outline-offset: 4px;
}

.ncoms-btn--primary {
    background: var(--ncoms-white);
    color:      var(--ncoms-ink);
    box-shadow: var(--ncoms-shadow-md);
}

.ncoms-btn--primary:hover {
    background: var(--ncoms-cream);
    box-shadow: var(--ncoms-shadow-lg);
}

.ncoms-btn--secondary {
    background: transparent;
    color:      var(--ncoms-white);
    border-color: rgba(255, 255, 255, 0.5);
}

.ncoms-btn--secondary:hover {
    background:   rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.8);
}

/* クロージングポエム */
.ncoms-closing-poem {
    font-family:    var(--ncoms-serif);
    font-size:      clamp(0.9rem, 1.7vw, 1.05rem);
    line-height:    2.5;
    color:          rgba(255, 255, 255, 0.55);
    margin-bottom:  clamp(48px, 7vw, 80px);
}

/* CF7 フォームエリア */
.ncoms-cf7-wrap {
    max-width:     640px;
    margin:        0 auto clamp(40px, 6vw, 64px);
    text-align:    left;
    background:    rgba(255, 255, 255, 0.06);
    border:        1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding:       clamp(28px, 4.5vw, 48px);
}

.ncoms-cf7-heading {
    font-family:   var(--ncoms-serif);
    font-size:     clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight:   800;
    color:         var(--ncoms-white);
    margin-bottom: 10px;
}

.ncoms-cf7-lead {
    font-size:     clamp(0.85rem, 1.5vw, 0.95rem);
    line-height:   1.9;
    color:         rgba(255, 255, 255, 0.60);
    margin-bottom: 24px;
}

.ncoms-cf7-form .wpcf7-form-control-wrap input,
.ncoms-cf7-form .wpcf7-form-control-wrap textarea,
.ncoms-cf7-form .wpcf7-form-control-wrap select {
    width:         100%;
    padding:       12px 16px;
    background:    rgba(255, 255, 255, 0.08);
    border:        1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    color:         var(--ncoms-white);
    font-size:     0.95rem;
    font-family:   var(--ncoms-sans);
    transition:    border-color 0.2s, background 0.2s;
}

.ncoms-cf7-form .wpcf7-form-control-wrap input:focus,
.ncoms-cf7-form .wpcf7-form-control-wrap textarea:focus {
    outline:      none;
    border-color: var(--ncoms-sky);
    background:   rgba(255, 255, 255, 0.12);
}

.ncoms-cf7-form .wpcf7-form-control-wrap input::placeholder,
.ncoms-cf7-form .wpcf7-form-control-wrap textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.ncoms-cf7-form .wpcf7-submit {
    display:       block;
    width:         100%;
    padding:       14px 24px;
    background:    var(--ncoms-sky-d);
    color:         var(--ncoms-white);
    border:        none;
    border-radius: 50px;
    font-size:     1rem;
    font-weight:   700;
    font-family:   var(--ncoms-sans);
    cursor:        pointer;
    transition:    background 0.25s, transform 0.25s;
}

.ncoms-cf7-form .wpcf7-submit:hover {
    background: #1e6290;
    transform:  translateY(-1px);
}

.ncoms-cf7-placeholder {
    color:     rgba(255, 255, 255, 0.45);
    font-size: 0.9rem;
    text-align: center;
    padding:   24px 0;
}


/* ══════════════════════════════════════════════════════════════
   スマホ固定 CTA バー
══════════════════════════════════════════════════════════════ */

.ncoms-fixed-cta {
    display:    none;
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    900;
    background: var(--ncoms-sky-d);
    padding:    10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    gap:        12px;
    opacity:    0;
    transform:  translateY(100%);
    transition: opacity   0.4s var(--ncoms-ease),
                transform 0.4s var(--ncoms-ease);
}

.ncoms-fixed-cta.is-visible {
    opacity:   1;
    transform: translateY(0);
}

.ncoms-fixed-cta__btn {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         12px 8px;
    border-radius:   10px;
    font-size:       0.88rem;
    font-weight:     700;
    text-decoration: none;
    color:           var(--ncoms-white);
    transition:      background 0.2s;
}

.ncoms-fixed-cta__btn--tel {
    background: rgba(255, 255, 255, 0.18);
}

.ncoms-fixed-cta__btn--tel:hover {
    background: rgba(255, 255, 255, 0.28);
}

.ncoms-fixed-cta__btn--form {
    background: var(--ncoms-gold);
    color:      var(--ncoms-ink);
}

.ncoms-fixed-cta__btn--form:hover {
    background: var(--ncoms-gold-l);
}




/* ══════════════════════════════════════════════════════════════
   prefers-reduced-motion（動き軽減）
══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    .ncoms-reveal,
    .ncoms-reveal-left,
    .ncoms-reveal-right,
    .ncoms-hero__content,
    .ncoms-hero__scroll-indicator,
    .ncoms-fixed-cta,
    .ncoms-hero__cloud,
    .ncoms-hero__star,
    .ncoms-hero__scroll-line,
    .ncoms-hero__badge-dot,
    .ncoms-feature-card,
    .ncoms-persona-card,
    .ncoms-btn {
        transition:  none !important;
        animation:   none !important;
        transform:   none !important;
        opacity:     1 !important;
        visibility:  visible !important;
    }

}

@media (prefers-reduced-motion: reduce) {
    .ncoms-hero__vehicle {
        animation: none !important;
    }
}

/* ── ペルソナ 免責注釈 ── */
.ncoms-personas__note {
    text-align:     center;
    margin-top:     clamp(24px, 4vw, 40px);
    font-size:      0.78rem;
    /* 背景色 #F2F0EB（クリーム）上でのコントラスト比 ≈ 5.1:1
     * WCAG 2.1 AA 基準（小テキスト 4.5:1）準拠。
     * サイトカラー体系の sky-d 系に近い爽やかなブルーで統一感を維持。
     */
    color:          #1A6BA0;
    letter-spacing: 0.06em;
    line-height:    1.8;
}

/* ══════════════════════════════════════════════════════════════
   PRIVACY POLICY MODAL（nagasou-coms LP 専用）
   設計: nagasou-contact と同一構造・名前空間のみ ncoms- に変更
══════════════════════════════════════════════════════════════ */

/* ── スクロールロック ── */
body.ncoms-scroll-lock {
    overflow: hidden;
}

/* ── トリガーボタン（JS が .privacy-consent 直前に注入）── */
.ncoms-pp-trigger {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.55rem;
    width:           100%;
    padding:         0.85rem 1.4rem;
    margin-bottom:   0.75rem;
    background:      rgba(90, 175, 224, 0.08);
    border:          1px solid rgba(90, 175, 224, 0.25);
    border-radius:   8px;
    font-family:     var(--ncoms-sans);
    font-size:       0.83rem;
    font-weight:     600;
    letter-spacing:  0.06em;
    color:           var(--ncoms-sky);
    cursor:          pointer;
    min-height:      44px;
    transition:
        background  0.25s var(--ncoms-ease),
        border-color 0.25s var(--ncoms-ease),
        transform   0.25s var(--ncoms-ease);
    -webkit-tap-highlight-color: transparent;
}

.ncoms-pp-trigger:hover,
.ncoms-pp-trigger:focus-visible {
    background:   rgba(90, 175, 224, 0.15);
    border-color: var(--ncoms-sky);
    transform:    translateY(-2px);
    outline:      none;
}

.ncoms-pp-trigger svg {
    width:             16px;
    height:            16px;
    stroke:            var(--ncoms-sky);
    fill:              none;
    stroke-width:      1.5;
    stroke-linecap:    round;
    stroke-linejoin:   round;
    flex-shrink:       0;
}

/* ── オーバーレイ ── */
.ncoms-pp-overlay {
    position:        fixed;
    inset:           0;
    z-index:         9950;
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    background:      rgba(3, 5, 4, 0.88);
    backdrop-filter: blur(10px) saturate(0.7);
    -webkit-backdrop-filter: blur(10px) saturate(0.7);
    padding:         0;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.38s var(--ncoms-ease);
}

.ncoms-pp-overlay.is-active {
    opacity:        1;
    pointer-events: auto;
}

/* ── モーダルダイアログ ── */
.ncoms-pp-modal {
    position:     relative;
    width:        100%;
    max-width:    640px;
    max-height:   92dvh;
    background:   rgba(13, 43, 66, 0.97);
    border:       1px solid rgba(201, 168, 76, 0.18);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    display:      flex;
    flex-direction: column;
    overflow:     hidden;
    opacity:      0;
    transform:    translateY(52px);
    transition:
        transform 0.46s var(--ncoms-ease),
        opacity   0.46s var(--ncoms-ease);
}

.ncoms-pp-overlay.is-active .ncoms-pp-modal {
    opacity:   1;
    transform: translateY(0);
}

/* ドラッグハンドル（モバイル）*/
.ncoms-pp-modal__handle {
    position:  absolute;
    top:       10px;
    left:      50%;
    transform: translateX(-50%);
    width:     36px;
    height:    3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    z-index:   2;
}

/* トップゴールドライン */
.ncoms-pp-modal__glow {
    position:   absolute;
    top:        0; left: 0; right: 0;
    height:     2px;
    background: linear-gradient(90deg, transparent, var(--ncoms-gold) 40%, var(--ncoms-gold-l) 60%, transparent);
    opacity:    0.5;
    z-index:    2;
}

/* ヘッダー */
.ncoms-pp-modal__head {
    flex-shrink:      0;
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          26px 22px 18px;
    border-bottom:    1px solid rgba(255, 255, 255, 0.07);
    gap:              12px;
}

.ncoms-pp-modal__title {
    font-family:    var(--ncoms-serif);
    font-size:      17px;
    font-weight:    400;
    letter-spacing: 0.12em;
    color:          var(--ncoms-gold-l);
    margin:         0;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.ncoms-pp-modal__title svg {
    stroke:           var(--ncoms-gold);
    fill:             none;
    stroke-width:     1.5;
    stroke-linecap:   round;
    stroke-linejoin:  round;
    flex-shrink:      0;
}

.ncoms-pp-modal__close {
    width:           38px;
    height:          38px;
    border-radius:   50%;
    border:          1px solid rgba(255, 255, 255, 0.12);
    background:      rgba(255, 255, 255, 0.05);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    flex-shrink:     0;
    color:           rgba(255, 255, 255, 0.55);
    transition:
        background  0.25s,
        color       0.25s,
        transform   0.35s var(--ncoms-ease);
    -webkit-tap-highlight-color: transparent;
    min-width:  44px;
    min-height: 44px;
}

.ncoms-pp-modal__close:hover,
.ncoms-pp-modal__close:focus-visible {
    background: rgba(201, 168, 76, 0.15);
    color:      var(--ncoms-gold-l);
    transform:  rotate(90deg);
    outline:    none;
}

/* 本文スクロールエリア */
.ncoms-pp-modal__body {
    flex:       1;
    overflow-y: auto;
    padding:    20px 22px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.ncoms-pp-modal__body::-webkit-scrollbar { width: 3px; }
.ncoms-pp-modal__body::-webkit-scrollbar-track { background: transparent; }
.ncoms-pp-modal__body::-webkit-scrollbar-thumb {
    background:    rgba(201, 168, 76, 0.3);
    border-radius: 2px;
}

.ncoms-pp-modal__lead {
    font-size:     13px;
    color:         rgba(255, 255, 255, 0.55);
    line-height:   1.9;
    margin:        0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-weight:   300;
    letter-spacing: 0.04em;
}

.ncoms-pp-section {
    margin-bottom:  18px;
    padding-bottom: 18px;
    border-bottom:  1px solid rgba(255, 255, 255, 0.05);
}

.ncoms-pp-section:last-child {
    margin-bottom:  0;
    padding-bottom: 0;
    border-bottom:  none;
}

.ncoms-pp-section__title {
    font-family:    var(--ncoms-serif);
    font-size:      14px;
    font-weight:    600;
    color:          rgba(255, 255, 255, 0.9);
    letter-spacing: 0.08em;
    margin:         0 0 10px;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.ncoms-pp-section__title span {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            22px;
    height:           22px;
    border-radius:    50%;
    background:       rgba(201, 168, 76, 0.15);
    border:           1px solid rgba(201, 168, 76, 0.28);
    font-size:        11px;
    color:            var(--ncoms-gold);
    font-weight:      700;
    flex-shrink:      0;
}

.ncoms-pp-section p {
    font-size:     12.5px;
    color:         rgba(255, 255, 255, 0.52);
    line-height:   1.9;
    font-weight:   300;
    letter-spacing: 0.04em;
    margin:        0 0 8px;
}

.ncoms-pp-list {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    list-style:     none;
    padding:        0;
    margin:         8px 0 0;
}

.ncoms-pp-list li {
    font-size:    12.5px;
    color:        rgba(255, 255, 255, 0.52);
    font-weight:  300;
    display:      flex;
    align-items:  flex-start;
    gap:          8px;
    line-height:  1.6;
}

.ncoms-pp-list li::before {
    content:       '';
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    var(--ncoms-gold);
    flex-shrink:   0;
    margin-top:    7px;
}

.ncoms-pp-address {
    font-size:     12.5px;
    color:         rgba(255, 255, 255, 0.52);
    font-style:    normal;
    line-height:   1.9;
    font-weight:   300;
    margin-top:    8px;
}

.ncoms-pp-address a {
    color:                  var(--ncoms-gold);
    text-decoration:        underline;
    text-underline-offset:  3px;
}

/* フッター */
.ncoms-pp-modal__footer {
    flex-shrink:  0;
    padding:      16px 22px 20px;
    border-top:   1px solid rgba(255, 255, 255, 0.07);
    background:   rgba(0, 0, 0, 0.2);
}

.ncoms-pp-modal__agree {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            100%;
    padding:          0.9rem 1.5rem;
    background:       linear-gradient(135deg, var(--ncoms-sky-d) 0%, var(--ncoms-sky) 100%);
    border:           none;
    border-radius:    8px;
    font-family:      var(--ncoms-sans);
    font-size:        14px;
    font-weight:      700;
    letter-spacing:   0.1em;
    color:            var(--ncoms-white);
    cursor:           pointer;
    min-height:       44px;
    transition:
        transform   0.25s var(--ncoms-ease),
        box-shadow  0.25s,
        opacity     0.25s;
    -webkit-tap-highlight-color: transparent;
}

.ncoms-pp-modal__agree:hover,
.ncoms-pp-modal__agree:focus-visible {
    transform:  translateY(-2px);
    box-shadow: 0 8px 28px rgba(90, 175, 224, 0.4);
    outline:    none;
}


/* ══════════════════════════════════════════════════════════════
   共通スタイル
══════════════════════════════════════════════════════════════ */

.ncoms-hero__subtitle {
    font-size:      clamp(0.85rem, 1.6vw, 1rem);
    letter-spacing: 0.08em;
    color:          rgba(255, 255, 255, 0.75);
    margin-bottom:  clamp(20px, 3vw, 32px);
}

.ncoms-hero__divider {
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin-bottom:  clamp(16px, 2.5vw, 24px);
}

.ncoms-hero__divider::before,
.ncoms-hero__divider::after {
    content:    '';
    flex:       1;
    max-width:  48px;
    height:     1px;
    background: rgba(255, 255, 255, 0.3);
}

.ncoms-hero__divider-gem {
    display:       block;
    width:         6px;
    height:        6px;
    background:    var(--ncoms-gold);
    transform:     rotate(45deg);
    flex-shrink:   0;
    border-radius: 1px;
}

.ncoms-hero__badge {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        6px 16px;
    border:         1px solid rgba(255, 255, 255, 0.25);
    border-radius:  50px;
    font-size:      0.78rem;
    letter-spacing: 0.06em;
    color:          rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(8px);
    background:     rgba(255, 255, 255, 0.06);
}

.ncoms-hero__badge-dot {
    display:       block;
    width:         6px;
    height:        6px;
    background:    #4CAF6E;
    border-radius: 50%;
    flex-shrink:   0;
    animation:     ncomsBadgePulse 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   レスポンシブ調整
   ※ モバイルファースト順に統一
   ※ 小さいブレークポイント → 大きいブレークポイント
══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   小スマホ（374px以下）
───────────────────────────────────────────── */
@media (max-width: 374px) {

    .ncoms-hero__title {
        font-size: 1.9rem;
    }

    .ncoms-section-heading {
        font-size: 1.45rem;
    }

}


/* ─────────────────────────────────────────────
   スマホ（767px以下）
───────────────────────────────────────────── */
@media (max-width: 767px) {

    .ncoms-hero__vehicle {
        bottom:          0;
        left:            50%;
        right:           auto;
        transform:       translateX(-50%);
        width:           clamp(200px, 62vw, 290px);
        opacity:         0.28;
        padding-bottom:  clamp(60px, 12vh, 100px);
        pointer-events:  none;
        animation:       ncomsVehicleFloatSP 5s ease-in-out infinite;
    }

    /* SPでは角丸を少し控えめに */
    .ncoms-hero__vehicle-img {
        border-radius: 14px;
    }

    .ncoms-hero__content {
        text-align:      center;
        margin-left:     auto;
        margin-right:    auto;
        padding-top:     clamp(64px, 10vh, 100px);
        padding-bottom:  clamp(140px, 22vw, 200px);
    }

    .ncoms-hero__badge {
        margin: 0 auto;
    }

    .ncoms-intro__lead {
        text-align: center;
    }

    .ncoms-cost-wrap {
        grid-template-columns: 1fr;
    }

    .ncoms-cta__buttons {
        flex-direction: column;
        align-items:    center;
    }

    .ncoms-btn {
        width:      100%;
        max-width:  360px;
    }

    /* スマホ固定CTA分 */
    .ncoms-main {
        padding-bottom: 80px;
    }

    /* タイトル改行制御 */
    .ncoms-hero__title-br {
        display: block;
    }

    /* SP固定CTA */
    .ncoms-fixed-cta {
        display: flex;
    }

}


/* ─────────────────────────────────────────────
   620px以上
───────────────────────────────────────────── */
@media (min-width: 620px) {

    .ncoms-pp-overlay {
        align-items: center;
        padding:     28px 20px;
    }

    .ncoms-pp-modal {
        border-bottom: 1px solid rgba(201, 168, 76, 0.18);
        border-radius: 20px;
        max-height:    84vh;
    }

    .ncoms-pp-modal__handle {
        display: none;
    }

}


/* ─────────────────────────────────────────────
   640px以上
───────────────────────────────────────────── */
@media (min-width: 640px) {

    .ncoms-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ─────────────────────────────────────────────
   タブレット以上（768px以上）
───────────────────────────────────────────── */
@media (min-width: 768px) {

    /* ヒーロー横並び */
    .ncoms-hero {
        flex-direction:  row;
        align-items:     flex-end;
        justify-content: flex-start;
    }

    .ncoms-hero__content {
        width:           50%;
        max-width:       none;
        margin-left:     clamp(32px, 6vw, 100px);
        margin-right:    0;
        padding-top:     clamp(120px, 18vh, 200px);
        padding-bottom:  clamp(80px, 14vh, 160px);
    }

    .ncoms-hero__vehicle {
        right:  clamp(16px, 4vw, 60px);
        width:  clamp(340px, 46vw, 680px);
    }

    .ncoms-personas__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ncoms-eisou__layout {
        grid-template-columns: 1fr 1fr;
    }

}


/* ─────────────────────────────────────────────
   1024px以上
───────────────────────────────────────────── */
@media (min-width: 1024px) {

    .ncoms-features__grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* ─────────────────────────────────────────────
   PC大画面（1200px以上）
───────────────────────────────────────────── */
@media (min-width: 1200px) {

    /* タイトル改行制御 */
    .ncoms-hero__title-br {
        display: block;
    }

    .ncoms-hero__title-br--pc {
        display: block;
    }

    /* コンテンツ位置調整 */
    .ncoms-hero__content {
        margin-left: clamp(60px, 7vw, 120px);
    }

    /* 車両サイズ・位置調整 */
    .ncoms-hero__vehicle {
        width:            clamp(480px, 48vw, 720px);
        right:            200px;
        padding-bottom:   200px;
    }

}