@charset "utf-8";
/* CSS Document */

.sample_wrap{
    font-family: 'Noto Sans JP', sans-serif;
}

.sp_br{
    display:block;
}

.sample_wrap img{
    width:100%;
}

.mv_bnr{
    width:100%;
}

.pc_mv{
    display:block;
}

.sp_mv{
    display:none;
}

.main_txt{
    font-size:20px;
    text-align:center;
    font-weight:500;
    line-height:2;
    margin:50px auto;
}

.main_txt span{
    font-size:26px;
    font-weight:bold;
}
.blue{
    color:#2072bb;
}
.red{
    color:#f04e37;
}
.rime{
    color:#3bbaa9;
}
.orenge{
    color:#f8923e;
}
.yellow{
    color:#fdce44;
}
.sky{
    color:#00b6dd;
}
.green{
    color:#39b561;
}
.parple{
    color:#d54d9f;
}

.nav_box{
    width:980px;
    margin:0 auto 60px;
    display: flex;
    justify-content:space-between;
    list-style: none;
}

.nav_list {
    width: calc(100%/5 - 20px);
}

.content_box{
    max-width:1200px;
    margin:0 auto;
    background-color:#f5f5f5;
    padding-bottom:60px;
}


.content_title{
    width:100%;
    margin:0 auto;
    background-color:#111111;
}

.title_img{
    width:500px;
    margin: 0 auto;
}

.sample_sub_title {
    position: relative;
    padding: 0;
    text-align: center;
    color: #f04e37;
    font-size: 30px;
    font-weight: bold;
    width: 92%;
    margin: 60px auto 0;
}

.sample_sub_title:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #f04e37;
}

.sample_sub_title span {
  position: relative;
  padding: 0 1em;
  background: #f5f5f5;
}

.sample_img{
    width:92%;
    margin:0 auto;
    padding: 20px 0 0;
}

.sample_img_sp{
    display:none;
}

.item_box{
    width:980px;
    margin:40px auto 0;
    background-color:#fff;
    padding-bottom:60px;
}

.item_img{
    width:760px;
    margin: 60px auto 30px;
}

.item_color_list{
    width:760px;
    margin:0 auto;
    display: flex;
    justify-content:space-between;
}

.item_btn{
    display: block;
    position:relative;
    width:400px;
    height:50px;
    line-height:48px;
    background-color:#111;
    color:#fff;
    text-align: center;
    margin:60px auto 0;
    border-radius:25px;
    border:1px solid #111;
    font-size:18px;
    font-weight:500;
}

.item_btn:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  right: 7%;
  margin-top: -6px;
}


.item_btn:hover{
    color:#111;
    background-color:#fff;
}


.item_btn:hover:before {
  border-color: transparent transparent transparent #111;
}


.item_title{
    padding:17px 0;
    text-align: center;
}

.item_name{
    font-size:30px;
    line-height:1;
    font-weight:bold;
    color:#fff;
    position:relative; 
}

.item_name span{
    font-size:42px;
}

.sub_item_name{
    display: inline-block;
    padding:9px 14px;
    background-color:#fff;
    font-size:17px;
    font-weight:500;
    margin:8px 0 0;
}


.cotton{background-color:#f04e37;}
.marinen{background-color:#d54d9f;}
.gouhi{background-color:#f8923e;}
.wahuu{background-color:#00b29a;}
.isyou{background-color:#2072bb;}



.cotton .sub_item_name{color:#f04e37;}
.marinen .sub_item_name{color:#d54d9f;}
.gouhi .sub_item_name{color:#f8923e;}
.wahuu .sub_item_name{color:#00b29a;}
.isyou .sub_item_name{color:#2072bb;}


.newitem_icon{
    position: absolute;
    top: -60%;
    right: 13%;
}


.buy_box{
    width:980px;
    margin:40px auto 0;
    background-color:#fff;
    padding:45px 0;
    text-align: center;
}

.buy_box p{
    font-size:28px;
    font-weight:bold;
}

.buy_order{
    width:500px;
    margin:22px auto 0;
    font-size: 24px;
    font-weight:500;
}

.buy_list{
    color:#555555;
    text-align: left;
    line-height:1.8;
}

@media screen and (max-width:1024px){
    .main_txt {
        font-size: 18px;
    }
    .main_txt span {
    font-size: 24px;
}
}

@media screen and (max-width:768px){
    .nav_box {
    width: 96%;
}
    
    .item_box {
    width: 96%;
}
    
    .item_img {
    width: 90%;
}
    .item_color_list {
    width: 90%;
    }
    .item_color{
        width:calc(100%/3 - 2%);
    }
    .newitem_icon {
    position: absolute;
    top: -60%;
    right: 1%;
}
    .buy_box {
    width: 96%;
    }
    
}

@media screen and (max-width:600px){
    .pc_mv{
    display:none;
}

.sp_mv{
    display:block;
}
    .sp_br{
    display:none;
}
    .main_txt {
    font-size: 16px;
    text-align: left;
    font-weight: 500;
    line-height: 2;
    margin: 50px auto;
    padding: 0 2%;
}
    .main_txt span {
    font-size: 20px;
}
    .nav_box {
    flex-wrap: wrap;
}
    .nav_list {
    width: calc(100%/2 - 2%);
    margin-bottom:4%;
}
    .title_img {
    width: 80%;
}
    
.sample_img{
    display:none;
}

.sample_img_sp{
    width:92%;
    margin:0 auto;
    padding: 20px 0 0;
    display:block;
}

    .buy_order{
    width: 90%;
    }
    .buy_list {
    font-size: 16px;
}
    .buy_box p {
    font-size: 24px;
    font-weight: bold;
    padding: 0 2%;
    text-align: center;
}
    .sub_item_name {
    padding: 7px 10px;
    font-size: 14px;
}
    
    .sample_sub_title {
    position: relative;
    padding: 0;
    text-align: center;
    color: #f04e37;
    font-size: 16px;
    font-weight: bold;
    width: 94%;
    margin: 40px auto 0;
}
    
    .item_name {
        font-size: 20px;
    }
    .item_name span{
    font-size: 24px;
    }
    .newitem_icon {
    display: none;
    font-size: 42px;
}
    .item_btn {
    width: 85%;
    line-height: 50px;
    background-color: #111;
    color: #fff;
    text-align: center;
    margin: 40px auto 0;
    border-radius: 25px;
    border: 1px solid #111;
    font-size: 14px;
    font-weight: 500;
}
    
    
}

@media screen and (max-width: 400px){
.sub_item_name {
    padding: 7px 8px;
    font-size: 13px;
}
}