@charset "UTF-8";

@media screen and (max-width: 900px) {
header {margin-bottom: 35px;}
.btn {min-width: auto;}
.icon-arrow-right:before { display: none;}

	/*--- mypage header ---*/
	
	.hdr_content {
		text-align: right;
	}
	.hdr_content .member_id {
		display: block;
		height: 1px; /* ログアウトボタンの位置調整 */
		position: relative;
		top: 45px;
		right: 0;
		font-size: 11px;
	}
	
	/*--- footer ---*/
	
	footer {
		font-size: 8px;
		font-size: .8rem;
	}

	/*--- login ---*/
	
	.login_form {
		width: 100%;
		margin: 20px auto;
	}
	.login_form .form_hdr {
		color: #3e3a39;
		background: none;
		font-size: 15px;
		font-size: 1.5rem;
	}
	.login_form .form_body {
		border: none;
	}
	.login_form .form_body label {
		width: 100%;
	}
	.login_form .form_body input {
		width: 100%;
	}
	
	/*--- reminder ---*/
	
	select[name="year"] {
		width: 50%;
	}
	select[name="month"],
	select[name="day"] {
		width: calc(25% - 4px);
	}
	
	/*--- message ---*/

	.message_wrap {
		width: 100%;
		padding: 10px;
	}
	
	/*--- mypage top ---*/
	
	.menu_btns {
		margin: 0 auto 5%;
	}
	.menu_btns ul li {
		width: calc(100% / 2 - 20px);
		height: 130px;
		padding-top: 50px;
		margin: 10px;
		font-size: 18px;
		font-size: 1.8rem;
		height: 90px;
    padding-top: 30px;
	}
	
	/*--- mypage menu ---*/
	
	#sp_menu_btn {
		display: block;
		content: "";
		width: 35px;
		height: 25px;
		background: url(../img/sp_menu_btn.png) no-repeat;
		position: absolute;
		top: -10px;
		left: 10px;
		z-index: 1;
	}
	.overlay {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		background: #000;
		opacity: .3;
		z-index: 10;
	}
	.mypage_sidebar {
		position: fixed;
		top: 0;
		left: -200px;
		z-index: 100;
	}
	.mypage_sidebar + .mypage_wrap {
		width: 100%;
		margin: 20px 0;
		padding: 20px 10px;
	}
	.mypage_content {
		width: 100%;
		border: none;
		margin: 20px auto;
		padding: 0;
	}
	
	/*--- 1列1カラムのテーブル ---*/
	
	.mypage_content table.single_col tr th,
	.mypage_content table.single_col tr td {
		display: block;
		width: 100%;
		border-bottom: none;
	}
	.mypage_content table.single_col tr:last-child td {
		border-bottom: 1px #aaa solid;
	}
	.mypage_content table.single_col tr.none_underline + tr th {
		border: 1px #aaa solid;
	}
	
    /*--- 契約ヘッダ情報 ---*/
    .contract_header{
        margin: 0 !important;
    }
    .contract_header tr:first-child {
		display: none;
	}
	.contract_header tr td {
		display: block;
        padding: 5px 5px;
        text-align: left !important;
        width: 100% !important;
        border-collapse : collapse !important;
        border: 1px #aaa solid !important;
        border-bottom: none !important;
	}
    .contract_header tr td::before {
		display: block;
		width: 100%;
		padding: 5px 0px;
		/*margin-right: 10px;*/
		background: #eee;
		/*border-right: 1px #aaa solid;*/
    }
	.contract_header tr td:nth-child(1)::before {
		content: '契約番号';
	}
	.contract_header tr td:nth-child(2)::before {
		content: 'プラン';
	}
    .contract_header tr td:nth-child(3)::before {
		content: '端末(付属品)';
	}
	.contract_header tr td:nth-child(4)::before {
		content: 'MSN';
	}
	.contract_header tr td:last-child {
		margin-bottom: 30px !important;
        border-bottom: 1px #aaa solid !important;
	}
	.contract_header tr td a {
		color: currentColor;
	}
	.contract_header tr td a::after {
		display: inline-block;
		content: "";
		border-top: 6px transparent solid;
		border-left: 10px #3e3a39 solid;
		border-bottom: 6px transparent solid;
		margin-left: 5px;
	}
    
    /*--- 請求ヘッダ情報 ---*/
    .bill_header{
        margin: 0 !important;
    }
    .bill_header tr:first-child {
		display: none;
	}
	.bill_header tr td {
		display: block;
        padding: 5px 5px;
        text-align: left !important;
        width: 100% !important;
        border-collapse : collapse !important;
        border: 1px #aaa solid !important;
        border-bottom: none !important;
	}
    .bill_header tr td::before {
		display: block;
		width: 100%;
		padding: 5px 0px;
		/*margin-right: 10px;*/
		background: #eee;
		/*border-right: 1px #aaa solid;*/
    }
	.bill_header tr td:nth-child(1)::before {
		content: '契約番号';
	}
	.bill_header tr td:nth-child(2)::before {
		content: 'プラン';
	}
    .bill_header tr td:nth-child(3)::before {
		content: '端末(付属品)';
	}
	.bill_header tr td:nth-child(4)::before {
		content: 'MSN';
	}
    .bill_header tr td:nth-child(5)::before {
		content: 'ご請求金額';
	}
	.bill_header tr td:last-child {
		margin-bottom: 30px !important;
        border-bottom: 1px #aaa solid !important;
	}
	.bill_header tr td a {
		color: currentColor;
	}
	.bill_header tr td a::after {
		display: inline-block;
		content: "";
		border-top: 6px transparent solid;
		border-left: 10px #3e3a39 solid;
		border-bottom: 6px transparent solid;
		margin-left: 5px;
	}
    
	/*--- 契約情報 ---*/
	
	.mypage_content dl dt,
	.mypage_content dl dd {
		background: #eee;
		border-bottom: none !important;
		margin-bottom: 10px;
		width: 50%;
	}
	.mypage_content dl dt {
		border-radius: 3px 0 0 3px;
	}
	.mypage_content dl dd {
		border-radius: 0 3px 3px 0;
		text-align: right;
	}
	.mypage_content dl dd::after {
		display: inline-block;
		content: "";
		border-top: 6px transparent solid;
		border-left: 10px #3e3a39 solid;
		border-bottom: 6px transparent solid;
		margin-left: 5px;
	}
	.mypage_content dl dd a {
		color: currentColor;
	}
	
	/*--- データ通信量 ---*/
	
	.traffic table tr:first-child {
		display: none;
	}
	.traffic table tr td {
		display: block;
		border-bottom: none;
		/*padding: 0 10px 0 0;*/
        padding: 5px 5px;
        text-align: left !important;
        width: 100% !important;
	}
	.traffic table.bg_stripe td,
	.traffic table.bg_stripe tr:last-child td {
		border-top: 1px #aaa solid;
		border-bottom: none;
	}
	.traffic table.bg_stripe tr:last-child td:last-child  {
		border-bottom: 1px #aaa solid;
	}
	.traffic table.bg_stripe tr:nth-child(odd) td {
		background: none;
	}
    .traffic table tr td::before {
		display: block;
		width: 100%;
		padding: 5px 0px;
		/*margin-right: 10px;*/
		background: #eee;
		/*border-right: 1px #aaa solid;*/
    }
	.traffic table tr td:nth-child(1)::before {
		content: '契約番号';
	}
	.traffic table tr td:nth-child(2)::before {
		content: 'プラン';
	}
    .traffic table tr td:nth-child(3)::before {
		content: '端末(付属品)';
	}
    .traffic table tr td:nth-child(4)::before {
		content: 'MSN';
	}
	.traffic table tr td:nth-child(5)::before {
		content: '前月';
	}
	.traffic table tr td:nth-child(6)::before {
		content: '当月';
	}
	.traffic table tr td:last-child {
		margin-bottom: 30px;
		border-bottom: 1px #aaa solid;
	}
	.traffic table tr td a {
		color: currentColor;
	}
	.traffic table tr td a::after {
		display: inline-block;
		content: "";
		border-top: 6px transparent solid;
		border-left: 10px #3e3a39 solid;
		border-bottom: 6px transparent solid;
		margin-left: 5px;
	}

	/*--- 請求情報 ---*/
	
	.tab {
		width: 100%;
		margin: 30px auto -1px;
		font-size: 0;
	}
	.bill {
		border: 1px #aaa solid;
		margin: 0 auto 30px;
		border-top: none;
		padding: 10px;
	}
    
    .error {
        margin: 0 auto; 
        text-align: center; 
        width: 320px;
    }

    .input_creditcard_number {
		width: 50px;
	}
    .input_security_code {
		width: 50px;
	}
    .input_holder_first_name {
		width: 100px;
	}
    .input_holder_last_name {
		width: 100px;
	}
    
    .msg_center {
        width: 90%;
        margin: 0 auto;
    }

/*　Added from 22th Jan.2017 */
.NewsBlock { width: 96%; margin:5% auto 4%; background:#E7E7E7; border-radius: 5px; padding: 2% 4%; overflow: hidden;}
.NewsBlock h2 { padding: 0 0 5px; border-bottom: 3px solid #222222; color: #222222; margin-top: 0;}
.NewsBlock ul { overflow: hidden; margin-bottom: 0;}
.NewsBlock ul li{ float: left; list-style: none; border-bottom: 1px dotted #828282; margin-bottom: 10px; padding-bottom: 5px; width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.NewsBlock ul li span { padding: 2px 5px; border-radius:5px; background: #43BDF0; margin-right: 10px;}
.NewsBlock ul a { text-decoration: none; color: #232323}
.NewsBlock ul a li span{ color: #fff !important;}
.NewsBlock .ViewMore { float: right; margin: 0; padding: 5px 10px; background: #3E3E3E;}
.NewsBlock .ViewMore a {color: #fff; text-decoration: none;}
.NewsBlock .date { margin: 0; float: right; padding: 2px 5px; border-radius:5px; background: #43BDF0; margin-bottom: 10px;}
.NewsBlock .text { width: 100%; overflow: hidden;}
.AdBlock { width: 100%; text-align: center; margin:0 auto 4%; overflow: hidden;}
.AdBlock img { width: 100%; height: auto;}
.PointNumber { overflow: hidden; width: 80%; margin: 15px auto 15px; border-bottom: 3px solid #000;}
.PointNumber dt { float: left; width: 44%; margin: 0; font-size: 16px;}
.PointNumber dd { float: right; width: 50%; margin: 0; text-align: right; font-size: 16px;}
.PointNumber dd span { color: #FF4F51; font-weight: bold; font-size: 18px;}

.NumberBlock { overflow: hidden; width: 90%; margin: 15px auto 15px; border-bottom: 1px solid #000;}
.NumberBlock dt { float: left; width: 44%; margin: 0; font-size: 16px;}
.NumberBlock dd { float: right; width: 50%; margin: 0; text-align: right; font-size: 16px;}
.NumberBlock dd span { color: #FF4F51; font-weight: bold; font-size: 18px;}
.ExchangeBlock {overflow: hidden; width: 90%; margin: 15px auto 15px;background:#eee; border-radius: 10px;}
.ExchangeBlock p { text-align: center; margin-bottom: 4px;}
.ExchangeBlock .cnt { width: 80%; margin: 0 auto 1%;}
.ExchangeBlock .cnt input {width: 56%; padding: 2% 2%;}
.ExchangeBlock .cnt span { padding-left: 10px; width: 40%;}

.NoteBlock { overflow: hidden; width: 90%; margin: 15px auto 15px; border: 1px solid #C3C3C3; padding: 1% 2%;}
.NoteBlock ul{ overflow: hidden; }
.NoteBlock ul li{ float: left; padding: 0; margin: 0;font-size: 12px !important; height: auto;margin-top: -4px;}
.NoteBlock ul li dl { background: none; overflow: hidden;}
.NoteBlock ul li dl dt{ float: left; width: 5%; background: none; padding: 0}
.NoteBlock ul li dl dd{ float: right; width: 95%; background: none; text-align: left; padding: 0;}
.NoteBlock ul li dl dd::after { display: none;}
	
.AgreeBlock { overflow: hidden; width: 90%; margin: 15px auto 15px; padding: 1% 2%; font-size: 16px;}

/* 2017/6/27 堀本追加
----------------------------------- */

#SPDispNone {
	display:none;
}

.menu_btns ul li.SPDispNone {
	display:none;
}

}