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

body {
 background-color: #F7EECE;
  justify-content: center;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.header {
  width: 100%;
  position: fixed;
  z-index: 9999;
  background-color: #f9f8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_logo {
  display: flex;
}
.header_logo a {
  width: 50px;
  display: block;
  padding: 10px 0px 10px 10px;
  /*なめらかに登場させている*/
  animation-name: smoothAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transform-origin: left;
  opacity: 0;
}
.header ul {
  align-items: center;
  list-style: none;
  text-align: left;
}
.header a{
	color: #ffffff;
}

.main {
  max-width: 1060px;
  margin: 0 auto;
  overflow: hidden;
	
}
/*なめらかに登場させている*/
@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1;
  }
}
.top_visual{
	width: 90%;
  margin: 0 auto;
  padding-top: 120px;
 
}

.photo-library {
/*  max-width: 1060px;*/
  margin: 0 auto;
/*  overflow: hidden;*/
/*	overflow: auto;*/
	position: relative;
/*	width: 90%;*/
  padding-top: 140px;
	
}
.bg img{
opacity: 0.2;
}
.photos img{
	opacity: 1;
}
/*
.main{
	position: relative;
}
*/
.photos img {
  overflow: hidden;
  cursor: pointer;
}

.photo_a img{
	position: absolute;
	top: 110px;
    left: 20px;
    width: 15%;
    border-radius: 30px;
}

.photo_b img{
	position: absolute;
	top: 214px;
    left: 163px;
    width: 16%;
    border-radius: 30px;
}
.photo_c img{
	position: absolute;
	top: 126px;
    left: 355px;
    width: 24%;
    border-radius: 30px;
}

.photo_d img{
	position: absolute;
	top: 182px;
    left: 587px;
    width: 23%;
    border-radius: 30px;
}

.photo_e img{
	position: absolute;
	top: 157px;
    left: 840px;
    width: 21%;
    border-radius: 30px;
}

.photo_f img{
	position: absolute;
	top: 417px;
    left: 0px;
    width: 25%;
    border-radius: 30px;
}

.photo_g img{
	position: absolute;
	top: 377px;
    left: 261px;
    width: 24%;
    border-radius: 30px;
}

.photo_h img{
	position: absolute;
	top: 574px;
    left: 386px;
    width: 30%;
    border-radius: 30px;
}

.photo_i img{
	position: absolute;
	top: 628px;
    left: 739px;
    width: 24%;
    border-radius: 30px;
}

.photo_j img{
	position: absolute;
	top: 409px;
    left: 823px;
    width: 22%;
    border-radius: 30px;
}

.photo_k img{
	position: absolute;
	top: 768px;
    left: 338px;
    width: 23%;
    border-radius: 30px;
}

.photo_l img{
	position: absolute;
	top: 796px;
    left: 61px;
    width: 23%;
    border-radius: 30px;
}

.photo_m img{
	position: absolute;
	top: 1034px;
    left: 548px;
    width: 39%;
    border-radius: 30px;
}

.photo_n img{
	position: absolute;
	top: 826px;
    left: 619px;
    width: 25%;
    border-radius: 30px;
}

.photo_o img{
	position: absolute;
	top: 976px;
    left: 17px;
    width: 21%;
    border-radius: 30px;
}

.photo_p img{
	position: absolute;
	top: 806px;
    left: 855px;
    width: 19%;
    border-radius: 30px;
}
.photo_q img{
	position: absolute;
top: 1187px;
    left: 825px;
    width: 22%;
    border-radius: 30px;
}

.photo_r img{
	position: absolute;
	top: 1134px;
    left: 100px;
    width: 26%;
    border-radius: 30px;
}

.photo_s img{
	position: absolute;
	top: 1015px;
    left: 314px;
    width: 21%;
    border-radius: 30px;
}

.photo_t img{
	position: absolute;
	top: 1328px;
    left: 555px;
    width: 25%;
    border-radius: 30px;
}
.photo_u img{
	position: absolute;
	top: 1417px;
    left: 805px;
    width: 21%;
    border-radius: 30px;
}
.photo_v img{
	position: absolute;
	top: 1695px;
    left: 670px;
    width: 27%;
    border-radius: 30px;
}

.photo_w img{
	position: absolute;
	top: 1562px;
    left: 27px;
    width: 23%;
    border-radius: 30px;
}

.photo_x img{
	position: absolute;
	top: 1543px;
    left: 348px;
    width: 23%;
    border-radius: 30px;
}
.photo_y img{
	position: absolute;
    top: 1359px;
    left: 392px;
    width: 18%;
    border-radius: 30px;
}

.photo_z img{
	position: absolute;
	top: 1588px;
    left: 834px;
    width: 20%;
    border-radius: 30px;
}

.photo_aa img{
	position: absolute;
	top: 1756px;
    left: 12px;
    width: 33%;
    border-radius: 30px;
}

.photo_ab img{
	position: absolute;
	top: 2014px;
    left: 130px;
    width: 21%;
    border-radius: 30px;
}

.photo_ac img{
	position: absolute;
	top: 1947px;
    left: 583px;
    width: 24%;
    border-radius: 30px;
}

.photo_ae img{
	position: absolute;
	top: 1521px;
    left: 611px;
    width: 16%;
    border-radius: 30px;
}

.photo_ag img{
	position: absolute;
	top: 1845px;
    left: 533px;
    width: 20%;
    border-radius: 30px;
}

.photo_ah img{
	position: absolute;
    top: 1827px;
    left: 908px;
    width: 13%;
    border-radius: 30px;
}
.photo_ai img{
	position: absolute;
   top: 1922px;
    left: 273px;
    width: 16%;
    border-radius: 30px;
}
.photo_aj img{
	position: absolute;
  top: 1722px;
    left: 413px;
    width: 21%;
    border-radius: 30px;
}

.photo_ak img{
    position: absolute;
    top: 2166px;
    left: 229px;
    width: 20%;
    border-radius: 30px;
}
.photo_al img{
	position: absolute;
  top: 2028px;
    left: 425px;
    width: 19%;
    border-radius: 30px;
}
.photo_am img{
	position: absolute;
  top: 2296px;
    left: 457px;
    width: 22%;
    border-radius: 30px;
}

.photo_an img{
	position: absolute;
    top: 1975px;
    left: 666px;
    width: 19%;
    border-radius: 30px;
}


.photo_ao img{
	position: absolute;
   top: 2070px;
    left: 853px;
    width: 17%;
    border-radius: 30px;
}

.photo_ap img{
	position: absolute;
   top: 2179px;
    left: 2px;
    width: 20%;
    border-radius: 30px;
}
.photo_aq img{
	position: absolute;
  top: 2468px;
    left: 319px;
    width: 28%;
    border-radius: 30px;
}

.photo_ar img{
	position: absolute;
    top: 2882px;
   left: 90px;
    width: 24%;
    border-radius: 30px;
}

.photo_as img{
	position: absolute;
  top: 2718px;
    left: 381px;
    width: 30%;
    border-radius: 30px;
}

.photo_at img{
	position: absolute;
  top: 2387px;
    left: 669px;
    width: 37%;
    border-radius: 30px;
}

.photo_au img{
	position: absolute;
  top: 3096px;
    left: 603px;
    width: 24%;
    border-radius: 30px;
}

.photo_av img{
	position: absolute;
    top: 3412px;
    left: 779px;
    width: 24%;
    border-radius: 30px;
}

.photo_aw img{
	position: absolute;
    top: 2900px;
    left: 803px;
    width: 24%;
    border-radius: 30px;
}

.photo_ax img{
	position: absolute;
    top: 2243px;
    left: 848px;
    width: 19%;
    border-radius: 30px;
}

.photo_ay img{
	position: absolute;
   top: 2333px;
    left: 200px;
    width: 24%;
    border-radius: 30px;
}

.photo_az img{
	position: absolute;
    top: 2405px;
    left: 3px;
    width: 24%;
    border-radius: 30px;
}
.footer{
		margin-top: 50px; 
	background-color: #f9f8e8;
	padding: 50px 0 0;
    border-radius: 90px 90px 0 0;
	}



.footer__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}


.footer p{
	color: #5f462a;
    font-size: 1.5rem;
    text-transform: uppercase;
}
.footer__nav li {
     margin: 10px 0px 0 10px;
}
.footer__nav a{
	 text-align: center;
	 font-size: 1.0rem;
	 color: #4e2217;
	 text-decoration: none;
	 font-weight: bold;
	}
.footer__nav img{
	width: 35px;
}
.animation {
  animation: fuwafuwa 2s linear infinite;
  scale: 1;
}
.dm{
	font-size: 1rem;
/*	color: #4485c1;*/
/*	margin-bottom: 65px;*/
}
@keyframes fuwafuwa {
  0% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-10px)
  }
  100% {
    transform: translateY(0)
  }
}
.copy p{
	font-size: 0.8rem;
/*	padding: 7px;*/
	color: #5f462a;
}
.copy{
	 background-color: #f9f8e8;
}
/*ハンバーガーボタン*/
@media(max-width:1000px) {
  .hamburger {
    position: fixed;
    top: 0;
    right: 0;
    background: #4485c1;
    border-radius: 20px;
    opacity: 0.85;
    width: 100px;
    padding: 100px 30px;
    z-index: 1;
    display: none;
  }
	.hamburger li{
  line-height: 4rem;
		text-transform: uppercase;
}
  .hamburger img {
    width: 55px;
    display: flex;
  }
  .hamburger a {
    text-align: left;
	  color: #ffffff;
  }
  .hamburger.active {
    display: block;
  }
  .open-button {
    display: block;
    position: absolute;
    right: 17px;
    top: 22px;
    width: 40px;
    height: 40px;
  }
  .open-button span, .open-button span:before, .open-button span:after {
    position: absolute;
    height: 3px;
    width: 35px;
    background: #4485c1;
    display: block;
    content: "";
  }
  .open-button span:before {
    bottom: -8px;
  }
  .open-button span:after {
    bottom: -16px;
  }
  .close-button {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 40px;
    padding: 10px 16px 0 0;
    z-index: 2;
  }
}
@media(min-width:1060px) {
  .header_logo a {
	 width: 55px;
    padding: 15px 0px 15px 15px;
}
	
	.header__nav li {
    margin:  10px 12px 0 0;
	}
  .header__nav li img {
    width: 69px;
	}	
 .header__nav p {
    text-align: center;
    font-size: 1.4rem;
	}
	
	.close-button {
    display: none;
		color: #ffffff;
  }
	
	.hamburger {
    margin-left: auto;
  }
  .hamburger a {
    color: #4485c1;
        font-size: 2rem;
        text-transform: uppercase;
        font-weight: bold;
  }
  .hamburger ul {
    display: flex;
  }
  .hamburger li {
    margin-right: 20px;
  }
  .hamburger .sns {
    display: none;
  }

.footer__nav li {
    margin: 10px 20px 0 0;
  }
  .footer__nav img {
   width: 69px;
  }
  .copy p{
		font-size: 1.4rem;
	  
  }
}