@charset "UTF-8";

/* リセットCSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    font-size: 100%;  
    font: inherit;  
    vertical-align: baseline; 
 }

.lp-wrap {
    width: 100%;
}

.lp-container {
    max-width: 1200px;
    height: auto;
    padding-top: clamp(2.5rem, 1.364rem + 4.85vw, 5rem);
    margin: 0 auto;
    background-color: #EFE9DB;
}

.lp-container img {
    display: block;
    width: 100%;
}

.toto-3way_contents1 {
    display: flex;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 18%;
}

.toto-3way_content1-1 {
    width: 50%;
}

.toto-3way_content1-2 {
    width: 50%;
    position: absolute;
    top: 15%;
    right: 0;
    z-index: 2;
}

.toto-3way_contents2 {
    width: 62.5%;
    margin: 0 auto;
    margin-bottom: 15%;
    position: relative;
}

.toto-3way_contents2 img:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
}

.toto-3way_content2 img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

.toto-3way-contents3 {
    width: 62.5%;
    margin: 0 auto;
    margin-bottom: 15%;
    position: relative;
}

.toto-3way_content3 img:nth-child(1) {
    position: absolute;
}

.toto-3way-contents3 img:nth-child(2) {
    position: absolute;
    top: 4%;
    left: 0;
    z-index: 4;
}

.toto-3way-contents3 img:nth-child(3) {
    position: absolute;
    bottom: -2%;
    left: -4%;
    z-index: 5;
}

.toto-3way_content3-2,
.toto-3way_content3-3 {
    width: 100%;
    height: auto;
    display: flex;
}

.toto-3way_content3-2 img,
.toto-3way_content3-3 img {
    width: calc(50%);
    object-fit: contain;
}

.toto-3way_content3-3 {
    flex-direction: row-reverse;
}

.toto-3way_contents4-1 {
    display: flex;
    width: 100%;
    margin-top: 8%;
}

.toto-3way_contents4-1 img {
    width: calc(50% - 15%);
    margin: 0 auto 4% auto;
}

.toto-3way_contents4-2 {
    display: flex;
    width: 100%;

}

.toto-3way_contents4-2 img {
    width: calc(50% - 15%);
    margin: 0 auto;
    margin: 0 auto 6% auto;
}

.wave {
    width: 100%;
}

.button_area {
    width: 100%;
    padding-bottom: clamp(1rem, 0.318rem + 2.91vw, 2.5rem);
    background-color: #FFF;
}

.toto-3way_contents5 {
    width: 100%;
    background-color: #FFF;
    padding-bottom: clamp(1.5rem, 0.591rem + 3.88vw, 3.5rem);
}

.toto-3way_contents5 img {
    width: 45%;
    margin: 0 auto;
}

.toto-3way_content5-1 {
    width: 80%;
    margin: 0 auto;
    margin-bottom: clamp(1rem, 0.318rem + 2.91vw, 2.5rem);
    background-color: #FFF;
}

.toto-3way_content5-1 figure {
    width: 45%;
    display: flex;
    margin: 0 auto;
    gap: 0 30%;
}

.toto-3way_content5-1 img {
    width: 100%;
}

.toto-3way_content5-1 a:hover {
    opacity: .7;
}

input#cart-button {
    display: block;
    width: 50%;
    border: none;
    padding: 0;
    margin: 0 auto;
    margin-bottom: clamp(3rem, 1.636rem + 5.82vw, 6rem);
}


/* ///////////////////
　　メディアクエリ
////////////////// */
@media (width < 768px) {
    .toto-3way_contents1 {
        display: block;
    }
    .toto-3way_content1-1,
    .toto-3way_content1-2 {
        width: 80%;
        position: static;
    }
    .toto-3way_content1-2 {
        margin: 2rem 0 0 auto;
    }
    .toto-3way_contents2 {
        width: 80%;
    }
    .toto-3way-contents3 {
        width: 100%;
    }
    .toto-3way_content3-2,
    .toto-3way_content3-3 {
        display: block;
    }
    .toto-3way_content3-2 img,
    .toto-3way_content3-3 img {
        width: 90%;
        padding-top: 10%;
    }
    .toto-3way_content3-2 img:nth-child(2),
    .toto-3way_content3-3 img:nth-child(2) {
        margin: 0 auto;
        padding-bottom: 10%;
    }
    .toto-3way_content3-3 img:nth-child(1) {
        margin: 0 0 0 auto;
    }
    .toto-3way-contents3 img:nth-child(3) {
        width: 90%;
        bottom: -2%;
        left: 7%;
    }
    .toto-3way_contents4-1 img {
        width: calc(50% - 5%);
    }
    .toto-3way_contents4-2 img {
        width: calc(50% - 5%);
        margin: 0 auto 7% auto;
    }
    .toto-3way_contents5 img {
        width: 60%;
    }
    .toto-3way_content5-1 figure {
        width: 60%;
    }
    input#cart-button {
        width: 80%;
    }
}