@charset "Shift_JIS";

/* ***************************
 * *** COMMON
 * ************************** */
 
/* BASIC FORMAT */
html, body, form, address {	padding: 0;	margin: 0;	}
br {	letter-spacing: 0;	}/* IE can use Break Continued */
hr {	clear: both;	color: #FFFFFF;	display: none;	}/* Float Clear and Hide Element */
* html body hr {	width: 1px;	color: #FFFFFF;	display: none;	}/* Hack for IE 6 */
img, div {	padding: 0;	margin: 0;	border: 0;	}

.floatclear {	clear: both;	}
.hide {	position: absolute;	left: -100em;	height: 1px;	width: 1px;	overflow: hidden;	}/* Hide Element */





/* LIST FORMAT */
ul, ol, dl, dt, dd {	padding: 0;	margin: 0 0 20px;	}
ul, li {	list-style-type: none;	}

/* TABLE FORMAT */
table {	border: 0;	margin: 0 auto;	}
th, td {	vertical-align: top;	text-align: left;	}

/* FONT COLORS */
body {	color: #333;	}
a, a:visited {	color: #333;	text-decoration: underline;	}
a:hover, a:visited:hover {	color: #39f;	text-decoration: none;	}
.red {	color: #900;	font-size: 80%;	font-weight: normal;	}
.sub {	font-size: 80%;	font-weight: normal;	}
.sub2 {	font-size: 70%;	font-weight: normal;	}

/* PAGE FORMAT */
body {	text-align: center;	margin: 0 auto;	background: url(../img/head_bg.gif) top repeat-x;	}
#wrap {	margin: 20px auto 0;	clear: both;	text-align: center;	}
body#top #wrap {	margin-top: 0;	}

/* HEADER */
#headertop {	margin: 0 auto;	padding: 40px 0 0 180px;	width: 780px;	height: 126px;	overflow: hidden;	}
#headertop h1 {	display: block;	width: 402px;	float: left;	text-indent: -8099px;	}
#headertop img {	margin-right: 24px;	float: left;	}
#headertop p {	display: block;	width: 354px;	margin: 0 auto;	padding-top: 25px;	float: right; text-align: left;	}
#headertop p strong {	font-weight: normal;	}

#invitation {	text-align: left;	width: 938px;	margin: 0 auto;	}
#l_side {	float: left;	}
img#mainimage {	margin-left: 86px;	}/* メインイメージ */

/* NEWS */
#news { width:685px; height:24px; margin-top:10px; margin-bottom:0px; margin-left:21px; background-color:#fff;	border-top: solid 1px #fc9; border-bottom: solid 1px #fc9; }
#ascroller {	float: left;	margin-top: 4px;	}
p.reader {	float: left;	margin-top: 4px;	}
b.headline { display: block;	float: left;	padding: 4px 10px;	margin-right: 10px;	background-color: #f60;	color: #fff;	}
#ascroller div { line-height: 16px; }

/* TOP BANNER */
#top_banner { width:685px; height:77px; margin-top: 10px; margin-left:21px; margin-bottom: -10px; }

/* TOPPAGE MENU　改 */
#mainmenu {	width: 706px;	padding-top: 25px;	margin-bottom: 20px;	clear: both;	}
#mainmenu div.read,#mainmenu div.change  {	width: 347px;	float: left;}
#mainmenu div.read div,#mainmenu div.change div  { display:block; overflow:hidden;	border-right: #ccc solid 1px;	border-bottom: #ccc solid 1px; overflow:hidden;	}
#mainmenu div.read div { background-color: #fffadc;	}
#mainmenu div.change div { background-color: #e8faf5;	}
#mainmenu .read {	margin-right: 12px;	}
#mainmenu .read a.directry_title, #mainmenu .change a.directry_title {	display: block;	width: 347px;	height: 55px;	background: top no-repeat;	text-indent: -9999px;	}
#mainmenu .read a.directry_title {	background-image: url(../img/top_read_btn.gif);	}
#mainmenu .read a.directry_title:hover {	background: url(../img/top_read_btn.gif) bottom left no-repeat;	}
#mainmenu .change a.directry_title {	background-image: url(../img/top_change_btn.gif);	}
#mainmenu .change a.directry_title:hover {	background: url(../img/top_change_btn.gif) bottom left no-repeat;	}

#mainmenu p {	padding: 5px 10px 15px 125px;	margin: 0;}
#mainmenu .read p {		}
#mainmenu .change p {	}

#mainmenu ul { display:block; width:83%; min-height:23.8em; margin-left:2em; text-indent:-0.5em; background-color:#fff; padding:1em; border-radius:5px;box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) inset;}
#mainmenu ul p { margin-left:-125px; text-align:center; text-decoration:none; font-weight:bold; font-size:130%;}
#mainmenu ul li { margin-left:2em; list-style-type:disc; font-size:115%; font-weight:bold;}
#mainmenu ul li a { text-decoration:none;}
#mainmenu .read ul li a { text-decoration:none; color: #961f23}
#mainmenu .change ul li a { text-decoration:none; color: #1967a9;}
#mainmenu .read ul li a:hover, #mainmenu .change ul li a:hover {	color: #39f;	text-decoration: none;	}


#intro {	float: right;	display: block;	width: 220px;	padding-top: 20px;	margin-bottom: 30px;	}
#intro p {	margin: 0 10px 8px;	}
#intro li {	width: 220px;	overflow: hidden;	}
#intro li.try {	margin-bottom: 12px;	background: #ffcc66 url(../img/try_bg.gif) bottom no-repeat;	}
#intro li.try img {	margin: 0 10px 10px;	}


li.showcase {	background: #cce678 url(../img/showcase_bg.gif) bottom no-repeat;	}
li.showcase img {	float: right;	margin-right: 10px;	padding-bottom: 10px;	}
li.showcase ul {	margin-bottom: 10px;	}
li.showcase ul li {	display: block;	padding: 3px 0;	}
li.showcase ul li.last {	padding-bottom: 0; color: #CCCCCC;	}
li.showcase li a {	margin-left: 10px;	padding-left: 20px;	color: #090; background: url(../img/icon_book.gif) bottom left no-repeat;	text-decoration: underline;	}
li.showcase li a:hover {	color: #f05000;	background: url(../img/icon_book.gif) top left no-repeat;	text-decoration: underline;	}

#submenu {	width: 200px; margin: 0 auto 10px;	}
#submenu li.about, #submenu li.howto {	width: 200px;	}
#submenu li.about a, #submenu li.howto a {	display: block;	width: 200px;	height: 40px;	background: top no-repeat;	text-indent: -9999px;	}
#submenu li.about a {	background-image: url(../img/top_about_btn.gif);	}
#submenu li.about a:hover {background: url(../img/top_about_btn.gif) bottom left no-repeat;	}
#submenu li.howto a {	margin-top: 5px;	background-image: url(../img/top_howto_btn.gif);	}
#submenu li.howto a:hover {	background: url(../img/top_howto_btn.gif) bottom left no-repeat;	}
.free {	color: #f05000;	}

#intro li span {	display: block;	width: 220px;	height: 35px;	text-indent: -9999px;	}
#intro li.try span {	background: url(../img/try_title.gif) top no-repeat;	}
#intro li.showcase span {	background: url(../img/showcase_title.gif) top no-repeat;	}

/* GLOBAL NAVIGATION */
#mainnavi {	width: 960px;	height:38px;	background-image: url(../img/navi_bg.gif) ;	margin: 15px auto 20px;	}
#mainnavi li {	float: left;	font-weight: bold;	}
#mainnavi li a {	display: block;	width: 230px;	height:32px;	padding-top: 6px;	color: #333;	text-align: center; text-decoration: none;	}
#mainnavi li a:hover {	color: #f7931e;	background: url(../img/navi_btn.gif) top left no-repeat; text-decoration: none;	}
#mainnavi li a.home {	width: 38px;	background-image: url(../img/navi_home_btn.gif);	text-indent: -9999px;	overflow: hidden;	}
#mainnavi li a.home:hover {	background: url(../img/navi_home_btn.gif) bottom left no-repeat;	text-indent: -9999px;	}

/* GLOBAL NAVIGATION - CURRENT */
body#read a.navi_read,
body#change ul#mainnavi li a.navi_change,
body#sendmail ul#mainnavi li a.navi_change,
body#about ul#mainnavi li a.navi_about,
body#howto ul#mainnavi li a.navi_howto {	color: #f05000;	background: url(../img/navi_btn.gif) bottom left no-repeat;	}

/* FOOTER */
#footer {	text-align: left;	width: 940px;	height: 80px;	margin: 0 auto;	padding: 10px 10px 0;	background: url(../img/foot_line.gif) top center no-repeat;	}
#footer ul {	float: left;	margin: 0;	width: 635px;	}
#footer ul li {	display: inline;	margin-right: 15px;	}
#footer ul li.last {	margin: 0;	}
#footer ul li a {	padding: 3px 0 0 18px;	background: url(../img/arrow_right.gif) left no-repeat; text-decoration: none;	}
address {	color: #999;	margin: 0 0 10px;	font-style: normal;	font-family:Geneva, Arial, Helvetica, sans-serif;	}

#banner {	line-height: 1.6em;	color: #999;	width: 305px;	float: right;	}
#banner img {	margin-right: 10px;	float: left;	}

div.pagetop {	clear: both;	width: 938px;	text-align: right;	margin: 0 auto 10px;	}
div.pagetop a {	color: #999;	padding-left: 20px;	background: url(../img/btn_pagetop.gif) left no-repeat; text-decoration: none;	}
div.pagetop a:hover {	color: #000;	}


/* ***************************
 * *** CONTENT
 * ************************** */
	
/* CONTENT AREA */
#content_top {	width: 966px;		text-align: left;	padding: 0 10px;	}
#wrap h2 {	width: 900px;	margin:0 auto;	padding-top: 15px;	text-align: center;	font-size: 200%;	font-weight: bold;	}

/* CONTENT 絵本タイトル一覧 */
div.bookmenu {	/* width: 951px; */ width: 1268px;	text-align: left;	margin: 20px auto;	overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}
* html body div.bookmenu {	width: 966px;	}/* Hack for IE 6 */

div.booktitle {	width: 270px;	float: left;	padding: 17px;	margin: 0 6px 10px;	border-right: #ccc solid 1px;	border-bottom: #ccc solid 1px;	overflow: hidden;	}
* html body div.booktitle {	padding: 17px 17px 0 17px;	}/* Hack for IE 6 */

div.booktitle img {	display: block;	padding: 13px /*17px*/ 6.1% 0 /*13px*/ 5%; /* width: 240px; height: 180px; */ width: 88.9%; aspect-ratio: 4 / 3;	}
div.booktitle h3 {	display: block;	width: 270px;	font-size: 90%;	line-height: 1.3em;	color: #fff;	overflow: hidden;	font-weight: normal;	}
div.booktitle h3.b_title {	padding: 13px 15px 0;	width: 240px;	height: 1.8em;		text-align: center;	text-shadow: 0 1px 2px #333;	font-size: 130%;	line-height: 1.3em;	}
div.booktitle h3.b_title_02 {	padding: 13px 15px 0;	width: 240px;	height: 2.8em;		text-align: center;	text-shadow: 0 1px 2px #333;	font-size: 130%;	line-height: 1.3em;	}
div.booktitle h3.b_author {	padding-left: 50px;	width: 220px;	}
div.booktitle h3.b_writer {	padding-left: 50px;	width: 220px;	}
div.booktitle h3.b_illust {	padding-left: 50px;	width: 220px;	padding-bottom: 25px;	}
div.booktitle h3.b_illust_02 {	padding-left: 50px;	width: 220px;	padding-bottom: 30px;	}
div.booktitle p {	display: block;	margin-bottom: 15px;	height: 86px;	overflow: auto;	clear: both;	}
div.choice {	width: 270px;}
div.choice_blue {	width: 270px;}
div.choice a {	width: 206px;	height: 38px;	display: block;	margin: 0 auto;	padding-top: 16px;	text-align: center;	font-size: 160%;	font-weight: bold; text-decoration: none;	}
div.choice_blue a {	width: 206px;	height: 38px;	display: block;	margin: 0 auto;	padding-top: 16px;	text-align: center;	font-size: 160%;	font-weight: bold; text-decoration: none;	}

/* デジタル絵本を選ぶ */
body#read div.booktitle {	min-height: 503px;	background-color: #fffadc;	}/* 本の背景：黄色 */
* html body#read div.booktitle {	height: 518px;	}/* Hack for IE 6 */
/* body#read div.booktitle img {	background: url(../img/bookcover_y.jpg) top no-repeat; 	}
body#read div.booktitle div.t13 {	background: url(../img/bookcover_y.jpg) bottom no-repeat; 	} */
body#read div.booktitle h3 { /*	background: url(../img/bookcover_y.jpg) center 197px  no-repeat; */	}
body#read div.choice a {	background: url(../img/btn_yellow.gif) center top no-repeat;	}
body#read div.choice_blue a {	background: url(../img/btn_blue.gif) center top no-repeat;	color: #fff;	}
body#read div.choice a:hover {	background: url(../img/btn_yellow.gif) center -60px no-repeat;	color: #333;	}
body#read div.choice_blue a:hover {	background: url(../img/btn_blue.gif) center -60px no-repeat;	color: #fff;	}


body#read div.bookimage {	background: url(../img/bookcover_y.jpg) top no-repeat; background-size: contain;
min-height: 34em;
}


/* なりきる絵本を選ぶ */
body#change div.booktitle {	min-height: 546px;	background-color: #e8faf5;}/* 本の背景：水色 元561*/
* html body#change div.booktitle {	height: 561px;	}/* Hack for IE 6 元576*/
body#change div.booktitle img {	background: url(../img/bookcover_b.jpg) top no-repeat;	}
body#change div.booktitle div.t13 {	background: url(../img/bookcover_b.jpg) bottom no-repeat;	}
body#change div.booktitle h3 {	background: url(../img/bookcover_b.jpg) center 197px no-repeat;	}
body#change div.choice a {	background: url(../img/btn_blue.gif) center top no-repeat;	color: #fff;	}
body#change div.choice a:hover {	background: url(../img/btn_blue.gif) center -60px no-repeat;	color: #fff;	}

div.booktitle ul {	width: 260px;	margin: 0 auto 15px;	overflow: hidden;	}
div.booktitle ul li {	display: block;	margin-top: 7px;	}
div.booktitle ul li.face_needs {	float: left;	width: 135px;	margin-right: 9px; }
div.booktitle ul li.read_book {	float: left;	width: 115px;	}
div.booktitle ul li a {	padding-left: 18px;	height: 14px;	background: left no-repeat;	}
div.booktitle ul li.face_needs a {	background-image: url(../img/btn_make.gif);	}
div.booktitle ul li.read_book a {	background-image: url(../img/btn_read.gif);	}

div.booktitle span {	display: block;	margin-top: 7px;	}
div.booktitle span a {	margin: 0 auto;	padding: 5px 0 3px 18px;	background: url(../img/btn_plus.gif) left no-repeat;	}

/* CONTENT 絵本を読む 再生画面 */
#wrap h2#title {	text-align: right;	}
#wrap #make { width: 900px;	margin:0 auto; text-align: right;	}
#wrap #make a {	color: #003399;	text-decoration: underline;	}
#wrap #make a:hover {	color: #f05000;	text-decoration: underline;	}
#flasharea {	width: 100%;	text-align: center;	background: #000 url(../img/flash_bg.gif) top repeat-x;	margin: 20px 0 50px;	clear: both;	padding-bottom: 20px;	}

/* CONTENT フローチャート表示 */
div.flowchart {	width: 960px;	margin: 20px auto;	overflow: hidden;	}
div.flowchart h3 {	display: block;	margin: 15px auto 5px;	width: 781px;	height: 31px;	}
div.flowchart h3.step1, div.flowchart h3.step2, div.flowchart h3.step3, div.flowchart h3.step4 {	width: 415px;	margin: 0 0 10px 330px;	padding: 9px 0 0 100px;	text-align: left;	font-size: 180%;	float: left; }

div.flowchart h3.step1 {	background: url(../img/makeface.gif) left no-repeat;	}
div.flowchart h3.step2 {	background: url(../img/makeface.gif) left no-repeat;	}
div.flowchart h3.step3 {	background: url(../img/makeface.gif) left no-repeat;	}
div.flowchart h3.step4 {	background: url(../img/naming.gif) left no-repeat;	}

* html body div.flowchart h3.step1,
* html body div.flowchart h3.step2,
* html body div.flowchart h3.step3,
* html body div.flowchart h3.step4 {	margin: 0 0 10px 164px;	}/* Hack for IE 6 */

div.flow, div.interface {	width: 781px;	padding: 19px 0 53px;	margin: 0 auto 10px;	clear: both;	}
div.flow_box {	width: 741px;	padding: 19px 20px;	margin: 0 auto 10px;	border-bottom: #ccc solid 1px;	text-align: center;	}
div.flow_name {	width: 741px;	padding: 19px 20px;	margin: 0 auto 10px;	border-bottom: #ccc solid 1px;	text-align: center;	clear: both;	}

/* CONTENT 主人公になりきる */
body#change div.flow,/* 背景：水色 */
body#change div.interface {	background: #e8faf5 url(../img/flow_bg_blue.gif) bottom left no-repeat;	overflow: hidden;	}/* Flash Interface */
body#change div.flow_box, body#change div.flow_name {	background: #e8faf5;	overflow: hidden;	}
body#change #alert {	width: 781px;	margin: 20px auto 30px;	padding-top: 13px;	background: url(../img/outline_blue_t.gif) top repeat-y;	}
body#change #alert div {	width: 781px;	padding-bottom: 13px;	background: url(../img/outline_blue_b.gif) bottom no-repeat;	}

div.flow_box h3 {	text-align: left;	margin-top: 0;	}
div.flow_box p {	margin: 0;	}
div.flow_box img.selectbook {	float: left;	display: block;	margin-right: 18px;	}/* お試版の選択済み絵本 */

a.help {	display: block;	float: left;	width: 26px;	height: 25px;	margin-top: 15px;	background:url(../img/btn_help.gif) top right no-repeat;	text-indent: -9999px;	}
a.help:hover {	background:url(../img/btn_help.gif) bottom right no-repeat;	}

/* CONTENT 友達に知らせる */
body#sendmail div.flow {	background: #f4fae9 url(../img/flow_bg_green.gif) bottom left no-repeat;	}/* 背景：緑色 */
body#sendmail div.flow_box {	background-color: #f4fae9;	}
body#sendmail #alert {	width: 781px;	margin: 20px auto;	padding-top: 13px;	background: url(../img/outline_green_t.gif) top no-repeat;	}
body#sendmail #alert ul {	width: 51em;	text-align: left;	margin: 10px auto 0;	padding-top: 10px;	border-top: solid 1px #ccc;	}
body#sendmail #alert ul li {}	
body#sendmail #alert div {	width: 781px;	padding-bottom: 13px;	background: url(../img/outline_green_b.gif) bottom no-repeat;	}
body#sendmail #alert a {	color: #f05000;	text-decoration: underline;	}
body#sendmail #alert a:hover {	color: #f7931e;	text-decoration: underline;	}

#clear, #check, #send, #back, #doit {	border: none;	width: 237px;	height: 42px;	padding-top: 23px;	margin-top: 30px;	text-align: center;	font-size: 200%;	font-weight: bold;	text-shadow: 0 3px 10px #666; text-decoration: none;	}
#clear {	background: url(../img/btn_gray.gif) no-repeat;	color: #fff;	height: 65px;	padding-top: 0;	}
#check {	background: url(../img/btn_green.gif) no-repeat;	color: #fff;	height: 65px;	padding-top: 0;	}
#send {	background: url(../img/btn_red.gif) no-repeat;	color: #fff;	height: 65px;	padding-top: 0;	}
#back {	background: url(../img/btn_gray.gif) no-repeat;	color: #fff;	height: 65px;	padding-top: 0;	}
#doit {	background: url(../img/btn_red.gif) no-repeat;	color: #fff;	display: block;	margin: 30px auto 0;	}

/* CONTENT ブックマーク用URL表示ページ */
#ad_bookmark {	width: 775px;	margin: 30px auto 10px;	padding: 3px;	background: #FFF0B4 url(../img/bookmarkcorner.gif) top no-repeat;	text-align: center;	}
#ad_bookmark strong {	display: block;	padding: 10px;	background-color: #fff;	}

/* CONTENT 絵本Player下のリンクボタン（イエロー） */
div#add_btn1 {	width: 240px;	margin: 0 auto;	}
div#add_btn2 {	width: 480px;	margin: 0 auto;	}
div#add_btn3 {	width: 720px;	margin: 0 auto;	}
div#add_btn4 {	width: 960px;	margin: 0 auto;	}
* html body div#add_btn1 {	width: 245px;	margin: 0 auto;	}/* Hack for IE 6 */
* html body div#add_btn2 {	width: 490px;	margin: 0 auto;	}/* Hack for IE 6 */
* html body div#add_btn3 {	width: 735px;	margin: 0 auto;	}/* Hack for IE 6 */
* html body div#add_btn4 {	width: 980px;	margin: 0 auto;	}/* Hack for IE 6 */

ul#add_btn {	display: block;	overflow: hidden;	}
ul#add_btn a { text-decoration: none; }
ul#add_btn li {	display: block;	float: left;	width: 220px;	margin: 0 10px; text-align: left;	}
ul#add_btn li img {	float: left;	margin: 0 5px 7px 0;	}
ul#add_btn li p {	display: block;	width: 202px;	min-height: 130px;	padding: 15px 10px 10px 8px;	margin: 0;	background: url(../img/add_bg_top.gif) top no-repeat;	}
ul#add_btn li b {	display: block;	color: #f15a24;	font-size: 115%;	line-height: 1em;	text-align: center;	}
ul#add_btn li a.textlink {color: #f05000;	text-decoration: none;	}
ul#add_btn li a.textlink:hover {	color: #f7931e;	text-decoration: none;	}
ul#add_btn li span {	display: block;	}

ul#add_btn li a.change_face,
ul#add_btn li a.change_r_book,
ul#add_btn li a.change_book,
ul#add_btn li a.send_mail,
ul#add_btn li a.add_bookmark,
ul#add_btn li a.about,
ul#add_btn li a.change_flow,
ul#add_btn li a.howto {	display: block;	width: 182px;	height: 26px;	text-align: right;	padding: 8px 38px 0 0;	font-size: 150%;	font-weight: bold;	background: bottom center no-repeat;	clear: both;	}

ul#add_btn li a.change_face {	background-image: url(../img/add_bg_bottom.gif);	}/* なりきり顔を変える（イエロー） */
ul#add_btn li a.change_r_book {	background-image: url(../img/add_bg_bottom.gif);	}/* 他の絵本を読む（イエロー） */
ul#add_btn li a.change_book {	background-image: url(../img/add_bg_bottom.gif);	}/* 他の絵本でなりきる（イエロー） */
ul#add_btn li a.send_mail {	background-image: url(../img/add_bg_bottom.gif);	}/* お友達に知らせる */
ul#add_btn li a.add_bookmark {	background-image: url(../img/add_bg_bottom.gif);	}/* ブックマークはこちら（イエロー） */
ul#add_btn li a.about {	background-image: url(../img/add_bg_bottom.gif);	}/* なりきり絵本とは */
ul#add_btn li a.change_flow {	background-image: url(../img/add_bg_bottom.gif);	}/* 絵本の主人公になる（イエロー） */
ul#add_btn li a.howto {	background-image: url(../img/add_bg_bottom.gif);	}/* 主人公になりきる方法 */

/* この絵本の主人公になる（グリーン） */
ul#add_btn li.this p {	background-image: url(../img/add_bg_g_top.gif);	}
ul#add_btn li.this b { color: #007833; }
ul#add_btn li.this a.change_flow {	background-image: url(../img/add_bg_g_bottom.gif);	}

/* Flash Animation PR */
ul#add_btn li.pr {	width: 460px;	min-height: 130px;	margin: 0 10px;	}


/* CONTENT なりきり絵本とは、主人公になりきる方法、このサイトについて、お問い合わせ　 */
#content {	width: 861px;	margin: 30px auto 0;	text-align: left;	}
#content div {	overflow: hidden;	width: 861px;	margin-bottom: 20px; }
#content div.box {	width: 625px;	margin-left: 2px;	padding-left: 16px; border-left: solid 1px #ccc;	float: left;	}
#content div.box img {	float: right;	margin: 0 0px 15px 15px;	}
#content div.box img.left {	float: left;	margin: 0 15px 15px 0;	}
#content div.box p {	margin-top: 0;	margin-bottom: 30px; }
#content div.box p a {	color: #003399;	text-decoration: underline;	}
#content div.box p a:hover {	color: #f05000;	text-decoration: underline;	}
#content h3 {	width: 202px;	margin-right: 15px;	text-align: right;	display: block;	float: left;	}
#content div.subtitle { font-size: 160%; margin-bottom: 4px; letter-spacing: 0em; font-weight: bold;	margin-top: 25px;	clear: both;	}
#content div.subtitle_f { font-size: 160%; margin-bottom: 4px; letter-spacing: 0em; font-weight: bold;	margin-top: 0px;	clear: both;	}
#content ul {	margin: -20px 0 15px 20px;	}
#content li { list-style: disc outside;	}

.nofnd a {	color: #003399;	text-decoration: underline;	}

/* CONTENT なりきり絵本とは　 */
body#about #alert {	width: 601px;	padding-top: 13px;	background: url(../img/outline_orange_t.gif) top no-repeat;	}
body#about #alert div {	width: 575px;	padding: 0 13px 13px 13px;	margin: 0;	background: url(../img/outline_orange_b.gif) bottom no-repeat;	}
body#about div.box a {	color: #f05000;	}
body#about div.box a:hover {	color: #f7931e;	}
body#about div.box a.before {	padding-right: 15px;	background: url(../img/arrow_s_orange.gif) right no-repeat;	}
body#about div.box a.before:hover {	padding-right: 15px;	background: url(../img/arrow_s_orange_o.gif) right no-repeat;	}

ul#sample {	margin: 0px 12px 30px 12px;	padding: 0;	}
ul#sample li {	float: left;	margin-right: 12px;	padding-bottom: 13px;	list-style-type: none;	}
ul#sample li a {	display: block;	width: 187px;	padding: 139px 0 8px;	background: top left no-repeat;	text-align: center;	}
ul#sample li a.sample01 {	color: #fff;	background-image: url(../img/sample_01.jpg);	}
ul#sample li a.sample02 {	color: #fff;	background-image: url(../img/sample_02.jpg);	}
ul#sample li a.sample03 {	color: #fff;	background-image: url(../img/sample_03.jpg);	}
ul#sample li a.sample01:hover, ul#sample li a.sample02:hover, ul#sample li a.sample03:hover {	color: #FFFF99;	position: relative;	top: -2px;	}

/* CONTENT なりきり絵本とは - 絵本づくりの協力者募集 */
#content div#supporter {	width: 860px;	padding: 10px;	background-color: #f4fae9;	overflow: hidden;	border-right: #ccc solid 1px;	border-bottom: #ccc solid 1px;	}
#content div#supporter h3 {	text-align: center;	}
#content div#supporter span {	display: block;	width:159px;	height: 23px;	text-indent: -9999px;	background: url(../img/supporter_t.gif) top left no-repeat;	}
#content div#supporter h3 {	width: 141px;	padding: 18px 9px;	background: url(../img/supporter_b.gif) bottom left repeat-x;	font-size: 140%;	line-height: 1.3em;	margin-bottom: 0;	}
#content div#supporter div.box {	width: 663px;	margin: 0;	padding: 0;	border: none;	}
#content div#supporter div.box p {	margin: 7px 0;	padding-left: 18px;	background: url(../img/pin_orange.gif) left top no-repeat;	}


/* CONTENT 主人公になりきる方法　 */
ul#linkmenu {	display: block;	width: 40em;	height: 18px;	margin: 0 auto 40px;	}
ul#linkmenu li {	float: left;	list-style: none;	margin-right: 40px;	}
ul#linkmenu li.last {	margin-right: 0;	}
ul#linkmenu li a {	padding-left: 25px;	background: url(../img/linkarrow.gif) left no-repeat;	}
ul#linkmenu li a:hover {	color: #f7931e;	background-image: url(../img/linkarrow_o.gif);	position: relative;	top: 2px;	}

/* CONTENT このサイトについて　 */

/* CONTENT 運営会社　 */
body#company table {	margin-bottom: 20px;	}
body#company table a {color: #003399;	text-decoration: underline;	}
body#company table a:hover {	color: #f05000;	text-decoration: underline;	}
body#company table th {	width: 8em;	background-color: #F3F3F3;	}
body#company table td {	border-bottom: solid 1px #F3F3F3;}

/* CONTENT お問い合わせ　 */
#q_and_a p {	margin-bottom: 25px;	}
span.question {	display: block;	padding: 5px 5px 5px 35px;	font-weight: bold;	background: #FFEB99 url(../img/question.gif) top left no-repeat;	}
span.answer {	display: block;	padding: 5px 5px 5px 32px;	margin-left: 30px;	background: url(../img/answer.gif) top left no-repeat;	}
body#inquiry #alert {	width: 781px;	margin: 20px auto;	padding-top: 13px;	background: url(../img/outline_green_t.gif) top no-repeat;	}
body#inquiry #alert div {	width: 781px;	padding-bottom: 13px;	background: url(../img/outline_green_b.gif) bottom no-repeat;	}
















@media (min-width: 481px) and (max-width: 1079px) {
  
  body { width: 1080px;}
  #main { width: 1080px; margin: 0 auto; }
  
}









@media screen and (max-width : 480px), projection {
  body { width: 100vw;}
  #main { width: 94%; margin: 0 auto; }
  
  
#headertop {	margin: 0 auto;	padding: 40px 0 0 180px;	width: 780px;	height: 126px;	overflow: hidden;	}
#headertop {	padding: 40px 0 0 0;	width: 100%;	}
  
  #mainnavi {
    width: 960px;
    height: 38px;
    background-image: url(../img/navi_bg.gif);
    margin: 15px auto 20px;
    
    width: 94%;
    background-image: none;
    background-color: #fc6;
    border-radius: 0.3em;
    display: block;
    height: auto;
    overflow: hidden;
    padding: 0.4em;
}
  
#mainnavi li {
  width: 50%;
    height: auto;
}
  
#mainnavi li a {
  width: 100%;
    height: auto;
    background: url(../img/navi_btn_o.gif) bottom left no-repeat;
    background-size: contain;
  text-align: center;
  padding: 0;
  font-size: 90%;
}
   
#mainnavi li:first-child {
  display: none;
}
  
  body#read a.navi_read  {
    color: #f05000;
    height: auto;
    background: url(../img/navi_btn_o.gif) bottom left no-repeat;
    background-size: contain;
  text-align: center;
  padding: 0;
}
  
  
  #wrap h2 {
    width: 900px;
    margin: 0 auto;
    padding-top: 15px;
    text-align: center;
    font-size: 200%;
    font-weight: bold;
    
    width: 94%;
    font-size: 160%;
}
  
  
  div.bookmenu {
    /* width: 951px; */
    width: 1268px;
    text-align: left;
    margin: 20px auto;
    overflow: hidden;
    
    width: 480px;
    width:100%;
}
  
  div.booktitle {
    /*
    width: 270px;
    float: left;
    padding: 17px;
    margin: 0 6px 10px;
    border-right: #ccc solid 1px;
    border-bottom: #ccc solid 1px;
    overflow: hidden;
    */
    
    width: calc(100% / 2 - 4% - 6px);
    padding: 2%;
    margin: 0 0.6% 0.6em;
}
  
body#read div.bookimage {	background: url(../img/bookcover_y.jpg) top no-repeat; background-size: contain;
min-height: 20em;
}
  
  body#read div.booktitle {
    min-height: 503px;
    background-color: #fffadc;
    
    min-height: 84vw;
}
  
  div.booktitle img {
    display: block;
    padding: 13px /*17px*/ 6.1% 0 /*13px*/ 5%;
    width: 88.9%;
    aspect-ratio: 4 / 3;
    
    
    padding: 2vw  6.1% 0 5%;
}
  
  div.booktitle h3.b_title {
    padding: 13px 15px 0;
    width: 240px;
    height: 1.8em;
    text-align: center;
    text-shadow: 0 1px 2px #333;
    font-size: 130%;
    line-height: 1.3em;
    
    height: 2.0em;
    width: 100%;
    padding: 1.3em 2% 0.2em;
    font-size: calc( 100vw / 36 );
}
  
  div.booktitle h3.b_title_02 {
    padding: 13px 15px 0;
    width: 240px;
    height: 2.8em;
    text-align: center;
    text-shadow: 0 1px 2px #333;
    font-size: 130%;
    line-height: 1.3em;
    
    height: 2.6em;
    width: 94%;
    padding: 0.5em 2% 0.2em;
    font-size: calc( 100vw / 36 );
}
   
 .booktitle .t13 h3 {
    margin-bottom: 0;
    font-size: calc( 100vw / 40 );
  }
  
  
  div.booktitle h3.b_writer {
    padding-left: 50px;
    width: 220px;
    
    width: calc( 86% - 2.5em );
    padding-left: 4em;
}
  
  div.booktitle h3.b_illust {
    padding-left: 50px;
    width: 220px;
    padding-bottom: 25px;
    
    width: calc( 86% - 2.5em );
    padding-left: 4em;
}
  
  div.booktitle h3.b_illust_02 {
    padding-left: 50px;
    width: 220px;
    padding-bottom: 30px;
    
    width: calc( 86% - 2.5em );
    padding-left: 4em;
}
  
  div.booktitle h3.b_author {
    padding-left: 50px;
    width: 220px;
    
    width: calc( 86% - 2.5em );
    padding-left: 4em;
}
  
  div.booktitle p {
    display: block;
    margin-bottom: 15px;
    height: 86px;
    overflow: auto;
    clear: both;
    
    
    height: 12em;
    font-size:  calc( 100vw / 38 );
    width: 94%;
    margin: 0 auto;
}
  
  div.choice {
    width: 270px;
    
    width: 100%;
}

div.choice_blue {	width: 100%;}
div.choice a {	width: 100%;	font-size: 120%;	}
div.choice_blue a {	width: 100%;	font-size: 120%;	}
  
  body#read div.choice a {
    background: url(../img/btn_yellow_n.png) center top no-repeat;
    background-size: contain;
} 
  body#read div.choice_blue a {
    background: url(../img/btn_blue_n.png) center top no-repeat;
    background-size: contain;
}
  
  div.choice a {
    padding-top: 0.8em;
}
  
  
  div#add_btn4 {
    width: 960px;
    margin: 0 auto;
    
    
    width: 100%;
}
  
  ul#add_btn  {
    /*
    display: flex;
    flex-wrap: wrap;
    */
  }
  
  ul#add_btn li {
    display: block;
    float: left;
    margin: 0 10px;
    text-align: left;
    
  /*  width: 44%;
    margin: 0 1%;
    height: auto;
    display: flex; */
    
    margin: 0 calc((100% - 220px) / 2) 1em;
}
  
  ul#add_btn a {
    text-decoration: none;
    
    width: 100%;
}
  
  ul#add_btn li p {
    display: block;
    width: 202px;
    min-height: 130px;
    padding: 15px 10px 10px 8px;
    margin: 0;
    background: url(../img/add_bg_top.gif) top no-repeat;
    
    
   /*  width: 100%; */
}
  
  ul#add_btn li a.change_face, 
  ul#add_btn li a.change_r_book, 
  ul#add_btn li a.change_book, 
  ul#add_btn li a.send_mail, 
  ul#add_btn li a.add_bookmark, 
  ul#add_btn li a.about, 
  ul#add_btn li a.change_flow, 
  ul#add_btn li a.howto {
    display: block;
    width: 182px;
    height: 26px;
    text-align: right;
    padding: 8px 38px 0 0;
    font-size: 150%;
    font-weight: bold;
    /*
    background: bottom center no-repeat;
    */
    clear: both;
    
    
}
  
  
  div.pagetop {
    clear: both;
    width: 938px;
    text-align: right;
    margin: 0 auto 10px;
    
    width: 100vw;
}
  
  #footer {
    text-align: left;
    width: 940px;
    height: 80px;
    margin: 0 auto;
    padding: 10px 10px 0;
    background: url(../img/foot_line.gif) top center no-repeat;
    
    width: 100vw;
    padding: 0;
}

  #footer ul {	float: left;	margin: 0;	width: 100%;	}
  
  #footer ul li a {
    padding: 1.6em 0 0 2em;
    background: url(../img/arrow_right.gif) 0.6em 1.6em no-repeat;
    background-size: 1em;
    font-size: 80%;
}
  
  
}