@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 Home 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ――――――――――――――――――――――――――――――
［ homeMovie ］
―――――――――――――――――――――――――――――― */

#homeMovie { max-width: 1500px; margin-right: auto; margin-left: auto; }
#homeMovie .movieInner { position: relative; overflow: hidden; padding-top: calc( 720 / 1500 * 100% ); display: block; }
#homeMovie .movieTitle { position: absolute; top: 0; left: 0; width: calc( 460 / 1500 * 100% ); margin-top: calc( 170 / 1500 * 100% ); margin-left: calc( 180 / 1500 * 100% ); }
#homeMovie .movieLogo { position: absolute; bottom: 0; left: 0; width: calc( 180 / 1500 * 100% ); margin-bottom: calc( 70 / 1500 * 100% ); margin-left: calc( 180 / 1500 * 100% ); }
#homeMovie .movieCompetitions { position: absolute; bottom: 0; right: 0; width: calc( 380 / 1500 * 100% ); margin-bottom: calc( 40 / 1500 * 100% ); margin-right: calc( 200 / 1500 * 100% ); animation: fade 2s forwards .5s; opacity: 0; transform: translate(0,20px); }
#homeMovie .movieCompetitions img { transition: 1s; }
#homeMovie video { position: absolute; top: 0; width: 100%; }

@media screen and (max-width: 767px) {
	#homeMovie { max-width: 500px; }
	#homeMovie .movieInner { padding-top: calc( 260 / 320 * 100% ); }
	#homeMovie .movieTitle { right: 0; width: calc( 220 / 320 * 100% ); margin: calc( 55 / 320 * 100% ) auto 0; }
	#homeMovie .movieLogo { width: calc( 75 / 320 * 100% ); margin-bottom: calc( 15 / 320 * 100% ); margin-left: calc( 15 / 320 * 100% ); }
	#homeMovie .movieCompetitions { width: calc( 200 / 500 * 100% ); margin-bottom: calc( 10 / 320 * 100% ); margin-right: calc( 15 / 320 * 100% ); }
	#homeMovie video { width: auto; height: 100%; margin-right: calc( -71 / 320 * 100% ); margin-left: calc( -71 / 320 * 100% ); }
}

@keyframes fade{
	0%   { opacity: 0; transform: translate(0px,20px); }
	100% { opacity: 1; transform: translate(0px,0); }
}
@media (hover: hover) {
	#homeMovie a.movieInner:hover .movieCompetitions img { transform: scale(1.05); }
	#homeMovie a.movieCompetitions:hover img { transform: scale(1.05); }
}



/* ――――――――――――――――――――――――――――――
［ homeLead ］
―――――――――――――――――――――――――――――― */

.homeLead { color: #ffffff; padding: 60px calc( 50 / 1100 * 100% ) 55px; }
.homeLead dt { font-size: 2.5rem; line-height: 3.5rem; font-weight: 700; text-align: center; margin-bottom: 15px; }
.homeLead dd { font-size: 1.8rem; line-height: 3.2rem; text-align: center; }
.homeLead span { display: inline-block; }

@media screen and (max-width: 767px) {
	.homeLead { max-width: 500px; color: #ffffff; text-align: center; font-feature-settings: "palt"; padding: 60px calc( 50 / 1100 * 100% ) 55px; margin-right: auto; margin-left: auto; }
	.homeLead dt { font-size: 2rem; line-height: 2.8rem; }
	.homeLead dd { font-size: 1.6rem; line-height: 2.7rem; text-align: left; }
	.homeLead dd br { display: none; }
	.homeLead dd span { display: inline; }
}

#homeBirm { margin: 0 auto 40px; max-width: 1500px; color: #fff; }
.birmInner { max-width: 1500px; margin: 0 auto; }
.birmAbout { opacity: 0; animation: fadein 1.5s forwards; overflow: hidden; height: calc(54.7vw - 1px); max-height: 820px; display: block; }
.birmImg { display: block; transition: .5s; }
.birmInfo { padding: 40px 20px; background: linear-gradient(to top,#001b49 0%,#0048b3 100%); }
.birmInfoWrap { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.birmInfoMedalType { max-width: 80px; margin: 0 auto; }
.birmInfoMedalTypeItem { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.birmInfoMedalTypeItem:nth-child(n+2) { margin-top: 35px; }
.birmInfoMedalTypeImg { width: 35px; }
.birmInfoMedalTypeNum { font-size: 2.4rem; line-height: 1; font-weight: 700; }

.birmInfoLabel { font-weight: 700; text-align: center; font-size: 2.4rem; line-height: 1.31; padding: 25px 0 30px; }
.birmInfoMedalLabel { font-weight: 700; line-height: 1.31; padding: 25px 20px; display: flex; justify-content: center; align-items: flex-end; }
.birmInfoMedalLabelTxt { font-size: 1.6rem; }
.birmInfoMedalLabelSum { margin-left: 20px; font-size: 1.4rem; line-height: 1; }
.birmInfoMedalLabelSum Span { font-size: 4rem; line-height: 1; }
.birmInfoMedal { width: 270px; background: rgba(0,0,0,.5); padding: 0 0 30px; }
.birmInfoMedalDay { font-size: 1.3rem; color: #fff; width: 100%; margin-top: 10px; text-align: center; }
.birmInfoNews { flex: 1; margin-left: 40px; }
.birmInfoNewsList { border-top: solid 3px #949494; border-bottom: solid 3px #949494; overflow-y: scroll; height: 280px; }
.birmInfoNewsItem { width: 100%; font-size: 1.6rem; line-height: 1.5; display: block; }
.birmInfoNewsBtn { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; text-decoration: none; padding: 22px 35px 22px 15px; color: #fff; }
.birmInfoNewsBtn::after { position: absolute; content: ""; top: 0; bottom: 0; right: 15px; margin: auto 0; border-right: 1px solid rgba(255,255,255,.5); border-top: 1px solid rgba(255,255,255,.5); width: 15px; height: 15px; transform: rotate(45deg); }
.birmInfoNewsItem:nth-child(n+2) .birmInfoNewsBtn { border-top: 1px solid #e5e5e5; }
.birmInfoNewsDay { width: 100px; }
.birmInfoNewsTxt { flex: 1; }

@keyframes fadein{
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@media screen and (min-width: 769px) {
	a.birmAbout:hover .birmImg { transform: scale(1.02); }
	a.birmInfoNewsBtn:hover .birmInfoNewsTxt { text-decoration: underline; }
}
@media screen and (max-width: 767px) {
	#homeBirm { margin-bottom: 40px; }
	.birmInfo { padding: 15px; }
	.birmInfoLabel { font-size: 1.8rem; }
	.birmInfoMedal { width: 100%; }
	.birmInfoMedalType { display: flex;	flex-wrap: wrap; justify-content: space-between; max-width: 100%; }
	.birmInfoMedalTypeItem { width: calc((100% - 40px) / 3); justify-content: center; gap: 20px; }
	.birmInfoMedalTypeItem:nth-child(n+2) { margin-top: 0; }
	.birmInfoMedalLabel { padding: 20px 10px 25px; }
	.birmInfoMedalLabel br { display: none; }
	.birmInfoMedalLabelTxt { font-size: 1.3rem; }
	.birmInfoMedalLabelSum { margin-left: 15px; font-size: 1.3rem; }
	.birmInfoMedalLabelSum Span { font-size: 3.2rem; }
	.birmInfoNews { flex: 0 1 auto; width: 100%; margin-left: 0; margin-top: 10px; }
	.birmInfoNewsBtn { padding: 15px 35px 15px 10px; }
	.birmInfoNewsDay { width: 100%; }
	.birmInfoNewsTxt { flex: 0 1 auto; margin-left: 0; margin-top: 5px; }
}

@media screen and (max-width: 500px) {
	.birmAbout { height: calc(111.12vw + -1px); }
}



/* ――――――――――――――――――――――――――――――
［ homeBirmingham ］
―――――――――――――――――――――――――――――― */

.homeBirmingham { max-width: 1500px; margin: 0 auto 100px; }
.homeBirmingham a { display: block; width: 100%; background: url(/images/home_birmingham1.jpg) no-repeat; background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 680 / 1500 * 100% ); }



@media screen and (min-width: 769px) {
	.homeBirmingham a { transition: 0.3s ease; }
	.homeBirmingham a:hover { opacity: 0.8; }
}

@media screen and (max-width: 767px) {
	.homeBirmingham { max-width: 500px; margin-bottom: 30px; }
	.homeBirmingham a { background-image: url(/images/home_birmingham2.jpg); padding-top: calc( 230 / 320 * 100% ); }
}



.homeChengdu { max-width: 1500px; margin: 0 auto 100px; }
.homeChengdu a.homeChengduImg { display: block; width: 100%; background: url(/images/home_chengdu1.jpg) no-repeat; background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 680 / 1500 * 100% ); }

@media screen and (min-width: 769px) {
	.homeChengdu a { transition: 0.3s ease; }
	.homeChengdu a:hover { opacity: 0.8; }
}

@media screen and (max-width: 767px) {
	.homeChengdu { max-width: 500px; margin-bottom: 30px; }
	.homeChengdu a.homeChengduImg { background-image: url(/images/home_chengdu2.jpg); padding-top: calc( 230 / 320 * 100% ); }
}


/* ――――――――――――――――――――――――――――――
［ homeYoutubeBanner ］
―――――――――――――――――――――――――――――― */

.homeYoutube { padding: 0 calc( 20 / 320 * 100% ); }
.homeYoutubeBanner { position: relative; display: block; margin: 90px auto 60px; max-width: 860px; text-align: center; }
.homeYoutubeBanner::after { position: absolute; content: ""; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; margin: auto; background: linear-gradient(150deg,#e83a37 0%,#fff100 8%,#7ecef4 30%,#9dc93a 50%,#00a1e9 68%,#e4007f 100%); z-index: -1; opacity: 0; transition: .3s; }


@media screen and (min-width: 769px) {
	.homeYoutubeBanner:hover::after { opacity: 1; }
}

@media screen and (max-width: 767px) {
	.homeYoutubeBanner { margin: 30px auto 40px; }
}

/* ――――――――――――――――――――――――――――――
［ homeYoutube2Banner ］
―――――――――――――――――――――――――――――― */

.homeYoutube2 { padding: 0 calc( 20 / 320 * 100% ); }
.homeYoutube2Banner { position: relative; display: block; margin: 60px auto; max-width: 860px; text-align: center; border: 2px solid #fff; padding: 15px 30px 15px 10px; text-decoration: none; color: #fff; transition: .3s; }
.homeYoutube2Banner::before { position: absolute; content: ""; top: 0; bottom: 0; right: 15px; margin: auto 0; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); width: 15px; height: 15px; transition: .3s; } 
.homeYoutube2Banner::after { position: absolute; content: ""; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; margin: auto; background: #fff; z-index: -1; opacity: 0; transition: .3s; }
.honeYoutube2Label { font-size: 2.4rem; font-weight: 700; }
.homeYoutube2Content { font-size: 1.8rem; font-weight: 700; margin-top: 10px; }

@media screen and (min-width: 769px) {
	.homeYoutube2Banner:hover { color: #000; }
	.homeYoutube2Banner:hover::before { border-color: #000; }
	.homeYoutube2Banner:hover::after { opacity: 1; }
}

@media screen and (max-width: 767px) {
	.homeYoutube2Banner { margin: 30px auto 40px; }
	.honeYoutube2Label { font-size: 2.0rem; }
	.homeYoutube2Content { font-size: 1.6rem; margin-top: 5px; }
}



/* ――――――――――――――――――――――――――――――
［ homeOlymBanner ］
―――――――――――――――――――――――――――――― */

.homeOlym { padding: 0 calc( 20 / 320 * 100% ); }
.homeOlymBanner { display: block; margin: 60px auto; max-width: 860px; color: #fff; text-decoration: none; font-size: 1.6rem; text-align: center; transition: .3s; }

@media screen and (min-width: 769px) {
	.homeOlymBanner:hover { opacity: 0.8; }
}

@media screen and (max-width: 767px) {
	.homeOlymBanner { margin: 30px auto 40px; }
}



/* ――――――――――――――――――――――――――――――
［ homeInfo ］
―――――――――――――――――――――――――――――― */

.homeInfo { padding-right: calc( 50 / 1100 * 100% ); padding-left: calc( 50 / 1100 * 100% ); font-size: 1.8rem; line-height: 2.5rem; color: #ffffff; margin-bottom: 100px; }
.homeInfo .infoInner { max-width: 860px; margin-right: auto; margin-left: auto; }
.homeInfo .infoTitle { width: 198px; background: url(/images/home_info_title.svg) no-repeat; font-size: 0; line-height: 0; padding-top: 30px; margin: 0 auto 40px; }
.homeInfo .infoList { border-top: solid 1px #575757; margin-bottom: 30px; }
.homeInfo .infoList .listBlock { display: table; width: 100%; border-bottom: solid 1px #575757; color: #ffffff; text-decoration: none; }
.homeInfo .infoList .listBlock .listDate { display: table-cell; width: 140px; padding: 30px 0 30px 10px; }
.homeInfo .infoList .listBlock .listData { display: table-cell; padding: 30px 40px 30px 0; }
.homeInfo .infoList a.listBlock { position: relative; }
.homeInfo .infoList a.listBlock::after { position: absolute; top: 0; right: 15px; bottom: 0; display: block; width: 20px; height: 20px; border-right: solid 1px #999999; border-bottom: solid 1px #999999; content: ""; transform: rotate(-45deg); margin-top: auto; margin-bottom: auto; }
.homeInfo .infoBtn { width: 200px; margin-right: auto; margin-left: auto; }
.homeInfo .infoBtn a { position: relative; display: block; background-color: #4f4f4f; font-size: 1.6rem; line-height: 2.4rem; color: #ffffff; text-align: center; text-decoration: none; padding: 5px; }
.homeInfo .infoBtn a::after { position: absolute; top: 0; right: 15px; bottom: 0; display: block; width: 10px; height: 10px; border-right: solid 1px #ffffff; border-bottom: solid 1px #ffffff; content: ""; transform: rotate(-45deg); margin-top: auto; margin-bottom: auto; }

@media screen and (min-width: 769px) {
	.homeInfo .infoList a.listBlock:hover .listData { text-decoration: underline; }
	.homeInfo .infoBtn a,
	.homeInfo .infoBtn a::after { transition: 0.3s ease; }
	.homeInfo .infoBtn a:hover { background-color: #ffffff; color: #000000; }
	.homeInfo .infoBtn a:hover::after { border-color: #000000; }
}

@media screen and (max-width: 767px) {
	.homeInfo { font-size: 1.6rem; line-height: 2.2rem; padding-right: calc( 20 / 320 * 100% ); padding-left: calc( 20 / 320 * 100% ); margin-bottom: 35px; }
	.homeInfo .infoTitle { width: 130px; padding-top: 20px; margin-bottom: 20px; }
	.homeInfo .infoList { margin-bottom: 20px; }
	.homeInfo .infoList .listBlock { display: block; }
	.homeInfo .infoList .listBlock .listDate { display: block; width: 100%; padding: 15px 25px 5px 5px; }
	.homeInfo .infoList .listBlock .listData { display: block; width: 100%; padding: 0 25px 15px 5px; }
	.homeInfo .infoList a.listBlock::after { right: 5px; width: 12px; height: 12px; }
}



/* ――――――――――――――――――――――――――――――
［ homeAbout ］
―――――――――――――――――――――――――――――― */

.homeAbout { max-width: 1200px; font-size: 0; line-height: 0; margin: 0 auto 75px; }
.homeAbout a { display: block; background: url(/images/home_about1.jpg) no-repeat; background-size: cover; padding-top: calc( 550 / 1200 * 100% ); margin-right: calc( 50 / 1200 * 100% ); margin-left: calc( 50 / 1200 * 100% ); }

#homeMovie + .homeAbout { margin-top: 60px; }

@media screen and (min-width: 769px) {
	.homeAbout a { transition: 0.3s ease; }
	.homeAbout a:hover { opacity: 0.6; }
}

@media screen and (max-width: 767px) {
	.homeAbout { max-width: 500px; margin-bottom: 30px; }
	.homeAbout a { background-image: none; text-decoration: none; padding-top: 0; margin-right: 0; margin-left: 0; }
	.homeAbout a span:nth-child(1) { display: block; background-image: url(/images/home_about2.jpg); background-size: cover; padding-top: calc( 230 / 320 * 100% ); }
	.homeAbout a span:nth-child(2) { display: block; font-size: 1.6rem; line-height: 2.5rem; color: #ffffff; font-weight: 700; padding: 20px calc( 25 / 320 * 100% ) 0; }
}



/* ――――――――――――――――――――――――――――――
［ homeContents ］
―――――――――――――――――――――――――――――― */

.homeContents { display: table; max-width: 1500px; color: #ffffff; text-decoration: none; margin-right: auto; margin-left: auto; }
.homeContents.contentsMem { margin-bottom: 140px; }
.homeContents .contentsImg { overflow: hidden; display: table-cell; width: 50%; }
.homeContents .contentsTxt { display: table-cell; width: 50%; vertical-align: middle; padding-right: 50px; padding-left: 50px; }
.homeContents .contentsTxt .txtInner { max-width: 450px; }
.homeContents.contentsAbout .contentsTxt .txtInner { float: right; }
.homeContents .contentsTxt .txtName { margin-bottom: 50px; }
.homeContents .contentsTxt .txtName dt { background-repeat: no-repeat; background-size: 100% auto; font-size: 0; line-height: 0; margin-bottom: 12px; }
.homeContents.contentsCom .contentsTxt .txtName dt { width: 400px; padding-top: 71px; background-image: url(/images/home_contents_com.svg); }
.homeContents.contentsOve .contentsTxt .txtName dt { width: 300px; padding-top: 58px; background-image: url(/images/home_contents_ove.svg); }
.homeContents.contentsMem .contentsTxt .txtName dt { width: 276px; padding-top: 58px; background-image: url(/images/home_contents_mem.svg); }
.homeContents .contentsTxt .txtName dd { font-size: 1.8rem; line-height: 3.2rem; font-weight: 700; }
.homeContents .contentsTxt .txtMain { font-size: 1.8rem; line-height: 3.2rem; font-weight: 700; }

@media screen and (max-width: 1200px) {
	.homeContents .contentsTxt { padding-right: 30px; padding-left: 30px; }
	.homeContents .contentsTxt .txtName { margin-bottom: 15px; }
	.homeContents.contentsCom .contentsTxt .txtName dt { width: 276px; padding-top: 49px; }
	.homeContents.contentsOve .contentsTxt .txtName dt { width: 206px; padding-top: 40px; }
	.homeContents.contentsMem .contentsTxt .txtName dt { width: 190px; padding-top: 40px; }
	.homeContents .contentsTxt .txtName dd { font-size: 1.5rem; line-height: 2.5rem; }
}

@media screen and (min-width: 769px) {
	.homeContents { transition: 0.3s ease; }
	.homeContents:hover { opacity: 0.6; }
	.homeContents .contentsImg img { transition: 0.3s ease; }
	.homeContents:hover .contentsImg img { transform: scale(1.1); }
}

@media screen and (max-width: 767px) {
	.homeContents { position: relative; display: flex; flex-wrap: wrap; max-width: 500px; }
	.homeContents.contentsMem { margin-bottom: 50px; }
	.homeContents .contentsImg { order: 1; opacity: 0.7; display: block; width: 100%; }
	.homeContents .contentsTxt { order: 2; display: block; width: 100%; padding: 20px calc( 25 / 320 * 100% ) 45px; }
	.homeContents .contentsTxt .txtInner { max-width: 100%; }
	.homeContents .contentsTxt .txtName { position: absolute; top: 0; right: 0; left: 0; margin: calc( 85 / 320 * 100% ) auto 0; z-index: 1; }
	.homeContents .contentsTxt .txtName dt { margin: 0 auto 3px; }
	.homeContents.contentsCom .contentsTxt .txtName dt { width: 164px; padding-top: 29px; }
	.homeContents.contentsOve .contentsTxt .txtName dt { width: 124px; padding-top: 24px; }
	.homeContents.contentsMem .contentsTxt .txtName dt { width: 114px; padding-top: 24px; }
	.homeContents .contentsTxt .txtName dd { font-size: 1.5rem; line-height: 2.5rem; text-align: center; }
	.homeContents .contentsTxt .txtMain { font-size: 1.5rem; line-height: 2.5rem; }
}



.homeBanner { padding-inline: calc(50 / 1100 * 100%); margin-top: 60px; }
.homeBannerLabel { text-align: center; font-weight: 700; font-size: 3.6rem; color: #fff; }
.homeBannerWrap { margin: 30px auto 0; display: flex; flex-wrap: wrap; gap: 30px 30px; max-width: 860px; }
.homeBannerItem { inline-size: calc((100% - 30px) / 2); }
.homeBannerTxt { margin-top: 15px; font-size: 2rem; color: #fff; text-align: center; }
@media screen and (max-width: 767px) {
	.homeBannerLabel { font-size: 2.4rem; }
	.homeBannerWrap { max-width: 320px; }
	.homeBannerItem { inline-size: 100%; }
	.homeBannerTxt { font-size: 1.6rem; }
}