@charset "UTF-8";
/* ==========================================================================
   実写真の表示用スタイル（愛佳優品）
   写真の縦横比がバラバラなため、imgではなくbackground-imageで統一表示する
   ========================================================================== */

/* 共通：背景写真ボックス */
.bg-photo {
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* 写真の定義（パスはこのCSSファイルからの相対） */
.ph-ume     { background-image: url(../img/web/S__8290319_0.jpg); } /* 紅梅の盆栽圃場 */
.ph-pet     { background-image: url(../img/web/S__8290320_0.jpg); } /* ペット用品の生産ライン */
.ph-display { background-image: url(../img/web/S__8290331_0.jpg); } /* 多彩な樹種の盆栽 */
.ph-trade   { background-image: url(../img/web/S__8290321_0.jpg); } /* 輸出コンテナ */
.ph-farm    { background-image: url(../img/web/S__8290326_0.jpg); } /* 広大な生産圃場 */
.ph-hero1   { background-image: url(../img/web/23347620_m.jpg); } /* 主役: 家族と愛犬（草原・青空） */
.ph-hero2   { background-image: url(../img/web/23347662_m.jpg); } /* 主役: 家族と愛犬（座り・青空） */
.ph-petlife { background-image: url(../img/web/30519696_m.jpg); } /* 犬猫とペット用品 */

/* ヒーロー写真（トップ） */
.hero-media .bg-photo {
	aspect-ratio: 4 / 3;
}

/* 事業カードの写真（.service-imageのdiv版） */
div.service-image {
	aspect-ratio: 4 / 3;
}

/* アクセスの写真（会社概要） */
.access-photo .bg-photo {
	aspect-ratio: 2 / 1;
	border: 1px solid var(--color-line);
}

/* 事業紹介ページの写真（.access-layout流用） */
.access-image .bg-photo {
	aspect-ratio: 10 / 7;
}

/* トップ：事業紹介への誘導ボタン */
.service-more {
	text-align: center;
	margin-top: 48px;
}

/* ------------------------------------------------------------
   レイアウト調整
------------------------------------------------------------ */

/* スマホ専用の改行（PCでは改行しない） */
.sp-only {
	display: none;
}

@media (max-width: 900px) {
	.sp-only {
		display: inline;
	}
}

/* ヒーロー下の実績帯を廃止したため、下側に余白を持たせる */
.hero {
	padding-bottom: 88px;
}

/* 代表挨拶：写真を廃止したため本文を1カラムで表示 */
.greeting-layout {
	grid-template-columns: 1fr;
	max-width: 860px;
}

/* アクセス：Googleマップを大きく見せる */
.access-layout {
	grid-template-columns: 1.4fr 1fr;
}

/* Googleマップ埋め込み枠（比率を固定してレスポンシブ対応） */
.map-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--color-line);
	overflow: hidden;
}

.map-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 900px) {
	.hero {
		padding-bottom: 56px;
	}

	.access-layout {
		grid-template-columns: 1fr;
	}

	.map-frame {
		aspect-ratio: 4 / 3;
	}
}

/* ------------------------------------------------------------
   事業紹介ページ：事業ブロックが縦に続くため、各セクションの
   下余白を詰めて間延びを防ぐ
------------------------------------------------------------ */
.page-service .section {
	padding-bottom: 48px;
}

/* 続くセクションの上余白も少し詰める */
.page-service .section + .section {
	padding-top: 72px;
}

@media (max-width: 900px) {
	.page-service .section {
		padding-bottom: 32px;
	}

	.page-service .section + .section {
		padding-top: 48px;
	}
}