@charset "UTF-8";

/* =========================================================
	WSYS-14168 【VMDB・フロント】渡航中容量チャージLPの修正 20261006 M.Amano

	渡航中容量チャージLPの共通スタイル。
	/price/charge/（front_template）と /dc/charge/guide/（dc_charge_template）は
	読み込むCSSバンドルが別（共通なのは parts.css のみ）なので、
	両ページで使うスタイルはこのファイルに集約し、各bladeから直接linkする。
	そのため module-* / layout-* / style-* 系には依存させず charge_* だけで完結させること。
	SP分は charge_lp-case.css（読み込み条件はページ側で出し分け）。
========================================================= */

/* // MV
----------------------------------------------- */
.charge_mv {
	display: flex;
	align-items: center;
	min-height: 305px;
	padding: 20px 35px;
	background: #e0f2fe;
}
.charge_mv .-col.-txt {
	min-width: 450px;
}
.charge_mv .-col.-img {
	flex-grow: 1;
	text-align: center;
}
.charge_mv .-col.-img img {
	width: 100%;
}
.charge_mv .-sub {
	margin-bottom: 20px;
	color: #07308c;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1;
}
.charge_mv .-title {
	margin-bottom: 15px;
	color: #07308c;
	font-size: 4.2rem;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

/* // 見出し
----------------------------------------------- */
.charge_section_title {
	padding: 30px 30px 15px;
	color: #07308c;
	font-size: 2.4rem;
	font-weight: 700;
	text-align: left;
}
.charge_sideline_title {
	margin: 20px 0;
	padding: 2px 0 2px 20px;
	border-left: 2px solid #00a0e9;
	font-size: 2.0rem;
	font-weight: 700;
}

/* // 汎用
----------------------------------------------- */
/* PC/SPの出し分け。
   .pc_inline / .sp_inline は common-case.css（UA判定で読み込み）に依存していて
   メディアクエリで切り替わる他のLPスタイルと挙動がズレるため、LP専用に持つ */
.charge_pc_inline {
	display: inline;
}
.charge_sp_inline {
	display: none;
}

.charge_bold {
	font-weight: 700;
}
.charge_tac {
	text-align: center;
}
.charge_underline {
	text-decoration: underline;
}
.charge_anchor_link {
	color: #008ae1;
}
/* 共通CSSの a:hover の下線を打ち消してhover変化を無しにする */
.charge_anchor_link:hover {
	text-decoration: none;
}
.charge_title_link {
	color: inherit;
}
.charge_title_link:hover {
	text-decoration: none;
}

/* // CTAボタン
	front_template の .module-base_btn 相当を charge_lp 単体で再現したもの
----------------------------------------------- */
.charge_cta_area {
	margin-top: 30px;
	text-align: center;
}
.charge_cta_btn {
	display: inline-block;
	position: relative;
	min-width: 360px;
	padding: 0 50px;
	border: solid 1px #008ae1;
	border-radius: 50px;
	background: #008ae1;
	box-shadow: 0 3px 0 #07308c;
	color: #ffffff;
	font-size: 2rem;
	font-weight: 700;
	line-height: 70px;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
}
.charge_cta_btn:hover {
	border: solid 1px #07308c;
	background: #07308c;
	color: #ffffff;
	text-decoration: none;
	transition: all 0.3s;
}
.charge_cta_btn:after {
	content: "\f0a9";
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	font-family: "Font Awesome 5 Free";
	font-size: 2.2rem;
	font-weight: 900;
}

/* // 「使い放題ではありません」ブロック
----------------------------------------------- */
.charge_lead {
	padding: 0 30px 20px;
}
.charge_capacity_box {
	margin: 0 36px 0;
	padding: 40px;
	background: #e5f3fc;
	box-sizing: border-box;
}
.charge_capacity_title {
	margin-bottom: 15px;
	font-size: 2.4rem;
	font-weight: 700;
}
/* 下線は太字部分だけに引く（「※無制限プランを除く」には引かない） */
.charge_capacity_title_main {
	border-bottom: 1px solid #333;
}
.charge_capacity_note {
	margin-left: 5px;
	font-size: 1.2rem;
	font-weight: 400;
}
.charge_capacity_list {
	margin-bottom: 12px;
	padding-left: 1em;
	line-height: 1.8;
}
.charge_capacity_list > li {
	/* 「・」の字面ぶん左へ出して、見出しと行頭を揃える */
	text-indent: -1.4em;
}

/* // 水色帯 / 白カード
----------------------------------------------- */
.charge_band {
	padding: 40px;
	background: #e5f3fc;
	box-sizing: border-box;
}
.charge_white_box {
	padding: 20px;
	background: #fff;
}

/* // 料金表
----------------------------------------------- */
.charge_price_table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}
.charge_price_table th,
.charge_price_table td {
	padding: 10px;
	border: 2px solid #ddd;
	vertical-align: middle;
}
.charge_price_table th {
	width: 25%;
	background: #eee;
	font-weight: 700;
	text-align: center;
}
.charge_price_table th:empty {
	background: #fff;
}
.charge_price_table td {
	text-align: center;
}
.charge_price_table th.th_1_1gb {
	background: #f9962b;
	color: #fff;
}
.charge_price_table th.th_600mb {
	background: #1abec5;
	color: #fff;
}
.charge_price_table th.th_300mb {
	background: #07308c;
	color: #fff;
}
.charge_table_note {
	margin-top: 8px;
	font-size: 1.2rem;
	text-align: right;
}

/* // 繰越クーポン
----------------------------------------------- */
.charge_coupon_img img {
	width: 90%;
}
.charge_coupon_note {
	padding: 30px 35px;
	border-radius: 8px;
	background: #e5f3fc;
}
.charge_coupon_note_title {
	/* carryover_list の「・」（text-indent:-1em）と行頭を揃える */
	margin-left: -10px;
	margin-bottom: 15px;
	font-size: 2rem;
	font-weight: 700;
}
.charge_note_icon {
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	border-radius: 50%;
	background: #009fe8;
	color: #fff;
	font-size: 1.6rem;
	line-height: 22px;
	text-align: center;
	vertical-align: 2px;
}
.charge_coupon_list {
	padding-left: 1em;
	line-height: 1.6;
}
.charge_coupon_list > li {
	text-indent: -1em;
}
.charge_unusable_area {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.charge_unusable_list {
	margin-top: 1em;
	margin-left: 1em;
}

/* // STEPフロー（今回変更したぶんのみ）
----------------------------------------------- */
.charge_flow .module-flow_title .-flow .-txt {
	background-color: #ffffff;
	border-color: #ffffff;
}
/* 矢羽根の縁取り。/dc/charge/guide/ 側は既定が #e0f2fe で、STEP1を白にすると
   切れ目に見えてしまうため /price/charge/ と同じ #71c6ff に揃える */
.charge_flow .module-flow_title .-flow li:after {
	border-left-color: #71c6ff;
}
/* STEP2の左に旧STEP1色(#e0f2fe)の三角を重ねる指定が
   /dc/charge/guide/ 側にのみ存在し、STEP1を白にすると段差として見えるため消す */
.charge_flow .module-flow_title .-flow li.price_charge_flow_middle:before {
	display: none;
}