*{margin:0;padding:0}
div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td,footer,header,nav{box-sizing:border-box}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
a{text-decoration:none;outline:none}
a img{border-style:none}
ul,li{list-style-type:none}

html{
font-size:62.5%
}
body{
background: #F6F5F2;
color:#2C3E4F;/* 文字色 */
font-size:1.2em;/* 文字の大きさ */
font-family:Verdana,Osaka,'メイリオ','Meiryo,';
letter-spacing:.1em;
overflow-wrap:break-word;
word-wrap:break-word;
line-height: 1.8em;
margin:0;
text-align:center
}
a{
color:#666
}

/*--------------------------------------------------------
メイン
--------------------------------------------------------*/
#contents{
text-align:left;
width:100%
}
/* 右側 */
#rightcolumn-inner{
background:#F6F5F2;/* メイン部分の背景 */
border-left:1px dashed #000;
padding:20px 0;
margin-left:200px /* (※1) */
}
/* 左側 */
#leftcolumn{
float:left;
width:200px /* 幅 (※1)と同じ数値 */
}
#leftcolumn-inner{
padding:10px
}

#rightcolumn a{
position:relative;
display:inline-block;
margin-bottom:10px;
}
#rightcolumn a::after{
background:#F6F5F2;
position:absolute;
content:'';
bottom:0;left:0;
width:0;
height:1px
}
/*--------------------------------------------------------
メニュー
--------------------------------------------------------*/
#menu{
display:block;
margin:3px auto;
padding:0px
}
nav li a,nav li span{
color:#000;/* メニューの文字色 */
display:block;
line-height:1.5em;
position:relative
}
nav li a:hover,nav li span:hover{
text-decoration:underline
}
#open{display:none}
/*--------------------------------------------------------
ページ上部へのリンク、著作権表示
--------------------------------------------------------*/
#pagetop{
background:rgba(255,255,255,.8);/* 背景 */
height:40px;width:40px; /* 大きさ */
border:1px dashed #000;/* 枠線 */
border-radius:30px;
box-sizing:border-box;
display:block;
position:fixed;
bottom:-80px;
text-align:center;
z-index:10
}
.arrow{
border-left:3px solid #000;
border-top:3px solid #000;
position:absolute;
top:35%;left:22%;
height:12px;width:12px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg)
}
#pagetop:hover{
background:#d0d9c7
}
#fl a{
color:#000
}
/*--------------------------------------------------------
見出し、枠、線
--------------------------------------------------------*/
.cf:before,.cf:after{content:" ";display:table}
.cf:after{clear:both}

img
{
border:0;
margin:0;
}


#navi{
margin: 3px 0 0;
text-align: center;
}

#navi ul{
margin: 3px 0 0;
padding: 0;
text-align: center;
}

#navi li{
font-size:10pt;
padding: 0 3px;
margin: 3px 0;
list-style-type:none;
display: inline;
font-weight: normal;
}

#menu ul{
margin-top: 3px;
margin-bottom: 3px;
margin-left: 20px;
padding-left: 5px;
padding-right:0px
}

#menu li{
margin: 3px 0;
list-style-type:none;
display: inline;
font-weight: normal;
font-size:10pt;
}

#menu p{
margin-top: 3px;
margin-bottom: 3px;
margin-left: 20px;
padding: 0px;
}

span{
margin:0.3em;}


a:link    {color:#2C3E4F; text-decoration:none; background:#ccff99;border: none;}
a:visited {color:#2C3E4F; text-decoration:none; background:#81DCFA;border: none;}
a:active  {color:#2C3E4F; text-decoration:none; border: none;}


#text{
margin: 5px 5% 400px;
padding: 10px;
font-size:13px;
line-height: 190%;
border: 1px solid #81DCFA;
}

#text p{font-family: 'ＭＳ　Ｐゴシック','ＭＳ　Ｐ明朝';}

p{
margin: 0;
padding:5px 5px 20px;
}

h1
{
display: none;
}

h2{
text-align:center;
margin: 40px 0 15px;
color: #0074BC;
font-size: 20pt;
font-weight: normal;
}

h3{
text-align: left;
font-size: 11pt;
background: url(h3.png) no-repeat left;
margin: 10px 5px 0px;
padding: 5px 0 0 90px;
}

h4{
text-align: left;
font-size: 11pt;
margin: 20px 0px 5px;
padding: 0 0 0 5px;
color: #0074BC;
font-weight: normal;
border-left: 15px solid #FF91A8;
}


/*--------------------------------------------------------
スマホ、タブレット用
横幅600pxで切り替え
--------------------------------------------------------*/
@media screen and (max-width: 600px){
body{
font-size:1.3em
}
#contents{
position:relative
}
#leftcolumn,#rightcolumn,footer{
float:none;
width:100%
}
#rightcolumn,footer,#rightcolumn-inner,#footer-inner{
margin-left:0
}
#footer-inner{
text-align:center
}
#rightcolumn-inner{
border-top:1px dashed #000;
border-left:0
}
#contents p{
background:url(image/line02.gif);
line-height:30px
}
h1{
padding-right:40px;/* メニューを開くボタン(#open)分空ける */
min-height:40px
}
dt{float:none;clear:none;width:auto}
dd{margin-left:20px}
img{max-width:100%;height:auto} /* 画像の縮小表示 */
/*--------------------------------------------------------
スマホ、タブレット用メニュー
--------------------------------------------------------*/
/* メニュー */
#menu{
background:rgba(0,0,0,.8);
padding:0;
display:none;
position:absolute; /* 表示位置固定 */
top:60px;left:0;/* #contentsを基準にした位置 */
width:100%;
z-index:10
}
nav > ul >li{
border-top:1px solid #222
}
nav li{
width:100%
}
nav li a,nav li span{
color:#000;
padding:2px;
margin:1px;
}
nav li a:hover,nav li span:hover{
background:rgba(208,217,199,.8);
text-decoration:none;
}


/* メニューを開くボタン */
#open{
background:#fff; /* 背景色 */
border:1px dashed #000; /* 点線 */
display:inline-block;
position:absolute;
top:20px;right:20px; /* 位置 */
height:40px;width:40px; /* サイズ */
z-index:20
}
#open-icon,#open-icon:before,#open-icon:after{
background:#000; /* 線の色 */
}
#open-icon{display:block;margin:-1px 0 0 -10px;position:absolute;top:50%;left:50%;height:2px;width:20px}
#open-icon:before,#open-icon:after{content:"";display:block;position:absolute;top:50%;left:0;height:2px;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{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
#open .close:after{-ms-transform:rotate(-135deg);-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}

}