@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Barlow:400,500,700|Oswald|Teko&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@font-face {
    font-family: "A-OTF-A1MinchoStd-Bold";
    src: url('../cyber-child/font/A-OTF-A1MinchoStd-Bold.woff') format('woff');
}

@font-face {
    font-family: "KozMinPr6N-H";
    src: url('../cyber-child/font/KozMinPr6N-Heavy.woff') format('woff');
}

@font-face {
    font-family: "KozMinPr6N-M";
    src: url('../cyber-child/font/KozMinPr6N-Medium.woff') format('woff');
}

@font-face {
    font-family: "Ebrimabd";
    src: url('../cyber-child/font/ebrimabd.woff') format('woff');
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　プロモ　＞　svgアニメーション
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.st0 {
    fill: #EA501C;
}

.st1 {
    fill: none;
    stroke: #fff;
    stroke-width: 16;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ローディング処理（javascriptで読み込み完了を示すクラスを付与する）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#loading_container {
    color: #fff;
    text-align:center;
}

#loading_container .loading_wrap{
    padding-bottom: 100px;
}

/* ロゴと文字を先にフェードアウト */
#loading_container .loading_wrap.loading_fin > *{
    animation: loading_fin .7s ease 0s forwards;
}

#loading_container .fadein {
    animation: FadeIn 1.5s;
    opacity: 0;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
}

@keyframes FadeIn {
    0% {
        filter: blur(5px);
        opacity: 0;
    }

    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

#loading_container p.main_txt {
    font-size:60px;
    margin-bottom:30px;
    font-family: "A-OTF-A1MinchoStd-Bold";
    letter-spacing: .1em;
}

#loading_container p.main_txt span {
    font-size:100px;
    font-family: "KozMinPr6N-M";
}

#loading_container .svgall{
    margin-bottom:15px;
}

#loading_container .svgall svg {
    width: 368px;
}

#loading_container .svgall svg image{
    display: none;
}

#loading_container p.since {
    font-size:33px;
    font-family: "KozMinPr6N-H";
}

/* ローディング時の背景 */
#loading_container .back {
    z-index: 0;
    background-color: #1a1f31;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
リセットCSS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media screen and (max-width: 640px) {
	th{
		min-width: 60px;
	}
}/* end media query */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用スタイル　
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
span.small {
    font-size: .8em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ページ送り(一覧／詳細共通部分)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.page-order-child .paging_common {
    display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
強調ボタン
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*赤*/
a.basic_btn01.red {
    background: #f00;
}
a.basic_btn01.red:hover{
    background: #ff3838;
}

/*緑 （2025-03-26）ah*/
a.basic_btn01.green {
    background: #205d31;
}
a.basic_btn01.green:hover{
    background: #27713c;
}

/*オレンジ （2025-03-26）ah*/
a.basic_btn01.orange {
    background: #ffae00;
}
a.basic_btn01.orange:hover{
    background: #ffb413;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用スタイル　＞　角丸の見出し
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cmn_kadomaru {
    border: 2px solid #025ca5;
    padding: 1px 20px;
    margin-bottom: 10px;
    border-radius: 20px;
    display: inline-block;
	font-weight:bold;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用スタイル　＞　製品詳細（縦引き分岐ケーブル等）　＞　コネクタの穴の形状　
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[class*='cmn_ana'] {
    position: relative;
    overflow: hidden;
}

[class*='cmn_ana']::before,
[class*='cmn_ana']::after{
    width: 20px;
    height: 20px;
    content: '';
    position: absolute;
    background: no-repeat 50% / contain;
    z-index: 1;
	bottom:calc(5px + 8px);
}

[class*='cmn_ana']::before {
	left:5px;
}

[class*='cmn_ana']::after {
	right:5px;
}

[class*='cmn_ana_t1_x']::before{
    background-image: url(images/ana/type01.svg);
}

[class*='cmn_ana_t1_t1']::before,
[class*='cmn_ana_t1_t1']::after{
    background-image: url(images/ana/type01.svg);
}

[class*='cmn_ana_t2_t2']::before,
[class*='cmn_ana_t2_t2']::after{
    background-image: url(images/ana/type02.svg);
}

[class*='cmn_ana_t2_x']::before{
    background-image: url(images/ana/type02.svg);
}

[class*='cmn_ana_x_t2']::after{
    background-image: url(images/ana/type02.svg);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用スタイル　＞　サイトのテーマ色を一括指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 文字色 */
body.sp[class*="voice"] ul.child_navi a[href*="voice"], body.sp dl.type01 [class*="current"] > a, body.sp dl.type01 dt, a.basic_btn02, .basic_list01 li:before, ol.basic_list02 > li:after, a.basic_color_font, [class*="current"] .basic_color_font_cur, [class*="current"] .basic_color_font_cur:hover, .basic_color_font_bf:before, .basic_color_font_af:after {
    color: #141c33;
}

/* ボーダー色 */
body.sp dl.type01 > dt .arrow, h3[class*="h3a"], h2[class*="h2a"], .basic_box02, .basic_list02 > li, .basic_color_border, .basic_color_border_bg:before, .basic_color_border_af:after {
    border-color: #141c33;
}

/* 背景色 */
a.basic_btn01, h3[class*="h3b"], ol.basic_list02 > li:before, .basic_color_bg, .basic_color_bg_bf:before, .basic_color_bg_af:after {
    background-color: #141c33;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ローディング処理（javascriptで読み込み完了を示すクラスを付与する）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#loading_container p.img{
    width: 190px;
}

/* ローディング時の背景 */
#loading_container .back {
    z-index: 0;
    background-color: #1a1f31;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用スタイル　＞　画像がない場合の汎用スタイル（一覧ページ／ショートコード／関連記事…などで共有）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.noimage {
    background: url(../cyber-child/images/no_image.png) no-repeat 50% #262b3d;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ビジュアルエディタ　＞　汎用見出し
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* [.h2a][.h2b]共通のスタイル */
h2[class*="h2"] {
    font-weight: bold;
}

/* [.h2a]のスタイル */
h2[class*="h2a"] {
    border-bottom: 1px solid #bbb;
}

h2[class*="h2a"]::before {
    border-bottom: 3px solid #333b5e;
    width: 50px;
    position: absolute;
    bottom: -2px;
    left:0;
}

/* [.h2b]のスタイル */
h2[class*="h2b"] {
    padding: 0;
}

h2[class*="h2b"]:before {
    display: none;
}

h2[class*="h2b"]::after {
    content: '';
    display: block;
    width: 46px;
    height: 3px;
    background-color: #1b1f2f;
    margin: 20px auto 0;
}

/* [.h3a][.h3b]共通のスタイル */
h3[class*="h3"] {
    font-weight: bold;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ビジュアルエディタ　＞　汎用ボタン01
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a.basic_btn01 {
    padding: 20px 30px;
    font-weight: bold;
    font-size: 17px;
}

a.basic_btn01:hover {
    background-color: #2d3348;
    opacity: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ビジュアルエディタ　＞　汎用ボタン02
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a.basic_btn02 {
    font-weight: bold;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ビジュアルエディタ　＞　汎用ボックス
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.basic_box01 {
    background-color: #f3f2ee;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　汎用タイトル
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
h2.cmn_ttl {
    text-align: center;
}

h2.cmn_ttl span.en {
    font-size: 60px;
    position: relative;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 0.1em;
    display: inline-block;
    padding: 0 120px;
}

h2.cmn_ttl span.en::first-letter {
    color: #736c4b;
}

h2.cmn_ttl span.en::before, h2.cmn_ttl span.en::after {
    content: "";
    background-color: #000;
    width: 60px;
    height: 1px;
    position: absolute;
    top: 50%;
}

h2.cmn_ttl span.en::before {
    left: 0;
}

h2.cmn_ttl span.en::after {
    right: 0;
}

h2.cmn_ttl span.ja {
    display: block;
    font-size: 18px;
    font-weight: bold;
}

/*白バージョンのスタイル*/
h2.cmn_ttl.white {
    color: #fff;
}

h2.cmn_ttl.white span.en::before, h2.cmn_ttl.white span.en::after {
    background-color: #fff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
製品検索 searchform02 （PC&スマホトップ・PC固定ページ取扱製品）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#searchform02 {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 50px;
}

#searchform02 .search02 {
    display: flex;
}

#searchform02 label.screen-reader-text02 {
    background-color: #1c1f30;
    color: #fff;
    width: 190px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    cursor: default;
}

#searchform02 input[type="text"] {
    width: 470px;
    margin-right: 5px;
    padding-left: 35px;
    color: #151515;
    margin-bottom: 0;
    outline: none;
}

#searchform02 input[type="submit"] {
    margin-bottom: 0;
    outline: none;
    background: url(images/kensaku.png) no-repeat 14% 50%/23px auto #736c4b;
    border-radius: 5px;
    width: 100px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 8px 20px 8px 43px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用アコーディオン（スニペット）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.editor_only dl.js_cmn_acc.type02 > * {
    outline: 1px dotted red;
}

dl.js_cmn_acc.type02 > dt {
    position: relative;
}

dl.js_cmn_acc.type02 > dt.toggle {
    cursor: pointer;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    position: relative;
    background-color: #e2e2d4;
    padding: 19px 80px;
    border-radius: 8px;
}

dl.js_cmn_acc.type02 > dd {
    margin-top: 1em;
}

dl.js_cmn_acc.type02 > dt .arrow {
    position: absolute;
    right: 10px;
}

dl.js_cmn_acc.type02 > dt .arrow:before {
    font-weight: normal;
    font-family: "icomoon";
    font-size: 34px;
    background-color: #fff;
    border-radius: 7px;
    color: #000;
    line-height: 1;
    padding: 8px 8px;
}

dl.js_cmn_acc.type02 > dt .arrow:before {
    content: '\e915';
}

dl.js_cmn_acc.type02 > dt.open .arrow:before {
    content: '\e918';
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用リスト　＞　導入事例リスト
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
ul.cmn_case_list {
    justify-content: space-between;
    margin-bottom: 40px;
}

ul.cmn_case_list li {
    border: 1px solid #9c9c9c;
    padding: 25px 20px;
    align-items: flex-start;
    width: calc(50% - 30px);
    background-color: #fff;
}

body.archive ul.cmn_case_list li { /* アーカイブ用 */
	margin-bottom:30px;
}

ul.cmn_case_list li p.img {
    width: 230px;
    padding-top: 165px;
}

ul.cmn_case_list li p.img:not(.noimage)::after {
    font-size: 24px;
    font-family: "icomoon";
    content: '\e905';
    line-height: 1;
    color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    text-shadow: none;
    background-color: rgba(0, 0, 0, .6);
    padding: 3px;
}

ul.cmn_case_list li p.img:hover {
    opacity: 1;
}

ul.cmn_case_list li p.img .box::before {
    content: 'VIEW';
    font-family: 'Teko', sans-serif;
    font-size: 24px;
    line-height: 1;
    color: #fff;
    position: absolute;
    top: calc(50% - 17px);
    left: calc(50% - 33.3px);
    z-index: 1;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 6px 15px 2px;
    opacity: 0;
    transition: .3s;
    font-weight: normal;
}

ul.cmn_case_list li p.img .box::after {
    content: "";
    background: rgba(0,0,0,.3);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .3s;
}

ul.cmn_case_list li p.img:hover .box::before,
ul.cmn_case_list li p.img:hover .box::after {
    opacity: 1;
}

ul.cmn_case_list li .text_area {
    padding-left: 30px;
    width: calc(100% - 230px);
}

ul.cmn_case_list li p.cat {
    font-size: 14px;
    font-weight: bold;
}

ul.cmn_case_list li p.cat span {
    color: #fff;
    display: inline-block;
    padding: 5px;
    margin-bottom: 15px;
    width: 140px;
    text-align: center;
}

ul.cmn_case_list li p span.construction {
    background-color: #0a2747;
}

ul.cmn_case_list li p span.agriculture {
    background-color: #2e7c16;
}

ul.cmn_case_list li p span.event {
    background-color: #f4ac00;
}

ul.cmn_case_list li p span.shop {
	background-color: #a13137;
}

ul.cmn_case_list li h3.ttl {
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto 10px;
}

ul.cmn_case_list li p.txt {
    font-size: 16px;
}

ul.cmn_case_list li p.txt span.place {
    display: block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用リスト　＞　カテゴリリスト
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.page ul.cmn_cat_list{ /* 固定ページ用 */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

ul.cmn_cat_list li {
    position: relative;
}

body.page ul.cmn_cat_list li{ /* 固定ページ用 */
	width:24%;
}

ul.cmn_cat_list li.koji {
    background-image: linear-gradient(-20deg, #021932 26%, #0a2747 28%);
}

ul.cmn_cat_list li.nogyo {
    background-image: linear-gradient(-20deg, #145125 26%, #205d31 28%);
}

ul.cmn_cat_list li.event {
    background-image: linear-gradient(-20deg, #eba000 26%, #ffae00 28%);
}

ul.cmn_cat_list li.shop {
    background-image: linear-gradient(-20deg, #652f0b 26%, #833c0c 28%);
}

ul.cmn_cat_list li:hover {
    opacity: .8;
}

ul.cmn_cat_list li:not(:last-child) {
    margin-bottom: 1px;
}

ul.cmn_cat_list li a {
    color: #fff;
    font-size: 18px;
    display: block;
    padding: 15px 30px 15px 80px;
    font-weight: bold;
    text-decoration:none;
}

body.pc.page ul.cmn_cat_list li a { /* PC・固定ページ用 */
    padding: 15px 30px 15px 80px;
}

body.pc.page ul.cmn_cat_list li.nogyo a { /* PC・固定ページ用（農業用） */
    padding: 30px 30px 30px 80px;
}

ul.cmn_cat_list li a::before {
    content: '';
    position: absolute;
    left: 18px;
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
}

body.pc.page ul.cmn_cat_list li a::before {/* PC・固定ページ用 */
    left: 20px;
}

ul.cmn_cat_list li.koji a::before {
    background: url(images/koji.png) no-repeat 50%/80%;
}

ul.cmn_cat_list li.nogyo a::before {
    background: url(images/nogyo.png) no-repeat 50%/80%;
}

ul.cmn_cat_list li.event a::before {
    background: url(images/event.png) no-repeat 50%/80%;
}

ul.cmn_cat_list li.shop a::before {
    background: url(images/shop.png) no-repeat 50%/80%;
}

ul.cmn_cat_list li a::after {
    font-family: "icomoon";
    content: '\e917';
    font-size: 24px;
    position: absolute;
    top: calc(50% - 0.5em);
    line-height: 1;
    right: 10px;
    color: #fff;
}

ul.cmn_cat_list li a:hover {
    text-decoration: none;
}

ul.cmn_cat_list li a span.small {
    font-size: 16px;
    display: block;
}

body.page ul.cmn_cat_list li a span.small {/* 固定ページ用 */
    display: inline-block;
    margin-left: 10px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用リスト　＞　製品一覧リスト
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
ul.cmn_product_list li {
    width: 840px;
    padding: 20px 25px 15px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    margin-bottom: 20px;
}

ul.cmn_product_list li p.recommend {
    display: inline-block;
    position: absolute;
    right: -65px;
    top: -25px;
    background-color: #3e94bb;
    transform: rotate(45deg);
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding: 50px 50px 5px;
}

ul.cmn_product_list li .txt_wrap {
}

ul.cmn_product_list li p.cat {
    display: inline-block;
    padding: 0 20px;
    background-color: #ebebeb;
    border-radius: 15px;
    color: #686868;
    font-size: 13px;
    margin-bottom: 15px;
    margin-right: 40px;
}

ul.cmn_product_list li h2.ttl {
    font-size: 20px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    margin: 0;
    padding: 0 5px;
}

ul.cmn_product_list li span.sub_ttl {
    display: block;
    font-size: 13px;
    font-weight: bold;
}

ul.cmn_product_list li p.use_cat {
    position: absolute;
    left: 1px;
    top: 1px;
    z-index: 1;
}

ul.cmn_product_list li p.img_container {
    width: 280px;
}

ul.cmn_product_list li p.use_cat span {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    min-width: 85px;
    vertical-align: top;
    margin-right: 1px;
    text-align: center;
    padding: 0 10px;
}

ul.cmn_product_list li p.use_cat span.construction {
    background-color: #0a2747;
}


ul.cmn_product_list li p.use_cat span.agriculture {
    background-color: #205d30;
}

ul.cmn_product_list li p.use_cat span.event {
    background-color: #f3ac00;
}

ul.cmn_product_list li p.btn {
    position: absolute;
    bottom: 35px;
    width: 323px;
    display: none
}

ul.cmn_product_list li p.btn a {
    width: 100%;
    padding: 12px 30px;
    background-color: #0a2747;
    color: #fff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
カスタム投稿 cmn_lineup_list
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
ul.cmn_lineup_list {
    /*margin-bottom: 55px;*/
}

ul.cmn_lineup_list li {
    /*width: calc(25% + 1px);*/
    width: calc(20% + 1px);
    background-color: #fff;
    border: 1px solid #c0c0c0;
    margin-right: -1px;
    margin-bottom: -1px!important;
    position: relative;
    /*padding: 25px 10px 10px;*/
	padding: 40px 10px 20px;
}

ul.cmn_lineup_list.no_cat li { /* 用途カテ非表示 */
	padding: 20px 10px 20px;
}

ul.cmn_lineup_list:not(.cmn_items2) li:nth-of-type(4n){
    /*width:25%;*/
}

ul.cmn_lineup_list:not(.cmn_items2) li:nth-of-type(5n){
    width:20%;
}

ul.cmn_lineup_list li:hover {
    opacity: 1;
}

ul.cmn_lineup_list li:before {
    content: "";
    border: 3px solid #1c1f30;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    position: absolute;
    left: 0;
    top: 0;
    transition: 0.1s;
    opacity: 0;
    z-index: 2;
}

ul[class*="cmn_lineup_list"] li:after {
    font-family: "icomoon";
    content: '\e917';
    font-size: 20px;
    position: absolute;
    line-height: 1;
    right: 0px;
    bottom: 0px;
    color: #fff;
    background-color: #1c1f30;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;

    opacity: 0;
}

ul.cmn_lineup_list li:hover::before, ul[class*="cmn_lineup_list"] li:hover::after,ul[class*="cmn_lineup_list"] li.current::after {
    opacity: 1;
}

ul.cmn_lineup_list li p.cat_wrap {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

ul.cmn_lineup_list.no_cat li p.cat_wrap { /* 用途カテ非表示 */
    display:none;
}

ul.cmn_lineup_list li p.cat_wrap span {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 0px 5px;
    min-width: 95px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    margin-right: 1px;
}

ul.cmn_lineup_list li p.cat_wrap span.koji {
    background-color: #0b2747;
}

ul.cmn_lineup_list li p.cat_wrap span.nogyo {
    background-color: #205d30;
}

ul.cmn_lineup_list li p.cat_wrap span.event {
    background-color: #f3ac00;
}

ul.cmn_lineup_list li p.img {
    text-align: center;
    margin: 0 auto 5px;
}

ul.cmn_lineup_list li p.img_container {
    width: 278px;
    max-width: 100%;
    padding-top: 134px;
}

ul.cmn_lineup_list li p.img_container img {
    /* ▼background-size:cover的に動作する */
    object-fit: contain;
    /* IE対策（併せて「ofi.js」を読み込むことではじめて正しく機能する） */
    font-family: 'object-fit: contain;';
}

ul.cmn_lineup_list li h3.ttl {
    font-weight: bold;
    text-align: center;
}

ul.cmn_lineup_list li a {
    text-decoration: none;
    color: inherit;
    display: block;
    /*font-size: 16px;*/
    font-size: 15px;
}

ul.cmn_lineup_list li span.sub_ttl {
    font-size: 12px;
    display: block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
カスタム投稿 cmn_items2
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
ul.cmn_items2 {
    margin-bottom:0;
}

ul.cmn_items2 li {
    width: calc(16.6666% + 1px);
    padding: 25px 10px;
}

ul.cmn_items2 li:nth-of-type(6n) {
    width: 16.6666%;
}

ul.cmn_items2 li:before {
    border: 2px solid #1c1f30;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

ul.cmn_items2 li:after {
    font-size: 20px;
    width: 25px;
    height: 25px;
}

ul.cmn_items2 li p.img_container {
    width: 163px;
    padding-top: 90px;
    margin: 0 auto 10px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
要素下にスペースを開けるための汎用クラス（コンタクトフォームで使用）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
span.cmn_margin_bottom_5 {
    margin-bottom: 5px;
    display: inline-block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 信和産業　プロモ　テスト
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* プロモフレームの柔軟な可変 */
div#promo_frame {
    background: none;
}

/* プロモフレーム内に余白が発生しないための記述（デフォルト上書き） */
div#promo_frame .main_slide img {
    max-width: none;
}

/* JS読み込み完了まで体裁を整える */
#my_bx > ul.main_slide {
    position: relative;
}

#my_bx > ul.main_slide > li {
    position: absolute;
    top: 0;
}

#my_bx > ul.main_slide > li p.img_container {
    width: 100px;
    padding-top: 100px;
}

/* スライド　マウスオーバー変化させない */
#my_bx ul.main_slide a img:hover {
    opacity: 1;
}

#my_bx, .bx-wrapper, .bx-wrapper * {
    height: 100%;
}

#my_bx {
    height: 100%;
}

#my_bx > *:nth-child(2) {
    /* background: #fff; */
    position: absolute;
    bottom: 20px;
    right: 50px;
    padding: 10px;
}

/* サムネイル　スタイル */
#my_bx > ul.thumb {
    display: flex;
    z-index: 1;
}

#my_bx > ul.thumb > li {
    margin: 0 5px;
    width: 100px;
}

/* サムネイルアクティブ表示 */
#my_bx > ul.thumb > li a {
    display: block;
    border: 2px solid transparent;
}

#my_bx > ul.thumb > li a.active {
    border-color: #fff;
}

/* baceのopacityをリセット*/
#my_bx > ul.thumb > li a img:hover {
    opacity: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　プロモ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#promo_frame {
    /* display: flex; */
    justify-content: center;
    align-items: center;
}

div#promo_frame .inner_wrap {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: center;
}

div#promo_frame .inner p.sub {
    color: #fff;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    font-size: 48px;
    font-family: "A-OTF-A1MinchoStd-Bold";
    padding: 5px 60px 15px;
    margin-bottom: 25px;
    letter-spacing: .1em;
    display: table;
    margin: 0 auto 15px;
}

div#promo_frame .inner h2.main_ttl {
    color: #fff;
    font-size: 60px;
    font-family: "A-OTF-A1MinchoStd-Bold";
    margin-bottom: 35px;
    margin-left: 40px;
}

div#promo_frame .inner ul.items {
    margin-right: -30px;
    justify-content: center;
}

div#promo_frame .inner ul.items li {
    color: #fff;
    background-color: #767054;
    padding: 13px 35px;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 22px;
    font-weight: bold;
    min-width: 202px;
    text-align: center;
}

div#promo_frame .inner ul.items li.bg_w {
    color: #282e54;
    background-color: #f1f1f1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層ページ　＞　ヘッダー画像
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* テキストが見にくいため、薄い黒の板を敷く */
body.page-product-list .page_promo::before,[class*=archive-product] .page_promo::before,[class*=single-product] .page_promo::before {
    content:'';
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    position: absolute;
    left:0;
    top:0;
}

.page_promo .txt_box_wrap {
    padding-top: 106px;
}

.page_promo .img_wrap {
    height: 500px;
}

.page_promo .ttl {
    color: #fff;
}

.page_promo .sub_ttl {
    border: 2px solid #fff;
    color: #fff;
    padding: 2px 20px;
    margin-bottom: 8px;
    border-radius: 20px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　一言コメント
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tweet_area {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.9);
    z-index: 1;
}

.tweet_area .f_wrap {
    max-width: 770px;
    padding: 5px 15px;
    position: relative;
    align-items: center;
}

.tweet_area .icon {
    font-size: 24px;
    font-family: 'Bebas Neue', cursive;
    font-style: italic;
}

.tweet_area .more{
    position: relative;
}

.tweet_area .more::after {
    font-family: "icomoon";
    content: '\e91b';
    font-size: 1em;
    position: absolute;
    top: calc(50% - .5em);
    line-height: 1;
    right: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　カスタマイズ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_custom {
    background: url(images/custom_bg.jpg) no-repeat 50% / cover;
}

#home_custom.kugiri_m {
    padding-top: 75px;
    padding-bottom: 120px;
}

#home_custom p.main_ttl {
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    width: 1200px;
    margin: 0 auto 60px;
}

#home_custom ul.items {
    max-width: 1600px;
    min-width: 1200px;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 40px;
}

#home_custom li {
    width: 24%;
    background-color:#fff;
}

#home_custom li:hover {
    opacity: 1;
}

#home_custom li h3.ttl {
    background-color: #fff;
    padding: 15px 60px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#home_custom h3.ttl::after {
    font-family: "icomoon";
    content: '\e917';
    background-color: #262b3d;
    color: #fff;
    font-size: 1.5em;
    border-radius: 50%;
    position: absolute;
    width: 33px;
    height: 33px;
    right: 25px;
    display: flex;
    justify-content: center;
}

#home_custom li h3.ttl a {
    color: inherit;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
}

#home_custom li p.img_container img {
    transition: .2s;
}

#home_custom li:hover p.img_container img {
    opacity: .7;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　ラインナップ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_line_up {
    background-color: #d0d0d0;
}

#home_line_up.kugiri_m {
    padding-top: 70px;
    padding-bottom: 90px;
}

#home_line_up h2.cmn_ttl {
    margin-bottom: 25px;
}

#home_line_up ul.cmn_lineup_list:not(.cmn_items2) {
    margin-bottom: 55px;
}

#home_line_up .box {
    background-color: #e9e9e9;
    padding: 45px 40px;
}

#home_line_up .box h2 {
    font-size: 22px;
    font-weight: bold;
    position: relative;
    margin: 0 0 20px 45px;
}

#home_line_up .box h2::before {
    content: '';
    background: url(images/kanren_kazari.png) no-repeat 50% / 100%;
    position: absolute;
    left: -45px;
    top: -5px;
    width: 35px;
    height: 35px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　メッセージ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_message {
    background: url(images/message_bg.jpg) no-repeat 50% / cover;
}

#home_message.kugiri_m {
    padding-top: 90px;
    padding-bottom: 70px;
}

#home_message .box {
    background-color: rgba(255,255,255,0.7);
    text-align: center;
    padding: 60px 50px 50px;
}

#home_message h2.ttl {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 1.5;
}

#home_message p.main_txt {
    margin-bottom: 60px;
}

#home_message ol.items {
    justify-content: space-between;
    margin: 0 auto 40px;
}

#home_message ol.items li {
    background-color: #fff;
    width: calc(25% - 25px);
    min-height: 200px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

#home_message ol.items li::before, #home_message ol.items li::after {
    position: absolute;
    font-family: "Ebrimabd";
    color: #167995;
}

#home_message ol.items li::before {
    content: 'POINT';
    left: 12px;
    top: -30px;
    font-size: 12px;
}

#home_message ol.items li::after {
    top: -30px;
    left: 10px;
    font-size: 34px;
}

#home_message ol.items li.n01::after {
    content: '01';
}

#home_message ol.items li.n02::after {
    content: '02';
}

#home_message ol.items li.n03::after {
    content: '03';
}

#home_message ol.items li.n04::after {
    content: '04';
}

#home_message ol.items li p.img {
    margin-bottom: 25px;
}

#home_message ol.items li h3.ttl {
    font-size: 19px;
    font-weight: bold;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　導入事例
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_case {
    background-color: #404040;
}

#home_case.kugiri_m {
    padding-bottom: 70px;
}

#home_case h2.cmn_ttl {
    margin-bottom: 40px;
}

#home_case p.no_hit {
    text-align: center;
    color:#fff;
    margin-bottom: 40px;
}

#home_case p.btn {
    text-align: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　コンタクト
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#contact_area {
    text-align: center
}

#contact_area p.main_lead {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 40px;
}

#contact_area .box {
    background-color: rgba(255,255,255,0.2);
    border-radius: 5px;
    color: #fff;
    padding: 35px 30px 50px;
    margin-bottom: 15px;
}

#contact_area p.tel a {
    color: #fff;
    font-size: 48px;
    font-family: 'Bebas Neue', cursive;
    display: table;
    margin: 0 auto;
    position: relative;
    line-height: 1.1;
}

#contact_area p.tel a::before {
    font-family: "icomoon";
    content: '\f095';
    font-size: 40px;
    font-weight: normal;
    color: #736c4b;
    position: absolute;
    left: -45px;
    top: 6px;
}

#contact_area .fax {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

#contact_area .open {
    color: rgba(255,255,255,0.6);
    margin-bottom: 30px;
    text-align: center;
}

#contact_area .btn_wrap {
    justify-content: center;
}

#contact_area .btn_wrap p:not(:last-child) {
    margin-right: 30px;
}

#contact_area .btn_wrap p a {
    min-width: 350px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 20px 35px 20px 70px;
    position: relative;
    transition: .3s;
}

#contact_area .btn_wrap p.mail a, #contact_area .btn_wrap p.mitsumori a {
    background-color: #767054;
}

#contact_area .btn_wrap p.line a {
    background-color: #00b900;
}

#contact_area .btn_wrap p a:hover {
    opacity: 1;
}

#contact_area .btn_wrap p.mail a:hover, #contact_area .btn_wrap p.mitsumori a:hover {
    background-color: #827c60;
}

#contact_area .btn_wrap p.line a:hover {
    background-color: #00ce00;
}

#contact_area .btn_wrap p a::before {
    line-height: 1;
    position: absolute;
    left: 35px;
}

#contact_area .btn_wrap p.mail a::before {
    content: '\e90d';
    font-family: icomoon;
    font-weight: normal;
    font-size: 22px;
    top: calc(50% - 12px);
}

#contact_area .btn_wrap p.mitsumori a::before {
    content: '';
    background: url(images/mitsumori.png) no-repeat 50%/ contain;
    width: 30px;
    height: 45px;
    position: absolute;
    top: calc(50% - 22.5px);
    left: 100px;
}

#contact_area .btn_wrap p.line a::before {
    content: '';
    background: url(images/line_icon.png) no-repeat 50% / contain;
    width: 34px;
    height: 32px;
    top: calc(50% - 16px);
}

#contact_area p.addr {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フッター(ナビ)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#footer {
    background: url(images/contact_bg.jpg) no-repeat 50% / cover;
}

div#f_navi_wrap {
    background-color: transparent;
    position: relative;
}

div#f_navi_wrap::before {
    content: "";
    width: 1200px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: -15px;
    left: calc(50% - 600px);
}

div#f_navi_wrap ul li a {
    color: #fff;
}

div#f_navi_other ul li:not(:last-child) {
    border-color: #fff;
}

#copy_frame {
    background-color: transparent;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
メインエリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#main_area .article_title.plain_type h1 {
    margin-bottom: 25px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層ページ（製品一覧）　＞　メインエリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*おすすめ商品アーカイブ用*/
.post-type-archive-product h2.ttl2 {
    background-color: #ffd200;
    text-align: center;
    padding: 50px 0 27px;
    position: relative;
}

.post-type-archive-product h2.ttl2::before {
    content: '';
    background: url(images/recommend.png) no-repeat 50%;
    width: 26px;
    height: 16px;
    position: absolute;
    top: 25px;
    left: calc(50% - 8px);
}

.post-type-archive-product h2.ttl2 span {
    display: block
}

.post-type-archive-product h2.ttl2 span.en {
    font-size: 32px;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 0.1em;
    line-height: 1;
}

.post-type-archive-product h2.ttl2 span.en::first-letter {
    color: #e02b30;
}

.post-type-archive-product h2.ttl2 span.ja {
    font-size: 15px;
    font-weight: bold
}

/*アイキャッチ一旦非表示！*/
.post-type-archive-product .eyecatch {
    margin-bottom: 35px;
    text-align: center;
    display: none;
}

.post-type-archive-product h2[class*="h2"] {
    margin-top: 1em
}

.post-type-archive-product h2.h2b {
    color: #262f59;
    font-size: 26px;
    margin-bottom: 40px;
}

.post-type-archive-product h2.h2b span.sub_ttl {

    font-size: 19px;
    display: block;
}

.post-type-archive-product .main_lead {
    margin-bottom: 45px;
}

/*main_lead内のアンカーのスタイル*/
.post-type-archive-product .main_lead a:not(.basic_btn01):not(.basic_btn02) {
    color: #09f;
    text-decoration: underline;
}

.post-type-archive-product .main_lead a:hover {
    text-decoration: none;
}

/*アーカイブページのみ画像上部に余白*/
.post-type-archive-product .cmn_custom_slick .li p.img_container img {
    padding-top: 25px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層ページ（製品一覧）　＞　サブエリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sub_area .searchform03 {
    margin-bottom: 20px;
    position: relative;
}

#sub_area .searchform03:after {
    font-family: "icomoon";
    content: '\e905';
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 1;
    font-size: 27px;
    color: #c2c2c2;
    transform: scale(-1, 1);
    font-weight: bold;
}

#sub_area .search03 {
    display: flex;
}

#sub_area .searchform03 input[type="text"] {
    border: 1px solid #c2c2c2;
    border-radius: 5px;
    margin: 0;
    background: #fff;
    padding: 15px 40px 15px 20px;
    font-size: 16px;
    outline: none;
}

#sub_area .searchform03 input[type="submit"] {
    background: transparent;
    padding: 0;
    margin: 0;
    text-indent: -9999px;
    display: block;
    width: 35px;
    height: 54px;
    position: absolute;
    right: 1px;
    top: 0px;
    z-index: 2;
    outline: none;
}

#sub_area p.widget_ttl {
    font-size: 18px;
    font-weight: bold;
    border-left: 8px solid #1b1f2f;
    padding: 10px 15px;
    margin-bottom: 15px;
    margin-top: 1.5em;
}

#sub_area ul.cmn_lineup_list_sub {
    /* margin-bottom: 30px; */
}

#sub_area ul.cmn_lineup_list_sub li {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 0;
    border: 1px solid #5e5e5e;
    margin-bottom: -1px;
    position: relative;
    width: 100%;
    min-height: 70px;
}

#sub_area ul.cmn_lineup_list_sub li::before {
    content: '';
    background-image: linear-gradient(-45deg, transparent 50%, #36468a 50%);
    transition: .3s;
    opacity: 0;
    width: 17px;
    height: 17px;
    position: absolute;
    left: 0;
    top: 0;
}

#sub_area ul.cmn_lineup_list_sub li.current::before, #sub_area ul.cmn_lineup_list_sub li:hover, #sub_area ul.cmn_lineup_list_sub li:hover::before {
    opacity: 1;
}

#sub_area ul.cmn_lineup_list_sub li::after {
    font-size: 18px;
    width: 25px;
    height: 25px;
}

#sub_area ul.cmn_lineup_list_sub li:hover h3.ttl a, #sub_area ul.cmn_lineup_list_sub li.current h3.ttl a {
    text-decoration: none;
    color: #065e90;
}

#sub_area ul.cmn_lineup_list_sub li p.img {
    width: 20%;
    margin-right: 10px;
}

#sub_area ul.cmn_lineup_list_sub li p.cat_wrap {
    display: none;
}

#sub_area ul.cmn_lineup_list_sub li h3.ttl a {
    font-weight: bold;
    width: 80%;
}

#sub_area ul.cmn_lineup_list_sub li span.sub_ttl {
    display: block;
    font-size: 14px;
    font-weight: normal;
}

/*#sub_area p.widget_ttl2 {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    padding: 0 45px;
    margin-bottom: 15px;
    margin-left: 2px;
}

#sub_area p.widget_ttl2::before {
    content: '';
    background: url("images/ttl02_kazari.png") no-repeat 50% / 100%;
    position: absolute;
    left: 0;
    top: calc(50% - 17px);
    width: 34px;
    height: 34px;
}*/
#sub_area p.widget_ttl3 {
    background-color: #141c33;
    color: #fff;
    text-align: center;
    padding: 15px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層ページ（取扱製品）　＞　テープライト(2023-03-29 kami)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* tableに対しstyleが当たらないため追加 */
.basic_table01.tape_table {
    border: 2px solid #888;
}

/* 太線(片面・両面共通 oneとtwoのクラス) */
.basic_table01.tape_table thead:first-child,
.basic_table01.tape_table.one tbody tr:nth-of-type(3),
.basic_table01.tape_table.two tbody tr:nth-of-type(3) {
    border-bottom: 2px solid #888;
}

.basic_table01.tape_table.two tbody tr:is(:nth-of-type(6),:nth-of-type(11),:nth-of-type(16)){
    border-bottom: double;
    border-color: #646464;
}

.basic_table01.tape_table.two tbody tr:is(:nth-of-type(17),:nth-of-type(18)) {
    background: #fcf9e1;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層ページ（導入事例）＞　メインカラム幅を変更
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.post-type-archive-case.one_column #main_area {
    width: 1200px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層ページ（導入事例）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.post-type-archive-case .cat_box {
    background-color: #f5f5f5;
    padding: 20px 30px 20px 35px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.post-type-archive-case .cat_box h2 {
    text-align: center;
    width: 150px;
}

.post-type-archive-case .cat_box h2 span {
    display: block;
    font-weight: bold;
}

.post-type-archive-case .cat_box h2 span.en {
    color: #736c4b;
    font-size: 14px;
}

.post-type-archive-case .cat_box h2 span.ja {
    color: #02060b;
    font-size: 18px;
}

.post-type-archive-case .cat_box ul.case_cat_list li {
    width: 190px;
    border-radius: 5px;
    position: relative;
    margin-right: 5px;

}

.post-type-archive-case .cat_box ul.case_cat_list li.all {
    background-color: #404040;
}

.post-type-archive-case .cat_box ul.case_cat_list li.koji {
    background-color: #0a2747;
}

.post-type-archive-case .cat_box ul.case_cat_list li.nogyo {
    background-color: #205d31;
}

.post-type-archive-case .cat_box ul.case_cat_list li.event {
    background-color: #ffae00;
}

.post-type-archive-case .cat_box ul.case_cat_list li.shop {
	background-color: #a13137;
}

.post-type-archive-case .cat_box ul.case_cat_list li a {
    background-color: #fff;
    font-weight: bold;
    display: block;
    text-decoration: none;
    border-radius: 3px;
    margin: 2px;
    font-size: 16px;
}

.post-type-archive-case .cat_box ul.case_cat_list li.all a {
    padding: 10px 20px;
    text-align: center;
    color: #404040;
}

.post-type-archive-case .cat_box ul.case_cat_list li.koji a {
    padding: 10px 5px 10px 75px;
    color: #0a2747;
}

.post-type-archive-case .cat_box ul.case_cat_list li.nogyo a {
    padding: 10px 5px 10px 90px;
    color: #205d31;
}

.post-type-archive-case .cat_box ul.case_cat_list li.event a {
    padding: 10px 5px 10px 40px;
    color: #ffae00;
}

.post-type-archive-case .cat_box ul.case_cat_list li.shop a {
	padding: 10px 5px 10px 90px;
	color: #a13137;
}

.post-type-archive-case .cat_box ul.case_cat_list li a::before {
    content: '';
    position: absolute;
    top: calc(50% - 17.5px);
    width: 35px;
    height: 35px;
}

.post-type-archive-case .cat_box ul.case_cat_list li.koji a::before {
    background: url(images/koji.png) no-repeat 50%/100%;
    left: 30px;
}

.post-type-archive-case .cat_box ul.case_cat_list li.nogyo a::before {
    background: url("images/nogyo.png") no-repeat 50%/100%;
    left: 40px;
}

.post-type-archive-case .cat_box ul.case_cat_list li.event a::before {
    background: url("images/event.png") no-repeat 50%/100%;
    left: 5px;
}

.post-type-archive-case .cat_box ul.case_cat_list li.shop a::before {
	background: url("images/shop.png") no-repeat 50%/100%;
	left: 40px;
}

.post-type-archive-case .cat_box ul.case_cat_list li a:hover, .post-type-archive-case .cat_box ul.case_cat_list li.current a {
    color: #fff;
}

.post-type-archive-case .cat_box ul.case_cat_list li.all a:hover, .post-type-archive-case .cat_box ul.case_cat_list li.all.current a {
    background-color: #404040;
}

.post-type-archive-case .cat_box ul.case_cat_list li.koji a:hover, .post-type-archive-case .cat_box ul.case_cat_list li.koji.current a {
    background-color: #0a2747;
}

.post-type-archive-case .cat_box ul.case_cat_list li.nogyo a:hover, .post-type-archive-case .cat_box ul.case_cat_list li.nogyo.current a {
    background-color: #205d31;
}

.post-type-archive-case .cat_box ul.case_cat_list li.event a:hover, .post-type-archive-case .cat_box ul.case_cat_list li.event.current a {
    background-color: #ffae00;
}

.post-type-archive-case .cat_box ul.case_cat_list li.shop a:hover, .post-type-archive-case .cat_box ul.case_cat_list li.shop.current a {
	background-color: #a13137;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
slickスライド
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ▼カスタム投稿（製品） */
.post-type-archive-product li.items .inner {
    display: flex;
}

.post-type-archive-product li.items .img_wrap {
    margin-left: 0;
    margin-right: 40px;
    width: 280px;
    float: none;
    position: relative;
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
    width: 280px;
}

.cmn_custom_slick .slick-list {
    margin-bottom: 10px;
    border: 1px solid #cccccc;
}

.cmn_custom_slick .li p.img.img_container {
    width: 280px;
    padding-top: 200px;
}

.cmn_custom_slick .li p.img_container img {
    object-fit: contain;
    font-family: 'object-fit: contain;';
}

.cmn_custom_slick .slick-list p.caption {
    text-align: center;
    font-size: 15px;
    font-weight: bold;
}

.cmn_custom_slick ul.slick-dots {
    position: static;
    display: flex!important;
    flex-wrap: wrap;
    margin-right: -5px;
    width: auto;
}

.cmn_custom_slick ul.slick-dots li {
    border: 1px solid #e0e0e0;
    width: calc(20% - 5px);
    border-radius: 0px;
    display: flex;
    margin-bottom: 5px;
    margin-right: 5px;
    min-height: 52px;
}

.cmn_custom_slick ul.slick-dots li img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 100%!important;
    width: 100%;
    object-fit: cover;
    /* IE対策 */
    font-family: 'object-fit: cover;';
}

.cmn_custom_slick .slick-prev {
    display: none!important;
}

.cmn_custom_slick .slick-next {
    display: none!important;
}

/* ▼カスタム投稿（製品詳細ページ） */
.single-product #main_area span.sub_ttl {
    display: block;
    font-size: 18px;
}

.single-product .img_wrap {
    margin-left: 0;
    width: 100%;
    float: none;
    position: relative;
}

.single-product .cmn_custom_slick .li p.img_container {
    padding-top: 400px;
}

.single-product .cmn_custom_slick p.caption {
    font-size: 20px;
}

.single-product .cmn_custom_slick ul.slick-dots li {
    padding-top: 110px
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
関連製品リンク用CSS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div.cmn_related_cat ul.items li {
    margin: 0 5px 10px;
    width: calc(33.333% - 10px);
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 5px;
}

div.cmn_related_cat ul.items li p.ttl {
    font-size: 16px;
    text-align: center;
    padding: 10px 0;
}

div.cmn_related_cat ul.items li p.img {
    text-align: center
}

div.cmn_related_cat ul.items li a {
    text-align: center;
    display: block;
}