body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}
a{text-decoration:none; outline:none!important;}
table {border-spacing: 0;}
fieldset,img {border: 0;}
html,body,div,article,section,nav,header,footer,input,textarea {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
div,article,section{display:block; overflow:hidden;}
strong{font-weight: bold;}
ol,ul {list-style: none;margin:0;padding:0;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;margin:0;padding:0;}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}

html{
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}
html,body{
	position:relative;
	height:100%;
	min-height:100%;
}
body{
	color:#555;
	background:#fff;
	font-size:1.3rem;
  font-family: 'Noto Serif JP', serif;
	letter-spacing: .1rem;
  line-height: 3rem;
	position:relative;
}
a{color:#b2b2b2; text-decoration:none;}
img{max-width:100%; vertical-align:bottom;}

#container{
  position: relative;
  overflow: visible;
  padding: 20px;
}
#p-home #container{
  padding: 0;
}

#bnavi{
  position: fixed;
  background: #fff;
  display: block;
  z-index: 999;
  left:0;
  bottom: 0;
  width: 100vw;
  height: 65px;
}

#gnavi{
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 50px;
  width: 100vw;
  z-index: 1000;
  background: #fff;
  -webkit-transition: .5s;
     -moz-transition: .5s;
      -ms-transition: .5s;
       -o-transition: .5s;
          transition: .5s;
  overflow: hidden;
}
#gnavi.on{
  height: 400px;
}
#gnavi ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
#gnavi .btn-gnavi{
  width: 30px;
  height: 30px;
  position: fixed;
  bottom: 20px;
  left: calc(50% - 15px);
  background: url(../img/ico-gnavi.svg) center center no-repeat;
  background-size: contain;
  cursor: pointer;
}
#gnavi.on .btn-gnavi{
  bottom: 20px;
  left: calc(50% - 15px);
  background: url(../img/ico-close.svg) center center no-repeat;
  background-size: contain;
  display: block;
}
#gnavi a{
  font-family: 'Alegreya Sans', sans-serif;
  padding: 5px 0;
  margin-top: 5px;
  display: none;
  -webkit-transition: .5s;
     -moz-transition: .5s;
      -ms-transition: .5s;
       -o-transition: .5s;
          transition: .5s;
}
#gnavi.on a{
  display: block;
  color:#4fa8c9;
}
#gnavi a.logo{
  width: 130px;
  height: auto;
  margin-bottom: 25px;
  padding: 0 25px;
}
#gnavi .insta{
  width: 33px;
  height: 33px;
  margin: 0 auto;
}
#gnavi .insta img{
  width: 23px;
  height: 23px;
  margin: 0 auto;
}

footer{
  width:100%;
  line-height: 15px;
  position:relative;
  font-size:1rem;
  text-align:center;
  color:rgba(0,0,0,.2);
  letter-spacing: 0;
  padding-bottom: 75px;
}

.btn{
	margin: 50px auto 30px;
	text-align: center;
  overflow: visible;
}
.btn a,
.back{
	color: #4fa8c9;
	padding: 5px 5px 10px 20px;
	background:url(../img/arrow.png) left bottom no-repeat;
	background-size: 100px auto;
}
.next,
.before{
  color: #4fa8c9;
  font-family: serif;
  position: absolute;
  top: calc(50% - 70px);
  font-size: 30px;
  padding: 50px 10px;
}
.next{
	left: 0;
}
.before{
	right: 0;
}
.next:hover,
.before:hover{
  opacity: .4;
}

.page h1{
  color:#4fa8c9;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 1.9rem;
  line-height: 4rem;
  letter-spacing: .2rem;
  padding: 30px;
  text-align: center;
}

/* ----------------- top ------------------ */
#bl-fv{
	background:url(../img/bg-grey.jpg) center center no-repeat;
	background-size: cover;
	height: calc(100vh - 300px);
	text-align: center;
	position: relative;
	overflow: visible;
}
.cfimg{
	width: 100vw;
  height: calc(100vh - 300px);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
  top: 0;
  left: 0;
  animation: show 20s infinite;
  -webkit-animation: show 20s infinite;
  opacity: 0;
}
.f1{
	background-image:url(../img/fv1.jpg);
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.f2{
	background-image:url(../img/fv2.jpg);
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
}
.f3{
  background-image:url(../img/fv3.jpg);
  animation-delay: 10s;
  -webkit-animation-delay: 10s;
}
.f4{
  background-image:url(../img/fv4.jpg);
  animation-delay: 15s;
  -webkit-animation-delay: 15s;
}
#p-home #gnavi.on{
  height: 340px;
}

@keyframes show {
  0% {opacity:0; filter:blur(20px);}
  3% {opacity:1; filter:blur(0);}
  22% {opacity:1; filter:blur(0);}
  25% {opacity:0; filter:blur(20px);}
}

@-webkit-keyframes show {
  0% {opacity:0; filter:blur(20px);}
  3% {opacity:1; filter:blur(0);}
  22% {opacity:1; filter:blur(0);}
  25% {opacity:0; filter:blur(20px);}
}

/* ----------------- works ------------------ */
#p-works{
	background: #f1f1f1;
}
.works{
	display: -webkit-flex;
	display: flex;
	justify-content:center;
	align-content: center;
	flex-wrap: wrap;
}
.works section{
  background: #fff;
  margin:1vw;
}

.works section:hover{
  filter: contrast(150%) brightness(95%);
		-webkit-transition: all .5s ease-out;
		   -moz-transition: all .5s ease-out;
		    -ms-transition: all .5s ease-out;
		     -o-transition: all .5s ease-out;
		        transition: all .5s ease-out;
}

.works section a{
	width: calc((100vw - 70px) / 2 - 4vw);
	height: calc((100vw - 70px) / 2 - 4vw);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	text-align: center;
	display: block;
	border: 1vw solid #fff;
}
.works section a span{
	opacity: 0;
	font-size: 1.5rem;
  padding: 20px 0 0;
  display: block;
}
.single{
	width: calc(100vw - 40px);
	margin: 20px auto;
}
.ph{
  width: calc(100vw - 40px);
  background: #fff;
  margin: 0 auto;
  position: relative;
}
.ph img{
	width: calc(100vw - 110px);
	max-width: 950px;
	padding: 35px 35px 20px 35px;
}
.ph h1{
  font-size: 1.6rem;
  letter-spacing: .2rem;
  text-align: center;
  padding: 0 0 20px;
}
.txt{
	width: calc(100vw - 90px);
	max-width: 1050px;
	text-align: center;
    margin: 0 auto;
 	line-height: 2rem;
}
.txt dt{
	color: #000;
  font-family: 'Alegreya Sans', sans-serif;
}
.txt dl{
  margin-top: 20px;
}
.size span,
.price span{
	text-decoration: line-through;
}

/* ----------------- item ------------------ */

#p-item h1{
	color:#4fa8c9;
	font-size: 2.9rem;
	line-height: 4rem;
  letter-spacing: .7rem;
  padding: 10vh 0 7vh;
  text-align: center;
}
#p-item h1::after{
	content:"LINEUP";
	font-size: 1.4rem;
	display: block;
}
#item{
	text-align: center;
	background: #fff;
}

/* ----------------- about ------------------ */
#p-about{
	background: #f1f1f1 url(../img/hd-about-.jpg) top left no-repeat;
  background-size: auto 270px;
}
#about{
}
#about .wrap{
/*  display: -webkit-flex;
  display: flex;
  justify-content:left;
  align-content: center;
  flex-wrap: wrap;*/
  padding:  0;
  text-align: center;
}
#about .wrap section{
	max-width: 800px;
	text-align: left;
  padding: 40px;
  background:#fff;
  margin: 0 auto 50px;
}
#about h2{
  font-family: 'Noto Serif JP', serif;
  font-size: 1.9rem;
  margin-bottom: 20px;
  padding: 0;
}
#about h2 span{
  font-family: 'Alegreya Sans', sans-serif;
  display:block;
  padding: 10px;
}
#about h3{
  color:#4fa8c9;
  padding: 0 0 20px;
}
#about h3 span{
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 1.8rem;
  line-height: 3rem;
  letter-spacing: .2rem;
  display: block;
}
br.po{
  display: none;
}
#about dl{
   display: -webkit-flex;
   display: flex;
   justify-content:left;
    align-content: center;
    flex-wrap: nowrap;
    padding: 10px 0;
    border-bottom:1px solid #eee;
}
#about dt{
  width: 50px;
}
#about dd{
  letter-spacing: 0;
}

/* ----------------- contact ------------------ */
#p-contact{
  background: #f1f1f1;
}
#bl-contact {
  text-align: center;
  position: relative;
}
#bl-contact h2{
  font-size: 2.6rem;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 20px;
}
#bl-contact section{
  text-align:left;
  vertical-align: top;
  padding: 0 15px;
  text-align: center;
}
#bl-contact .ttl{
  margin-bottom: 30px;
}
#bl-contact .ttl p{
  letter-spacing: 0;
  line-height: 2.8rem;
}
#bl-contact label{
  font-size: 1.2rem;
  line-height: 1.2rem;
}
#bl-contact label span{
    color: #000;
    font-family: 'Alegreya Sans', sans-serif;
    margin-top: 20px;
    display: block;
  }
#bl-contact input,
#bl-contact textarea{
  background: #fff;
  border: none;
  width: 400px;
  padding: 0 10px;
  height: 36px;
  line-height: 36px;
  margin-bottom: 16px;
  border-radius: 3px;
}
#bl-contact .wpcf7-form-control-wrap{
  margin-top: 0;
}
#bl-contact textarea{
  height: 184px;
  line-height: 2.2rem;
}
#bl-contact button{
  -webkit-appearance: none;
  border-radius: 0;
  font-size: 1.3rem;
  padding: 10px;
  color: #fff;
  width: 112px;
  background: #4fa8c9;
  margin-top:25px;
  border-radius: 3px;
}
#bl-contact button:hover{
  opacity: .8;
  transition:1s;
  background-position: center right;
}

.screen-reader-response{display:none;}
.wpcf7-response-output{
  color: #f64;  
}
.wpcf7-not-valid-tip{
  color: #f64;
  display:block;
  line-height:1rem;
  margin-top: -1rem;
}



/* ---------------------------------------------------------------------------------------- */
@media screen and (min-width: 850px){

  #container{
    padding:30px 30px 30px 60px;
  }
  #p-home #container{
    padding: 0 0 0 120px;
  }
  #bnavi{
    top: 0;
    width: 50px;
    height: 100vh;
  }

  #gnavi{
    top: 0;
    height: 100vh;
    width: 10px;
    padding: 70px 0 20px;
  }
  #gnavi ul{
    position: absolute;
    top: 50%;
    left:0;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
  }
  #gnavi.on{
    width: 180px;
    height: 100vh;
  }
  #gnavi .btn-gnavi{
    width: 30px;
    height: 30px;
    padding: calc(50vh - 15px) 0;
    position: fixed;
    top: 0;
    left: 10px;
    bottom: auto;
  }
  #gnavi.on .btn-gnavi{
      top: 25px;
      left: 130px;
      padding: 0;
  }
  #gnavi a{
    width: 180px;
    display: none;
  }
  #gnavi a.logo{
    width: 130px;
    height: auto;
    margin-bottom: 25px;
    padding: 0 25px;
  }
  #gnavi a:hover{
    background: #f1f1f1;
  }
  #gnavi .insta:hover{
    background: none;
    opacity: .5;
  }
  #gnavi a.logo:hover{
    background: transparent;
  }
	#bl-contact .ttl{
		width: auto;
	}
	#bl-contact h2{
		text-align:left;
	}
	#bl-contact .ttl br{
		display: block;
	}

  footer{
    padding-bottom: 5px;
  }

  /* --- top --- */
  #p-home #gnavi.on{
    height: 100vh;
  }
  #bl-fv{
    background:url(../img/bg-grey.jpg) center center no-repeat;
    background-size: cover;
    height: 100vh;
  }
  .cfimg{
    height: 100vh;
  }
  /* --- about --- */
  #about .wrap section{
    width: 90vw;
  }
  br.po{
    display: block;
  }

	/* --- works ---- */

	.works section a{
    width: calc((100vw - 100px) / 3 - 4vw);
    height: calc((100vw - 100px) / 3 - 4vw);
		background-position: center center;
	}
  .single{
    width: calc(100vw - 90px);
    max-width: 1200px;
    margin: 50px auto;
  }
  .ph{
    width: calc(100vw - 90px);
    max-width: 1050px;
  }
  .ph img{
    width: calc(100vw - 190px);
    max-width: 950px;
    padding: 50px 50px 20px 50px;
  }
  .next,
  .before{
    top: calc(50% - 25vw);
    font-size: 30px;
    padding: 25vw 15px;
  }

	/* --- item ---- */
	a.btn-order:hover{
		opacity: .8;
		transition:1s;
		background-position: center right;
	}
	#itemlist{
		padding: 5vw calc(50vw - 420px);
    text-align: center;
	}
}
/* ---------------------------------------------------------------------------------------- */
@media screen and (min-width: 1500px){
	/* --- works ---- */
	.works section a{
    width: calc((100vw - 100px) / 4 - 4vw);
    height: calc((100vw - 100px) / 4 - 4vw);
		background-position: center center;
	}
}