@charset "utf-8";

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

    index.css

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


/* ◇ box
-------------------------------- */
.contents main > section{
    padding: 120px 0;
    background: #fff;
}

.contents main > section + section{
    margin-top:0;
}

.contents main > section .buttonStyle.more{
    margin-bottom: 0;
}

.contents main > section .buttonStyle.more a{
    width: 258px;
}

/* SP用
----------- */
@media only screen and
(max-width : 767px) {
    
    /* ◇ box
    -------------------------------- */
    .contents main > section{
        padding-top: 16vw;
        padding-bottom: 16vw;
    }


    .contents main > section .buttonStyle.more a{
        width: 70%;
    }

}

/* --------------------------------
■accentBox
-------------------------------- */ 

.fv_contents{
    position: relative;
    height: 200vh;
    background-color: #000;

    @media only screen and
    (max-width : 767px) {
        height: 206vh;
    }

    .fv_contents_inner{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip-path: inset(0);

        .bg{
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background:#000 url("../../images/accent/accent.jpg?d=20240920") 50% 50% no-repeat;
            background-size: cover;
            z-index: -1;

            @media only screen and
            (max-width : 767px) {
                background-image: url("../../images/accent/accent_sp.jpg");
                background-size: 100% auto;
                background-position: 50% 100%;
            }
        }
    }

    .accentBox{
        position: relative;
        width: 100%;
        height: 100vh;
    }
    .accentBox .container{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width:1200px;
        height: 100%;
        margin: 0 auto;

        @media only screen and
        (max-width : 767px) {
            max-width:95%;
            justify-content: flex-start;
            padding-top: 20vw;
        }
    }


    .accentBox .text{
        text-align: left;
        margin-top: 60px;
        margin-right: auto;
        line-height: 1.5;

        @media only screen and
        (max-width : 767px) {
            margin-left: auto;
        }
    }
    .accentBox .text.confirmed {
        clip-path: inset(0);
    }

    .accentBox .text > em,
    .accentBox .text > span{
        display: inline-block;
        color: #fff;
        font-size: 2.5rem;
        line-height: 2;
        letter-spacing: 0.2em;
        opacity: 0;
        transform: translate(20%, 0);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.9) ,  0 0 10px rgba(0, 0, 0, 0.9);

        @media only screen and
        (max-width : 767px) {
            font-size: 1.8rem;
        }

        > span{
            display: block;

            &:nth-child(2){
                text-indent: -0.5em;
            }
        }

    }

    .accentBox .text.confirmed > em,
    .accentBox .text.confirmed > span{
        opacity: 1;
        transform: translate(0, 0);
        clip-path: inset(0);
    }

    .accentBox .text.confirmed > em img,
    .accentBox .text.confirmed > span img{
        max-width: 100%;
    }

    .aboutBox{
        height: 100vh;
        min-height: 100vh;

        .container{
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            @media only screen and
            (max-width : 767px) {
                padding-bottom: 12vw;
            }

            > .flex_box{
                gap: 0 131px;
                align-items: center;
                justify-content: center;

                .title{
                    @media only screen and
                    (max-width : 767px) {
                        width: 60%;
                    }
                }
                .text{
                    color: #fff;
                    font-size: 1.6rem;
                    line-height: 2.4;
                    letter-spacing: 0.2em;

                    @media only screen and
                    (max-width : 767px) {
                        font-size: 1.4rem;
                        margin-bottom: 24px;
                    }
                }
            }
        }
        .text{
            font-size: 1.6rem;
        }
    }

}

@-webkit-keyframes accentBoxAnime {
    0% { filter: blur(4px); transform:scale(1.1);}
    100% { filter: blur(0);  transform:scale(1);}
}



/* --------------------------------
producer
-------------------------------- */ 
#producer{

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

    .container{
        padding-top: 10vh;
        padding-bottom: 10vh;
    }

    .imageBox{
        background: url("../../images/index/producer_background.jpg") 50% 50% no-repeat;
        background-size: cover;
        color: #fff;
        max-height: 100vh;
        padding: 4vh 0;

        @media only screen and
        (max-width : 767px) {
            background-size: 100% auto;
            background-position: 0 0;
            color: #000;
            padding: 0 0;
        }

        .container{
             > .title{
                color: #fff;
            }
        }

        .textBox{
            margin-left: 3%;
            max-width: 60%;
            gap: 0 120px;

            @media only screen and
            (max-width : 767px) {
                margin-left: 0;
                max-width: 100%;
                gap: 0 4vw;
                align-items: stretch;
                padding-top: 12vw;
            }

            h3{
                flex-shrink: 0;
                font-size: 2.3rem;
                line-height: 2;
                letter-spacing: 0.2em;
                font-weight: 500;

                @media only screen and
                (max-width : 767px) {
                    width: 4em;
                }

                img{
                    width: 100%;
                }
            }

            .explain{
                p.text{
                    font-size: 1.5rem;
                    line-height: 2;
                    margin-bottom: 0;
                }
                p.sign{
                    font-size: 1.5rem;
                    line-height: 1.5;
                    font-weight: 500;
                    margin-top: 38px;

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

                    > em{
                        font-size: 2.8rem;
                        font-weight: 500;
                        margin-left: 0.2em;

                        @media only screen and
                        (max-width : 767px) {
                            font-size: 2.0rem;
                        }
                    }
                }
            }

        }
    }

    .awardBox{
        position: relative;
        margin-top: -57px;

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

        .container{
            background: #1C1C1C;
            color: #fff;
            padding: 62px 110px;
            gap: 0 120px;

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

            .title{
                font-size: 2.3rem;
                line-height: 2;
                letter-spacing: 0.5em;
                font-weight: 500;
                text-align: left;
            }

            .awardList{
                margin-top: 0px;
                dl{
                    dt{
                        font-size: 1.7rem;
                        margin-bottom: 5px;
                    }
                    dd{
                        ul{
                            li{
                                font-size: 1.4rem;
                                color: #CDCDCD;
                            }
                        }
                    }

                    & + dl{
                        margin-top: 28px;
                    }
                }
            }
            
        }
    }

}

/* --------------------------------
craftmanship
-------------------------------- */ 
#craftmanship{
    padding-top: 199px;

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

    .container{
        position: relative;
        max-width: 945px;
        padding: 0 102px 122px 242px;
        background: #EEECE5;

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

        .title._lv1{
            position: relative;
            span.en{
                display: block;
                position: relative;
                top: -0.5em;
                margin-bottom: -0.5em;

                @media only screen and
                (max-width : 767px) {
                    top: 0;
                    margin-bottom: 0;
                }
            }
        }

        .image{
            position: absolute;
            margin: 0;
            z-index: 1;

            @media only screen and
            (max-width : 767px) {
                position: static;
                top: 0;
                left: 0;
                margin: 0;
                z-index: 0;
            }

            img{
                @media only screen and
                (max-width : 767px) {
                    width: 100%;
                }
            }

            &.image1{
                top: -82px;
                left: -350px;
            }
            &.image2{
                bottom: 74px;
                right: -160px;
            }
        }

        .textBox{
            padding-right: 150px;
            margin-top: 39px;

            @media only screen and
            (max-width : 767px) {
                padding-right: 0;
                margin-top: 6vw;
            }

            .title{
                font-size: 2.4rem;
                line-height: 1.8;
                font-weight: 500;
            }
            .text{
                font-size: 1.5rem;
                line-height: 2;
                margin-bottom: 0;
            }
            .more{
                margin-top: 32px;

                @media only screen and
                (max-width : 767px) {
                    margin-top: 6vw;
                    margin-bottom: 10vw;
                }
            }

        }
    }
}



/* --------------------------------
■#news
-------------------------------- */ 

#news{
    @media only screen and
    (max-width : 767px) {
        padding-top: 0;
    }
}
#news .col1{
    flex-grow: 1;
}
#news .newsBox{
    width: calc(64% - 42px);
}

#news .newsBox .newsList a{
    color: #333;
    text-decoration: none;
}

#news .newsBox .newsList li{
    border-bottom: 1px solid #A8A8A8;

    &:first-child{
         border-top: 1px solid #A8A8A8;
    }
    a{
        display: block;
        padding: 32px 42px 32px 4px;
        transition: .3s;
        background: url("../../images/common/icon/arrow.svg") 98% 50% no-repeat;


        p.state{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0 12px;

            margin-bottom: 12px;

            span.date{
                display: inline-block;
            }
            
            span.category{
                display: inline-block;
            }
        }

        > dl{

            dt{
                font-weight: 700;
            }
            dd{
                margin-top: 12px;
            }
        }

        &:hover{
            background-position: 99% 50%;
        }
    } 
} 

#news .newsBox .linkStyle{
    margin-top: 32px;
}





@media only screen and
(max-width : 767px) {
    #news{
        padding-bottom: 5vw;
    }

    #news .newsBox{
        padding-top: 12vw;
        padding-bottom: 12px;
        gap:0;
    }

    #news .newsBox .newsList{
        padding: 0 ;
    }
    #news .newsBox .newsList li + li{
        margin-top: 8px;
    }
    #news .newsBox .newsList li a > dl dt{
        flex-shrink: 0;
        font-size: 1.3rem;
    }
    #news .newsBox .newsList li a > dl dd{
        font-size: 1.4rem;
        line-height: 1.2;
    }

    #news .newsBox .linkStyle{
        margin-top: 6vw;
        text-align: center;
    }

}

	
/* --------------------------------
■#company
-------------------------------- */ 

#company{
    background: url("../../images/index/company_background.jpg") 50% 50% no-repeat;
    .container{
        padding-top: 100px;
        padding-bottom: 100px;
        color: #fff;
        gap: 0 42px;

        @media only screen and (max-width : 767px) {
            padding-top: 12vw;
            padding-bottom: 12vw;
            gap: 0;
        }

        .leadArea{
            width: 340px;
            flex-shrink: 0;

            @media only screen and (max-width : 767px) {
                width: auto;
                text-align: center;
                margin-bottom: 6vw;
            }

            img{
                max-width: 100%;
                height: auto;

                @media only screen and (max-width : 767px) {
                    width: 70%;
                    margin: 0 auto;
                }
            }
        }

        .details{
            flex-grow: 1;

            p.text{
                overflow: clip;
                font-size: 1.6rem;
                line-height: 1.8;
                font-weight: 600;

                & + p.text{
                    margin-top: 24px;
                }
            }

            .buttonStyle{
                margin-top: 32px;
                text-align: left;

                a{
                    width: 258px;
                    @media only screen and (max-width : 767px) {
                        width: 100%;
                    }
                }
            }
        }
    }
}