@charset "utf-8";

/*---------------------------------------------------
　　基本共通
-----------------------------------------------------*/
body {
	background: rgb(229, 247, 255) url(/img/bg.png) top center;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	font-size: 13pt;
	line-height: 1.1;
	text-align: center;
	-webkit-text-size-adjust: 100%; /* iOS 横・縦向き文字サイズ対策 */
}

/*---　ヘッダー　---*/
header {
	width: 100%;
	background: rgb(255,255,255);
}

header .top {
	position: relative;
}

header .top::before {
    content: "";
    display: block;
    padding-top: 74.5%;
}

.badge {
	background: url(/img/badge_bg.png) top center repeat-x;
}

.badge ul li {
	display: inline-block;
	padding: 12px 0.5% 7px;
}

.badge ul li.iOSNode {
	width: 16.5%;
}

.badge ul li.androidNode {
	width: 20.03%;
}

.badge ul li img {
	width: 100%;
}

h1 {
	position: absolute;
	top: 0;
	width: 100%;
}

h1 img {
	width: 70%;
	animation: fade_down 0.5s forwards 1.5s;
}

.top p {
	width: 100%;
	position: absolute;
	top: 28%;
}

.top p img {
	width: 30%;
	animation: fade_in 1.5s forwards 2.5s;
}

.animated {
    opacity: 0;
    animation-timing-function: ease-in;
    animation-fill-mode: both;
}

@keyframes fade_down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade_in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*---　フッター　---*/
footer {
	color: rgb(255, 255, 255);
	background: rgb(0, 80, 131) url(/img/rules_bg.png);
	text-align: center;
	width: 100%;
}

footer #rules {
	padding: 1.5rem 0;
}

footer #rules ul {
	font-size: 0.85rem;
	bottom: 0;
	padding-bottom: 1rem;
}

footer #rules ul li {
	display: inline-block;
	border-right: rgb(255, 255, 255) 1px dotted;
	padding: 0 1rem;
	margin-bottom: .5rem;
}

footer #rules ul li:first-child {
	border-left: rgb(255, 255, 255) 1px dotted;
}

@media screen and (max-width: 480px){
	footer #rules ul {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}
	footer #rules ul li:nth-child(3) {
		border-left: rgb(255, 255, 255) 1px dotted;
	}
}

footer #copy {
	padding: 5px;
	background: rgb(0, 49, 69) url(/img/copy_bg.png);
	font-size: 0.6rem;
}

footer #copy p {
	padding: 5px;
}

footer a {
	color: rgb(255, 255, 255);
}

footer a:hover {
	color: rgb(255, 255, 255);
}

footer .goe_list {
	width: 90%;
	max-width: 300px;
}

footer hr {
	border-top: #8094a2 1px dotted;
	border-bottom: none;
	border-left: none;
	border-right: none;
	margin: 0;
	padding: 0;
}

/*---　ページTOP　---*/
#page_top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 800;
}

#page_top img {
	opacity: 0.7;
}

#page_top img:hover {
	opacity: 1;
}

@media screen and (min-width: 1000px){
header {
	background: rgba(255,255,255,1.00) url(/img/top.png) center top no-repeat;
}

.badge ul,
header .top {
	width: 1000px;
	margin: 0 auto;
}
}

@media screen and (max-width: 1000px){
header {
	background: rgb(255,255,255) url(/img/sp_top.png) center top no-repeat;
	background-size: 100%;
}

.badge ul,
header .top {
	width: 100%;
}
}

@media screen and (max-width: 420px){
.badge ul li.iOSNode {
	width: 29.7%;
}

.badge ul li.androidNode {
	width: 36.06%;
}

.goe_list {
	width: 85%;
}
}

/*-- main  --*/
main {
	margin: 0 auto;
	background: rgb(207,233,255) url(/img/main_bg.png) top center no-repeat;
	background-size: 100%;
}

main::after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: ".";
}

main h2 img {
	width: 64%;
}

main h3 {
	color: rgb(255, 255, 255);
	font-weight: 900;
	text-align: left;
	font-size: 1.7rem;
	background: rgb(0, 144, 198);
	border-radius: 1rem;
	margin-bottom: 0.7rem;
	padding: 0.5rem;
}

main h4 {
	color: rgb(0, 144, 198);
	font-weight: 900;
	text-align: left;
	font-size: 1.3rem;
	border-bottom:  rgb(0, 144, 198) 2px solid;
	padding: 0 0.5rem 0.3rem;
	margin: 0.4rem 0;
}

main h5 {
	color: rgb(0, 144, 198);
	font-weight: 900;
	text-align: left;
	font-size: 1.2rem;
}


@media screen and (min-width: 1000px){
main {
	width: 1000px;
}
}

@media screen and (max-width: 1000px){
main {
	width: 100%;
}
}

main #catch img {
	width: 100%;
}

.box {
	border: rgb(0, 144, 198) 6px solid;
	border-radius: 2rem;
	background-color: rgb(255, 255, 255);
	width: 96%;
	margin: 0 auto 5%;
	padding: 1.2rem 1.2rem 0.5rem;
}

/* 操作説明(operation)&遊び方(play)  */
#operation .detail,
#play .detail {
	display: none;
	padding-bottom: 1rem;
}

#operation h3,
#play h3 {
	cursor: pointer;
	text-indent: -1.6rem;
    padding-left: 2.1rem;
}

#operation h3:before,
#play h3:before {
	content: "＋ ";
}

#operation h3.active:before,
#play h3.active:before {
	content: "－ ";
}

#operation dl,
#play dl {
	padding-bottom: 1rem;
}

#operation dl:after,
#play dl:after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: ".";
}

#operation dl dt,
#play dl dt {
	padding-bottom: 1rem;
}

#operation dl dt main h5 {
	margin: 0 0 0.3rem 1.3rem;
	text-indent: -1.5rem;
}

#operation dl dt img,
#play dl dt img {
	width: 100%;
}

#operation dl dd,
#play dl dd,
#operation div > p,
#play div > p{
	text-align: left;
	padding: 0 0 0.7rem;
}

#operation dl dd p {
	margin: 0 0 0.3rem 1.5rem;
}

#play dl dd p {
	margin: 0 0 0.3rem;
}

#operation dl dd p.point,
#play dl dd ul.point {
	border-radius: 0.4rem;
	background: rgb(229, 244, 249);
	font-size: 0.85rem;
	padding: 0.4rem;
}

#play dl dd ul.point li {
	margin-left: 0.4rem;
	text-indent: -0.8rem;
	padding: 0.3rem;
}

#operation dl dd ul.notice li,
#play dl dd ul.notice li {
	color: rgb(0, 144, 198);
	font-size: 0.85rem;
	margin: 0.2rem 0 0.2rem 2.5rem;
	text-indent: -1rem;
}

#operation dl dd ul.notice li:before,
#play dl dd ul.notice li:before {
	content: "※";
}

#operation dl dd p span,
#play dl dd p span{
	color: rgb(0, 144, 198);
}

@media screen and (min-width: 450px){
#operation dl dt,
#play dl dt {
	width: 43%;
	float: left;
	clear: both;
}

#operation dl dd,
#play dl dd {
	width: 57%;
	float: right;
}
}

@media screen and (max-width: 450px){
main h3 {
	font-size: 1.3rem;
}

main h4 {
	font-size: 1.2rem;
}

main h5 {
	font-size: 1.1rem;
}
}


/* spec */
#spec {
	border-radius: 2rem;
	background-color: rgb(255, 255, 255);
	width: 96%;
	margin: 0 auto 5%;
	padding: 2rem;
	font-size: 0.85rem;
}

#spec::after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: ".";
}

#spec icon {
	float: left;
}

#spec dl dt {
	float: left;
	width: 17%;
	height: auto;
}

#spec dl dt img {
	width: 100%;
}

#spec dl dd {
	float: right;
	width: 81%;
	margin-bottom: 10px;
}

#spec dl dd.ttl {
	color: rgb(0, 144, 198);
	font-weight: 900;
	font-size: 1.6rem;
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	line-height: 1;
}

#spec dl dd br {
	display: none;
}

#spec dl dd ul li {
	display: inline;
	padding: 0.2rem;
}

#spec dl dd ul li.iOSNode img {
	width: 26.4%;
}

#spec dl dd ul li.androidNode img {
	width: 32.05%;
}

@media screen and (min-width: 800px){
#spec dl dd.ttl {
	font-size: 1.9rem;
}
}

@media screen and (min-width: 1000px){
#spec dl dd.ttl {
	font-size: 2.2rem;
}
}

@media screen and (max-width: 700px){
#spec {
	padding: 4%;
}

#spec dl dd br {
	display: block;
}
#spec dl dt {
	width: 30%;
}

#spec dl dd {
	width: 67%;
}

#spec dl dd ul li.iOSNode img {
	width: 42.5%;
}

#spec dl dd ul li.androidNode img {
	width: 50.04%;
}
}

@media screen and (max-width: 450px){
#spec dl dd.ttl {
	font-size: 1.3rem;
}
#spec dl dd ul li.iOSNode img {
	width: 49.5%;
}

#spec dl dd ul li.androidNode img {
	width: 60.5%;
}
}