@charset "utf-8";

/*
header
	mobile,tablet: -767px
	tablet,PC: 768px-
main
	mobile,tablet: -767px
	tablet,PC: 768px-
footer
	mobile,tablet: -767px
	tablet,PC: 768px-
*/

/* ALL
-------------------------------------------------- */
html,
body {
	height: 100%;
	width: 100%;
	margin: 0 auto;
	font-size: 100%;
	font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}

#container {
	width: 100%;
}

a img {
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
a:hover img {
	opacity: 0.7;
}

.for_sp { display: block; }
.for_pc { display: none; }
.tabBlock { display: block; }
.tabNone { display: none; }
@media all and (min-width: 768px) {
	.for_sp { display: none; }
	.for_pc { display: block; }
}
@media all and (min-width: 1025px) {
  .tabBlock { display: none; }
  .tabNone { display: block; }
}

/* header
-------------------------------------------------- */
header {
	width: 100%;
}
@media all and (min-width: 768px) {
	header {
		background: url(../images/header_bg.jpg) no-repeat center top;
		background-size: cover;
	}
  .header_logo {
    padding: 30px 0;
  }
}

.header_box {
	width: 100%;
}
@media all and (min-width: 768px) {
	.header_box {
		width: 96%;
		max-width: 1100px;
		margin: 0 auto;
	}
}
@media all and (min-width: 1100px) {
	.header_box {
		width: 100%;
	}
}
.header_link {
  margin: 0px 0 13px;
}
@media all and (min-width: 768px) {
  .header_link {
    margin: 0 0 34px;
  }
}


/* footer
-------------------------------------------------- */
footer {
	width: 100%;
	background: #0054A7;
}
.footer_box {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
.footer_logo {
	padding: 3% 2%;
}

@media all and (min-width: 768px) {
  footer {
    padding: 60px 0 25px;
  }
  .footer_logo {
    padding: 0 0 3%;
  }
}


/* pagetop
-------------------------------------------------- */
.pageTop__wrap {
  position: relative;
}
.pageTop {
  position: fixed;
  bottom: 15px;
  right: 15px;
  transition: all 0.3s;
}
.pageTop:hover {
  opacity: 0.7;
}
.pageTop a {
  display: block;
  height: 60px;
  width: 60px;
}

@media all and (min-width: 768px) {
  .pageTop {
    bottom: 20px;
    right: 20px;
  }
  .pageTop a {
    width: 100%;
    height: 100%;
  }
}


/* main
-------------------------------------------------- */
main {
	width: 100%;
}

.nav_box {
	width: 94%;
	max-width: 1100px;
	margin: 0 auto;
}
@media all and (min-width: 1100px) {
	.nav_box {
		width: 100%;	
	}
}

.nav_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.nav_list > li {
	width: 48.18181%;
}
.nav_list > li.long {
  width: 100%;
}

.section_box {
	width: 100%;
	max-width: 1100px;
	margin: 9% auto 0;
}

.section_box_ttl {
	margin-bottom: 5%;
}
@media all and (min-width: 768px) {
  .section_box_ttl {
    margin-bottom: 3%;
  }
}

.section_box_subttl {
	margin-bottom: 1.81818%;
  padding-left: 16px;
	color: #444;
	font-size: 15px;
	text-align: left;
  position: relative;
}
.section_box_subttl::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #444;
  position: absolute;
  left: 0;
  top: calc(50% - 7px);
}
@media all and (min-width: 768px) {
  .section_box {
    margin: 4.54545% auto 0;
  }
	.section_box_subttl {
    font-size: 23px;
    padding-left: 26px;
	}
  .section_box_subttl::before {
    width: 22px;
    height: 22px;
    top: calc(50% - 13px);
  }
}

.section_ec {
  background-color: #EBF5DD;
  padding: 35px 15px;
}
.section_ec_inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.section_ec_link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.section_ec_link li {
  margin-bottom: 4%;
}
.section_ec_link li:last-of-type {
  margin-bottom: 0;
}
.section_ec_txt {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.42;
  text-align: center;
  color: #707070;
  margin: 15px 0;
}
@media all and (min-width: 768px) {
  .section_ec {
    padding: 35px 0;
  }
  .section_ec_txt {
    font-size: 19px;
    margin: 22px 0 25px;
  }
}
@media all and (min-width: 1025px) {
  .section_ec_link li {
    margin: 0 0 2% 2%;
  }
  .section_ec_link li:last-of-type {
    margin-right: 0;
  }
}


.event_list {
	width: 94%;
	margin: 0 auto;
}
@media all and (min-width: 768px) {
	.event_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}
}
.event_list > li {
	text-align: center;
	margin-bottom: 3.125%;
}
@media all and (min-width: 768px) {
	.event_list > li {
		width: 48.72727%;
		margin-bottom: 2.54545%;
	}
	.event_list > li.long {
		width: 100%;
	}
	.event_list > li.half {
		width: 50%;
	}
}
.event_list > li.mb0 {
	margin-bottom: 0;
}

.border {
	border: #CCC 1px solid;
}

.btn_link {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}
@media all and (min-width: 768px) {
	.btn_link {
		width: 42.36363%;
	}
}

.btn_link.nav {
	margin: 5.45454% auto 1.81818%;
}

.btn_link.chirashi {
	width: 68%;
	margin: 5.66037% auto;
}
@media all and (min-width: 768px) {
	.btn_link.chirashi {
		width: 61.69811%;
	}
}

.btn_link.map {
	padding-bottom: 5.45454%;
}
@media all and (min-width: 768px) {
	.btn_link.map {
		padding-bottom: 2.72727%;
	}
}

.btn_link_ec {
  margin-top: 30px;
}

/* ADD 2025-05-26 >>> */
.image-link-wrapper {
  position: relative;
  max-width: 100%;
  width: 100%;
}
.responsive-img {
  width: 100%;
  height: auto;
  display: block;
}
.link-area {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.link-area:hover {
  background-color: rgba(255, 255, 255, 0.164); /* ホバー時に薄い白 */
}
/* リンク1の位置とサイズ（%指定でレスポンシブ対応） */
.link1 {
  top: 92.6%;
  left: 54.7%;
  width: 22%;
  height: 6.8%;
}
.link2 {
  top: 92.6%;
  left: 77.1%;
  width: 22%;
  height: 6.8%;
}
.link3 {
  top: 1%;
  left: 53.5%;
  width: 22.2%;
  height: 12%;
}
.link4 {
  top: 1%;
  left: 75.5%;
  width: 22.2%;
  height: 12%;
}
@media screen and (max-width: 767px) {
  .link1, .link2 {
    font-size: 14px;
    height: 6.8%;
  }
}
@media screen and (max-width: 767px) {
  .link3, .link4 {
    font-size: 14px;
    height: 6.8%;
  }
}
/* ADD 2025-05-26 <<< */