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;
}
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;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}

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

html {
    font-size: 62.5%;
}
body {
    background: #fff url(images/bg.png); /* 背景 */
    color: #57450f; /* 文字色 */
    font-size: 1.3em; /* 文字の大きさ */
    font-family: "Segoe UI", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
}
/*  リンク
------------------------------ */
a {
    color: inherit;
}
#rightcolumn a,
aside a {
    color: #cf5c62;
}
a:hover {
    color: #9f9885;
}
#rightcolumn a {
    text-decoration: underline;
}

/* ===================================
基本
=================================== */

#wrapper {
    margin: 0 auto;
    padding: 20px 0;
    height: 100%;
    width: 1020px; /* 全体の幅・大きさはここで変更 */
    text-align: left;
}
header {
    min-height: 40px;
    z-index: 5;
}
#rightcolumn {
    float: right;
    height: 100%;
    width: 704px; /* #rightcolumn-innerのwidth+64 */
}
#rightcolumn-inner {
    background: #fff;
    margin: 0 32px;
    padding: 10px;
    height: 100%;
    width: 640px;
}
#leftcolumn {
    float: left;
    text-align: left;
    height: 100%;
    width: 304px; /* #leftcolumn-innerのwidth+64 */
}
#leftcolumn-inner {
    background: #fff;
    text-align: center;
    margin: 0 32px;
    padding: 10px;
    height: 100%;
    width: 240px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

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

#index {
    margin: 20px auto;
    padding: 20px;
}
#indexcontents-box {
    background: #fff;
    border: 1px dotted #57450f;
    padding: 20px;
    width: auto;
}

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

#menu {
    background: #fff;
    display: block;
    line-height: 1;
    margin: 5px 0;
    text-align: center;
}
nav li a,
nav li span {
  display: block;
  width: 117px;         /* match image width */
  height: 19px;         /* half of the total image height */
  background: url('/images/about.png') no-repeat top center;
  background-size: 100% auto;
  text-indent: -9999px; /* hide text if you want image-only buttons */
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: none;
}

/* Hover = shift background to show bottom half of the sprite */
nav li a:hover,
nav li span:hover {
  background-position: bottom center;
}
.sub-menu {
    display: none;
    overflow: hidden;
}
.sub-menu li a {
    background: #fffff3;
}
/*  メニューの「>」
------------------------------ */
nav li span:after {
    border-top: 1px solid #57450f; /* 色 */
    border-right: 1px solid #57450f; /* 色 */
    content: "";
    display: block;
    margin-top: -5px;
    position: absolute;
    height: 5px;
    width: 5px;
    top: 50%;
    right: 10px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: 0.5s;
}
nav li span.open:after {
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
/*  メニューを開くボタン非表示
------------------------------ */
#open{display:none}


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

#pagetop {
    background: rgba(255, 132, 132, 0.8); /* 背景 */
    color: #fff; /* 色 */
    border-radius: 5px;
    display: block;
    padding: 10px;
    position: fixed;
    text-align: center;
    z-index: 10;
}
#pagetop:hover {
    background: rgba(255, 132, 132, 0.5);
}
#fl {
    text-align: right;
}

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

h1 {
    font-size: 1.3em;
    line-height: 1;
}
h2 {
    font-size: 1.2em;
    background: #ffd0d0;
    border-radius: 3px;
    border: 1px dashed;
    margin: 1em 0;
    padding: 0 1em;
}
h3 {
    border-bottom: 1px dashed;
    font-weight: 700;
    margin: 1em 0;
    padding: 0 5px;
}
dt {
    background: #9f9885;
    border-radius: 5px;
    color: #fff;
    clear: both;
    font-weight: 700;
    float: left;
    margin: 0 0 5px;
    padding: 0 5px;
    width: 10em;
}
dd {
    border-bottom: dotted 1px #9f9885;
    margin: 0 0 5px 12em;
}
em {
    background: #ffd0d0;
    background: -webkit-linear-gradient(rgba(255, 208, 208, 0) 50%, #ffd0d0 0%);
    background: linear-gradient(rgba(255, 208, 208, 0) 50%, #ffd0d0 0%);
    font-style: normal;
    font-weight: 700;
}
input,
textarea {
    background: #fff;
    border: 1px solid;
    margin: 3px 0;
    width: 100%;
}
textarea {
    height: 50px;
}
hr {
    border: 0;
    border-top: 1px solid #ccc;
    display: block;
    margin: 1em 0;
    padding: 0;
    height: 1px;
}
.marker {
    background: #ffe07f;
    padding: 1px 5px;
}
.dcline {
    border-left: 5px solid #ffd0d0;
    margin: 5px 0;
    padding: 3px;
}
.textbox {
    border: 1px solid;
    margin: 10px 0;
    padding: 3px;
    text-align: center;
}
.title {
    color: #ff8c8c;
    font-size: 1.5em;
    font-weight: 700;
    margin: 2em 0;
    text-align: right;
}
.txt {
    border-left: 1px dotted;
    color: #999;
    margin: 1em;
    padding: 0 0 0 1em;
}
.frame {
    background: #fff;
    border-radius: 3px;
    box-shadow: 4px 4px 4px #ccc;
    padding: 6px;
}

/* ===================================
枠
=================================== */

/* 以下はいじらないほうがいいです */
.u01 {
    background: url(images/f-ue.gif) repeat-x;
    height: 32px;
    margin: 0 32px;
}
.s01 {
    background: url(images/f-sita.gif) repeat-x;
    height: 32px;
    margin: 0 32px;
}
.box-top {
    background-image: url(images/f-kado1.gif), url(images/f-kado2.gif);
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat;
    height: 32px;
}
.box-center {
    background-image: url(images/f-migi.gif), url(images/f-hidari.gif);
    background-position: top right, top left;
    background-repeat: repeat-y, repeat-y;
}
.box-bottom {
    background-image: url(images/f-kado3.gif), url(images/f-kado4.gif);
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat;
    height: 32px;
}
/* ===================================
スマホ、タブレット用
横幅768pxで切り替え
=================================== */

@media screen and (max-width: 768px) {
    body {
        font-size: 1.5em;
    }
    #wrapper {
        padding: 20px 20px 60px;
        width: 640px;
    }
    header,
    #rightcolumn,
    #leftcolumn {
        width: 592px; /* #rightcolumn-innerのwidth+64 */
    }
    #rightcolumn-inner,
    .u01,
    .s01 {
        width: 528px;
    }
    /*  リセットと画像の縮小
------------------------------ */
    #wrapper {
        position: relative;
        height: auto;
    }
    #rightcolumn,
    #leftcolumn {
        float: none;
        height: auto;
    }
    #rightcolumn-inner {
        height: auto;
    }
    #leftcolumn-inner {
        height: auto;
        width: auto;
    }
    h1:not(.index) {
        padding-right: 50px;
        min-height: 50px;
    } /* メニューを開くボタン分 */
    #fl a {
        float: none;
        display: inline-block;
    }
    dt {
        float: none;
        clear: none;
    }
    dd {
        margin-left: 20px;
    }
    #leftcolumn .box-top,
    #leftcolumn .box-bottom,
    #leftcolumn .u01,
    #leftcolumn .s01 {
        display: none;
    }
    img {
        max-width: 100%;
        height: auto;
    } /* 画像の縮小表示 */

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

    /*  スライド
------------------------------ */
    #leftcolumn {
        background: #fff; /* 背景色 */
        display: none;
        padding: 60px 20px 20px; /* ボタン分上を空ける */
        position: fixed;
        line-height: 2;
        text-align: center;
        height: 100%;
        width: 300px;
        top: 0;
        right: 0;
        z-index: 1000;
    }
    #side-bg {
        background: rgba(51, 51, 51, 0.5); /* 周りの背景色 */
    }
    /*  メニュー
------------------------------ */
    nav li a,
    nav li span {
        padding: 15px 0; /* 一列の高さはここで調節 */
    }
    /*  メニューを開くボタン
------------------------------ */
    #open {
        background: #fff; /* 背景 */
        border: 2px solid #57450f; /* 枠線 */
        border-radius: 20px;
        display: inline-block;
        position: absolute;
        height: 40px;
        width: 40px; /* 大きさ */
        right: 20px;
        top: 20px; /* 位置 */
        z-index: 1001;
    }
    #leftcolumn-innerwrap {
        height: 100%;
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    #side-bg {
        display: none;
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 999;
        cursor: pointer;
    }
    #open.buttonclose {
        position: fixed;
    }
    #open-icon,
    #open-icon:before,
    #open-icon:after {
        background: #57450f;
    } /* 線の色 */
    #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: 0.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);
    }
}

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

@media screen and (max-width: 600px) {
    #wrapper,
    #rightcolumn {
        width: auto;
    }
    #wrapper {
        padding: 20px 0 40px;
    }
    #rightcolumn-inner {
        background: #fff url(images/back02.gif) no-repeat 100% 100%;
        margin: 0;
        padding: 10px 20px 50px;
        width: auto;
    }
    header {
        padding: 0 20px;
        width: auto;
    }
    .box-top,
    .box-bottom,
    .box-center {
        background: none;
        height: auto;
        width: auto;
    }
    .u01,
    .s01 {
        margin: 0;
        width: 100%;
    }
    .u01 {
        background: url(images/f-ue02.gif);
    }
}
            #shimeji1,
            #shimeji2 {
              position: fixed;
              bottom: 0;
              width: 100px;
              height: auto;
              z-index: 9999;
              pointer-events: none;
            }

            
            #shimeji1 {
              left: 0;
            }
            
            #shimeji2 {
              
            
            }