* {
margin:0;
padding:0
}
div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td,footer,header,nav,section,#menu li a,#menu .toggle {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
html {
font-size:62.5%
}
body {
background:#fff; /* 背景 */
color:#000; /* 文字色 */
font-family:'ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-size:1.2em; /* 文字の大きさ */
text-align:center;
overflow-wrap:break-word;
word-wrap:break-word; /* IE、FF用 */
}
a {
color:#0066cc;
text-decoration:none
}
a:hover{
color:#ccc
}
a img {
border-style:none
}
p.novel{
font-size:120%;
line-height:200%;
padding:5px 0px 50px 0px;/* 文章上下の余白コントロール */
}
/*--------------------------------------------------------
基本
--------------------------------------------------------*/
#wrapper {
margin:20px;
text-align:left;
}
#main-wrap{ 
width:100%;
float:right;
margin-left:-250px /* #leftcolumnのwidthと同じだけ左に余白 */
}  
#rightcolumn{
padding:20px;
position:relative;
margin-left:250px /* #leftcolumnのwidthと同じかそれ以上 */
}  
#leftcolumn{ 
float:left;
margin:0 auto;
padding:20px;
width:250px;
}
footer {
padding:20px;
text-align:right
}
/*--------------------------------------------------------
メニュー
わからない場合は、色変更・画像変更のみが無難です
--------------------------------------------------------*/
#open {
display:none
}
#menu{
display:block;
margin:0 auto;
}
#menu li{
list-style:none
}
#menu li a,
#menu .toggle{
border:1px solid #8c8673;
color:#000;
display:block;
margin:10px 0;
padding:10px;
position:relative;
text-shadow:2px 2px 1px #ccc;
transition:.2s ease-in-out;
}
#menu a:hover,
#menu .toggle:hover{
background-color:#a8ebf0;
color:#fff
}
#menu .toggle:after{
border-top:solid 3px #000; /* メニュー「>」の色 */
border-right:solid 3px #000; /* メニュー「>」の色 */
content:"";
display:block;
margin-top:-5px;
width:5px;height:5px;
top:50%;right:10px;
position:absolute;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transition:.2s ease-in-out;
}
#menu .toggle.open:after {
transform:rotate(135deg);
-ms-transform:rotate(135deg);
-webkit-transform:rotate(135deg)
}
#menu li ul{
display:none;
margin:0;
overflow:hidden
}
#menu li ul li a:after{
display:none
}
/*--------------------------------------------------------
著作権表示、ページ上部へのリンク
--------------------------------------------------------*/
.fl {
text-align:center
}
#pagetop{
background:#94dce2;
border-radius:5px;
height:50px;width:50px;
text-align:center;
position:fixed;
bottom:20px;right:20px;
box-sizing:border-box
}
.arrow {
border-left:2px solid #fff;
border-top:2px solid #fff;
position:absolute;
top:40%;left:30%;
height:20px;width:20px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
box-sizing:border-box
}
/*--------------------------------------------------------
見出し、枠、線#rightcolumn 
--------------------------------------------------------*/
h1 {
color:#000;
font-size:1.3em;
font-weight:700;
letter-spacing:3px;
margin:1em 0;
text-shadow:5px 5px 1px #ccc
}
h2 {
background:#fff url(image/back01.gif);
border:1px solid #8c8673;
font-size:1.2em;
font-weight:700;
margin:1em 0;
padding:.5em
}
h3 {
border-bottom:2px solid #000;
font-size:1.2em;
font-weight:700;
letter-spacing:3px;
margin:1em 0;
}
.co01 {
color:#ba2029
}
.co02 {
color:#390
}
.ln01 {
border-left:8px solid #9adee4;
margin:5px 0;
padding:3px
}
.ln02 {
border-left:8px solid #9c0;
margin:5px 0;
padding:3px
}
.middle {
vertical-align:middle
}
.navi {
border:1px solid #000;
margin:10px 0;
padding:3px;
text-align:center
}
.pos {
border:1px #9adee4 solid;
margin:10px 0;
padding:3px 0;
width:100%
}
.title {
color:#9adee4;
font-size:1.5em;
font-weight:700;
letter-spacing:3px;
margin:2em 0;
text-align:right
}
.txt {
border-left:1px solid #999;
margin:1em;
padding:0 0 0 1em
}
dt {
float:left;
font-weight:700;
padding:0 10px 10px 0;
width:150px /*(※)*/
}
dd {
border:1px dotted #000;
margin-bottom:10px;
margin-left:160px /* (※)より少なくならないように */
}
em {
background: linear-gradient(transparent 50%, #9adee4 0%);
}
input,textarea {
background:#fff;
border:1px solid #000;
color:#000;
font-family:'ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-size:1em;
margin:3px 0;
width:50%
}
textarea {
height:100px
}
img.frame {
border:7px solid #9adee4;
border-radius:3px
}
.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
}
header {
min-height:50px
}
#main-wrap {
float:none;
margin-left:0
}
#rightcolumn {
margin-left:0;
padding:0;
position:static;
}
#leftcolumn {
float:none;
padding:0;
margin-top:30px;
width:100%
}
footer {
padding:50px 0;
}
dt {
float:none;
width:100%
}
dd {
margin-left:10px;
}
#main-wrap a{
color:#0066cc;
background:#99ccff;
border-radius:5px;
display:inline-block;
margin:5px 5px 5px 0;
padding:10px
}
#main-wrap a.bg-none{
background:none;
border-radius:0;
margin:10px 10px 0 0;
padding:0
}
/*--------------------------------------------------------
スマホ、タブレット用メニュー
わからない場合は、色変更のみが無難です
--------------------------------------------------------*/
/* メニューを開くボタン */
#open {
background:#fff; /* 背景色 */
border:2px solid #000; /* フチ */
border-radius:50%;
display:inline-block;
position:absolute;
width:40px;height:40px; /* サイズ */
top:20px;right:20px; /* 位置 */
z-index:20
}
#open-icon {
background:#000; /* 色 */
display:block;
margin:-1px 0 0 -10px;
position:absolute;
top:50%;left:50%;
width:20px;height:2px;
transition:.3s
}
#open-icon:before,#open-icon:after {
background:#000; /* 色 */
content:"";
display:block;
position:absolute;
top:50%;left:0;
width:20px;height:2px;
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);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg)
}
#open .close:after {
transform:rotate(-135deg);
-ms-transform:rotate(-135deg);
-webkit-transform:rotate(-135deg)
}

/* メニュー */
#menu {
background:#fff;
display:none;
float:left;
position:absolute;
top:70px;left:0; /* 位置 */
width:100%;padding:10px;
z-index:10
}
#menu li a,
#menu .toggle{
padding:10px 5px /* リンクの余白 一列の高さはここで調節 */
}
#menu li {
height:auto
}
#menu li:before {
display:none
}
#menu li a {
display:block
}

/* サブメニュー */
#menu ul li ul li {
float:left;
width:50% /* 一列にするなら100% */
}
}