:root {
  --mainColor: #0fabab;
  --mainColor-crr: #057d7d;
  --dangerColor: #e75163;
  --dangerColor-bg: #ffebed;
}
/*--------------------------------------------------
    style
=================================================*/
/*  共通
**********************************/
#demo05{
	display: block;
}

@media (min-width:481px) { /* for PC */
}

/*  ビジュアル
  **********************************/
#demo05 .mainVisual{
	display: block;
	width: 100%;
	height: 320px;
	background: url("/wp-content/themes/tools-8bit/images/demo05/main.jpg") no-repeat center center / cover;
	position: relative;
	overflow: hidden;
}
@media (min-width:481px) { /* for PC */
}
@media (max-width:480px) { /* for SP */
	#demo05 .mainVisual{
		height: 40vw;
		background-size: auto 46vw;
	}
}

/*  ビジュアル
  **********************************/
#demo05 .formWrap{
	display: block;
	width: 100%;
	max-width: 740px;
	margin: 40px auto;
}
#demo05 .formWrap h2{
	display: block;
	font-size: 1.5rem;
	margin-bottom: 20px;
}
#demo05 .formWrap .lead{
	font-size: 1rem;
	text-align: left;
	line-height: 1.8;
	margin-bottom: 60px;
}
#demo05 .formWrap .label_title{
	padding-left: 0.8em;
	position: relative;
}
#demo05 .formWrap .label_title::before{
	content: "";
	display: block;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: var(--mainColor);
	position: absolute;
	top: 0.75em;
	left: 0;
}
#demo05 .formWrap .group_data{
	border-top: #DDD solid 1px;
	border-bottom: #DDD solid 1px;
	margin: 44px 0;
}
#demo05 .formWrap .label_title i{
	display: inline-block;
	padding: 0.5em;
	margin-right: 0.5em;
	font-size: 1rem;
	font-style: normal;
	color: #FFF;
	border-radius: 5px;
	background: var(--mainColor);
	line-height: 1;
}
#demo05 .formWrap .label_title{
	display: block;
	margin-top: 30px;
	margin-bottom: 12px;
	font-size: 1.125rem;
}
#demo05 .formWrap .label_title span{
	display: inline-block;
	padding: 0.5em 0.8em;
	margin-left: 1em;
	background: var(--dangerColor-bg);
	font-size: 0.8125rem;
	font-weight: normal;
	color: var(--dangerColor);
	line-height: 1;
}
#demo05 .formWrap select{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	width: 100%;
	padding: 0.8em 2.5em 0.8em 1em;
	border: #AAA solid 1px;
	border-radius: 5px;
	background: #FFF;
	font-size: 1rem;
	font-family: inherit;
	position: relative;
	cursor: pointer;
}
#demo05 .formWrap select:not(#pref){
	background: url("/wp-content/themes/tools-8bit/images/demo05/arrow_down.png") no-repeat top 1.2em right 1em / 0.8em 0.6em;
}
#demo05 .formWrap select:hover{
	border-color: var(--mainColor);
	transition: all 0.3s ease;
}
#demo05 .formWrap input[type="text"],
#demo05 .formWrap input[type="url"],
#demo05 .formWrap input[type="email"],
#demo05 .formWrap input[type="tel"],
#demo05 .formWrap textarea{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	width: 100%;
	padding: 0.5em 0.6em;
	border: #AAA solid 1px;
	border-radius: 5px;
	background: #FFF;
	font-size: 1rem;
	font-family: inherit;
	position: relative;
}
#demo05 .formWrap input[type="tel"]{
	max-width: 7em;
}
#demo05 .formWrap textarea{
	height: 12em;
}
#demo05 .formWrap input.dateInput{
	width: 6em;
	margin-right: 0.5em;
}
#demo05 .formWrap input.dateInput:not(:first-child){
	margin-left: 0.5em;
}
#demo05 .formWrap .warp label{
	display: block;
	padding: 0.5em 1em;
	border: #AAA solid 1px;
	border-radius: 5px;
	background: #FFF;
	font-size: 1rem;
	font-family: inherit;
	position: relative;
}
#demo05 .formWrap .warp label:hover{
	border-color: var(--mainColor);
	transition: all 0.3s ease;
}
#demo05 .formWrap .warp:not(.side) label{
	width: 100%;
}
#demo05 .formWrap .warp:not(.side) label:not(:last-child){
	margin-bottom: 0.5em;
}
#demo05 .formWrap .warp.side label{
	width: calc((100% - 1em) / 2);
}
#demo05 .formWrap h3#form_data{
	border-top: #DDD solid 1px;
	padding-top: 28px;
	margin-top: 48px;
	margin-bottom: 4px;
	font-size: 1.5rem;
}
#demo05 .formWrap label.zipcode-wrap{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 20px;
}
#demo05 .formWrap label.zipcode-wrap input[type="text"]{
	width: 4em;
	padding: 0.3em;
	margin-left: 0.3em;
	margin-right: 0.3em;
}
#demo05 .formWrap label.zipcode-wrap button{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	padding: 0.5em 0.5em;
	margin-left: 0.3em;
	border: var(--mainColor) solid 1px;
	color: var(--mainColor);
	background: none;
	font-size: 0.8125rem;
	border-radius: 3px;
	cursor: pointer;
}
#demo05 .formWrap label.zipcode-wrap button:hover{
	color: #FFF;
	background: var(--mainColor);
	transition: all 0.3s ease;
}
#demo05 .formWrap label.zipcode-wrap p{
	display: block;
	width: 24em;
	margin-left: 1em;
	text-align: left;
	line-height: 1.3;
	font-size: 0.8125rem;
	color: #666;
}
#demo05 .formWrap label.pref-wrap,
#demo05 .formWrap label.address-wrap{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 1em;
	margin-bottom: 1em;
}
#demo05 .formWrap label.address-wrap{
	margin-bottom: 40px;
}
#demo05 .formWrap label.pref-wrap span,
#demo05 .formWrap label.address-wrap span{
	width: 7em;
}
#demo05 .formWrap label.pref-wrap select{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background-position: top 0.95em right 1em;
	width: 10em;
}
#demo05 .formWrap label.address-wrap input{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	width: calc(100% - 8em);
}
#demo05 .formWrap .btnLine{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 1em;
	border-top: #DDD solid 1px;
	padding-top: 44px;
	margin-top: 60px;
	margin-bottom: 12px;
}
#demo05 .formWrap .btnLine button{
	display: block;
	width: 10em;
	padding: 0.5em;
	font-size: 1.125rem;
	font-family: inherit;
	border: none;
	border-radius: 5px;
	color: #FFF;
	background: var(--mainColor);
	cursor: pointer;
	pointer-events: none;
}
#demo05 .formWrap .caption{
	text-align: center;
	font-size: 0.875rem;
	color: #999;
	margin-bottom: 120px;
}
#demo05 .formWrap .p_lead{
	display: block;
	padding: 20px;
	background: #F4f4f4;
	border-radius: 3px;
}

@media (min-width:481px) { /* for PC */
}
@media (max-width:480px) { /* for SP */

	#demo05 .formWrap{
		padding-left: 5vw;
		padding-right: 5vw;
		margin-top: 5vw;
		margin-bottom: 5vw;
	}
	#demo05 .formWrap h2{
		font-size: 1.4375rem;
		line-height: 1.3;
		margin-bottom: 3vw;
	}
	#demo05 .formWrap .lead{
		margin-bottom: 12vw;
	}
	#demo05 .formWrap .label_title i{
		padding: 0.4em;
		margin-right: 0.4em;
	}
	#demo05 .formWrap .label_title{
		margin-top: 8vw;
		margin-bottom: 3vw;
	}
	#demo05 .formWrap input[type="tel"]{
		max-width: 6em;
	}
	#demo05 .formWrap input.dateInput{
		width: 5.5em;
		margin-right: 0.3em;
	}
	#demo05 .formWrap input.dateInput:not(:first-child){
		margin-left: 0.3em;
	}
	#demo05 .formWrap .warp label{
		padding: 0.5em 0.8em;
	}
	#demo05 .formWrap .warp.side{
		gap: 0.6em;
	}
	#demo05 .formWrap .warp.side label{
		width: 100%;
	}
	#demo05 .formWrap h3#form_data{
		padding-top: 8vw;
		margin-top: 12vw;
		margin-bottom: 3vw;
		font-size: 1.4375rem;
	}
	#demo05 .formWrap label.zipcode-wrap{
		margin-bottom: 5vw;
	}
	#demo05 .formWrap label.zipcode-wrap p{
		width: 100%;
		margin-top: 3vw;
		margin-left: 0;
	}
	#demo05 .formWrap label.pref-wrap,
	#demo05 .formWrap label.address-wrap{
		flex-flow: column wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 0.3em;
		margin-bottom: 1em;
	}
	#demo05 .formWrap label.pref-wrap span,
	#demo05 .formWrap label.address-wrap span{
		width: 100%;
	}
	#demo05 .formWrap label.pref-wrap select{
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		background-position: top 0.95em right 1em;
		width: 10em;
	}
	#demo05 .formWrap label.address-wrap input{
		padding-top: 0.6em;
		padding-bottom: 0.6em;
		width: 100%;
	}
	#demo05 .formWrap .btnLine{
		gap: 0.5em;
		padding-top: 10vw;
		margin-top: 10vw;
		margin-bottom: 4vw;
	}
	#demo05 .formWrap .caption{
		margin-bottom: 20vw;
	}

}