@charset "UTF-8";

/*-------------------------------------------
汎用
-------------------------------------------*/
sup,sub,span{
	color:inherit;
}

/* PC・TB・SP */
.only_pc{
	display:block;
}
.only_tbsp{
	display:none;
}
.only_sp{
	display:none;
}
@media screen and (max-width: 768px) {
	.only_pc{
		display:none;
	}
	.only_tbsp{
		display:block;
	}
	.only_sp{
		display:none;
	}
}

@media screen and (max-width: 480px) {
	.only_pc{
		display:none;
	}
	.only_tbsp{
		display:block;
	}
	.only_sp{
		display:block;
	}
}

/* テキストリンク */
main a,
main a:visited {
	color: #000000;
	text-decoration: underline;
}

main a:hover {
	color: #CC023A;
	text-decoration: none;
	transition:
	color .3s ease,
	text-decoration .3s ease;
}

/*-------------------------------------------
新料金プラン登場
-------------------------------------------*/
.coming_wrap{
	margin:0 auto 80px;
}

.coming_ttl {
	width: fit-content;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	background-color: #C03;
	padding: 5px 20px;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	.coming_ttl {
		font-size: 18px;
	}
}


/*-------------------------------------------
あなたのニーズに合ったプランを選択
-------------------------------------------*/
.select_wrap{
	width: fit-content;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:0 25px;
	align-items: center;
	margin:30px auto 40px;
}
.select_icon{
	width:20px;
	text-align:center;
}
.select_icon img{
	width:100%;
}
.select_txt{
	width:calc(100% - 90px);
	font-size:24px;
	font-weight:bold;
	line-height:1.4;
	text-align:center;
}
.select_txt strong{
	color:#CC0033;
	font-weight:bold;
}

/*-------------------------------------------
タブ
-------------------------------------------*/
.tab-container {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
}
.tab-container input[type="radio"] {
	display: none;
}
.tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
	gap:15px;
	align-items: end;
}
.tabs li{
	position: relative;
	width:calc((100% - 45px) / 4);
}
@media (max-width: 768px) {
	.tabs li{
		width:calc((100% - 15px) / 2);
	}
}

.tabs label {
	display: block;
	position: relative;
	cursor: pointer;
	border-radius: 10px;
	border: 3px solid transparent;
	color: #fff;
	font-size:19px;
	font-weight: bold;
	line-height:1.3;
	text-align: center;
	padding: 15px 10px 5px;
}
.tabs label::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -9px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid transparent;
	display: none;
}
.tabs label::before {
	content: "";
	position: absolute;
	left: 50%;
	/*transform: translateX(-50%);*/
	bottom: -13px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid transparent;
	display: none;
	border-color: rgba(0, 0, 0, 0);
	border-top-width:10px;
	border-bottom-width:10px;
	border-left-width:10px;
	border-right-width:10px;
	margin-left: -10px;
}

/* 各タブのデフォルト色 */
.tab-biz { background: #001A3B; }
.tab-max { background: #CC0033; }
.tab-mini { background: #0068B7; }
.tab-kake { background: #4B6C8D; }

/* 選択時の色切替 */
#tab-biz:checked ~ .tabs label[for="tab-biz"],
#tab-max:checked ~ .tabs label[for="tab-max"],
#tab-mini:checked ~ .tabs label[for="tab-mini"],
#tab-kake:checked ~ .tabs label[for="tab-kake"] {
	background: #fff;
	color: #000;
}
#tab-biz:checked ~ .tabs label[for="tab-biz"] { color: #001A3B; }
#tab-max:checked ~ .tabs label[for="tab-max"] { color: #CC0033; }
#tab-mini:checked ~ .tabs label[for="tab-mini"] { color: #0068B7; }
#tab-kake:checked ~ .tabs label[for="tab-kake"] { color: #4B6C8D; }

#tab-biz:checked ~ .tabs label[for="tab-biz"] { border: 3px solid #001A3B; }
#tab-max:checked ~ .tabs label[for="tab-max"] { border: 3px solid #CC0033; }
#tab-mini:checked ~ .tabs label[for="tab-mini"] { border: 3px solid #0068B7; }
#tab-kake:checked ~ .tabs label[for="tab-kake"] { border: 3px solid #4B6C8D; }

#tab-biz:checked ~ .tabs label[for="tab-biz"]::before { border-top-color: #001A3B; display: block; }
#tab-max:checked ~ .tabs label[for="tab-max"]::before { border-top-color: #CC0033; display: block; }
#tab-mini:checked ~ .tabs label[for="tab-mini"]::before { border-top-color: #0068B7; display: block; }
#tab-kake:checked ~ .tabs label[for="tab-kake"]::before { border-top-color: #4B6C8D; display: block; }

#tab-biz:checked ~ .tabs label[for="tab-biz"]::after { border-top-color: #FFF; display: block; }
#tab-max:checked ~ .tabs label[for="tab-max"]::after { border-top-color: #FFF; display: block; }
#tab-mini:checked ~ .tabs label[for="tab-mini"]::after { border-top-color: #FFF; display: block; }
#tab-kake:checked ~ .tabs label[for="tab-kake"]::after { border-top-color: #FFF; display: block; }

/* コンテンツ領域 */
.tab-content-wrap {
	padding: 0;
	margin-top: 30px;
}
/*コンテンツ内容*/
.tab-panel {
	display: none;
	border-radius: 10px;
	padding:30px;
}
#tab-biz:checked ~ .tab-content-wrap .biz-panel { display: block; border: 3px solid #001A3B; }
#tab-max:checked ~ .tab-content-wrap .max-panel { display: block; border: 3px solid #CC0033; }
#tab-mini:checked ~ .tab-content-wrap .mini-panel { display: block; border: 3px solid #0068B7; }
#tab-kake:checked ~ .tab-content-wrap .kake-panel { display: block; border: 3px solid #4B6C8D; }

/*NEWマーク*/
.label-new{
	width:fit-content;
	color:#FFF;
	font-size:13px;
	font-weight:bold;
	line-height:1.0;
	text-align:center;
	padding:3px 10px;
	margin:0 auto 5px;
	background-color:#CC0033;
}

/*スラッシュ線付キャッチフレーズ */
.label-catch{
	width: fit-content;
	max-width: calc(100% - 60px);
	position: relative;
	padding: 0;
	color:#202020;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	margin: 0 auto 25px;
}
.label-catch::before {
	position: absolute;
	display: inline-block;
	content: '';
	width: 2px;
	height: 100%;
	top: 0;
	left: -30px;
	border-radius: 2px;
	background: #202020;
	transform: rotate(-35deg);
}
.label-catch::after {
	position: absolute;
	display: inline-block;
	content: '';
	width: 2px;
	height: 100%;
	top: 0;
	right: -30px;
	border-radius: 2px;
	background: #202020;
	transform: rotate(35deg);
}
@media (max-width: 768px) {
	.label-catch{
		font-size:12px;
	}
	.label-catch::before {
		left: -20px;
	}
	.label-catch::after {
		right: -20px;
	}
}

/*ショルダーバー*/
.label-shoulder{
	width:100%;
	margin: -2.5em 0 0;
	font-size:14px;
	font-weight:bold;
	line-height:1.4;
	text-align:center;
	border-radius:2em;
	padding:5px;
}
/*ショルダーバー デフォルト色 */
.tab-biz .label-shoulder{ color:#001A3B;background-color:#FFF;border:2px solid #001A3B;}
.tab-max .label-shoulder{ color:#CC0033;background-color:#FFF;border:2px solid #CC0033;}
.tab-mini .label-shoulder{ color:#0068B7;background-color:#FFF;border:2px solid #0068B7;}
.tab-kake .label-shoulder{ color:#4B6C8D;background-color:#FFF;border:2px solid #4B6C8D;}

/*ショルダーバー 選択時の色切替 */
#tab-biz:checked ~ .tabs label[for="tab-biz"] .label-shoulder{ color:#FFF;background-color:#001A3B;border:2px solid #001A3B;}
#tab-max:checked ~ .tabs label[for="tab-max"] .label-shoulder{ color:#FFF;background-color:#CC0033;border:2px solid #CC0033;}
#tab-mini:checked ~ .tabs label[for="tab-mini"] .label-shoulder{ color:#FFF;background-color:#0068B7;border:2px solid #0068B7;}
#tab-kake:checked ~ .tabs label[for="tab-kake"] .label-shoulder{ color:#FFF;background-color:#4B6C8D;border:2px solid #4B6C8D;}

/*ラベル名称*/
.label-name{
	min-height:3em;
	padding-top:5px;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

/*-------------------------------------------
料金テーブル（角丸）
-------------------------------------------*/
.charge_tbl {
	width:100%;
	border-collapse: separate;/*collapseから変更*/
	border-spacing: 0;
	border-radius: 15px;
	border: 2px solid #333;
	overflow: hidden;
	margin:0;
}
.charge_tbl tbody th {
	width:20%;
	padding: 20px;
	color: #FFF;
	font-size:18px;
	font-weight:bold;
	line-height:1.4;
	text-align:center;
	vertical-align:middle;
	background-color: #333;
	border:none;
	border-bottom: 2px solid #666;
}
.charge_tbl tbody td {
	padding: 20px;
	vertical-align:middle;
	border:none;
	border-bottom: 2px solid #333;
}
/*
.charge_tbl tbody td {
	border-left: 2px solid #333;
}
*/

.charge_tbl tbody tr:last-child th,
.charge_tbl tbody tr:last-child td {
	border-bottom: none;
}

/*-------------------------------------------
料金テーブル中身
-------------------------------------------*/
/*料金ロゴ*/
.charge_logo {
	margin:10px auto 30px;
}
.charge_logo img {
	display:block;
	margin:0 auto;
	max-height:50px;
	width:auto;
	max-width:100%;
}

/* 料金カラム */
.charge_price_wrap{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap:10px 0;
}
.charge_price_wrap > li{
	width:calc(100% / 3);
	border-right:1px solid #333;
}
.charge_price_wrap > li:last-child{
	border-right:none;
}

@media screen and (max-width: 480px) {
	.charge_price_wrap > li{
		width:100%;
		padding-bottom:10px;
		border-right:none;
		border-bottom:1px solid #333;
	}
	.charge_price_wrap > li:last-child{
		padding-bottom:0;
		border-right:none;
		border-bottom:none;
	}
}

.charge_giga{
	font-size:20px;
	font-weight:bold;
	line-height:1.4;
	text-align:center;
}
.charge_fee{
	font-size:35px;
	font-weight:bold;
	line-height:1.2;
	text-align:center;
}
.charge_yen{
	font-size:18px;
}
.charge_tax{
	font-size:16px;
	line-height:1.4;
	text-align:center;
}


/* 料金割引内訳 */
.charge_discount_wrap{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap:10px 0;
	padding:10px;
	background:#EEE;
	border-radius:10px;
}
.charge_discount_name{
	width:60%;
	color:#C03;
	font-size:20px;
	font-weight:bold;
	line-height:1.3;
	text-align:center;
}
.charge_discount_fee{
	width:40%;
	font-size:24px;
	font-weight:bold;
	line-height:1.3;
	text-align:center;
}

@media screen and (max-width: 480px) {
	.charge_discount_name,
	.charge_discount_fee{
		width:100%;
	}
}

.charge_discount_yen{
	font-size:18px;
}

.charge_discount_name sup,
.charge_discount_fee sup{
	font-size:12px;
	font-weight:normal;
}
.charge_discount_name .brackets,
.charge_discount_fee .brackets{
	font-size:16px;
	font-weight:normal;
}
.charge_discount_plus{
	font-size:40px;
	font-weight:bold;
	line-height:1;
	text-align:center;
}


/*-------------------------------------------
特典
-------------------------------------------*/
.special_outer_wrap{
	width:100%;
	padding:30px;
	border-radius:15px;
	background-color:#FAE6EA;/* ピンク */
	margin:50px 0 0;
}
.special_outer_ttl{
	font-size:24px;
	font-weight:bold;
	line-height:1.3;
	text-align:center;
	margin:0 0 30px;
}

.special_inner_2col_wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:15px;
	margin-top:15px;
}

.special_inner_pic_wrap{
	width: calc((100% - 15px) / 2);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding:0 15px;
	border-radius:10px;
	background-color:#FFF;
}
@media screen and (max-width: 768px) {
	.special_inner_pic_wrap{
		width: 100%;
	}
}
.special_inner_pic{
	width:120px;
	align-self: flex-end;/*人物イラストは下余白ナシにするため*/
	order: 1;
}
.special_inner_pic img{
	max-width:100%;
	display:block;
	margin:0 auto;
}
.special_inner_pic_txt{
	width:calc(100% - 120px - 15px);
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	margin:10px 0;
	order: 2;
}
.special_inner_pic_txt strong{
	color: #C03;
	font-size: 22px;
	font-weight: bold;
}
.special_inner_pic_txt sup{
	font-size:12px;
	font-weight:normal;
}
.special_inner_pic_more{
	font-size:12px;
	font-weight:normal;
	line-height:1.5;
	text-align:right;
	margin:5px 0 0;
}
.special_inner_pic_more strong{
	font-size:12px;
}
.special_inner_pic_note{
	padding-left: 1.2em;
	text-indent: -1.2em;
	font-size:12px;
	font-weight:normal;
	line-height:1.5;
	margin:5px 0 0;
}

@media screen and (max-width: 480px) {
	.special_inner_pic,
	.special_inner_pic_txt{
		width:100%;
		text-align:center;
	}
	.special_inner_pic{
		order: 2;
	}
	.special_inner_pic_txt{
		order: 1;
	}
}

/*赤色カッコ書き*/
.special_outer_wrap .brackets{
	color:#C03;
	font-size: 16px;
	font-weight: normal;
}

/*特典が1つしかない場合（PC表示のみ、SPは他と同）*/
@media screen and (min-width: 769px) {
	.special_outer_wrap.single_col {
		width: 50% !important;
		margin: 50px auto 0 !important;
	}
	.special_outer_wrap.single_col .special_inner_pic_wrap {
		width: 100% !important;
	}
}

/*-------------------------------------------
注釈
-------------------------------------------*/
/* ※と番号 */
ol.list-notes{
	margin-left: 2.6em;
	padding: 0;
	list-style-type: decimal;
	font-size:12px;
	line-height:1.5;
}
ol.list-notes li {
	position: relative;
}
ol.list-notes li:before {
	content: "\203b";
	position: absolute;
	left: -2.6em;/* 番号2桁を想定 */
}

/* ※のみ */
ul.list-notes{
	margin-left: 1em;
	padding: 0;
	list-style-type: none;
	font-size:12px;
	line-height:1.5;
}
ul.list-notes li {
	position: relative;
}
ul.list-notes li:before {
	content: "\203b";
	position: absolute;
	left: -1em;
}

/*注釈グレー背景*/
.charge_notes_wrap{
	padding:10px;
	margin-top:20px;
	background-color:#EEE;
}


/*-------------------------------------------
赤ボタン
-------------------------------------------*/
.btn_wrap{
	width:100%;
	max-width:420px;
	margin:50px auto;
}

.red_btn {
	display:inline-block;
	position: relative;
	transition:0.3s;
	width:100%;
	color: #FFF !important;
	font-size:20px;
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	background: #C03;
	border-radius: .5em;
	border: 2px solid #000 !important;
	padding: 0.8em 2.5em 0.8em 1.5em;
}
.red_btn:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1em;
	margin: auto;
	width: .5em;
	height: .5em;
	border-top: .15em solid #FFF;
	border-right: .15em solid #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.red_btn:hover{
	opacity:.7;
	transition:0.3s;
}