@charset "UTF-8";
/* CSS Document */
.contents{
	background: #F5F5F5;
	padding: 60px 12vw 100px;
}
.contents .cnt{
	background: #fff;
	padding: 80px 4vw;
	margin-bottom: 60px;
}
.cnt h2{
	text-align: left;
	border-bottom: solid 1px #557DBE;
	color: #333333;
	font-size: 2.8rem;
	padding-bottom: 36px;
	margin-bottom: 60px;
}
.cnt .img{
	margin-bottom: 40px;
}
.cnt .article{
	padding-bottom: 60px;
	border-bottom: solid 1px #557DBE;
	margin-bottom: 60px;
}
.cnt .article .index{
	background: #EBEEF3;
	padding: 42px 30px;
	margin-bottom: 60px;
}
.cnt .article .index .anc_link{
	margin-top: 15px;
	margin-left: 20px;
}
.cnt .article .index .anc_link a{
	display: inline; /* 文字列の幅だけがリンク範囲になる */
}
.cnt .article .index .anc_link p{
	font-size: 1.8rem;
	line-height: 24px;
	letter-spacing: 0.9px;
	margin-bottom: 20px;
}
.cnt .article .index .anc_link p:last-child{
	margin-bottom: 0px;
}
.cnt .article .block{
}
.cnt .article h3{
	margin-top: 48px;
}
.cnt .article p{
	margin-top: 24px;
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 400;
	line-height: 28px; /* 175% */
	letter-spacing: 0.8px;
}
.cnt .article .img{
	margin-top: 24px;
}
.cnt .day{
	margin-bottom: 18px;
}
.cnt .day p{
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 34px;
	letter-spacing: 1.1px;
}

.cnt p.ttl2{
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1; /* 175% */
	letter-spacing: 0.8px;
	position: relative;
	padding-left: 20px;
}
.cnt p.ttl2::before{
	content: "";
	width: 2px;
	height: 150%;
	background: #557EC0;
	position: absolute;
	top: -4px;
	left: 0;
}
.connection{
	margin-bottom: 42px;
}
.connection .column.col3{
	margin-top: 16px;
}
.connection .column.col3 .col{
	width: calc(100% / 3 - 20px);
	background: #fff;
	border-radius: 10px;
	border:solid 1px #CCCCCC;
	padding: 20px;
	display: block;
	position: relative;
	transition: 0.3s;
}
.connection .column.col3 .col::after{
	content: "";
	width: 20px;
	height: 20px;
	background: url("../img/common/arrow_icon.svg");
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translate(0px, -20px);
	opacity: 0;
	transition: 0.3s;
}
.connection .column.col3 .col:hover::after{
	transform: translate(-20px, -20px);
	opacity: 1;
}
.connection .column.col3 .col:hover{
	opacity: 1;
}
.connection .column.col3 .col p{
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 500;
	line-height: 28px; /* 175% */
	letter-spacing: 0.8px;
	margin-bottom: 0px;
	padding-left: 0px;
}
.connection .column.col3 .col .img{
	margin-bottom: 12px;
}

.keyword{
	margin-bottom: 24px;
}
.keyword .column{
	align-items: center;
}
.keyword p.ttl2{
	margin-right: 20px;
}
.keyword p.ttl2::before{
	height: 150%;
	top: -3px;
}
.key_link.column p{
	background: #F5F5F5;
	border-radius: 50px;
	padding: 5px 20px;
}

.sns{
}
.sns .column{
	align-items: center;
}
.sns .key_link{
	gap:10px;
}
.sns img{
	width: 36px;
	height: 36px;
}

.questionnaire{
	margin-top: 86px;
	background: #EBEEF3;
	padding: 40px;
}
.questionnaire h3{
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 500;
	line-height: 28px; /* 175% */
	letter-spacing: 0.8px;
}
.questionnaire .column.col3{
	margin-top: 12px;
}
.questionnaire .column.col3 .col{
	border: none;
	border-radius: 0px;
	padding: 13px 20px;
	cursor: pointer;
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 500;
	line-height: 28px; /* 175% */
	letter-spacing: 0.8px;
	color: #557EC0;
	background: #fff;
	padding-left: 50px;
	width: calc(100% / 3 - 20px);
	position: relative;
}
.questionnaire .column.col3 .col::before{
	content: "";
	width: 24px;
	height: 24px;
	background: url("../img/lower/ti/rd/article/circum_face-smile.svg");
	position: absolute;
	top:50%;
	left: 0;
	transform: translate(20px,-50%);
}
.questionnaire .column.col3 .col::after{
	display: none;
}
.questionnaire .column.col3 .col:nth-child(2)::before{
	content: "";
	background: url("../img/lower/ti/rd/article/circum_face-smile2.svg");
}
.questionnaire .column.col3 .col:nth-child(3)::before{
	content: "";
	background: url("../img/lower/ti/rd/article/circum_face-frown.svg");
}

.recommend{
	padding: 24px 4vw;
}
.recommend > p{
	margin-top: 28px;
	margin-bottom: 24px;
	text-align: center;
	font-size: 1.4rem;
	font-style: normal;
	font-weight: 700;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.84px;
	color: #1E286E;
	font-family: Outfit;
}
.recommend .column.col3 .col{
	display: block;
	width: calc(100% / 3 - 14px);
}
.recommend .column.col3 .col figure{
	display: block;
	width: 100%;
	aspect-ratio: 400 / 240;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 12px;
}
.recommend .column.col3 .col p{
	font-size: 1.4rem;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 171.429% */
	letter-spacing: 0.7px;
	margin-top: 12px;
}

footer .foot_cnt{
	margin-top: 61px;
}

@media only screen and (max-width: 1024px) {
	.contents {
        padding: 60px 20px;
    }
	.contents .cnt{
		padding: 30px 20px;
	}
	.connection .column.col3 .col::after{
		opacity: 1;
		transform: translate(-20px, -20px);
	}
	p.ttl::before{
		display: none;
	}
}
@media only screen and (max-width: 767px) {
	.cnt h2{
		font-size: 2.2rem;
		font-style: normal;
		font-weight: 700;
		line-height: 32px; /* 145.455% */
		letter-spacing: 1.32px;
		padding-bottom: 24px;
		margin-bottom: 64px;
	}
	.contents .cnt{
		margin-bottom: 40px;
	}
	.cnt .article .index{
		padding: 18px 20px;
		margin-bottom: 53px;
	}
	.cnt .article .index .anc_link{
		margin-left: 0px;
	}
	.cnt .article .index .anc_link p{
		font-size:1.5rem;
		font-style: normal;
		font-weight: 500;
		line-height: 20px; /* 133.333% */
		letter-spacing: 0.75px;
	}
	.cnt .article .block{
		margin-bottom: 40px;
	}
	.cnt .article .block p{
		font-size: 1.4rem;
		line-height: 24px; /* 171.429% */
		letter-spacing: 0.7px;
	}
	
	.cnt .day p{
		font-size: 1.8rem;
	}
	.cnt p.ttl2{
		font-size: 1.4rem;
		margin-bottom: 16px;
	}
	.connection .column.col3 .col{
		width: 100%;
	}
	.connection .column.col3 .col p{
		font-size: 1.4rem;
	}
	.keyword .column{
		gap:10px;
	}
	.sns{
		margin-bottom: 30px;
	}
	.sns .column{
		display: block;
	}
	.sns .column .key_link{
		display: flex;
	}
	.questionnaire{
		padding: 20px;
	}
	.questionnaire h3{
		font-size: 1.3rem;
	}
	.questionnaire .column.col3{
		display: block;
	}
	.questionnaire .column.col3 .col{
		width: 100%;
		margin-bottom: 20px;
		font-size: 1.4rem;
	}
	.questionnaire .column.col3 .col:last-child{
		margin-bottom: 0px;
	}
	
	.recommend{
		padding: 0px;
	}
	.recommend > p{
		font-size: 1.3rem;
		margin-top: 12px;
	}
	.recommend .column.col3 .col{
		width: calc(100% / 2 - 10px);
	}
}