@charset"utf-8";


/*pのデフォルトの下マージン消す
消さないで長文以外の部分はdivを使うこと
p{margin-bottom: 0;}
*/



/*自作カラーCSS変数*/
:root {
  --katashiki-color_01: initial; /* 型式 rgb(0, 153, 0)*/
  --midashi-color_01: #a8752f; /* 商品説明メイン rgb(255, 128, 0) #a06d3d*/
  --ao-color_01:#5071b4;/*メイン青*/
  --skyblue-color_01: #e3f1ff;/*サブ水色 #e2effa #455e77*/
  --gray-color_01: #F2F2F2;/*ベース灰色 #F7F7F7 #F0F0F0 */

  --midashi-border_01:#5071b4 ;
  --border-gray_01:#ddd ; /*表の線のグレー */
  --border-gray_02:#ddd; /*サイドナビの線のグレー 検索ボックスのグレー サイド問い合わせ rgba(33, 37, 41, 0.25) */
  --midashi-takasa_01: 1.2 ; /*見出しのline-height*/

  --font-h1_01:2rem; /*h1 商品名,仕様*/
  --font-h2_01:1.5rem; /*h2 キャッチコピー */
  --font-h4-5_01:1.5rem; /*h2 説明,仕様,シュロ適用範囲*/

  --link-hover_01: #e9ecef ; /*#e9ecef rgb(210, 244, 234)*/ 
  --black-body_01:#212529; /*bootstrapのbodyのカラー*/
}

/* スマホサイズ用
@media (max-width: 575px) {
  :root {
    --font-h1_01:1.5rem;
    --font-h2_01:1.5rem;
  }
} */


.bg-green_01{background-color: rgb(166, 233, 213);}
.bg-light_green_01{background-color: var(--link-hover_01);}
.bg-skyblue_01{background-color:var(--skyblue-color_01);}
.bg-blue_01{background-color:var(--ao-color_01);}
.white-font_01{color:white;}

.gray-font_01{color: #808080;}
.skyblue-font_01{color:rgb(0, 153, 188);}
.green-font_01{color:rgb(90, 147, 20);}
/* .orange-font_01{color: var(--midashi-color_01);} */
.red-font_01{color:#d32f2f;}
/* .winered-font_01{color:#DC3C00;} */
.black-font_01{color:var(--black-body_01);}


.normal-moji_01{   font-weight: initial;  /* h2等の太文字を初期値    */}
.futomoji_01{font-weight: bold;}
.model-number_01{font-weight: bold; color: var(--katashiki-color_01);}/*型式*/

.small-xs_01  {font-size: 0.75rem; }  /* 12px */
.small-s_01 {font-size: 0.8125rem; }  /* 13px */
.small-m_01 {font-size: 0.875rem; } /* 14px bootstrap5のsmallのサイズ*/
.small-l_01 {font-size: 0.9375rem; }  /* 15px */
.font-size-normal_01{font-size: 1rem;}/*16px bootstrap5の標準*/
.big-xl_01  {font-size: var(--font-h4-5_01) ;}
.big-l_01   {font-size: var(--font-h4-5_01) ;}




/*フォントによって文字囲いの位置がズレたりしてる*/
body{
  font-family: 'ヒラギノ角ゴ Pro W3',Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,Osaka,'ＭＳ Ｐゴシック',MS PGothic,sans-serif;  
}/*font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/

a, a:visited, a:focus {text-decoration: none;}

a:hover{text-decoration: underline;
/*font-weight: bold;*/
opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}
/*a:hover内のspan要素にinheritを指定することで、a:hoverのtext-decorationを継承させます　例footerのAWG*/
.card_category_01 a:hover span ,
.shurui_01 a:hover span ,
.footer_01 a:hover span{
  text-decoration: underline;
}

/*
a:hover img, a:hover svg {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}
*/


/*
    h1,h2,h3,h4,h5,h6,h7{
font-size:100%;
font-weight: bold;
}
*/

hr.hr-dot_01{border:none;
  border-top:dashed 1px #212529;
  height:1px;
  color:#FFFFFF;}




/* 両端揃え */
main p, main h2, main h3, main h4, main h5, main h6, main span, main li     , main div, main dt, main dd{
/*  word-break: normal; word-wrap: break-word;*/
/* text-align: justify; */ /* 基本 */
/* text-justify: inter-ideograph; */ /* IEで必要 */
/*text-justify: inter-character; */ /* Firefoxで必要 */
/*word-break: break-all; 型式等の英文を途中で改行　main全部で欧文の改行OK */
/*「word-break: break-word;」は非推奨。
「overflow-wrap: anywhere;」は「word-break: break-word;」の後ろに記載
word-break: break-word; overflow-wrap: anywhere;*/
word-break: break-word;
overflow-wrap: anywhere;
}

main p, main h2, main h3, main h4, main h5 , main h6    , main div
{
  line-height: 1.5;
  /*word-break: keep-all;*/ /*overflow-wrap に改名、word-wrap は別名*/
  word-wrap: break-all;/*break-wordは非推奨 */
  overflow-wrap: break-word;
  /*white-space: pre-wrap;*/
  line-break: auto;
}


#shouhin-main_01{margin-bottom: 5rem;}


/* パソコン時だけ改行 lg以上で改行 d-none d-lg-block	992ピクセル以上でbr表示 (992ピクセル以下でbr非表示)*/
@media (max-width: 991px){
  .lg-ijyou{display: none; }
}

/* スマホ時だけ改行 lg未満,md以下で改行*/
@media (min-width: 992px){
  .md-ika{display: none;  }
}

/* スマホ時だけ改行 md未満,sm以下で改行*/
@media (min-width: 768px){
  .sm-ika{display: none;  }
}



/* 自動改行ok */
/*tableのtdにつけてセル内にある文字の折り返しを許可*/
.br-ok_nowrap-in_01{white-space: normal;}/*スマホ縦一列には無効。横スライドの表に必要。*/


/* テーブル 両端揃え*/
table.table-justify_01 td , table.table-justify_01 th{
text-align: start;
word-break: break-word;
overflow-wrap: anywhere;
}


.h1_01{
  background-color:var(--gray-color_01);
  /*
padding:5px 10px 5px 10px;
margin:10px 0 5px 0;
 */
padding: 2rem 0.7em;
margin-bottom: 1rem;
font-weight: bold;
font-size: var(--font-h1_01);/*150%*/
color: var(--black-body_01);
border-top: 8px solid var(--midashi-border_01) ; /* var(--ao-color_01) */ 
/* border-bottom: 10px solid var(--ao-color_01); */
}

/* スマホの時、h1サイズ */
@media (max-width:992px) {
  .h1_01 {font-size: var(--font-h2_01);}
}





.kakaku_01{
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;

  border: 2px solid var(--bs-primary) !important;
  border-radius: 50rem;
  display:inline-block;
  color: var(--bs-primary); /* text-primaryの色を適用 */
}

.kakaku_01 a{
  width: 100%;
  color: inherit;
  padding: 0.25rem  1.25rem ;

  text-decoration: none;
  display: flex;
  flex-direction: row; /* デフォルトで横並び */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  row-gap: 0.1rem; /* 上下の間隔 */
  column-gap: 1rem; /* 左右の間隔 */
}
@media (max-width: 424px) {
  .kakaku_01{width: 100%;}
}
@media (max-width: 360px) {
  .kakaku_01 a {flex-direction: column; /* 縦並びに切り替え */ }
}

.kakaku_01 a:hover{background-color: var(--bs-primary); border-radius: 50rem; color: white;} 
.kakaku_01 span:nth-child(1){font-weight: bold;}
.kakaku_01 span:nth-child(2){font-size: 80%;}
.kakaku_01 span:nth-child(2)::after{
    font-family: bootstrap-icons;
    content:'\F285'; /*bi-chevron-right*/
    font-size: 2em; /* サイズを変更 */
    vertical-align: middle; /* 必要に応じて整列 */
    margin-left: 1rem; /* 適度なスペースを追加 */
}

.rohs2_01 {
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}
.rohs2_01 div{
  padding: 0.15rem 0.75rem;
  margin: 0 0.25rem 0.25rem 0.25rem;
  border: 1px solid var(--bs-success) !important; /*#dee2e6 */
  border-radius: 50rem;
  color: var(--bs-success);
}




.h1_01 , .h2_01 , .h4_01 , .h5_01 , .shohin_top_midashi_sonota_04
{line-height: var(--midashi-takasa_01);}

.h2_01 { /*商品説明*/ 
color: var(--midashi-color_01);/*rgb(255, 128, 0)*/
font-weight: bold;
font-size: var(--font-h2_01);
padding:0 1rem;
margin:1.25rem 0 0.5rem 0;
margin: 0 0 2rem 0;
padding: 0;
}

/* スマホの時、キャッチコピーの上余白削除 */
@media (min-width: 992px){
  .h2_01 {padding-top: 2rem;}
}


.h2_01 a{
  color: var(--midashi-color_01);
  text-decoration: underline;}

.h3_01 { /*1行名　商品名*/ 
font-size: 100%; /*1.5rem すぐ上にh1があるのでここも大きくする必要はない*/
margin-bottom:0.5rem;
}

/*2行目　型式（型式が無い場合もある）
.h3_02 { }*/ 

.h3_maker_03 { /*メーカー名　3行名、型式が無い場合は2行目*/
  font-size: 100%;
}

.order-3 .text-muted{margin-bottom: 0.5rem ;}

/* h4,h5,h6はどこに使われるか自由 */
.box-text-midashi_01{font-size: 100%; font-weight: bold;}


/* tab-　card用 h2等*/
.card_category_01 .card-title:nth-child(1),
.shurui_01 .card-title:nth-child(1)
 { font-size: 100%; font-weight: bold;} /* 1行目 例h2 ※商品名が無い場合もあるので*/

.card_category_01 .card-title:nth-child(2),
.shurui_01 .card-title:nth-child(2)
 { font-size: 100%; font-weight: bold;} /* 2行目 例h3 ※型式が無い場合もあるので*/

/*ストマックの型式など省略。何に使ってもいい。*/
.shouryaku-1_01{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /*1行数に制限*/
}
.shouryaku-2_01{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*2行数に制限*/ /*型式*/
}



.h4_01 {
  border-left: 8px solid var(--midashi-border_01);
  background-color: var(--gray-color_01);
  font-weight: bold;
  font-size: 1.5rem;
  margin: 1rem 0;

  /* 上下の高さを0.7remに微減し、1pxの視覚補正を維持 */
  padding-top: calc(0.7rem + 1px);
  padding-bottom: calc(0.7rem - 1px);
  padding-right: 0.7em;
  padding-left: 0.7em;

  /* 行間を少し詰めることで、縦幅をさらにコンパクトに */
  line-height: 1.2;
}



.h5_01 {
  font-weight: bold;
  font-size: 1.5rem; /* h4_01と同じ */
  margin: 1rem 0;
  border-radius: 45px;

  /* --- h4と高さを合わせる設定 --- */
  padding-top: calc(0.7rem + 1px);
  padding-bottom: calc(0.7rem - 1px);
  padding-right: 1.9rem; /* 左右の余白は元の1.9remを維持 */
  padding-left: 1.9rem;

  line-height: 1.2; /* h4_01と同じ */
}


.shohin_top_midashi_sonota_04{
  color: initial;/*rgb(90, 147, 20) #00b1b8*/
  font-weight: bold;
font-size: 140%;
margin:1.25rem 0 0.5rem 0;
}



/*products「手動」リンク*/
.kategri-list_01 a{
  background-color: var(--skyblue-color_01) !important;
  border-radius: 0.25rem;
  display: block;
  padding: 0.5rem; /*aリンク全体の為に親でなくaにpaddingを設定する*/
  height: 100% !important;
}

.kategri-list_01 span{  color: var(--ao-color_01);
  display: list-item;
  padding: 0rem;
  list-style:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='rgb(80, 113, 180)' /%3E%3C/svg%3E") no-repeat;
  margin-left:1.5em;
}


/*トップページ用途*/
ul.youto-2dan_01 {
  list-style: none; /* デフォルトのリストスタイルを削除 */
  padding: 0 !important;
  margin: 0 !important;
}

@media (min-width:768px) {
  div.top-youto_01 {
    column-count: 2;
    column-gap: 3rem;
}
 .youto-2dan_01 {
    break-inside:avoid;  /* 切られたくない要素に設定 */
    /* list-style: none; */ /*リスト点を消してpadding-left:0;左寄せが聞かないのでulにps-0で対応*/
  }
}
dl.youto-2dan_01:not(:first-child){margin-top: 1.5rem;}


/*トップページ用途 リスト項目のスタイル */
.dt-youto_99 div, .dt-youto_98 ,
.kategri-list_03 div,
.kategri-list_04 {
  display: flex; /* フレックスボックスで子要素を横並びに */
  align-items: flex-start; /* 垂直方向で上揃え */
  background-color: var(--skyblue-color_01) !important;
  border-radius: 0.25rem;
  padding: 0.5rem; /* 項目全体の余白 */
  margin-bottom: 0.5rem; /* 項目間のスペース */
  color: var(--ao-color_01); /* テキストカラー */
  line-height: 1.5; /* 行の高さを統一 */
}

/*トップページ用途  リストアイコン */
.dt-youto_99 div::before, .dt-youto_98::before ,
.kategri-list_03 div::before,
.kategri-list_04::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='rgb(80, 113, 180)' /%3E%3C/svg%3E");
  margin-right: 0.5rem; /* テキストとの間隔 */
  height: 1em; /* テキストの高さに揃える */
  flex-shrink: 0; /* アイコンが縮小されないように設定 */
  display: inline-block; /* テキストと同じ基準で配置 */
  vertical-align: middle; /* 1行目の中央に揃える */
  margin-left: 0.5rem;
}

/*トップページ用途  リンクのスタイル */
.dt-youto_99 div a ,
.kategri-list_03 div a {
  text-decoration-color: currentColor;
  color: var(--ao-color_01); /* リンクの色 */
  flex: 1; /* リンクが残りの幅を埋める */
  display: inline-block; /* アイコンと同じ配置基準 */
}

.youto-2dan_01 dd{
  display: list-item;
  margin-left:3rem;
  margin-bottom: 0.25rem;
  line-height:1.5 ;
}/*font-size: 0.875rem;*/

.dt-youto_99 , .dt-youto_98 {font-weight: normal;}


/*見出し「手動」リンク*/
.kategri-list-big_01 a{
  display: block;
  padding: 0.5rem; /*aリンク全体の為に親でなくaにpaddingを設定する*/
  height: 100% !important;
}

.kategri-list-big_01 span{  color: var(--ao-color_01);
  display: list-item;
  padding: 0rem;
  list-style: url('../img/right-bold.svg');
  list-style:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='rgb(80, 113, 180)' /%3E%3C/svg%3E") no-repeat;
  margin-left:1.5em;
  font-weight: bold;
  line-height: 1.4;
}
.kategri-list-big_01{
  font-size: 140%; /*デフォルトh3が設定されてる為*/
  background-color: var(--skyblue-color_01) !important;
  border-radius: 0.25rem;
  margin: 1rem 0;
}

/*リンクのアンダーラインの色*/
.kategri-list_01 a:hover,
.kategri-list-big_01 a:hover{
  color: var(--ao-color_01);
  text-decoration-color: currentColor;
}
/*全体リンクの見出しの下のrowのガターが広くて見出しにかぶってる部分が全体リンクにならないのでかぶらないようにここで下マージンを広く指定*/
.category-page_01 .kategri-list-big_01 {margin-bottom: 1.5rem;}


/*線box内の刃アップ部分の見出し*/
.midashi_sonota_05{
  border-left: 10px solid var(--ao-color_01);
  padding:0.5rem 1.25rem;
  margin-bottom: 0.25rem;
}
/*45120,45-121,などのspanの後ろにスラッシュ。*/
/*最後を除く。最後はスラッシュいらないので。*/
p.model-number-slash_01 span:not(:last-child)::after { content: "/";}
p.model-number-slash_01 span{display: inline-block;}
p.model-number-slash_01{text-align: initial;}/*左によせる為*/


main .sonota-aside_01{
border: 3px solid rgb(232, 232, 232);}


/*基本section。sectionを使うほどではない場合も使用ok。 sectionには必ずH見出しが必須 */
/* .setsumei-midashi_01{margin-bottom: 6rem;}*/
.mt-6_01{margin-top: 6rem !important;}/*上側のマージンを6rem  setsumei-midashi_01に合わせて*/
.mb-6_01{margin-bottom: 6rem !important;}/*上側のマージンを6rem  setsumei-midashi_01に合わせて*/
.mt-7_01{margin-top: 10rem !important;}/*1ページに複数の場合などに使用ストマックやWELDY等*/
.mb-7_01{margin-top: 10rem !important;}/*1ページに複数の場合などに使用ストマックやWELDY等*/


article{margin-bottom: 6rem;}/* articleの下マージン 商品メイン画像のあるエリア。*/


/*動画*/
@media (min-width:769px) { /* miin-は「未満」*/  /* pc時、動画が大きすぎるので調整*/
  .ratio{ width: 70%;
    margin: 0 auto; }
}
.ratio{margin-bottom: 6rem;}/* 動画の下マージン sectionとmb-6_01と同じ*/

/*動画2個横並び*/
@media (min-width: 769px){
  .douga-2retsu_01 .ratio {
  width: initial;
  margin: 0 auto;
  }
}








/* 表tabel 共通スタイル ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
.table>:not(:last-child)>:last-child>* {  border-bottom-color: var(--border-gray_01) !important;}/*theadがある時に下線が文字の色となってる。scssで指定されてるようなので*/
table {width:100%; border-collapse:collapse; border:1px solid var(--border-gray_01);}
table th {padding:0.75rem 1rem ; border:1px solid var(--border-gray_01); text-align:center; }/*padding:0.5rem;*/
table td {padding:0.75rem 1rem; border:1px solid var(--border-gray_01); text-align:center; }/*padding:0.5rem;*/
.td-spac-midashi_01{background:#eee; font-weight: normal;}/*表スペックの見出し*/

/*md未満は全て1行、縦長*/
@media (max-width:767px) {
  table.td-md-mobile_d-block_01{border: none; border-bottom:1px solid var(--border-gray_01);}
  table.td-md-mobile_d-block_01 th,table.td-md-mobile_d-block_01 td{display: block; border-bottom: none;}
}
/*sm未満は全て1行、縦長*/
@media (max-width:575px) {
  table.td-sm-mobile_d-block_01{border: none; border-bottom:1px solid var(--border-gray_01);}
  table.td-sm-mobile_d-block_01 th,table.td-sm-mobile_d-block_01 td{display: block; border-bottom: none;}
}



/*商品一覧用2段組み 等*/
@media (min-width:768px) {
  .text-dangumi-2_01 ul {
      column-count: 2;
      column-gap: 5rem;
  }
  .text-dangumi-2_01 ul li{
    break-inside:avoid;  /* 切られたくない要素に設定 */
    font-size: 94%;
  }
}


/*商品説明用2段組み 等*/
@media (min-width: 768px) {
  .list-dangumi-2_02 {
    column-count: 2;
    column-gap: 5rem; 
}
  .list-dangumi-2_02 li{
  break-inside:avoid;  /* 切られたくない要素に設定 */
}
}

/*商品説明用3段組み 等*/
@media (min-width: 576px) {
  .list-dangumi-3_01 {
      column-count: 3;
      column-gap: 5rem;
  }
  .list-dangumi-3_01 li {
    break-inside:avoid;  /* 切られたくない要素に設定 */
  }
}





main ul.list-text01 li{
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin-bottom: 0.2rem !important;
}



/*画像の上に文字*/
.img-caption_01{position: relative;/*親要素にrelative*/}
.img-caption_02{
  position: absolute;/*重ねたい子要素にabsolute*/
  bottom:0;
  left: 50%;
  transform: translate(-50%,-5px);/*センター寄せの修正*/
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0 -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
font-weight: bold;
}



/* img-fluidと同じ 画像を画面幅に合わせて調整 */
main img {
  max-width: 100%;
  height: auto;
  }
  /*画像のレスポンシブ解除*/
  img.img-size-kotei_01{max-width: none;}/*サーバーでinitialが効かなかったのでnoneで対応*/
  
  /* 画像を中央に */
  img.img-center_01{
    margin: 0 auto; 
    display: block; 
  }

  .img-border_01{border: solid 1px var(--border-gray_01);}


/* 商品のメイン画像　標準タイプ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
img.main-img_01{  /*padding: 1rem;*/
	margin: 0 auto; /*画像を中央*/
  display: block; /*画像を中央*/
}

/*  商品のメイン画像　カルーセル bootstrap ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
main .shouhin-carousel_01 .carousel {
	max-width: 400px; /* col-md-6 col-lg-5なので、実際メイン画像の横幅は390pxくらい*/
	margin: 0 auto;
}

/*メイン画像のサイズ*/
main .shouhin-carousel_01 .carousel-item img {max-width: 400px; /*padding: 1rem;*/}

/*メイン画像の普通タイプのmax-widthがおかしいのでメディアクリで指定した。md未満
画像をmax-width400pxにすると画像がある程度以下に小さくならない。
画像の親要素にmax-width400px+ガター12px(デフォルトのガターbs-gutter-x: 1.5rem;)の左右24pxたした424pxを
親用を設定して画像の横幅を400pxにした
カルーセル以外のメイン画像？*/
div.main-right_01{margin-bottom: 0;}
@media (max-width:767px) {
  div.main-right_01{
    max-width: 424px;
    margin: 0 auto;
    margin-bottom: 1rem;
  }
}







/*main .shouhin-carousel_01 .carousel-inner{margin-bottom: 0.25rem;}*/

main .shouhin-carousel_01 .carousel-indicators [data-bs-target] {
text-indent: 0px;
width: initial; /*初期値                              */

 /*  width: 70px;  margin: 0 auto;  */ 
opacity: 1;
height: initial; /*初期値                              */
border:  initial; /*初期値                              */
		/*border-top:  initial; */ /*初期値                              */
		/*border-bottom:  initial; */ /*初期値                              */

max-width: 76px; /*576px以上の設定*/ /*d-noneで非表示なので設定必要ないので消してもいいし*/
margin-right: 0.31rem; /*gy-1 上側のガターを0.25rem*/
margin-left: initial;
}
 main .shouhin-carousel_01 .carousel-indicators li:nth-child(5){margin-right: initial;}
 main .shouhin-carousel_01 .carousel-indicators li:nth-child(10){margin-right: initial;}/* 折り返し右余白10個分まで設定。なので画像は14個まで*/
/*サイドとメインのガターが狭すぎたのでgx-5設定したので非表示。単位rem？
@media (min-width:768px) { 
  main .shouhin-carousel_01 .carousel-indicators img{width: 64px;}
  main .shouhin-carousel_01 .carousel-indicators [data-bs-target] {margin-right: 0.25rem ;}
}
@media (min-width:992px) { 
  main .shouhin-carousel_01 .carousel-indicators img{width: 72px;}
  main .shouhin-carousel_01 .carousel-indicators [data-bs-target] {margin-right: 0.25rem ;}
}
@media (min-width:1200px) { 
  main .shouhin-carousel_01 .carousel-indicators img{width: 63px;}
  main .shouhin-carousel_01 .carousel-indicators [data-bs-target] {margin-right: 0.267rem ;}
}
 @media (min-width:1400px) { 
  main .shouhin-carousel_01 .carousel-indicators img{width: 73px;}
  main .shouhin-carousel_01 .carousel-indicators [data-bs-target] {margin-right: 0.367rem ;}
}
*/

@media (min-width:768px) { /*横幅336pxとする*/
  main .shouhin-carousel_01 .carousel-indicators img{width: 64px;}
  main .shouhin-carousel_01 .carousel-indicators [data-bs-target] {margin-right: 4px ;}
}
@media (min-width:992px) { /*横幅376pxとする*/
  main .shouhin-carousel_01 .carousel-indicators img{width: 72px;}
  main .shouhin-carousel_01 .carousel-indicators [data-bs-target] {margin-right: 4px ;}
}
@media (min-width:1200px) { /*横幅329.75pxとする*/
  main .shouhin-carousel_01 .carousel-indicators img{width: 63px;}
  main .shouhin-carousel_01 .carousel-indicators [data-bs-target] {margin-right: 3.685px ;}
}
 @media (min-width:1400px) { /*横幅386pxとする*/
  main .shouhin-carousel_01 .carousel-indicators img{width: 73px;}
  main .shouhin-carousel_01 .carousel-indicators [data-bs-target] {margin-right: 5.25px ;}
}



main div.indicators-width_01{max-width: 400px;}

main .shouhin-carousel_01 .carousel-indicators {
position:  initial; /*初期値                              */
justify-content: start;
margin-right: auto;
margin-left: auto; 
		/*bottom: -140px; */
}


img.main-img_01  {border: 1px solid var(--border-gray_01);}/*メイン画像の枠線*/
main .shouhin-carousel_01 .carousel  {border: 1px solid var(--border-gray_01);  }/*カルーセル　メイン画像の枠線*/
main .shouhin-carousel_01 .carousel-indicators img {border: 1px solid var(--border-gray_01);}/*カルーセル　サムネイル画像の枠線*/


main .shouhin-carousel_01 .carousel-control-next-icon , main .shouhin-carousel_01 .carousel-control-prev-icon {     
filter: drop-shadow(2px 2px 4px dimgray) !important;
}


/* urlの階層注意 */
main .shouhin-carousel_01 .carousel-control-next-icon 
, .shouhin-carousel_02 .carousel-control-next-icon {
    background-image: url(../img/arrow-right-gray.svg); }
main .shouhin-carousel_01 .carousel-control-prev-icon 
, .shouhin-carousel_02 .carousel-control-prev-icon  {
    background-image: url(../img/arrow-left-gray.svg); }

/*カルーセル 矢印 不透明度*/
.shouhin-carousel_01 .carousel-control-next, .shouhin-carousel_01 .carousel-control-prev
, .shouhin-carousel_02 .carousel-control-next, .shouhin-carousel_02 .carousel-control-prev {    opacity: 0.5;}
.shouhin-carousel_01 .carousel-control-next:hover, .shouhin-carousel_01 .carousel-control-prev:hover
,.shouhin-carousel_02 .carousel-control-next:hover, .shouhin-carousel_02 .carousel-control-prev:hover { opacity: 1;}

/* 矢印の位置を初期値にする */
main .shouhin-carousel_01 .carousel-control-next, main .shouhin-carousel_01 .carousel-control-prev
,main .shouhin-carousel_02 .carousel-control-next, main .shouhin-carousel_02 .carousel-control-prev
{  width:initial; /*初期値                              */}

.shouhin-carousel_01 .carousel-caption{
  bottom: 0rem !important; /*カルーセル画像の文字の位置*/
  padding-bottom: initial !important;
text-align: center !important;
vertical-align: bottom !important;
}
.shouhin-carousel_01 .carousel-caption * { /*文字数により中央位置classで変えるtext-center*/
margin-bottom:0 ;
/* text-shadow:  1px 1px 0px white , 0px 0px 5px white , 0px 0px 2px white ;
mix-blend-mode:hard-light;
background-color: rgba(255,255,255,0.5); */ /*文字の背景を透過白*/
font-size: 0.75rem; /* 12px */
text-shadow:
1px 1px 0 #FFF, -1px -1px 0 #FFF,
-1px 1px 0 #FFF, 1px -1px 0 #FFF,
0px 1px 0 #FFF,  0 -1px 0 #FFF,
-1px 0 0 #FFF, 1px 0 0 #FFF; /*上下左右と斜めの8箇所に影をつけて縁取りを表現*/
}

/*カルーセルキャプション上配置
.carousel-caption {
  padding-top: initial !important;
  top: 0.5rem;
  padding-bottom: initial !important;
  text-align: center !important;
  vertical-align: bottom !important;
}
*/




/* ヘッダー ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/*ハンバーガーメニューのボタンを閉じる為にバツにする*/
.navbar-light .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M6 6L 24 24M24 6L6 24'/%3E%3C/svg%3E");
}

header .navbar {
border-top: 0 !important;
  border-bottom: 1px solid var(--border-gray_01) !important;
  margin-bottom: 2rem;
  box-shadow: 0 4px 8px -4px var(--border-gray_01); /*  box-shadow: 0 1px 8px var(--border-gray_01);  右に0、下に4px移動、ぼかし8px、広がりを-4px（これで上にはみ出さない） */
}

.top-bar {
  height: 1.6rem;
  background-color: var(--ao-color_01);
  color: #fff;
  display: flex;
  align-items: center;
}

.top-bar .container-xl {
/*  display: flex;                   /* 内部をFlexに */
  justify-content: flex-end;        /*右寄せ */
  align-items: center;             /* 縦中央 */
  padding: 0;                      /* Bootstrap の余白を無効化 */
}

.top-text {
  font-size: 0.8rem;
  line-height: 1;
  margin: 0;         /* h1の余白を打ち消す */
  padding: 0;        /* 念のためpaddingもリセット */
  font-weight: normal; /* h1に合わせるならbold、spanに合わせるならnormal */
  display: inline-block; /* 縦方向の微調整が効くようにする */
}



header .navbar-brand span{font-size: 80%;}

header a.nav-link:not(.toiawase-head){text-decoration:none;
  font-weight: bold;
  color: var(--ao-color_01) !important;}/*ヘッダーの商品情報などの文字の色*/

header a:not(.navbar-brand):hover , .sidebar01 nav a:hover {text-decoration: none;
/*font-weight: bold;*/
opacity: initial;
filter: initial;
-moz-opacity: initial;
}


header ul li {
    padding-left:0.5rem ;
    padding-right: 0.5rem;
}


@media (min-width:1200px) { 
  header ul li{
    border-right: 1px solid var(--border-gray_01);
  }
}

/*ハンバーガーメニュー時、文字の左の余白調整*/
@media (max-width:1199px) { 
  header ul a{
    padding-left: 0.5rem !important;
  }
  /*ヘッダー内カテゴリから探すの商品カテゴリ*/
header li .dropdown-item{
  white-space: normal; /*改行ok*/
  font-size: 90% !important;
  padding: 0;
}
header li .dropdown-item img{
  margin-right: 0.5rem;
}
}

/*最後のみ last-child */
@media (min-width: 1200px) {
header ul li:last-child,
header ul li:nth-last-child(2) ,
header ul li:nth-last-child(3) {
  border-right: none;
  }
}

@media (min-width: 1200px) {
header .nav-link {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  }
}

/*ロゴのサイズ*/
header .navbar-brand img {
  width:256px; /* 200px */
  height: auto;
}

@media (max-width: 575px) {
  header .navbar-brand img {
    width:224px;
  }
}


header a:hover{text-decoration: none;}/*header リンクホバーのアンダーライン無し */
header .nav-link:hover {border-radius: 0.25rem;}/*header　hover時リンクは全て角丸 */

/*ロゴと社名は除く*/
header a:not(.navbar-brand, .toiawase-head){border-radius: .25rem;}
/*header a:not(.navbar-brand, .toiawase-head):hover {background-color: #e9ecef !important;}*/
/* header a.dropdown-item{color: var(--ao-color_01);}*/
header .dropdown-item:focus, header  .dropdown-item:hover{background-color: transparent;}
#navbarsExample07 a.nav-link:not(.toiawase-head):hover{
  text-decoration: underline;
  text-underline-offset: 4px ;
  background-color: var(--link-hover_01) ; }/*#e9ecef*/

/*ヘッダーの問い合わせボタン */
header .toiawase-head{
  background-color: rgb(77, 212, 172) ;
  border-radius: .25rem;
  color: white !important;
}

header .toiawase-head:hover{
  background-color: rgb(210, 244, 234);
  color:  rgb(19, 121, 91) !important;
}

test★{
  color: rgb(13, 80, 60);
  color: rgb(19, 121, 91);
  color: rgb(32, 201, 151);
  color: rgb(77, 212, 172);
  color: rgb(121, 223, 193);
  color: rgb(166, 233, 213);
  color: rgb(210, 244, 234);
}

header .d-xl-none{
  border-top: 1px solid var(--ao-color_01) ;
  padding-top: 0.5rem;
}



/* ヘッダーナビのドロップダウンの三角を開閉で向きを上下させる */
.dropdown-toggle {
  outline: 0;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: 0.4em solid; /* デフォルトは.3だった*/
  border-right: 0.4em solid transparent;
  border-bottom: 0;
  border-left: 0.4em solid transparent;
  transform: rotate(180deg);
}

.dropdown-toggle[aria-expanded="false"]::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: 0.4em solid;
  border-right: 0.4em solid transparent;
  border-bottom: 0;
  border-left: 0.4em solid transparent;
  transform: rotate(0deg);
}


/*ヘッダー　カテゴリから探す------------------------------------------- */
header ul.dropdown-menu{padding: 0.125rem 0; margin-bottom: 0.125rem;}

header ul.dropdown-menu li a {
  padding-left: 2.5rem !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

header hr.dropdown-divider {margin: 0.125rem 0;}
/*hr水平線もliなので順番注意*/
/*ワイヤーストリッパー*/
header ul.dropdown-menu li:nth-child(1) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-wirestripper_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}/*ケーブルストリッパー*/
header ul.dropdown-menu li:nth-child(3) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-cablestripper_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}/*同軸線ストリッパー*/
header ul.dropdown-menu li:nth-child(5) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-coax_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}/*フィルム被覆線ストリッパー*/
header ul.dropdown-menu li:nth-child(7) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-filmstr_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}/*ワイヤーケーブルチューブカッター*/
header ul.dropdown-menu li:nth-child(9) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-wirecutter_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}/*圧着クリンプツール*/
header ul.dropdown-menu li:nth-child(11) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-crimptool_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}/* 電線供給機等周辺機器*/
header ul.dropdown-menu li:nth-child(13) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-shuhen_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}/*結束機*/
header ul.dropdown-menu li:nth-child(15) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-cable-ties_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}/* その他の電線加工機・周辺機器*/
header ul.dropdown-menu li:nth-child(17) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-kakou_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}/*ワイヤーコネクター*/
header ul.dropdown-menu li:nth-child(19) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-connect_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}/*ヒートガン*/
header ul.dropdown-menu li:nth-child(21) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-heat_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}/*環境改善対策商品*/
header ul.dropdown-menu li:nth-child(23) > a.dropdown-item {
  padding-left: 2.25rem; /* アイコン分の余白 */
  background: url(../img/nav-kankyo_48.jpg) no-repeat left 0.75rem center; 
background-size: 20px;
}


/*★★サイト内検索が完了するまでは非表示★★
header .nav-item:last-child{display: none !important;}*/









@media (max-width:1199px){
  header .nav-item:nth-last-child(-n+2) { margin-top: 4px; }
}

@media (max-width:767px){
  .top-bar {height: 12px;}/* バーの高さ */
}

#___gcse_0 td{    padding: 0px !important;}

form.gsc-search-box{margin-bottom:0 !important;}




/* メイン main ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/*パンくずリスト 複数ある場合もあるので、最後以外下マージン0。1個だけは下マージンあり。*/
.breadcrumb:not(:last-child){margin-bottom: 0 ;}

.mobile-main-category_02 td{
  width: 50%;
}

.mobile-main-category .col-auto a::before{
  content: "> ";
}

.mobile-main-category .col-auto a{
margin-right: 1.25rem;
}



/* トップページ　お知らせ・ニュース*/

.news-logbox_02 dl {
  padding-top:1rem ;
  padding-bottom:1rem ;
  width: auto;
  border-bottom: dotted 1px #bebebe;
  margin-bottom: 0rem;
}


.news-logbox_02 dt { font-weight: normal;
  width: 15rem;
  float: left;
  padding: 4px 5px;
}

.news-logbox_02 dd {
  width: auto;
  margin: 0 0 0 15.5rem;
  padding: 4px 5px;
}

@media (max-width:797px) {
  .news-logbox_left_02{
      float: inherit;
  }

  .news-logbox_02 dt {
      width: 100%;
      float: inherit;
      padding: 4px 5px;
  }

  .news-logbox_02 dd {
      width: auto;
      margin: 0 0 0 0px;
      padding: 4px 5px;
  }
}

.news-logbox_02 dt span{display: inline-block;
  font-weight: normal;
font-size: 90%;
padding: 0.1rem 0.9rem;
margin: 0 0 0 1rem;
vertical-align: middle;/* 文字サイズが小さいので ベースライン　親要素のミドルラインに揃える */
border-radius: 2px;
}
span.news-seihin_01{background: #f8d7da; color: #dc3545;}
span.news-kigyou_01{background: #d1e7dd; color: #198754;}










/* サイドバー ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.sidebar01{margin-bottom:3rem;}

hr.side_hr{
  margin-bottom: 0.25rem !important;
  margin-top: 0.25rem !important;
  background-color: var(--border-gray_02);
  opacity: initial; /*bootstrap上書き*/
}

.side-nav-outline_01{
  border: 1px solid var(--border-gray_02);
  border-top: 0 ;
  padding: 0.25rem 0;
}



.sidebar01 nav {
  border-radius:4px 4px 0 0;
  overflow: hidden; /*子要素がはみ出す場合（重要）*/
}


.sidebar01 .nav-link{
  color: inherit; /* link-darkがあればこの記述いらない ルールから除外 */
  padding: 0.35rem 0.5rem ; /* サイドメニューのリンクのボックスのサイズをデフォルトから調整 */
}



.sidebar01 .bg-light{justify-content: start; background-color:transparent !important; }
@media (min-width:1200px) { /* 画面サイズが◯◯px以上に適用、1200pxはサイドバーが下にくる時 max-は「以上」、miin-は「未満」*/
  .sidebar01 .bg-light{
    justify-content: end;
  }
}

.sidebar01 dd {
  margin-bottom: 0 !important;
}


.side-lineup_01 span{color:white; font-weight: bold;}
.side-lineup_01{
  text-align: center;
  padding-top: 0.5rem;
  padding-bottom:0.5rem;
  margin-bottom: 0 ;
  background-color: var(--ao-color_01);  
}



.side-img_01 dt {
  padding-top: 0 !important;
  padding-left: 1.5rem !important;

}
.side-img_01 dd a{
    padding-left: 1rem !important;
    background: url(../img/side-nav_arrow.svg) no-repeat 0 50%;/*../img/side-nav_arrow.svg*/
      /* 背景画像画像サイズ */
  -webkit-background-size: 11px;
  background-size: 11px;
background-position:left 0.5rem center;/*左端から0.5rem 上下中央*/
/*background-position:left 0.5rem top 50%;*/
}

.side-img_01 dt .nav-link {margin-left: -1.5rem !important; padding-left: 2rem !important;}
.side-img_01 dd .nav-link { padding-left: 1.5rem !important;}


/*サイドバーのdlのカテゴリ画像---------------------*/
/*background-position上下centerにすると横幅狭い時にカテゴリ名が2行になると画像もそのまま上下中央になってしまうから上下centerやめる*/
/*ワイヤーストリッパー*/
.sidebar01 nav dl:nth-of-type(1) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-wirestripper_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}
/*ケーブルストリッパー*/
.sidebar01 nav dl:nth-of-type(2) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-cablestripper_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}
/*同軸線ストリッパー*/
.sidebar01 nav dl:nth-of-type(3) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-coax_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}
/*フィルム被覆線ストリッパー*/
.sidebar01 nav dl:nth-of-type(4) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-filmstr_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}
/*ワイヤーケーブルチューブカッター*/
.sidebar01 nav dl:nth-of-type(5) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-wirecutter_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}
/*圧着クリンプツール*/
.sidebar01 nav dl:nth-of-type(6) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-crimptool_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}
/* 電線供給機等周辺機器*/
.sidebar01 nav dl:nth-of-type(7) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-shuhen_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}
/*結束機*/
.sidebar01 nav dl:nth-of-type(8) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-cable-ties_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}
/* その他の電線加工機・周辺機器*/
.sidebar01 nav dl:nth-of-type(9) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-kakou_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}
/*ワイヤーコネクター*/
.sidebar01 nav dl:nth-of-type(10) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-connect_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}
/*ヒートガン*/
.sidebar01 nav dl:nth-of-type(11) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-heat_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}
/*環境改善対策商品*/
.sidebar01 nav dl:nth-of-type(12) dt > a.nav-link {
  padding-left: 30px; /* アイコン分 */
  background: url(../img/nav-kankyo_48.jpg) no-repeat left 5px top 6px;
  background-size: 20px;
}



/*サイドのカテゴリ大　ワイヤーストリッパー等*/
.sidebar01 nav dl dt > a.nav-link:hover {
  background-color: var(--link-hover_01); /*#e9ecef  rgb(210, 244, 234)*/
}

/*サイドのカテゴリ小　手動・半自動・全自動など*/
.sidebar01 a:hover {
  background-color: var(--link-hover_01); /*#e9ecef  rgb(210, 244, 234)*/
  border-radius: .25rem;
  text-decoration: none;
}

/*スマホ時だけ表示のハンバーガー内のカテゴリ*/
header ul.dropdown-menu li > a.dropdown-item:hover {
  background-color: var(--link-hover_01); /*#e9ecef  rgb(210, 244, 234)*/
}




/*サイドバーのカテゴリ縦棒*/
.sidebar01 nav dl:nth-of-type(1) {border-left: 6px solid rgb(72, 173, 218); }/*ワイヤーストリッパー*/
.sidebar01 nav dl:nth-of-type(2) {border-left: 6px solid rgb(130, 62, 50); }/*ケーブルストリッパー*/
.sidebar01 nav dl:nth-of-type(3) {border-left: 6px solid rgb(42, 163, 167);}/*同軸線ストリッパー*/
.sidebar01 nav dl:nth-of-type(4) {border-left: 6px solid rgb(172, 161, 88);}/*フィルム被覆線ストリッパー*/
.sidebar01 nav dl:nth-of-type(5) {border-left: 6px solid rgb(0, 152, 75); }/*ワイヤーケーブルチューブカッター*/
.sidebar01 nav dl:nth-of-type(6) {border-left: 6px solid rgb(236, 193, 0); }/*圧着クリンプツール*/
.sidebar01 nav dl:nth-of-type(7) {border-left: 6px solid rgb(176, 137, 81); }/* 電線供給機等周辺機器*/
.sidebar01 nav dl:nth-of-type(8) {border-left: 6px solid rgb(113, 81, 153);}/*結束機*/
.sidebar01 nav dl:nth-of-type(9) {border-left: 6px solid rgb(0, 104, 179); }/* その他の電線加工機・周辺機器*/
.sidebar01 nav dl:nth-of-type(10) {border-left: 6px solid rgb(136, 185, 79);}/*ワイヤーコネクター*/
.sidebar01 nav dl:nth-of-type(11) {border-left: 6px solid rgb(174, 54, 122);}/*ヒートガン*/
.sidebar01 nav dl:nth-of-type(12) {border-left: 6px solid rgb(60, 65, 128);}/*環境改善対策商品*/



/*サイドメニューのワイヤー・ケーブル・チューブカッターの横幅縮小*/
@media (min-width:1400px){
  .sidenav-cutter_01{letter-spacing:-0.07rem ;}
}

/*サイド内電話番号お問い合わせ*/
#side-toawase_02 *{ vertical-align: middle;}
#side-toawase_02{padding: 0.5rem ; text-align: center; border: solid 1px gray;}
#side-toawase_02 i {font-size: calc(1.275rem + 0.3vw); margin-right: 0.5rem; color: gray;}
#side-toawase_02 span:nth-of-type(1) {margin-right:0.5rem ; color: gray; font-size: 90%;}
#side-toawase_02 span:nth-of-type(2) {font-size: calc(1.275rem + 0.3vw); font-weight: bold; color: #D21717; letter-spacing: -0.02rem;}
@media (min-width:768px) and (max-width:1199px){
  #side-toawase_02 span:nth-of-type(2) {font-size: calc(1.375rem + 1.5vw);  letter-spacing:initial;}
  #side-toawase_02 div{display: inline-block; }
  #side-toawase_02 div:nth-of-type(1){margin-right:  calc(1.375rem + 1.5vw);}
}

/*サイド内フォームお問い合わせ*/
#side-toawase_03 *{ vertical-align: middle;}
#side-toawase_03{padding: 0.5rem ; text-align: center; border: solid 1px gray;}
#side-toawase_03 i {font-size: calc(1.275rem + 0.3vw); margin-right: 0.5rem; color: gray;}
#side-toawase_03 span {font-size: 90%; color: gray;}
@media (min-width:768px) and (max-width:1199px){
  #side-toawase_03 div:nth-of-type(1){margin-right:  calc(1.375rem + 1.5vw);}
}




/* 商品スペック表 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/*オプション：位置　縦長な表だと見えないので 縦長すぎるところはcss直書きで*/
.scroll-hint-icon:not(.kakaku_03 .scroll-hint-icon){top: 34% !important;}/*価格表以外の表スクロール。スペック表*/
.kakaku_03 .scroll-hint-icon{top:16rem !important;}/*縦が短い場合は直書きで*/

/* scroll_01があればtable-responsiveはいらないかも */
.scroll_01 table{
	width:100%;
  margin-bottom:0.5rem;/*1rem*/
	}

	.scroll_01{
        overflow-x: auto;    /*tableをスクロールさせる*/
	white-space: nowrap;  /*tableのセル内にある文字の折り返しを禁止*/
  margin-bottom: 2rem;
	scrollbar-width: auto; /* Firefox */
  scrollbar-color: #666 #dfdfdf; /* Firefox */
	}
	/*tableにスクロールバーを追加*/
  .scroll_01::-webkit-scrollbar{height:0.75rem;}/*9px*/ 

	/*tableにスクロールバーを追加*/
  .scroll_01::-webkit-scrollbar-track{border-radius:9px;background-color:#dfdfdf}

	/*tableにスクロールバーを追加*/
  .scroll_01::-webkit-scrollbar-thumb{border-radius:9px;background-color:#666}



/*商品スペック表 横スクロールバー　スライダー上でカーソルをパーにする
バーが表示されたら手のひらというわけではない
サイドバーが無い時や、sm以下でスライドバーが最小じゃないと出ない時などは手のひらになってるがよしとする。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media (max-width: 575px){
  .scroll_cursor-grab_sm {cursor: grab;}
  .scroll_cursor-grab_sm:active {cursor: grabbing;}
}
@media (max-width: 767px){
  .scroll_cursor-grab_md {cursor: grab;}
  .scroll_cursor-grab_md:active {cursor: grabbing;}
}
@media (max-width: 991px){
  .scroll_cursor-grab_lg {cursor: grab;}
  .scroll_cursor-grab_lg:active {cursor: grabbing;}
}
@media (max-width: 1199px){
  .scroll_cursor-grab_xl {cursor: grab;}
  .scroll_cursor-grab_xl:active {cursor: grabbing;}
}
@media (max-width: 1399px){
  .scroll_cursor-grab_xxl {cursor: grab;}
  .scroll_cursor-grab_xxl:active {cursor: grabbing;}
}
/*全サイズでドラッグでスクロール時、手のひらポインター*/
.scroll_cursor-grab_all {cursor: grab;}
.scroll_cursor-grab_all:active {cursor: grabbing;}
  



/*★表tableの下に文字がある場合の余白 pだと下余白なので基本div*/
/*.scroll_01 table の下余白がある場合…mt-lg-などで対応*/
/*スクロールが無い表tableの直下テキスト単純余白…mt-2で対応*/
/*★使用例など画像の下に文字がある場合の余白 pだと下余白なので基本div…mt-2で対応*/








/* 問い合わせフォーム ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
.form-table_01 th{text-align: left;}
.form-table_01 td{text-align: left;}

@media (max-width: 767px){
  table.form-table_01  {
    display: block;
    width: 100%;
  }
  table.form-table_01  tbody {
    display: block;
    width: 100%;
  }
  table.form-table_01  tr {
    display: block;
    width: 100%;
  }
  table.form-table_01  th {
    display: block;
    width: 100%;
  }
  table.form-table_01  td {
    display: block;
    width: 100%;
  }
}
  
  /*フォーム用の設定
  ----------------------------------------------------------------------------------*/

  #formmail3 {
    border-collapse: collapse;
  }
  

.badge_01{
  margin-left: 0.5rem;
  background-color: #d32f2f !important; /*#dc3545*/
  display: inline-block;
  padding: 0.35em .65em;
  font-size: 0.8em;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: .25rem;
  position: relative;/*単体 微調整用*/
  top: -0.1em;/*日本語位置調整*/
}


  #formmail3 a:link{color: #00ff00;
  text-decoration: underline}
  #formmail3 a:hover{color: #ff00ff;}
  #formmail3 a:active{color: #3366FF;}
  #formmail3 a:visited{color: #d4f3ff;}
    

  form.form_2 table{border: none;}
  
  form.form_2 table, form.form_2 th, form.form_2 td{
    /*border-bottom: 1px solid green;*/
    font-weight: normal;
    vertical-align:top ;
  }
  
  form.form_2 th, form.form_2 td{
    padding: 0.7rem;
    line-height: 2;
  }  
  
  form.form_2 th{background-color: #eee;}
  
  form.form_2 table td input.form-textbox_01{
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;/*bodyのcolor*/
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--border-gray_01);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }

/* ラジオボタン */
  form.form_2 table td input.form-radio_01{
  border: 1px solid rgba(0, 0, 0, .25);
  accent-color: #0d6efd;
  margin-right: 0.5rem;
  margin-left: 1rem;

    /* 大きさ */
    inline-size: 1.25rem;
    block-size: 1.25rem;
    /* transform:scale(1.5);   ラジオボタン拡大 */
}

/* チェックボタン */
  form.form_2 table td input.form-check_01{
      accent-color: #0d6efd;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
      /* 大きさ */
    inline-size: 1.25rem;
    block-size: 1.25rem;
  /* transform:scale(1.5); チェックボタン拡大 */
  }
  
  /*都道府県*/
  form.form_2 table select
  {
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid var(--border-gray_01);/*#ced4da*/
    border-radius: .375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  form.form_2 table textarea {
    min-height: calc(1.5em + (.75rem + 2px));
  
    display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--border-gray_01);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }
  

  /*名前*/
  form.form_2 table td div.form-name-width_01{
  display: inline-block;
  }
  
  /*名前の横幅*/
  form.form_2 table td div.form-name-width_01 input{
      width:10rem;
  }
  
  @media (max-width: 767px) {
    /*名前の横幅*/
    form.form_2 table td div.form-name-width_01 input{
      max-width:100%;
    }
    form.form_2 table td div.form-name-width_01{
      margin-bottom: 1rem;
    }
  }
  
  /* PC画面時の左thの横幅 */
  @media (min-width: 768px) {
    form.form_2 th{
      width: 220px;
    }
  }  
  
  button:hover{
    text-decoration: underline;
    opacity: 0.6;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    text-decoration: none;
  }
  
  /* スマホ時の縦並びでtdの下マージンで境界段落に見えるようにする*/
  @media (max-width: 767px) {
    form.form_2 div.form-td_margin_01{
      margin-bottom: 1.5rem;
    }
  }
  
  /* 数量ボックスを品名ボックスと合わせる */
  @media (max-width: 1399px) {
  form.form_2 span.form-suuryou_box_01{
    display: inline-block;
    margin-left: 7rem;
    }
  }
  
  @media (max-width: 451px) {
    form.form_2 span.form-syouhinmei_box-midashi_01{
      display: block;
    }
  
    form.form_2 input.form-syouhinmei_box_01{
      display: block;
    }
  
    form.form_2 span.form-suuryou_box_01{
      display: block;
      margin-left: initial;/* 初期化 */
    }
  }
  
  @media (min-width: 992px) {
    .form-syouhinmei_box_01{
      margin-right: 1rem;
    }
  }

/* ラジオボタンとチェックボックスのベースラインを親要素の縦中央にそろえる */
  input[type=radio], input[type=checkbox]{
    vertical-align: middle;
  }
  
  form.form_2 table , form.form_2 table span , form.form_2 table div {text-align: left;}

/*フォームの入力ボックス下のテキスト*/
.form-under_01{
  font-size: .875em;
  color: #6C757D;
}

/*form.form_2 md未満は全て1行、縦長*/
@media (max-width:767px) {
  form.form_2 table{border: none; border-bottom:1px solid var(--border-gray_01);}
  form.form_2 table th,form.form_2 table td{display: block; border-bottom: none;}
}

/*フォームのオートコンプリート使用時に背景の水色を無しにする
input:-webkit-autofill {
  box-shadow: 0 0 0 1000px white inset;
}
*/




/* トップページのみ　スライダーslick ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
  /* slickが最初一瞬縦並びになる現象を解決 */
  .slider {
    display: none;
}
.slider.slick-initialized {
    display: block;
}

/* 矢印変更 */
.slick-arrow:before {
    content: "" !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

.slick-next:before {
    background: url(../img/arrow-right.svg) !important;
    background-size: contain !important;
}

.slick-prev:before {
    background: url(../img/arrow-left.svg) !important;
    background-size: contain !important;
}

.slick-arrow {
    z-index: 2 !important;
    width: 60px !important;
    height: 60px !important;
}

.slick-next {
    right: -10px !important;
}

.slick-prev {
    left: -10px !important;
}

.slick-arrow:before {
    opacity: 1 !important;
}

.slider {
    width: 100%;
    margin: 0.5rem auto;
    padding:0.75rem 2.75rem;
}

.slick-slide {
    margin: 0px 0.25rem;
}

.slick-slide img {
    width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}

.slick-slide {
    transition: all ease-in-out .3s;
    opacity★: .2;
}

.slick-active {
    opacity★: .5;
}

.slick-current {
    opacity★: 1;
}

.slider div {
    border★: 1px solid red;
}

/* 高さを合わせるため */
.slick-track{display: flex !important;}

.slick-slide{height: auto !important;}




/* スマホ時、矢印の大きさ変更 */
@media (max-width:767px) {
.slick-arrow {
    z-index: 2 !important;
    width: 30px !important;
    height: 30px !important;
}

.slick-next {
    right: 0px !important;
}

.slick-prev {
    left: 0px !important;
}

.slider {
    margin: 0.5rem auto;
    padding:0.75rem 1.6rem;
}
}









/* card トップページ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* トップページのカードカルーセルの文字が長すぎる場合は省略 */
main.toppage-only .card-text{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /*行数に制限*/
}
main.toppage-only .slider .card-text{
  -webkit-line-clamp: 3; }/*行数に制限*/

main.toppage-only .card-title{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*行数に制限*/
}

/*トップページ内のカードの型式は重要ではないので1行*/
main.toppage-only .card-title:nth-child(2){
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /*行数に制限*/
}


.tab-category-only_01 .card-text{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /*行数に制限*/ /*商品説明*/
}

.tab-category-only_01 .card-title{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*行数に制限*/ /*商品名*/
}

.tab-category-only_01 .card-title:nth-child(2){
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /*行数に制限*/ /*型式*/
}






/* card カテゴリ用ページ card_category_01はトップページのカテゴリと共通 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
.card_category_01 .card-title , .shurui_01 .card-title{ margin-bottom: 0.25rem; }
.card_category_01 .card-body .card-title:nth-last-child(2) , .shurui_01 .card-body{ margin-bottom: 0.25rem; }/*型式*/


/*トップページ　スライダーのみ*/
.slider .card-title , .slider .card-body .card-title:nth-child(2){ margin-bottom: 0.125rem;}




/* トップページでスライダー全体の背景が濃い時にホバーの透過が背景色を拾うのを帽子する為の背景白 */
div.hover_toumei-back-white_01{
  background-color: white;
  border-radius:0.375rem;
}

/* https://shanabrian.com/web/html-css-js-technics/css-card-hover-effect-animation.php# */
.card {
  transition:transform 0.3s;
  overflow: hidden; /*画像の角丸のはみ出しをクリッピング*/
}

/*.card a:hover {  transform:scale(1.1);}*/

.card a:hover{
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}

/*共通
.card_category_01 .card a, .slider .card a , .shurui_01*/
.card a { display: block;}

.card_category_01 .card, .slider .card, .shurui_01  .card {
padding:0.5rem !important;
}
.card-text , .card-title{
  word-break: break-all; /*型式等の英文を途中で改行*/
}

/* articleかcard自体にカテゴリ用クラス名付けないと、別のどころでcard使ったらかち合うので注意★ */
.card_category_01 .card-body, .shurui_01 .card-body{
padding: 0  0.5rem 0 1rem;  /* [上][右][下][左] */
}
/* card_category_01とかぶってるけど縦型と横型で余白違うから */
.slider .card-body{padding: 0.5rem 0 0 0 ;} /* [上][右][下][左] */
/*トップページスライダー内card　sm未満*/
@media (max-width:575px) {
  .slider .card-body{padding: 0  0.5rem 0 1rem;} /* [上][右][下][左] */
}

/* mdサイズのみ縦配置にしたので画像と文字の間をあけるための記述
@media (min-width:768px) and (max-width:991px){
  .card_category_01 .card-body{
    padding-top: 1rem;
  }
}
 */

/* card文字サイズ */
.slider .card {font-size: 0.875rem;}/* 14px */
.card_category_01 .card-text, .shurui_01★ .card-text , .shurui_01★ ul li {font-size: 0.875rem;}/* 14px */

/*トップページcard 文字サイズ*/
@media (max-width:575px) {
  .slider .card{font-size:0.8125rem;} /* 13px */
}
/*トップページcard 文字サイズ*/
@media (max-width:991px) {
  .card_category_01 .card {font-size: 0.875rem;}/* 14px */
}
@media (min-width:576px) and (max-width:767px){
  .card_category_01 .card-title★ {font-size: 1rem;}/* 16px デフォルト */
}

.card-title:nth-child(2){ color: var(--katashiki-color_01);}/*単位emにしておく*/

/*商品ページで  .card_category_01を使ってる場合文字が小さくならないように　例ミニストリップのページでST215商会card*/
.card_type_02 .card{font-size: 1rem !important;}




/*別売りオプション等部品*/
dl.buhin-dl_01{
  margin-left: 2rem;
}
dl.buhin-dl_01 dt:nth-child(n+2){
margin-top: 0.5rem;
}
dl.buhin-dl_01 dt{
display: list-item;
/*list-style-position: inside;*/
}

/*モーダル　カーソルをズームのマークにする。画像をクリックすると拡大表示される*/
img.modal-zoom_01 {
  cursor: zoom-in; /* 拡大できるよ、という意味 */
}





/*__ヘッダーのサイト内の検索ボックス________________________________________________________________________________________________*/

/* プレースホルダーの色を強制的に統一する（!importantで上書き） */
#kensaku6_01 .form-control::placeholder {
  color: #aaa !important; /* Bootstrap標準の灰色。もっと濃くしたいなら #495057 に変更 */
  opacity: 1 !important;      /* 不透明度を1にすることで、色の「ボヤけ」をなくします */
}

/* ブラウザごとの差異（Safari/Chrome/Firefox）を吸収するおまじない */
#kensaku6_01 .form-control::-webkit-input-placeholder { color: #aaa !important; opacity: 1 !important; }
#kensaku6_01 .form-control::-moz-placeholder { color: #aaa !important; opacity: 1 !important; }
#kensaku6_01 .form-control:-ms-input-placeholder { color: #aaa !important; opacity: 1 !important; }

@media (min-width: 1200px){
#kensaku6_01{width: 208px;}
}

/*検索ボタンのbtnの色を変更
#kensaku6_01 .btn-secondary{
  background-color: #a9a9a9;
  border-color: #a9a9a9;
}*/




/*ハイライト
.highlighted {
  background-color: yellow;
}
*/

/* 検索でヒットした行のスタイル
.highlighted {
    background-color: #EBF8FF !important;
} */

/* その行の中にある「型式」が入っているセルをさらに強調する場合
.highlight td.model-number {
    font-weight: bold;
    color: #1A365D;
} */






/*スペシャルカスタム、廃番ページのページ内検索 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
article.sp-custom-table_01 p{margin-bottom: initial;}  
article.sp-custom-table_01 ::placeholder{ color: #aaa;}/*検索ボックスの中のテキストの色を薄く*/


@media (max-width: 370px) {
  .search-btn_99 button{font-size: 0.9rem;}/*幅の狭いスマホでボタン文字改行を対策*/
}

/*ページ内の検索ボタン*/
.sp-custom-table_01 .search-btn_99 .btn{width: 100% !important; }
/*スペシャルカスタム、廃番ページのページ内検索 end ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/




/*価格表*/
.kakaku-table_02 th, .kakaku-table_02 td{padding: 0.2rem 0.5rem !important;}
.kakaku-table_02 thead th{background: #eee; border: 1px solid var(--border-gray_01); font-weight: normal;}
  @media (max-width:991px) {
    .kakaku-table_02 tr td:last-of-type{
  width: 9.5rem;
  }
}
.kakaku-table_02 tr td {text-align: left;}
.kakaku-table_02 tr :nth-child(2){white-space: normal; min-width: 20rem;}
.kakaku-table_02 tbody tr:hover:not(.kakaku-tr_01){ background-color:  #ecf2fa; /*cursor: pointer;*/}
.clickable★{ cursor: pointer;}
tr.kakaku-tr_01{background-color: #eee; text-align: left;}



/*リンクの末尾にアイコン付与*/
a.link-arrow_01::after {
  padding-left:0.3rem ;
  padding-right: 0.5rem;
  content: "\F1C5"; /* Box arrow up-right */
  font-family: bootstrap-icons;
  font-size: 0.725rem;
  font-weight: 400;
  line-height: 1;
  vertical-align: -.125em;
}
    /*.bi- 以外のクラスで設定する場合は、font-family, font-weight,
    line-height, vertical-align の設定もする
    （.bi- の場合は、CDNの bootstrap-icons.min.css に設定があるので不要）*/



/*検索やフォームの枠*/
.form-control:focus{ box-shadow: none !important;}



/* フッター ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
footer {
  /* background-color: rgb(3, 110, 183); */
  background-color: var(--ao-color_01);
    color: #ffffff;
}


/*フッターのdivの頭にマーク margin[上][右][下][左]*/
.footer_01 div::before{
font-family: bootstrap-icons;
content:'\F285'; /*Chevron right*/
margin-right: 0.125rem;
font-size: 70%;
font-weight: bold;
line-height: 1;
vertical-align: -.125em;
color: white;
}



footer .container{font-size: 90%;}
footer .h4 {font-size: 1rem !important;}

@media (max-width: 991px){
  footer img{max-width: 200px !important;}
}




/*footerにトップへ戻るボタン ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* ページトップボタン */
#jump-top {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 1000;
    display★: none;/*フェード用。JSの hide() だけでも動きますが、保険*/
}

#jump-top a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  background: rgba(0,0,0,.5);
  border-radius: 5px;

  margin: 8px;

  text-decoration: none;
  color: #fff;
}

#jump-top .bi {
  font-size: 40px;
  line-height: 1;
  transform: translateY(1px);
}

@media (min-width: 1399px) {
  #jump-top a {
    width: 60px;
    height: 60px;
  }

  #jump-top .bi {
    font-size:50px;
  }
}