/*基本設定 */





/*隠し要素*/

.hidden{
	display:none;
}




/*ページャー*/
.pager{
	padding-top:10px;
	padding-bottom:10px;
	font-size:0;
	text-align:center;
	user-select: none;
}

.pager.disable{
}

.pager>div{
	display:inline-block;
	border-color:transparent;
	border-style:solid;
	border-width:0 0 3px;
	font-size:1rem;
	margin:0;
	padding:0;
	width:3em;
	max-width:calc(100% / 11);
	cursor:pointer;
	color:var(--fontcolor-normal);
	vertical-align:middle;
}

.pager.disable>div{
	opacity:1;
/*	pointer-events:none;*/
	cursor:wait;
}


.pager>div[data-digit="3"]{
	font-size:min(1rem, 4.5dvw);
}
.pager>div[data-digit="4"]{
	font-size:min(1rem, 3.3dvw);
}
.pager>div[data-digit="5"]{
	font-size:min(1rem, 2.7dvw);
}


/*
.pager>div:hover{
	border-color:#999;
}
*/
.pager>div.current{
	border-color:var(--navicolor-current);
}



/*下部グリッド（masonryやめました）基本設定*/
.grid {
	margin: 0 auto;
	position: relative;

	font-size:0;
	overflow:hidden;

	border-width:0;
	display: flex;
	flex-wrap: wrap;

	margin-bottom:10px;
	padding:10px 5px;

	box-sizing:border-box;
	position: relative;
	border-radius:0;

	background-color:var(--bgcolor-normal);

	width:var(--width-txt);
	max-width:calc(100% - 20px);
	margin:0 auto;


	z-index:120;

/*
	opacity:0;
	animation:opa 0.2s ease 0.3s forwards;
*/
}

@keyframes opa {
	0% {opacity:0;}
	100% {opacity:1;}
}





/*下部グリッド、ボタン領域追加用*/
.grid div.grid-ban{
	margin:0 0 4px;
}

div.grid-ban>.btn{
	height:40px;
}


/*下部グリッド、パーツ基本設定*/
.grid .grid-parts {
	position:relative;
	display:inline-block;
	vertical-align:top;

	box-sizing: border-box;

	transition: background-color 0.2s;

	color:var(--fontcolor-gridparts);

	font-size: 0;
	font-weight:400;

	overflow:hidden;


	border-radius: 8px;
	margin:0 5px 10px;
	width:calc(25% - 10px);

/*	background:var(--bgcolor-gridparts);*/

	background-image: url(https://cdn.tw8.t-walker.jp/html/img/parts01/bg.png);
	background-color:rgba(255,255,255,0.8);
	background-blend-mode:lighten;


}


.grid .grid-parts.dummy {
	background-blend-mode:normal;

}

/*下部グリッド、横倍*/
.grid .grid-parts.grid2 {
	width:calc(50% - 10px);
}

.grid2 .grid-parts-imglayer{
	aspect-ratio:1.533;
}


.grid .grid-parts.grid-parts-flex{
	display:flex;
	flex-direction:column;
}
.grid .grid-parts.grid-parts-flex .grid-parts-flexspace{
	flex-grow:1;
	margin:0;
}

div.grid div.grid-parts:hover{
/*	background-color: #fff;*/
	background-color:rgba(255,255,255,0.95);
}



/*下部グリッド、画像表示領域*/

.grid .grid-parts img{
/*chromeの画像縮小時の過剰ボケ対策*/
	will-change: transform;
}


.grid-parts-imglayer{
	display:inline-block;
	width:100%;
	background:#fff;
	overflow:hidden;
	position:relative;
	aspect-ratio:270/360;
	margin:0 auto;
}




.grid-parts-imglayer>div{
	display:inline-block;
	height:100%;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	mix-blend-mode: normal;
	transform: scale(1) translate(0, 0);
}

/*1pxの隙間対策*/
.grid-parts:not(.grid2):not(.playing):not(.bbs):not(.icon12) .grid-parts-imglayer:not(.grid-img-icon):not(.grid-img-square)>div{
	width:min(calc(100% + 1px), 270px);
}


.grid .grid-parts.grid2 .grid-parts-imglayer>div{
	width:120%;
	left:-10%;
	right:-10%;
	margin:0 auto;
	text-align:center;
}

.grid .grid-parts.grid2 .grid-parts-imglayer>div>img{
	width:auto;
	height:calc(100% + 0.5px);
}



.grid .grid-parts .grid-parts-imglayer img{
	width:100%;
	max-width:none;
}


.grid-parts-imglayer>div:after{
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	mix-blend-mode: multiply;
	pointer-events:none;
	opacity:0;
}


.grid-parts-imglayer>div:nth-of-type(1):after{
	background:#f00;
}
.grid-parts-imglayer>div:nth-of-type(2):after{
	background:#0f0;
}
.grid-parts-imglayer>div:nth-of-type(3):after{
	background:#00f;
}


body:not(.scrolling) .grid-parts a:hover .grid-parts-imglayer{
	background:#000;
}
body:not(.scrolling) .grid-parts a:hover .grid-parts-imglayer>div{
	mix-blend-mode: screen;
}
body:not(.scrolling) .grid-parts a:hover .grid-parts-imglayer>div:after{
	mix-blend-mode: multiply;
	opacity:1;
}
body:not(.scrolling) .grid-parts a:hover .grid-parts-imglayer>div{
	transform: scale(1.1) translate(0, 0);
}
body:not(.scrolling) .grid-parts a:hover .grid-parts-imglayer>div:nth-of-type(1){
  animation: rgb-shift-red 0.2s linear;
}
body:not(.scrolling) .grid-parts a:hover .grid-parts-imglayer>div:nth-of-type(2){
  animation: rgb-shift-green 0.2s linear;
}
body:not(.scrolling) .grid-parts a:hover .grid-parts-imglayer>div:nth-of-type(3){
  animation: rgb-shift-blue 0.2s linear;
}

body:not(.scrolling) .grid-parts[data-imghover]:hover .grid-parts-imglayer{
	background:#000;
}
body:not(.scrolling) .grid-parts[data-imghover]:hover .grid-parts-imglayer>div{
	mix-blend-mode: screen;
}
body:not(.scrolling) .grid-parts[data-imghover]:hover .grid-parts-imglayer>div:after{
	mix-blend-mode: multiply;
	opacity:1;
}
body:not(.scrolling) .grid-parts[data-imghover]:hover .grid-parts-imglayer>div{
	transform: scale(1.1) translate(0, 0);
}
body:not(.scrolling) .grid-parts[data-imghover]:hover .grid-parts-imglayer>div:nth-of-type(1){
  animation: rgb-shift-red 0.2s linear;
}
body:not(.scrolling) .grid-parts[data-imghover]:hover .grid-parts-imglayer>div:nth-of-type(2){
  animation: rgb-shift-green 0.2s linear;
}
body:not(.scrolling) .grid-parts[data-imghover]:hover .grid-parts-imglayer>div:nth-of-type(3){
  animation: rgb-shift-blue 0.2s linear;
}

@keyframes rgb-shift-red {
	0%   {transform: scale(1)    translate(0, 0);}
	50%  {transform: scale(1.05) translate(-3px, 1px);}
	100% {transform: scale(1.1)  translate(0, 0);}
}
@keyframes rgb-shift-green {
	0%   {transform: scale(1)    translate(0, 0);}
	50%  {transform: scale(1.05) translate(3px, 0);}
	100% {transform: scale(1.1)  translate(0, 0);}
}
@keyframes rgb-shift-blue {
	0%   {transform: scale(1)    translate(0, 0);}
	50%  {transform: scale(1.05) translate(1px, 3px);}
	100% {transform: scale(1.1)  translate(0, 0);}
}



/*特殊な画像用の処理*/

/*下部グリッド背景重ね用*/
.grid .grid-parts .grid-parts-imglayer img.grid-img-bg{
	width:auto;
	height:100%;
	max-width:none;
	margin:auto;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin-left:-68.5%;
}


/*下部グリッド背景重ね、イベント用2倍サイズ*/
.grid .grid-parts.grid2 .grid-parts-imglayer > div img.grid-img-bg{
	margin:auto;
}
.grid .grid-parts.grid2 .grid-parts-imglayer > div img.grid-img-origin{
	height:204%
}






/*正方形イラスト用の処理*/
.grid .grid-parts .grid-parts-imglayer.grid-img-square{

}
.grid .grid-parts:not(.grid2) .grid-parts-imglayer.grid-img-square>div{
	left:-16.667%;
	right:-16.667%;
	width:auto;
}

.grid .grid-parts.grid2 .grid-parts-imglayer.grid-img-square{
	background-image: url(https://cdn.tw8.t-walker.jp/html/img/parts01/bg.png);
}
.grid .grid-parts.grid2 .grid-parts-imglayer.grid-img-square>div{
	aspect-ratio: 1;
	left:0;
	right:0;
	width:auto;
	background:#fff;
}
.grid .grid-parts.grid2 .grid-parts-imglayer.grid-img-square>div img{
	width:100%;
}

/*横倍gridの縦長イラスト用の処理*/
.grid .grid-parts.grid2 .grid-parts-imglayer.grid-img-portrait{
	background-image: url(https://cdn.tw8.t-walker.jp/html/img/parts01/bg.png);
}
.grid .grid-parts.grid2 .grid-parts-imglayer.grid-img-portrait>div{
	aspect-ratio: 270 / 360;
	left:0;
	right:0;
	width:auto;
	background:#fff;
}
.grid .grid-parts.grid2 .grid-parts-imglayer.grid-img-portrait>div img{
	width:100%;
}

/*アイコン用の処理*/
.grid-parts-imglayer.grid-img-icon{
	position: relative;
	width: 100%;
	background-image: url(https://cdn.tw8.t-walker.jp/html/img/parts01/bg.png);
}

.grid-parts-imglayer.grid-img-icon>div{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100px;
	height: 100px;
	margin:auto;
}



/*.txt内3つ並び専用*/
.txt .grid[data-gridfix="3"]{
	width:100%;
	max-width:100%;
	line-height:1.8;
}
.txt .grid[data-gridfix="3"] .grid-parts{
	margin:0px 0.53333% 20px;
	width:32%;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}







/*下部グリッド、クリック可能用*/
.grid .grid-parts.clickable:hover{
	cursor:pointer;
}

/*下部グリッド、クリック用の全面aタグ*/
.grid .grid-parts div.grid-parts-linklayer{
	box-sizing:border-box;
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:990;
}
.grid .grid-parts div.grid-parts-linklayer>a:first-child{
	box-sizing:border-box;
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0);
}




/*グリッド内、詳細表示*/
.grid:not(.grid-verbose) .grid-parts .grid-parts-verbose{
	display:none;
}

.grid .grid-parts h4:before{
	display:none;
}


/*下部グリッド、テキスト領域*/
.grid .grid-parts h5{
	display:block;
	box-sizing:border-box;
	text-shadow: none;
	position:relative;
	height:auto;
	min-height: 57px;
	padding:10px 15px;
	font-size:1rem;
	font-weight: 400;
	line-height:1.8;

	color:var(--fontcolor-gridparts);

/*
	line-height: 1.5em;
*/
	background : transparent;
	z-index:5;
}


.grid .grid-parts .grid-parts-ictxt{
	display:block;
	box-sizing:border-box;
	text-shadow: none;
	position:relative;
	height:auto;
	padding:10px 15px;
	font-size:1rem;
	font-weight: 400;
	line-height: 1.8em;
	color:var(--fontcolor-gridparts);
	background : transparent;
	z-index:5;
}




/*下部グリッド、高さ自由なテキスト領域*/
/*2行区切りが発生するかどうかが違う*/
.grid .grid-parts .text-free{
	display:block;
	box-sizing:border-box;
	text-shadow: none;
	position:relative;
	height:auto;
	padding:10px 15px;
	font-size:1rem;
	font-weight: 400;
	line-height:1.8;

	color:var(--fontcolor-gridparts);
	background : transparent;
	z-index:5;
}

.grid .grid-parts .text-free div.text-small{

	color: var(--fontcolor-gridparts);
	font-weight: 400;
	position:relative;
	font-size: 12px;
}

.grid .grid-parts .text-free.text-small{
	color: var(--fontcolor-gridparts);
	font-weight: 400;
	font-size: 12px;
}

/*
.grid .grid-parts .text-free h4{
	font-weight: 500;
}
.grid .grid-parts .text-free.text-small h4,
.grid .grid-parts .text-free .text-small h4{
	font-weight: 500;
	color:var(--fontcolor-gridparts);
}
*/



/*X行で隠す専用処理*/
.grid .grid-parts div.text-clamp{

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp:6;
	overflow:hidden;
	line-clamp:6;

	width:100%;
	max-height:calc(6 * 1.8em);
	line-height:1.8;
}



.grid .grid-parts.scenario .grid-scenario-recommend{
	position: absolute;
	right:0;
	bottom:5%;
	padding:3% 3%;
	font-size:1.2em;
	line-height:1;
	border-radius: 8px;
	color: #fff;
}







/*下部グリッド（くるくるするやつ）下部グリッド以外でも使う*/


.overlay .spin[data-isLoading]{
	display:block;
	position:relative;
	width:min(200px,50dvw);
	margin:0 auto;
	aspect-ratio:0.8;
}

.resarea .spin[data-isLoading]{
	display:block;
	position:relative;
	width:min(200px,50dvw);
	margin:0 auto;
	aspect-ratio:0.8;
}


div.grid[data-isLoading] div.grid-parts.spin{
	display:inline-block;
}
div.grid-parts.spin{
	display:none;
}

div.grid div.grid-parts.spin{
	aspect-ratio:3/4;
}

div.res-append[data-isLoading] .grid-parts.spin{
	display: block;
}

div.res-append .grid-parts.spin{
	position: relative;
	width: 240px;
	height: 320px;
	margin: -50px auto;
}

.top-img .grid-parts.spin{
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	width:240px;
	height:320px;
}

div.grid-parts.spin>div{
	position:absolute;
	left:49%;
	top:30%;
	width:4%;
	height:10%;
	background:#333;
	border-radius:10%;
	transform-origin:50% 200%;
	box-shadow: 0px 0px 3px 0px #bbb;

}
div.grid-parts.spin>div:nth-child(1) {
	transform:rotate(0deg);
	animation:waitspin 1.2s linear -1.2s infinite normal;
}
div.grid-parts.spin>div:nth-child(2) {
	transform:rotate(30deg);
	animation:waitspin 1.2s linear -1.1s infinite normal;
}
div.grid-parts.spin>div:nth-child(3) {
	transform:rotate(60deg);
	animation:waitspin 1.2s linear -1.0s infinite normal;
}
div.grid-parts.spin>div:nth-child(4) {
	transform:rotate(90deg);
	animation:waitspin 1.2s linear -0.9s infinite normal;
}
div.grid-parts.spin>div:nth-child(5) {
	transform:rotate(120deg);
	animation:waitspin 1.2s linear -0.8s infinite normal;
}
div.grid-parts.spin>div:nth-child(6) {
	transform:rotate(150deg);
	animation:waitspin 1.2s linear -0.7s infinite normal;
}
div.grid-parts.spin>div:nth-child(7) {
	transform:rotate(180deg);
	animation:waitspin 1.2s linear -0.6s infinite normal;
}
div.grid-parts.spin>div:nth-child(8) {
	transform:rotate(210deg);
	animation:waitspin 1.2s linear -0.5s infinite normal;
}
div.grid-parts.spin>div:nth-child(9) {
	transform:rotate(240deg);
	animation:waitspin 1.2s linear -0.4s infinite normal;
}
div.grid-parts.spin>div:nth-child(10) {
	transform:rotate(270deg);
	animation:waitspin 1.2s linear -0.3s infinite normal;
}
div.grid-parts.spin>div:nth-child(11) {
	transform:rotate(300deg);
	animation:waitspin 1.2s linear -0.2s infinite normal;
}
div.grid-parts.spin>div:nth-child(12) {
	transform:rotate(330deg);
	animation:waitspin 1.2s linear -0.1s infinite normal;
}


@keyframes waitspin {
	0% {opacity:#fff;}
	10% {background:#fff;}
	80% {background:#333;}
	100% {background:#333;}
}






/*下部グリッドの背景色調整*/
body>.grid{
	border-color:transparent;
}