@charset "utf-8";


/* --- トピックパス（下層ページ） --- */
header ol.topicPath {
	margin: 0 50px;
	padding: 7px 2px; /* トピックパスのパディング（上下、左右） */
	/*border-bottom: 1px #c0c0c0 solid; /* トピックパスの下境界線 */
	list-style-type: none;
}
/* リスト項目 */
header ol.topicPath li {
	display: inline;
}
/* リンクエリア */
header ol.topicPath li a {
	padding-right: 12px; /* リンクエリアの右パディング */
	background: url(/image/topic_path_gray.gif) no-repeat right; /* リンクエリアの背景（区切り記号） */
}


/*mainブロック内のh4タグ*/
main h4 {
	padding: 0 20px;
	margin-bottom: 0.5em;	/*下に空けるスペース*/
}

/**/
main p img{
	margin: 5px 0px 1em;	/*上、左右、下へ空けるスペース*/
}

/*mainブロックのdlタグ*/
main dl {
	display: block;
	margin-block-start: 10px;
	margin-block-end: 1em;
	unicode-bidi: isolate;
}
main dt{
	display: block;
	margin-inline-start: 20px;
	unicode-bidi: isolate;
	/*font-weight: bold;*/
}
main dd{
	display: block;
	margin-inline-start: 40px;
	unicode-bidi: isolate;
}

/* テーブル */
main div.tbl{
	margin: 0 20px 2em;
	
}
main div.tbl table{
	border-collapse: collapse;
	border: 0px;
	/*border-collapse: separate; /* border-spacingを有効にするために必要 */
	/*border-spacing: 10px 5px; /* 水平・垂直のセル間隔（余白） */
	table-layout: auto;
}
main div.tbl th{
	background-color: #F0F0F0;
	border-collapse: separate;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-color: #c0c0c0;
	border-style: solid;
	padding: 0px 10px; /* 上下0px、左右10pxの余白 */
	min-width: 100px;
}
main div.tbl td{
	border-collapse: separate;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-color: #c0c0c0;
	border-style: solid;
	padding: 0px 10px; /* 上下0px、左右10pxの余白 */
	vertical-align: top;
}

/* 格子状のテーブル */
main div.gtbl{
	margin: 0 20px 2em;
	
}
main div.gtbl table{
	border-collapse: collapse;
	border: 0px;
	/*border-collapse: separate; /* border-spacingを有効にするために必要 */
	/*border-spacing: 10px 5px; /* 水平・垂直のセル間隔（余白） */
	table-layout: auto;
}
main div.gtbl th{
	background-color: #F0F0F0;
	border-collapse: separate;
	border: 1px solid;
	border-color: #c0c0c0;
	padding: 0px 5px; /* 上下0px、左右10pxの余白 */
}
main div.gtbl td{
	border-collapse: separate;
	border: 1px solid;
	border-color: #c0c0c0;
	padding: 0px 5px; /* 上下0px、左右10pxの余白 */
}


main div.singleLine{
	margin: 0 20px 2em;
}
main div.singleLine table {
	border-collapse: collapse;
	border: 1px #c0c0c0 solid;
}
main div.singleLine td {
	border: 1px #c0c0c0 solid;
}
main div.singleLine th {
	border: 1px #c0c0c0 solid;
}

main div.HorizontalLine table {
	border-collapse: collapse;
	border: 0px #c0c0c0 solid;
}
main div.HorizontalLine td {
	border-width: 1px 0px;
	border-color: #c0c0c0;
	border-style: solid;
}
main div.HorizontalLine th {
	border-width: 1px 0px;
	border-color: #c0c0c0;
	border-style: solid;
}
	
main div.overview td{
	text-align: center;
	padding: 0px 10px; /* 上下0px、左右10pxの余白 */
}

/* シンボルの設定 */
main div.symbol{
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	/*justify-content: space-between;		/*並びかたの種類の指定*/
	margin-left: 10px;	/*左側へのマージン*/
}

main div.symbol p{
	margin: 20px 20px 1em 20px;
}

main div.symbol-graph{
	margin-left: 5px;	/*左側へのマージン*/
	/*margin-right: 2%;	/*右側へのマージン*/
	min-width: 200px;
	margin-bottom: 10px;
}

main div.symbol-img{
	/*margin-left: 20px;	/*左側へのマージン*/
	margin: 20px 20px 1em 20px;
	min-width: 200px;
}

main div.symbol-spec{
	margin: 0 10px 1em 0;
}

main div.symbol-io table{
	margin-left: 10px;
	border-collapse: collapse;
	border: 0px
}
main div.symbol td{
	border-collapse: separate;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-color: #c0c0c0;
	border-style: solid;
}

main div.InOut{
	margin-left: 20px;	
}

main div.InOut table{
	margin: 0 0 2em; ;
}
main div.InOut table{
	border-collapse: collapse;
	border: 0px
}
main div.InOut td{
	border-collapse: separate;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-color: #c0c0c0;
	border-style: solid;
}


/* img付き */
main div.imgleft {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	/*justify-content: space-between;		/*並びかたの種類の指定*/
	margin-left: 10px;	/*左側へのマージン*/

}


main div.calc dt{
	margin-left: 20px;
}

main div.calc dd{
	margin-left: 80px;
}

.sub h2 {
	font-weight: bold;
	font-size: 1.4em;
	margin: 15px 0;
	border: none;
	text-align: center;		/*テキストをセンタリング*/

	color: #6621a5;			/*文字色*/
}
.sub h2 a {
	text-decoration: none;display: block;
	color: #6621a5;
}
.sub h3 {
	text-align: left;		/*テキストをセンタリング*/
}

/*sub内のh3タグ*/
.sub h4 {
	font-weight: bold;
	font-size: 1em;
	margin: 0;
	padding: 0;
	border: 1px;
	color: #fff;			/*文字色*/
	text-align: left;		/*テキストをセンタリング*/
}

.sub h4 a {
	text-decoration: none;display: block;
	color: #6621a5;
}


/* sidemenu 字下げの設定 */
ul.submenu li.mgl-10 {
margin-left: 10px; /* 左マージン */
background: none; /* 項目の背景（マーカー） */
}
ul.submenu li.mgl-20 {
margin-left: 20px; /* 左マージン */
background: none; /* 項目の背景（マーカー） */
}
ul.submenu li.mgl-30 {
	margin-left: 30px; /* 左マージン */
	background: none; /* 項目の背景（マーカー） */
	}
	

/* 記事へのコメント */
main div.voiceForm{
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px 0;
	border-radius: 5px;

}

main div.voice {
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px 0;
	border-radius: 5px;
}
main textarea.comment-box {
	width: 95%;
	height: 100px;
	font-size: 1rem;
	padding: 10px;
	resize: vertical;
}

main textarea.nimonic{
	width: 400px;
	max-width: 100%;
}

main textarea.source{
	width: 800px;
	/*height: 200px;*/
	max-width: 100%;
}
@media screen and (max-width: 800px){
	textarea{
		width: 100%
	}
}

/* ダウンロード */
main div.download-area{
	border:1px solid #ddd;
	padding:20px;
	margin:30px 0;
	background:#fafafa;
	margin-top: -1em;
}

main div.download{
	display: flex;
	align-items: center;
	margin: 0 20px 1em;	/*上、左右、下へ空けるスペース*/
}

main div.download-icon{
	width: 60px;
}

main div.plot{
	width: 100%;
	height: 300px;
}

main div.icon{
	display: flex;
	text-align: center;
}

/* 構造体説明セクション */
.struct-section {
	font-family: sans-serif;
	max-width: 600px;
	margin: 10px;
}

.struct-title {
font-weight: bold;
margin-bottom: 4px;
}

.struct-name {
margin-bottom: 8px;
color: #555;
}

.struct-table .row {
display: flex;
border-top: 1px solid #ccc;
padding: 6px 0;
padding-left: 2em; /* ← ここで中身を右にずらす */
align-items: center;
}

.struct-table .row:last-child {
border-bottom: 1px solid #ccc;
}

.struct-field {
width: 100px;
color: #333;
flex-shrink: 0;
}

.struct-type {
width: 60px;
color: #666;
flex-shrink: 0;
}

.struct-desc {
flex: 1;
color: #777;
}

/* I/O説明セクション */
.io-section {
	font-family: sans-serif;
	max-width: 400px;
	margin: 10px;
}

.io-title {
font-weight: bold;
margin-bottom: 8px;
}

.io-row {
display: flex;
border-top: 1px solid #ccc;
padding: 2px 5px;
}

.io-row:last-child {
border-bottom: 2px solid #ccc;
}

.io-label {
width: 100px; /* ラベルの幅は固定 */
color: #444;
flex-shrink: 0;
}

.io-description {
color: #777;
padding-left: 20px; /* ラベルとの間隔 */
}

.likes{
	display: flex;
	justify-content: space-between;
}
.likes button{
	margin: 0;
}

.struct {
	display: flex;
	border-top: 1px solid #ccc;
	padding: 2px 10px;
}

.member {
	display: flex;
	border-top: 1px solid #ccc;
	padding: 2px 25px;
}

.line-item {
	display: inline-block;
	border-bottom: 1px solid #CCCC; /* 各要素の下に線を引く */
	padding: 1px; /* 適度な余白 */
	line-height: 1.5; /* 文字自体の行間 */
	margin-bottom: 0; /* マージンを調整 */
	list-style: none;
}

.no-mark-list {
    list-style: none;    /* マークを消す */
    padding-left: 20px;     /* 左の余白を消す */
    margin: 0;           /* 必要に応じて外側の余白も調整 */
}

.no-mark-list li {
    /*border-bottom: 1px solid #ccc;*/
    padding: 0;     /* 行の間隔を調整 */
    /*width: 200px;        /* 線の長さを調整（必要であれば） */
}


/* マーカー */
span.highlightYellow {
	background: linear-gradient(transparent 60%, #ffff66 60%);
  }
  
span.highlightPink {
	background: linear-gradient(transparent 60%, #ff99ff 60%);
  }
  /* note */
span.highlightOrange {
	background: linear-gradient(transparent 60%, #ffa500 60%);
  }
  /* guide */
span.highlightAqua {
	background: linear-gradient(transparent 60%, #00ffff 60%);
  }
  /* guide2 */
span.highlightGreen {
	background: linear-gradient(transparent 60%, #00ff01 60%);
  }
  /* select */
span.selectBlue {
	background-color: #83C4FA;
  }
  
/* コードブロック */
main div.codetext {
	padding: 0px 10px;
	border: 0px;
	background-color: #f1efee;
	font-family: Monaco, 'Courier New';
	font-size: 12px;
  }
main div.codetext pre{
	overflow: auto;
	overflow-y: hidden;
  }
  
 main span.codetext {
	padding: 0px 10px;
	background-color: #f1efee;
	font-weight: bold;
  }
  
main div.codeblock{
	border: 1px solid #b1b1b1;
	margin-left: 20px;
  }
  
main div.codeblock pre{
	overflow: auto;
	overflow-y: hidden;
  }
main div.codeblock code{
	font-family: Monaco, 'Courier New';
	font-size: 12px;
	line-height: 1.4;
	overflow: auto;
	resize: horizontal;
  }
main div.codeblock li.L0, li.L1, li.L2, li.L3, li.L4,
  li.L5, li.L6, li.L7, li.L8, li.L9 {
	list-style-type: decimal !important;
	color: #555;
	list-style-position: outside;
	margin-left: 8px;
	padding-left: 1px;
  }
  
  
/* 縦分割 */
main div.vline ul{
	list-style:none;
	width:100%;
	display:flex;
	justify-content:start;
	padding:0px
  }
main div.vline ul li{
	width:50%;
	padding:0 10px
  }
main div.vline ul li:first-child{
	border-right:1px solid #ccc
  }
main div.vline ul li h2{
	font-size:16px
  }
main div.vline ul li p{
	font-size:12px
  }
main div.vline li textarea {
	width:100%;
  }
main div.vline li button {
	display: block;
	margin: 0 0 0 auto;
  }
main div.vline table {
	font-size:12px
  }

/* 両サイド */
.bothside {
	display: flex;
	justify-content: space-between;
}
.bothside h3{
	flex: 1;
	margin: 0 0 10 0;
	padding: 0 20px;
}

.right{
	text-align: right;
}

/* 説明レイアウト */
/* 定義 */
.spec-define{
	background:#666;
	color:#fff;
	padding:1px 1px;
	font-weight: bold;
	margin-top: 20px;
	margin-left: 20px;
	padding-left: 10px;
}

/* 例 */
.spec-exsample{
	/* background:#e0e0e0; */
	/* color:#ff0000; */
	padding:1px 1px;
	font-weight: bold;
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 10px;
	padding-left: 10px;
	border-bottom: 1px solid #ccc;
}

/* 仕様タイトル */
.spec-title{
	background:#ddd;
	/* color:#fff; */
	padding:0px 1px;
	font-weight: normal;
	margin-top: 20px;
	margin-left: 20px;
	padding-left: 10px;
	border-bottom: 2px solid #aaa;
}

/* 仕様表 */
.spec{
	display:grid;
	/* border-top:1px solid #ccc; */
	font-size:14px;
}

.spec dt{
	background:#f5f5f5;
	padding:0px 10px;
	border-bottom:1px solid #ddd;
	font-weight:normal;
}

.spec dd{
	margin:0;
	padding:0px 10px;
	border-bottom:1px solid #ddd;
}

/* dd1 */
.spec.col1{
	margin-top: 0;
	display:grid;
	grid-template-columns:minmax(100px,auto) 1fr;
}

/* dd2 */
.spec.col2{
	margin-top: 0;
	display:grid;
	grid-template-columns:minmax(120px,auto) minmax(80px,auto) 1fr;
}

/* dd3 */
.spec.col3{
	margin-top: 0;
	display:grid;
	grid-template-columns:auto minmax(1fr,100px) 1fr 1fr;
}

/* スマホ */
@media (max-width:600px){

.spec{
	grid-template-columns:1fr;
}

.spec dt{
	background:#f5f5f5;
	border-bottom:none;
}

}

/* タブ切り替え KV KV-X */
.tabs {
	display: flex;
	border-bottom: 2px solid #ccc;
}

.tab {
	padding: 5px 30px;
	cursor: pointer;
	border: none;
	background: none;
	font-size: 1.2em;
}

.tab.active {
	border-bottom: 2px solid #007bff;
	background-color: #ddd;
	font-weight: bold;
}

.tab-content {
	display: none;
	padding: 15px;
}

.tab-content.active {
	display: block;
}

/* アフィリエイト広告 */
.prtag img {margin-bottom:10px;}


/* 選択中のリンクのデザイン */
.current-page {
    /*font-weight: normal;*/
    color: #6621a5; /* お好みの色に */
	/*background-color: #7647a1;*/
    text-decoration: none;
    pointer-events: none; /* 現在のページなのでクリック無効化（任意） */
	border-bottom: solid 1px #8846c5;
	background: linear-gradient(transparent 80%, #ca90ff 95%);
}

/* リンクが <li> の中にある場合、リスト自体に背景色をつけたい時など */
.submenu li.active {
    background-color: #f0f0f0;
}

.btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.2s;
  margin: 8px 0;
}

/* ダウンロード */
.btn-download {
  background: #28a745;
  color: white;
}
.btn-download:hover {
  background: #218838;
}

/* 寄付 */
.btn-donate {
  background: #ff9800;
  color: white;
}
.btn-donate:hover {
  background: #e68900;
}

/* 有料 */
.btn-paid {
  background: #6772e5;
  color: white;
}
.btn-paid:hover {
  background: #5469d4;
}

/* 小さいボタン */
.small {
  padding: 8px 14px;
  font-size: 14px;
}