@charset "utf-8";


/***************************************** fixed *****************************************/

.global-navigtion-fixed {
	position: fixed;
	z-index: 1000;
	top: 0;
}
.payment-select-box-fixed {
	position: fixed;
	top: 58px;
	z-index: 1000;
	width: 100%;
	background-color: #eef1f4;
	border-bottom: 1px solid #DFE4E9;
}
/* 20211105 month Fixed */
.select-month-arrow-L, 
.select-month-arrow-L-off, 
.select-month-arrow-L-20over, 
.select-month-arrow-L-20over-off {
	display: inline-block;
	content: "";
	width: 28px;
	height: 28px;
	background-image: url(../images_20m4/common/btn/btn_arrow_left@2x.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: fixed;
	z-index: 1000;
	top: 50%;
	left: 8px;
	margin-top: 52px;
}
.select-month-arrow-L-off, 
.select-month-arrow-L-20over-off {
	background-image: url(../images_20m4/common/btn/btn_arrow_left_off@2x.png);
}
.select-month-arrow-R, 
.select-month-arrow-R-off, 
.select-month-arrow-R-20over, 
.select-month-arrow-R-20over-off {
	display: inline-block;
	content: "";
	width: 28px;
	height: 28px;
	background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: fixed;
	z-index: 1000;
	top: 50%;
	right: 8px;
	margin-top: 52px;
}
.select-month-arrow-R-off, 
.select-month-arrow-R-20over-off {
	background-image: url(../images_20m4/common/btn/btn_arrow_right_off@2x.png);
}
.select-month-arrow-R-20over, 
.select-month-arrow-R-20over-off, 
.select-month-arrow-L-20over, 
.select-month-arrow-L-20over-off {
	margin-top: 84px;
}

/***************************************** ご利用料金エリア *****************************************/
/***************************************** タイトルエリア *****************************************/

.payment-area {
padding: 32px 0 40px;
}
.title-area-text {
font-size: 16px;
color: #1A1C1E;
letter-spacing: 0;
text-align: right;
font-weight: bold;
}

.title-area-number {
position: relative;
height: 100%;
padding: 12px 10px 12px 16px;
border-radius: 24px;
background-color: #ffffff;
box-shadow: 0 0 4px 0 rgba(0,0,0,0.08);
margin-left: 16px;
}

.title-area-number::after {
content: '';
display: inline-block;
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
background-image: url(../images_20m4/common/btn/btn_pulldown_down@2x.png);
}

.title-area-number-link {
font-size: 16px;
line-height: 24px;
margin-right: 12px;
font-weight: bold;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
}

.title-area-month {
position: relative;
height: 100%;
padding: 12px 10px 12px 16px;
border-radius: 24px;
background-color: #ffffff;
box-shadow: 0 0 4px 0 rgba(0,0,0,0.08);
margin-left: 16px;
white-space: nowrap;
}

.title-area-month::after {
content: '';
display: inline-block;
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
background-image: url(../images_20m4/common/btn/btn_pulldown_down@2x.png);
}

.title-area-month-link {
font-size: 16px;
line-height: 24px;
margin-right: 12px;
font-weight: bold;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
}

.title-area-button-total {
	font-size: 16px;
	color: #31353A!important;
	letter-spacing: 0;
	text-align: center;
	background: #FFE26E;
	border: 4px solid #FFFFFF;
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.08);
	border-radius: 24px;
	font-weight: bold;
	padding: 8px 14px;
	white-space: nowrap;
	height: 48px;
	width: 240px;
	margin: 8px auto 0;
	display: block;
}
.title-area-button-total:hover, 
.title-area-payment-21kaisen-btn:hover {
background: #FFF4A2;
}
.title-area.payment-21kaisen {
	margin: 0 16px;
}
.title-area-payment-21kaisen-btn-wrap {
	display: -webkit-box!important;
	display: -ms-flexbox!important;
	display: flex!important;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	margin: 16px 0;
}
.title-area-payment-21kaisen-btn {
	background-color: #FFE26E;
	font-size: 12px;
	text-align: center;
	line-height: 14px;
	border: 4px solid #FFFFFF;
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.08);
	border-radius: 24px;
	width: 110px;
	display: block;
	font-weight: bold;
	height: 48px;
	padding: 6px 0;
	margin-right: 12px;
}
.title-area-payment-21kaisen-btn:last-child {
	margin-right: 0;
}
.payment-line-selector {
	width: 100%;
	margin-top: 16px;
}
.payment-line-selector .title-areaR.mydcm_payment_usual {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
}
/* 20211105 Fixed */
.btn-20over-wrap {
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
}


/***************************************** pulldown *****************************************/

.pulldown {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 48px;
	padding: 12px 43px 12px 16px;
	border-radius: 24px;
	background-color: #ffffff;
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.08);
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0;
	border: none;
	background-image: url(../images_20m4/common/btn/btn_pulldown_down@2x.png);
	background-repeat: no-repeat;
	background-size: 24px 24px;
	background-position: right 10px center;
	outline: none;
	color: #1A1C1E;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	cursor: pointer;
	width: 100%;
	max-width: 237px;
	white-space: nowrap;
}
.pulldown::-ms-expand {
	display: none;
}
/* 20211105 Fixed */
.pulldown-number, 
.pulldown-month {
	max-width: none!important;
	width: 100%!important;
}
.pulldown-number-wrap {
	-ms-flex-preferred-size: 63%;
	flex-basis: 63%;
}
.pulldown-month-wrap {
	min-width: 100px;
	height: 48px;
	-ms-flex-preferred-size: 32%;
	flex-basis: 32%;
}
.pulldown-number:hover, 
.pulldown-month:hover {
	background-color: #F6F7F8;
}
.payment_selecter_Fixed {
	position: fixed;
    background-color: #eef1f4;
	height: 80px;
    z-index: 1000;
    top: 57px;
    left: 0;
	padding: 16px;
	display: flex!important;
	width: 100%!important;
}
.title-areaR.payment-20over.payment_selecter_Fixed {
	height: 136px;
}
.payment-20over-wrap {
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
	margin: 16px 0 32px;
}
.title-areaR.payment-20over {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/***************************************** グラフエリア *****************************************/

.graph-box {
	padding: 0!important;
}
.payment-graph {
	padding: 25px 16px 16px;
	text-align: center;
}

.payment-select {
	font-size: 24px;
	color: #1A1C1E;
	letter-spacing: 0;
	text-align: center;
	line-height: 36px;
	font-weight: bold;
	margin: 16px auto;
	width: 200px;
	position: relative;
}

.payment-select::before {
content: "";
width: 36px;
height: 36px;
background: #FFFFFF url(../images_20m4/common/btn/btn_arrow_left@2x.png) no-repeat center center /24px 24px ;
border-radius: 24px;
position: absolute;
top: 50%;
left: 0;
box-shadow: 0 0 4px 0 rgba(0,0,0,0.08);
cursor: pointer;
margin-top: -18px;
}

.payment-select::after {
content: "";
width: 36px;
height: 36px;
background: #FFFFFF url(../images_20m4/common/btn/btn_arrow_right_off@2x.png) no-repeat center center /24px 24px ;
border-radius: 24px;
position: absolute;
top: 50%;
right: 0;
box-shadow: 0 0 4px 0 rgba(0,0,0,0.08);
cursor: pointer;
margin-top: -18px;
}

.payment-select-month {
font-size: 14px;
color: #1A1C1E;
letter-spacing: 0;
line-height: 16px;
}

.payment-select-txt-small {
    display: block;
    font-size: 14px;
    color: #1A1C1E;
    letter-spacing: 0;
    text-align: center;
    line-height: 16px;
    font-weight: normal;
}

/***************************************** 内訳エリア *****************************************/

.total-box {
margin-bottom: 16px;
}

.payment-box-wrap {
margin-bottom: 8px;
padding: 24px 16px 8px;
}

.payment-box {
margin-bottom: 8px;
}

.payment-box-title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-bottom: 2px #E1E5EA solid;
	padding-bottom: 13px;
}

.payment-box-title-text, 
.payment-box-title-line-text {
font-size: 18px;
color: #1A1C1E;
letter-spacing: 0;
margin-right: 10px;
font-weight: bold;
}
.payment-box-title-line-text {
margin-right: 0;
}

.payment-box-title-text-span {
	font-size: 14px;
	font-weight: normal;
}

.payment-box-title-tag, 
.payment-box-title-kakutei-tag {
	background: #8D959F;
	border-radius: 4px;
	font-size: 14px;
	color: #FFFFFF;
	letter-spacing: 0;
	text-align: center;
	line-height: 1;
	padding: 6px;
}
.payment-box-title-kakutei-tag {
	background-color: #00B0F3;
}
.payment-info-box-wrap {
	margin-bottom: 40px;
}
.payment-info-inner dd {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.payment-info-inner dd.payment-info-dd-max {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.payment-info-inner dd.payment-info-dd-max div {
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
}
.payment-info-inner dd .payment-info-dd-inner-l {
	margin-right: 16px;
	-webkit-box-flex: none;
	-ms-flex: none;
	flex: none;
}
.payment-total-large {
	font-size: 28px;
	color: #1A1C1E;
	letter-spacing: -1px;
	text-align: right;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	font-weight: bold;
	line-height: 1;
}

.payment-total-large-yen {
font-size: 14px;
letter-spacing: 0;
margin-left: 2px;
}

.payment-box-inner {
margin-bottom: 16px;
}

.payment-box-column {
padding: 4px 0 5px 0;
border-bottom: 1px #DFE4E9 solid;
}

.payment-box-column-inner::before {
content: "";
width: 4px;
height: 100%;
border-radius: 2px;
position: absolute;
top: 0;
left: 0;
}

.box-column-blue::before {background-color: #00B0F3;}
.box-column-yellow::before {background-color: #FFCC00;}
.box-column-red::before {background-color: #EF4050;}
.box-column-gray::before {background-color: #8D959F;}
.box-column-purple::before {background-color: #DB6AA4;}
.box-column-green::before {background-color: #13AE67;}

.payment-box-column-inner {
position: relative;
padding: 8px 0;
line-height: 20px;
}

.payment-box-column-data {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
	padding-left: 10px;
}
.payment-box-column-data::before {
content: "内";
color: #8D959F;
letter-spacing: 0;
text-align: center;
font-weight: bold;
margin-right: 8px;
}

.payment-box-text {
font-size: 14px;
color: #1A1C1E;
margin-right: 8px;
}

.payment-total {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	text-align: right;
	font-size: 18px;
	color: #1A1C1E;
	letter-spacing: -0.45px;
	white-space: nowrap;
}

.payment-total-yen {
font-size: 12px;
letter-spacing: 0;
margin-left: 2px;
}

.payment-items-boxL {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	max-width: 200px;
	width: 100%;
}

.payment-total-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

.payment-box-column-txt, 
.payment-box-column-caution {
font-size: 12px;
color: #4A4F55;
letter-spacing: 0;
text-align: right;
margin: 2px 0 0 8px;
line-height: 18px;
}

.payment-box-column-caution::before {
content: "\203b";
}

.caution-color-gray {
color: #8D959F!important;
}

.payment-items-toggle {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	text-align: right;
	position: relative;
	cursor: pointer;
}

.payment-items-toggle-text {
font-size: 14px;
color: #1A1C1E;
letter-spacing: 0;
text-align: right;
line-height: 16px;
font-weight: bold;
padding-right: 32px;
}

.payment-items-toggle::after {
content: '';
display: inline-block;
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
background-image: url(../images_20m4/common/btn/btn_minus@2x.png);
position: absolute;
top: 50%;
right: 0;
margin-top: -12px;
}

.payment-items-toggle-close::after {
background-image: url(../images_20m4/common/btn/btn_plus@2x.png);
}

/***************************************** 回線別料金エリア *****************************************/

.payment-items-toggle-box .payment-items-box{
padding-right: 0!important;
padding-left: 0!important;
}

.payment-items-toggle-box .payment-items-box-inner{
align-items: center;
}

.payment-items-btn {
font-size: 12px;
color: #31353A;
letter-spacing: 0;
text-align: center;
line-height: 14px;
background: #FFE26E;
border-radius: 24px;
padding: 10px;
font-weight: bold;
white-space: nowrap;
}
.payment-items-btn:hover {
background: #FFF4A2;
}
.payment-box-bar {
	max-width: 55px;
	width: 100%;
}

.payment-items-toggle-box .payment-box-text-small {
font-size: 12px;
color: #1A1C1E;
letter-spacing: -0.38px;
}

.payment-items-toggle-box .payment-total{
margin-right: 9px;
}

.payment-box-number{
width: 144px;
margin-right: 2px;
font-size: 16px;
color: #1A1C1E;
letter-spacing: -0.5px;
font-weight: bold;
}

.payment-items-toggle-box .payment-items-box:last-child {
border-bottom: 1px solid #DFE4E9;
}

/************************************************ 料金シミュレーション ************************************************/

.payment-simulation-area {
padding: 6px;
margin-bottom: 16px
}

/************************************************ 料金内訳 ************************************************/

.payment-box-term {
font-size: 16px;
color: #222222;
letter-spacing: 0;
text-align: right;
font-weight: bold;
line-height: 1;
background: #EEF1F4;
border-radius: 15px;
padding: 8px 10px;
}

.payment-flex-grow {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

.payment-tag-box {
margin: 16px 0 8px 0;
text-align: left;
}

.payment-tag-skyblue {
font-size: 14px;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
line-height: 16px;
font-weight: bold;
background: #00B0F3;
border-radius: 4px;
padding: 6px;
display: inline-block;
margin: 0 8px 8px 0;
}

.payment-box-skyblue {
background-color: #CCEFFC;
padding: 16px;
border-radius: 6px;
font-size: 12px;
color: #222222;
letter-spacing: 0;
margin-bottom: 24px;
}

.payment-items-wrapper{
margin-bottom: 17px;
}


.payment-items {
border-bottom: 1px solid #DFE4E9;
}

.payment-items-title {
background: #EEF1F4;
border-radius: 6px;
padding: 4px 0 4px 4px;
}

.payment-items-title-inner {
	position: relative;
	padding: 8px 16px 8px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	line-height: 22px;
}

.payment-items-title-inner::before {
content: "";
width: 4px;
height: 100%;
border-radius: 2px;
position: absolute;
top: 0;
left: 0;
}

.payment-items-title-text {
padding-left: 12px;
font-size: 16px;
color: #1A1C1E;
letter-spacing: 0;
font-weight: bold;
}

.payment-items-title-total {
	font-size: 18px;
	color: #1A1C1E;
	letter-spacing: -0.45px;
	text-align: right;
	white-space: nowrap;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	font-weight: bold;
}

.payment-items-title-total-yen {
font-size: 12px;
color: #1A1C1E;
letter-spacing: 0;
margin-left: 2px;
}

.payment-items-box {
padding: 12px 16px;
border-bottom: 1px solid #DFE4E9;
}


.payment-items-total-box {
	padding: 16px 16px;
}

.payment-items-box:last-child {
border-bottom: none;
}

.payment-items-box-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
	line-height: 20px;
}
.payment-items-box-sub-inner {
	margin-top: 4px;
}
.payment-box-text-small {
font-size: 12px;
color: #222222;
letter-spacing: 0;
line-height: 16px;
display: block;
	margin-top: 2px;
}

.payment-box-text-small-gray {
font-size: 12px;
color: #8D959F;
letter-spacing: 0;
line-height: 18px;
margin-top: 4px;
}

.payment-box-text-caution {
font-size: 12px;
color: #31353A;
letter-spacing: 0;
position: relative;
padding-left: 14px;
}

.payment-box-text-caution::before {
content: "\203b";
position: absolute;
top: 0;
left: 0;
}

.payment-items-box-description {
padding: 4px 16px 4px 0;
border-bottom: 1px #DFE4E9 solid;
margin-left: 24px;
}

.payment-items-box-description-inner {
position: relative;
padding: 8px 0;
line-height: 20px;
	
}

.payment-items-box-description-inner::before {
content: "";
width: 2px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #EEF1F4;
border-radius: 1px;
}

.payment-items-box-description:last-child {
border-bottom:none;
}

.payment-total-small {
font-size: 16px;
color: #4A4F55;
letter-spacing: -0.4px;
text-align: right;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
white-space: nowrap;
}

.payment-sub-total-minus {
color: #00B0F3;
}

.payment-total-yen-small {
font-size: 10px;
letter-spacing: 0;
text-align: center;
margin-left: 2px;
}

.payment-items-box-description-data {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 16px;
}

.payment-items-box-description-data2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
.payment-items-box-description-data3 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}

.payment-items-box-text {
font-size: 14px;
color: #1A1C1E;
letter-spacing: 0;
margin-right: 8px;
}

.payment-items-box-subtext {
font-size: 12px;
color: #222222;
letter-spacing: 0;
}

.payment-items-box-subtext-gray {
color: #8D959F;
margin-top: 6px;
}

/*********************************** ボタン ************************************/

.payment-button {
position: relative;
padding: 12px 40px 12px 16px;
width: 224px;
margin-top: 12px;
}

.payment-button::after {
top: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 0;
right: 10px;
background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png);
}


/***********************************************************************/

.payment-noboder {
border-bottom: none;
}

.payment-border-bold {
padding-bottom: 28px;
border-bottom: 2px solid #DFE4E9;
}

.payment-total-area {
font-size: 16px;
letter-spacing: 0;
font-weight: bold;
}

.payment-total-all {
font-size: 22px;
color: #1A1C1E;
letter-spacing: -0.75px;
font-weight: bold;
}

/****************************** お知らせエリア ******************************/

.info-area {
padding: 0;
overflow: hidden;
}
.info-area-list {
position: relative;
padding: 16px 44px 16px 16px;
line-height: 18px;
}
.info-area-list-box{
border-bottom: 1px solid #DFE4E9;
}
.info-area-list-box:last-child {
border-bottom:none;
}
.info-area-list-box:hover{
background: #F6F7F8;
}
.info-area-list::after {
top: 50%;
right: 10px;
width: 24px;
height: 24px;
margin-top: -12px;
content: '';
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
vertical-align: middle;
}

.info-area-bk-arrow::after {background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png);}
.info-area-bk-blank::after {background-image: url(../images_20m4/common/icons/icn_blank.png);}

.info-area-more-txt {
font-size: 16px;
color: #31353A;
font-weight: bold;
	line-height: 18px;
}
.info-area-more-subtxt {
font-size: 12px;
color: #1A1C1E;
font-weight:normal;
}

.info-area-maintenance, 
.info-area-more-info {
display: block;
margin: 0 auto;
position: relative;
font-size: 14px;
padding: 10px 42px 9px 14px;
border: 1px solid #DFE4E9;
width: 214px;
border-radius: 24px;
font-weight: bold;
}
.info-area-maintenance {
padding: 9px 0px 10px 65px;
margin: 0 auto 16px auto;
}
.info-area-more-info {
margin: 24px auto 16px;
}
.info-area-more-info::after {
top: 8px;
right: 10px;
width: 24px;
height: 24px;
background-image: url(../images_20m4/common/icons/icn_arrow_textlink_right.png);
}
.info-area-maintenance::before {
top: 50%;
left: 40px;
width: 16px;
height: 16px;
background-image: url(../images_20m4/common/icons/icn_maintenance.png);
margin-top: -8px;
}

/****************************** 関連メニュー tab pc ******************************/

.info-area-tabpc {
padding: 0;
overflow: hidden;
}

.info-area-tabpc-box {
font-size: 16px;
font-weight: bold;
position: relative;
border-bottom: 1px solid #DFE4E9;
display: block;
}
.info-area-tabpc-box:hover {
background: #F6F7F8;
}
.info-area-tabpc-list-box:first-child {
border-bottom: 1px solid #DFE4E9;
}

.info-area-tabpc-list-box:hover {
background: #F6F7F8;
}

.info-area-tabpc-list {
position: relative;
padding: 16px 44px 16px 16px;
	line-height: 18px;
}

.info-area-tabpc-more-txt {
font-size: 16px;
color: #31353A;
font-weight: bold;
}

.info-area-tabpc-more-subtxt {
font-size: 12px;
color: #1A1C1E;
font-weight: normal;
}

.info-area-tabpc-brdb {
border-bottom: 1px solid #DFE4E9;
}

.info-area-tabpc-brdb:last-child {
border-bottom:none;
}


/****************************** 関連メニュー ******************************/

.info-area-title {
font-size: 22px;
color: #1A1C1E;
letter-spacing: 0.46px;
margin: 40px 16px 16px 16px;
font-weight: bold;
}
.top-btn-area {
	margin: 20px 0 40px;
}

/****************************** リンクボタン ******************************/

.top-btn-area-btn {
    font-size: 14px;
    border: none;
    line-height: 20px;
    background-color: #fff;
    color: #31353A!important;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.08);
    padding: 14px 80px 14px 105px;
    margin: 0 auto;
    width: 100%;
    max-width: 263px;
    display: block;
    text-align: center;
    border-radius: 24px;
    font-weight: bold;
    position: relative;
}
.top-btn-area-btn:hover, 
.all-optout-area-white-btn:hover {
	background-color: #f6f7f8;
}
.top-btn-area-btn::before {
	top: 50%;
	left: 80px;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 0;
	background-image: url(../images_20m4/common/icons/icn_home@2x.png);
}
.payment-important-point-area {
	margin: 40px auto;
}
.all-optout-area-white-btn {
	padding: 12px 44px 12px 16px;
	margin: 32px auto 0;
	max-width: 284px;
	display: block;
	text-align: center;
	border-radius: 24px;
	font-weight: bold;
	font-size: 14px;
	position: relative;
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.12);
	background-color: #fff;
	width: 100%;
	line-height: 18px;
}
.all-optout-area-white-btn {
	max-width: 158px;
	margin: 24px auto 0;
}
.all-optout-area-white-btn::after {
	right: 10px;
	background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png);
}


/****************************** 輻輳エリア ******************************/

.all-fukuso-area-btn-box {
	margin-top: 24px;
	text-align: center;
}
.all-fukuso-area-btn {
position: relative;
padding: 11px 40px 11px 16px;
font-size: 14px;
border-radius: 24px;
display: inline-block;
line-height: 20px;
background-color: #ffffff;
box-shadow: 0 0 4px 0 rgba(0,0,0,0.08);
font-weight: bold;
}
.all-fukuso-area-btn:hover {
background-color: #F6F7F8;
}

.all-fukuso-area-btn::after {
top: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 0;
right: 10px;
background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png);
}


/****************************** SP width321～ ******************************/
@media screen and (min-width: 321px) {
.payment-tag-box {
text-align: center;
}
.payment-items-box-text {
	width: auto;
}
}
/****************************** SP ******************************/
/********** タイトルエリア **********/
@media screen and (min-width: 767px) {
	
	.title-area-sp-2column .title-area-number{
		margin-left: 0px;
	}

	.title-area-sp-2column .title-area-number::after{
		content: "";
		align-items: 1;
	}

	.title-area-sp-2column .title-areaR {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
	}

	.title-area-sp-2column .title-areaR .title-area-button-total {
		margin-left: 16px;
	}

	
}


/****************************** tablet ******************************/

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

	.payment-area {
	max-width: 960px;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	padding: 16px 0 24px;
	}

	/********** fixed **********/
	.title-area-box-fixed {
		position: fixed;
		top: 56px;
		right: 0;
		z-index: 1000;
		background-color: #eef1f4;
		width: 100%;
		padding: 16px 0;
		border-bottom: 1px solid #DFE4E9;
	}
	.title-area-box-fixed .common-title {
		font-size: 20px;
		font-weight: bold;
		padding: 0 0 12px;
	}
	.title-area-box-fixed .title-area {
		margin: 0 auto;
	}
	.title-area-box-fixed .pulldown {
		padding:  12px 46px 12px 16px;
	}


	/********** タイトルエリア **********/
	.pulldown {
		width: auto;
		margin-right: 0;
	}
	.title-area.payment-21kaisen {
		align-items: center;
		margin: 0 auto 36px;
	}
	.title-area-payment-21kaisen-btn {
		width: 100px;
	}
	.title-area-payment-21kaisen-btn-wrap.sp-only {
		width: auto;
		margin: 0;
		display: none!important;
	}
	.title-areaR-wrap.payment-21kaisen {
		display: -webkit-box!important;
		display: -ms-flexbox!important;
		display: flex!important;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.title-area-payment-21kaisen-btn-wrap {
		margin: 0;
		width: auto;
	}
	.title-areaR.payment-21kaisen {
		margin-right: 16px;
	}
	.payment-line-selector {
		width: auto;
		margin-top: 0;
		-ms-flex-preferred-size: 58%;
		flex-basis: 58%;
		margin-left: 11%;
	}
    .payment-line-selector-long {
		-ms-flex-preferred-size: 64%;
		flex-basis: 64%;
		margin-left: 5%;
    }
	.payment-line-selector .title-areaR.mydcm_payment_usual {
		margin: 0!important;
	}
	.notlogin-info-area {
		margin-top: 113px;
	}
	/* 20211105 Fixed */
	.title-areaL-payment {
		-ms-flex-preferred-size: 42%;
    	flex-basis: 42%;
	}
	.title-areaR.payment-20over {
		margin: 0!important;
	}
	.title-areaL-payment {
		-ms-flex-preferred-size: 31%;
    	flex-basis: 31%;
	}
	.pulldown-number-wrap {
		-ms-flex-preferred-size: 55%;
		flex-basis: 55%;
	}
    .payment-line-selector-long .pulldown-number-wrap {
		-ms-flex-preferred-size: 59%;
		flex-basis: 59%;
    }
	.pulldown-month-wrap {
		-ms-flex-preferred-size: 41%;
		flex-basis: 41%;
	}
    .payment-line-selector-long .pulldown-month-wrap {
		-ms-flex-preferred-size: 37%;
		flex-basis: 37%;
    }
	.payment_selecter_Fixed {
		display: none!important;
	}
	.payment-20over-wrap {
		-ms-flex-preferred-size: 69%;
		flex-basis: 69%;
		margin: 0;
	}
	.payment-20over .pulldown-number-wrap {
		-ms-flex-preferred-size: 46%;
		flex-basis: 46%;
	}
	.payment-20over .pulldown-month-wrap {
		-ms-flex-preferred-size: 28%;
		flex-basis: 28%;
	}
	.btn-20over-wrap {
		-ms-flex-preferred-size: 18%;
		flex-basis: 18%;
	}
	.btn-20over-wrap .title-area-button-total {
		font-size: 12px;
		line-height: 15px;
		margin-top: 0;
		width: 100%;
	}
	.title-area-button-total {
		padding: 6px 14px;
	}


	/***************************************** グラフエリア *****************************************/

	.payment-graph {
		padding: 32px 16px 16px;
	}

/********** common要素 **********/
.contents-wrap {
max-width: 1080px;
margin: 0 auto;
width: 100%;
}

.contents-wrap::after {
    content: "";
    clear: both;
    display: block;
}

.contents-wrapL {
    float: left;
    max-width: 357px;
    width: 48%;
}

.contents-wrapR {
float: right;
    max-width: 357px;
width: 48%;
}

/********** border **********/
.brdbno-tabpc {
border-bottom: none;
}
	
.payment-important-point-area {
	margin: 64px auto;
}

}

/****************************** PC ******************************/

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

	.payment-area {
	padding-right: 0;
	padding-left: 0;
	}
	/* 20211105 Fixed */
	.title-areaL-payment {
		-ms-flex-preferred-size: 55%;
    	flex-basis: 55%;
	}
	.payment-line-selector {
		-ms-flex-preferred-size: 45%;
    	flex-basis: 45%;
		margin-left: 13%;
	}
	.payment-line-selector-long {
		-ms-flex-preferred-size: 50%;
    	flex-basis: 50%;
		margin-left: 5%;
	}
	.title-areaL-payment {
		-ms-flex-preferred-size: 42%;
    	flex-basis: 42%;
	}
	.payment-20over-wrap {
		-ms-flex-preferred-size: 58%;
    	flex-basis: 58%;
	}
	.pulldown-number-wrap {
		-ms-flex-preferred-size: 54%;
    	flex-basis: 54%;
	}
	.payment-20over .pulldown-number-wrap {
		-ms-flex-preferred-size: 44%;
    	flex-basis: 44%;
	}
	.payment-20over .pulldown-month-wrap {
		-ms-flex-preferred-size: 32%;
    	flex-basis: 32%;
	}


	/********** 関連メニュー tab pc **********/

	.info-area-tabpc-box {
	padding: 0;
	}

	.info-area-tabpc-list-box-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

	.info-area-tabpc-list-box {
	width: 50%;
	}
	.info-area-tabpc-list-box a div {
	height: 100%;
	}
	.info-area-tabpc-list-box:first-child {
	border-bottom: none;
	}

	.info-area-tabpc-list {
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	}

	.info-area-tabpc-brdR{
	border-right: 1px solid #DFE4E9;
	}

	/********** common要素 **********/
		.contents-wrap {
			max-width: 1080px;
			margin: 0 auto;
			width: 100%;
		}

	.contents-wrap::after {
		content: "";
		clear: both;
		display: block;
	}

	.contents-wrapL {
		float: left;
		max-width: 560px;
		width: 100%;
	}

	.contents-wrapR {
	float: right;
		max-width: 360px;
		width: 100%;
	}

	.contents-wrap .common-box {
		max-width: 100%;
	}
	.title-area-payment-21kaisen-btn {
		width: 110px;
		margin-right: 16px;
	}
	
	
}

/****************************** iPhone SE ******************************/

@media screen and (max-width: 320px) {

	.payment-box-title-tag, 
	.payment-box-title-text-span {
		font-size: 12px;
	}
	.payment-box-title-text-span {
		padding: 6px 4px;
	}
	.payment-total-large {
		font-size: 24px;
	}
	.pulldown {
		max-width: 186px;
	}
	/* 20211105 Fixed */
	.pulldown-number-wrap {
		-ms-flex-preferred-size: 59%;
    	flex-basis: 59%;
	}

}