@charset "UTF-8";
/*クーポン*/
.fs-c-couponName__name {
  color: #000;
  font-size: 1.8rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.fs-c-couponName__discount {
  background: #ee7700;
  color: #ffffff;
  padding: 10px;
  font-size: 18px;
  font-weight: 700;
}
.fs-c-couponAppliedCondition__notice {
  color: #d80009;
}
.fs-c-couponName > * { margin-bottom: 1rem;}

/*商品詳細*/
.fs-l-productLayout__item .item-detail a{text-decoration: underline;}
.item-detail-bnr-inner-link{text-decoration: unset!important;}
.icon-box .c-flex {
    display: flex!important;
    flex-wrap: wrap;
    justify-content: space-between;
}
.icon-box .icon-list_01 {width: 47%; align-items: start;}
.icon-box .icon-r-img {display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
}
.w100per{width: 100%!important;}
.none-icon{grid-template-columns: 1fr!important;}
.recommend-list .recommend-item p { line-height: normal;}
.image-container { width: 100%; overflow-x: auto;}
.scrollable-image { width: 1010px;
    max-width: none!important;
    display: block;
}

@media screen and (max-width: 767px) {
.icon-box .icon-list_01 {width: 100%;}
.icon-box .icon-r-img {display: grid; grid-template-columns: 1fr;}
}

/*定価に取消線を入れる*/
.fs-c-productPrice--listed .fs-c-price {
    text-decoration: line-through;
}

/*商品一覧 */
/* //もっとみる// */
.readmore {
  position: relative;
  margin: 0 auto;
  padding: 0 0 75px;
}

.readmore label {
  position: absolute;
  display: table;
  left: 50%;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  padding: 10px 0;
  color: #000;
  text-align: right;
  border-radius: 5px;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 1;
}
.readmore label::before{content: '… 続きを見る';}
.readmore input[type="checkbox"]:checked ~ label::before { content: '元に戻す';}
.readmore input[type="checkbox"]{display: none;}
.readmore-content { position: relative; height: 70px; overflow: hidden;}
.readmore input[type="checkbox"]:checked ~ .readmore-content { height: auto;}
.readmore-content::before {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, #fff 100%);
}
.readmore input[type="checkbox"]:checked ~ .readmore-content::before {display: none;}

@media screen and (max-width: 767px) {
.readmore-content {height: 100px;}
}

/* フリーページ ここから追加 */
.c-brand-topics,.c-brand-category{margin-top:60px!important;}
@media screen and (max-width: 767px) {
.c-al--c-sp{text-align: center!important;}
}

/* flex % */
.w10per{width: 10%!important;}
.w15per{width: 15%!important;}
.w20per{width: 20%!important;}
.w25per{width: 25%!important;}
.w30per{width: 30%!important;}
.w35per{width: 35%!important;}
.w40per{width: 40%!important;}
.w45per{width: 45%!important;}
.w50per{width: 50%!important;}
.w55per{width: 55%!important;}
.w60per{width: 60%!important;}
.w65per{width: 65%!important;}
.w70per{width: 70%!important;}
.w75per{width: 75%!important;}
.w80per{width: 80%!important;}
.w85per{width: 85%!important;}
.w90per{width: 90%!important;}
.w95per{width: 95%!important;}

.l-w50px {grid-template-columns: 50px 1fr!important;}
.l-w60px {grid-template-columns: 60px 1fr!important;}
.l-w70px {grid-template-columns: 70px 1fr!important;}
.l-w80px {grid-template-columns: 80px 1fr!important;}
.l-w90px {grid-template-columns: 90px 1fr!important;}
.l-w100px {grid-template-columns: 100px 1fr!important;}
.l-w150px {grid-template-columns: 150px 1fr!important;}
.l-w200px {grid-template-columns: 200px 1fr!important;}
.l-w250px {grid-template-columns: 250px 1fr!important;}
.l-w300px {grid-template-columns: 300px 1fr!important;}
.l-w350px {grid-template-columns: 350px 1fr!important;}

.r-w50px {grid-template-columns: 1fr 50px!important;}
.r-w60px {grid-template-columns: 1fr 60px!important;}
.r-w70px {grid-template-columns: 1fr 70px!important;}
.r-w80px {grid-template-columns: 1fr 80px!important;}
.r-w90px {grid-template-columns: 1fr 90px!important;}
.r-w100px {grid-template-columns: 1fr 100px!important;}
.r-w150px {grid-template-columns: 1fr 150px!important;}
.r-w200px {grid-template-columns: 1fr 200px!important;}
.r-w250px {grid-template-columns: 1fr 250px!important;}
.r-w300px {grid-template-columns: 1fr 300px!important;}
.r-w350px {grid-template-columns: 1fr 350px!important;}

@media screen and (max-width: 767px) {
.sp-w50per{width: 48%!important;}
.sp-w100per{width: 100%!important;}
  .l-w100px,.l-w150px,.l-w200px,.l-w250px,.l-w300px,.l-w350px,.r-w100px,.r-w150px,.r-w200px,.r-w250px,.r-w300px,.r-w350px{grid-template-columns:1fr!important;}
}
.c-none{display:none;}

/* スクロールなしtable */
.c-table__scroll table.normal th {white-space: normal;}
.c-table__scroll table.normal td {text-align: left; white-space: normal;}

.inner p { font-size: 16px; margin: 15px 0;}
@media screen and (max-width: 767px) {
.inner p {  font-size: 14px; margin: 15px 0;}
}
.bg-darkgray { background-color: #CCCCCC;}
.bg-gray { background: #f4f3f2;}

.pd-tb40{
  padding: 40px 0;
}


/* 背景グレーブロック余白調整用(innerにある時用) */
.c-pd {
    padding: 1px 30px 30px;
    margin: 0px 0 30px;
}

/* 背景グレーブロック余白調整用(横幅いっぱいの時用) */
.c-pd_xl {
    padding: 1px 0px 30px;
    margin: 0px 0 30px;
}

/* 黒背景白タイトル */
.c-bgblack-txt {
    padding: 10px;
    color: #fff;
    background-color: #333;
}

/* 黒背景白テキスト */
.c-bgblack-txt-s {
    display: inline-block;
    padding: 5px;
    border-radius: 10%;
    background-color: #000;
    color: #fff;
}

/* 青背景白テキスト */
.c-bgblue-txt {
    display: inline-block;
    padding: 5px;
    color: #fff;
    background-color: #5F81A1;
}

/* 緑背景白テキスト */
.c-bggreen-txt {
    display: inline-block;
    padding: 5px;
    color: #fff;
    background-color: #108267;
}

/* 黄緑背景白テキスト */
.c-bglightgreen-txt {
    display: inline-block;
    padding: 5px;
    color: #fff;
    background-color: #92AD27;
}
/* 黒背景白テキストボタン */
.c-btn_black  {
    background-color: #000;
    color: #fff;
    padding: 15px 0;
    font-size: 16px;
    font-weight: bold;
}
.c-btn_black:visited {color: #fff;}
/* 赤背景白テキストボタン */
.c-btn_red {
    background-color: #B20000;
    color: #fff!important;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
}

/* 赤背景白テキスト */
.c-red_txt {
    display: inline-block;
    background-color: #FE0101;
    color: #fff;
    padding: 4px;
}

/* 「TRICAM 取扱説明書」用 画像上部の説明テキスト */
.c-img-about_txt {
    display: block;
    background-color: #000;
    color: #fff;
    text-align: right;
    padding: 5px 10px;
}
/* 「TRICAM 取扱説明書」用 画像フェードマスク */
.c-fade-mask{
  display:block;
  width:100%;
  height:auto;

  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;

  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

}


/* ボックスシャドウ */
.c-box_shadow {
    padding: 0px 30px 20px;
    box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}


/* ３カラムに調整 */
.c-index-col3 {
    grid-template-columns: repeat(3, 1fr)!important;
}

/* 4カラムに調整 */
.c-index-col4 {
    grid-template-columns: repeat(4, 1fr)!important;
}


/* gap追加 */
.gap10 {
    gap: 10px;
}

/* ページ上アイキャッチ画像 */
.c-eyecatch {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.c-eyecatch img {
  width: 100%;
  height: 550px;
  object-fit: cover;
  display: block;
  filter: brightness(70%);
}

.c-eyecatch_inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  padding: 2rem;
  line-height: 1.4;
}

.c-eyecatch_ttl {
  font-size: 24px;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  white-space: normal;
}
@media screen and (min-width: 768px) {
    .c-eyecatch_ttl { font-size: 34px;}
}

.c-eyecatch_subttl {
  display: block;
  font-size: 18px;
  margin-bottom: .5em;
}
@media screen and (min-width: 768px) {
    .c-eyecatch_subttl {
        font-size: 28px;
    }
}


/* アイキャッチ画像PC、SP切り替え用 */
.c-eyecatch--sp-pc {
    display:block;
}
.c-eyecatch--sp-pc__img {
    display:block;
    width:100%;
    height:auto;
}


/* アイキャッチ画像下にタイトル赤帯白テキストを設置 */
.c-eyecatch-under_txt-wrap {
  position: relative;
  width: 100%;
}

.c-eyecatch-under_txt-wrap figure {
  margin: 0;
}
.c-eyecatch-under_txt-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.c-eyecatch-under_txt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  background: #E60012;
  color: #fff;
  text-align: center;
  padding: 0.5rem 1rem;
  line-height: 1.5;
  font-weight: 700;
  /* text-shadow: 0 1px 4px rgba(0,0,0,.25); */
}




/* タイトル下黒バー */
.c-bar_bottom {
    position: relative;
}
.c-bar_bottom::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin: 10px auto 0;
  background: #000;
  border-radius: 10px;
}

/* テキスト両サイドボーダー */
.c-border_side {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 1.5rem 0;
}
.c-border_side::before,
.c-border_side::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 2px solid #E5E5E5;
}
/* テキスト部分(spanで囲う) */
.c-border_side > span {
  flex: 0 0 auto;
  padding: 0 1.5rem;
  line-height: 1.4;
}

/* テキスト上黒ボーダー */
.c-border_top {
    border-top: 1px solid #000;
}


/* テキスト下青ボーダー */
.c-border_under {
    display: inline;
    background-image: linear-gradient(#9ECEFF, #9ECEFF);
    background-repeat: no-repeat;
    background-size: 100% 5px;
    background-position: 0 calc(100% - 0.05em);
    font-weight: bold;
}

/* 画面幅いっぱいのボーダー */
.c-border_wide {
    padding-top: 60px;
    margin: 0 20px;
    border-top: 1px solid #000;
}

/* 全体ボーダー */
.c-border_box {
    border: 1px solid #000;
}


/* SP時折り返し右→左 */
@media screen and (max-width: 767px) {
    .c-flex-wraprev {
        display: flex !important;
        flex-wrap: wrap-reverse !important;
    }
}

/* flexの配置追加 */
.c-justify_left {
    justify-content: left!important;
}
.c-justify_center {
    justify-content: center!important;
}
.c-justify_between {
    justify-content: space-between!important;
}

/* 上下の中央揃え */
.c-align-center {
    align-items: center!important;
}
.c-align_start {
align-items: flex-start!important;
}

/* 折り返し無し */
.c-nowrap {
    flex-wrap: nowrap;
}
/* 折り返し無し(PCのみ) */
@media screen and (min-width: 768px) {
    .c-pc_nowrap {
        flex-wrap: nowrap!important;
    }
}


/* サイズ＋中央寄せ追加 */
/* max-width: 100px */
.c-mw--100 {
  max-width: 100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* PCのみ */
@media screen and (min-width: 768px) {
    .c-pc_mw--100 {
    max-width: 100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }
}

/* max-width: 150px */
.c-mw--150 {
  max-width: 150px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* PCのみ */
@media screen and (min-width: 768px) {
    .c-pc_mw--150 {
    max-width: 150px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }
}


/* max-width: 200px */
.c-mw--200 {
  max-width: 200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* PCのみ */
@media screen and (min-width: 768px) {
    .c-pc_mw--200 {
    max-width: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }
}


/* PCのみ */
/* max-width: 300px */
@media screen and (min-width: 768px) {
    .c-pc_mw--300 {
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }
}

.c-w_200 {
    max-width: 200px;
    margin: 0 auto;
} 

.c-w_100 {
    max-width: 100px;
    margin: 0 auto;
}

.c-w_700 {
    max-width: 700px;
    margin: 0 auto;
}

/* SP2 → PC1カラム追加 */
@media screen and (max-width: 767px) {
    .col1-2 {
        display: flex;
        gap: 20px;
    }
}

/* 「ブーツテクノロジ -kamik-」複数リスト時の高さ調整 */
@media screen and (min-width: 768px) {
    .c-pc-list_h {
        height: 500px;
    }
}


/* 「テキスト」+「ロゴ」用grid追加 */
.c-grid.txt-logo {
  grid-template-columns: 1fr 120px;
  gap: 10px 40px;
  margin: 30px 0;
}
@media screen and (max-width: 767px) {
  .c-grid.txt-logo {
    grid-template-columns: 1fr;
  }
}

/* 「ロゴ」+「テキスト」用grid追加 */
.c-grid.logo-txt {
  grid-template-columns: 60px 1fr;
  gap: 10px 40px;
  margin: 30px 0;
}

.c-eyecatch .c-eyecatch_ttl img{
  width: 100%;
  height: auto;
  filter: none;
  display: inline;
}
@media screen and (max-width: 767px) {
  .c-eyecatch .c-eyecatch_ttl img{ width: 90%;}
  .c-eyecatch img {height: 420px;}
}





/* SP時ロゴ位置調整用 */
@media screen and (max-width: 767px) {
    .c-sp_logo {
        margin: 0 auto;
    }
}


/* 子要素中央寄せ用 */
.c-block_center {
    margin: 0 auto;
}

/* テキスト上下の中央揃え */
.c-v-align_middle {
    vertical-align: middle;
}


/* width20% */
.c-w_20p {
    width: 20% !important;
}

/* padding打ち消し */
.c-p0 {
    padding: 0 !important;
}

/* ボーダー打ち消し */
.c-non_border {
    border: none !important;
}

/* display: block; */
.c-d_block {
    display: block;
}