@charset "UTF-8";

/* ============================= ▼ 全体 ▼ == */
html {
    font-size: 62.5%;
}

#LB230818candy *
#LB230818candy *::after
#LB230818candy *::before
{
    box-sizing: border-box;
}

#LB230818candy * {
    font: inherit;
}

@media screen and (max-width: 767px) {
    .main-area .main-inner {
    }
}

/* ============================= ▲ 全体 ▲ == */
/* ============================= ▼ fade ▼ == */
.js-fade.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
}
.js-fade {
    visibility: hidden;
    opacity: 0;
    transform: translate(0, 0);
	transition: ease-in, opacity 2000ms, transform 1000ms;
}

.js-fade[data-animate="slide-to-right"] {
    transform: translate(-30%, 0);
}
.js-fade[data-animate="slide-to-right"].is-visible {
    transform: translate(0, 0);
}

.js-fade[data-animate="slide-to-left"] {
    transform: translate(30%, 0);
}
.js-fade[data-animate="slide-to-left"].is-visible {
    transform: translate(0, 0);
}

.look01 figure:nth-of-type(2) .js-fade {
    transition-delay: 250ms;
}
.look01 figure:nth-of-type(3) .js-fade {
    transition-delay: 500ms;
}

.look03 figure:nth-of-type(1) .js-fade {
    transition-delay: 0ms;
}
.look03 figure:nth-of-type(2) .js-fade {
    transition-delay: 250ms;
}
.look03 figure:nth-of-type(3) .js-fade {
    transition-delay: 500ms;
}

.look04 figure:nth-of-type(2) .js-fade {
    transition-delay: 250ms;
}
.look04 figure:nth-of-type(3) .js-fade {
    transition-delay: 500ms;
}

.look05 figure:nth-of-type(1) .js-fade {
    transition-delay: 0ms;
}
.look05 figure:nth-of-type(2) .js-fade {
    transition-delay: 500ms;
}
.look05 figure:nth-of-type(3) .js-fade {
    transition-delay: 250ms;
}
/* ============================= ▲ fade ▲ == */

/* ============================= ▼ タブレット ▼ == */
@media screen and (min-width: 768px) and (max-width: 1400px) {
    html {
        font-size: calc(10 * (100vw/1400));
    }
}

/* ============================= ▲ タブレット ▲ == */
/* ============================= ▼ PC ▼ == */
/* @media screen and (min-width: 768px) { */

/* ============================= ▲ PC ▲ == */
/* ============================= ▼ 全体 ▼ == */
#LB230818candy .sp_only {
    display: none;
}

/* ============================= ▲ 全体 ▲ == */

/* ============================= ▼ common ▼ == */

#LB230818candy {
    transform: none;
    filter: none;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
    font-style: normal;
    width: 100%;
    margin: 0 auto;
    line-height: 1;
    /* background-image: url('../images/bg.png');
    background-repeat: repeat-x;
    background-size: 140rem;
    background-position-x: center;
    background-position-y: 0; */
    overflow: hidden;

    padding-block: 4rem 15rem;
    /* margin-block-end: 15rem; */
}

@media screen and (max-width: 767px) {
    #LB230818candy {
        padding-block: calc(40 * (100vw / 750)) calc(150 * (100vw / 750));
    }

}

#LB230818candy p {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
    font-style: normal;
}

#LB230818candy img,
#LB230818candy video {
    width: 100%;
    height: auto;
    /* image-rendering: -webkit-optimize-contrast; */
}

#LB230818candy .sp-only {
    display: block;
}
#LB230818candy .pc-only {
    display: none;
}

.main-area {
    overflow-x: visible;
}

.main-area .main-inner {
    width: 100%;
    max-width: none;
}

#LB230818candy .content__credit {
    font-size: 1.3rem;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.02em;
	line-height: 2.31;
    text-align: center;
	display: flex;
    flex-wrap: wrap;
	justify-content: var(--credit-justify, center);
	column-gap: var(--credit-gap, 0.5em);
    margin-top: var(--credit-mtop);
}

#LB230818candy .check-btn-wrapper {
    width: 41.8rem;
    margin: 0 auto;
}
#LB230818candy .check-btn-wrapper01 {
    margin-bottom: 1rem;
}
#LB230818candy .check-btn-wrapper01 img {
    width: 14rem;
    margin: 0 auto;
}
#LB230818candy .all-btn a {
    position: relative;
    width: 41.8rem;
    height: 7.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 0.1rem solid #000;
    font-size: 1.9rem;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.02em;
}

#LB230818candy .white-bg {
    background-color: #fff;
}

/* ============================= ▼ firstview ▼ == */
#LB230818candy .heading__ttl--wrapper {
    margin-bottom: 9rem;
    text-align: center;
}
#LB230818candy .heading__ttl {
    width: 33.6rem;
    margin: 0 auto 2.2rem;
}
#LB230818candy .sub__ttl {
    margin-bottom: 4rem;
    font-size: 2rem;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.02em;
}
#LB230818candy .sub__ttl02 {
    position: relative;
	margin-bottom: 4.7rem;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    display: inline-block;
}

@media screen and (max-width: 767px) {
    #LB230818candy .sub__ttl02 {
        font-weight: normal;
        font-weight: 400;
    }
}
#LB230818candy .sub__ttl02::before {
    content: "";
    position: absolute;
	width: 0.8rem;
	height: 2.2rem;
	top: -0.8rem;
	left: -4.4rem;
    background-image: url("../images/brackets_left.png");
    background-repeat: no-repeat;
    background-size: contain;
}
#LB230818candy .sub__ttl02::after {
    content: "";
    position: absolute;
    width: 0.8rem;
	height: 2.2rem;
	bottom: -0.6rem;
	right: -4.4rem;
    background-image: url("../images/brackets_right.png");
    background-repeat: no-repeat;
    background-size: contain;
}
#LB230818candy .heading__lead--ttl {
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: 0.08em;
}
#LB230818candy .heading__lead--ttl span {
    font-family: futura-pt,sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* Content Block */
#LB230818candy .content__block {
    position: relative;
    margin: 0 auto;
    margin-inline: auto;
    max-width: var(--block-width);
}

#LB230818candy .content__block [class*="look"] figcaption {
    margin-inline: var(--tag-inline);
    max-width: var(--tag-width);
}

#LB230818candy .content__block [class*="img"] {
    position: relative;
    max-width: var(--image-width);
}

#LB230818candy .content__block [class*="img"]:not(:first-of-type) {
    margin-top: var(--image-mtop);
}

/* [class*='img'] > *::before {
	content: "";
	width: 100%;
	height: 100%;
	background: white;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
} */

@media screen and (min-width: 768px) {
    .article__foot {
        margin-block: 12rem 0;
    }
}

@media screen and (max-width: 767px) {
    .article__foot {
        margin-block: calc(162 * (100vw/750)) 0;
    }
}
/* Content Block */

/* ============================= ▼ --01 ▼ == */
@media screen and (min-width: 768px) {
    #LB230818candy .content__block--01 {
        --tag-width: 17.5rem;
        --credit-mtop: 3rem;
        --credit-justify: flex-start;
    }

    #LB230818candy .look01 {
        display: grid;
        align-items: flex-start;
        grid-template-columns: 33rem 31rem 56rem;
        max-width: 120rem;
        margin-inline: auto;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--01 {
        --credit-justify: flex-end;
        /* --tag-width: 17.5rem; */
        --tag-inline: auto calc(20 * (100vw / 750));
    }

    #LB230818candy .look01 {
        display: grid;
        align-items: flex-start;
        grid-template-columns: calc(400 * (100vw / 750)) 1fr;
    }
}

#LB230818candy .content__block--01 .look01 .img01 {
    --image-width: 56rem;
}
#LB230818candy .content__block--01 .look01 .img02 {
    --image-width: 33rem;
    --image-mtop: 17.25rem;
}
#LB230818candy .content__block--01 .look01 .img03 {
    --image-width: 33rem;
    --image-mtop: 17.25rem;
}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--01 .look01 .img01 {
        grid-row: 1/ span 3;
        grid-column: 3/4;
    }
    #LB230818candy .content__block--01 .look01 .img02 {
        grid-column: 2/3;
        width: 33rem;
        margin-inline-start: 1rem;
    }
    #LB230818candy .content__block--01 .look01 .img03 {
        grid-row: 1/2;
        grid-column: 1/2;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--01 .look01 .img01 {
        --image-width: calc(630 * (100vw / 750));
        margin-inline: auto 0;
        grid-row: 1/2;
        grid-column: 1/span 2;
    }
    #LB230818candy .content__block--01 .look01 .img02 {
        --image-width: calc(400 * (100vw / 750));
        margin-block-start: calc(-515 * (100vw / 750));
        z-index: 1;
        grid-row: 2/3;
        grid-column: 1/2;
    }
    #LB230818candy .content__block--01 .look01 .img03 {
        --image-width: calc(400 * (100vw / 750));
        margin-block-start: calc(20 * (100vw / 750));
        z-index: 1;
        grid-row: 3/4;
        grid-column: 1/2;
    }
    #LB230818candy .content__block--01 .look01 figure:nth-of-type(4) {
        grid-row: 3/4;
        grid-column: 2/3;
        align-self: flex-end;
        margin-block-end: -0.6rem;
    }
}

/* ============================= ▼ --02 ▼ == */

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--02 {
        --block-width: 91rem;
        --tag-width: 12rem;
        --tag-inline: auto;
        --credit-mtop: 3rem;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--02 {
        --block-width: calc(620 * (100vw / 750));
        --credit-mtop: calc(38 * (100vw / 750));
        --tag-width: calc(380 * (100vw / 750));
        --tag-inline: auto;
        margin-block-start: calc(180 * (100vw / 750));
    }
}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--02 .look02 {
        display: grid;
        align-items: flex-start;
        grid-template-columns: 48rem 8rem 35rem;
        margin-inline: auto;
        margin-block-start: 12rem;
    }
}


@media screen and (min-width: 768px) {
    #LB230818candy .content__block--02 .look02 .img01 {
        grid-row: 1/2;
        grid-column: 3/4;
        margin-top: 6rem;
    }

    #LB230818candy .content__block--02 .look02 .img02 {
        grid-row: 1/ span 3;
        grid-column: 1/2;
    }

    #LB230818candy .content__block--02 .look02 figure:nth-of-type(3) {
        grid-row: 2/3;
        grid-column: 3/4;
    }
}


/* ============================= ▼ --03 ▼ == */
@media screen and (min-width: 768px) {
    #LB230818candy .content__block--03 {
        --block-width: 120rem;
        --tag-width: 12rem;
        --credit-mtop: 3rem;
        --credit-justify: flex-start;
        margin-block-start: 11.4rem;
    }
}
@media screen and (max-width: 767px) {
    #LB230818candy .content__block--03 {
        margin-block-start: calc(164 * (100vw / 750));
        --credit-justify: flex-end;
    }
}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--03 .look03 {
        display: grid;
        align-items: flex-start;
        grid-template-columns: repeat(3, 37rem);
        column-gap: 4.5rem;
        margin-inline: auto;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--03 .look03 {
        --image-width: calc(450 * (100vw / 750));
        --image-mtop: calc(50 * (100vw/750));
        --tag-inline: auto calc(30 * (100vw / 750));
    }
}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--03 .look03 .img01 {
        grid-row: 1/2;
        grid-column: 3/4;
    }

    #LB230818candy .content__block--03 .look03 .img02 {
        --image-mtop: 6rem;
        grid-row: 1/2;
        grid-column: 2/3;
    }

    #LB230818candy .content__block--03 .look03 .img03 {
        --image-mtop: 12rem;
        grid-row: 1/2;
        grid-column: 1/2;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--03 .look03 .img01 {
        margin-inline: auto 0;
    }
    #LB230818candy .content__block--03 .look03 .img02 {
        margin-inline: auto;
    }
    #LB230818candy .content__block--03 .look03 .img03 {
        display: grid;
        align-items: flex-end;
        max-width: 100%;
    }

    #LB230818candy .content__block--03 .look03 .img03 > *:nth-child(1) {
        grid-column: 1/2;
        grid-row: 1/2;
        width: calc(450 * (100vw / 750));
    }
    #LB230818candy .content__block--03 .look03 figcaption {
        grid-row: 1/2;
        margin-block-end: calc(-12 * (100vw / 750));
    }
}




/* ============================= ▼ --04 ▼ == */
@media screen and (min-width: 768px) {
    #LB230818candy .content__block--04 {
        --block-width: 101rem;
        --credit-justify: flex-end;
        --tag-width: 12rem;
        --tag-inline: auto 0;
        --credit-mtop: 3rem;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--04 {
        --credit-justify: flex-end;
        --tag-width: calc(260 * (100vw / 750));
        --tag-inline: auto calc(30 * (100vw / 750));
        --credit-mtop: calc(35 * (100vw / 750));
        margin-block-start: calc(180 * (100vw / 750));
    }

}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--04 .look04 {
        display: grid;
        align-items: flex-start;
        grid-template-columns: 39rem 17rem 45rem;
    }
}


#LB230818candy .content__block--04 .look04 .img01 {

}

#LB230818candy .content__block--04 .look04 .img02 {
    --image-mtop: 11rem;
}

#LB230818candy .content__block--04 .look04 .img03 {
    --image-mtop: 1rem;
}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--04 .look04 .img01 {
        grid-row: 1/ span 3;
        grid-column: 3/4;
        margin-top: -6rem;
    }

    #LB230818candy .content__block--04 .look04 .img02 {
        grid-row: 1/2;
        grid-column: 1/2;
    }

    #LB230818candy .content__block--04 .look04 .img03 {
        grid-row: 2/3;
        grid-column: 1/2;
        width: 39rem;
        margin-left: 7rem;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--04 .look04 .img01 {
        --image-width: calc(600 * (100vw / 750));
        margin-inline: auto 0;
    }

    #LB230818candy .content__block--04 .look04 .img02 {
        --image-width: calc(500 * (100vw / 750));
        --image-mtop: calc(82 * (100vw / 750));

    }

    #LB230818candy .content__block--04 .look04 .img03 {
        --image-width: calc(500 * (100vw / 750));
        --image-mtop: calc(30 * (100vw / 750));
        margin-inline-start: calc(90 * (100vw / 750));
    }
}


/* ============================= ▼ --05 ▼ == */
@media screen and (min-width: 768px) {
    #LB230818candy .content__block--05 {
        --block-width: 120rem;
        --credit-justify: flex-start;
        --tag-width: 12rem;
        --credit-mtop: 3.2rem;
        margin-top: 2.8rem;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--05 {
        --tag-width: calc(260 * (100vw / 750));
        --tag-inline: auto;
        --credit-mtop: calc(35 * (100vw / 750));
        margin-block-start: calc(180 * (100vw / 750));
    }

}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--05 .look05 {
        display: grid;
        align-items: flex-start;
        grid-template-columns: 50rem 15rem 25rem 5rem 25rem;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--05 .look05 {
        display: grid;
        align-items: flex-start;
        grid-template-columns: calc(320 * (100vw / 750)) calc(20 * (100vw / 750)) calc(410 * (100vw / 750));
        /* column-gap: calc(20 * (100vw / 750)); */
    }

}

#LB230818candy .content__block--05 .look05 .img01 {

}

#LB230818candy .content__block--05 .look05 .img02 {
    --image-mtop: 44.5rem;
}

#LB230818candy .content__block--05 .look05 .img03 {
    --image-mtop: 25.5rem;
}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--05 .look05 .img01 {
        grid-row: 1/2;
        grid-column: 1/2;
    }

    #LB230818candy .content__block--05 .look05 .img02 {
        grid-row: 1/2;
        grid-column: 3/4;
    }

    #LB230818candy .content__block--05 .look05 .img03 {
        grid-row: 1/2;
        grid-column: 5/6;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--05 .look05 .img01 {
        --image-width: calc(690 * (100vw / 750));
        grid-column: 1/ span 3;
        margin-inline: auto;
    }

    #LB230818candy .content__block--05 .look05 .img02 {
        --image-mtop: calc(280 * (100vw / 750));
        grid-row: 2/3;
    }

    #LB230818candy .content__block--05 .look05 .img03 {
        --image-mtop: calc(80 * (100vw / 750));
        grid-row: 2/3;
        grid-column: 3/4;
    }
}

/* ============================= ▼ --06 ▼ == */
@media screen and (min-width: 768px) {
    #LB230818candy .content__block--06 {
        --block-width: 120rem;
        --credit-justify: flex-start;
        --tag-width: 12rem;
        margin-top: 9.8rem;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--06 {
        margin-block-start: calc(180 * (100vw / 750));
    }
}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--06 .look06 {
        --credit-justify: flex-end;
        --tag-inline: auto 1rem;
        --credit-mtop: 3rem;
        display: grid;
        align-items: flex-start;
        justify-content: center;
        grid-template-columns: 46rem 8rem 26.95rem;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--06 .look06 {
        --credit-justify: flex-start;
        --tag-inline: calc(30 * (100vw / 750)) 0;
        --tag-width: calc(450 * (100vw / 750));
        --credit-mtop: calc(35 * (100vw / 750));
    }
}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--06 .look06 .img01 {
        grid-row: 1/2;
        grid-column: 2/4;
        z-index: 1;
        margin-top: 22rem;
    }

    #LB230818candy .content__block--06 .look06 .img02 {
        grid-row: 1/2;
        grid-column: 1/3;
    }

    #LB230818candy .content__block--06 .look06 figure:nth-of-type(3) {
        grid-row: 2/3;
        grid-column: 3/4;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--06 .look06 .img01 {
        --image-width: calc(500 * (100vw / 750));
        margin-inline: auto 0;
        z-index: 1;
    }

    #LB230818candy .content__block--06 .look06 .img02 {
        --image-width: calc(670 * (100vw / 750));
        margin-block-start: calc(-380 * (100vw / 750));
    }
}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--06 .look07 {
        display: grid;
        align-items: flex-end;
        grid-template-columns: 45rem 4rem 11rem;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--06 .look07 {
        --tag-width: calc(250 * (100vw / 750));
        --tag-inline: auto;
        --credit-mtop: calc(35 * (100vw / 750));
    }
}

@media screen and (min-width: 768px) {
    #LB230818candy .content__block--06 .look07 .img01 {
        margin-top: -42.5rem;
        z-index: 1;
        /* overflow: hidden; */
    }

    #LB230818candy .content__block--06 .look07 figure:nth-of-type(2) {
        grid-column: 3/4;
        margin-bottom: -0.6rem;
        z-index: 1;
    }
}

@media screen and (max-width: 767px) {
    #LB230818candy .content__block--06 .look07 .img01 {
        --image-width: calc(660 * (100vw / 750));
        margin-block-start: calc(162 * (100vw / 750));
        margin-inline: auto;
    }
}




/* ============================= ▼ sp ▼ == */
@media screen and (max-width: 767px) {
    #LB230818candy .sp_only {
        display: block;
    }

    #LB230818candy .pc_only {
        display: none;
    }

    /* .main-area {
        padding-top: calc(445* (100vw/750)) !important;
    } */

    #LB230818candy .content__credit {
        --credit-gap: 0.6em;
        flex-wrap: wrap;
        font-size: calc(23* (100vw/750));
        line-height: 2.3;
    }

    #LB230818candy .check-btn-wrapper {
        width: calc(675* (100vw/750));
        margin: 0 auto;
    }
    #LB230818candy .check-btn-wrapper01 {
        margin-bottom: calc(30* (100vw/750));
    }
    #LB230818candy .check-btn-wrapper01 img {
        width: calc(260* (100vw/750));
        margin: 0 auto;
    }
    #LB230818candy .all-btn a {
        position: relative;
        width: calc(675* (100vw/750));
        height: calc(146* (100vw/750));
        border: calc(2* (100vw/750)) solid #000;
        font-size: calc(36* (100vw/750));
    }

    /* ============================= ▼ firstview ▼ == */
    #LB230818candy .heading__ttl--wrapper {
        margin-bottom: calc(102* (100vw/750));
    }
    #LB230818candy .heading__ttl {
        width: calc(470* (100vw/750));
        margin: 0 auto calc(28* (100vw/750));
    }
    #LB230818candy .sub__ttl {
        margin-bottom: calc(62* (100vw/750));
        font-size: calc(35* (100vw/750));
    }
    #LB230818candy .sub__ttl02 {
        margin-bottom: calc(78* (100vw/750));
        font-size: calc(32* (100vw/750));
    }
    #LB230818candy .sub__ttl02::before {
        width: calc(12* (100vw/750));
        height: calc(35* (100vw/750));
        top: calc(-10* (100vw/750));
        left: calc(-65* (100vw/750));
    }
    #LB230818candy .sub__ttl02::after {
        width: calc(12* (100vw/750));
        height: calc(35* (100vw/750));
        bottom: calc(-14* (100vw/750));
        right: calc(-65* (100vw/750));
    }
    #LB230818candy .heading__lead--ttl {
        font-size: calc(24* (100vw/750));
        /* line-height: 1.91666; */
    }
}

/* ============================= ▲ check-btn ▲ == */

/* } */