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

/* ================================================================================
-----------------------------------------------------------------------------------
	div#splash
-----------------------------------------------------------------------------------
================================================================================ */

div#splash {
	width: 100%;
	height: 100%;
	top: 0;
	background: url(../../img/common/menu_bg.png) repeat left top;
	position: fixed;
	z-index: 9998;
}

div#splash > div {
	width: 760px;
	height: 460px;
	margin: -230px 0 0 -380px;
	top: 50%;
	left: 50%;
	position: absolute;
}

div#splash > div div {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
}

/* ============================================================
	.pat0
============================================================ */

div#splash.pat0 img {
	-webkit-transform: translate3d(0,0,0);
}

div#splash.pat0 > div div {
	overflow: hidden;
}

div#splash.pat0 > div > div > img {
	width: 100%;
	margin: -35% 0 0 -50%;
	height: auto;
	top: 50%;
	left: 50%;
	display: block;
	position: absolute;
	backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	transition: all 2s linear;
}

div#splash.pat0 > div > div > img.slow {		transition: all 2s linear;	}
div#splash.pat0 > div > div > img.high {		transition: all 0.5s linear;	}

div#splash.pat0 > div > div > div > span {
	width: 100%;
	height: 0;
	padding: 100% 0 0 0;
	background: url(../../img/common/menu_bg.png) repeat center center;
	opacity: 0;
	position: absolute;
}

div#splash.pat0 > div > div > div > img {
	width: 0;
	height: auto;
	position: absolute;
	opacity: 0.1;
}

div#splash.pat0 > div > img {
	width: 0;
	height: auto;
	right: 46%;
	bottom: 50%;
	position: absolute;
	opacity: 0;
}

div#splash.pat0 > div > p {
	left: 10px;
	bottom: 10px;
	line-height: 1em;
	font-size: 0.8em;
	letter-spacing: -0.01em;
	position: absolute;
	color: #888;
}

div#splash.pat0 > div > a {
	width: 92px;
	height: 0;
	padding: 21px 0 0 0;
	bottom: -36px;
	right: 0;
	background: url(../../img/index/splash_btn_skip.svg) no-repeat left top;
	display: block;
	overflow: hidden;
	position: absolute;
	cursor: pointer;
}

div#splash.pat0 > span {
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	top: 0;
	left: 0;
	display: block;
	overflow: hidden;
	position: absolute;
}

/* ============================================================
	.pat1
============================================================ */

div#splash.pat1 > div {
	background: #fff;
}

div#splash.pat1 > div > div > img {
	width: 50%;
	height: auto;
	margin: 0 0 0 -25%;
	bottom: 40px;
	left: 50%;
	position: absolute;
}

div#splash.pat1 > div > div:nth-of-type(2) > img {	opacity: 0;	}
div#splash.pat1 > div > div:nth-of-type(3) > img {	opacity: 0;	}

div#splash.pat1 > div > div > div {
	overflow: hidden;
}

div#splash.pat1 > div > div > div > span {
	width: 100%;
	height: 0;
	padding: 100% 0 0 0;
	background: url(../../img/common/menu_bg.png) repeat center center;
	opacity: 0;
	position: absolute;
}

div#splash.pat1 > div > div > div > img {
	width: 0;
	height: auto;
	position: absolute;
}

div#splash.pat1 > div > img {
	width: 0;
	height: auto;
	margin: 0 -15% 0 0;
	right: 50%;
	bottom: 160px;
	position: absolute;
	opacity: 0;
}

div#splash.pat1 > div > a {
	width: 92px;
	height: 0;
	padding: 21px 0 0 0;
	bottom: -36px;
	right: 0;
	background: url(../../img/index/splash_btn_skip.svg) no-repeat left top;
	display: block;
	overflow: hidden;
	position: absolute;
	cursor: pointer;
}

div#splash.pat1 > span {
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	top: 0;
	left: 0;
	display: block;
	overflow: hidden;
	position: absolute;
}
/* ================================================================================
-----------------------------------------------------------------------------------
	header
-----------------------------------------------------------------------------------
================================================================================ */

header {
	height: 860px;
	background: url(../../img/index/main_bg.jpg) no-repeat center center;
	background-size: cover;
}

header > article {
	width: 900px;
	padding: 704px 0 0 0;
	margin: 0 0 0 -450px;
	top: 38px;
	background: url(../../img/index/main_txt.png) no-repeat left top;
}

/* ================================================================================
-----------------------------------------------------------------------------------
	section#description
-----------------------------------------------------------------------------------
================================================================================ */

section#description {
	padding: 38px 0 430px 0;
	background: #fff;
	overflow: hidden;
	position: relative;
}

section#description > div {
	width: 884px;
	margin: 0 auto;
	position: relative;
}

section#description > div > h2 {
	width: 552px;
	padding: 127px 0 0 0;
	margin: 0 auto 28px auto;
	background: url(../../img/common/h2_bg.png) center top no-repeat;
	display: block;
}

section#description > div > h2 > span {
	width: 100%;
	height: 0;
	padding: 80px 0 0 0;
	background: url(../../img/index/h2.svg) center top no-repeat;
	display: block;
	overflow: hidden;
}

section#description > div > dl {
	width: 800px;
	height: 80px;
	margin: 0 auto 38px auto;
	border-radius: 10px;
	background: #e60014;
	overflow: hidden;
	opacity: 0.3;
}

section#description > div > dl > dt {
	width: 270px;
	height: 0;
	padding: 80px 0 0 0;
	border-right: 1px #fff dotted;
	background: url(../../img/index/campeign_txt_0.svg) no-repeat center center;
	float: left;
	overflow: hidden; 
}

section#description > div > dl > dd {
	width: 530px;
	height: 0;
	padding: 80px 0 0 0;
	background: url(../../img/index/campeign_txt_1.svg) no-repeat center center;
	float: right;
	overflow: hidden; 
}

section#description > div > p {
	width: 892px;
	height: 0;
	padding: 186px 0 0 0;
	background: url(../../img/index/campeign_txt_2.svg) no-repeat left top;
	display: block;
	overflow: hidden;
	position: relative;
	z-index: 5000;
}

section#description > div > b {
	width: 760px;
	height: 0;
	top: 123px;
	right: -60px;
	padding: 304px 0 0 0;
	background: url(../../img/index/close.png) no-repeat left top;
	display: block;
	overflow: hidden;
	position: absolute;
	z-index: 6000;
	
   -moz-transform: rotate(-15deg) scale(0.25);
	 -o-transform: rotate(-15deg) scale(0.25);
	-ms-transform: rotate(-15deg) scale(0.25);
-webkit-transform: rotate(-15deg) scale(0.25);
		transform: rotate(-15deg) scale(0.25);

   -moz-transform-origin: 50% 50%;
	 -o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
}

section#description > img {
	width: 840px;
	height: 540px;
	margin: 0 0 0 -420px;
	left: 50%;
	bottom: 0;
	display: block;
	position: absolute;
	z-index: 4900;
}

/* ================================================================================
-----------------------------------------------------------------------------------
	section#outline
-----------------------------------------------------------------------------------
================================================================================ */

section#outline {
	padding: 70px 0 20px 0;
	background: url(../../img/common/section_bg.gif) center center repeat;
	position: relative;
}

section#outline > article {
	width: 800px;
	padding: 30px 30px 30px 30px;
	margin: 0 auto 40px auto;
	background: #fff;
	border-radius: 10px;
	position: relative;
}

section#outline > article > h2 {
	height: 0;
	padding: 50px 0 0 0;
	margin: 0 0 10px 0;
	border-radius: 6px;
	background: #e60014 url(../../img/index/outline_h3.svg) no-repeat;
	display: block;
	overflow: hidden;
}

/* =================================================================
	article#howto
================================================================= */

section#outline > article#howto {
	padding-bottom: 26px;
}

section#outline > article#howto > h2 {
	background-position: center 0px;
	margin-bottom: 20px;
}

section#outline > article#howto > img {
	left: -50px;
	top: -60px;
	position: absolute;
}

section#outline > article#howto > ol {
	height: 0;
	padding: 186px 0 0 0;
	background: url(../../img/index/outline_txt_1.svg) no-repeat left top;
	display: block;
	overflow: hidden;
	position: relative;
}

section#outline > article#howto > em {
	right: -60px;
	top: -70px;
	display: block;
	position: absolute;
	z-index: 5100;
}

section#outline > article#howto > span {
	left: 10px;
	bottom: -30px;
	font-size: 85%;
	line-height: 1.2em;
	position: absolute;
	z-index: 5100;
}

/* =================================================================
	article#item
================================================================= */

section#outline > article#item {
	padding-bottom: 20px;
	margin-bottom: 70px;
}

section#outline > article#item > h2 {		background-position: center -50px;	}

section#outline > article#item > div {
	padding: 16px;
	margin: 0 0 10px 0;
	border-radius: 6px;
	background: #ffebd0;
	text-align: justify;
	position: relative;
}

section#outline > article#item > div:nth-of-type(3) {
	text-align: center;
}

section#outline > article#item > div > h3 {
	height: 0;
	padding: 32px 0 0 0;
	margin: 0 0 10px 0;
	border: #e60014 2px solid;
	border-radius: 4px;
	background: url(../../img/index/outline_h4_1.svg) no-repeat;
	display: block;
	overflow: hidden;
}

section#outline > article#item > div:nth-of-type(1) > h3 {	background-position: center 0px;	}
section#outline > article#item > div:nth-of-type(2) > h3 {	background-position: center -32px;	}
section#outline > article#item > div:nth-of-type(3) > h3 {	background-position: center -64px;	}

section#outline > article#item > div > img {
	margin: 0 auto 10px auto;
}

section#outline > article#item > div > ul{
	line-height: 1.6em;
}

section#outline > article#item > div > ul > li {
	display: inline;
	font-weight: bold;
}

section#outline > article#item > div > ul > li:after {	content: '、';	}
section#outline > article#item > div > ul > li:last-child:after {	content: '';	}

section#outline > article#item > div > div {
	width: 120px;
	top: -30px;
	position: absolute;
}

section#outline > article#item > div:nth-of-type(1) > div {	left: -70px;	}
section#outline > article#item > div:nth-of-type(2) > div {	right: -70px;	}
section#outline > article#item > div:nth-of-type(3) > div {	left: -70px;	}

section#outline > article#item > div > div > img {
	width: 100%;
}

/* =================================================================
	article#other
================================================================= */

section#outline > article#other {
	padding: 10px 30px 10px 30px;
}

section#outline > article#other > table > tbody > tr {
	display: block;
	border-bottom: #e60014 dotted 2px;
}

section#outline > article#other > table > tbody > tr:last-child {	border-bottom: none;	}

section#outline > article#other > table > tbody > tr > th {
	padding: 20px 0 20px 0;
}

section#outline > article#other > table > tbody > tr > th > h2 {
	width: 160px;
	height: 0;
	padding: 50px 0 0 0;
	border-radius: 6px;
	background: #e60014 url(../../img/index/outline_h3.svg) no-repeat;
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
}

section#outline > article#other > table > tbody > tr:nth-of-type(1) > th > h2 {	background-position: center -100px;	}
section#outline > article#other > table > tbody > tr:nth-of-type(2) > th > h2 {	background-position: center -150px;	}
section#outline > article#other > table > tbody > tr:nth-of-type(3) > th > h2 {	background-position: center -200px;	}

section#outline > article#other > table > tbody > tr > td {
	width: 80%;
	padding: 19px 0 19px 20px;
}

section#outline > article#other > table > tbody > tr > td > ul {
	padding: 10px 0 0 0;
}

section#outline > article#other > table > tbody > tr > td > ul > li{
	margin: 0 0 0 14px;
	text-indent: -14px;
}

section#outline > article#other > table > tbody > tr > td > ul > li:before {
	content: '● ';
}

section#outline > article#other > div {
	width: 220px;
	margin: 0 0 0 -110px;
	top: -70px;
	left: 50%;
	position: absolute;
}

section#outline > article#other > div > img {
	width: 100%;
}