@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;
}
.container {
  display: grid;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "a b c"
    "a b e"
    "d f g"
    "d h i"
    "j k l"
    "m n l"
    "o p q"
    "o r s"
    "t u v"
    "w x y"
    "z aa ab"
    "ac ad ab"
    "ae af ag"
    "ah ai aj"
    "ak al am"
    "an ao am"
    "ap aq ar"
    "as at au"
    "as at aw"
    "av ax ay"
    "av az ba"
    "bb bc ba"
    "bd be bf"
    "bg bh bi"
    "bj bk bl"
    "bm bn bo"
    "bp bq bo"
    "br bs bt"
    "bu bv bw"
    "bx bv by"
    "ca cb cc"
	"ce cb cf"
	"cg ch ci"
	"cj ch ck"
	"cl cm cn"
	"co cp cq"
	"cr cp cs"
    "ct cu cv"
	"cw cx cy"
	"cw cz cy"
	  
	"da db dc"
	"da db dd"  
	"de df dg"
	"de dh dg"
	"di dj dk"
	"di dj dl"
	"dm dn do"
	"dm dn do"
	"dp dq dr"
	"ds dt dr"
/*	"du dv"*/
	  ;
}

.container img {
  border-radius: 30px;
  width: 85%;
}
.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}
.d {
  grid-area: d;
}
.e {
  grid-area: e;
}
.f {
  grid-area: f;
}
.g {
  grid-area: g;
}
.h {
  grid-area: h;
}
.i {
  grid-area: i;
}
.j {
  grid-area: j;
}
.k {
  grid-area: k;
}
.l {
  grid-area: l;
}
.m {
  grid-area: m;
}
.n {
  grid-area: n;
}
.o {
  grid-area: o;
}
.p {
  grid-area: p;
}
.q {
  grid-area: q;
}
.r {
  grid-area: r;
}
.s {
  grid-area: s;
}
.t {
  grid-area: t;
}
.u {
  grid-area: u;
}
.v {
  grid-area: v;
}
.w {
  grid-area: w;
}
.x {
  grid-area: x;
}
.y {
  grid-area: y;
}
.z {
  grid-area: z;
}
.aa {
  grid-area: aa;
}
.ab {
  grid-area: ab;
}
.ac {
  grid-area: ac;
}
.ad {
  grid-area: ad;
}
.ae {
  grid-area: ae;
}
.af {
  grid-area: af;
}
.ag {
  grid-area: ag;
}
.ah {
  grid-area: ah;
}
.ai {
  grid-area: ai;
}
.aj {
  grid-area: aj;
}
.ak {
  grid-area: ak;
}
.al {
  grid-area: al;
}
.am {
  grid-area: am;
}
.an {
  grid-area: an;
}
.ao {
  grid-area: ao;
}
.ap {
  grid-area: ap;
}
.aq {
  grid-area: aq;
}
.ar {
  grid-area: ar;
}
.as {
  grid-area: as;
}
.at {
  grid-area: at;
}
.au {
  grid-area: au;
}
.av {
  grid-area: av;
}
.aw {
  grid-area: aw;
}
.ax {
  grid-area: ax;
}
.ay {
  grid-area: ay;
}
.az {
  grid-area: az;
}
.ba {
  grid-area: ba;
}
.bb {
  grid-area: bb;
}
.bc {
  grid-area: bc;
}
.bd {
  grid-area: bd;
}
.be {
  grid-area: be;
}
.bf {
  grid-area: bf;
}
.bg {
  grid-area: bg;
}
.bh {
  grid-area: bh;
}
.bi {
  grid-area: bi;
}
.bj {
  grid-area: bj;
}
.bk {
  grid-area: bk;
}
.bl {
  grid-area: bl;
}
.bm {
  grid-area: bm;
}
.bn {
  grid-area: bn;
}
.bo {
  grid-area: bo;
}
.bp {
  grid-area: bp;
}
.bq {
  grid-area: bq;
}
.br {
  grid-area: br;
}
.bs {
  grid-area: bs;
}
.bt {
  grid-area: bt;
}
.bu {
  grid-area: bu;
}
.bv {
  grid-area: bv;
}
.bw {
  grid-area: bw;
}
.bx {
  grid-area: bx;
}
.by {
  grid-area: by;
}
.bz {
  grid-area: bz;
}

.ca {
/*	display: none;*/
  grid-area: ca;
}

.cb {
  grid-area: cb;
}
.cc {
/*	display: none;*/
  grid-area: cc;
}
.cd {
/*	display: none;*/
  grid-area: cd;
}
.ce {
  grid-area: ce;
}
.cf {
  grid-area: cf;
}
.cg {
  grid-area: cg;
}
.ch {
  grid-area: ch;
}
.ci {
  grid-area: ci;
}
.cj {
  grid-area: cj;
}
.ck {
  grid-area: ck;
}
.cl {
  grid-area: cl;
}
.cm {
  grid-area: cm;
}
.cn {
  grid-area: cn;
}
.co {
  grid-area: co;
}
.cp {
  grid-area: cp;
}
.cq {
  grid-area: cq;
}
.cr {
  grid-area: cr;
}
.cs {
  grid-area: cs;
}
.ct {
  grid-area: ct;
}
.cu {
  grid-area: cu;
}
.cv {
  grid-area: cv;
}
.cw {
  grid-area: cw;
}
.cx {
  grid-area: cx;
}
.cy {
  grid-area: cy;
}
.cz {
  grid-area: cz;
}
.da  {
  grid-area: da;
}
.db  {
  grid-area: db;
}
.dc  {
  grid-area: dc;
}
.dd  {
  grid-area: dd;
}
.de  {
  grid-area: de;
}
.df  {
  grid-area: df;
}
.dg  {
  grid-area: dg;
}
.dh  {
  grid-area: dh;
}
.di  {
  grid-area: di;
}
.dj  {
  grid-area: dj;
}
.dk  {
  grid-area: dk;
}
.dl  {
  grid-area: dl;
}
.dm  {
  grid-area: dm;
}
.dn  {
  grid-area: dn;
}
.do  {
  grid-area: do;
}
.dp  {
  grid-area: dp;
}
.dq  {
  grid-area: dq;
}
.dr  {
  grid-area: dr;
}
.ds  {
  grid-area: ds;
}
.dt  {
  grid-area: dt;
}
.du  {
  grid-area: du;
}
.dv  {
  grid-area: dv;
}
.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;
  }
  .container {
    display: grid;
    /*  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;*/
    /*  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;*/
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "a b c d e"
      "a b f d g"
      "h j l m o"
      "i k l n o"
      "p r t v x"
      "q s u w y"
      "z ab ac ae ag"
      "aa ab ad af ah"
      "ai ak am an ao"
      "aj al am ap aq"
      "ar as at av aw"
      "au as at av ax"
      "ay ba bb bd bf"
      "az ba bc be bg"
      "bh bj bl bn bo"
      "bi bk bm bp bo"
      "bq br bs bt bu"
	  "bv bw bx by ce"
	  "bv ca cb cc cf"
	  "cg ch cb ci cj"
	  "ck ch cl cm cn"
	  "co cp cq cr cs"
	  "ct cu cv cw cx"
	  "cy cz da cw db"
	  "cy dc da dd db"
	  "de df dg dh di"
	  "de dk dg dl di"
	  "dj dm dn do dp"
	  "dj dm dn do dq"
	  "dr ds dv du dt"
/*	  "dr"*/
    ;
  }
  
  .container img {
    border-radius: 20px;
  }
  

	.ca{
		display:block;
	}
	.cc{
		display: block;
	}

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