@charset "utf-8";

#container {
	border: 0 solid #000; background-color: #f6f6f6; padding: 40px 0;
}

#container>div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#mainContents {
	width: 70%; padding: 20px; overflow: hidden; background-color: #fff; border-radius:0px;
}

#rightContents {
	width: 30%; padding: 0 0 0 40px; overflow: hidden; z-index: 999;
}


@media screen and (min-width:0px) and (max-width:959px) {

	#container div.wrap {
		padding: 0;
	}

	#mainContents {
		width: 100%;
		padding: 10px;
	}

	#rightContents {
		display: none;
	}
}


/**header=============================**/

header {background-color: #fff; margin-bottom: 0px; padding: 0; border-bottom: 1px solid #000; }
header .wrap {padding: 10px;}
header ul {float: right;}
header ul li {float: right;}
header ul li a {color: #000;display: block; box-sizing: border-box; border-color: #000; border-style: solid; font-weight: bold;}
header ul li img {cursor: pointer; display: none;}

header ul li#menuMyPage {display: block;}

#headerPoint {float: right; background-color: #fff; text-align: center; padding: 1px; border: 1px solid #ccc;}
#headerPoint h6 {background-color: #B4B4B4; color: #fff; font-weight: bold; float: left; padding: 0 10px;}
#headerPoint span {display: inline-block; float: left; font-weight: bold;}


@media screen and (min-width:0px) and (max-width:425px) {
	header img {height: 26px;}
	header ul li img {height: 12px; display: inline; margin-left: 5px;}
	header ul li {line-height: 26px;}
	header ul li a {border-width: 1px; padding: 0 4px; margin: 0 2px; font-size:11px;}

	#headerPoint {height: 26px;}
	#headerPoint h6 { line-height: 22px;}
	#headerPoint span {padding: 0 10px; line-height: 22px;}

}

@media screen and (min-width:426px) and (max-width:768px) {
	header img {height: 40px;}
	header ul li img {height: 20px; display: inline; margin-left: 10px;}
	header ul li {line-height: 40px;}
	header ul li a {border-width: 1px; padding: 0 14px; margin: 0 4px; }

	#headerPoint {height: 40px;}
	#headerPoint h6 {line-height: 36px;}
	#headerPoint span { padding: 0 10px; line-height: 36px;}

}
@media screen and (min-width:769px) {
	header img {height: 50px;}
	header ul li {line-height: 50px;}
	header ul li a {border-width: 2px; padding: 0 20px; margin: 0 4px; }

	#headerPoint {display: none;}
}

nav {display: none;}
nav#spMenu {position: fixed; top:0; left:0; background-color: rgba(255,255,255,1); width: 100%; padding: 40px; z-index: 999;}
nav#spMenu ul li {
	text-align: left;
	margin-left: 20%;
}
nav#spMenu ul li:not(:last-child) {
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
nav#spMenu ul li img {	margin-right: 10px; height: 20px;}

nav#spMenu div {overflow: hidden; position: relative; border: 0 solid #000; margin-bottom: 20px; }
nav#spMenu div h6 {text-align: center; overflow: hidden;  border: 0 solid #000;}
nav#spMenu div img {position: absolute; top:0; right:0; cursor: pointer;}

@media screen and (min-width:0px) and (max-width:425px) {
	nav#spMenu div h6 {font-size: 16px; line-height: 24px;}
	nav#spMenu div img {height: 16px; top:4px;}
	nav#spMenu ul li a {font-size: 14px;}
	nav#spMenu ul li img {	width: 16px;}
}

@media screen and (min-width:426px) and (max-width:768px) {
	nav#spMenu div h6 {font-size: 20px; line-height: 30px;}
	nav#spMenu div img {height: 24px; top:3px;}
	nav#spMenu ul li a {font-size: 16px;}
	nav#spMenu ul li img {	width: 20px;}
}





/**#rightContents========================================**/

#rightContents ul.menu li {
	padding-left: 10px;
}
#rightContents ul.menu li:not(:last-child) {
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

#rightContents ul.menu li img {
	margin-right: 10px;
	height:  20px;
}

#rightContents ul.menu {background-color: #fff; padding: 20px 20px 20px 20px; border-radius: 0px; margin-bottom: 20px;}

#rightContents ul.menu li a {font-size:20px;}
#rightContents ul.menu li a:hover {text-decoration: none;}

.rightInfo {padding: 2px; border: 2px solid #ccc; border-radius: 4px; background-color: #fff; text-align: center; margin-bottom: 20px;}
.rightInfo h6 {background-color: #B4B4B4; font-size: 16px; color: #fff; font-weight: bold; line-height: 40px;}
.rightInfo span {display: block; line-height: 60px; font-weight: bold; }

#rightContents ul.banner {
	background-color: #fff;
	padding: 10px;
}

#rightContents ul.banner li img {
	width: 100%;
}

#rightContents ul.banner li:not(:last-child) {
	margin-bottom: 10px;
}

#mainContents ul.banner {
	text-align:center;
	background-color: #fff;
	margin-top: 15px;
	padding: 10px;
}

#mainContents ul.banner li img {
	width: 75%;
}

#mainContents ul.banner li:not(:last-child) {
	margin-bottom: 10px;
}

/**#footer========================================**/


footer {margin-top: 0; background-color: #eee; border: 0 solid #f00;}

footer ul {
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
footer ul li {color:#000; text-align: center; padding: 10px 0;}
footer ul li a {font-size: 12px; display: inline-block; width: 100%; color: #000; border-right: 1px solid #aaa;}

footer p {color: #fff; text-align: center; background-color: #000; padding: 20px 0; margin: 0;}


nav#spFooterMenu {position: fixed; bottom:0; left:0; background-color: rgba(255,255,255,1); width: 100%; padding: 0; z-index: 999;}

nav#spFooterMenu ul {
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
}
nav#spFooterMenu ul li {width: 25%; text-align: center;}

nav#spFooterMenu ul li:not(:last-child) {
	border-right: 1px solid #ccc;
}
nav#spFooterMenu div {
	text-align: center;
}
nav#spFooterMenu img {
	height: 16px;
	display: block;
	margin: 0 auto 10px auto;
}
nav#spFooterMenu span {
	color: #000;
	display: block;
}
nav#spFooterMenu a {
	display: block;
	padding: 10px;
}

@media screen and (min-width:0px) and (max-width:768px) {
	footer {margin-bottom: 60px;}
	nav#spFooterMenu {display: block;}
}

@media screen and (min-width:0px) and (max-width:425px) {
	footer ul li {width: 50%; color:#000; text-align: center; padding: 10px 0;}
	footer ul li a {font-size: 11px;}
	footer p {font-size: 11px;}

	footer ul li:nth-of-type(2) a {border-width: 0;}
	footer ul li:nth-of-type(4) a {border-width: 0;}
	footer ul li:nth-of-type(6) a {border-width: 0;}

	nav#spFooterMenu span {font-size: 10px;}
}

@media screen and (min-width:426px) and (max-width:768px) {
	footer ul li {width: 33%; color:#000; text-align: center; padding: 10px 0;}
	footer ul li a {font-size: 12px;}
	footer p {font-size: 11px;}

	footer ul li:nth-of-type(3) a {border-width: 0;}
	footer ul li:nth-of-type(6) a {border-width: 0;}

}
@media screen and (min-width:769px) {
	footer ul li {width: 16.66%; }
	footer ul li a {font-size: 12px;}
	footer p {font-size: 14px;}
}


/***common style**/

h3 {color:#fff; padding:10px 10px; margin-bottom: 30px; background-color: #000; border-radius: 0; letter-spacing: 0;}
h3:before {color: #f00; margin-right: 10px;}
h3:first-letter {color: #f00;}

h4 {margin-bottom: 20px; border-bottom: 2px dashed #E5E5E5; padding-bottom: 10px; color: #60676F;}
h4:before {content: "・"; margin-right:10px;}

h5 {margin-bottom: 20px; border-bottom: 2px dashed #E5E5E5; padding-bottom: 10px; color: #60676F;}
h5:before {content: "・"; margin-right:10px;}
h5+p {padding-top: 10px; padding-left: 10px;}

p {line-height: 150%; margin-bottom: 40px; letter-spacing: 0.1em;}

.l-link {background-color: #D33333; color: #fff; display: block; text-align: center; pfont-weight: bold; width: 90%; margin: 0 auto;}
.l-link:not(:last-child) {margin-bottom: 20px;}

.s-link {color: #D33333; text-decoration: underline; font-weight: bold; }

div.more {text-align: right; margin-bottom: 20px; padding-right: 0;}
div.more a {display: inline-block; padding: 10px 40px; border: 2px solid #ccc; color: #000; border-radius: 0;}

#gamesc-h {background-color: #000; padding: 0; margin-bottom: 0; overflow: hidden;}
#gamesc-h img {width: 100%;}
#gamesc-h p {color: #fff; text-align: center; border-top:1px #fff solid; margin: 0;}

@media screen and (min-width:0px) and (max-width:425px) {
	#gamesc-h p {font-size: 12px;}
}

#gamesc-v {background-color: #000; padding: 20px; margin-bottom: 0; overflow: hidden;}
#gamesc-v img {width: 50%; margin: 0 auto;}
#gamesc-v p {color: #fff; text-align: center; border-top:1px #fff solid; margin: 0;}

dl.dl dt {border: 2px solid #000; background-color: #939393; color: #fff; padding: 10px 0; text-align: center; font-weight: bold;}
dl.dl dd {border: 2px solid #000; margin-top:-2px; margin-bottom: 40px; padding: 10px 0; text-align: center;}
dl.dl dd span {display: block; margin-bottom: 20px;}

/***お知らせ一覧 style**/

ul.news {padding: 0 20px;}
ul.news li {border-bottom: 3px dashed #E5E5E5; padding-bottom: 20px; margin-bottom: 20px;}
ul.news li span {display: block; margin-bottom: 10px; color: #60676F; font-weight: bold; font-size: 24px;}
ul.news li a {display: block; color: #000; text-decoration: underline; }

@media screen and (min-width:0px) and (max-width:425px) {
	ul.news {padding: 0 10px;}
	ul.news li span {margin-bottom: 0;}
	ul.news li {border-bottom-width: 1px; padding-bottom: 10px; margin-bottom: 10px;}
}





/***ゲーム一覧 style**/

#games h6 {border-bottom: 1px solid #ccc; padding-bottom: 4px; margin-bottom: 10px;}
#games h6:before {border-left: 4px solid #D33333; content: ""; width: 4px; height: 100%; border-radius: 2px; margin-right: 10px;}

#games ul {overflow: hidden; padding: 0 0;}
#games ul li {border: 1px solid #ccc; padding: 0; margin-bottom: 20px; position:relative;}

#games ul li a {overflow: hidden; display: block;}
#games ul li img {float: left;}
#games ul li div {overflow: hidden;}
#games ul li h2 {color: #000; margin: 0;}
#games ul li span {display: inline-block; background-color: #000; color: #fff; margin: 0;}
#games ul li p {color: #000; margin: 0; }

#games ul li div.arrow {
	position:absolute;bottom:0;right:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 40px 40px;
	border-color: transparent transparent #d33333 transparent;
	padding: 0;
}

@media screen and (min-width:0px) and (max-width:425px) {
	#games ul li img {height: 100px;}
	#games ul li div {padding: 5px;}
	#games ul li h2 {font-size: 14px; margin-bottom: 5px;}
	#games ul li p {font-size: 12px; margin-bottom: 5px;}
	#games ul li span {font-size: 10px; padding: 0 4px;}
	#games ul li p:nth-of-type(2) {display: none;}

	#footerGames #games {padding: 10px;}
}

@media screen and (min-width:426px) and (max-width:768px) {
	#games ul li img {height: 120px;}
	#games ul li div {padding: 10px;}
	#games ul li h2 {font-size: 16px; margin-bottom: 5px;}
	#games ul li p {font-size: 14px; margin-bottom: 5px;}
	#games ul li span {font-size: 11px; padding: 0 4px;}
	#footerGames #games {padding: 10px 0 0 0;}
}
@media screen and (min-width:769px) {
	#games ul li img {height: 180px;}
	#games ul li div {padding: 10px;}
	#games ul li h2 {font-size: 18px; margin-bottom: 5px;}
	#games ul li p {font-size: 14px; margin-bottom: 10px;}
	#games ul li span {font-size: 11px; padding: 0 4px;}

	#footerGames #games {padding: 40px 0 20px 0;}

	#footerGames #games ul {overflow: hidden;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	}

	#footerGames #games ul li {width: calc(50% - 0px); margin-bottom: 0px;}
}

/**tab style**/

#tab_menu {border-bottom: 10px solid #B4B4B4; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden; margin-bottom: 40px;}
#tab_menu li {width: calc(50% - 10px); background-color: #B4B4B4; border-radius: 10px 10px 0 0; text-align: center; color: #fff; padding: 10px 0; font-weight: bold; cursor: pointer;}
#tab_menu li:nth-of-type(2) {background-color: #E5E5E5;}

.tab:nth-of-type(2) {display: none;}

/**faq style**/

p.q {background-color: #F2F8FF; padding: 10px 10px; color: #075590;}
p.a {padding: 0 10px;}

/**注意事項 style**/

div#notes {background-color: #F0F0F0; padding: 40px; margin-bottom: 40px;}
div#notes>span {display: block; color:#f00; font-weight: bold; margin-bottom: 20px; text-align: center; }
div#notes p {text-indent: -0.5em;padding-left: 0.5em; }
div#notes p:last-child {margin: 0;}

/**account service list google d au softbank style**/

ul#id {margin-bottom: 80px;}
ul#id li {margin-bottom: 20px; padding: 0; border-radius: 10px;}
ul#id li a {padding: 20px; display: block; overflow: hidden;}
ul#id li img {float:left; width: 25%; vertical-align: middle;}
ul#id li span {float:left;  display:block; width:75%; overflow: hidden; text-align: center; color:#fff; padding-top: 2%;}

ul#id li#gl {background-color: #0876EC;}
ul#id li#yh {background-color: #FFD238;}
ul#id li#dm {background-color: #CC0033;}
ul#id li#au {background-color: #EB5505;}
ul#id li#sb {background-color: #B9BDBF;}

@media screen and (min-width:0px) and (max-width:425px) {
ul#id li span { font-size: 14px;}
}

@media screen and (min-width:426px) and (max-width:768px) {
ul#id li span {font-size: 26px;}
}

/**同意 style**/
div#agreeInfo { border: 3px solid #C9C9C9; padding: 40px; margin-bottom: 20px; text-align: center; border-radius: 5px;}
div#agreeInfo label { line-height: 30px;}
div#agreeInfo p { margin-bottom: 10px;}
div#agreeInfo p a {color:#32A0EB;}


/**money配下のスタイル*/
#mbtn {margin-bottom: 80px;}


* {font-style:normal;}

@media screen and (min-width:0px) and (max-width:425px) {
	* {font-size:14px; }
}

@media screen and (min-width:426px) and (max-width:768px) {
	* {font-size:16px; }
}
@media screen and (min-width:769px) {
	* {font-size:26px; }
}

@media screen and (min-width:0px) and (max-width:425px) {
	h3 {font-size:16px; }
	h4 {font-size:14px; padding-bottom: 2px;}
	h5 {font-size:14px; }
	h4:before {margin-right:2px;}
	h5:before {margin-right:2px;}

	.l-link {font-size: 18px; padding: 10px 0; }
	.l-link:not(:last-child) {margin-bottom: 20px;}

	div.more a {font-size: 12px; padding: 5px 20px; border-width: 2px;}

	ul.news li span {font-size: 14px;}

	p.q {margin-bottom: 10px;}
	p.a {font-size: 14px;}

	div#notes {padding: 20px;}

	div#agreeInfo { padding: 20px;}
	div#agreeInfo p { font-size: 20px; margin-bottom: 10px;}
	div#agreeInfo p a { font-size: 16px;}
	div#agreeInfo label { font-size: 20px;}

	dl.dl dt {font-size: 20px;}
	dl.dl dd {font-size: 16px;}
}

@media screen and (min-width:426px) and (max-width:768px) {
	h3 {font-size:20px; }
	h4 {font-size:18px; }
	h5 {font-size:18px; }
	h4:before {margin-right:5px;}
	h5:before {margin-right:5px;}

	.l-link {font-size: 20px; padding: 10px 0; }
	.l-link:not(:last-child) {margin-bottom: 20px;}

	div.more a {font-size: 14px;}
	ul.news li span {font-size: 16px;}

	p.q {margin-bottom: 10px;}
	p.a {font-size: 14px;}

	div#notes {padding: 20px;}

	div#agreeInfo { padding: 20px;}
	div#agreeInfo p { font-size: 20px; margin-bottom: 10px;}
	div#agreeInfo p a { font-size: 16px;}
	div#agreeInfo label { font-size: 20px;}

	dl.dl dt {font-size: 20px;}
	dl.dl dd {font-size: 16px;}
}
@media screen and (min-width:769px) {
	h3 {font-size:26px; }
	h4 {font-size:24px; }
	h5 {font-size:24px; }
	h4:before {margin-right:5px;}
	h5:before {margin-right:5px;}

	.l-link {font-size: 24px; padding: 10px 0; }
	.l-link:not(:last-child) {margin-bottom: 40px;}

	div.more a {font-size: 14px;}
	ul.news li span {font-size: 16px;}

	p.a {font-size: 20px;}

	div#notes {padding: 20px;}

	div#agreeInfo { padding: 20px;}
	div#agreeInfo p {margin-bottom: 10px; font-weight: bold;}
	div#agreeInfo p a {}
	div#agreeInfo label {}

	dl.dl dt {font-size: 20px;}
	dl.dl dd {font-size: 20px;}
}


/* ページトップへボタン */
#pageTop {
    border-radius: 50%;
    font-weight: bold;
    color: #3f3632;
    position: fixed;

    z-index: 999;
    background-color: #fff;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    border-style: solid;
    border-color: #3f3632;
}

#pageTop::before {
    content: '';
    background: url('/sp/file/img/comm/sys/img/arrw.svg') no-repeat center center;
    background-size: contain;
    transform: rotate(-90deg);
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

#pageTop:hover {
	transition-duration: .3s;
	opacity: 0.5;
}

@media screen and (min-width:0px) and (max-width:768px) {
	#pageTop {
	    border-width: 1px;
	    right: 10px;
	    bottom: 80px;
	    width: 50px;
	    height: 50px;
	    line-height: 60px;
	    font-size: 14px;
	}

	#pageTop::before {
	    top: 10px;
	    width: 10px;
	    height: 10px;
	}
}

@media screen and (min-width:769px) {
	#pageTop {
	    border-width: 3px;
	    right: 100px;
	    bottom: 120px;
	    width: 100px;
	    height: 100px;
	    line-height: 120px;
	    font-size: 26px;
	}

	#pageTop::before {
	    top: 20px;
	    width: 20px;
	    height: 20px;
	}
}