@charset "UTF-8";
/**
 * mogmogrecipe - About Page Styles
 *
 * page-about.php用のスタイル
 * クラス命名規則: mog-p-about__*
 */

/* ========================================
   Aboutページ - メインコンテナ
======================================== */

/* モバイル（～480px）: デフォルト */
.mog-p-about.l-inner {
	padding: 0;
	margin-top: 32px;
}

/* タブレット小（481px～767px） */
@media screen and (min-width: 481px) {
	.mog-p-about.l-inner {
		background: #FFFFFF;
		padding-left: clamp(10px, 10.42vw - 40px, 40px);
		padding-right: clamp(10px, 10.42vw - 40px, 40px);
	}
}

/* タブレット（768px～991px） */
@media screen and (min-width: 768px) {
	.mog-p-about.l-inner {
	}
}

/* デスクトップ（992px～） */
@media screen and (min-width: 992px) {
	.mog-p-about.l-inner {
	}
}


/* ========================================
   Aboutページ - シーンカード
======================================== */

/* シーンカードコンテナ */
.mog-p-about__scenes {
	display: grid;
	margin: 0 0 40px 0;
}

/* シーンカードアイテム */
.mog-p-about__scenes-item {
	background-color: #ffffff;
	border-radius: 0;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 10px solid #FEAC7D;
	border-bottom: 20px solid #FEAC7D;
}

@media screen and (min-width: 481px) {
	.mog-p-about__scenes-item {
		border-bottom: 10px solid #FEAC7D;
	}
}

.mog-p-about__scenes-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* シーン画像 */
.mog-p-about__scenes-item-image {
	width: 100%;
	aspect-ratio: 7 / 5;
	overflow: hidden;
	border-bottom: 10px solid #FEAC7D;
	position: relative;
}

.mog-p-about__scenes-item-image img {
	width: 100%;
	max-width: unset !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center center;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

/* シーンテキスト */
.mog-p-about__scenes-item-text {
	padding: 16px;
	font-size: 15px;
	line-height: 1.5;
}

/* ========================================
   Aboutページ - ボタン
======================================== */

/* シーンカード下のボタンエリア */
.mog-p-about__button {
	text-align: center;
	margin: 32px 0 0;
}

/* ボタンリンク */
.mog-p-about__button-link {
	border-radius: 9999px;
	text-align: center;
	display: inline-block;
	border: 1px solid var(--tcd-content-link-color);
	letter-spacing: -0.05em;
	width: 280px;
	padding: 16px;
	font-size: 16px;
	background: #FFFFFF;
}

.mog-p-about__button-link:hover {
	background-color: var(--tcd-content-link-color);
    color: #ffffff !important;
}

@media screen and (min-width: 481px) {
	.mog-p-about__button {
		margin: 48px 0 0;
	}
}


/* ========================================
   レスポンシブ対応
======================================== */

/* モバイル（～767px）: デフォルト - 1カラム */
.mog-p-about__scenes {
	grid-template-columns: 1fr;
	gap: 0;
}

@media screen and (min-width: 481px) {
	.mog-p-about__scenes {
		gap: 10px;
	}
}

/* タブレット（768px～991px）: 2カラム（4分割グリッドで余り調整） */
@media screen and (min-width: 768px) {
	.mog-p-about__scenes {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}

	/* 通常アイテムは2カラム分（= 2カラムレイアウト） */
	.mog-p-about__scenes-item {
		grid-column: span 2;
	}

	/* 最後の1つが余った場合（1,3,5,7...枚目）: 中央に1カラム幅 */
	.mog-p-about__scenes-item:last-child:nth-child(odd) {
		grid-column: 2 / span 2;
	}
}

/* デスクトップ（992px～）: 3カラム（6分割グリッドで余り調整） */
@media screen and (min-width: 992px) {
	.mog-p-about__scenes {
		grid-template-columns: repeat(6, 1fr);
		gap: 24px;
	}

	/* 通常アイテムは2カラム分（= 3カラムレイアウト） */
	.mog-p-about__scenes-item {
		grid-column: span 2;
	}

	/* 最後の1つが余った場合（1,4,7,10...枚目）: 中央に2カラム幅 */
	.mog-p-about__scenes-item:last-child:nth-child(3n+1) {
		grid-column: 2 / span 4;
	}

	/* 最後の2つが余った場合: それぞれ3カラム分で横並び */
	.mog-p-about__scenes-item:nth-last-child(2):nth-child(3n+1) {
		grid-column: 1 / span 3;
	}
	.mog-p-about__scenes-item:last-child:nth-child(3n+2) {
		grid-column: 4 / span 3;
	}
}