@charset "utf-8";

/* ==================================================================

    lp-haribako.css
    
=================================================================== */

/* --------------------------------
   □ 共通
-------------------------------- */
.contents main .chapter {

    .heading {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        font-size: 146%;
        font-weight: 700;
        letter-spacing: 0.1em;
        line-height: 1.5;
        gap: 24px 0;
        margin-bottom: 35px;
        img{
            height: auto;
        }
    }
}
.contents main .chapter .container {
    max-width: 1123px;
}

.contents main h3.border {
    font-size: 157%;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
    background: url(../../images/lp/kids_giftset/title_border.png) 50% 100% no-repeat;    
    padding-bottom: 15px;
    margin-bottom: 35px;
}
    .contents main h3.border span {
        display: block;
        font-size: 56%;
    }

.contents main p.price {
    font-size: 93.75%;
    letter-spacing: 0.1em;
}

@media only screen and (max-width : 1280px) {
    header .container, 
    .contents main > section,
    .contents .chapter,
    .contents .wide .container,
    footer .container {
        width: auto;
    }
    .contents main .chapter {
        margin-bottom: 0;
    }
    .contents main h3.border {
        font-size: 112%;
        margin-bottom: 20px;
    }
    .contents main p.price {
        font-size: 80%;
    }
}

.c_pink {
    color: #ff6666;
}
.c_green {
    color: #00ad78;
}

.slideHako{
    display: inline-block;
    width: 100%;
    height: 169px; /* 画像の高さ */
    background-repeat: repeat-x;
    background-size: auto 169px; /* 画像の高さ */
    animation: hakoloop 50s linear infinite;
    background-image: url(../../images/lp/haribako/haribako.png);
}
@keyframes hakoloop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1993px 0; /* 画像のマイナス幅 */
    }
}
.slideTape{
    display: inline-block;
    width: 100%;
    height: 46px; 
    background-repeat: repeat-x;
    background-size: auto 46px; /* 画像の高さ */
}

.slideTape1 {
    animation: tapeloop 50s linear infinite;
    background-image: url(../../images/lp/haribako/tape1.png);
}
.slideTape2 {
    animation: tapeloop_r 50s linear infinite;
    background-image: url(../../images/lp/haribako/tape2.png);
}
@keyframes tapeloop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -2000px 0; /* 画像のマイナス幅 */
    }
}

@keyframes tapeloop_r {
    from {
        background-position: -1000px 0;
    }
    to {
        background-position: 1000px 0; /* 画像のマイナス幅 */
    }
}

/* --------------------------------
   □ mv
-------------------------------- */
#mv {
    text-align: center;
    background: #ffbdc0;
    padding: 83px 0 60px;
    margin-bottom: 0;

    @media screen and (max-width: 767px) {
        padding: 4vw 0 3vw;
    }

    img{
        height: auto;
    }

    .container {
        @media screen and (max-width: 767px) {
            padding-left: 0;
            padding-right: 0;
            margin-left: 0;
            margin-right: 0;
        }
    }
}
/* --------------------------------
   □ lead
-------------------------------- */
#lead {
    background: #da5276 url(../../images/lp/haribako/bg_square.png) 50% 50% repeat;
    padding: 60px 0;
    margin-bottom: 0;

    @media screen and (max-width: 767px) {
        padding: 8vw 8vw;
    }

    .fukidashi {
        text-align: center;
        margin-bottom: 20px;

        @media screen and (max-width: 767px) {
            padding-left: 4vw;
            padding-right: 4vw;
        }

        img{
            max-width: 368px;
            height: auto;
            @media screen and (max-width: 767px) {
                max-width: 100%;
            }
        }
    }
    .text {
        text-align: center;
        img{
            max-width: 445px;
            height: auto;
            @media screen and (max-width: 767px) {
                max-width: 100%;
            }
        }
    }
}
/* --------------------------------
   □ accentarea
-------------------------------- */
.accentarea {
    overflow: hidden;
    padding-top: 0;
    background: #ffbdc0;
}
.accentarea .slider {
    position: relative;
    /* 115px=hederの高さ */
    height: calc(100vh - 115px - 50px);
}
.accentarea .slider .slick-list,
.accentarea .slider .slick-track,
.accentarea .slider .slick-slide {
    height: 100%!important;
}
.accentarea .slider .slick-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* スマホ用
-------------------------------------------- */
@media only screen and (max-width: 767px) {
    .accentarea {
        margin-left: -4%;
        margin-right: -4%;
        height: auto;
        padding-bottom: 0;

    }
    .accentarea .slider {
        height: auto;
    }
    .accentarea .slider .slick-slide {
        height: auto;
    }
    .accentarea .slick-dots {
        display: none!important;
    }
    .slick-dotted.slick-slider {
        margin-bottom: 0;
    }
}

/* --------------------------------
   □ intro
-------------------------------- */
#intro{
    background: #ffbdc0;

    @media screen and (max-width: 767px) {
        padding: 8vw 0;
    }

    .container {
        position: relative;

        .title {
            color: #6e72aa;
            font-size: 187.5%;
            font-weight: 700;
            line-height: 1.5;
            text-align: center;
            margin-bottom: 35px;

            @media screen and (max-width: 767px) {
                font-size: 124%;
                margin-bottom: 8vw;
            }
        }

        .lead {
            color: #6e72aa;
            font-weight: 700;
            line-height: 2;
            text-align: center;
            margin-top: 50px;
            margin-bottom: 80px;

            @media screen and (max-width: 767px) {
                font-size: 100%;
                margin-top: 4vw;
                margin-bottom: 6vw;
            }
        }
    }
    .slideHako{
        margin-bottom: -86px;

        @media screen and (max-width: 767px) {
            margin-bottom: -23vw;
        }
    }
}

/* --------------------------------
   □ about
-------------------------------- */
#about{
    padding-top: 150px;
    background: #ead5a6 url(../../images/lp/haribako/bg_square.png) 50% 50% repeat;

    @media screen and (max-width: 767px) {
        padding-top: 19vw;
    }

    .container {
        position: relative;
        padding-left: 4vw;
        padding-right: 4vw;

        .heading {
            color: #6e72aa;
        }
        .flex_box {
            display: flex;
            justify-content: flex-start;
            align-items: stretch;
            gap: 0 9%;

            @media screen and (max-width: 767px) {
                flex-direction: column;
                gap: 0 4%;
            }
    
            &.reverse {
                flex-direction: row-reverse;

                @media screen and (max-width: 767px) {
                    flex-direction: column;
                }
            }
    
            & + .flex_box {
                margin-top: 60px;

                @media screen and (max-width: 767px) {
                    margin-top: 8vw;
                }
            }
    
            .imgArea {
                width: 38%;

                @media screen and (max-width: 767px) {
                    width: 100%;
                }
                img{
                    width: 100%;
                    height: auto;
                }
            }
    
            .txtArea {
                flex-grow: 1;
    
                .fukidashi {
                    margin-bottom: 20px;

                    @media screen and (max-width: 767px) {
                        margin-top: -13vw;
                        margin-bottom: 5vw;
                        text-align: right;
                    }
    
                    img{
                        display: inline-block;
                        max-width: 264px;
                        height: auto;
                        @media screen and (max-width: 767px) {
                            max-width: 70%;
                        }
                    }
                }
    
                h3 {
                    font-size: 137.5%;
                    line-height: 1.8;
                    margin-bottom: 20px;

                    @media screen and (max-width: 767px) {
                        font-size: 112%;
                        margin-bottom: 4vw;
                    }
                }
    
                p.txt {
                    font-size: 93.75%;
                    line-height: 1.8;
                    margin-bottom: 0;
                }
            }
            /* --------------------------------
               □ about2
            -------------------------------- */
            &.about2 {
                justify-content: flex-end;
                align-items: center;
                .imgArea {
                }
                .txtArea {
                    flex-grow: 0;
                    max-width: 264px;
                    padding-left: 84px;

                    @media screen and (max-width: 767px) {
                        max-width: 100%;
                        padding-left: 0;
                    }
                    .fukidashi {
                        position: relative;
                        margin-right: -150px;
                        margin-bottom: 0;

                        @media screen and (max-width: 767px) {
                            margin-right: 0;
                            text-align: left;
                        }
                    }
                }
            }
    
            /* --------------------------------
               □ about3
            -------------------------------- */
            &.about3 {
                @media screen and (max-width: 767px) {
                    margin-top: 14px;
                }
                .imgArea {
                    @media screen and (max-width: 767px) {
                        display: none;
                    }
                }   
                .txtArea {
                    .img {
                        text-align: right;
                        img{
                            max-width: 264px;
                            height: auto;

                            @media screen and (max-width: 767px) {
                                max-width: 50vw;
                            }
                        }
                    }

                    .spimg {
                        @media screen and (max-width: 767px) {
                            margin-top: 8vw;
                            margin-bottom: 3vw;
                        }
                    }
                    .remarks {
                        font-size: 80%;
                        line-height: 1.8;
                        margin-bottom: 0;
                    }
                }
            }
        }
    }


    .tapeWrap {
        position: relative;
        margin-top: 68px;
        margin-bottom: -32px;
        @media screen and (max-width: 767px) {
            margin-top: 8vw;
            margin-bottom: -7vw;
        }
    }
}

/* --------------------------------
   □ howto
-------------------------------- */
#howto {
    padding-top: 150px;
    padding-bottom: 100px;
    background: #af98c3;

    @media screen and (max-width: 767px) {
        padding-top: 19vw;
        padding-bottom: 8vw;
    }

    .container {
        @media screen and (max-width: 767px) {
            padding-left: 4vw;
            padding-right: 4vw;
        }
        .heading {
            color: #6e72aa;
        }
    
        .flex_box { 
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: 0 9%;
    
            @media screen and (max-width: 767px) {
                flex-direction: column;
                gap: 6vw 0;
            }
        }
    }

    .cart {
        margin-top: 95px;

        @media screen and (max-width: 767px) {
            margin-top: 8vw;
        }

        .name {
            font-size: 200%;
            font-weight: 700;
            line-height: 1.5;
            text-align: center;
            margin-bottom: 20px;

            @media screen and (max-width: 767px) {
                font-size: 124%;
                margin-bottom: 4vw;
            }

            small {
                font-size: 60%;
            }
        }

        .spec {
            font-size: 134%;
            font-weight: 700;
            line-height: 1.5;
            text-align: center;
            margin-bottom: 20px;

            @media screen and (max-width: 767px) {
                font-size: 100%;
                margin-bottom: 4vw;
            }
        }

        .remarks {
            font-size: 80%;
            line-height: 1.8;
            margin-bottom: 0;
            text-align: center;
        }

        .buyBtn {
            margin-top: 20px;

            @media screen and (max-width: 767px) {
                margin-top: 4vw;
            }
            a{
                display: block;
                width: fit-content;
                margin-inline: auto;
                position: relative;
                padding: 0;
                background-color: transparent;

                > span{
                    display: inline-block;
                    position: relative;
                    z-index: 1;
                    color: #fff;
                    background-color: #da5276;
                    transition: all 0.3s ease;
                    font-size: 134%;
                    font-weight: 700;
                    line-height: 1.5;
                    padding: 24px 40px;
                    border-radius: 80px;
                    transition: all 0.3s ease;
                }
                &:hover > span {
                    background-color: #c54263;
                }

                span::before {
                    display: none;
                }

                &::after {
                    position: absolute;
                    top: 6px;
                    right: -6px;
                    content: "";
                    width: 100%;
                    height: 100%;
                    border-radius: 80px;
                    background: #F4C53E;
                }
            }
        }

        .caution {
            margin-top: 58px;

            @media screen and (max-width: 767px) {
                margin-top: 8vw;
            }
        }
        
    }
}

#menu {
    margin-top: 0;
}
/* --------------------------------
   □ scene
-------------------------------- */
.slick-scene.slick-dotted.slick-slider {
    max-width: 901px;
    margin: 0 auto;
}
.slick-scene .slick-list,
.slick-scene .slick-track,
.slick-scene .slick-slide {
    margin-bottom: 20px;
}
.slick-scene .slide-arrow {
    bottom: 0;
    cursor: pointer;
    margin: auto;
    position: absolute;
    top: 0;
    width: 23px;
    height: 40px;
}
    .slick-scene .prev-arrow {
        left: -68px;
    }
    .slick-scene .next-arrow {
        right: -68px;
    }

.slick-scene .slick-dots li {
    width: 26px;
    height: 26px;
    margin: 0 15px;
}
.slick-scene .slick-dots li button {
    font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "YuGothic M", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    font-weight: 700;
    color: #251f1c;
}
    .slick-scene .slick-dots li button:before {
        content:none;
    }
    .slick-scene .slick-dots li.slick-active button {
        color:#fff;
        background:#000;
        width:100%;
        height:100%;
        border-radius:50%;
    }

/* スマホ用
-------------------------------------------- */
@media only screen and (max-width: 767px) {
    .slick-scene.slick-dotted.slick-slider {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .slick-scene .slick-dots li {
        margin: 0px 5px;
    }
}


/* --------------------------------
   □ buy
-------------------------------- */
#buy .container {
    max-width: 960px;
    padding-top: 60px;
    border-top: 1px solid #14100e;
}

/* スマホ用
-------------------------------------------- */
@media only screen and (max-width: 767px) {
    #buy {
        border-top: 1px solid #14100e;
    }
    #buy .container {
        padding-top: 40px;
        border-top: none;
    }
}

/* --------------------------------
   □ stepForm
-------------------------------- */
#stepForm {

    .fixfooter {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 150px;
        text-align: center;
        background: #bfadcf;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        p {
            margin: 0;
        }

        .number{
            margin-bottom: 4px;
            font-size: 2.6rem;
            font-weight: 700;
            line-height: 1.2;

            .current{
                font-size: 4.2rem;
                color: #d30019;
            }
        }

        .remarks{
            margin-top: 4px;
            font-size: 80%;
            color: #d30019;
        }

        .flexbox {

            @media screen and (max-width: 767px) {
                justify-content: center;
                align-items: center;
                width: 100%;
            }
            > li {
                @media screen and (max-width: 767px) {
                    width: calc(( 100% - 10%) / 2);
                }
                a, button{
                    @media screen and (max-width: 767px) {
                        display: block;
                        width: 100%;
                        padding: 9px 13px;
                        font-size: 1.6rem;
                    }

                    span {
                        @media screen and (max-width: 767px) {
                            font-size: 100%;
                        }
                    }
                }
            }
        }
    }
    
    .step {
        padding: 70px 0;
        .title {
            margin-bottom: 20px;
        }
        .subtitle {
            font-size: 187.5%;
            font-weight: 700;
            line-height: 1.5;
            text-align: center;
            margin-bottom: 40px;
        }
        
        label {
            display: block;
            cursor: pointer;
        }

        .flex_box {
            display: flex;
            flex-wrap: wrap;
            gap: 40px 10%;
            margin-inline: auto;
            li {
                width: calc(( 100% - 10%) / 2);
                text-align: center;

                @media screen and (max-width: 767px) {
                    width: 100%;
                }
            }
            
            &.col3 {
                li {
                    width: calc(( 100% - 20%) / 3);
                    @media screen and (max-width: 767px) {
                        width: 100%;
                    }
                }
            }
        }
    
        .itemList{
    
            li {
                label {
                    text-align: center;
                    padding: 30px;
                    border-radius: 20px;
                    border: 1px solid #cccccc;
    
                    &:has(input:checked) {
                        background-color: #ffbdc0;
                        border-color: #ffbdc0;
                    }
                }

                dl {
                    dt {
                        margin-bottom: 16px;
                    }
                    dd{
                        font-size: 75%;
                        text-align: left;
                        .checkbox {
                            display: flex;
                            align-items: flex-start;

                            input[type="checkbox"] {
                                appearance: none;
                                position: relative;
                                width: 20px;
                                height: 20px;
                                margin: 0 7px 0 0;
                                border-radius: 4px;
                                background-color: #fff;
                                border: solid 2px #00a3b2;
                                vertical-align: sub;
                                cursor: pointer;
                                flex-shrink: 0;

                                &:checked {
                                    background-color: #00a3b2;

                                    &::after {
                                        content: "";
                                        position: absolute;
                                        inset: 0;
                                        width: 4px;
                                        height: 10px;
                                        margin: auto;
                                        border-right: 3px solid #fff;
                                        border-bottom: 3px solid #fff;
                                        transform: translateY(-1px) rotate(45deg);
                                    }
                                }
                            }
                        }
                        

                        .button{
                            margin: 4px 0 0 0;
                            text-align: left;
                            a{
                                display: inline-block;
                                border-radius: 6px;
                                padding: 8px;
                                background: #666666;
                            }
                        }
                    }
                }
            }
        }
        
        .pager {
            text-align: center;
            margin-top: 40px;
        }
    }

}


/* スマホ用
-------------------------------------------- */
@media only screen and (max-width: 767px) {
    .chapter.step {
        padding: 40px 0;
    }
        .chapter.step::before {
            border-width: 20px 20px 0 20px;
        }
    .step h3 {
        font-size: 130%;
        margin-bottom: 35px;
    }
    .step .flex_box {
        max-width: 90%!important;
    }
}



/* スマホ用
-------------------------------------------- */
@media only screen and (max-width: 767px) {
    #step1 .flex_box {
        gap: 40px 20%;
    }
    #step1 .flex_box li {
        width: calc(( 100% - 20%) / 2);
    }
}



/* --------------------------------
   □ cart
-------------------------------- */
.contents .buttonStyle.cart {
    margin: 30px auto 0;
}
.contents .buttonStyle.cart button {
    width: 300px;
    background-color: #575757;
    color: #fff;
}
    .contents .buttonStyle.cart button:hover {
        opacity: 0.7;
    }
.contents .buttonStyle.cart button span {
    font-size: 81.25%;
    background: url(../../images/lp/kids_giftset/cart.svg) 0 50% no-repeat;
    background-size: auto 100%;
    padding: 2px 0 2px 40px
}
    .contents .buttonStyle.cart button span::before {
        content: none;
    }

.contents .caution {
    margin-top: 24px;
    width: fit-content;
    color: #dc666a;
    background-color: #FBF8E3;
    padding: 20px 40px;
    text-align: center;
    font-weight: 700;
    margin-inline: auto;

    @media screen and (max-width: 767px) {
        margin-top: 16px;
        padding: 16px 20px;
        font-size: 80%;
    }
}

/* スマホ用
-------------------------------------------- */
@media only screen and (max-width: 767px) {
    .contents .buttonStyle.cart button {
        width: auto;
    }
    .contents .buttonStyle.cart button span {
        font-size: 76%;
    }
}