/* =====================================
   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; }




.naeba-calendar{
  max-width:900px;
  margin:30px auto;
}

.naeba-calendar h3{
  text-align:center;
  margin-bottom:17px;
  font-size:1.2rem;
  font-weight:bold;  
}

.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}

.day-name{
  background:#efefef;
  text-align:center;
  padding:10px 0;
  font-weight:bold;
}

.day{
  min-height:70px;
  border:1px solid #ddd;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.day.show{
  background:#B0E7F5;
  color:#fff;
  font-weight:bold;
}

.day.show .event{
  font-size:10px;
  letter-spacing:.05em;
}

.day.empty{
  border:none;
  background:none;
}

.sun{
  color:#c40000;
}

.sat{
  color:#0066cc;
}

@media screen and (max-width:767px){

  .day{
    min-height:48px;
    font-size:18px;
  }

  .day.show .event{
    font-size:8px;
  }

}