@charset "UTF-8";

/* import reset */
@import url("reset.css");

html {
	font-size:62.5%;
}
body { 
color: #fff;
position:relative;
margin-left:auto; margin-right:auto; width:auto; height:auto; 
font-family:'Helvetica neue', Helvetica, "游ゴシック", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
font-weight:100;
letter-spacing: 1px;
text-align:center;
-webkit-text-size-adjust: 100%;
background: #000;
}

/*//////////////////*/

h1,h2,h3,h4,h5,h6,p {  }
h1 {
	font-size: 5rem;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 1.5rem 0;
}
h2 {
	font-size: 3.8rem;
	font-weight: bold;
	color: #fff;
	margin-top: 0;
}
p {
	font-size: 1.4rem;
	color: #fff;
}
h3 { }
h4 { }
h5 { }
h6 { }

a {
	text-decoration:none;
}
a:hover {
	opacity: 0.7;
}

/*アスペクトボックス*/
.aspectwrapper {
	position: relative;
	overflow: hidden;
	float: left;
} 

.aspectwrapper {
	width: 33.333333%;
	-webkit-width: calc(100%/3);
	width: calc(100%/3);
}

/*ベースサイズ////////////////////////////////////////*/
.aspectwrapper:after {
	padding-top: /*61.8046972*/72%;
	display: block;
	content: "";
	clear: both;
}

.content{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	transition: 0.3s ease all;
	border: 2px solid rgba(254,254,254,.8);
	border-spacing: 0;
}
.con1 .content {
	border-left: none;
}
.con4 .content {
	border-left: none;
}
.content:hover{
	background: rgba(255,255,255,.1);
}
div .content > h2 {
	position: relative;
	text-align: center;
	top: 2%;
}
/*div.con1 .content > h2 {
	position: relative;
	top: 2%;
	left: 10%;
	text-align: left;
}*/
div.con1 .content > img {
	position: absolute;
	top: 25%;
	width: 100%;
}
/*div.con2 .content > h2 {
	position: relative;
	top: 2%;
	text-align: center;
}*/
div.con2 .content > img {
	position: absolute;
	top: 30%;
	left: 20%;
	width: 60%;
}
div.con2 .content > p {
	position: relative;
	text-align: center;
	color: #fff;
	top: 65%;
}
/*div.con3 .content > h2 {
	position: relative;
	top: 2%;
	right: 10%;
	text-align: right;
}*/
div.con3 .content > img {
	position: absolute;
	top: 25%;
	width: 100%;
}	
/*div.con4 .content > h2 {
	position: relative;
	top: 2%;
	left: 10%;
	text-align: left;
}*/
div.con4 .content > img {
	position: absolute;
	top: /*40%*/25%;
	width: 100%;
}
/*div.con5 .content > h2 {
	position: relative;
	top: 2%;
	text-align: center;
}*/
div.con5 .content > img {
	position: absolute;
	top: 45%;
	left: 25%;
	width: 50%;
}
/*div.con6 .content > h2 {
	position: relative;
	text-align: center;
	top: 2%;
}*/
div.con6 .content > img {
	position: absolute;
	top: 25%;
	width: 100%;
}
.img-content {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
}
.img-content-2nd {
	position: absolute;
	top: 91%;
	left: 0%;
	width: 100%;
}
.switch-link {
	position: absolute;;
	top: 0.8rem;
	left: 2rem;
}
.switch-link p {
	font-size: 1.4rem;
}
.switch-link a {
	color: rgba(222,222,222,1);
}
.site-info {
	position: absolute;;
	top: 0.8rem;
	right: 2rem;
}
.site-info p {
	font-size: 1.4rem;
}
.site-info a {
	color: rgba(222,222,222,1);
}
footer {	
	border-top: 2px solid rgba(222,222,222,.4);
	text-align: center;
}
@media (max-width:1800px) {
h1 {
	font-size: 4.6rem;
}
h2 {
	font-size: 3.4rem;
}
p {
	font-size: 1.3rem;
}
}
@media (max-width:1700px) {
h1 {
	font-size: 4.2rem;
}
p {
	font-size: 1.2rem;
}
}
@media (max-width:1550px) {
h1 {
	font-size: 3.8rem;
}
h2 {
	font-size: 3rem;
}
p {
	font-size: 1.1rem;
}
}
@media (max-width:1400px) {
h1 {
	font-size: 3.2rem;
}
h2 {
	font-size: 2.6rem;
}
p {
	font-size: 1rem;
}
}
@media (max-width:1200px) {
h1 {
	font-size: 2.8rem;
}
h2 {
	font-size: 2.4rem;
}
}
@media (max-width:1050px) {
h1 {
	font-size: 2.4rem;
}
h2 {
	font-size: 2rem;
}
}
@media (max-width:900px) {
h1 {
	font-size: 1.8rem;
}
h2 {
	font-size: 1.6rem;
}
}
@media (max-width:700px){
h1 {
	font-size: 1.6rem;
	padding-top: 3rem;
}
.aspectwrapper {
	width:calc(100%/2);
}
}
@media (max-width:500px){
.aspectwrapper {
	width:calc(100%);
}
div.con2 .content > p {
	top: 75%;
}

/*クリアフィックス*/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}