body { background-color: #eeffee; width: 80%; min-width: 700px; margin: 0 auto; font-family: Verdana, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif; }
header { background-color: #90cc90; text-align: center; }
header h1 { margin: 0; }
header span { font-size: 90%; }
a[href] { color:#6666ff; }
a[href]:hover { background-color:#ccccff; color:#ffffff; }
nav ul { padding: 0; list-style-type: none; font-size: 0; margin-top: 16px; }
nav ul li { width: 15%; display: inline-block; font-size: 16px; }
nav ul li a[href]{ background-color: #442244; display: block; text-decoration: none; color: #eeffee; }
nav ul li a[href]:hover { background-color: #ddbbdd; color: #000000; }
nav ul:after { content: ""; display: block; clear: both; }
article { background-color: #d0eed0; margin: 0 auto; }
footer { background-color: #90cc90; text-align: center; font-size: 90%; }
h2 { border-bottom: solid 2px #90cc90; font-size: 110%; margin: 0; margin-top: 10px; }
h3 { width: 90%; border-bottom: solid 1px #90cc90; font-size: 100%; margin: 0; }
h4 { margin: 0; margin-top: 10px; }
div.small { font-size: 90%; }
div.main { margin: 10px; }
div.topic { background-color: #eeffee; margin-top: 10px; padding: 2px; width: 80%;  border: solid; }
div.topic p { margin: 0; }
div.topic ul { padding-left: 0; }
div.topic li { padding-top: 10px; list-style-type: none; font-size: 90%; }
ul.guide li { margin-top: 0; padding-top: 0; margin-left: 20px; list-style-type: disc; }
div.video { float: right; }
div.topic:after { content: ""; display: block; clear: both; }
div.toc { margin: 1%; border: dotted 2px; background-color: #eeffee; width: 80%; }
div.align_r { font-size: 90%; text-align: right; }
table { border: solid 2px; }
th { background-color: #442244; color: #eeffee; border: solid 1px;  }
td { border: solid 1px; }

/*detailsおよびsummaryタグの装飾用*/
details { background-color: #eeffee; margin-top: 10px; padding: 2px; width: 80%; border: solid; }
summary { display: block; cursor: pointer; position: relative; font-weight: bold; width: 100%; border-bottom: solid 1px #90cc90; margin: 0; }
summary:hover { background: #90cc90; }
summary::-webkit-details-marker { display: none; }
details[open] span.icon { transform: rotate(225deg); top: 0; bottom: -2.5px; margin: auto; }
details span.icon { content: ""; position: absolute; right: 5px; width: 5px; height: 5px; border-right: solid 2px #000000; border-bottom: solid 2px #000000; transform-origin: 50% 50%; transform: rotate(45deg); transition: transform 0.2s; top: -2.5px; bottom: 0; margin: auto; }
details span.date { font: 80% normal; margin-left: 4px; margin-right: 4px; top: 50%; transform: translateY(-50%); }

/*タグアイコンの装飾*/
span.tag { background-color: #e0e0e0; font-size: 12px; border: solid 1px #e0e0e0; border-radius: 6px; margin: 2px;
white-space: nowrap;
}
span.icon-tag { display: inline-block; position: relative; width: 4px; height: 4px; margin-left: 4px; margin-top: 0px; margin-right: 6px; margin-bottom: 6px; left: 0px; top: 1px; border: solid 1px #000000; background-color: #000000; }
span.icon-tag::before { content: ""; position: absolute; width: 6px; height: 6px; background-color: #000000; border: solid 1px #000000; border-radius: 1px; left: 1px; top: 1px; transform: rotate(-45deg); }
span.icon-tag::after { content: ""; position: absolute; width: 1px; height: 1px; background-color: #ffffff; border: solid 1px #ffffff; border-radius: 50%; left: 1px; top: 1px; transform: rotate(-45deg); }

/*コンテンツ4列表示*/
div.four-line { border: solid; box-sizing: border-box; width: 24%; margin-right: 1%; margin-bottom: 1%; background-color: #eeffee; overflow: hidden; }
div.flex-box { display: flex; flex-wrap: wrap; margin-top: 4px; }
div.four-line img { width: 80px; max-width: 98%; margin: 1%; float: left; }
div.four-line .title { display: inline-block; width: 200px; max-width: 98%; border-bottom: solid 1px #90cc90; font-size: 100%; font-weight: bold; margin: 0; }
div.four-line .date { font: 80% normal; margin-left: 1%; margin-right: 1%; }
div.four-line .comment { display: inline-block; width: 100%; }

/*コンテンツ1列表示*/
div.one-line { border: solid; box-sizing: border-box; width: 98%; margin: 1%; background-color: #eeffee; padding: 4px; }
div.one-line img { width: 192px; max-width: 98%; float: left; margin: 4px; }
div.one-line .title { display: inline-block; max-width: 98%; border-bottom: solid 1px #90cc90; font-size: 2em; font-weight: bold; }
div.one-line .date { font: 80% normal; margin-left: 1%; margin-right: 1%; }
div.one-line .comment { display: inline-block; width: 100%; margin: 4px; }
div.one-line span.tag { font-size: 100%; }
div.one-line .tag-area { display: block; max-width: calc(98% - 240px); margin: 1%; }
div.one-line li { /*border: dotted 1px #c0c0c0;*/ padding: 2px; width: 80%; min-width: 540px; max-width: 1200px; margin: 2px; display: flex; align-items: center; }
div.one-line audio { margin-left: 8px; margin-right: 8px; }
div.one-line iframe { clear: both; }