html,body,div,span,iframe,h1,h2,h3,h4,p,pre,del,em,img,b,i,dl,dt,dd,ol,ul,li,form,table,tbody,tr,th,td,article,aside,footer,header,nav,section{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#42426a #333}
article,aside,footer,header,nav,section{display:block}
body{line-height:1;overflow-wrap:break-word;word-wrap:break-word}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;vertical-align:middle;box-sizing:border-box}
a{margin:0;padding:0;text-decoration:none;outline:none;font-size:100%;vertical-align:baseline;background:transparent}
a img{border-style:none}
ul,li{list-style-type:none}
hr{border:0;display:block;margin:1em 0;padding:0;height:1px}
.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}

/* ===================================
背景,文字,リンク設定
=================================== */

@font-face {
    font-family: 'Moon Light';
    src:url('fonts/Moon Light.otf');
}

@font-face {
    font-family: 'Moon Bold';
    src:url('fonts/Moon Bold.otf');
}

@font-face {
    font-family:'Dosis',sans-serif;
    src:url('fonts/Dosis-VariableFont_wght.ttf')
}

html{
font-size:62.5%;
height:100%
}
body{
background: #232946 url(graphix/moominspring.jpg);
color:#b8c1ec;
font-size:1.4em;/* 文字の大きさ */
font-family:'Dosis','游ゴシック Medium','Yu Gothic Medium','游ゴシック体',YuGothic,'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
letter-spacing:.1em;
line-height:1.5;
text-align:center;
height:100%;
}
/*  リンク
------------------------------ */
a{
color:inherit
}
a:hover{
color:#ccc
}
#rightcolumn a:not(.bg-none){
border-bottom:1px solid #ccc;
color:#fffffe;
display:inline-block;
margin:2px 2px 2px 0;
padding:0 2px
}
aside { color : #1a2975; }

aside a:not(.bg-none){
background: rgb(126, 197, 153);
color:#1a2975;
font-weight: bolder;
border-radius:5px;
display:inline-block;
margin:2px;
padding:2px
}
#rightcolumn a:not(.bg-none):hover{
background:#b8c1ec;
border-bottom:1px solid transparent;
border-radius:5px;
color:#232946
}
aside a:not(.bg-none):hover{
color:inherit
}
/* ===================================
基本
=================================== */

#wrapper{
background-image:linear-gradient(rgba(80,80,80,0.5),rgba(80,80,80,0.5)), url(graphix/moominspring.jpg); /* 背景 */
background-size: cover;
background-attachment: fixed;
color:#ccd3f1; /* 文字色 */
padding-left:400px;/* (※1)と同じ */
position:relative;
margin:0 auto;
height:auto;width:100%;
min-height:100%
}
header{
padding:20px 0;
position:fixed;
left:0;top:0;
z-index:5;
}
#header-bg{
background: url(graphix/back03.gif) no-repeat;
background-size: contain;
position:fixed;
background-position: center;
height:258px;/* (※2)画像の高さ */
width:400px; /* (※1)と同じ */
}
#header-inner{
position:absolute;
top:50%;left:50%;
width:258px;
-ms-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
#header-inner h1{
color: #fffffe;
text-shadow: none;
}
#rightcolumn{
float:right;
margin-left:0;
text-align:left;
width:100%
}
#rightcolumn-inner{
margin-left:0;
padding:20px 80px 50px 20px
}
#rightcolumn-inner ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#rightcolumn-inner li {
  background-image: url("graphix/sprkl.gif");
  background-repeat: no-repeat;
  background-position: 1px;
  padding-left: 20px;
}
#about{
  display:flex;
}
#about img{
  max-width:30%;
  height:auto;
  align-self:center;
  margin:0 8px;
}
.current img{
  height:auto;
  width:2em !important;
  margin:0 1px 0 0
}
#no_comments {
  display:none
}
#leftcolumn{
float:left;
margin-left:-400px; /* (※1)と同じ */
padding:0 20px 0;
position:fixed;
width:400px; /* (※1) */
min-height:100%
}
#leftcolumn-inner{
background: rgba(99,99,99,0.1);
border-left:1px dashed #aaa697;
border-right:1px dashed #aaa697;
margin:0 auto;
padding:300px 10px 20px;/* (※2)より余分に空ける */
width:100%;
min-height:100%
}
#sidebar-inner{
  overflow-y:scroll;
  height:45vh;
}
#sidebar-inner::-webkit-scrollbar {
 width: 10px;
 height: 10px;
}
#sidebar-inner::-webkit-scrollbar-thumb {
 background: linear-gradient(13deg, #ffc070 14%,#42426a 29%);
 border-radius: 10px;
}
#sidebar-inner::-webkit-scrollbar-thumb:hover{
 background: linear-gradient(13deg, #ffc070 14%,#42426a 30%);
}
#sidebar-inner::-webkit-scrollbar-track{
 background: #ffffff;
 border-radius: 10px;
 box-shadow: inset 7px 10px 12px #f0f0f0;
}
/*  壁紙上の文字縁取り
------------------------------ */
header,aside,#index-inner{
 text-shadow:1px 0 0 #fff, 1px 1px 0 #fff, 0 1px 0 #fff, -1px 1px 0 #fff, -1px 0 0 #fff, -1px -1px 0 #fff, 0 -1px 0 #fff, 1px -1px 0 #fff
}

/* ===================================
メニュー
=================================== */

#menu{
background:#e3e3e3;
display:block;
margin:0 -10px 20px;
text-align:center
}
nav li{
display:inline-block;
margin:5px 0
}
nav li a{
color:#444;/* メニューの文字色 */
display:inline-block;
padding:0 5px
}
nav li a:hover{
background:rgba(238,234,214,.6);
color:#fe9099
}
nav > ul > li + li::before{
content:"│";
font-size:.8em
}
/*  メニューを開くボタン非表示
------------------------------ */
#open{display:none}

/* ===================================
index
=================================== */

#index{
background:#fff;
padding:0 20px;
}
#index-inner{
background:#fff url(graphix/moominspring.jpg);
border-left:1px dashed #444;
border-right:1px dashed #444;
margin:0 auto;
padding:20px 10px;
position:relative;
min-height:100%;width:300px
}
#index-bg{
position:relative;
background:url(graphix/back03.png) no-repeat 50% 50%;
height:280px;width:280px
}
#index-bginner{
position:absolute;
top:50%;left:50%;
width:100%;
-ms-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%)
}

/* ===================================
ページ上部へのリンク、著作権表示
=================================== */

/*  位置はscroll.jsで設定
------------------------------ */
#pagetop{
background:url(graphix/iconbg.gif);
background-size:contain;/* 背景 */
border:0;
border-radius:30px;
box-sizing:border-box;
display:block;
font-size:13px;
letter-spacing: normal;
line-height:20px;
padding-top:12px;
position:fixed;
text-align:center;
text-decoration:none;
height:40px;width:40px; /* 大きさ */
bottom:-80px;
z-index:10
}
#pagetop:before{
content:"";
display:block;
border-left:2px solid;
border-top:2px solid;
position:absolute;
top:10px;left:16px;
height:6px;width:6px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg)
}
#pagetop:hover{
background:#444
}
/*  著作権表示
------------------------------ */
#fl {
  margin-top:40px;
}
#fl img{
display:inline-block;
margin:5px;
text-decoration:none
}

/* ===================================
見出し、枠、線
=================================== */

h1{
font-size:1.6em;
color:#fffffe;
line-height:1;
margin:0 0 10px;
font-family: 'Moon Bold';
}
h2{
background:url(graphix/icon01.gif) no-repeat 0 50%;
color:#fffffe;
font-size:1.2em;
letter-spacing:5px;
line-height:32px;
margin:2em 0 1em -15px !important;
padding:0.2em 0.2em 0.2em 15px;
text-shadow:2px 2px 3px #fff;
font-family: 'Moon Light';
}
#leftcolumn h2{
background-position:50% 50%
}
h3{
border-bottom:1px dashed #aaa697;
font-size:1.1em;
margin:15px 0;
font-family: 'Moon Light';
}
#rightcolumn-inner h2:first-child{
margin-top:0
}
#leftcolumn h2,#leftcolumn h3{
margin:10px 0
}
dt{
background:#eebbc3;
border-radius:5px;
color:#232946;
clear:both;
font-weight:700;
float:left;
margin:0 0 5px;
padding:0 2px;
width:10em /* 文字数によっては調整 */
}
dd{
border-bottom:1px dashed #ccc;
margin:0 0 5px 12em; /* dtのwidthに2足してます */
padding:0 2px;
}
em{
background:#9656a1;
background:-webkit-linear-gradient(rgba(255,231,150,0) 50%, #9656a1  0%);
background:linear-gradient(rgba(255,231,150,0) 50%, #9566a1 0%);
font-style:normal;
font-weight:700
}
input,textarea{
background:#fffff3;
border:1px solid;
border-radius:5px;
margin:3px 0;
width:250px
}
textarea{
height:50px
}
#leftcolumn input,#leftcolumn textarea{
width:100%
}
hr{
border-top:1px solid #ccc
}
.marker{
background:#956bc4;
background:-webkit-linear-gradient(rgba(237,130,126,0) 50%, #956bc4 0%);
background:linear-gradient(rgba(237,130,126,0) 50%, #956bc4 0%);
padding:1px 5px;
margin-top:5px;
}
.dcline{
border-left:8px solid #eebbc3;
margin:5px 0;
padding:3px 3px 3px 10px
}
.textbox{
background:#eebbc3;
color:#232946;
border-radius:5px;
margin:10px 0;
padding:3px 1em;
text-align:center
}
.title{
color:#eebbc3;
font-size:1.5em;
font-weight:700;
margin:1em 0
}
/*  複数行の右寄せ
------------------------------ */
.r-justified{
text-align:right
}
.r-justified p{
display:inline-block;
text-align:left
}
.inline{
display:inline-block
}

/* ===================================
横幅1000pxで切り替え
=================================== */

@media screen and (max-width:1000px){

dt{float:none;clear:none}
dd{margin-left:20px}
input,textarea{width:100%}
img{max-width:100%;height:auto}/* 画像の縮小表示 */
}

/* ===================================
スマホ、タブレット用
横幅768pxで切り替え
=================================== */

@media screen and (max-width:768px){
body{
font-size:1.5em;
line-height:1.7
}
#wrapper{
background:#fff url(graphix/moominspring.jpg) fixed;
margin:40px 0;
padding:10px 20px 20px
}
#header-inner{
padding:0 40px 10px 0;
text-align:left;
top: 0;
left: 1em;
}
#rightcolumn{
background:#232946; 
border-radius:10px;
box-shadow:2px 2px 2px #999;
padding:20px 10px 20px 20px
}
h2, h3{
  color:#fffffe !important;
}
#about{
  flex-direction:column;
}
#about img{
  max-width:80%;
  height:auto;
  align-self:center;
  margin:5% 0
}
#about.current img{
  height:1em !important;
  width:1em !important;
  margin:0 1px 0 0
}
aside a:not(.bg-none){
background:none;
border-bottom:1px solid #ccc;
border-radius:0;
color:#3f7d65;
font-weight: bolder;
margin:2px 2px 2px 0;
padding:0 2px
}
#index{
background:url(graphix/moominspring.jpg);
padding:0
}
#index-inner{
background:none;
border:0;
padding:20px 0;
width:280px
}
/*  いじらなくていいのまとめておきます
------------------------------ */
#wrapper{width:auto;min-height:inherit}
header{top:-2.5em;position:absolute;z-index:auto;padding-left: inherit;padding-top: 20px;width: 100%;}
#header-bg{background:none;height:2em;width:100%;position: absolute;}
#header-inner{position:absolute;width:max-content;-ms-transform:translate(0);-webkit-transform:translate(0);transform:translate(0);height: max-content;padding: 0;}
#rightcolumn{float:none;width:auto}
#leftcolumn{float:none;margin:0;min-height:inherit}
#leftcolumn-inner{border:0;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
#rightcolumn-inner{padding:0;margin-top: -1em;}

/* ===================================
スマホ、タブレット用メニュー
=================================== */

/*  スライド
------------------------------ */
#leftcolumn{
background:#fff; /* 背景色 */
border-left:5px solid #c7bf7e;
padding:70px 10px 20px; /* メニューボタン分空ける */
line-height:2;
margin:0;
position:fixed;
height:100%;width:300px; /* (*1)同じにする */
top:0;right:0;
-ms-transform:translate(300px); /* (*1)同じにする */
-webkit-transform:translate(300px); /* (*1)同じにする */
transform:translate(300px); /* (*1)同じにする */
transition:.3s;
z-index:1000
}
#leftcolumn-inner{
background:rgba(255,255,255,.5); /* 背景色 */
padding:0 10px
}
#side-bg{
background:rgba(51,51,51,.5)/* 周りの背景色 */
}
/*  メニュー
------------------------------ */

nav li a{
background:#eebbc3 !important;
border-radius:5px;
color:#121629;
margin:5px;
padding:0 8px
}
nav > ul > li + li::before{
content:""
}
/*  メニューを開くボタン
------------------------------ */
#open{
background:url(graphix/iconbg.gif);
background-size:contain;
border:3px solid #e2a2ff;
border-radius:20px;
box-shadow:2px 2px 2px #ccc;
display:inline-block;
position:absolute;
right:20px;top:10px; /* 位置 */
height:40px;width:40px; /* サイズ */
z-index:1001
}
#leftcolumn.open{-ms-transform:translate(0);-webkit-transform:translate(0);transform:translate(0)}
#side-bg{display:none;position:fixed;height:100%;width:100%;top:0;left:0;z-index:999}
#open.buttonclose{position:fixed}
#open-icon,#open-icon:before,#open-icon:after{background:#444}/* 線の色 */
#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)}
}