@charset "utf-8";

/* ttl
----------------------------------------------------------------------------- */
.title-bg{
    background-image:url("../images/bg_ttl.png");
}

.uniform-tsumeeri .title-bg{
    background-image:url("../images/bg_ttl_tsumeeri.png");
}
.uniform-sailor .title-bg{
    background-image:url("../images/bg_ttl_sailor.png");
}
.uniform-juniorhighschool .title-bg{
    background-image:url("../images/bg_ttl_juniorhighschool.png");
}
.uniform-highschool .title-bg{
    background-image:url("../images/bg_ttl_highschool.png");
}
.uniform-swimwear .title-bg{
    background-image:url("../images/bg_ttl_swimwear.png");
}
.uniform-primaryschool .title-bg{
    background-image:url("../images/bg_ttl_primaryschool.png");
}

/* point
----------------------------------------------------------------------------- */

/* img */
.box-uniform-point-img{
    background-image:url("/uniform/images/bg_point_img.png");
    background-repeat:no-repeat;
    background-position:top center;
    height:390px;
    text-align:center;
    position:relative;
}
@media screen and (max-width:1000px){
    .box-uniform-point-img{
        width:280px;
        margin:0 auto;
        background-size:100% auto;
        height:250px;
    }
    .box-uniform-point-img img{
        width:auto;
        height:225px;
    }
}

/* img - btn */
.box-uniform-point-img ul{
    
}
.box-uniform-point-img ul li{
    position:absolute;
}
.box-uniform-point-img ul li button{
    border:none;
    background-color:transparent;
}

.uniform-tsumeeri .box-uniform-point-img ul li:nth-child(1){
    top:50px;
    left:130px;
}
.uniform-tsumeeri .box-uniform-point-img ul li:nth-child(2){
    top:40px;
    left:190px;
}
.uniform-tsumeeri .box-uniform-point-img ul li:nth-child(3){
    top:120px;
    left:120px;
}
.uniform-tsumeeri .box-uniform-point-img ul li:nth-child(4){
    top:150px;
    left:250px;
}
.uniform-tsumeeri .box-uniform-point-img ul li:nth-child(5){
    top:230px;
    left:80px;
}
.uniform-tsumeeri .box-uniform-point-img ul li:nth-child(6){
    top:250px;
    left:160px;
}
.uniform-tsumeeri .box-uniform-point-img ul li:nth-child(7){
    top:320px;
    left:250px;
}
.uniform-sailor .box-uniform-point-img ul li:nth-child(1){
    top:50px;
    left:130px;
}
.uniform-sailor .box-uniform-point-img ul li:nth-child(2){
    top:45px;
    left:240px;
}
.uniform-sailor .box-uniform-point-img ul li:nth-child(3){
    top:110px;
    left:150px;
}
.uniform-sailor .box-uniform-point-img ul li:nth-child(4){
    top:165px;
    left:190px;
}
.uniform-sailor .box-uniform-point-img ul li:nth-child(5){
    top:230px;
    left:270px;
}

@media screen and (max-width:1000px){
    .box-uniform-point-img ul li button img{
        width:34px;
        height:auto;
    }
    
    .uniform-tsumeeri .box-uniform-point-img ul li:nth-child(1){
        top:30px;
        left:65px;
    }
    .uniform-tsumeeri .box-uniform-point-img ul li:nth-child(2){
        top:25px;
        left:100px;
    }
    .uniform-tsumeeri .box-uniform-point-img ul li:nth-child(3){
        top:75px;
        left:60px;
    }
    .uniform-tsumeeri .box-uniform-point-img ul li:nth-child(4){
        top:88px;
        left:143px;
    }
    .uniform-tsumeeri .box-uniform-point-img ul li:nth-child(5){
        top:130px;
        left:45px;
    }
    .uniform-tsumeeri .box-uniform-point-img ul li:nth-child(6){
        top:145px;
        left:90px;
    }
    .uniform-tsumeeri .box-uniform-point-img ul li:nth-child(7){
        top:185px;
        left:145px;
    }
    .uniform-sailor .box-uniform-point-img ul li:nth-child(1){
        top:30px;
        left:75px;
    }
    .uniform-sailor .box-uniform-point-img ul li:nth-child(2){
        top:30px;
        left:140px;
    }
    .uniform-sailor .box-uniform-point-img ul li:nth-child(3){
        top:63px;
        left:90px;
    }
    .uniform-sailor .box-uniform-point-img ul li:nth-child(4){
        top:95px;
        left:110px;
    }
    .uniform-sailor .box-uniform-point-img ul li:nth-child(5){
        top:125px;
        left:150px;
    }
}

/* txt */
.box-uniform-point-txt{
    background-image:url("/uniform/images/bg_point_txt.png");
    background-repeat:no-repeat;
    background-position:top center;
    height:390px;
    padding:60px 35px 30px;
}
@media screen and (max-width:1000px){
    .box-uniform-point-txt{
        width:280px;
        margin:0 auto;
        background-size:100% auto;
        height:226px;
        overflow-y:auto;
        padding:30px 15px 30px;
    }
}

/* txt - 切り替えボックス */
.box-uniform-point-txt-content{
    
}
.box-uniform-point-txt-content:not(:first-child){
    display:none;
}
.box-uniform-point-txt-content ol li{
    padding-bottom:10px;
}
.box-uniform-point-txt-content ol li h2{
    font-size:18px;
    color:#16408c;
    font-weight:bold;
}
.box-uniform-point-txt-content ol li h2 span{
    font-size:20px;
    font-family:'Dancing Script', cursive;
    padding-right:5px;
}
.box-uniform-point-txt-content ol li p{
    padding-left:25px;
    margin-bottom:10px;
}
@media screen and (max-width:1000px){
    
    .box-uniform-point-txt-content ol li p{
        padding-left:0;
        margin-bottom:5px;
    }
}

/* product
----------------------------------------------------------------------------- */
.box-uniform-product{
    display:table;
    width:100%;
    margin:0 0 50px;
}
.box-uniform-product-img,
.box-uniform-product-txt{
    display:table-cell;
    vertical-align:top;
}
@media screen and (max-width:1000px){
    .box-uniform-product{
        display:block;
        margin:0 0 30px;
    }
    .box-uniform-product-img,
    .box-uniform-product-txt{
        display:block;
    }
}

/* img */
.box-uniform-product-img{
    width:250px;
    padding-right:30px;
    position:relative;
}
.box-uniform-product-img img{
    max-width:100%;
    height:auto;
}
.box-uniform-product-img.is-recommend::before{
    content:"";
    width:85px;
    height:113px;
    background-image:url("/uniform/images/icn_recommend.png");
    background-repeat:no-repeat;
    background-position:center center;
    display:inline-block;
    position:absolute;
    left:-50px;
    top:-10px;
}
@media screen and (max-width:1000px){
    .box-uniform-product-img{
        width:250px;
        margin:0 auto 20px;
        padding-right:0;
        position:relative;
        text-align:center;
    }
    .box-uniform-product-img.is-recommend::before{
        content:"";
        width:42.5px;
        height:56.5px;
        background-size:100% auto;
        left:-5px;
        top:-10px;
    }
}

/* txt */
.box-uniform-product-txt{
    
}
.box-uniform-product-txt-intro{
    text-align:center;
    font-size:20px;
    font-weight:bold;
    color:#16408c;
    margin:0 0 30px;
    line-height:1.8;
}
.box-uniform-product-txt-intro span{
    color:#333;
    font-size:15px;
    font-weight:normal;
}
@media screen and (max-width:1000px){
    .box-uniform-product-txt-intro{
        font-size:16px;
        margin:0 0 15px;
    }
    .box-uniform-product-txt-intro span{
        color:#333;
        font-size:13px;
        font-weight:normal;
    }
}

/* txt - point */
.box-uniform-product-txt .box-point{
    padding-top:20px;
}
.box-uniform-product-txt .box-point .ttl-SS{
    text-align:center;
    font-family:'Dancing Script', cursive;
    font-size:30px;
}
.box-uniform-product-txt .box-point .list-main .txt-strong{
    font-weight:bold;
}
@media screen and (max-width:1000px){
    .box-uniform-product-txt .box-point{
        padding-top:10px;
    }
    .box-uniform-product-txt .box-point .ttl-SS{
        margin-bottom:5px;
    }
}

/* txt - price */
.box-uniform-price{
    border-bottom:1px solid #16408c;
    padding:0 15px 15px;
    text-align:right;
    margin:0 0 20px;
    font-size:16px;
}
.box-uniform-price span{
    font-size:25px;
    font-weight:bold;
    color:#16408c;
    padding:0 10px;
}
@media screen and (max-width:1000px){
    .box-uniform-price{
        padding:0 10px 10px;
        font-size:15px;
    }
    .box-uniform-price span{
        font-size:20px;
        padding:0 10px;
    }
}

/* txt - icons */
.box-uniform-icons{
    text-align:center;
}
.box-uniform-icons li{
    display:inline-block;
    margin:0 5px 10px;
}

@media screen and (max-width:1000px){
    .box-uniform-icons li img{
        height:50px;
        width:auto;
    }
}

/* link
----------------------------------------------------------------------------- */
.uniform-link{
    background-color:#eee;
    padding:30px 0;
    margin:0 0 50px;
}

.uniform-link li{
    display:inline-block;
    float:left;
    width:485px;
    margin-right:30px;
    border-bottom:1px solid #bfbfbf;
}
.uniform-link li:nth-child(2n){
    margin-right:0;
}

.uniform-link li a{
    padding:20px;
    display:block;
    text-decoration:none;
    color:#333;
    background-image:url("/common/images/arr_05.png");
    background-repeat:no-repeat;
    background-position:right 20px center;
    background-size:auto 7px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.uniform-link li a:hover{
    background-position:right 20px bottom 20px;
}
@media screen and (max-width:1000px){
    .uniform-link{
        padding:15px 0;
        margin:0 0 30px;
    }

    .uniform-link li{
        display:block;
        float:none;
        width:100%;
        margin-right:0;
    }

    .uniform-link li a{
        padding:10px;
        background-position:right 10px center;
    }
}

/* 5col */
.uniform-link.is-5col li{
    display:inline-block;
    float:left;
    width:184px;
    margin-right:20px;
    border-bottom:1px solid #bfbfbf;
}
.uniform-link.is-5col li:nth-child(2n){
    margin-right:20px;
}
.uniform-link.is-5col li:nth-child(5n){
    margin-right:0;
}
.uniform-link.is-5col li a{
    padding:10px;
}
.uniform-link.is-5col li a:hover{
    background-position:right 20px bottom 13px;
}

@media screen and (max-width:1000px){
    .uniform-link.is-5col li{
        width:calc(50% - 10px);
        margin-right:10px;
    }
    .uniform-link.is-5col li:nth-child(5n){
        margin-right:10px;
    }
    .uniform-link.is-5col li:nth-child(2n){
        margin-right:0;
    }
    .uniform-link.is-5col li a{
        padding:5px;
    }
}