@charset "utf-8";

/* ---- css reset ---- */
@import url(reset.css);
@import url(base.css);


/* ---- Structure ---- */
body.day{ margin: 0; padding: 0; }
body.night{ margin: 0; padding: 0; }
header,
#wrap,
footer{ width:100%; margin: 0;}

header .inside,
#wrap .wrap_inner,
footer .inside{ max-width: 960px; min-width: 760px; margin: 0 auto;}

article{ width: 95%; margin: 0 auto;}
.col2 article{ width: 62.5%; margin: 0 0 0 2.5%; float:left; }
.col2 aside{ width: 30%; margin: 0 2.5% 0 0; float: right; }

/* Header */
header{padding-bottom: 0.3em; }
header #logo{ width: 23%; float: left; text-align: center; }
header #eyecatch{ width: 77%; float: right; text-align: center; }

header #mainNavi{ width: 77%; float: right; text-align: center; margin-bottom: 0.3em; }
header #mainNavi ul{ list-style-type: none; padding: 0; margin: 0; display: block; }
header #mainNavi ul li{ display: inline-block; margin-right: 1%; /display:inline;/zoom: 1;}
header #mainNavi a{ color: #fff; font-size: 16px; font-size: 1.6rem;}
header #mainNavi a:hover{ }
header #mainNavi .current a{ }
header #mainNavi a{ margin: 0; text-decoration: none; font-weight: bold ; display: inline-block; text-align: center; }
header #mainNavi a span{ display: block; padding: 0.2em 0.9em;}
header #mainNavi a,
header #mainNavi a span{ -moz-border-radius: 0.5em; border-radius: 0.5em; position: relative;/zoom: 1; behavior: url(/css/PIE.htc);/*for IE*/ }

header #subNavi{ width: 77%; float: right; text-align: center; }
header #subNavi ul{ list-style-type: none; width: 75%; max-width: 650px; text-align: center; padding: 0; margin: 0 auto; display: block; background:#DBC7A8; -moz-border-radius: 1em; border-radius: 1em; position: relative;/zoom: 1; behavior: url(/css/PIE.htc);/*for IE*/ }
header #subNavi ul li{ display: inline-block; margin: 0 1em; /display:inline;/zoom: 1;}
header #subNavi a{ color: #FFF; font-weight: bold; text-decoration: none; font-size: 14px; font-size: 1.4rem; display: block;padding: 0.2em 0;}
header #subNavi a:hover{ background: url(../images/sub_subnavi_ind_d.png) no-repeat center bottom;}
header #subNavi .current a{ background: url(../images/sub_subnavi_ind_d.png) no-repeat center bottom;}

/* #wrap */
#wrap{ padding-top: 3em; }
#wrap .frameless_title{ width: 95%; margin: 0 auto; line-height: 0; }

/* Article */
article .inside{}
article .border{ background-color: #FFF; border: #F1EBD5 solid 1px; -moz-border-radius: 3em; border-radius: 3em; behavior: url(/css/PIE.htc);/*for IE*/ position: relative;}
article .exbg1{ -moz-border-radius: 3em; border-radius: 3em; behavior: url(/css/PIE.htc);/*for IE*/ position: relative;}
article .exbg2{ -moz-border-radius: 3em; border-radius: 3em; behavior: url(/css/PIE.htc);/*for IE*/ position: relative;}
article h1{ display: block; text-align: center; margin: 0 5%; padding:1em 0 0 0;}
article section{ padding: 5%; }

/* Foote */
footer .inside{ text-align: center; }
footer #copyright{ padding: 3%; color:#BDA987;}
footer #copyright .line1{ font-size: 15px; font-size: 1.5rem; margin: 0px;}
footer #copyright .line2{ font-size: 14px; font-size: 1.4rem; font-family: Verdana, Helvetica, sans-serif; text-shadow: 0 1px 0 rgba(255,255,255,0.4);}

/* ---- Background ---- */
body.day{ background: #FDF9EE url(../images/common_day_bgtexture.png) ;}
body.night{ background: #FDF9EE ;}
.day header{ /*background: #FFF;*/ }
.day #headerSky{background:#FFF url(../images/_season/sub_sky.gif) repeat-x center top;}
.day #headerHorizon{background: url(../images/_season/sub_horizon.png) repeat-x 0 0;}
.day #wrap{ background: url(../images/_season/sub_wrapbg.png) repeat-x 0 0;}
/* naviの色 */
header #mainNavi a{ background-color: #FF2626; /*background: #F7C777;*/}
header #mainNavi a:hover{ background-color: #DC0A00; /*background: #F29600;*/ }
header #mainNavi .current a{ background-color: #DC0A00; /*background: #F29600;*/ }


/* Mediaqueries */
/* Tablet(Landscape) ============================================================= */
@media screen and (max-width: 980px) {

/* Header */
header #mainNavi a{ font-size: 15px; font-size: 1.5rem;}
header #mainNavi a span{ padding: 0.2em 0.5em;}
}
/* Tablet(Portrait) =================================================================== */
@media screen and (max-width: 800px) {

/* Header */
header #mainNavi a{ font-size: 14px; font-size: 1.4rem;}
header #mainNavi a span{ padding: 0.2em 0.5em;}
}
/* Smartphone(Landscape) ============================================================== */
@media screen and (max-width: 480px) {

	/* Structure */
	header .inside,
#wrap .wrap_inner,
footer .inside{min-width: 320px;}
#wrap{ padding-top: 2.5em; }

article{ width: 95%; margin: 0 auto;}
.col2 article{ width: 95%; margin: 0 auto; float: none;}
.col2 aside{ display: none; float: none; }

/* ---- Background ---- */
#headerSky,
#headerHorizon{ background-size:150%; }

/* Header */
header #logo{ width: 20%; float: left; text-align: center; }
header #eyecatch{ width: 80%; float: right; text-align: center; }
header #mainNavi{ width: 100%; float: none; clear: both; text-align: center; margin-bottom: 0.3em; }
header #mainNavi ul li{ display: inline-block; margin-right: 3%;  margin-bottom:1%;}
header #mainNavi a{  font-size: 14px; font-size: 1.4rem; }
header #mainNavi a span{ display: block; padding: 0.2em 0.5em;}
header #mainNavi a,
header #mainNavi a span{ -moz-border-radius: 0.5em; border-radius: 0.5em; behavior: url(/css/PIE.htc);/*for IE*/ }
header #subNavi{ width: 100%; float: none; text-align: center; }
header #subNavi ul{ width: 90%; }
header #subNavi ul li{ margin: 0 0.2em;}
header #subNavi a{ color: #FFF; font-weight: bold; text-decoration: none; font-size: 13px; font-size: 1.3rem; display: block;padding: 0.3em 0;}

/* Article */
article .border{ -moz-border-radius: 1em; border-radius: 1em; behavior: url(/css/PIE.htc);/*for IE*/}
article .exbg1{ -moz-border-radius: 1em; border-radius: 1em; behavior: url(/css/PIE.htc);/*for IE*/}
article .exbg2{ -moz-border-radius: 1em; border-radius: 1em; behavior: url(/css/PIE.htc);/*for IE*/}
article h1{ display: block; text-align: center; margin: 0 5%; padding:0.5em 0 0 0;}
article section{ padding: 5%; }

}
/* Smartphone(Portrait) =============================================================== */
@media screen and (max-width: 320px) {
	
}



/* ---- Page specific ---- */
/* Introduction */
/*#page_Introduction .border{ background: #FFF url(../images/sub_wp1_stripe.jpg); }*/
#page_Introduction .exbg1{ background: url(../images/introduction/bg3_1.png) no-repeat right top; }
#page_Introduction .exbg2{ background: url(../images/introduction/bg3_2.png) no-repeat left bottom; }
#page_Introduction h1{ text-align: left; padding-right: 15%; }
#page_Introduction section p{ font-size: 18px; font-size: 1.8rem; line-height: 200%; margin: 0 0 1em 0; text-shadow: 0 1px 0 rgba(0,0,0,0.1);}
#page_Introduction p.para1{ width: 52%; margin-bottom: 7%; display: block; float: left; }
#page_Introduction p.para2{ width: 52%; margin-bottom: 7%; display: block; float: left; margin-bottom: 30%; }
#page_Introduction .fig1{ width: 45%; text-align: right; float: right; padding-top: 25%; margin-bottom: 5%;}
#page_Introduction .fig2{ width: 45%; text-align: right; float: right; }

/* Story */
#page_Story .border{ background: #FFF url(../images/story/bg_pattern.jpg) repeat-y left top;background-size:100%; }
#page_Story .exbg1{ background: url(../images/story/bg_upper.jpg) no-repeat left top; background-size:100%;}
#page_Story h1{ text-align: right; }
#page_Story .moji_btn_wrap{ text-align: right; margin: 0 5%; padding:2% 2% 0% 2%; }
#page_Story h2{ display: block; text-align: right; margin-bottom: 1em; }

#page_Story .imagecol{ width: 40%; float: left; text-align right;  }

#page_Story .slide_image,
#page_Story .small_image{ margin: 0; padding: 0; list-style-type: none; display: block;}
#page_Story .slide_image li{ margin: 0; padding: 0; }
#page_Story .slide_image{ margin-bottom: 1em; }
#page_Story .small_image{ text-align: right; max-width: 320px; }
#page_Story .small_image li{ display: block; margin-bottom: 1em; }
#page_Story .textcol{ width: 58%; float: right; text-align: left;}
#page_Story .textcol p{ font-size: 16px; font-size: 1.6rem; line-height: 1.5em; font-weight: normal; }
#page_Story .textcol p.moji_hira{ display: none; font-size: 19px; font-size: 1.9rem;}


/* Character */
#page_Character .exbg1{ background: url(../images/character/bg3_l.png) no-repeat right top; }
#page_Character .exbg2{ background: url(../images/character/bg3_r.png) no-repeat left top; }
#page_Character h1{ text-align: left; padding-left: 20%; }
#page_Character .chara_main{ padding-bottom: 30px; margin-bottom: 30px; background: url(../images/sub_sep_brown.png) no-repeat center bottom;}
#page_Character .chara_main .image{ width: 35%; float: left; text-align: center; }
#page_Character .chara_main .prof{ width: 65%; float: left; text-align: left; }
#page_Character .name{ font-size: 30px; font-size: 3rem; font-weight: bold; color: #F29600;  margin: 0 0 0.5em 0; }
#page_Character .text{ font-size: 16px; font-size: 1.6rem; margin: 0 0 0.8em 0; }
#page_Character .talent{ color: #D1312C; font-size: 16px; font-size: 1.6rem; margin: 0 0 0.2em 0; font-weight: bold; }
#page_Character .talent span{font-size: 12px; font-size: 1.2rem; }
#page_Character .cv{ color: #996E40; margin: 0;}
#page_Character .cv span{font-size: 12px; font-size: 1.2rem; }
#page_Character .chara_sub{ padding-bottom: 30px; margin-bottom: 30px; background: url(../images/sub_sep_brown.png) no-repeat center bottom;}
#page_Character .chara_sub .image{ width: 35%; float: left; text-align: center; }
#page_Character .chara_sub .prof{ width: 65%; float: left; text-align: left; }
#page_Character .chara_sub .name{ font-size: 24px; font-size: 2.4rem; margin: 0 0 0.3em 0; }

/* Sraff */
#page_Staff .exbg1{ background: url(../images/staff/bg.png) no-repeat right top; }
#page_Staff .exbg2{ background: url(../images/staff/bg_bottom.png) no-repeat right bottom; }
#page_Staff h1{ text-align: left; padding-bottom: 1em; }
#page_Staff .container{ padding-bottom: 30px; margin-bottom: 30px; background: url(../images/sub_sep_brown.png) no-repeat center bottom;}
#page_Staff h3{ width: 40%; float: left; display: block; text-align: center; }
#page_Staff .mainText{ width: 60%; float: left; text-align: left; font-size: 15px; font-size: 1.5rem; }
#page_Staff .mainText span{ font-size: 0.8em; color: #996E40;}
#page_Staff article .inside{ padding-bottom: 17%; }

/* News */
#page_News #categoryTitle{ background:#f7c36b; color: #FFF; }
#page_News h2 span a{ color: #53412F;}
#page_News h2 span a:hover{color:#D1312C}
#page_News .pager{ margin: 2em 0; }
#page_News .pager ul{ list-style: none; padding: 0; margin: 0; display: block; height: 1em; }
#page_News .pager ul li{ width: 45%; display: block; padding: 0.3em 0;}
#page_News .pager .prev{ float: left; text-align: left;}
#page_News .pager .next{ float: right; text-align: right;}

#page_News .entry{ margin-bottom: 4em; }
#page_News .entry .date{ color: #D1312C; font-weight: bold; border-bottom: #D1312C dotted 1px;  }
#page_News .entry .date span{  margin-right: 0.3em;}
#page_News .entry  h2{ font-size: 16px; font-size: 1.6rem; line-height: 1.2; margin-bottom: 1em;  }

#page_News aside h4{ color: #FFF; background: #6F5A43; padding: 0.3em 0.5em; margin-bottom: 1em; display: block; -moz-border-radius: 0.5em; border-radius: 0.5em; behavior: url(/css/PIE.htc);/*for IE*/}
#page_News aside .recent_list ul,
#page_News aside .archive_list ul{ padding: 0;  margin: 0; margin-bottom: 2em; }
#page_News aside .recent_list ul li,
#page_News aside .archive_list ul li{background:url(../images/news/ic_exs.png) no-repeat left 0.1em;  display: block; margin-bottom: 1em; line-height: 1.4; padding-left: 1.3em; padding-bottom: 0.8em; border-bottom: #523F2C dotted 1px;  }

#page_News aside a{ color: #523F2C; text-decoration: none;}
#page_News aside a:hover{ color: #F29600;}


/* Event */
#page_Event h2{ margin-bottom: 1em;}
#page_Event h2 span a{ color: #53412F;}
#page_Event h2 span a:hover{color:#D1312C}
#page_Event .entry{ margin-bottom: 4em; }
#page_Event h3{ color:#D1312C; font-size: 14px; font-size: 1.4rem; border-left: #D1312C solid 4px; padding-left: 3px; margin-bottom: 0.3em; }
#page_Event .date{ color:#D1312C; font-weight: bold; padding: 0.3em 0.5em; border-bottom: #D1312C dotted 1px;  display: inline-block; /display:inline;/zoom: 1;}
#page_Event .lead{ font-size: 16px; font-size: 1.6rem; }
#page_Event .float_image_left{ margin: 2%; float:left; }
#page_Event .float_image_right{ margin: 2%; float: right; }
#page_Event .link_box{  padding: 0.5em 1em; border: #E9DBC3 solid 3px;word-wrap:break-word;/*firefox*/ word-break:break-all;/*IE*/ display: inline-block; /display:inline;/zoom: 1;}
#page_Event .event_list_title{ padding: 0 0.8em; font-weight: bold; }
#page_Event .event_list{ list-style-type: none ;padding: 0.5em 0.5em 0 0.5em;  margin: 0; margin-bottom: 2em; border: #eadec6  solid 3px; }
#page_Event .event_list li{background:url(../images/news/ic_exs.png) no-repeat left 0.1em;  display: block; margin-bottom: 0.5em; line-height: 1.4; padding-left: 1.3em; padding-bottom: 0.4em; border-bottom:#DBC7A8 dotted 1px; }
.event_table1{border-collapse:collapsed; border:#DC3D00 solid 1px; width:100%; margin-bottom:0.5em;}
.event_table1 th{text-align:left; font-size:18px; color:#FFF; background:url(/event/assets/130703_buppan_ptn1.png);}
.event_table1 td{border-bottom:#DC3D00 solid 1px;}
.event_table1 td.hd{ width: 50px; white-space: nowrap; vertical-align: top;}
.event_table1 .lrg th,
.event_table1 .lrg td{ font-size: 16px; font-weight: bold; }
.event_table1 .rd th,
.event_table1 .rd td{ color: #DC3D00; }

.event_table1_off{border-collapse:collapsed; border:#999 solid 1px; width:100%; margin-bottom:0.5em;}
.event_table1_off th{text-align:left; color:#FFF; background:#999;}
.event_table1_off td{border-bottom:#999 solid 1px;}
.event_table1_off td.hd{ width: 40px; white-space: nowrap; vertical-align: top;}
.event_table1_off .lrg th,
.event_table1_off .lrg td{ }
.event_table1_off .rd th,
.event_table1_off .rd td{ display: none; }

/* Special */
#page_Special .border{ border-top: #FFF none 0px; }
#page_Special .exbg1{ background: url(../images/special/bg.png) no-repeat right top; background-size:100%; }
#page_Special h1{ text-align: left; padding-bottom: 1.5em; padding-left: 9%;; }
#page_Special .cat_btn_wrap ul,
#page_Special .item_list,
#page_Special .item_list .dl_list{ list-style: none; padding: 0; margin: 0; }
#page_Special .cat_btn_wrap ul{ display: block; padding-left: 15%; padding-top: 3%; }
#page_Special .cat_btn_wrap ul li{ display: inline-block; margin-right: 1em; /display:inline;/zoom: 1;}
#page_Special h2{ margin-bottom: 0.5em; }
#page_Special .att{ font-size: 14px; font: 1.4rem;color: #BCA986; }
#page_Special .item_list > li{ width: 46%; padding: 0 2%;  float: left; }
#page_Special .item_list h4{ border-bottom: #DBC7A8 dotted 1px; padding-bottom: 0.3em; margin-bottom: 0.5em; }
#page_Special .item_list h4 .new{ color: #5CBDD1; font-size: 10px; font-size: 1.0rem; }
#page_Special .item_list .leftcol{ width: 48%; padding-right: 2%; float: left; }
#page_Special .item_list .rightcol{ width: 50%; float: left; }
#page_Special .item_list .dl_list{ display: block; text-align: center; }
#page_Special .item_list .dl_list li{ width: 46%; display: inline-block; white-space: nowrap; padding:2% 1%; margin-bottom: 0.2em;  border: #DBC7A8 solid 1px; /display:inline;/zoom: 1; }
#page_Special .item_list .dl_list li img{ margin-right: 0.2em; }

/* Products */
#page_Products #categoryTitle{ background:#90d2f8; color: #FFF; }
#page_Products .exbg1{ background: url(../images/products/halfbg.jpg) no-repeat left top; }
#page_Products .ext .exbg1{ background: none no-repeat left top; }
#page_Products h1{ text-align: right; padding-bottom: 0.6em; padding-left: 7%;}
#page_Products .pager ul,
#page_Products .products_list ul,
#page_Products .detail_list ul{ list-style: none; padding: 0; margin: 0; }
#page_Products .pager{ margin-bottom: 1em; }
#page_Products .pager .prev,
#page_Products .pager .amount{display: block; text-align: center; padding: 0.3em 0; float: left; }
#page_Products .pager .next{display: block; text-align: center; padding: 0.3em 0; float: right;}
#page_Products .pager .prev,
#page_Products .pager .next{ width: 25%; border-top: #F29600 solid 1px; border-bottom: #F29600 solid 1px; }
#page_Products .pager .prev a,
#page_Products .pager .next a{ display: block;}
#page_Products .pager .amount{ width: 49.9%; border-top: #523F2C dotted 1px; border-bottom: #523F2C dotted 1px; }
#page_Products .products_list{ margin-bottom: 1em;}
/*#page_Products .products_list li{ display: block; width: 31% ; padding: 1%; float: left; }*/
#page_Products .products_list li{ display: inline-block; width: 31% ; padding: 1%; vertical-align: top; }
#page_Products .products_list li.noentry{ width: 100%; padding: 20% 0; text-align: center; }
#page_Products .products_list li a{ display: block; font-size: 12px; font-size: 1.2rem; text-decoration: none;}
#page_Products .products_list li a:hover{ background:#FDF9EE;}
#page_Products .products_list li a {zoom:1;}
#page_Products .products_list li a:after{content: ""; display: block; clear: both;}
#page_Products .products_list .leftcol{width: 42%; padding-right: 2%; float: left; line-height: 0; text-align: center; background: #FFF; }
#page_Products .products_list .rightcol{ width: 56%; float: left; padding: 0.3em 0; }
#page_Products .products_list .leftcol img{ border: #DBC7A8 solid 1px; }

#page_Products .new{ display: block; color: #5CBDD1; font-size: 10px; font-size: 1.0rem; font-weight: bold; }
#page_Products .sold{ display: block; color: #D1312C; font-size: 10px; font-size: 1.0rem; font-weight: bold; }

#page_Products .detail .leftcol{width: 49%; padding-right: 2%; float: left; }
#page_Products .detail .rightcol{ width: 49%; float: left;}
#page_Products .detail .leftcol img{ border:#EDE5CB solid 1px;  }
#page_Products .detail h3{ margin-bottom: 1em; padding: 0.2em 0; border-top: #DBC7A8 solid 2px; border-bottom: #DBC7A8 solid 2px; }
#page_Products .detail .comment{ margin-bottom: 2em;}
#page_Products .detail .detail_table{border: #DBC7A8 dotted 1px; margin-bottom: 1em;}
#page_Products .detail .detail_table th{ padding: 0.5em 0.4em; border-bottom: #DBC7A8 dotted 1px;  border-right: #DBC7A8 dotted 1px; white-space: nowrap; }
#page_Products .detail .detail_table td{ padding: 0.5em 0.4em; border-bottom: #DBC7A8 dotted 1px; }
#page_Products .detail .btn_wrap{}
#page_Products .detail .buyBtn,
#page_Products .detail .backBtn{ display: inline-block; padding: 0.3em 0.5em; -moz-border-radius: 0.3em; border-radius: 0.3em; position: relative; behavior: url(/css/PIE.htc);/*for IE*/ }
#page_Products .detail .buyBtn{ background: #F29600; color: #FFF; font-size: 16px; font-size: 1.6rem; text-decoration: none; }
#page_Products .detail .buyBtn:hover{ background: #D1312C; }
#page_Products .detail .backBtn{background: #DBC7A8; color: #FFF; font-size: 16px; font-size: 1.6rem; text-decoration: none;}
#page_Products .detail .backBtn:hover{background: #523F2C;}

/* Link */
#page_Link .exbg1{ background: url(../images/link/bg.png) no-repeat right top; }
#page_Link h1{ text-align: left; padding-bottom: 0; }
#page_Link .corp_banner_list,
#page_Link .official_banner_list{ list-style: none; padding: 0; margin: 0; }
#page_Link .corp_banner_list{ background: url(../images/link/corp_banner_bg.png); padding: 1em 2em; margin-bottom: 2em; border: #EBE5D7 solid 1px; ; display: inline-block; /display:inline;/zoom: 1;}
#page_Link .corp_banner_list li{ display: block; padding: 1em 0; line-height: 1; }
#page_Link .corp_banner_list li img{ border: #DBC7A8 solid 1px; margin-right: 0.5em; }
#page_Link h2{ margin-bottom: 1em;}
#page_Link h3{ color:#D1312C; font-size: 14px; font-size: 1.4rem; border-left: #D1312C solid 4px; padding-left: 3px; margin-bottom: 1em; }
#page_Link .official_banner_list li{ margin-bottom: 1em; font-size: 12px; font-size: 1.2rem; }


/* Campaign */
#page_Campaign h1{ margin: 0; padding: 0; }
#page_Campaign .cat_btn_wrap ul,
#page_Campaign .item_list,
#page_Campaign .item_list .dl_list{ list-style: none; padding: 0; margin: 0; }
#page_Campaign .cat_btn_wrap ul{ display: block; padding-left: 15%; padding-top: 3%; }
#page_Campaign .cat_btn_wrap ul li{ display: inline-block; margin-right: 1em; /display:inline;/zoom: 1;}
#page_Campaign h2{ margin-bottom: 0.5em; }
#page_Campaign .att{ font-size: 14px; font: 1.4rem;color: #BCA986; }
#page_Campaign .thumb_wrap{ text-align: center; padding-bottom: 2%; }
#page_Campaign .item_list > li{ width: 96%; padding: 0 2%;  }
#page_Campaign .item_list h4{ border-bottom: #DBC7A8 dotted 1px; padding-bottom: 0.3em; margin-bottom: 0.5em; }
#page_Campaign .item_list .dl_list{ display: block; text-align: center; }
#page_Campaign .item_list .dl_list li{ width: 46%; display: inline-block; white-space: nowrap; padding:2% 1%; margin-bottom: 0.2em;  border: #DBC7A8 solid 1px; /display:inline;/zoom: 1; }
#page_Campaign .item_list .dl_list li img{ margin-right: 0.2em; }


/* Common classes */
/* various headline style */
h2.blue_double{ color:#1B96C9; padding:2px 0;  border-bottom:#58B1D3 solid 2px; display: block; }
h2.blue_double span{ padding: 0.3em 0;  border-bottom:#58B1D3 solid 4px; display: block; }
h2.orange_double{ color:#F29600; padding:2px 0;  border-bottom:#F6BE5F solid 2px; display: block; }
h2.orange_double span{ padding: 0.3em 0;  border-bottom:#F6BE5F solid 4px; display: block; }
h2.lbrown_double{ padding:2px 0;  border-bottom:#DBC7A8 solid 1px; display: block; }
h2.lbrown_double span{ padding: 0.3em 0;  border-bottom:#DBC7A8 solid 3px; display: block; }
h2.red_double{ padding:2px 0;  border-bottom:#D1312C solid 1px; display: block; }
h2.red_double span{ padding: 0.3em 0;  border-bottom:#D1312C solid 3px; display: block; }

#categoryTitle{ padding:0.5em 0; display: block; margin-bottom: 2em; text-align: center;-moz-border-radius: 1em; border-radius: 1em; behavior: url(/css/PIE.htc);/*for IE*/}

.pagetop{ text-align: center; padding: 2em 0 0 0; clear:both;}
.backtop{ text-align: center; padding: 2em 0 0 0;}
.combo_page_back{ width: 100%; }
.combo_page_back .pagetop{ width: 45% ; float: right; text-align: left; clear: none; }
.combo_page_back .backtop{width: 45% ; float: left; text-align: right;}

.social_btns{ background: #fbf9f5; padding: 1em; -moz-border-radius: 0.5em; border-radius: 0.5em; behavior: url(/css/PIE.htc);/*for IE*/}

/* cssbutton basestyle  */
.cssbtn a,
header nav #mainNavi a{ margin: 0px; text-decoration: none; font-weight: bold ; display: inline-block; text-align: center; color: #fff;}
/* radius */
.cssbtn span a,
.cssbtn span a span,
header nav #mainNavi a,
header nav #mainNavi a span{ -moz-border-radius: 0.5em; border-radius: 0.5em; behavior: url(/css/PIE.htc);//for IE }
/* inner padding */
.cssbtn a span,
header nav #mainNavi a span{ display: block; padding: 0.3em 0.9em;}


/* Mediaqueries */
/* PC & Tablet(Landscape) ============================================================= */
@media screen and (max-width: 980px) {

}
/* Tablet(Portrait) =================================================================== */
@media screen and (max-width: 800px) {
/* Introduction */
#page_Introduction .exbg1{ background-size:50%; }
#page_Introduction .exbg2{ background-size:50%; }
#page_Introduction h1{}
#page_Introduction section p{ }
#page_Introduction p.para1,
#page_Introduction p.para2{ width: 62%; }
#page_Introduction .fig1,
#page_Introduction .fig2{ width: 35%; }

/* Story */

/* Character */
#page_Character h1{ padding-left: 15%; }
#page_Character .chara_main{ padding-bottom: 20px; margin-bottom: 20px;}
#page_Character .chara_main .image{ width: 33%; padding-right: 2%; text-align: right; }
#page_Character .chara_main .prof{ width: 65%; }
#page_Character .name{ font-size: 26px; font-size: 2.6rem;  margin: 0 0 0.3em 0; }

/* Sraff */
#page_Staff .exbg1,
#page_Staff .exbg2{ background-size:50%; }

/* Special */
#page_Special .exbg1{  background-size:100%; }

/* Products */
#page_Products .exbg1{ background-size:100%;  }

/* Link */
#page_Link .exbg1{  background-size:100%; }

}
/* Smartphone(Landscape) ============================================================== */
@media screen and (max-width: 480px) {
/* Introduction */
#page_Introduction .border{ background-size:20%; }
#page_Introduction .exbg1,
#page_Introduction .exbg2{ background-size:40%; }
#page_Introduction h1 img{ width: 70%; }
#page_Introduction section p{ line-height: 150%; }
#page_Introduction p.para1,
#page_Introduction p.para2{ display: inline; float: none; }
#page_Introduction .fig1,
#page_Introduction .fig2{ float: none; margin:0; width: 90%; padding:5%; text-align: center; }
#page_Introduction .fig2{ margin-bottom: 20%; }

/* Story */

#page_Story h1{  }
#page_Story h1 img{width: 50%;}
#page_Story .moji_btn_cont{ text-align: right; margin: 0 5%; padding: 0 2%; }
#page_Story h2{font-size: 16px; font-size: 1.6rem;}
#page_Story .imagecol{ width: 100%; float: none; text-align: center;}
#page_Story .slide_image{ margin: 0 auto 0.1em auto; text-align: center; }
#page_Story .slide_image{ width: 320px; height: 210px; margin-bottom: 1em;}
#page_Story .small_image{ text-align: center; max-width: 100%; }
#page_Story .small_image li{ display: inline;}
#page_Story .small_image li img{ width: 45%; margin: 0 1%;}
#page_Story .textcol{ width: 100%; float: none; text-align: left;}


/* Character */
#page_Character .border{ background-size:20%; }
#page_Character .exbg1,
#page_Character .exbg2{ background-size:40%; }
#page_Character h1{ padding-left:0;}
#page_Character h1 img{width: 50%;}
#page_Character .chara_main .image{ width: 100%; float: none; text-align: center; }
#page_Character .chara_main .prof{ width: 100%; float: none; text-align: left; }
#page_Character .name{ font-size: 22px; font-size: 2.2rem; text-align: center; margin: 0 0 0.5em 0; }
#page_Character .chara_sub{ padding-bottom: 30px; margin-bottom: 30px; background: url(../images/sub_sep_brown.png) no-repeat center bottom;}
#page_Character .chara_sub .image{ width: 100%; float: none; text-align: center; }
#page_Character .chara_sub .prof{ width: 100%; float: none; text-align: left; }
#page_Character .chara_sub .name{ font-size: 22px; font-size: 2.2rem; text-align: center;}

/* Sraff */
#page_Staff .border{ background-size:20%; }
#page_Staff .exbg1,
#page_Staff .exbg2{ background-size:40%; }
#page_Staff h1{ padding-bottom: 0; }
#page_Staff h1 img{ width: 50%;}
#page_Staff .container{ padding-bottom: 20px; margin-bottom: 20px;}
#page_Staff h3{ width: 100%; float: none; text-align: center; }
#page_Staff h3 img{ width: 60%; }
#page_Staff .mainText{ width: 100%; float: none; text-align: left; }
#page_Staff .mainText span{}

/* Event */
#page_Event .float_image_left{ float: none; }
#page_Event .float_image_right{ float: none; }




/* Special */
#page_Special .exbg1{  background-size:100%; }
#page_Special h1{ padding-bottom: 0.5em;; }
#page_Special h1 img{width: 50%;}
#page_Special .item_list > li{ width: 100%; padding: 0;  float: none; clear: both; }
#page_Special .item_list h4{ border-bottom: #DBC7A8 dotted 1px; padding-bottom: 0.3em; margin-bottom: 0.5em; }
#page_Special .item_list h4 .new{ color: #5CBDD1; font-size: 10px; font-size: 1.0rem; }
#page_Special .item_list .leftcol{ width: 48%; padding-right: 2%; float: left; }
#page_Special .item_list .rightcol{ width: 50%; float: left; }
#page_Special .item_list .dl_list li{ }
#page_Special .item_list .dl_list li img{ margin-right: 0.2em; }

/* Products */
#page_Products h1{}
#page_Products h1 img{width: 50%;}
#page_Products .products_list li{ width: 96% ; padding: 2%; float: none; clear:both;  }
#page_Products .products_list .leftcol{width: 28%; padding-right: 2%; }
#page_Products .products_list .rightcol{ width: 70%; }
#page_Products .products_list li a{ background:#FDF9EE;}
#page_Products .pager .prev,
#page_Products .pager .next{ width: 50% }
#page_Products .pager .amount{ width: 100%; float: none; clear: both; }

#page_Products .detail .leftcol,
#page_Products .detail .rightcol{width:100%; float: none; clear:both;}
#page_Products .detail .btn_wrap{ text-align: center; }

/* Link */
#page_Link .exbg1{  background-size:100%; }
#page_Link h1 img{width: 50%;}
#page_Link .corp_banner_list li span{ display: block; }





}
/* Smartphone(Portrait) =============================================================== */
@media screen and (max-width: 320px) {



/* Story */

#page_Story .slide_image{ width:inherit; height: inherit; margin-bottom: 0; }

}