/* ===============================================================================
MYPAGE CSS
=============================================================================== */

/* myPage
	======================================== */
.myPage {
  background: url(../img/gameclub/mypage/mainimgbg.jpg) no-repeat center center;
  background-size: cover;
  margin-bottom: 53px;
}
.myPage .mimg {
  max-width: 100%;
  text-align: center;
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
.myPage > .inner {
  width: 999px;
  margin: 0 auto;
		padding: 0;
  position: relative;
  /*height: 555px;*/
  display: table;
}
.myPage .title {
  position: absolute;
  bottom: -0.9em;
  left: 0;
}
.myPage .title span {
  color: #fff;
  position: absolute;
  top: 1em;
  left: 3.9em;
  font-weight: bold;
  font-size: 1.07rem;
  letter-spacing: -0.05em;
}
.sp .myPage {
  padding:0;
  margin-bottom: 15px;
}
.sp .myPage > .inner {
  width: 100%;
  position: relative;
  height: auto;
}
.sp .myPage .title {
  width: 92%;
  position: absolute;
  left: 4%;
  bottom:-0.7em;
}
.sp .myPage .title span {
  font-size: 2.8vw;
  top: 50%;
  margin-top: -1.1vw;
  left: 3em;
}


/*搭乗MS変更の為の枠
--------------------------------------------*/
.photoBlock { margin: 0 auto; padding: 0;}
.photoBlock ul { margin: 0 auto 5% auto; padding: 0; text-align: center; max-width: 90%; -webkit-box-sizing:border-box; box-sizing:border-box;}
.photoBlock ul li { margin: 0; padding: 0; width: 100%; -webkit-box-sizing:border-box; box-sizing:border-box;}
.photoBlock ul li img { border: 7px solid #e8edf2; height: auto; margin: 0 0 4% 0; padding: 0; max-width: 377px; width: 100%; -webkit-box-sizing:border-box; box-sizing:border-box;}
.photoBlock ul li span { display: block; margin: 0; padding: 0; text-align: center;}
.photoBlock ul li span big { color: #ff37b1; display: block; font-size: 1.8rem; line-height: 1; margin: 0 0 10px 0; padding: 0;} 


/*----------------------------------------------------------------
GPGメンバーズとは用追加CSS
----------------------------------------------------------------*/

/*生まれ変わりました！のタイトル*/
.aboutgc h4.headTitle02{ border-bottom: none; margin-top: 30px; }

.aboutgc h4.headTitle_agc { margin: 0 0 20px 0; padding: 0; text-align: center;}
.aboutgc h4.headTitle_agc span { font-size: 2rem; font-weight: bold; padding: 6px 0;}

/*ブロックごとのタイトル*/
.aboutgc h5.headTitle_agc { margin: 0 0 20px 0; padding: 0; text-align: center;}
.aboutgc h5.headTitle_agc span { font-size: 2rem; font-weight: bold; padding: 6px 0;}

/*冒頭のキャッチ*/
.aboutgc p.catchTxt { font-size: 2rem; font-weight: bold; margin: 0 auto; padding:0; text-align: center;}

/*1ブロック
----------------------------------------------*/
.aboutgc_block { margin: 6% 0 0 0;}

/*ポイントを貯める
----------------------------------------------*/
.aboutgc ul.privilegeBox { font-size: 0; line-height: 0; margin: 0 auto; padding: 0; text-align: center;}
.aboutgc ul.privilegeBox li { background:#FFF; display: inline-block; min-height: 200px; margin: 0 1% 2% 0; padding: 2%; vertical-align: top; width: 32%; -webkit-box-sizing:border-box; box-sizing:border-box; border: solid 3px #eee;}
.aboutgc ul.privilegeBox li span { display: block; font-size: 1rem; line-height: 1.8;}
.aboutgc ul.privilegeBox li span big { display: block; font-size: 1.2rem; line-height: 1.8; min-height: 50px; color: #FF37B1; }

/*ポイントを使うイメージ
----------------------------------------------*/
.aboutgc_image { margin: 0 0 3% 0; text-align: center;}
.aboutgc_image img { height: auto; max-width: 100%; width: 100%;}

/*旧ポイントについて
----------------------------------------------*/
.aboutgc_notes { background: #eee; margin: 6% auto 0 auto; padding: 3%; width: 80%; -webkit-box-sizing:border-box; box-sizing:border-box;}
.aboutgc_notes big { display: block; font-size: 1.3rem; margin: 0 0 30px 0; padding: 0; text-align: center;}


/*ポイントゲットボタン
----------------------------------------------*/
.mypointBtn a { background:#FF37B1; border:solid 3px #FF37B1; border-radius:3px; box-sizing:border-box; color:#fff; display:block; font-size:1.5rem; letter-spacing:-0.05em; margin:0 auto; padding:20px 10px 19px 10px; text-align: center; transition-duration:0.2s; transition-property:background,color; width:585px; }

.pc .mypointBtn a:hover { background:#fff; color:#FF37B1; text-decoration:none; }


/*----------------------------------------------------------------
【SP】GPGメンバーズとは用追加CSS
----------------------------------------------------------------*/

/*【SP】生まれ変わりました！のタイトル*/
.sp .aboutgc h4.headTitle02{ border-bottom: none; }
.sp .aboutgc h4.headTitle_agc { margin: 0 0 20px 0; padding: 0; text-align: center; }
.sp .aboutgc h4.headTitle_agc span { font-size: 1.5rem; font-weight: bold; padding: 6px 0;}

/*【SP】ブロックごとのタイトル*/
.sp .aboutgc h5.headTitle_agc { margin: 0 0 20px 0; padding: 0; text-align: center;}
.sp .aboutgc h5.headTitle_agc span { font-size: 1.5rem; font-weight: bold; padding: 6px 0;}

/*【SP】ポイントを貯める
----------------------------------------------*/
.sp .aboutgc ul.privilegeBox { font-size: 0; line-height: 0; margin: 0 auto; padding: 0; text-align: center;}
.sp .aboutgc ul.privilegeBox li { background: #FFF; display: inline-block; min-height: auto; margin: 0 1% 2% 0; padding: 2%; vertical-align: top; width: 100%; -webkit-box-sizing:border-box; box-sizing:border-box; border: solid 3px #eee;}
.sp .aboutgc ul.privilegeBox li span { display: block; font-size: 0.9rem; line-height: 1.8;}
.sp .aboutgc ul.privilegeBox li span big { display: block; font-size: 1.2rem; line-height: 1.8; min-height: auto; color: #FF37B1;}

/*【SP】旧ポイントについて
----------------------------------------------*/
.sp .aboutgc_notes { background: #eee; margin: 6% auto 0 auto; padding: 3%; width: 100%; -webkit-box-sizing:border-box; box-sizing:border-box;}
.sp .aboutgc_notes big { display: block; font-size: 1.1rem; margin: 0 0 4% 0; padding: 0; text-align: center;}

/*【SP】ポイントゲットボタン
----------------------------------------------*/
.sp .mypointBtn a { background:#FF37B1; border:solid 2px #FF37B1; border-radius:5px; box-sizing:border-box; font-size:0.8rem; letter-spacing:-1px; margin:0 auto; max-width:300px; padding:12px 5px; text-align:center; text-decoration:none; width:94%; }


/*----------------------------------------------------------------
退会用追加CSS
----------------------------------------------------------------*/
.withdraw p{ margin: 70px 0; text-align: center; font-size: 1.5rem; }
.withdraw p.end{ margin: 120px 0; }
.withdraw p.lost{ font-size: 2.2rem; }
.withdraw p.lost span{ color: #FB00C3; }

/*----------------------------------------------------------------
【SP】退会用追加CSS
----------------------------------------------------------------*/
.sp .withdraw p{ font-size: 1.1rem; }
.sp .withdraw p.lost{ margin: 0 0; font-size: 1.7rem; }
.sp .withdraw p.lost span{ color: #FB00C3; }


/*----------------------------------------------------------------
友達紹介用追加CSS
----------------------------------------------------------------*/
.tellfriend p{ margin: 30px 0; text-align: center; font-size: 1.5rem; }
.tellfriend p.txt_attention{ font-size: 1rem; margin: 60px auto; padding: 20px; width: 50%; background-color: #F0F3F6; }
.tellfriend p.btn_attention{ font-size: 1rem; text-align: center; color: #da0001; }

/*----------------------------------------------------------------
【SP】友達紹介用追加CSS
----------------------------------------------------------------*/
.sp .tellfriend p{ font-size: 1rem; }
.sp .tellfriend p.txt_attention{ font-size: 0.8rem; margin: 30px auto; padding: 20px; width: 80%; background-color: #F0F3F6; }
.sp .tellfriend p.btn_attention{ font-size: 0.8rem; text-align: center; color: #da0001; }



/*----------------------------------------------------------------
【汎用】
----------------------------------------------------------------*/
.ta_center {text-align: center;}
.fs_13rem { font-size: 1.3rem;}
.fs_16rem { font-size: 1.6rem;}
.mb_50 { margin-bottom: 50px;}
.mt_50 { margin-top: 50px;}

.sp .fs_13rem { font-size: 1.1rem;}
.sp .fs_16rem { font-size: 1.3rem;}
.sp .mb_50 { margin-bottom: 5%;}
.sp .mt_50 { margin-top: 5%;}


@media only screen and (min-width:1px) and (max-width:767px){
.sp .myPage .title span {
  left: 4.5em;
  margin-top: -0.8vw;
}
}

/* gameClubBlock01
	======================================== */
.gameClubBlock01 {
  padding-bottom:52px;
}
.gameClubBlock01 > .inner {
  width: 999px;
  margin: 0 auto;
}
.gameClubBlock01 .heading {
  padding: 36px 0 28px;
  /*background: #f8f9fb;*/
}
.gameClubBlock01 .heading h2 {
  width: 288px;
}
.headingParts01 p {
  color: #111;
}

.sp .gameClubBlock01 {
  min-width: auto;
  padding-bottom:20px;
}
.sp .gameClubBlock01 > .inner {
  width: 92%;
}
.sp .gameClubBlock01 .heading {
  padding: 25px 0 19px;
}
.sp .gameClubBlock01 .heading h2 {
  width: 221px;
}

/* searchSet
	======================================== */
.searchSet {
  margin-top: -15px;
  padding-bottom: 50px;
}
::-ms-expand { display: none;}
.searchSet .selTxt {
  float: left;
}
.searchSet .selTxt select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/common/icon_arrow.png) no-repeat right center #e8edf2;
  border: none;
  cursor: pointer;
  font-size: 0.94rem;
  height: 48px;
  padding: 0 0 0 15px;
  width: 545px;
  color: #000;
  border-radius: 3px;
}
.searchSet .searchTxt {
  background: #e8edf2;
  width: 329px;
  position: relative;
  margin:0 0 0 5px;
  border-radius: 3px;
  float: left;
}
.searchSet .searchTxt input[type="search"]:focus {
  outline-offset: -2px;
}
.searchSet .searchTxt input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
}
.searchSet .searchTxt .form-search {
  background: #e8edf2;
  border: none;
  font-size: 0.94rem;
  height: 40px;
  padding: 4px 15px;
  width: 299px;
  color: #000;
  border-radius: 3px;
}
input::-webkit-input-placeholder {
  color: #c1ceda!important;
}
input::-moz-placeholder { 
  color: #c1ceda!important;
}
input:-moz-placeholder {
  color: #c1ceda!important;
}
input:-ms-input-placeholder {
  color: #c1ceda!important;
}
.searchSet .block-btn {
  padding: 0 0 0 5px;
  width: 115px;
  float: left;
}
.searchSet .block-btn .btn-search {
  background: #252525;
  cursor: pointer;
  display: inline-block;
  margin: 0;
  transition-duration: 0.2s;
  width: 100%;
  position: relative;
  border-radius: 3px;
}
.searchSet .block-btn .btn-search input,
.searchSet .block-btn .btn-search span {
  background: #252525;
  border: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 0.94rem;
  line-height: 1.5;
  margin: 0 0 0 22px;
  text-align: center;
  transition-duration: 0.2s;
  padding: 14px 0 13px;
  width: 93px;
  border-radius: 3px;
  -webkit-appearance:none;
}
.searchSet .block-btn .btn-search::after {
  background: url(../img/common/icon_btn_search.png) no-repeat left center;
  background-size: cover;
  content: '';
  display: block;
  height: 20px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  margin-left: -30px;
}
.sp .searchSet {
  margin-top: 0;
  padding-bottom: 25px;
}
.sp .searchSet .selTxt {
  float: none;
  padding-bottom: 15px;
}
.sp .searchSet .selTxt select {
  width: 100%;
}
.sp .searchSet .searchTxt {
  width: 75%;
  float: left;
  margin: 0;
}
.sp .searchSet .searchTxt .form-search {
  width: 92%;
  padding: 4px 4%;
  border-radius: 5px;
}
.sp .searchSet .block-btn {
  width: 22%;
  padding: 0;
  float: right;
}
.sp .searchSet .block-btn .btn-search {
  width: 97%;
  margin: 0;
}
.sp .searchSet .block-btn .btn-search input {
  width: 100%;
  margin: 0;
  padding: 13px 0;
  text-indent: -9999px;
  border-radius: 5px;
}
.sp .searchSet .block-btn .btn-search::after {
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  width: 17px;
  height: 17px;
}

/* listImg
	======================================== */
.listImg {
  margin: 0 -6px 0 -7px;
  overflow: hidden;
  font-size: 0;
  padding-bottom: 18px;
}
.listImg li {
  display: inline-block;
  vertical-align: top;
  padding: 0 6px 13px 7px;
  max-width: 88px;
}
.sp .listImg {
  padding-bottom: 10px;
}

@media only screen and (min-width:1px) and (max-width:767px){
.sp .listImg {
  margin: 0 -1%;
}
.sp .listImg li {
  box-sizing: border-box;
  padding: 0 1% 2%;
  max-width: 25%;
}
}