@charset "UTF-8";

a:hover{
    opacity: 0.8;
}
.pc{display: block;}
.sp{display: none;}

main{}


section.sec_bg_b{background: url(../images/bg_black.jpg); background-size: cover;}
section.sec_bg_y{background: url(../images/bg_yellow.jpg); background-size: cover;}
section.sec_bg_w{background: url(../images/bg_white.jpg); background-size: cover;}

section.sec01{
    height: 800px;
    z-index: -1;
}
section.sec01 canvas{
    margin: -100px 0 0 0;
}
section.sec01::before{
    content:"";
    position: absolute;
    top: 80px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 60px 50vw ;/*100vw ブラウザmax*/
    border-color: transparent  transparent  transparent #90262b;
}
section.sec02::before{
    content:"";
    position:relative;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50px 100vw ;/*100vw ブラウザmax*/
    border-color: transparent  transparent  transparent #e2b82a;
}

section .container{
    padding:0 0 0 0;
    margin: 0 auto;
    max-width: 1300px;
    width: 100%;
    text-align: center;
}

section .container h2{
    text-align: center;
    width: 100%;
    padding: 100px 0 0 0;
}
section.sec03, section.sec04, section.sec05{
    clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0% 100%);
    margin: -80px 0 0 0;
}
a.lnk_btn01{
    position: absolute;
    top: 860px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 99;
    line-height: 80%;
    font-size: 12px;
}
a.lnk_btn01 img{
    width: 90%;
}
a.lnk_btn01 span{
    margin: 0 0 0 20px;
}
a.lnk_btn02{
    left: 50%;
    /* transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); */
    z-index: 99;
    line-height: 80%;
    font-size: 12px;
}
a.yt_lnk_btn{
    left: 50%;
    z-index: 99;
    line-height: 80%;
    font-size: 12px;
    padding: 0 0 20px 0;
}
a.lnk_btn01:hover, a.lnk_btn02:hover, a.yt_lnk_btn:hover{
    opacity: 1;
}

a.lnk_btn02 img, a.yt_lnk_btn img{
    width: 50%;
    margin: 0 auto;
}
a.lnk_btn02 span, a.yt_lnk_btn span{
    margin: 0 0 0 20px;
}

section.sec02{
    height: 1150px;
    z-index: -2;
}

section.sec02 .container{
    padding: 380px 0 0 0;
}
section.sec02 .container h2{
    position: absolute;
    margin: -380px 0 0 0;
    z-index: 99;
}
section.sec02 .curry00{
    float: right;
}
section.sec02 .curry00_smoke{
    position: absolute;
    z-index: 9;
    right: 10%;
    top: 780px;
    /* mix-blend-mode: screen; */
    animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate;
}
section.sec02 .curry00_smoke img{
    width: 100%;
}
section.sec02 .curry00_txt{
    position: absolute;
    right: 20%;
    margin: 460px 0 0 0;
}
section.sec02 .curry00_txt img{
    width: 70%;
}



section.sec02 .txt01, section.sec02 .txt02, section.sec02 .txt03{
    position: absolute;
    padding: 0 0 0 50px;
}
section.sec02 .txt02{
    padding: 220px 0 0 50px;
}
section.sec02 .txt03{
    padding: 440px 0 0 50px;
}

section.sec03{
    height: 980px;
}
section.sec04{
    padding: 0 0 0 0;
    height: 680px;
}
section.sec04 .container{
    max-width: 100%;
}
section.sec05{
    padding: 20px 0 100px 0;
    margin: -40px 0 0 0;
}
section.sec05 .container{
    margin: 50px auto 0 auto;
}

@media screen and (max-width: 1500px){
    section.sec02 .curry00_smoke{
        right: 5%;
        top: 780px;
    }
    section.sec02 .curry00_txt{
        right: 15%;
        margin: 460px 0 0 0;
    }
}



/*===========
素材から
===========*/

#wrap, #wrap02 {
  width: 100%;
  margin: 0 auto;
}

.tab {
    width: 25%;
    text-align: center;
    float: left;
    cursor: pointer;
}
.tab img{
    width: 100%;
}

.selected {
    border: none;
}

#tab_container {
    position: relative;
    width: 100%;
    height: 600px;
    /* overflow: hidden; */
    clear: left;
}

.box {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    width: 100%;
    text-align: center;
}

#first {
    top: -300px;
    left: 0px;
}

#second {
    top: -300px;
    left: 100%;
}

#third {
    top: -300px;
    left: 200%;
}

#four {
    top: -300px;
    left: 300%;
}

#slide {
    transition: transform 1s ease-in-out 0s;
    -moz-transition: -moz-transform 1s ease-in-out 0s;
    -webkit-transition: -webkit-transform 1s ease-in-out 0s;
}

.move-to-second {
    transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.move-to-third {
    transform: translateX(-200%);
    -moz-transform: translateX(-200%);
    -webkit-transform: translateX(-200%);
}

.move-to-first {
    transform: translateX(0px);
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px);
}

.move-to-four {
    transform: translateX(-300%);
    -moz-transform: translateX(-300%);
    -webkit-transform: translateX(-300%);
}



/*===========
inview
===========*/

.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_right {
  opacity: 0;
  transform: translate(50%, 0);
  transition: 2s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}

#youtube_lnk{
  width: 230px;
  height: 336px;
  position: fixed;
  right: 20%;
  bottom: 20%;
  opacity: 1;
  z-index: 9999;
}
#youtube_lnk a{
  position: relative;
  display: block;
  width: 230px;
  height: 336px;
  text-decoration: none;
}
#youtube_lnk a img{
    animation: wobbling_x 0.5s ease-in-out infinite alternate, wobbling_y 1.0s ease-in-out infinite alternate;
}


@media screen and (max-device-width: 767px){
    .pc{display: none;}
    .sp{display: block;}

    section.sec02, section.sec03, section.sec03_sp, section.sec04, section.sec05{
        clip-path: polygon(0 3%, 100% 0%, 100% 97%, 0% 100%);
        margin: -70px 0 0 0;
    }
    section.sec01{
        height: 430px;
    }
    section.sec01::before {
        top: 40px;
    }
    section.sec01 canvas{
        margin: 0 0 0 0;
        z-index: 2;
    }

    a.lnk_btn01{
        top: 330px;
        text-align: center;
        left: inherit;
        transform:none;
        -webkit-transform:none;
        -ms-transform:inherit;
    }
    a.lnk_btn01 img{
        width: 90%;
        max-width: 700px;
        margin: 0 auto;
    }

    section.sec02{
        height: 1000px;
    }
    section.sec02 .container{
        padding: 200px 0 0 0;
    }
    section.sec02 .container h2{
        margin: -450px 0 0 0;
    }
    section.sec02 .curry00{
        float: none;
    }
    section.sec02 .curry00_smoke{
        right: inherit;
        left: -150px;
        top: 100px;
        /* mix-blend-mode: screen; */
        animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate;
        z-index: 1;
    }
    section.sec02 .curry00_smoke img{
        width: 150%;
    }
    section.sec02 .curry00_txt{
        position:inherit;
        right: inherit;
        margin: -30px 0 0 0;
    }
    section.sec02 .curry00_txt img{
        width: 50%;
    }
    section.sec02 .txt01, section.sec02 .txt02, section.sec02 .txt03{
        position: inherit;
        margin: 0 auto;
        width: 90%;
        padding: 30px 0 0 0;
    }

    section.sec03{
        height: 450px;
    }
    section.sec03_sp{
        height: 850px;
    }

    .swiper-button-prev, .swiper-button-next {
        width: 30px;
        height: 30px;
    }
    .swiper-button-prev {
        left: 0;
    }
    .swiper-button-next {
        right: 0;
    }
    .swiper-pagination-bullet {
        background: #ffffff;
        opacity: .3;
    }
    .swiper-pagination-white .swiper-pagination-bullet-active {
        background: #fff;
        opacity: 1;
    }

    section.sec04{
        padding: 0 0 0 0;
        height: 350px;
    }

    #first, #second, #third, #four {
        top: -50px;
    }



    section.sec_bg_b, section.sec_bg_y, section.sec_bg_w{
        background-size: cover;
    }
    section .container h2 img{
        width: 100%;
    }
    
    section .container h2{
        text-align: center;
        width: 100%;
        padding: 50px 0;
    }
    section.sec03_sp .container h2{
        padding: 50px 0 10px 0;
    }
    section.sec05 .container a.lnk_btn02 img.sp, section.sec05 .container a.yt_lnk_btn img.sp {
        width: 100%;
    }
    #youtube_lnk{
        width: 55%;
        height: 55%;
        right: -20%;
        bottom: 30%;
    }
    #youtube_lnk a{
        width: 55%;
        height: 55%;
    }
    #youtube_lnk a img{
        animation: wobbling_x 1.5s ease-in-out infinite alternate, wobbling_y 1.0s ease-in-out infinite alternate;
    }
}


@keyframes wobbling_x {
	0% {
		margin-left: 5px;
	}

	100% {
		margin-left: -5px;
	}
}

@keyframes wobbling_y {
	0% {
		margin-top: 0px;
	}

	100% {
		margin-top: 10px;
	}
}