@charset "UTF-8";

/*  ここからデモページ用のコード  
body {
	width: 100% ;
	height: 5000px ;
	padding: 0 ;
}
  ここまでデモページ用のコード  */

.modal-contentNormal > a{
	cursor: pointer;
	color: #0066ff;
	text-decoration: underline;
	background: url("../images/form_modal_icon_15.png") no-repeat ;
	background-size: 18px 18px;
	background-position : 100% 50%;
	padding-right: 20px;
}

.modal-content {
	width:850px;
	padding:35px 25px ;
	border-radius: 7px;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2;
}
@media (max-width: 768px) {
.modal-content {
	width: 90% ;
	padding: 10px 5px ;
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
	text-align:center;
}
}
.modal-contentS {
	width:800px;
	padding:35px 25px ;
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2;
}
@media (max-width: 768px) {
.modal-contentS {
	width: 90% ;
	padding: 10px 5px ;
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
	text-align:center;
}
}

.modal-content h1
{
	font-size: 110%;
	text-align:center;
	margin: 15px 0;
	}


#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.5 ) ;
}

.button-link {
	color: #00f ;
}
 
.button-link:hover {
	cursor: pointer ;
	color: #f00 ;
}

.width70 {
    width: 70%;
}

.modalcomment {
	text-align: left;
	padding: 0 40px;
}

.W30Box{
	width: 30%;
}

.W40Box{
	width: 40%;
}

.W50Box{
	width: 50%;
}

.W60Box{
	width: 60%;
}

.W70Box{
	width: 70%;
}






.modal-contentLarge > a{
	cursor: pointer;
	color: #0066ff;
	text-decoration: underline;
	background: url("../images/form_modal_icon_15.png") no-repeat ;
	background-size: 18px 18px;
	background-position : 100% 50%;
	padding-right: 20px;
}
.modal-contentLarge > a:hover{
	color: #f20000;
}
.modal-overlayLarge {
	display: none;
	position: fixed;
	top: -10px;
	left: 0;
	right: 0;
	bottom: -10px;
	background-color: rgba(0, 0, 0, .45);
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.modal-containerLarge {
	display: table;
	padding: 10px 0;
	width: 100%;
	height: 100%;
}
.modal-innerLarge {
	display: table-cell;
	padding: 2.7em 2em;
	vertical-align: middle;
}
.modalLarge {
	margin: 0 auto;
	padding: 1.9em 2em;
	max-width: 800px;
	text-align: justify;
	text-justify: inter-ideograph;
	border-radius: 7px;
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
}
.modalLarge::after {
	display: table;
	content: '';
	clear: both;
}
.modal-buttonLarge {
	transition: .3s;
}
.modal-buttonLarge:hover {
	cursor: pointer;
	opacity: .6;
}