.leftCurtainbg,
.rightCurtainbg {
	display: var(--block);
	content: "";
	position: var(--fixed-potision);
	z-index: 999;
	width: var(--base-width);
	height: 100vh;
	top: 0;
	background-color: var(--section-color);
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.leftCurtainbg {
	right: 50%;
	transform: scaleX(0);
	animation-name: curtainAnimeLeft;
}

.rightCurtainbg {
	left: 50%;
	transform: scaleX(1);
	animation-name: curtainAnimeRight;
}

@keyframes curtainAnimeLeft {
	0% {
		transform-origin: right;
		transform: scaleX(1);
	}

	50% {
		transform-origin: left;
	}

	100% {
		transform-origin: left;
		transform: scaleX(0);
	}
}

@keyframes curtainAnimeRight {
	0% {
		transform-origin: left;
		transform: scaleX(1);
	}

	50% {
		transform-origin: right;
	}

	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}

.fadeout {
	animation: fadeOut 0.8s;
	animation-fill-mode: both;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/*bodyにpageOnクラスがついたら出現*/
body.pageOn #container {
	animation-name: PageAnimeOn;
	animation-duration: 1s;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes PageAnimeOn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#page-top {
	background-color: var(--white);
	padding: 5px;
	border-radius: 5px;
	bottom: 10px;
	position: var(--fixed-potision);
	right: 10px;
}

#page-top a {
	padding: 0;
	text-align: var(--center);
	transition: opacity .5s;
	width: 30px;
}

#page-top a:hover {
	opacity: 0.8;
	transition: opacity .5s;
}

#page-top a img {
	width: 30px;
}

/**************************************case accordion*************************************/
.txt-hide1,
.txt-hide2,
.txt-hide3,
.txt-hide4 {
	display: none;
}

button.more1,
button.more2,
button.more3,
button.more4 {
	width: 400px;
	margin: 20px auto;
	display: var(--block);
	background-color: var(--white);
	border-radius: 50px;
	border: 2px solid var(--green);
	color: var(--green);
	padding: 15px;
	outline: 0;
	transition: .5s;
	-erbkit-transition: .5s;
}

button.more1::after,
button.more2::after,
button.more3::after,
button.more4::after {
	content: "もっと詳しく知りたい方はこちら▼";
	transition: .2s;
	-erbkit-transition: .2s;
}

button.more1.on-click::after,
button.more2.on-click::after,
button.more3.on-click::after,
button.more4.on-click::after {
	content: "閉じる▲";
}

@media only screen and (min-width: 300px) and (max-width: 767px) {

	button.more1,
	button.more2,
	button.more3,
	button.more4 {
		width: var(--base-width);
		margin: 10px auto;
		padding: 5px;
	}
}

/**************************************button*************************************/
#next-btn a {
	background: var(--white);
	border: 2px solid var(--green);
	border-radius: 50px;
	position: var(--base-potision);
	display: var(--flex);
	justify-content: space-around;
	align-items: var(--center);
	margin: var(--base-margin);
	max-width: 500px;
	padding: 20px 25px;
	color: var(--green);
	transition: 0.3s ease-in-out;
	font-weight: var(--weight500);
}

#next-btn a:hover {
	background: var(--orange);
	border: 2px solid var(--white);
	color: var(--white);
}

#next-btn a:after {
	content: '';
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--green);
	border-right: 2px solid var(--green);
	transform: rotate(45deg) translateY(-50%);
	position: var(--child-potision);
	top: 50%;
	right: 20px;
	border-radius: 1px;
	transition: 0.3s ease-in-out;
}

#next-btn a:hover:after {
	border-color: var(--white);
}

#form-title p {
	text-align: center;
	color: white;
	font-size: var(--font-size-3xl);
	font-weight: bold;
}

.form-box {
	margin: 0 auto;
	padding: 50px 0;
	text-align: center;
}
.radio {
	margin: 0.5rem;
	display: inline-block;
  }
input[type=radio] {
	position: absolute;
	opacity: 0;
  }
  input[type=radio] + .radio-label:before {
	content: "";
	background: #f4f4f4;
	border-radius: 100%;
	border: 1px solid #b4b4b4;
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	position: relative;
	top: -0.2em;
	margin-right: 1em;
	vertical-align: top;
	cursor: pointer;
	text-align: center;
	transition: all 250ms ease;
  }
  input[type=radio]:checked + .radio-label:before {
	background-color: #3197EE;
	box-shadow: inset 0 0 0 4px #f4f4f4;
  }
  input[type=radio]:focus + .radio-label:before {
	outline: none;
	border-color: #3197EE;
  }
  input[type=radio]:disabled + .radio-label:before {
	box-shadow: inset 0 0 0 4px #f4f4f4;
	border-color: #b4b4b4;
	background: #b4b4b4;
  }
  input[type=radio] + .radio-label:empty:before {
	margin-right: 0;
  }

  .select {
	position: relative;
	/*Don't really need this just for demo styling*/
	
	float: left;
	min-width: 200px;
	margin: 50px 33%;
  }
  
  /* IE11 hide native button (thanks Matt!) */
  select::-ms-expand {
  display: none;
  }
  
  .select:after {
	content: '<>';
	font: 17px "Consolas", monospace;
	color: #333;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	right: 11px;
	/*Adjust for position however you want*/
	
	top: 18px;
	padding: 0 0 2px;
	border-bottom: 1px solid #999;
	/*left line */
	
	position: absolute;
	pointer-events: none;
  }
  
  .select select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Add some styling */
	
	display: block;
	width: 100%;
	max-width: 320px;
	height: 50px;
	float: right;
	margin: 5px 0px;
	padding: 0px 24px;
	font-size: 16px;
	line-height: 1.75;
	color: #333;
	background-color: #ffffff;
	background-image: none;
	border: 1px solid #cccccc;
	-ms-word-break: normal;
	word-break: normal;
  }