@charset "utf-8";

body{
	margin:0;
	background:#eee;
}

img {
  max-width: 100%;
  vertical-align: top;
}


.insta{
	position:absolute;
	bottom:14%;
	left:78%;
	width:16%;
}

.gallery {
  display: flex;
  flex-wrap:wrap;
  margin: 0px auto;
  width:90%;
  max-width: 1200px;
  position: relative;
  padding-top: 70%;
}
@media screen and (max-width: 1200px) {
  .gallery {
    padding-top: 68%;
  }
}
@media screen and (min-width: 1200px) {
  .gallery {
    padding-top: 920px;
  }
}
.gallery__item{
	width:20%;
}
.gallery__img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.gallery__thumb {
  padding-top: 6px;
  margin: 15px 6px 6px 6px;
  display: block;
}
.gallery__thumb img{
	width:100%;
}
.gallery__selector {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.gallery__selector:checked + .gallery__img {
  opacity: 1;
}
.gallery__selector:checked ~ .gallery__thumb > img {
  box-shadow: 0 0 0 3px #0be2f6;
}

.gallery .title{
  width:96%;
  padding:6px 2%;
  font-size:1.2em;
  font-weight:bold;
  color:#043566;
  text-align:center;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
@media screen and (min-width: 481px) {
  .gallery .title{
	  top:60%;
  }
}
@media screen and (min-width: 768px) {
  .gallery .title{
	  padding:20px 2%;
	  font-size:1.8em;
  }
}


/*---------- レイアウトCSS ----------*/
h1{
	text-align: center;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin:30px auto;
	width:80%;
	max-width:600px;
}



.container {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.main {
    width: 100%;
    margin-right: 5px;
    position: relative;
	padding-bottom:32%;
}


.arow{
	position:absolute;
	z-index:1000;
	margin-top:28%;
}
@media screen and (max-width: 480px) {
	.main{
		margin-top:140px;
	}
  .arow {
    width: 10%;
  }
}
@media screen and (min-width: 481px) {
	.main{
		margin-top:70px;
	}
  .arow {
    width: 6%;
  }
}
.arow_left{
	left:0;
}
.arow_right{
	right:0;
}
.arow img{
	width:100%;
}


/*---------- footer css ----------*/
#footer {
	width: 96%;
	margin: 30px 0 0 0;
	padding: 4px 2%;
	text-align: left;
	clear:both;
	background: #07539F;
	overflow: hidden;
	position:fixed;
	bottom:0;
	z-index:9999;
}


#fwrap {
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
}

#flogo {
	float: left;
	width: 40%;
}

#cr {
	float: right;
	text-align: right;
	width: 60%;
	font-size: 60%;
	color: #fff;
}

#cr a{
	text-decoration:none;
	color:#FFF;
}