@charset "UTF-8";

/* ===============================
	共通スタイル
=============================== */
/* カラー */
.bg-white {
	background-color: #fff;
}

/* ボーダー */
.bdr-bk {
	border: solid 1px #000;
}

/* マージン */
.mx-auto {
	margin-inline: auto;
}

.mt-0-5em {
	margin-top: 0.5em;
}

.mt-1em {
	margin-top: 1em;
}

.mt-2-5em {
	margin-top: 2.5em;
}

/* フォント */
.font-caption {
	font-size: 1.2rem;
	line-height: 1.5;
}

.font-s {
	font-size: 1.4rem;
}

.font-normal {
	font-weight: 400;
}

.font-medium {
	font-weight: 500;
}

.font-bold {
	font-weight: 700;
}

/* テキスト */
.text-center {
	text-align: center;
}

/* もっとクックNOTE */
.motcook-note {
	margin-bottom: var(--margin-xlarge);
	padding: 1em 1.5em;
}

/* コラム */
.column {
	margin-top: var(--margin-xlarge);
}

.column-container {
	position: relative;
	background: var(--white-gray);
	padding: 12% 6% 12%;
}

.column-icon {
	font-weight: 700;
	color: #fff;
	background-color: #000;
	border-radius: 50px;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.4rem;
	padding: 0.4em 2.4em;
}

.column-title-wrap {
	text-align: center;
	padding-bottom: 0.4rem;
	margin-inline: auto;
}

.column-title {
	font-size: 1.6rem;
	line-height: 2.2;
	border-bottom: 2px dotted #000;
	padding-bottom: 3px;
}

/* コラム：スライダー */
.column .swiper-button-disabled {
	display: none;
}

.column .btn-swiper-prev,
.column .btn-swiper-next {
	position: absolute;
	top: 45%;
	z-index: 2;
	inline-size: 30px;
	block-size: auto;
	aspect-ratio: 19 / 22;
	background: url(/assets/common/images/chevron-right-solid.svg) no-repeat center center/contain;
	cursor: pointer;
}

.column .btn-swiper-prev {
	margin-left: 0;
}

.column .btn-swiper-next {
	right: 0;
	left: auto;
	margin-left: 0;
}

/* コラム：スライダーサムネイル */
.column .swiper-thumbs {
	display: flex;
	flex-wrap: wrap;
}

.column .swiper-thumbs>li {
	inline-size: calc(90% / 6);
}

/* コラム：プロフィール */
.column-prof {
	padding: 1.5em;
	border: solid 1px #000;
}

.column-point-item .font-bold {
	font-size: 1.8rem;
	display: grid;
	place-items: center;
}

.column-point-item :last-child {
	font-size: 1.4rem;
}

/* セクション */
.img-container .font-caption {
	margin-top: 0.5em;
}

/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {

	/* 最大幅 */
	.lm-max-il-s {
		max-inline-size: 48rem;
	}

	/* もっとクックNOTE */
	.motcook-note {
		font-size: 1.4rem;
	}

	/* コラム */
	.column-container {
		font-size: 1.5rem;
	}

	/* コラム：スライダー */
	.column .btn-swiper-prev,
	.column .btn-swiper-next {
		top: 35%;
	}

	/* コラム：スライダーサムネイル */
	.column .swiper-thumbs>li {
		inline-size: calc(97% / 4);
	}

	/* コラム：プロフィール */
	.column-point-item:not(:first-child) {
		margin-top: 3rem;
	}

	.column-point-item .font-bold {
		padding: 0.5em;
	}
}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {

	/* フレックスコンテナ：ハーフ */
	.flex-half {
		justify-content: space-between;
	}

	.flex-half>.flex-item {
		width: 47.5%;
	}

	.flex-half>.flex-item:not(:nth-child(-n+2)) {
		margin-top: 7rem;
	}

	/* コラム */
	.column-container {
		padding: 3em 3em 3em;
	}

	.column-icon {
		font-size: 1.6rem;
		padding: 0.4em 2.5em;
	}

	.column-title {
		font-size: 2rem;
		padding-bottom: 4px;
	}

	/* コラム・スライドショー */
	.column .swiper-thumbs {
		justify-content: center;
	}

	/* コラム：スライダー */
	.column .btn-swiper-prev,
	.column .btn-swiper-next {
		inline-size: 50px;
	}

	/* コラム：プロフィール */
	.column-prof .flex-item:first-child {
		inline-size: 26.5%;
	}

	.column-prof .flex-item:last-child {
		flex: 1;
		margin-left: 3.5%;
	}

	.column-point {
		display: flex;
		justify-content: space-between;
	}

	.column-point-item {
		inline-size: 30%;
	}

	.column-point-item .font-bold {
		min-block-size: 4em;
	}

	/* セクション */
	.img-container .font-caption {
		margin-top: 1em;
	}
}

/* ====================================
	ホバーが有効な環境のみ
===================================== */
@media (hover:hover) and (pointer: fine) {}