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

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

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


/*
#################################
モバイルサイズ表示でタイトルサイズをコントロール
#################################
*/
@media screen and (max-width: 768px){
.mobile_large_title h2{
	font-size:24px !important;
	}
.mobile_large_title h3{
	font-size:24px !important;
	margin-top:60px !important;
	}	
.mobile_large_title h4{
	font-size:18px !important;
	line-height:1.8 !important;
	text-align:left !important;
	}
}

/*
#################################
事業案内ページ用
#################################
*/
.e-title h2{
	font-size:16px !important;
	letter-spacing:5px !important;
	margin-top:10px !important;
	margin-bottom:10px !important;
}

.service_lineup_info{
	font-weight:900 !important;
}

.service_lineup_info h3{
	font-size:24px !important;
	font-weight:900 !important;
	margin-top:30px !important;
	margin-bottom:10px !important;
}


	.info_archivepage .blog-shortcode-post-title h2{
		font-size:40px !important;
	}


/*
#################################
CSSによる非表示
#################################
*/
.display-none{
	display:none !important;
}

.top-businesslineup-tit-mobile h4{
	font-size:18px !important;
}

/*
#################################
コードブロックによるオリジナルデザイン要素
#################################
*/

/* 
#################################
ボタンで背景画像を差し替えるエフェクト 
https://theorthodoxworks.com/web-design/switch-bg-img-with-hover-preload/
#################################
 */

/* ボタンのスタイル */
.bg-change {
    position: absolute;
    top: 0 ;
    bottom: 0;
    width: 200px;
    height: 100px;
    line-height: 50px;
    margin: auto;
    text-align: center;
    color: #000;
    background: rgba(255,255,255,.75);
    cursor: pointer;
	font-size:18px !important;
	padding-top:25px;
	letter-spacing:0px;
}
.bg-change.no1 {
	right: 66%;
}
.bg-change.no2 {
	left: 0;
	right: 0;
}
.bg-change.no3 {
	left: 66%;
}
.bg-change.no4 {
	top:260px;
	right: 66%;
}
.bg-change.no5 {
	top:260px;
	left: 0;
	right: 0;
}
.bg-change.no6 {
	top:260px;
	left: 66%;
}
/* コンテンツエリアのスタイル */
.bg-change-wrapper {
	width: 100%;
	height: 600px !important;
}

.bg-change-contents {
    height: 100vh;
    background-image: url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE-master.jpg), url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE001.jpg), url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE002.jpg), url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE003.jpg), url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE004.jpg), url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/11/imagechange-bg-master03.jpg), url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE005.jpg);
	background-position: 0% 0%;
	background-repeat: no-repeat;
	background-size: 100% auto, 0 0, 0 0, 0 0;
	transition-duration: 2s;
}

/* コンテンツエリア内の記事*/
.bg-change-contents h4 {
	font-size:26px !important;
	font-weight:900 !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important ;
	padding-top:80px;
	padding-left:80px;
}

.bg-change-contents p {
	font-family: 'Noto Sans JP', sans-serif !important;
	font-weight:900 !important;
	margin-top: 0px !important;
	margin-bottom: 5em !important ;
	padding-top:20px;
	padding-left:80px;
}

/* ボタンホバー時のスタイル（ホバー時の背景画像を指定） */
.bg-change.no1:hover ~ .bg-change-wrapper .bg-change-contents {
    background-image: url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE001.jpg);
    background-size: 100% auto;
    background-position: bottom;
}
.bg-change.no2:hover ~ .bg-change-wrapper .bg-change-contents {
    background-image: url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE002.jpg);
    background-size: 100% auto;
    background-position: bottom;
}
.bg-change.no3:hover ~ .bg-change-wrapper .bg-change-contents {
    background-image: url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE003.jpg);
    background-size: 100% auto;
    background-position: bottom;
}
.bg-change.no4:hover ~ .bg-change-wrapper .bg-change-contents {
    background-image: url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE004.jpg);
    background-size: 100% auto;
    background-position: bottom;
}
.bg-change.no5:hover ~ .bg-change-wrapper .bg-change-contents {
    background-image: url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE005.jpg);
    background-size: 100% auto;
    background-position: bottom;
}
.bg-change.no6:hover ~ .bg-change-wrapper .bg-change-contents {
    background-image: url(http://musashi-harvest.co.jp/wp/wp-content/uploads/2021/12/imagechange-bg-SquareRE006.jpg);
    background-size: 100% auto;
    background-position: bottom;
}

/*コードブロック内に記述したボタンを任意の位置に移動*/
.irregular_position01{
	position:relative !important;
	bottom:60px !important;
}

/*ボタンサイズなど強制的に60％幅に指定*/
#wide_60percent{
	width:60% !important;
}

/*ボタンサイズなど強制的に50％幅に指定（PC表示時のみ）*/
@media screen and (min-width: 768px){
	#wide_50percent{
		width:50% !important;
	}
}
/*
#################################
投稿リスト表示関連 【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;
  }

}

/*
#################################
テーブルデザイン（概要・沿革など）
#################################
*/
/* original-table01=1列目のスタイル */
.original-table01 tr td:nth-of-type(1){
	text-align:center;
	background-color:#ccc;
	font-weight:bold !important;
	font-size:14px;
	width:15% !important;
}
 
/* original-table01=2列目のスタイル */
.original-table01 tr td:nth-of-type(2){
		font-size:14px;
}

/* original-table02=1列目のスタイル */
.original-table02 tr td:nth-of-type(1){
	text-align:center;
	font-weight:bold !important;
	font-size:14px;
	width:15% !important;
}
 
/* original-table02=2列目のスタイル */
.original-table02 tr td:nth-of-type(2){
	font-size:14px;
	font-weight:bold !important;
	width:85% !important;
	text-align:right　!important;
}


/*
#################################
変則タイトルデザイン
#################################
*/
/* H2を小見出しに利用 */
.tit-h2-20px-border{
	border-bottom:1px solid #333 !important;
	letter-spacing:5;
}
.tit-h2-20px-border h2{
	font-size:20px !important;
}

/*
#################################
blogエレメントのグリッド表示の際の画像/文字サイズデザイン
#################################
*/
/* トップページのBlog-Grid表示：画像サイズの高さを揃える */
/* デフォルトでは、アイキャッチ画像の幅固定で高さは可変します */
/* Blogエレメントにclass="top-blog-grid"で以下を指定します */
.top-blog-grid .fusion-image-wrapper img{
  width: 180px;
  height: 240px;
  object-fit: cover;
}
@media screen and (max-width: 768px){
	.top-blog-grid h2{
		font-size:18px !important;
		font-weight:normal !important;
		font-family: "Noto Sans JP", "Arial", Gadget, sans-serif !important;
	}
	.top-blog-grid .fusion-post-content-wrapper{
		padding-bottom:5px !important;
	}
}
/* お知らせ一覧のGrid表示デザイン01 */
.news-bloggrid-feature .fusion-post-content-wrapper{
	padding-top:30px !important;
	padding-bottom:10px !important;
}
.news-bloggrid h2{
	font-size:20px !important;
}

/* お知らせ一覧のGrid表示デザイン02 */
.news-bloggrid .fusion-post-content-wrapper{
	padding-top:15px !important;
	padding-bottom:10px !important;
}
.news-bloggrid h2{
	font-size:20px !important;
}

/* お知らせ一覧のGrid表示デザイン03 */
.news-bloggrid-lineup .fusion-post-content-wrapper{
	padding-top:10px !important;
	padding-bottom:10px !important;
}

.news-bloggrid-feature h2{
	margin-top:-10px !important
}

.news-bloggrid-lineup h2{
	font-size:16px !important;
}

.news-bloggrid-lineup img{
  width: 180px;
  height: 200px;
  object-fit: cover;
}

@media screen and (max-width: 768px){
	.news-bloggrid-feature h2{
		font-size:18px !important;
	}

	.news-bloggrid-lineup h2{
		font-size:18px !important;
	}

	.news-bloggrid h2{
		font-size:18px !important;
	}
}

/*
#################################
デバイス毎にカラム装飾表の罫線を表示非表示
#################################
*/

@media screen and (min-width: 768px){
.border-right-pc {
border-right:1px solid #ccc !important;
	}
}

@media screen and (max-width: 768px){
	h6{
		letter-spacing:0 !important;
	}
	.mobile-titles01 h2{
		font-size:20px !important;
	}
	.mobile-titles01 h4{
		font-size:20px !important;
	}
	.mobile-titles02 h2{
		font-size:28px !important;
	}
	.mobile-fullspan-button{
		width:100% !important;
	}
	.mobile-tit-01 h2{
		text-align:left !important;
		font-size:1.75em !important;
		line-height:1.4 !important;
	}
	.mobile-tit-01 p{
		text-align:left !important;
		line-height:1.4 !important;
	}
	.full-wide-column-mobilemargin{
		padding-left:30px !important;
		padding-right:30px !important;
	}
	.recruit-footer　h2{
		font-size:24px !important;
		color:#fff;
	}
}