@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*--- reset ---*/
ul {
	padding: 0;
}

/*--- common ---*/

* {
	font-family: 'Noto Sans Japanese', sans-serif;
	box-sizing: border-box;
}

html {
	font-size: 62.5%; /* 1rem = 10px */
	height: 100%;
	min-height: 100%;
}

body {
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.7;
	margin: 0;
	color: #3e3a39;
	
	position: relative; 
	width: 100%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	padding-bottom: 30px;
}

h1 {
	margin: 0;
	font-weight: normal;
	text-align: center;
}
h1 span {
	display: block;
	font-size: 20px;
	font-size: 2rem;
}

img {
	vertical-align: middle;
}

a { color: #0067BC}
a:hover {
	opacity: .5;
	transition: .5s;
}

input, select {border: 1px #ccc solid; /* border-radius: 5px; */ margin: 5px 0; padding: 10px 5px; font-size: 16px; font-size: 1.6rem;}

.btn { display: inline-block;border: none;border-radius: 5px;background:#cb4e4e;color: #fff;min-width: 200px; cursor: pointer; padding: 10px; margin: 15px auto; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
.btn:hover {opacity: .8;}

.btn-2g {border-radius: 40px;}
.btn-2 {background: #cb4e4e; color: #fff; box-shadow: 0 6px #ab3c3c; -webkit-transition: none; -moz-transition: none; transition: none;}

.mypage_content .backbtn {display: inline-block;border: none;border-radius: 5px;background:#cb4e4e;color: #fff;width: 50%; margin: 0 25% 0;cursor: pointer; padding: 10px;text-decoration: none; text-align: center; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
.mypage_content .backbtn:hover {opacity: .8;}

/* clear fix */
.cf:before,
.cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
	zoom: 1;
}
.left {
	float: left;
}
.right {
	float: right;
}

/*--- page top ---*/
.page_top {
	width: 45px;
	height: 45px;
	border-radius: 5px;
	background: #e73278;
	background: url(../img/page_top.png) no-repeat center center /cover;
	cursor: pointer;
	position: fixed;
	bottom: 38px;
	right: 10px;
}
.page_top:hover {
	opacity: .5;
	transition: .5s;
}

.page_home {
	width: 45px;
	height: 45px;
	border-radius: 5px;
	background: #e73278;
	background: url(../img/page_home.png) no-repeat center center /cover;
	cursor: pointer;
	position: fixed;
	bottom: 38px;
	left: 10px;
}
.page_home:hover {
	opacity: .5;
	transition: .5s;
}

/*--- header ---*/

header {background:#151515;	padding: 5px 10px;margin-bottom: 45px;overflow: hidden;}
header .Logo { width: 150px; float: left;}
header .Logo img { width: 100%; height: auto;}


/* mypage header */
.hdr_content {
	margin-top: 8px;
	font-size: 15px;
	font-size: 1.5rem;
}

/* logout button */
.hdr_content .logout_btn {
	background: #e73278;
	color: #fff;
	border-radius: 3px;
	text-decoration: none;
	margin-left: 10px;
	padding: 5px 15px;
}

/*--- footer ---*/

footer {background:#151515;	color: #fff;text-align: center;	font-size: 11px;font-size: 1.1rem;	padding: 6px 0;	position: absolute;	bottom: 0;width: 100%;}
footer.bg_gray {background: #ccc;color: #e73278;}

/*--- login ---*/

.login_form {
	width: 600px;
	margin: 100px auto;
}
.login_form .form_hdr {
	margin: 0;
	padding: 5px 0;
	border-radius: 3px 3px 0 0;
	background: #e73278;
	color: #fff;
	text-align: center;
	font-size: 16px;
	font-size: 1.6rem;
}
.login_form .form_body {
	border: 1px #ddd solid;
	border-radius: 3px;
	padding: 20px;
	text-align: center;
}
.login_form .form_hdr + .form_body {
	border-top: none;
}
.login_form .form_body label {
	display: inline-block;
	width: 100px;
	font-size: 16px;
	font-size: 1.6rem;
	text-align: left;
}
.login_form .form_body label.long {width: 100%;}
.login_form .form_body .err_msg {
	color: #f50000;
	font-size: 16px;
	font-size: 1.6rem;
}

/*--- reminder ---*/

select[name="year"] {
	width: 117px;
	margin-left: 1px;
}

/*--- message ---*/

.message_wrap {
	width: 80%;
	margin: 6% auto;
	font-size: 16px;
	font-size: 1.6rem;
	text-align: center;
}
.message_wrap dl {
	margin: 0;
}
.message_wrap dl dt,
.message_wrap dl dd {
	display: inline-block;
	width: calc(50% - 10px);
	margin: 0;
}
.message_wrap dl dt {
	text-align: right;
}
.message_wrap dl dt::after {
	content: "：";
}
.message_wrap dl dd {
	text-align: left;
}

.message_wrap .btn {
	width: 150px;
	margin-top: 50px;
	text-decoration: none;
}

/*--- mypage top ---*/

.menu_btns {
	margin: 15% auto 0;
	text-align: center;
}
.menu_btns ul {
	font-size: 0;
}
.menu_btns ul li {
	display: inline-block;
	font-size: 20px;
	font-size: 2rem;
	margin: 15px;
	vertical-align: top;
	width: calc(100% / 4 - 30px);
	height: 150px;
	padding: 55px 5px 0;
	border-radius: 3px;
	letter-spacing: 1.2px;
	transition: .5s;
	cursor: pointer;
	background: #e73278;
}
.menu_btns ul li:hover {
	opacity: .5;
}
.menu_btns ul li a {
	color: #fff;
	text-decoration: none;
}

/*--- mypage sidebar ---*/

main {
	position: relative;
	min-height: calc(100vh - 55px - 30px);
}
.mypage_sidebar {
	width: 200px;
	background: #4d4d4c;
	position: absolute;
	top: -45px;
	bottom: 0;
}
.mypage_sidebar ul {
	margin: 0;
}
.mypage_sidebar ul li {
	font-size: 16px;
	color: #fff;
	border-bottom: 1px #fff solid;
	font-weight: normal;
}
.mypage_sidebar ul li.active {
	padding: 6px;
	background: #e63c77;
}
.mypage_sidebar ul li a {
	display: block;
	padding: 6px;
	text-decoration: none;
	color: #fff;
	background: url(../img/arrow.png) no-repeat right 10px center /20px;
}

.mypage_sidebar + .mypage_wrap {
	width: calc(100% - 200px);
	margin-left: 200px;
	padding: 20px 50px;
}

.mypage_content {
	width: 100%;
	margin: 30px auto;
	/*padding: 20px;*/
	/*border: 1px #aaa solid;*/
	border-radius: 3px;
}

/*--- mypage content common ---*/

.mypage_content table {
	width: 100%;
	border-collapse: collapse;
}
.mypage_content table tr th,
.mypage_content table tr td {
	padding: 5px 10px;
	border: 1px #aaa solid;
}
.mypage_content table tr th {
	font-weight: normal;
	text-align: left;
	background: #eee;
}
.mypage_content table tr.none_underline th,
.mypage_content table tr.none_underline td {
	border-bottom: none;
}
.mypage_content table tr.none_underline + tr th,
.mypage_content table tr.none_underline + tr td {
	border-top: none;
}
.mypage_content table.bg_stripe tr:nth-child(odd) td {
	background: #f6f8f9;
}
.mypage_content table.bg_stripe td {
	border-top-style: dashed;
	border-bottom-style: dashed;
}
.mypage_content table.bg_stripe tr:last-child td {
	border-bottom-style: solid;
}

.mypage_content dl {
	margin: 0;
	font-size: 0;
	text-align: center;
}
.mypage_content dl dt,
.mypage_content dl dd {
	display: inline-block;
	font-size: 16px;
	font-size: 1.6rem;
	padding: 10px 10px;
}
.mypage_content dl dt:not(:last-of-type),
.mypage_content dl dd:not(:last-of-type) {
	border-bottom: 1px #aaa dashed;
}
.mypage_content dl dt {
	width: 50%;
	text-align: left;
}
.mypage_content dl dd {
	margin: 0;
}

/*--- データ通信量 ---*/

.traffic_date {
	margin: 0;
	font-size: 18px;
	font-size: 1.8rem;
}
.traffic_iccid {
	margin: 5px 0 10px;
	font-size: 18px;
	font-size: 1.8rem;
}

/*--- 請求情報 ---*/

.tab {
	width: 100%;
	margin: 30px auto -1px;
	font-size: 0;
}
.tab li {
	display: inline-block;
	font-size: 12px;
	/*font-size: 1.5rem;*/
	width: calc(100% / 3);
	padding: 5px 2%;
	text-align: center;
	border: 1px #aaa solid;
	border-top: 3px #aaa solid;
}
.tab li:not(:last-child) {
	border-right: none;
}
.tab li.active {
	border-top-color: #e73278;
	border-bottom: none;
}
.tab li.disabled {
	border-top-color: #ccc;
	background: #fafafa;
	color:#aaa;
}
.tab li a {
	text-decoration: none;
	display: block;
	color: currentColor;
}
.tab li:not(.disabled):hover {
	border-top-color: #e73278;
	transition: .5s;
}
.tab li:hover a {
	opacity: 1;
}

.bill {
	margin: 0 auto 30px;
	border-radius: 0;
	border-top: none;
    padding: 20px;
	border: 1px #aaa solid;
}
.bill p {
	margin: 5px 0;
}
.bill table tr td {
	text-align: right;
}

.error {
    margin: 0 auto; 
    text-align: center; 
    width: 400px;
}

.input_creditcard_number {
	width: 100px;
}
.input_security_code {
    width: 100px;
}
.input_holder_first_name {
    width: 100px;
}
.input_holder_last_name {
    width: 100px;
}
.msg_center {
    width: 80%;
    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;}


.getTitle { width: 96%; margin: 0 auto; color:#FF4F51; border-bottom: 2px solid #FF4F51; font-size: 16px;}
.useTitle { width: 96%; margin: 0 auto; color:#0370C9; border-bottom: 2px solid #0370C9; font-size: 16px;}
.History {margin:0 auto 20px; width:96%; height: 200px;vertical-align: top; overflow-y:scroll; overflow-x:hidden; border: 1px solid #E5E5E5;}
.History::-webkit-scrollbar{width: 10px;background: #dbe8ec;}
.History::-webkit-scrollbar-button{ width:8px;height: 0;}
.History::-webkit-scrollbar-track{background:#dbe8ec; right:1px;}
.History::-webkit-scrollbar-thumb{background:#1B1B1B;}
.History::-webkit-scrollbar-thumb:hover{background:#1B1B1B;}
.History::-webkit-scrollbar-thumb:window-inactive {background:#1B1B1B;}
.History ul.getPoint {}
.History ul li{ float:left; width:96%; border-bottom:1px solid #e3e7ec; background:#fff; margin:0 2% 15px;}
.History ul li p { margin: 0;}
.History ul li .upper { overflow: hidden; width: 100%; margin-bottom: 2px;}
.History ul li .upper .date { float: left;padding: 2px 5px; border-radius:5px; background:#DDDDDD; margin-right: 10px;}
.History ul li .upper .get {padding: 0 5px;margin-right: 10px;float: left; text-align: right; line-height: 1.4;}
.History ul.getPoint li .upper .get span {color: #FF4F51; font-weight: bold; font-size: 20px;}
.History ul.usePoint li .upper .get span {color:#0370C9; font-weight: bold; font-size: 20px;}
.History ul li .lower { overflow: hidden; width: 100%;}

.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;}
.ExchangeBlock p { text-align: center;}
.ExchangeBlock dl { overflow: hidden; background:#eee;}
.ExchangeBlock dl dt { width: 60%;}
.ExchangeBlock dl dd { 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;}


/** added by Aplix since 2024.08 **/

/* tooltip */

div.imei {
	position: relative;
}

div.tooltip {
	display: none;
	position: absolute;
	left: 0;
	top: -2.5em;
	padding: 0.2em 0.5em;
	margin: 0;
	border: 1px #ccc solid;
	background-color: #FFF;
}