/* ================================================================
   @Hary - メインスタイルシート
   hary.css

   和色パレット（参考）
   生成り  #f5f0e8  / 薄墨  #e8e0d4
   墨      #2a2820  / 鉛色  #888070
   白鼠    #c8c0b4  / 練色  #b8b0a4
   藍      #1a4060  / 瑠璃  #1a48a0
   朱      #c0401a  / 若草  #608820
   山吹    #e0a020
================================================================ */


/* ================================================================
   CSS変数（カラー・フォント・共通値）
   ここを編集すればサイト全体の色・フォントが変わる
================================================================ */
:root {
  /* 背景色（奥から手前へ濃くなる） */
  --bg:         #faf8f4;   /* ページ全体の背景（ほぼ白） */
  --bg-panel:   #f5f0e8;   /* セクションパネル背景（生成り） */
  --bg-widget:  #f5f0e8;   /* 時計・カレンダー背景（生成り） */
  --bg-card:    #ede8de;   /* カード背景（薄墨寄り生成り） */

  /* テキスト */
  --ink:        #2a2820;   /* 本文テキスト（墨） */
  --ink-mid:    #888070;   /* 中間テキスト（鉛色） */
  --ink-light:  #b8b0a4;   /* 薄いテキスト（練色） */

  /* ボーダー */
  --line:       rgba(42,40,32,.14);  /* 薄いライン */
  --line-mid:   rgba(42,40,32,.24);  /* 中間ライン */

  /* アクセントカラー */
  --ai:         #1a4060;   /* 藍：メインアクセント・CMSボタン */
  --shu:        #c0401a;   /* 朱：ブログカード */
  --wakakusa:   #608820;   /* 若草：ブログTOP・リンク系 */
  --yamabuki:   #e0a020;   /* 山吹：カテゴリ */
  --ruri:       #1a48a0;   /* 瑠璃：土曜・ホバー */

  /* フォント */
  --f-serif: 'Kaisei Opti', 'Hiragino Mincho ProN', serif;   /* 見出し・時計 */
  --f-sans:  'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;  /* 本文 */

  /* 共通 */
  --radius: 5px;  /* 角丸の基本値（スマホで少し丸めに） */
}


/* ================================================================
   リセット・ベーススタイル
================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  background-image: none;        /* ← CGIからここを上書きして背景を変更 */
  background-size: cover;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ページ全体のコンテナ */
#page {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px 60px;   /* 上パディングはヘッダーが管理 */
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* ================================================================
   HEADER（サイトヘッダー）
   アイコン画像・サイト名・タグライン
================================================================ */
.site-header {
  display: flex;
  align-items: flex-end;         /* アイコン下端とテキストを揃える */
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--line-mid);
  animation: fadeDown .5s ease both;
}

/* アバターリンク（疑似要素で影付け） */
.avatar-link {
  display: inline-block;
  position: relative;
  border-radius: 14px;
  flex-shrink: 0;
  align-self: flex-end;
}
.avatar-link::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 100%; height: 100%;
  border-radius: 14px;
  background: rgba(42,40,32,.18);
  z-index: -1;
}

/* アバター：角丸の四角形で大きめ表示 */
.avatar {
  width: 88px;
  height: 88px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid var(--line-mid);
  display: block;
  position: relative;
}

/* サイト名・タグライン：アイコン右・下寄せ */
.header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;     /* 下寄せ */
  align-items: flex-end;         /* 右寄せ */
  text-align: right;
}

/* サイト名：Arial Black・疑似要素で同文字をずらして重ねる影効果 */
.site-name {
  font-family: 'Arial Black', 'Arial', sans-serif;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--ai);
  line-height: 1;
  position: relative;
  display: inline-block;
  /* 旧モバイル版と同じ白テキストシャドウ＋疑似要素で二重影 */
  text-shadow: 1px 1px 0 rgba(255,255,255,.7);
}

/* 同文字を後ろにずらして配置（影の代わり） */
.site-name::before {
  content: attr(data-text);      /* HTML側の data-text 属性から文字を取得 */
  position: absolute;
  top: 3px; left: 3px;
  color: rgba(26,64,96,.18);     /* 藍の薄い影色 */
  z-index: -1;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

/* タグライン */
.site-tagline {
  font-size: 11px;
  color: var(--ink-mid);
  margin-top: 5px;
  letter-spacing: .1em;
}


/* ================================================================
   CLOCK + CALENDAR（時計・カレンダーウィジェット）
================================================================ */
.widget-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  animation: fadeUp .45s .05s ease both;
}

/* ウィジェット共通 */
.widget {
  background: var(--bg-widget);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 18px 22px;
}

/* 時計ウィジェット */
.clock-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 130px;
  border-top: 2px solid var(--ai);
}

.clock-time {
  font-family: var(--f-serif);
  font-size: 36px;
  letter-spacing: .04em;
  line-height: 1;
}

.clock-date { font-size: 13px; color: var(--ink); letter-spacing: .1em; font-weight: 400; }
.clock-day  { font-size: 13px; color: var(--shu); font-weight: 700; }

/* カレンダーウィジェット */
.cal-widget { border-top: 2px solid var(--shu); }

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cal-month {
  font-family: var(--f-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 32px;             /* ボタン高さに合わせる */
}

.cal-nav { display: flex; gap: 6px; }

/* 日数差表示（月表示と前後ボタンの間） */
.cal-days-diff {
  flex: 1;
  text-align: center;
  font-family: var(--f-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ai);
  letter-spacing: .04em;
  transition: color .2s;
  line-height: 32px;             /* ボタン高さに合わせる */
}
.cal-days-diff.past   { color: var(--ink-mid); }
.cal-days-diff.today  { color: var(--wakakusa); }
.cal-days-diff.future { color: var(--shu); }

.cal-nav button {
  background: none;
  border: 1px solid var(--line-mid);
  border-radius: 2px;
  width: 32px; height: 32px;    /* 24→32px */
  cursor: pointer;
  color: var(--ink-mid);
  font-size: 16px;               /* 12→16px */
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.cal-nav button:hover { border-color: var(--ai); color: var(--ai); }

/* 本日ボタン（cal-navの外・年月の右隣） */
#calToday {
  background: none;
  border: 1px solid var(--line-mid);
  border-radius: 2px;
  height: 32px;
  width: auto;
  padding: 0 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--f-sans);
  letter-spacing: .04em;
  color: var(--ink-mid);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
#calToday:hover { border-color: var(--ai); color: var(--ai); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* 曜日ヘッダー1行 + 日付6行 = 7行固定（月によって高さが変わらない） */
  grid-template-rows: auto repeat(6, 1fr);
  gap: 2px;
  text-align: center;
  position: relative;  /* ポップアップのabsolute基準 */
}

/* 曜日ヘッダー：コントラスト強化 */
.cal-dow {
  font-size: 12px;
  color: var(--ink-mid);
  font-weight: 700;
  padding: 2px 0 6px;
  letter-spacing: .05em;
}
.cal-dow:nth-child(6) { color: var(--ruri); }  /* 土 */
.cal-dow:last-child   { color: var(--shu); }   /* 日 */

/* 日付セル：コントラスト強化 */
.cal-day {
  font-size: 14px;
  padding: 5px 2px;
  border-radius: 2px;
  color: var(--ink);
  font-weight: 400;
}
.cal-day.sun     { color: var(--shu);  font-weight: 700; background: rgba(192,64,26,.10); border-radius: 4px; }
.cal-day.sat     { color: var(--ruri); font-weight: 700; background: rgba(26,72,160,.10); border-radius: 4px; }
.cal-day.holiday { color: #c0301a;     font-weight: 700; background: rgba(192,64,26,.10); border-radius: 4px; }
.cal-day.today    { background: var(--ai); color: #fff; font-weight: 700; }
.cal-day.selected { outline: 2px solid var(--ai); outline-offset: -1px; cursor: pointer; }
.cal-day.today.selected { outline-color: #fff; }

/* 祝日ポップアップ */
#cal-popup {
  background: var(--ink);
  color: #fff;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  padding: 8px 18px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
  position: absolute;            /* cal-grid基準・スクロールに追従 */
  z-index: 9999;
  opacity: 1;
  transition: opacity .6s ease;
}
#cal-popup::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--ink);
}


/* ================================================================
   SECTION（共通セクションパーツ）
   各コンテンツブロックの枠・ヘッダー・ボディ
================================================================ */
.section {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

/* セクションヘッダー行（タイトル＋カラーマーク） */
.section-head {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* カラーマーク（縦棒アクセント） */
.mark {
  width: 3px; height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}
.mark-ai       { background: var(--ai); }
.mark-shu      { background: var(--shu); }
.mark-wakakusa { background: var(--wakakusa); }
.mark-yamabuki { background: var(--yamabuki); }
.mark-gray     { background: var(--ink-light); }

/* セクションタイトル */
.section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
}

/* セクション本文エリア */
.section-body { padding: 16px 20px; }


/* ================================================================
   QUICK ACCESS（クイックアクセス）
   CMS・外部サービスへのカードリンク群
================================================================ */

/* --- CMSグループ（2列固定） --- */
.qa-cms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

/* --- 外部サービスグループ（flex：増減対応・最終行も幅いっぱい） --- */
.qa-ext {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qa-ext .qa-card {
  flex: 1 1 calc(33.3% - 6px);
  min-width: 0;
}

/* qa-extが連続するとき（行間の間隔） */
.qa-ext + .qa-ext { margin-top: 8px; }

/* 2列固定（外部サービス用） */
.qa-ext-2col .qa-card { flex: 1 1 calc(50% - 4px); }

/* --- セパレータラベル（「外部サービス」など） --- */
.qa-sep {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-mid);
  letter-spacing: .1em;
  margin: 12px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qa-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-mid);
}

/* --- カード共通スタイル --- */
.qa-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  /* 非対称ボーダー：左上細め・右下太め */
  border-top:    1px solid rgba(26,64,96,.35);
  border-left:   1px solid rgba(26,64,96,.35);
  border-right:  2px solid rgba(26,64,96,.60);
  border-bottom: 2px solid rgba(26,64,96,.60);
  border-radius: var(--radius);
  background: rgba(26,64,96,.08);  /* 藍の薄塗り */
  text-decoration: none;
  color: var(--ai);
  transition: all .18s;
}
.qa-card:hover {
  background: rgba(26,64,96,.16);
  border-right-color:  rgba(26,64,96,.80);
  border-bottom-color: rgba(26,64,96,.80);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(26,64,96,.15);
}

/* ファビコン画像 */
.qa-card img.fav {
  width: 18px; height: 18px;
  border-radius: 3px;
  flex-shrink: 0;
  object-fit: contain;
}

/* CMSカード用テキストアイコン */
.qa-card .cms-ico {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* カードテキスト */
.qa-card .c-body { display: flex; flex-direction: column; min-width: 0; }
.qa-card .c-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-card .c-desc { font-size: 10px; color: var(--ink-mid); }

/* --- X アカウントカード（役割＋ハンドル縦2行） --- */
.qa-card.qa-x {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qa-card.qa-x .x-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.qa-card.qa-x .x-role   { font-size: 13px; font-weight: 700; color: var(--ai); }
.qa-card.qa-x .x-handle { font-size: 11px; color: var(--ink-mid); }
.qa-card.qa-x:hover .x-role   { color: var(--ai); }
.qa-card.qa-x:hover .x-handle { color: var(--ai); }


/* ================================================================
   BLOG カテゴリ
   ブログTOPリンク＋カテゴリ2列グリッド
================================================================ */

/* ブログTOPリンク（藍薄塗り・非対称ボーダー：qa-cardと同スタイル） */
.blog-top-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top:    1px solid rgba(26,64,96,.35);
  border-left:   1px solid rgba(26,64,96,.35);
  border-right:  2px solid rgba(26,64,96,.60);
  border-bottom: 2px solid rgba(26,64,96,.60);
  border-radius: var(--radius);
  background: rgba(26,64,96,.08);
  text-decoration: none;
  color: var(--ai);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  transition: all .18s;
}
.blog-top-link:hover {
  background: rgba(26,64,96,.16);
  border-right-color:  rgba(26,64,96,.80);
  border-bottom-color: rgba(26,64,96,.80);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(26,64,96,.15);
}

/* ファビコン（ブログTOP用） */
.blog-top-link img.fav {
  width: 16px; height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* カテゴリ2列グリッド */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* カテゴリカード（qa-cardと同スタイル・藍系） */
.blog-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-top:    1px solid rgba(26,64,96,.35);
  border-left:   1px solid rgba(26,64,96,.35);
  border-right:  2px solid rgba(26,64,96,.60);
  border-bottom: 2px solid rgba(26,64,96,.60);
  border-radius: var(--radius);
  background: rgba(26,64,96,.08);
  text-decoration: none;
  color: var(--ai);
  font-size: 12px;
  font-weight: 400;
  transition: all .18s;
}
.blog-card:hover {
  background: rgba(26,64,96,.16);
  border-right-color:  rgba(26,64,96,.80);
  border-bottom-color: rgba(26,64,96,.80);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(26,64,96,.15);
}
.blog-card .b-ico { font-size: 15px; flex-shrink: 0; }


/* ================================================================
   RSS / LINKS 出力エリア
   RssCMS・LinkCMSのCGI埋め込み出力に適用
================================================================ */
.rss_list,
.link_list {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink);
}
.rss_list a,
.link_list a {
  color: var(--ai);
  text-decoration: none;
}
.rss_list a:hover,
.link_list a:hover {
  color: var(--ruri);
}


/* ================================================================
   MAINTENANCE（メンテナンスエリア）
   右寄せ・控えめ・小フォント
================================================================ */

/* リンク群：右寄せ */
.maint-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* 個別リンク */
.maint-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(42,40,32,.38);  /* デフォルトも濃いめ */
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-mid);                 /* 鉛色→少し濃く */
  font-size: 11px;
  font-weight: 400;
  background: var(--bg-card);
  transition: all .15s;
}
.maint-link:hover { background: var(--ai); color: #fff; border-color: var(--ai); }

/* 開発中のリンク（グレーアウト・操作不可） */
.maint-link.wip {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

/* 「開発中」バッジ */
.wip-badge {
  font-size: 9px;
  color: var(--ink-light);
  border: 1px solid var(--line);
  padding: 0 4px;
  border-radius: 2px;
  margin-left: 2px;
}


/* ================================================================
   QR表示機能（qr.js）用スタイル
   長タップメニュー抑制・オーバーレイ
================================================================ */

/* 長押し対象リンクの長タップメニュー抑制 */
a {
  -webkit-touch-callout: none;  /* iOS Safari */
  -webkit-user-select: none;    /* Android Chrome */
  user-select: none;
}

/* MAINTENANCEリンクは除外（通常動作） */
.maint-link {
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}
/* カレンダー祝日データ出典 */
.cal-credit {
  text-align: right;
  font-size: 9px;
  color: var(--ink-light);
  letter-spacing: .04em;
  cursor: default;
  margin-top: 2px;
  line-height: 1;
  padding-right: 2px;
}

/* QR機能注記 */
.note-qr {
  font-size: 10px;
  color: var(--ink-light);
  letter-spacing: .04em;
  padding: 0 4px;
  margin: -10px 0;   /* セクション間のgapを食って隙間を最小化 */
}

.site-footer {
  text-align: right;
  padding-top: 10px;
  font-size: 11px;
  color: var(--ink-light);
  letter-spacing: .08em;
  border-top: 1px solid var(--line);
}
.site-footer a { color: var(--ink-mid); text-decoration: none; margin: 0 6px; }
.site-footer a:hover { color: var(--ai); }


/* ================================================================
   アニメーション
   ページ読み込み時のフェードイン
================================================================ */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* セクションの順次フェードイン（nth-childで遅延） */
.section { animation: fadeUp .45s ease both; }
.section:nth-child(1) { animation-delay: .10s; }
.section:nth-child(2) { animation-delay: .15s; }
.section:nth-child(3) { animation-delay: .20s; }
.section:nth-child(4) { animation-delay: .25s; }
.section:nth-child(5) { animation-delay: .30s; }
.section:nth-child(6) { animation-delay: .35s; }
.section:nth-child(7) { animation-delay: .40s; }


/* ================================================================
   レスポンシブ
   600px以下：スマートフォン
   380px以下：小型スマートフォン
================================================================ */
@media (max-width: 600px) {
  /* ベースフォントを大きく */
  body { font-size: 17px; }

  #page { padding: 0 14px 48px; gap: 14px; }

  /* ヘッダー */
  .site-header { padding: 20px 0 18px; gap: 14px; }
  .avatar { width: 72px; height: 72px; border-radius: 10px; }
  .site-name { font-size: 32px; }
  .site-tagline { font-size: 13px; }

  /* 時計：横並びに変更 */
  .widget-row { grid-template-columns: 1fr; }
  .clock-widget {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    min-width: unset;
  }
  .clock-time { font-size: 32px; }
  .clock-date { font-size: 13px; }
  .clock-day  { font-size: 13px; }

  /* カレンダー */
  .cal-month { font-size: 17px; }
  .cal-dow   { font-size: 12px; }
  .cal-day   { font-size: 14px; padding: 6px 2px; }

  /* セクションタイトル */
  .section-title { font-size: 15px; }

  /* カード */
  .qa-ext .qa-card { flex: 1 1 calc(50% - 4px); }
  .qa-card { padding: 13px 14px; }
  .qa-card .c-name { font-size: 15px; }
  .qa-card .c-desc { font-size: 12px; }
  .qa-card img.fav { width: 22px; height: 22px; }
  .qa-card.qa-x .x-handle { font-size: 13px; }

  /* ブログ */
  .blog-top-link { font-size: 15px; padding: 12px 14px; }
  .blog-card { font-size: 14px; padding: 12px 12px; }

  /* RSS・リンク出力 */
  .rss_list, .link_list { font-size: 15px; }

  /* セクション内パディング */
  .section-body { padding: 14px 14px; }
  .section-head { padding: 13px 14px 11px; }
}

@media (max-width: 380px) {
  /* CMS・外部サービス：1列 */
  .qa-cms { grid-template-columns: 1fr; }
  .qa-ext .qa-card { flex: 1 1 100%; }

  /* ブログカテゴリ：1列 */
  .blog-grid { grid-template-columns: 1fr; }
}