@charset "utf-8";
/* CSS Document */
.grid-outer-outer{
	overflow:hidden;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	width: calc( 100% / 1 );
	margin: 1rem 0;
	}
.grid-outer{
	overflow: hidden;
	margin: .5rem 0;
	}
.grid-outer h3{
	font-size: .8rem;
	color: rgba(38,50,56,.87);
	padding: 0 8px;
	margin-left: 8px;
	line-height: 1.5;
	border-left: 5px solid #CFD8DC;
	}
.grid-outer h3 b{
	margin-right: 8px;
	font-size: .85rem;
	font-weight: normal;
	}
.grid-outer h3 strong{
	font-size: 1.25rem;
	font-weight: bold;
	margin-right: 2px;
	font-family: Roboto,sans-serif;
	-webkit-font-smoothing: antialiased;
	}
.grid-outer h3 span{
	display: inline-block;
	}
.grid{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	}
.grid-item{
	padding: 8px;
	width: calc(100% / 3 );
	}
.grid .grid-item figure img{
	display: block;
	margin: 0 auto 0 0;
	}
/*初期幅*/
.grid-outer{width: 100%;}
/*count-cont1*/
.grid-outer.count-cont1{width: calc(150% / 3 );}
.grid-outer.count-cont1 h3{width: 100%;}
.grid-outer.count-cont1 .grid-item{width: 100%;}
.grid-outer.count-cont1 .grid-item figure img,
.grid-outer.count-cont1 .grid-item figure .tms-btn-grid{width: 64%;}
/*count-cont2*/
.grid-outer.count-cont2 .grid-item{width: calc(150% / 3 );}
.grid-outer.count-cont2 .grid-item figure img,
.grid-outer.count-cont2 .grid-item figure .tms-btn-grid{width: 64% ;}
/*count-cont4*/
.grid-outer.count-cont4 .grid-item{width: calc(150% / 3 );}
.grid-outer.count-cont4 .grid-item figure img,
.grid-outer.count-cont4 .grid-item figure .tms-btn-grid{width: 64% ;}
/*雑誌用*/
/*count-cont1*/
.body-zasshi .grid-outer.count-cont1{width: calc(100% / 3 );}
.body-zasshi .grid-outer.count-cont1 .grid-item{width: 100%;}
.body-zasshi .grid-outer.count-cont1 .grid-item figure img,
.body-zasshi .grid-outer.count-cont1 .grid-item figure .tms-btn-grid{width: 100%;}
/*count-cont2*/
.body-zasshi .grid-outer.count-cont2{width: calc(200% / 3 );}
.body-zasshi .grid-outer.count-cont2 .grid-item{width: calc(100% / 2 );}
.body-zasshi .grid-outer.count-cont2 .grid-item figure img,
.body-zasshi .grid-outer.count-cont2 .grid-item figure .tms-btn-grid{width: 100% ;}
/*count-cont4*/
.body-zasshi .grid-outer.count-cont4 .grid-item{width: calc(100% / 3 );}
.body-zasshi .grid-outer.count-cont4 .grid-item figure img,
.body-zasshi .grid-outer.count-cont4 .grid-item figure .tms-btn-grid{width: 100% ;}
/*雑誌フィルタ時書影大きく*/
/*count-cont1*/
.body-zasshi.body-filtered .grid-outer.count-cont1{width: calc(100% / 2 );}
/*count-cont2*/
.body-zasshi.body-filtered .grid-outer.count-cont2{width: calc(200% / 2 );}
/*count-cont4*/
.body-zasshi.body-filtered .grid-outer.count-cont4 .grid-item{width: calc(100% / 2 );}
@media screen and (min-width: 480px){
	/*4つ幅*/
	.body-top .wrap-main article{padding: 0 8px;}
	.grid-outer-outer{justify-content: space-between;}
	.grid-item{width: calc(100% / 4);}
	/*count-cont1*/
	.grid-outer.count-cont1{width: calc(200% / 4 );}
	.grid-outer.count-cont1 .grid-item figure img,
	.grid-outer.count-cont1 .grid-item figure .tms-btn-grid{width: calc( 50% - 8px );}
	/*count-cont2★*/
	.grid-outer.count-cont2{width: calc(200% / 4 );}
	.grid-outer.count-cont2 .grid-item{width: calc(100% / 2 );}
	.grid-outer.count-cont2 .grid-item figure img,
	.grid-outer.count-cont2 .grid-item figure .tms-btn-grid{width: 100%;}
	/*count-cont3*/
	.grid-outer.count-cont3{width: calc(400% / 4 );}
	.grid-outer.count-cont3 .grid-item{width: calc(100% / 3 );}
	.grid-outer.count-cont3 .grid-item figure img,
	.grid-outer.count-cont3 .grid-item figure .tms-btn-grid{width: 73%;}
	/*count-cont4*/
	.grid-outer.count-cont4 .grid-item{width: calc(100% / 4 );}
	.grid-outer.count-cont4 .grid-item figure img,
	.grid-outer.count-cont4 .grid-item figure .tms-btn-grid{width:100%;}
	/*count-cont5*/
	.grid-outer.count-cont5 .grid-item{width: calc(100% / 3 );}
	.grid-outer.count-cont5 .grid-item figure img,
	.grid-outer.count-cont5 .grid-item figure .tms-btn-grid{width: 73%;}
	/*count-cont6*/
	.grid-outer.count-cont6 .grid-item{width: calc(100% / 3 );}
	.grid-outer.count-cont6 .grid-item figure img,
	.grid-outer.count-cont6 .grid-item figure .tms-btn-grid{width: 73%;}
	/*雑誌用*/
	/*count-cont1*/
	.body-zasshi .grid-outer.count-cont1{width: calc(100% / 4 );}
	/*count-cont2*/
	.body-zasshi .grid-outer.count-cont2{width: calc(200% / 4 );}
	/*count-cont3*/
	.body-zasshi .grid-outer.count-cont3{width: calc(300% / 4 );}
	.body-zasshi .grid-outer.count-cont3 .grid-item{width: calc(100% / 3 );}
	.body-zasshi .grid-outer.count-cont3 .grid-item figure img,
	.body-zasshi .grid-outer.count-cont3 .grid-item figure .tms-btn-grid{width: 100%;}
	/*count-cont4*/
	.body-zasshi .grid-outer.count-cont4{width: calc(400% / 4 );}
	.body-zasshi .grid-outer.count-cont4 .grid-item{width: calc(100% / 4 );}
	/*count-cont5*/
	.body-zasshi .grid-outer.count-cont5 .grid-item{width: calc(100% / 4 );}
	.body-zasshi .grid-outer.count-cont5 .grid-item figure img,
	.body-zasshi .grid-outer.count-cont5 .grid-item figure .tms-btn-grid{width: 100%;}
	/*count-cont6*/
	.body-zasshi .grid-outer.count-cont6 .grid-item{width: calc(100% / 4 );}
	.body-zasshi .grid-outer.count-cont6 .grid-item figure img,
	.body-zasshi .grid-outer.count-cont6 .grid-item figure .tms-btn-grid{width: 100%;}
	/*雑誌フィルタ時書影大きく*/
	/*count-cont1*/
	.body-zasshi.body-filtered .grid-outer.count-cont1{width: calc(100% / 3 );}
	/*count-cont2*/
	.body-zasshi.body-filtered .grid-outer.count-cont2{width: calc(200% / 3 );}
	/*count-cont3*/
	.body-zasshi.body-filtered .grid-outer.count-cont3{width: calc(300% / 3 );}
	/*count-cont4*/
	.body-zasshi.body-filtered .grid-outer.count-cont4{width: calc(300% / 3 );}
	.body-zasshi.body-filtered .grid-outer.count-cont4 .grid-item{width: calc(100% / 3 );}
	/*count-cont5*/
	.body-zasshi.body-filtered .grid-outer.count-cont5 .grid-item{width: calc(300% / 3 );}
	/*count-cont6*/
	.body-zasshi.body-filtered .grid-outer.count-cont6 .grid-item{width: calc(100% / 3 );}
	}
@media screen and (min-width: 600px){
	/*5つ幅*/
	.grid-item{width: calc(100% / 5);}
	/*count-cont1*/
	.grid-outer.count-cont1{width: calc(150% / 5 );}
	.grid-outer.count-cont1 .grid-item{width: 100%;}
	.grid-outer.count-cont1 .grid-item figure img,
	.grid-outer.count-cont1 .grid-item figure .tms-btn-grid{width: 64%;}
	/*count-cont2*/
	.grid-outer.count-cont2{width: calc(250% / 5 );}
	.grid-outer.count-cont2 .grid-item{width: calc(250% / 5 );}
	.grid-outer.count-cont2 .grid-item figure img,
	.grid-outer.count-cont2 .grid-item figure .tms-btn-grid{width: 78%;}
	/*count-cont3*/
	.grid-outer.count-cont3{width: calc(300% / 5 );}
	.grid-outer.count-cont3 .grid-item{width: calc(100% / 3 );}
	.grid-outer.count-cont3 .grid-item figure img,
	.grid-outer.count-cont3 .grid-item figure .tms-btn-grid{width: 100%;}
	/*count-cont4*/
	.grid-outer.count-cont4 {width: calc(500% / 5 );}
	.grid-outer.count-cont4 .grid-item{width: calc(125% / 5 );}
	.grid-outer.count-cont4 .grid-item figure img,
	.grid-outer.count-cont4 .grid-item figure .tms-btn-grid{width:78%;}
	/*count-cont5*/
	.grid-outer.count-cont5 .grid-item{width: calc(100% / 5 );}
	.grid-outer.count-cont5 .grid-item figure img,
	.grid-outer.count-cont5 .grid-item figure .tms-btn-grid{width: 100%;}
	/*count-cont6*/
	.grid-outer.count-cont6 .grid-item{width: calc(100% / 3 );}
	.grid-outer.count-cont6 .grid-item figure img,
	.grid-outer.count-cont6 .grid-item figure .tms-btn-grid{width: calc(300% / 5 );}
	}
@media screen and (min-width: 720px){
	/*6つ幅*/
	.grid-item{width: calc(99% / 6);}
	/*count-cont1*/
	.grid-outer.count-cont1{width: calc(150% / 6 );}
	.grid-outer.count-cont1 .grid-item{width: 100%;}
	.grid-outer.count-cont1 .grid-item figure img,
	.grid-outer.count-cont1 .grid-item figure .tms-btn-grid{width: 64%;}
	/*count-cont2*/
	.grid-outer.count-cont2{width: calc(250% / 6 );}
	.grid-outer.count-cont2 .grid-item{width: calc(100% / 2 );}
	.grid-outer.count-cont2 .grid-item figure img,
	.grid-outer.count-cont2 .grid-item figure .tms-btn-grid{width: 78%;}
	/*count-cont3*/
	.grid-outer.count-cont3{width: calc(300% / 6 );}
	.grid-outer.count-cont3 .grid-item{width: calc(100% / 3 );}
	/*count-cont4*/
	.grid-outer.count-cont4{width: calc(400% / 6 );}
	.grid-outer.count-cont4 .grid-item{width: calc(100% / 4 );}
	.grid-outer.count-cont4 .grid-item figure img,
	.grid-outer.count-cont4 .grid-item figure .tms-btn-grid{width:100%;}
	/*count-cont5*/
	.grid-outer.count-cont5{width: calc(600% / 6 );}
	.grid-outer.count-cont5 .grid-item{width: calc(100% / 6 );}
	/*count-cont6*/
	.grid-outer.count-cont6 .grid-item{width: calc(100% / 6 );}
	.grid-outer.count-cont6 .grid-item figure img,
	.grid-outer.count-cont6 .grid-item figure .tms-btn-grid{width: 100%;}
	/*雑誌用*/
	/*count-cont1*/
	.body-zasshi .grid-outer.count-cont1{width: calc(100% / 5 );}
	/*count-cont2*/
	.body-zasshi .grid-outer.count-cont2{width: calc(200% / 5 );}
	/*count-cont3*/
	.body-zasshi .grid-outer.count-cont3{width: calc(300% / 5 );}
	/*count-cont4*/
	.body-zasshi .grid-outer.count-cont4{width: calc(400% / 5 );}
	.body-zasshi .grid-outer.count-cont4 .grid-item{width: calc(100% / 4 );}
	/*count-cont5*/
	.body-zasshi .grid-outer.count-cont5 .grid-item{width: calc(100% / 5 );}
	/*count-cont6*/
	.body-zasshi .grid-outer.count-cont6 .grid-item{width: calc(100% / 5 );}
	
	/*雑誌フィルタ時書影大きく*/
	/*count-cont1*/
	.body-zasshi.body-filtered .grid-outer.count-cont1{width: calc(100% / 4 );}
	/*count-cont2*/
	.body-zasshi.body-filtered .grid-outer.count-cont2{width: calc(200% / 4 );}
	/*count-cont3*/
	.body-zasshi.body-filtered .grid-outer.count-cont3{width: calc(300% / 4 );}
	/*count-cont4*/
	.body-zasshi.body-filtered .grid-outer.count-cont4{width: calc(300% / 4 );}
	.body-zasshi.body-filtered .grid-outer.count-cont4 .grid-item{width: calc(100% / 4 );}
	/*count-cont5*/
	.body-zasshi.body-filtered .grid-outer.count-cont5 .grid-item{width: calc(300% / 4 );}
	/*count-cont6*/
	.body-zasshi.body-filtered .grid-outer.count-cont6 .grid-item{width: calc(100% / 4 );}
	}
@media screen and (min-width: 840px){
	/*7つ幅*/
	.grid-item{width: calc(99% / 7);}
	/*count-cont1*/
	.grid-outer.count-cont1{width: calc(150% / 7 );}
	.grid-outer.count-cont1 .grid-item{width: 100%;}
	.grid-outer.count-cont1 .grid-item figure img,
	.grid-outer.count-cont1 .grid-item figure .tms-btn-grid{width: 64%;}
	/*count-cont2*/
	.grid-outer.count-cont2{width: calc(250% / 7 );}
	.grid-outer.count-cont2 .grid-item{width: calc(100% / 2 );}
	.grid-outer.count-cont2 .grid-item figure img,
	.grid-outer.count-cont2 .grid-item figure .tms-btn-grid{width: 78%;}
	/*count-cont3*/
	.grid-outer.count-cont3{width: calc(300% / 7 );}
	.grid-outer.count-cont3 .grid-item{width: calc(100% / 3 );}
	/*count-cont4*/
	.grid-outer.count-cont4{width: calc(400% / 7 );}
	.grid-outer.count-cont4 .grid-item{width: calc(100% / 4 );}
	/*count-cont5*/
	.grid-outer.count-cont5{width: calc(500% / 7 );}
	.grid-outer.count-cont5 .grid-item{width: calc(100% / 5 );}/**/
	/*count-cont6*/
	.grid-outer.count-cont6{width: calc(700% / 7 );}
	.grid-outer.count-cont6 .grid-item{width: calc(100% / 6 );}
	.grid-outer.count-cont6 .grid-item figure img,
	.grid-outer.count-cont6 .grid-item figure .tms-btn-grid{width: 84% ;}
	}
@media screen and (min-width: 960px){
	/*右カラム有5つ幅*/
	.grid-item{width: calc(99% / 5);}
	/*count-cont1*/
	.grid-outer.count-cont1{width: calc(150% / 5 );}
	.grid-outer.count-cont1 .grid-item{width: 100%;}
	.grid-outer.count-cont1 .grid-item figure img,
	.grid-outer.count-cont1 .grid-item figure .tms-btn-grid{width: 64%;}
	/*count-cont2*/
	.grid-outer.count-cont2{width: calc(250% / 5 );}
	.grid-outer.count-cont2 .grid-item{width: calc(250% / 5 );}
	.grid-outer.count-cont2 .grid-item figure img,
	.grid-outer.count-cont2 .grid-item figure .tms-btn-grid{width: 78%;}
	/*count-cont3*/
	.grid-outer.count-cont3{width: calc(300% / 5 );}
	.grid-outer.count-cont3 .grid-item{width: calc(100% / 3 );}
	.grid-outer.count-cont3 .grid-item figure img,
	.grid-outer.count-cont3 .grid-item figure .tms-btn-grid{width: 100%;}
	/*count-cont4*/
	.grid-outer.count-cont4 {width: calc(500% / 5 );}
	.grid-outer.count-cont4 .grid-item{width: calc(125% / 5 );}
	.grid-outer.count-cont4 .grid-item figure img,
	.grid-outer.count-cont4 .grid-item figure .tms-btn-grid{width:78%;}
	/*count-cont5*/
	.grid-outer.count-cont5{width: calc(500% / 5 );}
	.grid-outer.count-cont5 .grid-item{width: calc(100% / 5 );}
	.grid-outer.count-cont5 .grid-item figure img,
	.grid-outer.count-cont5 .grid-item figure .tms-btn-grid{width: 100%;}
	/*count-cont6*/
	.grid-outer.count-cont6 .grid-item{width: calc(100% / 3 );}
	.grid-outer.count-cont6 .grid-item figure img,
	.grid-outer.count-cont6 .grid-item figure .tms-btn-grid{width: calc(300% / 5 );}
	}
@media screen and (min-width: 1024px){
	/*右カラム有6つ幅*/
	.grid-item{width: calc(99% / 6);}
	/*count-cont1*/
	.grid-outer.count-cont1{width: calc(150% / 6 );}
	.grid-outer.count-cont1 .grid-item{width: 100%;}
	.grid-outer.count-cont1 .grid-item figure img,
	.grid-outer.count-cont1 .grid-item figure .tms-btn-grid{width: 64%;}
	/*count-cont2*/
	.grid-outer.count-cont2{width: calc(250% / 6 );}
	.grid-outer.count-cont2 .grid-item{width: calc(100% / 2 );}
	.grid-outer.count-cont2 .grid-item figure img,
	.grid-outer.count-cont2 .grid-item figure .tms-btn-grid{width: 78%;}
	/*count-cont3*/
	.grid-outer.count-cont3{width: calc(300% / 6 );}
	.grid-outer.count-cont3 .grid-item{width: calc(100% / 3 );}
	/*count-cont4*/
	.grid-outer.count-cont4{width: calc(400% / 6 );}
	.grid-outer.count-cont4 .grid-item{width: calc(100% / 4 );}
	.grid-outer.count-cont4 .grid-item figure img,
	.grid-outer.count-cont4 .grid-item figure .tms-btn-grid{width:100%;}
	/*count-cont5*/
	.grid-outer.count-cont5{width: calc(600% / 6 );}
	.grid-outer.count-cont5 .grid-item{width: calc(100% / 6 );}
	.grid-outer.count-cont5 .grid-item figure img,
	.grid-outer.count-cont5 .grid-item figure .tms-btn-grid{width: 100%;}
	/*count-cont6*/
	.grid-outer.count-cont6 .grid-item{width: calc(100% / 6 );}
	.grid-outer.count-cont6 .grid-item figure img,
	.grid-outer.count-cont6 .grid-item figure .tms-btn-grid{width: calc(100% / 1 );}
	}
/*グリッドアイテム*/
.grid-item figure a img {
	vertical-align: bottom;
	border-radius: 1px;
	box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);/**/
	}
.grid-item:hover figure a img {
	box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);/**/
	}
.grid-item figure a:active img {box-shadow: none;}
.card-outer .grid-item figure a img,
.card-outer .grid-item:hover figure a img{
	box-shadow: none;
	border: 1px solid rgba(38,50,56,.08);
	}
.grid-item figcaption {padding: 0;}
.grid-item figure small{
	display: block;
	font-size: 10px;
	margin: 8px 0;
	color:rgba(0,0,0,.38);
	}
.grid-item figure h2,.grid-item h4,.grid-item a h4{
	margin: 8px 0;
	font-size: .85rem;
	line-height: 1.25;
	color: rgba(0,0,0,.54);
	}
@media screen and (min-width: 960px){
		.grid-item figure h2,.grid-item h4{
			font-size: .7rem;
		}
	}
.grid-item figure h2 b,.grid-item h4 b{font-weight: normal;}
.grid-item figure h2 a,.grid-item h4 a{color: rgba(0,0,0,.87);}
.grid-item:hover figure h2 a,.grid-item:hover h4 a{color:rgba(0,0,0,.87);}
.grid-item figure h2 span,.grid-item h4 span{margin: 0 4px;}
.grid-item figure p,.grid-item p{
	font-size: .75rem;
	margin: 8px 0;
	line-height: 1.25;
	color: rgba(0,0,0,.54);
	max-height: 3.75em;
	text-overflow: ellipsis;
	overflow:hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	}
	@media screen and (min-width: 960px){
		.grid-item figure p,.grid-item p{font-size: 11px;}
		}
/*グリッド試し読みボタン*/
.grid-item a.tms-btn-grid{
	color: rgba(0,0,0,.87);
	background-color: #FFF;
	border: 1px solid rgba(0,0,0,.12);
	font-size: 11px;
	line-height: 19px;
	height: 19px;
	padding: 0 8px;
	border-radius: 9.5px;
	display:block;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	margin: 8px auto 8px 0;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	cursor:pointer;
	overflow: hidden;
	}
	@media screen and (min-width: 1024px){
		.grid-item a.tms-btn-grid{
			font-size: 11px;
			line-height: 18px;
			height: 18px;
			border-radius: 9px;
			}
		}
a.tms-btn-grid:before {content: "試し読みあり";}
.grid-item:hover a.tms-btn-grid{
	border: 1px solid rgba(0,0,0,.2);
	color: rgba(0,0,0,.87);
	}
/*ヒュン*/
.shown{
	-webkit-transform: translateY(32px);
	transform: translateY(32px);/**/
	-webkit-animation: moveUp 0.4s forwards;
	animation: moveUp 0.4s forwards;
	bottom:0;
	}
	@-webkit-keyframes moveUp {
		0% { }
		100% {
			-webkit-transform: translateY(0);/**/
			opacity: 1;
			}
		}
	@keyframes moveUp {
		0% { }
		100% {
			-webkit-transform: translateY(0);
			transform: translateY(0);/**/
			opacity: 1;
			}
		}
/*最初は透明*/
.grid-item figure {
	opacity: 0;	/*★★★1⇒0に変更しました*/
	will-change: opacity;
	will-change: transform;
	-webkit-transform: translateY(32px);
	transform: translateY(32px);
	}
	@media screen and (min-width: 600px){
		.grid-item figure {
			opacity: 0;
		}
	}
/*ヒュン位置に差をつける*/
.grid-item:nth-child(4n+2) figure{
	-webkit-transform: translateY(48px);
	transform: translateY(48px);
	}
.grid-item:nth-child(4n+3) figure{
	-webkit-transform: translateY(60px);
	transform: translateY(64px);
	}
.grid-item:nth-child(4n+4) figure{
	-webkit-transform: translateY(68px);
	transform: translateY(72px);
	}