﻿@charset "UTF-8";

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# PC～Tablet(max-width:1100px)
  ## 商品カタログ
     ### 探し方
  ## 大項目分類
     ### 分類概要
     ### 製品一覧
# PC～Tablet(max-width:965px)
  ## 検索結果
     ### 製品検索結果
  ## ページ送り
# PC～Tablet(max-width:928px)
  ## 商品カタログ
     ### スライダー
     ### 製品お知らせ
     ### 探し方
# Tablet
  ## 商品カタログ
     ### 製品お知らせ
     ### 探し方
  ## 大項目分類
     ### 製品一覧
  ## 検索結果
     ### 製品検索結果
# Smartphone
  ## 商品カタログ
     ### スライダー
     ### 製品お知らせ
     ### 探し方
     ### 技術資料ダウンロード
  ## 大項目分類
     ### 分類概要
     ### 製品一覧
  ## 検索結果
     ### 製品検索結果
     ### お役立ち情報検索結果
  ## ページ送り
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# PC～Tablet
--------------------------------------------------------------*/
@media screen and (max-width: 1100px) {

  /*--------------------------------------------------------------
  # 商品カタログ
  --------------------------------------------------------------*/
  /**
  * 探し方
  */
  .catalog-tabs-list a {
    font-size: 14px;
  }

  .catalog-tabs-list li {
    width: calc(100%/2);
  }

  .catalog-tabs-list li + li {
    margin: 0;
  }

  .catalog-panel-list h3 {
    line-height: 1.2;
  }

  .tag-list {
    padding: 0 10px;
    flex-wrap: wrap;
  }

  .tag-list li {
    /*
    width: calc( (100%/6) - 30.5px );*/
    width: auto;
    margin: 0 5px 15px;
    text-align: center;
  }

  .catalog-download-list {
    flex-wrap: wrap;
    padding: 0 8%;
  }

  .catalog-download-list li {
    width: calc( (100%/2) - 16px );
    margin: 0 8px 16px;
  }

  .category-inner {
    padding: 0 20px;
  }

  /*--------------------------------------------------------------
  # 大項目分類
  --------------------------------------------------------------*/
  /**
  * 分類概要
  */
  .summary-popularity {
    width: 100%;
  }

  .summary-popularity-detail {
    padding: 0 20px;
  }

  .summary-popularity-detail h3 {
    font-size: 18px;
    margin: 0 0 8px;
  }

  .summary-popularity-detail p {
    font-size: 13px;
  }

  .btn-more {
    font-size: 18px;
    padding: 10px;
    width: 310px;
    margin: 30px auto 0;
  }

  /**
  * 製品一覧
  */
  .product-toggle dt::after {
    right: 30px;
  }

}/* max-width: 1100px */

@media screen and (max-width: 965px) {

  /*--------------------------------------------------------------
  # 検索結果
  --------------------------------------------------------------*/
  /**
  * 製品検索結果
  */
  /*検索高さ*/
  .search-result-field.is-hide {
    height: auto;
  }

  /*--------------------------------------------------------------
  # ページ送り
  --------------------------------------------------------------*/
  .cp_navi .cp_pagination {
		margin-top: 50px;
		padding: 0 10px;
	}
	.cp_navi .cp_pagenum {
	font-size: 0.8em;
	line-height: 25px;
	width: 45px;
	height: 25px;
	margin: auto .1em;
	border-radius: 0.3em;
}
	.cp_navi .cp_pagenum.prev,
	.cp_navi .cp_pagenum.next {
		padding: 0 25px 0 0;
	}
	.cp_navi .cp_pagenum:hover,
	.cp_navi .cp_pagenum.current {
		border-radius: 0.3em;
	}
	.cp_navi .cp_pagenum.prev:hover,
	.cp_navi .cp_pagenum.next:hover {
		border-radius: 0.3em;
	}

}/* max-width: 965px */

@media screen and (max-width: 928px) {

  /*--------------------------------------------------------------
  # 商品カタログ
  --------------------------------------------------------------*/
  /**
  * スライダー
  */
  .slider-wrapper {
    margin: 0;
  }

  .catalog-slide-thumb {
    display: none;
  }

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

  .slick-dotted.slick-slider {
    margin-bottom: 60px;
  }

  #catalog-slider-arrow .slide-prev,
  #catalog-slider-arrow .slide-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    opacity: .4;
  }

  #catalog-slider-arrow .slide-prev {
    left: 15px;
  }

  #catalog-slider-arrow .slide-next {
    right: 15px;
  }

  .catalog-slide .slick-dots li {
    margin: 0;
  }

  .catalog-slide .slick-dots li button:before,
  .catalog-slide .slick-dots li.slick-active button:before {
    opacity: 1;
  }

  .catalog-slide .slick-dots li button:before {
    color: #d1d1d1;
  }

  .catalog-slide .slick-dots li.slick-active button:before {
    color: #f0c30a;
  }

  /**
  * 製品お知らせ
  */
  .product-news-main {
    flex-wrap: wrap;
  }

  .product-news {
    flex: 0 0 100%;
    border-top: solid 1px #9f9f9f;
    padding: 30px 0 0;
    position: relative;
  }

  .product-news-banner {
    display: none;
  }

  /**
  * 探し方
  */
  .catalog-panel-list li {
    width: calc( (100%/2) - 26px );
  }

  .attention-list {
    margin: 0 -18px;
  }

  .attention-list li {
    width: calc( (100%/3) - 36px );
    margin: 0 18px 30px;
  }

}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {

  /*--------------------------------------------------------------
  # 商品カタログ
  --------------------------------------------------------------*/
  /**
  * 製品お知らせ
  */
  .product-news h2::before,
  .catalog-download-section h2::before {
    content: none;
  }

  .news-list {
    clear: both;
    margin: 20px 10px 20px 10px;
  }

  .product-news h2 {
    font-size:16px;
    padding: 8px 10px;
  }

  .product-news-detail {
    font-size: 14px;
    padding: 0;
  }

  .product-news-list-wrapper {
    padding: 0 15px;
    max-height: unset;
    overflow: unset;
  }

  .product-news-list li {
    padding: 14px 10px;
    flex-basis: 100%;
    border-bottom: 0;
  }
/*ijima 20200918*/
  /*.product-news-list li:nth-child(n+4) {
    display: none;
  }*/

  .product-news-list a::after {
    content: none;
  }

  .product-news-old {
    position: relative;
    top: 0;
    left: 0;
    margin: 16px 0 0;
    padding: 0;
    text-align: center;
  }

  .product-news-old a {
    display: inline-block;
    font-size: 14px;
    color: #0782e0;
    border: solid 1px #0782e0;
    border-radius: 20px;
    padding: 5px 10px;
  }

  .product-news-old a::before {
    background: url(../images/catalog/arrow-product-old.png) no-repeat 0 0 / contain;
  }

  .product-news-date {
    text-decoration: none;
  }

  .product-news-date span {
    display: none;
  }

  .product-news-ttl {
    margin: -2px 0 0 12px;
    align-items: center;
  }

  .news-list-new {
    display: block;
    text-align: center;
    font-size: 10px;
    color: #af005f;
  }

  /**
  * 探し方
  */
  .catalog-panel-list,
  .catalog-panel-list li {
    width: 100%;
    margin: 0;
  }

  .catalog-panel-list li + li {
    margin: 20px 0 0;
  }

  .attention-list,
  .attention-list li {
    width: 100%;
    margin: 0;
  }

  .attention-list li + li {
    margin: 30px 0 0;
  }

  .tag-list {
    padding: 0;
    flex-wrap: wrap;
  }

  .tag-list li {
    /*
    width: calc( (100%/6) - 30.5px );*/
    width: auto;
    margin: 0 5px 15px;
  }

  .catalog-search-note {
    display: block;
    text-align: center;
    margin: 0 0 10px
  }

  .catalog-search {
    width: 100%;
    margin: 0 auto;
  }

  .catalog-search input::placeholder {
    color: transparent;
  }
  .catalog-search input:-ms-input-placeholder {
    color: transparent;
  }

  .catalog-search input[type="text"] {
    font-size: 15px;
    padding: 20px;
  }

  .catalog-search input[type="submit"] {
    top: 65%;
    right: 20px;
  }

  .catalog-tabs {
    border-top: solid 1px #d9d9d9;
    padding: 40px 0 0;
  }

/*  .catalog-tabs-list,
  .catalog-tabs .panel {
    display: none;
  }*/

  .catalog-tabs .panel {
    min-height: unset;
    padding: 35px 20px;
  }

  .catalog-accordion-trigger {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #313131;
    padding: 20px 60px;
    cursor: pointer;
    border-top: dotted 1px #c0c0c0;
    position: relative;
    letter-spacing: 0.05;
  }

  .catalog-accordion-trigger.open {
    border-bottom: solid 1px #FFF;
  }

  .catalog-accordion-trigger::after {
    content: "";
    width: 16px;
    height: 9px;
    background: url(../images/catalog/arrow-accordion-close.png) no-repeat 0 0 / contain;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
  }

  .catalog-accordion-trigger.open::after {
    background: url(../images/catalog/arrow-accordion-open.png) no-repeat 0 0 / contain;
  }

  .catalog-accordion-ttl {
    display: block;
    left: 0;
    margin: 0;
    background: #1468ac;
    font-size: 16px;
    padding: 8px 10px;
  }

  .catalog-accordion-ttl::before {
    content: none;
  }

  .catalog-accordion-trigger::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
/*
    background: url(../images/catalog/ico-accordion-list.png) no-repeat 0 0 / contain;
*/
    background: url(../images/catalog/tab01.png) no-repeat 0 0 / contain;

  }

  .accordion-trigger-list::before {
    width: 26px;
    height: 26px;
    background: url(../images/catalog/ico-accordion-list.png) no-repeat 0 0 / contain;
  }

  .accordion-trigger-attention::before {
    width: 26px;
    height: 26px;
/*
    background: url(../images/catalog/ico-accordion-attention.png) no-repeat 0 0 / contain;
*/
    background: url(../images/catalog/tab03.png) no-repeat 0 0 / contain;

  }

  .accordion-trigger-tag::before {
    width: 31px;
    height: 26px;
    left: 18px;
    background: url(../images/catalog/ico-accordion-tag.png) no-repeat 0 0 / contain;
  }

  .accordion-trigger-tag {
    border-bottom: dotted 1px #c0c0c0;
  }

  .accordion-trigger-search::before {
    width: 26px;
    height: 26px;
    background: url(../images/catalog/ico-accordion-search.png) no-repeat 0 0 / contain;
  }

  /*--------------------------------------------------------------
  # 大項目分類
  --------------------------------------------------------------*/
  .category-inner {
    padding: 0 !important;
  }

  .sp-inner {

    padding: 0px !important;
  }

  .first-ttl {
    margin: 0px;
    display:none;
  }

  .first-ttl2 {
    margin: 0px;
    font-size:20px;
    display:block;

  }

  /**
  * 製品一覧
  */
  .product-toggle dd {
    display: none;
  }

  .product-toggle dt::after {
    content: url(../images/category/arrow-toggle-open.png);
  }

  .product-toggle dt.open::after {
    content: url(../images/category/arrow-toggle-close.png);
  }

  /*--------------------------------------------------------------
  # 検索結果
  --------------------------------------------------------------*/
  /**
  * 製品検索結果
  */
  section.search-result-section {
    padding: 40px 0 0;
    overflow: hidden;
  }

  .search-result-section h2 {
    background: none;
    margin: 0 0 34px;
    text-align: center;
  }

  .result-table th {
    width: 80px;
  }

  .result-table td a + a {
    margin: 0 0 0 20px;
  }

  /*--------------------------------------------------------------
  # ページ送り
  --------------------------------------------------------------*/
  .cp_navi .cp_pagenum {
  	display: none;
  	border-radius: 0.3em;
  	}
  	.cp_navi .cp_pagenum:nth-of-type(2) {
  	position: relative;
  	padding-right: 20px;
  	}
  	.cp_navi .cp_pagenum:nth-of-type(2)::after {
  	font-size: 1.2em;
  	position: absolute;
  	top: 0;
  	left: 25px;
  	content: '...';
  	}
  	.cp_navi .cp_pagenum:nth-child(-n+3),
  	.cp_navi .cp_pagenum:nth-last-child(-n+3) {
  		display: block;
  	}
  	.cp_navi .cp_pagenum:nth-last-child(-n+4) {
  		padding: 0 5px;
  	}
  	.cp_navi .cp_pagenum:nth-last-child(-n+4)::after {
  		content: none;
  	}
  	.cp_navi .cp_pagenum:hover,
  	.cp_navi .cp_pagenum.current {
  		border-radius: 0.3em;
  	}
  	.cp_navi .cp_pagenum.prev:hover,
  	.cp_navi .cp_pagenum.next:hover {
  		border-radius: 0.3em;
  	}

.footer-sns {
	text-align:center;
}

}/* max-width: 768px */

/*--------------------------------------------------------------
# Smartphone
--------------------------------------------------------------*/
@media screen and (max-width: 667px) {

  /*--------------------------------------------------------------
  # 商品カタログ
  --------------------------------------------------------------*/
  /**
  * スライダー
  */
  #catalog-slider-arrow .slide-prev img,
  #catalog-slider-arrow .slide-next img {
    width: 18px
  }

  #catalog-slider-arrow .slide-prev {
    left: 10px;
  }

  #catalog-slider-arrow .slide-next {
    right: 10px;
  }

  /**
  * 製品お知らせ
  */
  .product-news-detail {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .product-news-detail a {
    font-size: 13px;
  }
  .product-news h2 span {
    display: none;
  }

  /**
  * 技術資料ダウンロード
  */
  .catalog-download-section h2 span {
    display: none;
  }

  .catalog-download-section h2 {
    font-size: 16px;
    padding: 8px 10px;
  }

  .catalog-download-list li {
    width: 100%;
    margin: 0;
  }

  .catalog-download-list li + li {
    margin: 20px 0 0;
  }

  /*--------------------------------------------------------------
  # 大項目分類
  --------------------------------------------------------------*/
  /**
  * 分類概要
  */
  section.cat-summary-section {
    padding: 0;
  }

  .summary-item p {
    font-size: 95%;
  }

  .summary-popularity,
  .summary-popularity figure img {
    border-radius: 0;
  }

  .summary-popularity {
    margin: 30px 0 0;
  }

  .summary-popularity::after {
    content: none;
  }

  .summary-popularity figure,
  .summary-popularity-detail {
    flex-basis: 100%;
  }

  .summary-popularity figure img {
    width: 100%;
  }

  .summary-popularity-detail {
    padding: 20px;
  }

  .summary-popularity-detail h3 {
    margin: 0 0 8px;
    line-height: 1.4;
  }

  .btn-more {
    font-size: 16px;
    width: 260px;
  }

  /**
  * 製品一覧
  */
  .product-toggle dt {
    font-size: 16px;
    padding: 15px;
    margin: 0 10px 20px;
  }

  .product-toggle dt::before {
    margin: 0 8px 0 0;
  }

  .product-toggle dt::after {
    right: 15px;
  }

  .product-table td,
  .product-table a {
    font-size: 14px;
  }

  /*--------------------------------------------------------------
  # 検索結果
  --------------------------------------------------------------*/
  /**
  * 製品検索結果
  */
  section.search-result-section {
    padding: 30px 0 0;
    overflow: hidden;
  }

  .search-result-section h1 {
    margin-top: 15px;
    overflow: hidden;
    font-size: 16px;
    padding: 8px 12px;
  }

    .search-result-section h1 span {
      display: none;
    }

  .search-result-section h2 {
    font-size: 4.4vw;
    margin: 0 0 30px;
  }

  .result-table th {
    display: none;
  }

  .result-table td {
    font-size: 2.6vw;
    padding: 5px 15px;
  }

  .result-table td a {
    font-size: 3.2vw;
    margin: 0 0 0 -10px;
  }

  .result-table td a + a {
    margin: 0 0 0 10px;
  }

  .search-result-ttl {
    flex-wrap: nowrap;
  }

  .search-result-ttl h3,
  .result-useful-section .search-result-ttl h3 {
    font-size: 3.2vw;
  }

  .search-result-num,
  .result-useful-section .search-result-num {
    font-size: 2.3vw;
    margin: 0 0 0 18px;
  }

  .result-all-btn {
    width: 65%;
    height: 40px;
    line-height: 40px;
    margin: 20px auto 0;
    font-size: 2.9vw;
  }

  .result-all-btn::after {
    width: 8px;
    height: 12px;
    right: 10px;
  }

  /*検索高さ*/

  .search-result-field.is-hide {
    height: auto;
  }

  /**
  * お役立ち情報検索結果
  */
  .result-useful-list {
    margin: 15px 8px 0;
  }

  .result-useful-list h4 {
    font-size: 3.2vw;
  }

  .result-useful-list p {
    font-size: 2.6vw;
  }

}/* max-width: 667px */
