@charset "UTF-8";

/* Reset
------------------------------------------------ */

section, nav, article, aside, hgroup, header, footer, figure, figcaption, summary {
	display: block;
	margin: 0;
	padding: 0;
}
caption, th {
	margin: auto;
	text-align: left;
}
img {
	border: 0;
	vertical-align: bottom;
}
address, caption, th {
	font-weight: normal;
	font-style: normal;
}
h1 {
	margin: 0;
	padding: 0;
}
div {
	box-sizing: border-box;
}

/* body,Anchor
------------------------------------------------ */

body {
	margin: 0;
	padding: 0;
	background-color: #222;
	color: #222;
	font-size: 14px;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", 'ヒラギノ角ゴ ProN W3', メイリオ, arial, helvetica, sans-serif;
	line-height: 1.5;
}
a:link {
	color: #0e1c45;
	text-decoration: none;
}
a:visited {
	color: #0e1c45;
}
a:hover {
	color: #ccc;
	text-decoration: none;
	transition-property: all;
	transition: 0.2s linear;
}
header:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: “alpha( opacity=60)”;
	transition-property: all;
	transition: 0.2s linear;
}

.clearfix {
	*zoom: 1;
}
.clearfix:before, .clearfix:after {
	display: table;
	content: "";
	line-height: 0;
}
.clearfix:after {
	clear: both;
}

/* Layout
------------------------------------------------ */

#container {
	margin: 0 auto;
	width: 1400px;
	padding: 0;
	background-color: #fff;
}

.inside {
	width: 1000px;
	margin: 0 auto;
}

/* content
------------------------------------------------ */

#content {
	background: #fff;
	text-align: center;
}

#content a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: “alpha( opacity=70)”;
	transition-property: all;
	transition: 0.2s linear;
}

header {
	overflow: hidden;
	margin: 0 auto;
}

/* common
------------------------------------------------ */
#area div, #area p, #area ul, #area li{
	box-sizing: border-box;
}

/* #box01
------------------------------------------------ */
#box01 {
	position: relative;
}

#box01 .ttl{
	position: absolute;
	top: 50px;
	z-index: 1;
	width: 100%;
	text-align: center;
}

#box01 .txt{
	z-index: 2;
}

/* #box02
------------------------------------------------ */
#box02 {
	position: relative;
}

#box02 .note{
	position: absolute;
	bottom: 40px;
	left: 40px;
	font-size: 15px;
	font-weight: 500;
	text-align: left;
	width: 43%;
	letter-spacing: -0.04em;
	padding: 0 0;
	margin: 0 0;
}

/* #box03
------------------------------------------------ */
#box03{
	padding: 60px 0 40px;
}
#box03 img{
	max-width: 576px;
}

/* footer
------------------------------------------------ */
#footer {
	clear: both;
	width: 1400px;
	margin: 0 auto;
	color: #222;
	background-color: #fff;
}
#footer {
	display: block;
	padding: 8px 0px 40px;
	text-align: center;
	font-size: 22px;
	font-weight: 500;
}
.copyright {}


/* mediaqueries
------------------------------------------------ */
@media screen and (min-width: 1000px) {
	.sp-only {
		display: none;
	}
	.sp-xs-only {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	.sp-only {
		display: none;
	}
	.sp-xs-only {
		display: none;
	}
}
@media screen and (max-width: 1400px) {
	#container,#footer{
		width: 95%;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	
	#box01 .ttl {
		padding: 0 5%;
		top: 3.5%;
	}
	
	#box02 .note{
		left: 3%;
		bottom: 7%;
		font-size: calc(11vw/10);
		width: 46%;
		letter-spacing: -0.06em;
	}
	
}
@media screen and (max-width: 1100px) {
	.inside {
		width: 100%;
		padding: 0 6%;
	}
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 767px) {
	.pc-only {
		display: none;
	}
	.sp-xs-only {
		display: none;
	}
	
	#container, #footer {
		width: 460px;
	}

	#box01 .ttl {
		padding: 0 8%;
		top: 3%;
	}
	
	#box02 .note{
		padding: 0 4% 4% 5%;
		left: 0;
		bottom: 0;
		font-size: 11px;
		width: 100%;
		letter-spacing: -0.06em;
	}

	#box03 {
		padding: 30px 0 20px;
	}
	#box03 img{
		max-width: 100%;
	}

	#footer {
		font-size: 16px;
		padding: 8px 0px 20px;
	}
}
@media screen and (max-width: 480px) {
	.sp-xs-only {
		display: inline-block;
	}
	
	#container, #footer {
		width: 300px;
	}
	
	#box02 .note{
		padding: 0 3% 3% 4%;
		font-size: 9px;
		line-height: 1.2;
		letter-spacing: -0.06em;
	}

	#box03 {
		padding: 15px 0 10px;
	}
	
	#footer {
		font-size: 11px;
		padding: 4px 0px 10px;
		letter-spacing: -0.06em;
	}

}
@media screen and (max-width: 300px) {
	#container, #footer {
		width: 280px;
	}
}