@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

/* 2025大感謝祭共通 */
body #tf_base { font-size: 18px !important;}

#tf_base span {
    font-size: 100% !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

#tf_base hr { 
    border-color: transparent;
    margin-bottom: 9px;
}

#contents { 
    width: 100% !important;
    padding: 0 !important;
    font-family: "Noto Sans JP", serif;
    font-style: normal;
    color: #000 !important;
}

 .pc_only { display: block;}

 .sp_only { display: none;}

 .ib { display: inline-block !important;}

.tf2501_view_timer { display: none;}

#tf2501_contents {
    width: 100%;
    background-color: #f9f9f9;
}

.container {
    max-width: 1248px;
    margin: 0 auto;
    /* padding: 100px 0; */
}

.sec_item {
    width: 100%;
    margin-top: -100px;
    padding-top: 160px;
}

.sec_item h2 {
    width: 100%;
    text-align: center;
    font-size: 3em;
    margin-bottom: 50px;
    line-height: 1.2;
}

.sec_item h2 small { font-size: 70%;}

.item_wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.item_wrap .item {
    width: 23.5%;
    margin-right: 2%;
    margin-bottom: 4%;
    background-color: #fff;
    border: solid 1px #b5b5b6;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: space-between;
    /* height: 100%; */
    position: relative;
}

.item_wrap .item:nth-of-type(4n),
.item_wrap .item:last-of-type { margin-right: 0;}

.item_wrap a, .item_wrap img {
    display: block;
    width: 100%;
}


.item_wrap p { text-align: center;}

.item_wrap .item_txt {
    width: 100%;
    padding: 0 15px 10px 15px;
}

.item_wrap .brand_name {
    width: 100%;
    font-weight: 400;
    margin-bottom: 10px;
    line-height: 1;
    font-size: 0.8em;
}

.item_wrap .item_name {
    width: 100%;
    font-size: 1.15em;
    letter-spacing: 0;
    font-weight: 700;
    margin-bottom: 9px;
    line-height: 1.2;
}

.item_wrap .item_desc {
    text-align: justify;
    line-height: 1.5;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.item_wrap .price_wrap,
.item_wrap .point_up_wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.item_wrap .price_wrap { 
    justify-content: space-around;
    align-items: flex-end;
}

.item_wrap .price_wrap p,
.item_wrap .point_up_wrap p {
    font-family: "Nunito Sans", "Noto Sans JP", sans-serif;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0 !important;
    word-break: break-all;
}

.item_wrap .price_wrap p:first-of-type {
    font-size: 1.15em;
    font-weight: 400;
    position: relative;
    padding-bottom: 2px;
}

.item_wrap .price_wrap p:first-of-type::before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #000;
    top: calc(50% - 1px);
    left: 0;
}

.item_wrap .price_wrap p:last-of-type {
    font-size: 1.95em;
    font-weight: 900;
    color:  #b02725;
}

.item_wrap .price_wrap p:last-of-type small { 
    /*font-size: 50%;*/
    font-size: 35%;
    }

/*
.item_wrap .price_off_rate {
    background-color: #b02725;
    color: #fff;
    font-family: "Nunito Sans", "Noto Sans JP", serif;
    font-style: normal;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1;
    padding: 12px 10px 7px 10px;
}
*/

/*バクダン付きの見出しここから*/
.item_wrap .price_off_rate{
    position: absolute;
    top:-0.1em;
    right:0.8em;    
    font-size:1.5em;
    font-weight:700;
}
.item_wrap .price_off_rate,
.item_wrap .price_off_rate:before,
.item_wrap .price_off_rate:after,
.item_wrap .price_off_rate_in,
.item_wrap .price_off_rate .price_off_rate_in:before {
    position: absolute;
    background-color: #b02725;
    width: 3.0em;
    height: 3.0em;
    display: inline-block;
}
.item_wrap .price_off_rate:before,
.item_wrap .price_off_rate:after,
.item_wrap .price_off_rate_in,
.item_wrap .price_off_rate .price_off_rate_in:before {
    content: '';
    top:0;
    right:0;
}
.item_wrap .price_off_rate:before {
    transform: rotate(22deg);
}
.item_wrap .price_off_rate:after {
    transform: rotate(-22deg);
}
.item_wrap .price_off_rate_in {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
}
.item_wrap .price_off_rate .price_off_rate_in:before {
    transform: rotate(45deg);
}
.item_wrap .price_off_rate .price_off_rate_in .price_off_rate_in2 {
    position: absolute;
    top: 50%;
    color:#ffffff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
/*バクダン付きの見出しここまで*/


/*円形の見出しここから*/
/*
.item_wrap .item {
    position:relative;
]
.item_wrap .price_off_rate {
    position:absolute;
    top:-15px;    
    right:0.5em;
    font-size:1.3em;
    font-weight:700;
}
.price_off_rate .price_off_rate_in {
  background-color: #b02725;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
}
.item_wrap .price_off_rate .price_off_rate_in2 {
  position: absolute;
  left: 0;
  top: 50%;
  color:#ffffff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :3.5em;
}
*/
/*円形の見出しここまで*/



/*フェードインアニメーションここから*/
.fadeInDown {
    -webkit-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
    -ms-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    visibility: visible !important;
   }
   @-webkit-keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
   }
   @keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
   }
/*フェードインアニメーションここまで*/



.item_wrap .point_up_wrap {
    background-color: #ffecec;
    justify-content: center;
    padding: 10px;
/*    border-bottom: solid 1px #b5b5b6;*/
}

.item_wrap .point_up_wrap p { 
    font-size: 1.5em;
    color: #b02725;
}
.item_wrap .point_up_wrap span.txt_pt_small {
    font-size: 0.6em!important;
}

.item_wrap .point_up_wrap p:first-of-type { 
    font-weight: 700;
    /* position: relative; */
}

/* .item_wrap .point_up_wrap p:first-of-type::before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    top: calc(50% - 1px);
    left: 0;
    background-color: #b02725;
} */

.item_wrap .point_up_wrap p:last-of-type { font-weight: 700;}

/*
.item_wrap .item_stock a { border-bottom: solid 1px #b5b5b6;}
*/

.item_wrap .link_btn a {
    font-size: 1em;
    line-height: 3;
    transition: all .3s;
    background-color: #eeeeee;
}

.item_wrap .link_btn a:hover { 
    background-color: #d5d5d5;
    color: #000 !important;
    opacity: 1 !important;
}


/* 2025大感謝祭共通 */


/* ナビゲーション */
#tf2501_navi {
    width: 100%;
    background: url(https://www.kojitusanso.jp/common/img/page/campaign/2501thanksFes/gold_pattern.jpg) repeat;
    position: sticky;
	top: 0;
    z-index: 100;
}

#tf2501_navi ul {
    max-width: 1248px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#tf2501_navi ul li {
    width: 25%;
    border-right: solid 1px #003d30;
}

#tf2501_navi ul li:first-child { border-left: solid 1px #003d30;}

#tf2501_navi ul li a { 
    display: block;
    color: #003d30;
    transition: all .3s;
    font-size: 1.1em;
    font-weight: 700;
    text-align: center;
    line-height: 4;
}

#tf2501_navi ul li a:hover {
    background-color: #8f8139;
    color: #fff;
}
/* ナビゲーション */


/* トップ */
#tf2501_top {
    width: 100%;
    background-color: #f9f9f9;
}

#tf2501_top h1 {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
}

#tf2501_top h1 img { width: 100%;}
/* トップ */


/* いち推しアイテム */
#recommend_item .recommend_ttl { 
    color: #b02725;
    margin-bottom: 25px;
    padding: 0;
}

#recommend_item ul {
    width: 100%;
    text-align: center;
    margin-bottom: 55px;
}

#recommend_item ul li {
    font-size: 1.2em !important;
    font-weight: 400 !important;
}

#recommend_item ul li.txt_focus{
    color: #b02725 !important;
    font-weight: bold !important;
}
/* いち推しアイテム */



/* クリアランス商品 */
#clearance_item .recommend_ttl { 
    color: #b02725;
    margin-bottom: 25px;
    padding: 0;
}
#clearance_item ul {
    width: 100%;
    text-align: center;
    margin-bottom: 55px;
}

#clearance_item ul li {
    font-size: 1.2em !important;
    font-weight: 400 !important;
}

#clearance_item .clearance_price_ttl,
#clearance_item .clearance_price_ttl img { width: 100%;}

#clearance_item .clearance_price_ttl { margin-bottom: 80px;}
#clearance_item .txt_premium { font-size: 0.5em!important;}
/* クリアランス商品 */

/* 営業時間 */
#eigyou,#eigyou2 {
}
#eigyou2 {
margin-bottom: 100px;
}
#eigyou img,#eigyou2 img {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}
/* 営業時間 */

/* ザ・ノース・フェイス15%OFF */
#tnf_off {
    margin-bottom: 50px;
}
#tnf_off img {
    width: 70%;
    margin: 0 auto;
    display: block;
}
/* ザ・ノース・フェイス15%OFF */

/* パタゴニアポイント還元 */
#patagonia_point {
    margin-bottom: 50px;
}
#patagonia_point img {
    width: 70%;
    margin: 0 auto;
    display: block;
}
/* パタゴニアポイント還元 */




/* ================================================== */
                /* ここからレスポンシブ */
/* ================================================== */

@media screen and (max-width:1300px) {
    /* 2025大感謝祭共通 */
    body { font-size: 14px !important;}

    .container { width: 910px;}
    /* 2025大感謝祭共通 */
}



@media screen and (max-width:1000px) {
    /* 2025大感謝祭共通 */
    .container { width: 90%;}
    /* 2025大感謝祭共通 */

    /* ナビゲーション */
    #tf2501_navi ul li:first-child { border-left: none;}

    #tf2501_navi ul li:last-child { border-right: none;}
    /* ナビゲーション */
}



@media screen and (max-width:767px) {
    /* 2025大感謝祭共通 */
    .container { 
        width: 90%;
        /* padding: 70px 0; */
    }

    .sec_item {
        margin-top: -120px;
        padding-top: 150px;
    }

    .item_wrap .item {
        width: 31.3%;
        margin-right: 3%;
    }

    .item_wrap .item:nth-of-type(3n),
    .item_wrap .item:last-of-type { margin-right: 0;}

    .item_wrap .price_wrap { justify-content: center;}

    .item_wrap .price_wrap p:last-of-type { 
        /*font-size: 1.55em;*/
        font-size: 2.2em;
        font-weight: 900;
        color: #b02725;
    }

    .item_wrap .point_up_wrap p { font-size: 1.3em;}

    .sec_item h2 { font-size: 2.5em;}
    /* 2025大感謝祭共通 */

    /* ナビゲーション */
    #tf2501_navi ul li a { line-height: 3.5;}

    #tf2501_navi { top: 50px;}
    /* ナビゲーション */

    /* 割引率 */
    .item_wrap .price_off_rate {
        font-size: 0.9em;
    }
    /* 割引率 */

    /* いち推しアイテム */
    #recommend_item ul li { font-size: 1em !important;}
    /* いち推しアイテム */

    /* クリアランス商品 */
    #clearance_item ul li { font-size: 1em !important;}
    /* クリアランス商品 */

    /* ザ・ノース・フェイス15%OFF */
    #tnf_off {
        margin-top: -110px;
        padding-top: 160px;
        margin-bottom: 0;
        }
    #tnf_off img {
    width: 100%;
    }
    /* ザ・ノース・フェイス15%OFF */

    /* パタゴニアポイント還元 */
    #patagonia_point {
        margin-top: -110px;
        padding-top: 160px;
        margin-bottom: 50px;
        }
    #patagonia_point img {
    width: 100%;
    }
    /* パタゴニアポイント還元 */
}



@media screen and (max-width:600px) {
    /* 2025大感謝祭共通 */
    .pc_only { display: none;}

    .sp_only { display: block;}

    .sec_item h2 { font-size: 2.2em;}
    /* 2025大感謝祭共通 */

    /* ナビゲーション */
    #tf2501_navi ul li { width: 50%;}

    #tf2501_navi ul li:first-child,
    #tf2501_navi ul li:nth-child(2) { border-bottom: solid 1px #005240;}

    #tf2501_navi ul li:nth-child(2) { border-right: none;}
    /* ナビゲーション */

    /* 割引率 */
    .item_wrap .price_off_rate {
        font-size: 0.9em;
    }
    /* 割引率 */
}



@media screen and (max-width:500px) {
    /* 2025大感謝祭共通 */
    .item_wrap { justify-content: space-between;}

    .item_wrap .item { 
        width: 48%;
        margin-right: 0;
    }

    .item_wrap .brand_name, .item_wrap .item_desc { font-size: 3vw;}

    .item_wrap .item_name,
    .item_wrap .price_wrap p:first-of-type { font-size: 4vw;}

    .item_wrap .price_wrap p:last-of-type { font-size: 6.5vw;}

    .item_wrap .price_off_rate {
        font-size: 6vw;
        padding: 5px;
    }

    .item_wrap .shop_stock {
        font-size: 3.3vw;
        line-height: 2.7;
    }

    .item_wrap .item_txt { padding: 0 10px 5px 10px;}

    .item_wrap .point_up_wrap { padding: 7px;}

    .item_wrap .point_up_wrap p { font-size: 4.7vw;}

    .sec_item h2 { 
        font-size: 7vw;
        margin-bottom: 25px;
        letter-spacing: 0.1rem !important;
    }

    .item_wrap .link_btn a { font-size: 3vw; padding: 6px 0;}
    /* 2025大感謝祭共通 */

    /* ナビゲーション */
    #tf2501_navi ul li a { 
        font-size: 3.0vw;
        line-height: 3.3;
    }
    /* ナビゲーション */

    /* いち推しアイテム */
    #recommend_item ul { margin-bottom: 15px;}

    #recommend_item ul li { font-size: 3vw !important;}
    /* いち推しアイテム */

    /* クリアランス商品 */
    #clearance_item .clearance_price_ttl { margin-bottom: 40px;}

    #clearance_item ul { margin-bottom: 25px;}

    #clearance_item ul li { font-size: 3vw !important;}
    /* クリアランス商品 */

    /* 割引率 */
    .item_wrap .price_off_rate {
        font-size: 0.9em;
    }
    /* 割引率 */
}