@charset "UTF-8";

/*//////////----- FORM-CONTENT -----//////////*/

.form-content{
	box-sizing: border-box;
	border:solid 2.5px #980270;
}

.form-content div.row{
	box-sizing: border-box;
	padding:5px;
	border-bottom:solid 2.5px #980270;
	
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.form-content div.row:last-child{
	border-bottom:none;
}

.form-content div.row div.que{
	width:100%;
	
	background-color:#980270;
	color:#fff;
	
	box-sizing: border-box;
	padding:10px;
	margin-bottom:5px;
}

.form-content div.row div.que h5{
	font-size:1.0rem;
	line-height:25px;
	
	position: relative;
}

.form-content div.row div.que h5:after{
	display:block;
	content:"項目";
	
	font-size:0.6rem;
	line-height:15px;
	
	text-align: center;
	
	width:30px;
	
	background-color:#fff;
	color:#980270;
	
	position: absolute;
	top:5px;
	right:0;
}

.form-content div.row div.que h5.mandatory:after{
	content:"必須";
}

.form-content div.row div.que h5.optional:after{
	content:"任意";
}

.form-content div.row div.que h5 span.note{
	display:inline-block;
	
	font-size:0.8rem;
	line-height:25px;
}

.form-content div.row div.que h5 span.note:before{
	content:"（";
}

.form-content div.row div.que h5 span.note:after{
	content:"）";
}

.form-content div.row div.ans{
	width:100%;
	
	background-color:#f0f0f0;
	color:#000;
	
	box-sizing: border-box;
	padding:10px;
}

.form-content div.row div.ans p.extra{
	font-size:0.8rem;
	line-height:1.75em;
	
	margin-top:5px;
}

.form-content div.row div.ans ul.choice{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.form-content div.row div.ans ul.choice li{
	display:block;
	width:100%;
	
	box-sizing: border-box;
	padding:0 15px;
	padding-left:25px;
	
	font-size:1.0rem;
	line-height:35px;
	
	position: relative;
}

.form-content div.row div.ans ul.choice li label{
	cursor: pointer;
}

.form-content div.row div.ans ul.choice li label:before{
	display:block;
	content:"";
	
	width:20px;
	height:20px;
	
	background-color:#fff;
	
	position: absolute;
	top:7.5px;
	left:0;
	
	border-radius:50px;
}

.form-content div.row div.ans ul.choice li input[type="radio"]:checked ~ label:before{
	box-sizing: border-box;
	border:solid 3.5px #fff;
	
	background-color:#980270;
}

.form-content div.row div.ans ul.choice li input[type="checkbox"]:checked ~ label:before{
	box-sizing: border-box;
	border:solid 3.5px #fff;
	
	background-color:#980270;
}

.form-content div.row div.ans p.castchoice{
	width:110px;
}

.form-content div.row div.ans p.castchoice img{
	width:100%;
	vertical-align: bottom;
}

.form-content div.row div.ans p.castchoice span.note{
	display:block;
	
	font-size:0.8rem;
	line-height:25px;
}

.form-content div.row div.ans ul.castchoice{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: center;
	
	width:100%;
}

.form-content div.row div.ans ul.castchoice li{
	display:block;
	width:110px;
	
	box-sizing: border-box;
	padding:0 5px;
	
	text-align: center;
	
	position: relative;
}

.form-content div.row div.ans ul.castchoice li label{
	cursor: pointer;
	
	display:block;
	width:100%;
	height:100%;
	
	position: absolute;
	top:0;
	left:0;
}

.form-content div.row div.ans ul.castchoice li label:before{
	display:block;
	content:"";
	
	width:25px;
	height:25px;
	
	background-color:#fff;
	
	position: absolute;
	top:0;
	left:5px;
}

.form-content div.row div.ans ul.castchoice li input[type="radio"]:checked ~ label:before{
	box-sizing: border-box;
	border:solid 3.5px #fff;
	
	background-color:#980270;
	background-image: url("../images/icon-form-checked-white.webp");
	background-repeat: no-repeat;
	background-size:15px;
	background-position: center;
}

.form-content div.row div.ans ul.castchoice li input[type="checkbox"]:checked ~ label:before{
	box-sizing: border-box;
	border:solid 3.5px #fff;
	
	background-color:#980270;
	background-image: url("../images/icon-form-checked-white.webp");
	background-repeat: no-repeat;
	background-size:15px;
	background-position: center;
}

.form-content div.row div.ans ul.castchoice li img{
	width:100%;
	vertical-align: bottom;
}

.form-content div.row div.ans ul.castchoice li span.note{
	display:block;
	
	font-size:0.8rem;
	line-height:25px;
}

.form-content div.row div.btn-action{
	width:100%;
	
	background-color:#f0f0f0;
	color:#000;
	
	box-sizing: border-box;
	padding:10px;
}

.form-content div.row div.btn-action ul{
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	
	width:100%;
}

.form-content div.row div.btn-action ul li{
	box-sizing: border-box;
	padding:0 10px;
}

@media only screen and (min-width: 720px){
	
	.form-content div.row div.que{
		width:240px;
		
		margin-bottom:0;
	}
	
	.form-content div.row div.ans{
		width:calc(100% - 240px);
		
		border-left:solid 5px #fff;
	}
	
	.form-content div.row div.ans ul.choice li{
		width:auto;
	}
	
	.form-content div.row div.ans ul.castchoice{
		justify-content: flex-start;
		
		padding:0 10px;
	}
	
}

/*//////////----- FORM-CONTENT-INPUTDESIGN -----//////////*/

input{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	font: inherit;
	outline: none;
}

input[type="text"]{
	width:100%;
	max-width: 480px;
	
	box-sizing: border-box;
	padding:5px;
	
	background-color:#fff;
	color:#000;
	border:solid 1px #ccc;
}

input[type="tel"]{
	width:100%;
	max-width: 480px;
	
	box-sizing: border-box;
	padding:5px;
	
	background-color:#fff;
	color:#000;
	border:solid 1px #ccc;
}

input[type="email"]{
	width:100%;
	
	box-sizing: border-box;
	padding:5px;
	
	background-color:#fff;
	color:#000;
	border:solid 1px #ccc;
}

select{
	width:240px;
	
	box-sizing: border-box;
	padding:5px;
	
	background-color:#fff;
	background-image: url("../images/icon-form-select-down-color.webp");
	background-repeat: no-repeat;
	background-size: 15px;
	background-position:center right 10px;
	
	color:#000;
	border:solid 1px #ccc;
	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
	font: inherit;
	outline: none;
}

select:hover{
	cursor: pointer;
}

textarea{
	width:100%;
	min-height: 120px;
	
	vertical-align: bottom;
	
	box-sizing: border-box;
	padding:5px;
	
	background-color:#fff;
	color:#000;
	border:solid 1px #ccc;
	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
	font: inherit;
	outline: none;
}

input[type="submit"]{
	width:160px;
	
	background-color:#980270;
	color:#fff;
	
	font-weight:bold;
	text-align: center;
	
	box-sizing: border-box;
	padding:5px;
	border:solid 2.5px #980270;
}

input[type="submit"]:hover{
	background-color:#fff;
	color:#980270;
	
	cursor: pointer;
}

input[type="reset"]{
	width:160px;
	
	background-color:#888;
	color:#fff;
	
	font-weight:bold;
	text-align: center;
	
	box-sizing: border-box;
	padding:5px;
	border:solid 2.5px #888;
}

input[type="reset"]:hover{
	background-color:#fff;
	color:#888;
	
	cursor: pointer;
}

/*//////////----- FORMSTEP -----//////////*/

.formstep{
	box-sizing: border-box;
	padding:10px;
	margin-bottom:10px;
}

.formstep ul{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: center;
	
	width:100%;
}

.formstep ul li{
	width:110px;
	
	box-sizing: border-box;
	padding:0 10px;
	
	font-size:0.8rem;
	line-height:40px;
	
	text-align: center;
	
	position: relative;
}

.formstep ul li:after{
	display:block;
	content:"";
	
	width:15px;
	height:15px;
	
	background-image: url("../images/icon-formstep-right-color.webp");
	background-repeat:no-repeat;
	background-size:15px;
	background-position: center;
	
	position: absolute;
	top:0;
	bottom:0;
	
	right:-7.5px;
	
	margin:auto 0;
}

.formstep ul li:last-child:after{
	display:none;
}

.formstep ul li span.note{
	display:block;
	
	background-color:#f0f0f0;
	color:#000;
	
	border-radius:2.5px;
}

.formstep ul li.active span.note{
	background-color:#980270;
	color:#fff;
}

@media only screen and (min-width: 720px){
	
	.formstep ul li{
		width:180px;
	}
	
}

/*//////////----- FORMATTENTION -----//////////*/

.formattention{
	box-sizing: border-box;
	padding:10px;
	
	width:100%;
	margin:0 auto 10px;
	max-width: 840px;
}

.formattention div.inner{
	box-sizing: border-box;
	padding:10px;
	
	background-color:#f0f0f0;
	color:#000;
}

.formattention h6{
	font-weight:bold;
	margin-bottom:5px;
}

.formattention ul{
	font-size:0.8rem;
	line-height:1.75em;
}

.formattention ul li{
	box-sizing: border-box;
	padding-left:12.5px;
	
	position: relative;
}

.formattention ul li:before{
	display:block;
	content:"※";
	
	position: absolute;
	top:0;
	left:0;
}