@charset "utf-8";

/*-------------------------------------

[COMMON]

--------------------------------------*/
input[type="submit"],
input[type="button"],
input[type="text"],
input[type="password"],
input[type="reset"],
button, textarea, select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: Arial, Roboto, “Droid Sans”,“ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
	cursor:pointer;
}
input[type="checkbox"]{
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
}
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="reset"]:disabled,
input[type="checkbox"]:disabled{
	cursor:auto;
}

input[type="radio"]{
	display:none;
}
label{
	cursor:pointer;
}

/*-
input-color
-----------------*/
input.input_White{
	background:#ffffff;
	border:1px solid #e2e2e2;
	padding:10px;
	height:45px;
}
input.input_Gry{
	background:#f7f7f7;
	border:1px solid #e2e2e2;
	padding:10px;
	height:45px;
}

/*-
:hover
-----------------*/
/*ボタン*/
.default_Btn:hover,
.send_Btn:hover,
.rew_Btn:hover,
.decide_Btn:hover{
	opacity:0.7;
}
/*-
btn_type-color
--------------------*/
/*緑のアイコンなし*/
.default_Btn{
	background: #67b729;
}
/*緑のアイコン >アイコンつき*/
.decide_Btn{
	background: #67b729;
	position:relative;
}
.decide_Btn:before{
	content:"";
	width:14px;
	height:14px;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	position:absolute;
	top:50%;
	margin-top:-8px;
	right:16px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
}

/*ブルーのアイコンなし*/
.send_Btn{
	background: #0087db;
}
/* グレーのボタン　<アイコンつき */
.rew_Btn{
	background: #93928d;
	position:relative;
}
.rew_Btn:before{
	content:"";
	width:14px;
	height:14px;
	border-top:1px solid #fff;
	border-left:1px solid #fff;
	position:absolute;
	top:50%;
	margin-top:-8px;
	left:16px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

/*
notes
*/
/*ボタンがdisableの時*/
.dis{
	background: #ccc;
}


/*-------------------------------------

[PC]

--------------------------------------*/

@media screen and (min-width: 641px) {

input, button, textarea, select,
.default_Btn a,
.send_Btn a,
.rew_Btn a,
.decide_Btn a{
	font-size: 20px;
	text-decoration:none;
}

.default_Btn,
.send_Btn,
.rew_Btn,
.decide_Btn{
	border-radius:5px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}

.default_Btn input[type="button"],
.default_Btn input[type="submit"],
.default_Btn a,
.default_Btn button,
.send_Btn input[type="submit"],
.send_Btn input[type="button"],
.send_Btn a,
.send_Btn button,
.rew_Btn input[type="submit"],
.rew_Btn input[type="button"],
.rew_Btn a,
.rew_Btn button,
.decide_Btn input[type="submit"],
.decide_Btn input[type="button"],
.decide_Btn a,
.decide_Btn button{
	display:block;
	width:100%;
	padding:20px 0;
	color:#fff;
}

.default_Btn.M,
.send_Btn.M,
.rew_Btn.M,
.decide_Btn.M{
	width:265px;
}
.default_Btn.L,
.send_Btn.L,
.rew_Btn.L,
.decide_Btn.L{
	width:360px;
}


/*
同意
*/
input[type="checkbox"].agree{
	width:30px;
	height:30px;
  vertical-align: middle;
	margin-top:-4px;
}


/*
申し込み選択
*/
label.select_direct,
label.select_package{
	display:block;
	width:100%;
	padding:50px 20px 20px 20px;
	border-radius:8px;
	border:2px solid #ccc;
}
input[type="radio"]:checked + label.select_direct,
input[type="radio"]:checked + label.select_package{
	border:2px solid #e80588;
}

label.select_direct:hover,
label.select_package:hover{
	border:2px solid #e80588 !important;
	background:url("/start/img/check_on.png") no-repeat 50% 20px / 24px auto !important;
}

label.select_direct:hover .select_direct_ttl,
label.select_package:hover .select_package_ttl{
	background: #e80588;
}


/*--パッケージ無----*/
label.select_direct{
	background:url("/start/img/check_off.png") 50% 20px no-repeat;
	background-size:24px auto;
}
/*--パッケージ無　選択時----*/
input[type="radio"]:checked + label.select_direct{
	background:url("/start/img/check_on.png") 50% 20px no-repeat;
	background-size:24px auto;
}
input[type="radio"]:checked + label.select_direct .select_direct_ttl{
	background: #e80588;
}

/*--パッケージ有----*/
label.select_package{
	background:url("/start/img/check_off.png") 50% 20px no-repeat;
	background-size:24px auto;
}
/*--パッケージ有　選択時----*/
input[type="radio"]:checked + label.select_package{
	background:url("/start/img/check_on.png") 50% 20px no-repeat;
	background-size:24px auto;
}
input[type="radio"]:checked + label.select_package .select_package_ttl{
	background: #e80588;
}

/*
サービス選択/SIMカード選択
*/
label.select_mbservice,
label.select_mbplus,
label.select_simhas,
label.select_simno{
	display:block;
	padding:10px 10px 10px 60px;
	border-radius:8px;
	border:2px solid #ccc;
}
input[type="radio"]:checked + label.select_mbservice,
input[type="radio"]:checked + label.select_mbplus,
input[type="radio"]:checked + label.select_simhas,
input[type="radio"]:checked + label.select_simno{
	border:2px solid #e80588;
}

label.select_mbservice:hover,
label.select_mbplus:hover,
label.select_simhas:hover,
label.select_simno:hover{
	border:2px solid #e80588;
	background:url("/start/img/check_on.png") 20px 50% no-repeat / 24px auto;
}
/*--
[OFF]
モバイルサービス
モバイルプラス
SIMカードあり
SIMカードなし
-----------------*/
label.select_mbservice,
label.select_mbplus,
label.select_simhas,
label.select_simno{
	background:url("/start/img/check_off.png") 20px 50% no-repeat;
	background-size:24px auto;
}
/*--
[ON]
モバイルサービス選択時
モバイルプラス選択時
SIMカードあり選択時
SIMカードなし選択時
-----------------*/
input[type="radio"]:checked + label.select_mbservice,
input[type="radio"]:checked + label.select_mbplus,
input[type="radio"]:checked + label.select_simhas,
input[type="radio"]:checked + label.select_simno{
	background:url("/start/img/check_on.png") 20px 50% no-repeat;
	background-size:24px auto;
}

/*エントリーコード入力*/
.entryCodeBox > div input{
	width:150px;
}
.entryCodeBox > div:first-child input{
	width:100px;
}

/*紹介コード入力*/
.introductionCodeBox input{
	display:block;
	width:80%;
	margin-right:auto;
	margin-left:auto;
}



}
/*end*/

/*-------------------------------------

[SP]

--------------------------------------*/

@media screen and (max-width: 640px) {
input, button, textarea, select,
.default_Btn a,
.send_Btn a,
.rew_Btn a,
.decide_Btn a {
	font-size: 5vw;
	text-decoration:none;
}
input[type="submit"],
input[type="button"],
input[type="text"],
input[type="password"],
input[type="reset"]{
	width:100%;
}

.default_Btn,
.send_Btn,
.rew_Btn,
.decide_Btn{
	border-radius:5px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}
.default_Btn input[type="button"],
.default_Btn input[type="submit"],
.default_Btn a,
.default_Btn button,
.send_Btn input[type="button"],
.send_Btn input[type="submit"],
.send_Btn a,
.send_Btn button,
.rew_Btn input[type="button"],
.rew_Btn input[type="submit"],
.rew_Btn a,
.rew_Btn button,
.decide_Btn input[type="button"],
.decide_Btn input[type="submit"],
.decide_Btn a,
.decide_Btn button{
	display:block;
	width:100%;
	padding:5% 0;
	color:#fff;
	cursor:pointer;
}
.default_Btn.M,
.send_Btn.M,
.rew_Btn.M,
.decide_Btn.M,
.default_Btn.L,
.send_Btn.L,
.rew_Btn.L,
.decide_Btn.L{
	width:80%;
}

.decide_Btn:before{
	content:"";
	width:10px;
	height:10px;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	position:absolute;
	top:50%;
	margin-top:-5px;
	right:16px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
}
.rew_Btn:before{
	content:"";
	width:10px;
	height:10px;
	border-top:1px solid #fff;
	border-left:1px solid #fff;
	position:absolute;
	top:50%;
	margin-top:-5px;
	left:16px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

/*
同意
*/
input[type="checkbox"].agree{
	width:30px;
	height:30px;
	vertical-align:middle;
	margin-top: -4px;
}
/*
申し込み選択
*/
label.select_direct,
label.select_package{
	display:block;
	width:100%;
	padding:40px 10px 10px 10px;
	border-radius:8px;
	border:2px solid #ccc;
}
input[type="radio"]:checked + label.select_direct,
input[type="radio"]:checked + label.select_package{
	border:2px solid #e80588;
}
label.select_direct:hover,
label.select_package:hover{
	border:2px solid #e80588 !important;
	background:url("/start/img/check_on.png") no-repeat 50% 10px / 24px auto !important;
}

/*--
[OFF]
パッケージ無
パッケージ有
---------------*/
label.select_direct,
label.select_package{
	background:url("/start/img/check_off.png") 50% 10px no-repeat;
	background-size:24px auto;
}
/*--
[ON]
パッケージ無　選択時
パッケージ有　選択時
---------------*/
input[type="radio"]:checked + label.select_direct,
input[type="radio"]:checked + label.select_package{
	background:url("/start/img/check_on.png") 50% 10px no-repeat;
	background-size:24px auto;
}


/*
サービス選択/SIMカード選択
*/
label.select_mbservice,
label.select_mbplus,
label.select_simhas,
label.select_simno{
	display:block;
	width:100%;
	padding:3px 10px 3px 40px;
	border-radius:8px;
	border:2px solid #ccc;
}
input[type="radio"]:checked + label.select_mbservice,
input[type="radio"]:checked + label.select_mbplus,
input[type="radio"]:checked + label.select_simhas,
input[type="radio"]:checked + label.select_simno{
	border:2px solid #e80588;
}

label.select_mbservice:hover,
label.select_mbplus:hover,
label.select_simhas:hover,
label.select_simno:hover{
	border:2px solid #e80588;
	background:url("/start/img/check_on.png") 10px 50% no-repeat / 24px auto;
}
/*--
[off]
モバイルサービス
モバイルプラス
SIMあり
SIMなし
---------------*/
label.select_mbservice,
label.select_mbplus,
label.select_simhas,
label.select_simno{
	background:url("/start/img/check_off.png") 10px 50% no-repeat;
	background-size:24px auto;
}
/*--
[ON]
モバイルサービス選択時
モバイルプラス選択時
SIMあり選択時
SIMなし選択時
--------------*/
input[type="radio"]:checked + label.select_mbservice,
input[type="radio"]:checked + label.select_mbplus,
input[type="radio"]:checked + label.select_simhas,
input[type="radio"]:checked + label.select_simno{
	background:url("/start/img/check_on.png") 10px 50% no-repeat;
	background-size:24px auto;
}




}
/*end*/