@charset "utf-8";
/*-----凡例-----*/
/*基本定義　　■*/
/*イラスト　　絵*/
/*音楽　　　　♪*/
/*縦書き和文　◆*/
/*システム　　●*/
/**/
/**/
/*p（段落）を使用することで全体選択の範囲が共通の色になる*/


/*
--------------------------------------------------------------
--------------------------------------------------------------
■    　　　　　　　　　　基本定義　　　 　    　  　   　  ■
--------------------------------------------------------------
--------------------------------------------------------------
*/
* {
  margin: 0;
  padding: 0;
}
html,body{width:100%;
height:100%;
font-family: FixedSys,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif,sans-serif,メイリオ,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3';
-webkit-text-size-adjust: 100%;
/*スマホ向けに画面を表示してくれるウェブキット*/
 background-image:url("../img/common/lineline.png" ),url("../img/washi03.jpg" );
 background-repeat:no-repeat,repeat;
 background-position:top left,none;
 

}


a{text-decoration:none;}/*リンクのアンダーライン打消し*/


::selection {
	background:#c8d5bb; /* Safari文字背景変更(ドラッグしたとき)（ちぐさ） */
}

::-moz-selection {
	background:#c8d5bb; /* Firefox文字背景変更(ドラッグしたとき)（ちぐさ） */
}

a:link {color:#544a47;}/*選択前の色*/
a:visited{color:#544a47;} /*文字色*/
a:hover {color:#ee827c;} /*カーソルが乗っているリンクの色*/
a:active{color:#ec6d71;} 

.current a {/*選択中のページのメニューの色変更*/
color: #ee827c;
}

.current2 a {/*選択中のページのメニューの色変更*/
color: #FFFFFF;
}



p.car{	/*サブメニュー用のサイズ指定（共通）*/
	font-size:120%;
	 font-weight: bold;
	 font-family:KaiTi; 
	line-height: 40px;
	margin-top:10px;
	margin-bottom:10px;
	margin-right:0px;/*和文サブメニューのマージン（右からどれくらい離れているか）*/


	}
	


	
	
.paddingtop{/*パディング取だけの存在*/
		padding-top:1em;
		}
		


h1{
	font-family:DFKai-SB;
	
	}
	

	
/*
--------------------------------------------------------------
--------------------------------------------------------------
     　　　　　　　　　　基本定義　　　 　    　  　   　     
--------------------------------------------------------------
--------------------------------------------------------------
*/











/*---------------------------------サイドメニューぬるぬる--------------------------*/



#slide_menu{
	position: fixed;
	top: -100px;
	left: 0px;
	width: 100%;
	height: 105px;/*左に表示される枠の高さ*/
	background-image:url("../img/eee.png" );
    /*background: #d6e9ca;/*メニュー色*/
	border:solid;
	z-index:10;
}

#slide_menu ul{
    margin: 0;
    padding: 0;
}
#slide_menu li + li{
    border-top: solid 1px #FFFFFF; /*各メニューの下のラインの色*/
}
#slide_menu li{
   border-bottom: solid 1px #FFFFFF; /*各メニューの下のラインの色*/
    list-style: none;
}
#slide_menu li a{
    display: block;
    padding: 20px 0;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
#button{
    position: absolute;
    top: 100px;
	left:300px;
    width: 100px;
    height: 30px;
    outline: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
	background-color:#a6a5c4;
	 background-repeat: no-repeat;
	   -webkit-border-radius: 10px;
    border-radius: 10px;
	z-index:1;
}

#button2{
    position: absolute;
    top: 70px;
	left:230px;
    width: 120px;
    height: 80px;
    outline: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
	background-color:#9d896c;
	 background-repeat: no-repeat;
	   -webkit-border-radius: 10px;
    border-radius: 10px;
	opacity: 0.8;

    font-size: 100%;
   transform: rotate(3deg);
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
	z-index:1;
}

#button3{
    position: absolute;
    top: 30px;
	left:500px;
    width: 100px;
    height: 30px;
    outline: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
	background-color:#9e8b8e;
	 background-repeat: no-repeat;
	   -webkit-border-radius: 10px;
    border-radius: 10px;
	z-index:1;
}

#sippo{
    position: absolute;
    top: 400px;
	left:0px;
    width: 50px;
    height: 120px;
    outline: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
	 background-repeat: no-repeat;
	   -webkit-border-radius: 10px;
	   background-image:url(../img/ic/sippo.png);
    border-radius: 10px;
	z-index:1;
}






/*---------------------------------サイドメニューぬるぬる--------------------------*/








/*画像個別指定*/


.a1{
background-image : url(../img/border_line/kami_topright.png);
background-repeat : no-repeat; /* 背景画像を繰り返さない */
background-position : right bottom; /* 背景画像をセルの右下に固定 */
width : 14px; /* 背景画像の幅に合わせましょう */
height : 14px; /* 背景画像の高さに合わせましょう */
}
.a2{
background-image : url(../img/border_line/kami_top.png);
background-repeat : repeat-x; /* 背景画像を水平方向に繰り返す */
background-position : center bottom;
width:300px;
height : 14px;
}
.a3{
background-image : url(../img/border_line/kami_topleft.png);
background-repeat : no-repeat;
background-position : left bottom;
width : 14px;
height : 14px;
}
.b1{
background-image : url(../img/border_line/kami_left.png);
background-repeat : repeat-y; /* 背景画像を垂直方向に繰り返す */
background-position : right center;
width : 14px;
height:220px;
}
.b2{
background-color : #FFFFFF;
}
.b3{
background-image : url(../img/border_line/kami_right.png);
background-repeat : repeat-y;
background-position : left center;
width : 14px;
height:217px;
}
.c1{
background-image : url(../img/border_line/kami_bottomright.png);
background-repeat : no-repeat;
background-position : right top;
width : 14px;
height : 14px;
}

.c2{
background-image : url(../img/border_line/kami_bottom.png);
background-repeat : repeat-x;
background-position : center top;
width:300px;
height : 14px;
}
.c3{
background-image :url(../img/border_line/kami_bottomleft.png);
background-repeat : no-repeat;
background-position : left top;
width : 14px;
height : 14px;
}


/*ここまで画像個別設定*/

/*画像個別指定（右から文字列の解除用）*/


.a11{
background-image : url(../img/border_line/kami_topleft.png);
background-repeat : no-repeat; /* 背景画像を繰り返さない */
background-position : right bottom; /* 背景画像をセルの右下に固定 */
width : 14px; /* 背景画像の幅に合わせましょう */
height : 14px; /* 背景画像の高さに合わせましょう */
}
.a21{
background-image : url(../img/border_line/kami_top.png);
background-repeat : repeat-x; /* 背景画像を水平方向に繰り返す */
background-position : center bottom;
width:300px;
height : 14px;
}
.a31{
background-image : url(../img/border_line/kami_topright.png);
background-repeat : no-repeat;
background-position : left bottom;
width : 14px;
height : 14px;
}
.b11{
background-image : url(../img/border_line/kami_right.png);
background-repeat : repeat-y; /* 背景画像を垂直方向に繰り返す */
background-position : right center;
width : 14px;
height:220px;
}
.b21{
background-color : #FFFFFF;
}
.b31{
background-image : url(../img/border_line/kami_left.png);
background-repeat : repeat-y;
background-position : left center;
width : 14px;
height:217px;
}
.c11{
background-image : url(../img/border_line/kami_bottomleft.png);
background-repeat : no-repeat;
background-position : right top;
width : 14px;
height : 14px;
}

.c21{
background-image : url(../img/border_line/kami_bottom.png);
background-repeat : repeat-x;
background-position : center top;
width:300px;
height : 14px;
}
.c31{
background-image :url(../img/border_line/kami_bottomright.png);
background-repeat : no-repeat;
background-position : left top;
width : 14px;
height : 14px;
}


/*ここまで画像個別設定*/




/*--------------------------------------▼これより↓は、ヘッダーとフッターを固定▼-----------------------------------*/


#container 	{
	width: 100%;
	
  position: relative;
height:auto;
  margin:0 auto;
}

body > #container {
  height: auto;
}





/*-----------------------------------------▲ここまで▲-----------------------------------------*/

/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------ここから各ページのブロックレベル----------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

.center{
	float:right;
	margin:0 auto;
	width:750px;
	height:auto;
	margin-top:40px;
	}
	
	.left{
	float:left;
	margin:0 auto;
	width:180px;
	height:auto;
	/*background:#FFFFFF;
	 border: 5px double #001133;*/
	 margin-top:40px;
	}
	
	.right_mail{
	float:right;
	margin:0 auto;
	width:550px;
	height:auto;
	margin-top:40px;
	}
	
		.left_mail{
	float:left;
	margin:0 auto;
	width:400px;
	height:auto;
	/*background:#FFFFFF;
	 border: 5px double #001133;*/
	 margin-top:40px;
	}
	
		.right_main{
	float:right;
	padding-top: 40px;
	margin:0 auto;
	width:250px;
	height:auto;
	
	}
	
		.left_main{
	float:left;
	margin:0 auto;
	width:700px;
	height:auto;
	/*background:#FFFFFF;
	 border: 5px double #001133;*/
	 
	}
	

/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------ここまでブロックレベル--------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/


/*------------------------------------★要になるソース★-----------------------------------------*/

/*-------------スクロールバー変更---------------*/
::-webkit-scrollbar {
    width: 19px;

}
 

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
	
}
 

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,21,0.8); /*カラー*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 

}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(153,145,204,0.4); /*カラー*/

}



.header {
	width:1050px;
	height:auto;
	margin:0 auto;
	text-align:center;
}




/*-------------スクロールバー変更ここまで---------------*/




/*------------------------------コンテンツの量により変える-------------------------------------*/
.content {
	/*background:#AADAF2;*/
	width:1050px;/*巻物のサイズを指定する。数値を小さくすると左寄りになります*/
	height:100%;
	margin:0 auto;
	text-align:center;
	padding-top:auto;
	padding-left:20px;
	padding-right:60 20 0;
	padding-bottom:auto;
}

.left{
	float:left;
	margin:0 auto;
	width:130px;
	height:auto;
	}
	
.center{
	float:right;
	margin:0 auto;
	width:800px;
	height:auto;

	
	}



/*フロート指定されているブロックレベルを強制解除（これないと画面がコンテンツ量に応じて伸縮しない）*/
.clear{
clear: both;}


.footer {
width:100%;
	height:auto;
	position: relative;


	text-align:center;
}



.absolute_left {
   position: fixed !important;  
    position: absolute ;  
    bottom: 0;  
    left: 0;  
    width: 21px;  
height:100%;
 background-repeat:repeat;
	background-image:url("../img/wahuline.png");
	color:FFF;
	z-index:2;

}



.absolute_right {
	   position: fixed !important;  
    position: absolute;  
    bottom: 0;  
    right: 0;  
    width: 21px;  
 height:100%;
	color:FFF;
 background-repeat:repeat;
	background-image:url("../img/wahuline.png");
	z-index:3;

}

.absolute_bottom {
   position: fixed !important;  
   direction: ltr !important;
    unicode-bidi: embed;
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
height:21px;
 background-repeat:repeat;
	background-image:url("../img/wahuline.png");
	color:FFF;
	z-index:2;

}

.absolute_top {
   position: fixed !important;  
    position: absolute;  
    top: 0;   
    width: 100%;  
 height:21px;
	color:FFF;
 background-repeat:repeat;
	background-image:url("../img/wahuline.png");

	z-index:3;

}


/*-------------------------------------------★要になるソース　ここまで★---------------------------------------------*/



/*
--------------------------------------------------------------
--------------------------------------------------------------
◆    　　　　　　　　縦書き和文用CSS　　　    　  　   　  ◆
--------------------------------------------------------------
--------------------------------------------------------------
*/
wabun {
    display:block;
    line-height: 1;
    margin: 0;
	margin-bottom: 0em ;
	margin-left: 0em ;
	margin-top: 0em ;
	margin-right: 0.1em ;/*和文メニューの配置*/

	height: auto;/*和文メニューの高さ調整*/
	
	
	

}



span_wa {
    color: #494a41;
    float: right;
    font-size: 100%;
    margin-top: 0.6em ;
	margin-left:0.2em ;
	margin-bottom: 0.5em ;
	margin-right:0.5em ;
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    width: 1.0em;
	
    word-break: break-all;
    word-wrap: break-word;

	
}


span_wa:nth-child(1) {
margin-right:0.5em ;

	 
}
span_wa:nth-child(2) {
margin-right:0.5em ;
}
span_wa:nth-child(3) {
  margin-right:0.5em ;

}
span_wa:nth-child(4) {
 margin-right:0.5em ;
}
span_wa:nth-child(5) {
  margin-right:0.5em ;
	 
}
span_wa:nth-child(6) {
  margin-right:0.5em ;

}
span_wa:nth-child(7) {
  margin-right:0.5em ;
	 
}
span_wa:nth-child(8) {
margin-right:0.5em ;
	 
}
span_wa:nth-child(9) {
margin-right:0.5em ;
	 
}
span_wa:last-child {
margin-right:0.5em ;

	 
}

span_wabun {/*個別設定なしで文章打つ場合のＣＳＳ*/

    display:block;
    line-height: 1;
    margin: 0;
	margin-bottom: 0.6em ;
	margin-left: 0.6em ;
	margin-top: 0em ;
	margin-right: 0em ;
    overflow:hidden ;

	height: 360px;/*和文メニューの高さ調整*/


    color: #494a41;
    float: right;
    font-size: 80%;
    text-align: center;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    width: 15px;
	
    word-break: break-all;
    word-wrap: break-word;

}





span_wabun_long {/*嗜則のＣＳＳ*/

    line-height: 1;
    margin: 0;

    overflow:hidden ;

	height: 450px;/*和文メニューの高さ調整*/


    color: #494a41;
    float: right;
    font-size: 90%;
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    width: 17px;
	
    word-break: break-all;
    word-wrap: break-word;

}

span_wabun_short {/*嗜則のＣＳＳ*/


    line-height: 1;
    margin: 0;

    overflow:hidden ;

	height: 100px;/*和文メニューの高さ調整*/


    color: #494a41;
    float: right;
    font-size: 90%;
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    width: 17px;
	
    word-break: break-all;
    word-wrap: break-word;

}


/**/
p#o{
	transform: rotate(-90deg);/*縦書き用「。」「ー」の回転*/
	}
p#i{
	transform: rotate(180deg);/*縦書き用「、」「かっこ」の回転*/
	}
p#x{
	transform: rotate(90deg);/*縦書き用「アルファベット」の回転*/
	}
	
	
p#t{
	transform: rotate(90deg);/*縦書き用「。」の回転*/
	}
p#g{
	transform: rotate(180deg);/*縦書き用「、」「かっこ」の回転*/
	}
p#z{
	transform: rotate(90deg);/*縦書き用「アルファベット」の回転*/
	}
	
	
#content_wabun {
	overflow: hidden;
height: 550;
	/*margin-top:60px;*/
	width: 100%;

		  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;  
  border-radius: 10px;
	/*padding-top:380px;*//*fixed用*/
	/*background-image:url("../img/washi02.jpg" );*/
	background-color:#FFFFFF;
	/*
	 box-shadow:0px 0px 10px 3px #000000;
    -moz-box-shadow:0px 0px 10px 3px #000000;
    -webkit-box-shadow:0px 0px 10px 3px #000000;
	border:solid;
	*/

}


div.section {
	width: 1200px;
	background: #FFFFFF;
	padding: 20px;
	height: 550px;
	 display: table-cell;
	margin-right: 2px;
	background-image:url("../img/sharekomi_chaya.png" );/*セクションの背景の画像*/
	background-repeat: no-repeat;

	
}

div.section_kuro {
	width: 1200px;
	background: #FFFFFF;
	padding: 20px;
	height: 550;
	 display: table-cell;
	margin-right: 2px;
	background-image:url("../img/chaya_musume.png" );/*セクションの背景の画像*/
	background-repeat: no-repeat;

	
}
div.section_mail {
	width: 1200px;
	background: #FFFFFF;
	padding: 20px;
	height: 550;
	 display: table-cell;
	margin-right: 2px;
	background-image:url("../img/sharekomi_chaya.png" )/*,
						url("../img/jarekomi_kuro.png")*/;/*セクションの背景の画像*/
	background-repeat: no-repeat;
background-position:top,right 80px bottom;
	
}

wa_h1{/*和文テーブル内のの見出し１*/
   display:block;
    line-height: 1;
    margin: 0;
	margin-bottom: 0.6em ;
	margin-left: 0.6em ;
	margin-top: 1em ;
	margin-right: 1em ;
	padding-top: 2em ;
    overflow:hidden ;
	height: 350px;/*和文メニューの高さ調整*/
    color: #494a41;
    float: right;
    font-size: 150%;
	font-weight: bold;
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    width: 1.8em;
    word-break: break-all;
    word-wrap: break-word;
	font-size: 140%;
	background-image:url("../img/common/waku.jpg");
	background-repeat:no-repeat;

	 
}



wa_h2{/*和文テーブル内のの見出し１*/
   display:block;
    line-height: 1;
    margin: 0;
	margin-bottom: 0.6em ;
	margin-left: 0.6em ;
	margin-top: 0em ;
	margin-right: 1em ;
    overflow:hidden ;
	height: 220px;/*和文メニューの高さ調整*/
    color: #494a41;
    float: right;
    font-size: 120%;
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    width: 1.0em;
    word-break: break-all;
    word-wrap: break-word;
}




/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　　縦書き和文用CSS　　　    　  　   　  　
--------------------------------------------------------------
--------------------------------------------------------------
*/




/*
--------------------------------------------------------------
--------------------------------------------------------------
●    　　　　　　　　ロード画面用CSS　　　    　  　   　  ●
--------------------------------------------------------------
--------------------------------------------------------------
*/
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #c8c2c6;
  z-index: 1;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
margin: -100px 0 0 -100px;/*一番左はたぶん画像の上下を調整。一番右は画像の左右を調整*/
  text-align: center;
  color: #000000;
  z-index: 2;
}
/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　　ロード画面用CSS　　　    　  　   　  　
--------------------------------------------------------------
--------------------------------------------------------------
*/


/*
--------------------------------------------------------------
--------------------------------------------------------------
絵    　　　　　　イラストモーダル用CSS　　    　  　   　  絵
--------------------------------------------------------------
--------------------------------------------------------------
*/
#contents2 {
    margin: 0 auto;
    padding: 10px 0 50px 0;
    width: 100%;

}



 /*（らくがきの絵霞用）*/
#open01,
#open02,
#open03,
#open04,
#open05,
#open06,
#open07,
#open08,
#open09,
#open10,
#open11,
#open12,
#open13,
#open14,
#open15{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
/*ここまで（らくがきの絵霞用）*/

 /*（絵霞の物語用）*/
#open01a,
#open02a,
#open03a,
#open04a,
#open05a,
#open06a,
#open07a,
#open08a,
#open09a,
#open10a,
#open11a,
#open12a,
#open13a,
#open14a,
#open15a{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
/*ここまで（絵霞の物語用）*/

 /*（和風の絵霞用）*/
#open01b,
#open02b,
#open03b,
#open04b,
#open05b,
#open06b,
#open07b,
#open08b,
#open09b,
#open10b,
#open11b,
#open12b,
#open13b,
#open14b,
#open15b{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
/*ここまで（和風の絵霞用）*/
 
.close_overlay {
    top: ;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -9999px;
    position: absolute;
    background: #a6a5c4;/*画面の暗さの色*/
    opacity: 0.5;/*画面の暗さ*/
    z-index: 5;
}
 
.modal_window {
 top: 50%;
    left: 50%;
    margin: -550px 0 0 -480px;/*一番左はたぶん画像の上下を調整。一番右は画像の左右を調整*/
    width: 960px;
    height: auto;
    text-align: center;/*拡大画像のより方*/
    display: block;
    background: #FFFFFF;
    position: absolute;
    z-index: 10;
}
 
.modal_window h2 {/*ウインドウ内での見出し２の大きさ*/
    margin-bottom: 20px;
    width: 400px;
    height: 30px;
    line-height: 30px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    text-indent: 15px;
    background: #000000;
}
.modal_window p {/*ウインドウ内での文字の大きさ*/
    padding: 0 15px 15px 15px;
    font-size: 12px;
    line-height: 160%;
    text-align: left;/*ウインドウの文字の配置場所*/
}


 

@-webkit-keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}
div#modal div:target {
    -webkit-animation-name: modalFadeIn; 
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
    display:block;
}
/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　イラストモーダル用CSS　　 　   　  　   　  
--------------------------------------------------------------
--------------------------------------------------------------
*/








/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　メインページ用CSS　　　 　   　  　   　  
--------------------------------------------------------------
--------------------------------------------------------------
*/


#menu {
  width: 100%;
  height: 48px;
  margin: 0;
  list-style-type: none;
  background: #544a47;
  border-radius: 10px;

}
#menu li {
  width: 25%;
  float: left;
  padding: 0;
  margin: 0;
  text-align: center;
}
#menu li a {
  width: auto;

  font-size: 17px;
  font-weight: bold;
  margin: 0;
  padding: 12px 0;
  text-decoration: none;
  display: block;
}
#menu li a:hover {
  background: #ffa443;
  background: rgba(0,0,0,0.3);
37
  box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
  border-radius: 10px;
}






/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　メインページ用CSS　　　 　   　  　   　  
--------------------------------------------------------------
--------------------------------------------------------------
*/








/*
--------------------------------------------------------------
--------------------------------------------------------------
♪    　　　　　　　　　音楽室用CSS　　      　  　     　  ♪
--------------------------------------------------------------
--------------------------------------------------------------
*/

/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　　　音楽室用CSS　　      　  　     　  　
--------------------------------------------------------------
--------------------------------------------------------------
*/
















/*
--------------------------------------------------------------
--------------------------------------------------------------
■    　　　　　　　　　見出し用CSS　　      　  　     　  ■
--------------------------------------------------------------
--------------------------------------------------------------
*/
  h1{

    overflow:hidden ;
    color: #494a41;
    float: left;
    font-size: 200%;
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);



}

h2{
    margin: 0 0 1.0em;
    padding: 0.1em;
    border-left: 15px solid #769164;
    border-bottom: 1px dashed #769164;
    font-size: 1.143em;
    font-weight: bold;
	color: #494a41;
}

h3{
	color:#4f455c;
	font-size:16px;
	border-bottom: 7px solid #594255;
}



/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　　　見出し用CSS　　      　  　     　  　
--------------------------------------------------------------
--------------------------------------------------------------
*/

/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　　　ロード用CSS　　      　  　     　  　
--------------------------------------------------------------
--------------------------------------------------------------
*/
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #FFFFFF;
  z-index: 1;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 200px;
  font-size:200%;
margin: -100px 0 0 -100px;/*一番左はたぶん画像の上下を調整。一番右は画像の左右を調整*/
  text-align: center;
  color: #000000;
  z-index: 1;
}


/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　　　ロード用CSS　　      　  　     　  　
--------------------------------------------------------------
--------------------------------------------------------------
*/

/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　　コピーライト用CSS     　  　     　  　
--------------------------------------------------------------
--------------------------------------------------------------
*/




.header_arrange13 {margin: 0 auto;}

div.copy:after {
content: " 2017 sharekomi chaya All Rights Reserved.";
color: #2c4f54;
}


/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　コピーライト用CSS　      　  　     　  　
--------------------------------------------------------------
--------------------------------------------------------------
*/

/*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　　 　絵本用CSS　　       　  　     　  　
--------------------------------------------------------------
--------------------------------------------------------------
*/
/*
コード参考サイト様
https://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/

BookBlock.js
jquery.bookblock.js
bookblock_funk.js(これはコードを別ファイルに移しただけ)
jquerypp.custom.js
modernizr.custom.ja

bookblock.css
demo1.css

*/


.bb-bookblock {
	width: 800px;/*サイズ変更１*/
	height: 565px;
	margin: 0 auto;
	position: relative;
	z-index: 100;
	-webkit-perspective: 3300px;
	perspective: 3300px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bb-page {
	position: absolute;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
}

.bb-vertical .bb-page {
	width: 50%;
	height: 100%;
	left: 50%;
	-webkit-transform-origin: left center;
	transform-origin: left center;
}

.bb-horizontal .bb-page {
	width: 100%;
	height: 50%;
	top: 50%;
	-webkit-transform-origin: center top;
	transform-origin: center top;
}

.bb-page > div,
.bb-outer,
.bb-content,
.bb-inner {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bb-vertical .bb-content {
	width: 200%;
}

.bb-horizontal .bb-content {
	height: 200%;
}

.bb-page > div {
	width: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.bb-vertical .bb-back {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.bb-horizontal .bb-back {
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}

.bb-outer {
	width: 100%;
	overflow: hidden;
	z-index: 2;
}

.bb-overlay, 
.bb-flipoverlay {
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.bb-flipoverlay {
	background-color: rgba(0, 0, 0, 0.2);
}

.bb-bookblock.bb-vertical > div.bb-page:first-child,
.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.bb-bookblock.bb-horizontal > div.bb-page:first-child,
.bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

/* Content display */
.bb-content {
	background: #fff;
}

.bb-vertical .bb-front .bb-content {
	left: -100%;
}

.bb-horizontal .bb-front .bb-content {
	top: -100%;
}

/* Flipping classes */
.bb-vertical .bb-flip-next,
.bb-vertical .bb-flip-initial {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.bb-vertical .bb-flip-prev {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.bb-horizontal .bb-flip-next,
.bb-horizontal .bb-flip-initial {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

.bb-horizontal .bb-flip-prev {
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.bb-vertical .bb-flip-next-end {
	-webkit-transform: rotateY(-15deg);
	transform: rotateY(-15deg);
}

.bb-vertical .bb-flip-prev-end {
	-webkit-transform: rotateY(-165deg);
	transform: rotateY(-165deg);
}

.bb-horizontal .bb-flip-next-end {
	-webkit-transform: rotateX(15deg);
	transform: rotateX(15deg);
}

.bb-horizontal .bb-flip-prev-end {
	-webkit-transform: rotateX(165deg);
	transform: rotateX(165deg);
}

.bb-item {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	background: #fff;
}

/* No JS */
.no-js .bb-bookblock, 
.no-js ul.bb-custom-grid li {
	width: auto;
	height: auto;
}

.no-js .bb-item {
	display: block;
	position: relative;
}


/*demo1*/


.bb-custom-wrapper {
	width: 800px;/*サイズ変更２*/
	position: relative;
	margin: 0 auto 40px;
	text-align: center;
}

.bb-custom-wrapper .bb-bookblock {
	box-shadow: 0 12px 20px -10px rgba(81,64,49,0.6);
}

.bb-custom-wrapper h3 {
	font-size: 1.4em;
	font-weight: 300;
	margin: 0.4em 0 1em;
}

.bb-custom-wrapper nav {
	width: 100%;
	height: 30px;
	margin: 1em auto 0;
	position: relative;
	z-index: 0;
	text-align: center;
}

.bb-custom-wrapper nav a {
	display: inline-block;
	width: 120px;
	height: 30px;
	text-align: center;
	border-radius: 2px;
	/*background: #72b890;*/
	/*color: #fff;*/
	font-size: 0;
	margin: 2px;
}

.bb-custom-wrapper nav a:hover {
	opacity: 0.6;
}

.bb-custom-icon:before {
	font-family: 'arrows';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 20px;
	line-height: 30px;
	display: block;
	-webkit-font-smoothing: antialiased;
}

.bb-custom-icon-first:before,
.bb-custom-icon-last:before {
	content: "";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-arrow-right:before {
	content: "";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-first:before {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* No JS */
.no-js .bb-custom-wrapper {
	height: auto;
}

.no-js .bb-custom-content {
	height: 470px;
}

 
 /*
--------------------------------------------------------------
--------------------------------------------------------------
　    　　　　　　　　 　絵本用CSS　　       　  　     　  　
--------------------------------------------------------------
--------------------------------------------------------------
*/

/* btn */
.btn_area {
	position: relative;
	height: 50px;
	margin-top: 10px;
}

.btn_vote {
	position: absolute;
	width: 50px;
	height: 50px;
	cursor: pointer;
	background-size: 50px 50px;
	border-radius: 25px;
	transition: all 0.2s linear;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.btn_vote.on {
	background-color: #fd616b;
	animation: anime_01 0.2s;
}

@keyframes anime_01 {
	50% {
		right: -10px;
		bottom: -10px;
		width: 70px;
		height: 70px;
		border-radius: 50px;
	}
}

.ico_heart {
	padding-left: 17px;
	background-size: 15px 15px;
}