@charset "utf-8";



/*Google Fontsの読み込み（見出し・タイトルはOrbitron/Share Tech Monoでサイバーパンクに、本文はNoto Sans JPで可読性確保）
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Share+Tech+Mono&family=Noto+Sans+JP:wght@400;500;700&display=swap');


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*サイバーパンク演出用キーフレーム
---------------------------------------------------------------------------*/
/*ネオンの明滅（ヘッダーライン等）*/
@keyframes neonflicker {
	0%, 19%, 21%, 23%, 54%, 56%, 100% {opacity: 1;}
	20%, 22%, 55% {opacity: 0.4;}
}

/*見出しの下線グラデーションが流れる*/
@keyframes gradientflow {
	0% {background-position: 0% 50%;}
	100% {background-position: 200% 50%;}
}

/*グリッチ（本体テキストのRGBズレ）*/
@keyframes glitch-1 {
	0%, 100% {clip-path: inset(0 0 95% 0); transform: translate(0,0);}
	10% {clip-path: inset(10% 0 60% 0); transform: translate(-2px,-1px);}
	20% {clip-path: inset(40% 0 40% 0); transform: translate(2px,1px);}
	30% {clip-path: inset(70% 0 5% 0); transform: translate(-1px,2px);}
	40% {clip-path: inset(20% 0 70% 0); transform: translate(2px,-2px);}
	50%,90% {clip-path: inset(0 0 95% 0); transform: translate(0,0);}
}
@keyframes glitch-2 {
	0%, 100% {clip-path: inset(80% 0 0 0); transform: translate(0,0);}
	15% {clip-path: inset(30% 0 40% 0); transform: translate(2px,1px);}
	25% {clip-path: inset(60% 0 10% 0); transform: translate(-2px,-1px);}
	35% {clip-path: inset(5% 0 80% 0); transform: translate(1px,-2px);}
	45% {clip-path: inset(90% 0 0 0); transform: translate(-1px,2px);}
	55%,90% {clip-path: inset(80% 0 0 0); transform: translate(0,0);}
}

/*スキャンラインが縦に流れる*/
@keyframes scanmove {
	0% {background-position: 0 0;}
	100% {background-position: 0 40px;}
}

/*背景グリッドがゆっくり動く*/
@keyframes gridmove {
	0% {background-position: 0 0;}
	100% {background-position: 60px 60px;}
}

/*ネオンドットの脈動*/
@keyframes pulseglow {
	0%, 100% {box-shadow: 0 0 4px 1px currentColor;}
	50% {box-shadow: 0 0 12px 4px currentColor;}
}

/*ボタン等の走査線ホバー*/
@keyframes sweep {
	0% {transform: translateX(-120%);}
	100% {transform: translateX(220%);}
}


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	/*配色（漆黒バックに単色グリーンで統一したサイバー配色）*/
	--color-ink: #dfffe6;			/*見出し・強調テキストの色（明るい黄緑がかった白）*/
	--color-text: #b7f5c4;			/*本文の文字色（フォスファーグリーン）*/
	--color-muted: #5f9c74;		/*補助的なテキスト（日付・キャプション等）*/
	--color-bg: #030905;			/*ページ全体の背景色（緑を帯びた漆黒）*/
	--color-surface: #081a0e;		/*カード・ボックス類の背景色*/
	--color-surface-alt: #0d2416;	/*テーブルヘッダ等の淡い背景色*/
	--color-border: rgba(57, 255, 106, 0.28);	/*罫線の色（ネオングリーンの半透明）*/
	--color-accent: #39ff6a;		/*リンク・アクセントカラー（ネオングリーン）*/
	--color-accent-dark: #1fae4c;	/*アクセントの濃色（hover等）*/

	/*追加のネオンカラー（すべてグリーン系のトーン違いで統一）*/
	--neon-cyan: #39ff6a;
	--neon-magenta: #aef23c;
	--neon-purple: #00e676;
	--neon-yellow: #d9ffb3;
	--neon-green: #39ff8f;

	--glow-cyan: 0 0 6px rgba(57,255,106,0.85), 0 0 18px rgba(57,255,106,0.35);
	--glow-magenta: 0 0 6px rgba(174,242,60,0.85), 0 0 18px rgba(174,242,60,0.35);
	--glow-purple: 0 0 6px rgba(0,230,118,0.85), 0 0 18px rgba(0,230,118,0.35);

	--primary-color: var(--color-ink);				/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #050510;	/*上のprimary-inverse-colorの対として使う色*/

	--font-sans: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;	/*本文用のゴシック体*/
	--font-display: "Orbitron", var(--font-sans);	/*見出し・ロゴ用の未来感フォント（英数字のみ適用され、日本語は自動でNoto Sans JPにフォールバック）*/
	--font-mono: "Share Tech Mono", var(--font-sans), monospace;	/*日付・ラベル・メニュー用のモノスペース系フォント*/

	--global-space: 3vw;				/*サイト内の余白の一括管理用。画面幅100%＝100vwです。*/
	--content-max-width: 820px;		/*本文の最大幅。1行の文字数を抑えて読みやすくする為の指定。*/
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

html,body {
	font-size: 15px;	/*基準となるフォントサイズ。可読性を考慮しやや大きめに。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		html, body {
			font-size: 17px;	/*基準となるフォントサイズ。*/
		}

	}/*追加指定ここまで*/


html {
	background: var(--color-bg);
}

body {
	margin: 0;padding:0;
	font-family: var(--font-sans);	/*フォント種類*/
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.02em;
	-webkit-text-size-adjust: none;
	background:
		radial-gradient(ellipse at 20% 0%, rgba(0,230,118,0.10) 0%, transparent 55%),
		radial-gradient(ellipse at 85% 15%, rgba(57,255,106,0.10) 0%, transparent 50%),
		var(--color-bg);		/*背景色*/
	color: var(--color-text);	/*文字色*/
	line-height: 1.9;		/*行間。日本語の可読性を考慮した数値。*/
	animation: opa1 0.2s 0.5s both;
	position: relative;
	min-height: 100vh;
}

/*背景の格子模様（電脳空間の床面イメージ）※本文の裏に固定表示*/
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -3;
	background-image:
		linear-gradient(rgba(57,255,106,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(57,255,106,0.06) 1px, transparent 1px);
	background-size: 60px 60px;
	animation: gridmove 6s linear infinite;
	pointer-events: none;
}

/*走査線（スキャンライン）オーバーレイ ※本文より前面・操作不可*/
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 90;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(0,0,0,0.18) 0px,
		rgba(0,0,0,0.18) 1px,
		transparent 2px,
		transparent 4px
	);
	background-size: 100% 4px;
	animation: scanmove 0.35s linear infinite;
	opacity: 0.35;
	mix-blend-mode: overlay;
	pointer-events: none;
}

	@media (prefers-reduced-motion: reduce) {
		body::before, body::after {animation: none;}
	}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
input {font-size: 1rem;}

/*ul,ol*/
ul,ol {margin-left: 1.5rem;margin-bottom: 1rem;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*sectionが続く場合*/
section + section {
	margin-top: 8vw;	/*sectionの上に空けるスペース*/
}

/*見出し共通設定*/
h1,h2,h3,h4,h5,h6 {
	font-family: var(--font-display);
	color: var(--color-ink);
	font-weight: 700;
}


/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: var(--neon-cyan);
	text-decoration: underline;
	text-decoration-color: rgba(57,255,106,0.35);
	text-underline-offset: 0.15em;
	transition: 0.3s;
}

a:hover {
	color: var(--neon-magenta);
	text-shadow: var(--glow-magenta);
	text-decoration-color: currentColor;
}


/*container（サイト全体を囲むボックス）
---------------------------------------------------------------------------*/
#container {
	max-width: 1200px;		/*横幅が非常に広い画面でも1行が長くなり過ぎないようにする*/
	margin: 0 auto;
	padding-left: var(--global-space);		/*左側の余白*/
	padding-right: var(--global-space);		/*右側の余白*/
	position: relative;
	z-index: 1;
}


/*背景キャンバス（マトリックスレイン演出）
---------------------------------------------------------------------------*/
#matrix-bg {
	position: fixed;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}

/*マウス追従のスポットライト演出*/
#cursor-glow {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(57,255,106,0.12), transparent 60%);
	transition: background 0.05s linear;
}


/*header（サイトロゴが入った最上部のボックス）
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	position: relative;
	padding-top: var(--global-space);		/*上側の余白*/
	padding-bottom: var(--global-space);	/*下側の余白*/
	padding-left: clamp(1.25rem, 4vw, 2.5rem);		/*左側の余白（パネル端からコンテンツを離す）*/
	padding-right: clamp(1.25rem, 4vw, 2.5rem);	/*右側の余白（パネル端からコンテンツを離す）*/
	text-align: center;		/*中のテキストをセンタリング*/
	background: linear-gradient(180deg, rgba(4,28,13,0.55) 0%, rgba(3,9,5,0.3) 100%);	/*半透明グリーンのモニターパネル風*/
	border: 1px solid var(--color-border);
	border-top: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 30px -16px rgba(57,255,106,0.3), inset 0 0 40px rgba(57,255,106,0.05);
}

/*header下端のフェードするネオンアクセントライン*/
header::after {
	content: "";
	position: absolute;
	left: 0;right: 0;bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, var(--neon-cyan) 25%, var(--neon-magenta) 50%, var(--neon-cyan) 75%, transparent 100%);
	background-size: 200% 100%;
	animation: gradientflow 4s linear infinite, neonflicker 6s infinite;
}

/*TELブロック（header内のaddress）*/
header address {
	font-style: normal;
	color: var(--color-muted);
	font-family: var(--font-mono);
}

/*header内に写真等の画像が入る場合*/
header img {
	margin-top: 1rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	box-shadow: var(--glow-cyan);
}

	/*画面幅901px以上の追加指定*/
	@media screen and (min-width:901px) {

	/*headerブロック*/
	header {
		display: flex;	/*直接の子要素を横並びにする*/
		justify-content: space-between;
		align-items: center;
	}

	}/*追加指定ここまで*/


/*ヘッダー内のロゴ（グリッチ演出）
---------------------------------------------------------------------------*/
#logo a {text-decoration: none;display: block;color: inherit;}

/*ロゴ*/
#logo {
	margin: 0;padding: 0;
	font-size: 1.5rem;	/*文字サイズ*/
	letter-spacing: 0.04em;
	line-height: 1.5;
	position: relative;
}

/*ロゴを画像にする場合*/
#logo img {
	display: block;
	width: 200px;	/*ロゴ画像の幅*/
}

/*グリッチテキスト共通設定（JSでdata-text属性を自動付与）*/
.glitch {
	position: relative;
	color: var(--color-ink);
	text-shadow: var(--glow-cyan);
}
.glitch::before,
.glitch::after {
	content: attr(data-text);
	position: absolute;
	left: 0;top: 0;
	width: 100%;
	overflow: hidden;
	background: transparent;
}
.glitch::before {
	color: var(--neon-magenta);
	animation: glitch-1 4.5s infinite linear;
	z-index: -1;
}
.glitch::after {
	color: var(--neon-cyan);
	animation: glitch-2 4.5s infinite linear;
	z-index: -1;
}
	@media (prefers-reduced-motion: reduce) {
		.glitch::before, .glitch::after {animation: none; content: none;}
	}


/*トップページのメイン画像
---------------------------------------------------------------------------*/
#mainimg {
	margin-bottom: var(--global-space);	/*下に空けるスペース*/
	width: 400px;
	height: auto;
	text-align: left;
}


/*contents（左右のブロックを囲むボックス）
---------------------------------------------------------------------------*/
#contents {
	display: flex;	/*直接の子要素を横並びにする*/
	gap: var(--global-space);		/*左右のボックスの間に空けるスペース*/
	padding-top: var(--global-space);
}


/*メインコンテンツ
---------------------------------------------------------------------------*/
main {
	flex: 1;
	min-width: 0;
	max-width: var(--content-max-width);	/*1行の文字数を抑えて可読性を上げる*/
	line-height: 1.9;
	background: rgba(6, 40, 18, 0.28);	/*半透明グリーンのモニター画面風パネル*/
	border: 1px solid var(--color-border);
	border-radius: 3px;
	padding: 1.75rem clamp(1rem, 4vw, 2.5rem);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: var(--glow-cyan), inset 0 0 60px rgba(57,255,106,0.06);
}

main p {
	margin: 0 0 1.25em;
}

/*h2見出し（ターミナル風のプレフィックス付き）*/
main h2 {
	position: relative;
	margin-top: 2.5rem;line-height: 1.4;
	padding-bottom: 0.85rem;
	margin-bottom: 1.25rem;
	padding-left: 1.6rem;
	font-size: 1.3rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-border);	/*下線（ベースの細い線）*/
}

/*見出し先頭の ">" プレフィックス*/
main h2::before {
	content: ">";
	position: absolute;
	left: 0;top: -0.1rem;
	color: var(--neon-magenta);
	text-shadow: var(--glow-magenta);
}

/*見出し先頭に重ねる、太めのネオングラデーション下線*/
main h2::after {
	content: "";
	position: absolute;
	left: 1.6rem;bottom: -1px;
	width: 2.6em;
	height: 3px;
	background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
	box-shadow: var(--glow-cyan);
}

main section:first-of-type h2:first-child {
	margin-top: 0;
}

/*h3見出し（main内）*/
main h3 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	padding-left: 0.85rem;
	font-size: 1.05rem;
	line-height: 1.5;
	border-left: 4px solid var(--neon-purple);	/*左のアクセント罫線*/
	box-shadow: -2px 0 8px -2px rgba(0,230,118,0.6) inset;
}

/*サブコンテンツ
---------------------------------------------------------------------------*/
/*メニューを囲むブロック（HUDパネル風、コーナーブラケット付き）*/
#menubar {
	order: -1;		/*左側に表示させる*/
	width: 230px;	/*幅*/
	flex-shrink: 0;
	height: fit-content;
	background: rgba(6, 40, 18, 0.32);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid var(--color-border);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
	box-shadow: var(--glow-cyan), inset 0 0 30px rgba(57,255,106,0.06);
}

/*コーナーブラケット（左上・右下）*/
#menubar::before,
#menubar::after {
	content: "";
	position: absolute;
	width: 14px;height: 14px;
	pointer-events: none;
	z-index: 2;
}
#menubar::before {
	left: -1px;top: -1px;
	border-left: 2px solid var(--neon-cyan);
	border-top: 2px solid var(--neon-cyan);
}
#menubar::after {
	right: -1px;bottom: -1px;
	border-right: 2px solid var(--neon-magenta);
	border-bottom: 2px solid var(--neon-magenta);
}

/*メニュー１個あたりの設定*/
#menubar li {
	border-bottom: 1px solid var(--color-border);	/*下線*/
}
#menubar li:last-child {
	border-bottom: none;
}
#menubar li a {
	position: relative;
	padding: 0.85rem 1.25rem;	/*上下、左右の余白*/
	color: var(--color-text);
	font-family: var(--font-mono);
	letter-spacing: 0.04em;
	transition: background-color 0.25s, color 0.25s, padding-left 0.25s;
}
#menubar li a::before {
	content: "";
	position: absolute;
	left: 0;top: 0;bottom: 0;
	width: 0;
	background: var(--neon-cyan);
	box-shadow: var(--glow-cyan);
	transition: width 0.25s;
}
#menubar li a:hover {
	background: rgba(57,255,106,0.08);
	color: var(--neon-cyan);
	text-shadow: var(--glow-cyan);
	padding-left: 1.6rem;
}
#menubar li a:hover::before {
	width: 3px;
}

/*h3見出し*/
#menubar h3 {
	margin: 0;
	line-height: 2.4;
	font-size: 0.85rem;
	letter-spacing: 0.25em;
	font-family: var(--font-mono);
	font-weight: 700;
	background: linear-gradient(90deg, rgba(57,255,106,0.15), rgba(0,230,118,0.15));	/*背景色*/
	color: var(--neon-cyan);	/*文字色*/
	text-align: center;	/*テキストをセンタリング*/
	border-bottom: 1px solid var(--color-border);
	text-shadow: var(--glow-cyan);
}


/*メニューブロック初期設定（※変更不要）
---------------------------------------------------------------------------*/
#menubar {opacity: 0;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}
.large-screen #menubar {opacity: 1;}
.small-screen #menubar.display-none {display: none;}
.small-screen #menubar.display-block {display: block;opacity: 1;}
#menubar_hdr.display-none {display: none;}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	border-radius: 0;
	padding-top: 100px;	/*上に空ける余白*/
	color: var(--color-text);	/*文字色*/
	background: rgba(2,10,5,0.97);		/*背景色*/
	animation: animation1 0.2s both;
}

/*メニュー１個あたりの設定*/
.small-screen #menubar li {
	border: 1px solid var(--color-border);	/*枠線*/
	margin: 1rem;			/*メニューの外側に空けるスペース*/
	border-radius: 3px;		/*角を丸くする指定*/
}
.small-screen #menubar a {
	padding: 1rem 3rem;		/*メニュー内の余白*/
}
.small-screen #menubar li a:hover {
	padding-left: 3rem;
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	top: 20px;		/*上からの配置場所*/
	right: 20px;	/*右からの配置場所*/
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	padding: 15px;	/*ブロック内の余白*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s, box-shadow 0.3s;
	background: rgba(4,26,12,0.85);	/*背景色*/
	border: 1px solid var(--neon-cyan);
	border-radius: 2px;
	box-shadow: var(--glow-cyan);
}
#menubar_hdr:hover {
	box-shadow: var(--glow-magenta);
	border-color: var(--neon-magenta);
}

/*ここは変更不要*/
#menubar_hdr div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/*バーの設定*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 2px;			/*線の太さ*/
	background-color: var(--neon-cyan);	/*線の色*/
	box-shadow: 0 0 4px var(--neon-cyan);
	border-radius: 2px;		/*コーナーを少しだけ丸く*/
	transition: all 0.5s ease-in-out;
	position: absolute;
}

/*以下変更不要*/
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#menubar_hdr div span:nth-child(3) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {opacity: 0;}
#menubar_hdr.ham div span:nth-child(3) {top: 50%;transform: translateY(-50%) rotate(-45deg);}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer a {color: inherit;text-decoration: none;}
footer .pr {display: block;}

footer {
	font-size: 0.8rem;		/*文字サイズ*/
	font-family: var(--font-mono);
	color: var(--color-muted);
	text-align: center;		/*内容をセンタリング*/
	margin-top: 5rem;
	padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
	background: rgba(6, 40, 18, 0.22);	/*半透明グリーンのモニターパネル風*/
	border: 1px solid var(--color-border);
	border-radius: 3px;
	position: relative;
}


/*お知らせ（index.htmlの dl.new）※ターミナルのログ風
---------------------------------------------------------------------------*/
.new {
	margin-bottom: 1rem;
	font-family: var(--font-mono);
}
.new dt {
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--neon-green);
	letter-spacing: 0.05em;
}
.new dt::before {
	content: "[LOG] ";
	color: var(--color-muted);
}
.new dd {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	padding-left: 1rem;
	border-left: 2px solid var(--color-border);
	border-bottom: 1px dashed var(--color-border);
	font-family: var(--font-sans);
}
.new dd:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}


/*略歴（index.htmlの ul.career）※ネオンタイムライン
---------------------------------------------------------------------------*/
main ul.career {
	list-style: none;
	margin-left: 0;
}
main ul.career li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.5rem;
	border-bottom: 1px dashed var(--color-border);
}
main ul.career li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.1rem;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--neon-cyan);
	color: var(--neon-cyan);
	animation: pulseglow 2s ease-in-out infinite;
}
main ul.career li:last-child {
	border-bottom: none;
}


/*list-normal（service.htmlで使っている２カラムボックス）
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-normal .list {
	display: flex;		/*直接の子要素を横並びにする*/
	gap: 2vw;			/*左右の間のマージン的なスペース*/
	margin-bottom: var(--global-space);	/*ボックスの下に空けるスペース*/
	line-height: 1.9;		/*行間*/
}

/*テキストブロック*/
.list-normal .text {
	flex: 1;
}

/*画像ブロック*/
.list-normal figure {
	width: 40%;	/*幅*/
}
.list-normal figure img {
	border: 1px solid var(--color-border);
	border-radius: 4px;
	box-shadow: var(--glow-cyan);
}

/*h4見出し*/
.list-normal h4 {
	margin: 0;
	margin-bottom: 0.5rem;	/*下に少しスペースをとる*/
	font-size: 1.2rem;	/*文字サイズ*/
	line-height: 1.5;
	color: var(--neon-cyan);
}

/*説明テキスト*/
.list-normal p {
	margin: 0;
}


/*FAQ
---------------------------------------------------------------------------*/
.openclose {cursor: pointer;}

/*FAQ全体を囲むボックス*/
.faq {
	line-height: 1.9;	/*行間*/
}

/*質問*/
.faq dt {
	position: relative;
	padding-left: 3rem; 	/*下の「回答」と数字部分を合わせる*/
	border: 1px solid var(--color-border);	/*枠線*/
	padding-right: 1rem;	/*ボックス内の右側の余白*/
	padding-top: 0.75rem;padding-bottom: 0.75rem;
	margin-bottom: 1rem;	/*ボックスの外（下）に空けるスペース*/
	border-radius: 3px;		/*角を少しだけ丸くする*/
	background: var(--color-surface-alt);
	font-weight: 700;
}

/*「Q」のテキスト*/
.faq dt::before {
	content: "Q.";			/*このテキストを表示させます*/
	position: absolute;
	left: 0;
	top: 0.75rem;
	padding-left: 1rem;		/*テキストの左側に空ける余白*/
	color: var(--neon-magenta);
	text-shadow: var(--glow-magenta);
	font-family: var(--font-display);
}

/*回答*/
.faq dd {
	margin-left: 3rem;		/*上の「質問」と数字部分を合わせる*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}


/*テーブル（ta1）／HUDパネル風の罫線スタイル
---------------------------------------------------------------------------*/
/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;				/*幅*/
	margin-bottom: 2rem;
	border-top: 2px solid var(--neon-cyan);
	border-bottom: 2px solid var(--neon-cyan);
	box-shadow: var(--glow-cyan);
}

.ta1 td, .ta1 th {
	border: none;
	border-bottom: 1px solid var(--color-border);	/*行の区切り線のみ*/
	padding: 1rem 1.25rem;			/*ボックス内の余白*/
	vertical-align: top;
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定*/
}

.ta1 tr:last-child td, .ta1 tr:last-child th {
	border-bottom: none;
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 25%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: var(--color-surface-alt);
	color: var(--neon-cyan);
	font-family: var(--font-mono);
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: var(--neon-cyan);		/*文字色*/
	background: rgba(4,26,12,0.85);	/*背景色*/
	width: 50px;		/*幅*/
	line-height: 48px;	/*高さ*/
	border: 1px solid var(--neon-cyan);
	border-radius: 2px;
	box-shadow: var(--glow-cyan);
	transition: transform 0.3s, box-shadow 0.3s, color 0.3s, border-color 0.3s;
}
.pagetop a:hover {
	transform: translateY(-4px);
	color: var(--neon-magenta);
	border-color: var(--neon-magenta);
	box-shadow: var(--glow-magenta);
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: var(--neon-magenta) !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb5vw {margin-bottom: 5vw !important;}
.look {display: inline-block;padding: 0px 10px;background: var(--color-surface);color: var(--color-text);border: 1px solid var(--color-border); border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/