@charset "utf-8";


.logo {
/*	width : 100%;*/
}

.container {
	padding-bottom : 0;
}

.content {
	margin-left : 5px;
	margin-right : 5px;
	padding-bottom: 10px;
}

.content_detail {
	width : 100%;
	margin : 20px auto ;
}

.next_btn {
	font-size: 1.6rem;
}
.contents_in_note_area {
	width : 100%;
}


.charge_base_btn {
	min-width : 70%;
	padding : 0 20px;
	font-size: 1.6rem;
}

.complete_btn_area {
	flex-wrap : wrap;
}

.complete_btn_area a,
.complete_btn_area div,
.complete_btn_area button {
	width : 95%;
	margin : 10px;
}

.note_area {
	margin :40px auto 10px;
}


/* login */
.charge_login_message_area {
	text-align : left;
}

.content_login_area {
	padding : 10px;
	width : 98%;
}


.charge_login {
	flex-wrap : wrap;
}

.charge_login dt,.charge_login dd{
	width : 100%;
}

.logging_in_note {
	width : 98%;
}

.logging_in_note ul {
	flex-wrap : wrap;
}
.logging_in_note li {
	width : 100%;
	margin : 5px 0;
	padding : 5px;
	display : flex;
	justify-content : flex-start;
	align-items : center;
}
.logging_in_note li img {
	width : 15%;
	display : inline-block;
	margin : 0 1em 0 0.5em ;
}


/* info */


.charge_prev_btn_area {
	display : flex;
	flex-wrap : wrap;
}

.charge_prev_btn_area .prev_link{
	width : 100%;
}
.charge_prev_btn_area .current_date {
	width : 100%;
	font-size : 1.6rem;
	margin-top : 10px;
}



.today_capacity_info ,
.order_info_area{
	flex-wrap : wrap;
}

.order_info_area > p{
	width : 100%;
}

.today_date,
.today_text,
.today_capacity {
	width : 100%;
}
.today_text {
	font-size : 1.6rem;
	padding : 10px;
}

.today_capacity {
	line-height : 1.3;
}

.capacity_detail {
	flex-wrap : wrap;
	padding : 0;
	height: auto;
	margin-bottom : 10px;
}
.capacity_detail > div {
	width : 100%;
}
.capacity_detail > div.charge_btn_area {
	width : 95%;
	margin : 10px auto;
}
.capacity_detail .note {
	width : 95%;
	margin : 10px auto;
}


.capacity_detail_text_in {
	font-size : 3.2rem;
	text-align : center;
	line-height : 1.3;
	padding : 10px;
}

.basic_capacity,
.add_capacity {
	position : relative;
	display : flex;
	padding : 10px;
	align-items: flex-start;
	flex-wrap : wrap;
}

.basic_capacity {
	top : auto;
	right : auto;
}
.capacity_active {
	top : 0;
}
.capacity_active .c_title {
	font-size: 2.0rem;
}

.c_contents_wrap {
	display : flex;
}

.c_contents {
}

.c_contents_in {
	padding-top : 20px;
	width : 70%;
	order : 1;
}

.c_title {
	font-size : 2.0rem;
	padding : 1px;
}
 .c_note {
	font-size : 1.4rem;
}
.c_capacity span {
	font-size : 3.0rem;
}

/*
.column_graph {
	margin : 10px;
	width : 30%;
	height : 100px;
	order : 2;
}
*/

.column_graph {
	margin : 10px;
	order : 2;
	width : 55%;
	transform: scale(0.7);
}

.capacity_active {
	height : auto;
}

.capacity_active .active_sp_icon {
	top : auto;
	bottom : 20px;
	width : 50px;
}

.append_data_list li label {
	display : block;
	width : 100%;
}

.append_data_list li label > div.add_price {
	text-align : right;
}


.design_check:after {
	background : #fff;
	top : calc(50% - 12px);
}




.remain_capacity {
	position : relative;
	width: 100%;
	margin : 10px 0 0 0 ;
}


.depart_before {
	width : 100%;
	padding : 10px;
	font-size : 1.6rem;
	
}


.order_list_area table {
	width : 100%;
}

.order_list_area th,
.order_list_area  td {
	display : block;
	padding : 10px;
	font-size : 1.4rem;
}

.performance_list_area ,
.purchase_list_area{
	width : 100%;
	font-size: 1.4rem;
}

.purchase_list_area li {
	flex-wrap: wrap;
}
.purchase_price {
	order: 4;
	width : 70%;
	margin-top : 10px;
}
.purchase_capacity {
	order: 3;
	width : 30%;
	margin-top : 10px;
}
.purchase_status  {
	order: 2;
	font-size : 1.0rem;
}
.purchease_date {
	order: 1;
}


.purchase_list_area .purchease_date {
	width : 75%;
}

.coupon_data_list {
	flex-wrap : wrap;
}

.coupon_data_list li {
	width : 100%;
	max-width : 100%;
	margin : 10px 0;
}
.append_data_list {
	margin : 5px 0;
}

.append_data_list li {
	width : 100%;
	margin : 5px 0;
}

.coupon_check:after {
	background : #fff;
	top : 10px;
	opacity : 1;
}

.coupon_check span.coupon_date {
	font-size : 1.2rem;
	font-weight : 700;
}


.charge_info_area {
	font-size : 1.4rem;
}
.charge_info_area > div {
	width : 50%;
}

.charge_info_area  dt.title {
	width : 100%;
	line-height : 1.7;
	font-weight : 700;
	margin-top : 5px;
}
.charge_info_area dd.detail {
	width : 100%;
	line-height : 1.7;
}

.addition_capacity_calc_area .data_capacity p {
	
}

.term_check .required_mark {
	margin-top : 0;
}


.charge_order_btn {
	width : 95%;
}

.guide_bnr_area {
	margin-bottom : 40px;
}


.guide_bnr_area .bnr {
	width: 100%;
	margin: 0;
	padding: 10px;
	font-size: 2rem;
	text-align: center;
}
.guide_bnr_area .bnr .text {
	text-align : center;
	width : 45vw;
}

.guide_bnr_area .bnr .img {
	text-align : right;
}

.guide_bnr_area .bnr .img img {
	width : 40vw;
}


/* guide */
.contrast_list {
	display: block;
	margin-bottom: 20px;
}
.contrast_list > li {
	width: 100%;
}
.contrast_list > li + li {
	margin-top: 20px;
}
.contrast_list > li .img {
	display: block;
	height: auto;
	padding: 10px;
	text-align: center;
}
.dc_inner .sub_inner {
	margin: 0;
}
.guide_caution_block {
	display: block;
	padding: 16px 10px;
}
.guide_caution_block .text_box {
	margin-right: 0;
}
.guide_caution_block .text_box .title {
	font-size: 1.6rem;
}
.guide_caution_block .plandate_box {
	max-width: 260px;
	margin: 10px auto 0;
	padding: 10px;
}
.price_plan_table {
}
.price_plan_table th,
.price_plan_table td {
	padding: 4px;
	font-size: 1.2rem;
}
.price_plan_table td.capacity {
	font-size: 1.2rem;
}
.carryover_block {
	padding: 10px;
}
.coupon_block {
	padding: 20px;
}
.modal_carryover_area > .inner {
	display: block;
}


.modal_carryover_area .img_block {
	padding: 0;
	text-align : center;
}
.modal_carryover_area .img_block img{
	width: 150px;
}


.unusable_area {
	display: flex;
	flex-wrap: wrap-reverse;
	align-items: baseline;
	justify-content: space-between;
}

.caution_block .-col.-txt, .caution_block .-col.-txt p {
	font-size: 1.2rem;
	line-height: 1.5em;
}

.img_block_exp {
	text-align: center;
}
.unusable_list {
	order : 1;
}

.img_block {
	order : 2;
	width : 100%;
}



/* common */
.dc_main_title .-inner {
	width: 100%;
	height: auto;
	padding: 4vw 0;
}
.dc_main_title .-title {
	border: none;
	padding: 0;
}
.dc_main_title .-main {
	font-size: 2rem;
}
.dc_separation .-area + .-area {
	margin-top: 40px;
}
.dc_centering_title {
	font-size: 1.6rem;
	padding: 2.6vw 0;
}
.dc_sideline_title {
	font-size: 1.6rem;
	padding-left: 2vw;
	margin-bottom: 4vw;
}
.dc_inner {
	padding: 0 3.125%;
}

/* -------------------------------------
[WSYS-6116] デイパスチャージ修正依頼　20190906　k.kitada
/*----------------------------------------*/

.guide_page .icon_title {
	font-size: 2.2rem;
	margin: 15 0 17px;
}

.guide_page .icon_title i {
	font-size: 2.2rem;
}

.dc_main_title .-title {
	flex-direction: column-reverse;
	padding: 0 3.5vw;
}

.dc_main_title .-title .fl_items,
.charge_guide .guide_caution_block .fl_items {
	width: auto;
}

.dc_main_title .-title .text {
	margin: 10px 0 0;
	font-size: 1.6rem;
	text-align: center;
}

.charge_guide .dc_inner {
	padding: 0 3.5vw;
	font-size: 1.2rem;
}

.charge_guide .dc_inner.country {
	padding: 0 3.5vw;
}

.charge_guide .guide_caution_block {
	padding: 4vw;
}

.charge_guide .guide_caution_block .text_box .title {
	font-size: 1.2rem;
}

.charge_guide .guide_caution_block {
	font-size: 1.1rem;
}

.country .layout-content_inner .forsp.module-inner,
.country .layout-content_inner .sp.module-inner{
	padding: 0 0 20px;
}

.modal_carryover_area .coupon_block{
	padding: 10px;
}

.modal_carryover_area .img_block{
	width:50%;
	padding: 3%;
	box-sizing: border-box;
}

/* -------------------------------------
アコーディオン基本
---------------------------------------- */
.module-accordion .-accordion_btn {
	border: 2px solid #efefef;
	border-radius: 6px;
	box-shadow: 1px 1px 1px 0.5px rgba(180, 180, 180, 0.6);
	cursor: pointer;
	position: relative;
	font-size: 2rem;
	font-weight: 700;
	overflow: hidden;
	align-items: center;
	display: table;
	width: 100%;
}
.module-accordion .-accordion_btn .-txt {
	padding: 10px 70px 10px 20px;
	min-height: 70px;
	height: 70px;
	display: table-cell;
	vertical-align: middle;
}

.module-accordion .-accordion_btn .-txt:after {
	content: "\f0d7";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #ffffff;
	width: 65px;
	background: #008ae1;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	border-radius: 0 6px 6px 0;
}
.module-accordion .-accordion_btn .-txt:after{
	width: 14%;
	font-size: 2rem;
}

.module-accordion .-accordion_inner {
	padding: 30px 10px 0;
}

.module-accordion .-accordion_btn{
	font-size: 1.4rem;
}
.module-accordion .-accordion_btn .-txt {
	padding: 2vw;
	padding-right: 16%;
	height: 3em;
}

.module-accordion .-accordion_inner {
	padding: 4vw 2vw 0;
}

.module-border_box {
    padding: 4vw;
    background: #fff;
    text-align: left;
}

.module-indent_list {
    margin-left: 1em;
}
.module-indent_list li, .module-indent_list .-item {
    text-indent: -1em;
    font-size: 1.2rem;
}

.caution_block .-col.-txt{
	width: 100%;
	text-align: left;
}
.caution_block .-col.-img{
	width: 100%;
	text-align: center;
}

.unusable_list{
	width: 100%;
}