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,textarea{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}
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}
.if-container{display:inline-block;margin:0 auto;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.ifrm{border:none;display:block;height:100%;width:100%}
.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}
/* この上はいじらないほうがいいです */

html{
font-size:62.5%;
height:100%
}
body{
background:#FFFFFF;/* インラインフレーム内背景色 */
color:#3a2c25;/* インラインフレーム内文字色 */
font-family:Verdana,Roboto,'游ゴシック','Yu Gothic','游ゴシック体','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-size:1.3em;/* 文字の大きさ */
letter-spacing:.1em;
line-height:1.5;
padding:20px 20px 60px
}
a{
color:#7b3c2c;
text-decoration:underline;
text-decoration-color:#ccc /* 一部ブラウザのみ */
}
a:hover{
color:#db856e
}
#page a{
color:#f4eee2;
text-decoration:none
}
#page a:hover{
color:#ccc
}
/*--------------------------------------------------------
インラインフレーム外設定
--------------------------------------------------------*/
#page{
background:#3a2c25;
color:#f4eee2;
padding:0;
height:100%;
text-align:center
}
header{
background:#3a2c25;
color:#f4eee2;
padding:10px;
position:relative;
text-align:left;
min-height:100px;width:100%
}
#wrapper{
color:#3a2c25;
text-align:left
}
#contents-wrap{
float:left;
width:100%
}
#contents{
background:#f4eee2;
border-left:3px solid #3a2c25;
border-right:3px solid #3a2c25;
border-bottom:3px solid #3a2c25;
margin:0 250px; /* 左側の幅と右側の幅と同じ値を左右に指定 */
height:100%;
}
#leftcolumn{
background:#FFCCCC;
margin-left:-100%;
width:250px; /* 幅 */
}
#rightcolumn{
background:#FFCCCC;
margin-left:-250px;
width:250px; /* 幅 */
}
#leftcolumn,#rightcolumn{
float:left;
padding:20px;
overflow:auto;
-webkit-overflow-scrolling:touch
}
footer{
background:#3A2C25;
min-height:80px;width:100%
}
#footer-inner{
padding:10px
}
#open{display:none}
/*--------------------------------------------------------
index
--------------------------------------------------------*/
#index{
margin:20px auto;
text-align:center
}
.indexbox{
margin:0 auto;
padding:20px;
width:400px
}
.box0{
margin:0 auto;
width:220px
}
.box1,.box2,.box3,.box4{
float:left;
margin:5px;
padding:10px;
text-align:center;
height:100px;width:100px;
word-wrap:break-word
}
.box1 a,.box2 a,.box3 a,.box4 a{
color:#f4eee2;
display:inline-block;
height:100%;width:100%
}
.box1{background:#3a2c25}
.box2{background:#dab87f}
.box3{background:#db856e}
.box4{background:#7b3c2c}
/*--------------------------------------------------------
ページ上部へのリンク
--------------------------------------------------------*/
#pagetop {/* 位置はscroll.jsで設定 */
background:#dab87f;/* 背景 */
color:#3a2c25;/* 色 */
border:3px solid #3a2c25;
height:50px;width:50px; /* 大きさ */
border-radius:30px;
box-sizing:border-box;
display:block;
line-height:16px;
padding-top:22px;
position:fixed;
text-align:center;
z-index:10
}
#pagetop:before {
content:'\25B2';
font-size:14px;
position:absolute;
left:0;top:7px;
width:100%
}
#pagetop:hover,#fl a:hover{
background:rgba(222,222,222,.8);
transition:.3s
}
/*--------------------------------------------------------
ボタン
--------------------------------------------------------*/
.button {
  display: inline-block;
  width: 200px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
  background-color: #3A2C25;
  color: #F4EEE2;
  border: 2px solid #3A2C25;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button:hover {
  background-color: #FFCCCC;
  border-color: #3A2C25;
  color: #3A2C25!important;
}
/*--------------------------------------------------------
ボタン2
--------------------------------------------------------*/
.button2 {
  display: inline-block;
  width: 200px;
  height: 34px;
  text-align: center;
  text-decoration: none;
  line-height: 34px;
  outline: none;
  background-color: #3A2C25;
  color: #F4EEE2;
  border: 2px solid #3A2C25;
}
.button2::before,
.button2::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button2,
.button2::before,
.button2::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button2:hover {
  background-color: #FFCCCC;
  border-color: #3A2C25;
  color: #3A2C25!important;
}
/*--------------------------------------------------------
見出し、枠、線
--------------------------------------------------------*/
h1{
font-size:1.6em;
margin:0 0 10px 0
}
h2,.h2{
font-size:1.3em;
font-weight:700;
margin:.5em 0;
padding:.2em 0;
position:relative;
border-bottom:2px solid #3a2c25
}
.h2:first-letter{
font-size:1.5em;
color:#7b3c2c
}
.h2::after{
background:#7b3c2c;
position:absolute;
bottom:-2px;left:0;
content:'';
height:2px;width:20%;
z-index:2
}
h3,.h3{
border-bottom:1px dashed #3a2c25;
font-size:1.2em;
font-weight:400;
margin:20px 0
}
dt{
background:#c5c1a4;
border-radius:5px;
font-weight:700;
margin:0 0 5px;
padding:3px;
width:12em
}
dd{
border-bottom:dotted 1px #999;
margin:0 0 5px;
margin:0 0 5px 1em
}
em{
background:#fe9;
font-weight:700
}
input,textarea{
background:#f4eee2;
border:1px solid;
margin:3px 0;
width:200px
}
textarea{
height:50px
}
hr{
display:block;
border:0;  
border-top:1px solid #ccc;
margin:1em 0;
padding:0;
height:1px
}
.marker{
background:#FFFFFF; /* Ie9 */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f4eee2), color-stop(0.49, #f4eee2), color-stop(0.5, #FFCCCC), color-stop(1, #FFCCCC));
background:-webkit-linear-gradient(transparent 50%, #FFCCCC 0%);
background:linear-gradient(transparent 50%, #FFCCCC 0%)
}
.ln01{
border-left:5px solid #FFCCCC;
margin:5px 0;
padding:0 5px
}
.ln02{
border-left:5px solid #3A2C25;
margin:5px 0;
padding:0 5px
}
.textbox{
border:1px dotted #3a2c25;
margin:10px 0;
padding:3px;
text-align:center
}
.title{
color:#7b3c2c;
font-size:1.5em;
font-weight:700;
letter-spacing:.1em;
margin:2em 0;
text-align:right
}
.txt{
border-left:1px dotted #3a2c25;
margin:1em;
padding:0 0 0 1em
}
.frame{
border:6px solid #f4eee2;
border-radius:3px;
box-shadow:4px 4px 0 #ccc
}
ul:before,ul:after{content:" ";display:table}
ul:after{clear:both}
/*--------------------------------------------------------
イラストページ
--------------------------------------------------------*/
#lightbox {
	background-color: #eee;
	padding: 10px;
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
}
#lightboxCaption {
	color: #333;
	background-color: #eee;
	font-size: 90%;
	text-align: center;
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
}
#lightboxIndicator {
	border: 1px solid white;
}
#lightboxOverallView,
#overlay {
	background-color: #000;
	opacity: 0.5;
}
* html #lightboxOverallView,
* html #overlay {
	background-color: #000;
	filter: Alpha(opacity=50);
}
/*--------------------------------------------------------
暗天/星ノ唄用
--------------------------------------------------------*/
.inline-block {
    display: inline-block;      /* インラインブロック要素にする */
    height:  auto;             /* 高さ指定 */
    width: auto;                 /* 幅指定 */
    vertical-align:top;
}

.center {
	text-align:center;
}

/*--------------------------------------------------------
スマホ、タブレット用
横幅768pxで切り替え
--------------------------------------------------------*/
@media screen and (max-width: 768px){

video {
  width: 100%;
  height: 100%;
}
#header-inner{
min-height:40px;
padding-right:120px;
height:70px;
}
#wrapper{
background:#FFCCCC
}
#contents-wrap{
float:none;
padding:20px
}
#contents{
border-radius:10px;
border:0;
margin:0;
padding:20px;
}
#side-inner{
height:100%;
overflow:auto;
-webkit-overflow-scrolling:touch
}
#leftcolumn,#rightcolumn{
float:none;
padding:20px;
margin:0 0 10px;
width:auto
}
footer{
background:#3A2C25;
min-height:inherit;
}
.indexbox{
width:auto
}
/* 画像の縮小表示 */
img{
max-width:100%;
height:auto
}
/* スライド */
#side{
background:rgba(58,44,37,.8); /* 背景色 */
padding:70px 20px 20px; /* メニューボタン分上を空ける */
height:100%;width:300px; /* (*1)同じにする */
transition:all .3s;
transform:translate(300px); /* (*1)同じにする */
-ms-transform:translate(300px); /* (*1)同じにする */
-webkit-transform:translate(300px); /* (*1)同じにする */



position:fixed;
top:0;right:0;
z-index:1000
}
#side.open{
transform:translate(0);
-ms-transform:translate(0);
-webkit-transform:translate(0)
}
#side a{
color:#f4eee2;
background:#3a2c25;
border-radius:5px;
display:inline-block;
margin:3px 3px 3px 0;
padding:3px
}
#side a:hover{
background:#9d885a
}
#side a img{
vertical-align:bottom
}
/*--------------------------------------------------------
暗天/星ノ唄用
--------------------------------------------------------*/
.inline-block {
    display: block;
    height: auto;             /* 高さ指定 */
    width: 215px;                 /* 幅指定 */
    margin: 20px;
}

/* サイドを開くボタン */
#open{
background:#bb4b3b;/* 背景 */
color:#f4eee2; /* 文字色 */
border:1px dashed #3a2c25;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
display:inline-block;
padding:10px;
position:absolute;
height:40px;width:120px; /* 大きさ */
top:20px;right:10px; /* 位置 */
z-index:1001;
-ms-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
transform:rotate(-10deg)
}
#open.buttonclose{
position:fixed
}
.open-text{height:40px;margin-left:40px}
#open-icon,#open-icon:before,#open-icon:after{background:#f4eee2} /* 線の色 */
#open-icon{display:block;margin:-1px 0 0 0;position:absolute;top: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)
}
}