@charset "UTF-8";

body {
  background: #191919;
  color: #FFFFFF;
  font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  
  -webkit-touch-callout: none;
  
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
}

*:not(input, textarea, select){
  -khtml-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

input[type="email"], input[type="password"], input[type="text"] {
  font-size: 14px;
  height: 30px;
  line-height: 16px;
}

input[type="checkbox"] {
  -webkit-transform: scale(1.4);
  border:none;
  transform: scale(1.4);
}

a {
  color: #FFFFFF;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a.underline {
  color: #FFFFFF;
  text-decoration:underline;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.div-link {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.clear { clear: both; }

p {
  line-height: 1.7;
  margin: 0;
}

audio, video {
  background-color: #373834;
  color: #000000;
  cursor: pointer;
  #height: auto;
  margin: 5px 0;
  width: 90%;
}

/****************************** hn ******************************/
h1 {
  font-size: 120%;
  margin: 0;
  padding: 0;
}

h2 {
  display: none;
  font-size: 120%;
  margin: 0;
  padding: 0;
  #text-indent: -9999px;
}

.h2 {
  background-color: #9933FF;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
  width: 96%;
}

/****************************** 文字 ******************************/
.font-small { font-size: 80%; }
.font-large { font-size: 140%; font-weight: bold}
.font-bold { font-size: 100%; font-weight: bold}

.red { color: #FF3333; }
.orange { color: #FF9933; }
.purple  { color: #9933FF; }
.white  { color: #FFFFFF; }
.black  { color: #000000; }

/****************************** 区切り線 ******************************/
.hr-dash {
  border:none;
  border-top:dashed 1px #CCCCCC;
  height:1px;
  margin: 3px 0px;
}

.hr-green {
  border:none;
  border-top:solid 1px #008000;
  height:1px;
  margin: 3px 0px;
}

.hr-blue {
  border:none;
  border-top:solid 1px #4169e1;
  height:1px;
  margin: 3px 0px;
}

.hr-gray {
  border:none;
  border-top:solid 1px #808080;
  height:1px;
  margin: 3px 0px;
}

/****************************** ボタン ******************************/
.button1 {
  #border: 1px #CCCCCC solid;
  float: left;
  height: 63px;
  #margin: 4px;
  padding: 0px;
  position: relative;
  #text-align: center;
  #width: 130px;
  width: 50%;
}

.button2 {
  background-color: #9966FF;
  border: 1px #FFFFFF solid;
  float: left;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: center;
  width: 25%;
  height: 40px;
}

.pagerSp2 {
  height: 50px;
  margin: 0px auto;
  padding: 0px;
  width: 90%;
}

.prevButton {
  background-image: url("../img/sp/back01.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
  text-align: center;
  width: 50%;
  height: 40px;
}

.prevButtonNon {
  background-image: url("../img/sp/back02.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 50%;
  height: 40px;
}

.nextButton {
  background-image: url("../img/sp/next01.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 50%;
  height: 40px;
}

.nextButtonNon {
  background-image: url("../img/sp/next02.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 50%;
  height: 40px;
}

ul.allow-list {
  background-color: #191919;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  width: 98%;
}

ul.allow-list li {
  background-color: #222222;
}

li a.arrow {
  display: block;
  position: relative;
  #border-bottom: 1px solid #000000;
  border: solid 1px #7f7f7f;
  margin-bottom: 5px;
  padding: 11px 25px 11px 5px;
  color: #f5f5f5;
  text-decoration: none;
}
li a.arrow:after {
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-top: solid 2px #7f7f7f;
  border-right: solid 2px #7f7f7f;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}

ul.allow-list2 {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  text-align: center;
  width: 98%;
}

li a.arrow2 {
  display: block;
  position: relative;
  padding: 11px 25px 11px 11px;
  color: #FFFFFF;
  text-decoration: none;
}
li a.arrow2:after {
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  width: 20px;
  height: 20px;
  margin-top: -4px;
  border-top: solid 4px #ffd700;
  border-right: solid 4px #ffd700;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}

.pagerSp {
  height: 50px;
  #margin: 5px;
  margin: 0px auto;
  padding: 0px;
  width: 90%;
}

.prevButton2 {
  background-image: url("../img/sp/back_small01.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 33%;
  height: 40px;
}

.prevButton2Non {
  background-image: url("../img/sp/back_small02.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 33%;
  height: 40px;
}

.centerIndex {
  background-image: url("../img/sp/list.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 33%;
  height: 40px;
}

.nextButton2 {
  background-image: url("../img/sp/next_small01.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 33%;
  height: 40px;
}

.nextButton2Non {
  background-image: url("../img/sp/next_small02.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 33%;
  height: 40px;
}

div#common-regist-button {
  background-image: url("../img/sp/login_regist.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  margin: 0 auto;
  padding: 0px;
  position: relative;
  width: 96%;
  height: 56px;
}

.pad2 {
	padding:2px;
}

.pad5 {
	padding:5px;
}

.pad10 {
	padding:10px;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

/****************************** 件数表示 ******************************/
div.list-count {
  height: 20px;
  margin: 5px 0px;
  #padding: 5px;
  width: 100%;
}

div.list-count-left {
  float: left;
  #padding: 5px;
  text-align: right;
  width: 50%;
}

div.list-count-right {
  float: left;
  #padding: 5px;
  text-align: left;
  width: 50%;
}

/****************************** コンテナー ******************************/
div#container {
  height: 100%;
  position: relative;
  width: 100%;
}

/****************************** パンくず ******************************/
div#breadcrumbs {
  background-image: url("../img/sp/bg_gray.png");
  margin: 0px 0px 5px 0px;
  padding: 5px;
}

/****************************** ヘッダー ******************************/
header {
  margin: 0px 0px 0px 0px;
  padding: 0px;
  position: relative;
  width: 100%;
}

div#header-h1 {
  background-image: url("../img/sp/header_title02.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 68%;
  height: 46px;
  top: 0;
  left: 0;
}

div#header-h1-1 {
  background-image: url("../img/sp/header_title03.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 68%;
  height: 46px;
  top: 0;
  left: 0;
}

div#header-regist {
  background-image: url("../img/sp/header_regist.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  height: 46px;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 16%;
}

div#header-login {
  background-image: url("../img/sp/header_login.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  height: 46px;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 16%;
}

div#header-mypage {
  background-image: url("../img/sp/header_mypage.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  height: 46px;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 16%;
}

div#header-menu {
  background-image: url("../img/sp/header_menu.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  float: left;
  height: 46px;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 16%;
}


/****************************** フッター ******************************/
.footer {

}

.footer-page-top {
  padding:10px 5px 10px 5px;
  text-align: right;
  font-size: 16px;
}

.footer-site-top {
  text-align: center;
  font-size: 16px;
  padding-bottom: 5px;
}

.footer-page-top a {
  color: #fff;
}

.footer_link {
	color: #000;
	background-image: url("../img/sp/bg_gray.png");
	padding: 10px 5px 5px 05px;
	text-align: center;
	line-height: 30px;
}

.footer_link a {
  color: #000;
  margin: 5px 0 0 0;
}

.footer-copyrights {
  color: #ffffff;
  font-size:13px;
  padding-top:10px;
  text-align: center;
}
.footer_page_text {
  color: #ffffff;
  padding:5px 0 5px 10px;
  text-align: left;
}

/****************************** 会員登録はこちら ******************************/
div#membership-info {
  margin: 0 auto;
  padding: 0px;
  position: relative;
  width: 100%;
}

.membership-info-bg {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

div#membership-button {
  background-image: url("../img/sp/common_regist_btn.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  bottom: 12%;
  left: 7%;
  margin: 0 auto;
  padding: 0px;
  position: absolute;
  width: 86%;
  height: 52px;
  z-index: 99;
}

ul#membership-info-detail {
  color: #FF3333;
  list-style: disc;
  margin: 2px;
  padding-left: 15px;
}

div#membership-info-here {
  padding: 5px;
  width: 80%;
}
/****************************** お問い合わせ ******************************/
.inquiry_title {
  background:#4B088A;
  color:fff;
  padding: 10px;
  vertical-align: middle;
  font-weight: bold;
  border-top-right-radius: 30px 30px;
}
.inquiry_sub_title {
  color:#000;
  vertical-align: middle;
  font-weight: bold;
  width: 95%;
}
.inquiry_title_text {
  padding: 5px 5px 5px 5px;
  color:#fff;
  vertical-align: middle;
}
.inquiry_input_area{
  padding: 5px 5px 5px 5px;
  width: 98%;
}
.inquiry_select_box{
	font-size: 14px;
	height:40px;
	width: 100%;
}
.inquiry_text_area{
	font-size: 14px;
	height:95px;
	width: 98%;
}
.inquiry_text{
	font-size:14px;
	height:30px;
	width: 97%;
	padding-right: 2px;
}
.inquiry_text_conf{
	font-size:14px;
	padding: 10px 10px 10px 20px;
	width: 91%;
}

/****************************** サイト説明 ******************************/
.info_tbl_td_left {
    width: 45px;
    vertical-align: top;
    padding-right: 5px;
}
.info_tbl_td_right {
    vertical-align: top;
    padding-bottom: 10px;
}
.info_contents_title {
    font-weight: bold;
    text-align: left;
    font-size: 16px;
    padding-bottom: 5px;
}

/****************************** プロフィール ******************************/
.ptofile_title {
  background-image: url("../img/sp/bg_gray.png");
  color:#fff;
  padding: 10px 10px 10px 10px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}
.ptofile_text {
  padding: 10px 5px 10px 5px;
  text-align:left;
}
.ptofile_text a{
    color:#0000FF;
}
.ptofile_site_title {
  padding: 5px 0 0 5px;
  text-align:left;
  font-weight: bold;
}
.ptofile_site_url {
  padding: 5px 0 0 10px;
  text-align:left;
}
/****************************** プライバシーポリシー ******************************/
.privacy_text {
    padding: 5px;
}
.privacy_list {
    border: 1px solid;
    border-collapse: collapse;
    width: 98%;
}
.privacy_list td{
    border: 1px solid;
    padding: 5px;
}
/****************************** 利用規約 ******************************/
.rule_title {
    padding: 5px;
    font-weight: bold;
}
.rule_text {
    padding: 0 0 5px 10px;
}
.rule_sub_text {
    padding: 0 5px 5px 15px;
}
/****************************** クイズ ******************************/
.quiz_title {
  background: #642EFE;
  height: 18px;
  vertical-align: middle;
  font-weight: bold;
  padding: 10px 10px 10px 10px;
  border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px;
  width:92%;
}
.quiz_area_top {
  height: auto;
  background-image: url("../img/sp/bg_gray.png");
  padding: 10px 10px 1px;
  text-align: center;
  font-weight: bold;
  color:#fff;
  width:92%;
}
.quiz_area_top_list {
  height: auto;
  background-image: url("../img/sp/bg_gray.png");
  padding: 10px 10px 1px;
  text-align: center;
  font-weight: bold;
  color:#fff;
  width:92%;
  border-top: solid 1px #fff;
}
.quiz_area_button {
  height: 30px;
  background-image: url("../img/sp/bg_gray.png");
  padding: 10px 10px 15px 10px;
  text-align: center;
  font-weight: bold;
  color:#fff;
  width:92%;
}
.quiz_left {
  float:left;
  width: 110px;
}
.quiz_right {
  float:right;
  width: 130px;
}
.quiz_list_title {
  background-image: url("../img/sp/bg_gray.png");
  color: #fff;
  padding: 10px;
  text-align: left;
  border-top: solid 1px #fff;
  width:92%;
  text-align: right;
  #font-weight: bold;
}
.quiz_footer_button {
  padding:5px 10px 0 10px;
  width:131px;
}
.quiz_check {
  padding :10px;
  color: #fff;
}
/****************************** エラーページ ******************************/

.error {
	text-align:center;
}

.error .error-message {
	margin-bottom:20px;
}

.error .error-message img {
	margin-bottom:10px;
}

.error .error-message p {
	text-align:left;
}

.error .error-btn img {
	margin-bottom:20px;
}

/****************************** メニュー ******************************/
#overlay-menu{
  display: none;
  width: 100%;
  height:100%;
  text-align: center;
  position: fixed;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.75);
  overflow-y:auto;
}

div#menu-container {
  #height: 100px;
  margin: 0 auto;
  padding: 5px;
  width: 96%;
}

div.menu-title {
  margin-top: 10px;
  #text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6), -1px -1px 1px rgba(255, 255, 255, 0.5);
  width: 100%;
}

#div.menu-button-long {
#  background-color: #6699FF;
#  border: solid 1px #ffffff;
#  height: 46px;
#  margin: 0 auto;
#  padding: 0px;
#  position: relative;
# width: 80%;
#}

div.menu-button-long {
  background-image: url("../img/sp/spwords_cat01.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  height: 46px;
  margin: 0 auto;
  padding: 0px;
  position: relative;
  width: 80%;
}

div.menu-button-long2 {
  background-color: #6699FF;
  border: solid 1px #ffffff;
  float: left;
  height: 46px;
  margin: 0 auto;
  padding: 0px;
  position: relative;
  width: 30%;
}

div.menu-button-short {
  background-color: #6699FF;
  border: solid 1px #ffffff;
  height: 46px;
  float: left;
  margin: 0 auto;
  padding: 5px;
  position: relative;
  width: 20%;
}

div#button-container {
  margin: 0 auto;
  padding: 0px;
  width: 100%;
}

.area {
  display: box;
  display: -webkit-box;
  display: -moz-box;

  box-pack: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;

  #border: 1px solid #ccc;
  #border-radius: 5px;
  #width: 100%;
}

.item {
  background-color: #ffff77;
  width: 70px;
  height: 40px;
  #font-size: 32px;
  #line-height: 100px;
  text-align: center;
  position: relative;
  margin: 10px;
}

.item1 {
  background-image: url("../img/sp/movie_cat01.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}

.item2 {
  background-image: url("../img/sp/movie_cat02.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}

.item3 {
  background-image: url("../img/sp/movie_cat04.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}

.item4 {
  background-image: url("../img/sp/movie_cat03.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}

.item5 {
  background-image: url("../img/sp/movie_cat05.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}

.item6 {
  background-image: url("../img/sp/movie_cat06.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}

.item7 {
  background-image: url("../img/sp/movie_cat07.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}

.item8 {
  background-image: url("../img/sp/movie_cat08.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}

.item0 {
  background-image: url("../img/sp/movie_cat09.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}

.item11 {
  background-image: url("../img/sp/training_cat01.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}
.item12 {
  background-image: url("../img/sp/training_cat02.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}
.item13 {
  background-image: url("../img/sp/training_cat03.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}
.item14 {
  background-image: url("../img/sp/training_cat04.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}
.item15 {
  background-image: url("../img/sp/training_cat05.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}
.item16 {
  background-image: url("../img/sp/training_cat06.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}

.item21 {
  background-image: url("../img/sp/quiz_cat01.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}
.item22 {
  background-image: url("../img/sp/quiz_cat02.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}
.item23 {
  background-image: url("../img/sp/quiz_cat03.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}
.item24 {
  background-image: url("../img/sp/quiz_cat04.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}
.item25 {
  background-image: url("../img/sp/quiz_cat04.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 80px;
  height: 40px;
  position: relative;
  margin: 10px;
}

.close {
  background-color: #eed;
  border-radius: 50%;
  box-shadow: 1px 1px 1px #ddc inset;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  height: 20px;
  line-height: 16px;
  text-align: center;
  text-shadow: 1px 1px 0 #fff;
  top: 10px;
  position: absolute;
  right: 10px;
  width: 20px;
}

.free-label {
  background-image: url("../img/sp/freelabel.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  left: 0px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 0px;
  width: 40px;
  height: 40px;
}

.image-container {
  margin: 0px;
  padding: 0px;
  position: relative;
}

.oval {
  background: #B22222;
  border-radius: 50px / 45px;
  -moz-border-radius: 50px / 45px;
  -webkit-border-radius: 50px / 45px;
  padding: 3px;
}