/* =====================================
   PWA / アプリ表示専用UI
===================================== */

/* =========================
   Web（PC / SP）共通
========================= */

/* Webでは必ず非表示 */
.app-back,
.js-app-only {
  display: none !important;
}


/* =========================
   PWA（アプリ）専用
========================= */

html.is-app body {
  background: #ffffff;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* グローバルナビ・ヘッダー */
html.is-app nav,
html.is-app #spMenu,
html.is-app #nav,
html.is-app .sp_nav,
html.is-app header,
html.is-app #inner {
  display: none !important;
}

/* パンくず */
html.is-app #topicPath {
  display: none !important;
}

/* フッタ */
html.is-app footer,
html.is-app #pageLink,
html.is-app #bottom,
html.is-app .wrapper.footer {
  display: none !important;
}

/* ロゴヘッダ */
html.is-app h1 {
  display: none !important;
}

/* コンテンツ余白 */
html.is-app #content {
  padding-top: 0;
}

/* PageTop */
html.is-app .btn_top {
  display: none !important;
}

/* PWA専用戻る導線 */
html.is-app .app-back {
  display: block !important;
  padding: 12px 16px;
  font-size: 14px;
  background: #111;
  color: #fff;
}

/* JS制御用 */
html.is-app .js-app-only {
  display: block !important;
}

/* タップ表現 */
html.is-app a {
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

/* =========================
   26naeba_app.html 専用
   header / footer 非表示
========================= */

/* appページのヘッダを完全に消す */
html.is-app header {
  display: none !important;
}

/* appページのフッタを完全に消す */
html.is-app footer {
  display: none !important;
}

/* 念押し（内部構造） */
html.is-app header .inner,
html.is-app footer .pageLink,
html.is-app footer .bottom {
  display: none !important;
}

/* =========================
   苗場2026 PWA 注意書き
   スマホのみ表示
========================= */

/* デフォルト：非表示（PC含む） */
.app-notice {
  display: none;
}

/* スマホサイズのみ表示 */
@media screen and (max-width: 768px) {
  .app-notice {
    display: block;
    margin: 16px;
    padding: 12px 16px;
    background: #f7f7f7;
    border-left: 4px solid #333;
    font-size: 14px;
    line-height: 1.6;
  }

  .app-notice .small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
  }
}

/* PWA（アプリ）では必ず表示 */
html.is-app .app-notice {
  display: block !important;
}

/* =========================
   種類別デザイン
========================= */

/* 重要 */
.notice-important {
  border-color: #c40000;
  background: #fff4f4;
}

.notice-important .notice-title {
  font-weight: bold;
  color: #c40000;
}

/* 軽微 */
.notice-info {
  border-color: #666;
  background: #f7f7f7;
}

.notice-info .notice-title {
  font-weight: bold;
  color: #333;
}

/* =========================
   補助要素
========================= */

.notice-meta {
  margin-top: 6px;
  font-size: 12px;
  color: #666;
}

/* Webでは表示 */
.web-only { display: block; }

/* PWAでは非表示 */
html.is-app .web-only { display: none; }

/* PWA専用 */
.app-only { display: none; }
html.is-app .app-only { display: block; }