/* =========================
 basic style
  ========================= */

@media screen and (-webkit-device-pixel-ratio: 1) {
 html {
  font-size: 10pt;
 }
}

@media screen and (-webkit-device-pixel-ratio: 2) {
 html {
  font-size: 12pt;
 }
}

@media screen and (-webkit-device-pixel-ratio: 3) {
 html {
  font-size: 14pt;
 }
}

body {
 margin: 0rem;
 padding: 0rem;
 background: #fff;
 -webkit-text-size-adjust: 100%;
}

div {
 margin: 0.1rem;
 padding: 0rem;
}

p {
 margin: 0rem;
 padding: 0.1rem;
}

a.selflink:link {
 color: black;
}
a.selflink:visited {
 color: black;
}

a.selflink i {
 margin-right: 0.5rem;
 font-size: 0.8rem;
}

select {
 margin: 0.1rem;
 padding: 0rem;
 font-size: 0.9rem;
 border: 1px solid #ccc;
}

/*== header ==*/
div.header {
 border-bottom: solid 1px #000;
 display: flex;
 flex-wrap: wrap;
 justify-content: left;
 line-height:2rem;
}

div.header div.item {
 background: #fff;
 padding: 0.2rem;
 margin: 0.2rem 0rem 0.1rem 0rem;
 text-align: left;
 max-width: 20rem;
 height: 1.5rem;
 line-height:1.5rem;
}

div.header span.title {
 font-size: 1.2rem;
 margin-top: 0rem;
 margin-bottom: 0rem;
 margin-right: 1rem;
}

div.header span.menu {
 font-size: 0.8rem;
 border-left: 1px solid #ccc;
 margin: 0.1rem 0rem 0rem 0.1rem;
 padding: 0.2rem;
 cursor: pointer;
}

/*== contents ==*/
div.contents {
 font-size: 0.9rem;
 display: flex;
 flex-wrap: wrap;
 justify-content: left;
}

div.contents div.item {
 border-top: solid 1px #eef;
 border-left: solid 1px #eee;
 border-radius: 0.4rem;
 background: #fff;
 padding: 0.2rem;
 margin: 0.1rem 0.1rem 0.1rem 0.1rem;
 text-align: left;
 cursor: pointer;
 width: 18rem;
 min-width: 18rem;
 height: 4rem;
 box-shadow: 0.1rem 0.1rem 0.2rem 0rem #ccd;
}

div.contents p.title{
 margin-left: 0rem;
 font-size: 1rem;
 border-bottom: 1px dotted #ccc;
}
div.contents p.date{
 margin-left: 1rem;
 font-size: 0.8rem;
}

div.contents div.msg {
 font-size: 1.2rem;
 background: none;
 padding: 0.5rem;
 margin: 0.5rem 0.5rem 0.5rem 0.5rem;
 text-align: center;
 vertical-align: middle;
 line-height:3rem;
 height: 3rem;
}

div.contents div.next {
 background: #fff;
 padding: 0.2rem;
 margin: 0.1rem 0.1rem 0.1rem 0.1rem;
 text-align: center;
 vertical-align: middle;
 cursor: pointer;
 width: 18rem;
 min-width: 18rem;
 line-height: 4rem;
 height: 4rem;
}

div.contents div.page {
 padding: 0rem;
 margin: 0.1rem 0.1rem 0.1rem 0.1rem;
}

div.contents div.title {
 background: #fff;
 padding: 0.2rem;
 margin: 0.5rem 0.5rem 1.5rem 0.5rem;
}

div.contents div.text {
 font-size: 1rem;
 background: #fff;
 padding: 0.2rem;
 margin: 0.5rem 0.5rem 0.5rem 0.5rem;
 text-align: left;
 vertical-align: top;
 line-height:1.2rem;
 min-width: 40rem;
 white-space: pre;
}

div.contents div.footer {
 border-top: dotted 1px #ccc;
}

/*== footer ==*/
div.footer {
 border-top: solid 1px #000;
}

div.footer span.auther {
 font-size: 0.8rem;
 margin: 0.1rem 2rem 0rem 0.1rem;
 padding: 0.2rem;
 color: #aaa;
}

div.footer span.poweredby {
 font-size: 0.5rem;
 margin: 0.1rem 2rem 0rem 0.1rem;
 padding: 0.2rem;
 color: #aaa;
}

div.footer span.label {
 font-size: 0.8rem;
 margin: 0.1rem 0rem 0rem 0.1rem;
 padding: 0.2rem;
}

div.footer span.link {
 font-size: 0.8rem;
 margin: 0.1rem 0rem 0rem 0.1rem;
 padding: 0.2rem;
}

div.footer span.menu {
 font-size: 0.8rem;
 border-left: 1px solid #ccc;
 margin: 0.1rem 0rem 0rem 0.1rem;
 padding: 0.2rem;
 cursor: pointer;
}

div.footer span.nomenu {
 font-size: 0.8rem;
 border-left: 1px solid #ccc;
 margin: 0.1rem 0rem 0rem 0.1rem;
 padding: 0.2rem;
 color: #ccc;
 }