@charset 'UTF-8';

img {
    width: 100%;
    vertical-align: bottom;
    display: block; /* 画像をブロック要素として扱う */
    margin: 0; /* 余白を0に設定 */
    padding: 0; /* パディングを0に設定 */
}

body {
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Helvetica', sans-serif;
    color: #000;
    -webkit-text-size-adjust: 100%;
    width: 100%;
}
.all{
    overflow: hidden;
}
video{
    width: 100%;
    height: auto;
	vertical-align: bottom;
}
.pc{ display: block ; }
.sp{ display: none ; }
#contents{ width:750px; margin:0 auto; overflow: hidden; }
.fadein{ opacity: 0; transition: 1s; }
.fadein.active{ opacity: 1; }
.fv_area,
.cta_area{ position: relative; }
.fv_area .fv_img{ position:relative; z-index:1; }
.fv_area .curry .fadein{ position:absolute; top:68%; left:32%; width:135px; z-index:3; }
.fv_area .curry .fadein.active{ top:72%; }
.fv_area .yogult .fadein{ position:absolute; top:56%; left:4%; width:135px; z-index:3; }
.fv_area .yogult .fadein.active{ top:61.3%; }
.fv_area .gif_area{ position:absolute; top:62.25%; left:3.6%; width:322px; z-index:1; border-radius: 50%; }
.loop_wrap { display: flex; width: 3000px; overflow: hidden; }
.loop_wrap img { width: 384px; display: inline-block; padding:0 15px; }
.cta_area .cta_btn{ animation: poyopoyo 0.8s ease-out infinite ; width:90%; position: absolute; bottom:2.5%; left:5%; }
@keyframes poyopoyo {
    0%{
      transform: scale(1);
    }
    50%{
        transform: scale(0.96);
    }
    100%{
        transform: scale(1);
    }
  }
.loop_wrap .mainimg { animation: loop 50s -25s linear infinite; }
.loop_wrap .subimg { animation: loop2 50s linear infinite; }
@keyframes loop {
  0% { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
@keyframes loop2 {
  0% { transform: translateX(0); }
  to { transform: translateX(-200%); }
}

@media screen and (max-width: 740px) {
    #contents{ width:100%; margin:0 auto; }
    .pc{ display: none; }
    .sp{ display: block; }
    .fv_area .curry .fadein{ width:18%; }
    .fv_area .yogult .fadein{ width:18%; }
    .fv_area .text{ width:48%; }
    .fv_area .gif_area{ width:43%; }
    .loop_wrap img { width: 192px; }
}