/* ======================
common
====================== */
/* Clear Fix */
#article {font-size: 16px;}
#article ul{padding: 0;margin: 0;}
#article li {list-style: none;}
#article .cf:before,
#article .cf:after { content: " "; display: table; }
#article .cf:after { clear: both; }
#article .clear { clear: both; font-size: 0px; line-height: 0px; }

/* title */
#article h2 img { width: 100%; margin: 0 auto; padding: 0; }

/* member_list */
#article .sym_member_list { width: 95%; padding: .5em 1.5% .5em 2.5%; margin: .75em auto; background: #FEE; border-radius: .8em; color: #544; font-size: .8em; line-height: 1.3em; }
#article .sym_member_list h3 { padding: 1em 0 .5em 0; color: #be6f72; font-size: 1.3em; font-weight: bold; letter-spacing: .2em; text-align: center; }
#article .sym_member_list li { width: 49%; margin: 1em 2% 1em 0; float: left; list-style: none; }
#article .sym_member_list li:nth-child(even) { margin: .75em 0 .25em 0; }
#article .sym_member_list li dl { display: table; }
#article .sym_member_list li dt { width: 25%; display: table-cell; vertical-align: top; }
#article .sym_member_list li dt img { width: 100%; border-radius: 1em; }
#article .sym_member_list li dt dfn { font-size: 1em; font-weight: bold; color: #422; }
#article .sym_member_list li dd { width: 74%; padding: 0 0 .5em 2%; display: table-cell; vertical-align: top; }
#article .sym_member_list li dd a { padding: .75em 10px .75em .7em; margin-top: .25em; font-size: 1em; font-weight: bold; line-height: 1em; color: #FFF; background: #C9A url("/images/ico/ico_arr.png")97% 50% no-repeat; background-size: 15px; border-radius: .3em; display: block; }
#article .sym_member_list li dd a:hover { text-decoration: underline; }

#article a { font-weight: bold; }
#article a:hover { color: #63C; font-weight: bold; text-decoration: underline; }

/* ======================
index.html
====================== */
#article h2 p { margin: 0 !important; padding: 1em 3em; color: #FFF; font-size: .6em; font-weight: normal; letter-spacing: .1em; background: #B94; background:-moz-linear-gradient(top, #B94 0%, #DC8 100%); background: -webkit-linear-gradient(top, #B94 0%,#DC8 100%); background: linear-gradient(to bottom, #B94 0%,#DC8 100%); }
#article h3.archive_title { margin: .5em 0 0 0; padding: 1em 0 1em 1.8em; font-size: 1.6em; font-weight: 800; font-family: sans-serif; line-height: 1.1em; letter-spacing: .5em; color: #FFF; text-shadow: 0 0 2px #C22, 0 0 4px #D33, 0 0 6px #E44, 0 0 8px #F88; background: url("img/archive_title.png") 0% 50% no-repeat; background-size: 1.5em; }

#article .sym_index_list { width: 90%; margin: 0 7% 0 3%; }
#article .sym_index_list div { margin: 1em auto; padding-left: 3em; font-size: .9em; line-height: 1.9em; letter-spacing: .25em; }
#article .sym_index_list li { width: 100%; margin: 1.5em auto; list-style: none; }
#article .sym_index_list li img { width: 60%; margin-bottom: .5em; border-radius: 2px; opacity: 0.3; }
#article .sym_index_list li p { color: #666; font-size: .9em; line-height: 1.5em; letter-spacing: .1em; }
#article .sym_index_list li p span { color: #a0783c; font-size: .9em; font-style: italic; letter-spacing: .4em; line-height: 2.5em; display: block; }
#article .sym_index_list li a { width: 100%; display: block; }
#article .sym_index_list li a:hover { opacity: 0.7; text-decoration: none; }
#article .sym_index_list li a img { width: 100%; margin-bottom: .5em; border-radius: 9px; box-shadow: 0 2px 6px 0 rgba(0,0,0,0.4); opacity: 1; }
#article .sym_index_list li a p { margin: .1em 0 .4em 0; padding-left: 1.35em; font-size: 1.6em; font-weight: bold; letter-spacing: .2em; line-height: .8em; color: #F8C; background: url("img/ico_paragraph.png") 0% 50% no-repeat; background-size: 1em; }
#article .sym_index_list li a p span { color: #666; font-size: .6em; font-weight: normal; }

#article .sym_archive_list { margin: 3em 0 2em 0; padding: 0 0 .001em 0; border-radius: .5em .5em 0 0; }
#article .sym_archive_list h3.archive_title { margin: 0 0 0 2% !important; padding: 1em 0 1em 1.8em !important; font-size: 1.6em; background-size: 1.5em; }
#article .sym_archive_list ol { margin-top: -1em; padding: 1em 0 0 1%; display: flex; flex-wrap: wrap; }
#article .sym_archive_list li { width: 49%; margin: 0 1% .5em 0; padding: .5em; font-size: .9em; border-radius: .5em; }
#article .sym_archive_list dl { display: table; border-collapse: collapse; vertical-align: top; }
#article .sym_archive_list dt { width: 45%; display: table-cell; vertical-align: middle; }
#article .sym_archive_list dt img { width: 100%; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4); border-radius: .3em; }
#article .sym_archive_list dt a { display: block; }
#article .sym_archive_list dt a:hover { opacity: 0.7; }
#article .sym_archive_list dd { width: 55%; padding-left: .5em; font-size: .9em; line-height: 1.2em; display: table-cell; vertical-align: top; }
#article .sym_archive_list dd span { font-size: .9em; font-style: italic; letter-spacing: .2em; line-height: 1.7em; display: block; }
#article .sym_archive_list dd a { font-weight: normal; }
#article .sym_archive_list dd a:hover { opacity: 0.7; text-decoration: none; }
#article .sym_archive_list dd a h4 { margin: .3em 0; padding: 0; font-size: 1.2em; font-weight: bold; }

#article .bg01 { background: #FEC; }
#article .bg01 li { background: #EDB; }
#article .bg01 dd a h4 { color: #D22; }
#article .bg01 dd a { color: #655; }

/* ======================
detail.html
====================== */
#article h2.sym_detail_title { width: 100%; padding-bottom: .15em; font-size: 1.3em; font-weight: bold; line-height: 1em; color: #FFF; background: #c8a050; }
#article h2.sym_detail_title img { padding-bottom: .2em; }
#article h2.sym_detail_title span { font-size: .6em; letter-spacing: .15em; padding: 0 .15em; }

#article .sym_detail_read { width: 93%; margin: 1em auto; color: #be6f72; font-size: .9em; letter-spacing: .1em; line-height: 1.7em; text-indent: 1em; }

#article .sym_detail_main { width: 90%; padding: .25em 0 .25em 10%; }
#article .sym_detail_main h3 { margin: 2em 0 1em 0; font-size: 1.6em; font-weight: 800; font-family: sans-serif; color: #FFF; text-shadow: 0 0 2px #834, 0 0 4px #be6f72, 0 0 6px #C9A, 0 0 8px #FBC; }

#article .sym_detail_main li { min-height: 4.2em; margin: .5em auto 1em auto; padding-left: 5em; background-size: 4em; background-position: 0% .2em; background-repeat: no-repeat; list-style: none; }
#article .sym_detail_main li:last-child { margin-bottom: 4em; }
#article .sym_detail_main li dfn { font-size: .8em; font-weight: bold; line-height: 1.2em; letter-spacing: .1em; color: #CBB; }
#article .sym_detail_main li p { line-height: 1.5em; }
#article .sym_detail_main li p span.annotation span { font-size: .9em; line-height: 1.3em; color: #544; }



/* annotation */
#article span.annotation input { display: none; }
#article span.annotation label { cursor: pointer; display: inline-block; margin: 0; padding: .2em 2.5em .2em .35em; border-radius: 4px 4px 0 0; background: #FEE url("/images/ico/ico_annotation.png")94% 50% no-repeat; background-size: 2.2em; transition: 0.1s; }
#article span.annotation label:hover { background-color: #CAA; }

#article .panel01,
#article .panel02,
#article .panel03,
#article .panel04 {
    transition: .3s ease;
    height: 0;
    overflow: hidden;
    background: #FEE;
    width: 0%;
    padding: 0;
    border-radius: 5px;
    display: inline-block;
}

#article span.annotation input:checked + .panel01,
#article span.annotation input:checked + .panel02,
#article span.annotation input:checked + .panel03,
#article span.annotation input:checked + .panel04 {
    width: 115%;
    margin: 0 0 .5em -4.8em;
    height: auto;
    padding: 15px;
}

/* photo - caption */
#article .sym_detail_main figure { width: 80%; margin: 3em auto 1.5em auto; }
#article .sym_detail_main figure img { width: 100%; box-shadow: 0 0 .25em 0 #be6f72, 0 0 .5em 0 #CAA; border-radius: .5em; }
#article .sym_detail_main figure figcaption { color: #be6f72; font-size: .8em; font-style: italic; }
#article .sym_detail_main figure figcaption span { font-size: 1.1em; font-weight: bold; }
#article .sym_detail_main figure p { margin: .5em auto 0 auto; }
#article .sym_detail_main figure p a { width: 95%; padding: .5em 0 .5em 3.2em; font-weight: bold; color: #FFF; background: #50b4f1 url("/images/ico/ico_twitter.png") 1em 50% no-repeat; background-size: 1.8em; border-radius: .3em; display: block; }

/* backnumber */
#article .backnumber li { color: #be6f72; width: 96%; padding: .75em 1% .75em 3%; }
#article .backnumber li.go_index a { width: 75%; padding: .75em 1.2em; margin: 0 auto 2em auto; color: #FFF; background: #C9A url("/images/ico/ico_arr.png")97% 50% no-repeat; background-size: 15px; display: block; }

/* comment */
#article div.comment { border-top: #FCC groove 2px; padding: 1em 0; }
#article div.comment h3 { margin: .6em auto; font-size: 1.3em; letter-spacing: .5em; }
#article div.comment p { margin: .5em 0; color: #be6f72; font-size: .9em; letter-spacing: .2em; line-height: 1.8em; }
#article div.comment span a { width: 70%; padding: 1em; margin: 1em auto; text-align: center; color: #FFF; background: #CAA; border-radius: .5em; display: block; }

/* note */
#article span.note { width: 90%; margin: 2em auto 2em auto; padding-left: 4.5em; color: #be6f72; letter-spacing: .1em; line-height: 1.4em; text-indent: -4.5em; display: block; }
#article span.note span { letter-spacing: 0; margin-right: .5em; }
#article span.bottom0 { margin-bottom: 0 !important; }


@media screen and (max-width: 767px) {
  #article{font-size: 14px;}
  #article .sym_member_list li{width: 100%;}
  #article .sym_detail_main{width: 100%;padding: .25em 1% .25em 2%;}
  #article .backnumber li a {color: #be6f72;padding: .75em 1.5em;border: #be6f72 solid 1px;border-radius: 5px;display: block;}
  #article .sym_detail_main li p a{padding: .5em 1em .5em .25em;margin: .1em 0;font-size: 1em;font-weight: bold;line-height: 1em;color: #448;background: #CDE url("/images/ico/ico_arr.png")97% 50% no-repeat;background-size: auto;background-size: 10px;border-radius: .3em;display: inline-block;}
}