/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/*
#################################
・モバイル表示に改行させたい<br/>
・モバイル表示に改行させたくない<br/>
・文字揃え（センター揃え/左揃え）を画面サイズでスイッチ
・フッターレイアウト用CSS
・MAPページ用CSS（営業所のご案内）
・BlogElement用カスタムCSS
・投稿リスト表示（CodeBlock基本用）
・投稿リスト表示（サイドバー用）
・各種装飾
・テーブル（デザインパターン２）　変更用
#################################

サイトの基本色
#################################
水色 ： #03a9f4
#################################
*/

/*
#################################
Google reCAPTCHAを非表示
#################################
*/
.grecaptcha-badge { visibility: hidden; }

/*
#################################
【H2 WEBフォントの各モバイル対応】

特定のモバイルでCSSが作用しない場合があるので
「-webkit-appearance: none;」で
各デバイスのデフォルト仕様をOFFにする。
「-webkit-font-smoothing: antialiased;」で
モバイル版Safariに対応したウェイト調整。

https://on-ze.com/archives/562　（参考）
#################################
*/

h2 {
	-webkit-appearance: none;
	font-family: "shin-Go-Bold",shin-Go-Bold !important;
}

@media screen and (max-width: 768px){
h2 {
	-webkit-appearance: none;
	-webkit-font-smoothing: antialiased;
	font-family: sans-serif !important;
	}
}

/* モバイル表示のみ大きく表示させたい場合 */
/* <div class="mobile-big"> などで指定してください */
/* モバイル表示の際、hタグなど一部で強制的に小さくなる事があり、バランス調整に使います。 */

@media screen and (max-width: 768px){
.mobile-big120{
	font-size:120% !important;
}
}

/*2023.03 追加*/
/*グローバルメニューのサブメニュー展開時に表示される三角アローの位置を強制的に上に移動*/
/*何かの操作をきっかけにサブメニューと重なるようになってしまったため*/
.awb-menu__sub-arrow{
	transform: translate(0px,-23px) !important;
}

/*
#################################
<br class="br-sp">
モバイル表示に改行させたい場合は上記を改行させたい所に挿入
逆バージョン（モバイル表時の際は改行ナシ）は
<br class="br-pc">
#################################
*/

/* 改行位置（PC Mobile スイッチ） */
@media screen and (min-width: 768px){
.br-sp {display: none; }
}

/* 改行位置（PC Mobile スイッチ） */
@media screen and (max-width: 768px){
.br-pc {display: none; }
}

/* スライダーのタイトルをスマホ表示時縮小 */
/* ただし、SliderRevolutionに変更したため未使用（AvadaSlider時は適用） */
@media screen and (max-width: 768px){
.slider_base_tit {
	font-size:28px !important;
	line-height:1.4 !important;
	}
}

/* スライダーのリード文をスマホ表示時縮小 */
/* ただし、SliderRevolutionに変更したため未使用（AvadaSlider時は適用） */
@media screen and (max-width: 768px){
.slider_base_text {
	font-size:18px !important;
	line-height:1.4 !important;
	}
}

/* 開発時作成　→　リリース時、一旦非表示エレメント。 */
.display-no{
 display:none !important;
}

#display-no{
 display:none !important;
}

/* CTA BUTTON */
.cta-button{padding:70px 0;border:none;}

.tit-shadow-01 {
	text-shadow: 0px 0px 8px #000; 
    line-height: 1.4;
}

/* タイトルに影を付ける */
.tit-shadow-shingo-b {
	text-shadow: 0px 0px 8px #000; 
    line-height: 1.4;
    font-family: Shin Go Bold !important;
}

.tit-shadow-shingo-m {
	text-shadow: 0px 0px 8px #000; 
    line-height: 1.3;
    font-family: Shin Go Medium !important;
}

/* サンプルCSS */
.picturebutton-jp01{
    font-size:20px;
}

.more-news{
  float: right;
  text-decoration:none !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300 !important;
}

.teian-tit{
   font-size: 20px !important;
   line-height: 1.6 !important;
}


/*
#################################
背景画像を用いたリンクボタン
以下のHTMLで適用

<figure class="cap_sample10">
	<img src="http://tgd-design.com/development/toyonen-web/wp-content/uploads/2021/07/image_button-tool.jpg" />
		<figcaption>
		<p>業務遂行のために必要な道具として…<br/>皆様の商品や、作業環境の安全のため…<br/>様々な道具としてのネットをご提案。</p>
		<div class="heading">
			<h4 style="color:#fff; font-size:32px; line-height: 1.4 !important; padding:0px;">
				<div class="tit-shadow-01">
				<span style="font-weight: 600;">TOOL NET</span>
				<div class="picturebutton-jp01">道具としてのネット</div>
				</div>
			</h4>
		</div>
		</figcaption>
	<a href="http://tgd-design.com/development/toyonen-web/products/#tool_net"></a>
</figure>

#################################
*/
/* ただし、公開時は不必要なコンテンツのため非表示対応。 */

/* 画像画像ボタン（トップページに使用）*/
figure.cap_sample10 {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 00px 0%;
    width: 100%;
    height: auto;
    background: #000000;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.cap_sample10 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}
figure.cap_sample10 img {
    max-width: 100%;
    position: relative;
    opacity: 0.9;
}
figure.cap_sample10 figcaption {
    position: absolute;
    top: 45%;
    left: 7%;
    right: 7%;
    bottom: 45%;
    /* border: 50px solid white; */
    /* border-width: 1px 1px 0; */
}
figure.cap_sample10 .heading {
    overflow: hidden;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    position: absolute;
    bottom: 0;
    width: 100%;
}
figure.cap_sample10 h5 {
    display: table;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
    text-align: center;
    width: auto;
    text-transform: uppercase;
}
figure.cap_sample10 h5 span {
}
figure.cap_sample10 h5:before, figure.cap_sample10 h5:after {
    position: absolute;
    display: block;
    width: 1000%;
    height: 1px;
    content: '';
    background: white;
    top: 50%;
}
figure.cap_sample10 h5:before {
    left: -1000%;
}
figure.cap_sample10 h5:after {
    right: -1000%;
}
figure.cap_sample10 p {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    width: 100%;
    padding: 0 20px;
    margin: 0;
    opacity: 0;
    line-height: 1.6em;
}
figure.cap_sample10 a {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}
figure.cap_sample10:hover img {
    opacity: 0.25;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
figure.cap_sample10:hover figcaption {
    top: 9%;
    bottom: 9%;
}
figure.cap_sample10:hover p {
    opacity: 1;
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
}


/*
#################################
メニュー関連
#################################
*/

/* ドロップダウンメニューのテキスト両サイドに１文字分空きを作る*/
.fusion-menu-element-wrapper.dropdown-carets-yes:not(.collapse-enabled).direction-row.expand-method-hover.expand-left li.menu-item-has-children:not(.fusion-menu-item-button) ul a > :not(.fusion-open-nav-submenu) {
	padding-left: 1em !important;
	padding-right: 1em !important;
}


/*
#################################
メガメニュー関連
#################################
*/

/* メガメニュー全体のの背景色を変更*/
.lazyloaded{
	background-color:rgba(0,0,0,0) !important;
}

/* メガメニューのドロップダウンエリアの背景色を変更*/
.fusion-megamenu-sitewidth{
	background-color:#f2f2f2 !important;
	margin-bottom:20px !important;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .3) !important;
}

/* メガメニュー内のタイトルデザイン*/
.fusion-megamenu-title .awb-justify-title{
	font-size:18px !important;
	font-weight: 900 !important;
	padding-top:15px;
	padding-bottom:15px;
	color:#03a9f4;
}

.fusion-megamenu-title .awb-justify-title:hover{
	color:#333;
}

.fusion-megamenu-title .awb-justify-title a:active {
	color: #25afb4 ;
}

/* メガメニュー内の　ウィジェット表示エリア内のデザイン*/
.menu-widget{
	font-size:14px;
}

.fusion-menu-element-wrapper .fusion-megamenu-wrapper .fusion-megamenu-widgets-container {
	display: block;
	padding-right:10px !important;
	padding-left:32px !important;
	padding-top:0px;
	padding-bottom:0px;
	margin-bottom: 10px;
	margin-top: -30px;
}


/*
#################################
固定ページのヘッダーエリア関連
#################################
*/

/*固定ページのヘッダーエリア　基本デザイン*/
#page_title_area{
	padding-top:270px;
}

@media screen and (max-width: 768px){
#page_title_area {
	padding-top:70px;
	}
}

/* ページタイトルのレスポンシブル停止（サイズ固定）----CSSでは全て解決しないので各ページのデバイス毎設定もカスタムします*/
#page_title_area h1{
	font-size:30px;
	color:#fff;
	letter-spacing:3px;
	font-weight:normal;
}

/* ページタイトルのレスポンシブル停止（サイズ固定）----CSSでは全て解決しないので各ページのデバイス毎設定もカスタムします*/
.main_title　h1{
	font-size:30px !important;
}

/*
#################################
blogエレメント関連

blogエレメント（Large）を固定ページに用いて表示させると
65pxずつスペースを確保するCSSがデフォルトで実装されている
.fusion-blog-layout-large article, .fusion-blog-layout-large-alternate article, .fusion-blog-layout-medium article {
    margin-bottom: 65px;
}
toyonen-web/blog/
固定ページ上部の独自CSS（ページ毎に独自設定）するエリアに
個別に記述。
その為、本style.cssに記述はしていません。
#################################
*/


/*
#################################
テーブルデザイン関連
#################################
*/

/* テーブル２　デザインデフォルト値変更*/
.table-2{
	font-size:14px !important;
	line-height:1.4;
}

.table-2 tr td {
    border-bottom: 1px solid #dcdcdc;
    padding: 10px 20px !important;
}

.original_container01 h5{
	font-size:16px !important;
	margin-bottom:5px;
	border-bottom:1px #333 solid;
}

/* 沿革用テーブルのpaddingを変更*/
.history tr td {
	border-bottom: 1px solid #dcdcdc;
	padding: 10px 15px !important;
}

/*
#################################
リクルート関連
#################################
*/

/*リクルート　募集要項　テーブル一列目のみカスタマイズ*/
.recruit_table tr td:nth-child(1){
  background-color:#b0c4de !important;
}

/*リクルート　募集要項　テーブル注釈項目*/
.recruit_supplement{
	background-color:#03a9f4;
	padding:0.5em;
	color:#fff;
	margin-right:1em;
	line-height:40px;
}

/*
#################################
投稿リスト表示関連 【post-list.ｐｈｐ】
（トップページにPHPをショートコードで表示する際のデザイン）
#################################
*/
.list__body {
  display: inline-flex;
}

.post_list {
  padding-bottom: 10px;
  border-bottom: 0px solid #ddd;
  margin-bottom: 10px;
  padding-top: 0px;
}

.list__date {
  width: 120px;
  margin-right: 5px;
}


.list__category {
  width: 120px;
  height: 25px;
  text-align: center;
  padding: auto;
  font-size: 11px;
  line-height: 25px;
  margin-right: 15px;
}

.list__category a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.card__category {
  top: -25px;
  left: 0;
  height: 25px;
  padding: 0 15px;
  background: #AAAAAA;
  color: #fff;
  font-size: 12px;
  line-height: 25px;
}

/*投稿カテゴリーのスラッグに以下を設定します*/
.card__info {
  background-color: #696969;
}

.card__proposal {
  background: #708090;
}

.card__category a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.card__title {
  padding: 0 0 10px;
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  line-height: 1.5;
  max-height: 3em;
  overflow: hidden;
}

.list__thumb {
  overflow: hidden;
  width: 100px;
  height: 35px;
  right: 0;
  position: absolute;
  margin-top: -5px;
}

.list__thumb img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.pc-margin{
	padding-left:6%;
	padding-right:6%;
}

#instructor-photo img{
	width:200px !important;
	border-radius: 10px !important;
	margin-bottom:15px !important;
	margin-top:10px !important;
}

@media screen and (max-width: 640px) {
	.pc-margin{
	padding-left:0%;
	padding-right:0%;
}
	
  .list__thumb img {
    display: none;
  }
  .list__date {
    float: right;
  }
  .list__title {
    display: block;
    width: 100%;
    margin-top: 5px;
  }
  .list__body {
    display: contents;
  }
  .list__category {
    padding: 4px;
  }

}

/*
#################################
サイトポリシー関連
#################################
*/

#sitepolicy h4{
	padding-top:20px;
	font-size:22px;
}

/*リスト項目の頭出しを通常本文の位置と揃えます*/
#sitepolicy ol {
	padding-left:25px !important;
}


/*
#################################
その他（各ページ上でのデザイン的な調整　ほか）
#################################
*/

/*投稿カテゴリー毎の設定*/
/*カテゴリーを新設した場合は、スラッグに固有の名称を与え、CSSで管理する*/
/*カテゴリーの表示非表示はPHPで指定*/
/*例：list__body_proposal　＝　提案事例*/
.list__body_proposal {
	width:100%;
}

.list__title_proposal{
	text-align:center !important;
	border:1px #ccc solid;
	padding:20px;
	margin:20px;
}

/*トップページスライドのタイトル（H2)の背景に色帯を設置（目立たせたい）*/
/*スライドのタイトルテキストCSS*/
.heading {
	background-color:rgba(3, 169, 244, 0.0) !important;
	width:100vw;
	margin-left:calc( ( 100% - 100vw ) / 2 ) !important;
}
/*色帯の縦中央に文字が配置されるよう調整*/
.tit-shadow-shingo-b{
	padding-bottom:30px;
}
/*モバイル版のスライダーには影響させないメディアクエリ*/
@media screen and (max-width: 768px){
.heading {
	background-color:rgba(3, 169, 244, 0.0) !important;
	width:100%;
	margin-left:0 !important;
}
}


/*メールフォーム確認プラグインContact Form 7 Multi-Stepで自動生成される【戻る】ボタンをReデザイン*/
/*囲み内フォントデザイン（フォームのプレースフォルダー用テキストにも適用されます）*/
input, select, textarea {
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: middle;
    color: #333 !important;
	font-size:12px;
}

/*囲みデザイン*/
input[type="button" i] {
    appearance: auto;
    user-select: none;
    white-space: pre;
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: -internal-light-dark(black, white);
    background-color: #d3d3d3;
    box-sizing: border-box;
    padding: 9px 20px;
    border-width: 0px;
    border-style: outset;
    border-image: initial;
}

.form_contents_tit{
	text-align:center !important;
	font-size:18px !important;
	border:1px #333 solid;
	padding:5px 10px;
	margin-bottom:20px;
	margin-top:40px;
}

.form_contents_radio{
	text-align:center !important;
	padding-bottom:20px;
}

/*フォームの各入力項目*/
.form-place {
	margin-top: 20px !important;
	font-size:14px;
}

/*製品情報関連*/
.product_name{
	font-size:18px;
	font-family: Shin Go Medium !important;
	font-weight:900;
	margin-top:20px;
}

.product_detail tr{
	border-bottom :1px #333 solid;
}

.product_detail td{
	padding-top:10px;
	font-size:14px;
	line-height:1.4;
}

.product_detail tr td:nth-of-type(1){
	color:#03a9f4;
}

.product_detail tr td:nth-of-type(2){
	padding-left:15px;
}

.product_box{
	margin-bottom:60px;
	padding-bottom:80px;
}

/*ポイントにマーカーラインを実装*/
.seotext_markerline {
	display: inline;
	background: url(http://tgd-design.com/development/toyonen-web/wp-content/uploads/2021/08/markerline-02.png) repeat-x 0 100% rgba(0, 0, 0, 0);
	padding: 0 0px 0;
	font-weight:900;
	color:#000;
}

/*アイメッシュの特性コラムに使用*/
.product-info-txt01{
	background-color:#2e8b57;
	color:#fff;
	padding:10px !important;
	text-align: center;
	margin-top:15px;
	margin-bottom:20px;
}

.product-info-txt02{
	font-size:14px;
	line-height:1.4;
}


.product-info-txt_class {
	font-size:14px;
	line-height:1.4;
}

h4.product-info-txt_class{
	background-color:#2e8b57 !important;
	color:#fff !important;
	padding:10px !important !important;
	text-align: center !important;
	margin-top:15px !important;
	margin-bottom:20px !important;
}

/*指定クラスのHタグのみにスタイルを適応（h3.~）
 * の為に用意したが、.fusion-responsive-typography-calculatedが
 * ポートフォリオ以外でも使用されているため、
 * ポートフォリオ関連のみに適用するため、Avadaテーマオプションのレイアウトに
 * ポートフォリオ用のレイアウトを用意し、ヘッダー部分に下記CSSを記述。
 * 以降、投稿でアップされるポートフォリオ全てにのみ下記のデザイン変更が適応される様にしました。
 * サイズ・ウエイトなどを変更したい場合は、テーマオプションのレイアウトの黒帯内CSS記述エリアのCSSを変更してください。
 * 
h3.fusion-responsive-typography-calculated{
	font-size:18px !important;
	font-weight:900 !important;
}
*/
/*ポートフォリオに使用したテーブルデザイン*/
.table-project {
	font-size:16px !important;
}

.table-project tr td {
	border-bottom: 1px solid #dcdcdc;
	padding-left: 0px !important;
	padding-bottom:15px !important;
	padding-top:15px !important;
	padding-right:20px !important;
}

/*ポートフォリオのパンくずリストに適応*/
.portfolio_single_link a {
text-decoration: none;
color:#000 !important;
}

/*ドラフトエレメントなど、ログインユーザに表示されてしまうコンテンツを非表示にします*/
.display-none{
	display:none !important;
}

/*トップページ「強み」部分のデザイン*/
.strong-point-bg{
	background-image: url(http://tgd-design.com/development/toyonen-web/wp-content/uploads/2021/08/strong-point-bg.png); 
	background-repeat: no-repeat;                /* 背景の繰り返し設定 */
	background-position: left center;          /* 背景の位置指定 */
}

.sp-txt01{
	font-size:1.2em;
	color:#ffd700;
}

.sp-txt02{
	background-color:#ffd700 !important;
	padding:10px !important;
	color:#000;
	margin-right:20px;
	font-size:0.8em;
}

.sp-txt02-mobile{
	background-color:#ffd700 !important;
	padding:10px !important;
	color:#000;
	font-size:0.8em;
	margin-bottom:0px !important;
}

.sp-txt03-mobile{
	padding-top:0px !important;
	padding-bottom:10px !important;
}

/*代表者の氏名部分を指定*/
.ceo{
	font-size:1.2em;
	letter-spacing:10;
}

/*沿革の年号のみ個別指定*/
.history-year{
	font-weight: 600 !important;
}

/*PortfolioSingleページのナビゲーションとメニューの前後関係を調整*/
.fusion-flexslider .flex-control-nav {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
  z-index: 5 !important;
}

/*Portfolioアーカイブ（モバイルのみ）のテキスト背景を指定*/
/*透明では、背景写真とのズレが目立つため不透明に変更*/
.portfolio_mobile_custom01 .fusion-portfolio-content{
	background-color:#fff !important;
}

/*新規採用ページのモバイル表示時のデザイン*/
/*PC：テーブル／Mobile:テキスト（このテキスト部分を以下でデザイン）*/
.recruit-mobilechart p{
	font-size:14px	!important;
	line-height:1.6 !important;
}

.indent{
	padding-left:1em;
	text-indent:-1em;
}

.indent-box{
	text-indent:-1em;
	border:1px solid #ccc !important;
	padding-left:2em !important;
	padding-right:0.75em !important;
	padding-top:0.5em !important;
	padding-bottom:0.5em !important;
}

.recruit-mobilechart-box{
	border:1px solid #ccc !important;
	text-align:center !important;
	padding:1em !important;
}

.recruit-mobilechart h3{
	color:#03a9f4 !important;
	font-weight:900 !important;
	padding:0px 0px 2px 10px; 
	text-align:left !important;
	font-size:18px	!important;
	background-color:#fff;
	border-left:5px solid #03a9f4 !important;
	border-bottom:1px solid #03a9f4 !important;
	margin-bottom:10px !important;
	margin-top:35px !important;
}

.recruit-mobilechart h4{
	font-size:16px	!important;
	border-bottom:1px solid #ccc;
	margin-bottom:5px !important;
	font-weight:900 !important;
}

.recruit-mobilechart ul{
	font-size:14px	!important;
	margin:0px 0px 20px 0px !important;
}

@media screen and (max-width: 768px){
.lightbox-display-mobile{
	display:none !important;
	}
}
@media screen and (min-width: 769px){
.lightbox-display-pc {
	display:none !important;
	}
}

@media screen and (max-width: 768px){
.mobile-bgimage-none{
background-image:none !important;	
	}
}

.recruit_bgimg{
	background-image:url("http://tgd-design.com/development/toyonen-web/wp-content/uploads/2021/09/net-image-05-Trimming.jpg");
	background-repeat:no-repeat;
	background-position:right bottom;
}

@media screen and (max-width: 768px){
.recruit_bgimg{
background-image:none !important;	
	}
}