/* ============================================================
 * NK Stage Hamburger Menu — front.css  v2.0.0
 *
 * v1.8.0 → v2.0.0 変更点
 * [B-04] --nkshm-trigger-bg / trigger-text / trigger-border を参照
 *        トリガーボタン色が管理画面の設定値で変わるように
 * [F-01] .nkshm-trigger に var(--nkshm-trigger-*) を適用
 * [F-02] .nkshm-panel の background に var(--nkshm-panel-bg) を使用
 *        PHP 側で rgba 合成済みの値が渡される
 * [F-03] .nkshm-icon のスタイルを追加（ハンバーガー / ドット SVG）
 * [F-06] .nkshm-en に var(--nkshm-en-font) を適用
 *        英字タイトル専用フォントが管理画面から変更可能に
 * ============================================================ */

/* ── ルート要素 ──────────────────────────────────────────── */
.nkshm-root {
    --nkshm-font:           inherit;
    --nkshm-en-font:        Georgia, 'Times New Roman', serif;
    --nkshm-panel-bg:       #2f2f31;
    --nkshm-card-bg:        #101113;
    --nkshm-text:           #ffffff;
    --nkshm-subtext:        #d5d5d5;
    --nkshm-line:           rgba(255,255,255,.24);
    --nkshm-accent:         #ffffff;
    --nkshm-overlay:        0.55;
    --nkshm-trigger-bg:     #111111;
    --nkshm-trigger-text:   #ffffff;
    --nkshm-trigger-border: rgba(255,255,255,0.18);
    --nkshm-phone-pc:       32px;
    --nkshm-phone-sp:       24px;
    --nkshm-base-pc:        16px;
    --nkshm-base-sp:        15px;
    --nkshm-company-pc:     16px;
    --nkshm-company-sp:     15px;
    --nkshm-menu-label-pc:  14px;
    --nkshm-menu-label-sp:  12px;
    --nkshm-menu-en-pc:     27px;
    --nkshm-menu-en-sp:     23px;

    font-family: var(--nkshm-font);
    position:    relative;
    z-index:     999997;
}

/* ── トリガーボタン [F-01] ────────────────────────────────── */
.nkshm-trigger {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    background:      var(--nkshm-trigger-bg, #111);
    color:           var(--nkshm-trigger-text, #fff);
    border:          1px solid var(--nkshm-trigger-border, rgba(255,255,255,.18));
    border-radius:   999px;
    padding:         11px 18px;
    cursor:          pointer;
    font:            inherit;
    letter-spacing:  .08em;
    min-width:       82px;
    -webkit-appearance: none;
    appearance:         none;
    outline:            none;
    transition:         opacity .2s ease;
}
.nkshm-trigger:hover { opacity: .82; }
.nkshm-trigger span  { display: none; }
.nkshm-trigger em {
    font-style:     normal;
    font-size:      var(--nkshm-menu-label-pc);
    font-weight:    700;
    letter-spacing: .14em;
    line-height:    1;
}

/* [F-03] トリガーアイコン SVG */
.nkshm-icon {
    display:      block;
    flex-shrink:  0;
    color:        currentColor;
    pointer-events: none;
}

/* ── オーバーレイ ────────────────────────────────────────── */
.nkshm-overlay[hidden] { display: none !important; }
.nkshm-overlay {
    position: fixed;
    inset:    0;
    z-index:  999999;
}

/* ── バックドロップ ─────────────────────────────────────── */
.nkshm-backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,var(--nkshm-overlay, .55));
}

/* ── パネル [F-02] ──────────────────────────────────────── */
/* background は --nkshm-panel-bg を使用。PHP 側で rgba 合成済み */
.nkshm-panel {
    position:    relative;
    margin-left: auto;
    width:       min(100vw, 520px);
    height:      100%;
    background:  var(--nkshm-panel-bg, #2f2f31);
    color:       var(--nkshm-text, #fff);
    padding:     28px 20px 32px;
    overflow:    auto;
    box-sizing:  border-box;
    font-size:   var(--nkshm-base-pc);
    animation:   nkshm-slide-in .28s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes nkshm-slide-in {
    from { transform: translateX(60px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ── 閉じるボタン ───────────────────────────────────────── */
.nkshm-close {
    position:    absolute;
    top:         18px;
    right:       18px;
    width:       48px;
    height:      48px;
    border:      none;
    background:  transparent;
    color:       var(--nkshm-text, #fff);
    cursor:      pointer;
    -webkit-appearance: none;
    appearance:         none;
}
.nkshm-close span {
    position:   absolute;
    top:        23px;
    left:       8px;
    width:      32px;
    height:     2px;
    background: currentColor;
}
.nkshm-close span:first-child { transform: rotate(45deg);  }
.nkshm-close span:last-child  { transform: rotate(-45deg); }
.nkshm-close:hover { opacity: .75; }

/* ── ヘッダー（会社情報ブロック） ──────────────────────── */
.nkshm-header {
    display:               grid;
    grid-template-columns: 1fr auto;
    gap:                   22px 18px;
    align-items:           start;
    padding-top:           24px;
    margin-bottom:         24px;
}

.nkshm-brand img {
    max-width:    180px;
    height:       auto;
    display:      block;
    margin-bottom: 10px;
}

.nkshm-company {
    font-size:   var(--nkshm-company-pc);
    font-weight: 700;
    color:       var(--nkshm-text, #fff);
}

.nkshm-phone {
    display:         block;
    color:           var(--nkshm-text, #fff);
    font-size:       var(--nkshm-phone-pc);
    line-height:     1.08;
    font-weight:     300;
    text-decoration: none;
    letter-spacing:  .03em;
    margin-bottom:   8px;
    word-break:      break-word;
}

.nkshm-hours {
    font-size:   14px;
    color:       var(--nkshm-subtext, #d5d5d5);
    font-weight: 600;
}

.nkshm-instagram {
    width:           58px;
    height:          58px;
    border:          2px solid rgba(255,255,255,.8);
    border-radius:   999px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--nkshm-text, #fff);
    text-decoration: none;
    align-self:      center;
    transition:      opacity .2s;
}
.nkshm-instagram:hover { opacity: .75; }
.nkshm-instagram svg   { width: 26px; height: 26px; }

/* ── カードラップ（メニュー本体） ──────────────────────── */
.nkshm-card-wrap {
    background:    var(--nkshm-card-bg, #101113);
    padding:       26px 18px 28px;
    border-radius: 8px;
}

/* ── ナビゲーション ─────────────────────────────────────── */
.nkshm-nav { border-top: 1px solid transparent; }

.nkshm-item { border-top: 1px solid var(--nkshm-line, rgba(255,255,255,.24)); }
.nkshm-item:last-child { border-bottom: 1px solid var(--nkshm-line, rgba(255,255,255,.24)); }

.nkshm-item-link {
    display:               grid;
    grid-template-columns: minmax(110px, 160px) 1fr 18px;
    gap:                   16px;
    align-items:           center;
    padding:               20px 8px;
    color:                 var(--nkshm-text, #fff);
    text-decoration:       none;
    transition:            opacity .15s;
}
.nkshm-item-link:hover { opacity: .75; }

/* [F-06] 英字タイトルに専用フォントを適用 */
.nkshm-en {
    font-family:    var(--nkshm-en-font, Georgia, 'Times New Roman', serif);
    font-size:      var(--nkshm-menu-en-pc);
    line-height:    1.1;
    letter-spacing: .04em;
}
.nkshm-ja {
    font-size:   15px;
    font-weight: 700;
    color:       var(--nkshm-subtext, #d5d5d5);
}
.nkshm-arrow {
    font-size:   28px;
    line-height: 1;
    text-align:  right;
    color:       var(--nkshm-subtext, #d5d5d5);
}

.nkshm-submenu {
    padding: 0 8px 16px 18px;
    display: grid;
    gap:     14px;
}
.nkshm-subitem {
    color:           var(--nkshm-text, #fff);
    text-decoration: none;
    font-size:       16px;
    font-weight:     700;
    line-height:     1.6;
    transition:      opacity .15s;
}
.nkshm-subitem:hover { opacity: .75; }

/* ── お問い合わせCTAボタン ──────────────────────────────── */
.nkshm-contact-wrap {
    padding:    30px 0 6px;
    text-align: center;
}
.nkshm-contact {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             18px;
    min-width:       min(100%, 360px);
    padding:         18px 32px;
    border:          2px solid var(--nkshm-accent, #fff);
    border-radius:   999px;
    color:           var(--nkshm-text, #fff);
    text-decoration: none;
    font-family:     var(--nkshm-en-font, Georgia, serif);
    font-size:       22px;
    letter-spacing:  .05em;
    transition:      background .2s, color .2s;
}
.nkshm-contact:hover {
    background: var(--nkshm-accent, #fff);
    color:      var(--nkshm-card-bg, #101113);
}
.nkshm-contact strong {
    font-weight: 400;
    font-size:   28px;
    line-height: 1;
}

/* ── body スクロールロック ──────────────────────────────── */
body.nkshm-open { overflow: hidden; }

/* ── フッタークレジット ─────────────────────────────────── */
.nkshm-credit {
    margin-top:  18px;
    padding-top: 16px;
    border-top:  1px solid var(--nkshm-line, rgba(255,255,255,.24));
    font-size:   12px;
    color:       var(--nkshm-subtext, #d5d5d5);
}

/* ── auto モード（fixed 配置） ──────────────────────────── */
/* position / top / right は PHP の output_dynamic_head_css() で動的出力 */
.nkshm-root.nkshm-auto .nkshm-trigger {
    padding:         11px 18px;
    backdrop-filter: blur(4px);
    min-width:       82px;
}

/* ── 電話番号 PC/SP 切り替え ────────────────────────────── */
.nkshm-phone-desktop {
    display:         block;
    pointer-events:  none;
    cursor:          default;
    text-decoration: none;
}
.nkshm-phone-mobile { display: none; }

/* ── 検索ボックス ───────────────────────────────────────── */
.nkshm-search-wrap {
    width:      var(--nkshm-search-width-pc, 100%);
    margin:     0 auto 22px;
    box-sizing: border-box;
}
.nkshm-card-wrap .nkshm-search-wrap { margin-bottom: 22px; }
.nkshm-nav + .nkshm-search-wrap     { margin-top: 22px; margin-bottom: 0; }

.nkshm-search-form {
    display:       flex;
    align-items:   stretch;
    width:         100%;
    border:        1px solid var(--nkshm-line, rgba(255,255,255,.24));
    border-radius: 999px;
    overflow:      hidden;
    background:    rgba(255,255,255,.08);
    box-sizing:    border-box;
}
.nkshm-search-input {
    flex:        1;
    min-width:   0;
    height:      var(--nkshm-search-height-pc, 46px);
    padding:     0 16px;
    border:      none;
    background:  transparent;
    color:       var(--nkshm-text, #fff);
    font-size:   var(--nkshm-search-font-pc, 16px);
    font-family: var(--nkshm-font, inherit);
    outline:     none;
    box-sizing:  border-box;
}
.nkshm-search-input::placeholder {
    color:   var(--nkshm-subtext, #d5d5d5);
    opacity: .86;
}
.nkshm-search-button {
    height:      var(--nkshm-search-height-pc, 46px);
    padding:     0 18px;
    border:      none;
    border-left: 1px solid var(--nkshm-line, rgba(255,255,255,.24));
    background:  var(--nkshm-accent, #fff);
    color:       var(--nkshm-card-bg, #101113);
    font-size:   var(--nkshm-search-font-pc, 16px);
    font-weight: 700;
    font-family: var(--nkshm-font, inherit);
    cursor:      pointer;
    white-space: nowrap;
    box-sizing:  border-box;
    transition:  filter .15s;
}
.nkshm-search-button:hover { filter: brightness(.92); }

/* ============================================================
 * レスポンシブ（640px 以下）
 * ============================================================ */
@media (max-width: 640px) {
    .nkshm-panel {
        width:     100vw;
        padding:   22px 16px 24px;
        font-size: var(--nkshm-base-sp);
    }
    .nkshm-header {
        grid-template-columns: 1fr auto;
        gap: 18px 14px;
    }
    .nkshm-phone     { font-size: var(--nkshm-phone-sp); }
    .nkshm-card-wrap { padding: 18px 14px 22px; }
    .nkshm-item-link {
        grid-template-columns: minmax(95px, 120px) 1fr 14px;
        padding: 18px 6px;
    }
    .nkshm-en      { font-size: var(--nkshm-menu-en-sp); }
    .nkshm-ja      { font-size: 14px; }
    .nkshm-company { font-size: var(--nkshm-company-sp); }
    .nkshm-trigger em { font-size: var(--nkshm-menu-label-sp); }
    .nkshm-contact { min-width: 0; width: 100%; font-size: 20px; }

    .nkshm-root.nkshm-auto .nkshm-trigger {
        padding:   10px 14px;
        min-width: 74px;
    }

    .nkshm-phone-desktop { display: none; }
    .nkshm-phone-mobile  { display: block; }

    .nkshm-search-wrap   { width: var(--nkshm-search-width-sp, 100%); }
    .nkshm-search-input  {
        height:    var(--nkshm-search-height-sp, 44px);
        font-size: var(--nkshm-search-font-sp, 15px);
        padding:   0 14px;
    }
    .nkshm-search-button {
        height:    var(--nkshm-search-height-sp, 44px);
        font-size: var(--nkshm-search-font-sp, 15px);
        padding:   0 14px;
    }
}

/* ============================================================
 * nk-base-theme 固有の競合リセット
 * ============================================================ */
.nkshm-root button,
.nkshm-root a {
    text-transform: none;
}
.nkshm-root .nkshm-trigger,
.nkshm-root .nkshm-close {
    box-shadow:    none;
    border-radius: 999px;
}
.nkshm-root .nkshm-close {
    border-radius: 0;
    border:        none;
    background:    transparent;
    padding:       0;
}
/* テーマ側の :focus-visible スタイルが nkshm に干渉する場合の上書き */
.nkshm-root *:focus-visible {
    outline: 2px solid var(--nkshm-accent, #fff);
    outline-offset: 2px;
}