@charset "utf-8";

/*
************************************************************************
* 一覧
************************************************************************
*/
.jinja-list
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	
	margin:40px -40px;
}
.jinja-list .jinja-list-item
{
	flex:0 0 calc(33.33333% - 80px);
	margin:40px;
	
	border-bottom:1px solid #000000;
	cursor:pointer;
	
	padding-bottom:2em;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.jinja-list .jinja-list-item:after
{
	content:"";
	
	position:absolute;
	bottom:0.5em;
	right:0;
	
	display:block;
	
	width:2em;
	height:2em;
	
	background-image:url(../../../_img/icon/circle-arrow.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
.jinja-list .jinja-list-item .thumbnail
{
	
}
.jinja-list .jinja-list-item .thumbnail img
{
	width:100%;
	border-radius:1em;
}
.jinja-list .jinja-list-item .copy
{
	margin-top:1.5em;
	font-size:1.4rem;
	line-height:1.3;
}
.jinja-list .jinja-list-item .title
{
	margin-top:1.0em;
	margin-bottom:0.8em;
	
	display: flex;
	align-items: center;
	align-content: center;
	
	line-height:1.2;
}

.jinja-list .jinja-list-item .title .main
{
	font-size:2.4rem;
}
.jinja-list .jinja-list-item .title .tag
{
	font-size:1.4rem;
	color:#958626;
	
	border-radius:2px;
	border:1px solid #958626;
	padding:0.25em 0.50em;
	margin-left:1.0em;
}
.jinja-list .jinja-list-item .price
{
	display: flex;
	align-items: stretch;
}
.jinja-list .jinja-list-item .price .price-title
{
	font-size:1.6rem;
	margin-right:1em;
	padding-top:0.25em;
}
.jinja-list .jinja-list-item .price .price-list .amount
{
	font-size:2.0rem;
}
.jinja-list .jinja-list-item .price .price-list .name
{
	font-size:1.6rem;
	margin-right:0.5em;
}
.jinja-list .jinja-list-item:hover
{
	opacity:0.7;
}
.jinja-list .jinja-list-item:hover:after
{
	background-image:url(../../../_img/icon/circle-arrow.svg);
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 750px) {
	.jinja-list
	{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		
		margin:5vw -5vw;
	}
	.jinja-list .jinja-list-item
	{
		flex:0 0 calc(100.00000% - 10vw);
		margin:5vw;
		
		border-bottom:1px solid #000000;
		cursor:pointer;
		
		padding-bottom:2em;
		
	}
	.jinja-list .jinja-list-item:after
	{
		content:"";
		
		position:absolute;
		bottom:0.5em;
		right:0;
		
		display:block;
		
		width:2em;
		height:2em;
		
		background-image:url(../../../_img/icon/circle-arrow.svg);
		background-position:center center;
		background-repeat:no-repeat;
		background-size:contain;
	}
	.jinja-list .jinja-list-item .thumbnail
	{
		
		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
	}
	.jinja-list .jinja-list-item .thumbnail img
	{
		width:100%;
		border-radius:1em;
	}
	.jinja-list .jinja-list-item .copy
	{
		margin-top:1em;
		font-size:2.4rem;
		line-height:1.3;
	}
	.jinja-list .jinja-list-item .title
	{
		margin-top:0.8em;
		margin-bottom:0.8em;
		
		display: flex;
		align-items: center;
		align-content: center;
		
		line-height:1.2;
	}

	.jinja-list .jinja-list-item .title .main
	{
		font-size:4.2rem;
	}
	.jinja-list .jinja-list-item .title .tag
	{
		font-size:2.0rem;
		color:#958626;
		
		border:1px solid #958626;
		padding:0.25em 0.40em;
		margin-left:1.0em;
	}
	.jinja-list .jinja-list-item .price
	{
		display: flex;
		align-items: stretch;
	}
	.jinja-list .jinja-list-item .price .price-title
	{
		font-size:2.8rem;
		margin-right:1em;
		padding-top:0.25em;
	}
	.jinja-list .jinja-list-item .price .price-list .amount
	{
		font-size:3.4rem;
	}
	.jinja-list .jinja-list-item .price .price-list .name
	{
		font-size:2.8rem;
		margin-right:0.5em;
	}
	.jinja-list .jinja-list-item:hover .thumbnail
	{
		opacity:0.7;
	}
	.jinja-list .jinja-list-item:hover:after
	{
		background-image:url(../../../_img/icon/circle-arrow.svg);
	}
}

/*
フッター
*/
.jinja-footer
{
	display: flex;
	margin:-0.5em;
	padding:0em 0 5em 0;
}
.jinja-footer > a
{
	margin:0.5em;
	flex:0 0 calc(50.00000% - 1em);
}
.jinja-footer > a > .thumbnail > img
{
	display:inline-block;
	border-radius:1em;
}
.jinja-footer > a > .label
{
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
	font-size:2.0rem;
	margin-top:0.5em;
}
.jinja-footer > a:hover
{
	text-decoration:none;
}
.jinja-footer > a:hover > .label
{
	opacity:0.7;
}

/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 750px) {
	.jinja-footer
	{
		display: flex;
		flex-wrap: wrap;
		margin:-0.5em;
		padding:0em 0 5em 0;
	}
	.jinja-footer > a
	{
		margin:0.5em;
		flex:0 0 calc(100% - 1em);
		
		display: flex;
		align-items: center;
		align-content: center;
	}
	.jinja-footer > a > *
	{
		flex:0 0 50%;
	}
	.jinja-footer > a > .thumbnail > img
	{
		display:inline-block;
		border-radius:1em;
	}
	.jinja-footer > a > .label
	{
		font-size:2.0rem;
		margin-top:0.0em;
		padding:1em;
	}
}

/*
************************************************************************
* モーダル
************************************************************************
*/
div.modal_w
{
	position:absolute;
	
	top:calc(50% + 0em);
	left:50%;
	
	transform:translate(-50%, -50%);
	
	width:100%;
	height:calc(100vh);
	
	border-radius:0.5em;
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
}
iframe.modal,
div.modal
{
	/*
	position:absolute;

	top:calc(50% + 2em);
	left:50%;

	transform:translate(-50%, -50%);

	width:100%;
	height:calc(80vh - 2em);

	border-radius:0.5em;
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
	*/
	width:100%;
	height:calc(100vh);
	
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
	
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}
button.btnModalClose
{
	position:absolute;

    /*
    top:calc(50% - 40vh - 2.0em);
    left:calc(50% + 480px - 4em);
    */
    top:2em;
    right:2em;

	border-radius:4em;

	width:4em;
	height:4em;

    border:0px solid transparent;
    background-color:transparent;
}
button.btnModalClose:before,
button.btnModalClose:after
{
	content:"";
	display:block;
	position:absolute;

	top:50%;
	left:23%;

	width:50px;
	height:2px;

	background-color:#000000;
}
button.btnModalClose:before
{
	transform:rotate(45deg);
}
button.btnModalClose:after
{
	transform:rotate(-45deg);
}

/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 750px) {
	div.modal_w
	{
		position:absolute;
		
		top:0vw;
		left:0;
		
		transform:translate(0%, 0%);
		
		width:100vw;
		/* height:calc(100vh - 0vw) !important; */
		height:100% !important;
		
		border-radius:0em;
		border:0px solid #FFFFFF;
		background-color:#FFFFFF;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	iframe.modal,
	div.modal
	{
		width:100vw;
		/* height:calc(100vh - 0vw) !important; */
		height:100% !important;
		
		border-radius:0.5em;
		border:1px solid #FFFFFF;
		background-color:#FFFFFF;
		/*
		position:absolute;

		top:15vw;
		bottom:0;
		left:0;
		right:0;

		transform:translate(0%, 0%);

		width:100%;
		height:calc(100% - 15vw);

		border-radius:0em;
		border:1px solid #FFFFFF;
		background-color:#FFFFFF;
		*/
	}
	button.btnModalClose
	{
		position:absolute;

		top:4.0vw;
		left:auto;
		right:4.0vw;

		border-radius:10vw;

		width:12vw;
		height:12vw;

        border:0px solid transparent;
	    background-color:transparent;
	}
	button.btnModalClose:before,
	button.btnModalClose:after
	{
		content:"";
		display:block;
		position:absolute;

		top:50%;
		left:25%;

		width:8vw;
		height:1px;

		background-color:#000000;
	}
	button.btnModalClose:before
	{
		transform:rotate(45deg);
	}
	button.btnModalClose:after
	{
		transform:rotate(-45deg);
	}
}