@charset "UTF-8";
/*----------------------------
column
----------------------------*/
/* marksdownにも使う共通エディタ読み込み
@import url(../../editor-style.css); */
#lv{
	& section{
		padding:0;
	}
}
.visual-bg{
	background:url(../images/column/visual-bg.png) no-repeat;
    background-size:cover;
    background-position: center;
}
.visual-bg:before{
    display:none;
}

.column_article p+h2{
    margin-top:3rem;
}
@media screen and (max-width: 767.98px){
	.article-list{
		& .ratio-29x35{
			aspect-ratio: 4 / 3;
		}
	}
	
}

.leadtxt div[data-type="column"]{
	.box{
		>*:last-child{
			margin-bottom: 0;
		}
		.h4{
			margin-bottom: 1em;
			span{
				position: relative;
				&:after{
					content: "";
					display: block;
					width: 100%;
					height: 50%;
					background: #ffe0cb;
					position: absolute;
					bottom: 20%;
					left: 0;
					z-index: -1;
				}
			}
		}
		figure{
			float: left;
			width: 32%;
			min-width: 250px;
		}
		.box_content:has(>figure),
		.box_content:has(>img){
			h4,
			p{
				float: right;
				width: calc(100% - 280px);
				max-width: 65%;
			}
		}
	}
}
@media screen and (max-width: 780px){
	.leadtxt div[data-type="column"]{
		.box{
			figure{
				margin-bottom: 1em;
			}
			.box_content:has(>figure),
			.box_content:has(>img){
				figure,
				h4,
				p{
					width: 100%;
					min-width: 0;
					max-width: none;
				}
			}
		}
	}
}

.column_article div[data-type="column"]{
	>*{
		margin-bottom: 1em;
		&:last-child{
			margin-bottom: 0;
		}
	}
	.tag{
		font-size: .9rem;
		ul{
			display: block;
			li{
				display: inline-block;
				border: 1px solid #000;
				border-radius: 100px;
				padding: 0 10px;
				margin: 0 5px 10px;
			}
		}
	}
	
	.companysearch_contact{
		border: 5px solid var(--my-light);
		margin-left: 0;
		margin-right: 0;
	}
	
	*+.section-subtitle3{
		margin-top: 2em;
	}
	
	.row:has(>dl.col-sm-4){
		padding-left: calc(var(--bs-gutter-x) * .5);
		padding-right: calc(var(--bs-gutter-x) * .5);
		>dl.col-sm-4{
			display: flex;
			flex-direction: column;
			border-left: 1px dashed #b2b2b2;
			&:last-child,
			&:nth-of-type(3n){
				border-right: 1px dashed #b2b2b2;
			}
			dt{
				order: 2;
				margin-bottom: .5em;
			}
			dd{
				order: 3;
				&:has(img){
					order: 1;
					figure{
						margin-bottom: 0;
					}
				}
			}
		}
	}
	
	.box.works{
		h4{
			margin-bottom: 1em;
			span{
				position: relative;
				&:after{
					content: "";
					display: block;
					width: 100%;
					height: 50%;
					background: #ffe0cb;
					position: absolute;
					bottom: 20%;
					left: 0;
					z-index: -1;
				}
			}
		}
		figure{
			float: left;
			width: 32%;
			min-width: 250px;
		}
		h5,
		p{
			float: right;
			width: calc(100% - 280px);
			max-width: 65%;
		}
	}
	
	.voice{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		margin-bottom: 2em;
		figure{
			width: 120px;
			height: 120px;
			border-radius: 100%;
			overflow: clip;
		}
		>div{
			width: calc((100% - 180px)*0.9);
			background: #f4f4f4;
			margin-left: 40px;
			padding: 1.2em;
			position: relative;
			>*:last-child{
				margin-bottom: 0;
			}
			&:after{
				content: "";
				display: block;
				width: 0;
				height: 0;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				border-right: 20px solid #f4f4f4;
				position: absolute;
				top: calc(1.2em + 5px);
				left: -20px;
			}
		}
	}
	
	.flow{
		counter-reset: number 0;
	}
	.flow>dl.col-sm-4{
		position: relative;
		&:before,
		&:nth-of-type(3n-2):nth-of-type(n+2) dt:before{
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			border: 1px solid #000;
			border-radius: 100px;
			position: absolute;
			top: calc(50% - 10px);
			right: -10px;
		}
		&:after,
		&:nth-of-type(3n-2):nth-of-type(n+2) dt:after{
			content: "";
			display: block;
			width: 0;
			height: 0;
			border-top: 3px solid transparent;
			border-bottom: 3px solid transparent;
			border-left: 4px solid #000;
			position: absolute;
			top: calc(50% - 3px);
			right: -3px;
		}
		&:nth-of-type(3n-2):nth-of-type(n+2) dt:before{
			right: auto;
			left: -10px;
		}
		&:nth-of-type(3n-2):nth-of-type(n+2) dt:after{
			right: auto;
			left: -2px;
		}
		&:last-child:before,
		&:last-child:after{
			display: none;
		}
		dd:has(img){
			position: relative;
			&:after{
				counter-increment: number 1;
				content: counter(number);
				color: #fff;
				background: #01c1c0;
				position: absolute;
				top: 0;
				left: 0;
				font-size: 1rem;
				line-height: 1;
				font-weight: bold;
				font-style: italic;
				width: 24px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
		}
	}
	
	iframe[src*="google.com/maps"]{
		width: 100%;
	}
	
	>table{
		width: 100%;
		border-top: 1px dashed #000;
		th,
		td{
			font-weight: normal;
			padding: 9px;
			border-bottom: 1px dashed #000;
			vertical-align: middle;
		}
		th{
			width: 35%;
		}
	}
}
@media screen and (max-width: 780px){
	.column_article div[data-type="column"]{
		.box.works{
			figure,
			h5,
			p{
				width: 100%;
				min-width: 0;
				max-width: none;
			}
			figure{
				margin-bottom: 1em;
			}
		}
	}
}
@media screen and (max-width: 576px){
	.column_article div[data-type="column"]{
		.row:has(>dl.col-sm-4){
			padding-left: 0;
			padding-right: 0;
			>dl.col-sm-4{
				border-left: none;
				>*:last-child{
					margin-bottom: 0;
					padding-bottom: 1rem;
					border-bottom: 1px dashed #b2b2b2;
				}
				&:last-child,
				&:nth-of-type(3n){
					border-right: none;
				}
				&:last-child>*:last-child{
					padding-bottom: 0;
					border-bottom: none;
				}
			}
		}
	
		.voice{
			justify-content: space-between;
			figure{
				width: 80px;
				height: 80px;
			}
			>div{
				width: calc(100% - 110px);
				margin-left: 0;
			}
		}
	
		.flow>dl.col-sm-4{
			&:before{
				top: calc(100% - 10px);
				right: calc(50% - 10px);
			}
			&:after{
				top: calc(100% - 3px);
				right: calc(50% - 2px);
				transform: rotate(90deg);
			}
			&:nth-of-type(3n-2):nth-of-type(n+2) dt:before,
			&:nth-of-type(3n-2):nth-of-type(n+2) dt:after{
				display: none;
			}
		}
	}
}

div[data-type="column"]{
	.box{
		:after{
			content: "";
			display: block;
			clear: both;
		}
		border: 13px solid #f4f4f4;
		margin: 2em auto;
		>*:last-child{
			margin-bottom: 0;
		}
	}
	h2+.box,
	h3+.box,
	h4+.box,
	h5+.box{
		margin-top: 1em;
	}
	.box_content{
		padding: 1.2em 1em;
		>*:last-child{
			margin-bottom: 0;
		}
	}
}
@media screen and (max-width: 600px){
	div[data-type="recommended"]{
		.box{
			border: 1px solid #ccc;
			margin: 2.5em auto;
			.box_content{
				padding: 1rem;
			}
		}
	}
}