@charset "utf-8";
/* ===================================================
	Exp CSS
====================================================== */
#contents_wrap { background: url(../img/bg_pattern_01.webp);}

.main_tit .tit .en { position: relative;}
.main_tit .tit .en_img { position: absolute; top: 6rem; right: -5rem; height: 5.6rem; font-size: 0; }
.main_tit .tit .en_img img { width: auto; height: 100%; }
.main_tit .tit span.ja { margin-top: 40px;}
.main_tit .tit { z-index: 3;}


#fix_btn { position: fixed; bottom: 0; right: 0; padding: 25px 50px; display: block; background: #f0c161; color: #182942; text-align: center; z-index: 10; box-sizing: border-box; }
#fix_btn span { display: block; }
#fix_btn span:nth-child(1) { font-size: 1.7rem; }
#fix_btn span:nth-child(2) { font-size: 2rem; margin-top: 5px; }

@media screen and (max-width: 600px) {
	.main_tit .tit .en_img { top: 50px; right: -10px; height: 30px; }
	.main_tit .tit span.ja { margin-top: 30px;}
	.main_tit .tit span.en { text-align: center; line-height: 1;}

	#fix_btn { width: 100%; padding: 15px 4%; }
	#fix_btn span:nth-child(1) { font-size: min(14px, 1.4rem); }
	#fix_btn span:nth-child(2) { font-size: min(1.8rem, 18px); margin-top: 5px; }

}

/* Text Animation */
.txt_anim>span { position: relative; display: inline-block; }
.txt_anim>span span { opacity: 0.5; }
.txt_anim>span::before { content: attr(data-text)""; position: absolute; top: 0; left: 0; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.25,.46,.45,.94) 0.7s; }
.show .txt_anim>span::before { -webkit-clip-path: inset(0); clip-path: inset(0); }

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


/* ---------------------------------------------------
	共通
------------------------------------------------------ */
.tit_01{ padding: 0 0 155px; text-align: center; }
.tit_01 .copy_01{ font-size: 10rem; line-height: 1; letter-spacing: 0.07em; position: relative; z-index: 1;}
.tit_01 .copy_02{ position: relative; z-index: 2; height: 3.8rem; margin-top: -2rem; }
.tit_01 .copy_02 img { object-fit: contain; height: 100%; width: auto; }
.tit_01 .copy_03{ font-size: min(3rem,30px); line-height: 1; padding: 45px 0 0;}

@media screen and (max-width: 600px) {
	.tit_01{ padding: 0 0 30px;}
	.tit_01 .copy_01{ font-size: 4.2rem; }
	.tit_01 .copy_02{ height: 1.8rem; margin-top: -1rem; }
	.tit_01 .copy_03{ font-size: 18px; line-height: 1; padding: 10px 0 0;}
}


/* ---------------------------------------------------
sec01
------------------------------------------------------ */
#sec01 { padding-top: 190px; }
#sec01 .sec01_01 { position: relative; padding: 725px 0 250px; }
#sec01 .sec01_01 .bgimg { position: absolute; inset: 0; }
#sec01 .sec01_01 .txt_col { position: relative; z-index: 1; color: #fff; }
#sec01 .sec01_01 .txt_col .tit_col { text-align: center; margin-bottom: 65px; }
#sec01 .sec01_01 .txt_col .tit_col .stit { font-size: 30px; }
#sec01 .sec01_01 .txt_col .tit_col .tit { font-size: 50px; }
#sec01 .sec01_01 .txt_col > p { width: 505px; margin: 0 auto; text-align: left; font-size: 14px; line-height: 1.7; letter-spacing: 0.12em; }
#sec01 .sec01_01 .txt_col > p + p { margin-top: 2em;}

#sec01 .sec01_02 { position: relative;}
#sec01 .sec01_02 .tit_01 { color: #fff; overflow: hidden; position: absolute; top: min(-112px, -14rem); z-index: 1; padding: 0; width: 100%; }
#sec01 .sec01_02 .copy_01 { font-size: max(160px, 20rem); white-space: nowrap; width: fit-content; position: relative; }
#sec01 .sec01_02 .copy_02 { height: max(98px, 12.2rem); margin-top: min(-92px,-11.5rem); }

#sec01 .ticker,
#sec01 .ticker ul { display: flex;}
#sec01 .ticker{ z-index: 2; position: relative;}
#sec01 .ticker { width: 100%; overflow: hidden; position: relative; z-index: 0;}
#sec01 .ticker > * { backface-visibility: hidden; will-change: transform;}
#sec01 .ticker > *:first-child { animation: loop 120s -60s linear infinite;}
#sec01 .ticker > * + * { animation: loop2 120s linear infinite;}

#sec01 #ticker_list.ticker li { width: 31.25vw; min-width: 500px;}
#sec01 #ticker_list.ticker li img { width: 100%;}
#sec01 #ticker_list.ticker > *:first-child { animation: loop 200s -100s linear infinite;}
#sec01 #ticker_list.ticker > * + * { animation: loop2 200s linear infinite;}

@media screen and (max-width: 600px) {
	#sec01 { padding-top: 100px; }
	#sec01 .sec01_01 { padding: 60vh 0 90px; }
	#sec01 .sec01_01 .txt_col { width: 90%; margin: 0 auto; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)); }
	#sec01 .sec01_01 .txt_col .tit_col { margin-bottom: 30px; }
	#sec01 .sec01_01 .txt_col .tit_col .stit { font-size: 18px; }
	#sec01 .sec01_01 .txt_col .tit_col .tit { font-size: 25px; }
	#sec01 .sec01_01 .txt_col > p { width: 80%; font-size: 12px; }
	#sec01 .sec01_01 .txt_col > p + p { margin-top: 1em;}

	#sec01 .sec01_02 .tit_01 { top: -60px; }
	#sec01 .sec01_02 .copy_01 { font-size: 20vw; }
	#sec01 .sec01_02 .copy_02 { height: 10vw; margin-top: -8vw; }


	#sec01 #ticker_list.ticker li { width: 20vw; min-width: 200px;}
}


/* ---------------------------------------------------
sec02
------------------------------------------------------ */
#sec02 { padding: 190px 0 155px; }
section[class^=sec02_0] > div:not(:last-child) { position: relative; padding-bottom: 135px; margin-bottom: 35px; }
section[class^=sec02_0] > div:not(:last-child)::before { content: ''; position: absolute; height: 100px; width: 1px; left: 50%; bottom: 0; background: #b4b4b4; }

.sec_slide { position: relative; z-index: 0; overflow: hidden; }
div[class*=sec_img] { margin: 0; z-index: 0;}
div[class*=sec_img] .slick-slide{ padding: 0 30px;}
div[class*=sec_img] .slick-slide div { width: 925px; max-width: calc(100vw - 400px); min-width: 800px; position: relative;}
div[class*=sec_img] .slick-slide div img { height: 693px;}
div[class*=sec_img] .slick-slide .slick-item::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(255,255,255,0.4); transition: background-color 1s; }
div[class*=sec_img] .slick-current .slick-item::before { background: rgba(255,255,255,0);}
div[class*=sec_detail] { width: 800px; margin: -140px auto 0; z-index: 5; background: #f7f7f4; position: relative;}
div[class*=sec_detail] .slick-list { overflow: visible;}
div[class*=sec_detail] .num{ position: absolute; top: 0; left: 0; background: #000; color: #fff; font-size: 20px; line-height: 1; padding: 10px 35px;}
div[class*=sec_detail] .tit { text-align: center; line-height: 1.3; padding: 65px 50px 55px; font-size: 30px; letter-spacing: 0.12em; }
div[class*=sec_detail] .tit .time { font-size: 40px; line-height: 1; display: block; margin-bottom: 20px; font-weight: bold; }
div[class*=sec_detail] dl > dd { font-size: 14px; line-height: 1.8; padding: 0 100px 80px; text-align: left;}
section[class^=sec02_0] > div:not(:has(div[class*=sec_img])) div[class*=sec_detail] { background: transparent; margin: 0 auto; }
section[class^=sec02_0] > div:not(:has(div[class*=sec_img])) div[class*=sec_detail] .tit { padding: 0 50px; }
section[class^=sec02_0] h3 { font-size: 60px; text-align: center; margin-bottom: 45px; }
section[class^=sec02_0] + section[class^=sec02_0] { padding-top: 265px;}

@media screen and (max-width: 600px) {
	#sec02 { padding: 100px 0 80px; }
	section[class^=sec02_0] > div:not(:last-child) { padding-bottom: 65px; margin-bottom: 25px; }
	section[class^=sec02_0] > div:not(:last-child)::before { height: 40px; }

	div[class*=sec_img] .slick-slide div { width: auto; max-width: none; min-width: 0;}
	div[class*=sec_img] .slick-slide div img { height: auto;}
	div[class*=sec_detail] { width: calc(100vw - 100px); max-width: 500px; min-height: 0; margin: -40px auto 0;}
	div[class*=sec_detail] .slick-slide { padding: 0;}
	div[class*=sec_detail] .num{ font-size: 16px; padding: 5px 15px;}
	div[class*=sec_detail] .tit { font-size: 16px; padding: 40px 5% 20px;}
	div[class*=sec_detail] .tit .time { font-size: 26px; margin-bottom: 10px; }
	div[class*=sec_detail] dl > dd { font-size: 13px; line-height: 1.7; padding: 0 5% 30px;}
	section[class^=sec02_0] > div:not(:has(div[class*=sec_img])) div[class*=sec_detail] .tit { padding: 0; }
	section[class^=sec02_0] h3 { font-size: 30px; margin-bottom: 25px; }
	section[class^=sec02_0] + section[class^=sec02_0] { padding-top: 100px;}

}


/* ---------------------------------------------------
bnr_col
------------------------------------------------------ */
.bnr_col { padding-bottom: 200px; }
.bnr_col a { display: block; margin: 0 auto; width: fit-content; }

@media screen and (max-width: 600px) {
	.bnr_col { padding-bottom: 100px; }
	.bnr_col a { width: 80%;}
}