@charset "UTF-8";

#publish,
.entry-title_p .entry-title,
#top .desc
{
	width: 100%;
	max-width: calc(1280px + 4rem);
	margin: 0rem auto;
	padding: 5rem 2rem 0rem 4rem;
}
.entry-title_p .entry-title
{
	padding: 0rem 2rem 0rem 4rem;
}
#top .desc
{
	padding-top: 0;
	padding-bottom: 2rem;
}

#publish > div
{
	display: flex;
	width: calc(100% + 6rem);
	flex-wrap:wrap;
	padding: 0 2rem;
	margin: -4rem;
}

#publish > div + div
{
	margin-top: 4rem;
}

.publish
{
	cursor:pointer;
	font-family: 'Roboto-M', 'GG-M', sans-serif;
	font-weight: 550;
	line-height: 1.5;
	
	display:flex;
	flex-direction:column;
	padding-bottom: 2rem;
	width:calc(100% / 4 - 4rem);
	margin:2rem;
	
	border-bottom: 1px solid rgb(150, 150, 150);
}

.publish h3
{
	font-family: 'Roboto-M', 'GG-M', sans-serif;
	font-weight: 550;
	font-size: 1.1rem;
	margin-bottom: .25em;
}

.publish .img_area
{
	display:flex;
	width: 100%;
	aspect-ratio: 1 / 1.41;
	align-items:center;
	margin-bottom: 1rem;
}

.publish figure
{
	border: 1px solid rgb(200, 200, 200);
	background-color: rgb(0, 0, 0);
	line-height: 0;
}

.publish figure img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

.publish figure.soldout img
{
	opacity: .3;
}
.publish figure.soldout:after
{
	content: "SOLD OUT";
	font-family: 'Roboto-B', 'GG-B', sans-serif;
	font-weight: 700;
	font-size: 1.1em;
	color: rgb(255, 255, 255);
	line-height: 1;
	/* padding: .5em 1em; */
	display: block;
	position: absolute;
	top: calc(50% - .55em);
	/* left: calc(50% - 4em); */
	width: 100%;
	text-align: center;
}

body:not(.touch) .publish:hover figure img
{
	opacity: .8;
}

.publish h3 .subtitle,
.publish h3 .catch,
.modal-body h3 .subtitle,
.modal-body h3 .catch
{
	font-size: .8em;
	display:block;
}

.publish .text_area
{
	font-family: 'Roboto-R', 'GG-R', sans-serif;
	font-weight: 400;
	font-size: .9em;
}

.publish .detail
{
	display: none;
}

/*****************************************************************
************************  Modal Window ***************************
*****************************************************************/

.modal-body .popup
{
	display: flex;
	align-items: flex-start;
	width:100%;
	max-width: 1020px;
	margin: 0 auto;
	padding: 2rem;
}

.modal-body h3
{
	font-family: 'Roboto-M', 'GG-M', sans-serif;
	font-weight: 550;
	margin-bottom: 1em;
}

.modal-body .popup figure
{
	position:sticky;
	top: 0;
	width:calc(40% - 5vw);
	max-width: 500px;
	border: 1px solid rgb(200, 200, 200);
	background-color: rgb(0, 0, 0);
	line-height: 0;
	margin-right: 5vw;
}

.modal-body .popup figure img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.modal-body .text_area
{
	width:60%;
	font-size: .9em;
}


.modal-body .store
{
	margin-top: 2rem;
}
.modal-body .store a.box
{
	font-family: 'Roboto-B', 'GG-B', sans-serif;
	font-weight: 700;
	padding: 1em 2em;
}

.modal-body .store a.box:before
{
	content:"STORE";
}

.modal-body .store a.box._04:before
{
	content:"PDF";
}
.modal-body .store a.box._04.b:before
{
	content:"電子ブック";
}

.modal-body .soldout
{
	margin-top: 2rem;
}

.modal-body .soldout > span
{
	display:inline-block;
	font-family: 'Roboto-B', 'GG-B', sans-serif;
	font-weight: 700;
	color: rgb(255, 255, 255);
	padding: 1em 2em;
	line-height: 1;
	background-color: rgb(50, 50, 50);
	border-radius: 1em;
}

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 1200px)
{
	.publish
	{
		width:calc(100% / 3 - 4rem);
	}
}

@media screen and (max-width: 900px)
{
	.publish
	{
		width:calc(100% / 2 - 4rem);
	}
	
	.modal-body .popup
	{
		flex-direction: column;
		align-items: center;
	}
	.modal-body .popup figure
	{
		width: 100%;
		position:static;
		margin-right: 0;
		margin-bottom: 2rem;
	}
	.modal-body .text_area
	{
		width: 100%;
	}
}

@media screen and (max-width: 600px), (max-height: 600px)
{
	#publish, .entry-title_p .entry-title,
	#top .desc
	{
		padding: 0rem 2rem;
	}
	
	.publish
	{
		width:calc(100% / 2 - 2rem);
		margin: 1rem;
	}
	#publish > div
	{
		display: flex;
		width: calc(100% + 2rem);
		flex-wrap: wrap;
		padding: 0;
		margin: 4rem -1rem;
	}
}