body {
  background-color:#f8f8f8;
  margin:0;
  padding:0;
}

#outer {
  background-color:#fff;
  margin:0 auto;
  width:98%;
  border-left:  1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}

h1 {
  font-weight:bold;
  color:#333;   /* #357109; */
  font-size:24px;
  margin:0;
  padding:7px 0 0 7px;
}
h1 a{
  font-weight:bold;
  color:#333;   /* #357109; */
  text-decoration:none;
}
h1 a:hover{
  text-decoration: underline;
}

h2 {
  font-size:24px;
  margin:0;
  padding:7px 0 7px 7px;
  background-color:#D6EEE7;
}
h2 a{
  font-weight:bold;
  text-decoration: none;
  color:#265699;
}

h3 {
  font-size:18px;
  margin:0;
  padding:7px 0 0 7px;
}
h3 a{
  font-weight:bold;
  text-decoration: none;
  color:#265699;
}

h4 {
  font-size:16px;
  margin:0;
  padding:2px 10px 2px 12px;
}
h4 a{
  margin-left: 30px;
  font-weight:bold;
  text-decoration: none;
  color:#265699;
}
h4 a:hover{
  text-decoration: underline;
}

h5 {
  font-size:14px;
  margin:0;
  padding:12px 0 12px 20px;
}
h5 a{
  font-weight:bold;
  text-decoration: none;
  color:#265699;
}
h5 a:hover{
  text-decoration: underline;
}

p {
  margin:1em 0;
  font-size:16px;
  line-height:150%;
  padding:2px 0 2px 25px;
}

img {
  border:0;
}

a{
  color:#094a94;
}

/* Frame */
iframe {
  margin-left: 30px;
  width:  130px;
  height: 130px;
  border: none;
}

/* Code */
code {
  display: inline-block;
  width:50%;
  font-weight:bold;
  font-size:16px;
  margin: 0px 20px 20px;
  padding: 2px 20px 2px;
  line-height: 22px;
  background-color: #eeeeee;
  color:#000044;
  border: 1px solid #c7c7c7;
  border-radius: 10px 10px 10px 10px;
  vertical-align: top;
}

/* Color-Description */
.color-desc {
  margin: 0.5em 1em;
}
span.target {
  color: red;
}

/* Table */
table{
  border-collapse:collapse;
  margin:1em 20px;
}

.table-sub { /* 補助的なテーブル */
  margin: 0.5em 3em;
}

td,th{
  border:1px solid #ccc;
  padding:6px;
  font-size:14px;
}
td .num{
  display: block;
  text-align: center
}
td .str{
  display: block;
  text-align: left
}
td .underline{
  text-decoration: underline;
  font-weight: 700;
}
th{
  background:#EFEFEF;
}
table a{
  text-decoration:none;
}
table a:hover{
  text-decoration:underline;
}

#left {
  color:#676767;
  font-size:13px;
  width:220px;
  float:left;
}
.left-title {
  margin: 0;
  padding:7px 0 7px 20px;
  font-weight:bold;
  background-color:#D6EEE7;
  color:#333;
  border-top: 1px solid #c7c7c7;
  border-right: 1px solid #c7c7c7;
  border-left: 1px solid #c7c7c7;
}
.left-title a{
  text-decoration:none;
}
.left-title a:hover{
  text-decoration:underline;
}

.link {
  margin: 0 0 5px 0;
  padding:7px 0 7px 13px;
  line-height:170%;
  border: 1px solid #c7c7c7;
}
.link a{
  color:#094a94;
  text-decoration:none;
}
.link a:hover{
  text-decoration:underline;
}

/* 縦書き */
.vertical-link {
  writing-mode: vertical-rl;
  transform: rotate(190deg);
}

.vertical-link a{
  writing-mode: vertical-rl;
  transform: rotate(190deg);
  text-decoration: none;
}
.vertical-link a:hover{
  writing-mode: vertical-rl;
  transform: rotate(190deg);
  text-decoration: overline;
}

ul {
  margin: 0 0 0 1em;
  padding: 0;
}

li {
  list-style:disc; 
}

.statement {
  font-family: monospace;
  font-size:18px;
  margin:0.5em 0;
  padding:2px 0 2px 25px;
}


/* ------------------------
 */
span.del {
  text-decoration-line: line-through;
  text-decoration-style:solid;
  text-decoration-color: #gray;
}
span.keyword {
  font-family: monospace;
  font-size: 12pt;
  background-color: #eee;
}


/* ------------------------
 */

.header-inner {
  padding:15px 0 0 20px;
  font-size:12px;
}


summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding-left: 20px; /* アイコン分の余白 */
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none; /* 矢印を消す */
}
/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
summary:before {
  width: 16px;
  height: 16px;
  border-radius: 10px;
  background-color: #007700;
}
summary:after {
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  transition: .1s;
}
/* オープン時 */
details[open] summary:after {
  transform: rotate(90deg); /* 90度回転 */
  left: 4px;
  top: 5px;
}


/* リファレンス内のサンプル編集ボタン */
.ref-edit-btn {
  margin-top: 10px;
  padding: 4px 16px;
  font-size: 12px;
  color: white;
  background: #228b22; /* ベースカラー */
  border: 1px solid #1e7b1e;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
  font-weight: normal;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 常に影あり */
  transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

.ref-edit-btn:hover {
  opacity: 0.8;
}

.ref-edit-btn:active {
  background: #1e7b1e; /* 押したときの濃い緑 */
  transform: translateY(2px); /* 下に少し沈む */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 影を弱める */
}

.ref-edit-btn::before {
  content: attr(data-text);
}