@charset "UTF-8";


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

#modalWindow
{
	background-image: url(https://ko.dougukan.jp/_img/bg.jpg);
	background-size:75%;
	background-position: 50%;
}

#modalWindow a.closer
{
	position: fixed;
	cursor: pointer;
	left: 0rem;
	top: 0rem;
	width: 2rem;
	height: 2rem;
	transform-origin: center center;
    text-indent: -9999px;
	
	border-radius: 0;
	border: 1px solid rgb(0, 0, 0);
	background-color: rgb(50, 50, 50);
	transform: rotate(0deg);
	
	-webkit-transition:transform .3s ease;
	-moz-transition:transform .3s ease;
	-ms-transition:transform .3s ease;
	-o-transition:transform .3s ease;
	transition:transform .3s ease;
}

#modalWindow a.closer:before, #modalWindow a.closer:after
{
	content: "";
	display: block;
	position: absolute;
	width: 1.5rem;
	height: 1px;
	top: calc(50% - 1px);
	left: calc(50% - .75rem - .5px);
	background-color: rgb(255, 255, 255);
}

#modalWindow a.closer:before
{
	transform: rotate(135deg);
}
#modalWindow a.closer:after
{
	transform: rotate(45deg);
}

.modal-body
{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.modal-body ._dir
{
	position:sticky;
	top: calc(50% - 1rem);
	height: 2rem;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.modal-body ._dir._l
{
	transform:rotate(180deg);
}


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


@media screen and (max-width: 600px), (max-height: 600px)
{
	#modalWindow
	{
		padding: 1.5rem 0;
	}
	.modal-body .popup
	{
		padding: 2rem 0rem;
	}
}