@charset "utf-8";

/* ------------------------------------------------------------ member */
.member {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
  max-width: 1100px;
  width: 100vw;
  background: #fff9f0;
  padding-bottom: 20px;
  margin: 10px 1px 10px 1px;
}
.member > a > img {
  width: 94vw;
  max-width: 500px;
}



/* ------------------------------------------------------------ flexcont */

.flexcont {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
  max-width: 1100px;
  width: 100vw;
  background: #fff9f0;
  padding-bottom: 20px;
  @media screen and (min-width: 768px){
    .br-sp {display: none; }
    }
}
.flexcont > .flex {
  display: flex;
  flex-wrap: wrap;
  width: 94vw;
  max-width: 500px;
  margin: 0;
  @media screen and (min-width: 768px){
    .br-sp {display: none; }
    }
}
.flexcont > .flex > h3 {
  color: #69c4bb;
  text-align :center;
  padding: 1px 0 10px;
  font-size: 50px;
  width: 100%;
  @media screen and (min-width: 768px){
    .br-sp {display: none; }
    }
}
.flexcont > .flex > img {
  width: 94vw;
  height: 66.4vw;
  max-width: 500px;
  max-height: 353.3px;
  @media screen and (min-width: 768px){
    .br-sp {display: none; }
    }
}


/* ------------------------------------------------------------ firstview */
#firstview { background: url(../images/common/bg_01.png) center top no-repeat; background-size: cover;}
#firstview h2 { padding: 108px 0 90px; padding: 108px 0 40px\9; text-align :center; font-size:62px; color:#fff; }
#firstview h2 span{ display: block; font-size: 24px;}


/* ------------------------------------------------------------ system-outer */
#system-outer { background: url(../images/index/bg_002.gif) center top; background-repeat: repeat; padding: 0 0 60px;  }
#system-outer .wrapper  { background-color: #fff; margin: 0 0 10px; padding:0 0 10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#system-outer h3 { font-size: 40px; color:  #64c0b8; text-align: center;  padding: 20px 0 20px 0; font-family: 'quicksandbold';}
#system-outer h3 span { display: block; font-size: 14px; color: #000;}
.timerake { text-align: center;}
/* ------------------------------------------------------------ system */
#system { font-size: 16px;}
#system .txt { margin: 20px 5%; }
#system table { text-align: center; width: 90%; margin: 20px auto 48px; background-color: #88ddd6;}
#system table th { color: #fff; border-left: 1px solid #88ddd6; padding: 16px 0;  }
#system table td { padding: 30px 0 40px 0;  background-color: #fff; border-left: 1px solid #88ddd6; border-bottom: 1px solid #88ddd6;}
#system table td:last-child { border-right: 1px solid #88ddd6;}
#system h4 { text-align: center; width: 90%; color: #fff; background-color:#88ddd6; display: block; margin: 20px auto; padding: 16px 0;}


/* ------------------------------------------------------------ rule */
#rule { font-size: 16px;}
#rule p.poker { text-align : center; margin: 0 0 67px;}
#rule #flow { margin: 20px 5%;}
#rule #flow li img	{ float:left; margin: 0px 50px 100px 0px; }
#rule #flow li h3 { text-align:left; color: #88ddd6; font-size: 24px; font-weight: bold; padding: 20px 0 40px;}
#rule #flow li h3 span { display:inline; color: #000; font-size: 20px; padding: 0 0 0 0.5em;}
#rule h4 { text-align: center; width: 90%; color: #fff; background-color:#88ddd6; display: block; margin: 20px auto; padding: 16px 0;}
#rule .list { margin: 20px 6%; }
#rule .list li { background:url(../images/system/li_01.png) no-repeat left 8px; padding: 4px 25px;}

/* ------------------------------------------------------------ manner */
#manner { font-size: 16px; background: url(../images/information/bg_01.gif) center top; background-repeat: repeat; padding: 0 0 80px; }
#manner p { color: #fff; text-align: center; margin: 0 0 40px 0;}
#manner h3 { font-size: 40px; color:  #fff; text-align: center;  padding: 60px 0 80px 0; font-family: 'quicksandbold';}
#manner h3 span { display: block; font-size: 14px; }
#manner .list { background-color:#fff; padding: 40px 40px 50px 40px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; position: relative;}
#manner .list li { background:url(../images/system/li_01.png) no-repeat left 8px; padding: 4px 25px;}
#manner .panda  { position: absolute; top: -10px; right: 5%; z-index: 1; }

.topPage    { padding: 50px 0 0 0;}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){

/* ------------------------------------------------------------ firstview */
#firstview { background: url(../images/common/bg_02.png) center top no-repeat; background-size: 150% auto;}
#firstview h2 { padding: 50px 0 40px; text-align :center; font-size: 30px; color:#fff; }
#firstview h2 span{ display: block; font-size: 18px;}


/* ------------------------------------------------------------ system-outer */
#system-outer { background: url(../images/index/bg_002.gif) center top; background-repeat: repeat; padding: 0 0 30px;  }
#system-outer .wrapper  { background-color: #fff; margin: 0 0 25px; padding:0 0 20px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#system-outer h3 { font-size: 26px; color:  #64c0b8; text-align: center;  padding: 30px 0 10px 0;}
#system-outer h3 span { display: block; font-size: 14px; color: #000;}


/* ------------------------------------------------------------ system */
#system { font-size: 14px;}
#system .txt { margin: 20px 5%; }
#system table { text-align: center; margin: 10px auto 20px; background-color: #88ddd6; width: 92%;}
#system table th { color: #fff; border-left: 1px solid #88ddd6; padding: 10px 0;  box-sizing: border-box; -webkit-box-sizing: border-box; border-right: 1px solid #88ddd6;}
#system table td { padding: 15px 0 20px 0;  background-color: #fff; border-left: 1px solid #88ddd6; border-bottom: 1px solid #88ddd6;  box-sizing: border-box; -webkit-box-sizing: border-box;}
#system table td:last-child { border-right: 1px solid #88ddd6;  box-sizing: border-box; -webkit-box-sizing: border-box;}
#system h4 { text-align: center; color: #fff; background-color:#88ddd6; display: block; margin: 10px auto; padding: 10px 0; width: 92%;}


/* ------------------------------------------------------------ rule */
#rule { font-size: 14px;}
#rule img { width: 100%; height: auto;}
#rule p.poker { text-align : center; margin: 20px 0 30px;}
#rule #flow { margin: 20px 3%;}
#rule #flow li img	{ float:none; margin: 0 0 15px; }
#rule #flow li h3 { text-align:left; color: #88ddd6; font-size: 20px; font-weight: bold; padding: 0 0 20px 0;}
#rule #flow li h3 span { display:inline; color: #000; font-size: 16px; padding: 0 0 0 0.5em;}
#rule h4 { text-align: center; width: 92%; color: #fff; background-color:#88ddd6; display: block; margin: 10px auto; padding: 10px 0;}
#rule #flow li p { padding: 0 0 15px;}
#rule .list { margin: 20px 3%; }
#rule .list li { background:url(../images/system/li_01.png) no-repeat left 8px; padding: 4px 0 4px 25px;}


/* ------------------------------------------------------------ manner */
#manner { font-size: 14px; background: url(../images/information/bg_01.gif) center top; background-repeat: repeat; padding: 0 0 40px; }
#manner p { color: #fff; text-align: center; margin: 0 0 20px 0;}
#manner h3 { font-size: 26px; color:  #fff; text-align: center;  padding: 30px 0 20px 0;}
#manner h3 span { display: block; font-size: 14px; }
#manner .list { background-color:#fff; padding: 20px 3%; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; position: relative; margin-top: 40px;}
#manner .list li { background:url(../images/system/li_01.png) no-repeat left 8px; padding: 4px 0 4px 25px; background-size: 15px auto;}
#manner .panda  { position: absolute; top: -60px; right: 5%; z-index: 1; width: 70px; height: auto;}

.topPage    { padding: 25px 0 0 0;}
}