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


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

	body {
		font-size: 14px;
		line-height: 2em;
		letter-spacing: 0.05em;

	}
	
	section .pc {	display: none !important;	}
	section .sp {	display: block !important;	}
	
}

/* ================================================================================
-----------------------------------------------------------------------------------
	div#application
-----------------------------------------------------------------------------------
================================================================================ */

@media screen and (max-width: 1200px) {
	
	div#application {
		bottom: 156px;
		right: 136px;
		position: fixed;
		z-index: 8990;
	}

	div#application > a > b,
	div#application > b > b {
		width: 120px;
		padding: 140px 0 0 0;
		background-size: 120px auto;
	}
}

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

	div#application {
		width: 100%;
		padding: 20px;
		bottom: 0;
		right: 0;
		background: #fff;
	}

	div#application > a,
	div#application > b {
		width: 100%;
		height: 64px;
		position: relative;
	}

	div#application > a span,
	div#application > b span {
		width: 100%;
		display: block;
		overflow: hidden;
	}

	div#application > a > span,
	div#application > b > span {
		padding: 0 0 0 32px;
		background: url(../../img/application/application_left.svg) no-repeat left top;
		position: absolute;
	}

	div#application > a > span > span,
	div#application > b > span > span {
		padding: 0 32px 0 0;
		background: url(../../img/application/application_right.svg) no-repeat right top;
	}

	div#application > a > span > span > span,
	div#application > b > span > span > span {
		background: url(../../img/application/application_body.svg) repeat-x center top;
	}

	div#application > a > span > span > span > span,
	div#application > b > span > span > span > span {
		height: 0;
		padding: 64px 0 0 0;
		background: no-repeat center center;
	}
	
	div#application > a > span > span > span > span {
		background-image: url(../../img/application/application_txt.svg);
	}

	div#application > b > span > span > span > span {
		background-image: url(../../img/application/application_txt_close.svg);
	}

	div#application > a > b,
	div#application > b > b {
		display: none;
	}

}

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

	div#application {
		padding: 15px;
	}

	div#application > a,
	div#application > b {
		width: 100%;
		height: 48px;
	}

	div#application > a > span,
	div#application > b > span {
		padding: 0 0 0 24px;
		background-size: auto 48px;
	}

	div#application > a > span > span,
	div#application > b > span > span {
		padding: 0 24px 0 0;
		background-size: auto 48px;
	}

	div#application > a > span > span > span,
	div#application > b > span > span > span {
		background-size: auto 48px;
	}

	div#application > a > span > span > span > span,
	div#application > b > span > span > span > span {
		padding: 48px 0 0 0;
		background-size: auto 48px;
	}
}

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

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

	header {
		width: 100%;
		height: 300px;
		margin: 90px 0 0 0;
		background: url(../../img/common_sp/main_bg.jpg) no-repeat center center;
		background-size: cover;
		position: relative;
		overflow: visible;
	}

	header > div {
		top: -90px;
		background: #fff;
		position: absolute;
		overflow: hidden;
	}

	header > div > a {
		width: 200px;
		padding: 49px 0 0 0;
		margin: 21px 0 20px 20px;
		background: url(../../img/common_sp/main_logo.svg) left top no-repeat;
		background-size: 200px auto;
	}
	
	header > div > div {
		display: block;
	}

	header > div > ul {
		margin: 20px 90px 20px 0;
	}

	header > div > ul > li {
		margin: 0 0 0 5px;
	}

	header > div > ul > li > a {
		width: 50px;
		padding: 50px 0 0 0;
		background: url(../../img/common_sp/main_sns.svg) no-repeat;
		background-size: 100px auto;
	}

	header > div > ul > li.tw > a {	background-position: 0px 0px;}
	header > div > ul > li.fb > a {	background-position: -50px 0px;}
	
	header > div > img {
		display: none !important;
	}

	header > article {
		width: 560px;
		padding: 260px 0 0 0;
		margin: 0 0 0 -280px;
		top: 20px;
		background: url(../../img/common_sp/main_txt.png) no-repeat left top;
	}

	header > menu {
		display: none;
	}
	
}

@media screen and (max-width: 560px) {
	
	header {
		height: 150px;
		margin: 60px 0 0 0;
	}

	header > div {
		top: -60px;
	}
	
	header > div > a {
		width: 140px;
		padding: 34px 0 0 0;
		margin: 13px 0 0 10px;
		background: url(../../img/common_sp/main_logo.svg) left top no-repeat;
		background-size: 140px auto;
	}
	
	header > div > ul {
		margin: 10px 60px 10px 0;
	}

	header > div > ul > li {
		margin: 0 0 0 5px;
	}

	header > div > ul > li > a {
		width: 40px;
		padding: 40px 0 0 0;
		background: url(../../img/common_sp/main_sns.svg) no-repeat;
		background-size: 80px auto;
	}

	header > div > ul > li.tw > a {	background-position: 0px 0px;}
	header > div > ul > li.fb > a {	background-position: -40px 0px;}

	header > div > div {
		width: 40px;
		height: 40px;
		margin: 10px 10px 0 0;
	}

	header > div > div > span {
		width: 14px;
		padding: 2px 0 0 0;
		left: 13px;
	}

	header > div > div > span:nth-of-type(1) {	top: 10px;	}
	header > div > div > span:nth-of-type(2) {	top: 15px;	}
	header > div > div > span:nth-of-type(3) {	top: 20px;	}

	header > div > div > b {
		width: 30px;
		padding: 7px 0 0 0;
		top: 27px;
		left: 5px;
		background-size: 30px auto;
	}

	header > div > div.active > span:nth-of-type(1) {	top: -6px;	}
	header > div > div.active > span:nth-of-type(2) {	opacity: 0;	}
	header > div > div.active > span:nth-of-type(3) {	top: 34px;	}

	header > div > div.active > b {
		background-position: 0px -7px;
	}
	
	header > article {
		width: 280px;
		padding: 130px 0 0 0;
		margin: 0 0 0 -140px;
		top: 10px;
		background-size: 280px auto;
		background-position: center -10px;
	}
}

/* ================================================================================
-----------------------------------------------------------------------------------
	div#target
-----------------------------------------------------------------------------------
================================================================================ */

@media screen and (max-width: 880px) {
	
	div#target {
		left: 0;
	}
}

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

	div#target > menu {
		width: 90%;
		margin: -95px 0 0 -45%;
	}

	div#target > menu > li > a,
	div#target > menu > li > b {
		border-radius: 10px;
		background-size: 40px 20px;
		display: block;
	}

	div#target > menu > li.on > a {
		background-size: 40px 20px;
		border-width: 3px;
	}

	div#target > menu > li > a > span,
	div#target > menu > li > b > span {
		height: 0;
		padding: 50px 0 0 0;
		background-size: 220px auto;
		display: block;
		overflow: hidden;
	}

	div#target > menu > li > a > span {	cursor: pointer;}

	div#target > menu > li.on > a > span {
		background-image: url(../../img/common/header_menu_hover.svg);
	}


	div#target > menu > li:nth-child(1) > a > span,
	div#target > menu > li:nth-child(1).on > a > span {	background-position: 20px 0px;	}

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

	div#target > menu > li:nth-child(3) > a > span,
	div#target > menu > li:nth-child(3).on > a > span {	background-position: 20px -100px;	}

	div#target > menu > li > b > span {	background-position: 20px -150px;	}

}

/* ================================================================================
-----------------------------------------------------------------------------------
	footer
-----------------------------------------------------------------------------------
================================================================================ */

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

	footer > div {
		width: auto;
		padding: 30px 20px 30px 20px;
		margin: 0 auto;
		overflow: hidden;
	}

	footer > div > img {
		width: 50%;
		height: auto;
		margin: 0 auto 14px auto;
		display: block;
		float: none;
	}

	footer > div > ul {
		width: auto;
		padding: 0 0 0 0;
		float: none;
	}

	footer > div > ul > li {
		width: 100%;
		padding: 0 0 0 0;
		background: #fff;
		border-radius: 4px;
	}

	footer > div > ul > li > a {
		width: 100%;
		height: 100%;
		padding: 15px 20px 15px 50px;
		background: #fff url(../../img/common/footer_img_1.svg) no-repeat 20px center;
		color: #222;
		display: table-cell;
		text-decoration: none;
		vertical-align: middle;
	}

	footer > div > div {
		width: auto;
		padding: 24px 0 0 0;
		float: none;
		overflow: hidden;
		text-align: right;
	}

	footer > div > div > a {
		height: 0;
		padding: 38px 0 0 0;
		margin: 0 0 8px 0;
		background: url(../../img/common/footer_img_2.gif) no-repeat center top;
		display: block;
		overflow: hidden;
	}

	footer > div > div > small {
		width: auto;
		height: 0;
		padding: 19px 0 0 0;
		border-top: dotted 1px #f3808a;
		background: url(../../img/common/footer_copyright.gif) no-repeat center bottom;
		display: block;
	}

}