@charset "UTF-8";
/* common style */
* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}
li{
	list-style: none;
}
:root {
    --main-width: 1200px;
}
.w100p {
	width: 100%;
}
.w10p {
	width: 10%;
}
.w5p {
	width: 5%;
}
.w3p {
	width: 3%;
}
.marginTB50{
	margin: 50px auto !important;
}
input, textarea, select {
	outline: none;
	font-size: 18px;
}
textarea {
	resize: none;
}
:root{
	--Noto-Sans-Japanese: 'Noto Sans JP', sans-serif;
}
body{
	font-family: var(--Noto-Sans-Japanese);
}
/* common style end */

/* header start */
header{
	width: var(--main-width);
	margin: 0 auto;
	padding-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header-logo{
	width: 15%;
}
.header-form_scroll{
	width: 25%;
	display: block;
}
.header-form_scroll:nth-of-type(2){
	display: none;
}
.header-form_scroll>img{
	width: 100%;
}
.header-form_scroll>img:hover{
	opacity: 0.8;
}
/* header end */

/* main-top start */
.main-top{
	width: var(--main-width);
	margin: auto;
}
.main-top img{
	width: 100%;
	vertical-align: top;
}
/* main-top end */

/* main-btn start */
.main-btn{
	width: calc(var(--main-width) * 0.9);
	margin: 15px auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-evenly;
}
.main-btn__a{
	text-align: center;
	display: flex;
	align-items: center;
	max-width: 45%;
	text-decoration: none;
}
.main-btn__a>img{
	width: 100%
}
.main-btn__a>img:hover{
	opacity: 0.8;
}
.main-btn__a>span{
	font-size: 14px;
	color: #000000;
}
/* main-form start */

/* main-form start */
.main-form{
	width: var(--main-width);
	margin: auto;
	padding: 10px 50px 25px;
	background-color: #fffd00;
}
.main-form__form{
	/* background-color: #ffffff;
	border-radius: 30px;
	margin: 50px auto;
	padding: 50px; */
}
.main-form__img--ribbon{
	max-width: 100px;
}
.main-form__legend--center{
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
}
.main-form__legend--center>span:first-of-type{
	font-size: 45px;
	font-weight: bold;
	font-style: italic;
	color: #3B3838;
}
.main-form__legend{
	width: calc(100% - 100px);
	margin: auto;
}
.main-form__item--wrap{
	background-color: #ffffff;
	padding: 30px;
	border-radius: 25px;
	font-size: 18px;
}
.main-form__item{
	margin: 25px auto;
}
.main-form__item50{
	width: 50%;
}
.main-form__item label{
	padding-left: 15px;
	position: relative;
	display: inline-block;
	margin-bottom: 5px;
	font-weight: bold;
	color: #3B3838;
}
.main-form__item--name label::after,
.main-form__item--province label::after,
.main-form__item--tel label::after,
.main-form__item--comment label::after
{
	/* content: '必須'; */
	background-color: #EA424A;
	color: #ffffff;
	font-weight: bold;
	font-size: 12px;
	padding: 1px 15px;
	border-radius: 30px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(120%,-50%);
}
.main-form__item--ServiceConsultation{
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.main-form__item--service,
.main-form__item--consultation{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	height: 100%;
}
.main-form__item--service{
	padding-right: 3%;
}
.main-form__item--consultation{
	padding-left: 3%;
}
.main-form__item--service label,
.main-form__item--consultation label{
	border-radius: 6px;
    border: 1px solid gray;
    display: flex;
	align-items: center;
    width:48%;
	padding: 0px 13px;
	position: relative;
	cursor: pointer;
}
.main-form__item--service label::before,
.main-form__item--agree label::before{
	content: "";
	display: block;
	width: 35px;
	height: 35px;
	background-image: url(../images/checkbox-off.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.main-form__item--service label.on::before,
.main-form__item--agree label.on::before{
	background-image: url(../images/checkbox-on.png);
}
.main-form__item--consultation label::before{
	content: "";
	display: block;
	width: 55px;
	height: 55px;
	background-image: url(../images/radiobox-off.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.main-form__item--consultation label.on::before{
	background-image: url(../images/radiobox-on.png);
}
.main-form__item--service label>input,
.main-form__item--consultation label>input,
.main-form__item--agree label>input{
	display: none;
}
.main-form__item--service label>span,
.main-form__item--consultation label>span{
	display: flex;
	align-items: center;
	font-weight: normal;
	margin: 0 35px;
}
.main-form__item--consultation label>span{
	flex-wrap: wrap;
    justify-content: center;
}
.main-form__item--service label>span::before,
.main-form__item--consultation label>span::before{
	content: "";
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.main-form__item--service label>span::before{
	width: 30px;
	height: 30px;
}
.main-form__item--service label:nth-of-type(1)>span::before{
	background-image: url(../images/electricity-before.png);
}
.main-form__item--service label:nth-of-type(2)>span::before{
	background-image: url(../images/water-before.png);
}
.main-form__item--service label:nth-of-type(3)>span::before{
	background-image: url(../images/gas-before.png);
}
.main-form__item--service label:nth-of-type(4)>span::before{
	background-image: url(../images/net-before.png);
}
.main-form__item--consultation label>span::before{
	width: 80px;
	height: 60px;
}
.main-form__item--consultation label:nth-of-type(1)>span::before{
	background-image: url(../images/track-before.png);
}
.main-form__item--consultation label:nth-of-type(2)>span::before{
	background-image: url(../images/house-before.png);
}
.main-form__item--comment label::after{
	/* content: '任意'; */
	background-color: #333333;
}
.main-form__item--cashBack{
	text-align: center;
	margin-top: 50px;
	margin-bottom: 0;
}
.main-form__item--cashBack>img{
	width: 60%;
}
.main-form__item--agree{
	display: flex;
    align-items: center;
    justify-content: center;
	margin-top: 0px;
}
.main-form__item--agree label{
	padding: 0;
	margin: 0;
}
.main-form__item--agree>a{
	color: #3B3838;
}
.default-bg{
	background-color: #ffffbd;
}
.changed-bg{
	background-color: rgb(232, 240, 254);
}
input[name=user_last_name],
input[name=user_first_name],
select[name=user_province],
input[name=user_tel],
input[name=user_email],
textarea[name=user_comment]
{
	padding: 15px 25px;
	border-radius: 15px;
}
input[name=user_last_name],
input[name=user_first_name]
{
	width:48%;
}
input[name=user_first_name]{
	margin-left: 3%;
}
select[name=user_province],
input[name=user_tel],
input[name=user_email],
textarea[name=user_comment]
{
	width:100%;
}
select[name=user_province]{
	appearance: none;
	-webkit-appearance: none;
}
.main-form__item--select{
	position: relative;
}
.main-form__item--select::after{
	content: url(../images/select-after.png);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(-30px,-50%);
	height: 19px;
}

.form__submit{
	width: 35%;
	margin: 20px auto 0px;
	text-align: center;
	background-color: #BFBFBF;
	color: #ffffff;
	font-weight: bold;
	box-shadow: 0px 5px 0px #7F7F7F;
	border-radius: 10px;
	padding: 18px 10px 17px;
}
.form__submit--on{
	cursor: pointer;
	background-color: #00AAF1;
	box-shadow: 0px 5px 0px #008FC8;
}
.form__submit>span{
	color: #fffd00;
}
/* main-form end */

/* main-campaign start */
.main-campaign{
	width: var(--main-width);
	margin: auto;
}
.main-campaign img{
	width: 100%;
	vertical-align: top;
}
.main-campaign__div-yellow{
	background-color: #EEF07B;
}
.main-campaign__div-turquoise{
	background-color: #66D4FF;
}
/* main-campaign end */

/* main-topic start */
.main-topic{
	width: var(--main-width);
	margin: auto;
}
.main-topic img{
	width: 100%;
	vertical-align: top;
}
/* main-topic end */

/* main-review start */
.main-review{
	width: var(--main-width);
	margin: auto;
	background-color: #EEF07B;
}
.main-review img{
	width: 100%;
	margin-top: 50px;
	vertical-align: top;
}
/* main-review end */

/* main-qa start */
.main-qa{
	width: var(--main-width);
	margin: 50px auto 0px;
	background-color: #B7F1FB;
	padding: 30px 0px;
}
.main-qa__div{
	text-align: center;
	font-size: 50px;
	font-weight: bold;
	padding: 0px 20px;
	width: fit-content;
	margin: 0px auto 30px;
	border-bottom: 10px dotted #ffffff;
	color: #3B3838;
}
.main-qa__div--yellow{
	background-color: #EEF07B;
}
.main-qa__div--none{
	width: var(--main-width);
	margin: auto;
}
.main-qa__div--none>img{
	width: 100%;
}
.main-qa img{
	width: 100%;
	margin-top: 50px;
	vertical-align: top;
}
.main-qa__dl{
	width: 60%;
	margin: 25px auto 0px;
	background-color: #ffffff;
	border-radius: 15px;
	box-shadow: 3px 5px 5px 3px #9DCAD2;
	padding: 15px;
}
.main-qa__dl>dt{
	font-weight: bold;
	margin-bottom: 15px;
	color: #3B3838;
}
.main-qa__dl>dt,
.main-qa__dl>dd{
	position: relative;
	display: flex;
    align-items: center;
}
.main-qa__dl>dt::before,
.main-qa__dl>dd::before{
	display: flex;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	color: #767171;
	font-size: 22px;
	font-weight: bold;
	align-items: center;
    justify-content: center;
	margin-right: 10px;
	font-family: 'Gabarito', sans-serif;
}
.main-qa__dl>dt::before{
	content: "Q";
	background-color: #66D4FF;
}
.main-qa__dl>dd::before{
	content: "A";
	background-color: #fffd00;
}
.main-qa__dl>dt>span,
.main-qa__dl>dd>span{
	display: inline-block;
	width: calc(100% - 55px);
}
/* main-qa end */

/* main-flow start */
.main-flow{
	width: var(--main-width);
	margin: auto;
}
.main-flow__div{
	font-size: 50px;
	font-weight: bold;
	width: fit-content;
	padding: 0px 20px;
	margin: 15px auto;
	border-bottom: 10px dotted #FFFD00;
	color: #3B3838;
}
.main-flow>ul{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin-top: 50px;
}
.main-flow>ul>li{
	width: calc(92% / 4);
	border: 3px dashed #66D4FF;
	border-radius: 10px;
	padding: 50px 20px 20px;
	text-align: center;
	position: relative;
}
.main-flow>ul>li:nth-child(1) .stop_button{
	display: none;
}
.main-flow>ul>li:nth-child(1) .main-tel{
	width: 100%;
}
.main-flow>ul>li:nth-child(1) .main-tel img{
	width: 50px;
}
.main-flow>ul>li:nth-child(1) .main-tel>span:nth-of-type(2){
	font-size: 24px;
}
.main-flow>ul>li::before{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #66D4FF;
	border-radius: 5px;
	font-size: 22px;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	padding: 5px 25px;
}
.main-flow>ul>li:nth-child(1):before{
	content: "STEP1";
}
.main-flow>ul>li:nth-child(2):before{
	content: "STEP2";
}
.main-flow>ul>li:nth-child(3):before{
	content: "STEP3";
}
.main-flow>ul>li:nth-child(4):before{
	content: "STEP4";
}
.main-flow>ul>li::after{
	position: absolute;
	content: '';
	top: 50%;
	right:0%;
	transform: translate(32px,-50%);
	display: block;
	width: 25px;
	height: 50px;
	background-image: url(../images/flow-li-after.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.main-flow>ul>li:nth-child(4)::after{
	content: none;
}
.main-flow>ul>li>figure{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	height: 100%;
	margin-bottom: 30px;
}
.main-flow>ul>li>p{
	margin-bottom: 45px;
}
.main-flow>ul>li img{
	width: 85%;
	align-self: center;
}
.main-flow>ul>li:first-child img{
	width:100%;
}
.main-flow>ul>li a>img:hover{
	opacity: 0.8;
}
/* main-flow end */

/* main-agency start */
.main-agency__div{
	text-align: center;
	font-weight: bold;
	font-size: 50px;
	margin: 15px auto;
	color: #3B3838;
}
.main-agency__div>span:nth-of-type(2){
	font-size: 35px;
}
.main-agency__div>span:nth-of-type(2)~*{
	color: #66D4FF;
}
.main-agency{
	width: var(--main-width);
	margin: auto;
	padding: 30px 50px;
	background-color: #FFFFE5;
}
.main-agency>figure{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	box-shadow: 5px 5px 5px #BEBEAB;
	border-radius: 15px;
	padding: 30px 80px;
	margin: 25px auto 0px;
}
.main-agency>figure:nth-child(odd){
	margin-right: 130px;
}
.main-agency>figure:nth-child(even){
	margin-left: 130px;
	flex-direction: row-reverse;
}
.main-agency>figure>img{
	height: 190px;
}
.main-agency>figure>figcaption>dl>dt{
	font-weight: bold;
	font-size: 32px;
	position: relative;
	display: flex;
	align-items: center;
	color: #3B3838;
}
.main-agency>figure>figcaption>dl>dt::before{
	content: "";
    display: block;
	width: 90px;
    height: 90px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.main-agency>figure:nth-of-type(1)>figcaption>dl>dt::before{
	background-image: url(../images/point1.png);
}
.main-agency>figure:nth-of-type(2)>figcaption>dl>dt::before{
	background-image: url(../images/point2.png);
}
.main-agency>figure:nth-of-type(3)>figcaption>dl>dt::before{
	background-image: url(../images/point3.png);
}
.main-agency>figure>figcaption>dl>dd{
	line-height: 2;
}
/* main-agency end */

/* footer start */
.footer{
	width: var(--main-width);
	margin: auto;
	padding: 50px 0;
	text-align: center;
}
.footer-top__img{
	width: var(--main-width);
	margin: auto;
	display: block;
	vertical-align: top;
}
.footer-logo>img{
	max-width: 264px;
}
.footer-links{
	margin: 10px auto;
}
.footer-links>a{
	color: #000000;
	padding: 0 15px;
	border-right: 1px solid #000000;
	text-decoration: none;
}
.footer-links>a:nth-last-child(1){
	border: none;
}
.footer-pmark>img{
	max-width: 496px;
}
/* footer end */

/* main-tel start */
.main-tel{
	color: #000000;
	padding: 5px;
	width: 350px;
	margin: 15px auto 0;
	text-align: center;
	border: 2px solid #FF9696;
	text-decoration: none;
	display: grid;
	row-gap: 3px;
	column-gap: 10px;
	align-items: center;
	justify-content: center;
	grid-template-areas:
		'tel-row1 tel-row1'
		'tel-mark tel-row2'
		'tel-row3 tel-row3';
	font-weight: bold;
}
.main-tel>img{
	grid-area: tel-mark;
	width: 50px;
	vertical-align: top;
}
.main-tel>span:nth-of-type(1){
	grid-area: tel-row1;
	font-size: 12px;
}
.main-tel>span:nth-of-type(2){
	grid-area: tel-row2;
	font-size: 34px;
	line-height: 30px;
	padding-bottom: 2px;
}
.main-tel>span:nth-of-type(3){
	grid-area: tel-row3;
	font-size: 12px;
}
.tel-wrap>p{
	text-align: center;
	margin-bottom: 15px;
}
/* main-tel end */