:root{
  /* ジャパンカラー：白・黒・赤（JPXのブランドカラーに準拠）。グラデーションは使わない */
  --ink: #f4f4f4;          /* 背景（ごく淡いグレー） */
  --panel: #ffffff;        /* カード面（白） */
  --panel-2: #f7f7f7;      /* 一段沈んだ面 */
  --line: #dcdcdc;         /* 罫線 */
  --gold: #c8102e;         /* アクセント（日の丸の赤） */
  --gold-soft: #c8102e12;
  --seal: #c8102e;
  --up: #1a7f43;
  --down: #c8102e;
  --text: #1a1a1a;         /* 文字（黒） */
  --text-mute: #6b6b6b;
  --font-display: 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 記事ページ ---------- */
.article{
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 12px;
}
.article-title{
  font-family: var(--font-body);
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  margin: clamp(8px, 1.4vw, 16px) 0 clamp(12px, 1.8vw, 18px);
  padding-bottom: clamp(10px, 1.4vw, 14px);
  border-bottom: 3px solid var(--gold);
}
.article-lead{
  font-size: clamp(13.5px, 1.6vw, 15px);
  line-height: 1.95;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(13px, 1.7vw, 18px);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.article-h2{
  font-family: var(--font-body);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700;
  letter-spacing: .04em;
  margin: clamp(26px, 3.6vw, 40px) 0 clamp(10px, 1.4vw, 14px);
  padding-left: 12px;
  border-left: 5px solid var(--gold);
  line-height: 1.5;
}
.article p{
  font-size: clamp(13.5px, 1.55vw, 14.5px);
  line-height: 2;
  margin-bottom: 1.1em;
  color: var(--text);
}
.article strong{ font-weight: 600; }
.article-note{
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: clamp(11.5px, 1.3vw, 12.5px) !important;
  line-height: 1.9 !important;
  color: var(--text-mute) !important;
}

.callout{
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(13px, 1.7vw, 18px);
  margin: clamp(14px, 2vw, 22px) 0;
}
.callout-title{
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 14px);
  margin-bottom: 8px;
  color: var(--text);
}
.callout p{ margin-bottom: 0; font-size: clamp(13px, 1.5vw, 14px); }
.callout ul{ margin: 0; padding-left: 1.3em; }
.callout li{
  font-size: clamp(13px, 1.5vw, 14px);
  line-height: 1.9;
  margin-bottom: 4px;
}
.callout-warn{
  background: #fdf3f1;
  border-color: #e6c4bd;
  border-left: 4px solid var(--seal);
}

.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: clamp(14px, 2vw, 22px) 0;
}
.table-scroll table{ min-width: 420px; }

.article-wide{ max-width: 940px; }

/* 相関図（お金の流れ） */
.flowmap{
  margin: clamp(16px, 2.4vw, 26px) 0;
}
.flow-step{
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: 10px;
  padding: clamp(12px, 1.6vw, 16px) clamp(13px, 1.8vw, 18px);
  box-shadow: 0 1px 3px rgba(31,44,66,.07);
}
.flow-num{
  flex-shrink: 0;
  width: clamp(28px, 3.4vw, 34px);
  height: clamp(28px, 3.4vw, 34px);
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(13px, 1.6vw, 15px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-title{
  font-weight: 700;
  font-size: clamp(13.5px, 1.7vw, 15px);
  margin-bottom: 3px;
  color: var(--text);
}
.flow-desc{
  font-size: clamp(12px, 1.4vw, 13px);
  color: var(--text-mute);
  line-height: 1.7;
}
.flow-arrow{
  text-align: center;
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
  padding: 5px 0;
}

.sub{
  display: inline-block;
  font-size: .82em;
  color: var(--text-mute);
  font-weight: 400;
}

/* ---------- 画面上部に固定するブロック ---------- */
.topfixed{
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(22,40,61,.12);
}
/* 画面が狭い／低いときは固定を解除する。
   固定したままだとYouTube枠で画面が埋まり、下の情報が見えなくなるため。 */
@media (max-width: 900px), (max-height: 700px){
  .topfixed{ position: static; box-shadow: none; }
}

.yt-bar{
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.yt-bar-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(7px, 1vw, 10px) clamp(12px, 3.5vw, 44px);
}
.yt-bar .yt-grid{ margin-bottom: 0; }

/* ---------- Site header ---------- */
.sitehead{
  background: #ffffff;
  border-bottom: 4px solid var(--gold);
}
.sitehead-inner{
  max-width: 1180px;  /* R_1.24: タブ10本化（大口の動き追加・必要幅約1156px）に合わせ1120→1180pxへ再拡張 */
  margin: 0 auto;
  padding: 2px clamp(14px, 3.5vw, 44px) 0;  /* R_1.07: 上に2pxの呼吸（タブ下端の赤帯接続は維持） */
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.6vw, 20px);
  flex-wrap: nowrap;
  /* R_1.05: min-height:46px を撤去。タブ高(37px)との差9pxがボーダーとの隙間になっていた。
     タブ列がヘッダー高を決める形にすれば赤ベタタブは必ず下の赤帯に接続する。 */
}

.sitehead-logo{
  display: flex;
  align-items: center;
  gap: clamp(7px, 1vw, 10px);
  flex-shrink: 0;
  text-decoration: none;
}
.sitehead-logo img{
  height: clamp(19px, 2.2vw, 23px);  /* R_1.04: 横長トリムマーク（余白なし）に合わせ高さ基準・幅auto */
  width: auto;
  display: block;
}
.sitehead-brand{
  font-family: var(--font-body);
  font-size: clamp(13.5px, 1.8vw, 15.5px);  /* R_0.96: 一回り縮小（主張を抑える） */
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.sitehead-tld{
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0;
  margin-left: 2px;
}
.sitehead-id{
  display: flex;
  align-items: center;   /* ロゴ（画像＋文字）とキャッチを同じ縦センターに揃える */
  gap: clamp(6px, 1vw, 12px);
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.sitehead-tag{
  font-size: clamp(10px, 1.15vw, 11.5px);  /* R_0.96: 縮小・赤太字→グレー通常 */
  font-weight: 400;
  color: var(--text-mute);
  letter-spacing: .06em;
  white-space: nowrap;
}
.sitenav{
  margin-left: auto;
  align-self: flex-end;          /* タブの下端をヘッダーの赤帯に付ける */
  max-width: 100%;
  display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sitenav::-webkit-scrollbar{ display: none; }
.sitenav-link{
  flex: 0 0 auto;
  color: var(--text);
  text-decoration: none;
  font-size: clamp(11.5px, 1.25vw, 13px);  /* R_1.04: 少しコンパクトに（スタイルは従来どおり） */
  padding: 10px 8px 9px;  /* R_1.26: タブ11本化（DEX市場追加）に伴い左右余白を11→8pxへ */
  white-space: nowrap;
  transition: color .15s;
}
.sitenav-link:hover{ color: var(--gold); }
.sitenav-link.active{
  background: var(--gold); color: #fff; font-weight: 700;
  border-radius: 7px 7px 0 0;    /* 赤帯から生えたタブ */
}
.sitenav-link.active:hover{ color: #fff; }
/* 準備中（中身なし・非リンク） */
.sitenav-link.is-soon{ color:#b8b8b8; cursor:default; }
.sitenav-link.is-soon:hover{ color:#b8b8b8; }
/* 端フェード：スクロールの余地がある側だけ薄く消す（狭いPC幅でも機能する） */
.sitenav.fade-r{
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
}
.sitenav.fade-l{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px);
          mask-image: linear-gradient(90deg, transparent, #000 30px);
}
.sitenav.fade-l.fade-r{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}

/* ---------- Site footer ---------- */
.sitefoot{
  margin-top: clamp(32px, 5vw, 56px);
  background: #1a1a1a;
  border-top: 4px solid var(--gold);
}
.sitefoot-inner{
  max-width: 900px;  /* R_0.77: 本文列(article 900px)と左端を揃える */
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 26px) clamp(14px, 3.5vw, 44px) clamp(22px, 3vw, 30px);
}
.sitefoot-mark{ height: 30px; width: auto; display: block; }  /* R_1.04: 英字ロゴタイプ */
.sitefoot-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 700;
  letter-spacing: .08em;
  color: #ffffff;
  margin-bottom: 8px;
}
.sitefoot-tld{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--gold);
  margin-left: 2px;
}
.sitefoot-note{
  font-size: clamp(10.5px, 1.2vw, 11.5px);
  color: #b5b5b5;
  line-height: 1.8;
  max-width: 720px;
}

/* ---------- Section heading ---------- */
.section-head{
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 12px);
  margin: clamp(24px, 3.6vw, 40px) 0 clamp(10px, 1.6vw, 16px);
}
.page-main > .section-head:first-child,
.content > .section-head:first-child{ margin-top: 0; }
.section-title{
  font-family: var(--font-body);
  font-size: clamp(15px, 2.1vw, 19px);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text);
  min-width: 0;
}
.section-head::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.yt-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: clamp(6px, 1vw, 10px);
  margin-bottom: 12px;
}
.yt-item{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(5px, 0.7vw, 7px) clamp(5px, 0.7vw, 7px) clamp(4px, 0.6vw, 5px);
}
.yt-name{
  display: block;
  margin-top: 6px;
  font-size: clamp(10px, 1.2vw, 11.5px);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-name:hover{ color: var(--gold); }
.yt-frame-wrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.yt-frame-wrap iframe{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* ライブ判定つきYouTube窓 */
.yt-badge{
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: #d32f2f; color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; letter-spacing: .03em;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none;
}
.yt-item.is-live{ border-color: rgba(211,47,47,.55); }
.yt-off-card{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; background:
    repeating-linear-gradient(45deg, #23262b, #23262b 10px, #202226 10px, #202226 20px);
  color: #aeb3ba;
}
.yt-off-card:hover{ color: #fff; }
.yt-off-label{ font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.yt-off-play{ font-size: 13px; opacity: .8; }

.panel{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(22,40,61,.06);
  padding: clamp(12px, 1.8vw, 22px);
  margin-bottom: clamp(12px, 1.6vw, 18px);
}

/* ---------- News bar ---------- */
.news-bar{
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.news-bar-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(8px, 1.2vw, 10px) clamp(14px, 3.5vw, 44px);
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
}
.news-bar-label{
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: clamp(9.5px, 1.1vw, 10.5px);
  letter-spacing: .12em;
  color: #fff;
  background: var(--seal);
  padding: 3px 9px;
  border-radius: 4px;
}
.news-bar-track{
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}
.news-bar-track::-webkit-scrollbar{ height: 5px; }
.news-bar-track::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 3px; }
.news-item{
  font-size: clamp(12px, 1.5vw, 13.5px);
  color: var(--text);
  flex-shrink: 0;
}
.news-item a{ color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.news-item a:hover{ border-bottom-color: var(--gold); }
.news-time{
  font-family: var(--font-mono);
  font-size: clamp(10.5px, 1.2vw, 11.5px);
  color: var(--text-mute);
  margin-right: 7px;
}

/* ---------- Main ---------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }


.content{ padding: clamp(10px, 1.4vw, 18px) clamp(12px, 3.5vw, 44px) clamp(36px, 5vw, 64px); max-width: 1180px; margin: 0 auto; width: 100%; }
.page-head{ margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.page-head .eyebrow{ font-family: var(--font-mono); font-size:11px; color: var(--gold); letter-spacing:.16em; margin-bottom:8px; }
.page-head h2{ font-family: var(--font-display); font-size: 30px; font-weight:700; letter-spacing:.04em; }
.page-head p{ color:var(--text-mute); font-size:14.5px; margin-top:8px; max-width: 640px; line-height:1.6; }

.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(10px, 1.4vw, 16px); margin-bottom: clamp(18px, 3vw, 28px); }
.card{
  background: var(--panel);
  border:1px solid var(--line); border-radius:12px; padding: 20px 22px;
  position:relative; overflow:hidden;
  transition: border-color .18s, transform .18s;
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--gold);
}
.card:hover{ border-color:#9dc0e2; box-shadow: 0 4px 12px rgba(22,40,61,.11); transform: translateY(-1px); }
.card .label{ font-size:13px; color:var(--text-mute); display:flex; justify-content:space-between; align-items:center; letter-spacing:.01em; }
.card .value{ font-family: var(--font-mono); font-size: clamp(22px, 2.8vw, 29px); margin-top:9px; font-variant-numeric: tabular-nums; }
.card .change{ font-family: var(--font-mono); font-size:14px; margin-top:5px; }
.up{ color: var(--up); } .down{ color: var(--down); }

table{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
thead th{ text-align:left; font-size: clamp(10.5px, 1.2vw, 12px); letter-spacing:.08em; color:var(--text-mute); font-weight:500; padding: 13px 16px; background:var(--panel-2); border-bottom:1px solid var(--line); }
tbody td{ padding: clamp(10px, 1.3vw, 14px) clamp(10px, 1.4vw, 16px); font-size: clamp(12.5px, 1.5vw, 14.5px); border-bottom:1px solid var(--line); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: var(--panel-2); }
td.name{ font-weight:500; }
td.code{ color:var(--text-mute); font-family:var(--font-mono); font-size:12px; }
td.num{ font-family: var(--font-mono); text-align:right; font-variant-numeric: tabular-nums; }

.sub-tabs{ display:flex; gap:8px; margin-bottom:18px; }
.tab-btn{
  background: var(--panel); border:1px solid var(--line); color:var(--text-mute);
  font-family:var(--font-body); font-size: clamp(12.5px, 1.4vw, 14px); padding: clamp(7px,0.9vw,8px) clamp(14px,1.8vw,18px); border-radius:20px;
  cursor:pointer; text-decoration:none; display:inline-block; transition: border-color .15s, color .15s;
}
.tab-btn:hover{ color: var(--text); border-color:#3a4358; }
.tab-btn.active{ background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }

.note{ margin-top: clamp(12px, 1.6vw, 18px); font-size: clamp(11px, 1.3vw, 12.5px); color:var(--text-mute); line-height:1.75; border-left:2px solid var(--line); padding-left:14px; }
.note.warn{ border-left-color: var(--seal); color: #cf9c8f; }
/* =========================================================
   レスポンシブ
   グリッドや文字サイズは clamp() / auto-fit で自動的に伸縮するため、
   ここでは「幅では表現しきれない、並び方そのものの変更」だけを扱う。
   ========================================================= */

/* 折り返しが起きる幅では、ヘッダーのキャッチを改行して読みやすくする */
@media (max-width: 820px){
  .sitehead-inner{ flex-wrap: wrap; align-items: center; min-height: 0; padding-top: 8px; }
  .sitehead-id{ flex-wrap: wrap; }
}
@media (max-width: 520px){
  .sitehead-inner{ align-items: flex-start; }
}

/* TradingViewチャートは高さを画面比で決める（横幅に応じて自然に縮む） */
.tv-tall{ height: clamp(420px, 62vh, 720px); }
.tv-short{ height: clamp(300px, 40vh, 460px); }

/* テーブルは狭い画面で横スクロールできるようにする */
@media (max-width: 620px){
  table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table thead, table tbody{ display: table; width: 100%; min-width: 460px; }
}

/* スマホのYouTube枠：縦に積まず、横スクロールの1行にして高さを抑える */
@media (max-width: 700px){
  .yt-grid{
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }
  .yt-item{
    flex: 0 0 46%;
    scroll-snap-align: start;
  }
  .yt-bar-inner{ padding: 8px 12px; }
}

/* ===== ナビはPC/スマホ共通のタブ型。ここでは並びの切替だけ ===== */
@media (max-width: 820px){
  .sitenav{
    order: 9;                 /* ロゴ行の下の全幅の段に回す */
    width: 100%;
    margin: 4px 0 0;
    align-self: stretch;
  }
  .sitenav-link{ font-size: 13.5px; }
}

/* ===== YouTube 帯：横スクロール（矢印＋スワイプ） ===== */
.yt-bar-inner{ position: relative; }
.yt-grid{
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 0 2px;
  width: 100%; min-width: 0; max-width: 100%;
}
.yt-grid::-webkit-scrollbar{ display: none; }
.yt-grid .yt-item{ flex: 0 0 200px; max-width: 200px; }
.yt-nav{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 30px; height: 48px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text);
  font-size: 20px; line-height: 1; border-radius: 8px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
}
.yt-nav:hover{ border-color: var(--gold); }
.yt-prev{ left: -6px; } .yt-next{ right: -6px; }
@media (max-width: 560px){
  .yt-grid .yt-item{ flex: 0 0 150px; max-width: 150px; }
  .yt-nav{ display: none; }  /* スマホはスワイプで */
}

/* ===== お祭りイベント帯（炎マーク＋見出し＋補足・背景なし＋下線） ===== */
.matsuri-wrap{ margin: 4px 0 14px; }
.matsuri{ display:flex; align-items:center; gap:13px; padding:13px 2px;
  border-bottom:1px solid #e0c8c6; }
.matsuri:first-child{ border-top:1px solid #e0c8c6; }
.matsuri-icon{ width:42px; height:42px; flex:0 0 auto; }
.matsuri-body{ min-width:0; }
.matsuri-main{ font-size:clamp(15px,1.7vw,20px); font-weight:800; color:#961f21; line-height:1.35; }
.matsuri-sub{ font-size:12px; color:#78605e; margin-top:6px; line-height:1.55; }
@media (max-width:560px){
  .matsuri-icon{ width:34px; height:34px; }
  .matsuri-main{ font-size:15px; }
}


/* =====================================================================
 * ▼共通デザイントークン（R_0.61）
 *   全ページで統一する小書式。ページローカルでの再定義・亜種(jm-upd/jm-upd2等)は禁止。
 *   規則：JSポーリングで自動更新される枠＝LIVEバッジのみ（時刻表示しない）／
 *         cronキャッシュ・遅延データの枠＝「更新 HH:MM」必須（LIVEバッジ禁止）
 * =================================================================== */
.sec-upd{ font-size:10.5px; font-weight:500; color:var(--text-mute); margin-left:8px; white-space:nowrap; }


/* ===== R_0.76: スマホヘッダー圧縮（ロゴ行をナビ帯に統合） ===== */
.sitenav-owl{ display:none; }
@media (max-width:820px){
  .sitehead-id{ display:none; }
  .sitenav-owl{ display:flex; align-items:center; padding:4px 8px 4px 10px; flex:0 0 auto; }
  .sitenav-owl img{ background:#fff; border-radius:6px; padding:1px; display:block; }
}

/* R_1.24: SEO用ページ見出し（h1新設） */
.page-h1{ max-width:1180px; margin:12px auto 2px; padding:0 clamp(14px, 3.5vw, 44px); font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--text); }
@media (max-width:640px){ .page-h1{ font-size:13.5px; margin-top:9px; } }