@charset "UTF-8";

/* ベース
------------------------------------------------ */

html{
font-size: 10px;
font-size: 1.0rem;
font-size: 62.5%;
}

body {
font-family: 'メイリオ',meiryo,'ＭＳ Ｐゴシック','MS PGothic',Verdana,Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.75;
position: relative;
margin: 0 auto;
padding: 0;
color: #223;
background: #fff;
-webkit-text-size-adjust: 100%;
}

/* reset ************/

h1,
h2,
h3,
h4,
h5 {
font-size: 16px;
font-size: 1.6rem;
font-weight: normal;
margin: 0;
padding: 0;
}

table {
width: 100%;
}

em {
font-weight: bold;
font-style: normal;
}

dt,
dd,
dl {
margin: 0;
}

ul,
ol,
li {
margin: 0;
padding: 0;
list-style: none;
}

img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}

a {
text-decoration: none;
color: #314da5;
}

a:hover,
a:active,
a:focus {
text-decoration: underline;
color: #0074bd;
}

p {
margin: 0 0 15px;
}

/*
input,
button,
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
*/

input,
button,
textarea,
select {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
outline: none;
background: none;
/*
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
*/
}

button {
cursor: pointer;
border: none;
background: none;
}

@media only screen and (max-width: 767px) {
input {
  font-size: 100%;
}
}

/* style
------------------------------------------------ */

.str-main {
width: 950px;
margin: 0 auto 50px;
}

.main {
margin-bottom: 20px;
background: url(/pointpon/img/bg_title.png) no-repeat;
}

.gameMain {
text-align: center;
}

.hdg1Box {
margin-bottom: 20px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .1);
}

.hdg1BoxInner {
box-sizing: border-box;
width: 100%;
min-width: 950px;
max-width: 950px;
margin: 0 auto;
}

.hdg1 {
font-size: 32px;
font-size: 3.2rem;
display: table-cell;
vertical-align: middle;
}

.hdg2 {
margin: 40px 0 20px;
padding: 15px 0 10px;
border-top: 4px solid #ff9dba;
border-bottom: 1px solid #ff9dba;
font-size: 20px;
font-size: 2rem;
font-weight: bold;
}

.hdg3 {
background: #f3f3f3;
margin: 30px 0 15px;
padding: 7px 10px 5px;
font-size: 16px;
font-size: 1.6rem;
font-weight: bold;
}

.mod-lytImg {
margin-bottom: 20px;
text-align: center;
}

.imgHover:hover {
opacity: .7;
}

.linkIcon {
position: relative;
top: -1px;
max-width: none;
margin: 0 10px;
vertical-align: middle;
}

.linkBtnIcon {
position: absolute;
top: 40%;
right: 20px;
}

@media only screen and (max-width: 767px) {
.str-main {
  width: 100%;
  margin: 15px auto 50px;
}

.main {
  background: url(/pointpon/img/bg_title_sp.png) no-repeat;
}

.inner {
  padding: 0 15px;
}

.hdg2 {
  padding: 15px 15px 10px;
}

img[src*="title_top.png"] {
  width: 100%;
}

/* ヘッダー */
.gHd2017_burgerMenuInner ul {
  border-bottom: 1px solid #ccc;
}

.js_hdg1Box {
    margin-bottom: 0;
}

.hdg1 {
 font-size: 22px;
 font-size: 2.2rem;
 display: block;
 vertical-align: baseline;
}

.hdg1Box {
  border-bottom: 1px solid #ccc;
  margin-bottom: 15px;
  line-height: 1.3;
  box-shadow: none;
}

.hdg1BoxInner {
 width: auto;
 max-width: none;
 min-width: auto;
 margin: 0 auto;
 padding: 20px 12px 16px;
}
}

/*ブランク*/
.lowPriorityBtn.linkIcon_blank img.linkIcon,
.midPriorityBtn.linkIcon_blank img.linkIcon,
.highPriorityBtn.linkIcon_blank img.linkIcon {
height: 9px;
margin: -4px 0 0 0;
width: 12px;
}

.lowPriorityBtn img, .midPriorityBtn img, .highPriorityBtn img {
display: block;
height: 12px;
margin-top: -6px;
position: absolute;
top: 50%;
right: 21px;
width: 7px;
}

.midPriorityBtn.linkIcon_blank:after {
content: none;
}

/*お知らせ枠*/
.info_important {
  margin-left: auto;
  margin-right : auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
  line-height: 1.5;
  text-align: left;
}
.info_important > .info_important_hd {
  font-size: 2rem;
  font-weight: bold;
  text-align: left;
  margin-bottom: 5px;
}

@media only screen and (max-width: 767px) {
.info_important {
  width: calc(100% - 50px);
}
}

/*faq*/
.mod-faq dt {
background: url(/pointpon/common/img/icon_q.png) no-repeat 10px 5px #f3f3f3;
padding: 9px 0 7px 50px;
font-weight: bold;
}

.mod-faq dd{
background: url(/pointpon/common/img/icon_a.png) no-repeat  10px 10px ;
margin-bottom: 20px;
padding: 10px 0 15px 50px;
}

canvas {
vertical-align: bottom;
}

.otherArea {
position: relative;
border: 2px solid #ffb1c8;
border-radius: 8px;
margin: 40px 0 20px;
}

.otherArea .notes {
margin: 0 30px 20px 155px;
}

.otherArea .title {
margin-bottom: 0;
background: #ffe3ee;
padding: 8px 0 4px;
border-radius: 6px 6px 0 0;
color: #f0006b;
font-weight: bold;
font-size: 22px;
font-size: 2.2rem;
text-align: center;
}

.otherMore {
position: absolute;
bottom: 78px;
left: 150px;
color: #f0006b;
font-size: 18px;
font-size: 1.8rem;
font-weight: bold;
}

.otherArea .link01,
.otherArea .link02 {
display: inline-block;
border: 2px solid #EAC85B;
box-sizing: border-box;
width: 220px;
border-radius: 8px;
text-align: center;
}

.otherArea .link01 {
margin-left: 10px;
}
.otherArea .link02 {
margin-right: 10px;
}

.otherArea .link01:hover,
.otherArea .link02:hover {
opacity: .7;
cursor: pointer
}

@media only screen and (max-width: 767px) {
.mod-faq dt {
  background: url(/pointpon/common/img/icon_q_sp.png) no-repeat 10px 5px #f3f3f3;
  padding: 9px 15px 7px 50px;
}
.mod-faq dd{
  background: url(/pointpon/common/img/icon_a_sp.png) no-repeat  10px 10px ;
  padding: 10px 15px 15px 50px;
}
#canvas {
  width: 100%;
}
.otherArea {
  margin: 25px 15px 20px;
}
.otherAreaInner {
  padding: 0 20px;
  margin-top: 10px;
  text-align: center;
}
.otherArea .title {
  font-size: 18px;
  font-size: 1.8rem;
}
.otherArea .notes {
  margin: 0 0 15px;
}
.otherMore {
  position: static;
  font-size: 19px;
  font-size: 1.9rem;
  text-align: center;
  margin-bottom: 20px;
}
.otherArea .link01 {
  margin-left: 0;
  margin-bottom: 5px;
  width: 100%;
}
}


/* リスト
------------------------------------------------ */

.list,
.listAttention {
margin: 0 0 20px;
word-wrap: break-word;
}

.list > li,
.listAttention > li {
padding-left: 30px;
}

.list > li > .list > li,
.listAttention > li > .list > li,
.list > li > .listAttention > li,
.listAttention > li > .listAttention > li {
position: relative;
padding-left: 20px;
}

.list > li > .list > li:before,
.listAttention > li > .list > li:before,
.list > li > .listAttention > li:before,
.listAttention > li > .listAttention > li:before {
position: absolute;
top: 9px;
left: 0;
display: block;
width: 4px;
height: 2px;
content: '';
background-image: url(/mball/common/img/sprite/_sprite.png);
background-position: -384px -392px;
}

.list > li > .list > li .list > li,
.listAttention > li > .list > li .list > li,
.list > li > .listAttention > li .list > li,
.listAttention > li > .listAttention > li .list > li,
.list > li > .list > li .listAttention > li,
.listAttention > li > .list > li .listAttention > li,
.list > li > .listAttention > li .listAttention > li,
.listAttention > li > .listAttention > li .listAttention > li {
position: relative;
padding-left: 20px;
}

.list > li > .list > li .list > li:before,
.listAttention > li > .list > li .list > li:before,
.list > li > .listAttention > li .list > li:before,
.listAttention > li > .listAttention > li .list > li:before,
.list > li > .list > li .listAttention > li:before,
.listAttention > li > .list > li .listAttention > li:before,
.list > li > .listAttention > li .listAttention > li:before,
.listAttention > li > .listAttention > li .listAttention > li:before {
position: absolute;
top: 9px;
left: 0;
display: block;
width: 3px;
height: 3px;
content: '';
background-image: url(/mball/common/img/sprite/_sprite.png);
background-position: -384px -384px;
}

.list > li,
.listAttention > li {
position: relative;
padding-left: 30px;
color: #223;
}

.list > li:before,
.listAttention > li:before {
position: absolute;
top: -1px;
left: 0;
display: inline-block;
content: '●';
}

.list > li .icon {
font-size: 9.74px;
font-size: 0.974rem;
line-height: 1;
position: relative;
top: 3px;
display: inline-block;
margin-left: 5px;
padding: 3px 8px;
text-align: center;
vertical-align: 5px;
color: #e00000;
border: 1px solid #e00000;
border-radius: 2px;
}

.list > li + li,
.listAttention > li + li {
margin-top: 14px;
}

.list > li .list,
.listAttention > li .list,
.list > li .listAttention,
.listAttention > li .listAttention,
.list > li .listPlane,
.listAttention > li .listPlane,
.list > li .linkList,
.listAttention > li .linkList {
margin-top: 8px;
margin-bottom: 8px;
}

.list > li .list > li + li,
.listAttention > li .list > li + li,
.list > li .listAttention > li + li,
.listAttention > li .listAttention > li + li,
.list > li .listPlane > li + li,
.listAttention > li .listPlane > li + li,
.list > li .linkList > li + li,
.listAttention > li .linkList > li + li {
margin-top: 5px;
}

.list > li .notes > li,
.listAttention > li .notes > li,
.list > li .optionNotes > li,
.listAttention > li .optionNotes > li {
font-size: 12px;
font-size: 1.2rem;
}

.list > li .notes > li > span,
.listAttention > li .notes > li > span,
.list > li .optionNotes > li > span,
.listAttention > li .optionNotes > li > span {
top: 2px;
}


/* リスト 注釈 ************/

.notes {
margin-bottom: 15px;
}

li > .notes {
padding-top: 10px;
}

.notes > li {
display: table;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.75;
table-layout: auto;
}

.notes > li > * {
display: table-cell;
}

.notes > li > .marker {
line-height: 1;
color: #e00000;
padding-right: 10px;
min-width: 1.7em;
white-space: nowrap;
}

.notes > li > div > em {
color: #e00000;
}

.notes > li + li {
margin-top: 14px;
}

.notes.ar {
text-align: right;
}

.notes.ar > li {
display: block;
padding-left: 0;
}

.notes.ar > li > * {
display: inline;
}

@media only screen and (max-width: 767px) {
.notes {
  text-align: left;
}
.notes > li {
  display: block;
}
.notes > li > * {
  display: inline;
}
}

/*優先度中ボタン　ベース（最少サイズ）*/

.midPriorityBtn {
background: #0a68c2;
border-radius: 15px;
border: solid 1px #0a68c2;
box-sizing: border-box;
color: #fff !important;
display: inline-block;
font-size: 1.3rem;
line-height: 1.3em;
text-align: center;
text-decoration: none;
padding: 6px 21px !important;
position: relative;
width: 150px;
margin: auto;
}

.midPriorityBtn:hover,
.midPriorityBtn:focus {
background: #2087ea;
border: solid 1px #2087ea;
color: #fff;
text-decoration: underline;
}

.midPriorityBtn:after {
background: url(/pointpon/common/img/icon_link.png) no-repeat;
content: '';
display: block;
width: 7px;
height: 12px;
margin-top: -6px;
position: absolute;
top: 50%;
right: 21px;
}

.midPriorityBtn.blank:after {
content: none;
}

@media only screen and (max-width: 767px) {
.midPriorityBtn {
  display: block;
}
.midPriorityBtn:after {
  background: url(/pointpon/common/img/icon_link_sp.png) no-repeat;
  content: '';
  display: block;
  width: 7px;
  height: 12px;
  margin-top: -6px;
  position: absolute;
  top: 50%;
  right: 21px;
}
}

/* トップへ戻るボタン */

.toTop {
position: fixed;
z-index: 2000;
right: 30px;
bottom: 100px;
overflow: hidden;
width: 64px;
height: 64px;
display: none;
}

.toTop a {
display: block;
width: 100%;
height: 100%;
}

.toTop a:before {
display: block;
width: 64px;
height: 64px;
content: '';
background: url(/event/common/img/icon/icon_footer_04.png);
}

.toTop.js_fixed {
position: absolute;
/*top: -64px;*/
bottom:109px;
}

@media only screen and (max-width: 767px) {
.toTop {
  top: auto;
  right: 3.125%;
  bottom:0;
  overflow: hidden;
  width: 40px;
  height: 40px;
  position: fixed;
  z-index: 2000;
}
.toTop a:before {
  display: block;
  width: 40px;
  height: 40px;
  content: '';
  background-image: url(/mball/common/img/sp/icon/sp_icon_footer_04.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.toTop.js_fixed {
  position: absolute;
  bottom:174px;
}
[data-script-enabled='true'] .toTop {
  display: none;
}
}

/*ボタン幅*/

.w150 {
width: 150px !important;
}

.w230 {
width: 230px !important;
}

.w310 {
width: 310px !important;
}

.w390 {
width: 390px !important;
}

.w470 {
width: 470px !important;
}


/*ボタン高さ*/

/* lowPriorityBtn,midPriorityBtnの高さ */
.btnPv7 {
font-size: 1.3rem;
padding-top: 7px !important;
padding-bottom: 5px !important;
}

.btnPv9 {
border-radius: 20px;
font-size: 1.4rem !important;
padding-top: 9px !important;
padding-bottom: 9px !important;
}

.btnPv15 {
border-radius: 25px ;
font-size: 1.8rem !important;
padding-top: 15px !important;
padding-bottom: 14px !important;
}

/* highPriorityBtnの高さ */
.btnPv16 {
font-size: 1.8rem !important;
padding-top: 16px !important;
padding-bottom: 15px !important;
}

.btnPv20 {
font-size: 2.4rem !important;
padding-top: 20px !important;
padding-bottom: 16px !important;
}

/* 文字 ************/

.textL {text-align: left!important;}
.textC {text-align: center!important;}
.textR {text-align: right!important;}

.f12 {font-size: 12px; font-size: 1.2rem;}

/* 文字装飾 ************/

.textRed {
color: #e00000 !important;
}

.textBold {
font-weight: bold!important;
}

sup {
color:#e00000;
}

/* margin,padding ************/

.mt0 {margin-top: 0 !important;}
.mr0 {margin-right: 0 !important;}
.mb0 {margin-bottom: 0 !important;}
.ml0 {margin-left: 0 !important;}
.mv0 {margin-top: 0 !important; margin-bottom: 0 !important;}
.mh0 {margin-right: 0 !important; margin-left: 0 !important;}
.ma0 {margin: 0 !important;}
.pt0 {padding-top: 0 !important;}
.pr0 {padding-right: 0 !important;}
.pb0 {padding-bottom: 0 !important;}
.pl0 {padding-left: 0 !important;}
.pv0 {padding-top: 0 !important; padding-bottom: 0 !important;}
.ph0 {padding-right: 0 !important; padding-left: 0 !important;}
.pa0 {padding: 0 !important;}

.mt5 {margin-top: 5px !important;}
.mr5 {margin-right: 5px !important;}
.mb5 {margin-bottom:5px!important;}
.ml5 {margin-left:5px!important;}
.mv5 {margin-top:5px!important; margin-bottom:5px!important;}
.mh5 {margin-right:5px!important; margin-left:5px!important;}
.ma5 {margin:5px!important;}
.pt5 {padding-top:5px!important;}
.pr5 {padding-right:5px!important;}
.pb5 {padding-bottom:5px!important;}
.pl5 {padding-left:5px!important;}
.pv5 {padding-top:5px!important; padding-bottom:5px!important;}
.ph5 {padding-right:5px!important; padding-left:5px!important;}
.pa5 {padding:5px!important;}

.mt10 {margin-top:10px!important;}
.mr10 {margin-right:10px!important;}
.mb10 {margin-bottom:10px!important;}
.ml10 {margin-left:10px!important;}
.mv10 {margin-top:10px!important; margin-bottom:10px!important;}
.mh10 {margin-right:10px!important; margin-left:10px!important;}
.ma10 {margin:10px!important;}
.pt10 {padding-top:10px!important;}
.pr10 {padding-right:10px!important;}
.pb10 {padding-bottom:10px!important;}
.pl10 {padding-left:10px!important;}
.pv10 {padding-top:10px!important; padding-bottom:10px!important;}
.ph10 {padding-right:10px!important; padding-left:10px!important;}
.pa10 {padding:10px!important;}

.mt15 {margin-top:15px!important;}
.mr15 {margin-right:15px!important;}
.mb15 {margin-bottom:15px!important;}
.ml15 {margin-left:15px!important;}
.mv15 {margin-top:15px!important; margin-bottom:15px!important;}
.mh15 {margin-right:15px!important; margin-left:15px!important;}
.ma15 {margin:15px!important;}
.pt15 {padding-top:15px!important;}
.pr15 {padding-right:15px!important;}
.pb15 {padding-bottom:15px!important;}
.pl15 {padding-left:15px!important;}
.pv15 {padding-top:15px!important; padding-bottom:15px!important;}
.ph15 {padding-right:15px!important; padding-left:15px!important;}
.pa15 {padding:15px!important;}

.mt20 {margin-top:20px!important;}
.mr20 {margin-right:20px!important;}
.mb20 {margin-bottom:20px!important;}
.ml20 {margin-left:20px!important;}
.mv20 {margin-top:20px!important; margin-bottom:20px!important;}
.mh20 {margin-right:20px!important; margin-left:20px!important;}
.ma20 {margin:20px!important;}
.pt20 {padding-top:20px!important;}
.pr20 {padding-right:20px!important;}
.pb20 {padding-bottom:20px!important;}
.pl20 {padding-left:20px!important;}
.pv20 {padding-top:20px!important; padding-bottom:20px!important;}
.ph20 {padding-right:20px!important; padding-left:20px!important;}
.pa20 {padding:20px!important;}

.mt25 {margin-top:25px!important;}
.mr25 {margin-right:25px!important;}
.mb25 {margin-bottom:25px!important;}
.ml25 {margin-left:25px!important;}
.mv25 {margin-top:25px!important; margin-bottom:25px!important;}
.mh25 {margin-right:25px!important; margin-left:25px!important;}
.ma25 {margin:25px!important;}
.pt25 {padding-top:25px!important;}
.pr25 {padding-right:25px!important;}
.pb25 {padding-bottom:25px!important;}
.pl25 {padding-left:25px!important;}
.pv25 {padding-top:25px!important; padding-bottom:25px!important;}
.ph25 {padding-right:25px!important; padding-left:25px!important;}
.pa25 {padding:25px!important;}

.mt30 {margin-top:30px!important;}
.mr30 {margin-right:30px!important;}
.mb30 {margin-bottom:30px!important;}
.ml30 {margin-left:30px!important;}
.mv30 {margin-top:30px!important; margin-bottom:30px!important;}
.mh30 {margin-right:30px!important; margin-left:30px!important;}
.ma30 {margin:30px!important;}
.pt30 {padding-top:30px!important;}
.pr30 {padding-right:30px!important;}
.pb30 {padding-bottom:30px!important;}
.pl30 {padding-left:30px!important;}
.pv30 {padding-top:30px!important; padding-bottom:30px!important;}
.ph30 {padding-right:30px!important; padding-left:30px!important;}
.pa30 {padding:30px!important;}

.mt35 {margin-top:35px!important;}
.mr35 {margin-right:35px!important;}
.mb35 {margin-bottom:35px!important;}
.ml35 {margin-left:35px!important;}
.mv35 {margin-top:35px!important; margin-bottom:35px!important;}
.mh35 {margin-right:35px!important; margin-left:35px!important;}
.ma35 {margin:35px!important;}
.pt35 {padding-top:35px!important;}
.pr35 {padding-right:35px!important;}
.pb35 {padding-bottom:35px!important;}
.pl35 {padding-left:35px!important;}
.pv35 {padding-top:35px!important; padding-bottom:35px!important;}
.ph35 {padding-right:35px!important; padding-left:35px!important;}
.pa35 {padding:35px!important;}

.mt40 {margin-top:40px!important;}
.mr40 {margin-right:40px!important;}
.mb40 {margin-bottom:40px!important;}
.ml40 {margin-left:40px!important;}
.mv40 {margin-top:40px!important; margin-bottom:40px!important;}
.mh40 {margin-right:40px!important; margin-left:40px!important;}
.ma40 {margin:40px!important;}
.pt40 {padding-top:40px!important;}
.pr40 {padding-right:40px!important;}
.pb40 {padding-bottom:40px!important;}
.pl40 {padding-left:40px!important;}
.pv40 {padding-top:40px!important; padding-bottom:40px!important;}
.ph40 {padding-right:40px!important; padding-left:40px!important;}
.pa40 {padding:40px!important;}

.mt45 {margin-top:45px!important;}
.mr45 {margin-right:45px!important;}
.mb45 {margin-bottom:45px!important;}
.ml45 {margin-left:45px!important;}
.mv45 {margin-top:45px!important; margin-bottom:45px!important;}
.mh45 {margin-right:45px!important; margin-left:45px!important;}
.ma45 {margin:45px!important;}
.pt45 {padding-top:45px!important;}
.pr45 {padding-right:45px!important;}
.pb45 {padding-bottom:45px!important;}
.pl45 {padding-left:45px!important;}
.pv45 {padding-top:45px!important; padding-bottom:45px!important;}
.ph45 {padding-right:45px!important; padding-left:45px!important;}
.pa45 {padding:45px!important;}

.mt50 {margin-top:50px!important;}
.mr50 {margin-right:50px!important;}
.mb50 {margin-bottom:50px!important;}
.ml50 {margin-left:50px!important;}
.mv50 {margin-top:50px!important ;margin-bottom:50px!important;}
.mh50 {margin-right:50px!important; margin-left:50px!important;}
.ma50 {margin:50px!important;}
.pt50 {padding-top:50px!important;}
.pr50 {padding-right:50px!important;}
.pb50 {padding-bottom:50px!important;}
.pl50 {padding-left:50px!important;}
.pv50 {padding-top:50px!important; padding-bottom:50px!important;}
.ph50 {padding-right:50px!important; padding-left:50px!important;}
.pa50 {padding:50px!important;}

.mt60 {margin-top:60px!important;}
.mr60 {margin-right:60px!important;}
.mb60 {margin-bottom:60px!important;}
.ml60 {margin-left:60px!important;}
.mv60 {margin-top:60px!important; margin-bottom:60px!important;}
.mh60 {margin-right:60px!important; margin-left:60px!important;}
.ma60 {margin:60px!important;}
.pt60 {padding-top:60px!important;}
.pr60 {padding-right:60px!important;}
.pb60 {padding-bottom:60px!important;}
.pl60 {padding-left:60px!important;}
.pv60 {padding-top:60px!important; padding-bottom:60px!important;}
.ph60 {padding-right:60px!important; padding-left:60px!important;}
.pa60 {padding:60px!important;}

/* box ************/
.attention_box {
  border: 1px solid #e00000;
  padding: 15px;
}

@media only screen and (max-width: 767px) {
.attention_box {
  border: 0;
  padding: 0;
}
}

/* PC/SP切り替え ************/
@media only screen and (min-width: 768px) {
.pc-hide {
  display: none;
}
}

@media only screen and (max-width: 767px) {
.sp-hide {
  display: none;
}
}

/* /pointpon/login.html
------------------------------------------------ */

fieldset {
border: 0;
padding: 0;
margin: 0;
}

.login {
display: table;
box-sizing: border-box;
margin-top: 20px;
padding: 40px 30px 30px 30px;
background: #F3F3F3;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F3F3F3), color-stop(100%, #E8E8E8));
background-image: -webkit-linear-gradient(top, #F3F3F3, #E8E8E8);
background-image: -moz-linear-gradient(top, #F3F3F3, #E8E8E8);
background-image: -o-linear-gradient(top, #F3F3F3, #E8E8E8);
background-image: linear-gradient(to bottom, #F3F3F3, #E8E8E8);
border-radius: 10px;
}

.loginArea,
.loginAttArea {
box-sizing: border-box;
display: table-cell;
width: 50%;
}

.loginArea {
padding-right: 20px;
}

.login .title {
padding-left: 8px;
border-left: 8px solid #cccccc;
line-height: 1.2em;
font-size: 16px;
font-size: 1.6rem;
}

.login .item + .item {
margin-top: 15px;
}


.login .input {
padding: 10px 0px 0px 16px;
}

.loginArea .notes {
padding-top: 30px;
line-height: 1.4em;
font-size: 12px;
}

.loginAttArea {
background: url(/pointpon/common/img/bg_line.png) repeat-y left top;
padding-left: 20px;
}

.login_input {
width: 280px;
display: inline-block;
height: 20px;
padding: 4px 6px;
margin-bottom: 10px;
font-size: 14px;
line-height: 20px;
color: #555555;
border-radius: 4px;
vertical-align: middle;
background-color: rgb(250, 255, 189);
background-image: none;
color: rgb(0, 0, 0);

border: 1px solid #cccccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
}

.login_input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline-offset: -2px;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

.login_input.isError{
background: #ffbdbd;
}
.login .errorMsg{
color: #e00000;
display: inline-block;
margin: 5px 0 7px;
font-weight: bold;
}

.btnBox {
padding: 20px 0;
text-align: center;
}

.btnSubmit {
box-sizing: border-box;
width: 230px !important;
padding: 19px 0 15px!important;
font-family: inherit;
border: 1px solid #fcdb00;
background: #fcdb00;
box-shadow: 0 3px 6px rgba(199, 199, 199, 0.5);
color: #223 !important;
font-size: 2.4rem !important;
line-height: 1.3em;
text-align: center;
text-decoration: none;
cursor: pointer;
}

.btnSubmit[disabled],
.btnSubmit[disabled]:hover{
    color: #c5c5c5!important;
    background-color: #f6f6f6;
    border-color: #ccc;
    text-decoration: none;
    cursor: default;
    box-shadow: initial;
}

.btnSubmit:focus,
.btnSubmit:hover,
.btnSubmit:active {
background: #fee63c;
color: #223;
text-decoration: underline;
}

@media only screen and (max-width: 767px) {
.loginAttArea {
  background: url(/pointpon/common/img/bg_line_sp.png) repeat-y left top;
}
}

/* /pointpon/qa.html
------------------------------------------------ */

.btnContact {
text-align: center;
}

.btnContact .midPriorityBtn {
cursor: pointer;
background: url(/pointpon/common/img/icon_blank_02.png) no-repeat 93% 50% #0A68C2;
}

.btnContact .midPriorityBtn:hover,
.btnContact .midPriorityBtn:focus {
background: url(/pointpon/common/img/icon_blank_02.png) no-repeat 93% 50% #2087ea;
border: solid 1px #2087ea;
color: #fff;
text-decoration: underline;
}

@media only screen and (max-width: 767px) {
.btnContact .midPriorityBtn {
  background: url(/pointpon/common/img/icon_blank_02_sp.png) no-repeat 93% 50% #0A68C2;
}
.btnContact .midPriorityBtn:hover,
.btnContact .midPriorityBtn:focus {
  background: url(/pointpon/common/img/icon_blank_02_sp.png) no-repeat 93% 50% #2087ea;
}
}

/* 広告タグのレイアウト調整
------------------------------------------------ */
.adBox {
margin-bottom: 25px;
}
.adBox > * {
margin-left: auto;
margin-right: auto;
}

@media only screen and (max-width: 767px) {
.adBox {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9999;
  margin-bottom: 0;
}
.adBox > div {
  margin-left: auto;
  margin-right: auto;
}
.toTop {
  bottom: 50px;
}
}