@charset "UTF-8";

/*---------------------
     PC/SP DISPLAY
-----------------------*/

/*PCのみ表示・SPは非表示*/
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

/*SPのみ表示・PCは非表示*/
@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}


/*---------------------
       LAUOUT
-----------------------*/

.container{
	width:980px;
	margin: 0 auto;
	font-size: 1.4rem;
}

	@media screen and (max-width: 767px) {
		.container{
			width:auto;
			margin: 0 10px;
			font-size: 1.5rem;
			line-height: 1.5;
		}
	}

/*---------------------
       HEADER
-----------------------*/

.header{
	margin:20px 0px 10px;
}

@media screen and (max-width: 767px) {
	.header{
		margin:10px 0px 10px;
	}
}

/* ----ロゴ------ */

.header h1{
	width:202px;
	height:52px;
	float:left;
	background:url(../img/logo.svg) left top no-repeat;
	background-size:100%;

	text-indent:100%;
	white-space: nowrap;
	overflow: hidden;
}

	@media screen and (max-width: 767px) {
		.header h1{
			width:101px;
			height:26px;
			float:none;
			margin-bottom: 10px;
		}
	}


/* ----ページタイトル------ */

.header h2{
	float:left;
	font-size: 2.4rem;
	line-height:1.5;
	font-weight: normal;
	margin-left: 30px;
}

	@media screen and (max-width: 767px) {
		.header h2{
			float:none;
			font-size: 1.6rem;
			line-height:1.3;
			font-weight: normal;
			margin-left: 0px;
		}
	}

	.header h2 .mName{
		font-size: 1.6rem;
		display: block;
	}

	@media screen and (max-width: 767px) {
		.header h2 .mName{
			font-size: 1.4rem;
		}
	}

	.header h2 .sName{
		color:#485EB3;
		margin-left: -10px;
	}

	@media screen and (max-width: 767px) {
		.header h2 .sName{
			color:#485EB3;
			font-size: 1.6rem;
			margin-left: -10px;
		}
	}

.pageTitle{
	font-size: 2.0rem;
	font-weight: normal;
	background:#EEF0F9;
	margin-bottom: 20px;
	padding: 15px;
}

	@media screen and (max-width: 767px) {
		.pageTitle{
			font-size: 1.5rem;
			margin-bottom: 15px;
			padding: 15px 10px;
		}
	}

	.pageTitle span{
		color:#FFFFFF;
		font-size: 1.6rem;
		line-height: 1;
		background:#485EB3;
		border-radius:5px;
		margin-right: 10px;
		padding: 3px 10px;
		vertical-align: 3px;
	}

		@media screen and (max-width: 767px) {
			.pageTitle span{
				font-size: 1.3rem;
				border-radius:5px;
				margin-right: 10px;
				padding: 3px 8px;
				vertical-align: 1px;
			}
		}

.pageSubTitle{
	font-size: 1.8rem;
	line-height:1.2;
	font-weight: normal;
	background:#EEEEEE;
	margin-bottom: 20px;
	padding: 15px;
}

	@media screen and (max-width: 767px) {
		.pageSubTitle{
			font-size: 1.6rem;
			padding:12px 15px;
		}
	}

.pageSubTitle span{
	border-left:4px solid #485EB3;
	padding-left: 10px;
	display: block;
}

.pageSubTitle_red{
	font-size: 1.8rem;
	line-height:1.2;
	font-weight: normal;
	background:#fdd4d7;
	margin-bottom: 20px;
	padding: 15px;
}

	@media screen and (max-width: 767px) {
		.pageSubTitle_red{
			font-size: 1.6rem;
			padding:12px 15px;
		}
	}

.pageSubTitle_red span{
	border-left:4px solid #CE0000;
	padding-left: 10px;
	display: block;
}

.pageSubTitle_noitce{
	font-size: 1.8rem;
	line-height:1.2;
	font-weight: normal;
	background: url(../img/ico_notice.png) 12px center no-repeat,#EEEEEE;
	margin-bottom: 20px;
	padding: 15px 15px 15px 45px;
}

	@media screen and (max-width: 767px) {
		.pageSubTitle_noitce{
			font-size: 1.6rem;
			line-height:1.2;
			font-weight: normal;
			background: url(../img/ico_noticeSp.png) 12px center no-repeat,#EEEEEE;
			background-size:24px 20px;
			margin-bottom: 20px;
			padding: 15px 15px 15px 45px;
		}
	}

.serviceName{
	font-size: 1.6rem;
	margin-bottom: 5px;
}

/* -----ページナビゲーション----- */

ul.stepInfo{
	font-size: 1.7rem;
	line-height: 1.3;
	height:50px;
	margin-bottom: 20px;
	background:#EEEEEE;
	border-radius:8px;
}

	@media screen and (max-width: 767px) {
		ul.stepInfo{
			font-size: 1.2rem;
		}
	}

ul.stepInfo li{
	width: 20%;
	position: relative;
	float: left;
	display: inline-block;
	line-height: 50px;
	background: #eee;
	text-align: center;
		-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	box-sizing: border-box;
}

ul.stepInfo li:first-child{
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

ul.stepInfo li:last-child{
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

ul.stepInfo li::before{
    position: absolute;
    left: -4px;
    display: block;
    content: '';
    background: #eee;
    border-left: 3px solid #fff;
    width: 8px;
    height: 25px;
    bottom: 0;
    	-ms-transform: skew(-20deg);
			-webkit-transform: skew(-20deg);
    transform: skew(-20deg);
}

ul.stepInfo li.current::before{
    position: absolute;
    left: -4px;
    display: block;
    content: '';
    background:#C6CCE8;
    border-left: 3px solid #fff;
    width: 8px;
    height: 25px;
    bottom: 0;
    	-ms-transform: skew(-20deg);
			-webkit-transform: skew(-20deg);
    transform: skew(-20deg);
}

ul.stepInfo li::after{
	position: absolute;
	left: -4px;
	display: block;
	content: '';
	background: #eee;
	border-left: 3px solid #fff;
	width: 8px;
	height: 25px;
	top: 0;
		-ms-transform: skew(-20deg);
		-webkit-transform: skew(-20deg);
	transform: skew(20deg);
}

ul.stepInfo li.current::after{
	position: absolute;
	left: -4px;
	display: block;
	content: '';
	background:#C6CCE8;
	border-left: 3px solid #fff;
	width: 8px;
	height: 25px;
	top: 0;
		-ms-transform: skew(-20deg);
		-webkit-transform: skew(-20deg);
	transform: skew(20deg);
}

ul.stepInfo li:first-child::before,
ul.stepInfo li:first-child::after{
	content: none;
}

ul.stepInfo li.current{
	background:#C6CCE8;
}

/*---------------------
      CONTENTS
-----------------------*/

.wrapper{
	margin-bottom: 50px;
}

	@media screen and (max-width: 767px) {
		.wrapper{
			margin-bottom: 40px;
		}
	}

/*--- TEXT -----*/

.mainTxt{
	margin-bottom: 15px;
	line-height: 1.6;
}

	@media screen and (max-width: 767px) {
		.mainTxt{
			line-height: 1.4;
		}
	}

.mainTxt .importantTxt{
	color:#485EB3;
	font-weight: bold;
}

	@media screen and (max-width: 767px) {
		.mainTxt .importantTxt{
			margin-bottom: 5px;
		}
	}

.mainTxt .importantTxt2{
	color:#485EB3;
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 10px;
}

	@media screen and (max-width: 767px) {
		.mainTxt .importantTxt2{
			font-size: 1.6rem;
		}
	}

.notice,
.redTxtB{
	color:#CE0000;
	font-weight: bold;
}

.redTxt{
	color:#CE0000;
}

.orangeTxt{
	color:#F16303;
}

.greenTxt{
	color:#485EB3;
}

.signupNotice{
	color:#F16303;
	margin-top: 5px;
	padding-left:1em;
}

.notice.ico{
	background:url(../img/ico_notice.png) left top no-repeat;
	padding: 3px 0px 0px 30px;
}

	@media screen and (max-width: 767px) {
		.notice.ico{
			background:url(../img/ico_notice.png) left 8px no-repeat;
			padding: 3px 0px 0px 30px;
		}
	}

.txtIdt{
	text-indent:-1em;
	padding-left:1em;
}

.txtB{
	font-weight: bold;
}

.fs11{ font-size: 1.1rem; }
.fs12{ font-size: 1.2rem; }
.fs13{ font-size: 1.3rem; }
.fs14{ font-size: 1.4rem; }
.fs15{ font-size: 1.5rem; }
.fs16{ font-size: 1.6rem; }
.fs17{ font-size: 1.7rem; }
.fs18{ font-size: 1.8rem; }
.fs11{ font-size: 1.1rem; }

.fs11red{ font-size: 1.1rem; color: #CE0000;}

/*------受信メール確認画面---------*/

.sendMailBlock{
	font-size: 1.8rem;
	text-align: center;
	background:#EEEEEE;
	margin-bottom: 30px;
	padding: 15px 10px;
}

	@media screen and (max-width: 767px) {
		.sendMailBlock{
			font-size: 1.5rem;
			text-align: center;
			background:#EEEEEE;
			margin-bottom: 10px;
			padding: 15px 10px;
		}
	}

.mailCheckBlock{
	color:#CE0000;
	font-size: 1.8rem;
	text-align: center;
}

	@media screen and (max-width: 767px) {
		.mailCheckBlock{
			font-size: 1.5rem;
		}
	}

.confirmNotice{
	width:550px;
	margin: 0 auto 20px;
	padding: 15px 25px;
	border:3px solid #F6B3B7;
}

	@media screen and (max-width: 767px) {
		.confirmNotice{
			width:auto;
			margin: 0 auto 10px;
			padding: 15px 20px 25px;
		}
	}

.confirmNotice h4{
	font-size: 1.5rem;
	margin-bottom: 10px;
	padding:2px 0px 0px 35px;
	background:url(../img/ico_notice.png) left top no-repeat;
}

	@media screen and (max-width: 767px) {
		.confirmNotice h4{
			padding:2px 0px 5px 35px;
			background:url(../img/ico_noticeSp.png) left 5px no-repeat;
			background-size:24px 20px;
		}
	}

.confirmNotice ul{
	margin-bottom: 10px;
}

.confirmNotice li{
	margin-bottom: 5px;
	text-indent:-1em;
	padding-left:1em;
}

.confirmNotice li:before{
	content:"■";
}

/* -----お支払い関係（step3_bank.html／step3_ntt.html）---- */

.bankBlock{
	margin-bottom: 40px;
}

	@media screen and (max-width: 767px) {
		.bankBlock{
			margin-bottom: 40px;
			padding:0;
		}
	}

.bankBlock ul.confirmList li{
	text-indent:-1em;
	padding-left:1em;
	margin-bottom: 8px;
}

.bankBlock ul.confirmList li::before{
	content:"●";
}

.bankBlock dl.step{
	background:#EEEEEE;
	padding:25px 15px 5px 30px;
}

.bankBlock dl.documents{
	background:#EEEEEE;
	margin-bottom: 10px;
	padding:25px 15px 5px 30px;
}

	@media screen and (max-width: 767px) {
		.bankBlock dl.step,
		.bankBlock dl.documents{
			background:#EEEEEE;
			padding:20px 10px 5px 10px;
		}
	}

.bankBlock dl.step dt,
.bankBlock dl.documents dt{
	width:auto;
	display: inline;
	color:#485EB3;
	font-size: 1.2rem;
	font-weight: bold;
	float:left;
	background:#C6CCE8;
	border-radius: 5px;
	padding:2px 10px;
}

	@media screen and (max-width: 767px) {
		.bankBlock dl.step dt,
		.bankBlock dl.documents dt{
			display: block;
			font-size: 1.4rem;
			float:none;
			border-radius:0;
			margin-bottom: 10px;
		}
	}

.bankBlock dl.step dd,
.bankBlock dl.documents dd{
	margin-left: 65px;
	margin-bottom: 20px;
	padding:2px 10px;
}

	@media screen and (max-width: 767px) {
		.bankBlock dl.step dd,
		.bankBlock dl.documents dd{
			margin-left: 0px;
			margin-bottom: 25px;
			padding:0px 5px;
		}
	}

.bankBlock dl.step dd dt{
	width:auto;
	display: block;
	color:#333333;
	font-size: 1.4rem;
	font-weight: bold;
	float:none;
	background:none;
	border-radius: 0;
	margin-bottom: 5px;
	padding:0;
}

.bankBlock dl.step dd dt:before{
	content:"■";
}

.bankBlock dl.step dd dd{
	margin: 0;
	margin-bottom: 0;
	padding:0;
}

.bankBlock dl.step dd dd li{
	text-indent:-1.6em;
	padding-left:1.6em;
	margin-bottom: 5px;
}

/* 書類提出先 */

.documentsBox{
	width:700px;
	margin: 0 auto;
	padding: 10px;
	border:3px solid #C6CCE8;
}

	@media screen and (max-width: 767px) {
		.documentsBox{
			width:auto;
		}
	}

.documentsBox h5{
	color:#485EB3;
	font-size: 1.4rem;
	text-align: center;
	background:#EEF0F9;
	margin-bottom: 5px;
	padding: 5px;

}

/*手続きに関する確認*/

.confirmBlock{
	margin-bottom: 40px;
	padding:20px 25px 10px 30px;
	background:#fdeeef;
}

	@media screen and (max-width: 767px) {
		.confirmBlock{
			margin-bottom: 30px;
			padding:20px 15px 10px 15px;
		}
	}

.confirmBlock h5{
	color:#333333;
	font-size: 1.6rem;
	margin-bottom: 5px;
}

.confirmBlock li{
	margin-bottom: 10px;
	text-indent:-1em;
	padding-left:1em;
}

.confirmBlock li ul{
	margin-top: 5px;
	margin-left: 10px;
}

.confirmBlock li li{
	margin-bottom: 5px;
}

.confirmBlock li::before{
	content:"・";
}

.confirmBlock li li::before{
	content:"■";
}

.confirmBlock li.strip::before {
  content: '';
}

/*------申し込みのキャンセル---------*/

.cancelBlock{
	text-align: center;
	margin:80px 0 50px;
}

	@media screen and (max-width: 767px) {
		.cancelBlock{
			text-align: center;
			margin:40px 0;
		}
	}

.cancelBlock h4{
	width:700px;
	color:#CE0000;
	font-size: 1.7rem;
	border:3px solid #F6B3B7;
	background:#fdeeef;
	margin: 0 auto 30px;
	padding: 15px;
}

	@media screen and (max-width: 767px) {
		.cancelBlock h4{
			width:80%;
			margin: 0 auto 30px;
			padding: 15px;
		}
	}

.historyInfo{
	color:#CE0000;
	font-size: 1.6rem;
	background:url(../img/ico_notice.png) left top no-repeat;
	padding:0px 0px 0px 35px;
	display: inline;
}

	@media screen and (max-width: 767px) {
		.historyInfo{
			color:#CE0000;
			font-size: 1.6rem;
			background:url(../img/ico_noticeSp.png) left 2px no-repeat;
			background-size:24px 20px;
			padding:3px 0px 5px 30px;
			display: inline;
		}
	}

/*------トップへ戻る--------*/

.backTop a{
	width:320px;
	margin: 0 auto;
	border:none;
	text-align: center;
	display: block;
	padding: 15px 0px;
	color:#FFFFFF;
	font-size: 1.8rem;
	line-height: 1;
	text-decoration: none;
	background:url(../img/btn_arrow_right.png) 95% center no-repeat,#88C230;
	border-radius:8px;
}

	@media screen and (max-width: 767px) {
		.backTop a{
			width:90%;
			font-size: 1.8rem;
			background:url(../img/btn_arrow_rightSp.png) 95% center no-repeat,#88C230;
			background-size:9px 20px;
		}
	}

.backTop a:hover{
	background:url(../img/btn_arrow_right.png) 95% center no-repeat,#6C9B26;
}

	@media screen and (max-width: 767px) {
		.backTop a:hover{
			background:url(../img/btn_arrow_rightSp.png) 95% center no-repeat,#6C9B26;
		}
	}

/*-------ご注意--------*/

.noticeBlock{
	margin-bottom: 20px;
}

.noticeBlock h5{
	color:#CE0000;
	font-size: 1.6rem;
	margin-bottom: 8px;
}

/* 体験期間 */
.experienceTimeBlock{
	width:660px;
	border:3px solid #F6B3B7;
	margin:0 auto 25px;
	padding: 15px 20px;
}

	@media screen and (max-width: 767px) {
		.experienceTimeBlock{
			width:auto;
			border:3px solid #F6B3B7;
			margin:0 0 25px;
			padding: 15px 20px;
		}
	}

.experienceTimeBlock h5{
	color:#CE0000;
	font-size: 1.6rem;
	background:url(../img/ico_notice.png) left top no-repeat;
	margin-bottom: 10px;
	padding:0px 0px 0px 35px;
}

	@media screen and (max-width: 767px) {
		.experienceTimeBlock h5{
			background:url(../img/ico_noticeSp.png) left 5px no-repeat;
			background-size:24px 20px;
			padding:3px 0px 5px 30px;
		}
	}

ul.noticeList{
	margin-bottom: 40px;
}

ul.noticeList li{
	text-indent:-1em;
	padding-left:1em;
	margin-bottom: 15px;
}


/*-------年末年始のご連絡--------*/

.yearEndMessage{
	width:700px;
	border:3px solid #F6B3B7;
	margin:0 auto 25px;
	padding: 15px 20px;
	color:#CE0000;
}

	@media screen and (max-width: 767px) {
		.yearEndMessage{
			width:auto;
			padding: 15px 20px;
			font-size: 1.4rem;
		}
	}

.yearEndMessage h4{
	font-size: 1.6rem;
	background:url(../img/ico_notice.png) left top no-repeat;
	margin-bottom: 10px;
	padding:0px 0px 0px 35px;
}

/*------表組BASE(STEP1)---------*/

/*
table.about　 タイトルと項目が一つずつの表
table.about2　タイトルと項目が複数の複雑な表
*/

table.about,
table.about2{
	width:100%;
	border:1px solid #CCCCCC;
	margin-bottom: 50px;
}

	@media screen and (max-width: 767px) {
		table.about{
			border-bottom:none;
		}
	}

table.about th,
table.about2 th{
	width:200px;
	background:#EEF0F9;
	border:1px solid #CCCCCC;
	padding: 10px 15px;
	font-weight: normal;
	text-align: left;
	vertical-align: middle;
}

	table.about2 th.sjt01{
		width:200px;
		background:#EEEEEE;
	}

	@media screen and (max-width: 767px) {
		table.about th{
			width:100%;
			padding: 10px;
			display: block;
			box-sizing: border-box;
			border:none;
		}

		table.about2 th{
			width:100%;
			padding: 10px;
			display: block;
			box-sizing: border-box;
			/*border:none;*/
			border-right:none;
			border-left:none;

		}

		table.about2 th.sjt01{
			display: none;
		}
	}

table.about th.subTit{
	width:auto;
	background:#EEEEEE;
	border:1px solid #CCCCCC;
	padding: 10px;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
}

	@media screen and (max-width: 767px) {
		table.about th.subTit{
			width:auto;
			background:#EEEEEE;
			border:none;
			padding: 10px;
			font-weight: normal;
			text-align: left;
			vertical-align: middle;
		}

			table.about th.subTit:nth-child(2){
				border-top:1px solid #CCCCCC;
			}

		table.about th.subTit2{
			width:auto;
			background:#EEEEEE;
			border-top:1px solid #CCCCCC;
			padding: 10px;
			font-weight: normal;
			text-align: left;
			vertical-align: middle;
		}
	}

table.about td,
table.about2 td{
	border:1px solid #CCCCCC;
	padding: 10px 15px;
	line-height: 1.5;
	vertical-align: middle;
}

	@media screen and (max-width: 767px) {
		table.about td{
			width:100%;
			padding: 10px;
			display: block;
			box-sizing: border-box;
			border-top:1px solid #CCCCCC;
			border-right: none;
			border-bottom:1px solid #CCCCCC;
			border-left:none;
		}

		table.about2 td{
			border:none;
			font-size: 1.4rem;
			display: list-item;
			list-style: none;
			padding: 5px 10px;
	}

				table.about2 td.startDay:nth-of-type(1):before{
					content:"クレジットカード支払い";
					display: block;
					padding-right: 10px;
					font-weight: bold;
				}

				table.about2 td.startDay:nth-of-type(2):before{
					content:"電話料金合算支払い（NTT支払い）";
					display: block;
					padding-right: 10px;
					font-weight: bold;
				}

				table.about2 td.startDay:nth-of-type(3):before{
					content:"口座振替支払い";
					display: block;
					padding-right: 10px;
					font-weight: bold;
				}

				table.about2 td.cancelDay:nth-of-type(1):before{
					content:"クレジットカード支払い【当月請求】";
					display: block;
					padding-right: 10px;
					font-weight: bold;
				}

				table.about2 td.cancelDay:nth-of-type(2):before{
					content:"電話料金合算（NTT支払い）【当月請求】";
					display: block;
					padding-right: 10px;
					font-weight: bold;
				}

				table.about2 td.cancelDay:nth-of-type(3):before{
					content:"口座振替、コンビニ支払い【前払い請求】";
					display: block;
					padding-right: 10px;
					font-weight: bold;
				}

		}

/*---flets 月額料金について ／ 回線タイプ一覧---*/

/*
★flets1・・・月額料金について(1)フレッツ光
★flets2・・・月額料金について(2)フレッツADSL・(3)フレッツISDN
★flets3・・・回線タイプ一覧（モーダルウィンドウ内）
*/

.areaTitle{
	text-align: center;
	font-size: 1.6rem;
	margin-bottom: 5px;
	padding: 10px 0;
}

.areaTitle.west{
	background:#d6ebff;
}

.areaTitle.east{
	background:#f5ffe0;
}

table.flets1,
table.flets2,
table.flets3{
	width:100%;
	border:1px solid #CCCCCC;
	margin-bottom: 20px;
}

	@media screen and (max-width: 767px) {
		table.flets1,
		table.flets2{
			border-top:none;
		}

		table.flets3{
			border-top:none;
		}
	}

table.flets1 th,
table.flets2 th{
	border:1px solid #CCCCCC;
	background:#EEEEEE;
	padding: 8px 15px;
	font-weight: normal;
	text-align: left;
	vertical-align: middle;
}

table.flets3 th{
	width:200px;
	border:1px solid #CCCCCC;
	background:#EEEEEE;
	padding: 8px 15px;
	font-weight: normal;
	text-align: left;
	vertical-align: middle;
}

	@media screen and (max-width: 767px) {
		table.flets3 th.subTit{
			border:none;
			background:#FFFFFF;
		}

		table.flets3 th.subTit::before{
			content:"■";
		}
	}

	@media screen and (max-width: 767px) {
	  table.flets1 th,
		table.flets2 th{
		  width:100%;
			padding: 8px 10px;
		  display: block;
			box-sizing: border-box;
			border-top:1px solid #CCCCCC;
			border-right: none;
			border-bottom:1px solid #CCCCCC;
			border-left:none;
		}

		table.flets3 th{
		  width:100%;
			padding: 5px 10px;
		  display: block;
			box-sizing: border-box;
			border-top:1px solid #CCCCCC;
			border-right: none;
			border-bottom:1px solid #CCCCCC;
			border-left:none;
		}

		table .serviceType{
			display: none;
		}
	}


table.flets1 th.typeA,
table.flets3 th.typeA{
	background:#f5ffe0;
}

table.flets1 th.typeB,
table.flets2 th.typeB,
table.flets3 th.typeB{
	background:#ffebf5;
}

table.flets1 th.typeC,
table.flets2 th.typeC,
table.flets3 th.typeC{
	background:#d6ebff;
}

table.flets1 td,
table.flets2 td,
table.flets3 td{
	border:1px solid #CCCCCC;
	padding: 8px 15px;
}

table.flets3 td.none{
	display: none;
}

	@media screen and (max-width: 767px) {
		table.flets1 td{
			font-size: 1.4rem;
			display: list-item;
			list-style: none;
			border: none;
			padding: 5px 10px;
		}

				table.flets1 td:nth-of-type(1):before{
					content:"ファミリーマンションタイプ";
					padding-right: 10px;
				}

				table.flets1 td:nth-of-type(2):before{
					content:"プライオ1タイプ";
					padding-right: 10px;
				}

				table.flets1 td:nth-of-type(3):before{
					content:"ビジネスプライオ10タイプ";
					padding-right: 10px;
				}

		table.flets2 td{
			width:100%;
			display: block;
			box-sizing: border-box;
			border:none;
		}

		table.flets3 td{
			font-size: 1.4rem;
			display: list-item;
			list-style: none;
			border: none;
			margin-bottom: 5px;
			margin-left: 25px;
			text-indent:-1em;
			padding: 0px 10px 0px 1em;
		}

		table.flets3 td::before{
			content:"・";
		}

	}

/*-------解約の方法、解約条件について-------*/

.cancellation{
	background:#F8F8F8;
	border:1px solid #CCCCCC;
	margin-bottom: 10px;
	padding:20px 25px 5px;
}

	@media screen and (max-width: 767px) {
		.cancellation{
			padding:20px 20px 5px;
		}
	}

.cancellation dt{
	font-weight: bold;
	margin-bottom: 5px;
}

.cancellation dt:before{
	content:"■";
}

.cancellation dd{
	margin-bottom: 15px;
}

.fletsCancel{
	background:#F8F8F8;
	border:1px solid #CCCCCC;
	margin-bottom: 10px;
	padding:20px 25px;
}

/* 申し込み内容確認 */

.confirmBox{
	width:700px;
	margin: 0 auto 15px;
	border:3px solid #F6B3B7;
	padding: 10px 20px;
}

	@media screen and (max-width: 767px) {
		.confirmBox{
			width:100%;
			box-sizing: border-box;
			padding: 15px 20px;
		}
	}

.confirmBox .tit{
	color:#333333;
	font-weight: bold;
	margin-bottom: 5px;
}

table.confirmTbl{
	width:100%;
	margin-bottom: 40px;
}

table.confirmTbl th{
	width:260px;
	font-weight: normal;
	text-align: left;
	padding: 20px 10px 20px 30px;
	background:#EEF0F9;
	border-top:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
}

	@media screen and (max-width: 767px) {
		table.confirmTbl th{
			width:100%;
			display: block;
			box-sizing: border-box;
			border:none;
			padding: 10px 10px 12px 15px;
		}
	}

table.confirmTbl td{
	width:auto;
	padding: 20px 10px 20px 20px;
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	vertical-align: middle;
}

	@media screen and (max-width: 767px) {
		table.confirmTbl td{
			width:100%;
			display: block;
			box-sizing: border-box;
			border:none;
			padding: 10px;
		}
	}

table.confirmTbl td ul.hostNumber{

}

table.confirmTbl td ul.hostNumber li{
	margin-top: 10px;
}

table.confirmTbl td ul.hostNumber li:first-child{
	margin-top: 0px;
}

table.confirmTbl td ul.hostNumber li span{
	width:70px;
	display: inline-block;
}

/* 次の手続きへ */

.nextOperation{
	width:700px;
	margin: 0 auto 20px;
	border:3px solid #CCCCCC;
	padding: 15px 20px;
	text-align: center;
}

	@media screen and (max-width: 767px) {
		.nextOperation{
			width:100%;
			box-sizing: border-box;
			padding: 15px;
		}
	}

/* 完了メッセージ */

.completeMessageBox{
	width:700px;
	margin: 0 auto 40px;
	border:3px solid #CCCCCC;
	padding: 15px 20px;
	color:#333333;
}

	@media screen and (max-width: 767px) {
		.completeMessageBox{
			width:100%;
			box-sizing: border-box;
		}
	}

	@media screen and (max-width: 767px) {
		.completeMessageBox p{

		}
	}

.completeMessageBox .tit{
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 10px;
}

	@media screen and (max-width: 767px) {
		.completeMessageBox .tit{

		}
	}

.linkBtn{
	margin-bottom: 20px;
}

.linkBtn::before{
	content:">>";
	margin-right: 5px;
	color:#006699;
}

.tblUnderTxt{
	margin: -30px 0px 40px;
}
.tblUnderTxt li::before {
	content:"・";
}

.btnArea{
	text-align: center;
}

.btnArea p{
	margin-bottom: 20px;
}

.printBtn{
	text-align: right;
	margin-bottom: 10px;
}


/*---------------------
      FORM LAYOUT
-----------------------*/

table.signup{
	width:100%;
	border-top:1px dotted #CCCCCC;
}

	@media screen and (max-width: 767px) {
		table.signup{
			border-top:none;
		}
	}

table.signup th{
	width:280px;
	font-weight: normal;
	text-align: left;
	padding: 20px 10px 25px 30px;
	background:#EEF0F9;
	border-right:4px solid #C6CCE8;
	border-bottom:1px dotted #CCCCCC;
}

	@media screen and (max-width: 767px) {
		table.signup th{
			width:100%;
			display: block;
			padding: 13px 5px 15px 15px;
			box-sizing: border-box;
			border-top:4px solid #C6CCE8;
			border-right:none;
			border-bottom:none;
		}
	}

table.signup td{
	width:auto;
	padding: 20px 10px 20px 20px;
	border-bottom:1px dotted #CCCCCC;
	vertical-align: middle;
}

	@media screen and (max-width: 767px) {
		table.signup td{
			width:100%;
			display: block;
			padding: 20px 10px;
			box-sizing: border-box;
			border-bottom:none;
		}
	}

table.signup td li{
	margin-bottom: 15px;
}

table.signup td li:last-child{
	margin-bottom: 0px;
}

	@media screen and (max-width: 767px) {
		table.signup td li{
			margin-bottom: 20px;
		}
	}

/* 住所入力欄 */

table.signup dl.addBox,
table.signup dl.hostBox{

}

table.signup dl.addBox dt{
	width:100px;
	float:left;
	padding: 5px 0;
}

table.signup dl.addBox dt::before{
	content:"■";
}

table.signup dl.hostBox dt{
	width:60px;
	float:left;
	padding: 5px 0;
}

	@media screen and (max-width: 767px) {
		table.signup dl.addBox dt,
		table.signup dl.hostBox dt{
			width:auto;
			float:none;
			padding: 0;
		}
	}

table.signup dl.addBox dd{
	margin-left: 120px;
	margin-bottom: 10px;
	font-weight: bold;
}

table.signup dl.hostBox dd{
	margin-left: 70px;
	margin-bottom: 10px;
}

	@media screen and (max-width: 767px) {
		table.signup dl.addBox dd,
		table.signup dl.hostBox dd{
			margin-left: 0px;
		}
	}

.zipNotice{
	font-weight:normal;
	display: inline-block;
	margin-top: 5px;
	padding: 5px 10px 5px 1em;
	background:#fdeeef;
	line-height: 1.2;
}


/* 会社名入力欄*/

table.signup dl.company{
	margin:10px 0px 0px 20px;
}

	@media screen and (max-width: 767px) {
		table.signup dl.company{
			margin:15px 0px 0px 0px;
		}
	}

table.signup dl.company dt{
	width:110px;
	float:left;
	padding-top: 10px;
}

	@media screen and (max-width: 767px) {
		table.signup dl.company dt{
			width:auto;
			float:none;
			padding-top: 0px;
		}
	}

table.signup dl.company dd{
	margin:0px 0px 0px 120px;
}

	@media screen and (max-width: 767px) {
		table.signup dl.company dd{
			margin:0px;
		}
	}


table.signup dl.company dd input{
	width:300px !important;
}

	@media screen and (max-width: 767px) {
		table.signup dl.company dd input{
			width:100% !important;
		}
	}


/* 申し込みフォーム 注釈 */

table.signup td ul.signupNotice2{
		margin: 15px 0 10px;
}

table.signup td ul.signupNotice2 li{
	color:#F16303;
	text-indent:-3.4em;
	padding-left:3.4em;
	margin-bottom: 5px;
}

/*  */

.sjt{
	margin-bottom: 15px;
}

	@media screen and (max-width: 767px) {
		.sjt{
			margin-bottom: 20px;
		}
	}

/* フォーム欄：氏名 */

table.signup td ul.formName {

}

table.signup td ul.formName li{
	margin-bottom: 3px;
	display: inline-block;
}

	@media screen and (max-width: 767px) {
		table.signup td ul.formName li{
			margin-bottom: 3px;
			display: block;
		}
	}

table.signup td ul.formName li p{
	width:40px;
	display: inline-block;
}

	@media screen and (max-width: 767px) {
		table.signup td ul.formName li p{

		}
	}

/* 無料体験後のお支払い情報 */

ul.payType{

}

ul.payType li{
	border-top:1px solid #EEEEEE;
	padding: 15px 0 0 20px;
}

	@media screen and (max-width: 767px) {
		ul.payType li{
			padding: 15px 0 0 0;
		}
	}

ul.payType li:first-child{
	border-top:none;
	padding-top:0px;
}

ul.payType li label{
	margin-bottom: 5px;
	margin-left: -20px;
	display: inline-block;
}

	@media screen and (max-width: 767px) {
		ul.payType li label{
			margin-left: 0;
		}
	}

/* クレジットカード支払い */

ul.payType dl.creditCardPay dt{
	width:100px;
	float:left;
	padding-top: 10px;
}

	@media screen and (max-width: 767px) {
		ul.payType dl.creditCardPay dt{
			width:auto;
			float:none;
			padding-top: 10px;
		}

		ul.payType dl.creditCardPay dt:before{
			content:"■";
		}
	}

ul.payType dl.creditCardPay dd{
	padding:0px 0px 20px 110px;
}

	@media screen and (max-width: 767px) {
		ul.payType dl.creditCardPay dd{
			padding:0px 0px 10px 0px;
		}
	}

ul.payType dl.creditCardPay dd .cn{
	width:80px;
}

	@media screen and (max-width: 767px) {
		ul.payType dl.creditCardPay dd .cn{
			width:40%;
		}
	}

/*カード番号　注意書き*/

table.signup td ul.cardNotice{
	margin-top: 5px;
}

table.signup td ul.cardNotice li{
	border:none;
	margin-bottom: 5px;
	padding: 0;
}

	@media screen and (max-width: 767px) {
		table.signup td ul.cardNotice li{
			margin-bottom: 5px;
		}
	}

ul.homegateway li p {
  padding-left: 1em;
}
ul.homegateway li table {
  border-top: none;
}
ul.homegateway li table td {
  padding: 5px 30px;
  border-bottom: none;
}



/* 郵送住所 */

dl.postAdd{
	margin-top: 20px;
}

	@media screen and (max-width: 767px) {
		dl.postAdd{
			margin-top: 0;
		}
	}

dl.postAdd  dt{
	width:80px;
	float:left;
	padding-top: 5px;
}

	@media screen and (max-width: 767px) {
		dl.postAdd  dt{
			width:auto;
			float:none;
			margin-top: 10px;
		}

		dl.postAdd  dt:before{
			content:"■";
		}
	}

dl.postAdd dd{
	padding:0px 0px 0px 90px;
}

	@media screen and (max-width: 767px) {
		dl.postAdd dd{
			padding:0;
		}
	}

dl.postAdd dd .add{
	width:400px;
}

	@media screen and (max-width: 767px) {
		dl.postAdd dd .add{
			width:100%;
		}
	}

/* モーダルウィンドウ用ボタン */

.annotateBtn a{
	width:auto;
	color:#333333;
	display: inline-block;
	margin-bottom: 8px;
	padding: 8px 15px 8px 35px;
	border-radius: 5px;
	border:2px solid #FFFFFF;
	text-decoration: none;
	background: url(../img/icon_question.png) 8px center no-repeat,#FFFFFF;
}

	@media screen and (max-width: 767px) {
		.annotateBtn {
			margin-bottom: 0px;
		}

		.annotateBtn a{
			width:auto;
			display: inline-block;
			padding: 5px 15px 5px 35px;
			border-radius: 5px;
			border:2px solid #FFFFFF;
			text-decoration: none;
			background: url(../img/icon_questionSp.png) 8px center no-repeat,#FFFFFF;
			background-size:22px;
		}
	}

.annotateBtn a:hover{
	color:#333333;
	text-decoration: none;
	border:2px solid #FFFFFF;
	background: url(../img/icon_question.png) 8px center no-repeat,#DEF1C2;
}

	@media screen and (max-width: 767px) {
		.annotateBtn a:hover{
			background: url(../img/icon_questionSp.png) 8px center no-repeat,#DEF1C2;
			background-size:22px;
		}
	}

label{
	cursor:pointer
}

/* エラーメッセージ */

.errorMsg{
	color:#FFFFFF;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	background:#CE0000;
	margin-bottom: 10px;
	padding: 10px;
}

/* 処理中メッセージ */

.beProcessed{
	width:700px;
	margin: 150px auto 250px;
	border:3px solid #F6B3B7;
	padding: 20px;
	text-align: center;
}

	@media screen and (max-width: 767px) {
		.beProcessed{
			width:auto;
			margin: 50px 10px ;
			padding: 20px 10px;
		}
	}

.beProcessed .tit{
	color:#333333;
	font-size: 1.8rem;
	margin-bottom: 5px;
}

	@media screen and (max-width: 767px) {
		.beProcessed .tit{
			font-size: 1.6rem;
		}
	}


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

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"] {
	margin:0 5px 5px 0px;
	padding:8px 0px;
  background: #F2F2F2;
  border: 1px solid #bebebe;
  font-size: 1.5rem;
  text-indent: 0.3em;
}

@media screen and (max-width: 767px) {
	input[type="text"],
	input[type="password"],
	input[type="tel"],
	input[type="email"] {
		width:100%;
		margin:5px 0px;
		font-size:1.7rem;
		padding:10px 0px;
	}
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
  background: #EEF0F9;
	border:1px solid #C6CCE8;
}

/*郵便番号*/

	@media screen and (max-width: 767px) {
	.zipInput{
			width:100px !important;
		}
	}

/*住所*/

.addInput{
	width:350px;
}


/*------ 送信ボタン ------*/

ul.submitBtnBlock{
	width:620px;
	margin: 30px auto;
	text-align: center;
}

ul.submitBtnBlock2{
	width:305px;
	margin: 30px auto;
	text-align: center;
}

	@media screen and (max-width: 767px) {
		ul.submitBtnBlock{
			width:100%;
			margin: 0;
		}
	}

ul.submitBtnBlock li{
	float:right;
}

	@media screen and (max-width: 767px) {
		ul.submitBtnBlock li{
			float:none;
			display:inline;
		}
	}

input[type="submit"]{
	min-width: 300px;
	padding: 15px 40px 15px 25px;
	color:#FFFFFF;
	font-size: 2.2rem;
	line-height: 1;
	font-weight: normal;
	text-align: center;
	background:url(../img/btn_arrow_right.png) 95% center no-repeat,#88C230;
	border:none;
	border-radius:8px;
	cursor: pointer;
}

	@media screen and (max-width: 767px) {
		input[type="submit"]{
			-webkit-appearance: none;
			width:90%;
			cursor:auto;
			font-size: 1.8rem;
			background:url(../img/btn_arrow_rightSp.png) 95% center no-repeat,#88C230;
			background-size:9px 20px;
		}
	}

input[type="submit"]:hover,
input[type="submit"]:focus{
	background:url(../img/btn_arrow_right.png) 95% center no-repeat,#6C9B26;
	cursor: pointer;
}

	@media screen and (max-width: 767px) {
		input[type="submit"]:hover,
		input[type="submit"]:focus{
			background:url(../img/btn_arrow_rightSp.png) 95% center no-repeat,#6C9B26;
			background-size:9px 20px;
			cursor: pointer;
		}
	}

/*------ 郵便番号ボタン------*/

input[type="button"]{
	vertical-align: top;
	padding: 8px 10px 10px 10px;
	color:#FFFFFF;
	line-height: 1;
	font-weight: bold;
	text-align: center;
	background:#88C230;
	border:none;
	border-radius:8px;
	cursor: pointer;
}

	@media screen and (max-width: 767px) {
		input[type="button"]{
			-webkit-appearance: none;
			padding: 13px 10px 15px 10px;
			vertical-align:middle;
			font-size: 1.4rem;
		}
	}

/*------ 前回の設定をコピーするボタン ------*/

input[type="button"].lastSettingCopy{
	padding: 13px 20px 15px 20px;
	font-size: 1.8rem;
	background:#CE0000;
	border-radius:5px;
}

	@media screen and (max-width: 767px) {
		input[type="button"].lastSettingCopy{
			width:auto;
			padding: 13px 10px 15px 10px;
			box-sizing: border-box;
			font-size: 1.6rem;
		}
	}


/*------ 申請フォームへボタン ------*/

input[type="button"].formLinkBtn{
 	width:400px;
	padding: 13px 20px 15px 20px;
	font-size: 1.8rem;
	background:url(../img/btn_arrow_right.png) 95% center no-repeat,#88C230;
}

	@media screen and (max-width: 767px) {
		input[type="button"].formLinkBtn{
			width:93%;
			padding: 13px 10px 15px 10px;
			box-sizing: border-box;
			font-size: 1.6rem;
			background:url(../img/btn_arrow_right.png) 95% center no-repeat,#88C230;
		}
	}


input[type="button"].formLinkBtn:hover,
input[type="button"].formLinkBtn:focus{
	text-decoration: none;
	background:url(../img/btn_arrow_right.png) 95% center no-repeat,#6C9B26;
}

/*------ 続けて申し込む　ボタン ------*/

input[type="button"].nextAppli{
 	width:400px;
	padding: 13px 20px 15px 20px;
	font-size: 1.8rem;
	background:url(../img/btn_arrow_right.png) 95% center no-repeat,#3b9dc9;
}

	@media screen and (max-width: 767px) {
		input[type="button"].nextAppli{
			width:90%;
			padding: 13px 10px 15px 10px;
			box-sizing: border-box;
			font-size: 1.6rem;
			background:url(../img/btn_arrow_right.png) 95% center no-repeat,#3b9dc9;
		}
	}


input[type="button"].nextAppli:hover,
input[type="button"].nextAppli:focus{
	text-decoration: none;
	background:url(../img/btn_arrow_right.png) 95% center no-repeat,#0075a9;
}



/*------ 戻るボタン ------*/

input[type="submit"].backBtn{
	margin-right: 10px;
	background:url(../img/btn_arrow_left.png) 5% center no-repeat,#BBBBBB;
}

	@media screen and (max-width: 767px) {
		input[type="submit"].backBtn{
			display: block;
			width:auto;
			margin: 10px auto 0;
			color:#333333;
			font-size: 1.4rem;
			text-decoration: underline;
			background:none;
		}
	}

input[type="submit"].backBtn:hover,
input[type="submit"].backBtn:focus{
	background:url(../img/btn_arrow_left.png) 5% center no-repeat,#999999;
}

	@media screen and (max-width: 767px) {
		input[type="submit"].backBtn:hover,
		input[type="submit"].backBtn:focus{
			text-decoration: underline;
			background:none;
		}
	}

/*------ ラジオボタン・チェックボックス ------*/

input[type="radio"],
input[type="checkbox"] {
			margin-bottom:4px;
		}

	@media screen and (max-width: 767px) {
		input[type="radio"],
		input[type="checkbox"] {
			-webkit-transform: scale(1.5);
			transform: scale(1.5);
			margin-right: 10px;
		}
	}

	@media screen and (max-width: 767px) {
		textarea{
			width:98%;
		}
	}


/*------ セレクトボックス ------*/

select {
  border: 1px solid #bebebe;
  font-size: 1.5rem;
	margin: 3px 0;
	padding:3px 0px 6px 0px;
}

	@media screen and (max-width: 767px) {
		select{
			width:280px;
			min-height:35px;
				/*選択時のズーム回避 */
			font-size: 1.6rem;
 			/*transform: scale(0.8);*/
		}

		.selectSp{
			margin:10px 0px;
		}
	}

.selectYear{
	width:120px !important;
	margin-bottom: 15px;
}

.selectMonth,
.selectDay{
	width:80px !important;
	margin-bottom: 15px;
}

.selectYear2{
	width:120px !important;
}

.selectMonth2,
.selectDay2{
	width:80px !important;
}


/*---------------------
       FOOTER
-----------------------*/

.footer{
	color:#777777;
	font-size: 1.2rem;
	border-top:5px solid #EEEEEE;
	padding-top: 15px;
	text-align: center;
}



/*---------------------
      MODAL WINDOW
-----------------------*/

#inline-wrap,
#inline-wrap2,
#inline-wrap3,
#inline-wrap4,
#inline-wrap5,
#inline-wrap6{
	position: relative;
	margin:10px auto;
	max-width: 700px;
	background: #fff;
	padding: 30px 30px 15px;
	font-size: 1.5rem;
}

@media screen and (max-width: 767px) {
		#inline-wrap,
		#inline-wrap2,
		#inline-wrap3,
		#inline-wrap4,
		#inline-wrap5,
		#inline-wrap6{
			margin:0px 10px;
			padding: 30px 20px 15px;
		}
	}

.annotateTxt{}

.annotateTxt dt{
	margin-bottom: 15px;
	padding-left: 30px;
	font-size: 1.7rem;
	font-weight: bold;
	background: url(../img/icon_question.png) left top no-repeat;
}

	@media screen and (max-width: 767px) {
		.annotateTxt dt{
			padding-left: 25px;
			background: url(../img/icon_questionSp.png) left top no-repeat;
			background-size:22px;
		}
	}

.annotateTxt dd li{
	margin-bottom: 5px;
	text-indent: -1em;
	padding-left:1em;
}

	@media screen and (max-width: 767px) {
		.annotateTxt dd li{
			margin-bottom: 8px;
		}
	}

.annotateTxt dd li::before{
	content:"■";
}

.annotateTxt dd dt{
	margin-bottom: 5px;
	padding-left: 0px;
	font-size: 1.5rem;
	font-weight: normal;
	background:none;
}

	.annotateTxt dd dt::before{
		content:"■";
	}

.annotateTxt dd dd{
	padding-left: 1em;
}

.creditCardList{
	text-align: center;
	border:1px solid #CCCCCC;
	padding: 15px 10px;
}


/* セキュリティコードについて　*/

.annotateTxt dd ul.secureCodeList li{
	margin-right: 20px;
	margin-bottom: 3px;
	text-indent: 0;
	padding-left:0;
	float:left;
}

	@media screen and (max-width: 767px) {
		.annotateTxt dd ul.secureCodeList li{
			margin-bottom: 20px;
			float:none;
			text-align: center;
		}

		.annotateTxt dd ul.secureCodeList li p{
			font-weight: bold;
		}
	}

.annotateTxt dd ul.secureCodeList li::before{
	content:" ";
}

/*--利用不可リスト(STEP3:サービス選択)--*/

dl.unavailable{
	font-size: 1.2rem;
	background:#EEEEEE;
	padding:15px 15px 10px;
}

dl.unavailable dt{
	margin-bottom: 3px;
	font-weight: bold;
}

	dl.unavailable dt::before{
		content:"";
	}

dl.unavailable dd{
	padding-left: 0;
	margin-bottom: 10px;
}

/*--クローズボタン--*/

.modalClose {
	width:200px;
	margin: 30px auto 0;
	text-align: center;
	background:#88C230;
	border-radius:5px;
}

.modalClose a {
	color:#FFFFFF;
	font-weight: bold;
	text-decoration: none;

	display: block;
	padding:10px;
}



		/* rei.html START*/

	  .wrapper.sample{
			margin:20px 0px;
		}

			@media screen and (max-width: 767px) {
				.wrapper.sample{
					margin:20px 0px;
				}
			}

		/*rei.html END*/

.password-revealer {
  margin-left: -35px;
}
.password-revealer img {
  width: 18px;
  vertical-align: middle;
}
input::-ms-reveal {
  display: none;
}

/* -----doi回線事前チェック（step3.html）---- */

.att{
	margin-bottom: 40px;
}

	@media screen and (max-width: 767px) {
		.bankBlock{
			margin-bottom: 40px;
			padding:0;
		}
	}

.att ul.confirmList li{
	text-indent:-2em;
	padding-left:2em;
	margin-bottom: 20px;
}

.att ul.confirmList li span{
    color: #485EB3;
    font-weight: bold;
}