/* ----------------------------------------------------------------------------- */
/* -- HTML TOP css -- */
div#wrapper{padding-top:0;}
main{padding-top: 0;}
.main_bgcontainer{margin-top: 0;}
.top-main-bg{position: relative;}
.top-main-bg img{width:100%; }
.top_ttl{position: absolute;
	width: 43%;
	top: 44%;
	left: 0;
	right: 0;
	margin: auto;
 }
@media screen and (max-width: 768px) {
	div#wrapper{padding-top:0;}
	main{padding-top: 0;}
	.main_bgcontainer{margin-top: 0;}
	.top_ttl{width: 100%;top: 50%;}
}
.topics-slider {
	width: 100%;
	max-width: 1180px; /* 全体の最大幅 */
	margin: 0 auto;
	position: relative; /* 矢印配置の基準 */
}

.slide-item {
	padding: 10px; /* スライド間の隙間を作るためのパディング */
	transition: all 0.3s ease;
}

.info-card {
	background-color: #c5cdd9; /* 非アクティブ時の薄い青紫色 */
	color: #fff;
	margin: auto 20px;
	padding: 32px;
	border-radius: 8px;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	opacity: 0.7; /* 非アクティブは少し薄く */
	transition: all 0.3s ease;
}

.card-date {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
}

.card-title {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.6;
	margin: 0;
}
.card-title a{color: inherit;}
.slick-center .info-card {
	background-color: #1d3566; /* アクティブ時の濃紺 */
	opacity: 1;
	transform: scale(1.1); /* 少し大きく強調 */
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.slick-arrow {
	width: 60px;
	height: 60px;
	background-color: #1d3566; /* 矢印背景の濃紺 */
	-webkit-border-radius: 25%;
	border-radius: 25%;
	z-index: 100;
}
.slick-arrow:hover {
	background-color: #15274d;
}
.slick-prev:before,.slick-next:before {	content: '';display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../img/arrow_r.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}
.slick-next:before{background-image: url(../img/arrow_l.svg);}
.slick-prev {
	left: 10%; /* 画面幅に応じて調整が必要な場合があります */
}
.slick-next {
	right: 10%;
}
.slick-dots {
	bottom: -50px;
}

@media screen and (max-width: 768px) {
	.info-card {padding: 16px;margin: auto 30px;}
	.slick-dots { bottom: -30px;}
	.slick-dotted.slick-slider {margin-bottom: 20px;}
	.slick-arrow{width: 30px;height: 30px;}
	.slick-prev:before,.slick-next:before {width: 20px;height: 20px;}
	.slick-prev {left:-10px;}
	.slick-next {right:-10px;}
}


.slick-dots li button:before {
	font-size: 12px;
	color: #1d3566; /* ドットの色 */
	opacity: 0.25;
	border: 1px solid #1d3566; /* 枠線 */
	border-radius: 50%;
	content: ''; /* デフォルトの数字を消す */
	width: 12px;
	height: 12px;
	background: transparent;
}
.slick-dots li.slick-active button:before {
	background-color: #1d3566;
	opacity: 1;
}
/*  */
.top_cat_ttl{
display: flex;
align-items: center;
}
.top_cat_ttl h3{
margin: 0;
		margin-right: 20px; /* 文字と線の間の余白 */
		font-size: 24px;
		font-weight: bold;
		color: #1a1a1a;
		letter-spacing: 0.05em;
}
.top_cat_ttl::after {
		content: '';
		flex-grow: 1; /* 余ったスペースいっぱいに伸ばす */
		height: 4px;  /* 線の太さ */
		background-color: #28786E; /* 線の色（ボタンと同色） */
	}
.top_cat02 .top_cat_ttl::after{background-color: #508CAA;}
.top_cat03 .top_cat_ttl::after{background-color: #C86464;}
	.top-cat-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		max-width: 1180px;
		margin: 0 auto;
	}

	.top-cat-card {
		position: relative;
		min-height: 120px; 
		-webkit-tap-highlight-color: transparent; /* スマホタップ時の青い背景を消す */
	}

	.top-cat-box a { text-decoration: none; display: block; }

	.top-cat-btn,a .top-cat-linkbtn {
		background-color: #28786E;
		color: #fff;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 120px;
		width: 100%;
		cursor: pointer;
		transition: opacity 0.2s;
	}
.top_cat02 .top-cat-btn,.top_cat02 .top-cat-linkbtn{background-color: #508CAA;}
.top_cat03 .top-cat-btn,.top_cat03 .top-cat-linkbtn{background-color: #C86464;}
	.top-cat-btn h3,.top-cat-linkbtn h3 { margin: 0; font-size: 20px; font-weight: bold; text-align: center;}
	.arrow-icon {
		margin-top: 15px; width: 10px; height: 10px;
		border-bottom: 1px solid #fff; border-right: 1px solid #fff;
		transform: rotate(45deg);
	}

	.top-cat-box {
		position: absolute;
		top: 0;
		display: none; /* 最初は非表示 */
		background-color: #fff;
		border: 2px solid #28786E;
		border-radius: 6px;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
		min-height: 120px;
		z-index: 10000;
	}
.top_cat02 .top-cat-box{border-color: #508CAA;}
.top_cat03 .top-cat-box{border-color: #C86464;}
	.top-cat-header {
		background-color: #eef5ee; color: #28786E; font-weight: bold; font-size: 18px; padding: 10px 15px; border-bottom: 1px solid #ddd;
	}
.top_cat02 .top-cat-header{background-color: #E2F6FF;color: #508CAA;}
.top_cat03 .top-cat-header{background-color: #F3E9EF;color: #C86464;}
	.top-cat-body { padding: 15px; color: #333; }
	.top-cat-link-list {list-style: none;padding: 0;margin: 0;}
	.col-2 {display: block;columns: 2;column-gap: 20px; }
	.top-cat-link-list li{margin-top: 8px;}
	.top-cat-link-list li a { color: #333; font-weight: bold; font-size: 16px; }
	.top-cat-link-list li a:hover { text-decoration: underline;  }

	.top-cat-card.active .top-cat-btn {
		display: none;
	}
	
	.top-cat-card.active .top-cat-box {
		display: block;
		/*animation: slideDown 0.3s ease-out forwards;*/
		animation: fadeIn 0.3s ease;
	}

@keyframes fadeIn {
		from { opacity: 0; transform: translateY(-5px); }
		to { opacity: 1; transform: translateY(0); }
}

@media screen and (max-width: 768px) {
		.top-cat-grid { grid-template-columns: 1fr; }
}
.top-bnr-link img{	-webkit-border-radius: 10px;border-radius: 10px;}
.top-bnr-link.en img{height: 90px;object-fit: cover;}

/* spbox */
.top-sp-ttl{
	font-size: 42px;
	line-height: 1.5;
	text-align: center;
	font-weight: 500;
	color:#FFF;
	padding:16px 0 ;
	background-color:#28786E;
}
.top-sp-ttl.cat02{background-color: #508CAA;}
.top-sp-ttl.cat03{background-color: #C86464;}
.top-sp-topi li{border-top:1px solid #CCC;padding:12px;}
.top-sp-topi .top-sp-topi-name{display:inline-block;width:5em;vertical-align: top;}
.top-sp-topi .top-sp-topi-txt{display:inline-block;width:calc(100% - 5.2em);vertical-align: top;}
.top-sp-topi .top-sp-topi-item{display:inline-block;width:11em;vertical-align: top;}
.top-sp-topi .top-sp-topi-subitem{display:inline-block;width:calc(100% - 11.2em);vertical-align: top;}
@media screen and (max-width: 768px) {
	.top-cat-header{position: relative;padding-right:30px;}
	.top-cat-header::after{
	position: absolute;
	top: 1em;
	right: 0.8em;
	margin: auto;
	content: "";
	vertical-align: middle;
	width: 10px;
    height: 10px;
    border-top: 2px solid #28786E;
    border-left: 2px solid #28786E;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	}
	.top_cat02 .top-cat-header::after{border-color: #508CAA;}
	.top_cat03 .top-cat-header::after{border-color: #C86464;}
	.top-sp-ttl{font-size: 26px;}
	.top-sp-topi .top-sp-topi-name,
	.top-sp-topi .top-sp-topi-txt,
	.top-sp-topi .top-sp-topi-item,
	.top-sp-topi .top-sp-topi-subitem{display:block;width:100%;}

}
.top-sp-btn {
  margin-top: 24px;
  text-align: center;
}

.top-sp-btn.active {
  background: linear-gradient(180deg, rgba(229, 229, 229, 0) 0%, rgba(229, 229, 229, 0) 100%);
}

.top-sp-btn.active button .txt-open {
  display: none;
}

.top-sp-btn.active button .txt-close {
  display: block;
}

.top-sp-btn button {
  display: block;
  border: 1px solid #1B1464;
  background: none;
  width:12em;
  font-size: 16px;
  color: #1B1464;
  margin: auto;
padding:0.5em 0;
  cursor: pointer;
}
.top-sp-btn button .txt-open,.top-sp-btn button .txt-close{position: relative;padding-right: 1em;}
.top-sp-btn button .txt-open::after,.top-sp-btn button .txt-close::after{content: "";display: inline-block;position: absolute;
	right: 1em;
	top:0.3em;
	margin: auto;
	width: 0.6em;
	height: 0.6em;
	border-top: 1px solid #1B1464;
	border-right: 1px solid #1B1464;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.top-sp-btn button .txt-close::after{top:0.3em;-webkit-transform: rotate(-45deg);	transform: rotate(-45deg);}
.top-sp-btn button .txt-open {
  display: block;
}

.top-sp-btn button .txt-close {
  display: none;
}
.top-bk-gray{background-color:#FAFAFA}
.top-sp-off{display: none;}
.top-sp-off.on{display: block;}