@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 96%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	clear: none;
	float: none;
}
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 13px;
	line-height: 160%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #00a0e9;
}

a.hover_img{
    background-color:#fff;
    }
a.hover_img img{
    transition:all 0.2s ease;
    }
a:hover.hover_img img{
    opacity: 0.6;
    filter: alpha(opacity=60);
    }
	
button, input, select, textarea {
font-family : inherit;
font-size : 100%;
outline:none;
}

.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
#header {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
#main-title {
	background-image: url(../image/main_ti_bg.png) !important;
	text-align: center;
	margin-bottom: 15px;
	padding-bottom: 1px;
	background-position: center top;
}
#main-title .shirason-ti {
	margin-right: auto;
	margin-left: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 95%;
}
#main-title .title-illust {
	width: 90%;
	margin-bottom: 15px;
}
.main-copy {
	background-color: rgba(255,255,255,1.00) !important;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 11px;
	text-align: left;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border: 1px solid #d5df29;
	font-size: 110%;
}


#series {
}
.series-ti {
    background-color: #00a3d2 !important;
    color: rgba(255,255,255,1.00) !important;
    font-weight: bold;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 150%;
}
#manga {
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
}
#point {
	background-color: #fffbd3 !important;
	border: 15px solid #ffa800;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	border-radius: 10px;
	margin-bottom: 0px;
	margin-top: 15px;
}
#point img {

}
#point .copy {
	margin-top: 15px;
	text-align: justify;
}
#jissen {
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	margin-top: 15px;
	height: auto;
	background-image: url(../image/jissen_bg.png) !important;
}
.jissen-ti {
	margin-bottom: 15px;
}
.step {
    margin-bottom: 20px;
    text-align: justify;
    overflow: hidden;
}
#jissen .step .copy {
	margin-top: 5px;
}
.clear {
	clear: both;
}
.item-area {
	margin-top: 15px;
	margin-bottom: 20px;
	border: 1px solid #0084ff;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-top: 0px;
}
.item {
	margin-bottom: 35px;
	text-align: center;
}
.item-4 {
	margin-bottom: 35px;
	text-align: center;
}
.item-area .item h3 {
    margin-bottom: 0px;
    margin-top: 6px;
}
.item-area .item h4 {
	margin-top: 5px;
	margin-bottom: 5px;
	font-weight: normal;
}

.osusume_ti {
	width: 100%;
	text-align: center;
	background-color: #0084ff !important;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.osusume_ti img {
	width: 60%;
}
.item-area .item .copy  {
	margin-top: 15px;
	text-align: justify;
}
.item-area .item-4 .copy  {
	margin-top: 15px;
	text-align: left;
}
.go-item a {
    color: rgba(255,255,255,1.00) !important;
    display: block;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 15px;
    border-radius: 26px;
    background-color: rgba(32,164,255,1.00) !important;
    margin-top: 5px;
    width: 114px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.go-item a:hover {
	color: rgba(255,255,255,1.00);
	background-color: rgba(178,223,255,1.00);
	display: block;
	border-radius: 26px;
}
.go-sheet a  {
    color: rgba(255,255,255,1.00) !important;
    display: block;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 15px;
    border-radius: 26px;
    background-color: rgba(255,85,0,1.00) !important;
    margin-top: 10px;
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    text-align: center;
}
.go-sheet a:hover {
    color: rgba(255,255,255,1.00);
    background-color: rgba(255,159,111,1.00);
    display: block;
    border-radius: 26px;
    text-decoration: none;
}


#character {
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	background-color: rgba(255,247,202,1.00);
	padding-bottom: 10px;
	background-image: url(../image/character_bg.jpg) !important;
}
.character-ti {
	margin-bottom: 20px;
	background-color: rgba(154,0,2,1.00) !important;
	color: rgba(255,255,255,1.00) !important;
	text-align: center;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 120%;
}

#character .character-image {
	margin-bottom: 15px;
	text-align: center;
}
.character-image .chara {
	width: 100%;
}
.character-image .chara img {
	width: 75%;
}


#character .character-copy    {
    width: 90%;
    border: 1px solid #CBC469;
    border-radius: 5px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-bottom: 10px;
    background-color: rgba(255,255,255,0.60) !important;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    font-size: 90%;
}
#footer {
	margin-top: 30px;
	border-top: 2px solid rgba(126,126,126,1.00);
	padding-top: 5px;
	margin-bottom: 20px;
}
#footer .left {
	margin-bottom: 4px;
	font-size: 11px;
	width: 100%;
}
#footer .right {
	font-size: 11px;
	width: 100%;
}
#manga img {
	border: 1px solid rgba(0,0,0,1.00);
	margin-bottom: 20px;
}
#page-nation {
	text-align: center;
	margin-top: 20px;
}
.backnumber {
	text-align: center;
	padding-bottom: 15px;
	background-color: #D7FF93 !important;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
}
.backnumber-ti {
	margin-bottom: 0px;
	background-color: rgba(27,154,0,1.00) !important;
	color: rgba(255,255,255,1.00) !important;
	text-align: center;
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 120%;
}
.backnumber-ti-sub {
	background-color: #E9FFD6 !important;
	text-align: left;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 6px;
	padding-right: 6px;
	margin-top: 0px;
	border-top: 1px solid #B6DFBE;
}
.backnumber ul {
	padding-left: 0px;
}
.backnumber ul li {
    text-align: left;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 6px;
    padding-right: 6px;
    margin-top: 0px;
    background-color: #E9FFD6;
    list-style-image: none;
    list-style-type: none;
    margin-bottom: 2px;
}
.backnumber a  {
	color: #0086FF;
}


.backnumber select {
	width: 90%;

}
#point .copy .left {
	text-align: left;
	margin-top: 10px;
	margin-bottom: 20px;
}
#point .copy .right {
	text-align: left;
	margin-top: 10px;
}
#point .copy img {
	margin-bottom: 5px;
}
#point .copy .photo {
	width: 100%;
}
#series .series-ti .small {
	font-weight: normal;
	font-size: 90%;
	color: #FFFFFF !important;
}
.go-page-left a {
	width: 20%;
	float: left;
	border-radius: 20px;
	background-color: #40A1FF !important;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	color: #FFFFFF !important;
}
.go-page-right a {
	width: 20%;
	float: right;
	text-align: center;
	background-color: #40A1FF !important;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	border-radius: 20px;
	color: #FFFFFF;
}
.go-page-left a:hover {
	color: #FFFFFF;
	background-color: rgba(178,223,255,1.00);
}
.go-page-right a:hover {
	color: #FFFFFF;
	background-color: rgba(178,223,255,1.00);
}
.item-area .item-4 h3 {
	margin-bottom: 0px;
}
.item-area .item-4 h4 {
	margin-top: 0px;
}
.step .copy .small {
	font-size: 80%;
}
.update {
    text-align: right;
}
.item-sp-copy {
    text-align: center;
    margin-bottom: 20px;
    color: #FF9400;
    font-weight: bold;
    font-size: 140%;
}












































/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media print, screen and (min-width: 481px) {
.item-area .item-4 h3 {
	margin-bottom: 0px;
}
#page-nation .left {
}
#footer .left {
}

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
#header {
}
#main-title .shirason-ti {
	margin-right: auto;
	margin-left: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 55%;
}
#main-title .title-illust {
	width: 39%;
	margin-bottom: 15px;
	margin-top: 15px;
	margin-right: 15px;
}
#point img {




}
.jissen-ti {
	margin-bottom: 15px;
	width: 33%;
	margin-left: 2%;
}
.step {
	margin-bottom: 15px;
	width: 46%;
	float: left;
	margin-right: 2%;
	margin-left: 2%;
}
.item {
    width: 46%;
    float: left;
    margin-right: 2%;
    margin-left: 2%;
    padding-bottom: 20px;
}
.gridContainer.clearfix .item-area.clearfix .item {
}

.item-4 {
	width: 46%;
	float: left;
	margin-right: 2%;
	margin-left: 2%;
	height: 545px;
}
.osusume_ti {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}

.item-area .osusume_ti img {
	width: 30%;
}
.item-area .item img {
	width: 65%;
}
#character .character-copy  {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-bottom: 10px;
    background-color: rgba(255,255,255,1.00);
    float: left;
    width: 85%;
}
.character-ti {
	margin-bottom: 20px;
	background-color: rgba(154,0,2,1.00);
	color: rgba(255,255,255,1.00);
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 120%;
	width: 100%;
}
.backnumber-ti {
	background-color: rgba(27,154,0,1.00);
	color: rgba(255,255,255,1.00);
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 120%;
}
.character-image .chara {
    width: 33%;
    float: left;
}
.character-image .chara img {
	width: 75%;
	margin-bottom: 10px;
}
#point .copy .left {
	text-align: left;
	margin-top: 10px;
	width: 48%;
	float: left;
	margin-bottom: 0px;
	margin-right: 2%;
}
#point .copy .right {
	margin-top: 10px;
	width: 48%;
	float: right;
	margin-bottom: 0px;
	margin-left: 2%;
	text-align: left;
}
.point-ti {
	width: 33%;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media print, screen and (min-width: 769px) {
.step {
	margin-bottom: 15px;
	width: 46%;
	float: left;
	margin-right: 2%;
	margin-left: 2%;
}
.step {
	margin-bottom: 15px;
	width: 46%;
	float: left;
	margin-right: 2%;
	margin-left: 2%;
}

.gridContainer {
	width: 88.5%;
	max-width: 1000px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
#header {
}
.step {
	margin-bottom: 15px;
	width: 29.3%;
	float: left;
	margin-right: 2%;
	margin-left: 2%;
}
.item {
	width: 29.3%;
	float: left;
	margin-right: 2%;
	margin-left: 2%;
	margin-bottom: 0px;
}
.item-4 {
	width: 45.3%;
	float: left;
	margin-right: 2%;
	margin-left: 2%;
	margin-bottom: 0px;
	height: 580px;
}
.item-area .osusume_ti img {
	width: 26%;
}
#character .character-image img {
	width: 55%;
}
#footer .left {
	margin-bottom: 4px;
	font-size: 11px;
	width: 40%;
	float: left;
}
#footer .right {
	font-size: 11px;
	float: right;
	width: 60%;
	text-align: right;
}
.backnumber select {
	width: 500px;
}
.osusume_ti {
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}













}