@charset "UTF-8";


#main .graduate-hero{ position: relative; padding-top: 832px; z-index: 40; background: url(../../../assets/image/bg01.jpg) 0 0 repeat-y; background-size: 100% auto; overflow: hidden; }
#main .graduate-hero .deco{ position: absolute; left: 50%; top: 58%; transform: translate(-50%,-50%); width: 895px; }
#main .graduate-hero .ttl-body{ position: absolute; left: 0; top: 0; margin: 200px 0 0 17.5%; transform: translateX(-50%); text-align: center; }
#main .graduate-hero .ttl-body .ttl{ font-size: 3.75rem; line-height: 1.2; color: #111111; font-weight: 900; }
#main .graduate-hero .ttl-body .en{ font-size: 1.125rem; color: #38a2ff; margin-top: 10px; font-family: 'YakuHanJP', 'Outfit', sans-serif; }
#main .graduate-hero .photo{ position: absolute; }
#main .graduate-hero .photo img{ width: 100%; }
#main .graduate-hero .photo01{ left: 50%; top: 0; margin: 372px 0 0 -700px; width: 390px; }
#main .graduate-hero .photo02{ left: 50%; top: 0; margin: 192px 0 0 244px; width: 456px; }
#main .graduate-hero .photo03{ left: 50%; bottom: 0; transform: translateX(-50%); width: 793px; margin-left: -1%; }
#main .graduate-main{ position: relative; z-index: 40; background-color: #38a2ff; padding: 46px 3% 260px; }
#main .graduate-main .intro{ max-width: 1050px; margin: 0 auto; }
#main .graduate-main .intro .copy{ max-width: 756px; width: 100%; margin: 0 auto; }
#main .graduate-main .intro .copy img{ width: 100%; height: auto; }
#main .graduate-main .intro .txt{ margin: 50px auto 0; font-size: 1.125rem; line-height: 2.166; color: #ffffff; text-align: center; }
#main .graduate-main .career-body{ max-width: 985px; margin: 145px auto 0; position: relative; }
#main .graduate-main .career-body .copy{ position: absolute; left: 0; top: 0; margin: -1.0152% 0 0 -0.3045%; width: 44.8729%; z-index: 20; }
#main .graduate-main .career-body .illust-body{ padding-top: 36.5482%; position: relative; z-index: 10; overflow: hidden; }
#main .graduate-main .career-body .illust-body::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #38a2ff; padding: 0 2px; margin: -1px 0 0 -1px; }
#main .graduate-main .career-body .illust-body .illust{ position: absolute; left: 0; top: 0; }
#main .graduate-main .career-body .illust-body .illust01{ width: 100%; margin: 5.7868% 0 0 0; overflow: hidden; }
#main .graduate-main .career-body .illust-body .illust02{ width: 8.7309%; margin: 12.487% 0 0 11.256%; z-index: 5; }
#main .graduate-main .career-body .illust-body .illust03{ width: 8.7309%; margin: 6.16% 0 0 33.794%; z-index: 5; }
#main .graduate-main .career-body .illust-body .illust04{ width: 12.5888%; margin: 0.507% 0 0 53.343%; z-index: 5; }
#main .graduate-main .career-body .illust-body .illust05{ width: 10.4568%; margin: 0 0 0 80.393%; z-index: 5; }
#main .graduate-main .career-body .illust-body .illust06{ width: 100%; top: auto; bottom: 0; }
#main .graduate-main .career-body .add-floor-bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; display: -ms-flex; overflow: hidden; }
#main .graduate-main .career-body .add-floor-bg .side-bg{ width: 6.4933%; background-color: #c4e3ff; position: relative; }
#main .graduate-main .career-body .add-floor-bg .side-bg::before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; padding-top: 62.5712%; background-color: #38a2ff; transform: translateX(-1px) skewY(32.034698847622deg); transform-origin: 0 0; }
#main .graduate-main .career-body .add-floor-bg .front-bg{ width: 93.5067%; background-color: #ffffff; position: relative; }
#main .graduate-main .career-body .add-floor-bg .front-bg::before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; padding-top: 13.2305%; background-color: #38a2ff; transform: translateX(1px) skewY(-7.5367639738041deg); transform-origin: right 0; }
#main .graduate-main .career-body .list-item{ position: relative; z-index: 20; width: 93.5067%; margin-left: auto; display: flex; display: -ms-flex; padding: 30px 0 80px; }
#main .graduate-main .career-body .list-item .item{ width: 25%; box-sizing: border-box; padding: 0 2.7144%; }
#main .graduate-main .career-body .list-item .item01{ color: #38a2ff; }
#main .graduate-main .career-body .list-item .item02{ color: #78d801; margin-top: -4.6145%; padding-bottom: 4.6145%; }
#main .graduate-main .career-body .list-item .item03{ color: #44d2d2; margin-top: -9.229%; padding-bottom: 9.229%; }
#main .graduate-main .career-body .list-item .item04{ color: #ffa5b6; margin-top: -13.8435%; padding-bottom: 13.8435%; }
#main .graduate-main .career-body .list-item .item .head{ text-align: center; color: inherit; font-size: 1.375rem; font-weight: 900; }
#main .graduate-main .career-body .list-item .item .head .s-size{ font-size: 80% }
#main .graduate-main .career-body .list-item .item .txt{ font-size: 1rem; line-height: 1.75; margin-top: 10px; }
#main .graduate-main .career-body .transition{ position: absolute; left: 0; bottom: 0; width: 100%; z-index: 30; width: 91.1675%; margin: 0 0 -5% 8.1218%; }
#main .graduate-main .career-body .transition img{ width: 100%; height: auto; }
#main .graduate-main .feature-body{ position: relative; z-index: 50; margin: 160px auto 0; max-width: 1050px; }
#main .graduate-main .feature-body .ttl{ text-align: center; font-size: 2.25rem; color: #ffffff; font-weight: bold; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 15px; }
#main .graduate-main .feature-body .list-item{ margin: 60px auto 0; display: flex; display: -ms-flex; justify-content: space-between; }
#main .graduate-main .feature-body .list-item .item{ width: 31.4286%; background-color: #ffffff; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 0 #0975db; }
#main .graduate-main .feature-body .list-item .item .photo img{ width: 100%; height: auto; }
#main .graduate-main .feature-body .list-item .item .txt-body{ padding: 8.1818% 9.0909%; }
#main .graduate-main .feature-body .list-item .item .copy{ font-size: 1.375rem; line-height: 1.7727; color: #0975db; font-weight: 900; text-decoration: underline; text-decoration-thickness: 9px; text-underline-offset: 0; text-decoration-color: #fff475; }
#main .graduate-main .feature-body .list-item .item .txt{ font-size: 1rem; line-height: 1.875; margin-top: 20px; }
#main .graduate-main .guideline-body{ position: relative; z-index: 50; margin: 110px auto 0; max-width: 920px; }
#main .graduate-main .guideline-body .ttl{ text-align: center; font-size: 2.25rem; color: #ffffff; font-weight: bold; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 15px; }
#main .graduate-main .guideline-body .list-item{ margin: 60px auto 0; }
#main .graduate-main .guideline-body .list-item .item{ border-bottom: 1px dashed #cee8ff; display: flex; display: -ms-flex; padding-bottom: 25px; }
#main .graduate-main .guideline-body .list-item .item:nth-child(n+2){ padding-top: 25px; }
#main .graduate-main .guideline-body .list-item .item .head{ width: 200px; }
#main .graduate-main .guideline-body .list-item .item .head .word{ display: block; width: 162px; text-align: center; background-color: #ffffff; font-size: 1.25rem; color: #38a2ff; font-weight: 900; padding: 9px 0; border-radius: 25px; box-shadow: 5px 5px 0 #0975db; }
#main .graduate-main .guideline-body .list-item .item .txt-body{ flex: 1; }
#main .graduate-main .guideline-body .list-item .item .txt{ font-size: 1rem; line-height: 2.1875; color: #ffffff; }
#main .graduate-main .benefit-body{ position: relative; z-index: 50; margin: 100px auto 0; max-width: 1060px; }
#main .graduate-main .benefit-body .ttl{ text-align: center; font-size: 2.25rem; color: #ffffff; font-weight: bold; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 15px; }
#main .graduate-main .benefit-body .list-item{ display: flex; display: -ms-flex; justify-content: center; flex-wrap: wrap; margin-top: 45px; }
#main .graduate-main .benefit-body .list-item .item{ width: 190px; height: 190px; background-color: #ffffff; border-radius: 50%; position: relative; margin: 15px 11px 0; box-shadow: 6px 6px 0 #0975db; }
#main .graduate-main .benefit-body .list-item .item .icon{ position: absolute; left: 50%; top: 0; margin-top: 34.6315%; transform: translate(-50%,-50%); }
#main .graduate-main .benefit-body .list-item .item .txt{ font-size: 1.125rem; line-height: 1.3333; color: #111111; font-weight: bold; text-align: center; width: 100%; position: absolute; left: 0; top: 0; margin-top: 73.6842%; transform: translateY(-50%); }
#main .graduate-main .deco{ position: absolute; bottom: 0; }
#main .graduate-main .deco01{ left: 0; margin-left: 6.8571%; margin-bottom: -17px; }
#main .graduate-main .deco02{ right: 0; margin-right: 4.6428%; margin-bottom: -7px; }
#main .graduate-entry{ padding: 70px 0; }
#main .graduate-entry .entry-btn{ position: relative; max-width: 548px; margin: 0 auto; }
#main .graduate-entry .entry-btn a{ display: block; height: 104px; position: relative; }
#main .graduate-entry .entry-btn a::before,
#main .graduate-entry .entry-btn a::after{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 52px; }
#main .graduate-entry .entry-btn a::before{ background: linear-gradient(to right, #38a2ff 0%, #ffffff 100%); margin-top: 6px; }
#main .graduate-entry .entry-btn a::after{ background: linear-gradient(to right, #38a2ff 0%, #095cca 100%); }
#main .graduate-entry .entry-btn a .word{ position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); font-size: 1.75rem; font-weight: bold; color: #ffffff; z-index: 10; text-align: center; }
#main .graduate-entry .entry-btn a .icon{ width: 60px; padding-top: 60px; border-radius: 50%; position: absolute; background-color: #ffffff; z-index: 10; right: 0; top: 50%; transform: translateY(-50%); margin-right: 18px; }
#main .graduate-entry .entry-btn a .icon .arrow{ width: 22.5806%; height: 1px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #38a2ff; }
#main .graduate-entry .entry-btn a .icon .arrow::before{ content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: solid transparent; border-width: 4px 0 4px 4px; border-left-color: #38a2ff; }







@media screen and (max-width: 1400px) {
}
@media screen and (max-width: 1200px) {
	#main .graduate-hero .ttl-body{ margin-top: 150px; }
}
@media screen and (max-width: 767.5px) {
	#main .graduate-hero{ padding-top: 29.3333%; padding-bottom: 143.7333%; }
	#main .graduate-hero .deco{ top: 49%; width: 131.0688%; }
	#main .graduate-hero .ttl-body{ position: relative; margin: 0; transform: none; }
	#main .graduate-hero .ttl-body .ttl{ font-size: 2.85rem; }
	#main .graduate-hero .ttl-body .en{ font-size: 0.7142rem; margin-top: 1.3333%; }
	#main .graduate-hero .photo01{ left: 0; top: 0; margin: 61.8666% 0 0 0; width: 45.3333%; }
	#main .graduate-hero .photo02{ left: auto; right: 0; top: 0; margin: 53.3333% 0 0 0; width: 45.3333%; }
	#main .graduate-hero .photo03{ width: 114.1333%; margin-left: -3%; }
	#main .graduate-main{ padding: 10% 10% 31.2%; }
	#main .graduate-main .intro{ max-width: none; }
	#main .graduate-main .intro .copy{ max-width: none; width: 92.989%; }
	#main .graduate-main .intro .txt{ margin: 8.3333% auto 0; font-size: 1rem; line-height: 1.57; text-align: left; }
	#main .graduate-main .career-body{ max-width: none; margin: 12% -12.5% 0; }
	#main .graduate-main .career-body .copy{ margin: 0 0 0 4.8%; width: 47.3655%; z-index: 20; }
	#main .graduate-main .career-body .illust-body{ padding-top: 43.6873%; }
	#main .graduate-main .career-body .illust-body .illust01{ width: 93.2022%; margin: 13.1094% 0 0 3.3311%; }
	#main .graduate-main .career-body .illust-body .illust02{ width: 8.7309%; margin: 19.487% 0 0 11.256%; z-index: 5; }
	#main .graduate-main .career-body .illust-body .illust03{ width: 8.7309%; margin: 13.16% 0 0 33.794%; z-index: 5; }
	#main .graduate-main .career-body .illust-body .illust04{ width: 12.5888%; margin: 7.507% 0 0 53.343%; z-index: 5; }
	#main .graduate-main .career-body .illust-body .illust05{ width: 10.4568%; margin: 7% 0 0 80.393%; z-index: 5; }
	#main .graduate-main .career-body .list-item{ padding: 2.6666% 0 6.4%; }
	#main .graduate-main .career-body .list-item .item .head{ font-size: 1rem; line-height: 1.28; }
	#main .graduate-main .career-body .list-item .item .head .s-size{ font-size: 70% }
	#main .graduate-main .career-body .list-item .item .txt{ font-size: 0.7142rem; line-height: 1.6; margin-top: 5%; }
	#main .graduate-main .career-body .transition{ margin: 0 0 -11% 8.1218%; }
	#main .graduate-main .feature-body{ margin: 40% auto 0; max-width: none; }
	#main .graduate-main .feature-body .ttl{ font-size: 1.714rem; text-decoration-thickness: 0.8vw; text-underline-offset: 2.6666vw; }
	#main .graduate-main .feature-body .list-item{ margin: 11.6666% auto 0; display: block; }
	#main .graduate-main .feature-body .list-item .item{ width: 100%; border-radius: 4.8vw; box-shadow: 0 2.6666vw 0 #0975db; }
	#main .graduate-main .feature-body .list-item .item:nth-child(n+2){ margin-top: 10%; }
	#main .graduate-main .feature-body .list-item .item .txt-body{ padding: 8% 6.6666%; }
	#main .graduate-main .feature-body .list-item .item .copy{ font-size: 1.428rem; line-height: 1.6; text-decoration-thickness: 2.4vw; }
	#main .graduate-main .feature-body .list-item .item .txt{ line-height: 1.71; margin-top: 3.8461%; }
	#main .graduate-main .guideline-body{ margin: 20% auto 0; max-width: none; }
	#main .graduate-main .guideline-body .ttl{ font-size: 1.714rem; text-decoration-thickness: 0.8vw; text-underline-offset: 2.6666vw; }
	#main .graduate-main .guideline-body .list-item{ margin: 11.6666% auto 0; }
	#main .graduate-main .guideline-body .list-item .item{ padding-bottom: 6.6666%; }
	#main .graduate-main .guideline-body .list-item .item:nth-child(n+2){ padding-top: 6.6666%; }
	#main .graduate-main .guideline-body .list-item .item .head{ width: 32.6666%; }
	#main .graduate-main .guideline-body .list-item .item .head .word{ width: 85.7142%; font-size: 1.142rem; padding: 1.3333vw 0; border-radius: 4.6666vw; box-shadow: 0.8vw 0.8vw 0 #0975db;  }
	#main .graduate-main .guideline-body .list-item .item .txt{ line-height: 2; }
	#main .graduate-main .benefit-body{ margin: 20% auto 0; max-width: none; }
	#main .graduate-main .benefit-body .ttl{ font-size: 1.714rem; text-decoration-thickness: 0.8vw; text-underline-offset: 2.6666vw; }
	#main .graduate-main .benefit-body .list-item{ margin-top: 5.6666%; }
	#main .graduate-main .benefit-body .list-item .item{ width: 46.5838%; padding-top: 46.5838%; height: 0; margin: 0; box-shadow: 1.3333vw 1.3333vw 0 #0975db; }
	#main .graduate-main .benefit-body .list-item .item:nth-child(2n+2){ margin-left: 6.8324%; }
	#main .graduate-main .benefit-body .list-item .item:nth-child(n+3){ margin-top: 6.8324%; }
	#main .graduate-main .benefit-body .list-item .item:last-child:nth-child(2n+1){ margin-top: 0; }
	#main .graduate-main .benefit-body .list-item .item .icon{ transform: translate(-50%,-50%) scale(0.9); }
	#main .graduate-main .benefit-body .list-item .item .txt{ font-size: 1rem; }
	#main .graduate-main .deco01{ width: 35.7333%; margin-bottom: -5.6000%; }
	#main .graduate-main .deco02{ width: 26.9333%; margin-bottom: -4.2666%; }
	#main .graduate-entry{ padding: 13.3333% 5%; }
	#main .graduate-entry .entry-btn{ max-width: none; width: 100%; }
	#main .graduate-entry .entry-btn a{ height: 27.7333vw; }
	#main .graduate-entry .entry-btn a::before,
	#main .graduate-entry .entry-btn a::after{ border-radius: 13.8666vw; }
	#main .graduate-entry .entry-btn a::before{ margin-top: 1.6vw; }
	#main .graduate-entry .entry-btn a .word{ font-size: 1.4285rem; padding: 0 20% 0 0; box-sizing: border-box; }
	#main .graduate-entry .entry-btn a .icon{ width: 13.3333vw; padding-top: 13.3333vw; margin-right: 4vw; }
}




/*hover*/
/*-------------------------------------------------------*/
#main .graduate-entry .entry-btn a{ transition: transform 0.3s; }
#main .graduate-entry .entry-btn a:active{ transform: scale(1.03); }

@media (hover: hover){
	#main .graduate-entry .entry-btn a:hover{ transform: scale(1.03); }
}




/*animation*/
/*-------------------------------------------------------*/
#main .graduate-main .career-body .illust-body .illust01 .inner{ transform: translate(-20%,10%); opacity: 0; }
#main .graduate-main .career-body.show .illust-body .illust01 .inner{ transform: translate(0,0); opacity: 1; transition: transform 0.5s, opacity 0.5s; transition-delay: 0.3s; }
#main .graduate-main .career-body .illust-body .illust02{ transform: translateY(20%); opacity: 0; }
#main .graduate-main .career-body.show .illust-body .illust02{ transform: translateY(0); opacity: 1; transition: transform 0.5s, opacity 0.5s; transition-delay: 0.6s; }
#main .graduate-main .career-body .illust-body .illust03{ transform: translateY(20%); opacity: 0; }
#main .graduate-main .career-body.show .illust-body .illust03{ transform: translateY(0); opacity: 1; transition: transform 0.5s, opacity 0.5s; transition-delay: 0.7s; }
#main .graduate-main .career-body .illust-body .illust04{ transform: translateY(20%); opacity: 0; }
#main .graduate-main .career-body.show .illust-body .illust04{ transform: translateY(0); opacity: 1; transition: transform 0.5s, opacity 0.5s; transition-delay: 0.8s; }
#main .graduate-main .career-body .illust-body .illust05{ transform: translateY(20%); opacity: 0; }
#main .graduate-main .career-body.show .illust-body .illust05{ transform: translateY(0); opacity: 1; transition: transform 0.5s, opacity 0.5s; transition-delay: 0.9s; }