@charset "UTF-8";

html,
body {
    font-size: 62.5%;
    font-family: 'Noto Sans JP',sans-serif;
    font-style: normal;
    font-feature-settings: 'palt';
    -webkit-font-feature-settings: 'pkna';
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: #000000;
    -webkit-touch-callout: none;
    box-sizing: border-box;
}

li{
	list-style: none;
}

.cf:before,
.cf:after {
    content: "";
    display: block;
    clear: both;
}

.cf {
    *zoom: 1;
    display: block;
}


/*横幅1081px以上からのcss*/
.pc {
    display: block !important;
}

.tab {
    display: none;
}

.sp {
    display: none;
}

/*横幅1080pxまでのcss*/
@media screen and (max-width: 1080px) {
    .pc {
        display: none !important;
    }

    .tab {
        display: block !important;
    }

    .sp {
        display: none;
    }
}


/*横幅768pxまでのcss*/
@media screen and (max-width: 768px) {
    .pc {
        display: none !important;
    }

    .tab {
        display: block !important;
    }

    .sp {
        display: none;
    }
}

/*横幅640pxまでのcss*/
@media screen and (max-width: 640px) {
    .pc {
        display: none !important;
    }

    .tab {
        display: none !important;
    }

    .sp {
        display: block !important;
    }
}



a {
    text-decoration: none;
}

img {
    width: 100%;
    height: auto;
    display: block;
}
a {
    cursor: pointer;
}

/* Loading　*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:url("../img/loading-back.png");
  background-color: #edebd4;
  text-align:center;
  color:#fff;
}

#splash_logo {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#splash_logo img {
  width:100%;
}
.fadeUp2{
	animation-name: fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
.fadeUp{
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/* Loading　*/

.fadeInTrigger,.fadeInTrigger2{
    opacity: 0;
}
/* fadeIn */


/* その場で出現 */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
h3{
	z-index: -1;
}
#container{
	max-width: 450px;
	width: 100%;
	margin: 0 auto
}
.firstview{
	position: relative;	
	background-image: url(../img/img1.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.firstview h1{
	position: absolute;
	top: 0;
}
.fv-logo{
	position: absolute;
	width: 70%;
    top: 85vw;
    left: 15%;
}
/*.concept,.notused{
	background: url("../img/in.png"), url("../img/in.png");
    background-size: 98%;
    background-repeat: no-repeat;
	background-position: top,bottom;
	overflow: hidden;
}*/
.concept{
	position: relative;
}
.concept h2{
	position: absolute;
    width: 60%;
	top: 50%;
    left: 20%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	display:block;
}
.flabor{
/*	background: url("../img/out.png"),url("../img/out.png");*/
    background-size: 98%;
    background-repeat: no-repeat;
	background-color: #edebd4;
	background-position: top,bottom;
	position: relative;
}
.flabor h3{
	position: absolute;
    width: 100%;
	top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	z-index: 1;
}
.notused{
	position: relative;
}
.notused h3{
	position: absolute;
    width: 100%;
	top: 47%;
    left: 0;
    z-index: 99999;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

@media screen and (max-width: 769px) {
.notused h3{
    top: 55%;
}
}
.buynow{
	background-color: #edebd4;
	position: relative;
}
.buynow h3{
	width: 100%;
	font-size: 22px;
	line-height: 2;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	z-index: 1;
}
.buynow h3 span{
	display: block;
}
.buynow img{
	width: 70%;
	margin: 0 auto;
	z-index: 1;
}
.top img{
	width: 20%;
	margin-top: 5rem;
}
.ingredient{
	display: inline!important;
}


.item{
    background-color: #edebd4;
}

.item img{
    z-index: 99999;
}
/*
.content{
  overflow: hidden;
}

.wrap{
  display: flex;
}
}
.item{
  height: 100vh;
  height: -webkit-fill-available;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
}
*/
.footer {
    max-width: 1080px;
    margin: 0 auto;
    background-color: #000;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    height: 300px;
}
@media screen and (min-width: 769px) {
    .item{
        height: 100%;
        }
	.fv-logo{
		top: 43rem;
	}
}
@media screen and (max-width: 376px) {
	.fv-logo{
      top: 82vw;
	}
	.notused h3{
      top: 60%;
    }
}