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

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

@media screen and (max-width: 880px) {

	div#splash > div {
		width: 500px;
		height: 310px;
		margin: -160px 0 0 -250px;
	}

}

@media screen and (max-width: 540px) {

	div#splash > div {
		width: 280px;
		height: 180px;
		margin: -90px 0 0 -140px;
	}

}

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

@media screen and (max-width: 880px) {

	div#splash.pat1 > div > div > img {
		margin: 0 0 0 -25%;
		bottom: 40px;
	}
	
	div#splash.pat1 > div > img {
		bottom: 120px;
	}
}

@media screen and (max-width: 540px) {

	div#splash.pat1 > div > div > img {
		margin: 0 0 0 -25%;
		bottom: 20px;
	}
	
	div#splash.pat1 > div > img {
		bottom: 60px;
	}
}

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


@media screen and (max-width: 880px) {

	header {
		height: auto;
		background: none;
	}
	
	header > img {
		width: 100%;
		display: block;
	}
	
	header > article {
		display: none;
	}
	
	header > menu {
		width: auto;
		padding: 40px 20px 30px 20px;
		margin: 0 0 0 0;
		bottom: auto;
		left: auto;
		background: #e60014;
		position: static;
		display: block;
	}

	header > menu > li {
		width: auto;
		padding: 0 0 10px 0;
		bottom: auto;
		position: static;
	}
	
	header > menu > li > a,
	header > menu > li > b {
		width: auto;
		height: auto;
		padding: 10px 0;
		border-radius: 6px;
		background: #fff url(../../img/common/header_menu_point_hover.gif) no-repeat right center;
		background-size: 40px auto;
		display: block;
		overflow: hidden;
	}
	
	header > menu > li.on > a {
		background-color: #ffc87d;
		background-image: url(../../img/common/header_menu_point_on.gif);
	}
	
	header > menu > li:nth-child(1) > a,
	header > menu > li:nth-child(1) > b,
	header > menu > li:nth-child(1).on > a,

	header > menu > li:nth-child(2) > a,
	header > menu > li:nth-child(2) > b,
	header > menu > li:nth-child(2).on > a,
	/*
	header > menu > li:nth-child(3) > a,
	header > menu > li:nth-child(1) > b,
	header > menu > li:nth-child(3).on > a,
	*/
	header > menu > li:nth-child(3) > a,
	header > menu > li:nth-child(3) > b,
	header > menu > li:nth-child(3).on > a {	background-position: right center;	}

	header > menu > li > a > span,
	header > menu > li > b > span {
		width: auto;
		height: 0;
		padding: 50px 0 0 0;
		border-radius: 6px;
		background: url(../../img/index_sp/header_menu.svg) no-repeat;
		display: block;
		overflow: hidden;
	}
	
	header > menu > li:nth-child(1) > a > span,
	header > menu > li:nth-child(1).on > a > span {		background-position: 20px 0px;	}

	header > menu > li:nth-child(2) > a > span,
	header > menu > li:nth-child(2).on > a > span {		background-position: 20px -50px;	}

	header > menu > li:nth-child(3) > a > span,
	header > menu > li:nth-child(3).on > a > span {		background-position: 20px -100px;	}
	
	header > menu > li > b > span {		background-position: 20px -150px;	}
	
}

@media screen and (max-width: 620px) {
	
	header > menu > li > a,
	header > menu > li > b {
		padding: 0;
	}
	
	header > menu > li:nth-child(1) > a > span,
	header > menu > li:nth-child(1).on > a > span {		background-position: 10px 0px;	}

	header > menu > li:nth-child(2) > a > span,
	header > menu > li:nth-child(2).on > a > span {		background-position: 10px -50px;	}

	header > menu > li:nth-child(3) > a > span,
	header > menu > li:nth-child(3).on > a > span {		background-position: 10px -100px;	}
	
	header > menu > li > b > span {		background-position: 10px -150px;	}
	
}

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

@media screen and (max-width: 880px) {
	
	section#description {
		padding: 40px 20px 44% 20px;
		background: #fff;

	}

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

	section#description > div > h2 {
		width: auto;
		padding: 96px 0 0 0;
		margin: 0 20px 20px 20px;
		background-size: 240px auto;
	}

	section#description > div > h2 > span {
		padding: 60px 0 0 0;
		background-size: 420px auto;
	}

	section#description > div > dl {
		width: auto;
		height: auto;
		padding: 0 0 0 0;
		margin: 0 auto 8% auto;
		border-radius: 10px;
		background: #e60014;
		overflow: hidden;
	}

	section#description > div > dl > dt {
		width: auto;
		padding: 13% 0 0 0;
		border-right: none;
		border-bottom: 1px #fff dotted;
		background-size: 50% auto;
		float: none;
	}

	section#description > div > dl > dd {
		width: auto;
		padding: 20% 0 0 0;
		margin: 0;
		background-size: 92% auto;
		float: none;
	}

	section#description > div > p {
		width: auto;
		padding: 48.8% 0 0 0;
		background: url(../../img/index_sp/campeign_txt_2.svg) no-repeat center top;
		background-size: 100% auto;
	}
	
	section#description > div > b {
		width: 300px;
		top: 30%;
		right: auto;
		left: 50%;
		padding: 120px 0 0 0;
		margin: 0 0 0 -150px;
		background-size: 300px auto;

	   -moz-transform: rotate(-15deg);
		 -o-transform: rotate(-15deg);
		-ms-transform: rotate(-15deg);
	-webkit-transform: rotate(-15deg);
			transform: rotate(-15deg);
	}

	section#description > img {
		width: 90%;
		height: auto;
		margin: 0 0 0 -45%;
		left: 50%;
		bottom: 0;
		display: block;
		position: absolute;
		z-index: 4900;
	}
}

@media screen and (max-width: 620px) {
	
	section#description {
		padding: 20px 20px 44% 20px;
		background: #fff;
	}
	
	section#description > div > h2 {
		width: auto;
		padding: 48px 0 0 0;
		margin: 0 20px 10px 20px;
		background-size: 120px auto;
	}

	section#description > div > h2 > span {
		padding: 34px 0 0 0;
		background-size: 240px auto;
	}

	
}

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

@media screen and (max-width: 880px) {
	
	section#outline {
		padding: 80px 20px 84px 20px;
		overflow: hidden;
	}

	section#outline > article {
		width: auto;
		padding: 30px 30px 30px 30px;
		margin: 0 auto 40px auto;
	}

	section#outline > article > h2 {
		height: 0;
		padding: 50px 0 0 0;
		margin: 0 0 10px 0;
	}
}

@media screen and (max-width: 650px) {
	
	section#outline {
		padding-bottom: 48px;
	}
}

@media screen and (max-width: 620px) {
	
	section#outline {
		padding: 50px 20px 48px 20px;
	}

	section#outline > article {
		padding: 15px 15px 15px 15px;
		margin: 0 auto 50px auto;
	}
	
	section#outline > article > h2 {
		height: 0;
		padding: 40px 0 0 0;
		margin: 0 0 10px 0;
		background-size: 79px auto;
	}
	
	section#description > div > b {
		width: 150px;
		top: 29%;
		padding: 60px 0 0 0;
		margin: 0 0 0 -75px;
		background-size: 150px auto;

	}
	
}

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

@media screen and (max-width: 880px) {

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

	section#outline > article#howto > img {
		left: -20px;
	}

	section#outline > article#howto > ol {
		height: 0;
		padding: 25% 0 0 0;
		background-size: 70% auto;
	}

	section#outline > article#howto > em {
		width: 36%;
		margin: -27% 0 0 0;
		right: -30px;
		top: 50%;
	}

	section#outline > article#howto > em > img {
		width: 100%;
	}

	section#outline > article#howto > span {
		bottom: -28px;
	}
	
	section#outline > article#howto > span > br {
		display: none !important;
	}

}

@media screen and (max-width: 620px) {
	
	section#outline > article#howto {
		padding-bottom: 13px;
	}

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

	section#outline > article#howto > img {
		width: 100px;
		left: -20px;
		top: -35px;
	}

	section#outline > article#howto > ol {
		height: 0;
		padding: 37% 0 0 0;
		background: url(../../img/index_sp/outline_txt_1.svg) no-repeat left top;
		background-size: 66% auto;
	}

	section#outline > article#howto > em {
		width: 46%;
		margin: -35% 0 0 0;
		right: -30px;
	}

	section#outline > article#howto > span {
		bottom: -42px;
	}
	
	section#outline > article#howto > span > br {
		display: block !important;
	}
}

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

@media screen and (max-width: 880px) {

	section#outline > article#item {
		padding-bottom: 5px;
	}

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

	section#outline > article#item > div > h3 {
		padding: 32px 0 0 0;
		margin: 0 0 0 0;
	}
	
	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 {
		width: 100%;
		margin: 0 auto 20px auto;
	}

	section#outline > article#item > div > ul{
		text-align: justify;
	}
	
	section#outline > article#item > div > div {
		width: 60px;
		top: -2px;
		position: absolute;
	}

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

}

@media screen and (max-width: 620px) {
	
	section#outline > article#item {
		margin-bottom: 53px;
	}
	
	section#outline > article#item > h2 {		background-position: center -40px;	}
	
	section#outline > article#item > div > h3 {
		padding: 26px 0 0 0;
		background-size: 88px auto;
		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 -26px;	}
	section#outline > article#item > div:nth-of-type(3) > h3 {	background-position: center -52px;	}

}

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

@media screen and (max-width: 620px) {

	section#outline > article#other {
		padding: 15px 15px 5px 15px;
	}

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

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

	section#outline > article#other > table > tbody > tr > th > h2 {
		width: 100%;
		padding: 40px 0 0 0;
		background-size: 79px auto;
		display: block;
	}

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

	section#outline > article#other > table > tbody > tr > td {
		width: 100%;
		padding: 0 10px 10px 10px;
		display: block;
	}

	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 > div {
		width: 165px;
		margin: 0 0 0 -83px;
		top: -53px;
	}

}