:root{
    /*color*/
    --strong-theme:#e84994;
    --base-pale-theme:#fceff6;
    --border-pale-theme:#f8e7ef;
    --light-theme:#ee86b0;
    --footer-color:#f287b2;
    --accent-color:#00a1bf;
    --txt-color:#515151;
    --blk:#333;
    --pale-gray:#dfdfdf;
    --white:#fff;
    --fl01:#e74e17;
    --fl02:#e84691;
    --fl03:#15aec3;
    /*font-family*/
    --Jost:Jost;
    --nonJost:Arial,Helvetica,"Helvetica Neue",sans-serif;
    /*font-size*/
    --f-XXL:52px;
    --f-XL:40px;
    --f-LL:34px;
    --f-L:27px;
    --f-ML:20px;
    --f-M:18px;
    --f-S:15px;
    --f-SS:13px;
    --f-SSS:11px;
}

@media print, screen and (max-width: 1024px) {   
    :root{
        /*font-size*/
        --f-XXL:48px;
        --f-XL:36px;
        --f-LL:30px;
        --f-L:24px;
        --f-ML:18px;
        --f-M:16px;
        --f-S:14px;
        --f-SS:12px;
        --f-SSS:10px;
    }
}
@media print, screen and (max-width: 768px) {   
    :root{
        /*font-size*/
        --f-XXL:42px;
        --f-XL:32px;
        --f-LL:27px;
        --f-L:21px;
        --f-ML:17px;
        --f-M:15px;
        --f-S:13px;
        --f-SS:11px;
        --f-SSS:9px;
    }
}

@media print, screen and (max-width: 640px) {   
    :root{
        /*font-size*/
        --f-XXL:36px;
        --f-XL:28px;
        --f-LL:24px;
        --f-L:18px;
        --f-ML:16px;
        --f-M:15px;
        --f-S:13px;
        --f-SS:10px;
        --f-SSS:9px;
    }
}


html{
    font-size: 62.5%;
    line-height: 1.8;
    height: 100%;
    word-break: break-word;
    font-family: var(--Jost);
    font-weight:700;
}
body{font-family:var(--Jost);}
header{
    border-top:solid 3px var(--strong-theme);
    background:var(--white);
    border-bottom:solid 1px var(--pale-gray);
}

header .aside{
    display:block;
    text-align:center;
    font-size:1.1rem;
    color:var(--light-theme);
    padding:10px 0;
    border-bottom:solid 1px var(--border-pale-theme);
    font-family: var(--Jost);
    font-weight:500;
}

header .header-in{width:100%; padding:0 25px; max-width:1500px; margin:0 auto; height:100px; gap:80px; display:flex; align-items: center; justify-content: space-between;}
header .header-in .logo{width:124px;}
header .header-in .header-nav{display:flex; justify-content: space-between; gap:80px; align-items:center; flex:1;}
header .header-in .header-nav ul{display:flex; justify-content: center;  gap:40px;}
header .header-in .header-nav ul li{font-size:1.6rem;}
header .header-in .header-nav ul li a{text-decoration:none; font-family:var(--Jost); font-weight:700; }
header .header-in .header-nav ul li a:hover{color:var(--strong-theme);}
header .header-in .header-nav ul li a.current{color:var(--strong-theme); position:relative;}
header .header-in .header-nav ul li a.current:after{content:""; position:absolute; display:block; left:0; bottom:calc(50% - 50px);  z-index:5; width:100%; height:5px; background:var(--strong-theme);}
header .header-in .blue-button{width:150px}
header .header-in .blue-button a{display:block; background:var(--accent-color); color:var(--white); font-weight:500; text-align:center; border-radius:30px; padding:10px 0; font-size:var(--f-S); text-decoration:none; transition:all .4s;}
header .header-in .blue-button a:hover{opacity:.75;}
.sp-menu-block,
.sp-menu-btn {
    display: none;
}
.sp-menu-block.open > .sp-menu{display:none;}


@media print, screen and (max-width: 1024px) {        
    header{position:relative; }
    header .header-in{width:100%; padding:0 25px; max-width:1500px; margin:0 auto; height:100px; gap:80px; display:flex; align-items: center; justify-content: space-between;}
    header .header-in .logo{width:124px;}
    header .header-in .header-nav{display:flex; justify-content: space-between; gap:5px; align-items:center; flex:0; width:auto; min-width:200px; position:relative;}
    header .header-in .header-nav ul{display:none; justify-content: center;gap:40px;}
    header .header-in .header-nav ul li{font-size:1.6rem;}
    header .header-in .header-nav ul li a{text-decoration:none; font-family:var(--Jost); font-weight:700; }
    header .header-in .header-nav ul li a:hover{color:var(--strong-theme);}
    header .header-in .header-nav ul li a.current{color:var(--strong-theme); position:relative;}
    header .header-in .header-nav ul li a.current:after{content:""; position:absolute; display:block; left:0; bottom:calc(50% - 50px);  z-index:5; width:100%; height:5px; background:var(--strong-theme);}
    header .header-in .blue-button{width:150px}
    header .header-in .blue-button a{display:block; background:var(--accent-color); color:var(--white); font-weight:500; text-align:center; border-radius:30px; padding:10px 0; font-size:var(--f-S); text-decoration:none; transition:all .4s; ;}
    header .header-in .blue-button a:hover{opacity:.75;}
    
    header .header-in .header-nav .sp-menu-btn{position:relative; z-index:1001;}
    header .header-in .header-nav .sp-menu-btn.open{ position:fixed; right:20px;}
    .sp-menu-btn {
        cursor: pointer;
        position: relative;
        width: 30px;
        height: 21px;
        margin-left: 20px;
        display: block;
    }
    .sp-menu-btn span {
        position: absolute;
        height: 3px;
        display: inline-block;
        width: 100%;
        background-color: var(--strong-theme);
    }
    .sp-menu-btn span:nth-of-type(1) {top: 0;}
    .sp-menu-btn span:nth-of-type(2) {top: 9px;}
    .sp-menu-btn span:nth-of-type(3) {bottom: 0;}
    .sp-menu-btn.open span{background:var(--white);}
    .sp-menu-btn.open span:nth-of-type(1) {transform: translate(0, -50%) rotate(45deg); top: 9px; top: 50%;}
    .sp-menu-btn.open span:nth-of-type(2) {opacity: 0;}
    .sp-menu-btn.open span:nth-of-type(3) {transform: translate(0, -50%) rotate(-45deg); bottom: 9px; bottom: auto; top: 50%;}
    .sp-menu-block {display: none;}

    .sp-menu-block.open {position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: var(--strong-theme); z-index: 1000;}
    .sp-menu-block.open > .sp-menu{display:flex;}
    .sp-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .sp-menu .anchor {
        display: block;
        text-align: center;
        margin:30px 0;
    }
    .sp-menu .anchor a{
        color:var(--white);
        font-size:var(--f-XL);
        text-decoration:none;
        font-weight:700; 
    }

    .anchor-link+.anchor-link {margin-left: 0;}
    .sp-menu .anchor .anchor-link+.anchor-link {margin-top: 8%;}
    .sp-menu .anchor .anchor-link a {height: 25px;}
}
@media print, screen and (max-width: 768px) {
    header{position:relative; }
    header .header-in{width:100%; padding:0 20px; height:80px; gap:50px; display:flex; align-items: center; justify-content: space-between;}
    header .header-in .logo{width:112px;}
    header .header-in .header-nav{display:flex; justify-content: space-between; gap:5px; align-items:center; flex:0; width:auto; min-width:210px; position:relative;}
    header .header-in .blue-button a{border-radius:30px; padding:10px 20px;}
}


footer{width:100%; background:var(--footer-color); padding:20px 25px 40px; color:var(--white);}
.footer-in{width:100%; max-width:1280px; margin:0 auto;}
.footer-nav{padding:20px 40px 40px; border-bottom:solid 1px var(--border-pale-theme);}
.footer-nav ul{display:flex; gap:60px;}
.footer-nav ul li{padding:0;}
.footer-nav ul li a{font-size:var(--f-S); color:var(--white); font-family:var(--Jost); font-weight:500; text-decoration:none;}

.footer-block{padding:40px 40px 40px; display:flex; justify-content: space-between; align-items: center;}
.footer-block .logo{width:180px;}
.footer-block .sns-list{text-align:right}
.footer-block .sns-list ul{display:flex; gap:10px; font-size:var(--f-S); font-weight:700; align-items: center; margin-bottom:25px;}
.footer-block .sns-list ul li{width:32px;}
.footer-block .sns-list ul li.caps{width:auto;}
.footer-block .sns-list .about-us a{font-size:var(--f-S); font-weight:600; text-decoration:none; padding:10px 24px; border-radius:30px; border:solid 2px var(--white)}
.copyright{color:var(--white); font-size:var(--f-SS); margin-left:40px;}


@media print, screen and (max-width: 768px) {
    footer{padding:0; }
    .footer-nav{padding:0; border-bottom:none;}
    .footer-nav ul{display:flex; gap:0; flex-wrap:wrap;}
    .footer-nav ul li{border-bottom:solid 1px var(--border-pale-theme); width:50%; padding:15px 20px;}
    .footer-nav ul li:nth-child(2n){border-left:solid 1px var(--border-pale-theme)}
    .footer-nav ul li a{display:block; font-size:var(--f-S); color:var(--white); font-family:var(--Jost); font-weight:500; text-decoration:none;}

    .footer-block{padding:20px 30px 0; display:flex; justify-content: space-between; align-items: center; flex-wrap:wrap; /*flex-direction: column-reverse;*/}
    .footer-block .logo{width:150px; margin:20px auto;}
    .footer-block .sns-list{text-align:right; display:flex; align-items: center; margin-bottom:20px; gap:20px; flex-wrap:nowrap; margin:10px auto; width:100%; justify-content: center;}
    .footer-block .sns-list ul{display:flex; gap:10px; font-size:var(--f-SS); font-weight:700; align-items: center; margin-bottom:0;}
    .footer-block .sns-list ul li{width:32px;}
    .footer-block .sns-list ul li.caps{width:auto;}
    .footer-block .sns-list .about-us a{font-size:var(--f-SS); font-weight:600; text-decoration:none; padding:6px 18px; border-radius:30px; border:solid 2px var(--white)}
    .copyright{color:var(--white); font-size:var(--f-SS); padding:20px 0; margin-left:0; text-align:center;}
}
@media print, screen and (max-width: 640px) {
    footer{padding:0; }
    .footer-nav{padding:0; border-bottom:none;}
    .footer-nav ul{display:flex; gap:0; flex-wrap:wrap;}
    .footer-nav ul li{border-bottom:solid 1px var(--border-pale-theme); width:50%; padding:15px 20px;}
    .footer-nav ul li:nth-child(2n){border-left:solid 1px var(--border-pale-theme)}
    .footer-nav ul li a{display:block; font-size:var(--f-S); color:var(--white); font-family:var(--Jost); font-weight:500; text-decoration:none;}

    .footer-block{padding:20px 25px 0; display:flex; justify-content: space-between; align-items: center; flex-wrap:wrap;  flex-direction: column;/*flex-direction: column-reverse;*/}
    .footer-block .logo{width:150px; margin:20px auto;}
    .footer-block .sns-list{text-align:right; display:flex; align-items: center; margin-bottom:20px; gap:20px; flex-wrap:nowrap; margin:10px auto; flex-direction: column;}
    .footer-block .sns-list ul{display:flex; gap:10px; font-size:var(--f-SS); font-weight:700; align-items: center; margin-bottom:0;}
    .footer-block .sns-list ul li{width:28px;}
    .footer-block .sns-list ul li.caps{width:auto;}
    .footer-block .sns-list .about-us a{font-size:var(--f-SS);}
}


.left{text-align:left;}
.center,.ctr{text-align:center;}
.right{text-align:right;}

/*contents*/

.kv.sub-page{background:var(--white);}
.kv.sub-page .kv-inner{width:100%; max-width:1390px; margin:40px auto 20px; position:relative; display:flex; align-items: center;}

@media print, screen and (max-width: 1024px) {
    .kv.sub-page .kv-inner{margin:0 auto 20px; position:relative; display:flex; align-items: center;}
}

.bread-crumble{width:100%; max-width:1390px; margin:10px auto 0; display:flex; align-items: center; justify-content: right;  padding:0 15px;}
.bread-crumble ul{display:flex; gap:30px; align-items: center;}
.bread-crumble ul li{font-size:var(--f-SS); font-family:var(--nonJost); font-weight:600;}
.bread-crumble ul li a{text-decoration: none; position:relative;}
.bread-crumble ul li a:after{content:""; display:block; width:0.6em; height:0.6em; background:var(--strong-theme); border-radius:0.5em; position:absolute; right:-1.5em; top:0.3em;;}

.contents-block{width:100%; padding:0;}
.contents-block .section-in{width:100%; max-width:1360px; margin:0 auto; padding:80px 40px; box-sizing:border-box;}
.contents-block.no-space .section-in{padding:0 40px}
.contents-block .section-in h2{font-size:var(--f-XL); text-align:center; position:relative; margin-bottom:50px;}
.contents-block .section-in h2:after{content:""; display:block; width:40px; height:4px; background:var(--strong-theme); margin:20px auto 0;}
.contents-block .section-in h2.no-point{}
.contents-block .section-in h2.no-point::after{display:none;}
.contents-block .section-in h2.simple-title{font-size:var(--f-LL); text-align:left; position:static; margin-bottom:1.2em;}
.contents-block .section-in h2.simple-title:after{display:none;}
.contents-block .section-in h3.products-lead{font-size:var(--f-LL); margin-bottom:1em;}
.contents-block .section-in h3.small-title{font-size:var(--f-L); margin-bottom:1em;}
.contents-block .section-in h3.more-small-title{font-size:var(--f-ML); margin-bottom:1em;}
.contents-block .section-in h4{font-size:var(--f-ML); font-weight:700; margin-bottom:1em;}
.contents-block .section-in em{color:var(--strong-theme); font-style:normal;}
.contents-block .section-in em.underline{text-decoration:underline;}

.contents-block .section-in p.what-is-txt{font-size:var(--f-S); font-family:var(--nonJost); line-height:1.6; font-weight:500;}
.contents-block .section-in p.what-is-txt b{font-weight:700; font-style:normal;}
.section-in p{padding-bottom:1em; font-weight:500; font-family:var(--nonJost); font-size:var(--f-S)}
.section-in p.note{padding-bottom:1em; font-weight:500; font-family:var(--nonJost); font-size:var(--f-SS)}
.section-in p.pt1-5em{padding-top:1.5em;}
.section-in p a{color:var(--strong-theme); text-decoration:underline;}
.section-in p a:hover{text-decoration:none;}

.contents-block .section-in + .section-in{border-top:solid 1px #ddd;}

.section-in .blue-button a{display:block; background:var(--accent-color); color:var(--white); font-weight:500; text-align:center; border-radius:30px; padding:10px 30px; font-size:var(--f-M); text-decoration:none; transition:all .4s;}
.section-in .blue-button a:hover{opacity:.75;}

.pale-bg-section{background:var(--base-pale-theme);}

@media print, screen and (max-width: 1024px) {
    .contents-block{width:100%; padding:0;}
    .contents-block .section-in{width:100%; max-width:1360px; margin:0 auto; padding:60px 30px; box-sizing:border-box;}
    .contents-block .section-in h2{margin-bottom:40px;}
    .contents-block .section-in h2:after{content:""; display:block; width:40px; height:4px; background:var(--strong-theme); margin:20px auto 0;}
    .contents-block .section-in h2.simple-title{font-size:var(--f-LL); text-align:left; position:static; margin-bottom:1.2em;}    
}

@media print, screen and (max-width: 768px) {
    .contents-block{width:100%; padding:0;}
    .contents-block .section-in{padding:50px 25px; box-sizing:border-box;}
    .contents-block .section-in h2{margin-bottom:35px;}
    .contents-block .section-in h2:after{content:""; display:block; width:35px; height:4px; background:var(--strong-theme); margin:18px auto 0;}
    .contents-block .section-in h2.simple-title{font-size:var(--f-LL); text-align:left; position:static; margin-bottom:1.2em;}    
}


.products-list{display:flex; gap:30px; margin:40px 0;}
.products-list-items{border:solid 1px var(--pale-gray); border-radius:20px; padding:20px; width:100%; }
.products-list-items img{width:80%; max-width: 188px; margin:20px auto;}
.products-list-items .border-button{width:80%; max-width:200px; margin:10px auto 20px; text-align:center; padding:8px 20px; border-radius:30px; font-size:var(--f-S); font-weight:600;}
.products-list-items.flavour01 .border-button{color:var(--fl01); border:solid 1px var(--fl01);}
.products-list-items.flavour02 .border-button{color:var(--fl02); border:solid 1px var(--fl02);}
.products-list-items.flavour03 .border-button{color:var(--fl03); border:solid 1px var(--fl03);}
.products-list-items.flavour03 .border-button{color:var(--fl03); border:solid 1px var(--fl03);}
.products-list-items p{font-size:var(--f-S); text-align:center; padding:10px 0; font-weight:500;}
.products-list-items.flavour01 p{ color:var(--fl01);}
.products-list-items.flavour02 p{ color:var(--fl02);}
.products-list-items.flavour03 p{ color:var(--fl03);}

.products-list + .blue-button{width:270px; margin:10px auto;}

@media print, screen and (max-width: 960px) {  
    .products-list{display:flex; gap:30px; margin:40px 0; flex-wrap:wrap;}
    .products-list-items{border:solid 1px var(--pale-gray); border-radius:20px; padding:20px; width:calc(50% - 15px); }
    .products-list-items img{width:80%; max-width: 188px; margin:20px auto;}
    .products-list-items .border-button{width:80%; max-width:200px; margin:10px auto 20px; text-align:center; padding:8px 20px; border-radius:30px; font-size:var(--f-S); font-weight:600;}
}

@media print, screen and (max-width: 640px) {  
    .products-list{display:flex; gap:16px; margin:30px 0; flex-wrap:wrap;}
    .products-list-items{border:solid 1px var(--pale-gray); border-radius:20px; padding:12px; width:calc(50% - 8px); }
    .products-list-items img{width:80%; max-width: 188px; margin:20px auto;}
    .products-list-items .border-button{width:80%; max-width:200px; margin:10px auto 20px; text-align:center; padding:8px 20px; border-radius:30px; font-size:var(--f-S); font-weight:600;}
}

@media print, screen and (max-width: 480px) {  
    .products-list{display:flex; gap:16px; margin:20px 0 30px; flex-wrap:wrap;}
    .products-list-items{border:solid 1px var(--pale-gray); border-radius:20px; padding:12px; width:100%; }
    .products-list-items img{width:80%; max-width: 188px; margin:20px auto;}
    .products-list-items .border-button{width:80%; max-width:200px; margin:10px auto 20px; text-align:center; padding:8px 20px; border-radius:30px; font-size:var(--f-S); font-weight:600;}
}

.feature-list{display:flex; gap:30px; padding:60px 0 40px;}
.feature-list-items{width:calc(25% - 20px); border:solid 2px var( --border-pale-theme); border-radius:20px; padding:0 30px 30px; background:#fff;}
.feature-list-items figure{width:70%; max-width:180px; margin:-60px auto 30px;}
.feature-list-items h3{font-size:var(--f-ML); color:var(--blk); text-align:center; margin-bottom:1.2em;}
.feature-list-items p{text-align:center; font-size:var(--f-S); font-weight:500; color:var(--blk); font-family:var(--nonJost)}

@media print, screen and (max-width: 960px) {   
    .feature-list{display:flex; gap:30px; padding:60px 0 40px; flex-wrap:wrap;}
    .feature-list-items{width:calc(50% - 15px); border:solid 2px var( --border-pale-theme); border-radius:20px; padding:0 30px 30px; background:#fff;}
    .feature-list-items figure{width:70%; max-width:180px; margin:-60px auto 30px;}
    .feature-list-items h3{font-size:var(--f-ML); color:var(--blk); text-align:center; margin-bottom:1.2em;}
    .feature-list-items p{text-align:center; font-size:var(--f-S); font-weight:500; color:var(--blk); font-family:var(--nonJost)}
    .feature-list-items:first-child{margin-bottom:60px;}
    .feature-list-items:nth-child(2){margin-bottom:60px;}
}
@media print, screen and (max-width: 640px) {   
    .feature-list{display:flex; gap:16px; padding:60px 0 40px; flex-wrap:wrap;}
    .feature-list-items{width:calc(50% - 8px); border:solid 2px var( --border-pale-theme); border-radius:20px; padding:0 20px 30px; background:#fff;}
    .feature-list-items figure{width:85%; max-width:180px; margin:-60px auto 30px;}
}
@media print, screen and (max-width: 480px) {   
    .feature-list{display:flex; gap:16px; padding:60px 0 40px; flex-wrap:wrap;}
    .feature-list-items{width:100%; border:solid 2px var( --border-pale-theme); border-radius:20px; padding:0 20px 30px; background:#fff;}
    .feature-list-items figure{width:85%; max-width:180px; margin:-60px auto 30px;}
    .feature-list-items:nth-child(3){margin-bottom:60px;}
}


.mid-column{width:70%; display:flex; gap:35px; justify-content: center; margin:30px auto 30px; padding:20px 0;}
.mid-column div{position:relative;}
.mid-column .column01 .balloon{width:50%; position:absolute; left:-24%; top:-5%;}
.mid-column .column02 .balloon{width:50%; position:absolute; right:-24%; top:-5%;}
.mid-column div > h3{font-size:var(--f-ML); font-weight:700; margin:30px 0;}

@media print, screen and (max-width: 768px) {
    .mid-column{width:85%; display:flex; gap:35px; justify-content: center; margin:30px auto 30px; padding:20px 0;}
    .mid-column div{position:relative;}
    .mid-column .column01 .balloon{width:45%; position:absolute; left:-24%; top:-5%;}
    .mid-column .column02 .balloon{width:45%; position:absolute; right:-24%; top:-5%;}
    .mid-column div > h3{font-size:var(--f-ML); font-weight:700; margin:30px 0;}
    
}

.use-column.tri-column{display:flex; gap:60px; justify-content: center;}
.tri-column div{width:calc(33% - 40px);}
.use-item figure img{width:75%; margin:20px auto;}
.use-item figure.before-item{position:relative; padding-bottom:50px;}
.use-item figure.before-item:after{content:""; display:block; width:35px; height:15px; background-image:url(/assets/images/products/usage-arrow.png); background-repeat:no-repeat; background-size:35px 15px; position:absolute; left:calc(50% - 18px); bottom:20px;}
.use-item figure figcaption{text-align:center; font-size:var(--f-SS); font-family:var(--nonJost); font-weight:500; padding:10px 20px 20px;}

@media print, screen and (max-width: 768px) {
    .use-column.tri-column{display:flex; gap:10px; justify-content: center; flex-wrap:wrap;}
    .tri-column div{width:100%; display:flex;}
    .use-item figure img{width:75%; margin:20px auto;}
    .use-item figure.before-item{position:relative; padding:0 50px 0 0;}
    .use-item figure.before-item:after{content:""; display:block; width:35px; height:15px; background-image:url(/assets/images/products/usage-arrow.png); background-repeat:no-repeat; background-size:35px 15px; position:absolute; left:calc(100% - 40px); top:calc(50% - 18px); bottom:auto;transform: rotate(-90deg);}
    .use-item figure figcaption{text-align:center; font-size:var(--f-SS); font-family:var(--nonJost); font-weight:500; padding:10px 20px 20px;}
}

@media print, screen and (max-width: 576px) {
    .use-column.tri-column{display:flex; gap:10px; justify-content: center; flex-wrap:wrap;}
    .tri-column div{width:100%; display:flex;}
    .use-item figure img{width:90%; margin:10px auto;}
    .use-item figure.before-item{position:relative; padding:0 50px 0 0;}
}


.products-summury{display:flex; gap:50px; align-items:center;}
.products-summury .round{background:var(--white); border-radius:20px; position:relative; padding:20px;}
.products-summury .summury-photo{width:42%; position:relative;}
.products-summury .summury-photo .icons{width:29%; position:absolute; top:-5%; right:-5%;}
.products-summury .summury-txt{width:58%;}
.products-summury .summury-txt h3{font-size:var(--f-LL)}
.products-summury .summury-txt p{font-size:var(--f-S); font-family:var(--nonJost); font-weight:500;}
.products-summury .summury-txt p.note{font-size:var(--f-SS); font-family:var(--nonJost); font-weight:500;}
.products-summury .summury-txt .blue-button{width:270px; margin:0 0 30px;}

@media print, screen and (max-width: 768px) {
    .products-summury{display:flex; gap:50px; align-items:center; flex-wrap:wrap; justify-content: center;}
    .products-summury .round{background:var(--white);; border-radius:20px; position:relative; padding:20px;}
    .products-summury .summury-photo{width:60%; position:relative;}
    .products-summury .summury-txt{width:100%;}
    .products-summury .summury-txt .blue-button{width:270px; margin:20px auto 30px;}   
}
@media print, screen and (max-width: 576px) {
    .products-summury{display:flex; gap:50px; align-items:center; flex-wrap:wrap; justify-content: center;}
    .products-summury .round{background:var(--white); border-radius:20px; position:relative; padding:20px;}
    .products-summury .summury-photo{width:75%; position:relative;}
    .products-summury .summury-txt .blue-button{width:270px; margin:20px auto 30px;}   
}


.movie-thumbnail{width:80%; max-width:680px; margin:10px auto; position:relative;}
.movie-thumbnail:before{content:""; display:block; width:12%; max-width:64px; height:64px; background:url(/assets/images/top/play-btn.png) 0 0 no-repeat; background-size:100%; position:absolute; bottom:30px; right:20px;}
.movie-thumbnail button{vertical-align: top;}
ul + .movie-thumbnail{margin:50px auto 0; border:solid 10px var(--border-pale-theme)}

ul.indent-item{margin:0 0 2em;}
ul.indent-item li{padding:3px 0 3px 1.2em; font-size:var(--f-S); font-weight:500; font-family:var(--nonJost); position:relative;}
ul.indent-item.theme-circle li:before{content:""; display:block; width:0.5em; height:0.5em; border-radius:0.5em; background:var(--strong-theme); position:absolute; top:0.75em; left:0em;}
ul.indent-item.theme-circle2 li:before{content:""; display:block; width:0.5em; height:0.5em; border-radius:0.5em; background:var(--blk); position:absolute; top:0.7em; left:0em;}
ul.indent-item li ul{margin:10px 0;}
ul.indent-item.theme-circle2 li ul li{padding:3px 0 3px 0.75em; text-indent:-1em; position:relative;}
ul.indent-item.theme-circle2 li ul li:before{content:""; display:none;}
ul.indent-item-1em{margin:0;}
ul.indent-item-1em li{padding:3px 0 3px 0.75em; text-indent:-1em; position:relative;}

.indent-item-number li{padding:3px 0 3px 1.5em; text-indent:-3em; font-size:var(--f-SS); font-weight:500; font-family: var(--nonJost);}
.indent-item-number li span.num{width:3em; text-align:right; display:inline-block;}
.indent-item-number li a{color:var(--strong-theme); text-decoration:underline;}
.indent-item-number li a:hover{text-decoration:none;}

p.caption{font-size:var(--f-S);}
h4 + ul.indent-item{margin-top:-1.5em;}


.w-img-column{display:flex; gap:40px; align-items: center; justify-content: space-between; padding:20px 0 50px 0;}
.w-img-column figure{width:35%; max-width:260px; min-width:240px;}
.w-img-column figure figcaption{color:var(--strong-theme); font-size:var(--f-M); text-align:center; margin:0 0 10px 0;}
.w-img-column .w-img-column-txt{flex:1;}
.w-img-column.reverse{
    
}
.w-img-column + .w-img-column{border-top:solid 1px var(--pale-gray); padding:50px 0;}

@media print, screen and (max-width: 768px) {
    .w-img-column{display:flex; gap:40px; align-items: center; justify-content: center; flex-wrap:wrap; padding:20px 0 50px 0;}
    .w-img-column figure{width:45%; max-width:100%; min-width:auto;}
    .w-img-column .w-img-column-txt{width:100%;}
    .w-img-column.reverse{
        flex-direction: column-reverse;
    }
}

@media print, screen and (max-width: 576px) {
    .w-img-column{display:flex; gap:40px; align-items: center; justify-content: center; flex-wrap:wrap; padding:20px 0 50px 0;}
    .w-img-column figure{width:65%; max-width:100%; min-width:auto;}
}


.usage-table{width:100%; margin-bottom:3em;}
.usage-table th{background:var(--strong-theme); color:var(--white); font-size:var(--f-S); font-weight:500; padding:10px 20px; text-align:left; font-family:var(--nonJost)}
.usage-table td{background:var(--border-pale-theme); color:var(--txt-color); font-size:var(--f-S); font-weight:500; padding:10px 20px; font-family:var(--nonJost)}
.usage-table.f-small th,.usage-table.f-small td{font-size:var(--f-SSS)}

.normal-table{width:100%; margin:2em 0; border:solid 1px var(--pale-gray); border-collapse: collapse;}
.normal-table th{border:solid 1px var(--pale-gray); border-collapse: collapse; text-align:center; padding:15px 20px; font-size:var(--f-S)}
.normal-table td{border:solid 1px var(--pale-gray); border-collapse: collapse; text-align:left; padding:15px 20px; font-size:var(--f-SS); vertical-align:top;}
.normal-table td ul li{font-size:var(--f-SS);}

.faq-column dl{padding:20px 0; border-top:solid 1px #ddd;}
.faq-column dl dt,.faq-column dl dd{position:relative; font-size:var(--f-S); font-weight:700; font-family:var(--nonJost); padding:10px 0 10px 60px; margin:10px 0;}
.faq-column dl dd{font-weight:500;}
.faq-column dl dd a{color:var(--strong-theme); text-decoration: underline;}
.faq-column dl dd a:hover{text-decoration:none;}
.faq-column dl dt:before{content:"Q"; color:var(--white); background:var(--strong-theme); display:block;width:40px; height:40px; border-radius:20px; font-size:var(--f-M); font-weight:600; text-align:center; line-height:40px; position:absolute; left:5px; top:0;}
.faq-column dl dd:before{content:"A"; color:var(--strong-theme); background:var(--base-pale-theme); display:block;width:40px; height:40px; border-radius:20px; font-size:var(--f-M); font-weight:600; text-align:center; line-height:40px; position:absolute; left:5px; top:0;}
.faq-column .recycle{background:#f4f6f7; padding:20px; display:flex; align-items: center; gap:15px; margin:12px 0;}
.faq-column .recycle img{width:42px;}
.faq-column .recycle p{flex:1; font-size:var(--f-S); color:var(--txt-color)}

/* 20241023 追加*/
.faq-answer {display: none; padding: 10px 0;}
.faq-question {    
    display: flex;
    justify-content: space-between; /* テキストとアイコンを左右に配置 */
    align-items: center; /* 垂直方向で中央に配置 */
    cursor: pointer;
}
.faq-question .fas {
    transition: transform 0.3s; /* 回転アニメーションを追加 */
}
.faq-item.active .faq-question .fas {
    transform: rotate(180deg); /* アクティブなときにアイコンを回転 */
}
.faq-item.active .faq-answer {display: block;}


@media print, screen and (max-width: 768px) {
    .faq-column dl{padding:10px 0;}
    .faq-column dl dt,.faq-column dl dd{padding:10px 0 10px 50px; }
    .faq-column dl dt:before{content:"Q"; width:36px; height:36px; border-radius:20px; line-height:36px; position:absolute; left:0; top:0;}
    .faq-column dl dd:before{content:"A"; width:36px; height:36px; border-radius:20px; line-height:36px; position:absolute; left:0; top:0;}
}

@media print, screen and (max-width: 576px) {
    .faq-column dl{padding:10px 0;}
    .faq-column dl dt,.faq-column dl dd{padding:8px 0 8px 45px; }
    .faq-column dl dt:before{content:"Q"; width:32px; height:32px; border-radius:20px; line-height:32px; position:absolute; left:0; top:0;}
    .faq-column dl dd:before{content:"A"; width:32px; height:32px; border-radius:20px; line-height:32px; position:absolute; left:0; top:0;}

    .faq-column .recycle{background:#f4f6f7; padding:20px; display:flex; align-items: center; gap:15px; margin:12px 0; flex-wrap:wrap; justify-content: center;}
    .faq-column .recycle img{width:42px;}
    .faq-column .recycle p{flex:1; font-size:var(--f-S); color:var(--txt-color); width:100%;}
}

.gray-block{background:#f3f5fa; padding:50px 80px; display:flex; align-items: center; gap:40px; margin:60px 0 0;}
.gray-block .myth01{width:35%;}
.gray-block .myth02{flex:1;}

@media print, screen and (max-width: 768px) {
    .gray-block{background:#f3f5fa; padding:50px 30px; display:flex; flex-wrap:wrap; justify-content: center; align-items: center; gap:40px; margin:60px 0 0; flex-direction: column;}
    .gray-block .myth01{width:60%;}
    .gray-block .myth02{width:100%;}
}

@media print, screen and (max-width: 576px) {
    .gray-block{background:#f3f5fa; padding:40px 20px; gap:40px;}
    .gray-block .myth01{width:75%;}
    .gray-block .myth02{width:100%;}
}

.free-column{width:90%; margin:0 auto; display:flex; align-items: center; position:relative;}
.free-column .txt-block{width:70%; flex:1; position:relative;}
.free-column .man-block{width:300px; margin-top:-30px; position:relative; z-index:5;}
.free-column .txt-block .blue-button {width:270px; margin:30px auto;}
.free-column .txt-block p{width:70%; margin:10px auto;}
.free-column .txt-block p.note{width:100%; }
.free-column .txt-block .icons01{width:20%; left:-4%; top:-10%; position: absolute;}
.flavours{display:flex; gap:20px;}
.free-column .fl01{position:absolute; left:-10%; top:30%; width:22%;}
.free-column .fl02{position:absolute; left:80%; top:58%; width:22%;}
.free-column .fl03{position:absolute; left:128%; top:70%; width:22%; z-index:2;}

@media print, screen and (max-width: 1024px) {
    .free-column{width:100%; padding:40px 0 0;}
    .free-column .txt-block h2 br{display:none;}
    .free-column .man-block{width:270px; margin-top:-30px; position:relative; z-index:5;}
    .free-column .txt-block p{width:100%; margin:0 auto;}
    .free-column .txt-block .icons01{width:20%; left:-2%; top:0; position: absolute;}
    .flavours{margin:20px 0 0 0;}
    .free-column .fl01{position:static; left:-10%; top:30%; width:30%;}
    .free-column .fl02{position:static; left:80%; top:58%; width:30%;}
    .free-column .fl03{position:static; left:128%; top:70%; width:30%; z-index:2;}
}

@media print, screen and (max-width: 768px) {
    .free-column{width:100%; padding:40px 0 0; align-items: end;}
    .free-column .txt-block{padding:20px 0 40px }
    .free-column .txt-block h2 br{display:none;}
    .free-column .man-block{width:200px; margin-top:0; position:relative; z-index:5;}
    .free-column .txt-block p{width:100%; margin:0 auto; }
    .free-column .txt-block .icons01{width:20%; left:-2%; top:-4%; position: absolute;}
    .flavours{margin:20px 0 0 0;}
    .free-column .fl01{position:static; left:-10%; top:30%; width:30%;}
    .free-column .fl02{position:static; left:80%; top:58%; width:30%;}
    .free-column .fl03{position:static; left:128%; top:70%; width:30%; z-index:2;}
}

@media print, screen and (max-width: 576px) {
    .free-column{width:100%; padding:40px 0 0; align-items: end;}
    .free-column .txt-block{padding:20px 0 40px; width:100%; }
    .free-column .txt-block h2 br{display:none;}
    .free-column .txt-block .blue-button {width:210px; margin:20px auto;}
    .free-column .man-block{width:150px; margin-top:0; position:relative; z-index:5;}
    .free-column .txt-block p{width:100%; margin:0 auto; }
    .free-column .txt-block .icons01{width:20%; left:-2%; top:-4%; position: absolute;}
    .flavours{margin:20px 0 0 0;}
    .free-column .fl01{position:static; left:-10%; top:30%; width:30%;}
    .free-column .fl02{position:static; left:80%; top:58%; width:30%;}
    .free-column .fl03{position:static; left:128%; top:70%; width:30%; z-index:2;}
}

@media print, screen and (max-width: 480px) {
    .free-column{width:100%; padding:40px 0 0; align-items: end;}
    .free-column .txt-block{padding:20px 0 40px; width:100%; }
    .free-column .txt-block h2 br{display:none;}
    .free-column .man-block{width:80px; margin-top:0; position:relative; z-index:5; display:none;}
    .free-column .txt-block p{width:100%; margin:0 auto; text-align:left;}
    .free-column .txt-block p br{display:none;}
    .free-column .txt-block p.note br{display:inline;}
    .free-column .txt-block .icons01{width:25%; left:-2%; top:-2%; position: absolute;}
    .flavours{margin:15px 0 0 0;}
    .free-column .fl01{position:static; left:-10%; top:30%; width:30%;}
    .free-column .fl02{position:static; left:80%; top:58%; width:30%;}
    .free-column .fl03{position:static; left:128%; top:70%; width:30%; z-index:2;}
}