@charset "utf-8";

/* ==================================================================
    index.css

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

/* --------------------------------
   □ 大枠
-------------------------------- */
/* ◇ wrapper
-------------------------------- */
.wrapper {
    align-items: inherit;
    max-width: 1500px;
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box;
}

/* ◇ mainArea
-------------------------------- */
.contents .mainArea {
    width: 82%;
    max-width: 1230px;
    padding-bottom: 50px;
}

/* ◇ subArea
-------------------------------- */
.contents .subArea {
    min-width: 270px;
    width: 18%;
    padding-bottom: 50px;
}
.contents .subArea .sub-fixed {
    /*
    position: -webkit-sticky;
    position: sticky;
    top: 110px;
    */
}
.contents .subArea .sub-fixed h3.lv3 {
    background: rgb(121,147,186);
    background: linear-gradient(90deg, rgba(121,147,186,0) 0%, rgba(121,147,186,1) 25%, rgba(121,147,186,1) 75%, rgba(121,147,186,0) 100%);
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
    padding: 11px;
    margin-bottom: 0;
}
    .contents .subArea .sub-fixed #service h3.lv3 {
        background: rgb(195,152,148);
        background: linear-gradient(90deg, rgba(195,152,148,0) 0%, rgba(195,152,148,1) 25%, rgba(195,152,148,1) 75%, rgba(195,152,148,0) 100%); 
    }
    .contents .subArea .sub-fixed h3.lv3 span {
        font-size: 1.2rem;
    }

.contents .subArea .sub-fixed h3.lv3.solid,
.contents .subArea .sub-fixed #service h3.lv3.solid{
    background: #00235f;
}

.contents .subArea .sub-fixed ul.list {
    padding: 30px;
}
.contents .subArea .sub-fixed ul.list li {
    margin-bottom: 20px;
}
    .contents .subArea .sub-fixed ul.list li dl dt {
        margin-bottom: 10px;
    }

/* --------------------------------
   □ 共通
-------------------------------- */
.contents .mainArea section.wide {
    box-sizing: border-box;
    width: 100%;
    padding: 50px 0;
    margin: 0 auto;
}

.contents .mainArea section.wide .container {
    padding: 0 50px;
    margin: 0 auto;
}

/* --------------------------------
   □ pickup
-------------------------------- */
.pickup .slickSlider{
    overflow: hidden;
}
.pickup .slickSlider{
    overflow: hidden;
}

.contents .pickup ul.list li dl dt.image img{
    aspect-ratio: 952 / 588;

}

.contents main .pickup +.pickup{
    margin-top: 10px;
}
/* --------------------------------
   □ about
-------------------------------- */
#about {
    padding-top: 0;
    overflow: hidden
}
#about p.lead-txt {
    font-size: 1.6rem;
    margin-bottom: 0;
}
#about .slickSlider{
    margin-top: 60px;
    overflow: hidden;
}
/* --------------------------------
   □ fair
-------------------------------- */
#fair {
    padding-top: 20px;
    padding-bottom: 0;
    overflow: hidden
}
#fair ul.list.col2 li {
    width: 48%;
    margin-bottom: 50px;
}

/* --------------------------------
   □ item
-------------------------------- */
#about + #item{
    padding-top: 20px;

}

#item {
    padding-bottom: 30px;
}
#item ul.list.col2 li {
    margin-bottom: 50px;
}

/* --------------------------------
   □ brand
-------------------------------- */
#brand {
    padding-top: 80px;
    padding-bottom: 100px;
}
#brand ul.list {
    gap:4% 1%;
}
#brand ul.list.col4 li {
    padding-bottom: 1em;
}
#brand ul.list li dl dd .text {
    color: #808080;
    font-size: 1.2rem;
}

/* --------------------------------
   □ category
-------------------------------- */
#category {
    padding-top: 80px;
    padding-bottom: 100px;
}
#category ul.list.col4 li {
    width: 22%;
}
#category ul.list li dl dd .ttl {
    font-size: 1.8rem;
    margin-bottom: 0;
}
#category ul.list li dl dd .text {
    color: #808080;
    font-size: 1.2rem;
}

/* --------------------------------
   □ movie
-------------------------------- */
#movie .mv_movie{
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}

#movie .mv_movie .buttonStyle{
    position: absolute;
    right: 5px;
    bottom: 20px;
}

/* --------------------------------
   □ info
-------------------------------- */
#info h3.lv3 {
    margin-bottom: 0;
}
#info .buttonStyle {
    margin-bottom: 60px;
}
    #info .buttonStyle a {
        font-size: 1.5rem;
        color: #111;
    }


@media (max-width: 1600px) and (min-width: 768px) {
    /* --------------------------------
       □ 大枠
    -------------------------------- */ 
    /* ◇ wrapper
    -------------------------------- */
    .wrapper {
        width: auto;
        margin-left: 4%;
        margin-right: 4%;
    }

    /* ◇ mainArea
    -------------------------------- */

    /* ◇ subArea
    -------------------------------- */
}


@media (max-width: 1200px) and (min-width: 768px) {

}


/* タブレット用
-------------------------------------------- */
@media (max-width: 999px) and (min-width: 768px) {
    /* --------------------------------
       □ 大枠
    -------------------------------- */
    /* ◇ wrapper
    -------------------------------- */
    .wrapper {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    /* ◇ mainArea
    -------------------------------- */

    /* ◇ subArea
    -------------------------------- */
    .contents .subArea {
        padding-bottom: 0;
    }
    .contents .subArea .sub-fixed ul.list {
        padding: 30px 8%;
    }

    /* --------------------------------
       □ 共通
    -------------------------------- */
    .contents .mainArea section.wide .container {
        padding: 0 4%;
    }

    /* --------------------------------
       □ category
    -------------------------------- */
    .contents ul.list.col4 li {
        width: 48%;
        margin-bottom: 20px;
    }
    #category ul.list li dl dd .ttl {
        margin-bottom: 0;
    }
}


@media only screen and (max-width : 767px) {
    /* --------------------------------
       □ 大枠
    -------------------------------- */
    /* ◇ mainArea
    -------------------------------- */
    .contents .mainArea {
        padding-bottom: 0;
    }

    /* ◇ subArea
    -------------------------------- */
    .contents .subArea {
        padding-bottom: 25px;
    }
    .contents .subArea section + section {
        margin-top: 15px;
    }
    .contents .subArea .sub-fixed h3.lv3 {
        padding: 15px;
        font-size: 2.3rem;
    }
        .contents .subArea .sub-fixed h3.lv3 span {
            font-size: 1.4rem;
            margin-top: 0;
        }
    .contents .subArea .sub-fixed ul.list {
        padding: 30px 4% 10px;
    }
    .contents .subArea .sub-fixed ul.list li {
        width: 48%;
    }
    .contents .subArea .sub-fixed ul.list li dl dt {
        margin-bottom: 5px;
    }

    /* --------------------------------
       □ 共通
    -------------------------------- */
    .contents .mainArea section.wide {
        padding: 50px 0;
    }
    .contents .mainArea section.wide .container {
        padding: 0;
        margin-left: 4%;
        margin-right: 4%;
    }

    /* --------------------------------
       □ fair
    -------------------------------- */
    #fair ul.list.col2 li {
        margin-bottom: 30px;
    }
    #fair ul.list li dl dt {
        margin-bottom: 5px;
    }
    #fair ul.list li dl dd .ttl {
        font-size: 1.6rem;
    }

    /* --------------------------------
       □ item
    -------------------------------- */
    #item {
        padding-bottom: 20px;
    }
    #item ul.list.col2 li {
        margin-bottom: 30px;
    }
    #item ul.list li dl dt {
        margin-bottom: 5px;
    }
    #item ul.list li dl dd .ttl {
        font-size: 1.6rem;
    }

    /* --------------------------------
       □ brand
    -------------------------------- */
    #brand {
        padding: 50px 0;
    }

    /* --------------------------------
       □ category
    -------------------------------- */
    #category {
        padding: 50px 0;
    }
    #category ul.list.col4 li {
        width: 48%;
    }
    #category ul.list li dl dd .ttl {
        font-size: 1.6rem;
        margin-bottom: 0;
    }

    /* --------------------------------
       □ movie
    -------------------------------- */
    #movie .mv_movie video{
        height: 400px;
    }

    #movie .mv_movie .buttonStyle{
        position: absolute;
        right: 25px;
        bottom: -20px;
    }
    
    /* --------------------------------
       □ info
    -------------------------------- */
    #info h3.lv3 {
        margin-bottom: 30px;
    }
    #info .buttonStyle {
        margin-bottom: 30px;
    }

}