:root{
  --bg:#fafafa; --card:#fff; --txt:#222; --muted:#687076;
  --ok:#16a34a; --ng:#d1d5db; --sat:#e8f2ff; --sun:#ffecef;
  --accent:#2563eb; --sticky:#fff;
  --cell:44px; /* 列幅（スマホ） */
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;line-height:1.45}
h1,h2,p{margin:0}

.app-header{padding:14px 16px 8px}
.app-header h1{font-size:20px;font-weight:700}
.sub{color:var(--muted);font-size:12px;margin-top:4px}

.card{background:var(--card);border-radius:var(--radius);margin:10px 12px;padding:10px 10px 8px;box-shadow:0 2px 10px rgba(0,0,0,.04)}

.calendar-toolbar,.plans-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.btn{padding:8px 10px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;font-size:13px}
.btn:active{transform:translateY(1px)}
.legend{display:flex;gap:12px;font-size:12px;color:var(--muted)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.dot.ok{background:var(--ok)}
.dot.ng{background:var(--ng)}

.calendar-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; border:1px solid #eef0f3}
.matrix{border-collapse:separate;border-spacing:0;min-width:100%}
.matrix th,.matrix td{border-right:1px solid #f0f2f5;border-bottom:1px solid #f0f2f5;text-align:center;min-width:var(--cell);height:42px}

/* 月ヘッダー追加 */
.matrix thead th.month-header{
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(180deg, #667eea 0%, #5a67d8 100%);
  border-right:1px solid rgba(255,255,255,0.3);
  padding:8px 4px;
  text-align:center;
  position:sticky;
  top:0;
  z-index:13;
}

.matrix thead th{font-size:12px;font-weight:600;color:#4b5563;background:#f9fafb;position:sticky;top:0;z-index:3}
.matrix thead th.weekend-sat{background:var(--sat)}
.matrix thead th.weekend-sun{background:var(--sun)}
.matrix th.first{min-width:76px;padding:0 8px}
.matrix tbody th{position:sticky;left:0;background:var(--sticky);z-index:2;text-align:left;font-weight:700;font-size:13px}
.matrix tbody th small{display:block;color:var(--muted);font-weight:500;font-size:11px}
.matrix td{background:#fff}
.matrix td.weekend-sat{background:linear-gradient(180deg,var(--sat),#fff)}
.matrix td.weekend-sun{background:linear-gradient(180deg,var(--sun),#fff)}

/* 月行と日行の調整 */
.matrix thead tr.month-row th{
  top:0;
  z-index:13;
}
.matrix thead tr.day-row th{
  top:42px; /* 月行の高さ分ずらす */
  z-index:12;
}
.matrix thead tr.month-row th.sticky,
.matrix thead tr.day-row th.sticky{
  position:sticky;
  left:0;
  background:var(--sticky);
}

.cell-btn{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:none;background:transparent;font-size:16px;cursor:pointer}
.cell-btn.ok{color:var(--ok)}
.cell-btn.ng{color:#c4c7cc}
.cell-btn:disabled{opacity:.5;cursor:default}

.hint{margin-top:6px;color:var(--muted);font-size:11px}

.plans-title{font-size:16px;font-weight:700}
.plans-list{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.plan{border:1px solid #eef0f3;border-radius:12px;padding:10px;background:#fff}
.plan .hn{font-size:14px;font-weight:700;margin-bottom:6px}
.plan .pn{font-size:13px;color:#374151;margin-bottom:8px}
.plan .actions{display:flex;gap:8px}
.plan .link{display:inline-block;font-size:13px;padding:8px 10px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none}
.plan .link:active{transform:translateY(1px)}
.empty{color:var(--muted);text-align:center;padding:20px 8px}

.app-footer{padding:20px 0 34px;text-align:center;color:var(--muted);font-size:12px}

/* today 枠を少し目立たせる */
th.today, td.today{outline:2px solid #cfe1ff; outline-offset:-2px}

/* 小さい端末で若干詰める */
@media (max-width:360px){
  :root{ --cell:40px }
  .matrix th.first{min-width:70px}
}

.hotel-section {
  margin-bottom: 20px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.hotel-section h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #374151;
}

.plan-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  max-width: 100%;
}

.plan-card {
  flex: 0 0 80%;
  max-width: 80%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 12px;
  scroll-snap-align: start;
}

.plan-card .pn {
  font-size: 13px;
  margin-bottom: 8px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  display: block;
}

.plan-card .actions {
  margin-top: auto;
}

.plan-card .link {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}

/* --- ブログ記事ページ用スタイル（サイト全体デザインに統一）--- */
.blog-container {
  padding: 20px 14px 60px;
  max-width: 720px;
  margin: 0 auto;
}

.blog-post {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  padding: 18px 16px 28px;
}

.blog-post h1, 
.blog-post h2, 
.blog-post h3 {
  color: var(--txt);
  margin: 1.2em 0 0.6em;
  line-height: 1.5;
  word-break: keep-all;
}

.blog-post h1 {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
}

.blog-post h2 {
  font-size: 17px;
  font-weight: 600;
  border-left: 4px solid var(--accent);
  padding-left: 8px;
}

.blog-post h3 {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
}

.blog-post p {
  font-size: 14px;
  color: var(--txt);
  line-height: 1.9;
  margin: 0.8em 0;
}

.blog-post a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.blog-post a:hover {
  text-decoration: underline;
}

.blog-post ul, 
.blog-post ol {
  margin: 0.8em 0 0.8em 1.5em;
  font-size: 14px;
  color: var(--txt);
}

.blog-post li {
  margin-bottom: 0.4em;
}

.blog-post time {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 1em;
}

.blog-post img {
  max-width: 100%;
  border-radius: 10px;
  margin: 12px 0;
  display: block;
}

.blog-post blockquote {
  background: #f9fafb;
  border-left: 4px solid var(--accent);
  margin: 1em 0;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
  border-radius: 8px;
}

.blog-post hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 24px 0;
}

/* 小さい端末での余白調整 */
@media (max-width: 360px) {
  .blog-container {
    padding: 14px 10px 40px;
  }
  .blog-post {
    padding: 14px 12px 24px;
  }
}

/* --- ブログ一覧ページ（index.html）用スタイル --- */
.blog-list-container {
  padding: 20px 14px 60px;
  max-width: 720px;
  margin: 0 auto;
}

.blog-header {
  padding: 0 4px 10px;
}

.blog-header h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--txt);
}

.blog-header p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

/* 各記事カード */
.blog-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  padding: 14px 16px 18px;
  text-decoration: none;
  color: var(--txt);
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border-left: 4px solid transparent;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  border-left-color: var(--accent);
}

.blog-card .meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.blog-card .category {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-right: 6px;
}

.blog-card h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--txt);
  margin: 0 0 6px;
}

.blog-card p {
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
  margin: 0;
}

/* スマホでの余白調整 */
@media (max-width: 360px) {
  .blog-list-container {
    padding: 14px 10px 40px;
  }
  .blog-card {
    padding: 12px 12px;
  }
}

/* --- 共通レイアウト: TOP基準でBLOG統合 --- */
.page-container {
  padding: 30px 20px 80px;
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg);
}

/* ページ見出し */
.page-header {
  margin-bottom: 24px;
  text-align: left;
}
.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 6px;
}
.page-header p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 0;
}

/* テキスト調整 */
.card h2,
.blog-card h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.card p,
.blog-card p {
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
}

/* モバイル対応 */
@media (max-width: 480px) {
  .page-container {
    padding: 20px 14px 60px;
  }
  .card,
  .blog-card {
    padding: 16px 14px;
  }
  .page-header h1 {
    font-size: 20px;
  }
  .card h2,
  .blog-card h2 {
    font-size: 16px;
  }
}

/* --- ブログ⇔TOP 導線エリア --- */
.blog-nav {
  max-width: 720px;
  margin: 10px auto 0;
  padding: 0 14px;
}
.back-top {
  display: inline-block;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.back-top:hover {
  text-decoration: underline;
}

.app-footer p {
  font-size: 13px;
  color: var(--muted);
}
.app-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.app-footer a:hover {
  text-decoration: underline;
}

/* --- 記事ページ内ナビゲーション --- */
.post-nav {
  max-width: 720px;
  margin: 40px auto 60px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 14px;
}

.back-list {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.back-list:hover {
  text-decoration: underline;
}

.post-prev-next {
  display: flex;
  justify-content: space-between;
}

.prev-post, .next-post {
  color: var(--accent);
  text-decoration: none;
}
.prev-post:hover,
.next-post:hover {
  text-decoration: underline;
}

/* ====== 記事ページ共通 ====== */
main#post-content {
  max-width: 720px;
  background: #fff;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 見出しの統一感 */
main#post-content h1 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #ddd;
  padding-bottom: 0.5rem;
}
main#post-content h2 {
  font-size: 1.3rem;
  margin-top: 1.8rem;
  color: #333;
}
main#post-content h3 {
  font-size: 1.1rem;
  margin-top: 1.2rem;
  color: #444;
}

/* 段落・リスト */
main#post-content p {
  margin: 0.8rem 0;
}
main#post-content ul, main#post-content ol {
  margin: 0.8rem 0 0.8rem 1.5em;
}

/* リンク */
main#post-content a {
  color: #0078d4;
  text-decoration: none;
}
main#post-content a:hover {
  text-decoration: underline;
}

/* 画像 */
main#post-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: 1rem 0;
}

/* ========== 統一デザイン：末尾追記用（ここから） ========== */
/* リンク共通 */
a { color: #0066cc; text-decoration: none; transition: 0.2s; }
a:hover { text-decoration: underline; }

/* ブログ一覧：カードレイアウト（上書き） */
#blog-list { display: grid; gap: 20px; }

/* 記事ページ（post） */
#post-title { font-size:1.6rem; text-align:center; margin:0 0 24px; color:#222; }

/* Markdown見出し */
#post-content h1,#post-content h2,#post-content h3 { margin-top:1.8em; color:#222; }
#post-content h2 { border-left:4px solid #3366cc; padding-left:10px; font-size:1.3rem; }
#post-content h3 { font-size:1.1rem; color:#333; }

/* テーブル・引用・画像 */
#post-content table { width:100%; border-collapse:collapse; margin:1.5em 0; font-size:0.95rem; }
#post-content th,#post-content td { border:1px solid #ddd; padding:8px 10px; }
#post-content th { background:#f0f4ff; font-weight:700; }
#post-content blockquote { background:#f8faff; border-left:4px solid #cce; padding:10px 16px; color:#555; margin:1.5em 0; }

/* フッター */
footer { text-align:center; padding:24px 16px; color:#777; font-size:0.9rem; margin-top:48px; border-top:1px solid #eee; }

/* レスポンシブ調整 */
@media (max-width:480px) {
  main#post-content { padding:16px; margin: 0 10px 20px; }
}