@charset "utf-8";

#wrapper{overflow:clip;}

/* archive */
.column_top{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	margin-bottom:70px;
}
.column_cat_list{
	display:flex;
	align-items:center;
	gap:10px;
	padding:0;
	margin:0;
}
.column_cat_item{
	list-style:none;
	margin:0;
	font-size:1.4rem;
	font-weight:500;
	letter-spacing:0.7px;
	line-height:2rem;
}
.column_cat_link{
	display:block;
	padding:3px 14px 5px;
	background:#fff;
	border:1px solid #D4D9DF;
	border-radius:15px !important;
	color:#212121 !important;
	text-decoration:none !important;
	transition:border 0.3s;
}
.column_cat_link:hover{border-color:#212121;}
.on .column_cat_link{border-color:#212121;}
.beginner_box{flex-shrink:0;}
.beginner_link{
	display:flex;
	align-items:center;
	justify-content:center;
	width:240px;
	padding:12px 20px 14px;
	background:#fff;
	border:1px solid #CAD2DA;
	color:#212121 !important;
	font-family:var(--font_serif);
	font-size:2.6rem;
	font-weight:500;
	letter-spacing:0;
	line-height:3.7rem;
	text-align:center;
	text-decoration:none !important;
	transition:border 0.3s;
}
.beginner_link:hover{border-color:#707070;}
.beginner_link_txt{
	padding-left:40px;
	background:url(/ai-vc/img/common/icon_beginner.svg) no-repeat top 4px left;
}

/* archive / tag */
#content_wrap.archive_column_tag .page_title{margin-bottom:40px;}

/* single */
.single_column .content_area{
	display:flex;
	align-items:flex-start;
	gap:50px;
	padding-top:160px;
}
.content_box{
	width:100%;
	margin:auto;
}
.column_cat_info{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
.column_cat{
	display:inline-block;
	padding:4px 8px 5px;
	background:#1055CA;
	color:#fff;
	font-size:1.1rem;
	font-weight:500;
	letter-spacing:0.55px;
	line-height:1.6rem;
}
.content_box .page_title{
	position:relative;
	margin-bottom:15px;
	font-size:3.2rem;
	line-height:5.1rem;
}
.content_box .column_date{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:40px;
	margin-bottom:40px;
	font-size:1.3rem;
	letter-spacing:0.65px;
	line-height:1.9rem;
}
.content_box .column_published{
	padding:0 0 2px 20px;
	margin:0;
	background:url(/ai-vc/img/common/icon_release.svg) no-repeat center left;
}
.content_box .column_modified{
	position:relative;
	padding:0 0 2px 20px;
	background:url(/ai-vc/img/common/icon_updated.svg) no-repeat center left;
}
.content_box .column_modified::before{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	left:-20px;
	width:1px;
	height:12px;
	margin:auto;
	background:#ddd;
}
.content_box .column_tag_list{
	justify-content:center;
	gap:20px;
	padding:20px;
	margin-bottom:35px;
	border-top:1px solid #DAE7F3;
	border-bottom:1px solid #DAE7F3;
}
.content_box .column_tag_item{
	padding:0;
	border:none;
	font-size:1.3rem;
	letter-spacing:0.65px;
	line-height:1.9rem;
}
.content_box .column_tag_link{
	display:block;
	padding:1px 5px 3px;
	background:#fff !important;
	border:1px solid #CAD2DA;
	color:#212121 !important;
	text-decoration:none !important;
	transition:border 0.3s;
}
.content_box .column_tag_link:hover{border-color:#212121;}

.content_sidenav{
	flex-shrink:0;
	position:sticky;
	top:95px;
	width:270px;
	margin-top:-20px;
}
.sidenav_item{
	margin-top:20px;
	background:#fff;
	box-shadow:0px 3px 6px rgba(0,0,0,0.05);
	overflow:hidden;
}
.content_sidenav .sidenav_head{
	padding:9px 20px 10px;
	margin:0;
	background:#052365;
	color:#fff;
	font-size:1.8rem;
	letter-spacing:0;
	line-height:2.6rem;
}
.sidenav_cat_list{
	padding:0;
	margin:0;
}
.sidenav_cat_item{
	list-style:none;
	margin:0;
	font-size:1.4rem;
	font-weight:500;
	letter-spacing:0.7px;
	line-height:2rem;
}
.sidenav_cat_item + .sidenav_cat_item{border-top:1px solid #DAE7F3;}
.sidenav_cat_link{
	display:block;
	padding:10px 40px 10px 20px;
	background:url(/ai-vc/img/common/arrow_r_blue.svg) no-repeat center right 20px;
	color:#333 !important;
	text-decoration:none !important;
	transition:color 0.3s;
}
.sidenav_cat_link:hover{color:#0458D2 !important;}
.sidenav_bnr{padding:15px;}
.sidenav_bnr_link{
	display:block !important;
	padding:10px 30px 15px !important;
	background:url(/ai-vc/img/common/icon_popup_blue.svg) no-repeat top 10px right 10px !important;
	border:1px solid #DAE7F3;
	border-radius:4px;
	color:#333 !important;
	text-decoration:none !important;
	opacity:1 !important;
	overflow:hidden;
	transition:border 0.3s !important;
}
.sidenav_bnr_link:hover{border-color:#0458D2;}
.sidenav_bnr_img{
	width:105px !important;
	margin:auto;
}
.sidenav_bnr_txt{
	margin:5px 0 0;
	font-size:1.2rem;
	font-weight:500;
	letter-spacing:0.6px;
	line-height:2rem;
	text-align:center;
}

.related_area{
	position:relative;
	max-width:1280px;
	padding:80px 40px 0;
	margin:85px auto 0;
}
.related_area::before{
	content:'';
	position:absolute;
	z-index:-1;
	top:0;
	left:calc(50% - var(--vw_50));
	width:var(--vw_100);
	height:400px;
	background:linear-gradient(180deg, #E8F1FE 0%, #F7FAFF 46%, #fff 100%);
}
.related_area .related_head{
	padding:0;
	margin:0 0 35px;
	background:none;
	font-size:2.8rem;
	line-height:4rem;
	text-align:center;
}
.related_list{margin-bottom:40px;}
.related_btn{text-align:center;}


@media screen and (max-width:1024px){

/* archive */
.column_top{
	display:block;
	margin-bottom:40px;
}
.column_cat_list{margin-bottom:20px;}
.beginner_link{
	padding-top:13px;
	margin:auto;
	font-size:2.2rem;
	line-height:3.1rem;
}
.beginner_link_txt{
	padding-left:30px;
	background-position:top 2px left;
	background-size:28px;
}

/* single */
.single_column .content_area{
	display:block;
	padding-top:100px;
}
.content_box{margin-bottom:80px;}
.content_box .page_title{
	font-size:2.4rem;
	line-height:3.6rem;
}
.column_cat{
	padding:2px 5px;
	font-size:1rem;
	letter-spacing:0.5px;
	line-height:1.6rem;
}
.content_box .page_title{
	font-size:2.8rem;
	line-height:4.4rem;
}
.column_tag_link{padding:1px 3px 2px;}
.content_sidenav{
	position:static;
	width:auto;
	margin:0;
}
.sidenav_bnr_link{
	max-width:310px;
	margin:auto;
}

.related_area{
	padding-top:60px;
	margin-top:60px;
}
.related_area .related_head{
	margin-bottom:30px;
	font-size:2.4rem;
	line-height:3.4rem;
}
.related_list{margin-bottom:25px;}
.related_list .column_item:nth-child(4){display:none;}

}


@media screen and (max-width:767px){

/* archive */
.column_cat_list{display:none;}
.select_box{margin-bottom:20px;}

/* single */
.content_box .column_date{
	flex-direction:column;
	align-items:flex-end;
	gap:10px;
	margin-bottom:35px;
}
.content_box .column_modified::before{display:none;}
.content_box .column_tag_list{gap:15px;}
.content_box .column_tag_item{
	padding-bottom:1px;
	font-size:1.1rem;
	letter-spacing:0.55px;
	line-height:1.6rem;
}

.related_area{padding:40px 20px 0;}
.related_area .related_head{
	font-size:1.8rem;
	line-height:2.6rem;
}

}


@media screen and (max-width:650px){

/* single */
.related_list .column_item:nth-child(4){display:block;}

}