@charset "UTF-8";
/*===================================================================================================================================================================================================================================================================================================================================================================

reset.css

===================================================================================================================================================================================================================================================================================================================================================================*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
* {
  margin: 0;
  padding: 0;
}
/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"],
ul li {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
a {
  text-decoration: none;
}
/*===================================================================================================================================================================================================================================================================================================================================================================

futureshopオリジナル

===================================================================================================================================================================================================================================================================================================================================================================*/

/* 商品グループページ　サブグループリスト周り */
.fs-c-subgroupList {
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  padding: 24px 0;
}
.fs-c-subgroupList__link::after {
  grid-column: unset; /* サブグループリストの矢印の位置を左 */
  color: #105287;
}
.fs-c-subgroupList__link {
  background: none; /* 背景削除 */
  border: none; /* ボーダー削除 */
}
.fs-c-subgroupList__link:hover > .fs-c-subgroupList__label {
  text-decoration: underline;
}
.fs-c-subgroupList__label {
  color: #105287;
}
.fs-c-wishlistProduct__header {
  margin-bottom: 48px;
}

@media screen and (min-width: 960px) {
  /* ヘッダーロゴ */
  .fs-l-header__logo {
    grid-column: 2; /* ヘッダーロゴの位置を左に寄せる */
    max-width: 160px; /* サイズ調整 */
  }
  /* カルーセル */
  .slick-slide {
    margin-bottom: 48px;
  }
  .fs-c-productName__copy {
    display: block;
    margin-bottom: 8px;
    color: #3c61a6;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.2;
  }
  .fs-c-productName__name {
    font-weight: 200;
    margin-bottom: 8px;
    line-height: 1.3;
  }
  /* 商品グループ */
  .fs-c-productListItem__notice {
    width: 100%;
    padding: 10px;
    border: rebeccapurple;
    border-radius: 3px;
  }
  /* 商品グループ 在庫切れ表示 */
  .fs-c-productListItem__lowInStock,
  .fs-c-productListItem__outOfStock,
  .fs-c-productListItem__numberOfStock {
    background: #666;
    color: #fff;
  }
  /* 商品一覧のお気に入りボタンをカートに入れるボタンに近づける */
  .fs-c-productListItem__control {
    justify-content: start;
  }

  .fs-c-productListItem__control > :last-child {
    margin-left: 24px;
  }
  .fs-c-button--particular.fs-c-button--addToWishList--icon::before,
  .fs-c-button--particular.fs-c-button--removeFromWishList--icon::before,
  .fs-c-button--particular.fs-c-button--displayPassword::before,
  .fs-c-button--particular.fs-c-button--hidePassword::before {
    color: #cb66c0;
  }
  /* 商品グループページ　1行3列 */
  .fs-c-productList__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0px;
  }
  /* 商品グループページ　画像を中央に */
  .fs-c-productListItem__image.fs-c-productImage {
    display: flex;
    justify-content: center;
  }
}

/* 商品グループ タイトル */
@media screen and (min-width: 1200px) {
  .fs-c-heading--page {
    padding: 0 0 0.8em;
  }
}
.fs-c-heading--page {
  color: #444;
  font-weight: bold;
  line-height: 1.2;
  margin: 0 0 24px;
  padding: 0 0 0.8em;
  text-align: left;
}
.fs-p-headerNavbar.fs-p-headerNavBar-menu .fs-p-headerNavigation__link:link,
.fs-p-headerNavbar.fs-p-headerNavBar-menu .fs-p-headerNavigation__link {
  color: #666 !important;
}
.fs-p-headerNavBar.fs-p-headerNavBar-menu {
  background: none;
  border-bottom: none;
}
.fs-pt-column__image > img {
  width: 100%;
}

/*商品ページ*/
.fs-l-productLayout__item {
  padding-top: 16px; /*トップをレフト、ライトと揃える*/
}
.headerCategory-sp {
  display: none;
}

/*お買物ガイド*/
.fs-c-documentArticle__content a {
  color: #0000cd;
  text-decoration: underline;
}
.fs-c-documentArticle__content a:hover {
  opacity: 0.6;
}

@media screen and (max-width: 767px) {
  /*==============================================

headerCategory-sp
スマートフォン用ヘッダーカテゴリー

=============================================*/
  /*ドロワーメニュー*/
  .headerCategory-sp {
    display: block;
  }

  .fs-p-drawerButton {
    text-align: center;
  }

  .headerCategory-sp__wrap {
    display: flex;
    column-gap: 2px;
    padding: 6px 0;
    background-color: #d4523d;
  }
  .headerCategory-sp__item {
    width: calc(100% / 8);
    text-align: center;
  }
  .headerCategory-sp__link {
    line-height: 1.1;
  }
  .headerCategory-sp__image {
    width: 100%;
    margin-bottom: 3px;
    border-radius: 5px;
  }
  .headerCategory-sp__label {
    font-size: 6px;
    line-height: 1;
    display: block;
    color: #fff;
  }

  .fs-p-top-searchForm-sp__wrap {
    padding: 10px 24px 24px;
    box-sizing: border-box;
  }

  .fs-p-headerNavigation__list {
    width: auto;
  }

  .fs-p-drawerButton__label {
    white-space: nowrap;
  }
  /*==============================================

商品ページ

=============================================*/
  /*商品名周り*/
  .fs-c-productNameHeading__copy {
    display: block;
    font-weight: normal;
    margin-bottom: 8px;
    font-size: 12px;
    margin-bottom: 8px;
    color: #496884;
  }
  .fs-c-productNameHeading__name {
    line-height: 1.3 !important;
  }
}
/*===================================================================================================================================================================================================================================================================================================================================================================

common.css

===================================================================================================================================================================================================================================================================================================================================================================*/
/* コンテンツ */

article {
  margin-top: 24px;
}

/*footer*/
.fs-p-footerCopyright {
  background-color: #c45644;
  padding: 16px;
}

/* メインビジュアル　1枚画像 */

.group-mainvisual-wrap {
  position: relative;
  margin: 0 0 48px;
  display: inline-block;
  transition: all 0.4s 0.4s ease-in;
}
.group-mainvisual-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.group-mainvisual-wrap .image-caption {
  /* キャプションを絶対配置で画像の下側に重ねる */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /*見栄えの調整*/
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px;
  font-size: 0.9rem;
}
.group-mainvisual-wrap:hover > .image-caption {
  opacity: 0;
}
/* メインビジュアル　カルーセル */
.slider-container {
  position: relative;
  width: 100%;

  margin: auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px; /* 下に余白を追加 */
}

/* スライドラッパー */
.slider-wrapper {
  position: relative;
}

/* スライドの表示エリア */
.slider-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* 各スライド */
.slider-slide {
  min-width: 100%;
}

.slider-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* キャプション */
.slider-caption {
  position: absolute;
  /*top: 0;*/
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5); /* 半透明の黒背景で全体を覆う */
  color: white;
  padding: 20px;
  transition: all 0.3s 0s ease-in-out;
}
.slider-caption:hover {
  opacity: 0;
}
/* 見出し */
.slider-caption-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/* キャプションテキスト */
.slider-caption-text {
  font-size: 14px;
}

/* インジケーター */
.slider-indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.slider-dot.slider-active {
  background-color: #fff; /* アクティブなインジケーターを白色に */
}
.sec {
  margin-top: 24px;
}
.sec.c-sec.sec-caution.sec-caution--shipping.sec-caution--04ijm {
  border: solid 1px #f8b8a9;
  padding: 16px 24px;
  background: #fff8f6;
}
.c-sec.sec-caution {
  border: solid 1px #f8b8a9;
  padding: 16px 24px;
  background: #fff8f6;
}
.sec-caution__heading {
  text-align: center;
  padding: 10px;
  margin-bottom: 16px;
  font-weight: bold;
  background: #eedad5;
}
.caution-shipping__text {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 16px;
  text-align: justify;
}
.aside img {
  width: 100%;
}
.c-product-exp__text {
  line-height: 1.6;
}

.c-product-exp__item {
  margin-bottom: 5px;
  line-height: 1.6;
  border-bottom: solid 1px #999;
  padding-bottom: 8px;
}

/*
フリーパーツ/商品ページ/上部告知エリア
*/
/* ========================================
   縦バナー
======================================== */
.tatebnr-common {
  position: fixed;
  z-index: 9999;
  box-sizing: border-box;
}

.tatebnr-common a {
  display: block;
}

.tatebnr-common img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 右側バナー */
#tatebnr_right {
  top: 300px;
  right: 0;
}

#tatebnr_right a img {
  width: 100px;
  height: auto;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

#tatebnr_right a:hover img {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  transform: translateX(-3px);
}

/* ========================================
   表示アニメーション
======================================== */
.animation-y {
  animation: move-y 0.5s ease-out 0.2s forwards;
  opacity: 0;
}

@keyframes move-y {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   ニュース・お知らせ
======================================== */
.infoAreaWap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 0 15px;
  box-sizing: border-box;

  border: solid 1px #ccc;
  background: #fff4f4;
  border-radius: 2px;
}

.infoArea-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  align-items: center;
  list-style: none;
  width: 100%;
  padding: 10px;
  gap: 10px;
  border-radius: 3px;
}

.infoArea-list li {
  width: 100%;
  box-sizing: border-box;
  width: 100%;
  display: block;
  position: relative;
  font-size: 14px;
}

.infoArea-list li a {
  display: block;
  width: 100%;
  padding: 12px 15px;
  box-sizing: border-box;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: normal;
  text-decoration: none;
}

/* 緊急・重要なお知らせ */
.infoArea-list .emergecy a {
  text-indent: 10px;
}
.emergecy::before {
  position: absolute;
  content: " ";
  background-image: url(https://panacea.itembox.cloud/item/common/icon-caution01.svg);
  background-repeat: no-repeat;
  width: 24px;
  height: 16px;
  display: block;
  top: 50%;
  transform: translateY(-50%);
}

/* ========================================
   タブレット
======================================== */
@media screen and (max-width: 1024px) {
  #tatebnr_right {
    top: 250px;
  }

  #tatebnr_right a img {
    width: 80px;
  }
}

/* ========================================
   スマートフォン
======================================== */
@media screen and (max-width: 767px) {
  /* 縦バナーは右下へ移動 */
  #tatebnr_right {
    top: auto;
    right: 8px;
    bottom: 8px;
  }

  #tatebnr_right a img {
    width: 60px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  }

  #tatebnr_right a:hover img {
    transform: none;
  }

  .infoAreaWap {
    margin-bottom: 20px;
    padding: 0 10px;
  }

  .infoArea-list li a {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.6;
  }
  /*
スマートフォン用
パンくずリスト
*/

  .fs-c-breadcrumb {
    font-size: 1.4rem;
  }
  .fs-c-breadcrumb__list > li {
    margin-bottom: 8px;
  }
  .fs-c-breadcrumb__list > li a {
    color: #0f4f83;
    text-decoration: underline;
    padding: 5px;
  }

  .fs-c-productNumber {
    border: none;
    background: #f2f2f2;
    margin: 8px 0;
  }
  .fs-c-productPointDisplay {
    background: none;
    color: #ff3300;
  }
}

/*******************************

商品ページ

********************************/

/*互換製品比較表*/
.c-compatible-products__table {
  width: 100%;
  border-collapse: collapse;
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
}
.c-compatible-products_header {
  font-size: 14px;
  text-align: center;
  padding: 10px;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  background: #f2f2f2;
}
.c-compatible-products__data {
  font-size: 14px;

  padding: 10px;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
}
.c-compatible-products__data--maker {
  text-align: center;
  font-size: 12px;
}
.c-compatible-products__data--number {
  text-align: center;
}
.c-compatible-products__data--number {
  white-space: nowrap;
}
/******************************

カラーバリエーション

******************************/
/*　フォトブラック　*/
.bgcolor_pbk {
  background: #292929;
}
/*　マットブラック　*/
.bgcolor_mbk {
  background: #444;
}
/*ブラック*/
.bgcolor_bk {
  background: #000;
}
/*　シアン　*/
.bgcolor_c {
  background: #09f;
}
/*　マゼンタ　*/
.bgcolor_m {
  background: #e4007f;
}
/*　ライトマゼンタ　*/
.bgcolor_lm {
  background: #ff77ff;
}
/*　ビビッドマゼンタ　*/
.bgcolor_vm {
  background: #f09;
}
/*　フォトマゼンタ　*/
.bgcolor_pm {
  background: #ec008c;
}
/*　フォトシアン　*/
.bgcolor_pc {
  background: #219ddd;
}
/*　フォトグレー　*/
.bgcolor_pgy {
  background: #797979;
}
/*　ライトシアン　*/
.bgcolor_lc {
  background: #3cf;
}
/*　ビビッドライトマゼンタ　*/
.bgcolor_vlm {
  background: #f09;
}
/*　グレー　*/
.bgcolor_gy {
  background: #999;
}
/*　ライトグレー　*/
.bgcolor_lgy {
  background: #ccc;
}
/*　イエロー　*/
.bgcolor_y {
  background: #eeee07;
}
/*　オレンジ　*/
.bgcolor_or {
  background: #f60;
}
/*　グリーン　*/
.bgcolor_gr {
  background: #393;
}
/*　レッド　*/
.bgcolor_r {
  background: #ff0000;
}
/*　ピンク　*/
.bgcolor_pk {
  background: #ffe4e1;
}
/*　ブラウン　*/
.bgcolor_br {
  background: #8b4513;
}
/*　レモン　*/
.bgcolor_lemon {
  background: #fff352;
}
/*　スカイブルー　*/
.bgcolor_skybl {
  background: #87cefa;
}
/*　黄緑　*/
.bgcolor_yegr {
  background: #8fc31f;
}
/*　アドリアブルー　*/
.bgcolor_adriablue {
  background: #0000cd;
}
/*　水色　*/
.bgcolor_waterblue {
  background: #80ffff;
}
/*　マットホワイト　*/
.bgcolor_matwhite {
  background: #fdfdfd;
}
/*　パープル　*/
.bgcolor_purple {
  background: #c71585;
}
/*　ターコイズレッド　*/
.bgcolor_turquoisered {
  background: #e51f47;
}
/*　

カラーバリエーション

インクカートリッジ ic

色番号　

*/
/*　ホワイト　*/
.bgcolor_white {
  border: solid 1px #f2f2f2;
  background: #fff;
  box-sizing: border-box;
}
/*　ブルー　*/
.bgcolor_blue {
  background: #0000ff;
}
/*キャノン新カラークロマオプティマイザー*/
.bgcolor_opti {
  background: #fff;
  outline: 5px solid #f2f2f2;
  outline-offset: -5px;
}
.bgcolor_opti a {
  color: #666 !important;
}
/*ミディアムブルー*/
.bgcolor_mblue {
  background-color: #0000cd;
}
/*フェデラルブルー*/
.bgcolor_fblue {
  background-color: #2e4b71;
}
/*ブライトレッド*/
.bgcolor_bred {
  background-color: #e12424;
}
/*マリーンレッド*/
.bgcolor_marinered {
  background-color: #d36668;
}
/*ティールグリーン*/
.bgcolor_tealgreen {
  background-color: #006956;
}
/*バーガンディレッド*/
.bgcolor_burgundyred {
  background-color: #6c2735;
}
/*パープル*/
.bgcolor_purple-ic {
  background-color: #3e2780;
}
/*青緑*/
.bgcolor_aomidori {
  background-color: #035769;
}
/*紺*/
.bgcolor_kon {
  background-color: #002257;
}
/*茶*/
.bgcolor_cha {
  background-color: #047a0e;
}
/*紅梅*/
.bgcolor_koubai {
  background-color: #e92c61;
}

/* table spec */
/**/
.color-variations,
.property-table {
  width: 100%;
}

/* 削除予定 */
.property-table-v table,
.property-table-h table {
  width: 100%;
  border-collapse: collapse;
}

.property-table-v table td,
.property-table-v table th {
  padding: 10px;
  line-height: 1.6;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
  color: #444;
}
.property-table-v table th {
  line-height: 1.4;
  background: #fafafa;
  font-size: 14px;
  padding: 10px 3px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.property-table-v td {
  font-size: 14px;
}
.property-table-h table {
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
}
.property-table-h table th {
  border-top: solid 1px #ccc;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  padding: 8px;
  background: #fafafa;
  font-size: 14px;
}
.property-table-h table td {
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}

/* table spectable */
.c-spec-table,
.c-spec-table__table {
  width: 100%;
  border-collapse: collapse;
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
}
.c-spec-table__head {
  font-size: 15px;
  text-align: center;
  color: #555;
  padding-top: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
  padding-bottom: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
  padding-left: clamp(0.313rem, 0.199rem + 0.57vw, 0.625rem);
  padding-right: clamp(0.313rem, 0.199rem + 0.57vw, 0.625rem);
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  background: #fafafa;
  width: 20%;
}
.c-spec-table__data {
  font-size: 15px;
  color: #555;
  padding-top: clamp(0.625rem, calc(0.489rem + 0.68vw), 1rem);
  padding-bottom: clamp(0.75rem, calc(0.659rem + 0.45vw), 1rem);
  padding-left: clamp(0.625rem, calc(0.489rem + 0.68vw), 1rem);
  padding-right: clamp(0.625rem, calc(0.489rem + 0.68vw), 1rem);
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
}
/* table spec text */
.property-text p {
  line-height: 1.8;
  color: #333;
  font-size: 16px;
}

/**/

.c-color-variation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1px;
  row-gap: 1px;
}

/* タブレット以下：2列 */
@media screen and (max-width: 768px) {
  .c-color-variation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.c-color-variation__item {
  min-width: 0;
}

.c-color-variation__link {
  display: block;
}

.c-color-variation__item img {
  display: block;
  width: 100%;
  height: auto;
}

/**/
span.item_desc {
  color: #000000;
  font-size: 80%;
}
/**/
.search-wrap {
  background: #f2f2f2;
  padding: 16px 24px;
  box-sizing: border-box;
  margin-bottom: 16px;
  border-radius: 10px;
}
.search-wrap h3 {
  font-size: 21px;
  margin-bottom: 8px;
}
.search-wrap h4 {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: normal;
}

.card > div {
  padding: 8px 5px;
  background: #fff;
  border-radius: 5px;
}
.card > div dt {
  margin-bottom: 8px;
}
.card > div dd {
  font-size: 12px;
  line-height: 1.2;
}
.displayflex-item a {
  text-align: center;
}
.displayflex-5 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.displayflex-5 .displayflex-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  width: calc(20% - 16px);
}
.displayflex-6 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.displayflex-6 .displayflex-item,
.displayflex-6 .displayflex-card {
  display: flex;
  align-items: center;
  width: calc(17.666% - 16px);
}
.displayflex-4 {
  display: flex;
  flex-wrap: wrap;
}
.displayflex-4 .displayflex-item {
  display: flex;
  font-size: 14px;
  width: 24.9%;
}
.displayflex-4 .displayflex-item a {
  text-align: left;
}
.displayflex-card img {
  width: 100%;
  height: 100%;
}

/* flex */

.flexWrap {
  flex-wrap: wrap;
  display: flex;
  gap: 8px;
}
.flex5col {
  width: 20%;
}
.flex5col a:hover {
  opacity: 0.8;
}

/* flex */

/* ========================================

レフトナビ 

==========================================*/

.aside a:hover {
  opacity: 0.6;
}
.aside h2 {
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 16px;
}
.aside h3 {
  margin-bottom: 10px;
}

.aside .alphabet {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 3px;
}
.aside .kana {
  font-size: 14px;
  font-weight: normal;
}
.aside h4 {
  margin-bottom: 8px;
}
.aside span {
  display: block;
}
span.big {
  font-size: 16px;
  font-weight: 200;
}
span.sm {
  font-size: 14px;
  color: #888;
  font-weight: normal;
}
.cateBox {
  margin-bottom: 24px;
}
.cateBox-m li {
  font-size: 13px;
  padding: 5px;
  line-height: 1.2;
  border-bottom: dotted 1px #999;
}
.cateBox-m li::before {
  content: "-";
  color: #999;
  font-size: 18px;
}

/*=============================================

デジタル印刷機消耗品 01dp

==============================================*/

.aside-dp h3 {
  padding-left: 8px;
}
/* リソー */
.cateBox-rs h3 {
  border-left: 8px solid #b207dd;
}
/* デュプロ */
.cateBox-dp h3 {
  border-left: 8px solid #16347b;
}
/* リコー */
.cateBox-rc h3 {
  border-left: 8px solid #e60012;
}
/* コニカミノルタ */
.cateBox-km h3 {
  border-left: 8px solid #353c42;
}
/* ホリイ */
.cateBox-hr h3 {
  border-left: 8px solid #8c8e8f;
}
/* エディシス */
.cateBox-ed h3 {
  border-left: 8px solid #429cbd;
}
/* 東芝テック */
.cateBox-tec h3 {
  border-left: 8px solid #c6173a;
}
.leftnav-makername span {
  display: block;
}

.aside-dp .leftTable {
  margin-top: 24px;
}
.aside-dp .tableRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0px 8px 0;
  border-top: 1px solid #ccc;
}
.tableThead {
  /* width: 50%;*/
  font-size: 13px;
}
.tableData-type {
  /*width: 40%;*/
  display: flex;
}
.tableData-type div {
  font-size: 12px;
}
.iconInk::after {
  content: "/";
  width: 10px;
  height: 16px;
}

.tableData-type a {
  /*display: block;*/
  padding: 5px 10px;
  text-decoration: underline;
}

/*===============================================

インクカートリッジ 02ic

=================================================*/

.card-02ic {
  margin-bottom: 8px;
}

.cateBox-epson,
.cateBox-canon,
.cateBox-roland,
.cateBox-mimaki,
.cateBox-ems {
  margin-bottom: 24px;
}
.aside-ic h3 {
  padding-left: 8px;
}
/* エプソン */
.cateBox-epson h3 {
  border-left: 5px solid #b207dd;
}

/* キヤノン */
.cateBox-canon h3 {
  border-left: 5px solid #16347b;
}
/* ローランド */
.cateBox-roland h3 {
  border-left: 5px solid #e60012;
}
/* ミマキ */
.cateBox-mimaki h3 {
  border-left: 5px solid #353c42;
}
/* EMシステムズ */
.cateBox-ems h3 {
  border-left: 5px solid #8c8e8f;
}
/* リコージェルジェット */
.cateBox-ricohjeljet h3 {
  border-left: 5px solid #429cbd;
}

/* カラーバリエーション */
.color-variations-gr,
.color-variations-gi,
.color-variations-re {
  margin-bottom: 32px;
}
.color-variations-gr-title,
.color-variations-re-title,
.color-variations-gi-title {
  padding: 10px;
  margin-bottom: 16px;
  color: #fff;
  font-size: 16px;
}
.color-variations-gr-title {
  background: #5f93cb;
}
.color-variations-re-title {
  background: #5fcb8e;
}
.color-variations-gi-title {
  background: #728293;
}

.color-variations-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.color-variations-wrap div {
  width: calc(100% / 6 - 18px);
  height: 100px;
  padding: 5px;
  color: #fff;
  border-radius: 0 15px 0 0;
}
.color-variations-wrap div a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1.4;
}
.color-variations-wrap div a:hover {
  opacity: 0.6;
}
/*
.waranty-wrap .waranty {
  padding: 0 56px;
}*/
.waranty-wrap .waranty img {
  width: 100%;
}

.ic-property-table-seriesName {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 16px;
}
/*====================================================

フィルムラベル 03fl

======================================================*/
.displayflex-4.card-03fl {
  gap: 1px !important;
  margin-bottom: 48px;
}
.card-03fl .displayflex-item dd {
  background: #000;
  color: #fff;
  padding: 8px;
}

.aside-fl .leftTable {
  border-top: solid 1px #333;
  margin-bottom: 32px;
}

.aside-fl .tableThead {
  border-bottom: solid 1px #ccc;
  padding: 8px;
  display: block;
  width: 100%;
}

.fl-categoryType {
  border-left: 8px solid #7a7a7a;
  padding-left: 8px;
}
.fl-categoryType-name01 {
  font-size: 16px;
  margin-bottom: 5px;
}
.fl-categoryType-name02 {
  font-size: 12px;
  font-weight: normal;
}
.fl-categoryType span {
  display: block;
}

/* 商品ページ マテリアル説明 */
.exp-ij-intro__wrap {
  background: #eb2d2d;
}
.exp-lbp-intro__wrap {
  background: #3d9e4c;
}
.exp-ij-intro__wrap,
.exp-lbp-intro__wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  align-items: center;
  margin-bottom: 24px;
}
.c-fl-intro {
  width: 45%;
  padding-left: 16px;
  margin-bottom: 24px;
  color: #fff;
}
.c-fl-intro__title-big {
  margin-bottom: 10px;
}
.c-fl-intro__title-big h3 {
  line-height: 1.3;
}
.exp-ij__image,
.exp-lbp__image {
  width: 55%;
  padding: 10px;
}
.exp-ij__image img,
.exp-lbp__image img {
  width: 100%;
}

.c-fl-exp__body {
  margin-bottom: 32px;
}
.c-fl-exp__text {
  margin-bottom: 10px;
  line-height: 1.6;
  text-align: justify;
}
.fl-exp-material__box {
  margin-bottom: 32px;
}
.fl-exp-material__head {
  text-align: center;
  background: #554a42;
  color: #fff;
  margin-bottom: 24px;
  font-weight: bold;
  line-height: 1.4;
  padding: 8px;
}
.fl-exp-material__image {
  text-align: center;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.fl-exp-material__text {
  text-align: center;
}

/*使用用途*/
.c-iconize__wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  text-align: justify;
}
.c-iconize__item {
  display: inline-block;
  border: solid 1px #ccc;
  border-radius: 15px;
  padding: 5px 10px;
  font-size: 14px;
}

/*フィルム特性表*/
.c-spec-table.table featTable-03fl .c-spec-table__data {
  text-align: center;
}
/*===================================================

インクジェットメディア　04ijm

====================================================*/

.aside-ijm h3 {
  font-size: 21px;
  margin-top: 32px;
  border-left: solid 5px #ccc;
  padding-left: 8px;
}
.aside-ijm ul li {
  font-size: 14px;
  padding: 8px 0;
}

.aside-ijm .cateBox-l:nth-of-type(2) {
  margin-top: 48px;
}

/*
商品ページ
表組中のアイコン
*/
.c-spec-table__row .icon {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  gap: 8px;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
}
.c-spec-table__row .icon span {
  width: 50px;
}
/*=================================================

カッティング用シート 05cs

==================================================*/

.search-wrap-05cs .card-machine > li {
  background: #fff;
  border-radius: 10px;
  width: calc(17.666% - 16px);
}
.search-wrap-05cs .card-machine-item {
  margin-bottom: 24px;
  padding-top: 24px;
}
.search-wrap-05cs .card-machine > li a,
.search-wrap-05cs .displayflex-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}
.card-05cs .displayflex-item a {
  width: 100%;
  height: 125px;
}
.cateBox-search-machine h3,
.cateBox-search-type h3,
.cateBox-search-size h3 {
  font-size: 14px;
  font-weight: normal;
  color: #666;
  letter-spacing: 0.5px;
}

/*レフトナビ*/
.c-aside__content {
  margin-bottom: 24px;
}
.c-aside__title h3 {
  background: #333;
  color: #fff !important;
  padding: 3px;
  font-size: 14px;
}
.c-aside__group-title {
  border-left: solid 3px #999;
  padding-left: 8px;
}
.c-aside__group-name {
  font-size: 15px;
  margin-right: 10px;
}
.c-aside__group-name-sub {
  font-size: 13px;
  color: #666;
}

.c-aside__group {
  padding: 3px 0 10px 3px;
  margin-bottom: 10px;
  border-bottom: solid 1px #666;
}
.c-aside__group-title {
  font-size: 15px;
  margin-bottom: 10px;
  padding-left: 4px;
  border-left: solid 5px #ccc;
}
.c-aside__list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.c-aside__item a {
  font-size: 10px;
  padding: 4px 5px;
  display: block;
  border: 1px solid #d0d0d1;
  border-radius: 999px;
  line-height: 1.1;
  text-align: center;
  background: #edf5fb;
}
.size-search__wrap {
  display: flex;
  padding: 16px;
  flex-wrap: wrap;
  gap: 8px;
  background: #fafafa;
}
.size-search__list {
  width: 18.7%;
}

.sec-others {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #f2f2f2;
  padding: 16px 10px;
  justify-content: space-between;
}
.sec-others > div {
  width: 49%;
}
/* ========================================
   カッティング用シート 貼り方講座
======================================== */
.cs-howtoTop-titleImage__wrap {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  margin-bottom: 32px;
  padding: 0 16px;
}
.cs-howtoTop-titleImage__item {
  width: 32%;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border: 1px solid #e2e5e9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
}

@media screen and (max-width: 767px) {
  .cs-howtoTop-titleImage__wrap {
    column-gap: 8px;
  }
  .cs-howtoTop-titleImage__item {
    width: 48%;
  }
}

.cs-howtoTop-titleImage__heading {
  font-weight: bold;
  padding: 0 16px;
  margin-bottom: 8px;
  background: #20304f;
  color: #fff;
}
.cs-howtoTop-titleImage__description {
  font-weight: bold;
  padding: 0 16px;
}
.cs-howtoTop-titleImage__image img {
  width: 100%;
}

.cs-howtoTop__title {
  padding: 8px;
  border-bottom: solid 2px #20304f;
  margin-bottom: 16px;
}
.cs-howtoTop__title h2 {
  color: #20304f;
  text-align: left;
  font-size: 16px;
}
/**********************************/
.sec-cs-howto {
  width: 100%;
  margin: 0 auto;
  padding: 50px 0px;
  box-sizing: border-box;
}

/* ------------------------------
   導入部分
------------------------------ */
.cs-howto-lecture__title {
  margin-bottom: 40px;
  padding: 24px;
  background: #f7f8fa;
  border-radius: 12px;
  box-sizing: border-box;
}

.cs-howto-lecture__title dl {
  margin: 0;
}

.cs-howto-lecture__titleImage {
  margin: 0 0 20px;
  text-align: center;
}

.cs-howto-lecture__titleImage img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

.cs-howto-lecture__heading {
  margin: 0 0 12px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: #20304f;
}

.cs-howto-lecture__description {
  position: relative;
  margin: 0;
  padding: 18px 20px;
  background: #fff;
  border-left: 4px solid #20304f;
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  box-sizing: border-box;
}

/* ------------------------------
   工程一覧
------------------------------ */
.cs-howto-lecture__wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 22px;
  counter-reset: cs-howto-step;
}

/* ------------------------------
   各工程カード
------------------------------ */
.cs-howto-titleImage__item {
  position: relative;
  min-width: 0;
  background: #fff;
  border: 1px solid #e2e5e9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
  counter-increment: cs-howto-step;
}

/* STEP表示 */
.cs-howto-titleImage__item::before {
  content: "STEP " counter(cs-howto-step);
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 30px;
  padding: 0 12px;
  background: #20304f;
  border-radius: 15px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-sizing: border-box;
}

/* カード */
.cs-howto-titleImage__item dl {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}
.cs-howto-lecture__text {
  text-align: justify;
}
.cs-howto-lecture__point {
  padding-top: 16px;
}
.cs-howto-lecture__point-tip {
  background-color: #105287;
  color: #fff;
  display: inline-block;
  padding: 1px 5px;
  box-sizing: border-box;
  font-size: 12px;
  margin-right: 5px;
  text-align: justify;
}
.cs-howto-lecture__point-text {
  display: inline-block;
  text-align: justify;
}

/* ------------------------------
   画像
------------------------------ */
.cs-howto-lecture__image {
  margin: 0;
  background: #f4f4f4;
  overflow: hidden;
}

.cs-howto-lecture__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ------------------------------
   説明文
------------------------------ */
.cs-howto-lecture__text {
  flex: 1;
  margin: 0;
  padding: 20px;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  box-sizing: border-box;
}

.cs-howto-lecture__text h5 {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #20304f;
}

.cs-howto-lecture__text h5::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 3px;
  background: #20304f;
  border-radius: 2px;
}

.cs-howto-lecture__text p {
  margin: 0;
}

.cs-howto-lecture__text ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-howto-lecture__text li {
  position: relative;
  margin: 0 0 7px;
  padding-left: 18px;
  line-height: 1.7;
}

.cs-howto-lecture__text li:last-child {
  margin-bottom: 0;
}

.cs-howto-lecture__text li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 7px;
  height: 7px;
  background: #20304f;
  border-radius: 50%;
}

/* ========================================
   タブレット
======================================== */
@media screen and (max-width: 961px) {
  .sec-cs-howto {
    padding: 40px 16px;
  }

  .cs-howto-lecture__wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }
}

/* ========================================
   スマートフォン
======================================== */
@media screen and (max-width: 767px) {
  .sec-cs-howto {
    padding: 30px 12px;
  }

  .cs-howto-lecture__title {
    margin-bottom: 28px;
    padding: 14px;
    border-radius: 8px;
  }

  .cs-howto-lecture__titleImage {
    margin-bottom: 16px;
  }

  .cs-howto-lecture__heading {
    font-size: 17px;
  }

  .cs-howto-lecture__description {
    padding: 14px 16px;
    font-size: 14px;
  }

  .cs-howto-lecture__wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cs-howto-titleImage__item {
    border-radius: 10px;
  }

  .cs-howto-lecture__text {
    padding: 18px 16px;
    font-size: 14px;
  }

  .cs-howto-lecture__text h5 {
    font-size: 17px;
  }

  .cs-howto-titleImage__item::before {
    top: 10px;
    left: 10px;
  }
}
/*=============================================

帳票 06ls

===============================================*/

/*商品ページ*/
.c-compatible-software__table {
  width: 100%;
}
.c-compatible-software__head {
  background-color: #f2f2f2;
  padding: 3px;
}
.c-compatible-software__item {
  box-sizing: border-box;
  border-bottom: solid 1px #ccc;
  margin-bottom: 10px;
  padding: 10px 0;
}
.c-compatible-software__item--soft {
  margin-bottom: 8px;
  padding-left: 5px;
  border-left: solid 8px #ccc;
}

.c-compatible-software__item--vers {
}
/***************************************
06ls 商品グループ 一言説明
**************************************/
@media screen and (min-width: 960px) {
  .ls-oneword-exp-wrap {
    background: #fafafa;
    padding: 16px;
    box-sizing: border-box;
  }

  .ls-oneword-exp01,
  .ls-oneword-exp02 {
    border-collapse: collapse;
    border-collapse: collapse;
    border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
    margin-bottom: 8px;
  }

  .ls-oneword-exp-wrap table th {
    padding: 2px;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    font-size: 12px;
    background: #eaf2ff;
  }
  .ls-oneword-exp-wrap table td {
    padding: 3px 10px;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
  }

  .ls-oneword-exp02 td:first-child,
  .ls-oneword-exp02 td:nth-child(3),
  .ls-oneword-exp02 td:nth-child(4),
  .ls-oneword-exp02 td:nth-child(5),
  .ls-oneword-exp02 td:nth-child(7) {
    text-align: center;
  }
}
/***************************************
06ls コンテンツ
**************************************/
.card-06ls {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: start;
}
.search-wrap-06ls h2 {
  margin-bottom: 24px;
}
.card-06ls > li {
  border-radius: 10px;
  width: calc(25% - 24px);
}
.card-06ls > li dt {
  margin-bottom: 8px;
}
.card-06ls > li dd ul li {
  font-size: 14px;
  line-height: 1.2;
  padding: 10px 16px;
  background: #fff;
  margin-bottom: 8px;
}
/***************************************
06ls レフトナビ
**************************************/
.aside-ls .cateBox-l {
  margin-bottom: 24px;
  padding-top: 24px;
  border-bottom: 2px solid #000;
}
.aside-ls .leftnav .makerName {
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
}
.aside-ls .makername a {
  display: block;
}
.aside-ls .cateBox-m ul {
  margin-bottom: 32px;
}
.aside-ls .cateBox-m ul li {
  font-size: 14px;
  padding: 10px 0;
}

/*=============================================

衛生用品 07eisei

===============================================*/

.eisei.cateCo_header .middle.keywords span {
  border: solid 1px #ccc;
  padding: 3px 5px;
  border-radius: 20px;
  display: inline-block;
}
.c-spec-table__data--caution {
  padding: 0 10px;
}

.c-spec-table__head--caution {
  color: #df4e2a;
}
.c-spec-table__list--caution {
  list-style-type: disc;
  margin-bottom: 3px;
  color: #df4e2a;
  text-align: justify;
}

.spray-exp__image {
  margin-bottom: 24px;
}
.c-spray-exp__common {
  margin-bottom: 48px;
}
.c-spray-exp__common--item {
  list-style-type: disc;
  margin-bottom: 5px;
  border-bottom: solid 1px #ccc;
  padding: 16px;
}
.spray-exp__image {
  margin-bottom: 24px;
}

.use-exp__box {
  margin-bottom: 32px;
}
.use-exp__image {
  margin-bottom: 16px;
}
.use-exp__text {
  color: #555;
  line-height: 1.6;
}
/*=============================================

雑貨・アイテム 08plugin

===============================================*/

/***************************************
08plugin レフトナビ
**************************************/
.aside-plugin__title h3 {
  font-weight: normal;
}
.aside-plugin__item {
  margin-bottom: 1px;
}
/*===================================================================================================================================================================================================================================================================================================================================================================

その他

===================================================================================================================================================================================================================================================================================================================================================================*/
/*削除予定*/
.caution-backorderItem {
  border: solid 1px #f30;
  padding: 16px;
  background: #fff6f4;
}
.caution-backorderItem h5 {
  color: #f30;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}
.caution-backorderItem p {
  font-size: 14px;
  color: #333;
}

/*新*/
.c-caution {
  width: 100%;
}
.c-caution__body {
  padding: 20px;
  background-color: #fff9f9;
  border: 1px solid #ffcccc;
  border-radius: 4px;
}
.c-sec__title h3 {
  padding: 5px 10px 5px 10px;
  margin-bottom: 24px;
  background: #4a4a4a;
  color: #fff;
  margin-bottom: 16px;
  border-radius: 2px;
  letter-spacing: 1px;
}
.c-sec__title h5 {
  color: #f30;
  font-weight: normal;
  margin-bottom: 5px;
}
.c-caution__text {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

/* 画像 */
.sec-caution-shipping {
  border: solid 1px #d4523d;
  padding: 24px 32px 24px;
  box-sizing: border-box;
  background: #fff9f9;
  margin-bottom: 32px;
}
.caution-shipping > p {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 16px;
  text-align: justify;
}
.caution-shipping table {
  border-collapse: collapse;
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
  margin-bottom: 24px;
  background: #fdfdfd;
  font-size: 14px;
}
.caution-shipping p:last-child {
  margin-bottom: 0;
}
.caution-shipping table th {
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  white-space: nowrap;
  text-align: center;
  line-height: 1.8;
  padding: 16px;
  font-weight: normal;
  background: #fafafa;
}
.caution-shipping table tr:first-child th {
  padding: 10px;
  font-size: 12px;
}
.caution-shipping table td {
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  padding: 16px;
  line-height: 1.8;
}

/*********************************************************

商品グループ・サブグループ
アコーディオンメニュー

*********************************************************/
.cutting-sheet-search {
  --accordion-accent: #1769aa;
  --accordion-accent-dark: #0f4f83;
  --accordion-border: #d8e0e8;
  --accordion-surface: #fff;
  --accordion-surface-subtle: #f5f8fb;
  --accordion-text: #24313d;
  --accordion-muted: #5d6975;
  --accordion-radius: 0.75rem;
  /*width: min(100%, 75rem);*/
  width: 100%;
  margin-inline: auto;
  color: var(--accordion-text);
}

.cutting-sheet-search *,
.cutting-sheet-search *::before,
.cutting-sheet-search *::after {
  box-sizing: border-box;
}

.cutting-sheet-search__title {
  margin: 0 0 1.25rem;
  font-size: 16px;
  line-height: 1.4;
}

.cutting-sheet-search__accordion + .cutting-sheet-search__accordion {
  margin-top: 0.75rem;
}

.search-accordion {
  overflow: hidden;
  border: 1px solid var(--accordion-border);
  border-radius: var(--accordion-radius);
  background: var(--accordion-surface);
  box-shadow: 0 0.125rem 0.5rem rgb(27 44 61 / 6%);
}

.search-accordion__heading {
  margin: 0;
}

.search-accordion__button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 3.5rem 0.875rem 1rem;
  border: 0;
  color: var(--accordion-text);
  background: var(--accordion-surface);
  font: inherit;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.search-accordion__button::after {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 0.125rem solid currentcolor;
  border-bottom: 0.125rem solid currentcolor;
  content: "";
  transform: translateY(-70%) rotate(45deg);
  transition: transform 220ms ease;
}

.search-accordion--open > .search-accordion__heading .search-accordion__button {
  color: var(--accordion-accent-dark);
  background: var(--accordion-surface-subtle);
}

.search-accordion--open > .search-accordion__heading .search-accordion__button::after {
  transform: translateY(-30%) rotate(-135deg);
}

.search-accordion__button:focus-visible,
.sheet-type-list__link:focus-visible,
.sheet-type-list-sub__link:focus-visible,
.text-card-list__link:focus-visible,
.machine-search__title-link:focus-visible {
  outline: 0.1875rem solid rgb(23 105 170 / 35%);
  outline-offset: -0.1875rem;
}

.search-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 300ms ease,
    visibility 0s linear 300ms;
}

.search-accordion--open > .search-accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 300ms ease;
}

.search-accordion__content {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-0.375rem);
  transition:
    opacity 180ms ease,
    transform 240ms ease;
}

.search-accordion--open > .search-accordion__panel > .search-accordion__content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 80ms;
}

.search-accordion__body {
  padding: clamp(0.875rem, 2vw, 1.5rem);
  border-top: 1px solid var(--accordion-border);
}

.sheet-type-list,
.sheet-type-list-sub,
.text-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sheet-type-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.875rem;
}

.sheet-type-list__item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--accordion-border);
  border-radius: 0.625rem;
  background: var(--accordion-surface);
}

.sheet-type-list__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.sheet-type-list__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--accordion-surface-subtle);
}

.sheet-type-list__name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.625rem 0.5rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.sheet-type-list-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 0.625rem 0.75rem;
}
.sheet-type-list-sub__list {
  width: 100%;
}
.sheet-type-list-sub__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--accordion-border);
  border-radius: 999px;
  color: var(--accordion-accent-dark);
  background: var(--accordion-surface-subtle);
  /*font-size: 0.8125rem;*/
  line-height: 1.2;
  text-decoration: none;
  width: 100%;
}

.machine-search {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.machine-search__group {
  min-width: 0;
}

.machine-search__title {
  margin: 0 0 0.625rem;
  padding-left: 0.625rem;
  border-left: 0.25rem solid var(--accordion-accent);
  font-size: 1.875rem;
  line-height: 1.5;
}

.machine-search__title-link {
  color: inherit;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.2em;
}

.text-card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.text-card-list--size {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.text-card-list__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  height: 100%;
  padding: 0.625rem;
  border: 1px solid var(--accordion-border);
  border-radius: 0.5rem;
  color: var(--accordion-text);
  background: var(--accordion-surface);
  font-size: 1.475rem;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

@media (hover: hover) {
  .search-accordion__button:hover {
    color: var(--accordion-accent-dark);
    background: var(--accordion-surface-subtle);
  }

  .sheet-type-list__item:hover,
  .text-card-list__link:hover {
    border-color: var(--accordion-accent);
  }

  .sheet-type-list-sub__link:hover,
  .text-card-list__link:hover {
    color: var(--accordion-accent-dark);
    background: #edf5fb;
  }

  .text-card-list__link:hover {
    transform: translateY(-0.125rem);
  }
}

@media screen and (max-width: 1023px) {
  .sheet-type-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .text-card-list--size {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .sheet-type-list,
  .text-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machine-search {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media screen and (max-width: 374px) {
  .sheet-type-list,
  .text-card-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-accordion__button,
  .search-accordion__button::after,
  .search-accordion__panel,
  .search-accordion__content,
  .text-card-list__link {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/*****************************************************************************************************************/
/* 768px以上に適用されるCSS（タブレット用） */
.display_xs-sm-md {
  display: none;
}
/*
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

	メインビジュアル　mainvisual
	
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
*/
/*　トップページのみ　*/
.bx-wrapper {
  margin: 0 auto 50px;
  -webkit-box-shadow: 4px 10px 14px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 4px 10px 14px 0 rgba(0, 0, 0, 0.15);
}
.mainvisualWrap {
  background: #f2f2f2;
  margin-bottom: 30px;
  clear: both;
}
.mainvisual {
  width: 96%;
  margin: 0 auto;
  text-align: center;
  padding: 30px 0 0;
  display: flex;
  flex-direction: row;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.mainvisual ul.mainvisual_sm {
  width: 20%;
  background: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.mainvisual ul.mainvisual_sm li {
  flex-basis: auto;
  margin-bottom: 5px;
  /*
    -webkit-box-shadow: 0px 5px 8px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0px 5px 8px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
*/
}
.mainvisual ul li a {
  display: block;
}
.mainvisual ul.mainvisual_sm li img {
  width: 100%;
  max-width: 230px;
}
.mainvisual ul li a:hover {
  opacity: 0.6;
}
.mainvisual img {
  vertical-align: bottom;
}
.mainvisual .mainvisual_big {
  width: 80%;
  padding: 0px 5px;
  box-sizing: border-box;
  text-align: center;
}
/***
====================================================================================================================================================================================================================================================================================

トップページコンテンツ　トップページ専用　top_contents

====================================================================================================================================================================================================================================================================================
***/
.c-top-cat__title {
  font-size: 18px;
  position: relative;
}
.c-top-cat__title {
  position: relative;
  box-sizing: border-box;
  color: #333;
  padding: 8px 10px;
  display: block;
  font-size: 18px;
  line-height: 1.4;
}
.c-top-cat__title a span {
  display: block;
  font-size: 12px;
  color: #666;
  font-weight: normal;
}
.top-cat__exp {
  width: calc(100% - 178px);
  font-size: 15px;
  line-height: 1.6;
  text-align: justify;
}
.c-top-cat__wrap {
  background: #fafafa;
}
.c-top-cat__wrap h2 {
  border-left-style: solid;
  border-left-width: 8px;
}
.c-top-cat__wrap h2 a {
  position: relative;
  color: #333;
  display: block;
}
.c-top-cat__wrap h2 a:hover,
.c-top-cat__wrap h3 a:hover {
  opacity: 0.6;
}
.c-top-cat__wrap h2 a::after {
  position: absolute;
  content: ">";
  font-size: 12px;
  width: 12px;
  height: 12px;
  font-weight: normal;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
/* デジタル印刷機消耗品 */
.top-cat-01dp .c-top-cat__title {
  border-left-color: #555;
}
/* カッティング用シート */
.top-cat-05cs .c-top-cat__title {
  border-left-color: #d92929;
}
/* インクカートリッジ */
.top-cat-02ic .c-top-cat__title {
  border-left-color: #1e75b9;
}
/* フィルムラベル */
.top-cat-03fl .c-top-cat__title {
  border-left-color: #e6b514;
}
/* 大判インクジェットメディア */
.top-cat-04ijm .c-top-cat__title {
  border-left-color: #6866ae;
}
.top-cat-04ijm h3 a,
.top-cat-02ic h3 a {
  position: relative;
  padding: 8px 8px 8px 0;
  display: block;
  color: #333;
  font-weight: bold;
}
.top-cat-04ijm h3 a::after,
.top-cat-02ic h3 a::after {
  position: absolute;
  content: ">";
  font-size: 8px;
  color: #999;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}
/* 帳票 */
.top-cat-06ls .c-top-cat__title {
  border-left-color: #edd922;
}
/* 衛生用品 */
.top-cat-07eisei .c-top-cat__title {
  border-left-color: #43a3c1;
}
/* プラグイン */
.top-cat-08plugin .c-top-cat__title {
  border-left-color: #5c4f41;
}
.c-top-cat__wrap h3 {
  display: block;
  color: #666;
  margin-bottom: 8px;
  border-bottom: solid 1px #ccc;
  text-align: left;
  margin: 16px 16px 8px;
  font-size: 16px;
  font-weight: normal;
}

.c-top-cat__wrap ul {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.c-top-cat__wrap ul li {
  width: calc(100% / 6 - 3px);
  text-align: center;
  margin-bottom: 8px;
}
.c-top-cat__wrap ul li img {
  background: #fff;
  display: block;
  width: 100%;
}
.display_xs-sm-md {
  display: none;
}

/*　コンテンツ　*/
.c-top-cat__wrap > dl {
  display: flex;
}
.c-top-cat__wrap dl dt {
  align-items: center;
}
.c-top-cat__wrap dl dt img {
  width: 186px;
}
.c-top-cat__wrap dl dd {
  padding: 8px 4px;
}
.c-top-cat__wrap ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.c-top-cat__wrap .c-top-cat__img {
  padding: 5px 5px 5px 0;
}

@media screen and (max-width: 1023px) {
  .c-top-cat__wrap .c-top-cat__img img.less-md {
    display: block !important;
  }
  .c-top-cat__wrap .c-top-cat__img img.more-lg {
    display: none !important;
  }
}
.top-contents,
.top-others {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto; /*すべて1frにすると同じ高さになる*/
  gap: 16px;
  grid-auto-rows: auto;
  grid-template-areas:
    "top-cat-01dp top-cat-05cs"
    "top-cat-02ic top-cat-04ijm"
    "top-cat-03fl top-cat-06ls"
    "top-cat-07eisei top-cat-08plugin";
}

/*　先頭へ戻る　*/
.top_link {
  float: right;
}
.top_link img {
  vertical-align: bottom;
}

.top-cat-01dp {
  grid-area: top-cat-01dp;
}
.top-cat-05cs {
  grid-area: top-cat-05cs;
}
.top-cat-02ic {
  grid-area: top-cat-02ic;
}
.top-cat-03fl {
  grid-area: top-cat-03fl;
}
.top-cat-04ijm {
  grid-area: top-cat-04ijm;
}
.top-cat-06ls {
  grid-area: top-cat-06ls;
}
.top-cat-07eisei {
  grid-area: top-cat-07eisei;
}
.top-cat-08plugin {
  grid-area: top-cat-08plugin;
}
.c-top-cat__wrap > dl {
  padding: 0 16px 0px;
  margin-bottom: 10px;
}
.c-top-cat__wrap ul {
  padding: 0 16px 16px;
}
.c-top-cat__wrap .c-top-cat__img {
  margin-bottom: 5px;
}
.c-top-cat__wrap .c-top-cat__img {
  height: 110px;
  object-fit: contain;
  object-position: center bottom;
  width: 178px;
  display: block;
}
.c-top-cat__list {
  display: flex;
  flex-wrap: wrap;
}
.c-top-cat__item {
  margin-bottom: 3px;
  text-align: center;
}
.c-top-cat__item img {
  width: 100%;
}
/*　画像にシャドウとボタンアニメーション　*/
.c-top-cat__item img {
  z-index: 9999;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.c-top-cat__img img:hover,
.c-top-cat__wrap ul li img:hover {
  -webkit-box-shadow: 0px 5px 8px 0 rgba(0, 0, 0, 0);
  box-shadow: 0px 5px 8px 0 rgba(0, 0, 0, 0);
  z-index: -9999;
}

.display_xs_sm {
  display: none;
}
main.grid_container > dt img {
  height: 300px;
}

.c-top-cat__wrap ul li {
  background: #fff;
}
.c-top-cat__wrap ul li dl dd {
  font-size: 12px;
  text-align: left;
  line-height: 1.2;
}
.makerButton dl dd a {
  color: #333;
  line-height: 1.4;
}

/*==========================================================

トップページ
スマホ用

=========================================================*/

/* PC・タブレットでは非表示 */
.sp-top-category {
  display: none;
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  .sp-top-category {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .sp-top-category__item {
    min-width: 0;
    padding: 5px;
    background: #f2f2f2;
  }

  .sp-top-category__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #333;
    text-align: center;
    text-decoration: none;
  }

  .sp-top-category__image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 8px;
  }

  .sp-top-category__label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 6px 2px;
    font-size: 12px;
    line-height: 1.4;
    box-sizing: border-box;
  }

  .sp-top-category__label--wide {
    letter-spacing: 0.5em;
  }

  .sp-top-category__item--empty {
    visibility: hidden;
  }

  /* ==================================================
   トップページ カテゴリー
   今回のHTMLで使用するスタイルのみ
================================================== */
  .sp-bnr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .grid_item h2 {
    font-size: 16px;
    border-left: solid 5px #ccc;
    padding-left: 5px;
    margin-bottom: 16px;
  }
  .grid_item h2 a {
    color: #333;
    line-height: 1.4;
    display: block;
    text-decoration: none;
    font-weight: bold;
  }
  .grid_item h2 span {
    color: #999;
    padding-top: 10px;
    font-size: 11px;
    font-weight: normal;
  }
  .sp-grid_item-links01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px;
  }
  .sp-grid_item-links01 .sp-grid_item-link {
    width: 24%;
    margin-bottom: 10px;
    padding: 8px;
    box-sizing: border-box;
    font-weight: bold;
    background: #f2f2f2;
  }
  .sp-grid_item-links01 .sp-grid_item-link a {
    text-decoration: none;
    color: #333;
  }
  .sp-grid_item-links01 .sp-grid_item-link dt {
    font-size: 14px;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .sp-grid_item-links01 .sp-grid_item-link dd {
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
  }
  .sp-top_cateImage {
    margin-bottom: 24px;
  }
  .sp-top_cateImage img {
    width: 100%;
  }
  .sp-cate_05-cs .sp-bnr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .sp-cate_05-cs .sp-bnr div {
    width: 49%;
  }
  .sp-cate_05-cs .sp-bnr div dt {
    margin-bottom: 5px;
  }
  .sp-cate_05-cs .sp-bnr div dt img {
    width: 100%;
  }
  .sp-cate_05-cs .sp-bnr div dd {
    font-size: 11px;
  }
  .cate_06-ls.grid_item div dl dt {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
  }
  .sp-grid_item-links02 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sp-grid_item-links02 > div {
    width: 49%;
    display: flex;
    justify-content: center;
    background: #f2f2f2;
    padding: 8px;
    box-sizing: border-box;
  }
  .sp-grid_item-links02 a {
    text-decoration: none;
  }
  .sp-grid_item-links02 > div dl {
    width: 100%;
  }
  .sp-grid_item-links02 > div dl dt {
    font-size: 14px;
  }
  .sp-top-06ls-lists div {
    width: 100%;
    border: solid 1px #999;
    border-radius: 2px;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
  }
  .sp-grid_item--yayoi > dl dt {
    letter-spacing: 0.2em;
  }
  .sp-top-06ls-lists a {
    font-size: 14px;
    padding: 20px 3px;
    text-align: center;
    border-radius: 3px;
    display: block;
    box-sizing: border-box;
    width: 100%;
    letter-spacing: 1px;
    font-weight: bold;
    color: #333;
    background: #fff;
  }
  .sp-top-06ls-lists div span {
    display: block;
    text-align: center;
  }
  .sp-grid_item--hisago .sp-top-06ls-lists div span {
    line-height: 1.3;
  }
  .grid_item {
    margin-bottom: 1em;
    padding: 1.5em 1em;
  }
  .display_xs-sm-md.top-btnArea {
    text-align: center;
    margin-top: 16px;
  }
  .btn-sm {
    color: #ffffff;
    font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
    font-weight: bold;
    padding: 16px 16px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    text-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
    width: 100%;
    margin: 0 auto;
    letter-spacing: 0.1em;
    box-sizing: border-box;
    border-radius: 3px;
  }
  .btn-dp {
    background: #8b8c8d;
    background-image: -webkit-linear-gradient(top, #8b8c8d, #262728);
    background-image: -moz-linear-gradient(top, #8b8c8d, #262728);
    background-image: -ms-linear-gradient(top, #8b8c8d, #262728);
    background-image: -o-linear-gradient(top, #8b8c8d, #262728);
    background-image: -webkit-gradient(to bottom, #8b8c8d, #262728);
    text-shadow: 1px 1px 10px #000000;
  }
  .btn-dp:hover {
    background: #1b1c1c;
    background-image: -webkit-linear-gradient(top, #1b1c1c, #393c3c);
    background-image: -moz-linear-gradient(top, #1b1c1c, #393c3c);
    background-image: -ms-linear-gradient(top, #1b1c1c, #393c3c);
    background-image: -o-linear-gradient(top, #1b1c1c, #393c3c);
    background-image: -webkit-gradient(to bottom, #1b1c1c, #393c3c);
  }
  .btn-ic {
    background: #1c84b7;
    background-image: -webkit-linear-gradient(top, #1c84b7, #1476a5);
    background-image: -moz-linear-gradient(top, #1c84b7, #1476a5);
    background-image: -ms-linear-gradient(top, #1c84b7, #1476a5);
    background-image: -o-linear-gradient(top, #1c84b7, #1476a5);
    background-image: -webkit-gradient(to bottom, #1c84b7, #1476a5);
  }
  .btn-ic:hover {
    background: #1c84b7;
    background-image: -webkit-linear-gradient(top, #1c84b7, #1a81b3);
    background-image: -moz-linear-gradient(top, #1c84b7, #1a81b3);
    background-image: -ms-linear-gradient(top, #1c84b7, #1a81b3);
    background-image: -o-linear-gradient(top, #1c84b7, #1a81b3);
    background-image: -webkit-gradient(to bottom, #1c84b7, #1a81b3);
  }
  .btn-cs {
    background: #c91c1c;
    background-image: -webkit-linear-gradient(top, #c91c1c, #870d0d);
    background-image: -moz-linear-gradient(top, #c91c1c, #870d0d);
    background-image: -ms-linear-gradient(top, #c91c1c, #870d0d);
    background-image: -o-linear-gradient(top, #c91c1c, #870d0d);
    background-image: -webkit-gradient(to bottom, #c91c1c, #870d0d);
  }
  .btn-cs:hover {
    background: #d92929;
    background-image: -webkit-linear-gradient(top, #d92929, #d92929);
    background-image: -moz-linear-gradient(top, #d92929, #d92929);
    background-image: -ms-linear-gradient(top, #d92929, #d92929);
    background-image: -o-linear-gradient(top, #d92929, #d92929);
    background-image: -webkit-gradient(to bottom, #d92929, #d92929);
  }
  .btn-lsijm {
    background: #6866ae;
    background-image: -webkit-linear-gradient(top, #6866ae, #565499);
    background-image: -moz-linear-gradient(top, #6866ae, #565499);
    background-image: -ms-linear-gradient(top, #6866ae, #565499);
    background-image: -o-linear-gradient(top, #6866ae, #565499);
    background-image: -webkit-gradient(to bottom, #6866ae, #565499);
  }
  .btn-lsijm:hover {
    background: #565499;
    background-image: -webkit-linear-gradient(top, #565499, #565499);
    background-image: -moz-linear-gradient(top, #565499, #565499);
    background-image: -ms-linear-gradient(top, #565499, #565499);
    background-image: -o-linear-gradient(top, #565499, #565499);
    background-image: -webkit-gradient(to bottom, #565499, #565499);
  }
  .btn-fl {
    background: #e6b514;
    background-image: -webkit-linear-gradient(top, #e6b514, #a58109);
    background-image: -moz-linear-gradient(top, #e6b514, #a58109);
    background-image: -ms-linear-gradient(top, #e6b514, #a58109);
    background-image: -o-linear-gradient(top, #e6b514, #a58109);
    background-image: -webkit-gradient(to bottom, #e6b514, #a58109);
  }
  .btn-fl:hover {
    background: #e6b514;
    background-image: -webkit-linear-gradient(top, #e6b514, #e6b514);
    background-image: -moz-linear-gradient(top, #e6b514, #e6b514);
    background-image: -ms-linear-gradient(top, #e6b514, #e6b514);
    background-image: -o-linear-gradient(top, #e6b514, #e6b514);
    background-image: -webkit-gradient(to bottom, #e6b514, #e6b514);
  }
  .btn-ls {
    background: #5e8ab7;
    background-image: -webkit-linear-gradient(top, #5e8ab7, #17508a);
    background-image: -moz-linear-gradient(top, #5e8ab7, #17508a);
    background-image: -ms-linear-gradient(top, #5e8ab7, #17508a);
    background-image: -o-linear-gradient(top, #5e8ab7, #17508a);
    background-image: -webkit-gradient(to bottom, #5e8ab7, #17508a);
  }
  .btn-ls:hover {
    background: #17508a;
    background-image: -webkit-linear-gradient(top, #17508a, #17508a);
    background-image: -moz-linear-gradient(top, #17508a, #17508a);
    background-image: -ms-linear-gradient(top, #17508a, #17508a);
    background-image: -o-linear-gradient(top, #17508a, #17508a);
    background-image: -webkit-gradient(to bottom, #17508a, #17508a);
  }
  .btn-eisei {
    background: #43a3c1;
    background-image: -webkit-linear-gradient(top, #43a3c1, #3489a3);
    background-image: -moz-linear-gradient(top, #43a3c1, #3489a3);
    background-image: -ms-linear-gradient(top, #43a3c1, #3489a3);
    background-image: -o-linear-gradient(top, #43a3c1, #3489a3);
    background-image: -webkit-gradient(to bottom, #43a3c1, #3489a3);
  }
  .btn-eisei:hover {
    background: #3389a3;
    background-image: -webkit-linear-gradient(top, #3389a3, #3389a3);
    background-image: -moz-linear-gradient(top, #3389a3, #3389a3);
    background-image: -ms-linear-gradient(top, #3389a3, #3389a3);
    background-image: -o-linear-gradient(top, #3389a3, #3389a3);
    background-image: -webkit-gradient(to bottom, #3389a3, #3389a3);
  }
  .btn-plugin {
    background: #36250b;
    background: -webkit-linear-gradient(0deg, rgba(54, 37, 11, 1) 0%, rgba(92, 90, 66, 1) 100%);
    background: -moz-linear-gradient(0deg, rgba(54, 37, 11, 1) 0%, rgba(92, 90, 66, 1) 100%);
    background: linear-gradient(0deg, rgba(54, 37, 11, 1) 0%, rgba(92, 90, 66, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#36250B", endColorstr="#5C5A42", GradientType=0);
  }
  /* カテゴリー内の画像を親要素幅に合わせる */
  .grid-contents-sp__wrap dt img {
    width: 100%;
  }
}

/*=============================================

ヘッダーメニュー カテゴリ

==============================================*/
.mega-menu__submenu .mega-menu__section-heading--level-5 .mega-menu__link::before {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #999;
}
.mega-menu__submenu .mega-menu__section-heading--level-4 .mega-menu__link::before {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}
/*　リスト矢印小　*/
.mega-menu__link-list .mega-menu__entry {
  border-bottom: dotted 1px #999;
}
.mega-menu__link-list .mega-menu__entry .mega-menu__link {
  padding: 8px 5px 8px 0px;
  text-indent: 4px;
  line-height: 1.2;
  font-size: 12px;
}
.mega-menu__link-list .mega-menu__entry .mega-menu__link::before {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 3px 0 3px 5px;
  border-color: transparent transparent transparent #666;
}
/***********************************************************************************************

	メガメニュー mega
	
***********************************************************************************************/
/* --------------------------------------------------- btn */
.mega-menu__submenu .mega-menu__section-heading--level-5 .mega-menu__link::before {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #999;
}
.mega-menu__submenu .mega-menu__section-heading--level-4 .mega-menu__link::before {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}
/*　リスト矢印小　*/
.mega-menu__link-list .mega-menu__entry {
  border-bottom: dotted 1px #999;
}
.mega-menu__link-list .mega-menu__entry .mega-menu__link {
  padding: 8px 5px 8px 0px;
  text-indent: 4px;
  line-height: 1.2;
  font-size: 12px;
}
.mega-menu__link-list .mega-menu__entry .mega-menu__link::before {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 3px 0 3px 5px;
  border-color: transparent transparent transparent #666;
}
/***********************************************************************************************

	メガメニュー mega
	
***********************************************************************************************/
/* --------------------------------------------------- btn */
.mega-menu {
  margin: 0px;
  background: #d4523d;
  border-bottom: solid 5px #36a6e4;
  z-index: 2147483647;
  position: static;
}
.mega-menu__list {
  position: relative;
  clear: both;
  max-width: 1170px;
  margin: 0 auto;
  z-index: 10000;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  zoom: 1;
}
/*

    メガメニュー2階層目
    
    */
.mega-menu__submenu {
  position: static;
  width: 100%;
  padding: 32px 48px 40px !important;
  visibility: visible;
  opacity: 1;
  gap: 15px;
  box-sizing: border-box;
}
/*メガメニュー内　中カテゴリー*/
.mega-menu__item .mega-menu__section-heading--level-4,
.mega-menu__item .mega-menu__section-heading--level-6 {
  border-radius: 5px;
  margin-bottom: 8px;
  font-size: 14px;
  text-align: center;
  color: #fff;
}
.mega-menu__item .mega-menu__section-heading--level-4 .mega-menu__link {
  color: #fff;
  display: block;
  padding: 8px;
  font-weight: bold;
}
.mega-menu__item .mega-menu__section-heading--level-4 .mega-menu__link:hover {
  opacity: 0.6;
}
/*リンクのない見出し*/
.mega-menu__item .mega-menu__section-heading--level-6 {
  padding: 8px;
}
/**/
.mega-menu__item .mega-menu__entry .mega-menu__group .mega-menu__link .mega-menu__image {
  width: 100%;
}
.mega-menu__item .mega-menu__entry .mega-menu__group .mega-menu__link .mega-menu__image:hover {
  opacity: 0.4;
}
.mega-menu__list .mega-menu__category-heading .mega-menu__link {
  color: #fff;
}
.mega-menu__list .mega-menu__category-heading .mega-menu__link:hover {
  background: #fafafa;
  color: #d4523d;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
/***
====================================================================================================================================================================================================================================================================================

デジタル印刷機専用　dpカテゴリー メガメニュー
    
====================================================================================================================================================================================================================================================================================
***/
.digital-print-menu {
  width: 1170px;
  display: flex;

  justify-content: center;
  padding: 0;
}
.digital-print-menu__item {
  width: calc((100% - 140px) / 7);
  text-align: center;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  padding: 0;
  line-height: 1.3;
}
.digital-print-menu__link {
  text-align: center;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  padding: 4px 0 1px;
}
/*　hover時にメーカー名を太字　*/
.digital-print-menu__item:hover .digital-print-menu__maker-name {
  font-weight: bold;
}
.digital-print-menu__link:hover {
  background: #fff;
  color: #333;
}
/*　カテゴリートップと検索の幅だけ小さく調整　*/
.digital-print-menu__item--top,
.digital-print-menu__item--search {
  width: 70px;
  border-right: solid 1px #fff;
  line-height: 1.4;
}
.digital-print-menu__search-image {
  margin-bottom: 0.1em;
}
/*　検索内のデザイン　*/
.digital-print-menu__search-form {
  margin-bottom: 48px;
}
.digital-print-menu__search-options {
  font-size: 14px;
  justify-content: center;
}
.digital-print-menu__search-option {
  width: calc(100% / 4 - 10px) !important;
  text-align: center;
}
.digital-print-menu__mega-link {
  color: #333;
}
/*　デジタル印刷機消耗品カテゴリー以外のメガメニュー内のデジタル印刷機消耗品　*/
.mega-menu__submenu--digital-print {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
/*
.mega-menu__submenu--digital-print li {
  width: calc(100%/7 - 16px);
}
*/
.mega-menu__submenu--digital-print .mega-menu__entry .mega-menu__image {
  width: 100%;
  border: solid 1px #ccc;
}
/*******************************************************************************　

.category　カテゴリー名

*******************************************************************************/
.mega-menu__list > .mega-menu__entry .mega-menu__category-heading .mega-menu__link {
  text-align: center;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  padding: 10px 15px;
}
.mega-menu__list .mega-menu__category-heading .mega-menu__link:hover {
  background: #fff;
  color: #d4523d;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
/*
英語名とルビ
*/
.digital-print-menu__name-en,
.digital-print-menu__name-kana {
  width: 100%;
  display: block;
}
.digital-print-menu__name-en {
  font-size: 14px;
}
.digital-print-menu__name-kana {
  font-size: 11px;
}
/*　メガメニュー内商品一覧はコチラ　*/
.digital-print-menu__group-link {
  margin-bottom: 24px;
  font-size: 1rem;
}
.digital-print-menu__group-link .digital-print-menu__link {
  text-decoration: underline;
  font-weight: bold;
}
.digital-print-menu__group-link .digital-print-menu__link:hover {
  opacity: 0.6;
}
/******************************************************************

メガメニュー　デジタル印刷機消耗品

********************************************************************/

.mega-menu__submenu--digital-print {
  display: flex;
  flex-direction: row;
}
.mega-menu__submenu--digital-print .mega-menu__entry {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
}
.mega-menu__submenu--digital-print .mega-menu__entry {
  width: calc(100% / 9);
}
.mega-menu__digital-print-list {
  background: #fdfdfd;
}
.mega-menu__digital-print-list > .mega-menu__digital-print-item {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/*
    
    インクカートリッジ
    
    */
.mega-menu__submenu--ink-cartridge {
  display: flex;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.mega-menu__submenu--ink-cartridge .mega-menu__section-heading--level-4 {
  background: #1e75b9;
}
.mega-menu__submenu--ink-cartridge .mega-menu__entry {
  flex-basis: 30%;
}
.mega-menu__submenu--ink-cartridge .mega-menu__entry > .mega-menu__group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
/*大判インクジェットプリンター用*/
.mega-menu__submenu--ink-cartridge .mega-menu__entry > .mega-menu__group > .mega-menu__group {
  flex-basis: 33%;
  margin-bottom: 10px;
}
/*
	
	フィルムラベルの背景
	
	*/
.mega-menu__submenu--film-label {
  display: flex;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
/*二番目以降に来るタイトルの上マージンの調整*/
.mega-menu__submenu--film-label .mega-menu__entry .mega-menu__section-heading--level-4:not(:first-child) {
  margin-top: 16px;
}
.mega-menu__submenu--film-label > .mega-menu__entry:first-child {
  flex-basis: 21%;
}
.mega-menu__submenu--film-label > .mega-menu__entry:nth-of-type(2) {
  flex-basis: 30%;
}
.mega-menu__submenu--film-label > .mega-menu__entry:nth-of-type(3) {
  flex-basis: 30%;
}
.mega-menu__submenu--film-label .mega-menu__section-heading--level-6 {
  background: #e6b514;
}
.mega-menu__submenu--film-label .mega-menu__section-heading--level-4 {
  margin-bottom: 8px;
  border-radius: 5px;
  text-align: center;
  background: #e6b514;
  color: #fff;
}
.mega-menu__submenu--film-label .mega-menu__section-heading--level-6:not(:first-child) {
  margin-top: 16px;
}
/*タグ風デザイン1*/
.mega-menu__keyword-list .mega-menu__entry {
  display: inline-block;
  border: solid 1px #999;
  margin: 1px;
  flex-basis: 30% !important;
}
.mega-menu__keyword-list .mega-menu__entry .mega-menu__link {
  display: block;
  font-size: 12px !important;
  padding: 5px 15px 5px 15px;
  text-align: center;
}
/*タグ風デザイン2*/
.mega-menu__product-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
  row-gap: 4px;
  column-gap: 4px;
}
.mega-menu__submenu--film-label .mega-menu__product-list .mega-menu__entry {
  width: 31.8%;
}
.mega-menu__submenu--media .mega-menu__product-list .mega-menu__entry {
  width: 48%;
}
.mega-menu__product-list .mega-menu__entry {
  border: solid 1px #ccc;
  /*高さを揃える*/
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 40px;
}
.mega-menu__product-list .mega-menu__entry .mega-menu__link {
  padding: 5px 0;
  width: 100% !important;
  display: block;
  text-align: center;
  font-size: 12px;
  box-sizing: border-box;
  line-height: 1.4;
  border-radius: 2px;
}
.mega-menu__product-list .mega-menu__entry .mega-menu__link:hover {
  opacity: 0.6;
  background: #f2f2f2;
}
/*
    
    インクジェットメディアの背景
    
    */
.mega-menu__submenu--media {
  display: flex;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.mega-menu__submenu--media > .mega-menu__entry {
  flex-basis: 26%;
}
.mega-menu__submenu--media > .mega-menu__entry .mega-menu__section-heading--level-4 {
  background: #6866ae;
}
.mega-menu__submenu--media .mega-menu__product-list .mega-menu__entry {
  padding: 10px 0;
}
.mega-menu__submenu--media .mega-menu__product-list .mega-menu__entry .mega-menu__link {
  display: block;
}
/*
    
    カッティングシートの背景
    
    */
.mega-menu__submenu--cutting-sheet {
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.mega-menu__submenu--cutting-sheet .mega-menu__section-heading--level-6 {
  background: #d92929;
}
.mega-menu__submenu--cutting-sheet > .mega-menu__entry:first-child {
  flex-basis: 33%;
}
.mega-menu__submenu--cutting-sheet > .mega-menu__entry:nth-child(2),
.mega-menu__submenu--cutting-sheet > .mega-menu__entry:nth-child(3) {
  flex-basis: 20%;
}
.mega-menu__submenu--cutting-sheet .mega-menu__entry:nth-child(2) .mega-menu__list-node:not(:first-of-type) {
  border-top: solid 3px #ccc;
  padding: 5px 0 0;
  margin-top: 5px;
}
.mega-menu__submenu--cutting-sheet .mega-menu__entry:nth-child(2) .mega-menu__list-node .mega-menu__entry:last-of-type {
  border-bottom: none;
}
.mega-menu__submenu--cutting-sheet > .mega-menu__entry:first-child > .mega-menu__group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 3px;
}
.mega-menu__submenu--cutting-sheet > .mega-menu__entry:first-child > .mega-menu__group .mega-menu__group {
  flex-basis: 32%;
}
.mega-menu__submenu--cutting-sheet .mega-menu__entry > .mega-menu__group {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
}
/*******************************************************************************　

.category　帳票

*******************************************************************************/
/*帳票の字間*/
.mega-menu__list > .mega-menu__entry .mega-menu__link {
  display: block;
}
.mega-menu__submenu--forms {
  display: flex;
  flex-direction: row;
}
.mega-menu__submenu--forms .mega-menu__entry {
  flex-basis: 18%;
}
.mega-menu__submenu--forms .mega-menu__entry .mega-menu__section-heading--level-4 {
  background: #17508a;
}
.mega-menu__submenu--forms .mega-menu__entry > .mega-menu__group .mega-menu__list-node {
  background: #fff;
  /*margin-top: 8px;*/
}
.mega-menu__submenu--forms .mega-menu__section-heading--level-5 .mega-menu__link {
  position: relative;
  padding: 8px 0 5px 0px;
  text-indent: 4px;
  display: block;
  line-height: 1.3;
  font-size: 14px;
}
/*中カテゴリーごとの堺に区切り線をつける*/
.mega-menu__submenu--forms .mega-menu__entry .mega-menu__section-heading--level-5:not(:first-of-type) {
  border-top: solid 1px #666;
  padding-bottom: 5px;
}
.mega-menu__submenu--forms
  .mega-menu__entry:not(:first-child)
  .mega-menu__group
  .mega-menu__list-node
  .mega-menu__entry:last-of-type {
  border-bottom: none;
}
/*******************************************************************************　

衛生用品

*******************************************************************************/
.mega-menu__submenu--hygiene {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #f2f2f2;
}
.mega-menu__submenu--hygiene .mega-menu__entry .mega-menu__definition .mega-menu__term {
  margin-bottom: 10px;
}
.mega-menu__submenu--hygiene .mega-menu__entry .mega-menu__definition .mega-menu__description {
  line-height: 1.4;
}
.mega-menu__submenu--hygiene .mega-menu__image {
  max-width: 150px;
  width: 100%;
}
/*******************************************************************************　

ブランド雑貨/ITEM

*******************************************************************************/
.mega-menu__submenu--items {
  display: flex;
  flex-flow: column;
  justify-content: center;
  background: #000;
}
.mega-menu__submenu--items .mega-menu__item-category--brands,
.mega-menu__submenu--items .mega-menu__item-category--features .mega-menu__list-node {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.mega-menu__submenu--items .mega-menu__item-category--features .mega-menu__list-node .mega-menu__entry {
  width: calc(100% / 3 - 16px);
}
.mega-menu__submenu--items .mega-menu__entry .mega-menu__definition .mega-menu__term {
  margin-bottom: 10px;
}
.mega-menu__submenu--items .mega-menu__definition .mega-menu__description {
  text-align: center;
  font-size: 14px;
  color: #333;
  line-height: 1.2;
}
.mega-menu__submenu--items .mega-menu__definition .mega-menu__description:first-of-type {
  margin-bottom: 5px;
}
.mega-menu__submenu--items .mega-menu__definition .mega-menu__description:nth-of-type(2) {
  display: flex;
  justify-content: center;
  column-gap: 5px;
}
.mega-menu__submenu--items .mega-menu__definition .mega-menu__description .mega-menu__label {
  font-size: 10px;
  background: #7275ac;
  color: #fff;
  padding: 2px 3px;
  border-radius: 2px;
  white-space: nowrap;
  display: inline-block;
}
.mega-menu__item-category .mega-menu__image {
  width: 100%;
}

/*
================================================================================
CSSのみで開閉するPC固定メガメニュー

details / summaryを使用してクリック開閉します。
開閉アイコンは＋ではなく∨を表示します。
================================================================================
*/

/* 961px以上に適用されるCSS（タブレット用） */
/*　リスト矢印中　*/
.menu__second-level h5 a:before {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #999;
}
.menu__second-level h4 a:before {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}
/*　リスト矢印小　*/
.mega_menuList li {
  border-bottom: dotted 1px #999;
}
.mega_menuList li a {
  padding: 8px 5px 8px 0px;
  text-indent: 4px;
  line-height: 1.2;
  font-size: 13px;
}
.mega_menuList li a:before {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 3px 0 3px 5px;
  border-color: transparent transparent transparent #666;
}
/***********************************************************************************************

	メガメニュー mega
	
***********************************************************************************************/
body#topPage .menuWrap {
  margin: 0px 0px 0px;
}
/* --------------------------------------------------- btn */
.menuWrap {
  margin: 0px;
  /*background: #d4523d;*/
  background: #c45644;
  /*border-bottom: solid 5px #36a6e4;*/
  z-index: 2147483647;
  position: static;
}
.menu {
  position: relative;
  clear: both;
  max-width: 1170px;
  margin: 0 auto;
  z-index: 10000;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  *zoom: 1;
}
/*

    メガメニュー2階層目
    
    */
.menu__second-level {
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  gap: 15px;
}
.menu__second-level {
  position: absolute;
  top: 67px;
  left: 0;
  width: 100%;
  padding: 32px 48px 40px !important;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}
/* メガメニューの開閉は、下部の details / summary 用CSSで制御します。 */
/*メガメニュー内　中カテゴリー*/
.menu__mega h4 {
  border-radius: 5px;
  margin-bottom: 8px;
  font-size: 14px;
  text-align: center;
  color: #fff;
}
.menu__mega h4 a {
  color: #fff;
  display: block;
  padding: 8px;
  font-weight: bold;
}
.menu__mega h4 a:hover {
  opacity: 0.6;
}

/**/
.menu__mega li div a img {
  width: 100%;
}
.menu__mega li div a img:hover {
  opacity: 0.4;
}
.menu h3 a {
  color: #fff;
}
.menu h3 a:hover {
  background: #fafafa;
  color: #d4523d;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
/***
====================================================================================================================================================================================================================================================================================

デジタル印刷機専用　dpカテゴリー メガメニュー
    
====================================================================================================================================================================================================================================================================================
***/
.menu-dp {
  width: 1170px;
  display: flex;

  justify-content: center;
  padding: 0;
}
.menu-dp > li {
  width: calc((100% - 140px) / 7);
  text-align: center;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  padding: 0;
  line-height: 1.3;
}
.menu-dp > li > a {
  text-align: center;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  padding: 4px 0 1px;
}
/*　hover時にメーカー名を太字　*/
.menu-dp > li:hover span {
  font-weight: bold;
}
.menu-dp > li a:hover {
  background: #fff;
  color: #333;
}
/*　カテゴリートップと検索の幅だけ小さく調整　*/
.menu-dp .mega-top,
.menu-dp .mega-search {
  width: 70px;
  border-right: solid 1px #fff;
  line-height: 1.4;
}
.mega-search img {
  margin-bottom: 0.1em;
}
/*　検索内のデザイン　*/
.menu-dp .mega-search form {
  margin-bottom: 48px;
}
.menu-dp .mega-search .flexArea {
  font-size: 14px;
  justify-content: center;
}
.menu-dp .mega-search .flexArea li {
  width: calc(100% / 4 - 10px) !important;
  text-align: center;
}
.menu-dp .mega-dp a {
  color: #333;
}
/*　デジタル印刷機消耗品カテゴリー以外のメガメニュー内のデジタル印刷機消耗品　*/
.mega_dp {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
/*
.mega_dp li {
  width: calc(100%/7 - 16px);
}
*/
.mega_dp li img {
  width: 100%;
  border: solid 1px #ccc;
}
/*******************************************************************************　

.category　カテゴリー名

*******************************************************************************/
.menu > li h3 a {
  text-align: center;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  padding: 10px 15px;
}
.menu h3 a:hover {
  background: #fff;
  color: #d4523d;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
/*
英語名とルビ
*/
.menu-dp .en,
.menu-dp .rubi {
  width: 100%;
  display: block;
}
.menu-dp .en {
  font-size: 14px;
}
.menu-dp .rubi {
  font-size: 11px;
}
/*　メガメニュー内商品一覧はコチラ　*/
.link-dp-group {
  margin-bottom: 24px;
  font-size: 1rem;
}
.link-dp-group a {
  text-decoration: underline;
  font-weight: bold;
}
.link-dp-group a:hover {
  opacity: 0.6;
}
/******************************************************************

メガメニュー　デジタル印刷機消耗品

********************************************************************/

.mega_dp {
  display: flex;
  flex-direction: row;
}
.mega_dp li {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
}
.mega_dp li {
  width: calc(100% / 9);
}
.mega_dp .flexArea {
  background: #fdfdfd;
}
.mega_dp .flexArea > li {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/*
    
    インクカートリッジ
    
    */
.mega_ic {
  display: flex;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.mega_ic h4 {
  background: #1e75b9;
}
.mega_ic li {
  flex-basis: 30%;
}
.mega_ic li > div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/*
	
	フィルムラベルの背景
	
	*/
.mega_film {
  display: flex;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
/*二番目以降に来るタイトルの上マージンの調整*/
.mega_film li h4:not(:first-child) {
  margin-top: 16px;
}
.mega_film > li:first-child {
  flex-basis: 21%;
}
.mega_film > li:nth-of-type(2) {
  flex-basis: 30%;
}
.mega_film > li:nth-of-type(3) {
  flex-basis: 30%;
}
.mega_film h6 {
  background: #e6b514;
}
.mega_film h4 {
  margin-bottom: 8px;
  border-radius: 5px;
  text-align: center;
  background: #e6b514;
  color: #fff;
}
.mega_film h6:not(:first-child) {
  margin-top: 16px;
}
/*タグ風デザイン1*/
.icon-keywords li {
  display: inline-block;
  border: solid 1px #999;
  margin: 1px;
  flex-basis: 30% !important;
}
.icon-keywords li a {
  display: block;
  font-size: 12px !important;
  padding: 5px 15px 5px 15px;
  text-align: center;
}
/*タグ風デザイン2*/
.header-line-up {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
  row-gap: 4px;
  column-gap: 4px;
}
.mega_film .header-line-up li {
  width: 31.8%;
}
.mega_media .header-line-up li {
  width: 48%;
}
.header-line-up li {
  border: solid 1px #ccc;
  /*高さを揃える*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 40px;
}
.header-line-up li a {
  padding: 5px 0;
  width: 100% !important;
  display: block;
  text-align: center;
  font-size: 12px;
  box-sizing: border-box;
  line-height: 1.4;
  border-radius: 2px;
}
.header-line-up li a:hover {
  opacity: 0.6;
  background: #f2f2f2;
}
/*
    
    インクジェットメディアの背景
    
    */
.mega_media {
  display: flex;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.mega_media > li {
  flex-basis: 26%;
}
.mega_media > li h4 {
  background: #6866ae;
}
.mega_media .header-line-up li {
  padding: 10px 0;
}
.mega_media .header-line-up li a {
  display: block;
}
/*
    
    カッティングシートの背景
    
*/
.mega_cut {
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.mega_cut h6 {
  border-bottom: solid 2px #000;
  font-size: 16px;
  padding-bottom: 5px;
}
.mega_cut > li:first-child {
  flex-basis: 33%;
}
.mega_cut > li:nth-child(2),
.mega_cut > li:nth-child(3) {
  flex-basis: 20%;
}
.mega_cut li:nth-child(2) ul:not(:first-of-type) {
  border-top: solid 3px #ccc;
  padding: 5px 0 0;
  margin-top: 5px;
}
.mega_cut li:nth-child(2) ul li:last-of-type {
  border-bottom: none;
}
.mega_cut > li:first-child > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 3px;
}
.mega_cut > li:first-child > div div {
  flex-basis: 32%;
}
.mega_cut li > div {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
}
/*******************************************************************************　

.category　帳票

*******************************************************************************/
/*帳票の字間*/
.menu > li a {
  display: block;
}
.mega_chohyo {
  display: flex;
  flex-direction: row;
}
.mega_chohyo li {
  flex-basis: 18%;
}
.mega_chohyo li h4 {
  background: #17508a;
}
.mega_chohyo li > div ul {
  background: #fff;
  /*margin-top: 8px;*/
}
.mega_chohyo h5 a {
  position: relative;
  padding: 8px 0 5px 0px;
  text-indent: 4px;
  display: block;
  line-height: 1.3;
  font-size: 14px;
}
/*中カテゴリーごとの堺に区切り線をつける*/
.mega_chohyo li h5:not(:first-of-type) {
  border-top: solid 1px #666;
  padding-bottom: 5px;
}
.mega_chohyo li:not(:first-child) div ul li:last-of-type {
  border-bottom: none;
}
/*******************************************************************************　

衛生用品

*******************************************************************************/
.mega_eisei {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #f2f2f2;
}
.mega_eisei li dl dt {
  margin-bottom: 10px;
}
.mega_eisei li dl dd {
  line-height: 1.4;
}
.mega_eisei img {
  max-width: 150px;
  width: 100%;
}
/*******************************************************************************　

ブランド雑貨/ITEM

*******************************************************************************/
.mega_item {
  display: flex;
  flex-flow: column;
  justify-content: center;
  background: #000;
}
.mega_item .mega_item-category01,
.mega_item .mega_item-category02 ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.mega_item .mega_item-category02 ul li {
  width: calc(100% / 3 - 16px);
}
.mega_item li dl dt {
  margin-bottom: 10px;
}
.mega_item dl dd {
  text-align: center;
  font-size: 14px;
  color: #333;
  line-height: 1.2;
}
.mega_item dl dd:first-of-type {
  margin-bottom: 5px;
}
.mega_item dl dd:nth-of-type(2) {
  display: flex;
  justify-content: center;
  column-gap: 5px;
}
.mega_item dl dd span {
  font-size: 10px;
  background: #7275ac;
  color: #fff;
  padding: 2px 3px;
  border-radius: 2px;
  white-space: nowrap;
  display: inline-block;
}
.mega_item-category img {
  width: 100%;
}

/***********************************************************************************************

  JavaScriptなしのクリック開閉式メガメニュー
  HTML: details / summary
  Layout: CSS Grid

***********************************************************************************************/

/* 上位カテゴリーを8列のグリッドにする */
.menuWrap .menu {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: stretch;
  justify-content: initial;
}

/* 親リンクとdetailsを同じセルに重ね、内部でリンク列と矢印列を完全に分離する */
.menu > .menu__mega-item {
  position: static;
  display: grid;
  min-width: 0;
}

.menu > .menu__mega-item > .menu__heading,
.menu > .menu__mega-item > .menu__mega {
  grid-area: 1 / 1;
  min-width: 0;
}

.menu > .menu__mega-item > .menu__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: stretch;
  min-height: 52px;
  margin: 0;
  pointer-events: none;
}

.menu > .menu__mega-item > .menu__heading > a {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  padding: 10px 6px;
  box-sizing: border-box;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: auto;
}

/* detailsは矢印とパネルだけを担当。親リンクのクリック領域には入らない */
.menu > .menu__mega-item > .menu__mega {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  grid-template-rows: minmax(52px, auto);
  align-items: stretch;
  pointer-events: none;
}

.menu__toggle {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  min-height: 52px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  list-style: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.menu__toggle::-webkit-details-marker {
  display: none;
}

.menu__toggle::marker {
  content: "";
}

.menu__toggle:hover,
.menu__mega[open] > .menu__toggle,
.menu__mega-item:has(> .menu__mega[open]) > .menu__heading > a {
  background: #fff;
  color: #d4523d;
}

.menu__toggle:focus-visible,
.menu > .menu__mega-item > .menu__heading > a:focus-visible {
  outline: 3px solid #36a6e4;
  outline-offset: -3px;
}

/* CSSだけで作る下向き矢印。open属性に連動して上向きになる */
.menu__toggle-icon {
  display: block;
  width: 9px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform 240ms ease;
}

.menu__mega[open] > .menu__toggle .menu__toggle-icon {
  transform: rotate(-135deg);
}

/*
  古いブラウザー向けの機能フォールバック。
  detailsが閉じている間は非表示、開いている間だけグリッド表示する。
*/
.menu__mega:not([open]) > .menu__second-level {
  display: none !important;
}

.menu__mega[open] > .menu__second-level {
  display: grid !important;
  animation: mega-menu-fallback-open 220ms ease-out;
}

@keyframes mega-menu-fallback-open {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* メガメニュー本体。従来のhover用指定を上書きする */
.menu .menu__second-level {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100%;
  max-height: calc(100vh - 70px);
  margin: 0;
  padding: 32px 48px 40px !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

/*
  現行ブラウザーではdetailsの内容ラッパーを直接アニメーションする。
  content-visibilityも遷移させるため、閉じる方向も途中で消えず滑らかになる。
*/
@supports selector(details::details-content) {
  .menu__mega:not([open]) > .menu__second-level,
  .menu__mega[open] > .menu__second-level {
    display: grid !important;
    position: static !important;
    animation: none;
  }

  .menu__mega::details-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    display: block;
    max-block-size: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition:
      max-block-size 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 220ms ease,
      transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
      content-visibility 360ms allow-discrete;
  }

  .menu__mega[open]::details-content {
    max-block-size: calc(100vh - 70px);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Chrome/Edge系では内容の実寸まで補間し、さらに自然な高さ変化にする */
@supports (block-size: calc-size(auto, size)) {
  .menu__mega::details-content {
    block-size: 0;
    max-block-size: none;
    transition:
      block-size 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 220ms ease,
      transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
      content-visibility 360ms allow-discrete;
  }

  .menu__mega[open]::details-content {
    block-size: calc-size(auto, size);
  }
}

/* 各メガメニューのグリッド */
.menu .mega_dp {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
}

.menu .mega_dp > li {
  display: block;
  width: auto;
  min-width: 0;
}

.menu .mega_ic {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

.menu .mega_ic > li {
  min-width: 0;
}

.menu .mega_ic > li > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.menu .mega_ic > li > div > div {
  min-width: 0;
  margin-bottom: 0;
}

.menu .mega_film {
  grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 24px;
}

.menu .icon-keywords {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.menu .icon-keywords > li {
  display: block;
  min-width: 0;
  margin: 0;
}

.menu .header-line-up {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.menu .header-line-up > li {
  display: grid;
  place-items: center;
  width: auto;
  min-width: 0;
  min-height: 40px;
  height: auto;
}

.menu .header-line-up > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.menu .mega_media {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

.menu .mega_media .header-line-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.menu .mega_cut {
  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)
    minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.menu .mega_cut > li {
  min-width: 0;
}

.menu .mega_cut > li:first-child > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.menu .mega_cut > li:first-child > div > div {
  min-width: 0;
}

.menu .mega_chohyo {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

.menu .mega_chohyo > li {
  min-width: 0;
}

.menu .mega_eisei {
  grid-template-columns: repeat(3, minmax(0, 220px));
  justify-content: center;
  align-items: start;
  gap: 24px;
  background: #f2f2f2;
}

.menu .mega_item {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  background: #000;
}

.menu .mega_item .mega_item-category02 ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.menu .mega_item .mega_item-category02 ul li {
  width: auto;
  min-width: 0;
}
.menu .mega_item .mega_item-category02 ul li a:hover {
  opacity: 0.6;
}
/* 960px以下は縦型。開いたパネルが該当カテゴリー直下へ展開される */
@media screen and (max-width: 960px) {
  .menuWrap .menu {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu > .menu__mega-item {
    position: relative;
  }

  .menu > .menu__mega-item > .menu__mega {
    grid-template-rows: minmax(52px, auto) auto;
  }

  .menu .menu__second-level {
    position: static !important;
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: none;
    padding: 20px !important;
    box-shadow: inset 0 1px 0 #ddd;
  }

  @supports selector(details::details-content) {
    .menu__mega::details-content {
      position: static;
      grid-column: 1 / -1;
      grid-row: 2;
      top: auto;
      left: auto;
      right: auto;
      width: 100%;
      max-block-size: 0;
      transform: none;
    }

    .menu__mega[open]::details-content {
      max-block-size: 3000px;
      transform: none;
    }
  }

  @supports (block-size: calc-size(auto, size)) {
    .menu__mega::details-content {
      block-size: 0;
      max-block-size: none;
    }

    .menu__mega[open]::details-content {
      block-size: calc-size(auto, size);
      max-block-size: none;
    }
  }

  .menu .mega_dp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu .mega_cut,
  .menu .mega_ic,
  .menu .mega_film,
  .menu .mega_media,
  .menu .mega_chohyo {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu .mega_eisei {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu .mega_item .mega_item-category02 ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  .menu .mega_dp,
  .menu .mega_eisei,
  .menu .mega_item .mega_item-category01,
  .menu .mega_item .mega_item-category02 ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu .mega_cut > li:first-child > div,
  .menu .header-line-up,
  .menu .mega_media .header-line-up,
  .menu .icon-keywords,
  .menu .mega_ic > li > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu__toggle-icon,
  .menu__mega::details-content {
    transition: none !important;
  }

  .menu__mega[open] > .menu__second-level {
    animation: none;
  }
}