/*----------------------------------------------------------------------------------*/
/*                                                                                  */
/*  TOP STYLE                                                                       */
/*                                                                                  */
/*----------------------------------------------------------------------------------*/

/* -------------------------------------------------------------------------------- */
/*  1-1.TOPCONTENTS ※各エリア幅はここに記載                                          */  
/* -------------------------------------------------------------------------------- */
/* HERO全体  -----------------------------------*/
.topContents{	
	min-width: 1040px;
	display: flex;
	position: relative;
	height: 650px;
	background: url(../common/img/bg.gif);
	padding-top: 25px;
	position: relative;
	box-sizing: border-box;
	}

.topContents *{
	box-sizing: border-box;
}		

@media screen and (max-width: 640px) {
	.topContents{
		display: block;
		min-width: auto;
		height: auto;
		padding-top: 0;
		padding-bottom: 30px;
	}

	.topContents--inner{
		display: block;
	}
}

/* HERO左側（重要なお知らせ、スライダー、SP用画像） ----------------*/
.topContents--inner{
	flex: 1;
	display: flex;
	flex-direction: row-reverse;
}	

.topContentsTopics{
	flex: 1;
	height: calc(650px - 25px);
	border-radius: 0 20px 0 0; 
	padding: 30px 15px 0 clamp(15px, 2.343vw, 90px);
	box-shadow: 0px 0px 2px rgb(0 0 0 / 20%);
}	

.topContentsSlider{
	width: max(570px , 55vw);	
}

.topContentsSPImg{
	display: none;
}

@media screen and (max-width: 640px) {
	.topContents--inner{
		display: block;
	}

	.topContentsTopics{
		width: 100%;
		height: auto;
		border-radius: 0;
		position: static;
		padding-bottom: 30px;
	}

	.topContentsSlider{
		display: none;
	}

	.topContentsSPImg{
		display: block;
	}

	.topContentsSPImg .img img{
		width: 100%;
		height: auto;
	}

	.topContentsSPImg .bnr{
		width: 250px;
		display: block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-style: normal;
		font-size: 14px;
		color: #333;
		text-decoration: none ;
		border: solid 1px #ccc;
		border-radius: 100vh;
		background-color: #fff;
		margin: 20px auto;
		padding: 10px 10px 10px 70px;
		position: relative;		
	}

	.topContentsSPImg .bnr span{
		display: block;
		font-size: 17px;
		color: #0a0c7c;
		margin-bottom: 3px;
	}

	.topContentsSPImg .bnr::before,
	.topContentsSPImg .bnr::after{
		content: "";
		display: block;
		width: 40px;
		height: 40px;
		position: absolute;
		left: 15px;
		top: 15px;
	}

	.topContentsSPImg .bnr::before{	
		background-image: linear-gradient(90deg, #c6dff3, #78bff5); /*左に記載が上*/
		border-radius: 50%;	
	}

	.topContentsSPImg .bnr::after{
		background-image: url('../img/icon_search.png');
		background-size: 18px 20px;
		background-repeat: no-repeat;
		background-position: center;
	}
}


/* HERO右側（バナー） -----------------------------------*/
.topContentsBanner{
	/* width -> js */
	height: calc(650px - 25px);
}

@media screen and (max-width: 640px) {
	.topContentsBanner{
		width: 100%;
		height: auto;
	}
}


/* -------------------------------------------------------------------------------- */
/*  2-1.TOPICS PRIMAY                                                               */  
/* -------------------------------------------------------------------------------- */	
.topContentsTopics{
	/* width -> .topContents側 で指定 */
	/* height -> .topContents側 で指定 */
	background-color: #fff;
}

.topContentsTopics .heading{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.8rem;
	margin-bottom: 10px;
}

.topContentsTopics--scl{ /*スクロール設定はbase.cssに記載*/
	height: calc(650px - 25px - 80px);
	overflow-y: auto;
	padding-right: 20px;
}

.topContentsTopics--scl .card{
	display: block;
	color:#333;
	border-bottom: solid 1px #dcdcdc;
	padding: 20px 35px 15px 0;
	text-decoration: none;
	position: relative;
}

.topContentsTopics--scl a.card::after{
	content: "";
	display: block;
	width: 9px;
	height: 15px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background-image: url(../img/icon_topics_primary.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.topContentsTopics--scl .card--inner{
	display: flex;
	flex-wrap: wrap;
}

.topContentsTopics--scl .kubun{
	width: 75px;
	font-size: 11px;
	color: #fff;
	text-align: center;
	padding-top: 1px;
}

.topContentsTopics--scl .kubun--info{background-color: #3362b3;}
.topContentsTopics--scl .kubun--shiken{background-color: #30aab5;}
.topContentsTopics--scl .kubun--koshin{background-color: #95bf53;}
.topContentsTopics--scl .kubun--rbss{background-color: #2a4973;}

.topContentsTopics--scl .date{
	width: calc(100% - 75px);
	font-size: 12px;
	padding-left: 12px;
}

.topContentsTopics--scl .desc{
	width: 100%;
	font-size: 14px;
	line-height: 1.6;
	margin-top: 10px;
}

@media screen and (max-width: 640px) {
	.topContentsTopics .heading{
		font-size: 1.6rem;
	}

	.topContentsTopics--scl{
		height: auto;
		padding-right: 0;
	}

	.topContentsTopics--scl .card:last-child{
		border-bottom: none;
	}

	.topContentsTopics--scl .kubun{
		font-size: 12px;
		font-weight: bold;
		padding: 2px 0;
	}

	.topContentsTopics--scl .date{
		font-weight: bold;
		position: relative;
		top: 2px;
	}
}


/* -------------------------------------------------------------------------------- */
/*  1-2.SLIDER                                                                      */  
/* -------------------------------------------------------------------------------- */
.topContentsSlider--inner{
	/* width -> .topContents側 で指定 */	
	height:582px;
	border:solid 20px #fff;
	border-radius: 20px;
	box-sizing: border-box;	
	margin-left: min(3vw, 50px);
	margin-right: min(3vw, 50px);
	box-shadow: 0px 0px 2px rgb(0 0 0 / 20%);
	position:relative;
	}

.topContentsSlider--inner .swiper-wrapper{
	width: 100%;
    height: 542px;
	background-color: #888;
}

.topContentsSlider--inner .swiper-slide{
	display: flex;
	justify-content: center;
	align-items: center;
}

/*----------------------------*/
/* 各スライドの設定　　　　　　　*/
/*----------------------------*/
/*---------------------*/
/* 共通               */
/*---------------------*/
.slide{
	background-size: cover;
	background-position: center;
	padding: 20px;
}

.slide img{
	width: 100%;
	height: auto;
}

/* 新スライド版 */
/*---------------------*/
/* 1枚目               */
/*---------------------*/
.slide1{background-image: url(../img/slide/slide_01_bg.jpg);}
.slide1 img{max-width: 800px;}

/*---------------------*/
/* 2枚目               */
/*---------------------*/
.slide2{background-image: url(../img/slide/slide_02_bg.jpg);}
.slide2 img{max-width: 800px;}

/*---------------------*/
/* 3枚目               */
/*---------------------*/
.slide3{background-image: url(../img/slide/slide_03_bg.jpg);}
.slide3 img{max-width: 800px;}

/*---------------------*/
/* 4枚目               */
/*---------------------*/
.slide4{background-image: url(../img/slide/slide_04_bg.jpg);}
.slide4 img{max-width: 800px;}

/*---------------------*/
/* 5枚目               */
/*---------------------*/
.slide5{background-image: url(../img/slide/slide_05_bg.jpg);}
.slide5 img{max-width: 800px;}

/*---------------------*/
/* 6枚目               */
/*---------------------*/
.slide6{background-image: url(../img/slide/slide_06_bg.jpg);}
.slide6 img{max-width: 800px;}

/*---------------------*/
/* 7枚目               */
/*---------------------*/
.slide7{background-image: url(../img/slide/slide_07_bg.jpg);}
.slide7 div{
	position: absolute;
	bottom: 30px;
}
.slide7 img{
	max-width: 439px; 	
}

@media screen and (max-width: 1040px) {
	.slide7 img{
		max-width: 350px; 	
	}
}



/*----------------------------*/
/* ナビゲーションの設定         */
/*----------------------------*/
.swiper-button-prev,
.swiper-button-next {	
	border-radius: 50%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 19px;
	box-shadow: 0px 0px 2px rgb(0 0 0 / 20%);
}

.swiper-button-prev {
	left: -35px !important;
	background-image: url(../img/slide/icon_prev.png);
}

.swiper-button-next {
	right: -35px !important;
	background-image: url(../img/slide/icon_next.png);
}

.swiper-button-next svg, .swiper-button-prev svg {
	display: none;
}


/*----------------------------*/
/* ページネーションの設定         */
/*----------------------------*/
.swiper-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-horizontal.swiper-pagination-bullets{
	bottom: -50px;
}


/* -------------------------------------------------------------------------------- */
/*  1-3.TOPMAIN Banner                                                              */  
/* -------------------------------------------------------------------------------- */
.topmainBnr{
	display: block;
	width: 240px;
	height: 70px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-style: normal;
	text-decoration: none;	
	border-radius: 0 0 0 30px;
	padding-top: 10px;
	padding-left: 75px;
	background-color: #fff;
	position: absolute;
	top: -15px;
	right: -10px;
	z-index: 10;
}

.topmainBnr:hover{
	opacity: 1;
}

.topmainBnr::before,
.topmainBnr::after{
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	left: 15px;
	top: 10px;
}

.topmainBnr::before{	
	background-image: linear-gradient(90deg, #c6dff3, #78bff5); /*左に記載が上*/
	border-radius: 50%;	
}

.topmainBnr::after{
	background-image: url('../img/icon_search.png');
	background-size: 23px 26px;
	background-repeat: no-repeat;
	background-position: center;
}

.topmainBnr .lead{
	font-size: 20px;
	color: #0a0c7c;
}

.topmainBnr .desc{
	color: #000;
	margin-top: 5px3;
}

/*
.topmainBnr .desc::after{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: linear-gradient(90deg, #c6dff3, #78bff5);
	border-radius: 50%;
	margin-left: 5px;
	position: relative;
	top: 3px;
}
	*/


/* -------------------------------------------------------------------------------- */
/*  1-4.TOP BUNNER                                                                    */  
/* -------------------------------------------------------------------------------- */
.topContentsBanner--list{
	max-width: 223px;
	background-color:#fff;
	border-radius: 20px;
	box-sizing: border-box;
	padding: 25px;
	box-shadow: 0px 0px 2px rgb(0 0 0 / 20%);
	}

.topContentsBanner--list li{
	margin-top: 12px;
	}

.topContentsBanner--list li:first-child{
	margin-top:0;
	}

.topContentsBanner--list li img{
	width: 100%;
	height: auto;
}	

@media screen and (max-width: 640px) {
	.topContentsBanner--list{
		max-width: 100%;
		border-radius: 0;
		background-color:transparent;
		padding: 0;
		box-shadow: none;
		margin-top: 30px;
	}

	.topContentsBanner--list li{
		margin-top: 0;
	}

	.topContentsBanner--list li img{
		width: 100px;
	}	

	/* SPではmarquee使用 */
	.marquee {
		margin-inline: auto;
		position: relative;
		height: 30px;
		overflow: hidden;
	}

	.marquee__item { /* 100pxはバナー幅 */
		width: 100px;
		height: 100%;
		position: absolute;
		left: max(calc(100px * var(--marquee-number-of-items)), 100%);
		animation: marquee-scroll var(--marquee-animation-speed) linear infinite;
		animation-delay: calc(var(--marquee-animation-speed) / var(--marquee-number-of-items) * var(--marquee-position) * -1);
	}
}

@keyframes marquee-scroll {
	to {
		left: calc(100px * -1);
	}
}


/* -------------------------------------------------------------------------------- */
/*  1-5.TOP INFO                                                                    */  
/* -------------------------------------------------------------------------------- */
.topInfo--ttlArea{
	margin-bottom:20px;
	position:relative;
	/*background:url(../img/bg_ttl_topinfo.gif);
	background:url(../common/img/bg_02.gif);*/
	background-color:#fff;
	padding-top:40px;
	/*border-top:solid 1px #e6e6e6;*/
	}

.topInfo--ttlArea h3{
	font-size:2.2rem;
	text-align:center;	
	}

.topInfo--ttlArea h3 span{
	/*padding-bottom:10px;
	border-bottom:solid 3px #ef5d6b;*/
	}

.topInfo--ttlArea p{
	position:absolute;
	right:0;
	top:17px;
	}

.topInfo--ttlArea p a{
	text-decoration:none;
	color:#333;
	background:url(../common/img/icon_arrow_01.gif) no-repeat left center;
	padding-left:18px;
	}


@media screen and (max-width: 640px) {
	.topInfo{
		padding-left: 15px;
		padding-right: 15px;
	}
	.topInfo--ttlArea h3{
		font-size:1.6rem;
		text-align: left;	
	}
}	



.topInfo--tabArea{
	border:solid 1px #d2d2d2;
	margin-bottom:55px;
	}

#tab-menu{
	margin-bottom:60px;
	}

#tab-menu li{
	width:207px;
	line-height:50px;
	text-align:center;
	float:left;
	font-size:16px;
	font-size:1.6rem;
	color:#fff;
	border-left:solid 1px #86a1d1;
	box-sizing: border-box;
	cursor: pointer;
	}

#tab-menu li:first-child{
	width:210px;
	border-left:none;
	}

#tab-menu li.tabAll{background-color:#6b8093;}
#tab-menu li.tabInfo{background-color:#3362b3;}
#tab-menu li.tabShiken{background-color:#30aab5;}
#tab-menu li.tabKoshin{background-color:#95bf53;}
#tab-menu li.tabRbss{background-color:#2a4973; /*background-color:#8d5eac;*/}

#tab-menu > li.active {
	background: #fff;
	color: #333;
	font-weight:bold;
}


@media screen and (max-width: 640px) {
	.topInfo--tabArea{
		border:none;
		}
	
	#tab-menu{
		display:none;
		}
}


#tab-box{
	width:950px;
	height:325px;
	overflow:auto;
	box-sizing: border-box;
	margin:0 auto 30px auto;
	}

#tab-box div {
  display: none;
}

#tab-box div.active {
  display: block;
}

#tab-box div dl{
	width:900px;
	border-top:solid 1px #e6e6e6;
	padding-top:16px;
	}

#tab-box div dl:first-child{
	border-top:none;
	}

#tab-box dl dt{
	float:left;
	width:240px;
	}

#tab-box dl dt > span.ico{
	width:92px;
	display:inline-block;
	text-align:center;
	margin-left:20px;
	margin-right:10px;
	font-size:14px;
	font-size:1.4rem;
	padding:2px 0;
	position:relative;
	color:#fff;
	}

.icoAll{background-color:#6b8093;}
.icoInfo{background-color:#3362b3;}
.icoShiken{background-color:#30aab5;}
.icoKoshin{background-color:#95bf53;}
.icoRbss{background-color:#2a4973;}

#tab-box dl dd{ 
	box-sizing: border-box;
	padding-bottom:16px;
	width:660px;
	float:right;
	}

.btn--bk{
	text-align:right;
	margin:0 auto 30px auto;
	width:900px;
	}

.btn--bk a{
	text-decoration: none;
	background:url(/common/img/icon_arrow_02.gif) no-repeat 0 5px;
	padding-left:15px;
	}

@media screen and (max-width: 640px) {
	#tab-box{
		width:100%;
		/*background-color:#f00;*/
		overflow:visible;
		height:auto;
		}
	
	#tab-box div.active {
	  display: none;
		}	
	
	#tab-box div:first-child{
		display:block !important;
		}
	
	#tab-box div dl{
		width:100% !important;
		}
	
	#tab-box dl dt{
		width: 100%;
		float: none;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		margin: 0 0 10px 0;
		font-size: 1.2rem;
		box-sizing: border-box;
		}

	#tab-box dl dt > span.topinfo--date{
		width: calc(100% - 75px);		
		font-size: 12px;
		font-weight: bold;
		line-height: 1;
		padding-left:10px;
	}
	
	#tab-box dl dt > span.ico{ /* 区分 */
		width: 75px;
		font-size: 11px;
		font-size: 1.1rem;
		font-weight: bold;
		line-height: 1;
		margin-left: 0;
		margin-right: 0;
		padding-top: 6px;
		padding-bottom: 3px;
	}
	
	#tab-box dl dd{
		padding-left: 0px;
		width: 100%;
		font-size: 1.2rem;
		line-height: 1.7em;
	}	
	
	#tab-box div:first-child dl dd:last-child{
		border-bottom:none;
		}
	
	.btn--bk{
		width:100%;
		}

}


/* -------------------------------------------------------------------------------- */
/*  1-6.TOP INFO                                                                    */  
/* -------------------------------------------------------------------------------- */
.topbnr--group::after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.topbnr--group .bnr{
	width:500px;
	height:130px;
    position:relative;
    float:left;
    box-sizing: border-box;
}

.topbnr--group .bnrMail{background:url(../img/bg_banner_mail.jpg) no-repeat;margin-right:40px;}
.topbnr--group .bnrNintei{background:url(../img/bg_banner_nintei.jpg) no-repeat bottom;}

.topbnr--group .bnr p{
	background-repeat:no-repeat;
	position:absolute;
	}

.topbnr--group .bnrMail p{
	width:219px;
	height:67px;
	background-image:url(../img/bg_banner_mail_ttl.png);
	top:30px;
	left:23px;
}

.topbnr--group .bnrNintei p{
	width:167px;
	height:67px;
	background-image:url(../img/bg_banner_nintei_ttl.png);
	top:35px;
	left:55px;
}

.topbnr--group .bnr a{
	width:205px;
	font-size:12px;
	font-size:1.2rem;
	display:block;
	background:#fff url(../img/icon_mail.gif) no-repeat left center;
	text-decoration:none;
	color:#091841;
	position:absolute;
	right:20px;
	line-height:40px;
	box-sizing: border-box;
	padding-left:23px;
	}

.topbnr--group .bnrPosi1{top:20px;}
.topbnr--group .bnrPosi2{top:70px;}


@media screen and (max-width: 640px) {
	.topbnr--group .bnr{
		width:100%;
		height:auto;
		background-size:contain;
		padding:50px 0 30px 0;
		position:relative;
		}
    
    .topbnr--group .bnrMail{
		background:url(../img/sp/bg_banner_mail.jpg) no-repeat;
		background-color:#335389;
    }
    
    .topbnr--group .bnrNintei{
		background:url(../img/sp/bg_banner_nintei.jpg) no-repeat;
		background-color:#31869b;
    }
    
    .topbnr--group .bnr p{
            position:static;
            width:50%;
            height:0;
            padding-top:15.25%;
            margin-left:auto;
            margin-right:auto;
            margin-bottom:25px;
            }

    .topbnr--group .bnrMail p{
        background-image:url(/img/sp/bg_banner_mail_ttl.png);
        background-size:contain;
        }
    
    .topbnr--group .bnrNintei p{
        background-image:url(/img/sp/bg_banner_nintei_ttl.png);
        background-size:contain;
        }
	
	.topbnr--group .bnr a{
		width:70%;
		position:static;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:10px;
		}
}


/* ================================================================================ */
/*  2.CLEAR                                                                         */  
/* ================================================================================ */

.topimpInfo::after , .topInfo--tabArea ul::after , #tab-box div dl::after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}



/* ================================================================================ */
/*  3.IMG                                                                           */  
/* ================================================================================ */


.topmainBnr a , .bnr p{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}