@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');

body {
	font-family: 'New Tegomin', serif;
	color: #454545;
	background: #f0f0f0 url('../img/bg.jpg') center / cover fixed;
}

p.example {
	color: rgba(55,24,83,0.7);
	font-size: 0.85em;
}

a.button {
	text-decoration: none;
	margin: 0 auto;
	display: inline-flex;
	top: 0;
	left: 0;
  width: 100px;
  color: #ffffff;
  height: 30px;
  line-height: 27px;
	border-radius: 0 7px 7px 0;

	border: 0;
	background: #1D2671;
	background-image: linear-gradient(70deg, #1D2671 0%, #371853  40%, #C33764 100%);
	transition: 0.5s;
	background-size: 200% auto;
	box-shadow: 0 0 20px #eee;
}

a.button:hover {
	cursor: pointer;
	background-position: right center;
}

p.button {
	text-align: center;
	padding: 0 0 0 10px;
	font-size: 1em;
}

/* モーダル */
.modal {
	display: flex;
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
  background: linear-gradient(289deg, rgba(29,38,113,0.2) 0%, rgba(55,24,83,0.2) 40%, rgba(195,55,100,0.2) 100%);
	opacity: 0;
  transition: opacity 0.3s, transform 0s 0.3s;
  transform: scale(0);
}
.modal-content {
	position: relative;
	margin: 0 auto;
  align-self: center;
  width: 90%;
  max-width: 480px;
	min-height: 60px;
  box-sizing: border-box;
  background: #fff;
  line-height: 1.2em;
  border-radius: 12px;
  box-shadow: 0 0 5px rgba(94, 94, 94, 0.7);
	padding:30px 20px 40px 35px;
	transition: 0.3s;
}
.modal-content p {
	line-height: 1.1em;
	margin: 8px 0 0 5px;
	text-align: left;
}
#closebtn {
	margin: -10px 0 0 0;
  position: relative;
	float: right;
	font-weight: bold;
  font-size: 25px;
  cursor: pointer;
  color: #C33764;
}
form input#openbtn {
		margin: -2em 20px 0 0;
		float: right;
		text-decoration: none;
		font-size: 0.9em;
		text-align: center;
		font-weight: bold;
		display: inline-block;
	  width: 130px;
	  height: 30px;
	  line-height: 27px;
		border-radius: 4px;
		border: 0;
		background: #FFFFFF;
		background-image: linear-gradient(289deg, rgba(29,38,113,0.1) 0%, rgba(55,24,83,0.1) 40%, rgba(195,55,100,0.1) 100%);
		transition: 0.3s;
		background-size: 200% auto;
		box-shadow: 0 0 20px #eee;
		font-family: inherit;
		-webkit-appearance: none;
	}
form input#openbtn:hover {
		cursor: pointer;
		background-position: right center;
	}

p.border {
	border-image: linear-gradient( to left, rgba(29, 38, 113,0.5) 0%, rgba(55, 24, 83,0.5)  40%, rgba(195, 55, 100,0.5) 100%);
	border-image-slice: 1;
	border-top: 2px solid #cccccc;
	width: 	90%;
	margin: 15px auto 10px auto;
}

p.bordersub {
	border-image: linear-gradient( to left, rgba(29, 38, 113,0) 0%, rgba(55, 24, 83,0.5)  40%, rgba(195, 55, 100,0.5) 100%);
	border-image-slice: 1;
	border-top: 2px solid #cccccc;
	width: 	80%;
	margin: 8px 0 15px 0;
}

p.footer {
	color: rgba(29, 38, 113,0.5);
	font-size: 0.7em;
}

form * {
	margin: 0;
	padding: 0;
}

form {
	width: 960px;
	height: auto;
	margin: 3% auto;
	padding: 30px 0 50px 0;
	background: #ffffff;
	border: 0px solid #cccccc;
	border-radius: 7px;
	box-shadow: 0 0 7px rgba( 0, 0, 0, 0.2 );
	font-size: 95%;
	line-height: 1.8;
}

form dl {
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
}

form dl dd {
	width: 90%;
	display:inline-flex;
	text-align: center;
	margin: 0 auto;
	padding: 5px 0 0 5%;
}

form dl dt {
	width: 90%;
	margin: 0 auto;
	padding: 0 0 0 5%;
}

form dl dt.title {
	padding: 0;
	font-weight: bold;
	font-size: 1.8em;
}

form dl dt. {
	padding: 0;
	font-weight: bold;
	font-size: 1em;
}

form dl span {
	font-weight: bold;
}

form dl span.right {
	display: inline-block;
	width: 90%;
	text-align: center;
	padding: 0 0 0 5%;
}

form dl span.right_res {
	display: none;
}

form dl span.left {
	display: inline-block;
	width: 90%;
	text-align: center;
	padding: 0 5% 0 0;
}

textarea {
	line-height: 1.5;
	padding: 8px;
	display: block;
	width: 45%;
	max-width: 45%;
	min-height: 250px;
	resize: none;
	border: 1px solid  rgba(55, 24, 83,0.3);
	border-radius: 3px;
	background: rgba(55, 24, 83,0.02);
	-webkit-appearance: none;
	font-size: 100%;
	font-family: inherit;
}

textarea:focus {
	border-bottom: solid 2px #aa4b6b;
	outline: solid 2px #aa4b6b;
}

form p#form_submit {
	margin: auto 10px;
}

form input#form_submit_button {
	font-weight: bold;
	font-size: 1.1em;
	height: 50px;
	padding: 7px 20px;
	border: 0;
	border-radius: 4px;
	background: #1D2671;
	background-image: linear-gradient(70deg, #1D2671 0%, #371853  40%, #C33764 100%);
	color: #ffffff;
	transition: 0.5s;
	background-size: 200% auto;
	box-shadow: 0 0 20px #eee;
	font-family: inherit;
	-webkit-appearance: none;
}

form input#form_submit_button:hover {
	cursor: pointer;
	background-position: right center;
}

ul {
	margin: 0 20px 10px 0;
	float: right;
  list-style: none;
}

li {
	margin: 5px 0 0 5px;
  font-weight: bold;
	list-style: square;
}

/* 元々のチェックボックス（非表示） */
.optioncheck input[type="checkbox"]{
    display: none;
}
/* チェックボックスの代わりを成すラベル */
.optioncheck input[type="checkbox"]+label{
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 25px;
    padding-right: 2px;
}
/* ラベルの左に表示させる正方形のボックス□ */
.optioncheck input[type="checkbox"]+label::before{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -1em;
    left: 0;
    top: 50%;
    border: 2px solid;
		border-radius: 3px;
    border-color:  rgba(55, 24, 83,0.3);
    background-color: #FFF;
}
/* チェックが入った時のレ点 */
.optioncheck input[type="checkbox"]:checked+label::after{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 18px;
    height: 10px;
    margin-top: -0.85em;
    top: 50%;
    left: 2px;
    transform: rotate(-45deg);
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-color: #C33764; 
}


/* -- responsive ----------------------------------------------------------------------------------------------------------------- */

@media screen and ( max-width: 960px ) {
	
	#closebtn {
		margin: -12px 8px 0 0;
	}
	
	.modal-content {
	padding:30px 10px 40px 15px;
	}
	
	p.example {
		color: rgba(55,24,83,0.7);
		font-size: 0.7em;
	}
	
	form input#openbtn {
			margin: 8px auto ;
			float: none;
	}

	p.border {
		border-top: 1px solid #cccccc;
	}
	
	p.bordersub {
		border-top: 1px solid #cccccc;
	}


	form input#form_submit_button {
		font-weight: bold;
		height: 40px;
		font-size: 1em;
	}

	form {
		width: 100%;
		margin: 0 auto;
		padding: 4% 0 10% 0;
		background: #ffffff;
		border-radius: 7px;
		font-size: 90%;
		line-height: 1.8;
	}

	form dl {
		width: 90%;
		height: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	form dl dt {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		padding: 0 0 0 1%;
	}

	form dl dt.title {
		margin: 0 auto;
	}

	form dl dd {
		width: 90%;
		display: block;
		text-align: center;
		margin: 0 auto;
		padding: 5px 0 0 0;
	}

	form dl span.right {
		display: none;
	}

	form dl span.right_res {
		display: flex;
		width: 90%;
		margin: 0 auto;
		padding: 4% 0 0 3%;
	}

	form dl span.left {
		display: flex;
		width: 90%;
		margin: 0 auto;
	}

	textarea {
		line-height: 1.5;
		padding: 8px;
		display: block;
		width: 95%;
		max-width: 95%;
		min-height: 100px;
		resize: none;
		border-radius: 3px;
		-webkit-appearance: none;
		font-size: 100%;
		font-family: inherit;
	}

	textarea:focus {
		border-bottom: none;
	}

	textarea#textarea_after:focus  {
		border-bottom:  solid 2px #aa4b6b;
	}

	form p#form_submit {
		display: flex;
		justify-content: space-around;
		margin: 5px 3% 5px 0;

	}
}
/* 1000pixel end */