@charset "Shift_JIS";

/* =========================================================
   Design tokens
   ========================================================= */
:root {
	--bg:          #f4f6fb;
	--surface:     #ffffff;
	--surface-2:   #eef2f9;
	--text:        #1b2333;
	--text-muted:  #5d6b82;
	--border:      #d9e0ec;

	--accent:      #0a7fd6;   /* beam / cyan-blue   */
	--accent-2:    #7b4dff;   /* track / violet     */
	--accent-3:    #ff8a1f;   /* energy deposit     */
	--link:        #0a6fc0;
	--link-hover:  #ff6a00;
	--code-bg:     #0e1626;
	--code-text:   #d6e4ff;

	--radius:      10px;
	--shadow:      0 1px 2px rgba(15,30,60,.06), 0 6px 20px rgba(15,30,60,.06);
	--track:       linear-gradient(90deg, var(--accent), var(--accent-2) 55%, var(--accent-3));

	--font-sans:   "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
	               "Yu Gothic UI", "Meiryo", system-ui, -apple-system, "Segoe UI", Sans-Serif;
	--font-mono:   "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;
}


/* =========================================================
   Base
   ========================================================= */
pre, dl, ol, p, blockquote { line-height:1.75; }

blockquote {
	margin-left:1.5em;
	padding:.2em 1em;
	border-left:3px solid var(--accent);
	color:var(--text-muted);
	background-color:var(--surface-2);
	border-radius:0 var(--radius) var(--radius) 0;
}

body {
	max-width:1100px;
	color:var(--text);
	background-color:var(--bg);
	margin:0 auto;
	padding:0 16px 24px 16px;
	font-size:15px;
	font-family:var(--font-sans);
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}
/* 旧CSSでは td にも width:800px が掛かっていたため分離 */
td {
	color:var(--text);
	background-color:transparent;
	font-size:inherit;
	font-family:inherit;
}


::selection { background:var(--accent); color:#fff; }

a:link {
	text-decoration: underline;
}

a:active {
	color:var(--link-hover);
	background-color:transparent;
	text-decoration:none;
}

a:visited {
	text-decoration: underline;
}

a:hover {
	color:var(--link-hover);
	background-color:transparent;
	text-decoration:underline;
	text-underline-offset:3px;
}

/* =========================================================
   Headings
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
	font-family:var(--font-sans);
	line-height:1.35;
	letter-spacing:.02em;
}

h1 {
	color:var(--text);
	font-size:1.7em;
	border:0;
	border-bottom:2px solid transparent;
	border-image:var(--track) 1;
	padding:2px 0 8px 0;
	margin:0 0 .8em 0;
}
h2 {
	color:var(--text);
	font-size:1.35em;
	border:0;
	border-left:6px solid var(--accent);
	border-image:linear-gradient(180deg, var(--accent), var(--accent-2)) 1;
	background:linear-gradient(90deg, var(--surface-2), transparent 80%);
	padding:6px 12px;
	margin:1.4em 0 .7em 0;
}
h3 {
	color:var(--text);
	font-size:1.15em;
	border:0;
	border-bottom:1px solid var(--border);
	padding:2px 2px 4px 2px;
	margin:1.2em 0 .6em 0;
}
h3:first-letter { color:var(--accent-3); }
h4 {
	color:var(--text);
	font-size:1.05em;
	border:0;
	border-left:4px solid var(--accent-3);
	background-color:transparent;
	padding:1px 10px;
	margin:1em 0 .5em 0;
}
h5, h6 {
	color:var(--text-muted);
	font-size:.95em;
	background-color:var(--surface-2);
	border:0;
	border-radius:4px;
	padding:2px 10px;
	margin:.8em 0 .5em 0;
}

h1.title {
	font-size:1.9em;
	font-weight:700;
	letter-spacing:.04em;
	background:none;
	padding:16px 0 10px 0;
	border:0;
	margin:8px 0 12px 0;
}
h1.title a:link, h1.title a:visited {
	color:transparent;
	background:var(--track);
	-webkit-background-clip:text;
	background-clip:text;
}

dt {
	font-weight:700;
	margin-top:1em;
	margin-left:0;
	color:var(--accent);
}
dd { margin-left:1.5em; }

/* =========================================================
   Code / blocks
   ========================================================= */
pre {
	border:1px solid var(--border);
	border-left:4px solid var(--accent);
	border-radius:var(--radius);
	padding:.8em 1em;
	margin-left:0;
	margin-right:0;
	white-space:pre;
	overflow-x:auto;
	font-family:var(--font-mono);
	font-size:.9em;
	color:var(--code-text);
	background-color:var(--code-bg);
}

img {
	border:none;
	vertical-align:middle;
	max-width:100%;
	height:auto;
}

ul, ol {
	margin-top:.5em;
	margin-bottom:.5em;
	line-height:1.7;
}
li::marker { color:var(--accent); }

em { font-style:italic; }
strong { font-weight:700; }

hr {
	border:0;
	height:1px;
	background:var(--border);
}

/* =========================================================
   Tables
   ========================================================= */
thead td.style_td,
tfoot td.style_td {
	color:inherit;
	background-color:var(--surface-2);
}
thead th.style_th,
tfoot th.style_th {
	color:#fff;
	background-color:var(--accent);
}
.style_table {
	padding:0;
	border:1px solid var(--border);
	border-radius:var(--radius);
	margin:.5em 0 .5em 3px;
	border-collapse:separate;
	border-spacing:1px;
	text-align:left;
	color:inherit;
	background-color:var(--border);
	box-shadow:var(--shadow);
}
.style_th {
	padding:6px 10px;
	margin:1px;
	text-align:center;
	color:var(--text);
	background-color:var(--surface-2);
}
.style_td {
	padding:6px 10px;
	margin:1px;
	color:var(--text);
	background-color:var(--surface);
}

ul.list1 { list-style-type:disc; }
ul.list2 { list-style-type:circle; }
ul.list3 { list-style-type:square; }
ol.list1 { list-style-type:decimal; }
ol.list2 { list-style-type:lower-roman; }
ol.list3 { list-style-type:lower-alpha; }

div.ie5 { text-align:center; }

span.noexists {
	color:inherit;
	background-color:rgba(255,138,31,.18);
	border-radius:3px;
}

.small { font-size:80%; }

.super_index {
	color:var(--accent-3);
	background-color:inherit;
	font-weight:bold;
	font-size:60%;
	vertical-align:super;
}

a.note_super {
	color:var(--accent-3);
	background-color:inherit;
	font-weight:bold;
	font-size:60%;
	vertical-align:super;
}

div.jumpmenu {
	font-size:60%;
	text-align:right;
}

hr.full_hr {
	border:0;
	height:2px;
	background:var(--track);
	opacity:.6;
}
hr.note_hr {
	width:90%;
	border:0;
	height:1px;
	background:var(--border);
	margin:1em auto 0 auto;
}

span.size1 { font-size:xx-small; line-height:130%; text-indent:0; display:inline; }
span.size2 { font-size:x-small;  line-height:130%; text-indent:0; display:inline; }
span.size3 { font-size:small;    line-height:130%; text-indent:0; display:inline; }
span.size4 { font-size:medium;   line-height:130%; text-indent:0; display:inline; }
span.size5 { font-size:large;    line-height:130%; text-indent:0; display:inline; }
span.size6 { font-size:x-large;  line-height:130%; text-indent:0; display:inline; }
span.size7 { font-size:xx-large; line-height:130%; text-indent:0; display:inline; }

/* html.php/catbody() : 検索語ハイライト */
strong.word0 { background-color:#FFE96B; color:#000; border-radius:3px; }
strong.word1 { background-color:#8FF0FF; color:#000; border-radius:3px; }
strong.word2 { background-color:#9BF59B; color:#000; border-radius:3px; }
strong.word3 { background-color:#FF9F9F; color:#000; border-radius:3px; }
strong.word4 { background-color:#FF8CFF; color:#000; border-radius:3px; }
strong.word5 { background-color:#880000; color:#fff; border-radius:3px; }
strong.word6 { background-color:#00AA00; color:#fff; border-radius:3px; }
strong.word7 { background-color:#886800; color:#fff; border-radius:3px; }
strong.word8 { background-color:#004699; color:#fff; border-radius:3px; }
strong.word9 { background-color:#990099; color:#fff; border-radius:3px; }

/* html.php/edit_form() */
.edit_form { clear:both; }
textarea, input[type="text"], input[type="password"], select {
	font-family:var(--font-sans);
	color:var(--text);
	background-color:var(--surface);
	border:1px solid var(--border);
	border-radius:6px;
	padding:4px 6px;
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus {
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 3px rgba(10,127,214,.25);
}
input[type="submit"], input[type="button"], button {
	color:#fff;
	background:linear-gradient(135deg, var(--accent), var(--accent-2));
	border:0;
	border-radius:6px;
	padding:4px 14px;
	cursor:pointer;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover { filter:brightness(1.12); }

/* =========================================================
   pukiwiki.skin.php : layout
   ========================================================= */
div#header {
	padding:0;
	margin:0;
}

div#navigator {
	display:none;
}

td.menubar {
	display:none;
}

div#menubar {
	display:none;
}

div#menubar ul {
	margin:0 0 0 .3em;
	padding:0 0 0 .5em;
	list-style:none;
}

div#menubar ul li { line-height:1.5; }
div#menubar ul li a { display:block; padding:1px 6px; border-radius:4px; }
div#menubar ul li a:hover { background-color:var(--surface-2); text-decoration:none; }

div#menubar h4 {
	font-size:100%;
	border:0;
	border-bottom:1px solid var(--border);
	padding:2px 0;
	margin:.8em 0 .4em 0;
	color:var(--accent);
	text-transform:uppercase;
	letter-spacing:.06em;
}

div#body {
	padding:0 6px;
	margin:0 0 0 .8em;
	min-width:0;
}

div#note {
	clear:both;
	padding:0;
	margin:0;
}

div#attach {
	display:none;
}

div#toolbar {
	display:none;
}
div#toolbar img { opacity:.75; transition:opacity .15s, transform .15s; }
div#toolbar a:hover img { opacity:1; transform:translateY(-1px); }

div#lastmodified {
	font-size:80%;
	color:var(--text-muted);
	font-family:var(--font-mono);
	padding:0;
	margin:0;
}

div#related {
	display:none;
}

div#footer {
	font-size:70%;
	color:var(--text-muted);
	padding:12px 0 0 0;
	margin:16px 0 0 0;
	border-top:1px solid var(--border);
}

div#banner {
	float:right;
	margin-top:24px;
}

div#preview {
	color:inherit;
	background-color:var(--surface-2);
	border-radius:var(--radius);
	padding:.5em 1em;
}

img#logo {
	display:none;
}

/* aname.inc.php */
.anchor {}
.anchor_super {
	font-size:xx-small;
	vertical-align:super;
}

/* br.inc.php */
br.spacer {}

/* calendar*.inc.php */
.style_calendar {
	padding:0;
	border:0;
	margin:3px;
	color:inherit;
	background-color:var(--border);
	border-radius:var(--radius);
	text-align:center;
}
.style_td_caltop  { padding:5px; margin:1px; color:var(--text); background-color:var(--surface-2); font-size:80%; text-align:center; }
.style_td_today   { padding:5px; margin:1px; color:var(--text); background-color:rgba(255,138,31,.25); text-align:center; }
.style_td_sat     { padding:5px; margin:1px; color:var(--text); background-color:rgba(10,127,214,.16); text-align:center; }
.style_td_sun     { padding:5px; margin:1px; color:var(--text); background-color:rgba(255,80,80,.16); text-align:center; }
.style_td_blank   { padding:5px; margin:1px; color:var(--text); background-color:var(--surface-2); text-align:center; }
.style_td_day     { padding:5px; margin:1px; color:var(--text); background-color:var(--surface); text-align:center; }
.style_td_week    { padding:5px; margin:1px; color:var(--text); background-color:var(--surface-2); font-size:80%; font-weight:bold; text-align:center; }

/* calendar_viewer.inc.php */
div.calendar_viewer {
	color:inherit;
	background-color:inherit;
	margin-top:20px;
	margin-bottom:10px;
	padding-bottom:10px;
}
span.calendar_viewer_left  { color:inherit; background-color:inherit; float:left; }
span.calendar_viewer_right { color:inherit; background-color:inherit; float:right; }

/* clear.inc.php */
.clear {
	margin:0;
	clear:both;
}

/* counter.inc.php */
div.counter { font-size:70%; font-family:var(--font-mono); }

/* diff.inc.php */
span.diff_added   { color:#0a7fd6; background-color:inherit; }
span.diff_removed { color:#e5484d; background-color:inherit; }

/* hr.inc.php */
hr.short_line {
	text-align:center;
	width:80%;
	border:0;
	height:1px;
	background:var(--border);
}

/* include.inc.php */
h5.side_label { text-align:center; }

/* navi.inc.php */
ul.navi {
	margin:0;
	padding:0;
	text-align:center;
}
li.navi_none  { display:inline; float:none; }
li.navi_left  { display:inline; float:left;  text-align:left; }
li.navi_right { display:inline; float:right; text-align:right; }

/* new.inc.php */
span.comment_date { font-size:x-small; }
span.new1 { color:var(--accent-3); background-color:transparent; font-size:x-small; font-weight:bold; }
span.new5 { color:#2fb36b;         background-color:transparent; font-size:xx-small; }

/* popular.inc.php */
span.counter { font-size:70%; }
ul.popular_list {}

/* recent.inc.php,showrss.inc.php */
ul.recent_list {}

/* ref.inc.php */
div.img_margin {
	margin-left:10px;
	margin-right:10px;
}

/* vote.inc.php */
td.vote_label { color:inherit; background-color:rgba(255,138,31,.22); }
td.vote_td1   { color:inherit; background-color:var(--surface-2); }
td.vote_td2   { color:inherit; background-color:var(--surface); }

/* print */
body { background:none; max-width:none; color:#000; }
body:before { display:none; }
pre { color:#000; background:#f3f3f3; border-color:#999; }