@charset "utf-8";
/*  
	イベントフォーム
	event-form
	update.22.04.05
*/
/* s.form */
.trans-box-p {
	color:#fff !important;
	background:#9997c9 !important;
}
.main.form .container > .logo {
	margin-top:3%;
	width:50%;
	min-width:220px;
}
.main.form .section.submit > .text ,
.main.form .section.close > .text{
	font-size:1.8rem;
	text-align:center;
	padding:2rem 0;
}
.main.form .section-form {
	padding:3% 0 0;
}
.main.form .section-form > .title {
	color:#fff;
	font-size:1.8rem;
	background:#2a4198;
	padding:0.5em;
}
.main.form .section-form > .text {
	margin:3% 0 0;
	font-size:1.6rem;
	line-height: 1.6;
}
.main.form .section-form > .text span {
	font-size:1.6rem;
}
.main.form #mailform .table {
	position:relative;
	margin:4% 0 0;
	border-top:1px solid #3e3a39;
	border-collapse: collapse;
	display: block;
	font-size:0;
}
.main.form #mailform .row {
    border-bottom:1px solid #3e3a39;
	display:inline-block;
	width:100%;
	vertical-align: top;
}
.main.form #mailform .col-head,
.main.form #mailform .col-input {
	display:block;
	line-height:1.6;
	font-weight:500;
	font-size:1.6rem;
	padding:14px 0;
	color:#595757;
}
.main.form #mailform .col-head {
	border-bottom:1px dotted #3e3a39;
}
.main.form #mailform .col-head .need {
	display:inline-block;
	text-align:center;
	line-height:1;
	font-size:1.2rem;
	padding:0.5em 0 0 0.5em;
	vertical-align: top;
	color:#e60012;
}
.main.form .confirm #mailform  .col-head .need {
	display:none;
}
.main.form #mailform .col-head label {
	display:inline-block;
	cursor:pointer;
	font-weight:700;
}
.main.form #mailform .col-input {
	position: relative;
	line-height:1.6;
	font-size:1.6rem;
	padding-bottom:4px;
}
.main.form .confirm #mailform .col-input {
	min-height:53px;
}
.main.form #mailform .col-input .form-box {
	font-weight:500;
	margin-bottom:10px;
}
.main.form .confirm #mailform .col-input .form-box {
	font-weight:400;
}
.main.form #mailform .col-input .form-box > span {
	display:block;
	margin-bottom:6px;
	font-weight:500;
	font-size:1.5rem;
}
.main.form #mailform .col-input input[type="text"],
.main.form #mailform .col-input textarea {
	width: 100%;
	padding:10px;
	background: #fff;
	letter-spacing:1px;
	border:1px solid #898989;
	line-height:1.3;
	font-family: 'Noto Sans JP', sans-serif;
	font-size:1.5rem;
	color:#595757;
	font-weight:500;
	border-radius: 6px;
}
.main.form #mailform .col-input input[type="text"]:focus,
.main.form #mailform .col-input textarea:focus {
    background: #fafafa;
    outline:none;
}
.main.form #mailform .col-input input[type="radio"],
.main.form #mailform .col-input input[type="checkbox"] {
	position:relative;
	margin-right:4px;
	top:1px;
}
.main.form #mailform .col-input textarea {
    resize: vertical;
    overflow: auto;
    height: 160px;
    display:block;
}
.main.form #mailform .col-input select {
	position: relative;
	font-weight:500;
	padding:4px 10px 6px;
	background: #fff;
	letter-spacing:1px;
	border:1px solid #898989;
	line-height:1.3;
	font-family: 'Noto Sans JP', sans-serif;
	font-size:1.5rem;
	color:#595757;
	margin-top:4px;
	outline:none;
}
.main.form #mailform .col-input .checkbox {
	display:block;
	margin:0 0 0.5em 0;
}
.main.form #mailform .col-input .checkbox:last-child {
	margin:0;
}
.main.form #mailform .col-input label{
	display:inline-block;
	font-weight:400;
	font-size:1.5rem;
	padding:0.5em 0.25em;
	margin:0 0.5em 0 0;
}
.main.form .row.exp {
	padding:10px 0;
}
.main.form .row.exp-4 {
	padding:0;
}
.main.form .row.exp th {
	text-align:center;
	font-size:1.6rem;
	padding:0.75em 0;
	font-weight:500;
	background: #dcdddd;
	color:#595757;
	display: block;
}
.main.form .row.exp td {
	font-size:1.6rem;
	padding:0;
	display: block;
	color:#595757;
	line-height:1.4;
}
.main.form .row.exp td span {
	font-size:0.9em;
}
.main.form .row.exp td.text-center {
	text-align: center;
}
.main.form #mailform .group-button {
	margin-top:5%;
	text-align:center;
}
.main.form #mailform .group-button li {
	width:80%;
	margin-right:10%;
}
.main.form .confirm #mailform .group-button li  {
	width:40%;
}
.main.form #mailform .group-button li:last-child {
	margin:0;
}
.main.form #mailform .button-submit {
	position: relative;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 1em;
	appearance: none;
	border-radius: 8px;
	line-height: 1;
	display:block;
	width:100%;
	font-weight:500;
	font-size:1.6rem;
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.main.form #mailform .error-message {
	margin:6px 0 0;
	color: #e60012;
	font-size:1.5rem;
	font-weight:500;
}
.main.form #flashMessage {
	color: #e60012;
	font-weight: 500;
	margin:4% 0 0;
	font-size:1.5rem;
}
.main.form .confirm #mailform #FieldMessageQuestion1 > ul > li {
	position: relative;
	padding-left:1em;
}
.main.form .confirm #mailform #FieldMessageQuestion1 > ul > li:before {
	content:'◎';
	position: absolute;
	width:1em;
	height:1em;
	left:0;
}
.main.form .color {
	color :#e60012;
}
@media print, screen and (min-width: 400px) {
}
@media print, screen and (min-width: 768px){
	
	.main.form .section-form {
		padding:70px 0 0;
	}
	.main.form .section-form > .title{
		font-size:2.4rem;
	}
	.main.form .section-form > .text {
		margin:20px 0 0;
		font-size:1.8rem;
		font-weight:500;
	}
	.main.form .section-form > .text span {
		font-size:1.5rem;
		font-weight:500;
	}
	.main.form #mailform .table {
		margin:20px 0 0;
		border:0;
	}
	.main.form #mailform .row {
	    border:0;
	}
	.main.form #mailform .col-head,
	.main.form #mailform .col-input {
		padding:12px 0 0;
		font-size:1.8rem;
		border:0;
	}
	.main.form .confirm #mailform .row {
		border-top:1px solid #3e3a39;
	}
	.main.form .confirm #mailform .row:last-child {
		border-bottom:1px solid #3e3a39;
	}
	.main.form .confirm #mailform .col-head {
		border-bottom:1px dotted #3e3a39;
		padding:12px 0;
	} 
	.main.form #mailform .col-head label {
		font-weight:500;
	}
	.main.form #mailform #RowMessageName1,
	.main.form #mailform #RowMessageNameKana1,
	.main.form #mailform #RowMessageName2,
	.main.form #mailform #RowMessageName3,
	.main.form #mailform #RowMessageName4 {
		width:442px;
		margin-right:30px;
	}
	
	.main.form #mailform #RowMessagePost1,
	.main.form #mailform #RowMessagePost2,
	.main.form #mailform #RowMessagePost3,
	.main.form #mailform #RowMessagePost4 {
		width:260px;
		margin-right:30px;
	}
	.main.form #mailform #RowMessageAge1,
	.main.form #mailform #RowMessageAge2,
	.main.form #mailform #RowMessageAge3,
	.main.form #mailform #RowMessageAge4 {
		width:90px;
	}
	.main.form #mailform #RowMessageTel1,
	.main.form #mailform #RowMessageTelMobile1 {
		width:410px;
	}
	.main.form #mailform #RowMessageTel1 {
		margin-right:30px;
	}
	.main.form #mailform #RowMessageEmail2,
	.main.form #mailform #RowMessageEmail3 {
		margin-bottom:30px;
	}
	.main.form #mailform .col-input {
	    font-size:1.8rem;
	    padding-bottom:2px;
	}
	.main.form #mailform .col-input input[type="text"],
	.main.form #mailform .col-input textarea,
	.main.form #mailform .col-input select {
		font-size:1.8rem;
	}
	.main.form #mailform .col-input .checkbox {
		margin:8px 0 0 !important;
	}
	.main.form #mailform .col-input label{
		margin:0;
		margin-right:1em !important;
		padding:0;
		font-size:1.8rem;
	}
	.main.form #mailform .col-input .form-question-2,
	.main.form #mailform .col-input .form-question-3 {
		display: inline-block;
	}
	.main.form .confirm #mailform .col-input {
		padding:12px 0 0;
	}
	.main.form #mailform .col-input .form-box > span:first-child {
		margin-top:7px;
	}
	.main.form .row.exp {
		padding:0;
	}
	.main.form .row.exp-1 {
		margin:-10px 0 0;
	}
	.main.form .row.exp-2 {
		margin:16px 0 0;
	}
	.main.form .row.exp-3 {
		margin:-10px 0 0;
	}
	.main.form .row.exp-4 {
		margin:40px 0 0;
	}
	.main.form .row.exp th {
		font-size:1.8rem;
		padding:0.5em 0;
	}
	.main.form .row.exp td {
		font-size:1.8rem;
		line-height: 1.6;
	}	
	.main.form .row.exp td span {
		font-size:0.8em;
	}	
	.main.form #mailform .group-button {
		margin-top:50px;
	}
	.main.form #mailform .group-button li {
		width: 40%;
		margin-right:10%;
	}
	.main.form #mailform .group-button li:last-child {
		margin:0;
	}
	.main.form #mailform .button-submit {
		font-size:2.4rem;
		padding:14px 0 16px;
	}
	.main.form #mailform .error-message {
		margin:6px 0 0;
	}
	.main.form #flashMessage {
	    margin: 30px 0 0;
	}
}