@charset "utf-8";

/* =============================================================

	high resolution

* ============================================================= */

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),(min-resolution: 1.3dppx) {

	.top-head:before {
		background-image: url(../images/logo_x2.png);
		background-size: 200px 350px;
	}

}

/* =============================================================

	Init

* ============================================================= */

/* ---------------------------------------
	max-width: 959px
--------------------------------------- */

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

	body {
		font-size: 81.25%; /* 13px base */
		line-height: 1.846;
	}

}

/* ---------------------------------------
	max-width: 719px
--------------------------------------- */

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

	body {
		font-size: 75%; /* 12px base */
		line-height: 1.833;
	}

}


/* =============================================================

	Typography

* ============================================================= */

/* ---------------------------------------
	max-width: 959px
--------------------------------------- */

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

	/* Headings */

	 h1, .h1 {
		font-size: 2.308em;
		line-height: 1.2;
		margin-bottom: 40px;
	}

}


/* ---------------------------------------
	max-width: 719px
--------------------------------------- */

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

	/* Headings */

	 h1, .h1 {
		font-size: 1.75em;
		line-height: 1.333;
		margin-bottom: 20px;
	}

}


/* =============================================================

	Layouts

* ============================================================= */

/* ---------------------------------------
	max-width: 959px
--------------------------------------- */

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

	/* container */

	.container,
	.container-first {
		border-width: 20px;
	}

	/* body */

	.body,
	.body-wide {
		margin: 40px 0;
	}

	.body-wide {
		padding: 0 20px;
	}

}

/* ---------------------------------------
	max-width: 719px
--------------------------------------- */

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

	/* body */

	.body,
	.body-wide {
		margin: 30px 20px;
		padding: 0;
	}

}



/* =============================================================

	Boxs

* ============================================================= */

/* ---------------------------------------
	max-width: 959px
--------------------------------------- */

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

	.box,
	.box-frame {
		margin: 30px -20px;
		padding: 30px;
	}
}

/* ---------------------------------------
	max-width: 719px
--------------------------------------- */

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

	.box,
	.box-frame {
		margin: 20px -5px;
		padding: 20px;
	}

	.box-frame {
		border: 4px solid #4d4d4d;
	}
}


/* =============================================================

	Top

* ============================================================= */


/* ---------------------------------------
	max-width: 959px
--------------------------------------- */

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

	/* top-head */

	.top-head:before {
		top: 10px;
	}

	.top-head-title {
		font-size: 7.692em;
		margin-left: -20px;
		margin-right: -20px;
	}

	.top-head-box {
		margin: 0 30px 50px;
	}

	.top-head-box a {
		font-size: 1.154em;
		line-height: 1.333;
		padding: 40px 10px;
	}

	.top-head-box strong a:before {
		margin-left: 12px;
	}

	.top-head-box strong a:after {
		margin-left: 20px;
	}

}


/* ---------------------------------------
	max-width: 799px
--------------------------------------- */

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

	/* top-head */

	.top-head-title {
		font-size: 6.923em;
	}

}


/* ---------------------------------------
	max-width: 719px
--------------------------------------- */

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

	/* top-head */

	.top-head:before {
		width: 120px;
		height: 120px;
		background-position: 0 -200px;
		margin-left: -60px;
	}

	.top-head-title {
		font-size: 5em;
		letter-spacing: 5px;
		margin: 145px -20px 50px;
	}

	.top-head-box {
		margin: 0 10% 50px !important;
	}

	.top-head-box ul {
		display: block;
		padding: 0 20px;
		width: auto;
	}

	.top-head-box li {
		display: block;
		border-top: 1px dotted #333;
	}
	.top-head-box li:first-child {
		border-top: none;
	}

	.top-head-box a {
		font-size: 1.25em;
		line-height: 1.333;
		padding: 15px 20px !important;
		margin: 0 -20px;
	}

	.top-head-box i {
		display: none;
	}

	.top-head-box strong a:after,
	.top-head-box strong a:before {
		display: none;
	}

}


/* ---------------------------------------
	max-width: 479px
--------------------------------------- */

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

	/* top-head */

	.top-head-title {
		font-size: 3.333em;
		letter-spacing: 4px;
	}

}