@charset "utf-8";
/* CSS Document */

.en{
	font-family: "DM Sans", sans-serif;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #5ea6c5;
}
h1,h2,h3{
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	color: #334a52;
}
.dotline{
	width: 64px;
	height: 6px;
}
.dotline img{
	width: 64px;
	height: 6px;
	display: block;
}
.crumb .inner,
.section01 .inner{
	padding-left: 32px;
	padding-right: 32px;
}

/* ---------- crumb ---------- */
.crumb{
	background-color: #fff;
}
.crumb .inner{
	gap: 8px;
	height: 56px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.crumb a p,
.crumb .sep{
	font-size: 12px;
	line-height: 16px;
	color: #5ea6c5;
	white-space: nowrap;
}
.crumb .current{
	font-size: 12px;
	line-height: 16px;
	color: rgba(51,74,82,0.6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- section01 ---------- */
.section01{
	padding-top: 80px;
	background-color: #fff;
}
.section01 .inner{
	max-width: 860px;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 80px;
}
.section01 .webgene-item .meta{
	gap: 12px;
}
.section01 .webgene-item .cate{
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #fff;
	background-color: #5ea6c5;
	border-radius: 100px;
	padding: 4px 12px;
}
.section01 .webgene-item .date{
	font-family: "DM Sans", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #334a52;
}
.section01 .webgene-item h1{
	padding-top: 16px;
}
.section01 .webgene-item .imgbox{
	width: 100%;
	height: auto;
	margin-top: 40px;
	overflow: hidden;
	border-radius: 20px;
	background-color: #b5dde5;
}
.section01 .webgene-item .imgbox img{
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: 20px;
}
.section01 .webgene-item .txtbox{
	padding-top: 40px;
}
.section01 .webgene-item .txtbox p{
	font-size: 16px;
	line-height: 32px;
	color: #334a52;
}
.section01 .webgene-item .txtbox p + p{
	padding-top: 20px;
}
.section01 .more{
	display: flex;
	justify-content: center;
	padding-top: 32px;
}
.section01 .more.more_outline a{
	padding: 13px 25px;
}
.section01 .more.more_outline a img{
	width: 15px;
	height: 15px;
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.section01 .webgene-item .imgbox,
	.section01 .webgene-item .imgbox img{
		height: auto;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.crumb .inner,
	.section01 .inner{
		padding-left: 20px;
		padding-right: 20px;
	}
	.section01{
		padding-top: 48px;
	}
	.section01 .inner{
		padding-bottom: 64px;
	}
	.section01 .webgene-item .imgbox,
	.section01 .webgene-item .imgbox img{
		height: auto;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.section01 .webgene-item .imgbox,
	.section01 .webgene-item .imgbox img{
		height: auto;
	}
	.section01 .webgene-item .txtbox p{
		font-size: 14px;
		line-height: 28px;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}