@charset "utf-8";

/* Common
----------------------------------------------------*/
h1 {
	font-size: 16px;
	font-weight: bold;
}

h2 {
	font-size: 15px;
	font-weight: bold;
}

h3 {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
}

.container {
	padding: 15px 15px 15px;
}

.contentsHeader {
	//margin-bottom: 15px;
    padding: 10px 10px 10px 10px;
}

.contentsHeader h1 {
    font-size: 18px;
	//margin-bottom: 10px;
}

.contentsOuter {
	padding: 30px 20px 20px;
}

.btnOuter {
	padding: 20px 0;
}

.headerNotice {
	background: #FEE;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #F00;
	padding: 15px;
	border-bottom: 1px solid rgba(3,4,5,0.1);
}

.headerGoldPointcard {
	background: #FEE;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #F00;
	padding: 15px;
	border: 1px solid rgba(3,4,5,0.1);
  border-radius: 5px;
	margin-bottom: 10px;
}
.headerGoldPointcard h2 {
	margin-bottom: 10px;
}

.headerInfomation {
	background: #F7F7F7;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #F00;
	padding: 15px;
  border-radius: 5px;
}

.headerInfomation h2 {
	margin-bottom: 5px;
}


.touchLink {
	position: relative;
	display: block;
	padding-right: 30px;
	color: #030405;
}

.touchLink:after {
	background: url(../../images/fIcon_linkNext.png) no-repeat 0 0;
	background-size: 7px 12px;
    content: " ";
    height: 12px;
    width: 7px;
    position: absolute;
    top: 50%;
    right: 15px;
	margin: -6px 0 0 0;
}

.imgBox {
	margin: 15px 0;
	text-align: center;
}

.bBox {
	background: #FFF;
	border: 1px solid #D3D4D5;
	border-radius: 5px;
}

.bBox .bBoxUnit {
	display: block;
	border-top: 1px solid #D3D4D5;
}

.bBox .bBoxUnit:first-child {
	border-top: none;
}

.bBox .bBoxInner {
	padding: 15px;
}

.bBoxLead {
    font-size: 13px;
    margin-bottom: 10px;
}

.bBox .bBoxUnit .bBoxidArea {
    padding: 0 10px;
    width: 100%;
    border: none;
    height: 44px;
    line-height: 44px;
}

.mainCap {
	font-size: 16px;
	font-weight: bold;
}

.cmnCap {
	font-size: 14px;
	color: #636465;
}

.subCap {
	font-size: 12px;
	color: #939495;
}

.noteCap {
	font-size: 13px;
	color: #636465;
	line-height: 1.6;
}

.loaderTopCap {
	position: absolute;
	bottom: 50%;
	width: 100%;
	margin-bottom: 30px;
	padding: 0 15px;
	text-align: center;
}

.loaderBottomCap {
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: 30px;
	padding: 0 15px;
	text-align: center;
}

.loadingIcon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border-radius: 50%;
	border-top: 3px solid rgba(3,4,5,0.1);
	border-right: 3px solid rgba(3,4,5,0.1);
	border-bottom: 3px solid rgba(3,4,5,0.1);
	border-left: 3px solid #d82f31;
	-webkit-animation-name: load;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0s;
	animation-name: load;
	animation-duration: 0.4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-delay: 0s;
}

.loadingIcon:after {
	width: 75%;
	height: 75%;
}

.blinking {
	-webkit-animation-name: pulse;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: alternate;
	-webkit-animation-delay: 0s;
	animation-name: pulse;
	animation-duration: 0.8s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-delay: 0s;
}



/* Header
----------------------------------------------------*/
header {
	position: relative;
	background: #F3F4F5;
	border-bottom: 1px solid rgba(3,4,5,0.1);
	height: 44px;
}

header .yLogo {
	position: absolute;
	top: 50%;
	left: 15px;
	background: url(../../images/gpcLogo_yodobashi.png) no-repeat 0 0;
	background-size: 120px 15px;
	width: 120px;
	height: 15px;
	margin: -7.5px 0 0 0;
	display: block;
}

header .hNav {
	background: url(../../images/fIcon60_hNav_home.png) no-repeat center center;
	background-size: 30px 30px;
	position: absolute;
	top: 0;
	right: 4px;
	width: 44px;
	height: 44px;
	display: block;
}


/* Footer
----------------------------------------------------*/
footer {
	padding: 15px;
}

footer .copyright {
	display: block;
	text-align: center;
	font-size: 11px;
	color: #939495;
}


/* Gloval Navi
----------------------------------------------------*/
.gNavList {
	background: #FFF;
	border-bottom: 1px solid rgba(3,4,5,0.1);
}

.gNavUnit {
	display: block;
	overflow: hidden;
	padding-left: 15px;
}

.gNavUnit.touchLink  {
	padding-right: 0;
}

.gNavUnit .gNavInner {
	position: relative;
	width: 100%;
	border-bottom: 1px solid rgba(3,4,5,0.1);
}

.gNavUnit:last-child .gNavInner {
	border-bottom: none;
}

.gNavUnit.touchLink .gNavInner {
	padding-right: 30px;
}

.gNavUnit .gNavTxt {
	display: table;
	width: 100%;
	padding: 13px 0;
}

.gNavUnit .gNavTxt .subTxt {
	font-size: 11px;
	color: #939495;
}

.gNavUnit .gNavTxt .gNavStatus {
	display: table-cell;
	vertical-align: middle;
	padding: 0 0 0 10px;
	min-width: 70px;
	text-align: right;
	color: #939495;
}

.gNavIconUnit {
	padding-left: 60px;
}

.gNavIconUnit .gpNumber {
	text-align: right;
}

.gNavIconUnit .gpNumber .num {
	font-size: 32px;
	color: #F90;
	font-weight: bold;
}

.gNavIconUnit .gpNumber .unit {
	font-size: 12px;
	margin-left: 10px;
}

.gNavIconUnit .gpNumberNotice {
	font-size: 14px;
	text-align: right;
	color: #939495;
	margin-top: 10px;
}

.gNavIconUnit .gNavIcon {
	position: absolute;
	top: 7.5px;
	left: -45px;
	display: block;
	width: 30px;
	height: 30px;
}

.gNavIconUnit .gNavIcon.gNavIconDetail {
	background: url(../../images/fIcon60_gNav_detail.png) no-repeat 0 0;
	background-size: 30px 30px;
}

.gNavIconUnit .gNavIcon.gNavIconGpc {
	background: url(../../images/fIcon60_gpc.png) no-repeat 0 0;
	background-size: 30px 30px;
}

.gNavIconUnit .gNavIcon.gNavIconGpcPlus {
	background: url(../../images/fIcon60_gpcplus.png) no-repeat 0 0;
	background-size: 30px 30px;
}

.gNavIconUnit .gNavIcon.gNavIconGuide {
	background: url(../../images/fIcon60_gNav_guide.png) no-repeat 0 0;
	background-size: 30px 30px;
}

.gNavIconUnit .gNavIcon.gNavIconSave {
	background: url(../../images/fIcon60_gNav_save.png) no-repeat 0 0;
	background-size: 30px 30px;
}

.gNavIconUnit .gNavIcon.gNavIconUse {
	background: url(../../images/fIcon60_gNav_use.png) no-repeat 0 0;
	background-size: 30px 30px;
}

.gNavIconUnit .gNavIcon.gNavIconStore {
	background: url(../../images/fIcon60_gNav_store.png) no-repeat 0 0;
	background-size: 30px 30px;
}

.gNavIconUnit .gNavIcon.gNavIconGPCPlus {
	background: url(../../images/fIcon60_gNav_gpcplus.png) no-repeat 0 0;
	background-size: 30px 30px;
}

.gNavIconUnit .gNavIcon.gNavIconCancel {
	background: url(../../images/fIcon60_gNav_cancel.png) no-repeat 0 0;
	background-size: 30px 30px;
}

.gNavRowList .gNavUnit {
	float: left;
	width: 50%;
	border-top: 1px solid rgba(3,4,5,0.1);
	border-left: 1px solid rgba(3,4,5,0.1);
}

.gNavRowList .gNavUnit:first-child,
.gNavRowList .gNavUnit:nth-child(2) {
	border-top: none;
}

.gNavRowList .gNavUnit:nth-child(odd) {
	border-left: none;
}

.gNavRowList .gNavUnit .gNavInner {
	border-bottom: none;
}

.gNavRowList .gNavUnit:last-child .gNavInner {
	border-bottom: none;
}


/* Top
----------------------------------------------------*/
.gpHeadlineTtl {
	position: relative;
	font-size: 14px;
	margin: 0 0 5px 0;
}

.gpHeadlineTtl .cardIcon {
	position: absolute;
	top: 50%;
	left: 0;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 0;
}

.gpHeadlineTtl .cardIcon.cardIconGpc {
	background: url(../../images/fIcon60_gpc.png) no-repeat 0 0;
	background-size: 30px 30px;
}

.gpHeadlineTtl .cardIcon.cardIconGpcPlus {
	background: url(../../images/fIcon60_gpcplus.png) no-repeat 0 0;
	background-size: 30px 30px;
}

.gpHeadlineTtl .gpHeadlineTtlText {
	padding-left: 45px;
}


/* Point Detail
----------------------------------------------------*/
.gpDetail .gpDetailNumber {
	text-align: right;
}

.gpDetail .gpDetailNumber .num {
	font-size: 24px;
	font-weight: bold;
}

.gpDetail .gpDetailNumber .num.goldPoint {
	color: #F90;
}

.gpDetail .gpDetailNumber .num.afterServicePoint {
	color: #2C9AE7;
}

.gpDetail .gpDetailNumber .unit {
	font-size: 12px;
	margin-left: 10px;
}

.gpDetail .expirationDate {
	font-size: 12px;
	text-align: right;
	color: #939495;
}



/* Point Usage History
----------------------------------------------------*/
.pointUsageTotalPoint {
	font-size: 13px;
}

.pointUsageHistoryList {
}

.pointUsageHistoryUnit {
	position: relative;
	background: #FFF;
	//border: 1px solid rgba(3,4,5,0.1);
	//border-radius: 5px;
	padding: 0 10px;
	margin-bottom: 10px;
}

.pointUsageHistoryUnit .usagePoint.getPoints .num {
    color: #2C9AE7;
} 

.pointUsageHistoryUnit:first-child {
	margin-top: 0;
}

.pointUsageHistoryUnit .usageDate {
	font-size: 13px;
	color: #939495;
}

.pointUsageHistoryUnit .usageStatus {
	font-size: 14px;
	font-weight: bold;
}

.pointUsageHistoryUnit .usagePoint {
	text-align: left;
	line-height: 1;
}

.pointUsageHistoryUnit .usagePoint .num {
	font-size: 24px;
	font-weight: bold;
}

.pointUsageHistoryUnit .usagePoint.getPoints .num {
	color: #F90;
}

.pointUsageHistoryUnit .usagePoint.usePoints .num {
	color: #E72CA3;
}

.pointUsageHistoryUnit .usagePoint.usePoints .totalPoint .numgoldPointPlus {
	color: #d82f31;
	font-size: 16px;
  font-weight: bold;
}

.pointUsageHistoryUnit .usagePoint .unit {
	font-size: 12px;
	margin-left: 5px;
}

.pointUsageHistoryUnit .usagePoint.usePoints .totalPoint {
    display: inline-block;
}

.pointUsageHistoryUnit .usagePrace,
.pointUsageHistoryUnit .usageNb {
	font-size: 13px;
	text-align: right;
	margin-top: 5px;
}

.pointUsageHistoryUnit .noHistory {
	font-size: 14px;
	text-align: right;
}

.plusPoint {
	font-size: 14px;
    display: inline-block;
    margin-left: 0;
}

/* Edy Top
----------------------------------------------------*/
.edyHeadline {
	display: table;
	width: 100%;
}

.edyHeadline .imgCol {
	display: table-cell;
	width: 100px;
	padding: 0 15px 0 0;
}

.edyHeadline .txtCol {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.edyHeadline .edyStatus {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
}


/* Card Number
----------------------------------------------------*/
.gpCardNumber {
	text-align: center;
}

.gpCardNumber .num {
	font-size: 24px;
	line-height: 1;
}


/* User Policy
----------------------------------------------------*/
.userPolicy {
	font-size: 14px;
}

.userPolicy li {
	margin-top: 1em;
	padding-left: 2em;
	text-indent: -2em;
}

.userPolicy li:first-of-type {
	margin-top: 0;
}

.userPolicy .noIndent {
	padding-left: 0;
	text-indent: 0;
}


/* Help
----------------------------------------------------*/
.helpNote {
	font-size: 14px;
}



.appDlInfo {
    padding: 30px 15px;
    background: #F3F4F5;
    border-radius: 5px;
    margin-bottom: 15px;
}

.appDlInfo .versionInfo {
    font-size: 14px;
    margin-top: 15px;
}

.appDlInfo .popupLink {
    font-size: 12px;
    margin-top: 15px;
}

/* containerComplete(New)
-----------------------------------------------------*/
.anotherBody {
    background-color: #E0E0E0;
    font-family: "Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    color: #595959;
}

.newContentsHeader {
    background-color: #F0F0F0;
    padding: 10px;
    border-bottom: 1px solid #909090;
}

.containerComplete .newContentsHeader h1 {
    font-size: 16px;
    text-align: center;
}

.containerComplete .btnStack {
    margin: 0;
    background-color: #E0E0E0;
    padding: 20px 10px;
    text-align: center;
}

.containerComplete .btnStackSentence {
    margin: 0;
    background-color: #E0E0E0;
    padding: 20px;
    text-align: left;
}

.containerComplete .btnStack img {
    width: 290px;
    height: 160px;
}

.containerComplete .btnStack h2 {
    margin-bottom: 15px;
}

.containerComplete .btnStack p {
    padding: 0 20px;
    font-size: 14px;
    line-height: 1.7;
}

.containerComplete .yBtn {
    background-color: #FFF;
    text-align: center;
    line-height: 24px;
}

.containerComplete .yBtn h2 {
    color: #535353;
    font-size: 14px;
    padding: 10px;
}

.cardNumber {
    background: #E0E0E0;
}

.cardNumberBox {
    background: #FFF;
    margin-bottom: 35px;
    padding: 20px 10px;
    text-align: center;
}

.cardNumber .cardNumberBox p {
    margin-top: 5px;
}

.cardNumberText {
    padding: 20px;
}

.cardNumberText p {
    font-size: 14px;
}

.containerComplete .yBtnPrint {
    background-color: #FFF;
    text-align: center;
    margin-bottom: 15px;
    line-height: 24px;
}

.containerComplete .yBtnPrint h2 {
    color: #E23D1F;
    font-size: 14px;
    padding: 10px;
}

.containerComplete .yBtnDelete {
    background-color: #FFF;
    text-align: center;
    margin-bottom: 15px;
    line-height: 24px;
}

.containerComplete .yBtnDelete h2 {
    color: #E23D1F;
    font-size: 14px;
    padding: 10px;
}

.containerComplete .yBtnApply {
    background-color: #FFF;
    padding: 10px;
    text-align: center;
    line-height: 24px;
    margin-bottom: 15px;
}

.containerComplete .yBtnApply h2 {
    color: #E23D1F;
}

.containerComplete .yBtnCancel {
    background-color: #FFF;
    text-align: center;
    line-height: 24px;
    margin-bottom: 15px;
}

.containerComplete .yBtnCancel h2 {
    color: #535353;
    font-size: 14px;
    padding: 10px;
}

.enterPassword {
    padding: 20px;
}

.enterPassword p {
    font-size: 14px;
}

.enterPassword .felica {
    margin-top: 10px;
    font-size: 12px;
    color: #909090;
    line-height: 18px;
}

.containerComplete .textInfo .idBox {
    background: #FFF;
    padding: 11px 15px;
}

.idBox p {
    display: inline;
}

.idBox input {
    width: 70%;
    line-height: 1.4;
    height: 25px;
    font-size: 14px;
}

.idBox .idMail {
    padding: 10px;
    color: #808080;
}

.containerComplete .textInfo .idBox .memberId {
    font-weight: bold;
    color: #808080;
    margin-right: 28px;
    font-size: 14px;
}

.containerComplete .textInfo .passBox .passTitle {
    font-weight: bold;
    color: #373737;
    font-size: 14px;
    line-height: 16px;
}

.containerComplete .textInfo .passBox {
    background: #FFF;
    margin: 1px 0 35px 0;
    padding: 10px 15px;
}

.containerComplete .textInfo .passBox p {
    display: inline;
}

.containerComplete .textInfo .passBox input {
    width: 70%;
    line-height: 1.4;
    height: 22px;
    font-size: 14px;
}

.containerComplete .textInfo .passBox input::-ms-clear {
    display: block;
    width: 10px;
}

.btnStackSentence p {
    font-size: 14px;
}

.btnStackSentence .felica {
    margin-top: 10px;
    font-size: 12px;
    color: #909090;
    line-height: 18px;
}

.btnStack .felica {
    margin-top: 10px;
    font-size: 12px;
    color: #909090;
    line-height: 18px;
}

.containerComplete .yBtnUp {
    background-color: #FFF;
    text-align: center;
    margin-bottom: 15px;
    line-height: 24px;
}

.containerComplete .yBtnUp h2 {
    color: #535353;
    font-size: 14px;
    padding: 10px;
}


.containerComplete .yBtnUp.action h2 {
    color: #E23D1F;
    font-size: 14px;
    padding: 10px;
}

.containerComplete .yBtnUnder {
    background-color: #FFF;
    text-align: center;
    margin-bottom: 15px;
    line-height: 24px;
}

.containerComplete .yBtnUnder h2 {
    color: #535353;
    font-size: 14px;
    padding: 10px;
}

.containerComplete .btnStack .yContainerDescription {
    margin-top: 10px;
    font-size: 12px;
    color: #909090;
    line-height: 18px;   
}

.containerComplete .cardNumberText h2 {
    margin-bottom: 15px;
}

.containerComplete .btnStackSentence h2 {
    margin-bottom: 15px;
}

.containerComplete .FlushLeft {
    margin: 0;
    background-color: #E0E0E0;
    padding: 20px;
}

.containerComplete .FlushLeft img {
    display: block;
    margin: 0 auto;
    width: 290px;
}

.containerComplete .FlushLeft p {
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.7;
}

.containerComplete .FlushLeft .yContainerDescription {
    margin-top: 10px;
    font-size: 12px;
    color: #909090;
    line-height: 18px;
}

.containerComplete .FlushLeft h2 {
    margin-bottom: 15px;
}

/* agpc_20_0102_2.html */
.passAlert {
    background-color: #FFEEEE;
    padding: 10px 0;
    text-align: center;
}

.passAlert p {
    color: #FF0000;
    font-size: 14px;
}