@charset "utf-8";

html, body {
	background: #fff;
}


#details section {
	height: 0;
	overflow: hidden;
}

.separator section:after{
	content: "";
	display: block;
	clear: both;
	visibility: hidden;

}


.separator {
	float: left;
	height: 0;
/*	display: none;
*/	overflow: hidden;

}

/*.separator.on {

	-webkit-transition: height 400ms ease;
	-o-transition: height 400ms ease;
	transition: height 400ms ease;
}
*/

.separator section {
	position: relative;
	margin: 3px 3px 0 0;
	padding: 20px 24px 24px;
	background: url(/shared/img/bg_detail.png) 0 0 repeat;
}

.separator.opened {
	float: none;
	clear: both;
}
.separator.opened section {
	height: auto;
}

.separator section .title {
	height: 75px;
}

.separator section:after {
	clear: both;
	display: block;
	content: "";
	visibility: hidden;
}

.separator section {
	color: #fff;
}
.separator section a {
	font-weight: bold;
}


.separator .close {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	z-index: 50;
	top: 20px;
	right: 30px;
	background: url(/shared/img/button_close.png) 50% 50% no-repeat;
}


.separator section.magazine .title h3 {
	width: 210px;
	height: 30px;
	text-indent: -9999px;
	background: url(../asset/magazine/title.png) 0 0 no-repeat;
}
.separator section.books .title h3 {
	width: 138px;
	height: 30px;
	text-indent: -9999px;
	background: url(../asset/books/title.png) 0 0 no-repeat;
}
.separator section.web-magazine .title h3 {
	width: 313px;
	height: 30px;
	text-indent: -9999px;
	background: url(../asset/web-magazine/title.png) 0 0 no-repeat;
}
.separator section.mook .title h3 {
	width: 517px;
	height: 35px;
	text-indent: -9999px;
	background: url(../asset/mook/title.png) 0 0 no-repeat;
}
.separator section.publishing .title h3 {
	width: 424px;
	height: 30px;
	text-indent: -9999px;
	background: url(../asset/publishing/title.png) 0 0 no-repeat;
}


/* magazine */

.separator section.magazine article {
	position: relative;
	float: left;
	width: 18.8%;
}
.separator section.magazine article + article {
	margin-left: 1.5%;
}


.separator section.magazine figure {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 18.8%;
	height: 200px;
}
.separator section.magazine .newsweek figure img {
	width: auto;
	height: 176px;
}
.separator section.magazine .figaro figure img {
	width: auto;
	height: 192px;
}
.separator section.magazine .pen figure img {
	width: auto;
	height: 185px;
}
.separator section.magazine .kageki figure img {
	width: auto;
	height: 145px;
}
.separator section.magazine .graph figure img {
	width: auto;
	height: 175px;
}



.separator section.magazine article dl {
	height: 120px;
	margin: 20px 0 0;
	padding: 20px 0 0;
	background: url(/shared/img/border_white.gif) 0 0 repeat-x;
}
.separator section.magazine article dt {
	margin: 0 0 8px;
	line-height: 1.3;
	font-size: 14px;
	font-weight: bold;
}
.separator section.magazine article dd {
	font-size: 12px;
}

.separator section.magazine aside {
	background: #fff;
}
.separator section.magazine aside a,
.separator section.magazine aside span {
	display: block;
	padding: 6px 0 5px;
	line-height: 1.3;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #333;
}




/* books */

.separator section.books .title h3 {
	float: left;
	width: 160px;
}
.separator section.books .title dl {
	margin: 0 0 0 160px;
	padding: 0 0 0 28px;
	line-height: 1.1;
	background: url(/shared/img/border_white_v.gif) 0 0 repeat-y;
}
.separator section.books article {
	float: left;
	width: 18.8%;
}
.separator section.books article + article {
	margin-left: 1.5%;
}


.separator section.books figure {
	display: table-cell;
	width: 18.8%;
	height: 200px;
	margin: 0 auto;
	text-align: center;
	vertical-align: middle;
}
.separator section.books figure img {
	width: auto;
	max-height: 200px;
}

.separator section.books article dl {
	height: 120px;
	margin: 20px 0 0;
	padding: 20px 0 0;
	background: url(/shared/img/border_white.gif) 0 0 repeat-x;
}
.separator section.books article dt {
	margin: 0 0 8px;
	line-height: 1.3;
	font-size: 14px;
	font-weight: bold;
}
.separator section.books article dd {
	font-size: 12px;
}
.separator section.books article.item5 + article {
	display: none;
}


.separator section.books aside {
	background: #fff;
	text-align: center;
	cursor: pointer;
}
.separator section.books aside a {
	display: inline-block;
	padding: 6px 2px 5px 10px;
	line-height: 1.3;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #333;
	background: url(/shared/img/arrow_small.png) 0 50% no-repeat;
}






/* web-magazine */

.separator section.web-magazine article {
	margin: 0 0 25px;
}

.separator section.web-magazine article.newsweek {
	float: left;
	width: 17.6%;
	padding: 0 1.5% 0 0;
}
.separator section.web-magazine article.figaro {
	float: left;
	width: 17.6%;
	padding: 0 1.5% 0;
	background: url(/shared/img/border_white_v.gif) 0 0 repeat-y;
}
.separator section.web-magazine article.pen {
	float: left;
	width: 17.6%;
	padding: 0 1.5% 0;
	background: url(/shared/img/border_white_v.gif) 0 0 repeat-y;
}
.separator section.web-magazine article.pen2 {
	float: left;
	width: 17.6%;
	padding: 0 1.5% 0;
	background: url(/shared/img/border_white_v.gif) 0 0 repeat-y;
}
.separator section.web-magazine article.nagoya {
	float: left;
	width: 17.6%;
	padding: 0 0 0 1.5%;
	background: url(/shared/img/border_white_v.gif) 0 0 repeat-y;
}

.separator section.web-magazine article.newsweek img{
	width: auto;
	height: 25px;
}
.separator section.web-magazine article.figaro img{
	width: auto;
	height: 24px;
}
.separator section.web-magazine article.pen img{
	width: auto;
	height: 32px;
}
.separator section.web-magazine article.pen2 img{
	width: auto;
	height: 32px;
}
.separator section.web-magazine article.nagoya img{
	width: auto;
	height: 39px;
}



.separator section.web-magazine figure {
	height: 70px;
}
.separator section.web-magazine figcaption{
	margin: 0 0 10px;
	height: 48px;
}
.separator section.web-magazine dt {
	margin: 0 0 20px;
	height: 70px;
	font-size: 14px;
	font-weight: bold;
}
.separator section.web-magazine dd {
	font-size: 12px;
}







/* mook */

.separator section.mook .title h3 {
	float: left;
	width: 540px;
}
.separator section.mook .title dl {
	margin: 0 0 0 540px;
	padding: 0 0 0 28px;
	line-height: 1.1;
	background: url(/shared/img/border_white_v.gif) 0 0 repeat-y;
}
.separator section.mook article {
	float: left;
	width: 18.8%;
}
.separator section.mook article + article {
	margin-left: 1.5%;
}


.separator section.mook figure {
	max-width: 150px;
	height: 200px;
	margin: 0 auto;
}
.separator section.mook figure img {
	width: auto;
	height: 200px;
}
.separator section.mook article dl {
	height: 140px;
	margin: 20px 0 0;
	padding: 20px 0 0;
	background: url(/shared/img/border_white.gif) 0 0 repeat-x;
}
.separator section.mook article dt {
	margin: 0 0 8px;
	line-height: 1.3;
	font-size: 14px;
	font-weight: bold;
}
.separator section.mook article dd {
	font-size: 12px;
}

.separator section.mook aside {
	display: table-cell;
	width: 18.8%;
	height: 2.6em;
	padding: 6px 0 5px;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	cursor: pointer;
}
.separator section.mook aside a {
	display: inline-block;
	padding: 0 2px 0 10px;
	white-space: nowrap;
	line-height: 1.3;
	font-weight: bold;
	text-decoration: none;
	color: #333;
	text-align: left;
	background: url(/shared/img/arrow_small.png) 0 50% no-repeat;
}











@media screen and (min-width:750px){
	

	#wrap-extra {
		background: url(/shared/img/grid3.png) 0 249px repeat-x;
	}
	#wrap-outer {
		width: 990px;
		margin: 0 auto;
	}



	#wrap {
		position: relative;
		width: 993px;
		left: -4px;
		margin: 0 auto;
		overflow: hidden;
		border: 0 solid #fff;
		border-width: 0 0 0 3px;
		background: url(/shared/img/bg.png) 0 0 repeat;
	}




	#promo {
		position: relative;
		float: right;
		width: auto;
		min-width: 659px;
		max-width: 1318px;
		height: 406px;
		overflow: hidden;
	}
	#promo .extra {
		position: absolute;
		height: 406px;
		top: 0;
		left: 0;
	}
	#promo li {
		float: left;
		width: 659px;
	}


	#promo {
		width: 659px !important;
	}




	footer nav {
		padding-right: 12px;
	}

	footer .copyright {
		padding-left: 4px;
	}


	div.grid.item {
		position: relative;
		float: left;
		width: 328px;
		height: 246px;
		margin: 3px 3px 0 0;
		background: url(/shared/img/grid1.png) 0 0 no-repeat;
	}

	div.grid.item a {
		display: block;
		height: 246px;
		color: #111;
		text-decoration: none;
		background: url(/shared/img/arrow_grid_open.png) 50% 97% no-repeat;
	}

	div.grid.item h2 {
		height: 40px;
		margin: 0 0 0 25px;
		padding: 25px 0 0;
		font-size: 28px;
		font-weight: bold;
		line-height: 1.2;
	}
	div.grid.item dl {
		margin: 0 0 0 25px
	}
	div.grid.item dt {
		width: 295px;
		height: 50px;
		font-size: 11px;
		letter-spacing: -0.1px;
	}



	div.grid.item dd {
		margin: 5px 0 0;
	}


	div.grid.news {
		background: url(/shared/img/grid2.png) 0 0 no-repeat;
	}
	div.grid.news a {
		background: url(/shared/img/arrow_grid_jump.png) 98% 50% no-repeat;
	}
	div.grid.news dl {
		padding-top: 25px;
	}
	div.grid.news dt {
		width: 280px;
		height: 130px;
	}
	div.grid.item dd {
		width: 280px;
		line-height: 1.5;
	}
	div.grid.item dd img{
		width: 100%;
		height: auto;
	}


	div.grid.banner {
		background: url(/shared/img/grid2.png) 0 0 no-repeat;
	}
	div.grid.banner a {
		background: none;
	}
	div.grid.banner a img {
		position: relative;
		left: 1px;
		top: 1px;
	}




	
	.grid-frame{
		opacity: 0;
		
		-webkit-transition: opacity 200ms ease;
		-o-transition: opacity 200ms ease;
		transition: opacity 200ms ease;
	}
	.grid.active .grid-frame{
		opacity: 1;
	}
	.grid a{
		display: block;
	}	
	.grid a:hover .grid-frame{
		opacity: 1;
	}




	div.grid.item em {
		position: absolute;
		width: 328px;
		height: 246px;
		left: 0;
		top: 0;
		z-index: 10;
		background: url(/shared/img/active_border.png) 0 0 no-repeat;
	}

	div.grid.item.active em {
		visibility: visible;
	}


	div.grid.news em {
	}

	div.grid.banner em {
	}






	div.grid.item strong {
		position: absolute;
		display: block;
		width: 50px;
		height: 50px;
		left: 0;
		top: 0;
		z-index: 20;
		text-indent: -5000px;
		overflow: hidden;
		background: url(/shared/img/icon_new.png) 0 0 no-repeat
	}



	#details section {
		height: 0;
		overflow: hidden;
	}

	#side {
		overflow: hidden;
	}






	.separator section.publishing figure {
		float: left;
		width: 330px;
	}
	.separator section.publishing dl {
		min-height: 222px;
		margin-left: 330px;
		padding: 0 30px;
		background: url(/shared/img/border_white_v.gif) 0 0 repeat-y;
	}

	.separator section.publishing dt {
		margin: 0 0 20px;
		font-size: 14px;
		font-weight: bold;
	}
	.separator section.publishing dt + dd {
		margin: 0 0 20px;
		font-size: 12px;
	}



	.separator figure a:hover,
	.separator section.books aside:hover,
	.separator section.mook aside:hover {
		opacity: 0.8;
		-moz-opacity: 0.8;
		-webkit-opacity: 0.8;
		filter: alpha(opacity=80);
	}


	.grid .sp-separate{
		height: 0 !important;
		overflow: hidden;
	}




}




@media screen and (max-width: 751px) {



	.index #main{
		margin: 0;
	}

	#wrap{
		width: 100%;
		border:none;
	}

	#promo {
		position: relative;
		width: auto;
		padding-top: 61.6%;
		overflow: hidden;
	}
	#promo .extra {
		position: absolute;
		top: 0;
		left: 0;
	}
	#promo li {
		float: left;
		width: 659px;
	}


	#promo {
		width: 100%;
	}
	#promo img{
		width: 100%;
		height: auto;
	}










	.separator{
		height: 0 !important;
		overflow: hidden;
	}







	.grid{
		width: 100%;
	}

	#side{
		height: auto !important;
	}



	div.grid.item {
		position: relative;
		width: 100%;
		background: url(/shared/img/grid1.png) 0 0 repeat;
		background-size: 164px 123px;

		box-sizing: border-box;
	}


	div.grid.item{
		margin: 3px 0 0;
	}


	div.grid.item a dd img{
		width: 100%;
		height: auto;
	}


	div.grid.item > a{
		position: relative;
		display: block;
		padding: 23px;
		color: #111;
		text-decoration: none;

	}
	div.grid.item > a:after{
		content: "";
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: 7px;
		display: block;
		width: 17.5px;
		height: 9.5px;
		background: url(/shared/img/arrow_grid_open_sp.png) 50% 97% no-repeat;
		background-size: 100% 100%;
	}



	div.grid.item > a h2 {
		height: 40px;
		font-size: 28px;
		font-weight: bold;
		line-height: 1.2;
	}

	div.grid.item > a dt {
		font-size: 12px;
		letter-spacing: -0.2px;
	}



	div.grid.item dd {
		margin: 5px 0 0;
	}


	div.grid.news {
		background: url(/shared/img/grid2.png) 0 0 no-repeat;
	}
	div.grid.news a {
		background: url(/shared/img/arrow_grid_jump.png) 98% 50% no-repeat;
	}
	div.grid.news dl {
		padding-top: 25px;
	}
	div.grid.news dt {
		height: 130px;
	}
	div.grid.item dd {
		line-height: 1.5;
	}


	div.grid.banner {
		background: url(/shared/img/grid2.png) 0 0 no-repeat;
	}
	div.grid.banner a {
		background: none;
	}
	div.grid.banner a img {
		position: relative;
		left: 1px;
		top: 1px;
	}



	
	.grid-frame{
		opacity: 0;
		
		-webkit-transition: opacity 200ms ease;
		-o-transition: opacity 200ms ease;
		transition: opacity 200ms ease;
	}
	.grid.active .grid-frame{
		opacity: 1;
	}


	div.grid.item em:nth-child(1){
		position: absolute;
		width: 100%;
		height: 12px;
		left: 0;
		top: 0;
		z-index: 10;
		opacity: 1;
		background: url(/shared/img/active_border.png) 0 0 repeat-x;
	}
	div.grid.item em:nth-child(2){
		position: absolute;
		width: 100%;
		height: 12px;
		left: 0;
		bottom: 0;
		z-index: 10;
		opacity: 1;
		background: url(/shared/img/active_border.png) 0 0 repeat-x;
	}
	div.grid.item em:nth-child(3){
		position: absolute;
		width: 12px;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 10;
		opacity: 1;
		background: url(/shared/img/active_border.png) 0 0 repeat-y;
	}
	div.grid.item em:nth-child(4){
		position: absolute;
		width: 12px;
		height: 100%;
		right: 0;
		top: 0;
		z-index: 10;
		opacity: 1;
		background: url(/shared/img/active_border.png) 0 0 repeat-y;
	}






	div.grid.item em {
		visibility: visible !important;
	}


	div.grid.item.active em {
		visibility: visible;
	}


	div.grid.news em {
	}

	div.grid.banner em {
	}


	div.grid.item strong {
		position: absolute;
		display: block;
		width: 40px;
		height: 40px;
		left: 0;
		top: 0;
		z-index: 20;
		text-indent: -5000px;
		overflow: hidden;
		background: url(/shared/img/icon_new_sp.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}




	.grid .sp-separate{
		overflow: hidden;

	}	

	.sp-separate {
		height: 0;
		overflow: hidden;
	}
	.sp-separate section {
		position: relative;
		margin: 3px 0 0;
		padding: 20px 24px 24px;
		background: url(/shared/img/bg_detail.png) 0 0 repeat;
	}

	.sp-separate.opened {
		float: none;
		clear: both;
	}
	.sp-separate.opened section {
		height: auto;
	}

	.sp-separate section .title {
		margin: 0 0 45px;
		height: 20px;
	}
	.sp-separate section .title img{
		height: 20px;
	}

	.sp-separate section:after {
		clear: both;
		display: block;
		content: "";
		visibility: hidden;
	}

	.sp-separate section {
		color: #fff;
	}
	.sp-separate section a {
		font-weight: bold;
	}


	.sp-separate .close {
		position: absolute;
		display: block;
		width: 21px;
		height: 20px;
		z-index: 50;
		top: 20px;
		right: 30px;
		background: url(/shared/img/button_close_sp.png) 50% 50% no-repeat;
		background-size: 100% 100%;
	}


	.sp-separate section figure{
		margin: 0 0 25px;
		text-align: center;
	}
	.sp-separate section figure img{
		width: 154px;
		height: auto;
	}



	.sp-separate section.magazine .title h3 {
		width: 210px;
		height: 20px;
		text-indent: -9999px;
		background: url(../asset/magazine/title_sp.png) 0 0 no-repeat;
		background-size: auto 100%;
	}
	.sp-separate section.books .title h3 {
		width: 138px;
		height: 20px;
		text-indent: -9999px;
		background: url(../asset/books/title_sp.png) 0 0 no-repeat;
		background-size: auto 100%;
	}
	.sp-separate section.web-magazine .title h3 {
		width: 313px;
		height: 20px;
		text-indent: -9999px;
		background: url(../asset/web-magazine/title_sp.png) 0 0 no-repeat;
		background-size: auto 100%;
	}
	.sp-separate section.mook .title h3 {
		width: 517px;
		height: 48px;
		text-indent: -9999px;
		background: url(../asset/mook/title_sp.png) 0 0 no-repeat;
		background-size: auto 100%;
	}
	.sp-separate section.publishing .title h3 {
		width: 424px;
		height: 20px;
		text-indent: -9999px;
		background: url(../asset/publishing/title_sp.png) 0 0 no-repeat;
		background-size: auto 100%;
	}






	/* magazine */


	.sp-separate section.magazine article + article{
		margin: 40px 0 0;
		padding: 40px 0 0;
		background: url(/shared/img/border_white.gif) 0 0 repeat-x;
	}

	.sp-separate section.magazine article dt {
		margin: 0 0 8px;
		line-height: 1.3;
		font-size: 14px;
		font-weight: bold;
	}
	.sp-separate section.magazine article dd {
		font-size: 12px;
	}

	.sp-separate section.magazine aside {
		margin: 20px 0 0;
		background: #fff;
	}
	.sp-separate section.magazine aside a,
	.sp-separate section.magazine aside span {
		display: block;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		color: #333;
	}




	/* book */


	.sp-separate section.books .title dl {
		display: none;
	}
	.sp-separate section.books figure img {
		width: auto;
		max-height: 200px;
	}

	.sp-separate section.books article + article{
		margin: 40px 0 0;
		padding: 40px 0 0;
		background: url(/shared/img/border_white.gif) 0 0 repeat-x;
	}

	.sp-separate section.books article dt {
		margin: 0 0 8px;
		line-height: 1.3;
		font-size: 14px;
		font-weight: bold;
	}
	.sp-separate section.books article dd {
		font-size: 12px;
	}

	.sp-separate section.books aside {
		margin: 20px 0 0;
		background: #fff;
		cursor: pointer;
		height: 30px;
		line-height: 30px;
		text-align: center;
	}
	.sp-separate section.books aside a {
		display: inline-block;
		padding: 6px 2px 5px 10px;
		line-height: 1.3;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		color: #333;
		background: url(/shared/img/arrow_small.png) 0 50% no-repeat;
	}




	/* web magazine */


	.sp-separate section.web-magazine article {
		margin: 0 0 25px;
	}

	.sp-separate section.web-magazine article + article{
		margin: 20px 0 0;
		padding: 60px 0 0;
		background: url(/shared/img/border_white.gif) 0 0 repeat-x;
	}

	.sp-separate section.web-magazine figure{
		margin: 0 0 60px;
		height: 35px;
		width: 100%;
		text-align: center;
	}


/*	.sp-separate section.web-magazine .newsweek figure{
		background: url(../asset/web-magazine/logo_newsweek.png) 50% 0 no-repeat;
		background-size: auto 100%;
	}
	.sp-separate section.web-magazine .figaro figure{
		background: url(../asset/web-magazine/logo_figaro.png) 50% 0 no-repeat;
		background-size: auto 100%;
	}
	.sp-separate section.web-magazine .pen figure{
		background: url(../asset/web-magazine/logo_pen_online.png) 50% 0 no-repeat;
		background-size: auto 100%;
	}
	.sp-separate section.web-magazine .pen2 figure{
		background: url(../asset/web-magazine/logo_pen.png) 50% 0 no-repeat;
		background-size: auto 100%;
	}
	.sp-separate section.web-magazine .nagoya figure{
		background: url(../asset/web-magazine/logo_nagoya.png) 50% 0 no-repeat;
		background-size: auto 100%;
	}
*/


	.sp-separate section.web-magazine figure img{
/*		display: none;
*/		height: 35px;
		width: auto;
	}
	.sp-separate section.web-magazine figcaption{
		margin: 0 0 20px;
/*		height: 48px;
*/	}
	.sp-separate section.web-magazine dt {
		margin: 0 0 20px;
/*		height: 70px;
*/		font-size: 14px;
		font-weight: bold;
	}
	.sp-separate section.web-magazine dd {
		font-size: 12px;
	}





	/* mook */


	.sp-separate section.mook article + article{
		margin: 40px 0 0;
		padding: 40px 0 0;
		background: url(/shared/img/border_white.gif) 0 0 repeat-x;
	}
	.sp-separate section.mook article dt {
		margin: 0 0 8px;
		line-height: 1.3;
		font-size: 14px;
		font-weight: bold;
	}
	.sp-separate section.mook article dd {
		font-size: 12px;
	}

	.sp-separate section.mook aside {
		display: block;
		width: 100%;
		margin: 20px 0 0;
		padding: 6px 0 5px;
		font-size: 12px;
		text-align: center;
		vertical-align: middle;
		background: #fff;
		cursor: pointer;
	}
	.sp-separate section.mook aside a {
		display: inline-block;
		padding: 0 2px 0 10px;
		white-space: nowrap;
		line-height: 1.3;
		font-weight: bold;
		text-decoration: none;
		color: #333;
		text-align: left;
		background: url(/shared/img/arrow_small.png) 0 50% no-repeat;
	}

	.sp-separate section.mook aside a br{
		display: none;
	}






	/* publishing */

	.sp-separate section.publishing .title {
		margin: 0 0 25px;
		height: 20px;
	}

	.sp-separate section.publishing figure img {
		width: 100%;
	}

	.sp-separate section.publishing dt {
		margin: 0 0 20px;
		font-size: 14px;
		font-weight: bold;
	}
	.sp-separate section.publishing dt + dd {
		margin: 0 0 20px;
		font-size: 12px;
	}







	
}