@charset "UTF-8";

/* main visual
------------------------------------------------*/
.layer {
  width: 100%;
  height: 0;
  position: relative;
}
.layer__inner {
  opacity: 0;
  background-repeat: no-repeat;
  background-position: left top;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background-size: contain;
  overflow: hidden;
  font-size: 0;
}
.mainVisual {
  padding-top: 124%;
  background: rgb(240,190,183);
}
.mainVisual__1, .mainVisual__2, .mainVisual__3 {
    padding-top: 124%;
}
  .mainVisual__1 {
    background-image: url(../_img/kv1.jpg);}
  .mainVisual__2 {
    background-image: url("../_img/kv2.png"); }
  .mainVisual__3 {
    background-image: url("../_img/kv3.png"); }
  .mainVisual__1 {
    animation: fadein .8s ease-out 0.8s 1 normal forwards; }
  .mainVisual__2 {
    animation: fadein .8s ease-out 1.1s 1 normal forwards; }
  .mainVisual__3 {
    animation: fadeup .8s ease-out 1.4s 1 normal forwards; }
  

/* section 01〜06 common
------------------------------------------------*/
.group {
position: relative;
}

/* section 01
------------------------------------------------*/
.sec01 {
  background: rgb(240,190,183);
  background: linear-gradient(180deg, rgba(240,190,183,1) 0%, rgba(240,190,183,1) 100%); 
}
.sec01__motto {
  position: relative;
  top: -2.8vw;
  margin-bottom: -2.8vw;
}
.sec01__lead, .sec01__lead .layer__inner {
  padding-top: 175.6%;
}
.sec01__lead__1 {
  background-image: url("../_img/01_lead_1.jpg"); }
.sec01__lead__2 {
  background-image: url("../_img/01_lead_2.png"); z-index: 20; }
.sec01__lead__3 {
  background-image: url("../_img/01_lead_3.png"); z-index: 30; }
.sec01__lead__4 {
  background-image: url("../_img/01_lead_4.png"); z-index: 40; }
@media screen and (min-width:600px) {
  .sec01__motto {top: -20px; margin-bottom: -20px;}
  }

/* section 02
------------------------------------------------*/
.sec02 {
    background: rgb(255,190,163);
    background: linear-gradient(180deg, rgba(255,190,163,1) 0%, rgba(255,190,163,1) 35%, rgba(233,150,155,1) 100%); 
}

/* section 03
------------------------------------------------*/
.sec03 {
    background: rgb(240,184,189);
}
.sec03__1undo, .sec03__1undo .layer__inner {
  padding-top: 158%;
}
.sec03__2kouka, .sec03__2kouka .layer__inner {
  padding-top: 132%;
}
.sec03__1undo__0 {
  background-image: url("../_img/03_fruit.png"); z-index: 40; top: -20vw;}
.sec03__1undo__1 {
  background-image: url("../_img/03_1undo.jpg"); }
.sec03__1undo__2 {
  background-image: url("../_img/03_1undo2.png"); z-index: 20; }
.sec03__1undo__3 {
  background-image: url("../_img/03_1undo3.png"); z-index: 30; }

.sec03__2kouka__1 {
  background-image: url("../_img/03_2kouka1.jpg"); }
.sec03__2kouka__2 {
  background-image: url("../_img/03_2kouka2.png"); z-index: 20; }
.sec03__2kouka__3 {
  background-image: url("../_img/03_2kouka3.png"); z-index: 30; }

@media screen and (min-width:600px) {
.sec03__1undo__0 {top: -120px;}
}

/* section 04
------------------------------------------------*/
.sec04 {
    background-color: #F4B2B2;
}

/*ポイント*/
.sec04__point01, .sec04__point01 .layer__inner {  padding-top: 134.9%;}
.sec04__point01 {  background-image: url("../_img/04_point01.jpg");  background-size: contain;}
.sec04__point01_1 {  background-image: url("../_img/04_point01_1.png"); top: -12vw }
.sec04__point01_2 {  background-image: url("../_img/04_point01_2.png"); z-index: 20; }
.sec04__point01_3 {  background-image: url("../_img/04_point01_3.png"); z-index: 30; }

.sec04__point02, .sec04__point02 .layer__inner {  padding-top: 140.1%;}
.sec04__point02 {  background-image: url("../_img/04_point02.jpg");  background-size: contain;}
.sec04__point02_1 {  background-image: url("../_img/04_point02_1.png"); }
.sec04__point02_2 {  background-image: url("../_img/04_point02_2.png"); z-index: 20; }
.sec04__point02_3 {  background-image: url("../_img/04_point02_3.png"); z-index: 30; }

.sec04__point03, .sec04__point03 .layer__inner {  padding-top: 140%;}
.sec04__point03 {  background-image: url("../_img/04_point03.jpg");  background-size: contain;}
.sec04__point03_1 {  background-image: url("../_img/04_point03_1.png"); }
.sec04__point03_2 {  background-image: url("../_img/04_point03_2.png"); z-index: 20; }
.sec04__point03_3 {  background-image: url("../_img/04_point03_3.png"); z-index: 30; }

/*HOW*/
.sec04__how2, .sec04__how2 .layer__inner {  padding-top: 183.6%;}
.sec04__how2_1 {  background-image: url("../_img/04_how2.jpg");}
.sec04__how2_2 {  background-image: url("../_img/04_how2_2.png"); z-index: 20; }
.sec04__how2_3 {  background-image: url("../_img/04_how2_3.png"); z-index: 30; }


/*シーン*/
.sec04__scene01, .sec04__scene01 .layer__inner {  padding-top: 100%;}
.sec04__scene01 {  background-image: url("../_img/04_scene01.jpg");  background-size: contain;}
.sec04__scene01_0 {  background-image: url("../_img/04_scene01_0.png"); z-index: 15; top: -8.5vw;}
.sec04__scene01_1 {  background-image: url("../_img/04_scene01_1.png"); z-index: 2; }
.sec04__scene01_2 {  background-image: url("../_img/04_scene01_2.png"); z-index: 20; }
.sec04__scene01_3 {  background-image: url("../_img/04_scene01_3.png"); z-index: 30; }

.sec04__scene02, .sec04__scene02 .layer__inner {  padding-top: 100%;}
.sec04__scene02 {  background-image: url("../_img/04_scene02.jpg");  background-size: contain;}
.sec04__scene02_1 {  background-image: url("../_img/04_scene02_1.png"); z-index: 2; }
.sec04__scene02_2 {  background-image: url("../_img/04_scene02_2.png"); z-index: 20; }
.sec04__scene02_3 {  background-image: url("../_img/04_scene02_3.png"); z-index: 30; }

.sec04__scene03, .sec04__scene03 .layer__inner {  padding-top: 100%;}
.sec04__scene03 {  background-image: url("../_img/04_scene03.jpg");  background-size: contain;}
.sec04__scene03_1 {  background-image: url("../_img/04_scene03_1.png"); z-index: 2; }
.sec04__scene03_2 {  background-image: url("../_img/04_scene03_2.png"); z-index: 20; }
.sec04__scene03_3 {  background-image: url("../_img/04_scene03_3.png"); z-index: 30; }

/*フレーバー*/
.sec04__flavor, .sec04__flavor .layer__inner {  padding-top: 190.5%;}
.sec04__flavor {  background-image: url("../_img/04_flavor.jpg");  background-size: contain;}
.sec04__flavor_1 {  background-image: url("../_img/04_flavor_2.png"); z-index: 2; }
.sec04__flavor_2 {  background-image: url("../_img/04_flavor_3.png"); z-index: 20; }

@media screen and (min-width:600px) {
.sec04__point01_1 {top: -70px;}
.sec04__scene01_0 {top: -55px;}
}

/* section 05
------------------------------------------------*/
.sec05 {
    background: rgb(242,156,135);
    background: linear-gradient(180deg, rgba(242,156,135,1) 0%, rgba(238,133,155,1) 100%);
}
.sec05_flaver01_1 {
  position: relative;
  top: -10vw;
  margin-bottom: -10vw;
}
@media screen and (min-width:600px) {
.sec05_flaver01_1 {
  top: -60px;
  margin-bottom: -60px;
}
}


/* section 06
------------------------------------------------*/
.accordion__switch {
  background-image:url("../_img/06_see_material.png");
  background-repeat: no-repeat;
  background-position: left top;
  width: 100%;
  height: 0;
  padding-top: 13.3%;
  background-size: contain;
  overflow: hidden;
  font-size: 0;
}
.accordion__switch:hover {
  cursor: pointer;
}
.accordion__switch.active {
  background-image:url("../_img/06_see_material_open.png");
  }
.material {
margin-left: 8%;
margin-right: 8%;
margin-bottom: 30px;
border: 1px solid #EC6D66;
font-size: 1.5rem;
}
.material__ttl {
color: #fff;
background-color: #EC6D66;
text-align: center;
padding: 5px;
}
.material__txt {
padding: 10px;
}
.material__flex {
padding: 10px;
}

.material__flex .material__flex__inner table th {
text-align: left;
padding-right: 2rem;
font-weight: normal;
width: 35vw;
}

.material.material--berry {
  border: 1px solid #d95097;
}
.material--berry .material__ttl {
  background-color: #d95097;
}

@media screen and (min-width:600px) {
.material__flex {
display: flex;
padding: 10px 20px;
}
.material__flex .material__flex__inner table th{
padding-right: 20px;
width: 120px;
}
.material__flex .material__flex__inner:first-child {
margin-right: 35px;
padding-right: 35px;
border-right: 1px solid #EC6D66;
}
.material--berry .material__flex .material__flex__inner:first-child {
  border-right: 1px solid #d95097;
}
}

/* fruit
------------------------------------------------*/
.fruit {
  position: absolute;
  z-index: 9999;
}
.fruit--02 {
  top: -13vw;
}
.fruit--04 {
  top: -5vw;
}
@media screen and (min-width:600px) {
.fruit--02 {top: -90px;}
.fruit--04 {top: -35px;}
}