@charset "utf-8";
/* ===================================================
	Experience CSS
====================================================== */

/* ---------------------------------------------------
	Lead_col
------------------------------------------------------ */
#experience #lead_col { padding: 95px 0 100px; background: var(--color-bg); color: #313131; display: flex; justify-content: space-between; }
#experience #lead_col .txt { display: flex; flex-direction: column; justify-content: center; }
#experience #lead_col .txt h2 { font-size: 22px; margin-bottom: 45px;}
#experience #lead_col .slick_fade .slick-counter { color: #313131; }

@media screen and (hover: hover) {
}

@media screen and (min-width: 601px) {
	#experience #lead_col .photo_col { padding-left: max(calc(50vw - 700px), 3%); width: 53%; }
	#experience #lead_col .txt { padding-right: max(calc(50vw - 585px), 4%); padding-left: max(7vw, 84px); width: 47%; }
}

@media screen and (max-width: 600px) {
	#experience #lead_col { padding: 60px 7%; flex-direction: column-reverse; }
	#experience #lead_col .photo_col { margin-top: 30px; }
	#experience #lead_col .txt h2 { font-size: 20px; margin-bottom: 20px;}
}


/* ---------------------------------------------------
	sec01
------------------------------------------------------ */
#experience #sec01 { padding: 110px 0 200px;}
#experience #sec01 h2 { margin-bottom: 80px; }
#experience #sec01 .program_col { display: flex; justify-content: space-between; flex-wrap: wrap; }
#experience #sec01 .program .photo { margin-bottom: 20px;}
#experience #sec01 .program .photo a { display: block; overflow: hidden; aspect-ratio: 38 / 25; }
#experience #sec01 .program .photo a img { transition: all .7s ease-out;}
#experience #sec01 .program .name { font-size: 20px; margin-bottom: 40px; text-align: center; line-height: 1.4;}
#experience #sec01 .program .btn_col { display: flex; justify-content: space-between; }
#experience #sec01 .program .btn_col a { color: #ececec; display: block; width: min(180px, 47.4%); }
#experience #sec01 .program .btn_col a span { display: flex; justify-content: center; align-items: center; }
#experience #sec01 .program .btn_col a span::before { content: ""; width: 13px; height: 13px; margin: 0 10px 0 0; display: block; background: no-repeat center center/contain; }
#experience #sec01 .program .btn_col .detail { margin: 0 0 0 auto;}
#experience #sec01 .program .btn_col .detail span::before {
	background-image: url(../../experience/img/ico_detail.svg);
}
#experience #sec01 .program .btn_col .application span::before {
	background-image: url(../../experience/img/ico_site.svg);
}

@media screen and (hover: hover) {
	#experience #sec01 .program .photo a:hover { opacity: 1; }
	#experience #sec01 .program .photo a:hover img { opacity: 1; transform: scale(1.1); }
}

@media screen and (min-width: 601px) {
	#experience #sec01 .program:nth-child(n+4) { margin-top: 95px;}
	#experience #sec01 .program_col::after {content: ''; width: min(380px, 32%);}
	#experience #sec01 .program { width: min(380px, 32%);}
}

@media screen and (max-width: 600px) {
	#experience #sec01 { padding: 50px 0 80px;}
	#experience #sec01 h2 { margin-bottom: 40px; }
	#experience #sec01 .program_col { flex-direction: column; align-items: center; }
	#experience #sec01 .program { width: 100%; }
	#experience #sec01 .program .photo { margin-bottom: 10px;}
	#experience #sec01 .program .name { margin-bottom: 20px; font-size: 18px; }
	#experience #sec01 .program .btn_col a { width: 47.4%; }
	#experience #sec01 .program + .program { margin-top: 40px; }
}



/* ---------------------------------------------------
	experience_detail
------------------------------------------------------ */
#experience_detail .mfp-fade.mfp-bg { opacity: 0; transition: all .3s ease-out; z-index: 9999; }
#experience_detail .mfp-fade.mfp-bg.mfp-ready { opacity: .8; }
#experience_detail .mfp-fade.mfp-bg.mfp-removing { opacity: 0; }
#experience_detail .mfp-fade.mfp-wrap { z-index: 9999; }
#experience_detail .mfp-fade.mfp-wrap .mfp-content { opacity: 0; transition: all .3s ease-out; }
#experience_detail .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; }
#experience_detail .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; }

#experience_detail #sec01 { padding: 115px 0 100px;}
#experience_detail #sec01 h2 { margin-bottom: 90px; }
#experience_detail #sec01 h3 { font-size: 26px; }
#experience_detail #sec01 .tit_col { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 30px; }
#experience_detail #sec01 .tit_col .date { margin: 0 0 0 auto; padding: 0 30px; border: 1px solid var(--color03); }
#experience_detail #sec01 .photo_col { display: flex; justify-content: space-between; flex-wrap: wrap; }
#experience_detail #sec01 .photo_col li { width: min(32%, 320px);}
#experience_detail #sec01 .txt { margin-top: 30px; }
#experience_detail #sec01 .txt a { color: #fff; border-bottom: 1px solid #fff;}
#experience_detail #sec01 .detail_col { margin-top: 45px; }
#experience_detail #sec01 .detail_col div { display: flex; }
#experience_detail #sec01 .detail_col dt,
#experience_detail #sec01 .detail_col dd { padding: 25px 13px; }
#experience_detail #sec01 .detail_col dd { border-bottom: 1px solid var(--color01); flex-grow: 1; }
#experience_detail #sec01 .detail_col dd a { color: #ececec; }
#experience_detail #sec01 .btn_col { margin-top: 70px; display: flex; align-items: center; justify-content: center; }
#experience_detail #sec01 .btn_col a { display: block; width: min(260px, 26%); text-align: center; padding: 9px 0; }
#experience_detail #sec01 .btn_col a + a { margin-left: 30px; }

@media screen and (hover: hover) {
	#experience_detail #sec01 .btn_col a:hover { color: #313131; }
	#experience_detail #sec01 .photo_col li a:hover img { opacity: 1; }
	#experience_detail #sec01 .txt a:hover { opacity: .7;}
}

@media screen and (min-width: 601px) {
	#experience_detail #sec01 .photo_col li:nth-child(n + 4) { margin-top: 20px; }
	#experience_detail #sec01 .photo_col::after { content: ''; width: min(32%, 320px); }
	#experience_detail #sec01 .detail_col dt { width: 150px; flex-shrink: 0; border-bottom: 1px solid var(--color03); }
}

@media screen and (max-width: 600px) {
	#experience_detail #sec01 { padding: 60px 0;}
	#experience_detail #sec01 h2 { margin-bottom: 60px; }
	#experience_detail #sec01 h3 { font-size: 18px; }
	#experience_detail #sec01 .tit_col { flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
	#experience_detail #sec01 .tit_col .date { padding: 0 15px; margin-top: 5px; }
	#experience_detail #sec01 .photo_col li { width: calc(50% - 5px);}
	#experience_detail #sec01 .photo_col li:nth-child(n + 3) { margin-top: 10px; }
	#experience_detail #sec01 .txt { margin-top: 30px; }
	#experience_detail #sec01 .detail_col { margin-top: 15px; }
	#experience_detail #sec01 .detail_col div { flex-direction: column; position: relative; }
	#experience_detail #sec01 .detail_col dt { padding: 20px 0 5px 15px; }
	#experience_detail #sec01 .detail_col dd { padding: 0 0 20px 15px; }
	#experience_detail #sec01 .detail_col div::before { content: ''; position: absolute; bottom: 0; left: 0; width: 10%; height: 1px; background: var(--color03); }
	#experience_detail #sec01 .btn_col { margin-top: 60px; }
	#experience_detail #sec01 .btn_col a { width: 48%; padding: 9px 0; }
	#experience_detail #sec01 .btn_col a + a { margin-left: 4%; }
}