@charset "UTF-8";

/* ---------------------------------------------------------
 　■ KV
--------------------------------------------------------- */
.topKV{
	position: relative;
	width: 100%;
	/* margin: -2px -2px -2px -2px; */
	/* margin-bottom: -1px;
	margin-right: -1px; */
	.movie {
		width: 100%;
		aspect-ratio: 16/9;
		@media (width < 768px) {
			aspect-ratio: 370/808;
		}
	}
	.movieItem {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	video {
		display: block;
		width: 100%;
		height: 100%;
		outline: 2px solid #fff; /* 背景色に合わせて白に変更 */
		outline-offset: -2px;
		margin-left: 1px;
		-o-object-fit: cover;
		   object-fit: cover;
	}
	.movieBtn {
		background-color: transparent;
		background-image: url(../images/top/movie_pause.svg);
		background-position: center 0px;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		left: 50rem;
		bottom: 60rem;
		width: 56px;
		height: 40px;
		border: 0;
		cursor: pointer;
		@media (width > 1250px) {
			bottom: 130rem;
		}
		@media (width <= 1250px) {
			left: 50rem;
			bottom: 60rem;
		}
		@media (width < 768px) {
			bottom: 5px;
			left: 12rem;
			width: 56rem;
			height: 40rem;
		}
	}
	.movieBtn.is-stopped {
		background-image: url(../images/top/movie_play.svg);
	}
	/* PDFRとは？ */
	.about{
		position: absolute;
		right: 60px;
		top: 145px;
		@media (width <= 1250px) {
			right: 60rem;
			top: 145rem;
		}
		@media (width < 768px) {
			right: 20rem;
			top: 95rem;
		}
		.aboutLink {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 21px;
			position: relative;
			width: 100%;
			padding-top: 29px;
			color: var(--DBL);
			text-decoration: none;
			font-family: "Noto Serif JP", serif;
			@media (width <= 1250px) {
				gap: 21rem;
				padding-top: 29rem;
			}
			@media (width < 768px) {
				gap: 10rem;
				padding-top: 15rem;
			}
		}
		.aboutLink::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 60px;
			height: 8px;
			background: linear-gradient(90deg,var(--DBL) 0%,var(--BL) 100%);
			@media (width <= 1250px) {
				width: 60rem;
				height: 8rem;
			}
			@media (width < 768px) {
				width: 40rem;
				height: 4rem;
			}
		}
		.aboutLink::after {
			background-image: url(../images/circle_arrow_rt.svg);
			background-position: center top;
			background-repeat: no-repeat;
			background-size: contain;
			width: 49px;
			height: 49px;
			content: "";
			flex-shrink: 0;
			@media (width <= 1250px) {
				width: 49rem;
				height: 49rem;
			}
			@media (width < 768px) {
				width: 27rem;
				height: 27rem;
			}
		}
		.aboutLink-txt {
			font-size: 46px;
			font-weight: 600;
			@media (width <= 1250px) {
				font-size: 46rem;
			}
			@media (width < 768px) {
				font-size: 20rem;
			}
		}
	}
	/* NEWS */
	.news {
		background-color: #fff;
		position: absolute;
		right: 50px;
		bottom: 80px;
		width: 580px;
		border-radius: 8px;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
		overflow: hidden;
		@media (width > 1250px) {
			bottom: 130rem;
		}
		@media (width <= 1250px) {
			right: 50rem;
			bottom: 30rem;
			width: 580rem;
		}
		@media (width < 768px) {
			bottom: 72rem;
			right: auto;
			left: 20rem;
			width: 335rem;
			height: auto;
			overflow: visible;
			border-radius: 0 8px 8px 8px;
		}
		.newsHead {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px;
			background-color: #EEF3F8;
			@media (width < 768px) {
				position: absolute;
				bottom: calc(100% - 1px);
				left: 0;
				border-radius: 8px 8px 0 0;
				width: 120rem;
				justify-content: center;
				padding: 10rem 20rem;
			}
		}
		.newsTtl {
			font-size: 20px;
			font-weight: 700;
			color: #000;
			margin: 0;
			@media (width < 768px) {
				font-size: 16rem;
				text-align: center;
			}
		}
		.newsBtm.sp{
			padding: 0 0 20rem;
		}
		.newsLink {
			position: relative;
			color: var(--DBL);
			font-size: 14px;
			font-weight: 700;
			text-decoration: none;
			border-bottom: 1px solid var(--DBL);
			display: block;
			letter-spacing: 0.06em;
			display: flex;
			align-items: center;
			justify-content: center;
			@media (width < 768px) {
				width: 160rem;
				height: 40rem;
				border: 1px solid var(--DBL);
				border-radius: 8px;
				margin: auto;
				font-size: 16rem;
			}
		}
		.newsLink::after {
			background-image: url(../images/arrow_rt.svg);
			background-position: center 0px;
			background-repeat: no-repeat;
			background-size: contain;
			width: 10px;
			height: 10px;
			content: "";
			margin: 2px 0 0 5px;
			@media (width <= 1250px) {
				width: 10rem;
				height: 10rem;
			}
		}
		.newsList {
			display: flex;
			flex-direction: column;
			gap: 12px;
			padding: 18px 20px 20px;
			margin: 0;
			@media (width < 768px) {
				gap: 20rem;
				padding: 20rem;
			}
		}
		.newsItem {
			display: flex;
			align-items: center;
			@media (width < 768px) {
				flex-wrap: wrap;
				border-bottom: 1px solid #D7D7D7;
				padding-bottom: 20rem;
			}
		}
		.newsDate {
			/* flex: 0 0 80px; */
			font-size: 14px;
			line-height: 1.4;
			padding-right: 10px;
			@media (width <= 1250px) {
				font-size: clamp(10px, 14rem, 14px);
				padding-right: 10rem;
			}
			@media (width < 768px) {
				flex: 0 0 80rem;
				font-size: 14rem;
			}
		}
		.newsCat {
			flex: 0 0 145px;
			padding: 3px 0;
			border-radius: 4px;
			color: #fff;
			font-size: 13px;
			font-weight: 700;
			line-height: 1.2;
			text-align: center;
			@media (width <= 1250px) {
				font-size: clamp(10px, 13rem, 13px);
				flex: 0 0 clamp(120px, 145rem, 145px);
			}
			@media (width < 768px) {
				flex: 0 0 145rem;
				padding: 2px 0 3px;
				font-size: 13rem;
			}
		}
		.cat-meeting {
			background-color: #e6a64f;
		}
		.cat-news {
			background-color: #808080;
		}
		.cat-activity {
			background-color: var(--DBL);
		}
		.cat-branch {
			background-color: #007B30;
		}
		.newsTxt {
			flex: 1;
			min-width: 0;
			color: #333;
			line-height: 1.4;
			text-decoration: none;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-left: 11px;
			letter-spacing: -0.06em;
			@media (width <= 1250px) {
				font-size: clamp(10px, 16rem, 16px);
				margin-left: 10rem;
			}
			@media (width < 768px) {
				flex: 0 0 100%;
				margin-left: 0;
				padding-top: 10rem;
				margin-left: 0;
				font-size: 16rem;
			}
		}
	}
}
/* === 共通 === */
main{
	overflow: hidden;
	padding-top: 0 !important;
}

.topHeading{
	position: relative;
	padding-top: 35px;
	font-size: 48px;
	font-weight: 600;
	color: var(--DBL);
	font-family: "Noto Serif JP", serif;
	margin: 0 0 35px;
	letter-spacing: 0.2em;
	@media (width <= 1024px) {
		font-size: 36px;
	}
	@media (width < 768px) {
		padding-top: 30px;
		font-size: 28px;
		letter-spacing: 0.1em;
		margin: 0 0 25px;
	}
}
.topHeading::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 8px;
	background: linear-gradient(90deg, var(--DBL) 0%, var(--BL) 100%);
	@media (width < 768px) {
		width: 40px;
		height: 4px;
	}
}
.topTxt {
	font-size: 20px;
	line-height: 2;
	margin: 0;
	@media (width <= 1024px) {
		font-size: 16px;
	}
	@media (width < 768px) {
		font-size: 18px;
		line-height: 1.556;
		letter-spacing: 0em;
	}
}
main .btnList .btn{
	height: 60px;
	@media (width < 768px) {
		height: 40px;
	}
}

/* === 会員企業 === */
.memberCompany {
	background-color: #fff;
	background-image: url(../images/top/bg_member_company_btm.webp);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding: 140px 0 175px;
	margin-top: -2px;
	position: relative;
	@media (width <= 1250px) {
		padding: 140rem 0 175rem;
	}
	@media (width < 768px) {
		background-position: left bottom;
		background-size: 100% auto;
		padding: 37rem 0 53rem;
	}
	.memberCompany-img{
		position: absolute;
		right: 0px;
		bottom: 25px;
		width: 810px;
		height: 568px;
		margin: 0;
		@media (width <= 1250px) {
			bottom: 25rem;
			width: 810rem;
			height: 568rem;
		}
		@media (width < 768px) {
			right: -40px;
			bottom: 50px;
			width: 234rem;
			height: 164rem;
		}
	}
	.memberCompany-box{
		width: 480px;
		position: relative;
		@media (width <= 1310px) {
			width: 464px;
		}
		@media (width <= 1250px) {
			width: 464rem;
		}
		@media (width < 768px) {
			width: 50%;
		}
		@media (width <= 500px) {
			width: 100%;
		}
	}
	.topTxt{ letter-spacing: 0.03em; }
	.btnList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 20px 5px;
		list-style: none;
		padding: 0;
		margin: 54px 0 0;
		@media (768px <= width <= 1024px) {
			gap: 10px 0;
		}
		@media (width < 768px) {
			margin: 37px 0 0;
			width: 160px;
		}
	}
	.btnList-item {
		width: 230px;
		@media (width < 768px) {
			width: 160px;
		}
	}
}

/* === 活動内容 === */
.activity{
	padding: 142px 0 137px;
	background-color: #EEF4FA;
	position: relative;
	@media (width <= 1024px) {
		padding: 30rem 0 30rem;
	}
	@media (width < 768px) {
		padding: 35rem 0 100rem;
	}
	.activityImg-lt{
		position: absolute;
		left: 0px;
		bottom: 25px;
		width: 900px;
		height: 668px;
		margin: 0;
		z-index: 1;
		@media (width <= 1250px) {
			bottom: 25rem;
			width: 900rem;
			height: 668rem;
		}
		@media (width < 768px) {
			left: -52px;
			bottom: -10rem;
			width: 272rem;
			height: 202rem;
		}
	}
	.activity-box{
		width: 480px;
		margin-left: auto;
		position: relative;
		z-index: 2;
		@media (width <= 1250px) {
			width: 480rem;
		}
		@media (width < 768px) {
			width: 100%;
		}
		.activity-ctr{
			margin: 0 0 23px;
		}
	}
	.topTxt{
		@media (width < 768px) {
			width: 50%;
			margin-left: auto;
		}
		@media (width <= 500px) {
			width: 100%;
		}
	}
	.btnList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 20px 5px;
		list-style: none;
		padding: 0;
		margin: 25px 0 0;
		@media (768px <= width <= 1024px) {
			gap: 10px 0;
		}
		@media (width < 768px) {
			margin: 10px 0 0 auto;
			width: 160px;
		}
	}
	.btnList-item {
		width: 230px;
		@media (width < 768px) {
			width: 160px;
		}
	}
}

/* === 意見交換会 === */
.exchange{
	background-image: url(../images/top/bg_exchange_top.webp), url(../images/top/bg_member_company_btm.webp);
	background-position: left top, left bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: 100% auto, 100% auto;
	padding: 300px 0 227px;
	position: relative;
	@media (width <= 1250px) {
		padding: 300rem 0 227rem;
	}
	@media (width <= 1024px) {
		padding: 240rem 0 200rem;
	}
	@media (width < 768px) {
		padding: 86rem 0 178rem;
	}
	.exchangeImg-rt{
		position: absolute;
		right: -15px;
		bottom: 0;
		width: 900px;
		height: 677px;
		margin: 0;
		z-index: 3;
		@media (width <= 1250px) {
			bottom: 0;
			width: 900rem;
			height: 677rem;
		}
		@media (width < 768px) {
			left: auto;
			right: -108px;
			bottom: -21rem;
			width: 391rem;
			height: 294rem;
		}
	}
	.exchange-box{
		width: 480px;
		position: relative;
		z-index: 3;
		@media (width <= 1250px) {
			width: 480rem;
		}
		@media (width < 768px) {
			width: 40%;
		}
		@media (width <= 430px) {
			width: 100%;
		}
	}
	.exchangeMore{
		width: 120px;
		margin: 23px 0 0 auto;
		@media (width < 768px) {
			margin: 38px auto 0 0;
		}
		.btn{
			height: 40px;
			font-size: 16px;
			letter-spacing: 0em;
		}
		.btn::after {
			width: 6px;
			height: 10px;
		}
	}
}

/* === 協会事業 === */
.assocBusiness{
	padding: 123px 0 60px;
	background-color: #EEF4FA;
	position: relative;
	z-index: 2;
	margin-top: -1px;
	@media (width <= 1024px) {
		padding: 140rem 0 0rem;
	}
	@media (width < 768px) {
		padding: 38rem 0 167rem;
	}
	&::before {
		background-image: url(../images/top/bg_exchange_top.webp);
		background-position: 0px 0px;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		left: 0px;
		top: calc(100% - 1px);
		width: 100%;
		content: "";
		display: block;
		aspect-ratio: 1440/162;
	}
	.assocBusinessImg-lt{
		position: absolute;
		left: 0px;
		bottom: -75px;
		width: 820px;
		height: 647px;
		margin: 0;
		z-index: 3;
		@media (width <= 1250px) {
			bottom: 25rem;
			width: 820rem;
			height: 647rem;
		}
		@media (width < 768px) {
			left: -64rem;
			bottom: -10rem;
			width: 302rem;
			height: 228rem;
			z-index: 1;
		}
	}
	.assocBusiness-box{
		width: 480px;
		margin-left: auto;
		position: relative;
		z-index: 3;
		@media (width <= 1250px) {
			width: 480rem;
		}
		@media (width < 768px) {
			width: 100%;
			position: relative;
			z-index: 2;
		}
		.assocBusinessImg-ctr{
			margin: 0 0 26px;
		}
	}
	.topTxt{
		@media (width < 768px) {
			width: 100%;
		}
	}
	.assocBusinessMore{
		width: 120px;
		margin: 23px 0 0 auto;
		@media (width < 768px) {
			margin: 35px 0 0 auto;
		}
		.btn{
			height: 40px;
			font-size: 16px;
			letter-spacing: 0em;
		}
		.btn::after {
			width: 6px;
			height: 10px;
		}
	}
}

/* === お問合せ・資料請求・よくあるご質問ボタン === */
.ctaLinks{
	background-color: var(--DBL);
	padding: 18vw 0 14vw;
	margin-top: -33px;
	position: relative;
	z-index: 1;
	@media (width <= 1250px) {
		padding: 235rem 0 166rem;
		margin-top: -33rem;
	}
	@media (width < 768px) {
		padding: 90rem 0 90rem;
		margin-top: -10rem;
	}
	&::before {
		background-image: url(../images/top/cta_links_bg.webp);
		background-position: 0px 0px;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		content: "";
		display: block;
		aspect-ratio: 1440/512;
		@media (width < 768px) {
			background-image: url(../images/top/cta_links_bg_sp.webp);
			aspect-ratio: 375/308;
		}
	}
	.linkList {
		display: flex;
		justify-content: center;
		gap: 60px;
		position: relative;
		@media (width <= 1250px) {
			gap: 60rem;
		}
		@media (width < 768px) {
			flex-direction: column;
			align-items: center;
			gap: 20rem;
		}
	}
	.linkList .btn {
		width: 300px;
		height: 78px;
		&.btnDBL { border: 1px solid #fff; }
		@media (width <= 1250px) {
			width: 300rem;
			height: 78rem;
			font-size: 20rem;
		}
		@media (width < 768px) {
			width: 230px;
			height: 60px;
			font-size: 20px;
			letter-spacing: 0;
		}
	}
	.linkList .btn::after {
		@media (width < 768px) {
			width: 12px;
			height: 19px;
		}
	}
}

/* === 関連リンク === */
.relatedLinks{
	background-color: var(--DBL);
	padding: 85px 0 83px;
	margin-top: -1px;
	position: relative;
	z-index: 1;
	@media (width < 768px) {
		padding: 37rem 0 60rem;
	}
	&::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -80px;
		width: 115%;
		height: 317px;
		background: var(--DBL);
		border-radius: 50%;
		transform: translateX(-50%);
		z-index: 1;
		@media (width <= 1250px) {
			bottom: -80rem;
			height: 317rem;
		}
		@media (width < 768px) {
			bottom: -20rem;
			height: 80rem;
		}
	}
	.bnrList{
		display: grid;
		grid-template-columns: repeat(3, 380px);
		gap: 30px;
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 2;
		@media (width <= 1250px) {
			grid-template-columns: repeat(3, 380rem);
			gap: 30rem;
		}
		@media (width < 768px) {
			grid-template-columns: repeat(1, 230rem);
			justify-content: center;
			gap: 20rem;
		}
	}
	.bnrList-item a{
		display: block;
		border-radius: 8px;
		overflow: hidden;
	}
	.bnrList-item a:hover{
		opacity: 0.8;
	}
	.bnrList-item img{
		width: 100%;
		height: auto;
	}
}

/* === top === */
main{
	padding: 0 0 80px;
	@media (width < 768px) {
		padding: 0 0 20rem;
	}
}
.footer{
	margin-top: 20px;
	@media (width < 768px) {
		margin-top: 32rem;
	}
}


@media (width < 768px) {
}