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;
}
td,th{
  border:1px solid #ccc;
  padding:6px;
  font-size:14px;
}
td .num{
  text-align: center
}
td .str{
  text-align: left
}
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;
}

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;
}