@charset "utf-8";



/*

************************************************************************

* モーダル、ダイアログ

************************************************************************

*/



/* ################################################################################################ */

/* ## PC                         ################################################################## */

/* ################################################################################################ */

#modal

{

	z-index:100;

	position:fixed;

	top:0;

	bottom:0;

	left:0;

	right:0;

	

	width:100%;

	height:100%;

	

	background-color:rgba(0,0,0,0.3);

	

	display: none;

	justify-content: center;

	align-items: center;

}

#modal.show

{

	display: flex;

}

#modal-contents

{

	background-color:#FFFFFF;

	border-radius:1em;

	padding:1em;

	max-width:480px;

	max-height:800px;

	width:95%;

	box-shadow: 5px 5px 5px 0px #00000040;

	

	display: flex;

	flex-wrap: wrap;

	flex-direction: row;

	align-items: center;

	align-content: center;

}

#modal-contents > .eyecatch

{

	flex:0 0 auto;

	padding:1em;

}

#modal-contents > .eyecatch > i

{

	font-size:2.8em;

}

#modal-contents > .body

{

	flex:1 0 auto;

}

#modal-contents > .body > .modal-contents-title

{

	font-weight:bold;

	font-size:1.5em;

}

#modal-contents > .body > .modal-contents-body

{

	padding:0.5em 0em;

	white-space:pre-wrap;

	word-wrap:break-word;

}

#modal-contents > .modal-contents-footer

{

	flex:0 0 100%;

	border-top:1px solid #CCCCCC;

	padding:1em 0em 0em 0em;

}





#modal-contents.error-modal

{

	border:3px solid #c40404;

}

#modal-contents.error-modal > .eyecatch > i

{

	color:#c40404;

}

#modal-contents.error-modal > .body > .modal-contents-title

{

	color:#c40404;

}



#modal-contents.info-modal

{

	border:3px solid #666666;

}

#modal-contents.info-modal > .eyecatch > i

{

	color:#666666;

}

#modal-contents.info-modal > .body > .modal-contents-title

{

	color:#000000;

}



/* ################################################################################################ */

/* ## TAB                        ################################################################## */

/* ################################################################################################ */

@media screen and (max-width:1200px) {

}



/* ################################################################################################ */

/* ## スマホサイト用スタイル ###################################################################### */

/* ################################################################################################ */

@media screen and (max-width:640px) {

}