@charset "utf-8";

/*
************************************************************************
* 一覧
************************************************************************
*/
.kaishoku-list
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	
	margin:40px -40px;
}
.kaishoku-list .kaishoku-list-item
{
	flex:0 0 calc(33.33333% - 80px);
	margin:40px;
	
	border-top:1px solid #000000;
	cursor:pointer;
}
.kaishoku-list .kaishoku-list-item .title
{
	margin-top:2.0em;
	margin-bottom:2.0em;
	
	display: flex;
	align-items: center;
	align-content: center;
	
	line-height:1.4;
}
.kaishoku-list .kaishoku-list-item .title .main
{
	font-size:2.4rem;
}
.kaishoku-list .kaishoku-list-item .title .tag
{
	font-size:1.4rem;
	color:#958626;
	
	border:1px solid #958626;
	padding:0.25em;
	margin-left:0.5em;
}
.kaishoku-list .kaishoku-list-item .description
{
	width:100%;
	border-spacing:0px;
	border-collapse:separate;
	
	font-size:1.4rem;
}
.kaishoku-list .kaishoku-list-item .description th
{
	width:10px;
	white-space:nowrap;
	padding:0.5em 0.0em;
	line-height:1.4;
	
	vertical-align:top;
	text-align:left;
}
.kaishoku-list .kaishoku-list-item .description td
{
	padding:0.5em 0.0em 0.5em 1.0em;
	line-height:1.4;
	letter-spacing:0.0em;
}
.kaishoku-list .kaishoku-list-item .link
{
	margin-top:2.0em;
}
.kaishoku-list .kaishoku-list-item .link .button
{
	min-width:auto;
}
.kaishoku-list .kaishoku-list-item .link .button > span
{
	padding:1.0em 2.0em 1.0em 1.0em;
	font-size:1.4rem;
}

/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 750px) {
	.kaishoku-list
	{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		
		margin:5vw -5vw;
	}
	.kaishoku-list .kaishoku-list-item
	{
		flex:0 0 calc(100.00000% - 10vw);
		margin:5vw;
		cursor:pointer;
	}
	.kaishoku-list .kaishoku-list-item .title
	{
		display: flex;
		align-items: center;
		align-content: center;
	}
	.kaishoku-list .kaishoku-list-item .title .main
	{
		font-size:4.2rem;
	}
	.kaishoku-list .kaishoku-list-item .title .tag
	{
		font-size:2.0rem;
		color:#958626;
		
		border:1px solid #958626;
		padding:0.25em;
		margin-left:0.5em;
	}
	.kaishoku-list .kaishoku-list-item .description
	{
		width:100%;
		border-spacing:0px;
		border-collapse:separate;
		
		font-size:2.6rem;
	}
	.kaishoku-list .kaishoku-list-item .description th
	{
		width:10px;
		white-space:nowrap;
		padding:0.5em 0.0em;
		line-height:1.7;
		
		vertical-align:top;
		text-align:left;
	}
	.kaishoku-list .kaishoku-list-item .description td
	{
		padding:0.5em 0.0em 0.5em 1.0em;
		line-height:1.7;
		letter-spacing:0.0em;
	}
	.kaishoku-list .kaishoku-list-item .link
	{
		margin-top:2.0em;
		text-align:center;
	}
	.kaishoku-list .kaishoku-list-item .link .button
	{
		min-width:57vw;
	}
	.kaishoku-list .kaishoku-list-item .link .button > span
	{
		padding:1.2em 2.0em 1.2em 1.0em;
		font-size:2.4rem;
	}
}

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

/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 750px) {
	.kaishoku-footer
	{
		display: flex;
		flex-wrap: wrap;
		margin:-0.5em;
		padding:0em 0 5em 0;
	}
	.kaishoku-footer > a
	{
		margin:0.5em;
		flex:0 0 calc(100% - 1em);
		
		display: flex;
		align-items: center;
		align-content: center;
	}
	.kaishoku-footer > a > *
	{
		flex:0 0 50%;
	}
	.kaishoku-footer > a > .thumbnail > img
	{
		display:inline-block;
		border-radius:1em;
	}
	.kaishoku-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:2.2em;
	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;
		
		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;
		
		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:1px solid rgba(0,0,0,1.0);
	    background-color:rgba(0,0,0,1.0);
	}
	button.btnModalClose:before,
	button.btnModalClose:after
	{
		content:"";
		display:block;
		position:absolute;

		top:50%;
		left:25%;

		width:6vw;
		height:1px;

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