@charset "UTF-8";

/* =========================================================
   メインビジュアル
========================================================= */
.mv {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 1;
	background: #000;
}

.mv__base {
	display: block;
	position: relative;
	z-index: 1;
	line-height: 0;
}

.mv__img {
	width: 100%;
	height: auto;
	display: block;
}

/* キャッチ画像 */
.mv__catch {
	position: absolute;
	top: 6%;
	left: 50%;
	transform: translateX(-50%);
	width: min(60%, 900px);
	height: auto;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	will-change: opacity;
}

/* PC時：2秒待機後 1.5秒フェードイン */
.mv__catch {
	animation: mvCatchFadeIn 1.5s ease 2s forwards;
}

@keyframes mvCatchFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* =========================================================
   SP時（〜810px）：横長MVを右端から左へパン
========================================================= */
@media screen and (max-width: 810px) {
	.mv {
		/* SP時のMV高さ：ウィンドウ幅より少し大きい程度 */
		height: calc(100vw + 10px);
		min-height: 340px;
		max-height: 80vh;
	}

	.mv__base {
		position: absolute;
		inset: 0;
		height: 100%;
		width: auto;
	}

	.mv__img {
		height: 100%;
		width: auto;
		max-width: none;
		/* JSで translateX を制御するため初期は右端表示 */
		display: block;
	}

	/* キャッチはJSでクラス付与後にフェードイン */
	.mv__catch {
		top: 1%;
		left: auto;
		right: 11%;
		width: 60%;
		transform: none;
		animation: none;
		opacity: 0;
		transition: opacity 1.5s ease;
	}

	.mv.is-catch-show .mv__catch {
		opacity: 1;
	}
}

/* =========================================================
   帯（メインビジュアル下のobi）：3列×2段グリッド
========================================================= */
.obi {
	position: relative;
	width: 100%;
	background-image: url('../images/top/obi_bg.webp');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	color: #fff;
	text-shadow: 0 0.125rem 0.281rem rgba(0, 0, 0, 0.65);
	padding: 0.75rem 1.25rem;
	box-sizing: border-box;
}

.obi__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.obi__row {
	display: grid;
	grid-template-columns: 1fr 0.7fr 1fr;
	align-items: stretch;
	gap: 0;
}

/* 上下段の境界線 */
.obi__row + .obi__row {
	border-top: 1px solid rgba(255, 255, 255, 0.45);
}

/* 列の縦罫線：obi__row境界線に触れないよう、上下にマージンを取る */
.obi__row .obi__cell + .obi__cell {
	position: relative;
}
.obi__row .obi__cell + .obi__cell::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.625rem;
	bottom: 0.625rem;
	width: 1px;
	background: rgba(255, 255, 255, 0.45);
}

.obi__cell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25em 0.5em;
	padding: 0.75rem 0.375rem;
	text-align: center;
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	line-height: 1.5;
	opacity: 0.95;
}

/* 乾太くんセル：左にテキスト2行、右に乾太くんロゴ */
.obi__cell--kanta {
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

/* JAセル：左に2行テキスト（中央揃え）、右に徒歩10分（縦中央） */
.obi__cell--ja {
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

/* 下揃えセル（敷地内平面駐車場 118% 用） */
.obi__cell--bottom {
	align-items: flex-end;
}

/* 縦並びテキストカラム */
.obi__cell__textcol {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	line-height: 1.25;
	gap: 0.125rem;
}

.obi__cell__textcol--center {
	align-items: center;
	text-align: center;
}

/* インライン横並びライン（数値+単位 等） */
.obi__cell__line {
	display: inline-flex;
	align-items: baseline;
	gap: 0.125em 0.25em;
}

.obi__kanta {
	display: inline-block;
	width: auto;
	height: 2.5rem;
	vertical-align: middle;
}

/* 文字spanクラス（rem基準） */
.obi__t--xxl { font-size: 2.25rem;   letter-spacing: 0.125em;   line-height: 1.1; }  /* 36px相当：最大見出し */
.obi__t--xl  { font-size: 2.5rem;    letter-spacing: -0.05em;   line-height: 1; }    /* 40px相当：数値強調 */
.obi__t--lg  { font-size: 1.75rem;   letter-spacing: 0.125em;   line-height: 1.2; }  /* 28px相当：主訴求 */
.obi__t--md  { font-size: 1.25rem;   letter-spacing: 0.0625em;  line-height: 1.4; }  /* 20px相当：中見出し */
.obi__t--sm  { font-size: 0.9375rem; letter-spacing: 0.0625em;  line-height: 1.5; }  /* 15px相当：説明 */
.obi__t--xs  { font-size: 0.75rem;   letter-spacing: 0.0625em;  line-height: 1.4; }  /* 12px相当：補助 */

@media screen and (max-width: 1170px) {
	.obi {
		background-image: url('../images/top/obi_bg_sp.webp');
		padding: 0.6rem 0.9375rem;
	}

	.obi__inner {
		gap: 0.5rem;
	}

	/* SP時は3列を1列に */
	.obi__row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	/* SPでは縦罫線を非表示にし、横の区切り線に置換 */
	.obi__row .obi__cell + .obi__cell {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.35);
		padding-top: 0.625rem;
	}
	.obi__row .obi__cell + .obi__cell::before {
		content: none;
	}

	.obi__cell {
		padding: 0.25rem 0.5rem;
		gap: 0.25em 0.5em;
		min-height: 4.5rem;
		flex-wrap: nowrap;
	}

	.obi__kanta {
		height: 3.25rem;
	}

	.obi__t--xxl { font-size: 2.625rem; }  /* 42px相当 */
	.obi__t--xl  { font-size: 2.125rem; }  /* 34px相当 */
	.obi__t--lg  { font-size: 1.625rem; }  /* 26px相当 */
	.obi__t--md  { font-size: 1.125rem; }  /* 18px相当 */
	.obi__t--sm  { font-size: 0.875rem; }  /* 14px相当 */
	.obi__t--xs  { font-size: 0.75rem; }   /* 12px相当 */

	/* SP時のみmdサイズに切り替えるユーティリティ */
	.obi__t--sp-md { font-size: 1.125rem; }
}

/* =========================================================
   merit-area / コンセプトカード3点（Concept・Location・Support）
========================================================= */
#merit-area.concept-section {
	padding: 5rem 1.25rem;
	background-color: #e8e4d9;
}

.concept-item {
	margin-bottom: 3rem;
}

.concept-item:last-child {
	margin-bottom: 0;
}

.concept-container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	overflow: visible;
}

.concept-container .main-visual {
	width: 60%;
	line-height: 0;
}

.concept-container .main-visual img {
	width: 100%;
	height: auto;
	display: block;
}

.concept-container .txtBox {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 45%;
	min-height: 65%;
	background: linear-gradient(135deg, #8a7755 0%, #735b3d 100%);
	color: #fff;
	padding: 2.5rem 1.5rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: box-shadow 0.5s, transform 0.5s;
	box-shadow: 0 0 0 rgba(120, 90, 60, 0);
	z-index: 2;
}

.concept-container .txtBox:hover {
	box-shadow: 0 0.3125rem 1.5625rem rgba(120, 90, 60, 0.45);
	transform: translateY(-52%);
	text-decoration: none;
}

.concept-container .txtBox dl {
	width: 100%;
	text-align: center;
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", serif;
	line-height: 1.4;
}

.concept-container .txtBox dt.engTxt {
	font-family: "EB Garamond", "Garamond", "Adobe Garamond Pro", "Noto Serif JP", serif;
	font-weight: 400;
	font-size: 3rem;
	letter-spacing: 0.08em;
	margin-bottom: 0.75rem;
}

.concept-container .txtBox dd {
	font-size: 1.375rem;
	letter-spacing: 0.05em;
	font-weight: 400;
}
.concept-container .txtBox dd span {
    display: block;
    font-size: 1.1rem;
    margin-top: 1rem;
}

.concept-container .txtBox .viewMore {
	display: block;
	margin: 1.25rem auto 0;
	padding: 0.25rem 1.5rem 0.5rem;
	font-family: "EB Garamond", "Garamond", "Adobe Garamond Pro", "Noto Serif JP", serif;
	font-size: 1.625rem;
	letter-spacing: 0.1em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
	width: fit-content;
	position: relative;
}

/* view more 下線の右端から左上45度に伸びる短い線（半矢印） */
.concept-container .txtBox .viewMore::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0.625rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.7);
	transform-origin: right bottom;
	transform: rotate(45deg);
}

/* 左右反転パターン（必要に応じてis-reverseクラス付与） */
.concept-item.is-reverse .concept-container .main-visual {
	margin-left: auto;
}

.concept-item.is-reverse .concept-container .txtBox {
	right: auto;
	left: 0;
}

/* SP対応 */
@media screen and (max-width: 810px) {
	#merit-area.concept-section {
		padding: 2rem 0.9375rem;
	}

	.concept-item,
	.concept-item.is-reverse {
		margin-bottom: 2.5rem;
	}

	.concept-container .main-visual,
	.concept-item.is-reverse .concept-container .main-visual {
		width: 100%;
		margin: 0;
	}

	.concept-container .txtBox,
	.concept-item.is-reverse .concept-container .txtBox {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		width: 90%;
		min-height: 0;
		margin: -1.5rem auto 0;
		transform: none;
		padding: 1.5rem 1rem;
	}

	.concept-container .txtBox:hover {
		transform: translateY(-0.375rem);
	}

	.concept-container .txtBox dt.engTxt {
		font-size: 2.25rem;
	}

	.concept-container .txtBox dd {
		font-size: 1.0625rem;
	}

	.concept-container .txtBox .viewMore {
		font-size: 1.25rem;
		margin-top: 1rem;
	}
}

.seller li:nth-child(2) {
    width: 35%;
}
.seller li:nth-child(1) {
    width: 30%;
}

@media screen and (max-width: 810px) {
	.seller {
        display: block;
        max-width: 380px;
        border-bottom: none;
    }
	.seller li {
        margin: 20px auto;
    }
	.seller li:nth-child(1) {
        width: 70%;
    }
	.seller li:nth-child(2) {
        width: 100%;
    }
	.seller h3 {
        font-size: 13px;
        text-align: center;
        margin-bottom: 0.5em;
    }
	#foot-nav ul li:first-child {
        background: linear-gradient(90deg, rgba(128, 108, 61, 1) 0%, rgba(201, 172, 99, 1) 100%);
    }
}