@charset "utf-8";

/* edit 2021.4.6 フォーム用スタイル */

html{
	font-size: 100%;
	}
@media screen and (max-width: 1000px) {
html{
	font-size: 87.5%;
	}
}
body{
	margin: 0;
	padding: 0;
	line-height: 1.6;
	color: #4D4D4D;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	}

@media screen and (min-width: 38.74em) {
.pcnone{
	display: none !important;
	}
}
@media screen and (max-width: 38.74em) {
.spnone{
	display: none !important;
	}
}

.header{
	position: relative;
	z-index: 2;
margin-bottom: 1rem;
	padding: .5rem 0;
	box-shadow:0px 2px 8px 0px rgba(7, 4, 4, 0.22);
	}
header .logo{
	display: inline-block;
	vertical-align: -4px;
	padding: 0 0 0 20px;
	text-align: center;
	font-size: 11px;
	}
	header .logo > img{
		width: 90px;
		display: block;
		margin: 0 auto 2px;
		}
	.ttl-h1 > img{
		display: block;
		margin: 0 auto;
		max-width: 178px;
		}

#contents{
	width: 100%;
	max-width: 800px;
	margin:0 auto;
	}

.text-blue{
	color: #eb5405;
	}
.bg-blue{
	color: #fff;
	background: #eb5405;
	}
.bg-lightblue{
	padding-bottom: 15px;
	background: #F5F5F5;
	}
.bg-orange{
	color: #fff;
	background: #EF8F3D;
	}
.note{
	padding: .5rem 0;
	text-align: center;
	line-height: 1.2;
	}
	.note p{
		margin: .4rem 0;
		}
	.note p:first-child{
		font-size: 21px;
		font-weight: bold;
		}
.text-center{
	text-align: center;
	}
.button{
	display: block;
	position: relative;
	width: calc(100% - 20px);
	box-sizing: border-box;
	margin: 0 10px;
	padding: .8rem 0;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	font-size: 20px;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	border:none;
	background: #333;
	box-shadow: 0px 4px 4px 0px rgba(7, 4, 4, 0.08);
	}	
.step + .button{
	margin-top: 1rem;
	}
.button.form{
	margin-bottom: 10px;
	padding: 1rem 0 .8rem 40px;
	line-height: 1.4;
	}
.button.tel{
	padding: .7rem 0 .6rem 40px;
	line-height: 1.4;
	}
	.button > strong{
		font-size: 15px;
		display: block;
		}
	.button > .num{
		font-size: 28px;
		line-height: 1;
		font-family: 'Oswald', sans-serif;
		}
	.button > i{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -1.4rem;
		margin-left: -9rem;
		font-size: 180%;
		}
	.button.tel > i{
		left: 7%;
		margin-left: 1rem;
		}
	.button > small{
		display: block;
		font-size: 12px;
		font-weight: normal;
		}
.button.primary,
.button.secondary{
	margin-bottom: 1rem;
	padding: 2rem 0;
	}
.button.primary,
.button.tel{
	color: #333;
	background: #fff000;
	}
.button.secondary{
	color: #333;
	background: #E0E0E0;
	}
.button.primary[disabled]{
	background: #E0E0E0;
	opacity: .5;
	cursor: auto;
	box-shadow: none;
	}
.button.tel > i,
.button.tel > strong,
.button.tel > small{
	pointer-events: none;
	}
.button.back{
	padding: 1rem 0;
	color: #333;
	background: #E0E0E0;
	}

.privacy{
	margin: 0 10px 25px;
	font-size: 10px;
	/* text-align: left; */
	line-height: 1.4;
	}
.privacy a{
	text-decoration: underline;
	color: #1568C4;
	}
footer .privacy p{
		display:inline-block;
		margin: 0;
		width: calc(100% - 100px);
		text-align: left;
		}
footer .privacy img{
	vertical-align: middle;
	}

footer{
	margin-top: 40px;
	text-align:center
	}
.copyright{
	margin: 0;
	padding: .6rem 0;
	color: #fff;
	font-size: 10px;
	background: #333;
	}

.ttl-h1{
	margin: 0 0 20px;
	padding: 1.4rem 0;
	font-size: 18px;
	text-align: center;
	color: #fff;
	}
.ttl-h2{
	margin: 0;
	padding: 8px 10px;
	font-size: 18px;
	color: #fff;
	background: #626262;
	}
.step{
	position: relative;
	margin: 0;
	padding: 0;
	}
.step::before{
	display: block;
	position: absolute;
	top: 20px;
	left: 50%;
	margin-top: -1px;
	margin-left: -80px;
	width: 160px;
	height: 2px;
	content: '';
	}
.step li{
	position: relative;
	display: inline-block;
	margin: 0 12px;
	list-style: none;
	font-weight: bold;
	font-size: 14px;
	counter-increment: num;
	}
.step li::before{
	display: block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin-bottom: 0;
	text-align: center;
	background: #fff;
	border-radius: 50%;
	font-size: 1rem;
	content: counter(num);
	}
.step li.active::before{
	color: #fff;
	}
.ttl-step{
	display: inline-block;
	margin: 0;
	padding: 0 24px 0 0;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.2;
	background: url(/images/common/ico_arrow.png) no-repeat 100% 0;
	background-size: auto 100%;
	vertical-align: 15px;
	}
.form-step{
	margin-bottom: 1.5rem;
	text-align: center;
	}
@media only screen and (max-width: 780px) {
.form-step > div:nth-child(1),
.form-step > div:nth-child(2){
	display: inline-block;
	margin-bottom: 1rem;
	}
.button p {
	display: inline-block;
	font-size: 22px;
	line-height: 22px;
	padding-left: 5px;
	margin: 0;
	}
.button.tel small{
	display: inline-block;
	vertical-align: text-bottom;
	line-height: 22px;
	}
}
input:focus,
select:focus,
textarea:focus{
	outline: none;
	}
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button,
input[type="tel"]::-webkit-outer-spin-button, 
input[type="tel"]::-webkit-inner-spin-button
 { 
	-webkit-appearance: none; 
	margin: 0; 
	}
input[type="number"],
input[type="tel"] { 
	-moz-appearance:textfield; 
	}
input[type="text"],
input[type="number"],
input[type="tel"],
select,
textarea{
	border:none;
	border-radius:4px;
	background: #fff;
	border:1px solid #AFAFAF;
	font-size: 16px;
	}
input[type="text"],
input[type="number"],
input[type="tel"],
textarea{
	width: calc(100% - 1.2em);
	padding: .5em;
	}
select {
	width:100%;
	height: 2.2em;
	text-indent: .5em;
	}
#contactday,
#contacttime,
#movetime1,
#movetime2{
	width: 48%;
	}
#contactday,
#movetime1{
	margin-right: 2%;
	}

/* ラジオボタン・チェックボックス */
input[type=radio],
input[type=checkbox] {
	display: none;
	margin: 0;
	}
input[type=radio] + label,
input[type=checkbox] + label {
	position: relative;
	display: inline-block;
	margin-left: 10px;
	padding-left: 22px;	 
	cursor: pointer;
	font-size: 14px;
	}
input[type=checkbox]:nth-of-type(2) + label {
	margin-left: 0;
}

input[type=radio] + label::before,
input[type=checkbox] + label::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	 
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	width: 20px;
	height: 20px;
	margin-top: -11px;
}
input[type=radio] + label::before {
	border: 1px solid #AFAFAF;
	border-radius: 50%;
	background: #fff;
}
input[type=checkbox] + label::before {
	border: 1px solid #AFAFAF;
	background: #fff;
	border-radius:4px;
}
input[type=radio]:checked + label::after,
input[type=checkbox]:checked + label::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 5px;
	width: 10px;
	height: 10px;
	margin-top: -6px;
	background:#7b7a7a;
	 
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
}
input[type=radio]:checked + label::after {
	border-radius: 8px;
}

.ERR {
	color:#f00;
	margin: .5rem 0 0;
	}
.required-focus{
	background: #fce2e2 !important;
	border-color: #E75B5B !important;
	}
.any,
.required{
	padding: .1em .5em;
	border-radius: 2px;
	font-size: 10px;
	color: #fff;
	background: #eb5405;
	vertical-align: middle;
	font-weight: normal;
	}
.any {
	background: #666666;
	}
.fz22{
	font-size: 22px;
	}

table {
	width: 100%;
	border-collapse: collapse;
	}
td {
	padding: 10px 10px;
	display: block;
	}
th {
	padding: 4px 10px;
	display: block;
	font-size: 16px;
	text-align: left;
	background: #F5F5F5;
	}
th > br{
	display: none;
	}
.step1,
.step2,
.step3{
	margin:0 20px;
	padding-left: 35px;
	}
.step1{
	margin-top: 25px;
	}
.step3{
	margin-bottom: 40px;
	}
.step1,
.step2{
	position:relative;
	margin-bottom: 0;
	}
	.step1::before,
	.step2::before{
		position: absolute;
		top: 0;
		left: 20px;
		display:block;
		width: 2px;
		height: 100%;
		z-index: -1;
		content: '';
		}
.step1 .pic,
.step2 .pic{
	position: absolute;
	bottom: 20px;
	right: 0;
	}
.step1 dt,
.step2 dt{
	margin: 0;
	font-size: 20px;
	font-weight: bold;
	}
.step1 > dt::before,
.step2 > dt::before,
.step3 > dt{
	display:block;
	width: 128px;
	height: 30px;
	margin-left: -35px;
	margin-bottom: 10px;
	line-height: 30px;
	font-size: 15px;
	text-align: center;
	font-weight: bold;
	border-radius: 30px;
	color: #eb5405;
	}
.step3 > dt{
	color: #fff;
	}
.step1 > dt::before{
	content: 'STEP1';
	}
.step2 > dt::before{
	content: 'STEP2';
	}
.step1 dt+ dd,
.step2 dt+ dd{
	margin: 0;
	padding: 0 20px 20px 0;
	}


/* flets blue */
.ttl-h1,
.step::before,
.step li.active::before,
.step3 > dt{
	background: #004d9a;
	}
.step li{
	color: #004d9a;
	}
.step li::before{
	border:2px solid #004d9a;
	}
.step1::before,
.step2::before{
	background: #004d9a;
	}
.step1 > dt::before,
.step2 > dt::before,
.step3 > dt{
	border:2px solid #004d9a;
	}
.step1 > dt::before,
.step2 > dt::before{
	background: #fff;
	color: #004d9a;
	}
.step3 > dt{
	color: #fff;
	}
.modal-content .text-number{
	color: #004d9a;
	}
	.modal-content .text-number:before{
		border:2px solid #004d9a;
		}

/* au orange */
.auhikari .ttl-h1,
.auhikari .step::before,
.auhikari .step li.active::before,
.auhikari .step3 > dt{
	background: #eb5405;
	}
.auhikari .step1::before,
.auhikari .step2::before{
	background: #eb5405;
	}
.auhikari .step li{
	color: #eb5405;
	}
.auhikari .step li::before{
	border:2px solid #eb5405;
	}
.auhikari .step1 > dt::before,
.auhikari .step2 > dt::before,
.auhikari .step3 > dt{
	color: #eb5405;
	border:2px solid #eb5405;
	}
.auhikari .step1 > dt::before,
.auhikari .step2 > dt::before{
	background: #fff;
	color: #eb5405;
	}
.auhikari .step3 > dt{
	color: #fff;
	}
.auhikari .modal-content .text-number{
	color: #eb5405;
	}
	.auhikari .modal-content .text-number:before{
		border:2px solid #eb5405;
		}
/* internet */
.internet .ttl-h1,
.internet .step::before,
.internet .step li.active::before,
.internet .step3 > dt{
	background: #089bd8;
	}
.internet .step1::before,
.internet .step2::before{
	background: #089bd8;
	}
.internet .step li{
	color: #089bd8;
	}
.internet .step li::before{
	border:2px solid #089bd8;
	}
.internet .step1 > dt::before,
.internet .step2 > dt::before,
.internet .step3 > dt{
	color: #089bd8;
	border:2px solid #089bd8;
	}
.internet .step1 > dt::before,
.internet .step2 > dt::before{
	background: #fff;
	color: #089bd8;
	}
.internet .step3 > dt{
	color: #fff;
	}
.internet .modal-content .text-number{
	color: #089bd8;
	}
	.internet .modal-content .text-number:before{
		border:2px solid #089bd8;
		}
/* hikari collabo */
.collabo .ttl-h1,
.collabo .step::before,
.collabo .step li.active::before,
.collabo .step3 > dt{
	background: #ffc923;
	}
.collabo .ttl-h1{
	color: #333;
	}
.collabo .step1::before,
.collabo .step2::before{
	background: #ffc923;
	}
.collabo .step li{
	color: #ffc923;
	}
.collabo .step li::before{
	border:2px solid #ffc923;
	}
.collabo .step1 > dt::before,
.collabo .step2 > dt::before,
.collabo .step3 > dt{
	color: #ffc923;
	border:2px solid #ffc923;
	}
.collabo .step1 > dt::before,
.collabo .step2 > dt::before{
	background: #fff;
	color: #ffc923;
	}
.collabo .step3 > dt{
	color: #fff;
	}
.collabo .modal-content .text-number{
	color: #ffc923;
	}
	.collabo .modal-content .text-number:before{
		border:2px solid #ffc923;
		}
/* nuro */
.nuro .ttl-h1,
.nuro .step::before,
.nuro .step li.active::before,
.nuro .step3 > dt{
	background: #262626;
	}
.nuro .step1::before,
.nuro .step2::before{
	background: #262626;
	}
.nuro .step li{
	color: #262626;
	}
.nuro .step li::before{
	border:2px solid #262626;
	}
.nuro .step1 > dt::before,
.nuro .step2 > dt::before,
.nuro .step3 > dt{
	color: #262626;
	border:2px solid #262626;
	}
.nuro .step1 > dt::before,
.nuro .step2 > dt::before{
	background: #fff;
	color: #262626;
	}
.nuro .step3 > dt{
	color: #fff;
	}
.nuro .modal-content{
	border-color: #00b4a1;
	}
.nuro .modal-content .text-number{
	color: #00b4a1;
	}
	.nuro .modal-content .text-number:before{
		border:2px solid #00b4a1;
		}
.nuro .button.primary,
.nuro .button.tel{
	color: #fff;
	background: #db2b5d;
	}
.nuro .required{
	background: #db2b5d;
	}
/* sonet */
.sonet .ttl-h1,
.sonet .step::before,
.sonet .step li.active::before,
.sonet .step3 > dt{
	background: #f72c7d;
	}
.sonet .step1::before,
.sonet .step2::before{
	background: #f72c7d;
	}
.sonet .step li{
	color: #f72c7d;
	}
.sonet .step li::before{
	border:2px solid #f72c7d;
	}
.sonet .step1 > dt::before,
.sonet .step2 > dt::before,
.sonet .step3 > dt{
	color: #f72c7d;
	border:2px solid #f72c7d;
	}
.sonet .step1 > dt::before,
.sonet .step2 > dt::before{
	background: #fff;
	color: #f72c7d;
	}
.sonet .required{
	background: #f72c7d;
	}
.sonet .step3 > dt{
	color: #fff;
	}
.sonet .modal-content{
	border-color: #262626;
	}
.sonet .modal-content .text-number{
	color: #262626;
	}
	.sonet .modal-content .text-number:before{
		border:2px solid #262626;
		}
.sonet .button.primary,
.sonet .button.tel{
	background: #ffea03;
	}
.button.primary[disabled]{
	background: #E0E0E0;
	}
/* ocn */
@media only screen and (min-width: 781px) {
.ocn header .logo > img{
	width: 135px;
	}
}
.ocn .ttl-h1{
	background: #e33a25;	
	}
.ocn .step::before,
.ocn .step li.active::before,
.ocn .step3 > dt{
	background: #002f64;
	}
.ocn .step1::before,
.ocn .step2::before{
	background: #002f64;
	}
.ocn .step li{
	color: #002f64;
	}
.ocn .step li::before{
	border:2px solid #002f64;
	}
.ocn .step1 > dt::before,
.ocn .step2 > dt::before,
.ocn .step3 > dt{
	color: #002f64;
	border: 2px solid #002f64;
	}
.ocn .step1 > dt::before,
.ocn .step2 > dt::before{
	background: #fff;
	color: #002f64;
	}
.ocn .step3 > dt{
	color: #fff;
	}
.ocn .modal-content{
	border-color: #002f64;
	}
.ocn .modal-content .text-number{
	color: #002f64;
	}
	.ocn .modal-content .text-number:before{
		border:2px solid #002f64;
		}
.ocn .button.primary,
.ocn .button.tel{
	color: #fff;
	background: #da0016;
	}
.ocn .required{
	background: #db2b5d;
	}
/* nifty */
@media only screen and (min-width: 781px) {
.nifty header .logo > img{
	width: 135px;
	}
}
.nifty .ttl-h1{
	background: #ffd217;
	color: #000;
	}
.nifty .step::before,
.nifty .step li.active::before,
.nifty .step3 > dt{
	background: #0f4e99;
	}
.nifty .step1::before,
.nifty .step2::before{
	background: #0f4e99;
	}
.nifty .step li{
	color: #0f4e99;
	}
.nifty .step li::before{
	border:2px solid #0f4e99;
	}
.nifty .step1 > dt::before,
.nifty .step2 > dt::before,
.nifty .step3 > dt{
	color: #0f4e99;
	border: 2px solid #0f4e99;
	}
.nifty .step1 > dt::before,
.nifty .step2 > dt::before{
	background: #fff;
	color: #0f4e99;
	}
.nifty .step3 > dt{
	color: #fff;
	}
.nifty .modal-content{
	border-color: #0f4e99;
	}
.nifty .modal-content .text-number{
	color: #0f4e99;
	}
	.nifty .modal-content .text-number:before{
		border:2px solid #0f4e99;
		}
.nifty .button.primary,
.nifty .button.tel{
	color: #fff;
	background: #ff4e00;
	}
.nifty .required{
	background: #ff4e00;
	}

/*------------------------------------------------------*/
/*　media Queries PCサイズ　　　　　*/
/*------------------------------------------------------*/

@media only screen and (min-width: 781px) {
.header{
	padding: 0;
	}
.header .wrap{
	max-width: 980px;
	margin: 0 auto;
	}
.header .logo{
	display: inline-block;
	padding: 12px 0;
	font-size: 14px;
	font-weight: bold;
	vertical-align: top;
	}
	header .logo > img{
		width: 140px;
		display: inline;
		margin-right: 5px;
		vertical-align: -5px;
		}
.ttl-h1{
	padding: 2.5rem 0;
	font-size: 36px;
	}
	.ttl-h1 > img{
		max-width: 235px;
		margin: 0 1rem 0 0;
		display: inline;
		vertical-align: middle;
		}

	table {
		width: 100%;
		margin-bottom: 60px;
		}
	th, td {
		width: auto;
		display: table-cell;
		padding: 30px 45px;
		border-bottom:1px solid #ebebeb;
		}
	th {
		width: 240px;
		font-size: 16px;
		}
		th > br{
			display: block;
			}
input[type="text"],
input[type="number"],
input[type="tel"],
textarea{
	width:calc(100% - 1.6em);
	padding: 1em .8em;
	}
#provider{
	margin-top: 1em;
	margin-left: 1em;
	width:calc(100% - 9em);
	}
select {
	height: 3.2em;
	}
.privacy br{
	display: none;
	}
footer .privacy p{
	text-align: center;
	width: auto;
	}
.button.tel{
	margin:0;
	width: 280px;
	}
.step2 dt > br{
	display: none;
	}

.form-step{
	display: flex;
	justify-content: space-between;
	margin: 50px 0;
	}
.step li{
	margin:0 1rem;
	}
.step + div{
	text-align: right;
	vertical-align: middle;
	}
.step li::before{
	width: 40px;
	height: 40px;
	line-height: 40px;
	}
.ttl-step{
	font-size: 30px;
	height: 54px;
	padding-right: 40px;
	line-height: 54px;
	}
	.ttl-step > br{
		display: none;
		}

}

/*------------------------------------------------------*/
/*　modal　　　　　*/
/*------------------------------------------------------*/
.modal-content {
	width: 480px;
	top:50%;
	left:50%;
	margin-top: -100px;
	margin-left: -240px;
	padding: 20px 0;
	border: 4px solid #feee50;
	background: #fff;
	position: fixed;
	display: none;
	z-index: 4;
}
#modal-overlay {
	z-index: 3 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

#modal-close {
	position: absolute;
	top: 0;
	right: 7px;
	font-size: 150%;
	color: #666;
	cursor: pointer;
	}

.modal-content p {
	margin: 0;
	text-align:center;
	font-size: 20px;
	}
.modal-content .text-em{
	font-size: 22px;
	font-style: italic;
	font-weight:bold;
	}
.modal-content .text-blue{
	font-size: 24px;
	font-weight:bold;
	color: #333;
	}
.modal-content .text-number{
	font-size:44px;
	font-weight:bold;
	}
	.modal-content .text-number:before{
		display:inline-block;
		width: 50px;
		height: 50px;
		margin-right: 10px;
		vertical-align: middle;
		border-radius:50%;
		font-family: "Font Awesome 5 Free";
		content: "\f2a0";
		font-size: 80%;
		line-height: 50px;
		}