@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}




/* ****************************************************************
   固定ページ（トップページカスタマイズ）2022.03.02 追記 
   .page 指定で各ページ不要と思われるものを非表示にする
   (( フロント固定ページ だけにする時は .home.page 指定とする))
**************************************************************** */

/* 固定ページのタイトルを非表示 */
.page .entry-title{
    display: none;
}

/* 固定ページのシェアボタンを非表示 */
.page .sns-share{
    display: none;
}

/* 固定ページのフォローボタンを非表示 */
.page .sns-follow{
    display: none;
}

/* 固定ページの投稿日を非表示 */
.page .post-date{
    display: none;
}

/* 固定ページの更新日を非表示 */
.page .post-update{
    display: none;
}

/* 固定ページの投稿者名を非表示 */
.page .author-info{
    display: none;
}
/* ****************************************************************
**************************************************************** */


/* ****************************************************************
   型番検索BOXの部分 2022.03.02 追記 
**************************************************************** */
div.product-search-form form{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 3px;
  flex-wrap:wrap;
}

div.product-search-form label.product-label{
  display: block;    /* block要素に変換 */
  height: 30px;
  line-height: 30px;
  padding-right: 5px;
  font-size: 20px;
  width: 680px;
  font-weight:bold;
}

div.product-search-form input#search_box{
  padding: 5px;
  font-size: 1.4em;
  font-family: Arial, sans-serif;
  color: #aaa;
  border: 2px solid #ccc;
  margin: 0px 2px 0px 0px;
  width: 80%;
  height: 50px;
}

div.product-search-form input.searchsubmit{
  width: 80px;
  height: 50px;
}
/* ****************************************************************
**************************************************************** */



/* ****************************************************************
   ページ送りナビ start 2022.03.16
**************************************************************** */
#page-navi ul.pageNav {
  margin: 0 0 10px;
  padding: 10px 10px 5px;
  background: #fff;
  border: 0px solid #ccc;
  text-align: center;
}

#page-navi ul.pageNav li {
  display: inline;
  margin: 0 2px;
  padding: 0;
}

#page-navi ul.pageNav li a {
  display: inline-block;
  margin-bottom: 5px;
  padding: 5px 13px;
  background: #eeeff7;
  text-decoration: none;
  vertical-align: middle;
}

#page-navi ul.pageNav li span{
  display: inline-block;
  margin-bottom: 5px;
  padding: 5px 13px;
  background: #F3E2A9;
  text-decoration: none;
  vertical-align: middle;
}

#page-navi ul.pageNav li span.non{
  display: inline-block;
  margin-bottom: 5px;
  padding: 5px 13px;
  background: #eeeff7;
  text-decoration: none;
  vertical-align: middle;
}

#page-navi ul.pageNav li a:hover {
  color: #000;
  background: #ccf;
  border-color: #00f;
}
/* ****************************************************************
**************************************************************** */



/* ****************************************************************
   ContactForm7 start 2023.04.24
**************************************************************** */

/* ------------------------------------------------------------ *
 * Offer_Submissionのページで使用しているテーブルの class:cf7_offer_list へのCSS
 * ------------------------------------------------------------ */
.cf7_offer_list table{
  border-collapse:collapse;
  border:solid 1px gray;
  font-size:0.6em;
}

.cf7_offer_list td,
.cf7_offer_list th{
  border:dotted 1px gray;
}

/* 各Offer_Submission の mfg, part, qty もfont-sizeを指定する */
  .cf7_offer_list input[type="text"].cmfg
, .cf7_offer_list input[type="text"].cpar
, .cf7_offer_list input[type="text"].cqty{
    background-color: #dcdcdc;
    color: #000;
    font-size:14px;
}


/* 各Offer_Submission の qty と coffer だけ右寄りにする（数値入力エリアだけ右より） */
  .cf7_offer_list input[type="text"].cqty
, .cf7_offer_list input[type="text"].coffer
, .cf7_offer_list input[type="number"].coffer{
    text-align: right
 }


/* 各Offer_Submission のtd番号毎に幅を指定 */
.cf7_offer_list td:nth-child(1){
  width: 13%;
}
.cf7_offer_list td:nth-child(2){
}
.cf7_offer_list td:nth-child(3){
  width: 90px;
}
.cf7_offer_list td:nth-child(4),
.cf7_offer_list td:nth-child(5),
.cf7_offer_list td:nth-child(6){
  width: 118px;
}



/* ------------------------------------------------------------ *
 * Inquiry-RFQのページで使用しているテーブルの class:cf7_inquiry_rfq へのCSS
 * ------------------------------------------------------------ */
.cf7_inquiry_rfq table{
  border-collapse:collapse;
  border:solid 1px gray;
  font-size:0.6em;
}

.cf7_inquiry_rfq td,
.cf7_inquiry_rfq th{
  border:dotted 1px gray;
}


/* 各Inquiry-RFQ の mfg, part, qty もfont-sizeを指定する */
  .cf7_inquiry_rfq input[type="text"].cmfg
, .cf7_inquiry_rfq input[type="text"].cpar{
    background-color: #dcdcdc;
    color: #000;
    font-size:14px;
}


/* 各Inquiry-RFQ のtd番号毎に幅を指定 */
.cf7_inquiry_rfq td:nth-child(1){
  width: 20%;
}
.cf7_inquiry_rfq td:nth-child(2){
}
.cf7_inquiry_rfq td:nth-child(3),
.cf7_inquiry_rfq td:nth-child(4){
  width: 130px;
}

/* ------------------------------------------------------------ *
 * In-house inventory-RFQのページで使用しているテーブルの class:cf7_inquiry_rfq へのCSS
 * ------------------------------------------------------------ */
.cf7_stock_list table{
  border-collapse:collapse;
  border:solid 1px gray;
  font-size:0.6em;
}

.cf7_stock_list td,
.cf7_stock_list th{
  border:dotted 1px gray;
}


/* 各In-house inventory-RFQ の mfg, part, qty もfont-sizeを指定する */
  .cf7_stock_list input[type="text"].cmfg
, .cf7_stock_list input[type="text"].cpar
, .cf7_stock_list input[type="text"].cqty{
    background-color: #dcdcdc;
    color: #000;
    font-size:14px;
}


/* 各In-house inventory-RFQ のtd番号毎に幅を指定 */
.cf7_stock_list td:nth-child(1){
  width: 20%;
}
.cf7_stock_list td:nth-child(2){
}
.cf7_stock_list td:nth-child(3),
.cf7_stock_list td:nth-child(4),
.cf7_stock_list td:nth-child(5){
  width: 130px;
}


/* ------------------------------------------------------------ *
 * 共通部分の下部テーブル部分のCSS
 * ------------------------------------------------------------ */

/* th */
.table-contactform7 th{
  width: 20%;
}

/* ht の中にある span(*アスタリスク) だけ 赤くする */
  .table-contactform7 th span
, .cf7_offer_list th span
, .cf7_stock_list th span
, .cf7_inquiry_rfq th span{
  color: red;
}

/* confirmボタンのカスタマイズ */
input.wpcf7-confirm{
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
   flex-grow: 1;
   margin: 5px;
   font-size: 18px;
}

input.wpcf7-confirm:hover{
  background-color:#3e8e41
 }

/* backボタンのカスタマイズ */
input.wpcf7-back{
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
   flex-grow: 1;
   margin: 5px;
   font-size: 18px;
}

input.wpcf7-back:hover{
  background-color:#3e8e41
 }

/* submitボタンのカスタマイズ */
input.wpcf7-submit{
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
   flex-grow: 1;
   margin: 5px;
   font-size: 18px;
}

input.wpcf7-submit:hover{
  background-color:#3e8e41
 }


/*
.btn-submit{
  width: 30%;
  text-align: center;
  margin: 0 auto;
}
*/

.btn-submit{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recap{
  margin : 15px 0 0;
}

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


/* ------------------------------------------------------------ *
 * オートコンプリートまわりのCSS
 * ------------------------------------------------------------ */
/* 2024.10.10 */
/* chromeのオートコンプリートの時のバックカラーの調整 */
/* 少し挙動が変わるのでとりあえずコメントアウトする
  .wpcf7-text:-webkit-autofill
, .wpcf7-number:-webkit-autofill{
  box-shadow: 0 0 0 1000px #fff inset;
}
*/

/* 2024.10.09 */
/* プラグイン Contact Form 7 add confirm を使用して、確認ボタンを押した後に、input, textarea, select などのバックカラーを統一するために追加 */
/* Contact Form 7 add confirm のデフォルトだと確認時にバックカラーが灰色なるけど、Chromeのオートコンプリートをしたときにの色に合わせてみました */
  input.wpcf7c-conf
, textarea.wpcf7c-conf
, select.wpcf7c-conf {
  background: #E8F0FE;
}


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



/* ****************************************************************
 * Items I’m searching forのページ start 2023.04.25
**************************************************************** */
/* 追従サイドバー内ボタンを中央に配置する */
.inq-sendf{ 
    text-align: center;
    background-color: #f2f2f2;
    padding: 30px 0px 5px;
}

/* ボタン部分ページ内共通にする */
.offer_b1{
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}

.offer_b1:hover {
    background-color: #3e8e41;
}

/* <td>要素に対するCSS */
.myinq-list tr:hover td {
  background-color: #d9efff;
}
.myinq-list td:nth-child(1){
  width: 18%;
}
.myinq-list td:nth-child(2){
}
.myinq-list td:nth-child(3){
  width: 120px;
  text-align: right
}
.myinq-list td:nth-child(4){
  width: 90px;
  text-align: center
}

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


/* ****************************************************************
   In-house inventory のページ(Stock-List テーブル) 2023.05.08
**************************************************************** */
/* 追従サイドバー内ボタンを中央に配置する */
.mystk-sendf{ 
    text-align: center;
    background-color: #f2f2f2;
    padding: 30px 0px 5px;
}

/* ボタン部分ページ内共通にする */
.inquiry_b1{
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}

.inquiry_b1:hover {
    background-color: #3e8e41;
}

/* <td>要素に対するCSS */
.mystock-list tr:hover td {
  background-color: #d9efff;
}
.mystock-list td:nth-child(1){
}
.mystock-list td:nth-child(2){
}
.mystock-list td:nth-child(3){
  width: 100px;
  text-align: right
}
.mystock-list td:nth-child(4){
  width: 100px;
}
.mystock-list td:nth-child(5){
  width: 70px;
  text-align: center
}

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






/* ****************************************************************
 * katsuki.co.jp/item/メーカー/型番/ のページ start 2023.04.27
**************************************************************** */

.product-table-offzai td:nth-child(3){
  text-align: right
}

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



/* ****************************************************************
 * 各ページのサイドバーCSS  start 2023.05.09
**************************************************************** */

.sidebar {
  background-color: #f2f2f2;
}
.widget-sidebar-scroll-title{
  display:none; /* 追従サイドバーのタイトルを非表示にする */
}
.side-scroll-coment{
  font-size: 12px;
}
/* ****************************************************************
**************************************************************** */




/*

.product-label2 {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
}


#search_box {
    width: 300px;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}
  
#price-search-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
  
#price-search-button:hover {
    background-color: #3e8e41;
}
    
*/



/* ****************************************************************
   固定ページ左下に出る「ホーム」→「Home」に変更する 2023.11.07
**************************************************************** */
/* 「ホーム」を消す */
#breadcrumb.breadcrumb .breadcrumb-home a span{
   font-size: 0px;
}
/* 「Home」を挿入 */
#breadcrumb.breadcrumb .breadcrumb-home a span::before{
   font-size: 13px;
   content: "Home";
} 
/* ****************************************************************
**************************************************************** */