@charset "utf-8";

body,html,h1,h2,h3,p,ul,li{
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "Hiragino Kaku Gothic ProN",Meiriyo,sans-serif;
}

ul{
  list-style: none;
}

a{
  text-decoration: none;
  color: inherit;
}

img{
  border: none;
  vertical-align: bottom;
  /* Fluid Image */
  max-width: 100%;
  /* 元々の値を上回ることを防ぐ */
  height: auto;
}



/* ----共通---- */
body{
  background: url(../img/bg.png) no-repeat / cover;
}

.container{
  max-width:1280px;
  margin:0 auto;

}
/*--- header--- */
header>.container{
  display: flex;
  max-width:100%;
  margin:0 auto;
  background: #fff;
  }

  h1{
  font-family: 'Dancing Script', cursive;
  font-family: 'Fugaz One', cursive;
  text-align: center;
  max-width:100%;
  margin: 0 auto;
  padding:30px 0 30px 80px;
  font-size:65px;
  line-height: 50px;
  background: url(../img/icon_dp.png) no-repeat left center;
  width:8.5em;
  color: rgba(53, 29, 2, 0.938);
  display: inline-block;
}
/* PC用 Nav */
.pcnav{
   max-width:800px;
   margin: 0 auto 20px;
   display: block;
   justify-content: space-between;

  }

.pcnav ul{
  
  display: flex; 
  margin: 0 auto;
}
.pcnav li{
  width:calc(100%/5) ;
  line-height: 44px;
  font-size:26px;
  font-weight: bold;
  text-align: center;
  /* flex-grow: 1; */
  
}

.pcnav a {
  display: block;
  border-right: solid 1px rgba(53, 29, 2, 0.938);
  color: rgba(53, 29, 2, 0.938);

}
  .pcnav li:first-child a {
  border-left: 1px solid rgba(53, 29, 2, 0.938);
  }
/* SP用 Nav */
.spnav,.btn{
  display: none;
}


/*----Grid Layout----*/
.container{
  display:flex;
  max-width:1280px;
  margin:0 auto;
  padding: 10px;
  background:url(../img/bg.png);
}

.container ul{
  width:calc(100%*(640/1280));
  }

  /*imgでもok*/
  .container li{ 
  width:calc(100%*(300/640));
  height: auto;
  float: left;
  margin:calc(100%*(10/640));
  }

/* footer */
footer{
  text-align: center;
  padding: 30px 0;
  text-align: center;
  font-weight: bold;
  color:#ffffff;
  background-color:rgba(53, 29, 2, 0.938);
}



@media screen and (max-width:899px){
/*Navigation*/
.pcnav{
  display: none;
}
/* menw btn */
.btn {
  display: block;
  border: 1px solid #532a08;
  border-radius: 5px;
  height: 60px;
  font-size: 35px;
  color: rgb(51, 14, 14);
  background-image: linear-gradient(to bottom, rgba(247, 189, 151, 0.904), rgb(82, 43, 8));
  text-shadow: 1px 1px 2px #fff,-1px -1px 2px #532a08;
  overflow: hidden;
  }
  .btn i {
  display: block;
  line-height: 60px;
  margin: 0 auto;
  width: 60px;
  text-align: center;  
}

/* 上向き矢印非表示 */
.btn i:last-child{
  display: none;
  }
  /* クラス名がついた時のCSS */
  .up i:first-child{
  display: none;
  }
  .up i:last-child{
  display: block;
  }

/*spnav*/
.spnav{
  position: absolute;
  width: 100%;
  }

.spnav li{
  line-height: 70px;
  color:#fff;
  text-shadow: 1px 1px 2px #532a08;
  text-align: center;
  font-weight: bold;
  font-size: 24px;

}

.spnav a{
  display: block;
  background: rgba(0,0,0,0.5);
  border-bottom:1px solid #fff ;
}



/*----Grid Layout → 2column ----*/
.container{
  display: block;
  overflow:hidden
   }

.container ul {
  width:auto;
  }




/* footer
.container p{
  clear: both;
} */
}

@media screen and (max-width:599px){

.container li{
  float: none;
  width: auto;
  margin:0 0 10px 0;
}



@media screen and (max-width:580px){

  h1{
    padding:20px 0px 20px 70px;
    font-size:50px;
    line-height: 50px;
    background: url(../img/icon_dp.png) no-repeat left center;
    background-size: 80px;
    width:4em;
    display: inline-block;
  }
}

@media screen and (max-width:412px){
  h1{
    padding:20px 0px 20px 75px;
    font-size:50px;
    line-height: 50px;
    background: url(../img/icon_dp.png) no-repeat left center;
    background-size: 80px;
    width:4em;
    display: inline-block;
  }

}