/**
 * ACFブロックのスタイル。
 *
 * ブロックごとに区切って並べる。1カラム／2カラムセクションのブロックは
 * 未使用のため削除した（移行後の本文でも過去の版でも使われていなかった）。
 */

/* ----------------------------------------------------------------------
 製品情報リスト（product-cards）
 box全体がリンクのため、box_item のどこにhoverしても画像を減光する
---------------------------------------------------------------------- */
.hubdb_list .box_item:hover .box_img img {
	opacity: 0.6;
}

/* ----------------------------------------------------------------------
 事例カード（case-cards）
---------------------------------------------------------------------- */
.case-cards {
	margin-top: 40px;
}

.case-cards .item {
	max-width: 50%;
	background-color: #f5f5f5;
	padding: 15px 15px 5px;
	margin-right: 2% !important;
	width: 45%;
	margin-bottom: 20px;
	line-height: 1.6;
}

.case-cards a {
	color: #333;
	transition: transform 0.3s;
}

.case-cards .item a:hover {
	opacity: 0.8;
}

.case-cards .item > a > p,
.case-cards .item > p {
	font-size: 14px;
}

.case-cards .item-blc {
	display: flex;
	align-items: center;
}

.case-cards .item-blc .img-left {
	width: 55%;
	margin-right: 15px;
	overflow: hidden;
	position: relative;
}

.case-cards .item-blc .img-left img {
	width: 100%;
	height: auto;
	display: block;
}

.case-cards .item a:hover .img-left img {
	transform: scale(1.1);
	transition: transform 0.3s;
}

.case-cards .item-blc .item-tag {
	color: #fff;
	background-color: #949494;
	padding: 1px 15px 3px;
	border-radius: 5px;
	font-size: 14px;
	margin-bottom: 5px;
	width: fit-content;
}

.case-cards .item-blc .inner-right p {
	font-weight: 700;
}

@media screen and (max-width: 1100px) {
	.case-cards .item {
		width: 44%;
	}
}

@media screen and (max-width: 832px) {
	.case-cards .item {
		width: 43%;
	}
}

@media screen and (max-width: 667px) {
	.case-cards .item-blc {
		flex-wrap: wrap;
	}

	.case-cards .item {
		width: 100%;
		max-width: 100%;
	}

	.case-cards .item-blc .img-left {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
}

/* ----------------------------------------------------------------------
 テキスト2カラム（product-columns）
 見出しはPCでは下線なし（md-ttl の自動下線を打ち消す）
---------------------------------------------------------------------- */
.product-cols .md-ttl {
	padding-bottom: 0;
}

.product-cols .md-ttl::after {
	content: none;
}

/* 幅・罫線は `.product-cols`（ブロック）だけでなく、本文にHTMLで書かれた
   `.flex-blc > .flex-item` にも効かせる（`.flex-item` はこの2カラム以外に
   使われていない）。 */
@media screen and (min-width: 980px) {
	.flex-blc .flex-item {
		width: 45%;
		padding: 0 20px;
	}

	.flex-blc .flex-item:not(:last-child) {
		border-right: 1px solid #d4d4d4;
	}
}

@media screen and (min-width: 1125px) {
	.flex-blc .flex-item {
		padding: 0 25px;
	}
}

@media screen and (max-width: 980px) {
	.flex-blc .flex-item {
		width: 100%;
		margin-right: auto;
	}

	.product-cols h3.md-ttl,
	.lp-pageWrap #product h3.md-ttl {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: 30px;
	}

	.product-cols h3.md-ttl::before,
	.product-cols h3.md-ttl::after {
		border-top: 2px solid;
		content: "";
		width: 12px;
		height: 0;
		position: static;
		background-color: transparent;
		transform: none;
	}
}

/* ----------------------------------------------------------------------
 Googleマップボタン

 出どころは2つあるが見た目は同じものなので、ここ1か所で定義する:
 - acf/company-info ブロックの住所セル（アイコンはインラインSVG）
 - 取材ページの本文にそのまま入っている表（アイコンは <img>）
 `.map` だけだと当たり判定が広すぎるため、必ず `.gg-map` の内側に限定する。
---------------------------------------------------------------------- */
.gg-map {
	position: relative;
}

/* セルの高さに関係なく縦中央へ置く（`bottom` の決め打ちだと、住所が2行の
   セルでボタンが上に寄って見える）。 */
.gg-map .map {
	margin-left: 34px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.gg-map .map svg,
.gg-map .map img {
	margin-right: 10px;
	margin-bottom: -4px;
}

.gg-map .map a {
	background-color: #379b05;
	color: #fff;
	padding: 10px 30px;
	border-radius: 5px;
	display: inline-block;
	transition: background-color 0.2s ease;
}

.gg-map .map a:hover,
.gg-map .map a:focus {
	background-color: #2f8504;
	color: #fff;
}

@media screen and (min-width: 993px) and (max-width: 1280px) {
	.gg-map .map {
		display: block;
		position: relative;
		top: auto;
		transform: none;
		margin: 30px 0 0;
	}

	.gg-map .map a {
		padding: 10px;
		font-size: 12px;
	}
}

@media screen and (max-width: 767px) {
	.gg-map .map svg,
	.gg-map .map img {
		width: 10px !important;
	}

	.gg-map .map {
		position: initial;
		display: block;
		top: auto;
		transform: none;
		margin: 10px 0 10px 0;
	}
}

/* ----------------------------------------------------------------------
 ヒーロー（hero）
 LPページのヒーローバンド。余白・文字サイズ等のページ固有の調整は
 各ページの「ページ設定 → ヘッダーHTML」のCSSで上書きする
---------------------------------------------------------------------- */
.Hero {
	padding: 30px 0;
	background-position: bottom center;
	background-size: cover;
}

.Hero.has-bg {
	padding: 110px 0;
}

.Hero .Wrap--narrow {
	max-width: 1060px;
	width: 90%;
	margin: auto;
}

/* 見出しの余白は各ページのCSSが決めていて、既定は0。
   販売店（.Hero--dealer）・製品紹介（.Hero--product）・取材
   （.hero-interview）は interview.css でそれぞれの値を上書きする。
   以前ここに書いていた `0 0 0.5em` はどのページにも無い値で、製品情報の
   下層ページで見出しと緑罫線の間が18px広がっていた。 */
.Hero .Wrap--narrow h1 {
	font-size: 36px;
	line-height: 130%;
	margin: 0;
}

.Hero.has-bg .Wrap--narrow {
	color: #fff;
}

.Hero-rule {
	border: none;
	border-top: 2px solid #379b05;
	margin-top: 30px;
}

.Hero:not(.has-bg) .Hero-subtitle {
	color: #333;
}

.Hero .Wrap--narrow .interview {
	border-bottom: 1px solid #5a718f;
	padding-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.Hero .Wrap--narrow .interview .left {
	font-size: 16px;
	line-height: 160%;
}

.Hero .Wrap--narrow .interview .right {
	font-size: 70px;
	opacity: 0.3;
}

.Hero .Wrap--narrow .company {
	font-size: 24px;
	font-weight: 700;
	line-height: 130%;
	margin-top: 60px;
}

.Hero .Wrap--narrow .name {
	font-size: 24px;
	line-height: 110%;
	margin-top: 12px;
}

.Hero .Wrap--narrow .name span {
	font-size: 16px;
}

@media screen and (max-width: 767px) {
	.Hero {
		padding: 2em 0 4em;
	}

	.Hero .Wrap--narrow h1 {
		font-size: 26px;
		margin: 0.5em 0;
	}

	.Hero .Wrap--narrow .interview .right {
		font-size: 50px;
	}

	.Hero .Wrap--narrow .company {
		font-size: 22px;
		margin-top: 20px;
	}
}

/* ----------------------------------------------------------------------
 フォームセクション（form-section）
 紹介ボックス（.p-box-white）の装飾はここで持つ
---------------------------------------------------------------------- */
.form-section .p-box-white {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 20px 24px;
}

/* ----------------------------------------------------------------------
 LP 2カラムレイアウト
 本文幅だけを変え、ヘッダーは1カラムLPと共通にする
---------------------------------------------------------------------- */
#main_contents.lp_page #main_col {
	width: auto;
	max-width: 1130px;
	margin: 0 auto;
}

@media screen and (min-width: 767px) {
	#main_contents.lp_page {
		padding: 70px 20px 90px;
	}
}

/* LPヒーロー（page_image_header.type2）下の margin-bottom:25px は
   #main_contents の上paddingと二重になるため打ち消す */
#page_image_header.type2 {
	margin-bottom: 0;
}

/* 2カラムLP（/farmland-area-conversion-guide）の枠（#main_col 1130px と
   上下パディング）。.lp_page は2カラムLPだけが使うクラス。 */
#main_contents.lp_page #main_col {
	width: 1130px;
	max-width: 100%;
}

@media screen and (min-width: 767px) {
	#main_contents.lp_page {
		padding: 70px 20px 90px;
	}

	#main_contents.lp_page .lp_free_space {
		padding-bottom: 70px;
	}
}

/* 左カラムの見出し余白。modules.css の 32px 0 が、テーマ側のより詳細度の
   高い h2 指定（上40px）に負けるので、同じ詳細度で 32px に戻す */
.lp_content .post_content .form-section .left-column h2 {
	margin: 32px 0;
}

/* フォーム説明（h3・中央寄せ） */
.form-wrap h3.form-desc {
	text-align: center;
}

/* ----------------------------------------------------------------------
 ボタンブロック（site-button）
---------------------------------------------------------------------- */
.site_button_block {
	margin: 40px 0;
}

/* ボタン型のCTA（cta 投稿タイプ）。ボタン自体の見た目は
   generic/design.css の .q_custom_button を使う。 */
.cta_button_block {
	margin: 40px 0;
}

/* ----------------------------------------------------------------------
 特集記事カード（special-cards）のロゴ無しカード
 modules.css の `.special_article_company` は「ロゴ 52px + 会社名」の2列固定で、
 ロゴが無いと会社名が52pxの列に入って数文字ずつ折り返してしまう。
 ロゴが無いときは1列にする。
---------------------------------------------------------------------- */
.special_article_company:not(:has(img)) {
	grid-template-columns: 1fr;
}