@charset "UTF-8";

/* ===============================
	共通スタイル
=============================== */

/* サイズ */
.il-fit {
	inline-size: fit-content;
}

/* カラー */
.bg-white {
	background-color: #fff;
}

.color-caption {
	color: var(--cyan);
}

/* ライン */
.line-gray {
	border-top: solid 1px var(--light-gray);
}

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

.border-radius-5 {
	border-radius: 5px;
}

.border-radius-10 {
	border-radius: 10px;
}

.border-radius-15 {
	border-radius: 15px;
}

.border-radius-20 {
	border-radius: 20px;
}

.border-radius-25 {
	border-radius: 25px;
}

.border-radius-30 {
	border-radius: 30px;
}

.border-radius-50 {
	border-radius: 50px;
}

/* マージン */
.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;
}

/* 動画 */
.video {
	position: relative;
	inline-size: 100%;
	padding-top: 56.25%;
	overflow: hidden;
}

/* コラム */
.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 .link-video-popup {
	background-color: #fff;
}

.video-container {
	margin-top: 0;
}

.thumb-structure {
	background: url(images/bnr-movie01.jpg) no-repeat center center / cover;
}

.thumb-comment {
	background: url(images/bnr-movie02.jpg) no-repeat center center / cover;
}

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

/* ====================================
	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;
	}

}

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