@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
#to_document_request_form {
	background-color: #B11928; /* 赤 */
	opacity: 0.9;
	bottom: 100px;   /* 下から100pxに配置 */
	border-radius: 0 5px 5px 0; /* 角丸め */
	font-size: 18px;
/* 	font-family: "Noto Sans JP", Sans; */
	left: 0;         /* 左端に配置 */
	position: fixed; /* 要素を固定位置 */
	padding: 0.8em 0.4em;   /* 内側の余白 */
	writing-mode: vertical-rl; /* 縦書き */
	z-index: 9999; /* 最前面に */
}
#to_document_request_form a {
	color: white;
	text-decoration: none;			
}


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

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  .hidden-width-1024px {
    display: none;
  }
}

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

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

	/* 画面サイズがモバイル相当の狭さならば非表示にする。それ以外の画面幅があるときは表示する */
	.d-none-if-mobile { display: none !important }
}

/**********************************
 * INFOシリーズ製品サイト用共通スタイル
 **********************************/
/**
 * インフォポートカラーの定義
 * 使用例： color: var(--ip-blue);
 */
:root {
   /* インフォポートカラー */
  --ip-red: #b11928;
  --ip-pink: #d7879a;
  --ip-skyblue: #5887a8;
  --ip-blue: #1c4a93;
  --ip-orange: #d98822;
  --ip-yellow: #ebbc00;
  --ip-lightgreen: #98a93f;
  --ip-green: #3e613e;
  --ip-brown: #ac7739;
  --ip-purple: #5c328a;
  --ip-pink: #d7879a;
  --ip-black: #201510;
  --ip-white: #fbfbf7;
  --ip-orange-notice: rgba(217,136,34,0.3);
  --ip-light-blue: #417EE0;
  --ip-light-yellow: #FFD119;
  --ip-light-green: #80AD80;
  --ip-lighter-blue: #96BFFF38;

  /* 製品カラー */
  --prod-logi-color: #287393;
  --prod-wms-color: #94283A;
  --prod-time-color: #e68c21;
  --prod-sales-color: #5887a8;
  --prod-repo-color: #629762;
  --prod-ip-pa-color: #228C3B;
  --prod-pos: #4A90E2;

	/* 製品ロゴカラー */
/*  --prod-logi-logo-color: #???;
  --prod-logi-logo-light--color: #???; */
/*  --prod-wms-logo-color: #???;
  --prod-wms-logo-light-color: #???; */
  --prod-time-logo-color: #ebbd00;
  --prod-time-logo-light-color: #fed766;
  --prod-time-logo-bg-color: #fff9e6;
/*  --prod-sales-logo-color: #???;
  --prod-sales-logo-light-color: #???; */
/* 	--prod-repo-logo-color: #???;
  --prod-repo-logo-light-color: #???; */
/*  --prod-ip-pa-logo-color: #???;
  --prod-ip-pa-logo-light-color: #???; */

  /* 製品ごとの強調色 */
/*   --prod-logi-strong-color: #f2b705;
  --prod-wms-strong-color: #f2b705; */
  --prod-time-strong-color: #f2b705;
/*   --prod-sales-strong-color: #f2b705;
  --prod-repo-strong-color: #f2b705;
  --prod-ip-pa-strong-color: #f2b705; */
	
  /* bootstrap の色 */
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;

  /* デフォルトフォント設定 */
  font-family: "Noto Serif JP", serif;
}

body {
  /* デフォルトフォント設定 */
  font-family: "Noto Sans JP", sans-serif;
  line-height: 2.2;	
}

/** 改行スタイル **/
h2,h3,h4,h5,h6, .auto-phrase, .auto-phrase a.wp-block-button__link {
  word-break: auto-phrase !important;
}

/** フォント設定 **/
h1, h2, h3, h4 {
  font-family: "Noto Serif JP", serif;
  font-weight: bold, normal;
  .entry-content>* {
    line-height: 2.2;
  }
}
.entry-content>* { line-height: 2.2 }

/** 投稿のスタイル **/ 
/*
.article.post.type-post {
  font-size: 15px;
  h2 { 
    margin-bottom: 0;
    padding-left: 0;
    font-size: 15px;
    color: #000;
  }
	h3, h3+p {
    margin-bottom: 0;
    padding-left: 0;
    font-size: 20px;
		font-weight: bold;
    color: #0693E3;
	}
  h4 { font-size: 18px }
}
*/
/** 見出しのスタイル **/
.article .wp-block-cover__inner-container h2 {
  color: black;
  background-color: #fff0;
}
.article {
    .logi {
        h2 {
            background-color: #fff0;
            color: var(--prod-logi);
            border: 0;
            font-weight: normal;
            font-size: 32px;
            line-height: 2.3;
        }

        h3 {
            background-color: #fff0;
            color: var(--prod-logi);
            border-left: 0;
            border-right: 0;
            border-top: 1px solid var(--prod-logi);
            border-bottom: 1px solid var(--prod-logi);
            font-weight: normal;
            font-size: 22px;
            line-height: 2.3;
        }

        h4 {
            background-color: #fff0;
            color: black;
            border-left: 3px solid var(--prod-logi);
            border-right: 0;
            border-top: 0;
            border-bottom: 0;
            font-weight: normal;
            font-size: 20px;
        }
    }
}
h3.article-time {
    border-top: 1px solid var(221,221,221) !important;
    border-bottom: 1px solid var(221,221,221) !important;
	border-left: 7px solid rgb(136,136,136) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
    font-weight: normal;
    font-size: 22px;
    line-height: 2.3;
}
/* 見出しh3の両横につく罫線 */
.is-style-vk-heading-both_ends {
	position: relative;
	color: inherit;
	background-color: transparent;
	border: none;
	display: flex;
	align-items: center;
	text-align: center;
	padding: 0;
}
.is-style-vk-heading-both_ends::before {
	content: "";
	flex-grow: 1;
	border-bottom: 1px solid currentcolor;
	margin-right: 1em;
}
.is-style-vk-heading-both_ends::after {
	content: "";
	flex-grow: 1;
	border-bottom: 1px solid currentcolor;
	margin-left: 1em;
}

/** h2と同じ装飾をする **/
.h2-like {
    font-weight: normal;
    font-size: 1.5em;
    line-height: 2em;
    font-family: "Noto Serif JP", serif;
}

/** 表 **/
figure.wp-block-table table {
	width: 80%;
	tbody { width: 100% }
	td:last-child() {
    padding-right: auto;		
	}
}

/** 罫線と背景がすべて透明な表 **/
table.no-style-table,
.no-style-table table,
.no-style-table table tbody tr,
.no-style-table table tbody tr th,
.no-style-table table tbody tr td {
    border: none !important;
	border-collapse: collapse !important;
	background-color: transparent !important;
	padding: 0 !important;
}

/** グローバルナビ **/
.navi-in>ul .sub-menu,
.navi-in>ul .sub-menu li {
  background-color: white;
}
.navi-in>ul li:hover,
.navi-in>ul .sub-menu li:hover {
  background-color: #e6e6e6;
}
.navi-in>ul .sub-menu a, .navi-in a {
  transition: none;
}
/* グロナビの最後の要素は「資料請求」で決め打ち */
/* 右に封筒のアイコンと左にスペース、背景色INFO-Portレッド、文字色白 */
.menu-top.menu-header>li.menu-item:last-child {
/* 	background: var(--ip-red); */
	background: #dc3545; /* 白背景用問合せ赤 */
	border-radius: 7px;
	margin: 5px;
	height: 2.8em;
	.item-label {
		color: white;
		font-size: 1.25em;
/* 		font-weight: bold; */
		letter-spacing: 0.5em;
	}
	.item-label::before {
		content: "\00a0";
	}
 	.item-label::after {
		font-family: "Font Awesome 5 Free";
		content: "\f0e0";
	}
}

/** NEWS **/
.info-list-item .info-list-item-date,
.info-list-item .entry-category {
	color: var(--ip-gray-dark) !important;
  font-family: "Noto Sans JP", sans-serif;
}
.info-list-item-meta {
	opacity: 1 !important;	
}


/* 価格ページ用 */
.info-logi-functions>li {
  display: inline-block;
  padding: 1em;
  margin: 0.5em;
  width: 7em;
  text-align: center;
  background-color: #1c4993;
  color: white;
  font-weight: 800;
}
/** タイトルのインライン画像用 **/
h1.ryoukin img { vertical-align: middle }


/** 要約アコーディオンのスタイル **/
.toggle-box.summary {
  font-size: 0.8em;
  .toggle-button {
    text-align: unset;
    background-color: unset;
  }
  .toggle-button::before {
    font-family: "Font Awesome 5 Free";
	color: var(--cocoon-text-color);
    content: "\f05a";
	opacity: unset;
  }
}

/** 前後ナビゲーション（パンナビゲーション）のスタイル **/
.pan-navi,
.pan-navi:visited,
.rank-math-breadcrumb a, 
.rank-math-breadcrumb a:visited {
	color: var(--bs-gray-dark);
	text-decoration-line: none;
}
.pan-navi:hover,
.pan-navi:focus,
.pan-navi:link,
.pan-navi:active,
.rank-math-breadcrumb a:hover,
.rank-math-breadcrumb a:focus,
.rank-math-breadcrumb a:link,
.rank-math-breadcrumb a:active {
	color: var(--bs-gray);	
	text-decoration-line: none;
}
/** Rank Math のパンくずリストは非表示にする            **
 ** 構造化データとしては使いたいので 無効にはしたくない **/
/* nav.rank-math-breadcrumb { display: none } */

/* 問合せフォームのテキストを2列にする */
/* 行全体のスタイル */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* 各列のスタイル */
.form-col {
  flex: 1 1 calc(50% - 10px);
  box-sizing: border-box;
}
/* スマートフォン向け調整 */
@media screen and (max-width: 768px) {
  .form-row {
    flex-direction: column; /* 列を縦に並べる */
  }
  .form-col {
    flex: 1 1 100%; /* 100%幅で1列にする */
  }
}

/* 問合せフォームの送信ボタンを装飾 */
input[type=submit].ip-form-submit {
	font-family: "Noto Sans JP", sans-serif, "Font Awesome 5 Free", "FontAwesome";
	background-color: #B11928;
	border-radius: var(--cocoon-basic-border-radius);
	color: var(--cocoon-white-color);
	font-size: 18px;
	height: 45px;
	line-height: 16px;
}

/* 商標（Trademark:トレードマーク）の注意書き用箇条書き */
ul.trademark-notice, .trademark-notice ul, ul.notice {
	list-style: none; /* デフォルトのリストスタイルを無効にする */
	padding-left: 0;
	li {
		position: relative;
		padding-left: 20px; /* アイコンとテキストの間のスペースを確保する */
		line-height: 1.3em;
	}
	li::before {
		content: "※"; /* カスタムアイコン */
		position: absolute;
		left: 0; /* アイコンをリストアイテムの先頭に配置する */
		top: 0;
		font-size: 1em; /* 必要に応じてアイコンのサイズを調整 */
		color: black; /* アイコンの色を設定 */
	}
}

/** Testimonialsブロックの表示を強制的に制御する **/
/** spectraのバージョンアップで解決したら削除する **/
.wp-block-uagb-testimonial .uagb-tm__items { visibility: visible !important }

/** Testimonialsブロックの感想文にborderでカギカッコのような枠線をつける **/
.ip .uagb-tm__text-wrap {
    margin: 0 auto;
}
.ip .uagb-tm__desc {
	margin: 15px;
	width: fit-content;
}
.ip .uagb-tm__desc::before,
.ip .uagb-tm__desc::after {
    position: absolute;
    width: 30px;
    height: 30px;
    content: '';
}
.ip .uagb-tm__desc::before {
    border-left: solid 3px;
    border-top: solid 3px;
    top: 0;
    left: -30px;
}
.ip .uagb-tm__desc::after {
    border-right: solid 3px;
    border-bottom: solid 3px;
    bottom: 0;
    right: -30px;
}

/** サイズ調整 **/
.w-fit-content { width: fit-content !important }

/** reCAPTCHAバッジの非表示 **/
/* div.grecaptcha-badge { display: none !important } */

/** 背景色を透過させる **/
.bg-transparent { background-color: transparent !important }

/** **/
.time-bg-color { background-color: var(--prod-time-logo-bg-color) !important }

/* bootstrap互換 */
.w-100 { width: 100% !important }
.w-75 { width: 75% !important }
.w-50 { width: 50% !important }
.w-25 { width: 25% !important }
.w-auto { width: auto !important }
.text-center { text-align: center !important}
.text-left { text-align: left !important}
.text-right { text-align: right !important}
.m-auto { margin: auto !important}
.mx-auto { margin: 0 auto !important}
.my-auto { margin: auto 0 !important}
.ml-auto { margin-left: auto !important}
.mr-auto { margin-right: auto !important}
.mt-auto { margin-top: auto !important}
.mb-auto { margin-bottom: auto !important}
.m-0 { margin: 0 !important}
.p-0 { padding: 0 !important}
.ip-notice { background-color:var(--ip-orange-notice) !important;}
.bg-clear {	background-color: transparent !important;}
.border-0 {	border: none !important;}
.border-0-all { * { border: none !important;} }
.mt-0 { margin-top: calc(1rem * 0) !important }
.mt-1 { margin-top: calc(1rem * 0.25) !important }
.mt-2 { margin-top: calc(1rem * 0.51) !important }
.mt-3 { margin-top: calc(1rem * 1) !important }
.mt-4 { margin-top: calc(1rem * 1.5) !important }
.mt-5 { margin-top: calc(1rem * 3 ) !important }
.mb-0 { margin-bottom: calc(1rem * 0) !important }
.mb-1 { margin-bottom: calc(1rem * 0.25) !important }
.mb-2 { margin-bottom: calc(1rem * 0.51) !important }
.mb-3 { margin-bottom: calc(1rem * 1) !important }
.mb-4 { margin-bottom: calc(1rem * 1.5) !important }
.mb-5 { margin-bottom: calc(1rem * 3 ) !important }
.pt-0 { padding-top: calc(1rem * 0) !important }
.pt-1 { padding-top: calc(1rem * 0.25) !important }
.pt-2 { padding-top: calc(1rem * 0.51) !important }
.pt-3 { padding-top: calc(1rem * 1) !important }
.pt-4 { padding-top: calc(1rem * 1.5) !important }
.pt-5 { padding-top: calc(1rem * 3 ) !important }
.pl-0 { padding-left: calc(1rem * 0) !important }
.pl-1 { padding-left: calc(1rem * 0.25) !important }
.pl-2 { padding-left: calc(1rem * 0.51) !important }
.pl-3 { padding-left: calc(1rem * 1) !important }
.pl-4 { padding-left: calc(1rem * 1.5) !important }
.pl-5 { padding-left: calc(1rem * 3 ) !important }
.me-0 {	margin-left: auto !important;margin-right: 0 !important;}
.pb-0 { padding-bottom: calc(1rem * 0) !important }
.border.border-primary { border-color: #007bff !important }
.border.border-secondary {  border-color: #6c757d !important }
.border.border-success {  border-color: #28a745 !important }
.border.border-danger {  border-color: #dc3545 !important }
.border.border-warning {  border-color: #ffc107 !important }
.border.border-info {  border-color: #17a2b8 !important }
.border.border-light {  border-color: #f8f9fa !important }
.border.border-dark {  border-color: #343a40 !important }
.border.border-white {  border-color: #fff !important }
.border.border-1 { border-width: 1px !important }
.border.border-2 { border-width: 2px !important }
.border.border-3 { border-width: 3px !important }
.border.border-4 { border-width: 4px !important }
.border.border-5 { border-width: 5px !important }
.align-top { vertical-align: top !important }
.align-middle { vertical-align: middle !important }
.align-bottom { vertical-align: bottom !important }
.align-baseline { vertical-align: baseline !important }
.align-text-bottom { vertical-align: text-bottom !important }
.align-text-top { vertical-align: text-top !important }
.text-nowrap { white-space: nowrap !important }
.d-none { display: none !important }
.d-flex { display: flex !important }
.d-block { display: block !important }
.d-inline { display: inline-block !important }
.visually-hidden { visibility: hidden !important }
.align-items-start { align-items: flex-start !important }
.align-items-end { align-items: flex-end !important }
.align-items-center { align-items: center !important }
.justify-content-start { justify-content: start !important }
.justify-content-end { justify-content: end !important }
.justify-content-center { justify-content: center !important }
.justify-content-between { justify-content: between !important }
.justify-content-around { justify-content: around !important }
.justify-content-evenly { justify-content: evenly !important }

/* bootstrapのような拡張表現 */
.max-width-100 { max-width: 100% !important }
.max-width-75 { max-width: 75% !important }
.max-width-50 { max-width: 50% !important }
.max-width-25 { max-width: 25% !important }
.max-width-1450px { max-width: 1450px !important }
.max-width-800px { max-width: 800px !important }
.max-width-600px { max-width: 600px !important }
.min-width-100 { min-width: 100% !important }
.min-width-75 { min-width: 75% !important }
.min-width-50 { min-width: 50% !important }
.min-width-25 { min-width: 25% !important }
.max-height-450px { max-height: 450px !important }
.min-height-100 { min-height: 100% !important }
.h-100 { height: 100% !important }
.h-75 { height: 75% !important }
.h-50 { height: 50% !important }
.h-25 { height: 25% !important }
.h-auto { height: auto !important }
.fs-1rem { font-size: 1rem !important }
.fs-2rem { font-size: 2rem !important }
.fs-3rem { font-size: 3rem !important }
.fs-0125em { font-size: 0.125em !important }
.fs-025em { font-size: 0.25em !important }
.fs-05em { font-size: 0.5em !important }
.fs-075em { font-size: 0.75em !important }
.text-decoration-none a { text-decoration: none !important }


/** モバイル時の特殊設定 **/



/** Contact Form 7のラジオボタンを縦に並べる */
/* .wpcf7-form-control.wpcf7-radio {
    display: block;
    > span {
        display: block;
        margin-bottom: 0.2em;
    }
}
 */