@charset "utf-8";
/* ===================================================
	Spend CSS
====================================================== */
:root {
	--color01: #afa99f;
	--color02: #4a7331;
	--color03: #e7ecd9;
	--color04: #9c8f7f;
}
#contents_wrap { overflow: hidden;}
.inner {width: 1100px; max-width: 94%; margin: 0 auto;}
.ofi { width: 100%; height: 100%;}

.cmn_tit01 {margin: 0 0 75px; font-size: 45px;}
.cmn_tit01:before { background: url(../../img/ico02.svg)no-repeat center; width: 64px; height: 24px; margin: 0 auto 20px;}
.cmn_tit01 span {display: block; font-size: 18px; color: var(--color04);}

@media screen and (max-width: 600px) {
	.cmn_tit01 {margin: 0 0 35px; font-size: 38px;}
	.cmn_tit01:before { width: 50px; height: 24px; margin: 0px auto 3vw;}
	.cmn_tit01 span { font-size: 16px; }
}


/* ---------------------------------------------------
	map_col
------------------------------------------------------ */
#map_col { margin: 70px 0 110px; }

@media screen and (max-width: 600px) {
	#map_col { margin: 40px 0 60px; }
}


/* ---------------------------------------------------
	sec_course
------------------------------------------------------ */
@keyframes loop {
	0% {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
	100% {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}
@keyframes loop2 {
	0% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(-200%);
		-ms-transform: translateX(-200%);
		transform: translateX(-200%);
	}
}

#sec_course { background: #fff; padding: 140px 0; position: relative; }
#sec_course::before { content: ''; width: 270px; height: 205px; background: url(../../spend/img/course_bg01.png) no-repeat center/contain; position: absolute; top: -45px; right: 20px; }

#sec_course #panel { position: relative; margin: 60px auto; border-bottom: 1px solid var(--color01); display: flex; justify-content: center; }
#sec_course #panel li { width: min(48%, 400px); position: relative; bottom: -1px; border-radius: 10px 10px 0 0;}
#sec_course #panel li + li {margin-left: 20px;}
#sec_course #panel li a {display: block; padding: 28px 0; border: 1px solid var(--color03); border-bottom: 1px solid var(--color01); border-radius: 10px 10px 0 0; font-size: 23px; text-align: center; font-weight: 700; text-align: center; background: var(--color03);}
#sec_course #panel li a.active {position: relative; border: 1px solid var(--color01); border-bottom: 1px solid #fff; background: #fff;}
#sec_course #panel li a.active:before {content: ""; width: 14px; height: 10px; background: url(../../img/tab_active.svg)no-repeat; position: absolute; top: -1px; left: calc(50% - 7px); }
#sec_course #panel li a span { display: block; font-size: 14px; padding: 5px 25px; background: var(--color03); width: fit-content; margin: 0 auto 5px; text-align: center; border-radius: 50px; border: 1px solid var(--color01); }
#sec_course #panel li a.active span { background: var(--color03); border: 1px solid var(--color03); }
#sec_course #panel_contents > [id^="course0"]:not(.active) { display: none;}

#sec_course #panel_contents .course_main { display: flex; background: var(--color02); border-radius: 20px; overflow: hidden; color: #fff; margin-bottom: 125px; }
#sec_course #panel_contents .course_main .txt { width: 50%; padding: 80px 60px 80px 70px; letter-spacing: 0.13em; }
#sec_course #panel_contents .course_main .txt h3 { font-weight: 700; font-size: 38px; border-bottom: 1px solid #fff; padding-bottom: 20px; }
#sec_course #panel_contents .course_main .txt h3 span { display: block; width: fit-content; text-align: center; margin-bottom: 15px; border-radius: 100px; background: #fff; color: var(--color02); font-size: 20px; padding: 5px 30px; }
#sec_course #panel_contents .course_main .txt p { margin-top: 20px; line-height: 2; }
#sec_course #panel_contents .course_main .photo { width: 50%; }

#sec_course #panel_contents .day_tit { text-align: center; font-size: 40px; font-weight: 700; background: var(--color03); padding: 10px 0 20px; }
#sec_course #panel_contents .day_tit::first-letter { font-size: 45px; }
#sec_course #panel_contents .day_stit { text-align: center; font-size: 18px; color: var(--color04); margin-top: 30px; margin-bottom: 100px; }
#sec_course #panel_contents .course_tit { background: var(--color02); color: #fff; letter-spacing: 0.12em; font-size: 26px; border-radius: 20px; line-height: 1.4; padding: 15px 0 15px 130px; margin-bottom: 35px; position: relative; }
#sec_course #panel_contents .course_tit .time { display: block; width: 130px; height: 130px; border: 6px solid var(--color02); text-align: center; align-content: center; font-size: 20px; position: absolute; top: calc(50% - 65px); left: clamp(-40px, -2.5vw, -28px); background: var(--color03); color: var(--color02); border-radius: 50%; box-sizing: border-box; line-height: 1; }
#sec_course #panel_contents .course_tit .time span { display: block; font-size: 28px; margin: 5px 0 18px; }

#sec_course #panel_contents .inner { width: calc(970px + max(22px, 2vw)); max-width: calc(90% + max(22px, 2vw)); padding-left: max(22px, 2vw); }
#sec_course #panel_contents [class^="course_list"] { padding-bottom: 125px; }
#sec_course #panel_contents [class^="course_day"] > div { position: relative; }
#sec_course #panel_contents [class^="course_day"] > div > * { position: relative; z-index: 1; }
#sec_course #panel_contents [class^="course_day"] > div::before { content: ''; width: 1px; height: 100%; position: absolute; top: 0; left: 25px; border-left: 1px dashed var(--color02); z-index: 0; }
#sec_course #panel_contents .course_day01 > div::before { height: calc(100% - 597px); }
#sec_course #panel_contents #course01_05,
#sec_course #panel_contents #course02_05 { padding-bottom: 0; }
#sec_course #panel_contents #course01_02::before,
#sec_course #panel_contents #course02_02::before { content: ''; width: clamp(1320px, 120vw, 1670px); height: 198px; background: url(../../spend/img/course_bg02.png) no-repeat left center/contain; position: absolute; bottom: 375px; left: 50%; transform: translateX(-50%); z-index: -1; }

#sec_course #panel_contents [class^="course_list"] .photo_col .photo img { border-radius: 10px;}
#sec_course #panel_contents .flexbox { display: flex; }
#sec_course #panel_contents .inner p { line-height: 2; letter-spacing: 0.02em; }
#sec_course #panel_contents .pickup_col { background: var(--color03); display: flex; color: var(--color02); padding: 30px 0; border-radius: 5px; }
#sec_course #panel_contents .pickup_col dt { align-content: center; text-align: center; letter-spacing: 0.28em; padding-inline: 8% 6.7%; margin-right: 6.7%; border-right: 1px solid var(--color02); flex-shrink: 0; }
#sec_course #panel_contents .pickup_col dt span { display: block; font-size: 33px; letter-spacing: 0; }
#sec_course #panel_contents .pickup_col dd { flex-grow: 1; padding: 15px 3% 15px 0; }
#sec_course #panel_contents .pickup_col dd ul { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); gap: 15px 5px; grid-auto-flow: column; letter-spacing: 0.02em; }
#sec_course #panel_contents .pickup_col dd ul li { display: flex; align-items: center; }
#sec_course #panel_contents .pickup_col dd ul li::before { content: ''; width: 5px; height: 5px; background: var(--color02); transform: rotate(45deg); display: inline-block; margin-right: 10px; }

#sec_course #panel_contents .course_list01 .photo_col { display: grid; grid-template-columns: 59.7% repeat(2, 19.6%); grid-template-rows: 230px 1fr; gap: 5px; }
#sec_course #panel_contents .course_list01 .photo_col .photo:nth-child(1) { grid-row: 1 / 3; grid-column: 1 / 2;}
#sec_course #panel_contents .course_list01 .photo_col .photo:nth-child(2) { grid-row: 1 / 2; grid-column: 2 / 4; }
#sec_course #panel_contents .course_list01 .photo_col .photo:nth-child(3) { grid-row: 2 / 3; grid-column: 2 / 3; }
#sec_course #panel_contents .course_list01 .photo_col .photo:nth-child(4) { grid-row: 2 / 3; grid-column: 3 / 4; }
#sec_course #panel_contents .course_list01 .flexbox { gap: 40px; margin: 30px 0 40px; }
#sec_course #panel_contents .course_list01 .flexbox p { width: 69%; }
#sec_course #panel_contents .course_list01 .flexbox .photo { width: 38%; margin: -95px 0 0 -10.8%;}

#sec_course #panel_contents .course_list02 .flexbox { gap: 20px; margin: 30px 0 40px; }
#sec_course #panel_contents .course_list02 .flexbox p { width: 70%; }
#sec_course #panel_contents .course_list02 .photo_col { display: flex; gap: 5px; }
#sec_course #panel_contents .course_list02 .flexbox .photo { width: 34.6%; margin: -85px -6.7% 0 0;}

#sec_course #panel_contents .course_list03 .course_tit { margin-bottom: 65px; }
#sec_course #panel_contents .course_list03 .photo_col { width: max(1100px, 100vw); margin-inline: min(calc(50% - 51vw), -93px) min(calc(50% - 50vw), -75px); position: relative; z-index: 1; overflow: hidden; }
#sec_course #panel_contents .course_list03 .photo_col .ticker { display: flex; }
#sec_course #panel_contents .course_list03 .photo_col .ticker > div { display: flex; backface-visibility: hidden; will-change: transform; }
#sec_course #panel_contents .course_list03 .photo_col .ticker > div:nth-child(1) { animation: loop 200s -100s linear infinite;  }
#sec_course #panel_contents .course_list03 .photo_col .ticker > div:nth-child(2) { animation: loop2 200s -200s linear infinite; }
#sec_course #panel_contents .course_list03 .photo_col .ticker .photo { margin-right: 15px; width: 367px; }
#sec_course #panel_contents .course_list03 .txt_col { margin-top: 40px; color: #9a6a2d; text-align: center; font-weight: 700; line-height: 2; position: relative; z-index: 1; }
#sec_course #panel_contents .course_list03 .txt_col p { width: fit-content; margin: 0 auto; font-size: 24px; letter-spacing: 0.2em; }
#sec_course #panel_contents .course_list03 .txt_col p span { font-size: 33px; letter-spacing: 0; }
#sec_course #panel_contents .course_list03 .txt_col .marker { background: linear-gradient(to top, transparent 30%, #fbf3e9 10%, #fbf3e9 60%, transparent 60%); }

#sec_course #panel_contents .course_list04 .flexbox { gap: 25px; margin-bottom: 40px; }
#sec_course #panel_contents .course_list04 .photo_col  { width: 65%; }
#sec_course #panel_contents .course_list04 .txt_col { width: 32%; }
#sec_course #panel_contents .course_list04 .txt_col .photo { margin: 20px -20% -25px 0; width: 120%;}

#sec_course #panel_contents .course_list05 .photo_col { display: grid; grid-template-columns: repeat(2, 19.6%) 59.7%; grid-template-rows: 230px 1fr; gap: 5px; }
#sec_course #panel_contents .course_list05 .photo_col .photo:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 3; }
#sec_course #panel_contents .course_list05 .photo_col .photo:nth-child(2) { grid-row: 2 / 3; grid-column: 1 / 2; }
#sec_course #panel_contents .course_list05 .photo_col .photo:nth-child(3) { grid-row: 2 / 3; grid-column: 2 / 3; }
#sec_course #panel_contents .course_list05 .photo_col .photo:nth-child(4) { grid-row: 1 / 3; grid-column: 3 / 4;}
#sec_course #panel_contents .course_list05 .flexbox { justify-content: space-between; margin: 30px 0 20px; }
#sec_course #panel_contents .course_list05 .flexbox p { width: 58.8%; }
#sec_course #panel_contents .course_list05 .flexbox .photo { width: 47%; margin: clamp(-132px, -12vw, -145px) clamp(-11%, -8vw, -85px) 0 0;}

@media screen and (max-width: 600px) {
	#sec_course { padding: 60px 0; }
	#sec_course::before { width: 120px; height: 100px; top: -45px; right: 3vw; }
	#sec_course .cmn_tit01 { font-size: 22px; }

	#sec_course #panel { margin: 30px auto; }
	#sec_course #panel li { width: calc(48% - 5px);}
	#sec_course #panel li + li { margin-left: 10px;}
	#sec_course #panel li a { padding: 20px 4% 15px; font-size: 18px; }
	#sec_course #panel li a span { font-size: 12px; padding: 3px 15px; }

	#sec_course #panel_contents .course_main { flex-direction: column; border-radius: 15px; margin-bottom: 60px; }
	#sec_course #panel_contents .course_main .txt { width: 100%; padding: 30px 6%; letter-spacing: 0.08em; }
	#sec_course #panel_contents .course_main .txt h3 { font-size: 20px; padding-bottom: 15px; }
	#sec_course #panel_contents .course_main .txt h3 span { margin-bottom: 10px; font-size: 14px; padding: 3px 20px; }
	#sec_course #panel_contents .course_main .txt p { margin-top: 10px; line-height: 1.8; }
	#sec_course #panel_contents .course_main .photo { width: 100%; }

	#sec_course #panel_contents .day_tit { font-size: 26px; padding: 0 0 5px; }
	#sec_course #panel_contents .day_tit::first-letter { font-size: 34px; }
	#sec_course #panel_contents .day_stit { font-size: 16px; margin-top: 20px; margin-bottom: 65px; }
	#sec_course #panel_contents .course_tit { letter-spacing: 0.08em; font-size: 18px; border-radius: 10px; padding: 34px 4% 10px; margin-bottom: 25px; }
	#sec_course #panel_contents .course_tit .time { width: 68px; height: 68px; border: 3px solid var(--color02); font-size: 14px; top: -33px; left: 0; }
	#sec_course #panel_contents .course_tit .time span { font-size: 20px; margin: 0 0 5px; letter-spacing: 0; }

	#sec_course #panel_contents .inner { width: calc(100% - 20px); max-width: none; padding-left: 20px; }
	#sec_course #panel_contents [class^="course_list"] { padding-bottom: 65px; }
	#sec_course #panel_contents [class^="course_day"] > div::before { left: 10px; }
	#sec_course #panel_contents .course_day01 > div::before { height: calc(100% - 200px - 26vw); }
	#sec_course #panel_contents #course01_02::before,
	#sec_course #panel_contents #course02_02::before { width: 120vw; height: 110px; bottom: 350px;  }

	#sec_course #panel_contents .inner p { line-height: 1.8; }
	#sec_course #panel_contents .pickup_col { flex-direction: column; padding: 20px 6%; }
	#sec_course #panel_contents .pickup_col dt { letter-spacing: 0.1em; padding: 0 0 5px; margin: 0 0 10px; border-bottom: 1px solid var(--color02); border-right: none; }
	#sec_course #panel_contents .pickup_col dt span { font-size: 24px; }
	#sec_course #panel_contents .pickup_col dd { padding: 0; }
	#sec_course #panel_contents .pickup_col dd ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 15px; }
	#sec_course #panel_contents .pickup_col dd ul li { width: 200px; }

	#sec_course #panel_contents .course_list01 .photo_col { grid-template-columns: 55vw 1fr; grid-template-rows: 57vw repeat(2, 1fr); }
	#sec_course #panel_contents .course_list01 .photo_col .photo:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 3;}
	#sec_course #panel_contents .course_list01 .photo_col .photo:nth-child(2) { grid-row: 2 / 4; grid-column: 1 / 2; }
	#sec_course #panel_contents .course_list01 .photo_col .photo:nth-child(3) { grid-row: 2 / 3; grid-column: 2 / 3; }
	#sec_course #panel_contents .course_list01 .photo_col .photo:nth-child(4) { grid-row: 3 / 4; grid-column: 2 / 3; }
	#sec_course #panel_contents .course_list01 .flexbox { flex-direction: column-reverse; gap: 5px; margin: 20px 0; }
	#sec_course #panel_contents .course_list01 .flexbox p { width: 100%; }
	#sec_course #panel_contents .course_list01 .flexbox .photo { width: 73%; margin: 0 auto; }

	#sec_course #panel_contents .course_list02 .photo_col { flex-direction: column; }
	#sec_course #panel_contents .course_list02 .photo_col .photo:nth-child(2) { height: 47vw;}
	#sec_course #panel_contents .course_list02 .flexbox { flex-direction: column; gap: 5px; margin: 20px 0; }
	#sec_course #panel_contents .course_list02 .flexbox p { width: 100%; }
	#sec_course #panel_contents .course_list02 .flexbox .photo { width: 67.5%; margin: 0  auto;}

	#sec_course #panel_contents .course_list03 .course_tit { margin-bottom: 35px; }
	#sec_course #panel_contents .course_list03 .photo_col .ticker > div:nth-child(1) { animation: loop 120s -60s linear infinite; }
	#sec_course #panel_contents .course_list03 .photo_col .ticker > div:nth-child(2) { animation: loop2 120s -120s linear infinite; }
	#sec_course #panel_contents .course_list03 .photo_col { width: 100vw; margin-inline: calc(-3vw + -30px) calc(-3vw + -10px); }
	#sec_course #panel_contents .course_list03 .photo_col .ticker .photo { margin-right: 5px; width: 60vw; }
	#sec_course #panel_contents .course_list03 .txt_col { margin-top: 30px; line-height: 1.8; }
	#sec_course #panel_contents .course_list03 .txt_col p { font-size: 18px; letter-spacing: 0.08em; line-height: 1.4; }
	#sec_course #panel_contents .course_list03 .txt_col p span { font-size: 26px; }
	#sec_course #panel_contents .course_list03 .txt_col p + p { margin-top: 1em;}
	#sec_course #panel_contents .course_list03 .txt_col .marker { background: linear-gradient(to top, transparent 10%, #fbf3e9 10%, #fbf3e9 30%, transparent 30%); }

	#sec_course #panel_contents .course_list04 .flexbox { flex-direction: column; gap: 20px; margin-bottom: 20px; }
	#sec_course #panel_contents .course_list04 .photo_col  { width: 100%; }
	#sec_course #panel_contents .course_list04 .txt_col { width: 100%; display: flex; flex-direction: column; gap: 5px; }
	#sec_course #panel_contents .course_list04 .txt_col .photo { margin: 0 auto; width: 72.9%;}

	#sec_course #panel_contents .course_list05 .photo_col { grid-template-columns: 55vw 1fr; grid-template-rows: repeat(2, 1fr) 57vw; }
	#sec_course #panel_contents .course_list05 .photo_col .photo:nth-child(1) { grid-row: 1 / 3; grid-column: 1 / 2; }
	#sec_course #panel_contents .course_list05 .photo_col .photo:nth-child(2) { grid-row: 1 / 2; grid-column: 2 / 3; }
	#sec_course #panel_contents .course_list05 .photo_col .photo:nth-child(3) { grid-row: 2 / 3; grid-column: 2 / 3; }
	#sec_course #panel_contents .course_list05 .photo_col .photo:nth-child(4) { grid-row: 3 / 4; grid-column: 1 / 3; }
	#sec_course #panel_contents .course_list05 .flexbox { flex-direction: column; gap: 5px; margin: 20px 0 20px; }
	#sec_course #panel_contents .course_list05 .flexbox p { width: 100%; }
	#sec_course #panel_contents .course_list05 .flexbox .photo { width: 95.8%; margin: 0 auto; }
	#sec_course #panel_contents .course_list05 .flexbox .photo img { padding-left: 5%; box-sizing: border-box; }

}


/* ---------------------------------------------------
	btn_col
------------------------------------------------------ */
#btn_col { padding: 120px 0 100px; text-align: center; }
#btn_col p { font-size: 22px;display: flex; align-items: center; justify-content: center; gap: 25px; }
#btn_col p::before,
#btn_col p::after { content: ''; margin-top: 5px; height: 25px; width: 1px; transform: rotate(45deg); border-left: 1px dotted #000; }
#btn_col p::before { transform: rotate(-45deg);}
#btn_col a { display: block; width: 510px; margin: 30px auto 0; color: #fff; background: #b08616; border-radius: 100px; font-size: 24px; font-weight: 700; padding: 30px 0; }
#btn_col a:hover { background: #906d10;}

@media screen and (max-width: 600px) {
	#btn_col { padding: 60px 0 50px; }
	#btn_col p { font-size: 18px; padding: 0 20px; gap: 15px; align-items: flex-end; }
	#btn_col p::before,
	#btn_col p::after { margin-top: 5px; height: 25px; }
	#btn_col a { width: 100%; font-size: 20px; padding: 15px 0; }
}