@charset "utf-8";
/*---------------------------------------------------------------
top.css
-----------------------------------------------------------------
table of contents

	1. Override
	2. Layout
	3. Media Queries
-----------------------------------------------------------------
/*===============================================================

	1.	Override

===============================================================*/
#gHeader{
	padding-bottom: 15px;
	margin-bottom: 0;
}
#container{
	margin-bottom: 0;
}
#move-page-li{
	width: 70px;
}
h3{
	margin:0;
}
#gl_header {
	background-color:#FFF;
}
#gl_header #gl_nv .drop_down {
	z-index:10;
}
#gl_footer {
	position:absolute;
	bottom:0 !important;
	left:0;
	width:100%;
	z-index:0;
}

/*===============================================================

	2.	Layout

=================================detail==============================*/

#loaded-text-wrap{
	color:#fff;
	font-size:16px;
	letter-spacing: 1px;
	font-family: 'Oswald', sans-serif;
	/*font-weight: 400;*/
	width: 100%;
	height: 100%;
	vertical-align:bottom;
	background-color: #000;
	top:0;
}
#loaded-text-wrap .txt{
	position:absolute;
	text-align: center;
	width: 100%;
	margin-top: -50px;
	top:50%;

}
#progress-bar{
	position:absolute;
	left: 0%;
	top:50%;
	width: 0px;
	height: 50%;
	background-color: #000;
	border-top: 1px solid #fff;
}

/* title-area */
#contents-wrap{
	position: relative;
	border-top: 1px solid #dedede;
	height: auto;
}
#front-wrap{
	position: absolute;
	z-index: 10;
	width: 100%;
	min-width: 1040px;
	min-height: 100%;
	overflow: hidden;
	padding-bottom: 146px;
}
.bg{
	background-color: #000;
	width: 100%;
	min-width: 1040px;
	position: fixed;
	top:0;
	background-image:url('../images/common/bg_main.jpg');
	background-position: center 315px;
	background-repeat: repeat-y;
	display: none;
	height: 1000px;
}
.bg .top{
	height: 500px; /* correct height 315px */
	background-image:url('../images/top/bg_main_top.jpg');
	background-position: center -230px;
	background-repeat: no-repeat;
	width: 100%;
}
.bg .bottom{
	height: auto;
	width: 100%;
}
h2.title-sp{
	display: none;
}
#title-wrap{
	position: relative;
	z-index: 2;
	padding-top: 83px;
	padding-bottom: 25px;
}
#title-wrap .top-line {
    width: 100%;
    background-color: #101518;
    height: 34px;
    position: relative;
    padding-top: 12px;
}
#title-wrap .bg-sp{
	display: none;
}
.title-inner{
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
#title-wrap .ti-sub{
	margin-bottom: 25px;
}
#title-wrap h1{
	margin-bottom: 10px;
}
#title-wrap .ti_bottom_txt{
	margin-bottom: 95px;
}
#title-wrap .num-sp{
	display: none;
}
#title-wrap .about{
	width: 116px;
  height: 16px;
  display: block;
  position: absolute;
  left: 50%;
  margin-left: 334px;
  top: 14px;
}
#title-wrap .about a{
	background-image:url('../images/top/btn_to_about.png');
	background-repeat: no-repeat;
	background-position: left top;
	width: 116px;
	height: 16px;
	display: block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	margin-bottom: 25px;
}

/* news */
#title-wrap .news{
	display: none;
	width: 100%;
	background-color: #101518;
	visibility: hidden;
}
#title-wrap .news-wrap{
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	height: 46px;
}
#title-wrap .news-inner{
	width: 900px;
	height: 46px;
	display: table;
	max-height: 46px;
}
#title-wrap .news-wrap p.title{
	width: 80px;
	display: table-cell;
	vertical-align: middle;
	padding-left: 10px;
}
#title-wrap .news-wrap p span{
	height: 28px;
	width: 80px;
	display: block;
	border-right: 1px solid #282d30;
	background-image:url('../images/top/ti_news.png');
	background-repeat: no-repeat;
	background-position: left 8px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	margin-top: -2px;
}
.ie8 #title-wrap .news-wrap p span{
	background-position: left 7px;
}
#title-wrap .news-wrap .detail-wrap{
	width: 809px;
	display: table-cell;
	margin: 0;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
}
#title-wrap .news-wrap .slide-wrap{
	position: absolute;
	top:0;
}
#title-wrap .news-wrap ul{

}
#title-wrap .news-wrap li{
	position: static;
	padding-left: 30px;
	height: 33px;
	padding-top: 13px;
}
.ie8 #title-wrap .news-wrap li{
	padding-top: 0;
	height: 46px;
	margin-top:-13px;
	margin-bottom: 13px;
}
#title-wrap .news-wrap li .txt{
	font-size: 14px;
	padding-right: 25px;
}
#title-wrap .news-wrap li .day{
	font-size: 12px;
	color: #60707f;
}
#title-wrap .news-inner .icon-prev{
	position: absolute;
	right: 0;
	top:11px;
	background-image:url('../images/top/arrow_news_top.png');
	background-repeat: no-repeat;
	background-position: left top;
	width: 13px;
	height: 8px;
	display: block;
	cursor: pointer;
}
.ie8 #title-wrap .news-inner .icon-prev{
	margin-top: -25px;
}
#title-wrap .news-inner .icon-next{
	position: absolute;
	right: 0;
	bottom:11px;
	background-image:url('../images/top/arrow_news_bottom.png');
	background-repeat: no-repeat;
	background-position: left top;
	width: 13px;
	height: 8px;
	display: block;
	cursor: pointer;
}
.ie8 #title-wrap .news-inner .icon-next{
	margin-bottom: -25px;
}

/* contents */
#contents{
	width: 100%;
	min-height: 550px;
	text-align: center;
	position: relative;
}
#contents .sns-wrap{

	min-height:25px;
}
#atstbx{ /* addthis */
	width: 370px;
	margin-left: auto;
	margin-right: auto;
}

/*
** articles-wrap
*/
#articles-wrap{
	width: 900px;
	margin-right:auto;
	margin-left:auto;
}
#articles-wrap article{
	cursor: pointer;
}
#articles-wrap article.right,
#articles-wrap article.left{
	background-image:none !important;
}
article .image-wrap .ol{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	filter: alpha(opacity=40);
	opacity:0.4;
	display: none;
}
.ie8 article .image-wrap .ol{
	background-color: #ff9000;
}

#articles-wrap .line{
	margin-bottom: 6px;
	text-align: left;
}
#articles-wrap .line article{
	margin-top:50px;
	visibility: hidden;
}
#articles-wrap .line article.off{
	cursor: default;
}
.ie8 #articles-wrap .line article.off .image-wrap{
	filter: alpha(opacity=20);
}
#articles-wrap .line article.off .image-wrap:before{
	background-color: rgba(0, 0, 0, 0.8);
	bottom: 0;
	content: "";
	height: 100%;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1;
}
#articles-wrap .line article.off .image-wrap:after{
	bottom: 0;
	color: rgba(255, 255, 255, 0.3);
	content: "COMING SOON";
	font-family: "Oswald", sans-serif;
	font-size: 20px;
	font-weight: bold;
	height: 1em;
	left: 0;
	letter-spacing: 0.05em;
	margin: auto;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	vertical-align: middle;
	width: 11em;
	z-index: 1;
}
#articles-wrap .line article.off .title-wrap{
	opacity: 0.2;
	filter: alpha(opacity=20);
}

/* type common */
#articles-wrap .line:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#articles-wrap .line　a{
	display: block;
	margin: 0;
}
#articles-wrap .line.renewal article a{
	display: none;
}
#articles-wrap .line article h2{
	background-image:none;
	color: #fff;
	letter-spacing: 0.5px;
	font-weight:bold !important;
}
#articles-wrap .line article p.date{
	margin-bottom:3px;
	font-size:14px;
}
.type1.line article p.date,
.type3.line article p.date{
	margin-right:25px;
	margin-left:25px;
}
.type1 article h2,
.type3 article h2{
	margin-left:25px;
	margin-right:25px;
	font-size: 20px;
	font-weight: bold;
	line-height: 30px;
}
.type2 article h2{
	font-size: 18px;
	line-height: 25px;
}
.type4 article h2{
	font-size: 16px;
}
.line article{
	position: relative;
}
.line article .sub-title{
	display: table;
	letter-spacing: 1px;
	margin-bottom: 9px;
}
.line article .sub-title .name{
	display:table-cell;
	font-size: 10px;
	color: #fff;
	vertical-align: middle;
	padding:0 8px;
}
.line article .sub-title .name span.post{
	display: none;
}
.line article .sub-title .name span.cross{
	padding-right: 3px;
	padding-left: 3px;
}
.line article .sub-title .chapter{
	display:table-cell;
	font-family: 'Oswald', sans-serif;
	font-size: 10px;
	background-color: #fff;
	vertical-align: middle;
	padding:0 8px;
	line-height: 21px;
}
.ie8 .line article .sub-title .chapter{
	color: #ff9000;
}
.line article .image-wrap{
	width: auto;
	height: auto;
	overflow: hidden;
	position: relative;
}
.line article .image-wrap img{
	opacity: 1;
}
.line article .image-wrap .title-sp{
	display: none;
}

/* type1 */
.type1 article{
	width: 100%;
	height: 336px;
}
.type1 article .title-wrap{
	width: 302px;
	float: left;
	height: 336px;
}
.type1 article .title-wrap .inner{
	width: 100%;
	height: 100%;
	display: table;
}
.type1 article .title-wrap .inner .table-cell{
	display: table-cell;
	vertical-align: middle;
}
.type1 article .image-wrap{
	width: 598px;
	height: 336px;
	float: right;
}
.type1 article .image-wrap img{
	width: 100%;
}
.type1 article .sub-title{
	margin-left: 25px;
}


/* type2 */
.type2 .left{
	width: 447px;
	height: 360px;
	vertical-align: top;
	float: left;
	margin-right: 6px;
}
.type2 .left h2{
	margin-bottom: 0;
}
.type2 .left .image-wrap{
	float: left;
	width: 270px;
	height: 360px;
	margin: 0;
	padding: 0;
	vertical-align: top;
}
.type2 .left .title-wrap{
	display: table;
	float: right;
	width: 177px;
	height: 360px;
	vertical-align: middle;
}
.type2 .left .title-wrap .inner {
    display: table-cell;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: middle;
}
.type2 .left .title-wrap .table-cell{
	width: 137px;
}
.type2 .left .sub-title .name {
    display: inline-block;
    margin-bottom: 0;
    padding-bottom: 3px;
    padding-top: 3px;
}
.type2 .left .sub-title .chapter {
    display: inline-block;
    margin-bottom: 0;
}
.type2 .right{
	float: right;
	width: 447px;
	height: 360px;
	vertical-align: top;
}

.type2 .right .image-wrap{
	width: 447px;
	height: 223px;
}
.type2 .right .title-wrap {
    padding: 18px 18px 0 18px;
}
.type2 .right .sub-title{
	display: inline-block;
	background-color: transparent;
}

/* type3 */
.type3 article{
	width: 100%;
	height: 336px;
}

.type3 article .title-wrap{
	width: 302px;
	float: right;
	height: 336px;
}
.type3 article .title-wrap .inner{
	width: 100%;
	height: 100%;
	display: table;
}
.type3 article .title-wrap .inner .table-cell{
	display: table-cell;
	vertical-align: middle;
}
.type3 article .image-wrap{
	width: 598px;
	height: 336px;
	float: left;
}
.type3 article .image-wrap img{
	width: 100%;
}
.type3 article .sub-title{
	margin-left: 25px;
}

/* type4 */
.type4:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.type4 article{
	width: 296px;
	float: left;
	overflow: hidden;
}
.type4 article .inner{
	padding-right: 18px;
	padding-left: 18px;
}

.type4 article.center{
	width: 308px;
}
.type4 article.center .article-inner{
	margin:0 6px;
	padding-bottom:20px;
}
.type4 h2{
	margin-bottom: 0;
}
.type4 article .image-wrap{
	height: 222px;
	margin-bottom: 18px;
}

/* type5 */
.type5 .left{
	width: 447px;
	height: 360px;
	vertical-align: top;
	float: left;
	margin-right: 6px;
}
.type5 .left h2{
	margin-bottom: 0;
}
.type5 .image-wrap{
	width: 447px;
	height: 223px;
}
.type5 .title-wrap{
	padding: 18px 18px 0 18px;
}
.type5 .right{
	width: 447px;
	height: 360px;
	float: right;
}

/* type6 */
#vol6 .type4 article.center .article-inner {
	margin:0 6px;
	padding-bottom:20px;
}


/* past theme */
.past-theme-wrap{
	background-color: #0c0f11;
	padding-bottom: 35px;
	padding-top: 40px;
	width: 100%;
}
#past-theme{
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
#past-theme article{
	float: left;
	position: relative;
	visibility: hidden;
}
#past-theme article:after{
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#past-theme h3.title-sp{
	display: none;
}
#past-theme .name-sp{
	display: none;
	color: #fff;
}
#past-theme h3.title-pc{
	position: absolute;
	z-index: 100;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
#past-theme .name-pc{
	position: absolute;
	z-index: 100;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
#past-theme .icon-link-blank{
	position: absolute;
	z-index: 100;
	background-image:url('../images/common/icon_link_blank.png');
	background-repeat: no-repeat;
	background-position: left top;
	width: 11px;
	height: 11px;
	display: block;
	right: 10px;
	bottom: 10px;
}
#past-theme .vol1 h3.title-pc{
	top: 85px;
	left:60px;
	background-image:url('../images/past_theme/ti_archive_place.png');
	background-repeat: no-repeat;
	background-position: left top;
	width: 175px;
	height: 34px;
}
#past-theme .vol1 .name-pc{
	top: 125px;
	left:60px;
	background-image:url('../images/past_theme/ti_archive_place.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 175px;
	height: 13px;
}
#past-theme .vol2 h3.title-pc{
	top: 85px;
	left:60px;
	background-image:url('../images/past_theme/ti_archive_style.png');
	background-repeat: no-repeat;
	background-position: left top;
	width: 175px;
	height: 33px;
}
#past-theme .vol2 .name-pc{
	top: 125px;
	left:60px;
	background-image:url('../images/past_theme/ti_archive_style.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 175px;
	height: 14px;
}
#past-theme .vol3 h3.title-pc{
	top: 85px;
	left:28px;
	background-image:url('../images/past_theme/ti_archive_comm.png');
	background-repeat: no-repeat;
	background-position: left top;
	width: 248px;
	height: 33px;
}
#past-theme .vol3 .name-pc{
	top: 125px;
	left:28px;
	background-image:url('../images/past_theme/ti_archive_comm.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 248px;
	height: 14px;
}
#past-theme a{
	display: block;
	margin: 0;
	padding:0;
	height: 222px;
}
#past-theme article.center .article-inner{
	margin-right: 6px;
	margin-left: 6px;
	position: relative;
}
#past-theme article .archive{
	position: absolute;
	left: 0;
	top:0;
	width: 51px;
	height: 51px;
	display: block;
	background-image:url('../images/common/icon_archive.png');
	background-repeat: no-repeat;
	background-position: left top;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	z-index: 1000;
}
#articles-wrap #past-theme.line article a{
	display: block;
	height: 222px;
}

/* sns-wrap-bottom */
.sns-wrap-bottom{
	background-color: #000;
	width: 100%;
}

/*===============================================================

	3.	Media Queries

===============================================================*/

@media (min-width: 641px) {

	article .arrow{
		z-index: 3;
		position: absolute;
	}
	#articles-wrap article .arrow{
		position: absolute;
		background-repeat: no-repeat;
		background-position: left top;
		display: block;
	}
	#articles-wrap article .arrow .arrow-on{
		position: absolute;
		background-repeat: no-repeat;
		background-position: left bottom;
		display: none;
	}

	.type1 article .arrow{
		width: 9px;
		height: 17px;
		left:0;
		top:99px;
	}
	.type1 article .arrow .arrow-on{
		width: 9px;
		height: 17px;
	}
	.type2 article.left .arrow{
		width: 9px;
		height: 17px;
		left: 261px;
		top:90px;
	}
	.type2 article.left .arrow .arrow-on{
		width: 9px;
		height: 17px;
	}
	.type2 article.right .arrow{
		width: 17px;
		height: 9px;
		left: 20px;
		top:215px;
	}
	.type2 article.right .arrow .arrow-on{
		width: 17px;
		height: 9px;
	}
	.type2{
		max-height: 360px;
		overflow: hidden;
	}
	.type3 article .arrow{
		width: 9px;
		height: 17px;
		left: 589px;
		top:105px;
	}
	.type3 article .arrow .arrow-on{
		width: 9px;
		height: 17px;
	}
	.type4 article .arrow{
		width: 19px;
		height: 9px;
		left: 17px;
		top:213px;
	}
	.type4 article .arrow .arrow-on{
		width: 19px;
		height: 9px;
	}
	.type5 article .arrow{
		width: 17px;
		height: 9px;
		left: 20px;
		top:215px;
	}
	.type5 article .arrow .arrow-on{
		width: 17px;
		height: 9px;
	}
	.type5.line article .image-wrap{
		width: 447px;
		height: 223px;
		overflow: hidden;
	}
	/* vol4 arrow */
	#vol4 .type1 article .arrow,
	#vol4 .type1 article .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_r.png');
	}
	#vol4 .type2 article.left .arrow,
	#vol4 .type2 article.left .arrow-on{
		background-image:url('../images/top/icon_arrow_t.png');
	}
	#vol4 .type2 article.right .arrow,
	#vol4 .type2 article.right .arrow-on,
	#vol4 .type3 article .arrow,
	#vol4 .type3 article .arrow-on{
			background-image:url('../images/top/icon_arrow_l.png');
	}
	#vol4 .type4 article .arrow,
	#vol4 .type4 article .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_t.png');
	}
	/* vol5 arrow */
	#vol5 .type1 article .arrow,
	#vol5 .type1 article .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_r_vol5.png');
	}
	#vol5 .type3 article .arrow,
	#vol5 .type3 article .arrow-on{
		background-image:url('../images/top/icon_arrow_l_vol5.png');
	}
	#vol5 .type4 article .arrow,
	#vol5 .type4 article .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_t_vol5.png');
	}
	#vol5 .type5 article .arrow,
	#vol5 .type5 article .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_t_vol5.png');
	}
	/* vol6 arrow */
	#vol6 .type1 article .arrow,
	#vol6 .type1 article .arrow .arrow-on {
		background-image:url('../images/top/icon_arrow_r_vol6.png');
	}
	#vol6 .type2 article.right .arrow,
	#vol6 .type2 article.right .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_t_vol6.png');
	}
	#vol6 .type3 article .arrow,
	#vol6 .type3 article .arrow-on {
		background-image:url('../images/top/icon_arrow_l_vol6.png');
	}
	#vol6 .type2 article.left .arrow,
	#vol6 .type2 article.left .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_l_vol6.png');
	}
	#vol6 .type4 article .arrow,
	#vol6 .type4 article .arrow .arrow-on {
		background-image:url('../images/top/icon_arrow_t_vol6.png');
	}
	/* vol7 arrow */
	#vol7 .type1 article .arrow,
	#vol7 .type1 article .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_r_vol7.png');
	}
	#vol7 .type2 article.left .arrow,
	#vol7 .type2 article.left .arrow-on{
		background-image:url('../images/top/icon_arrow_l_vol7.png');
	}
	#vol7 .type2 article.right .arrow,
	#vol7 .type2 article.right .arrow-on{
		background-image:url('../images/top/icon_arrow_t_vol7.png');
	}
	#vol7 .type3 article .arrow,
	#vol7 .type3 article .arrow-on{
		background-image:url('../images/top/icon_arrow_l_vol7.png');
	}
	#vol7 .type4 article .arrow,
	#vol7 .type4 article .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_t_vol7.png');
	}
	/* vol8 arrow */
	#vol8 .type1 article .arrow,
	#vol8 .type1 article .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_r_vol8.png');
	}
	#vol8 .type3 article .arrow,
	#vol8 .type3 article .arrow-on{
		background-image:url('../images/top/icon_arrow_l_vol8.png');
	}
	#vol8 .type4 article .arrow,
	#vol8 .type4 article .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_t_vol8.png');
	}
	#vol8 .type5 article .arrow,
	#vol8 .type5 article .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_t_vol8.png');
	}
	/* vol9 arrow */
	#vol9 .type1 article .arrow,
	#vol9 .type1 article .arrow .arrow-on {
		background-image:url('../images/top/icon_arrow_r_vol9.png');
	}
	#vol9 .type2 article.right .arrow,
	#vol9 .type2 article.right .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_t_vol9.png');
	}
	#vol9 .type3 article .arrow,
	#vol9 .type3 article .arrow-on {
		background-image:url('../images/top/icon_arrow_l_vol9.png');
	}
	#vol9 .type2 article.left .arrow,
	#vol9 .type2 article.left .arrow .arrow-on{
		background-image:url('../images/top/icon_arrow_l_vol9.png');
	}
	#vol9 .type4 article .arrow,
	#vol9 .type4 article .arrow .arrow-on {
		background-image:url('../images/top/icon_arrow_t_vol9.png');
	}

/* chapter color */
	#vol4 .line article .sub-title .chapter{
		color:#ff9000;
	}
	#vol4 article .image-wrap .ol,
	#vol4 .line article .sub-title .name{
		background-color: #ff9000;
	}
	#vol5 .line article .sub-title .chapter{
		color:#3764ed;
	}
	#vol5 article .image-wrap .ol,
	#vol5 .line article .sub-title .name{
		background-color:#3764ed;
	}
	#vol6 .line article .sub-title .chapter{
		color:#03ab5d;
	}
	#vol6 article .image-wrap .ol,
	#vol6 .line article .sub-title .name {
		background-color:#03ab5d;
	}
	#vol7 .line article .sub-title .chapter{
		color:#cc40ad;
	}
	#vol7 article .image-wrap .ol,
	#vol7 .line article .sub-title .name{
		background-color: #cc40ad;
	}
	#vol8 .line article .sub-title .chapter{
		color:#935ff1;
	}
	#vol8 article .image-wrap .ol,
	#vol8 .line article .sub-title .name{
		background-color: #935ff1;
	}
	#vol9 .line article .sub-title .chapter{
		color:#1a9fa7;
	}
	#vol9 article .image-wrap .ol,
	#vol9 .line article .sub-title .name{
		background-color: #1a9fa7;
	}
}

/* ～640px
** SmartPhone Mode
------------------------------------------ */
@media (max-width: 640px) {

	/*
	** override and layout
	*/
	body{
		min-width: 100%;
	}
	p{
		margin-bottom: 0;
	}
	#front-wrap{
		min-width: 100%;
		padding-bottom: 0;
	}

	#page-nav{
		display: none;
	}
	#gl_footer{
		position: relative;
	}


	/* title */
	.title-inner{
		width:100%;
		margin-right: auto;
		margin-left: auto;
		padding-bottom: 0;
		padding-top: 25px;
		position: relative;
		z-index: 2;
	}
	.line article.top1 .sub-title .name{
		display: block;
	}
	h2{
		margin-bottom:0;
	}
	#title-wrap{
		padding-top: 0;
		padding-bottom: 0;
		position: relative;
		margin-bottom: 0;
	}
	#title-wrap .bg-sp{
		display: block;
		position: absolute;
		z-index: 1;
	}
	#title-wrap .bg-sp{
		width: 100%;
		z-index: 0;
	}
	#title-wrap .bg-sp img{
		width: 100%;
		height: auto;
	}
	#title-wrap h1{
		padding-bottom: 0;
		margin-bottom: 0;
		height: 18px;
		margin-left: 0;
	}
	#title-wrap h1 img{
		height: 18px;
	}
	#title-wrap .ti-sub{
		margin-bottom:12px;
		height: 9px;
	}
	#title-wrap .ti-sub img{
		height: 9px;
	}
	#title-wrap .ti_bottom_txt{
		margin-bottom: 0;
		height: 6px;
		display: inline-block;
	}
	#title-wrap .ti_bottom_txt img{
		height:6px;
		display: block;
	}
	#title-wrap .num-sp{
		display: block;
		line-height: 0;
		margin-right: 133px;
		margin-left: 133px;
		margin-top:-4px;
	}
	#title-wrap .num-sp span{
		display: inline-block;
		width: 100%;
		max-width: 70px;
	}
	#title-wrap .num-sp img{
		height: 35px;
	}
	#title-wrap .top-line {
		background-color: inherit;
		height: 35px;
		padding-top: 0;
	}
	#move-page-li{
		visibility:visible;
		display: block;
		bottom: 276px;
		width: 44px;
		height: 44px;
		left: 50%;
		margin-left: -22px;
	}
	#move-page-li li{
		width: 44px;
		height: 44px;
	}
	#move-page-li li.prev a{
		width: 44px;
		height: 44px;
		background-image:url('../images/common/single/icon_prev.png');
		background-size: 44px 44px;
		background-color: #000;
	}
	#move-page-li li.page-top a{
		width: 44px;
		height: 44px;
		background-image:url('../images/common/single/icon_pagetop.png');
		background-size: 44px 44px;
		background-color: #000;
	}
	#move-page-li li.next a{
		width: 44px;
		height: 44px;
		background-image:url('../images/common/single/icon_next.png');
		background-size: 44px 44px;
		background-color: #000;
	}
	#title-wrap .news{
		display: none;
	}
	#title-wrap .about{
		float: none;
		margin-top:0;
		width: 100%;
		height: auto;
		text-align: center;
	}
	#title-wrap .about a{
		background-image:url('../images/common/sp_arrow_about.png');
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 9px 9px;
		background-color: transparent;
		width: auto;
		height: auto;
		font-size: 10px;
		text-indent:0;
		margin-bottom: 0;
		padding-left: 12px;
		display: inline-block;
		text-decoration: none;
		padding-top:12px;
		padding-bottom: 12px;
		margin-top:-14px;
		position: relative;
		z-index: 1000;
	}
	#title-wrap .about a:hover{
		text-decoration: none;
	}
	#contents .sns-wrap{
		display: none;
	}


	/* article */
	#articles-wrap .line{
		margin-bottom: 0;
	}
	article .arrow{
		background-image:url('../images/top/icon_arrow_t_sp.png');
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 17px 9px;
		width: 17px;
		height: 9px;
		bottom: 4px;
		left: 15px;
		display: block;
		position: absolute;
	}
	#articles-wrap{
		width: 100%;
	}
	#articles-wrap .vol{
		overflow: hidden;
	}
	#articles-wrap .line article{
		clear: both;
		position: relative;
		margin-bottom: 0;
		margin-top: 0;
	}
	#articles-wrap .line article.off .title-wrap{
		opacity: 1;
		filter: alpha(opacity=100);
	}
	#articles-wrap .line article.off .title-wrap .chapter{
		opacity: 0.2;
		filter: alpha(opacity=20);
	}
	#articles-wrap .line article.off h2{
		opacity: 0.2;
		filter: alpha(opacity=20);
	}
	#articles-wrap .line article p.date{
		margin-bottom:0;
		font-size:10px;
	}
	#articles-wrap .line article.off p.date{
		opacity: 0.2;
		filter: alpha(opacity=20);
	}
	article .image-wrap .ol{
		display: none;
	}
	.line article .sub-title{
		display: block;
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		margin-left: 0;
	}
	.type1 article .sub-title{
		margin-left: 0;
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		display: block;
		z-index: 100;
	}
	#articles-wrap .line article{
		visibility: visible;
		z-index: 2;
	}
	.type1 article{
		height: auto;
	}
	.type1 article .title-wrap{
		width: 100%;
		float: none;
		height: auto;
	}
	.type1 article h2, .type3 article h2{
		margin: 0;
		font-size: 14px;
		line-height: 18px;
	}

	.type1 article{
		width: auto;
	}
	.type1 article .image-wrap{
		float: none;
		width: 100%;
		height: auto;
		position: relative;
	}
	.type1 article .title-wrap .inner .table-cell{
		display: block;
	}
	.line article .sub-title .name{
		background-image:url('../images/top/bg_chapter_name.jpg');
		background-color: #05060b;
		background-repeat: repeat-y;
		background-position: left top;
		background-size: 320px 30px;
		font-weight: bold;
		font-size: 11px;
		width: 100%;
		height: 30px;
		line-height: 30px;
		border-left:3px #f38a01 solid;
		padding-left:15px;
	}
	.line article .sub-title .name span.post{
		display: inline;
	}
	#vol6 .type4 article.center .article-inner {
		margin-right:0;
		margin-left:0;
		padding-bottom:0;
	}

	/* chapter color */
	#vol4 .line article .sub-title .name{
		background-color: #05060b;
	}
	#vol5 .line article .sub-title .name{
		border-left:3px #3764ed solid;
	}
	#vol5 .line article .sub-title .chapter{
		color:#3764ed;
	}
	#vol6 .line article .sub-title .name{
		border-left:3px #03ab5d solid;
	}
	#vol6 .line article .sub-title .chapter{
		color:#03ab5d;
	}
	#vol7 .line article .sub-title .name{
		border-left:3px #cc40ad solid;
	}
	#vol7 .line article .sub-title .chapter{
		color:#cc40ad;
	}
	#vol8 .line article .sub-title .name{
		border-left:3px #935ff1 solid;
	}
	#vol8 .line article .sub-title .chapter{
		color:#935ff1;
	}
	#vol9 .line article .sub-title .name{
		border-left:3px #1a9fa7 solid;
	}
	#vol9 .line article .sub-title .chapter{
		color:#1a9fa7;
	}


	.line article .sub-title .chapter{
		display: inline-block;
	}
	.type1 article .title-wrap .inner{
		display: block;
	}
	.type1.line article p.date,
	.type3.line article p.date {
		margin-right:0;
		margin-left:0;
	}
	.type2 .left .image-wrap{
		width: 100%;
		height: auto;
	}
	.type2 .left .image-wrap img{
		width: 100%;
	}
	.type2 .left{
		width: 100%;
		height: auto;
		float: none;
		margin: 0;
	}
	.type2 .left .image-wrap{
		position: relative;
	}
	.type2 .left .title-wrap{
		padding:0;
	}
	.type2 .left .title-wrap {
		width: 100%;
		height: auto;
		float: none;
		display: block;
	}
	.type2 .left .title-wrap .inner {
		padding: 0;
	}
	.type2 .left .title-wrap .table-cell{
		width: inherit;
	}
	.type2 .right{
		float: none;
		width: 100%;
		height: auto;
	}
	.type2 .right .image-wrap{
		width: 100%;
		height: auto;
		float: none;
		position: relative;
	}
	.type2 .right .image-wrap img{
		width: 100%;
		height: auto;
	}
	.type2 .right .title-wrap{
		width: 100%;
		height: auto;
		float: none;
		display: block;
	}
	.type2 .right .title-wrap {
    padding: 0;
}
	.type2 .right .title-wrap .inner{
		padding:0;
	}
	.type2 article h2{
		font-size: 14px;
		font-weight: bold;
		line-height: 18px;
		padding: 10px 15px 15px 15px;
	}
	article p.date {
		padding: 10px 15px 0 15px;
	}
	.type3 article{
		height: auto;
	}
	.type3 article .image-wrap{
		width: auto;
		height: auto;
		float: none;
	}
	.type3 article .title-wrap{
		width:100%;
		float: none;
		height: auto;
	}
	.type3 article .title-wrap .inner .table-cell{
		display: block;
	}
	.type3 article .image-wrap{
		position: relative;
	}
	.type4 article{
		width: 100%;
		height: auto;
		float: none;
	}
	.type4 article .image-wrap{
		width: 100%;
		height: auto;
		margin-bottom: 0;
		position: relative;
	}
	.type4 article.center{
		width: 100%;
	}
	.type4 article.center .article-inner{
		margin: 0;
		padding: 0;
	}
	.type4 article .image-wrap img{
		width: 100%;
	}
	.type4 article .inner{
		padding: 0;
	}
	.type4 article h2{
		font-size: 14px;
	}
	.type5 .image-wrap{
		width: 100%;
		height: auto;
	}
	.type5 .image-wrap img{
		width: 100%;
	}
	.type5{
		width: 100%;
		height: auto;
		float: none;
		margin: 0;
	}
	.type5 .image-wrap{
		position: relative;
	}
	.type5 .title-wrap{
		padding:0;
	}
	.type5 .right,.type5 .left{
		float: none;
		width: 100%;
		height: auto;
	}
	.type5 .right .image-wrap,
	.type5 .left .image-wrap{
		width: 100%;
		height: auto;
		float: none;
		position: relative;
	}
	.type5 .right .image-wrap img,
	.type5 .left .image-wrap img{
		width: 100%;
		height: auto;
	}
	.type5 .right .title-wrap,
	.type5 .left .title-wrap{
		width: 100%;
		height: auto;
		float: none;
		display: block;
	}
	.type5 .right .title-wrap .inner,
	.type5 .left .title-wrap .inner{
		padding:0;
	}
	article h2{
		font-size: 14px;
		font-weight: bold;
		line-height: 18px;
		padding: 10px 15px 15px 15px;
	}
	article .image-wrap{
		float: none;
		width: 100%;
		padding-top: 30px;
	}

	.vol .old{
		display: none;
	}
	.vol .old article .image-wrap{
		padding-top: 0;
	}
	.vol .no-title .image-wrap{
		padding-top: 0;
	}
	.vol .no-title .sub-title .name{
		display: none;
	}
	.vol .top2 .sub-title .chapter{
	}
	.vol .top2 article .image-wrap{
		padding-top: 0;
		position: relative;
	}
	.vol .old .sub-title .name{
		display: none;
	}
	.vol .old .sub-title .chapter{
	}
	.vol .old article .image-wrap{
		padding-top: 0;
		position: relative;
	}
	.btn-more-wrap{
		width: 100%;
		margin-bottom: 15px;
	}
	.btn-more a{
		margin-right: 15px;
		margin-left: 15px;
		display: block;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
		font-size: 13px;
		font-weight: bold;
		color: #fff;
		text-decoration: none !important;
		border:2px solid #fff;
	}
	.btn-more a:hover{
		text-decoration: none;
	}
	.vol article .image-wrap img{
		visibility: hidden;
	}
	.vol .top2 .image-wrap,
	.vol .old .image-wrap{
		padding-top: 0;
	}
	#past-theme .icon-link-blank,
	#past-theme .name-pc,
	#past-theme .title-pc{
		display: none;
	}
	#past-theme{
		width: 100%;
	}



	#sns-wrap .sns-module{
		width: 100%;
	}
	#past-theme article{
		float: none;
		visibility: visible;
	}
	#past-theme article .image-wrap{
		padding-top: 0;
		position: relative;
	}
	h2.title-sp{
		display: block;
		height: 30px;
		color: #fff;
		width: 100%;
		line-height: 30px;
		border-left:3px #793183 solid;
		padding-left:15px;
		background-image:url('../images/top/bg_chapter_name.jpg');
		background-repeat: repeat-y;
		background-position: left top;
		background-color: #05060b;
		background-size: 320px 30px;
		font-weight: bold;
		font-size: 11px;
		text-align: left;
	}
	#past-theme{
		width: 100%;
	}
	.past-theme-wrap{
		padding-bottom: 10px;
		padding-top:0;
		background-color:#000;
	}
	#past-theme article{
		position: relative;
		vertical-align: top;
		display: block;
		float: left;
		cursor: pointer;
	}
	#past-theme article img{
		width: 100%;
	}
	#past-theme article .archive{
		background-image:url('../images/common/icon_archive_sp.png');
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 26px 26px;
		width: 26px;
		height: 26px;
	}
	#past-theme article.center .article-inner{
		position: static;
		margin: 0;
	}
	#past-theme .title-pc,
	#past-theme .name-pc{
		display: none;
	}
	#past-theme .title-sp{
		position: absolute;
		background-repeat: no-repeat;
		background-position: left top;
		z-index: 100;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		display: block;
		top:50%;
		left: 50%;
	}
	#past-theme .vol1 .title-sp{
		background-image:url('../images/past_theme/ti_archive_place_sp.png');
		background-size: 68px 13px;
		margin-top: -6px;
		margin-left: -34px;
		width: 68px;
		height: 13px;
	}
	#past-theme .vol2 .title-sp{
		background-image:url('../images/past_theme/ti_archive_style_sp.png');
		background-size: 70px 13px;
		margin-top: -6px;
		margin-left: -35px;
		width: 70px;
		height: 13px;
	}
	#past-theme .vol3 .title-sp{
		background-image:url('../images/past_theme/ti_archive_comm_sp.png');
		background-size: 90px 13px;
		margin-top: -6px;
		margin-left: -45px;
		width: 90px;
		height: 13px;
	}
	#past-theme .icon-link-blank{
		position: absolute;
		right: 3px;
		bottom: 9px;
		width: 13px;
		height: 13px;
		display: block;
		z-index: 100;
	}
	#past-theme .name-sp{
		display: block;
		padding: 0 5px 0 5px;
		font-size: 9px;
		text-align: left;
		word-wrap:break-word;
	}
	#past-theme a{
		display: table-cell;
		height: auto;
	}
	#past-theme a img{
		width: 100%;
	}

	/* if commingsoon article hide
	** except for title
	*/
	#articles-wrap .line article.off{
		display: none;
	}
	#articles-wrap .line article.top1 .name br{
		display: none;
	}

	/*
	** style from ricoh
	** /ja/common/css/sp.css
	*/

}