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



/****************************************************************************************************
contents
****************************************************************************************************/
#contents {
	width: 1200px;
	margin: auto;
	/* 2024/12/6変更 */		
	padding: 80px 0 120px 0;	
	/* padding: 90px 0 120px 0; */
}



/****************************************************************************************************
main
****************************************************************************************************/
#main {
	display: none;
	position: relative;
}
#main > figure img {
	object-fit: cover;
	width: 100%;
	height: 100vh;
	min-height: 900px;
}
#main-text {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin-left: 1.25vw;
	margin-top: 1.25vw;
	mix-blend-mode: multiply;
}
/* .main-text1,
.main-text2 {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	mix-blend-mode: multiply;
} */
.main-text1 {
	display: none;
	position: absolute;
	left: 0;
	top: -50px;
	mix-blend-mode: multiply;
}
.main-text2 {
	display: none;
	position: absolute;
	left: 0;
	top: -80px;
	mix-blend-mode: multiply;
}
.main-logo {
	display: none;
	mix-blend-mode: multiply;
}
#main-btn {
	display: none;
	position: absolute;
	left: 3px;
	/* 24/12/6変更 */
	bottom: 95px;
	/* bottom: 120px; */
	mix-blend-mode: multiply;
}
#main-btn1 {
	display: none;
	position: absolute;
	left: 3px;
	/* 24/12/6変更 */
	bottom: 5px;
	/* bottom: 30px; */
	mix-blend-mode: multiply;
}
/* 2024/12/6追加 */
#main-btn2 {
	display: none;
}
#main-btn2 .pl-btn{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	position: absolute;
	left: 3px;
	bottom: 190px;
	gap:10px;
}	
	
#scroll {
	position: absolute;
	left: 50%;
	bottom: 60px;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	font-size: 0.8rem;
	line-height: 1.0;
	letter-spacing: 1px;
}
#scroll a {
	display: block;
}
#scroll a::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 50px;
	margin-top: 0.8em;
	margin-left: 6px;
	border-bottom: 1px solid #238C00;
	border-left: 1px solid #238C00;
	-webkit-transform: translate(0, 0) skew(0, -45deg);
	transform: translate(0, 0) skew(0, -45deg);
}

/****************************************************************************************************
top-banner   2024/12/6追加
****************************************************************************************************/


/* バナー1つか2つの場合に有効 */
/* #top-banner.top-flex{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	gap:20px;
} */

/* バナーが3つの場合に有効 */
#top-banner.top-flex{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap:20px;
}

#top-banner .container.wide1 {
	width: 600px;
	/* width: 100%; */
	height: auto;
}

/* バナーを1〜2つの場合に有効 */
/* #top-banner .container-block{
	width:600px;
	height: 300px;
} */

/* #top-banner .col-box img{
	width:500px;
	height: 250px;
}
#top-banner .col-box iframe{
	width:400px;
	height: 165px;
} */


/* バナーが3つの場合に有効 */
#top-banner .container-block{
	width:400px;
	height: auto;
}
#top-banner .col-box img{
	width:350px;
	height: 160px;
}
#top-banner .col-box iframe{
	width:350px;
	height: 160px;
}
#top-youtube .container-block .col-ttl h3.base{
	font-size: 0.9rem;
}

/* 下記は常に必要 */
#top-banner .col-box + .col-box{
	margin-top:0;
}
#top-banner .col-ttl + .col-ttl{
	margin-top: 1rem;
}
#top-banner .container.pd40{
	padding:20px 10px;
}



/****************************************************************************************************
menu
****************************************************************************************************/
/* 2024/12/6追加 */
#top-menu{
	margin-top: 60px;
}

#top-menu .container a.bg {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
	width: 100%;
	left: 0;
	top: 0;
	background: #1A6600;
}
#top-menu .container a.bg::after {
	position: absolute;
	content: "";
	display: inline-block;
	width: 30px;
	height: 7px;
	right: 20px;
	bottom: 18px;
	border-bottom: 1px solid #FFF;
	border-right: 1px solid #FFF;
	-webkit-transform: translate(0, 0) skew(45deg, 0);
	transform: translate(0, 0) skew(45deg, 0);
}
#top-menu h3 {
	color: #FFF;
}
#top-menu p {
	color: #FFFFBC;
	line-height: 1.6;
}
#top-menu .container > div + div {
	margin-top: 20px;
}

/* 2024/12/6追加 */
#top-menu .container a.bgYd9a {
	background: #00a99d;
}
#top-menu .container a.bgYb28 {
	background: #dd756b;
}
	

/****************************************************************************************************
kazokuso
****************************************************************************************************/
#kazokuso {
	margin-top: 80px;
}
#kazokuso .bg {
	background: #FFFFE7 url(../img/top/kazokuso-bg.jpg) no-repeat right center;
	background-size: cover;
}
#kazokuso p.xxlarge {
	font-size: 1.466rem;
}



/****************************************************************************************************
reason
****************************************************************************************************/
#reason {
	margin-top: 80px;
}
#reason .container {
	padding: 40px 50px 30px 50px;
}
#reason .container ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0 0;
	font-size: 1.466rem;
	font-weight: bold;
	line-height: 1.8;
}
#reason .container ul li {
	width: 18.1em;
}
#reason .container figure {
	position: absolute;
	right: 25px;
	bottom: 0;
}



/****************************************************************************************************
service
****************************************************************************************************/
#service {
	margin-top: 80px;
}
#service .container {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
#service .container a.bg {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #FFFFEC;
	z-index: 0;
}
#service .container a.bg::after {
	position: absolute;
	content: "";
	display: inline-block;
	width: 30px;
	height: 7px;
	right: 20px;
	bottom: 18px;
	border-bottom: 1px solid #238C00;
	border-right: 1px solid #238C00;
	-webkit-transform: translate(0, 0) skew(45deg, 0);
	transform: translate(0, 0) skew(45deg, 0);
}
#service .container .col-ttl {
	position: relative;
	z-index: 10;
	pointer-events: none;
	margin-left: -2px;
}
#service .container .col-box {
	position: relative;
	z-index: 10;
	line-height: 1.7;
	margin-left: -2px;
}



/****************************************************************************************************
banner
****************************************************************************************************/
#banner {
	/* margin-top: 95px; */
	margin-top: 50px;	
}
#banner ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	/* 2024/05/14 変更 */
	/* -webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center; */
	-webkit-box-pack: left;
	-webkit-justify-content: left;
	-ms-flex-pack: left;
	justify-content: left;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 20px;
	/* 2024/05/14 追加 */
  margin:10px 0;
}
/* 2025/06/02追加 */
#banner ul.download{
	justify-content: center;
	margin-bottom: 50px;
}
/******************/


/****************************************************************************************************
News
****************************************************************************************************/
#news {
	margin-top: 90px;
}
#news-list {
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	text-align: left;
	padding: 0.6em 0;
}
#news-list dl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding: 1.4em 120px;
}
#news-list dl + dl {
	border-top: 1px dotted #CCC;
}
#news-list dl dt {
	color: #008C00;
	font-weight: bold;
	white-space: nowrap;
}
#news-list dl dd {
	margin-left: 2.5em;
	-webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
#news-list dl dd a {
	display: block;
	text-decoration: underline;
	margin-left: 110px;
}
#news-list dl dd .category {
	float: left;
	display: block;
	width: 100px;
	margin-top: 4px;
	padding: 5px 0 4px 0;
	background: #00B200;
	color: #FFF;
	font-size: 0.866rem;
	line-height: 1.0;
	text-align: center;
}
#news-list dl dd .category.info {
	background: #00B200;
}
#news-list dl dd .category.seminar {
	background: #00A3D9;
}
#news-list dl dd .category.seminar-bk {
	background: #004C66;
}
#news-list dl dd .category.event {
	background: #006600;
}







@media screen and (max-width: 767px),
screen and (max-width: 960px) and (orientation: landscape) {



	/****************************************************************************************************
	contents
	****************************************************************************************************/
	#contents {
		width: 92vw;
		margin: auto;
		padding: 10vw 0 12vw 0;
	}
	#top-youtube iframe{
		width: 100%;
		height: 100%;
	}
	
	
	/****************************************************************************************************
	main
	****************************************************************************************************/
	#main > figure img {
		object-position: 35% 50%;
		min-height: initial;
		min-height: auto;
	}
	#main-text {
		width: 88vw;
		/* 2024/12/6変更 */
		top:26%;
		/* top:0; */
		/* top: 44%; */
		/* top: 34%; */
		margin-left: 0;
		margin-top: 0;
		mix-blend-mode: normal;
	}
	/* 2024/12/6追加 */
	.main-text1 {
		width: 88vw;
		top:0;
		margin-left: 0;
		margin-top: 0;
		mix-blend-mode: normal;
	}		
	.main-text2 {
		width: 88vw;
		top:0;
		margin-left: 0;
		margin-top: 0;
		mix-blend-mode: normal;
	}
	#main-btn {
		position: absolute;
		left: 0;
		/* 2024/12/6変更 */	
		bottom: -32vw;
		/* bottom: -18vw; */
		width: 88vw;
	}
	#main-btn1 {
		position: absolute;
		left: 0;
		/* 2024/12/6変更 */	
		bottom: -46vw;					
		/* bottom: -32vw; */
		width: 88vw;
	}
		/* 2024/12/6追加 */
		#main-btn2 .pl-btn{
			position: absolute;
			left: 0;
			bottom: -18vw;
			width: 88vw;
		}		
	#scroll {
		/* 2024/04/19 変更 bottom: 10vw; */
		bottom: 30vw;
		font-size: 0.666rem;
		letter-spacing: 0;
	}
	#scroll a::after {
		width: calc(1vw * 1.5);
		height: calc(5vw * 1.5);
		margin-top: 0.5em;
		margin-left: 2px;
	}
	
	/****************************************************************************************************
	top-banner   2024/12/6追加
	****************************************************************************************************/

	#top-banner.top-flex{
		display: block;
	}
	#top-banner .container.wide1{
		height: auto;
	}
	
	#top-banner .container-block{
		width:100%;
		height: auto;
	}
	#top-banner .col-box{
		width:100%;
	}
	#top-banner .col-box img{
		width: 90%;
    height: auto;
	}
	#top-banner .col-box iframe{
		width: 90%;
  	height: 100%;
	}
	#top-banner .col-box + .col-box{
		margin-top:10px;
	}
	#top-banner .container.pd40{
		padding: 10px;
	}
	
		
	
	/****************************************************************************************************
	menu
	****************************************************************************************************/
	/* 2024/12/6追加 */
	#top-menu {
		margin-top: 35px;
	}	
	#top-menu .container {
		min-height: 40vw;
	}
	#top-menu .container a.bg::after {
		width: calc(3vw * 1.5);
		height: calc(0.7vw * 1.5);
		right: 3.5vw;
		bottom: 3vw;
	}
	#top-menu p {
		font-size: 0.8rem;
	}
	#top-menu .container > div + div {
		margin-top: 2vw;
	}
	
	
	
	/****************************************************************************************************
	kazokuso
	****************************************************************************************************/
	#kazokuso {
		margin-top: 10vw;
	}
	#kazokuso .bg {
		background: #FFFFE7 url(../img/top/kazokuso-bg.jpg) no-repeat right bottom;
		background-size: auto 42vw;
		padding-bottom: 46vw;
	}
	#kazokuso p.xxlarge {
		font-size: 1.2rem;
	}
	
	
	
	/****************************************************************************************************
	reason
	****************************************************************************************************/
	#reason {
		margin-top: 10vw;
		font-size: 0.8rem;
	}
	#reason .container {
		/* 24/04/24変更padding: 5vw; */
		padding-top: 0vw;
	    padding-right: 7vw;
	    padding-bottom:7vw;
		padding-left: 2vw;
	}
	#reason .container ul {
		font-size: 1.0rem;/* 24/04/24変更 1.2rem; */
	}
	#reason .container ul li {
		width: auto;
	}
	#reason .container figure {
		width: 42vw;
		right: -2vw;
	}
	
	
	
	/****************************************************************************************************
	service
	****************************************************************************************************/
	#service {
		margin-top: 10vw;
	}
	#service .container {
		padding: 5vw 0;
	}
	#service .container.full-img {
		padding: 0;
	}
	#service .container a.bg::after {
		width: calc(3vw * 1.5);
		height: calc(0.7vw * 1.5);
		right: 3.5vw;
		bottom: 3vw;
	}
	#service .container .col-ttl {
		margin-left: 0;
	}
	#service .container .col-box {
		font-size: 0.7rem; /* 24/04/24変更font-size: 0.8rem;*/
		line-height: 1.8;
		margin-left: 0;
	}
	
	
	
	/****************************************************************************************************
	banner
	****************************************************************************************************/
	#banner {
		margin-top: 10vw;
	}
	#banner ul {
		gap: 2vw;
	}
	#banner ul li {
		width: 45vw;
	}
		/* 2025/06/02追加 */
	#banner ul.download{
		margin-bottom: 30px;
	}
	#banner ul.download li {
		width: 100vw;
	}
	/******************/
	
	
	/****************************************************************************************************
	News
	****************************************************************************************************/
	#news {
		margin-top: 10vw;
		font-size: 0.8rem;
	}
	#news-list dl {
		-webkit-box-orient:vertical;
		-webkit-box-direction:normal;
		-webkit-flex-direction:column;
		-ms-flex-direction:column;
		flex-direction:column;
		padding: 1.4em 0;
	}
	#news-list dl dd {
		margin-left: 0;
	}
	#news-list dl dd a {
		margin-left: 22vw;
	}
	#news-list dl dd .category {
		width: 20vw;
		margin-top: 0.3em;
		padding: 0.4em 0 0.4em 0;
		font-size: 0.8rem;
	}
	
}