@charset "UTF-8";
/* CSS Document */

#Mainvisual { height: 100vh; max-width: 1700px; width: 100%; position: relative; background: var(--main-bg-color); box-sizing: border-box; z-index: 0; display: flex; justify-content: flex-end; }
#Mainvisual::before { content: ""; background: var(--main-bg-color); position: absolute; width: 100vw; height: 100%; right: 0; top: 0; }
#mainvis { width: 77.8%; height: 79vh; position: absolute; margin-top: 45px; z-index: 0; }
#mainvis::after { content: ""; display: block; max-width: 310px; width: 36.5%; aspect-ratio: 273 / 131; background: url(../../images/img_100.svg) no-repeat; position: absolute; left: 0%; bottom:-12%; z-index: 1000; }
#mainvis li { width: 77.8%; height: 79vh; position: relative; z-index: 0; }
#mainvis li img { max-width: initial; width: 100%; height: 100%; object-fit: cover; }
#Mainvisual .academy { position: absolute; height: 82%; top: 0; bottom: 45px; left: 5.5%; margin: auto; }
#Mainvisual .academy img { width: auto; height: 100%; }
#Mainvisual .date { position: absolute; bottom: 7%; right: 50px; max-width: 233px; width: 21%; opacity: 0; visibility: hidden; animation: fade 1s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
#Mainvisual .date a { color: #fff; font-family: var(--sub-font); font-weight: 700; display: block; }
#Mainvisual .date .week { width: 30%; position: absolute; bottom: 16%; left: 0; right: 0; margin: auto; }
#Mainvisual .date .day { width: 70%; display: flex; justify-content: space-between; position: absolute; bottom: 32%; left: 0; right: 0; margin: auto; font-size: clamp(3.438rem, 1rem + 4.06vw, 4.25rem); letter-spacing: -0.03em; }
#Mainvisual .date .day span.m { width: 40%; display: block; text-align: center; }
#Mainvisual .date .day span.d { width: 40%; display: block; text-align: center; }
#Mainvisual .date .day span.s { width: 20%; display: block; text-align: center; letter-spacing: 0em; }

#Ao-banner { max-width: 980px; width: 90%; margin: 70px auto 0 auto; }
#Ao-banner a:hover { opacity: .5; }
#Ao-banner .sp { display: none; }

.news { background: #f4af81; position: absolute; bottom: 0; width: 100%; z-index: 7; height: 45px; overflow: hidden; z-index: 1; }
.news .inner { display: flex; justify-content: center; height: 100%; }
.news p { display: flex; justify-content: flex-start; align-items: center; font-size: 1.000em; font-weight: bold; color: #FFF; line-height: 1.3em; }
.news p a { display: block; display: flex; height: 100%; align-items: center; color: #FFF; }
.news p a::after { content: ">"; display: inline-block; margin-left: 5px; }
.news p.ttl { justify-content: center; margin-right: 20px; height: 100%; letter-spacing: 0.1em; margin-right: 50px; }
.news p.ttl::before { content: ""; display: inline-block; width: 23px; height: 21px; background: url(../../images/ic_news_w.svg) no-repeat; margin-right: 15px; }
.news p.ttl + p { min-width: 400px; }

h1 { font-family: var(--sub-font); font-size: 3.438em; color: var(--sub-bg-color); height: 120px; display: flex; align-items: flex-end; letter-spacing: 0.05em; padding-bottom: 10px; margin-left: 20px; position: relative; z-index: -1; opacity: 0; visibility: hidden; transform: translateY(100px); }

#Opencampus { margin-top: 40px; position: relative; }
#Opencampus::before { content: ""; display: block; background: #efece3; position: absolute; width: calc(100% - 50px); height: 72%; bottom: -20px; left: 50px; z-index: -2; }
#Opencampus .inner,#Pickup .inner,#Blog .inner,#News .inner,#Banner .inner { max-width: 1700px; width: 100%; }
#Opencampus h1::before { content: ""; display: block; background: url(../../images/bg_logo.svg) no-repeat; background-blend-mode: multiply; width: 523px; height: 213px; position: absolute; z-index: -2; left: 15px; top: 0px; background-color: #FFF; }
#Opencampus ul { background: #e3dfd3; padding: 0 50px; margin-top: 5px; position: relative; box-sizing: border-box; width: calc(100% - 50px); }
#Opencampus ul li { padding: 50px 0; position: relative; }
#Opencampus ul li a { display: block; padding: 0 15px; position: relative; }
#Opencampus #Slide li.next a::after { content: "NEXT"; position: absolute; display: block; width: calc(100% - 30px); left: 0; right: 0; margin: auto; z-index: 2; text-align: center; background: #38718d; color: #fff; font-family: var(--sub-font); font-size: 1.500rem; padding: 5px 0; }
#Opencampus #Slide li.next a::before { content: ""; position: absolute; display: block; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #38718d transparent; left: 0; right: 0; margin: auto; z-index: 2; bottom: 0; }
#Opencampus ul li a .img { width: 100%; padding-top: 100%; overflow: hidden; position: relative; }
#Opencampus ul li a .img img { transform: scale(1.0,1.0); transition: 1s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; max-width: initial; height: 100%; }
#Opencampus ul li a .img::before { content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.10); z-index: 1; top: 0; position: absolute; }
#Opencampus ul li a:hover .img img { transform: scale(1.03,1.03) translate(-50%, -50%); }
#Opencampus ul li .date { position: absolute; font-family: var(--sub-font); color: #FFF; font-size: 4.375em; top: -20px; left: -3px; display: flex; z-index: 2; letter-spacing: -0.03em; }
#Opencampus ul li .date span { display: flex; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 1.500rem; margin-top: 5px; letter-spacing: -0.03em; text-align: right; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; }
#Opencampus ul li .cat { font-size: 3.000vw; color: #FFF; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; position: absolute; right: 10px; top: 0; transform: rotate(180deg); z-index: 2; font-weight: 700; display: flex; align-items: right; white-space: pre; }
#Opencampus ul li .ttl { position: absolute; bottom: 20px; font-weight: bold; z-index: 2; }
#Opencampus ul li .ttl span { display: table; background: #FFF; font-size: 0.938em; padding: 10px 1em; }
#Opencampus ul li .ttl span + span { margin-top: 10px; }
#Opencampus .link { font-size: 1.250em; text-align: right; margin-top: 15px; font-weight: bold; letter-spacing: 0.2em; padding-right: 50px; }
#Opencampus .link::after,#Blog .link::after,#News .link::after { content: ""; display: inline-block; width: 62px; height: 7px; background: url(../../images/link_arrow.svg) no-repeat right; }

#Pickup { margin-top: 200px; position: relative; }
#Pickup::before { content: ""; display: block; background: url(../../images/bg_logo.svg) no-repeat; width: 442px; height: 180px; position: absolute; right: 4%; top: 0px; top: 80px; z-index: -2; opacity: 0; visibility: visible; transform: translateY(100px); }
#Pickup h1 { z-index: 1; }
#Pickup ul { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 0; }
#Pickup ul li { width: 50%; font-size: 1.125em; box-sizing: border-box; font-weight: bold; transform: translateY(100px); opacity: 0; visibility: hidden; }
#Pickup ul li a { display: block; position: relative; overflow: hidden; }
#Pickup ul li a img { transform: scale(1.0,1.0); transition: 1s; }
#Pickup ul li a:hover img { transform: scale(1.03,1.03); }
#Pickup ul li span { display: block; position: absolute; bottom: 30px; right: 0; background: #b7a0a0; color: #FFF; width: 85%; padding: 10px 20px; text-align: right; box-sizing: border-box; border-radius: 0 0 0 30px; font-size: 1.125em; }
#Pickup ul li:nth-child(odd) { margin-top: -100px; }
#Pickup ul li:first-child { margin-top: 0; }
#Pickup ul li:nth-child(2) { margin-top: 100px; }
#Pickup ul li.move { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1); }
#Pickup ul li.move:nth-child(even) { transition-delay: .3s; }


#Blog,#News,#Insta { position: relative; padding-top: 1px; margin-top: 40px; }
#Blog { margin-top: 130px; }
#Blog::before,#News::before,#Insta::before { content: ""; display: block; background: #e3dfd3; width: 100%; height: 150px; position: absolute; z-index: -2; top: 45px; }
#Blog h1 { align-items: flex-start; margin-top: -30px; mix-blend-mode: multiply;  }
#Blog h1::before,#News h1::before,#Insta h1::before { content: url(../../images/bg_logo.svg);  display: block; width: 422px; height: 180px; position: absolute; z-index: -2; left: 15px; top: 10px; mix-blend-mode: multiply; opacity: 0; visibility: hidden; transform: translateY(100px); line-height: 0.7em; }
#Blog ul { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 50px; margin-top: -10px; }
#Blog ul li { width: 32%; transform: translateY(100px); opacity: 0; visibility: hidden; }
#Blog ul li a { display: block; }
#Blog ul li .img { position: relative; overflow: hidden; width: 100%; position: relative; padding-top: 60.76%; }
#Blog ul li .img img { position: absolute; transform: scale(1.0,1.0) translate(-50%, -50%); transition: 1s; top: 50%; left: 50%; width: 100%; height: auto; }
#Blog ul li a:hover .img img { transform: scale(1.05,1.05) translate(-50%, -50%); }
#Blog ul li .img span { display: inline-block; position: absolute; background: var(--main-bg-color); left: 0; top: 10px; color: #FFF; padding: 5px 1em; }
#Blog ul li:first-child { margin-top: 60px; }
#Blog ul li:nth-child(2) { margin-top: 30px; }
#Blog ul li p.date { color: #b3b3b3; margin-top: 10px; font-size: 0.813em; }
#Blog ul li p.ttl { font-weight: bold; margin-top: 15px; line-height: 1.3em; }
#Blog ul li p.ttl + p { margin-top: 15px; font-size: 0.938em; line-height: 1.5em; }
#Blog .link { font-size: 1.250em; text-align: center; margin-top: 25px; font-weight: bold; letter-spacing: 0.2em; background: var(--main-bg-color-alpha); padding: 20px 50px; }
#Blog ul.move li { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1); }
#Blog ul.move li:nth-child(2) { transition-delay: .3s; }
#Blog ul.move li:nth-child(3) { transition-delay: .6s; }

#News,#Insta { margin-top: 100px; }
#News h1 { margin-top: 15px; margin-left: 80px; position: relative; }
#News div.box { background: #FFF; margin: 25px 50px 0 50px; position: relative; }
#News div.box::before { content: ""; position: absolute; height: 100%; left: 7px; top: 7px; display: block; width: 100%; background: var(--main-bg-color); z-index: -1; }
#News div.box dl { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 30px 45px 0 30px; }
#News div.box dl dt { width: 6em; border-top: 1px dotted #251e1c; padding: 10px 0; }
#News div.box dl dt span { display: inline-block; width: 1em; text-align: right; }
#News div.box dl dd { width: calc(100% - 6em); border-top: 1px dotted #251e1c; padding: 10px 1em; box-sizing: border-box; }
#News div.box dl dt:first-child,#News div.box dl dt:first-child + dd { border: none; }
#News .link { font-size: 1.250em; text-align: center; margin-top: 0; font-weight: bold; letter-spacing: 0.2em; padding: 20px 50px; }

#Insta h1 { position: relative; align-items: flex-start; margin-top: -20px; mix-blend-mode: multiply;  }
#Insta .box { margin: -60px 50px 0 50px; width: calc(100% -100px); box-sizing: border-box; }
#Insta .insta_list { display: flex; flex-wrap: wrap; gap: 13px; margin: 0 auto 5%;}
#Insta .insta_list li { position: relative; width: calc((100% - 40px)/4); }
#Insta .insta_list li::before{ content: ""; display: block; padding-top: 100%; }
#Insta .insta_list a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#Insta .insta_list a:hover { opacity: .5; }
#Insta .insta_list img{ width: 100%; height: 100%; object-fit: cover; }


#Pickup.move::before,#Opencampus h1.move,#Blog h1.move::before,#News h1.move::before,#Insta h1.move::before,#Pickup h1.move,
#Blog h1.move,#News h1.move,#Insta h1.move
{ opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1); }


@supports (-ms-ime-align: auto) {
	#Blog h1.move::before,#News h1.move::before,#Insta h1.move::before {
        opacity: 0.4;
    }
}

#Banner { margin-top: 100px; }
#Banner .fb { display: none; }
#Banner ul { padding: 0 50px; display: flex; justify-content: space-around; box-sizing: border-box; }
#Banner ul li { max-width: 312px; width: 31%; }

footer { margin-top: 50px; }

.svg-animation .cls-1,.svg-animation .cls-2,.svg-animation .cls-3 {
    fill: none; stroke: #ff0; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: 1500; stroke-dashoffset: 1500;
}

@keyframes fade {
  0% { opacity: 0; visibility: hidden; transform: translateY(200px); }
  100% { opacity: 1; visibility: visible; transform: translateY(0); }
}

@media screen and (max-width:960px) {
	#Mainvisual { margin-top: 50px; height: calc(100vh - 50px); }
	#Mainvisual .date .day { font-size: clamp(2.25rem, -0.25rem + 6.67vw, 3.75rem); }

	h1 { font-size: 2.438rem; }
	
	#Opencampus { padding: 0 30px; }
	#Opencampus h1 { text-align: center; margin-left: 0; }
	#Opencampus::before { display: none; }
	#Opencampus ul { padding: 0 30px; width: 100%; margin-top: 10px; }
	#Opencampus ul::before { content: ""; display: block; background: #eeefef; position: absolute; width: calc(100% + 30px); height: 100%; top: 35px; left: 30px; z-index: -2; }
	#Opencampus ul li { padding: 50px 0; }
	#Opencampus .link { font-size: 0.875rem; margin-top: 10px; }
	#Opencampus ul li .cat { font-size: 5.4vw; }
	
	#Pickup::before { right: 0; left: 0; margin: auto; }
	#Pickup h1 { margin-left: 5%; text-align: center; }
	#Pickup ul li span { font-size: 0.875rem; }
	
	#Blog h1::before,#News h1::before,#Insta h1::before { left: 0; right: 0; margin: auto; }
	#Blog h1,#News h1,#Insta h1 { text-align: center; margin-left: 5%; }
	#Blog ul { padding: 0 30px; margin-top: -10px; }
	#Blog ul li { width: 47%; }
	#Blog ul li:last-child { display: none; }
	#Blog ul li:first-child { margin-top: 50px; }
	#Blog ul li:nth-child(2) { margin-top: 20px; }
	#Blog .link { font-size: 0.875rem; }
	
	#News div.box { margin: 25px 30px 0 30px; }
	#News div.box dl { padding: 30px 30px 0 30px; }
	#News .link { font-size: 0.875rem; }
	
	#Insta .box { margin: -40px 50px 0 50px; }
	
	#Banner ul { padding: 0 30px; justify-content: space-between; }
}


@media screen and (max-width:600px) {
	#mainvis { width: 100%; height: calc(100vh - 50px); margin-top: 0; }
	#mainvis::after { display: none; }
	#mainvis li { width: 100%; height: calc(100vh - 50px); }
	#mainvis li img { object-position: 100% 50%; }
  #mainvis li:nth-child(2n) img { object-position: 20% 50%; }
  #mainvis li:nth-child(3n) img { object-position: 30% 50%; }
	#Mainvisual .academy { width: 200px; height: calc(100% - 45px); top: 0; left: 0; padding-left: 5.5%; background: linear-gradient(to right, rgba(0,0,0,0.3) 0%,rgba(255,255,255,0) 100%); display: flex; align-items: center; }
	#Mainvisual .academy img { width: auto; height: 82%; }
	#Mainvisual .date { width: 31%; right: 3%; }
	#Mainvisual .date .day { font-size: clamp(1.875rem, 0.161rem + 8.57vw, 3.375rem); }

	.news { height: 45px; overflow: hidden; }
	.news .inner { width: 90%; margin: auto; }
	.news p { font-size: 0.750rem; }
	.news p.ttl { margin-right: 15px; }
	.news p.ttl::before { width: 18px; height: 16px; margin-right: 10px; }
	.news p.ttl + p { min-width: initial; }
	
	#Ao-banner { margin: 50px auto 0 auto; }
	#Ao-banner .sp { display: block; }
	#Ao-banner .pc { display: none; }
	
	h1 { font-size: 1.750rem; white-space: nowrap; height: 50px; }
	#Opencampus h1::before { max-width: 523px; width: 81%; height: 0; padding-top: 41%; left: 0; right: 0; margin: auto; top: 0; }
	#Opencampus ul { margin-top: 5px; }	
	#Opencampus ul li .date { font-size: 12vw; left: 0px; }
	#Opencampus ul li .date span { font-size: 4vw; }
	#Opencampus ul li .cat { font-size: 7.5vw; }
	#Opencampus ul li .ttl span { font-size: 0.938em; font-size: 3vw; }
	#Opencampus .link { letter-spacing: 0.1em; padding-right: 0; }
	#Opencampus .link::after,#Blog .link::after,#News .link::after { width: 45px; background: url(../../images/link_arrow.svg) no-repeat right; }
	
	#Pickup { margin-top: 50px; position: relative; padding: 0 30px; }
	#Pickup::before { max-width: 523px; width: 81%; height: 0; padding-top: 41%; left: 0; right: 0; top: 0; margin: auto; }
	#Pickup h1 { margin: 0; }
	#Pickup ul li { max-width: 480px; width: 100%; margin: 10px auto 0 auto; font-size: 1.125em; }
	#Pickup ul li:nth-child(odd),#Pickup ul li:first-child,#Pickup ul li:nth-child(2) { margin-top: 10px; }
	#Pickup ul li.move:nth-child(even) { transition-delay: 0s; }

	#Blog { margin-top: 100px; }
	#Blog h1 { margin: 0; padding: 0 30px; }
	#Blog h1::before,#News h1::before,#Insta h1::before { max-width: 422px; width: 68%; height: auto; left: 0; right: 0; top: 0; margin: auto; }
	#Blog ul { flex-wrap: wrap; }
	#Blog ul li { max-width: 480px; width: 100%; margin: auto; }
	#Blog ul li:first-child { margin-top: 30px; }
	
	#News div.box dl { font-size: 0.875em; }
	#News .link { text-align: right; padding: 20px; }
	
	#Insta h1 { margin: 0; padding: 0 30px; }
	#Insta .box { margin: 20px 30px 0 30px; width: calc(100% - 60px); }
  #Insta .insta_list { gap: 10px; margin-bottom: 10%; }
  #Insta .insta_list li{ width: calc((100% - 20px)/2); }
	
	#Banner .fb { display: block; max-width: 550px; width: 100%; margin: 0 auto; padding: 0 30px; box-sizing: border-box; }
	
	#Banner { margin-top: 50px; }
	#Banner ul { flex-wrap: wrap; flex-direction: column; width: 170px; justify-content: center; margin-top: 50px; }
	#Banner ul li { max-width: 310px; width: 100%; margin-left: auto; margin-right: auto; }
	#Banner ul li + li { margin-top: 15px; }
	
}