* {
margin:0;
padding:0
}
div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td,footer,header,nav,section {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
html {
font-size:62.5%
}
body{
/* 以下背景色 */
background:url(back01.png) no-repeat #fff;
color:#666;/* 文字色 */
font-family:'serif';
font-size:1.2em;/* 文字の大きさ */
letter-spacing:3px;
overflow-wrap:break-word;
overflow-y:scroll;
text-align:left;
word-wrap:break-word
}

a {
color:#cde5d9;
text-decoration:none
}
a img {
border-style:none
}
a:hover {
color:#ccc
}
/*--------------------------------------------------------
基本
--------------------------------------------------------*/
#wrapper {
padding:20px
}
/*--------------------------------------------------------
上(ヘッダー)
--------------------------------------------------------*/
header a{
color:#666
}
.header-inner {
padding:10px 0
}
/*--------------------------------------------------------
メニュー
--------------------------------------------------------*/
.menu {
color:#ccc;
margin-bottom:10px;
padding:5px 10px
}
nav ul {
overflow:hidden
}
nav li {
display:inline-block
}
nav li a {
display:inline-block
}
nav li:before {
content:"│"
}
nav li:first-child:before {
content:""
}
#open{
display:none
}
/*--------------------------------------------------------
メイン
--------------------------------------------------------*/
#contents {
line-height:20px;
padding:0 0 20px;
text-shadow:1px 1px 2px #ccc
}
#contents a{
color:#999;
text-decoration:underline
}
#contents p{
background:url(line01.gif) repeat;
margin-top:20px
}
/*--------------------------------------------------------
下(フッター)
--------------------------------------------------------*/
footer {
border-top:1px solid #666;
padding:5px 10px
}
footer .pagetop{
float:left;
text-align:left
}
footer .sub{
text-align:right
}
/*--------------------------------------------------------
見出し、枠、線
--------------------------------------------------------*/
h1 {
color:#fff;
font-size:1.6em;
font-weight:700;
margin:0.5em 0;
text-align:left
}
h1 a{
color:#fff
}
h2 {
border-top:3px double #999;
border-bottom:3px double #999;
font-size:1.1em;
padding:.5em .2em;
margin:1em 0
}
h2:first-letter {
font-size:1.5em;
margin-right:.1em
}
h3 {
border-left:6px solid #999;
padding:.2em .5em;
font-size:1.1em;
font-weight:400;
margin:1em 0
}
.co01 {
color:#ccc
}
.co02 {
color:#e97e7a
}
.ln01 {
border-left:8px solid #ccc;
margin:5px 0;
padding:3px
}
.ln02 {
border-left:8px solid #bce6ee;
margin:5px 0;
padding:3px
}
.navi {
font-size:0.9em;
padding-left:1em;
text-align:right
}
.navi:before {
content:"\00BB"
}
#contents .navi:before {
content:""
}
.pos {
border:1px solid #999;
margin:5px 0;
padding:3px
}
.title {
color:#ccc;
font-size:1.5em;
font-weight:700;
margin:2em 0;
text-align:right
}
.txt {
border-left:1px solid #666;
margin:1em;
padding:0 0 0 1em
}
dd {
margin:0px 0px 5px 4em
}
dt {
font-weight:700;
margin:0px 0px 5px
}
em {
background-color:#f8f5c9;
font-weight:700
}
input,textarea {
background:#fff;
border:1px solid #666;
color:#999;
font-family:Verdana,Roboto,'游ゴシック','Yu Gothic','游ゴシック体','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-size:1em;
margin:3px 0;
width:200px
}
textarea {
height:50px
}
img.frame{
border:6px solid #fff;
border-radius:3px;
box-shadow:4px 4px 5px #999
}
.middle {
vertical-align:middle
}
/*--------------------------------------------------------
回り込み解除
--------------------------------------------------------*/
.cf:before,.cf:after {
content:" ";
display:table
}
.cf:after {
clear:both
}
/*--------------------------------------------------------
スマホ、タブレット用
横幅600pxで切り替え
--------------------------------------------------------*/
@media screen and (max-width: 600px) {
body {
font-size:1.4em
}
#wrapper {
padding:10px
}
.header-inner {
padding:0;
position:relative
}
dt {
float:none
}
dd {
margin-left:2em
}
footer .pagetop{
font-size:2em
}

/*--------------------------------------------------------
スマホ、タブレット用メニュー
わからない場合は、色変更のみが無難です
--------------------------------------------------------*/
/* メニューを開くボタン */
#open {
display:inline-block;
height:40px;
margin:0 5px;
position:absolute;
width:40px;
top:0;right:0
}
#open-icon {
background:#999;
display:block;
height:2px;
left:50%;
margin:-1px 0 0 -10px;
position:absolute;
top:50%;
width:20px;
transition:.3s
}
#open-icon:before,#open-icon:after {
background:#999;
content:"";
display:block;
height:2px;
left:0;
position:absolute;
top:50%;
width:20px;
transition:.3s
}
#open-icon:before {
margin-top:-8px
}
#open-icon:after {
margin-top:6px
}
#open .close {
background:transparent
}
#open .close:before,#open .close:after {
margin-top:0
}
#open .close:before {
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg)
}
#open .close:after {
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg)
}
/* メニュー */
#side {
background:rgba(205,229,217,0.8);
display:none;
float:left;
position:absolute;
width:100%;
z-index:200
}
.menu {
position:relative;
padding:0
}
nav ul{
text-align:left;
width:100%
}
nav li {
display:inherit;
height:auto
}
nav li:before {
display:none
}
nav li a {
height:2em;
margin:0;
padding:10px;
width:100%
}
nav li a:hover {
background:rgba(241,238,194,0.8);
color:#999;
letter-spacing:1em
}
}