[data-ruby] {
	position: relative;
}
[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -2em;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 0.48em;
}

ruby	{ruby-align:distribute-letter;}
/* 以下追加 
rt {
	display: none;
} */
/*===============================================
●style.css	画面の横幅が737px以上
===============================================*/
@media print, screen and (min-width:	737px){
header	nav	ul.accordion		li:nth-of-type(6)	a	{	border-bottom: solid 2px #E62300 !important;}
div#main	{	margin-top: -21px;}
div#main	article	{
	display: inline-block;
	float: right;
	width: 698px;
	height:100%;
	min-height: 100%;
	margin-left: -1px;/* 縦線が途切れないよう */
	color: #4A4232;
	text-align: left;
	border-collapse: collapse;
	padding-bottom: 10px;
}
div#main	article	h1	{
	margin-bottom: 15px;
	margin-left: 50px;
	margin-top: 37px;
	font-size: 27px;
}
div#main	article	div.story	{
	width: 630px;
	margin-bottom: 35px;
	margin-left: 50px;
}
div#main	article	div.story	img	{
	float: right;
	width: 211px;
	margin: 7px 20px auto 30px;
}

div#main	article	div.story	img.yoko	{
	float: right;
	width: 100%;
	max-width: 310px;
	margin: 7px 0 auto 30px;
}

div#main	article	div.story	p	{
	font-size: 1.08em;
	line-height: 180%;
}
div#main	article	div.story	p	a	{}

/*============================
BOX
============================*/
.box01,.box02	{
	width: 630px;
	margin-left: 50px;
	margin-bottom: 38px;
	color: #4A4132;
}
.box01	h3,.box02	h3	{
	margin-bottom: 8px;
	font-size: 17px;
}
.box01	h3	span,.box02	h3	span	{
	font-size: 15px;
}
.box01	p,.box02	p	{	font-size: 14px;}
/*============================
Next	Prev
============================*/
div.btn_next_pev	{
	width: 630px;
	margin-left: 50px;
	padding: 0;
	/*position: absolute;*/
	bottom: 78px;
}
div.btn_next_pev	a	{
	display: inline-block;
	border: 1px solid #EAEAEA;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #EAEAEA;
	behavior: url("../common/img/PIE.htc");
	color: #999;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
}
div.btn_next_pev	a:first-of-type	{
	float:	left;
	padding: 3px 22px 3px 14px;
}
div.btn_next_pev	a:last-of-type	{
	float:	right;
	padding: 3px 14px 3px 22px;
}

/*============================
*LeftSide
============================*/
div#storylist	{
	border-right: solid 1px #CCC;
	display:	inline-block;
	float:	left;
	width:	250px;
	height:100%;
	min-height: 100%;
	margin: 0;
	padding: 20px 20px 30px 2px;
	text-align: left;
}
#storylist	h2	{
	width:	250px;
	padding: 8px 0;
	color: #886843;
	font-size: 15px;
	border-bottom: solid 1px #CCC;
	cursor: pointer;
}
#storylist	h2	a	{	color: #886843;}
#storylist	h2	span	{
	display: block;
	color: #000;
	font-size: 14px;
	font-weight: normal;
}

/* ナビアイコン */
#storylist	h2.ttlnomi:before	{
	content: url("img/open.gif");
	float: right;
	margin: 3px 3px auto;
}
#storylist	h2:before	{
	content: url("img/open.gif");
	float: right;
	margin: 12px 3px auto;
}
#storylist	h2.on:before {
	content: url("img/close.gif");
}
/* 一番目のナビアイコン 
#storylist	h2:first-of-type:before	{
	content: url("img/close.gif");
}
#storylist	h2.open:first-of-type:before {
	content: url("img/open.gif");
	float: right;
	margin: 12px 3px auto;
}*/

/* coming soon */
#storylist	h3	{
	width:	250px;
	padding: 8px 0;
	color: #666;
	font-size: 13px;
	line-height: 18px;
	border-bottom: solid 1px #CCC;
}
/*#storylist	h3:before	{
	content: url("img/open.gif");
	float: right;
	margin: 12px 3px auto;
}*/
/* -----List---- */
div#storylist	dl	{
/*	display: none;*/
	display: table;
	margin: 14px auto;
	padding-bottom: 32px;
	border-bottom: solid 1px #CCC;
}/*
div#storylist	dl.open	{
	display: table;
	margin: 14px auto;
	padding-bottom: 32px;
	border-bottom: solid 1px #CCC;
}*/
div#storylist	dl	dt	{
	clear: both;
	display: inline-block;
	float: left;
	width: 70px;
	margin-top: 5px;
	font-size: 12px;
}
div#storylist	dl	dd	{
	width: 170px;
	margin-left: 70px;
	margin-top: 5px;
	color: #886843;
	font-size: 14px;
}
div#storylist	dl	dd	a	{
	color: #886843;
}

div#storylist	p.to_video	a	{
	display:block;
	width: 248px;
	margin: 18px auto;
	padding: 9px 0;
	border: 1px solid #EAEAEA;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #EAEAEA;
	behavior: url("../common/img/PIE.htc");
	color: #333;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}
/* BNR */
div#storylist	p.to_video	a	img	{
	 float: left;
	margin-left: 25px;
	margin-top: 0;
}
/*========== Video Web =============*/
div.film	{
	margin: 18px auto 13px;
}
div.film	h1.ffm	{
	color: #333;
	text-align: left;
	font-size: 21px;
	letter-spacing: 1px;
}
div.film	h1.ffm img	{
	position: relative;
	top: 3px;
	margin: 0 10px;
}
div.film	iframe	{
	width: 970px;
	height: 539px;
	margin: 11px auto 8px;
	background: #000;
}
div.film	p	{
	width: 970px;
	margin: 0 auto;
	padding: 0;
}
div.film	p	a	{
	display: inline-block;
	float: left;
	width: 124px;
	padding: 3px 0;
	border: 1px solid #EAEAEA;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #EAEAEA;
	behavior: url("../common/img/PIE.htc");
	color: #999;
	text-align: center;
	font-size: 13px;
	font-weight: bold;

}
div.film	p	img	{
	float: right;
	margin-right: 8px;
}
}

/*===============================================
●smart.css		画面の横幅が736pxまで
===============================================*/
@media	only	screen	and	(max-width:736px){
div#main	article	{
	width: 90%;
	margin: 0 auto;
	color: #4A4232;
	text-align: left;
}
div#main	article	h1	{
	margin: 5% 0;
	font-size: 1.2em;
}
div#main	article	div.story	{
	margin-bottom: 5%;
}
div#main	article	div.story	img	{
	float: right;
	width: 30%;
	margin: 2% 0 3% 2%;
}
div#main	article	div.story	img.yoko	{
	float: none;
	width: 100%;
	max-width: 400px;
	margin: 2% auto 3% auto;
}
div#main	article	div.story	p	{	font-size: 0.9em; line-height: 180%;}
div#main	article	div.story	p	a	{}

/*============================
BOX
============================*/
.box01,.box02	{
	margin-bottom: 5%;
	color: #4A4132;
}
.box01	h3,.box02	h3	{	font-size: 1em;}
.box01	p	{	font-size: 0.9em;}
.box02	p	{	font-size: 0.8em;}
/*============================
Next	Prev
============================*/
div.btn_next_pev	{
	padding: 8% 0;
}
div.btn_next_pev	a	{
	display: inline-block;
	border: 1px solid #EAEAEA;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #EAEAEA;
	behavior: url("../common/img/PIE.htc");
	color: #999;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
}
div.btn_next_pev	a:first-of-type	{
	float:	left;
	padding: 3px 10px 3px 3px;
}
div.btn_next_pev	a:last-of-type	{
	float:	right;
	padding: 3px 3px 3px 10px;
}


/*============================
*LeftSide
============================*/
div#storylist	{
	width:94%;
	margin: 3% auto;
	border-top: solid 1px #CCC;
	text-align: left;
}
#storylist	h2	{
	padding: 8px 0;
	color: #886843;
	font-size: 0.95em;
	border-bottom: solid 1px #CCC;
	cursor: pointer;
}
#storylist	h2	a	{	color: #886843;}
#storylist	h2	span	{
	display: block;
	color: #000;
	font-size: 0.9em;
	font-weight: normal;
}
/* ナビアイコン */
#storylist	h2:before	{
	content: url("img/open.gif");
	float: right;
	margin: 12px 5px auto;
}
#storylist	h2.on:before {
	content: url("img/close.gif");
}
/* 一番目のナビアイコン 
#storylist	h2:first-of-type:before	{
	content: url("img/close.gif");
}
#storylist	h2.open:first-of-type:before {
	content: url("img/open.gif");
	float: right;
	margin: 12px 5px auto;
}*/
/* coming soon */
#storylist	h3	{
	padding: 8px 0;
	color: #666;
	font-size: 13px;
	line-height: 18px;
	border-bottom: solid 1px #CCC;
}
#storylist	h3:before	{
	content: url("img/open.gif");
	float: right;
	margin: 12px 3px auto;
}
/* -----List---- */
div#storylist	dl	{
	display: table;
	width: 100%;
	margin: 14px auto;
	padding-bottom: 6%;
	border-bottom: solid 1px #CCC;
	text-align: left;
}
div#storylist	dl	dt	{
	clear: both;
	display: inline-block;
	float: left;
	width: 70px;
	margin-left: 3px;
	margin-top: 5px;
	font-size: 0.8em;
}
div#storylist	dl	dd	{
	width: auto;
	margin-left: 70px;
	margin-top: 5px;
	color: #886843;
	font-size: 0.9em;
}
div#storylist	dl	dd	a	{
	color: #886843;
}

	
div#storylist	p.to_video	a	{
	display:block;
	width: 248px;
	margin: 18px auto;
	padding: 9px 0;
	border: 1px solid #EAEAEA;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #EAEAEA;
	behavior: url("../common/img/PIE.htc");
	color: #333;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}
div#storylist	p.to_video	a	img	{
	float: left;
	margin-left: 25px;
	margin-top: 0;
}
/*========== Video Web =============*/
div.film	{
	width: 94%;
	margin: 5% auto;
}
div.film	h1.ffm	{
	color: #333;
	text-align: left;
	font-size: 1.2em;
	letter-spacing: 1px;
}
div.film	h1.ffm img	{
	position: relative;
	top: 3px;
	margin: 0 8px;
}
div.film	iframe	{
	width: 100%;
	margin: 11px auto 8px;
	background: #000;
}
div.film	p	{
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
div.film	p	a	{
	display: inline-block;
	float: left;
	width: 124px;
	padding: 3px 0;
	border: 1px solid #EAEAEA;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #EAEAEA;
	behavior: url("../common/img/PIE.htc");
	color: #999;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
}
div.film	p	img	{
	float: right;
	margin-right: 8px;
}

}