@charset "utf-8";

/* ==================================================================
    lineup.css

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

/* -----------------------------------------
       □ lineup
----------------------------------------- */


/* --------------------------------
   □ accentarea
-------------------------------- */

.contents .accentarea{
    box-sizing:border-box;
    display: table;
    background: url("../../images/lineup/tshirt.png") 50% 20% no-repeat #dadada;
    width: 100%;
    height: 300px;
}

    .contents .accentarea.t_shirt{
        background: url("../../images/lineup/tshirt.png") 50% 20% no-repeat #dadada;
        background-size: 100%;

    }
    .contents .accentarea.polo{
        background: url("../../images/lineup/polo.png") 50% -5% no-repeat #dadada;
        background-size: 30%;
    }
    .contents .accentarea.bag{
        background: url("../../images/lineup/bag.png") 50% 40% no-repeat #dadada;
        background-size: 30%;
    }
    .contents .accentarea.active_wear{
        background: url("../../images/lineup/sports.png") 50% -5% no-repeat #dadada;
        background-size: 30%;
    }
    .contents .accentarea.long_sleeve{
        background: url("../../images/lineup/longsleeve.png") 50% -5% no-repeat #dadada;
        background-size: 35%;
    }
    .contents .accentarea.sweat{
        background: url("../../images/lineup/sweat.png") 50% -5% no-repeat #dadada;
        background-size: 28%;
    }
    .contents .accentarea.parker{
        background: url("../../images/lineup/parka.png") 50% -5% no-repeat #dadada;
        background-size: 30%;
    }
    .contents .accentarea.blouson{
        background: url("../../images/lineup/blouson.png") 50% 5% no-repeat #dadada;
        background-size: 35%;
    }
    .contents .accentarea.girls{
        background: url("../../images/lineup/girls.png") 50% -5% no-repeat #dadada;
        background-size: 30%;
    }
    .contents .accentarea.kids{
        background: url("../../images/lineup/baby.png") 50% 10% no-repeat #dadada;
        background-size: 40%;
    }
    .contents .accentarea.y_shirts{
        background: url("../../images/lineup/shirt.png") 50% 0% no-repeat #dadada;
        background-size: 35%;
    }
    .contents .accentarea.tsunagi{
        background: url("../../images/lineup/tether.png") 50% -5% no-repeat #dadada;
        background-size: 40%;
    }
    .contents .accentarea.happi{
        background: url("../../images/lineup/happi.png") 50% 20% no-repeat #dadada;
        background-size: 30%;
    }
    .contents .accentarea.cap{
        background: url("../../images/lineup/cap.png") 50% 40% no-repeat #dadada;
        background-size: 20%;
    }
    .contents .accentarea.other{
        background: url("../../images/lineup/other.png") 50% 40% no-repeat #dadada;
        background-size: 17%;
    }

.contents .accentarea h2{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    text-shadow: 1px 2px 3px #808080;
}


/* --------------------------------
   ■　カテゴリ一覧用
-------------------------------- */

#category{
    padding-top: 40px;
}

#category h2.title{
    text-align: center;
    border-bottom: none;
    font-size: 175%; /*28px*/
    font-weight: 700;
}
    #category h2.title span.inline{
        display: inline-block;
    }
#category h2.title small{
    font-size: 47%;
    display:inline-block;
    margin-bottom: 10px;
    position: relative;
    padding: 0 27px;
}
    #category h2.title small:before,
    #category h2.title small:after{
        content: '';
        position: absolute;
        top: 50%;
        display: inline-block;
        width: 23px;
        height: 2px;
        background-color: #444;
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }
    #category h2.title small:before{
        left:0;
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    #category h2.title small:after{
        right: 0;
    }
    #category h2.title span.marker{
        background: linear-gradient(transparent 60%, #FCF069 60%);
    }
    #category h2.title span.en{
        display: block;
        font-size: 47%;
        margin-top: 15px;
    }


#category ul.items{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 40px 68px;
}
    #category ul.items > li{
        width: 148px;
        text-align: center;
    }

        #category ul.items > li a{
            display: block;
            color: #444;
        }
            #category ul.items > li a:hover{
                text-decoration: none;
                color: #959595;
            }
        #category ul.items > li img{
            width: 148px;
            height: 148px;
            display: block;
            margin: auto auto 20px auto;
        }
            #category ul.items > li img:hover{
                opacity: 0.7;
            }

/* --------------------------------
   □ #category_top
-------------------------------- */

#category_top .category h3{
    font-size: 175%; /*28*/
    font-weight: 700;
    line-height: 2em;
    margin-top: 80px;
    margin-bottom: 20px;
    text-align: center;
    background: #fff;
}

/* --------------------------------
   □ #item_list
-------------------------------- */

#item_list .lineuplist h3{
    font-size: 150%; /*24*/
    font-weight: 500;
    line-height: 2em;
    margin-bottom: 50px;
    text-align: center;
    background: #fff;
}

#item_list .more p.buttonStyle a{
    width: 23%;
}

/* --------------------------------
   □ #category_bottom
-------------------------------- */

#category_bottom{
    background: #EBEBEB;
    padding-bottom: 25px;
    padding-top: 0;
    margin-top: 100px;

}

#category_bottom h3{
    font-size: 125%; /*20*/
    font-weight: 700;
    color: #fff;
    background: #145BD4;
    line-height: 2.5em;
    margin-bottom: 30px;
    text-align: center;
}

    /* -----------------------------------------
       □ detail
    ----------------------------------------- */
.details .cvArea ul{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background:rgba(0,0,0,0.23);
    padding: 10px;
}
.details .cvArea ul li a{
    max-width: 95%;
}

/* --------------------------------
   □ item-area
-------------------------------- */

.details .item-area{
    margin-bottom: 40px;
}

.details .item-area .detailsimages{
    float: left;
    width: 50%;
    position: relative;
    text-align: center;
    height: 470px;
}

.details .item-area .detailsimages .zoom{
}

.details .item-area .detailsimages ul.mainimg li{
    position: relative;
    height: 470px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.details .item-area .detailsimages ul.mainimg li a{
    display:inline-block;
}
.details .item-area .detailsimages ul.mainimg li a.h100{
    display:flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.details .item-area .detailsimages ul.mainimg li img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
}
.details .item-area .detailsimages ul.mainimg li:before{
    margin: 0;
    position: absolute;
    bottom: 15px;
    right: 15px;
    content: "";
    background: url("../../images/lineup/details/zoom.png") 50% 50% no-repeat;
    background-size: 100% auto;
    width: 35px;
    height: 35px;
    z-index: 10;
    cursor: pointer;
    pointer-events: none;
}



.details .item-area .detailsimages .img-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.details .item-area .detailsimages .img-list li{
    box-sizing: border-box;
    margin-bottom: 10px;
    width: 120px;
    border: solid 2px #DDDDDD;
    text-align: center;
    margin-left: 5px;
}
.details .item-area .detailsimages .img-list li img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
}

.details .item-area .detailsimages .img-list li a{
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    cursor: pointer;
    transition: 0.5s;
}
.details .item-area .detailsimages .img-list li a:hover{
    opacity: 0.6;
}


/*
.details .item-area .detailsimages{
    display: inline;
    float: left;
    width: 47%;
    position: relative;
    text-align: center;
    border: 1px solid green;
}

.details .item-area .detailsimages .img-list li a{
    box-sizing: border-box;
    width: 22%;
    padding: 5px;
    float: left;
    display: inline;
    margin-left: 3%;
    margin-bottom: 3%;
    border: solid 2px #DDDDDD;
    text-align: center;
    cursor: pointer;
}
*/


.details .item-area .description{
    box-sizing: border-box;
    display: inline;
    float: right;
    width: 45%;
    margin-left: 5%;
    margin-bottom: 30px;
    min-height: 660px;
}

.details .item-area .description h2.name{
    font-size: 175%;
    font-weight: 700;
    line-height: 1.2em;
    border-bottom: none;
    margin-bottom: 0;
}

.details .item-area .description .number{
    font-size: 100%;
}

.details .item-area .description .price + .price{
    margin-bottom: 0.8em;
}
.details .item-area .description .price{
    font-weight: 700;
    margin-bottom: 4px
}

.details .item-area .description .price em{
    font-size: 260%;
    font-weight: 700;
    color: #DF2C2C;
}

.details .item-area .description .price span.tax{
    font-size: 100%;
}

.details .item-area .description .btnarea{
    margin: 30px auto;
}

.details .item-area .description ul.btn{
    margin: 30px auto;
}

.details .item-area .description ul.btn li a{
    margin-bottom: 10px;
    width: 100%;
}

.details .item-area .description table.tableStyle{
    margin: 30px 0;
}

.details .item-area .description table.tableStyle.price th{
    background: #FFF0F0;
    color: #F72F2A;
}

.details .item-area .description table.tableStyle th{
    width: 100px;
}

.details .share{
    clear: both;
    margin-top: 10px;
    margin-bottom: 80px;
    text-align: center;
}
.details .share dt{
    padding: 10px;
}
.details .share dl dd ul li{
    display: inline-block;
    margin-right: 10px;
}

.details p.stock{
    clear: both;
}


/* --------------------------------
   □ #subsection
-------------------------------- */

.details .subsection{
    padding: 80px 0;
    margin-bottom: 0;
    border-bottom: 2px solid #DDDDDD;
}

.details .subsection:last-child{
    border-bottom: none;
}

.details .bordertop{
    border-top: 2px solid #DDDDDD;
}

.details .subsection table{
    width: 100%;
    margin-bottom: 20px;
    table-layout: fixed;
}
.details .subsection table.tableStyle th{
    width: auto;
    padding: 15px 0px;
}
.details .subsection table td{
    text-align: center;
    padding: 15px 0px;
}

.details .subsection table td.gray{
    background: #808080;
    color: #fff;
    border-left: 2px solid #DDDDDD;
}

.details .subsection p.image,
.details .subsection p.caution{
    text-align: center;
}

.details .subsection .sizearea{
    overflow: hidden;
    margin-bottom: 50px;
}

.details .subsection .btnarea{
    clear: both;
}

.details .subsection .btnarea ul.btn li a{
    box-sizing: border-box;
    width: 32%;
    float: left;
    margin-right: 2%;
}

/* -----------------------------------------
   □ 簡易料金シミュレーションコメントアウト時調節ここから
----------------------------------------- */

.details .subsection .btnarea ul.btn.simuCO{
    text-align:center;
}

.details .subsection .btnarea ul.btn.simuCO li{
    display:inline-block;
    width: 32%;
    margin-right: 2%;
}

.details .subsection .btnarea ul.btn.simuCO li a{
   width: 100%;
   float: none;
}

@media only screen and
(max-width : 767px) {

    .details .subsection .btnarea ul.btn.simuCO li{
        width: 48%;
        box-sizing: border-box;
        float: left;
        line-height: 1.2em;
        margin-right: 4%;
    }
        .details .subsection .btnarea ul.btn.simuCO li:last-child{
            margin-right: 0;
        }
}

/* -----------------------------------------
   □ ここまで
----------------------------------------- */


.details .subsection .btnarea ul.btn li.simulation a {
    margin-right: 0;
}
.details .subsection .production{
    position: relative;
    padding-bottom: 40px;
    overflow: hidden;
}

.details .subsection .production .swiper-slide a{
    display: block;
    color: #333;
    text-align: center;
}
.details .subsection .production .swiper-slide a span{
    display: block;
    text-align: center;
    margin-top: 15px;
    line-height: 1.4;
}

.details .subsection .production .swiper-slide a img{
    max-width: 100%;
}

.details .subsection .production .product_list li{
    width: 32%;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
}

.details .subsection .production .product_list li:last-child{
    margin-right: 0;
}

.details .subsection .production .product_list li img{
    width: 100%;
}

.details .subsection .production .product_list li span{
    display: block;
    text-align: center;
    margin-top: 15px;
}

/* --------------------------------
   □ #subsection
-------------------------------- */

.details .relation{
    position: relative;
    overflow: hidden;
    padding: 10px 0;
}

.relation .swiper-button-next,
.relation .swiper-button-prev {
    z-index: 100!important;
    top: 50%;
}

.relation .swiper-button-next.swiper-button-disabled,
.relation .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

    .details .relation .swiper-wrapper .swiper-slide{
        width: 340px;
        min-height: 659px;
        box-sizing: border-box;
        z-index: 0;
    }
    .details .relation .swiper-wrapper .swiper-slide a{
        display: block;
        box-sizing: border-box;
        height: 100%;
        padding: 30px 20px 30px 20px;
        color: #444;
        background: #F5F5F5;
    }
    .details .relation .swiper-wrapper .swiper-slide a:hover{
        text-decoration: none;
        background-color: #dadada;
    }
    .details .relation .swiper-wrapper .swiper-slide:last-child{
        margin-right: 0;
    }

    .details .relation .swiper-wrapper .swiper-slide dl dt{
        margin: 0 auto;
        margin-bottom: 20px;
        background-color: #FFF;
        width: 300px;
        height: 300px;
        align-items: center;
        display: flex;
        justify-content: center;
    }
        .details .relation .swiper-wrapper .swiper-slide dl dt img{
            max-width: 100%;
            max-height: 100%;
            margin: 0 auto;
        }
    .details .relation .swiper-wrapper .swiper-slide dl dd p{
        margin-bottom: 10px;
    }
        .details .relation .swiper-wrapper .swiper-slide dl dd p.name{
            font-size: 113%;
            font-weight: 700;
            margin-top: 10px;
        }
        .details .relation .swiper-wrapper .swiper-slide dl dd p.makerprice{
            font-size: 82%;
            margin-bottom: 4px;
        }
        .details .relation .swiper-wrapper .swiper-slide dl dd p.price{
            font-size: 82%;
            color: #DF2C2C;
            margin-bottom: 0;
            font-weight: 700;
        }
        .details .relation .swiper-wrapper .swiper-slide dl dd p.price em{
            font-size: 250%;
            color: #DF2C2C;
        }
        .details .relation .swiper-wrapper .swiper-slide dl dd p.number{
            font-size: 82%;
        }
    .details .relation .swiper-wrapper .swiper-slide dl dd ul.spec {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap:5px;
        margin-bottom: 8px;
    }
    .details .relation .swiper-wrapper .swiper-slide dl dd ul.spec li{
        display: inline-block;
        padding: 3px 15px;
        border: 1px solid #D4D4D4;
        background-color: #FFF;
        font-size: 82%;
    }
    .details .relation .swiper-wrapper .swiper-slide dl dd p.text{
        margin-bottom: 0;
    }


/*
   スマホ
------------------------------------------------------------------------------------------------ */
@media only screen and
(max-width : 767px) {

    /* -----------------------------------------
       □ lineup
    ----------------------------------------- */

     main .chapter.wide {
        margin-top: 50px;
    }

    /* --------------------------------
       □ accentarea
    -------------------------------- */

    .contents .accentarea{
        height: 150px;
        width: 104%;
        background-size: 100%!important;
    }
        .contents .accentarea.cap{
            background: url("../../images/lineup/cap.png") 50% 40% no-repeat #dadada;
            background-size: 60%!important;
        }
        .contents .accentarea.other{
            background: url("../../images/lineup/other.png") 50% 40% no-repeat #dadada;
            background-size: 50%!important;
        }

    .contents .accentarea h2{
        font-size: 24px;
    }

    /* --------------------------------
       ■ #category
    -------------------------------- */

    #category h2.title{
        font-size: 150%; /*24px*/
        padding-bottom: 30px;
    }
        #category h2.title span.marker {
            font-size: 100%; /*24px*/
            margin-bottom: 5px;
        }
        #category h2.title small,
        #category h2.title span.en{
            font-size: 63%; /*15px*/
        }

    #category ul.items{
        gap: 3%;
    }
    #category ul.items > li{
        width: 31%;
        font-size: 88%;
        font-weight: 400;
        line-height: 1.2;
        margin-bottom: 20px;
    }
        #category ul.items li img{
            width: 100%;
            height: auto;
            display: block;
            margin: auto auto 10px auto;
        }


    /* --------------------------------
       □ #category_top
    -------------------------------- */

    #category_top {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    #category_top .category h3{
        font-size: 150%; /*24*/
        margin-top: 25px;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* --------------------------------
       □ #item_list
    -------------------------------- */
    #item_list{
        margin-bottom: 50px;
    }

    #item_list .lineuplist h3{
        font-size: 113%; /*18*/
        margin-bottom: 20px;
    }
    #item_list .more p.buttonStyle{
        margin-bottom: 0;
    }
    #item_list .more p.buttonStyle a {
        width: 50%;
        margin-top: 0;
    }

    /* --------------------------------
       □ #category_bottom
    -------------------------------- */

    #category_bottom {
        margin-top: 20px;
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    #category_bottom h3 {
        font-size: 113%; /*18*/
        margin-bottom: 10px;
        padding-bottom: 0;
    }

    /* -----------------------------------------
       □ detail
    ----------------------------------------- */

    .bx-wrapper .bx-controls-direction a {
        zoom: 0.7;
    }
        .bx-wrapper .bx-prev {
            left:0;
        }

        .bx-wrapper .bx-next {
            right:0;
        }

    /* --------------------------------
           □ item-area
    -------------------------------- */

    .details .item-area {
        margin-bottom: 0;
    }

    .details .item-area .detailsimages{
        display: block;
        float: none;
        width: 100%;
        height: auto;
    }

        .details .item-area .detailsimages ul.mainimg li{
            height: 89.428571428vw;
        }

        .details .item-area .detailsimages ul.img-list li{
            float: left;
            width: 22%;
        }
        .details .item-area .detailsimages .img-list li a {
            height: 22vw;
        }

    .details .item-area .bx-wrapper {
        position: relative;
        margin: 0 auto 5vw auto;
    }

    .details .item-area .description {
        float: none;
        width: 100%;
        margin-bottom: 20px;
        min-height: inherit;
    }
        .details .item-area .description h2.name {
            font-size: 150%; /*24px*/

            padding-bottom: 0;
        }

        .details .item-area .description .number {
            font-size: 88%; /*14px*/
            margin-top: 10px;
        }

        .details .item-area .description .price em {
            font-size: 150%; /*24px*/
        }

        .details .item-area .description ul.btn {
            margin: 10px auto;
        }

        .details .item-area .description table.tableStyle th {
            width: 4em;
        }

        .details .share dt{
            font-size: 88%;
        }


    /* --------------------------------
           □ subsection
    -------------------------------- */

    .details .subsection {
        padding: 30px 0 20px 0;
    }

        .details .subsection .sizearea{
            margin-bottom: 0;
        }

        .details .subsection .sizearea .buttonStyle.blue a {
            margin: 0;
        }

        .details .subsection .btnarea ul.btn li a{
            width: 100%;
            margin: 10px auto;
        }

        .details .subsection .production ul.product_list {
            display: inline-flex;
            justify-content: space-between;
        }
        .details .subsection .production ul.product_list li{
            width: 30%;
            margin: 10px auto;
        }

        .details .subsection iframe{
            width: 100%;
            height: auto;
        }

        .details .subsection .scroll table{
            width: auto;
            min-width: 100%;
        }
            .details .subsection table.tableStyle th{
                padding: 15px 10px;
                white-space: nowrap;
            }
            .details .subsection .scroll table td{
                  padding: 15px 10px;
            }

    /* --------------------------------
           □ ボタン
    -------------------------------- */

        .details ul.btn {
            width: 100%;
        }

            .details  ul.btn li.buttonStyle.orange,
            .details  ul.btn li.buttonStyle.black{
                width: 48%;
                box-sizing: border-box;
                float: left;
                line-height: 1.2em;
                margin-right: 4%;
            }

            .details ul.btn li.buttonStyle.orange a{
                padding: 10px 5px 10px 0;
            }

            .details ul.btn li.buttonStyle.black a{
                padding: 20px 5px 19px 0;
            }

            .details ul.btn li.buttonStyle.black{
                margin-right: 0;
            }

            .details ul.btn li.buttonStyle.simulation{
                clear: both;
                width: 100%;
            }


}