@charset "utf-8";

/* ふわっと表示↓*/
.element {/* 最初は非表示 */
    transform: translateY(30px);opacity: 0;visibility: hidden;transition: transform 1s, opacity 1s, visibility 1s;}
/* フェードイン時に入るクラス */
.is-fadein {transform: translateX(0);opacity: 1;visibility: visible;}

body{font-family: 'Noto Sans JP', sans-serif;}

/*コンテンツ１*/
#content1 {
    height:900px;
    background-image:url("../img/index/background2.png");
    background-position: center top;
    width:100%; background-repeat:no-repeat; background-size:cover; margin: 0 auto;}
#content1 .fv {display:flex; align-items:center; max-width:950px; width:100%; margin:0 auto; padding-top:290px;}
#content1 .fv div {text-align:center;}
#content1 .fv div img {margin:0 auto;}
#content1 .fv div:nth-of-type(1) {max-width:300px; width:100%;}
#content1 .fv div:nth-of-type(2) {max-width:350px; width:100%;}
#content1 .fv div:nth-of-type(3) {max-width:300px; width:100%;}
#content1 .fv div:nth-of-type(1) img {display:block; max-width:264px; width:100%;}
#content1 .fv div:nth-of-type(2) img {display:block; width:100%;}
#content1 .fv div:nth-of-type(3) img {display:block; max-width:210px; width:100%;}

/*コンテンツ2*/
.content2img{width:250px;margin:0 auto;display:block;}
.content2txt1{font-weight:800;text-align: center;margin:0 auto;padding-top:2%;padding-bottom:3%;font-size: 20px;}
.content2button{width:200px;margin:0 auto;margin-bottom: 1.5%;margin-top:2%;font-weight:bold;}
.content2button a{color:white;display:block;position:relative;background: linear-gradient(to right,#1a71b4,#24bddc,#77b848,#d2d65b,#f9c94f, #ec6350);padding:10px;text-align: center;border-radius: 50px;}
.content2button a::before{z-index: 40;content:""!important;display: inline-block;position:absolute;width:7px;height:17px;left:30px;bottom:10px;background-image:url(../img/index/22.svg);background-size: contain;background-repeat: no-repeat;opacity: 1!important;}
.content2button a:hover {background: #534741;cursor: pointer;display:block;}

/*↓カルーセル*/
.carousel {margin: 0 auto; max-width:750px; width:100%; padding-bottom:2%;}
/* 画像に合わせてカルーセルの高さを調整 */
.slick-slide {height: auto;}
/* 背景の色に合わせて前後の矢印の色を調整 */
.slick-prev:before{z-index: 40;content:""!important;display: inline-block;position:absolute;width:50px;height:50px;right:10px;bottom:0px;background-image:url(../img/index/4.svg);background-size: contain;background-repeat: no-repeat;opacity: 1!important;            }
.slick-next:before {content:""!important;display: inline-block;position:absolute;width:50px;height:50px;bottom:0px;background-image:url(../img/index/5.svg);background-size: contain;background-repeat: no-repeat;opacity: 1!important;}
.carousel img{width:100%;}
.recipeimage {display: flex;justify-content: center;text-align:center;}
.slick-prev {left: 0px;z-index: 1;}
.slick-next {right: 0px;}

/*コンテンツ3*/
.content3img{max-width:415px;margin:0 auto;display:block;padding-top: 9%;padding-bottom:5%;width: 90%;}
.content3flex{display:flex;justify-content: center;margin-bottom:3%;}
.content3flex div {max-width:268px; width:100%;}
.doimg{margin:0 auto; display:block; max-width:268px; width:100%;}
.dotxt{text-align: center; font-size:20px;font-weight:bold;margin-top: 12%;}

/*コンテンツ4*/
.content4{background-image:url("../img/index/background3.png"); background-repeat: no-repeat;background-size:cover;margin: 0 auto;}
.content4img{width:250px;margin:0 auto;display:block;padding-top:10%;}
.content4flex{display:flex;justify-content: center;margin-top: 4%;}
.content4img2{width:30%;min-width: 350px;}
.content4txt{width:26%;padding:3%;font-weight:bold;}
.content4txt p{font-size:20px;line-height:190%;}
.content4button{width:200px;margin-top: 5%;font-weight:bold;}
.content4button a{color:white;display:block;position:relative; background: linear-gradient(to right, #1a71b4, #24bddc, #77b848, #d2d65b, #f9c94f, #ec6350);padding:10px;text-align: center;border-radius: 50px;}
.content4button a:hover {background: #534741;cursor: pointer;display:block;}    
.content4button a::before{z-index: 40; content:""!important; display: inline-block;position:absolute; width:7px; height:17px; left:30px;bottom:10px;background-image:url(../img/index/22.svg);background-size: contain; background-repeat: no-repeat;opacity: 1!important;top:0;bottom:0;margin: auto;}
.content4buttonall{display:flex;justify-content: center;margin-top: 4%;padding-bottom: 4%;}
.content4button2{width: 34vw;min-width: 350px;margin-left: 2%;position:relative;}
.content4button3{width: 34vw;min-width: 350px;margin-left: 2%;position:relative;}
.content4button2::before{content:"";display: inline-block;position:absolute;width:min(calc((100 / 1500) * 60vw), 60px);height:min(calc((100 / 1500) * 60vw), 60px);left:-10px;top:30%;background-image:url(../img/index/buttonyajirusi.svg);background-size: contain;background-repeat: no-repeat;z-index:30;}
.content4button2:hover:before{content:"";display: inline-block;position:absolute;width:min(calc((100 / 1500) * 60vw), 60px);height:min(calc((100 / 1500) * 60vw), 60px);left:0; top:30%;background-image:url(../img/index/buttonyajirusi.svg);background-size: contain;background-repeat: no-repeat;z-index:30;}
.content4button3::before{content:"";display: inline-block;position:absolute;width:min(calc((100 / 1500) * 60vw), 60px);height:min(calc((100 / 1500) * 60vw), 60px);left:-10px;top:30%;background-image:url(../img/index/buttonyajirusi.svg);background-size: contain;background-repeat: no-repeat;z-index:30;}
.content4button3:hover:before{content:"";display: inline-block;position:absolute;width:min(calc((100 / 1500) * 60vw), 60px);height:min(calc((100 / 1500) * 60vw), 60px);left:0;top:30%;background-image:url(../img/index/buttonyajirusi.svg);background-size: contain;background-repeat: no-repeat;z-index:30;}

/*コンテンツ5*/
.content5{position:relative;}
.content5img{width:68%;margin:0 auto;display:block;margin-top:3%;}
.content5backyellow{position:absolute;background-color: #ffca00;height:10vw;width:100%;display:block;z-index:-1;bottom:-11%;}
.content5button{width:min(calc((100 / 1500) * 200vw), 200px);margin-top: 5%;padding:0.5% 1%;text-align: center;border-radius: 50px;font-weight:bold;background-color: transparent;border:2px solid white;position:absolute;top: 50%;font-size:min(calc((100 / 1500) * 14vw), 14px);left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}
.content5button a{color:white;display:block;position:relative;}
.content5button a::before{z-index: 40;content:""!important;display: inline-block;position:absolute;width:7px;height:17px;left:30px;bottom:0px;background-image:url(../img/index/22.svg);background-size: contain;background-repeat: no-repeat;opacity: 1!important;}
.content5img2{position:absolute;width:10%;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}

/*コンテンツ6*/
.content6{margin-top: 10%;}
.content6img{margin:0 auto;display:block;width:340px;}
.content6 ul{margin:0 auto; display:block;width:55%;padding:0;margin-top: 5%;margin-bottom:4%;}
.content6q{font-size:21px;font-weight:900;padding:3% 10%;position:relative;}
.content6a{font-size:16px;padding:3% 10%;position:relative;}
.content6q:before {content:"";display: inline-block; position:absolute; width:30px; height:30px; top:35%; left:2.5%; background-image:url(../img/index/20.svg); background-size: contain; background-repeat: no-repeat;}
.content6a:before {content:"";display: inline-block;position:absolute;width:30px;height:30px;top:35%; left:2.5%;background-image:url(../img/index/21.svg);background-size: contain;background-repeat: no-repeat;}

/*インスタ追加コンテンツ*/
.instaheadline{width:300px;margin: auto; display:block;padding-top: 13%;margin-bottom:1%;}
.instahedlineicon{width:25px;margin: auto; display:block;margin-bottom: 1%;}
.instaimgflex1{display:flex;margin: auto; justify-content: center;}
.instaimgflex1 a{width:min(calc((100 / 1500) * 260vw), 260px);margin-left: 0.7%;margin-right: 0.7%;margin-bottom:1.4%;}
.instaimgflex2 a{width:min(calc((100 / 1500) * 260vw), 260px);margin-left: 0.7%;margin-right: 0.7%;}
.instaimgflex2{display:flex;margin: auto;justify-content: center;}

/*sp追記*/
.spcontent4buttonall{display:none;}
.spcontent1img{display:none;}
.spcontent3flex{display:none;}
.spcontent5img{display:none;}

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

    /*コンテンツ１*/
    #content1 {height:calc((100 / 800) * 700vw); min-height:660px; background-position: center bottom; background-image:url("../img/index/index_sp/sp_backgroundimage1.png");}
    #content1 .fv {display:block; margin:0 auto; padding-top:130px;}
    #content1 .fv div {text-align:center; margin:0 auto;}
    #content1 .fv div img {margin:0 auto;}
    #content1 .fv div:nth-of-type(1) {max-width:initial; width:200px; }
    #content1 .fv div:nth-of-type(2) {max-width:initial; width:240px; padding:50px 0;}
    #content1 .fv div:nth-of-type(3) {max-width:initial; width:157px;}

    #content1 .fv div:nth-of-type(1) img {display:initial; width:100%;}
    #content1 .fv div:nth-of-type(2) img {display:initial; width:100%;}
    #content1 .fv div:nth-of-type(3) img {display:initial; width:100%;}

    /*コンテンツ2*/
    .content2img{width:55%;margin-top: 5%;margin-bottom: 9%;margin-right: 19%;}
    .content2txt1{width:80%;text-align: center;font-size:14px;margin-bottom: 7%;}
    .carousel{width:87%;}
    .slick-prev:before, .slick-next:before{width:28px;}
    .slick-prev, .slick-next{top:60% !important;}
    .slick-next{right: 6px !important;}
    .slick-prev{left: 6px !important;}
    .content2button a,.content4button a{font-size:15px;}

    /*コンテンツ3*/
    .content3flex {max-width:800px; width:100%; flex-wrap:wrap;}
    .content3flex div {max-width:400px; flex-basis:50%;}

    /*
    .spcontent3flex{display:block;}
    .spcontent3img{display:flex;justify-content: center;}
    .dotxt{font-size:14px;}
    .doimg2{width:40%;max-width:210px;margin:0 auto;display:block;}
    .dotxt2{font-size:14px;text-align: center;font-weight: bold;margin-top:5%;}
    */

    /*コンテンツ4*/
    .content4{background-image:url("../img/index/index_sp/sp_backgroundimage2.png");}
    .content4flex{display:block;}
    .content4img2{margin:0 auto;display:block;width:95%;}
    .content4txt{width:80%;margin:0 auto;display:block;font-size:12px;margin-top: 5%;line-height: 190%;}
    .content4img{width:60%;margin:0 auto;display:block;padding-top: 15%;margin-right: 25%;margin-bottom: 13%;}
    .content4button{width:200px;margin:0 auto;display:block;margin-top:10%;}
    .content4buttonall{display:none;}
    .spcontent4buttonall{display:block;margin-top: 12%;}
    .spcontent4button2 img{width:95%;margin:0 auto;display:block;margin-bottom:5%;}
    .spcontent4button3 img{width:95%; margin:0 auto;display:block;padding-bottom: 17%;}

    /*コンテンツ5*/
    .webcontent5img{display:none;}
    .spcontent5img{display:block;}
    .spcontent5img img{display:block;width:95%;margin:0 auto;margin-top: 8%;}
    .content5backyellow{height:32vw;}

    /*コンテンツ6*/
    .content6img{width:80%;margin:0 auto;display:block;margin-top:25%;margin-bottom: 14%;}
    .content6 ul{width:95%;}
    .content6q{font-size:18px;padding-left:15%;padding-top:7%;padding-bottom: 6%;}
    .content6a{font-size:14px;padding-left:15%;padding-top:7%;padding-bottom: 6%;line-height: 190%;}
    .content6q:before{top:37%;width:20px;height:30px;left:5%;}
    .content6a:before{top:17%;width:20px;width:20px;left:5%;}
    .content2button{width:200px;margin:0 auto;display:block;margin-top:10%;margin-bottom:20%;}

    /*インスタ追加コンテンツ*/
    .instaheadline{width:240px;margin: auto; display:block;padding-top: 32%;margin-bottom:1%;}
    .instahedlineicon{width:25px;margin: auto; display:block;margin-bottom: 1%;}
    .instaimgflex1{display:flex;margin: auto; justify-content: center;width:100%;}
    .instaimgflex1 a{width:min(calc((100 / 1500) * 360vw), 360px);margin-left: 1.5%;margin-right: 1.5%;margin-bottom:3%;}
    .instaimgflex2 a{width:min(calc((100 / 1500) * 360vw), 360px);margin-left: 1.5%;margin-right: 1.5%;}
    .instaimgflex2{display:flex;margin: auto;justify-content: center;width:100%;}
    footer{background-image: none;}
}