@charset "utf-8";

@import "layout.css";

/*-------------------------------------------------------------------------
	title
/*-----------------------------------------------------------------------*/
#title {
	height: 680px;
	background: url(../img/index/title/bg.gif) center center;
}
	#title #about {
		position: absolute;
		top: 190px;
		left: 10px;
		z-index: 2;
	}
	#title #amiiboset {
		position: absolute;
		top: 194px;
		right: 32px;
		z-index: 2;
	}
	#title #experience {
		position: absolute;
		top: 108px;
		right: 10px;
		z-index: 2;
	}
		#title #experience .new {
			position: absolute;
			top: -16px;
			left: 20px;
		}
	#title #instagram {
		width: 318px;
		background: url(../img/index/title/today/bottom.png) no-repeat bottom;
		position: absolute;
		top: 430px;
		left: 16px;
		z-index: 2;
	}
	#about a,
	#amiiboset a,
	#experience a,
	#instagram {
		opacity: 0;
		position: relative;
	}

		#title #instagram #balloon {
			position: absolute;
			top: -33px;
			right: -20px;
		}
		#title #instagram dd {
			min-height: 138px;
			margin-bottom: 16px;
			padding: 8px 18px 8px 24px;
			background: url(../img/index/title/today/bg.png) repeat-y;
		}
			#title #instagram dd img {
				height: 122px;
				width: 122px;
				float: left;
				margin-right: 12px;
				border: solid 4px #fff;
			}
			#title #instagram dd span {
				width: 134px;
				float: left;
				color: #fff;
				display: block;
			}
				#title #instagram dd span a {
					color: #fff;
				}
				#title #instagram dd span a:hover {
					color: #c2ffff;
				}
iframe {
	border: 0;
}

/*-------------------------------------------------------------------------
	Contents
/*-----------------------------------------------------------------------*/
#contents {
	padding: 0 0 30px 0;
}

#navi {
	margin-top: 10px;
}
	#navi ul {
		margin: 0 auto;
	}
		#navi ul li {
			height: 101px;
			width: 230px;
			float: left;
			margin-right: 13px;
			position: relative;
		}
		#navi ul li:last-child {
			margin-right: 0;
		}
			#navi ul li img {
				position: absolute;
				bottom: 0;
			}


/*-------------------------------------------------------------------------
	info
/*-----------------------------------------------------------------------*/
#info {
	height: 60px;
	margin-top: 30px;
	background: url(../img/index/info/bg.png) no-repeat;
}

	#info dl {
		width: 960px;
	}
		#info dl dt {
			width: 162px;
			float: left;
			padding-top: 20px;
			text-align: center;
			display: inline-block;
		}
		#info dl #topic {
			width: 753px;
			height: 43px;
			float: left;
			margin-top: 9px;/* 2行以上になる場合 */
			/*margin-top: 18px; 1行になる場合 */
			padding-left: 25px;
			overflow: auto;
			-webkit-overflow-scrolling:touch;
			display: inline-block;
		}
		@-moz-document url-prefix() {
		  #info dl #topic {
		    overflow: hidden;
		  }
		}

	#info iframe {
		height: 100%;
		width: 100%;
		border: none;
	}

body#update {
	min-width: 700px;
}
	#infoInner {
		width: 99%;
	}
		#infoInner dl {
			width: 100%;
		}
			#infoInner dt {
				float: left;
				width: 7em;
			}
			#infoInner dd {
				padding-left: 7em;
			}
			.tablet #infoInner dd {
				width: auto;
				padding-left: 7em;
			}
				#infoInner dd a {
					text-decoration: underline;
				}
				#infoInner dd a:hover {
					text-decoration: none;
				}

/*-------------------------------------------------------------------------
	soft_detail
/*-----------------------------------------------------------------------*/

#chara {
	background: url(../img/index/contents/chara.png) no-repeat 716px 54px;
}

#soft_detail {
	width: 521px;
	float: left;
	margin-top: 24px;
	padding: 16px 12px 3px 12px;
	background: #ffd200;
	border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
}
	#soft_detail #icon {
		width: 286px;
		margin-right: 12px;
		float: left;
	}
		#soft_detail #icon li {
			float: left
		}
		#soft_detail #icon #package {
			margin: 0 9px 3px 0;
		}
		#soft_detail #icon #soft {
			margin: 0 7px 0 1px;
		}
		#soft_detail #icon #amiibo {
			margin: 12px 7px 0 0;
		}
	#soft_detail #txt {
		width: 223px;
		float: left;
	}
		#soft_detail #txt li {
			margin-bottom: 7px;
		}

#movie {
	width: 145px;
	float: left;
	margin: 24px 0 0 18px;
	position: relative;
}
	#movie .new {
		position: absolute;
		top: -25px;
		left: 4px;
	}
#sns {
	width: 50px;
	float: right;
	margin-top: 24px;
}
	#sns li {
		margin-bottom: 6px;
	}


#navi ul li {
	position: relative;
}
#navi ul li span {
	position: absolute;
	top: 43px;
	left: 8px;
	z-index: 4;
}