@charset "utf-8";

.serif { font-family: serif; }
.ofi { width: 100%; height: 100%; object-fit: cover; }
.inner { width: 1100px; max-width: 92%; margin: 0 auto; }

#contents_wrap { padding: 0; }
#contents_wrap::after,
section::after { content: none; }
section { margin: 0; }

.clear::after { content: ''; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0; }
.btn { width: 100%; text-align: center; }
.btn { text-align: center; }
.btn a { display: inline-block; max-width: 86%; transition: opacity .5s; }

@media screen and (hover: hover) {
	.btn a:hover { opacity: .75; }
}


/* ---------------------------------------------------

------------------------------------------------------ */
#bread_area ol { display: flex; justify-content: flex-end; width: 1000px; max-width: 96%; margin: 0 auto; padding: 15px 0; }
#bread_area li { list-style: none; }
#bread_area li+li::before { content: '>'; margin-left: 7px; }
#bread_area li:last-child a { font-weight: bold; }

#main_area { background: url(../img/bg.jpg); }
#main_area div { box-sizing: border-box; }

@media screen and (max-width: 900px) {
	#main_area { background-size: 75%; }
}
@media screen and (max-width: 768px) {
	#main_area { width: 100%; max-width: 100%; margin: 0 auto; }
}
@media screen and (max-width: 640px) {}


/* ---------------------------------------------------
	#lead_col
------------------------------------------------------ */
#lead_col { position: relative; padding-top: 10rem; background: url(../img/lead_bg_01.png); }
#lead_col .sub_tit { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0; display: block; width: 600px; max-width:100%; margin: 0 auto; padding: 20px 20px 90px; box-sizing: border-box; text-align: center; }
#lead_col .sub_tit::before { position: absolute; top: 0; left: 0; z-index: -1; content: ''; display: block; width: 100%; height: 100%; clip-path: polygon(50% 100%, 0 0, 100% 0); background: url(../img/sub_tit_bg.gif)#cfaf4c; }

#lead_col h2 { width: 600px; max-width:100%; margin: 0 auto; padding: 65px 4% 70px; box-sizing: border-box; background: url(../img/tit_bg.jpg)no-repeat center/contain; text-align: center; }
#lead_col h2>span { display: inline-block; }
#lead_col h2>span:first-child { padding-bottom: 30px; }
#lead_col h2>span:first-child img { filter: drop-shadow(4px 4px 4px black); }
#lead_col h2>span:last-child { padding-top: 27px; background: url(../img/line_01.svg)no-repeat top center; }

#lead_col .cnav { display: flex; width: 900px; max-width: 100%; margin: 60px auto 0; }
#lead_col .cnav li { width: calc(100% / 4); clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%); overflow: hidden; }
#lead_col .cnav li.active a { opacity: 1; }
#lead_col .cnav li a { display: block; padding: 10px 0; text-align: center; opacity: .5; transition: opacity .5s; pointer-events: none;}
#lead_col .cnav li:nth-child(1) a { background: #eb6e82; }
#lead_col .cnav li:nth-child(2) a { background: #6ebe5a; }
#lead_col .cnav li:nth-child(3) a { background: #f08200; }
#lead_col .cnav li:nth-child(4) a { background: #38a0dc; }

@media screen and (hover: hover) {
	#lead_col .cnav li a:hover { opacity: 1; }
}
@media screen and (max-width: 640px) {
	#lead_col { padding-top: 16vw; background-size: 11%; }
	#lead_col .sub_tit { padding: 15px 6% 10vw; }
	#lead_col .sub_tit::before { background-size: 11%; }
	#lead_col .sub_tit img { width: 34vw; }
	#lead_col h2>span:first-child { padding-bottom: 20px; }
	#lead_col h2>span:first-child img { width: 48vw; }
	#lead_col h2>span:last-child img { width: 74vw; }
	#lead_col .cnav { margin-top: 20px; }
	#lead_col .cnav li a img { width: 5.5vw; }
}


/* ---------------------------------------------------
	#menu_col
------------------------------------------------------ */
#menu_col { position: relative; z-index: 0; padding-top: 30px; border-top: 5px solid #6ebe5a; }
#menu_col::before { position: absolute; z-index: -1; top: 0; left: 0; content: ''; display: block; width: 100%; height: 15.5rem; background: url(../img/lead_bg_01.png) bottom; }
#menu_col .inner::before { content: ''; display: block; width: 600px; max-width: 100%; height: 30px; margin: 0 auto; background: url(../img/date_bg.svg)no-repeat center top/cover; mix-blend-mode: multiply; }
#menu_col .period { position: relative; width: 600px; max-width:100%; margin: 0 auto; padding: 0 6% 5.5rem; box-sizing: border-box; mix-blend-mode: multiply; text-align: center; background: url(../img/date_bg.svg)no-repeat center top #6ebe5a; }
#menu_col .period span { display: block; padding: 18px 0; background: url(../img/line_01.svg)no-repeat center top, url(../img/line_01.svg)no-repeat center bottom; }
#menu_col h2 { position: relative; z-index: 0; margin-top: -4.5rem; padding: 40px 4% 10px; text-align: center; }
#menu_col h2::before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; display: block; width: 100%; height: 100%; clip-path: polygon(50% 0%, 100% 65%, 100% 100%, 0 100%, 0% 65%); background: #000000;  }
#menu_col ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 4px; background: #000; color: #fff; }
#menu_col ul li { position: relative; width: calc((100% - 4px)/ 2); margin-bottom: 4px; }
/* #menu_col ul li>span { position: absolute; z-index: 1; max-width: 100%; max-height: 100%; }
#menu_col ul li>span img { max-height: 21.5rem; }
#menu_col ul li:nth-child(1) span:first-of-type { top: 2.5rem; left: 3rem; }
#menu_col ul li:nth-child(1) span:last-of-type { bottom: 1.4rem; right: 1.8rem; }
#menu_col ul li:nth-child(2) span:first-of-type { top: 0; left: 1.8rem; } */
#menu_col ul li:nth-child(3) { width: 100%; }
/* #menu_col ul li:nth-child(3) span:nth-of-type(1) { top: 36%; left: 2.5rem; }
#menu_col ul li:nth-child(3) span:nth-of-type(2) { top: 33%; left: calc(50% + 5.5rem); }
#menu_col ul li:nth-child(3) span:nth-of-type(3) { bottom: 3.5rem; left: calc(50% + 6.5rem); }
#menu_col ul li:nth-child(4) span { top: 0; left: 1.9rem; }
#menu_col ul li:nth-child(5) span { top: 1.7rem; left: 0; } */
#menu_col p:last-child { color: #fff; background: #000; padding: 15px; font-size: 1.2rem; line-height: 1.4; }

@media screen and (max-width: 640px) {
	#menu_col { padding-top: 20px; }
	#menu_col::before { background-size: 11%; }
	#menu_col .inner::before { height: 15px; }
	#menu_col h2 img { width: 58vw; }
	#menu_col .period { padding-bottom: 5rem; }
	#menu_col .period span img { width: 64vw; }
	#menu_col p:last-child { font-size: 13px; }
}


/* ---------------------------------------------------
	#event_col
------------------------------------------------------ */

#event_col .tit_col { padding: 36px 2%; }
#event_col h2 { display: flex; justify-content: center; align-items: center;}
[id^=eve_] { display: flex; flex-wrap: wrap; align-items: flex-start; background: url(../img/line_02.svg)repeat-x center bottom; }
[id^=eve_] .date { width: 17.3%; width: 18.7%; margin-right: 1.8rem; }
[id^=eve_] .txt { font-weight: bold; }
[id^=eve_] .txt .tit { font-size: 1.45rem; color: #0071ba; line-height: 1.4;}
[id^=eve_] .txt p:not(.tit) { margin-top: .5em; font-family: serif; font-size: 1.25rem; }
[id^=eve_] .wrap { display: flex; width: 100%; }

#event_col h2 span { font-size: 0; }
#event_col h2 span:not([class]) { margin: 0 2.5rem; }
#event_col h2 .tit_l,
#event_col h2 .tit_r { content: ''; display: block; }
#event_col h2 .tit_l { width: 207px; height: 140px; background: url(../img/event_tit_left.svg)no-repeat center/contain; }
#event_col h2 .tit_r { width: 180px; height: 142px; background: url(../img/event_tit_right.svg)no-repeat center/contain; }

#eve_01 { padding: 0 2% 80px; }
#eve_01 .txt { width: 40%; padding: 0 0 0 1.3rem; }
#eve_01 .img { width: calc(41.3% - 1.8rem); }
#eve_01 .wrap { flex-direction: row-reverse; padding: 35px 0; }
#eve_01 .wrap>* { width: 50%; }
#eve_01 .wrap .txt { padding: 0 1.3rem 0 10.9%; }
#eve_02 { padding: 40px 2% 55px; }
#eve_02 .img { width: 31.9%; }
#eve_02 .txt { width: calc(49.4% - 1.8rem); padding-left: 1.3rem; }
#eve_03 { padding: 40px 2% 65px; }
#eve_04 { padding: 40px 2% 80px; }
#eve_03>div, #eve_04>div { width: calc(81.3% - 1.8rem); }
#eve_03 .img, #eve_04 .img { float: right; margin: 0 0 0 1.3rem;}
#eve_05 { display: block; background: #fff; }
#eve_05 .inner { display: flex; flex-wrap: wrap; padding: 40px 1% 0;}
#eve_05 .wrap { display: block; width: calc(81.3% - 1.8rem); padding-bottom: 55px; }
#eve_05 .wrap .img { flex-shrink: 0; }
#eve_05 .wrap>div { width: 100%; }
#eve_05 .wrap>div:first-child { align-items: flex-start; }
#eve_05 .wrap>div:first-child .img { float: left; margin-right: 1.3rem; }
#eve_05 .wrap>div:first-child .txt { padding-left: 1.3rem; }
#eve_05 .wrap>div:last-child { flex-direction: row-reverse; align-items: flex-end; margin-top: 40px; }
#eve_05 .wrap>div:last-child .img { float: right; margin-left: 1.3rem; }
#eve_05 .wrap>div:last-child .txt { padding-right: 1.5rem; }

@media screen and (max-width: 900px) {
	#event_col .tit_col { padding: 20px 2%; }
	#event_col h2 { flex-direction: column; text-align: center; }
	#event_col h2 span { font-size: max(16px, 1.1rem); color: #bf272d; font-weight: bold; }
	#event_col h2 span:not([class]) { margin: 5px 0; }
	#event_col h2 .tit_l, #event_col h2 .tit_r { display: flex; justify-content: center; align-items: center; width: 100%; height: auto; background: none; }
	#event_col h2 .tit_l::before,
	#event_col h2 .tit_l::after,
	#event_col h2 .tit_r::before,
	#event_col h2 .tit_r::after { content: ''; display: inline-block; width: 2px; height: 3rem; background: #bf272d; }
	#event_col h2 .tit_l::before { transform: rotate(-20deg); margin-right: 6%; }
	#event_col h2 .tit_r::before { transform: rotate(20deg); margin-right: 6%; }
	#event_col h2 .tit_l::after { transform: rotate(20deg); margin-left: 6%; }
	#event_col h2 .tit_r::after { transform: rotate(-20deg); margin-left: 6%; }
	[id^=eve_] .date { width: 100%; margin: 0 0 20px; }
	[id^=eve_] .img { width: 45.6%!important; }
	#eve_01 .txt,
	#eve_02 .txt { width: 54.4%!important; }
	#eve_01 .wrap .txt { padding-left: 0; }
	#eve_03>div,
	#eve_04>div,
	#eve_05 .wrap { width: 100%; }
	#eve_05 .inner { display: block; }
}
@media screen and (max-width: 640px) {
	[id^=eve_] { flex-direction: column; }
	[id^=eve_] .img,
	[id^=eve_] .txt { width: 100%!important; }
	[id^=eve_] .date { max-width: 30vw; }
	[id^=eve_] .img img { max-height: 60vw; }
	[id^=eve_] .txt p:not(.tit) { margin-top: 1em; font-size: 14px; letter-spacing: .08em; line-height: 1.8; }
	[id^=eve_] .txt .tit { font-size: clamp(20px, 5vw, 23px); }
	[id^=eve_] .txt .tit br { display: none; }
	#eve_01 { padding: 0 2% 15vw; }
	#eve_01 .wrap { display: block; }
	#eve_01 .txt, #eve_02 .txt { width: 100%!important; }
	#eve_01 .txt, #eve_01 .wrap .txt,
	#eve_02 .txt { padding: 1em 0 0; }
	#eve_03 .img, #eve_04 .img,
	#eve_05 .wrap>div:first-child .img,
	#eve_05 .wrap>div:last-child .img { float: none; width: 100%!important; margin: 0; }
	#eve_03 .img, #eve_04 .img { margin-bottom: 1em; }
	#eve_05 .wrap { padding-bottom: 30px; }
	#eve_05 .wrap>div:last-child { margin-top: 25px; }
	#eve_05 .wrap>div:first-child .txt,
	#eve_05 .wrap>div:last-child .txt { padding: 1em 0 0; }
}


/* ---------------------------------------------------
	.btm_image
------------------------------------------------------ */
.btm_image { position: relative; background: #fff; }
.btm_image p:not(.btn) { width: 1100px; max-width: 100%; margin: 0 auto; }
.btm_image .btn { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }