/*デフォルト設定*/

main{
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.main_bg{
  background-image:url(../img/alicebell_bg.webp) ;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}


.main_contents{
  max-width: 750px;
    margin: 0 auto;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}

.main_contents section {
  margin: 0;
  padding: 0;
}


.main_contents img{
    width: 100%;
    vertical-align: bottom;
}


video {
  display: inline-block;
    width: 100%;
    height: auto;   
    vertical-align: top;
}


.relative{
  position: relative;
}

.absolute{
  position: absolute;
}


li{list-style:none;}

.list{
  margin: 0;
}

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

a:hover {
  text-decoration:underline;
}

/*FV1*/

.s01_FV_copy01{
  width: 100%;
  top: 2%;
  right: 0%; 
}

.s01_FV_copy02{
  width: 90%;
  top: 18%;
  left: 5%; 
}

.s01_FV_copy04{
  width: 23%;
  top: 26%;
  right: 5%; 
}

.s01_FV_copy03{
  width: 17%;
  top: 28%;
  left: 4%; 
}

.s01_FV_cell01{
  width: 15%;
  top: 25%;
  right: 31%; 
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


.s01_FV_point01{
  width: 32%;
  bottom: 4%;
  left: 2%; 
}

.s01_FV_point02{
  width: 32%;
  bottom: 4%;
  left: 35%; 
}

.s01_FV_point03{
  width: 32%;
  bottom: 4%;
  right: 1%; 
}

.s01_FV_point04{
  width: 30%;
  bottom: 22%;
  right: 7%; 
}

.s01_FV_cell02{
  width: 15%;
  bottom: 25%;
  left: 11%; 
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
}

/*offer_btn*/
.offer_btn {
  width: 74%;
  top: 38.5%;
  left: 13%;
}

.offer_pack {
  width: 100%;
  top: 48.5%;
  left: 0%;
}


.offer_henkin {
  width: 100%;
  top: 74%;
  left: 0%;
}


/*特徴*/

.s02_feature_title{
  width: 90%;
  top: 5%;
  left: 5%;
}

.s02_feature_p1{
  width: 24%;
  top: 23%;
  left: 14%;
}

.s02_feature_p2{
  width: 24%;
  top: 23%;
  right: 12%;
}

.s02_feature_p3{
  width: 24%;
  top: 41%;
  left: 5%;
}

.s02_feature_p4{
  width: 24%;
  top: 41%;
  right: 5%;
}

.s02_feature_p5{
  width: 25%;
  top: 58%;
  left: 8%;
}

.s02_feature_p6{
  width: 24%;
  top: 59%;
  right: 7%;
}

.s02_feature_p7{
  width: 24%;
  top: 76%;
  left: 15%;
}

.s02_feature_p8{
  width: 24%;
  top: 76%;
  right: 16%;
}

/*BA*/

.s03_BA_title{
  width: 80%;
  top: 3%;
  left: 10%;
}

.s03_BA_movie{
  width: 80%;
  top: 17%;
  left: 10%;
}

.s03_BA_copy01{
  width: 78%;
  top: 40%;
  left: 10%;
}

.s03_BA_setp1{
  width: 43%;
  top: 47%;
  left: 5%;
}

.s03_BA_setp2{
  width: 43%;
  top: 47%;
  right: 5%;
}

.s03_BA_hand{
  width: 15%;
  top: 54%;
  left: 42%;
}

.s03_BA_copy02{
  width: 78%;
  top: 68%;
  left: 10%;
}

.s03_BA_before{
  width: 40%;
  top: 75%;
  left: 6%;
}

.s03_BA_after{
  width: 40%;
  top: 75%;
  right: 6%;
}

/*formula*/

.s04_formula_title{
  width: 80%;
  top: 8%;
  left: 10%;
}

.s04_formula_movie{
  width: 80%;
  top: 25%;
  left: 10%;
}

.s04_formula_copy{
  width: 85%;
  top: 64%;
  left: 7%;
}

/*権威性*/

.s05_alicelabo_ceo{
  width: 34%;
  top: 28%;
  right: 6%;
}

.s05_alicelabo_point{
  width: 80%;
  top: 49%;
  left: 11%;
}


.s05_RD_title{
  width: 90%;
  top: -2%;
  left: 3%;
}

.s05_RD_copy01{
  width: 90%;
  top: 9%;
  left: 4%;
}

.s05_RD_copy02{
  width: 90%;
  top: 52.5%;
  left: 5%;
}

.s05_RD_ceo{
  width: 86%;
  bottom: 2%;
  left: 6%;
}

/*KV*/
  .s06_Key01_copy01{
    width: 48%;
    top: -2%;
    left: 27%;
  }

  .s06_Key01_cleansing{
    width: 38%;
    top: 10%;
    left: 5%;
  }

  .s06_Key01_x{
    width: 15%;
    top: 15%;
    left: 42%;
  }

  .s06_Key01_pre{
    width: 44%;
    top: 10%;
    right: 4%;
  }
 
  .s06_Key01_copy02{
    width: 11%;
    top: 31%;
    right: 5%;
  }

  .s06_Key01_copy03{
    width: 30%;
    top: 36%;
    left: 1%;
  }

  /*popup*/

  .s07_popup{
    width: 100%;
    top: -10%;
    left: 0%;
  }

 /*instagram*/

  .s08_instagram{
    width: 100%;
    top: 0%;
    left: 0%;
  }

  .s08_instagram_movie{
    width: 100%;
    top: 18.3%;
    left: 0%;
  }

/*お悩み*/

.s09_trouble{
  z-index: 3;
}

.s09_trouble_copy01 {
    width: 91%;
    top: 19%;
    left: 4%;
}

.s09_trouble_copy02 {
    width: 91%;
    top: 32.5%;
    left: 4%;
}

.s09_trouble_img01 {
  width: 23%;
  top: 43%;
  left: 3%;
}

.s09_trouble_img02 {
  width: 23%;
  top: 43%;
  right: 3%;
}

.s09_trouble_img03 {
  width: 23%;
  top: 55%;
  left: 4%;
}

.s09_trouble_img04 {
  width: 23%;
  top: 55%;
  right: 4%;
}

.s09_trouble_img05 {
  width: 23%;
  top: 66%;
  left: 8%;
}

.s09_trouble_img06 {
  width: 23%;
  top: 66%;
  right: 8%;
}

.s09_trouble_img07 {
  width: 23%;
  top: 70%;
  left: 38%;
}

.s09_trouble_copy03 {
  width: 91%;
  bottom: 10%;
  left: 4%;
}

.s09_trouble_sokode{
  width: 43%;
  bottom: -5%;
  left: 28%;
}

/*界面活性剤*/

.s10_detergent{
  z-index: 1;
  margin-top:-25%;
}

.s10_detergent_copy01 {
    width: 75%;
    top: 15%;
    left: 11%;
}

.s10_detergent_copy02 {
  width: 88%;
  top: 36%;
  left: 7%;
}

.s10_detergent_copy03 {
  width: 76%;
  top: 67%;
  left: 11%;
}

.s10_detergent_copy04 {
  width: 85%;
  top: 78%;
  left: 9%;
}


/*比較*/

.s11_compare{
  z-index: 3;
}

.s11_compare_alicebell {
    width: 36%;
    top: -3%;
    left: 4%;
}

.s11_compare_alicebell {
  width: 36%;
  top: -3%;
  left: 4%;
}

.s11_compare_VS {
  width: 17%;
  top: 20%;
  left: 40%;
}

.s11_compare_general {
  width: 30%;
  top: -3%;
  right: 9%;
}

.s11_compare_graph{
  width: 82%;
  top: 40%;
  left: 9%;
}


/*KV*/

.s12_Key02{
  z-index: 1;
  margin-top:-10%;
}

.s12_Key02_title {
  width: 72%;
  top: 4%;
  left: 16%;
}

.s12_Key02_point {
  width: 29%;
  top: 12%;
  left: 6%;
}

.s12_Key02_product{
  width: 29%;
  top: 21%;
  left: 5%;
}

.s12_Key02_copy01 {
  width: 85%;
  top: 39.5%;
  left: 7%;
}

.s12_Key02_cotton{
  width: 93%;
  top: 47.5%;
  left: 3%;
}

.s12_Key02_pack{
  width: 96%;
  top: 64%;
  left: 7%;
}



/*こだわり*/

.s13_kodawari_01 {
  width: 38%;
  top: 28%;
  left: 32%;
}


.s13_kodawari_bg02{
  margin-top: -23%;
}

.s13_kodawari_bg03{
  margin-top: -25%;
}

.s13_kodawari_03_s01{
  width: 30%;
  top: 47%;
  left: 6%;
}

.s13_kodawari_03_s02{
  width: 28%;
  top: 47%;
  left: 37%;
}

.s13_kodawari_03_s03{
  width: 28%;
  top: 47%;
  right: 6%;
}

.s13_kodawari_03_s04{
  width: 28%;
  top: 61%;
  left: 6%;
}

.s13_kodawari_03_s05{
  width: 28%;
  top: 62%;
  left: 37%;
}

.s13_kodawari_03_s06{
  width: 28%;
  top: 61.5%;
  right: 6%;
}


/*やさしさ*/

.s14_yasashisa_copy01 {
  width: 46%;
  top:2%;
  left:27%;
}

.s14_yasashisa_copy02{
  width: 19%;
  top:45%;
  left:4%;
}

.s14_yasashisa_01{
  width: 33%;
  top:-4%;
  left:33%;
}

.s14_yasashisa_free01 {
  width: 28%;
  top:29%;
  left:6%;
}

.s14_yasashisa_free02 {
  width: 29%;
  top:29%;
  left:36%;
}

.s14_yasashisa_free03 {
  width: 28%;
  top:29%;
  right:5.5%;
}

.s14_yasashisa_free04 {
  width: 28%;
  top:44%;
  left:20%;
}

.s14_yasashisa_free06 {
  width: 28%;
  top:44.5%;
  right:18%;
}

.s14_yasashisa_02{
  width: 33%;
  top:-10%;
  left:33%;
}

.s14_yasashisa_03{
  width: 33%;
  top:-10.5%;
  left:33%;
}

.s14_yasashisa_copy03{
  width: 56%;
  top:-9.5%;
  left:23%;
}

.s14_yasashisa_copy04{
  width: 14%;
  top:15%;
  left:20%;
}

.s14_yasashisa_copy05{
  width: 13%;
  top:19%;
  left:5%;
}

/*voice*/
.s15_voice{
  overflow: hidden;	
}


.voice-slideArea {
    position: absolute;
    width: 110%;
    top: 22%;
    right: -5%;
    padding: 1%;

}

.voice-slideArea .slick-dots {
	left: 5%;
	bottom: -5%;
}

@media screen and (min-width: 768px){
  .voice-slideArea .slick-dots {
    left: 2%;
    bottom: -2%;
  }
}

.voice-slideArea li{padding: 0 1.2% 0 0;}
.voice-slideArea button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
padding: 0;
}


/* ここから矢印カスタマイズ */
.voice-slider .slick-arrow {
transition: all  0.5s;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}

.voice-slider .slick-arrow:hover{
cursor: pointer;
opacity: 0.7;
}

@media screen and (min-width: 768px){
.voice-slider .slick-arrow {
  width: 60px;
  height: 60px;
}
.voice-slider .slick-arrow:hover{
  cursor: pointer;
  opacity: 0.7;
}

.voice-slider .prev-arrow {
  right: 87%;
  }
  .voice-slider .next-arrow {
  left: 89%;
  }
}
@media screen and (max-width: 767px){
.voice-slider .slick-arrow {
  width: 40px;
  height: 40px;
}

.voice-slider .prev-arrow {
  right: 84%;
  }
  .voice-slider .next-arrow {
  left: 86%;
  }
}


.voice-slideArea .slick-dots li button:before {
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
left: -4%;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

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

.voice-slideArea .slick-dots {
  bottom: -6vw;
  left: 0%;
}
  .voice-slideArea .slick-dots li {
width: 2vw;
}
}

.voice-slideArea .slick-dots li button:before {
font-size: 0.5vw;
color: #000;
}
.voice-slideArea .slick-dots li.slick-active button:before {
color: #813656;
}
.voice-slideArea .slick-prev:hover:before,.voice-slideArea .slick-prev:focus:before,.voice-slideArea .slick-next:hover:before,.voice-slideArea .slick-next:focus:before {
  opacity: 0;
}


/*how_to*/

.s17_howto_step1 {
    width: 48%;
    top: 21.5%;
    left: 0%;
}

.s17_howto_img1 {
  width: 50%;
  top: 25%;
  right: 0%;
}

.s17_howto_movie1{
  width: 35.9%;
  top: 27.2%;
  right: 5%;
}

.s17_howto_hand1{
  width: 18%;
  top: 39%;
  left: 30%;
}

.s17_howto_step2{
  width: 48%;
  top: 42%;
  right: -1%;
}

.s17_howto_img2{
  width: 50%;
  top: 43%;
  left: 0%;
}

.s17_howto_movie2{
  width: 36.9%;
  top: 45.3%;
  left: 4.2%;
}

.s17_howto_hand2{
  width: 18%;
  top: 59%;
  left: 46%;
}

.s17_howto_step3 {
  width: 48%;
  top: 62%;
  left: 0%;
}

.s17_howto_img3{
width: 50%;
top: 64%;
right: 0%;
}

.s17_howto_movie3{
width: 35.9%;
top: 66.2%;
right: 4.5%;
}

.s17_howto_bathtime{
  width: 90%;
bottom: 1%;
left: 5%;
}

/*アニメーション*/
.delay02s {
  animation-delay: 0.2s;
  opacity: 0;
}
.delay05s {
  animation-delay: 0.5s;
  opacity: 0;
}

.delay08s {
  animation-delay: 0.8s;
  opacity: 0;
}
.delay10s {
  animation-delay: 1s;
  opacity: 0;
}
.delay12s {
  animation-delay: 1.2s;
  opacity: 0;
}
.delay15s {
  animation-delay: 1.5s;
  opacity: 0;
}
.delay18s {
  animation-delay: 1.8s;
  opacity: 0;
}
.delay20s {
  animation-delay: 2s;
  opacity: 0;
}
.delay25s {
  animation-delay: 2.5s;
  opacity: 0;
}
.delay30s {
  animation-delay: 3s;
  opacity: 0;
}
.delay35s {
  animation-delay: 3.5s;
  opacity: 0;
}






/*フェード*/
@keyframes fadeIn { /*animation-nameで設定した値を書く*/
  0% {
    opacity: 0
  } /*アニメーション開始時は不透明度0%*/
  100% {
    opacity: 1
  } /*アニメーション終了時は不透明度100%*/
}
.fade.active {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}


@keyframes fadeOut { /*animation-nameで設定した値を書く*/
  0% {
    opacity: 1
  } /*アニメーション開始時は不透明度0%*/
  100% {
    opacity: 0
  } /*アニメーション終了時は不透明度100%*/
}
.fadeOut.active {
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}








/*スライド*/
@keyframes slideInL {
  0% {
    transform: translateX(-60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 100;
  }
}

.slideL.active {
	animation-name: slideInL;
	animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes slideInR {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 100;
  }
}

.slideR.active {
	animation-name: slideInR;
	animation-duration: 1s;
    animation-fill-mode: forwards;
}




/*ポップアップ*/
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

.popup10s.active {
  animation: popup 1s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

.popup20s.active {
  animation: popup 2s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}
 
 
/*上から下にスライドイン*/

.slideIn.active {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}


@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-64px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*下から上に*/

.slideUp.active {
  animation-name: slideUp;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}

@keyframes slideUp { /*animation-nameで設定した値を書く*/
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 100;
    transform: translateY(0);
  }
}
    

/*バウンド*/
.bound.active {
  animation-name: bound;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}
@keyframes bound {
  0% {
    transform: scale(0.7, 0.7) translate(0%, 0%);
    opacity: 0;
  }
  100% {
    transform: scale(1.0, 1.0) translate(0%, 0%);
    opacity: 1;
  }
}

/*ぽよぽよ*/
.poyopoyo_big.active {
  animation-name: poyopoyo_big;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
  opacity: 1;
}
@keyframes poyopoyo_big {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(1.2);
  }
}

/* クルクル */
.kurukuru.active {
  animation-name: kurukuru;	
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
  transform: translate3d(0, 0, 0); 
}

@keyframes kurukuru {
  0%{
    transform: rotate(0);
    opacity: 0;
  }
  100%{
    transform: rotate(360deg);
    opacity: 1;
  }
}


/*ズーム*/
.zoom.active {
animation: 1s zoom forwards ease-in-out;	
}

@keyframes zoom {
  0% {
	transform: scale(0.5);
    opacity: 1;

  }
  100% {
	transform: scale(1);
    opacity: 1;
  }
}



/*傾き*/
.rotate45.active {
  animation-name: rotate45;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}


@keyframes rotate {
  0% {
	opacity: 0;
	transform-origin:bottom right;
    transform: rotate(26deg);

  }
  100% {
	opacity: 100;
    transform: rotate(0);
  }
}

.rotate135.active {
  animation-name: rotate135;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}


@keyframes rotate135 {
  0% {
	opacity: 0;
	transform-origin:bottom left;
    transform: rotate(-26deg);

  }
  100% {
	opacity: 100;
    transform: rotate(0);
  }
}


/*フェード*/
@keyframes fadeIn { /*animation-nameで設定した値を書く*/
  0% {
    opacity: 0
  } /*アニメーション開始時は不透明度0%*/
  100% {
    opacity: 1
  } /*アニメーション終了時は不透明度100%*/
}
.fade.active {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}


@keyframes fadeOut { /*animation-nameで設定した値を書く*/
  0% {
    opacity: 1
  } /*アニメーション開始時は不透明度0%*/
  100% {
    opacity: 0
  } /*アニメーション終了時は不透明度100%*/
}
.fadeOut.active {
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}