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

.site_title {
	width:100%;
	background-image:url(../img/top/top_title_bg_pc.webp);
	background-repeat:no-repeat;
	background-position: center bottom;
	background-size: cover;
	height:315px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom:50px;
}
.site_title > div {
	width:90%;
	max-width:680px;
}

/*目次組*/
.table_contents {
	width:100%;
	position:relative;
	margin-bottom:50px;
}
.table_contents .boxmenu {
	width:100%;
	position:relative;
	background-image:url(../img/top/top_content_bg1-2.svg);
	background-repeat:no-repeat;
	background-position:50vw bottom;
	background-size: auto 465px;
}
/*目次組1*/
ul.boxmenu_01 {
	width:100%;
	max-width:1480px;
	padding:0 20px 50px;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	z-index:2;
	position:relative;
	background-image:url(../img/top/top_content_bg1.svg);
	background-repeat:no-repeat;
	background-position:80px bottom;
	background-size: auto 465px;
}
ul.boxmenu_01 > li {
	width: calc((100% - 50px) / 3);
	height:220px;
	background:#999;
	border-radius: 10px;
	transition: width 0.5s ease;
	position:relative;
	overflow: hidden;
}
ul.boxmenu_01 > li a {
	display:block;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	z-index:8;
	position:relative;
}
ul.boxmenu_01 > li p {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	padding:0.5em 0.5em 1em;
	height:100%;
	background: linear-gradient(to top, rgba(72,105,135,0.9) 0%, transparent 50%);
	background-size: 100% 100%;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
ul.boxmenu_01 > li p.greet_text {
	color:#fff;
	font-weight:bold;
}
ul.boxmenu_01 > li p.greet_text span {
	z-index:12;
}
ul.boxmenu_01 > li p.greet_text span br {
	display:none;
}
ul.boxmenu_01 > li p.greet_text a{
	display:inline;
}
ul.boxmenu_01 > li p.greet_text a:hover{
	text-decoration:underline;
}
ul.boxmenu_01 > li p span {
	display:inline-block;
	width:auto;
	text-align:center;
	font-size:18px;
}
ul.boxmenu_01 > li a p span {
	height: 26px;
    box-sizing: inherit;
}
ul.boxmenu_01 > li img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 10px;
	object-position: top;
}
ul.boxmenu_01 > li.greet_link {
	display: flex;
	flex-wrap: wrap;
	background-image:url(../img/top/top_photo1.webp);
	background-repeat:no-repeat;
	background-position:center top;
	background-size: cover;
}
ul.boxmenu_01 > li.greet_link div.greet1,
ul.boxmenu_01 > li.greet_link div.greet2 {
	width:50%;
}
.greet_link ul {
	position:absolute;
	top:0px;
	left:0;
	width:100%;
	height:100%;
	background: linear-gradient(to top, rgba(72,105,135,0.9) 0%, transparent 50%);
	background-size: 100% 100%;
	border-radius: 10px;
	display: flex;
	pointer-events: none; 
}
.greet_link ul li a {
	pointer-events: auto;
}
.greet_link ul li {
	font-size:18px;
	line-height: 24px;
	width:50%;
}
.greet_link ul li.matsumura {
	text-align:left;
	position: absolute;
  left: 10px;
  bottom: 33px;
}
.greet_link ul li.inuzuka {
	text-align:right;
	position: absolute;
  right: 10px;
  bottom: 33px;
}

.greet_link ul li a {
	display: inline-block;
	line-height: 1.3;
	color:#fff;
	padding: 0.3em 0.5em;
	font-size:90%;
}

.greet_title {
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	padding: 0.5em 0.5em 1em;
	
}
.greet_title b {
	display:block;
	height: 26px;
	margin:auto;
	z-index:11;
	text-align:center;
	color:#fff;
	font-weight:bold;
	line-height: 1.4;
	font-size:18px;
    white-space: nowrap;
	position: relative;
	width: fit-content;
}


/*実行委員会*/
.committee {
	width:100%;
	margin:0 auto 0;
	background:#f2f2f2;
	padding:45px 0;
}
.committee h2 {
	font-size:21px;
	font-weight:bold;
	text-align:center;
	width:100%;
	margin:auto;
	max-width:1440px;
	line-height:1.3;
	padding:0 0 20px;
}
.committee h2 span {
	display:inline-block;
}

.comm_sec {
	width:100%;
	margin:0 auto 5px;
	max-width:1480px;
	padding:0 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	gap: 30px;
}
.comm_sec > div {
	margin:0;
}
.comm_sec > div > ul {
	width:100%;
	margin:auto;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
.comm_sec > div > ul li {
	font-size:90%;
}
.comm_sec > div > ul li span {
	display:block;
}
.comm_sec p {
	text-align:right;
	font-size:85%;
	width:100%;
}
@media screen and (max-width: 1270px) {
	.comm_sec {
		max-width:800px;
		display:flex;
		justify-content:flex-start;
		column-gap:30px;
		row-gap:0;
	}

	.comm_sec > div,
	.comm_sec > div > ul {
		display:contents;
	}

	.comm_sec > div > ul li {
		width:calc((100% - 30px) / 2);
	}

	.comm_sec > div > ul li span {
		white-space:nowrap;
	}

	/* 2列時の並び順 */
	.comm_sec > div:first-child > ul > li:first-child {
		order:1;
	}
	.comm_sec > div:nth-child(2) > ul > li:first-child {
		order:2;
	}
	.comm_sec > div:first-child > ul > li:nth-child(2) {
		order:3;
	}
	.comm_sec > div:nth-child(2) > ul > li:nth-child(2) {
		order:4;
	}

	.comm_sec p {
		order:5;
	}
}
@media screen and (min-width: 768px) {
	/*PC hover*/
	.greet_link:has(.greet1:hover) ul li.matsumura a,
	.greet_link:has(.greet2:hover) ul li.inuzuka a {
		text-decoration:underline;
		color:#fff;
	}
	.greet_link ul li a:hover {
		text-decoration:underline;
		color:#fff;
	}
	.greet_link ul,
	ul.boxmenu_01 > li p {
		transition: background 0.3s ease;
	}
	ul.boxmenu_01 > li a:hover p span {
		text-decoration:underline;
		color:#fff;
	}
	
	ul.boxmenu_01 > li.greet_link::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255, 0.2);
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
	}
	ul.boxmenu_01 > li.greet_link:hover::before {
		opacity: 1;
	}
	
	ul.boxmenu_01 > li a:hover p {
		background-color: rgba(255,255,255, 0.2);
	}
	
	
}

@media screen and (max-width: 990px) {
	/*目次組1*/
	ul.boxmenu_01 > li {
		width: calc((100% - 25px) / 2);
	}
	.table_contents .boxmenu {
		background-image:url(../img/top/top_content_bg2-2.svg);
		background-size: auto 710px;
	}
	/*目次組1*/
	ul.boxmenu_01 {
		background-image:url(../img/top/top_content_bg2.svg);
		background-size: auto 710px;
	}
}


@media screen and (max-width: 768px) {
	.site_title {
		background-image:url(../img/top/top_bg_sp.webp);
		height:175px;
		display: block;
		margin-bottom:30px;
		background-position:center center;
	}
	.site_title > div {
		width:100%;
		max-width:100%;
		height:175px;
		padding:30px;
		text-align:center;
	}
	.site_title > div img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	/*目次組*/
	.table_contents {
		margin-bottom:40px;
	}
	.table_contents .boxmenu,
	ul.boxmenu_01 {
		background-size: auto calc(100% - 50px);
	}
	
	/*目次組1*/
	ul.boxmenu_01 {
		padding:0 10px 30px;
		gap: 10px;
	}
	ul.boxmenu_01 > li {
		width: 100%;
	}
	ul.boxmenu_01 > li.greet_link {
		background-position-y: top;
	}
	ul.boxmenu_01 > li:nth-child(3) img {
		object-position: center;
	}



	/*実行委員会*/
	.committee {
		padding:35px 0 50px;
	}
	.committee h2 {
		padding:0 10px 20px;
	}
	.comm_sec {
		padding:0 10px;
		display: block;
		flex-wrap: initial;
		gap: initial;
	}
	.comm_sec > div {
		width: 100%;
		display:block;
	}
	.comm_sec > div > ul {
		width:100%;
		margin:auto;
		display:flex;
		flex-wrap:wrap;
		gap:0;
		margin-bottom:0;
	}
	.comm_sec > div > ul li {
		width: 100%;
		font-size:14px;
	}
	.comm_sec > div > ul li span {
		display:block;
		white-space:normal;
	}
	.comm_sec p {
		text-align:right;
		font-size:12px;
		width:100%;
	}



}
@media screen and (max-width: 390px) {
	ul.boxmenu_01 > li.greet_link {
		background-image: url(../img/top/top_photo1_380.webp);
	}
	.greet_link ul li {
		font-size:4.2vw;
	}
	ul.boxmenu_01 > li p.greet_text span br {
		display:block;
	}
	ul.boxmenu_01 > li p.greet_text span b {
		display:none;
	}

}


/* PC：画面幅に応じてファーストビューの高さを調整 */
@media screen and (min-width: 991px) {

	/* キービジュアル */
	.site_title {
		height: clamp(220px, 20vw, 315px);
		margin-bottom: clamp(30px, 3vw, 50px);
	}

	/* キービジュアル内のタイトル画像 */
	.site_title > div {
		width: clamp(480px, 45vw, 680px);
	}

	/* メニューボタン */
	ul.boxmenu_01 > li {
		height: clamp(150px, 14.9vw, 220px);
	}

	/* 通常メニューボタンのリンクをボタンの高さに合わせる */
	ul.boxmenu_01 > li:not(.greet_link) > a {
		height: 100%;
	}

	/* 通常のメニューボタン画像 */
	ul.boxmenu_01 > li:not(.greet_link) img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 通常ボタンの文字 */
	ul.boxmenu_01 > li a p span {
		height: auto;
		line-height: 1.4;
		font-size: clamp(14px, 1.2vw, 18px);
		white-space: nowrap;
	}
	ul.boxmenu_01 > li p.greet_text span {
		line-height: 1.4;
		font-size: clamp(14px, 1.2vw, 18px);
	}
	.greet_title b {
		height: auto;
		line-height: 1.4;
		font-size: clamp(14px, 1.2vw, 18px);
		white-space: nowrap;
	}

	/* 「挨拶」ボタン */
	ul.boxmenu_01 > li.greet_link div.greet1,
	ul.boxmenu_01 > li.greet_link div.greet2,
	ul.boxmenu_01 > li.greet_link div.greet1 a,
	ul.boxmenu_01 > li.greet_link div.greet2 a {
		height: 100%;
	}

	ul.boxmenu_01 > li.greet_link img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}


}
/* PC：画面高さが820px以下の場合 */
@media screen and (min-width: 991px) and (max-height: 820px) {

	.site_title {
		height: 280px;
		margin-bottom: 40px;
	}

	.site_title > div {
		width: 600px;
	}

	ul.boxmenu_01 {
		row-gap: 23px;
	}

	ul.boxmenu_01 > li {
		height: 205px;
	}
}

/* PC：画面高さが800px以下の場合 */
@media screen and (min-width: 991px) and (max-height: 800px) {

	.site_title {
		height: 260px;
		margin-bottom: 35px;
	}

	.site_title > div {
		width: 560px;
	}

	ul.boxmenu_01 {
		row-gap: 22px;
	}

	ul.boxmenu_01 > li {
		height: 200px;
	}
}

/* PC：画面高さが720px以下の場合 */
@media screen and (min-width: 991px) and (max-height: 720px) {

	.site_title {
		height: 200px;
		margin-bottom: 25px;
	}

	.site_title > div {
		width: 530px;
	}

	ul.boxmenu_01 {
		row-gap: 18px;
	}

	ul.boxmenu_01 > li {
		height: 180px;
	}

	.table_contents .boxmenu,
	ul.boxmenu_01 {
		background-size: auto 378px;
	}
}