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


/* 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: 12px;
}
.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;
  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;
  -webkit-transition: all .2s ease;
   box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
  box-sizing: border-box;
}
/*メニュー内のカテゴリー名をhoverした時に
    メガメニューが浮き出てくる*/
.menu__mega:hover ul.menu__second-level {
  top: 32px;
  visibility: visible;
  opacity: 1;
  padding-bottom: 20px;
	background: #fff;
  z-index: -1; /*メガメニュー出現時にメニューh3の文字にかぶらないように*/
}
/*メガメニュー内　中カテゴリー*/
.menu__mega h4, .menu__mega h6 {
  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 h6 {
  padding: 8px;
}
/**/
.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 .5s;
  transition: all .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 .5s;
  transition: all .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: 1.0rem;
}
.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_ic li > div > div {
  flex-basis: 33%;
  margin-bottom: 10px;
}
/*
	
	フィルムラベルの背景
	
	*/
.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;
  /*高さを揃える*/
  display: -webkit-box;
  display: -ms-flexbox;
  -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 {
  background: #D92929;
}
.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%;
}