/*
 * design tokens: トレンドデザイン共通変数(css_トレンドデザイン対応 S1)
 */
:root {
	--bg-page: #f5f7fa;        /* ページ背景(旧 #f0f0f0) */
	--bg-body: #e9edf2;        /* ページ周辺(旧 #e0e0e0) */
	--bg-card: #ffffff;        /* カード面 */
	--bg-accent-soft: #eef4fe; /* 交互背景・淡アクセント面 */
	--text-main: #2b3440;      /* 本文(旧 #000000) */
	--text-head: #1a2b50;      /* 見出し濃紺(旧 #204080) */
	--link: #2563eb;           /* リンク(旧 #1020cc) */
	--link-hover: #1d4ed8;     /* リンクhover(旧 #1020f0) */
	--accent: #2563eb;         /* CTA・タブactive */
	--nav-blue: #5688d6;       /* 面/枠の柔らかいブランド青(メニュー帯/会員ボタン/バルーン枠) */
	--radius: 8px;             /* カード角丸 */
	--radius-s: 4px;           /* ボタン・バッジ角丸 */
	--radius-in: 6px;          /* 内側ブロック角丸(index系・S5改) */
	--shadow: 0 1px 3px rgba(20,40,80,.08), 0 4px 12px rgba(20,40,80,.06);  /* 柔らかい影 */
	--border: #e3e8ef;         /* 罫線 */
	--bg-stripe: #f3f7fc;      /* 表ストライプ淡(S3) */
	--bg-head: #e2ecfb;        /* h2見出し帯(中間・淡=#eef4fe/濃=#dbe7fa) */
	--hover-bg: #ffedd5;       /* hover背景(淡橙・青系同化対策・2026-07-12) */
	--hover-text: #c2410c;     /* hover文字(濃橙) */
}

/*
 * body: 基本デザイン
 */
body {
/*	-webkit-text-size-adjust: 100%; */
	margin: 0;
	padding: 0;
	background-color: var(--bg-body);		/* ページ周辺色 */
	color: var(--text-main);		/* 文字色 */
	font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif;
	font-size: 100%;	/* fixed_size */
	font-weight: bold;
	text-align: center;
}

/*
 * a: リンク文字色
 */
a:link {
	color: var(--link);		/* リンク文字色 */
	text-decoration: underline;
}
a:visited {
	color: var(--link);		/* リンク文字色 */
	text-decoration: underline;
}
a:active {
	color: #60a5fa;		/* リンク文字色 */
	text-decoration: underline;
}
a:hover {
	color: var(--link-hover);	/* マウスイン文字色(青のまま・橙は背景のみ 2026-07-13) */
	background-color: var(--hover-bg);	/* マウスイン文字背景色(淡橙) */
}

/*
 * 共通
 */
.bkwhite {
	background-color: #ffffff;
}
.bksky {
	background-color: var(--bg-accent-soft);
}
.bkblue {
	background-color: #d9e5fe;
}
.ct {
	text-align: center;	/* 文字中揃え */
	padding-left: 2px;	/* 左余白 */
	padding-right: 2px;	/* 右余白 */
}
.lt {
	text-align: left;	/* 文字左揃え */
	padding-left: 2px;	/* 左余白 */
}
.rt {
	text-align: right;	/* 文字右揃え */
	padding-right: 2px;	/* 右余白 */
}
.pd_t3 {
  padding-top: 3px;	/* 上余白 */
}
.pd_t5 {
  padding-top: 5px;	/* 上余白 */
}
.pd_t10 {
  padding-top: 10px;	/* 上余白 */
}
.pd_b3 {
  padding-bottom: 3px;	/* 下余白 */
}
.pd_b5 {
  padding-bottom: 5px;	/* 下余白 */
}
.pd_b10 {
  padding-bottom: 10px;	/* 下余白 */
}
.rline {
  border-right: 1px solid var(--border);	/* 縦線(S3・旧 #ccc) */
}
.wd100 {
	width: 100%;	/* 幅指定 */
}
.wd95 {
    box-sizing: border-box;
    padding-left: 2.5%;
	padding-right: 2.5%;
	width: 95%;	/* 幅指定 */
}
.wd66 {
	width: 66.66%;	/* 幅指定 */
}
.wd60 {
	width: 60%;	/* 幅指定 */
}
.wd50 {
	width: 50%;	/* 幅指定 */
}
.wd40 {
	width: 40%;	/* 幅指定 */
}
.wd33 {
	width: 33.33%;	/* 幅指定 */
}
.wd30 {
	width: 30%;	/* 幅指定 */
}
.wd25 {
	width: 25%;	/* 幅指定 */
}
.wd20-30 {
	width: 20%;	/* 幅指定 */
}
.wd20-25 {
	width: 20%;	/* 幅指定 */
}
.wd40-25 {
	width: 40%;	/* 幅指定 */
}
.wd20 {
	width: 20%;	/* 幅指定 */
}
.wd17 {
	width: 17.5%;	/* 幅指定 */
}
.wd16 {
	width: 16.66%;	/* 幅指定 */
}
.wd14 {
	width: 14.28%;	/* 幅指定(7分割・月次推移 年+6ヶ月) */
}
.wd13 {
	width: 13.75%;	/* 幅指定 */
}
.wd50-100 {
/*	display: block;  テーブルセルの振る舞いを解除しブロック化 */
	width: 50%;	/* 幅指定 */
}
.wd55-100 {
/*	display: block;  テーブルセルの振る舞いを解除しブロック化 */
	width: 55%;	/* 幅指定 */
}
.wd25-60 {
	width: 25%;	/* 幅指定 */
}
.wd30-60 {
	width: 30%;	/* 幅指定 */
}
.wd20-40 {
	width: 20%;	/* 幅指定 */
}
.fwd100 {
    flex: 0 0 100%;  /* flex固定幅 */
}
.fwd90 {
    flex: 0 0 90%;  /* flex固定幅 */
}
.fwd80 {
    flex: 0 0 80%;  /* flex固定幅 */
}
.fwd75 {
    flex: 0 0 75%;  /* flex固定幅 */
}
.fwd50 {
    flex: 0 0 50%;  /* flex固定幅 */
}
.fwd33 {
    flex: 0 0 33.33%;  /* flex固定幅 */
}
.fwd25 {
    flex: 0 0 25%;  /* flex固定幅 */
}
.fwd20 {
    flex: 0 0 20%;  /* flex固定幅 */
}
.fwd10 {
    flex: 0 0 10%;  /* flex固定幅 */
}
.fwd25-50 {
    flex: 0 0 25%;  /* flex固定幅 */
}
.fwd50-100 {
    flex: 0 0 50%;  /* flex固定幅 */
}
/* ★ポートフォリオのチャート表示用(1440=3列 / 960=2列 / 480=1列)。
   fwd50-100 を1440で33%にすると users/log.php の4グラフが3+1になるため、
   巻き込まないよう専用クラスにする(1440md §3-3)。 */
.fwd25-33-50-100 {
    flex: 0 0 25%;  /* flex固定幅 */
}
/* ★chart_list10 のチャート一覧用(1920=2列 / それ以外=1列)。
   1920 の div.index は 1728px でPNG(1780)の97%になり横に大きすぎるため、
   50%=864px に割る。864 は 960版面の div.index と同値(1440md §16)。
   ★box-sizing:border-box が必須。div.index の padding 3px が加算されると
   50%+6px となり 2個で 12px はみ出して1列に戻ってしまう。 */
.fwd50-100-100-100 {
    box-sizing: border-box;
    flex: 0 0 50%;  /* flex固定幅 */
}
/* flex_base をフレーム幅に収める。インラインの max-width だと
   メディアクエリで切り替えられない(1440md §3-2)。 */
.flex_frame {
    max-width: 1740px;
    margin-left: auto;
    margin-right: auto;
}

/*
 * img: 画像
 */
img {
	vertical-align: middle;
	border-radius: 5px;
}
img.manga {
	margin: 0 auto;
	padding: 1em 0;	/* tate yoko / top right bottom left */
	display: block;
	max-width: 90%;
	width: 50%;
	height: auto;
	box-shadow: 0 4px 14px rgba(20,40,80,.14);	/* S7 常時フレーム影(読み物のため拡大はしない) */
	transition: box-shadow 0.2s ease;	/* S7 hoverで橙影へ */
	animation: profile-pop 0.6s cubic-bezier(.22,.61,.36,1) backwards;	/* S8 登場ポップ(枠影と両立・hover拡大はしないまま) */
}
img.manga:hover {
	box-shadow: 0 6px 20px rgba(234,88,12,.30);	/* hover=橙影(サイトhover統一・S4橙#ea580c系) */
}
a.img:hover {
	background-color: transparent;	/* マウスイン画像 */
}
@keyframes profile-pop {	/* S8 初回登場ポップ(小さめ→原寸) */
	from { transform: scale(0.8); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
img.profile {	/* S7 hover拡大 + S8 初回登場ポップ(リロンちゃん含む全img.profile) */
	transition: transform 0.2s ease;
	animation: profile-pop 0.6s cubic-bezier(.22,.61,.36,1) backwards;	/* backwards=終了後は基準へ戻す→hover拡大を殺さない */
}
img.profile:hover {
	transform: scale(1.05);
}
img.picture {	/* S8 登場ポップのみ(hover拡大なし=挿絵/サンプル向け・クリック誤解回避) */
	animation: profile-pop 0.6s cubic-bezier(.22,.61,.36,1) backwards;
}

/*
 * new,liveマーク
 */
.new::after {
  padding: 1px 4px 0 4px;	/* tate yoko / top right bottom left */
  margin: 0 1px 2px 2px;
  display: inline-block;
  content: 'New';
  font-size: 9px;
  line-height: 1.2;
  color: #ffffff;
  background: #ed1c24;
  border-radius: 9px;
  vertical-align: middle;
}
.live::before {
  padding: 1px 4px 0 4px;	/* tate yoko / top right bottom left */
  margin: 0 1px 2px 2px;
  display: inline-block;
  content: 'LIVE';
  font-size: 9px;
  line-height: 1.2;
  color: #ffffff;
  background: #ff7eaf;
  border-radius: 9px;
  vertical-align: middle;
}

/*
 * ログインボタン
 */
.act_btn {
	margin: 0.25em;
	padding: 0.15em 0.7em;	/* 細身化(S5改・旧 0.4em 0.8em) */
	display: inline-block;	/* 縦paddingを実領域化し下段との重なり防止(S5改) */
	background: var(--nav-blue);	/* グローバルメニューと同色に統一(nav-blue) */
	color: #ffffff;
	font-size: 1.0em;
	font-weight: bold;
	border-radius: 1.0em;
	vertical-align: middle;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.12s ease;	/* S7 hover演出 */
}
.act_btn a:link, .act_btn a:visited {
	text-decoration: none;
	color: #ffffff;
}
.act_btn:hover, .act_btn a:hover {
	background: #ea580c;	/* hover=濃橙(橙hover化・2026-07-12・S4=濃青) */
	color: #ffffff;
	transform: translateY(-1px);	/* S7 わずかに持ち上げ */
	box-shadow: 0 4px 12px rgba(234,88,12,.28);	/* S7 橙の影 */
}

/*
 * サブボタン(act_btn の淡色版)。ヘッダー左のポートフォリオ導線など、
 * 会員登録/ログイン(act_btn)より一段弱い訴求に使う(2026-08-03)
 */
.sub_btn {
	margin: 0.25em;
	padding: 0.15em 0.4em;	/* act_btn(0.7em)より細身 */
	display: inline-block;	/* 縦paddingを実領域化し下段との重なり防止 */
	background: var(--bg-head);	/* h2見出し帯と同じ淡青。act_btn(nav-blue)より弱い */
	color: var(--nav-blue);	/* 淡い地色のため文字は濃紺(白だと読めない) */
	font-size: 1.0em;
	font-weight: bold;
	border-radius: 1.0em;
	vertical-align: middle;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.12s ease;	/* S7 hover演出 */
}
.sub_btn a:link, .sub_btn a:visited {
	text-decoration: none;
	color: var(--nav-blue);
}
.sub_btn:hover, .sub_btn a:hover {
	background: #ea580c;	/* hover は act_btn と同じ濃橙で挙動を揃える */
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(234,88,12,.28);
}

/*
 * リンクボタン(カテゴリ一覧のタイル)。sub_btn より小さく、色は tab_off と同じ
 * 非選択グレー。件数が多い一覧(絞り込み検索/カテゴリ別ランキング)向け(2026-08-03)
 */
.link_btn {
	margin: 0.15em;	/* sub_btn(0.25em)より詰める */
	padding: 0.15em 0.4em;
	display: inline-block;
	background: var(--bg-accent-soft);	/* 淡アクセント面(bg-head より一段淡い) */
	color: #475569;	/* 濃いめグレー(tab_off の #64748b より1段濃く・淡青背景で6.9:1) */
	font-size: 0.85em;	/* sub_btn(1.0em)より一回り小さく */
	font-weight: bold;
	border-radius: 1.0em;
	vertical-align: middle;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.link_btn a:link, .link_btn a:visited {
	text-decoration: none;
	color: #475569;
}
.link_btn:hover, .link_btn a:hover {
	background: var(--hover-bg);	/* 橙hover(タブと同じ挙動) */
	color: var(--hover-text);
	transform: translateY(-1px);
}

/* タブ */
div.tab_base {
	width: 100%;
/*	border-bottom:  solid 1px #a0a0a0;*/
}
.tab_index {
	margin: 0 0 0 0.1em;	/* top right bottom left */
	padding: 0.5em 0.3em;	/* tate yoko */
	float: left;
	border: none;		/* 上/左/右枠 撤去(S4・下線型タブ・旧 #c0c0c0) */
	border-bottom: 3px solid transparent;	/* 下線スロット(S4) */
	border-radius: 0;	/* 角丸タブ廃止(S4・旧 10px 10px 0 0) */
	background: var(--bg-card);	/* タブ面=白(S5改・ページ背景と同化するため。直下の白カードと連結) */
	font-weight: bold;
	font-size: 85%;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;	/* S7 transform追加 */
}
.tab_index a:link,
.tab_index a:visited {	/* 共通リンク設定 */
	text-decoration: none;
	color: inherit;
	background: transparent;
}
.tab_index:hover {	/* hover時（全体に効かせる） */
	background: var(--hover-bg);	/* 橙hover(背景のみ・2026-07-13) */
	color: var(--link-hover);
	transform: translateY(-1px);	/* S7 わずかに持ち上げ(現在地/下線は維持) */
}
.tab_on {	/* ON状態(S4・下線型=アクセント下線・旧 青グラデ面) */
	background: var(--bg-card);	/* タブ面=白(S5改) */
	color: var(--accent);
	border-bottom: 3px solid var(--accent);
}
.tab_on:hover {	/* hover時のONタブ(背景のみ橙・文字/下線は青=現在地維持) */
	background: var(--hover-bg);
	color: var(--accent);
}
.tab_off {	/* OFF状態(S4・下線型=下線なし・旧 白グラデ面) */
	background: var(--bg-card);	/* タブ面=白(S5改) */
	color: #64748b;	/* 非選択グレー */
	border-bottom: 3px solid transparent;
}
.tab_off:hover {
	background: var(--hover-bg);	/* 橙hover(背景のみ・2026-07-13) */
	color: var(--link-hover);
}
.blank.tab_global {	/* グローバルメニュー(_tab_main)= 青バー型の主ナビ(2026-07-26)。コンテキストタブ(下線型)と差別化 */
	box-sizing: border-box;	/* padding を幅に含める(2026-08-02・frame と実幅を揃えるため) */
	background: var(--nav-blue);	/* グローバルメニュー帯(nav-blue・白文字下限付近) */
	border-radius: var(--radius);
	padding: 0.25em 0.3em;
	margin: 0 auto 0.4em;	/* div.blank の margin-left:10px を打ち消し中央寄せ(2026-08-02) */
	padding-left: 0.3em;	/* 同上: div.blank の padding-left:6px を打ち消す */
	width: 1740px;			/* frame と同一幅 (2026-08-02: div.message に margin:1px を持たせ width864 を維持するため全段を +2px) */
	box-shadow: var(--shadow);	/* div.frame と同じ柔らかい影(2026-07-27) */
	overflow: hidden;	/* 影を切らないため維持(clearfixはflex化で不要) */
	/* flex折返し化(2026-07-29): float だと New バッジ付きタブだけ背が高くなり棚現象で崩れるため */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.tab_global .tab_index {	/* 帯の上=コンパクト・角丸・白文字・下線なし */
	margin: 0.08em;
	padding: 0.3em 0.42em;
	background: transparent;
	color: #fff;
	border-bottom: none;
	border-radius: 5px;
	font-size: 76%;
	float: none;	/* flexアイテムではfloatは無効。意図を明示(2026-07-29) */
}
.tab_global .tab_base {	/* flex化でclearfix不要。空の1行を作らせない(2026-07-29) */
	display: none;
}
.tab_global .tab_off {
	background: transparent;
	color: #fff;
	border-bottom: none;
}
.tab_global .tab_on {	/* 現在地=白反転(白背景×青文字) */
	background: #fff;
	color: var(--accent);
	border-bottom: none;
	font-weight: bold;
}
.tab_global .tab_index:hover,
.tab_global .tab_off:hover {	/* hover=白半透明overlay(=やや明るい青) */
	background: var(--hover-bg);
	color: var(--link-hover);
	transform: none;
}
.tab_global .tab_on:hover {	/* 現在地は維持 */
	background: #fff;
	color: var(--accent);
}
.tab_icon {	/* アイコン位置 */
	vertical-align: middle;
}

/*
 * lv1: page: ページデザイン
 */
div.page {
	margin: 0;
	padding: 0;
	width: 1920px;		/* fixed_size */
	margin-left: auto;	/* センタリング指定 */
	margin-right: auto;	/* センタリング指定 */
	border-left: none;		/* ページ境界線 撤去(S1・旧 #e8e8e8 2px) */
	border-right: none;		/* ページ境界線 撤去(S1・旧 #e8e8e8 2px) */
	background-color: var(--bg-page);		/* ページ背景色 */
	overflow: hidden;	/* 高さに合わせて枠を伸ばす */
}

/*
 * lv2: flex/float型boxデザイン(枠なし)
 */
div.box {
    box-sizing: border-box; /* パディング込みの幅計算 */
}
div.box2 {
    box-sizing: border-box; /* パディング込みの幅計算 */
}
div.flex_base {
	display: flex;
	width: 100%;
	flex-wrap: wrap;   /* 折り返す */
}
div.float_base {
    width: 100%;
    overflow: hidden;  /* floatクリア用 */
}
.flex_base:nth-child(odd) .box {
	background-color: #ffffff;		/* 枠内背景色：白 */
}
.flex_base:nth-child(even) .box {
	background-color: var(--bg-accent-soft);		/* 枠内背景色：淡アクセント(S3・旧 #edf3fe) */
}
.flex_base:nth-child(odd) .box2 {
	background-color: #ffffff;		/* 枠内背景色：白 */
}
.flex_base:nth-child(even) .box2 {
	background-color: var(--bg-accent-soft);		/* 枠内背景色：淡アクセント(S3・旧 #edf3fe) */
}
.float_base:nth-child(odd) .box {
	background-color: #ffffff;		/* 枠内背景色：白 */
}
.float_base:nth-child(even) .box {
	background-color: var(--bg-accent-soft);		/* 枠内背景色：淡アクセント(S3・旧 #edf3fe) */
}
.float_base:nth-child(odd) .box2 {
	background-color: #ffffff;		/* 枠内背景色：白 */
}
.float_base:nth-child(even) .box2 {
	background-color: var(--bg-accent-soft);		/* 枠内背景色：淡アクセント(S3・旧 #edf3fe) */
}
div.box.float_left, div.box2.float_left {
	float: left;
}
div.box.float_right, div.box2.float_right {
	float: right;
}
div.box.small, div.box2.small {
	font-size: 90%
}

/*
 * lv2: frame: フレーム枠デザイン
 */
div.frame, div.header_frame, div.footer_frame {	/* 見た目共有(header_frame/footer_frame=アニメ対象外の即時表示枠) */
	margin: 0.8em 10px;
	padding: 0;
	width: 1740px;			/* (2026-08-02: div.message に margin:1px を持たせ width864 を維持するため全段を +2px) */
	margin-left: auto;	/* センタリング指定 */
	margin-right: auto;	/* センタリング指定 */
	border: none;		/* 外枠 撤去(S2・旧 #e0e0e0 1px) */
	border-radius: var(--radius);	/* カード角丸(S2) */
	box-shadow: var(--shadow);		/* カード影(S2) */
	background-color: var(--bg-card);		/* カード面(S2・旧 中枠色 #d0d0d0) */
	overflow: hidden;	/* 高さに合わせて枠を伸ばす */
}

div.header_frame, div.footer_frame {	/* 白の埋没解消: 既存の薄青(.bksky=--bg-accent-soft)に寄せる。コンテンツ枠(div.frame)は白のまま(2026-07-26) */
	background-color: var(--bg-head);	/* h2/div.title と同じ青(2026-08-02・淡青では弱いため。旧 --bg-accent-soft) */
}

/*
 * lv2: blank: ブランク枠デザイン
 */
div.blank {
	margin: 0 0 0 10px;	/* tate yoko / top right bottom left */
	padding: 0 0 0 6px;
	width: 1748px;		/* fixed_size */
	margin-left: auto;	/* センタリング指定 */
	margin-right: auto;	/* センタリング指定 */
	color: #000000;
	text-align: center;
	background-color: var(--bg-page);		/* ページ背景色 */
	overflow: hidden;	/* 高さに合わせて枠を伸ばす */
}

/*
 * lv3: title: タイトルデザイン(枠あり)
 */
div.title {
	margin: 0;			/* 余白は親(div.index)の padding 3px が担う(2026-08-02) */
	padding: 0.7em 0px;
	width: 1728px;		/* fixed_size */
	margin-left: auto;	/* センタリング指定 */
	margin-right: auto;	/* センタリング指定 */
	border: none;		/* 内枠 撤去(S2・旧 #c0c0c0 1px) */
	background: var(--bg-head);		/* h2 と同じ青(2026-08-02・透過は薄すぎたため戻す) */
	border-radius: var(--radius-in);	/* h2と同色の見出しバー→角丸を統一(2026-08-02) */
	color: var(--text-head);
	font-size: 100%;				/* responsive_size */
	text-align: center;
}

/*
 * lv3: search: 検索デザイン(枠なし)
 */
div.search {
	margin: 0.5em 0px;
	padding: 0;
}

div.search_window {
	margin: 0.2em auto 0.5em auto;
	padding: 0;
	background-color: #ffffff;	/* 枠内背景色：白 */
	width: 80%;
}

form {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

input {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

input.calc, button.calc {
	margin: 0;
	padding: 0.5em;
	font-size: 100%;			/* responsive_size */
}

input.hyde {
    display: none;
}

select.calc {
	font-size: 100%;			/* responsive_size */
}

/* 一括追加(_link_port_list.php)のボタン。input.calc は padding:0.5em で太いため使わない。 */
/* ★高さは細い方(select の既定)に揃える。select には height を与えない。 */
/*   ボタンは font-size 85% で高さを落とす。padding/line-height だけで詰めようとすると */
/*   限界があり、文字が多少小さくても高さが揃っている方が自然に見える(2026-08-10)。 */
/*   部品は <small> の中にあるので、周囲のテキストとも馴染む。 */
input.pf_btn {
	margin: 0 0.1em;
	padding: 0 0.4em;
	font-size: 85%;
	line-height: 1.1;	/* ★上下の余白を詰めてボタンを薄くする */
	height: auto;
	vertical-align: middle;
}
select.pf_sel {
	margin: 0 0.1em;
	font-size: 100%;
	vertical-align: middle;	/* 高さは既定のまま。ボタンをこちらに合わせる */
}

/*
 * lv3: 背景テキスト
 */
.backtext {
  position: relative;
  z-index: 0; /* ベースのコンテナにz-indexを設定 */
}

.backtext::before {
  content: attr(data-bg);
  position: absolute;
  top: 0;
  left: 10px;
  font-weight: 700;
  font-size: clamp(24px, 7vw, 52px);
  line-height: 1.2;
  color: rgba(64, 128, 255, 0.5);
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;

  z-index: -1;   /* ←本文の後ろに配置する */
}

.backtext > * {
  position: relative;
  z-index: 1;
}

/*
 * lv3: index: インデックス青デザイン(枠あり)
 */
div.index {
	margin: 0;			/* 【検証2026-08-02】縦の白(frameの地)を除去 */
	padding: 3px;		/* 透過の3px枠。864+3*2=870=frame内寸 → auto余白0 */
	width: 1728px;		/* 余白は index の padding 3px に一本化(2026-08-02)。子は margin:0＝書き忘れても崩れず、上下左右が必ず等しくなる */
	margin-left: auto;	/* センタリング指定 */
	margin-right: auto;	/* センタリング指定 */
	border-color: transparent;		/* 輪郭線なし(S6・2026-07-14)。カードの影が境界を担うため冗長・幅計算のため1pxは維持 */
	border-style: solid;
	border-width: 0;	/* 【検証2026-08-02】透明ボーダー越しに親(白)が透けるのを除去 */
	border-radius: var(--radius-in);	/* 内側ブロック角丸(S5改・カード8pxの内側) */
	background-color: transparent;		/* 【検証2026-08-02】親(frame)を透過(旧 --bg-accent-soft) */		/* 枠内背景色：淡アクセント(S3・旧 #edf3fe) */
	background-clip: padding-box;	/* 背景を padding ボックスまでで止める(S6・2026-07-14) */
	color: #000000;
	text-align: center;	/* ★1440/1920は中央(§19)。1728px幅で左端に寄ると本文(864px中央)と離れるため。h2/h3/message は自前でcenterなので影響なし */
	overflow: hidden;	/* 高さに合わせて枠を伸ばす */
}

div.index_white {
	margin: 0;			/* div.index と同一(2026-08-02) */
	padding: 3px;		/* 透過の3px枠。864+3*2=870=frame内寸 → auto余白0 */
	width: 1728px;		/* 余白は index の padding 3px に一本化(2026-08-02)。子は margin:0＝書き忘れても崩れず、上下左右が必ず等しくなる */
	margin-left: auto;	/* センタリング指定 */
	margin-right: auto;	/* センタリング指定 */
	border-color: transparent;		/* 輪郭線なし(div.index と同方針) */
	border-style: solid;
	border-width: 0;	/* SOLIDデザイン時代の枠線(旧 border-top/bottom 2px)を撤去(2026-08-02) */
	border-radius: var(--radius-in);	/* 内側ブロック角丸(h2/h3/index と統一) */
	background-color: #ffffff;		/* ★div.index(transparent)との唯一の意図的な差＝文字どおり「白い index」 */
	background-clip: padding-box;	/* padding部は塗らない=親(frame)が透ける透過枠にする */
	color: #000000;
	text-align: center;	/* ★用途の差(index は left)。従来どおり維持 */
	overflow: hidden;	/* 高さに合わせて枠を伸ばす */
	max-width: 864px;	/* ★960の実効幅で止める(§19)。1440/1920でだけ効く */
}

div.index_rect {
	margin: 1px;	/* tate yoko / top right bottom left */
	padding: 0;
	width: 430px;	/* ★広げない。float で並ぶタイルなので 430 のままだと 1440=3列 / 1920=4列 に増える(1440md §13) */
	border-color: transparent;		/* 輪郭線なし(S6・2026-07-14・index と同方針) */
	border-style: solid;
	border-width: 1px;	/* tate yoko / top right bottom left */
	border-radius: var(--radius-in);	/* 内側ブロック角丸(S5改・カード8pxの内側) */
	background-color: var(--bg-accent-soft);		/* 枠内背景色：淡アクセント(S3・旧 #edf3fe) */
	background-clip: padding-box;	/* 背景を padding ボックスまでで止める(S6・2026-07-14) */
	color: #000000;
	text-align: left;
	overflow: hidden;	/* 高さに合わせて枠を伸ばす */
	float: left;
}

div.index_rect_top {
	margin: 1px 1px 0 1px;	/* tate yoko / top right bottom left */
}

div.index_rect_white {
	margin: 1px;	/* tate yoko / top right bottom left */
	padding: 0;
	width: 430px;
	border-color: var(--border);		/* 内枠色(S3・旧 #c0c0c0) */
	border-style: solid;
	border-width: 1px;	/* tate yoko / top right bottom left */
	border-radius: var(--radius-in);	/* 内側ブロック角丸(S5改・カード8pxの内側) */
	background-color: #ffffff;		/* 枠内背景色：白 */
	color: #000000;
	text-align: left;
	overflow: hidden;	/* 高さに合わせて枠を伸ばす */
	float: left;
}

div.message {
	margin: 0;			/* 余白は親(div.index)の padding 3px が担う(2026-08-02) */
	margin-left: auto;	/* センタリング指定(★max-width を入れたので必要・§19) */
	margin-right: auto;	/* 同上。index / index_white と同じ形に揃える */
	padding: 1.0em 0;		/* tate yoko / top right bottom left */
	width: 1728px;			/* fixed_size */
	background-color: #ffffff;	/* 枠内背景色：白 */
	text-align: center;
	max-width: 864px;	/* ★960の実効幅で止める(§19)。1440/1920でだけ効く */
}

/* ★意図して版面に追随させるものだけ上限を解除する(§19)。
   frame(カード)は 1440/1920 に追随するが、その中身(index/message)は
   読める幅で止める。★index は h2 の器でもあるため上限を掛けない(50.9%が見出し)。
   ★div.index(詳細度0-1-1)に勝たせるため要素名を付ける(div.index.bksky と同じ流儀)。
   ★flex_base で多列にしている器には必ずこれを付ける。付け忘れると崩れずに
     幅が半減するだけなので目視で気づきにくい。 */
div.index_white.index_resp,
div.message.index_resp {
	max-width: none;
}

div.header_menu {
	margin: 0;			/* 余白は親(div.index)の padding 3px が担う(2026-08-02) */
	padding: 0.5em 0;		/* tate yoko / top right bottom left */
	width: 1728px;			/* fixed_size */
	background-color: #ffffff;	/* 枠内背景色：白 */

	border-radius: var(--radius-in);	/* bksky併用時の淡青帯→h3と角丸を統一(2026-08-02) */
	text-align: center;
}

div.header_fixed {
	position: fixed;
	top: 0;
	left :0;
	z-index: 999;
	max-width: none;
	width: 100%;
	border-color: var(--border);		/* 外枠色(S3・旧 #c0c0c0) */
	border-style: solid;
	border-width: 1px;
}

/*
 * lv3: banner_f: フリーバナーデザイン(枠あり)
 */
div.banner_f {
	margin: 1px;
	padding: 0;
	width: 1728px;		/* fixed_size */
//	height: 90px;		/* fixed_size */
	margin-left: auto;	/* センタリング指定 */
	margin-right: auto;	/* センタリング指定 */
	border-color: var(--border);		/* 内枠色(S3・旧 #c0c0c0) */
	border-style: solid;
	border-width: 1px;
	background-color: #ffffff;	/* 枠内背景色：白 */
	text-align: center;
	overflow: hidden;	/* はみ出した部分を表示しない */
}
/* 個別銘柄リンクバー(_link_bar.php)。色は .bksky が担い、形(角丸)はこちらで持つ */
div.link_bar {
	border-radius: var(--radius-in);	/* h2/h3/index と同じ内側ブロック角丸(2026-08-02) */
}
/* div.index は background-color を持つため .bksky(詳細度0-1-0)では上書きできない。
   index に淡青を敷きたい場合はこちらが担う(_join_banner1/3・2026-08-02) */
div.index.bksky {
	background-color: var(--bg-accent-soft);
}

/* 本棚 */
img.bookicon {	/* 旧bookcover=74px小サムネ(クリック可)。大表紙は別クラスbookcoverに分離(S7追補2) */
	border-radius: 0;
	width: 74px;
	height: auto;
	transition: transform 0.15s ease;	/* S7 hover演出(box-shadowはdiv.bookboxへ移設・2026-07-17) */
}
a:hover img.bookicon {	/* S7 書影サムネhover=少し浮く(リンク内画像・box-shadowはdiv.bookbox側) */
	transform: translateY(-3px);
}
img.bookcover {	/* S7追補2 大表紙(クリック可・book*cover1.png)。幅はインラインstyle温存 */
	box-shadow: 0 6px 16px rgba(20,40,80,.20);	/* 常時=本の存在感(フレーム影・最初から濃いめに・2026-07-17) */
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a:hover img.bookcover {	/* hover=浮いて影が伸びる(クリック可のため浮き上がり) */
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(20,40,80,.22);
}

div.bookbox {
	margin: 0 auto;		/* tate yoko / top right bottom left */
	text-align: center;
	font-size: 75%;
	width: 74px;
	height: auto;
	overflow: visible;	/* hidden撤去(height:autoで実質無効だった旧指定・影/hover浮き上がりのクリップ原因のため・2026-07-17) */
	box-shadow: 0 3px 8px rgba(20,40,80,.28);	/* 常時=本の存在感(img.bookiconから移設・自身の影は自身のoverflowで切り取られないため・manga並みの視認性に強化・2026-07-17) */
	transition: box-shadow 0.15s ease;	/* S7 hover演出 */
}
a:hover div.bookbox {	/* S7 hover=影が広がる(img.bookiconのtransformと連動) */
	box-shadow: 0 8px 18px rgba(20,40,80,.38);
}

div.bookshelf {
	text-align: right;
	float: right;
	font-size: 100%;
	margin-left: 2%;
	margin-right: 2%;
	width: 96%;
}

div.bookunit {
	margin: 0;
	padding: 0.7em 0px;	/* tate yoko / top right bottom left */
	text-align: center;
	float: left;
	font-size: 100%;
	width: 12.5%;
}

div.bookunit33 {
	margin: 0;
	padding: 0.7em 0px;	/* tate yoko / top right bottom left */
	text-align: center;
	float: left;
	font-size: 100%;
	width: 33.3%;
}

/*
/* マークアップ
 */
h1 {
	margin: 3px;
	padding: 0;
	color: var(--text-head);	/* 見出し濃紺(S2・旧 #000000) */
	font-size: 135%;			/* responsive_size(S2・旧125% サイズ強調) */
}

h2 {
	margin: 0;			/* 余白は親(div.index)の padding 3px が担う(2026-08-02) */
	padding: 0.5em;
/*	color: #000000; */
	background: var(--bg-head);	/* 見出し帯(S5改・同化対策で濃く。S2=accent-soft・旧 青グラデ) */
	border-radius: var(--radius-in);	/* 【検証2026-08-02】見出しバーを角丸に(内側ブロック6px) */
	color: var(--text-head);
	font-size: 100%;			/* responsive_size */
	text-align: center;
}
h2.left {
	text-align: left;
}

h3 {
	margin: 0;			/* 余白は親(div.index)の padding 3px が担う(2026-08-02) */
	padding: 0.5em;
/*	color: #000000; */
	background: var(--bg-accent-soft);	/* 見出し帯(S5改・同化対策で濃く。S2=accent-soft・旧 青グラデ) */

	border-radius: var(--radius-in);	/* 見出しバーを角丸に(h2と統一・2026-08-02) */
	color: var(--text-head);
	font-size: 100%;			/* responsive_size */
	text-align: center;
}

p {
	margin: 0;
	padding: 0;
	color: #000000;
	font-size: 100%;
}

p.title {
	margin: 0;
	padding: 0;
	color: #000000;
	font-size: 100%;
}

p.message {
	margin: 0.5em;
	padding: 0;
	color: #000000;
	font-size: 100%;			/* responsive_size */
	text-align: center;
}

p.path {
	margin: 0;
	padding: 0 0.5em;			/* tate yoko / top right bottom left */
	color: #000000;
	font-size: 100%;			/* responsive_size */
	text-align: left;
}

p.copyright {
	margin: 0;
	padding: 0;
	color: #000000;
	font-size: 100%;				/* responsive_size */
}

p.small {
	margin: 0;
	padding: 0;
	color: #000000;
	font-size: 65%;				/* responsive_size */
}

p.middle {
	margin: 0;
	padding: 0;
	color: #000000;
	font-size: 95%;				/* responsive_size */
}

p.info {
	margin: 0.5em;
	padding: 0;
	color: #000000;
	font-size: 85%;			/* responsive_size */
}

a.info {
	margin: 0.5em;
	padding: 0;
	font-size: 85%;			/* responsive_size */
}

/*
/* グラフ
 */
div.graph {
	margin: 0.6em 0 0.7em 0;		/* tate yoko / top right bottom left */
    display: block;
    background: #e0e0e0;
    margin-left: 5%;
    margin-right: 5%;
	overflow: hidden;	/* はみ出した部分を表示しない */
}

/* ポートフォリオ 理論株価/α値 ハイブリッド2段バー(上下密着) */
div.graph.twintop { margin: 0.2em 5% 0 5%; }
div.graph.twinbtm { margin: 0 5% 0.5em 5%; }
div.graph.twintop span, div.graph.twinbtm span { height: 1.0em; line-height: 1.0em; }

/* ポートフォリオ(tr.twin=2行1組の詳細版 / tr.solo=1行1組の簡易版): 行内セルを等高にし縦線(border-right)を全高へ */
table.custom tr.twin td div.tcell:not(.memo),
table.custom tr.solo td div.tcell:not(.memo) {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

span.graybar {
    display: block;
    background: #e9edf2;	/* トラック(下地)=淡グレー(S6・2026-07-14: 前景バーとの明度差を確保) */
    box-shadow: inset 0 0 0 1px rgba(20, 40, 80, 0.06);	/* 端を示す極薄の内側境界(ツヤではなく境界) */
    float: left;
    height: 1.0em;
    line-height: 1.0em;
	border-radius: 0;	/* フラット(S6・旧 2px 0 0 2px の片側丸みを撤去) */
}

span.redbar {
    display: block;
    background: #f05252;	/* 単色ライト(S6・2026-07-14: 白＆ライトブルー基調に合わせ1段明るく・旧 #e11d1d) */
    float: left;
    height: 1.0em;
    line-height: 1.0em;
	border-radius: 0;	/* フラット(S6・旧 2px 0 0 2px の片側丸みを撤去) */
}

span.bluebar {
    display: block;
    background: #5b8def;	/* 単色ライト(S6・2026-07-14: 白＆ライトブルー基調に合わせ1段明るく・旧 #2563eb) */
    float: left;
    height: 1.0em;
    line-height: 1.0em;
	border-radius: 0;	/* フラット(S6・旧 2px 0 0 2px の片側丸みを撤去) */
}

span.darkbluebar {
    display: block;
    background: #3b63c4;	/* 単色ライト(S6・2026-07-14: 白＆ライトブルー基調に合わせ1段明るく・旧 #1e40af) */
    float: left;
    height: 1.0em;
    line-height: 1.0em;
	border-radius: 0;	/* フラット(S6・旧 2px 0 0 2px の片側丸みを撤去) */
}

span.pinkbar {
    display: block;
    background: #f472b6;	/* 単色ライト(S6・2026-07-14: 白＆ライトブルー基調に合わせ1段明るく・旧 #ec4899) */
    float: left;
    height: 1.0em;
    line-height: 1.0em;
	border-radius: 0;	/* フラット(S6・旧 2px 0 0 2px の片側丸みを撤去) */
}

span.greenbar {
    display: block;
    background: #34c77b;	/* 単色ライト(S6・2026-07-14: 白＆ライトブルー基調に合わせ1段明るく・旧 #16a34a) */
    float: left;
    height: 1.0em;
    line-height: 1.0em;
	border-radius: 0;	/* フラット(S6・旧 2px 0 0 2px の片側丸みを撤去) */
}

span.orangebar {
    display: block;
    background: #fb923c;	/* 単色ライト(S6・2026-07-14: 白＆ライトブルー基調に合わせ1段明るく・旧 #f97316) */
    float: left;
    height: 1.0em;
    line-height: 1.0em;
	border-radius: 0;	/* フラット(S6・旧 2px 0 0 2px の片側丸みを撤去) */
}

span.yellowbar {
    display: block;
    background: #f5c765;	/* 単色ライト(S6・2026-07-14: 白＆ライトブルー基調に合わせ1段明るく・旧 #f97316) */
    float: left;
    height: 1.0em;
    line-height: 1.0em;
	border-radius: 0;	/* フラット(S6・旧 2px 0 0 2px の片側丸みを撤去) */
}

span.skybluebar {
    display: block;
    background: #4cc0f0;	/* 単色ライト(S6・2026-07-14: 白＆ライトブルー基調に合わせ1段明るく・旧 #0ea5e9) */
    float: left;
    height: 1.0em;
    line-height: 1.0em;
	border-radius: 0;	/* フラット(S6・旧 2px 0 0 2px の片側丸みを撤去) */
}

span.purplebar {
    display: block;
    background: #9061f0;	/* 単色ライト(S6・2026-07-14: 白＆ライトブルー基調に合わせ1段明るく・旧 #7c3aed) */
    float: left;
    height: 1.0em;
    line-height: 1.0em;
	border-radius: 0;	/* フラット(S6・旧 2px 0 0 2px の片側丸みを撤去) */
}

span.violetbar {
    display: block;
    background: #c084fc;	/* 単色ライト(S6・2026-07-14: 白＆ライトブルー基調に合わせ1段明るく・旧 #a855f7) */
    float: left;
    height: 1.0em;
    line-height: 1.0em;
	border-radius: 0;	/* フラット(S6・旧 2px 0 0 2px の片側丸みを撤去) */
}

span.whitebar {
    display: block;
    background: #ffffff;
    float: left;
    height: 1.0em;
    line-height: 1.0em;
}

div.cell {
	text-align: right;
	float: right;
	font-size: 100%;
/*	margin-left: 2%;*/
/*	margin-right: 2%;*/
	width: 96%;
}

div.cell_center {
	text-align: center;
/*	float: right; */
	font-size: 100%;
	margin-left: 2%;
	margin-right: 2%;
	width: 96%;
}

div.left {
	text-align: right;
	float: left;
	font-size: 90%;
	width: 50%;
}

div.right {
	text-align: left;
	float: left;
	font-size: 90%;
	width: 50%;
}

div.pre {
	white-space: pre;
}

div.inline_block {
	display: inline-block;
	text-align: left;
}

div.round_rect {
	display: inline-block;
	padding: 10px;
	margin: 10px auto 20px;
	border: solid 3px var(--bg-accent-soft);
	border-radius: 10px;
}

div.round_rect_fill {
	display: inline-block;
	padding: 10px;
	margin: 10px;
	border: solid 3px var(--bg-accent-soft);
	background-color: var(--bg-accent-soft);
	border-radius: 10px;
}

div.quintet {	/* calc用 */
	text-align: right;
	float: left;
	font-size: 100%;
	width: 20%;
}

span.star {
	color: #ff6060;		/* 薄赤 */
}

span.vip {
	color: #ff8844;		/* オレンジ */
}
a.vip {
    text-decoration-color: #ff8844;
}

span.marker {
	background: linear-gradient(transparent 75%, #ffaaff 0%);	/* 細身化(S5改・旧60%=下40%) */
}
span.marker2 {
	background: linear-gradient(transparent 80%, #ffff66 0%);	/* 細身化(S5改・旧70%=下30%) */
}

div.hyde {
    display: none;
}

#chart_riron {
	margin: 0;
	padding: 0;
	width: 1572px;		/* fixed_size */
	height: 840px;		/* fixed_size */
}

.video {
	margin: 1px;
	padding: 2px;	/* tate yoko / top right bottom left */
	border-color: var(--border);		/* 内枠色(S3・旧 #c0c0c0) */
	border-style: solid;
	border-width: 1px;
	background-color: #ffffff;		/* 枠内背景色：白 */
	color: #000000;
	font-size: 100%;	/* fixed_size */
	text-align: center;
	position: relative;
	padding-bottom : 55.8%;	/* base 56.25% */
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.max_width560 {
	max-width: 1120px;
	margin-bottom: 2.5em;
}

/**********
 * テーブル表示用
 */
table.custom {
  font-size: 0.8125em;	/*13px*/
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
      border-left: 1px solid var(--border);	/* 左辺を閉じる(2026-08-02)。セルは border-right のみのため左端に線がなかった */
  table-layout: fixed; /* 幅固定 */
}
table.custom thead tr {
  background-color: var(--bg-accent-soft);
  height: 2.5em;
  line-height: 2.5em;	/* 文字の縦位置 */
  border-bottom: 1px solid var(--border);	/* 下線 */
}
table.custom tbody tr {
  height: 2.25em;
  line-height: 2.25em;	/* 文字の縦位置 */
}
table.custom tbody tr:hover {
  background-color: var(--hover-bg);	/* 行ホバー(橙hover化・2026-07-12) */
}
table.custom tbody tr:nth-child(odd) {
  background-color: #ffffff;
}
table.custom tbody tr:nth-child(even) {
  background-color: var(--bg-stripe);	/* ストライプ淡色化(S3) */
}
table.custom tbody tr.twin:nth-child(4n+1),
table.custom tbody tr.twin:nth-child(4n+2) {
  background-color: #ffffff;
}
table.custom tbody tr.twin:nth-child(4n+3),
table.custom tbody tr.twin:nth-child(4n+4) {
  background-color: var(--bg-stripe);	/* ストライプ淡色化(S3) */
}
table.custom th, table.custom td {
  box-sizing: border-box;	/* パディング込みの幅計算 */
  padding: 0;		/* 余白なし */
  border-right: 1px solid var(--border);	/* 縦線(S3・旧 #ccc) */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table.custom tr.btmline {
  border-bottom: 1px solid var(--border);	/* 下線 */
}
table.custom td.autoline {
/*  border-bottom: 1px solid #ccc;	下線 */
}
table.custom td.btmline {
  border-bottom: 1px solid var(--border);	/* 下線 */
}
table.custom .txt_red {
	color: red;
}
/**********
 * テーブル内セル
 */
table.custom th div.tcell {
	box-sizing: border-box; /* パディング込みの幅計算 */
	float: left;
	border-right: 1px solid #ccc; /* 枠線 */
}
table.custom td div.tcell {
	box-sizing: border-box; /* パディング込みの幅計算 */
	float: left;
	border-right: 1px solid #ccc; /* 枠線 */
}
table.custom th > div.tcell:last-child, table.custom td > div.tcell:last-child {
    border-right: none;		/* 最終tdの線を消す */
}
div.tcell.memo {
	word-wrap: break-word;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.2;   /* ← 行間を縮める */
}
/* 表セル内テキストのビューポート別サイズ調整(responsive_size・2026-08-05)
   <small> で HTML 側を縮めると PC でも小さくなり、意味(注釈)も変わってしまうため、
   「入りきらないから小さくする」は CSS の責務としてこのクラスに集約する。
   span を使うのは意味を持たないインラインの入れ物だから(p は段落の意味を持ち、
   セル内の アイコン＋会社名 は段落ではない。margin リセットも不要になる)。 */
span.resp {
	font-size: 100%;	/* responsive_size */
}

/**********
 * list系ページの横スクロール+会社名列固定(tosan_list Step0・2026-07-17・PCはスクロール不要のため通常表示。Step2でモバイル側をこのグリッド比率に統一)
 */
.table_scroll {
	overflow-x: visible;
	-webkit-overflow-scrolling: auto;
}
.table_scroll table.custom {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
th.sticky_name, td.sticky_name {
	position: static;
	left: 0;
	z-index: 2;
	background-color: #ffffff;
	width: 16.5%;
}
table.custom thead tr th.sticky_name {
	background-color: var(--bg-accent-soft);
}
table.custom tbody tr:nth-child(odd) td.sticky_name {
	background-color: #ffffff;
}
table.custom tbody tr:nth-child(even) td.sticky_name {
	background-color: var(--bg-stripe);
}
/* ポートフォリオ詳細版は1銘柄2行のため、固定列のストライプも4n周期に合わせる(§12 S7)。
   上の odd/even のままだと、1銘柄目の2行目だけ固定列が薄青になり行の背景と食い違う。
   td の背景は tr の背景を上書きするため確実に起きる */
table.custom tbody tr.twin:nth-child(4n+1) td.sticky_name,
table.custom tbody tr.twin:nth-child(4n+2) td.sticky_name {
	background-color: #ffffff;
}
table.custom tbody tr.twin:nth-child(4n+3) td.sticky_name,
table.custom tbody tr.twin:nth-child(4n+4) td.sticky_name {
	background-color: var(--bg-stripe);
}
/* ポートフォリオ(グラフ版)だけ固定列を wd17(17.5%)にする(§15 第二段階)。
   th.sticky_name / td.sticky_name(詳細度 0,1,1)が後方定義のため .wd17(0,1,0)では勝てない。
   .port を噛ませて詳細度を上げ、wd17 を優先させる。他ファイルの 16.5% は変えない。
   残り6列は wd13(13.75%)。17.5 + 13.75 x 6 = 100% */
.port th.sticky_name.wd17, .port td.sticky_name.wd17 {
	width: 17.5%;
}
th.scroll_cell, td.scroll_cell {
	width: 8.35%;
}

/* リスト版(port_list.php)の18列用。共有の .table_scroll は12列想定で幅が足りない */
/* (16.5% + 8.35% x 10 = 100%)。18列だと158%になり、PCは overflow-x:visible のため */
/* 右端が見切れる。専用クラスで px 指定にして横スクロールさせる(2026-08-08)。 */
.table_scroll.wide_scroll { overflow-x: auto; }
.table_scroll.wide_scroll table.custom { width: 1550px; }	/* 157 + 96 + 277 + 68 x 15 (12px 用) */
.wide_scroll th.sticky_name, .wide_scroll td.sticky_name { position: sticky; }	/* 機構のみ。幅は cell_NN が持つ */
/* 幅は px 固定でフォントに依存しない汎用クラス。13px 用と 12px 用を並べて持つ。 */
/* th.cell_NN(0,1,1) は th.scroll_cell(0,1,1) と同詳細度のため、後方に置いて勝たせる。 */
th.cell_68,  td.cell_68  { width: 68px; }	/* 12px 用: 数値列 */
th.cell_72,  td.cell_72  { width: 72px; }	/* 13px 用: 数値列 */
th.cell_96,  td.cell_96  { width: 96px; }	/* 12px 用: 決算 YYYY-MM-DD。new マークの ::after まで入る幅(88→96・2026-08-11) */
th.cell_104, td.cell_104 { width: 104px; }	/* 13px 用: 決算 YYYY-MM-DD(96 x 13/12) */
th.cell_157, td.cell_157 { width: 157px; }	/* 12px 用: 会社名 */
th.cell_170, td.cell_170 { width: 170px; }	/* 13px 用: 会社名 */
th.cell_277, td.cell_277 { width: 277px; }	/* 12px 用: メモ */
th.cell_300, td.cell_300 { width: 300px; }	/* 13px 用: メモ */
/* 文字サイズ(機構)。幅クラスとは直交させる。table.custom の既定は 0.8125em=13px。 */
/* 目的は幅を詰めて表示量を増やすこと。12px で 864px の枠に見える列が 10→11 に増える。 */
/* 幅は追従しないので cell_NN も併せて選ぶ。12px 用は 68/88/157/277 を定義済み。 */
/* font_small(11px)を使う場合の目安は 61/81/144/254(=13px 値 x 11/13)。必要時に追加する。 */
.font_mid   table.custom { font-size: 0.75em; }	/* 12px。<small>(約10.8px)と既定の中間 */
.font_small table.custom { font-size: 0.6875em; }	/* 11px。<small> よりわずかに大きい */

/**********
 * ランキング表示用
 */
.margin_bottom_auto {
	margin-bottom: 2.5em;
}

.ranking {
	font-size: .875em;	/*14px*/
}
.ranking .stock, .stock .name, .stock .data, .stock .data_last, .stock .data .cell, .stock .data_last .cell, .stock .data .cell_half, .stock .data .cell_left, .stock .data .cell_right, .stock .data_last .cell_half, .stock .data_last .cell_half_right, .stock .data_last .cell_top, .stock .data_last .cell_bottom {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.ranking .stock:after {
	display: block;
	clear: both;
	content: '';
}
.ranking .rank {
	padding: 5px 0;
	float:left;
	width: 5%;
	vertical-align: middle;
	text-align: right;
	overflow: hidden;
}
/*.stock .rank {
	width: 8%;
}*/
.stock .name {
	margin-left: 1%;
	padding: 5px 0;
	float:left;
	width: 28%;
	text-align: left;
	overflow: hidden;
}
.stock .name .label {
	display: inline;
/*	padding: 0 2.5%;
	float: none;
	width: 95%;*/
	overflow: hidden;
	white-space: nowrap;
}
.stock .data, .stock .data_last {
/*	padding: 5px 0;*/
	float:left;
	width: 22%;
	text-align: right;
	overflow: hidden;
}
.stock .data .cell, .stock .data_last .cell {
	padding: 5px 2.5%;
	float: none;
	width: 95%;
	text-align: right;
	overflow: hidden;
	white-space: nowrap;
}
/*.stock .data .cell, .stock .data .cell_half, .stock .data .cell_left, .stock .data .cell_right, .stock .data_last .cell, .stock .data_last .cell_half, .stock .data_last .cell_half_right, .stock .data_last .cell_top, .stock .data_last .cell_bottom {
	padding: 0 2.5%;
	float: none;
	width: 95%;
}*/
.stock .data .cell_half, .stock .data_last .cell_half, .stock .data_last .cell_half_right, .stock .data_last .cell_top, .stock .data_last .cell_bottom {
	padding: 5px 2.5%;
	float: left;
	width: 50%;
	text-align: right;
	overflow: hidden;
	white-space: nowrap;
}
.stock .data .cell_left {	/* left+right: centering */
	padding: 5px 0;
	float: left;
	width: 50%;
	text-align: right;
	overflow: hidden;
	white-space: nowrap;
}
.stock .data .cell_right {	/* left+right: centering */
	padding: 5px 0;
	float: left;
	width: 50%;
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
}
.stock .comment {
	margin-right: 1%;
	padding: 5px 0;
	float:left;
	width: 22%;
	text-align: right;
	overflow: hidden;
}

/* 料金比較表の強調列(login/lisense等・funda_style から移植・2026-07-12) */
td.up {
	background-color: #feedf3;		/* 枠内背景色：ピンク */
}

.ranking {
	border: solid 1px var(--border);
}
.ranking .stock:nth-child(odd) {
	background-color: var(--bg-stripe);	/* ストライプ淡色化(S3) */
}
.ranking .stock:nth-child(even) {
	background-color: #ffffff;
}
.stock .name, .stock .data .cell, .stock .data .cell_half, .stock .data .cell_right, .stock .data_last .cell_half, .stock .data_last .cell_top {
	border-right: solid 1px #a0a0a0;
}
.change_minus {
	color: red;
}
.change_minus2 {
	color: #cc026e;
}
.comment .group a {
	color: #808080;
}
.comment .group a:hover {
	color: #909090;	/* 文字色は変更しない方針(2026-07-13)・橙は背景のみ */
}
/*.stock .name, .stock .data, .stock .data_last {
	border-right: solid 1px a3df6b;
}
.stock .data .cell, .stock .data .cell_half, .stock .data .cell_right, .stock .data_last .cell_top {
	border-right: 0;
}*/

/* アバター吹き出し(funda_style から移植・kabubiz_list/kabubiz_stock 用・目的別設計§8-12) */
.balloon_rect {
	position: relative;
	display: inline-block;
	margin: 1.5em 0 1.5em 15px;	/* tate yoko / top right bottom left */
	padding: 7px 10px;
	min-width: 120px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #FFF;
	border: solid 3px var(--nav-blue);	/* 枠=nav-blue(2026-07-26) */
	box-sizing: border-box;
	border-radius: 15px;
}

.balloon_rect:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -21px;
	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 12px solid #FFF;
	z-index: 2;
}

.balloon_rect:after {
	content: "";
	position: absolute;
	top: 50%;
	left: -27px;
	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid var(--nav-blue);	/* 三角の縁=nav-blue */
	z-index: 1;
}

p.balloon {
	margin: 0 0.1em;
	padding: 0;
}

/* tv 用に chart_style から移植(message_half/small/absolute/sub_title/relative・目的別設計§10補足) */
.relative {
	position: relative;
}

div.message_half {
	margin: 0;
	padding: 1.0em 0;		
	width: 430px;			
	background-color: #ffffff;	
	text-align: center;
}

div.small {
	font-size: smaller;
}

img.absolute {
	position: absolute;
	top: 55%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

p.sub_title {
	margin: 0.4em 0.2em;
	padding: 0;
	color: #000000;
	font-size: 75%;			
}

/*
 * funda分析ツール用(funda_style から移植・css_funda md §3・2026-07-12)
 */
div.card_white {
	margin: 1px;
	padding: 0;
	width: 816px;		/* fixed_size */
	margin-left: auto;	/* センタリング指定 */
	margin-right: auto;	/* センタリング指定 */
	background-color: #ffffff;		/* 枠内背景色：白 */
	color: #000000;
	text-align: center;
	overflow: hidden;	/* 高さに合わせて枠を伸ばす */
}

div.thumb {
	padding: 10px;
	float: left;
}

div.sline {	/* calc用(funda) */
	margin: 0;
	padding: 0.68em 0px;	/* tate yoko */
	width: 430px;				/* fixed_size */
	border-bottom-color: var(--border);		/* 下線色(旧 #c0c0c0) */
	border-bottom-style: solid;
	border-bottom-width: 1px;
	background-color: #ffffff;	/* 枠内背景色：白 */
	overflow: hidden;	/* 高さに合わせて枠を伸ばす */
}

div.sline_b {	/* calc用(funda) */
	margin: 0;
	padding: 0.68em 0px;	/* tate yoko */
	width: 430px;				/* fixed_size */
	border-bottom-color: var(--border);		/* 下線色(旧 #c0c0c0) */
	border-bottom-style: solid;
	border-bottom-width: 1px;
	background-color: var(--bg-accent-soft);	/* 枠内背景色(旧 #edf3fe) */
	overflow: hidden;	/* 高さに合わせて枠を伸ばす */
}

div.inner_board {	/* グラフ盤(funda) */
	margin: 0;
	padding: 0;
	width: 430;		/* fixed_size: 524+336+(4)=864 ※原典どおり単位なし(無効=auto・挙動維持) */
	height: 280px;		/* fixed_size */
	float: left;
	margin-left: auto;	/* センタリング指定 */
	margin-right: auto;	/* センタリング指定 */
	border-color: var(--border);		/* 内枠色(旧 #c0c0c0) */
	border-style: solid;
	border-width: 0;			/* top right bottom left*/
	background-color: #ffffff;		/* 枠内背景色：白 */
	color: #000000;
	text-align: center;
	overflow: hidden;	/* 高さに合わせて枠を伸ばす */
}

.chart_graph {	/* canvasグラフ表示縮小(funda_style から移植・users管理/koma等・2026-07-12) */
	margin: 0;
	padding: 0;
	width: 1652px;
	height: 928px;
	vertical-align: bottom;
}

/*
 * kessan決算カレンダー用(chart_style から移植・css_kessan md §3・2026-07-12)
 * red/blue/silver/ButtonFace は決算データ表現色=踏襲。淡青/hover はトークン適応
 */
td.fs {
	width: calc(100% / 7);	/* 曜日セル */
}
tr.corpinfo {
	text-align: left;
}
img.abs_zero {
	position: absolute;
	opacity: 0.8;
	top: 2.7em;
	left: 2.0em;
}
td.zero {
	color: silver;
}
td.number {
	text-align: right;
}
th.red, td.red, span.red {
	color: red;
}
th.blue, td.blue, span.blue {
	color: blue;
}
td.gray {
	background-color: ButtonFace;
}
td.focus {
	background-color: var(--bg-accent-soft);	/* 当日ハイライト(旧 #edf3fe) */
}
table.calendar {
	margin: 0.5em auto;	/* センタリング指定 */
	width: 51%;
}
table.calendar th {
	width: calc(100% / 7);
	text-align: center;
	background-color: var(--bg-accent-soft);	/* 旧 #edf3fe */
}
table.calendar td {
	border-top: solid 1px #a0a0f0;	/* カレンダー罫(意匠・据置) */
	width: calc(100% / 7);
}
table.calendar td a {
	color: blue;
	text-decoration: none;
}
table.calendar tr:nth-child(odd) {
	background-color: #ffffff;
}
.calendar a div:hover {
	background-color: var(--hover-bg);	/* 橙hover統一(旧 #b8ccf8) */
}

/* S8 出現アニメ: has-motion有効時のみ div.frame を初期非表示→スクロールでフワッと出現。
   header_frame/footer_frame は .frame でないため対象外=即時表示。JS無効/未対応/失敗時は
   has-motionが付かない or フォールバックで表示され、中身が消えない安全設計。全ページ対応(2026-07-16) */
.has-motion div.frame {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
}
.has-motion div.frame.is-visible {
	opacity: 1;
	transform: none;
}

/* S7 アクセシビリティ: モーション低減設定時はhover演出を無効化(2026-07-15) */
@media (prefers-reduced-motion: reduce) {
	img.bookicon, div.bookbox, .tab_index, .act_btn, img.profile, img.manga, img.bookcover { transition: none; }
	a:hover img.bookicon, .tab_index:hover, .act_btn:hover, .act_btn a:hover, img.profile:hover { transform: none; box-shadow: none; }	/* img.manga/bookcoverは常時影のため除外(色変化のみ・transition:noneで即時化) */
	a:hover img.bookcover, a:hover div.bookbox { transform: none; }	/* 大表紙/書影=浮き上がりのみ抑止(常時フレーム影は維持) */
	img.profile { animation: none; }	/* S8 初回登場ポップも無効化 */
	img.picture { animation: none; }	/* S8 登場ポップ(挿絵)も無効化 */
	img.manga { animation: none; }	/* S8 登場ポップ(マンガ)も無効化 */
	.has-motion div.frame { opacity: 1; transform: none; transition: none; }	/* S8 出現アニメも無効化(即時表示) */
}

/**********
 * 高DPI(大画面100%スケール)対応: 大画面でページ全体を1.5倍描画(高DPIデザインmd・2026-07-17)
 * 4K実機確認でzoom:1.5採用(zoom:2は拡大過剰)。しきい値1600=FHD(1920)含む大画面で発動、
 * FHDノート125%(1536)は対象外。zoomは2024年CSS標準化済み。8K向けzoom:2段は将来検討
 * ★1920版面で zoom すると 2880px になる。1920x1.5=2880 のため 2900 を下限にする。4Kはここで1.5倍になり読みやすくなる(1440md §2-3 と同じ考え方)
@media (min-width: 2900px) {
	body { zoom: 1.5; }
}