/**
* `/femtech/`で利用するCSS
*
*/

/*------------------------------------------------------------------------------
20250618追加改良CSS
------------------------------------------------------------------------------*/
            /* TAG AREA ------------------------------------------------------*/
            .tag-area{
                display:flex;
                /*margin:8rem 6.4rem 0;*/
                margin: 1rem;
                flex-wrap: wrap;

                /*div{

                  width:calc((100% - 3.2rem) / 3);

                    &:last-child{
                        margin-right:0;
                    }

                    h2{
                        padding-bottom:1.2rem;
                        font-size:1.8rem;
                        border-bottom:1px solid var(--gray);
                    }
                }*/

                    .tag{
                        margin:1.2rem 0 0;
                    }
            }


        /* TAG AREA ----------------------------------------------------------*/
        .tag-area{
            .tag{
                display:flex;
                /*margin: 2.4rem 2.4rem 5.5rem;*/
                flex-wrap:wrap;
                justify-content: center;


                li{
                    /*margin-right:.8rem;*/
                    font-size: 1.4rem;
                    background-color: #f8f8f8;
                    border: 1px solid #e1e1e1;
                    border-radius: 8px;
                    margin: 3px 2px;
                    padding: 2px 4px;

                    a{
                        display:flex;
                        padding:.8rem;
                        font-size:1.4rem;
                        align-items:center;

                        &::before{
                            content:'#';
                            display:block;
                            margin-right:.2rem;
                            font-size:1.3rem;
                        }
                    }
                }
            }
        }

@media screen and (min-width:960px){

            .tag-area{
                margin:10rem auto 0;
                width:80rem;

                div{
                    width:calc((100% - 2.8rem) / 3);

                    h2{
                        padding-bottom:1.5rem;
                        font-size:2.25rem;
                    }

                    .tag{
                        margin-top:1.5rem;

                        li{
                            margin-right:1rem;

                            a{
                                padding:1rem;
                                font-size:1.25rem;

                                &::before{
                                    margin-right:.25rem;
                                    font-size:1.625rem;
                                }
                            }
                        }
                    }
                }
            }
}
/* TAG LINK --------------------------------------------------------------*/
.tag{
    margin:3rem 0;
    }
    
        .list-category{
        
            li{
            
                &:nth-child(2n+2){
                }
                
                a{
                
                    &::before{
                    }
                    
                    &.beauty::before{
                    }
                    
                    &.diet::before{
                    }
                    
                    &.tableware::before{
                    }
                    
                    &.kitchen::before{
                    }
                }
            }
        }


   .ltop-slider a {
        max-width: 600px;
        max-height: 300px;
        display: contents;
    }

   .ltop-slider img {
        max-width: 600px;
        max-height: 300px;
    }

   .ltop-slider {
        overflow-x: scroll;
        display: flex;
    }

    ul.rank_femu {
        display: flex;
        padding: 0;
        /*justify-content: center;*/
        overflow-x: scroll;
        /*max-width: 800px;*/
        margin: auto;

    }
    ul.rank_femu li img {
        border-radius: 10px;
    }
    ul.rank_femu li p {
        background: #fff;
        padding: 10px 5px;
        max-width: 100%;
        text-align: center;
        margin: 5px auto;
        font-size: 12px;
        color: #6c6363;
        border-radius: 10px;
    }
    ul.rank_femu li {
        position: relative;
        width: 50%;
        min-width: 200px;
        max-width: 240px;
        padding: 10px;
        background-color: #dcf0f5;
        border-radius: 10px;
        justify-content: center;
        margin: 0 10px;
    }
    ul.rank_femu li::after {
      font-family: "Font Awesome 5 Free";
      content: "\f521";
      font-weight: 900;
      position: absolute;
      top: 0px; /* 王冠の位置（縦軸） */
      left: 0px; /* 王冠の位置（横軸） */
      font-size: 50px; /* 王冠の大きさ */
      color: #ffdedd;
     }
    li.rank00_femu ::before {
    content: "注目";
    position: absolute;
    top: 16px;
    left: 10px;
    font-size: 20px;
    color: #d0140e;
    z-index: 10;
    }
    li.rank01_femu ::before {
    content: "1";
    position: absolute;
    top: 16px;
    left: 25px;
    font-size: 20px;
    color: #d0140e;
    z-index: 10;
    }
    li.rank02_femu ::before {
    content: "2";
    position: absolute;
    top: 16px;
    left: 25px;
    font-size: 20px;
    color: #d0140e;
    z-index: 10;
    }
    li.rank03_femu ::before {
    content: "3";
    position: absolute;
    top: 16px;
    left: 25px;
    font-size: 20px;
    color: #d0140e;
    z-index: 10;
    }
    li.rank04_femu ::before {
    content: "4";
    position: absolute;
    top: 16px;
    left: 25px;
    font-size: 20px;
    color: #d0140e;
    z-index: 10;
    }
    li.rank05_femu ::before {
    content: "5";
    position: absolute;
    top: 16px;
    left: 25px;
    font-size: 20px;
    color: #d0140e;
    z-index: 10;
    }
    ul.rank_femu li::marker {
        content: none;
    }

    ul.head_menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-color: #39a8c6;
        max-width: 1000px;
        margin: auto;
    }

    ul.head_menu li {
        width: 33%;
        text-align: center;
        background-color: #39a8c6;
        border-right: 1px solid #4db9d6;
    }
    ul.head_menu li p {
        font-size: 16px;
        color: #fff;
    }

    ul.head_menu li::marker {
        content: none;
    }
    ul.sentakulist {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    ul.sentakulist li {
        width: 30%;
        max-width: 400px;
    }

    ul.sentakulist li p {
        margin: 0 10px 5px;
        text-align: center;
        color: #6c6363;
        font-size: 14px;
    }
    ul.sentakulist li::marker {
        content: none;
    }

    ul.sentakulist li img {
        border-radius: 10px;
    }
    .sentaku-box {
        border: 1px solid #ccc;
        border-radius: 10px;
        margin: 5px;
    }
    .sentaku-box p {
        color: #6c6363;
        font-size: 16px;
    }

/*------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------
>>> TABLE OF CONTENTS:
--------------------------------------------------------------------------------
1.0.0.0 INITIALIZE STYLE
    1.1.0.0 HERO IMAGE
2.0.0.0 WIDTH 768px or OVER
    2.1.0.0 HERO IMAGE
3.0.0.0 WIDTH 960px or OVER
    3.1.0.0 HERO IMAGE
4.0.0.0 WIDTH 1024px or OVER
    4.1.0.0 HERO IMAGE
------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------
// 1.0.0.0 INITIALIZE STYLE
------------------------------------------------------------------------------*/
section{
    margin-top:4.8rem;

    h2{
        margin:0 2.4rem 2rem;
        font-size:20px;
        font-weight:500;
        text-align: center;
        color: #6c6363;
        margin: 20px auto;

        &+p{
            margin:.8rem 2.4rem;
            font-size:1.1rem;
        }
    }
}


/*--------------------------------------1.1.0.0 -------------------HERO IMAGE */
.hero-image{
    position:relative;
    width:100vw;

    video{
        width:calc((80vh / 9) * 16);
        height:80vh;
        transform:translateX(-50%);
    }

    .hero-message{
        position:absolute;
        top:50%;
        left:50%;
        width:calc(100% - 12rem);
        transform:translate(-50%,-50%);
        
        svg{
            filter:drop-shadow(0px 3px 5px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 3px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 2px rgba(255, 255, 255, 1));
            transform:translate3d(0, 0, 0);

            #mes1{
                transform:translateY(100%);
                animation:smoothin .5s 0s ease-in forwards;
            }

            #mes2{
                transform:translateY(100%);
                animation:smoothin .5s .1s ease-in forwards;
            }

            #mes3{
                transform:translateY(100%);
                animation:smoothin .5s 1s ease-in forwards;
            }

            #mes4{
                transform:translateY(100%);
                animation:smoothin .5s 1.1s ease-in forwards;
            }
        }
    }
}

@keyframes smoothin{
      0%{
        transform:translateY(100%)
    }
    100%{
        transform:translateY(0)
    }
}        

#slider{
    position:relative;

    ul{
        display:grid;
        margin:0 .8rem;
        grid-gap:.8rem;
        /* grid-template-columns:repeat(auto-fill, calc((100vw - 56px) / 6)); */
        grid-template-columns:repeat(auto-fill, calc((100vw - 56px) / 8));

        li{
            grid-column:span 2;
            grid-row:span 1;

            &:nth-child(1){
                grid-column:1/5;
                grid-row:1/3;
            }

            &:nth-child(2){
                grid-column:5/9;
                grid-row:1/2;
            }

            &:nth-child(3){
                grid-column:5/9;
                grid-row:2/3;
            }

            &:nth-child(4){
                grid-column:1/9;
                grid-row:3/4;
            }
        }
    }

    .indicator{
        display:none;
    }

    .left,
    .right{
        display:none;
    }
}


/*------------------------------------------------------------------------------
// 2.0.0.0 WIDTH 667px or OVER
------------------------------------------------------------------------------*/
@media screen and (min-width:667px){
/* @media screen and (min-width:768px){ */
    /*----------------------------------2.1.0.0 -------------------HERO IMAGE */
    .hero-image{
        video{
            width:100vw;
            height:calc(6.25vw * 9);
            transform:none;
        }
    
        .hero-message{
            width:calc(100% - 48rem);
            transform:translate(-100%,-50%);
        }
    }

    #slider{
        overflow:hidden;
        /* padding:0 .8rem; */
        padding:0;

        ul{
            display:flex;
            margin:0;
            grid-gap:1.6rem;
        
            li{
                /* margin-right:1.6rem; */
                min-width:50vw;
                transform:translateX(calc(27vw * -1));

                a{
                    width:100%;
                }
                img{
                    width:100%;
                }
            }
        }

        .indicator{
            display:flex;
            margin-top:1.6rem;
            justify-content:center;

            div{
                margin:.8rem;
                width:1rem;
                height:1rem;
                border-radius:50%;
                background:var(--gray);

                &.current{
                    background:var(--accent);
                }
            }
        }

        .left,
        .right{
            position:absolute;
            top:calc(25vw - 2.5rem);
            display:flex;
            width:5rem;
            height:5rem;
            border-radius:50%;
            background:var(--black);
            align-items:center;
            justify-content:center;
            
            &::before{
                font-family:'Material Symbols Outlined';
                font-variation-settings:'fill' 1, 'wght' 700, 'GRAD' 0;
                font-size:4.8rem;
                color:var(--back);
            }

            &.left{
                left:1.6rem;
                &::before{
                    content:'chevron_left';
                    padding-right:.4rem;
                }
            }

            &.right{
                right:1.6rem;

                &::before{
                    content:'chevron_right';
                    padding-left:.4rem;
                }
            }
        }
    }
}


/*------------------------------------------------------------------------------
// 3.0.0.0 WIDTH 960px or OVER
------------------------------------------------------------------------------*/
@media screen and (min-width:960px){
    section{
        h2{
            margin:0 auto;
            width:93.75vw;
            font-size:3rem;
            margin-bottom: 2rem;

            &+p{
                margin:.8rem auto;
                width:93.75vw;
                font-size:1.4rem;
            }
        }
    }

    .hero-image{
        video{
            width:100vw;
            height:calc(6.25vw * 9);
            transform:none;
        }
    
    /*----------------------------------3.1.0.0 -------------------HERO IMAGE */
    .hero-message{
            width:40vw;
        }
    }

    #slider{
        overflow:hidden;
        padding:0;

        ul{
            display:flex;
            margin:0;
            grid-gap:1.6rem;
        
            li{
                /* margin-right:1.6rem; */
                /* 960のとき300
                31.25vw */
                /* min-width:300rem; */
                min-width:40vw;
                transform:translateX(calc((40vw - ((100vw - (40vw + 3.2rem)) / 2)) * -1));
                

                a{
                    width:100%;
                }
                img{
                    width:100%;
                }
            }
        }

        .left,
        .right{
            top:calc((40vw / 16 * 9 / 2) - 2.5rem);
        }
    }
}


/*------------------------------------------------------------------------------
// 4.0.0.0 WIDTH 1024px or OVER
------------------------------------------------------------------------------*/
@media screen and (min-width:1024px){
    section{
        margin-top:4.8rem;
    
        h2{
            width:96rem;
        
            &+p{
                width:96rem;
            }
        }
    }
}