@charset "UTF-8";
/*
*	layout.css
*/
.aboutContainer, .aboutGroup01,
.aboutGroup02, .aboutGroup03, .aboutGroup03 .aboutBox div, .appDownload .appList, .appDownload .attention {
  *zoom: 1;
}
.aboutContainer:after, .aboutGroup01:after,
.aboutGroup02:after, .aboutGroup03:after, .aboutGroup03 .aboutBox div:after, .appDownload .appList:after, .appDownload .attention:after {
  content: "";
  display: block;
  clear: both;
}

/* ==========================================================
	#CONTENTS
========================================================== */
#CONTENTS {
  font-size: 107%;
  /*14px*/
  padding-top: 0 !important;
  padding-bottom: 0;
}

.mainContents {
  padding: 0 20px;
}

@media screen and (max-width: 640px) {
  /*640px以下の場合*/
  img {
    max-width: none !important;
  }
}
head body h1 {
  margin-bottom: 23px;
}

/* IE8向け */
* + html h1 {
  margin-bottom: 23px;
}

/*IE7向け */
h1 {
  margin-bottom: 23px !important;
}
@media screen and (max-width: 640px) {
  h1 {
    /*640px以下の場合*/
    margin-bottom: 18px !important;
  }
  h1 img {
    max-width: 100% !important;
  }
}

.snsGroup {
  overflow: hidden;
  margin-bottom: 20px;
}
@media screen and (max-width: 640px) {
  .snsGroup {
    /*640px以下の場合*/
    float: none;
    display: block;
    text-align: center;
    margin-bottom: 8px;
  }
}
.snsGroup li {
  float: left;
  width: 120px;
  height: 20px;
}
@media screen and (max-width: 640px) {
  .snsGroup li {
    /*640px以下の場合*/
    float: none;
    display: inline-block !important;
    margin-bottom: 8px;
    height: auto;
  }
}
.snsGroup li.fb iframe {
  width: 120px !important;
}
.snsGroup .hatena {
  width: 60px;
}
.snsGroup .tw {
  width: 110px;
}



/* キャンペーン
========================================================== */

#campaign {
    margin-bottom: 23px !important;
}

@media screen and (max-width: 640px) {
#campaign {
    margin-bottom: 18px !important;
}
#campaign img {
    max-width: 100% !important;
  }
}

/* アプリ紹介
========================================================== */

h2 {
  clear: both;
  font-size: 124% !important;
}
@media screen and (max-width: 640px) {
  h2 {
    /*640px以下の場合*/
    display: block;
    background-color: #000000;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px !important;
    margin-right: -20px !important;
    margin-left: -20px !important;
    padding: 10px 0 !important;
  }
}

.mb20 {
  margin-bottom: 20px;
}

.aboutContainer {
  padding: 0 10px 40px;
}
@media screen and (max-width: 640px) {
  .aboutContainer {
    /*640px以下の場合*/
    padding: 0;
  }
}

.aboutGroup01,
.aboutGroup02 {
  margin: 0 -30px 0 0;
}
/* Firefox hack start */
@-moz-document url-prefix() {
    .aboutGroup01,
		.aboutGroup02 {
		 margin: -30px -30px 0 0;
    }
}
/* Firefox hack end */

@media screen and (max-width: 640px) {
  .aboutGroup01,
  .aboutGroup02 {
    /*640px以下の場合*/
    margin-right: 0;
  }
}

.aboutGroup03 {
  margin-bottom: 38px;
}
@media screen and (max-width: 640px) {
  .aboutGroup03 {
    /*640px以下の場合*/
    margin-bottom: 0;
  }
}

.aboutGroup02 {
  margin-bottom: 62px;
}
@media screen and (max-width: 640px) {
  .aboutGroup02 {
    /*640px以下の場合*/
    margin-bottom: 0;
  }
}

.aboutGroup03 .aboutBox {
  width: 890px;
  margin-right: 0;
}
@media screen and (max-width: 640px) {
  .aboutGroup03 .aboutBox {
    /*640px以下の場合*/
    width: auto;
  }
  .aboutGroup03 .aboutBox a {
    width: 227px !important;
  }
}

.aboutBox {
  float: left;
  width: 430px;
  color: #000;
  margin-right: 30px;
}
@media screen and (max-width: 640px) {
  .aboutBox {
    /*640px以下の場合*/
    float: none;
    clear: left;
    width: 100%;
    margin-right: 0;
  }
}
.aboutBox h3 {
  font-size: 121%;
  color: #000000;
  margin-bottom: 14px;
  padding: 7px 10px 8px 18px;
  line-height: 1;
  background: url(../images/pc_line_purple.gif) no-repeat 6px 6px #eaeaea;
}
@media screen and (max-width: 640px) {
  .aboutBox h3 {
    /*640px以下の場合*/
    font-size: 100%;
    line-height: 1.2;
    font-weight: bold;
    padding-top: 14px;
    padding-bottom: 14px;
    background: url(../images/pc_line_purple.gif) no-repeat 6px 12px #eaeaea;
  }
}
.aboutBox .thumbnail {
  float: left;
  margin-right: 10px;
}
@media screen and (max-width: 640px) {
  .aboutBox .thumbnail {
    /*640px以下の場合*/
    margin-bottom: 25px;
  }
  .aboutBox .thumbnail a.colorbox {
    width: 154px;
    color: #fff;
    text-align: center;
    border-bottom: 2px solid #730952;
    display: block;
    padding: 5px 0 5px 0;
    color: #fff;
    font-size: 120%;
    text-decoration: none;
    background-color: #a90b79;
  }
  .aboutBox .thumbnail a.colorbox:visited, .aboutBox .thumbnail a.colorbox:hover {
    color: #fff;
    text-decoration: none;
  }
  .aboutBox .thumbnail a.colorbox span {
    padding-left: 26px;
    background: url(../images/sp_icon_zoom.gif) no-repeat;
  }
}
@media screen and (max-width: 640px) {
  .aboutBox .thumbnail {
    /*320px以下の場合*/
  }
  .aboutBox .thumbnail img {
    width: 77px !important;
  }
  .aboutBox .thumbnail a.colorbox {
    overflow: hidden;
    width: 77px !important;
    font-size: 71%;
  }
  .aboutBox .thumbnail a.colorbox span {
    padding-left: 12px;
    background: url(../images/sp_icon_zoom.gif) no-repeat;
    -webkit-background-size: 8px 10px;
    -moz-background-size: 8px 10px;
    background-size: 8px 10px;
  }
}
.aboutBox .detail {
  float: left;
  width: 576px;
}
@media screen and (max-width: 640px) {
  .aboutBox .detail {
    /*640px以下の場合*/
    float: none;
    width: auto;
  }
}
.aboutBox p {
  line-height: 1.5;
  margin-bottom: 16px;
  padding-top: 8px;
}
.aboutBox p span {
  font-size: 78%;
}
.aboutBox p em {
  color: #a90b79;
}

/* 今すぐダウンロード
========================================================== */
.appDownload {
  margin-bottom: 20px;
  padding: 15px 39px;
  background-color: #eaeaea;
}
@media screen and (max-width: 640px) {
  .appDownload {
    /*640px以下の場合*/
    background-color: transparent;
    text-align: center;
    padding: 0;
  }
  .appDownload img {
    max-width: 100% !important;
  }
  .appDownload li {
    margin-bottom: 10px;
  }
}
.appDownload .appList {
  margin-bottom: 18px;
}
.appDownload .appList li {
  float: left;
}
.appDownload .appList li:first-child {
  margin-right: 30px;
}
@media screen and (max-width: 640px) {
  .appDownload .appList li:first-child {
    /*640px以下の場合*/
    margin-right: 0px;
  }
}
@media screen and (max-width: 640px) {
  .appDownload .appList li {
    /*640px以下の場合*/
    float: none;
    margin-bottom: 20px;
  }
}
.appDownload .attention {
  text-align: left;
  font-size: 71%;
  line-height: 1.6;
  color: #cb0202;
}
.appDownload .attention li {
  text-indent: -10px;
  padding-left: 10px;
}

/* ==========================================================
 name  :module
========================================================== */
img {
  vertical-align: top;
}

.sp {
  display: none;
}
@media screen and (min-width: 641px) {
  .sp {
    /*640px以上の場合*/
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .sp {
    /*640px以下の場合*/
    display: block;
  }
}

@media screen and (max-width: 640px) {
  .pc {
    /*640px以下の場合*/
    display: none;
  }
}

/* margin layout
========================================================== */
.mR10 {
  margin-right: 10px;
}

.mL10 {
  margin-left: 10px;
}


.mt0 {
  margin-bottom: 0px;
}

.mB10 {
  margin-bottom: 10px;
}

.mT10 {
  margin-bottom: 10px;
}

.mt40 {
  margin-top: 40px;
}

.left {
  text-align: left;
}

/* float
========================================================== */
.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.clearLeft {
  clear: left;
}

.clearRight {
  clear: right;
}

.clearBoth {
  clear: both;
}

#CONTENTS {
  padding-bottom: 0;
}

/*20130729追加*/
/* etc */
#EVENT {
  border-bottom: 1px dotted;
  border-color: #CCC;
  padding: 40px 0 10px 15px;
  text-align: left;
  background: #FFFFFF;
}

/* template_superscription */
#PAGE {
  background-image: url(../images/bg_05.gif);
  background-position: 0 0;
  background-repeat: no-repeat;
  padding: 10px 0pt 10px;
}

#PAGE .back,
#PAGE .top {
  display: inline;
  /* IE6 */
}

/*20130729追加ここまで*/