@charset "UTF-8";
/* ==========================================================================
   下層ページ共通(子テーマの page-mg-*.php のときだけ読み込む)
   お問い合わせのフォームは css/contact.css
   ========================================================================== */


/* 共通
   ========================================================================== */
.mg-page {
	padding-bottom: 150px;
}
.mg-page img {
	display: block;
	max-width: 100%;
	height: auto;
}
/* :where で詳細度を0にし、各要素の margin 指定を優先させる */
:where(.mg-page) p {
	margin: 0;
}

@media (max-width: 1199px) {
	.mg-page {
		padding-bottom: 120px;
	}
}


/* ページ冒頭
   ========================================================================== */
.mg-page-head {
	padding: 60px 0;
}
.mg-page-head__title {
	display: flex;
	justify-content: center;
}
.mg-page-title {
	margin: 0;
	writing-mode: vertical-rl;
	height: max-content;
	font-size: 40px;
	font-weight: 600;
	line-height: 40px;
	letter-spacing: 10px;
	color: var(--mg-color-text);
}
/* 2列以上に分けた見出し */
.mg-page-title__line {
	display: block;
}
.mg-page-title__line + .mg-page-title__line {
	margin-block-start: 16px; /* 縦書きでは前の列との間になる */
}

.mg-page-hero {
	height: 340px;
	margin-top: 60px;
}
/* インライン要素のままだと高さの指定が効かないため */
.mg-page-hero picture {
	display: block;
}
.mg-page-hero picture,
.mg-page .mg-page-hero img,
.mg-page-hero .mg-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.mg-page-head {
		padding-bottom: 50px;
	}
	.mg-page-title {
		font-size: 24px;
		line-height: 24px;
		letter-spacing: 6px;
	}
	.mg-page-title__line + .mg-page-title__line {
		margin-block-start: 14px;
	}
	.mg-page-hero {
		max-width: var(--mg-sp-max);
		height: auto;
		aspect-ratio: 375 / 280;
		margin: 50px auto 0;
	}
}
@media (min-width: 601px) and (max-width: 768px) {
	.mg-page-hero {
		max-width: none;
	}
}


/* パンくず
   ========================================================================== */
/* パンくず(親テーマ)の下は、パンくずの下の余白だけにする */
.mg-page-head--crumb {
	padding-top: 0;
}


/* 情報表(見出し+内容の行)
   ========================================================================== */
.mg-info-table {
	margin: 0;
	border-top: 1px solid var(--mg-color-line2);
	font-size: 16px;
	line-height: 28.8px;
}
.mg-info-table__row {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	padding: 24px 0;
	border-bottom: 1px solid var(--mg-color-line2);
}
/* 見出しは改行しない。文字が長いときは幅が広がる */
.mg-info-table__label {
	flex-shrink: 0;
	min-width: 78px;
	margin: 0;
	white-space: nowrap;
	color: var(--mg-color-main);
	font-weight: 500;
	letter-spacing: var(--mg-ls);
}
.mg-info-table__value {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-weight: 400;
}
.mg-info-table__value span {
	display: block;
}

@media (max-width: 768px) {
	.mg-info-table {
		font-size: 14px;
		line-height: 25.2px;
	}
	.mg-info-table__row {
		gap: 20px;
		padding: 20px 0;
	}
	.mg-info-table__label {
		min-width: 61px;
	}
}


/* アクセス
   ========================================================================== */
.mg-access__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 732px;
	align-items: start;
}
.mg-access__logo {
	width: 260px;
}
.mg-access__address {
	margin-top: 30px;
	font-size: 16px;
	font-style: normal;
	line-height: 28.8px;
}
.mg-access__address p + p {
	margin-top: 4px;
}
.mg-access__address .mg-access__tel {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 30px;
}
.mg-access__tel-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	padding: 5px 0;
	border: 1px solid var(--mg-color-sub);
	color: var(--mg-color-main);
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
}
.mg-access__tel-number {
	color: var(--mg-color-main);
	font-size: 30px;
	font-weight: 600;
	line-height: 30px;
	transition: opacity 0.25s ease;
}
.mg-access__tel-number:hover,
.mg-access__tel-number:focus-visible {
	color: var(--mg-color-main);
	opacity: 0.8;
}
.mg-access__map {
	height: 560px;
	margin-top: 60px;
}

@media (max-width: 1199px) {
	.mg-access__inner {
		display: block;
	}
	.mg-access__info {
		text-align: center;
	}
	.mg-access__logo {
		width: 200px;
	}
	.mg-access__address {
		margin-top: 24px;
		font-size: 14px;
		line-height: 25.2px;
	}
	.mg-access__address .mg-access__tel {
		justify-content: center;
		margin-top: 24px;
	}
	.mg-access__tel-badge {
		font-size: 12px;
		line-height: 12px;
	}
	.mg-access__tel-number {
		font-size: 24px;
	}
	.mg-access__table {
		margin-top: 50px;
		text-align: left;
	}
	.mg-access__map {
		width: calc(100% + var(--mg-gutter-sp) * 2);
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 50px calc(var(--mg-gutter-sp) * -1) 0;
	}
}
@media (min-width: 601px) and (max-width: 1199px) {
	.mg-access__map {
		width: 100%;
		margin-inline: 0;
	}
}


/* リード文
   ========================================================================== */
.mg-page-lead {
	font-size: 18px;
	line-height: 32.4px;
	letter-spacing: var(--mg-ls);
	text-align: center;
}
.mg-page-lead span {
	display: block;
}

@media (max-width: 1199px) {
	.mg-page-lead {
		font-size: 14px;
		line-height: 25.2px;
	}
}


/* 商品紹介
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	html:has(.mg-page--products) {
		scroll-behavior: smooth;
	}
}

/* 移動ナビ ----------------------------------------------------------------- */
.mg-anchor-nav {
	margin-top: 60px;
}
.mg-anchor-nav__list {
	display: flex;
	justify-content: center;
	gap: 60px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mg-anchor-nav__list > li {
	flex: 0 1 240px;
	min-width: 0;
}
.mg-anchor-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--mg-color-main);
	color: var(--mg-color-text);
	font-size: 20px;
	font-weight: 600;
	line-height: 36px;
	letter-spacing: var(--mg-ls);
	transition: opacity 0.25s ease;
}
.mg-anchor-nav__link:hover,
.mg-anchor-nav__link:focus-visible {
	color: var(--mg-color-text);
	opacity: 0.7;
}
.mg-anchor-nav__icon {
	flex-shrink: 0;
	width: 16px;
	height: 10px;
	color: var(--mg-color-main);
}

/* カテゴリ ---------------------------------------------------------------- */
.mg-products-cat {
	display: grid;
	grid-template-columns: 102px minmax(0, 1fr);
	align-items: start;
	margin-top: 80px;
	scroll-margin-top: 40px;
}
.mg-product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mg-product-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mg-product-card__img {
	aspect-ratio: 1 / 1;
}
.mg-page .mg-product-card__img img,
.mg-product-card__img .mg-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mg-product-card__name {
	margin: 0;
	color: var(--mg-color-text);
	font-size: 18px;
	font-weight: 500;
	line-height: 32.4px;
	letter-spacing: var(--mg-ls);
}
.mg-product-card__price {
	font-size: 20px;
	font-weight: 600;
	line-height: 28.8px;
	letter-spacing: 1.6px;
}
.mg-product-card__tax {
	font-size: 14px;
}
.mg-product-card__img--link {
	display: block;
	transition: opacity 0.25s ease;
}
.mg-product-card__img--link:hover {
	opacity: 0.8;
}
/* 購入ページへのボタン(.mg-btn を小さくしたもの)。同じ行のカードで位置をそろえるため下端に寄せる */
.mg-product-card__price {
	margin-bottom: 14px;
}
.mg-product-card__buy {
	align-self: flex-start;
	margin-top: auto;
	padding: 12px 20px;
	font-size: 16px;
	line-height: 16px;
}
.mg-product-card__buy .mg-btn__icon {
	width: 16px;
	height: 16px;
}

/* オンラインショップ案内 --------------------------------------------------- */
.mg-online {
	margin-top: 80px;
}
.mg-online__title {
	margin: 0;
	color: var(--mg-color-text);
	font-size: 24px;
	font-weight: 600;
	line-height: 43.2px;
	letter-spacing: var(--mg-ls);
}
.mg-online__banner {
	position: relative;
	height: 316px;
	margin-top: 20px;
}
.mg-online__media {
	position: absolute;
	inset: 0;
}
.mg-page .mg-online__media img,
.mg-online__media .mg-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 写真に重ねるグラデーション */
.mg-online__gradation {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 100%;
}
.mg-online__gradation picture,
.mg-page .mg-online__gradation img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}
.mg-online__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	padding: 60px;
}
.mg-online__catch {
	color: var(--mg-color-text);
	font-size: 30px;
	font-weight: 600;
	line-height: 54px;
	letter-spacing: var(--mg-ls);
}
.mg-online__catch > span {
	display: block;
}
.mg-online__accent {
	color: var(--mg-color-main);
}

/* 店舗案内(トップと共通の部品)。フッターまでの余白は .mg-page に任せる */
.mg-page .mg-shop {
	margin-top: 120px;
	padding-bottom: 0;
}

/* 店舗案内は style.css の店舗案内と同じ幅で切り替える */
@media (max-width: 1199px) {
	.mg-anchor-nav {
		margin-top: 50px;
	}
	.mg-anchor-nav__list {
		gap: 20px;
	}
	.mg-anchor-nav__link {
		font-size: 16px;
		line-height: 28.8px;
	}
	.mg-anchor-nav__icon {
		width: 13px;
		height: 8px;
	}

	.mg-products-cat {
		display: block;
		scroll-margin-top: calc(var(--mg-header-h-sp) + 20px);
	}
	.mg-products-cat__title {
		margin: 0 auto;
	}
	.mg-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 20px;
		margin-top: 40px;
	}
	.mg-product-card {
		gap: 8px;
	}
	.mg-product-card__name {
		font-size: 14px;
		line-height: 25.2px;
	}
	.mg-product-card__price {
		font-size: 18px;
	}
	.mg-product-card__tax {
		font-size: 12px;
	}
	/* 購入ページへのボタン(商品カードの文字と一緒に切り替える) */
	.mg-product-card__price {
		margin-bottom: 12px;
	}
	.mg-product-card__buy {
		font-size: 14px;
		line-height: 14px;
	}
	.mg-product-card__buy .mg-btn__icon {
		width: 14px;
		height: 14px;
	}

	.mg-page .mg-shop {
		margin-top: 100px;
	}
}
/* 狭い画面で移動ナビの文字が折り返さないよう、項目の間を詰める */
@media (max-width: 374px) {
	.mg-anchor-nav__list {
		gap: 10px;
	}
}
@media (max-width: 768px) {
	.mg-online__title {
		font-size: 18px;
		line-height: 32.4px;
	}
	.mg-online__banner {
		height: auto;
		aspect-ratio: 375 / 520;
		margin: 24px calc(var(--mg-gutter-sp) * -1) 0;
	}
	.mg-online__gradation {
		width: 100%;
		height: 55.77%;
	}
	.mg-online__body {
		align-items: center;
		gap: 30px;
		padding: 40px var(--mg-gutter-sp);
		text-align: center;
	}
	.mg-online__catch {
		font-size: 24px;
		line-height: 43.2px;
	}
}
@media (min-width: 601px) and (max-width: 1199px) {
	.mg-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 601px) and (max-width: 768px) {
	.mg-online__banner {
		margin-inline: 0;
	}
}