@charset "utf-8";

.body-home .wrapper .__inner {
    max-width: 100%;
    padding: 0;
}
.body-home .wrapper.wrapper--column-2 .__inner .main {width: 100%; padding: 0;}
.body-home .wrapper.wrapper--column-2 .__inner .aside {display: none !important;}
img {max-width: 100%;}
ul {list-style: none;padding: 0;}
a {text-decoration: none; color: inherit;}


/* kv */
.body-home #top_slide {margin-bottom: 50px;}
.body-home #top_slide .topMainimageSlide {
    max-width: 1300px;
    margin: auto;
}


/* slick */
.slick-dots li {
    width: 12px;
    height: 12px;
    margin: 0 7px;
}
.slick-dots li button{
    width: 12px;
    height: 12px;
    padding: 0;
    background: #000000;
    border-radius: 100px;
}
.slick-dots li.slick-active button{
    background: #ff5083;
}
.slick-dots li button:before{content: none;}

/* common */
.main--home {}
.main--home section {}
.pc-only {display: block;}
.sponly {display: none;}

.main--home h2.top-h2 {
    text-align: center;
    font-size: 25px;
    position: relative
}
.main--home h2.top-h2 span {
    position: absolute;
}

@media (min-width: 960px) {

}

@media screen and (max-width: 749px) {
    .pc-only {display: none;}
    .sponly {display: block;}
    .main--home h2.top-h2 {font-size: min(5.07vw, 38vw);}
    .main--home h2.top-h2 span {width: 16.53vw; max-width: 124px;}
}

/* top-bnr */
.main--home .top-bnr {max-width: 1000px; margin: 50px auto;}
.main--home .top-bnr a {display: block;}

/* item */
.main--home .item h2.top-h2 {padding: 2.5em 0 0.5em;}
.main--home .item h2.top-h2 span {
    width: 96px;
    bottom: 0;
    margin-left: 1em;
}
.main--home .item h2.top-h2 span img {width: 100%;}

.main--home .item .item__content {position: relative; margin-bottom: 40px;}
.main--home .item .item__content .item__content_list {display: flex; justify-content: center;}
.main--home .item .item__content .item__content_list li {max-width: 325px; width: 25vw; z-index: 10;}
.main--home .item .item__content .item__content_list li .__img {position: relative;}
.main--home .item .item__content .item__content_list li .__img > img {max-width: 313px; width: 24.08vw; aspect-ratio: 1; object-fit: cover;}
.main--home .item .item__content .item__content_list li .__img p.mark {position: absolute; bottom: 10px; right: 10px; max-width: 76px; width: 5.85vw; margin: 0;}
.main--home .item .item__content .item__content_list li p.name {
    text-align: center;
    font-size: 20px;
    margin-top: 0;
}

/* item__content _1 */
.main--home .item .item__content._1 {
  background-color: #ede8f4;
  padding: 60px 0 40px;
  background-image: url(https://files.bcart.jp/kapalino/uploads/img/top/smoothie_bk_l.png), url(https://files.bcart.jp/kapalino/uploads/img/top/smoothie_bk_r.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right bottom;
  background-size: 397px auto, 431.5px auto; 
}
 
.main--home .item .item__content._1 .bk_left {position: absolute; width: 14.74vw; max-width: 283px; top: -6%; left: 6%;}
.main--home .item .item__content._1 .bk_right {position: absolute; width: 11.72vw; max-width: 225px; bottom: -10%; right: 5%; z-index: 1;}
.main--home .item .item__content._1 h3 {width: 458px; margin: 0 auto 1em;}
.main--home .item .item__content._1 .item__content_list {gap: 190px;}


/* item__content _2 */
.main--home .item .item__content._2 {
  background-color: #f6f4ea;
  padding: 60px 0 40px;
  background-image: url(https://files.bcart.jp/kapalino/uploads/img/top/yogurt_bk_l.png), url(https://files.bcart.jp/kapalino/uploads/img/top/yogurt_bk_r.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left 90%, right 80%; /* 左画像は左寄せ、右画像は右寄せ */
  background-size: 353px, 388px; /* 必要に応じて contain / cover / px 指定など */
}
.main--home .item .item__content._2 .bk_left01 {position: absolute; width: 6.25vw; max-width: 120px; top: 33%; left: 9.5%;}
.main--home .item .item__content._2 .bk_left02 {position: absolute; width: 12.76vw; max-width: 245px; top: 47%; left: 2.5%;}
.main--home .item .item__content._2 h3 {width: 451px; margin: 0 auto 1em; position: relative;}
.main--home .item .item__content._2 h3 span {position: absolute; width: 118px; left: -78px;}
.main--home .item .item__content._2 .item__content_list {gap: 80px;}

/* item__content _3 */
.main--home .item .item__content._3 {
  background-color: #ede8f4;
  padding: 60px 0 40px;
  background-image: url(https://files.bcart.jp/kapalino/uploads/img/top/granola_bk_l.png), url(https://files.bcart.jp/kapalino/uploads/img/top/granola_bk_r.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, right 20%; /* 左画像は左寄せ、右画像は右寄せ */
  background-size: 539px, 501.5px; /* 必要に応じて contain / cover / px 指定など */
}
.main--home .item .item__content._3 .bk_left {position: absolute; width: 19.01vw; max-width: 365px; bottom: 20%; left: 5%;}
.main--home .item .item__content._3 .bk_right {position: absolute; width: 16.04vw; max-width: 308px; top: -14%; right: 4%; z-index: 1;}
.main--home .item .item__content._3 h3 {width: 299px; margin: 0 auto 1em; position: relative;}
.main--home .item .item__content._3 h3 span {position: absolute; width: 104px; right: -115px;}

/* about */
.main--home .about {
    background-image: url(https://files.bcart.jp/kapalino/uploads/img/top/about_bk.jpg);
    background-position: center;
    background-size: cover;
    padding: 65px 0;
    position: relative;
}
.main--home .about .bk_left01 {position: absolute; top: -4%;left: 8.7%; width: 29.09vw; max-width: 393px;}
.main--home .about .bk_left02 {position: absolute; bottom: 0;left: 15%; width: 18.91vw; max-width: 243px;}
.main--home .about .bk_right01 {position: absolute; bottom: 0;right: 18%; width: 12.4vw; max-width: 159px;}
.main--home .about .bk_right02 {position: absolute; bottom: 15%;right: 0; width: 22.5vw; max-width: 300px;}
.main--home .about .inner {
    max-width: 860px;
    width: 96%;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.84);
    padding: 45px 0;
}
.main--home .about .inner h2 {width: 250px; margin: auto;}
.main--home .about .inner .sub-text {font-size: 34.56px; line-height: 1.61; text-align: center; font-weight: 500;}
.main--home .about .inner .notes {text-align: center; line-height: 2.3;}


/* guide */
.main--home .guide {background-color: #e8e8e8; padding: 80px 0;}
.main--home .guide .inner {max-width: 1000px; margin: auto;}
.main--home .guide h2 {width: 556px; margin: auto;}
.main--home .guide ul {display: flex; justify-content: space-between; max-width: 1300px; width: 96%; margin: 35px auto 0;}
.main--home .guide ul li {max-width: 300px; width: 30%;}


/* news */
.main.main--home section.__block.__block--news {padding: 80px 0;}
.main.main--home section.__block.__block--news h2 {
    width: 238px;
    margin: auto;
}
.main.main--home section.__block.__block--news .__body {
    max-width: 1000px;
    margin: auto;
}
.main.main--home section.__block.__block--news .__body ul {margin-top: 45px;}
.main.main--home section.__block.__block--news .__body ul li {border-bottom: solid 1px #000; display: block;}
.main.main--home section.__block.__block--news .__body ul li:first-child {border-top: none !important;}
.main.main--home section.__block.__block--news .__body ul li a {display: block;padding: 1em 0 1em 45px;}
.main.main--home section.__block.__block--news .__body ul li > a span {border-bottom: 0;}
.main.main--home section.__block.__block--news .__body ul li > a span.__date {font-size: 15px;border-bottom: 0;}
.main.main--home section.__block.__block--news .__body ul li > a span.__title {width: 100%; font-size: 17px; padding: 0 0 0 2em;border-bottom: 0;}

/* to-top */
.c-pagetop {
    position: fixed;
    right: 15.5em;
    bottom: 3.5em;
}
.c-pagetop.is-stop {
    bottom: 18.5em;
}
.c-pagetop span:before {
    content: "";
    background-image: url(https://files.bcart.jp/kapalino/uploads/img/top/btn_top.png);
    background-position: center;
    background-size: cover;
}

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

    .main--home .item .item__content .item__content_list li p.name {font-size: min(1.54vw, 20px);}
    .main--home .item .item__content._1 {background-size: 30.54vw auto, 33.19vw auto}
    .main--home .item .item__content._1 .item__content_list {gap:14.62vw}
    .main--home .item .item__content._2 {background-size: 27.15vw auto, 29.85vw auto}
    .main--home .item .item__content._2 .item__content_list{gap: 6.15vw; position: relative; z-index: 10;}
    .main--home .item .item__content._3 {background-size: 41.46vw auto, 38.58vw auto}
    .main--home .about .bk_left01 {left: 4%;}
    .main--home .about .bk_left02 {left: 3%;}
    .main--home .about .bk_right01 {right: 12%;}
    .main--home .about .bk_right02 {width: 16vw; bottom: 25%;}

    .c-pagetop{right: 3em;}


}

@media screen and (max-width: 749px) {
    .main--home .top-bnr {margin: 5vw auto;}
    .main--home .item {overflow: hidden;}
    .main--home .item .item__content {margin-bottom: 10.67vw;}
    .main--home .item .item__content .item__content_list {flex-direction: column; max-width: 670px; width: 89.33%; margin: auto;}
    .main--home .item .item__content .item__content_list li {
        max-width: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1em;
    }
    .main--home .item .item__content .item__content_list li .__img > img {max-width: 313px; width: 41.73vw;}
    .main--home .item .item__content .item__content_list li .__img p.mark {max-width: 100px; width: 13.33vw; bottom: 0; right: 0; margin: 0; transform: translateY(0);}
    .main--home .item .item__content .item__content_list li p.name {font-size: min(4vw, 30px);line-height: 1.47;}
    .main--home .item .item__content .item__content_list li p.btn {width: 42.93vw; max-width: 322px;}

    .main--home .item .item__content._1 {background-image: url(https://files.bcart.jp/kapalino/uploads/img/top/smoothie_bk_sp01.jpg), url(https://files.bcart.jp/kapalino/uploads/img/top/smoothie_bk_sp02.jpg); background-size: contain; background-position: top left, bottom left;}
    .main--home .item .item__content._1 h3 {max-width: 573px; width: 76.4%; margin-bottom: 8vw;}
    .main--home .item .item__content._1 .item__content_list {gap: 8.67vw;}
    .main--home .item .item__content._1 .bk_left {width: 37.73vw; left: -7%; top: -14%;}
    .main--home .item .item__content._1 .bk_right {width: 29.87vw; bottom: -13%; right: -8%;}

    .main--home .item .item__content._2 {background-image: url(https://files.bcart.jp/kapalino/uploads/img/top/yogurt_bk_sp01.jpg), url(https://files.bcart.jp/kapalino/uploads/img/top/yogurt_bk_sp02.jpg); background-size: contain; background-position: top left, bottom left;}
    .main--home .item .item__content._2 h3{max-width: 541px; width: 72.13vw;}
    .main--home .item .item__content._2 h3 span {max-width: 170px; width: 22.67vw; left: -21.5%; top: -92%;}
    .main--home .item .item__content._2 .item__content_list {gap: 5.33vw;}
    .main--home .item .item__content._2 .bk_left01 {width: 16vw; max-width: 120px; top: unset; bottom: -2%; left: unset; right: 6%;}
    .main--home .item .item__content._2 .bk_left02 {display: none;}

    .main--home .item .item__content._3 {background-image: url(https://files.bcart.jp/kapalino/uploads/img/top/smoothie_bk_sp01.jpg), url(https://files.bcart.jp/kapalino/uploads/img/top/smoothie_bk_sp02.jpg); background-size: contain; background-position: top left, bottom left;}
    .main--home .item .item__content._3 h3 {max-width: 359px; width: 47.87vw;}
    .main--home .item .item__content._3 .bk_right,
    .main--home .item .item__content._3 h3 span {display: none;}
    .main--home .item .item__content._3 .bk_left {max-width: 274px; width: 36.53vw; top: -12%; bottom: unset; left: -13%;}

    .main--home .about {background-image: url(https://files.bcart.jp/kapalino/uploads/img/top/about_bk_sp.jpg); padding: 14vw 0 28.67vw;}
    .main--home .about .inner { max-width: 670px; width: 89.33%; margin: auto;}
    .main--home .about .inner h2 {width: 39.87vw; max-width: 299px; margin: auto;}
    .main--home .about .inner .sub-text {font-size: min(5.6vw, 42px); }
    .main--home .about .inner .notes {font-size: min(4.8vw, 36px); line-height: 1.666;}
    .main--home .about .bk_left01 {max-width: 393px; width: 52.4%; left: 0; top: -2%;}
    .main--home .about .bk_left02 {max-width: 242px; width: 32.27vw; bottom: 0; left: 0;}
    .main--home .about .bk_right01 {max-width: 159px; width: 21.2vw; bottom: 0; right: 5.33vw;}
    .main--home .about .bk_right02 {display: none;}

    .main--home .guide {padding: 10.67vw 0;}
    .main--home .guide h2 {width: 88.93vw; max-width: 667px;}
    .main--home .guide ul {flex-direction: column; width: 66.67vw; max-width: 500px; margin: 4vw auto; gap: 4vw;}
    .main--home .guide ul li {max-width: unset; width: 100%;}

    /* news */
    .main.main--home section.__block.__block--news {padding: 10.67vw 0;}
    .main.main--home section.__block.__block--news h2 {width: 38.13vw; max-width: 286px;}
    .main.main--home section.__block.__block--news .__body ul{margin-top: 0;}
    .main.main--home section.__block.__block--news .__body ul li a {display: flex; align-items: center; }
    .main.main--home section.__block.__block--news .__body ul li > a span.__date {padding: 0; font-size: min(2.88vw, 21.6px); width: auto;}
    .main.main--home section.__block.__block--news .__body ul li > a span.__title {font-size: min(3.26vw, 24.48px);}
    .main.main--home section.__block.__block--news .__body ul li:last-child {border-bottom: solid 1px #000 !important;}



    .c-pagetop {right: 1em;}
    .c-pagetop.is-stop {bottom: 4em;}
    .c-pagetop span:before {width: 13.28vw; height: 13.28vw;}


}