@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

.column-list{
	padding: 64px 0 120px;
	@media (width < 810px) {
		padding: 32px 0 80px;
	}
}

.column-list__catch{
	word-break: keep-all;
	font-family: var(--font_min);
	font-size: clamp(18px, -2.769px + 2.564vw, 28px);/*28~18(1200~810)*/
	font-weight: 500;
	color: #494544;
}

.column-list__container{
	margin-top: 56px;
	@media (width < 810px) {
		margin-top: 32px;
	}
}

.column-list__item{
	+.column-list__item{
		margin-top: 64px;
		@media (width < 810px) {
			margin-top: 32px;
		}
	}
}

.column-list__link{
	display: flex;
	background: #F8E6DA;
	color: #333;
	@media (width < 810px) {
		flex-direction: column;
	}
}

.column-list__inner{
	flex-shrink: 0;
	width: 55.38%;/*648/1170*/
	min-height: 400px;
	container-type: inline-size;
	position: relative;
	@media (width < 810px) {
		width: 100%;
		min-height: inherit;
		height: 60cqw;/*187/647*/
	}
	.triangle01{
		width: 28.9cqw;/*187/647*/
		mix-blend-mode: multiply;
		position: absolute;
		top: 0;
		right: 0;
	}
	.triangle02{
		width: 28.9cqw;/*187/647*/
		mix-blend-mode: multiply;
		position: absolute;
		bottom: 0;
		left: 0;
	}
}

.column-schedule{
	.column-list__link{
		background: #F8E6DA;
	}
	.column-list__inner{
		background: url("../../images/column/schedule_img.webp") center center/ cover no-repeat;
	}
}
.column-schedule__about{
	width: 49.9cqw;/*323/647*/
	position: absolute;
	top: 50%;
	right: 6.49cqw;/*42/647*/
	translate: 0 -50%;
}
.column-schedule__note{
	font-family: var(--font_min);
	font-size: clamp(8px, -0.308px + 1.026vw, 12px);/*12~8(1200~810)*/
	font-weight: 500;
	position: absolute;
	right: 1.24cqw;/*8/647*/
	bottom: 0.77cqw;/*5/647*/
}

.column-myhome{
	.column-list__link{
		background: #E4EBF6;
	}
	.column-list__inner{
		background: #bdd1e9;
		display: grid;
		place-content: center;
	}
	.column-list__btn__link{
		border-color: #90D3EC;
		color: #90D3EC;
		box-shadow: 4px 4px 0 #90D3EC;
		@media (width < 810px) {
			box-shadow: 2px 2px 0 #90D3EC;
		}
		&::after{
			background-image: url("../../images/column/btn_column_myhome.svg");
		}
	}
}
.column-myhome__about{
	width: 93.2cqw;/*603/647*/
}

.column-list__contents{
	padding: 32px;
	flex-grow: 1;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	@media (width < 810px) {
		width: 100%;
		padding: 20px;
	}
}
.column-list__ttl{
	word-break: keep-all;
	font-size: clamp(18px, -2.769px + 2.564vw, 28px);/*28~18(1200~810)*/
	font-weight: 700;
	line-height: 1.7;
	color: #040000;
	.txt_bg{
		padding: 0 0.2em;
		background: #fff;
		-webkit-box-decoration-break: clone;
    box-decoration-break: clone;
	}
}
.column-list__txt{
	font-size: clamp(15px, 8.769px + 0.769vw, 18px);/*18~15(1200~810)*/
	font-weight: 400;
	line-height: 1.6;
	margin-top: 24px;
	@media (width < 810px) {
		margin-top: 16px;
	}
}
.column-list__btn{
	margin-top: 32px;
	@media (width < 810px) {
		margin-top: 16px;
	}
}
.column-list__btn__link{
	display: inline-block;
	border: 2px solid #F7AD7C;
	border-radius: 12px;
	padding: 0.3em 2.6em 0.3em 0.8em;
	background: #fff;
	color: #F7AD7C;
	box-shadow: 4px 4px 0 #F7AD7C;
	font-size: clamp(18px, -2.769px + 2.564vw, 28px);/*28~18(1200~810)*/
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	position: relative;
	@media (width < 810px) {
		border-radius: 8px;
		box-shadow: 2px 2px 0 #F7AD7C;
	}
	&::after {
		content: "";
		display: inline-block;
		width: 1.2em;
		height: 1.2em;
		background: url("../../images/column/btn_column_schedule.svg") center bottom/ 100% auto no-repeat;
		position: absolute;
		top: 50%;
		right: 0.8em;
		translate: 0 -50%;
	}
	&:hover{
		text-decoration: none;
	}
}