@charset "utf-8";
/* CSS Document */

body
{
	font-size: 150%;
	background-image: url("../design/background_image.png");
}

.red
{
	color: #ff0000;
}


.storelink .storelink_as,
.storelink .storelink_gp
{
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-ms-filter:grayscale(100%);
	filter:grayscale(100%);
	
	opacity: 0.5;
	filter: alpha(opacity=50);
}


/*==================================================*/
/*
�@�@�@�@�@�@�@�@�@�@�@�@���o��
*/
/*==================================================*/

h1
{
	margin: 20px auto 20px auto;
	text-indent: -9999px;
	width: 400px;
	height: 200px;
	background-image: url("../design/logo.png");
	background-repeat: no-repeat;
}

h2
{
}

h3
{
}

h4
{
}

h5
{
}

h6
{
}

/*==================================================*/
/*
�@�@�@�@�@�@�@�@�@�@�@�@�w�b�_�[
*/
/*==================================================*/

header
{	
	margin: 0 auto;
	background-image: url("../design/header_bg_01.png");
	background-position: top;
	background-repeat: no-repeat;
}

header #header_contents
{
	padding: 0 50px 115px 50px;
	background-image: url("../design/header_bg_02.png");
	background-position: bottom;
	background-repeat: no-repeat;
}

header #header_contents .contents
{
	margin: 0 auto;
	width: 1180px;
}

header #header_contents p
{
	margin: 0;
	padding: 0;
}

header .first_cont
{
	width: 880px;
	float: left;
}

header #header_middle
{
	width: 580px;
	float: right;
	text-align: center;
}

header #header_middle .movie
{
	margin: 30px auto 0 auto;
	padding-top: 19px; 
	width: 500px;
	height: 221px;
	background-image: url("../design/iphone.png");
}

header #header_middle .movie video
{
	width: 360px;
}

header #header_left
{
	margin-top: 310px;
	width: 300px;
	float: left;
}

header #header_left h2
{
	width: 300px;
	height: 50px;
	background-image: url("../design/news_title_bg.png");
	text-indent: -9999px;
}

header #header_left #news dl
{
	margin-top: 10px;
	padding: 10px 20px 10px 10px;
	width: 270px;
	height: 268px;
	background-color: #ffffff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	font-size: 70%;
	overflow: scroll;
}

header #header_left #news dl dt
{
	margin-bottom: 5px;
	color: #e87c54;
}

header #header_left #news dl dt span
{
	background-color: #1da1f3;
	padding: 2px 8px;
	margin-left: 10px;
	color: #ffffff;
	font-size: 80%;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

header #header_left #news dl dd
{
	border-bottom: 1px solid #1da1f3;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

header #header_left #news dl dd a
{
	color: #333333;
}

header .second_cont
{
	width: 300px;
	float: right;
}

header #header_right
{
	margin-top: 310px;
	width: 300px;
	float: right;
}

header #header_right h2
{
	width: 300px;
	height: 50px;
	background-image: url("../design/publish_bg.png");
	text-indent: -9999px;
}

header #header_right table
{
	margin: 10px 0 20px 0;
	border: 5px solid #e6e6e6;
	padding: 15px;
	width: 300px;
	height: 110px;
	background-color: #ffffff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

header #header_right table td
{
	vertical-align: middle;
}
header #header_right table td .storelink_as,
header #header_right table td .storelink_gp
{
	margin-bottom: 5px;
}
	
header #header_contents .important_notice
{
	margin-top: 20px;
	padding: 0;
}

/*==================================================*/
/*
�@�@�@�@�@�@�@�@�@�@�@�@�R���e���c
*/
/*==================================================*/

#main *
{
	margin: 0px;
	padding: 0px;
	line-height: 100%;
}

#main
{
}

#main .contents
{
	margin: 0 auto;
	width: 1180px;
	padding: 50px;
}

#main.trial .contents
{
	width: 1280px;
	padding: 20px 0;
	text-align: center;
}

#main.trial #contents_05 .contents
{
	padding: 50px;
}

.first_cont
{
	width: 480px;
}

.second_cont
{
	width: 650px;
}

#contents_01 .contents .first_cont,
#contents_02 .contents .second_cont,
#contents_03 .contents .first_cont,
#contents_04 .contents .second_cont,
#contents_05 .contents .first_cont
{
	float: left;
}

#contents_01 .contents .second_cont,
#contents_02 .contents .first_cont,
#contents_03 .contents .second_cont,
#contents_04 .contents .first_cont,
#contents_05 .contents .second_cont
{
	float: right;
}

/* ========== �u�‚����́v�Ƃ� ========== */
#contents_01
{
	background-image: url("../design/contents_01_bg.png");
}

#contents_01 .contents_01_bg_front
{
	background-image: url("../design/contents_01_bg_front.png");
	background-position: center;
	background-repeat: no-repeat;
}

/* ========== �V�ѕ� ========== */
#contents_02
{
	background-image: url("../design/contents_02_bg.png");
}

/* ========== �L�����N�^�[ ========== */
#contents_03
{
	background-image: url("../design/contents_03_bg.png");
}

/* ========== �I�����C�� ========== */
#contents_04
{
	background-image: url("../design/contents_04_bg.png");
}

/* ========== �Q�[���T�v�A�_�E�����[�h ========== */
#contents_05
{
	background-image: url("../design/contents_05_bg.png");
}

#contents_05 .first_cont
{
	width: 660px;
}

#contents_05 .second_cont
{
	width: 490px;
}

#contents_05 .appicon
{
	width: 170px;
	float: left;
}

#contents_05 .about
{
	width: 450px;
	float: right;
}

#contents_05 .about td,
#contents_05 .about th
{
	font-weight: normal;
	text-align: left;
	padding: 4px;
	vertical-align: top;
}

#contents_05 .about th
{
	white-space: nowrap
}

#contents_05 .caution
{
	width: 220px;
	float: left;
	color: #ff0000;
}

#contents_05 .storelink
{
	width: 150px;
	float: right;
}

#contents_05 .storelink .storelink_as,
#contents_05 .storelink .storelink_gp
{
	margin-bottom: 5px;
}

.fcRed
{
	color: red;
}

/*==================================================*/
/*
�@�@�@�@�@�@�@�@�@�@�@�@�t�b�^�[
*/
/*==================================================*/

footer
{
	padding: 20px 0 10px 0;
	background-image: url("../design/footer_bg.png");
}

footer ul
{
	text-align: center;
}

footer ul li
{
	display: inline;
}

footer ul li a
{
	color: #ffffff;
}

footer .copy
{
	text-align: center;
	color: #999999;
	font-size: 80%;
}

/*==================================================*/
/*
�@�@�@�@�@�@�@�@�@�@�@�@�摜�A�j���[�V����
*/
/*==================================================*/

.fade_to_left
{
	display: hidden;
}

.fade_to_right,
.fade_to_left
{
	overflow: hidden;
}

/* �E����ړ����Ȃ���t�F�[�h�C�� */
.fade_animation_to_right img
{
	display: block;
	animation: fade_animation_to_right 0.7s cubic-bezier(.3, 0, .2, 1);
}

@keyframes fade_animation_to_right
{
	0%
	{
		opacity: 0;
		transform: scale(1.0) translateX(-200px);
	}
	
	10%
	{
		opacity: 0;
		transform: scale(1.0) translateX(200px);
	}
}

/* ������ړ����Ȃ���t�F�[�h�C�� */
.fade_animation_to_left img
{
	animation: fade_animation_to_left 0.7s cubic-bezier(.3, 0, .2, 1);
}

@keyframes fade_animation_to_left
{
	0%
	{
		opacity: 0;
		transform: scale(1.0) translateX(200px);
	}
	
	10%
	{
		opacity: 0;
		transform: scale(1.0) translateX(-200px);
	}
}




/*==================================================*/
/*
�@�@�@�@�@�@�@�@�@�@�@�@�v���C�o�V�[�|���V�[
*/
/*==================================================*/

#pp
{
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #ffffff;
	padding: 40px;
}

#pp *
{
	line-height: 140%;
}

#pp h2
{
	text-align: center;
	margin-bottom: 40px;
}

#pp h3
{
	margin-top: 60px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	color: #333333;
}

#pp h4
{
	margin-top: 60px;
	margin-bottom: 20px;
}

#pp ul
{
	margin-left: 40px;
}

#pp p
{
	word-break : break-all;
}


/*==================================================*/
/*
�@�@�@�@�@�@�@�@�@�@�@�@�����L���O
*/
/*==================================================*/

#ranking
{
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #ffffff;
	padding: 40px 0px;
}

#ranking *
{
	line-height: 180%;
}

#ranking h2
{
	text-align: center;
}

#ranking #link
{
	text-align: center;
	margin-bottom: 20px;
}

#ranking #link a
{
	padding: 5px 20px;
	text-align: center;
	background-color: #666666;
	color: #ffffff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

#ranking #link a:hover
{
	background-color: #39b54a;
}

#ranking #link a.select
{
	background-color: #0071bc;
}

#ranking #rankingtable
{
	height: 500px;
	overflow: auto;
	line-height: 100%;
}

#ranking table
{
	margin-bottom: 10px;
	font-size: 100%;
	line-height: 100%;
}

#ranking table tr
{
}

#ranking table td
{
	vertical-align: middle;
}

#ranking table tr:nth-child(odd)
{
	background-color: #e9e9e9;
}

#ranking table td.lefttd
{
	text-align: center;
	width: 15%;
	border-right: 1px dashed #666666;
	padding: 0px 5px;
}

#ranking table td.middletd
{
	padding-left: 10px;
	color: #ff0000;
}

#ranking table td.middletd span
{
	font-size: 90%;
	color: #000000;
}
#ranking table td.righttd
{
	text-align: rihgt;
	width: 25%;
	padding: 5px;
}

#ranking table td.righttd img
{
	max-width: 150px;
}