﻿/*
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, figure, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	background: rgba(0, 0, 0, 0);
	border: 0;
	outline: 0;
	font-size: 1em
}
body, table, input, textarea, select, option {
	font-family: "Noto Sans JP", sans-serif
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block
}
ol, ul {
	list-style: none
}
blockquote, q {
	quotes: none
}
:focus {
	outline: 0
}
ins {
	text-decoration: none
}
del {
	text-decoration: line-through
}
img {
	vertical-align: top;
	height: auto;
	width: 100%
}
html {
	font-size: 13px
}
@media(max-width: 768px) {
	html {
		font-size: 2.6041666667vw
	}
}
body {
	color: #3f3f3f;
	font-size: 1.4rem;
	line-height: 1.6;
	font-feature-settings: "palt";
	letter-spacing: .05em
}
summary, a {
	transition: .3s ease;
	text-decoration: none;
	display: block
}
summary:hover, a:hover {
	cursor: pointer;
	transform: scale(1.05)
}
@media(max-Width: 768px) {
	::-webkit-scrollbar {
		display: none
	}
}
.scrAnim {
	transition: all .8s .3s ease-in-out;
	opacity: 0;
	transform: translateY(4rem)
}
.scrAnim.toRight {
	transform: translateX(-4rem)
}
.scrAnim.on {
	opacity: 1;
	transform: none
}
#container {
	z-index: 1
}
#container, header, #keyVisual, main, footer {
	width: 100%;
	max-width: 768px;
	margin: 0 auto;
	position: relative
}
header {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0371d2;
	box-sizing: border-box;
	text-align: center
}
header .logo {
	height: 1.4rem;
	display: block;
	padding: 1rem 0;
	line-height: 0
}
header .logo img {
	height: 100%
}
#keyVisual {
	height: auto;
	background: #88f8f8
}
#keyVisual .kv {
	width: 100%;
	position: relative;
	aspect-ratio: 768/1360;
	min-height: 60rem;
	background: url(../img/kv_bg2.webp) no-repeat top/100% auto, url(../img/kv_bg1.webp) no-repeat bottom/100% auto, linear-gradient(to bottom, #0371d2 25%, transparent 25%)
}
#keyVisual .kv h1 {
	width: 76.8229166667%;
	padding: 0 0;
	position: relative;
	margin: 0 auto;
	z-index: 1
}
#keyVisual .kv .free {
	width: 18.2291666667%;
	position: absolute;
	top: 31rem;
	right: 2rem;
	z-index: 0
}
@keyframes rotate {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg)
	}
}
#keyVisual .kv .character {
	width: 100%;
	position: absolute;
	top: 0rem;
	z-index: 0
}
#keyVisual .kv .present {
	width: 32.5520833333%;
	position: absolute;
	top: 17rem;
	right: 4rem;
	z-index: 0
}
#keyVisual .kv .catch {
	width: 89.84375%;
	margin: 0 auto;
	position: absolute;
	bottom: 17rem;
	left: 0;
	right: 0;
	z-index: 1
}
#keyVisual .kv .option {
	width: 47.9166666667%;
	position: absolute;
	top: 15rem;
	right: 0;
	z-index: 0
}
#keyVisual .kv .eventBtn {
	display: block;
	margin: 0 auto;
	width: 91.6666666667%;
	position: absolute;
	bottom: 5em;
	left: 0;
	right: 0;
	animation: event_btn 1.9s ease-in-out .5s infinite
}
@keyframes event_btn {
	0% {
		left: 0
	}
	10% {
		left: .25rem
	}
	20% {
		left: -0.25rem
	}
	30% {
		left: .5rem
	}
	40% {
		left: -0.5rem
	}
	50% {
		left: .25rem
	}
	60% {
		left: -0.25rem
	}
	70% {
		left: 0
	}
}
#keyVisual .kv .animeCopyright {
	font-size: 1rem;
	position: absolute;
	left: 2rem;
	bottom: 5rem
}
*/
.infoOC__card {
	padding: 1rem;
	box-sizing: border-box;
	display: flex;
	gap: 1rem;
	transition: .4s;
	background: #fff;
	border-radius: 1rem
}
.infoOC__card .infoOC__figure {
	width: 27%;
	border-radius: 1rem;
	overflow: hidden;
	align-self: center
}
.infoOC__card .infoOC__figure .infoOC__img {
	aspect-ratio: 1/1;
	width: 100%
}
.infoOC__card .infoOC__textArea {
	width: 65.7%
}
.infoOC__card .infoOC__textArea .infoOC__timeWrapper {
	display: flex;
	gap: .5rem;
	font-size: 1rem
}
.infoOC__card .infoOC__textArea .infoOC__timeWrapper .infoOC__time {
	font-size: .8rem;
	font-weight: bold;
	color: #e7752f;
	border-radius: .5rem;
	padding: .1rem 0
}
.infoOC__card .infoOC__textArea .infoOC__timeWrapper .infoOC__time .schoolname {
	display: none
}
.infoOC__card .infoOC__textArea .infoOC__timeWrapper .infoOC__time span {
	font-size: .6rem;
	background: #dbdbdb;
	display: inline-block;
	padding: 0 .5rem;
	margin-right: .5rem;
	color: #333
}
.infoOC__card .infoOC__textArea .infoOC__text {
	color: #00238b;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.5
}
/*
#love {
	background: url(../img/frame_wavy-yellow.webp) no-repeat top/100% auto, linear-gradient(135deg, #9deea4 20%, #76e8ee 62%);
	padding-bottom: 10rem
}
#love h2 {
	padding-top: 2rem;
	width: 100%
}
#love .conjunction {
	width: 26.5625%;
	margin: 0 auto;
	position: absolute;
	top: -5rem;
	right: 0;
	left: 0
}
#love .lead {
	text-align: center;
	font-weight: 800;
	font-size: 2.2rem;
	top: -1rem;
	position: relative
}
#love .slide-box {
	padding-bottom: 2rem
}
#love .slide-box .infoOC__list {
	height: auto
}
#love .slide-box .infoOC__list .infoOC__card {
	flex-wrap: wrap;
	flex-direction: column;
	margin: 0 1rem;
	align-items: center;
	height: 100%
}
#love .slide-box .infoOC__list .infoOC__card .infoOC__figure {
	width: 100%
}
#love .slide-box .infoOC__list .infoOC__card .infoOC__textArea {
	width: 100%
}
#love .slide-box .infoOC__list .infoOC__card .infoOC__textArea .infoOC__time .schoolname {
	display: inline;
	background: none;
	border: #e60012 solid 2px;
	border-radius: 3rem;
	color: #e60012;
	background: #fff;
	aspect-ratio: 1/1;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 0;
	padding: 1rem;
	transform: translateY(-5rem)
}
*/
.btn_school {
	display: block;
	margin: 0 auto;
	width: 91.6666666667%
}
/*
#choice, #choice2 {
	position: relative;
	padding: 0rem 0 15rem
}
#choice h2, #choice2 h2 {
	width: 100%;
	margin: 0 auto;
	padding: 2rem 0 2rem
}
#choice .lead, #choice2 .lead {
	text-align: center;
	font-weight: 800;
	font-size: 2rem;
	top: -1rem;
	padding-bottom: 1rem;
	position: relative;
	color: #fff;
	filter: drop-shadow(0.2rem 0.2rem 0.2rem #2f46af)
}
*/
#choice .buttonBox, #choice2 .buttonBox {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: .8rem;
	width: 90%;
	margin: 0 auto;
	padding-bottom: 2rem
}
#choice .buttonBox li a, #choice2 .buttonBox li a {
	display: block;
	width: 100%;
	color: #3f3f3f;
	background: #f9db26;
	border-radius: 1rem;
	position: relative;
	text-align: center;
	filter: drop-shadow(0.3rem 0.3rem 0rem #5263b9);
	padding: 1rem 2.2rem 1rem 1rem;
	outline: .14rem solid #fff;
	outline-offset: -0.4rem;
	box-sizing: border-box;
	font-weight: 800
}
#choice .buttonBox li a::after, #choice2 .buttonBox li a::after {
	content: "";
	transform: rotate(45deg);
	width: .6rem;
	height: .6rem;
	border-top: #3f3f3f .2rem solid;
	border-right: #3f3f3f .2rem solid;
	position: absolute;
	right: 1.4rem;
	margin: auto 0;
	top: 0;
	bottom: 0
}
#choice .buttonBox li a.tab-active, #choice2 .buttonBox li a.tab-active {
	color: #3f3f3f;
	background: #fff;
	outline: .14rem solid #3f3f3f
}
#choice .buttonBox li a.tab-active::after, #choice2 .buttonBox li a.tab-active::after {
	border-top: #3f3f3f .2rem solid;
	border-right: #3f3f3f .2rem solid
}
#choice .contentBox, #choice2 .contentBox {
	position: relative;
	/*width: 90%;*/
	display: flex;
	margin: 0 auto
}
#choice .contentBox .tab-content, #choice2 .contentBox .tab-content {
	display: none
}
#choice .contentBox .tab-content .more, #choice2 .contentBox .tab-content .more {
	margin-top: 2rem;
	width: 100%;
	padding: 1rem;
	justify-content: center;
	box-sizing: border-box;
	display: flex;
	border-radius: 3rem;
	background: #dd4751;
	color: #fff;
	position: relative;
	font-weight: 800;
	filter: drop-shadow(0.3rem 0.3rem 0rem #000)
}
#choice .contentBox .tab-content .more::after, #choice2 .contentBox .tab-content .more::after {
	content: "";
	transform: rotate(45deg);
	width: 1rem;
	height: 1rem;
	border-top: #fff .2rem solid;
	border-right: #fff .2rem solid;
	position: absolute;
	right: 2rem;
	margin: auto 0;
	top: 0;
	bottom: 0
}
#choice .contentBox .tab-content ul, #choice2 .contentBox .tab-content ul {
	display: flex;
	flex-direction: column;
	gap: 1rem
}
#choice .contentBox .tab-content.tab-content-active, #choice2 .contentBox .tab-content.tab-content-active {
	display: block;
	width: 100%;
}
#choice .bnr, #choice2 .bnr {
	width: 90%;
	margin: auto;
	padding-top: 4rem;
	display: flex;
	flex-wrap: wrap;
	gap: 3rem
}
#choice .bnr a img, #choice2 .bnr a img {
	box-shadow: rgba(0, 0, 0, .3) .3rem .3rem 0
}
/*
#choice {
	margin-top: -5rem
}*/
#choice .courseTitle {
	padding: 4rem 0 1rem
}
#choice .course {
	padding: 0 2rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem
}
#choice .course li {
	position: relative
}
#choice .course li::before {
	content: "";
	background: #cafdff;
	width: 6rem;
	height: 6rem;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	border-radius: 50%
}
#choice .course li a {
	color: #333;
	position: relative;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	height: 6rem
}
#choice .course li a::after {
	content: "";
	width: .6rem;
	height: .6rem;
	position: absolute;
	margin: auto;
	right: 1.5rem;
	top: 0;
	bottom: 0;
	border-top: #333 solid 1px;
	border-right: #333 solid 1px;
	rotate: 45deg
}

/*

#choice2 {
	padding: 3rem 0 7rem;
	background: #88f8f8;
	background-blend-mode: normal, color-dodge
}

#oc, #ontheday, #campaign, #about, #faq {
	position: relative;
	margin-top: -12rem
}
#oc h2, #ontheday h2, #campaign h2, #about h2, #faq h2 {
	width: 100%;
	margin: 0 auto;
	padding: 2rem 0 2rem;
	position: absolute;
	z-index: 1
}
#oc .mainBox, #ontheday .mainBox, #campaign .mainBox, #about .mainBox, #faq .mainBox {
	clip-path: polygon(0 11rem, 100% 0, 100% 100%, 0 100%);
	background: #76e8ee;
	padding: 12.5rem 0 15rem
}
#oc {
	margin-top: -12rem
}
#oc .mainBox {
	background: #76e8ee
}
#oc .mainBox .subText {
	padding: 0 0 1rem;
	width: 90%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem
}
#oc .mainBox .subText li {
	font-size: 1.7rem;
	font-weight: bold;
	background: #fff;
	line-height: 1.2
}
#oc .mainBox .lead {
	width: 90%;
	margin: auto
}
#oc .mainBox h3 {
	padding-bottom: 2rem
}
#oc .mainBox .points {
	width: 90%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem
}
#oc .mainBox .points>div {
	display: grid;
	column-gap: 1rem;
	row-gap: .6rem;
	grid-template-areas: "c a" "c b";
	grid-template-rows: 3rem auto
}
#oc .mainBox .points>div dt {
	grid-area: a;
	font-size: 2rem;
	font-weight: bold
}
#oc .mainBox .points>div dt span {
	background: linear-gradient(transparent 70%, #ffed3f 70%, #ffed3f 100%)
}
#oc .mainBox .points>div .text {
	grid-area: b
}
#oc .mainBox .points>div .thumb {
	grid-area: c;
	width: 14rem
}
#ontheday {
	position: relative
}
#ontheday .mainBox {
	background: url(../img/ontheday_bg.webp) no-repeat top -2rem center/100% auto, linear-gradient(135deg, #73ee9b 20%, #c5ee9a 92%)
}
#ontheday .mainBox ul {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 auto 4rem;
	gap: 1rem
}
#ontheday .mainBox ul li {
	width: 29.1666666667%
}
#ontheday .mainBox ul li:nth-of-type(2) {
	margin-top: 6rem
}
#ontheday .mainBox ul li:nth-of-type(3) {
	margin-top: 12rem
}
#campaign .mainBox {
	padding-top: 17rem;
	padding-bottom: 23rem;
	background: #f4f2c9
}
#campaign .mainBox dl {
	width: 90%;
	margin: auto;
	padding-bottom: 6rem;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem
}
#campaign .mainBox dl dt {
	text-align: center;
	font-size: 1.2rem;
	padding-bottom: 1rem
}
#campaign .mainBox dl dd a {
	box-shadow: rgba(0, 0, 0, .3) .3rem .3rem 0
}
#about h2 {
	width: 70.8333333333%;
	padding: 0;
	margin: auto;
	left: 0;
	right: 0;
	top: -8rem
}
#about>figure {
	margin-top: -9rem;
	width: 23.1770833333%;
	right: 3rem;
	position: absolute;
	display: block;
	z-index: 1
}
#about .mainBox {
	padding: 18rem 0 15rem
}
#about .mainBox>figure {
	margin-top: -4rem;
	width: 32.2916666667%;
	position: absolute;
	display: block
}
#about .mainBox::before {
	content: "";
	top: 0;
	left: 0;
	right: 0;
	content: "";
	width: 100%;
	height: 100%;
	position: fixed;
	background: url(../img/about_bg.webp) repeat-y top/100% auto;
	z-index: -1
}
#about .mainBox .copy {
	text-align: center
}
#about .mainBox .copy span {
	background: #fff;
	line-height: 2.4
}
#about .mainBox .copy span.strong {
	color: #b89435;
	font-size: 4rem;
	font-weight: 600;
	font-family: "Oswald";
	line-height: 1.6;
	background: none
}
#about .mainBox .prizes {
	margin: 5rem auto 6rem;
	display: flex;
	flex-wrap: wrap;
	gap: 4rem
}
#about .mainBox .prizes li {
	font-size: 2rem;
	width: 70%;
	margin: 0 auto;
	padding: 0 4rem;
	position: relative;
	color: #b89435;
	line-height: 1;
	text-align: center;
	font-weight: bold
}
#about .mainBox .prizes li .S {
	font-size: 2rem
}
#about .mainBox .prizes li .L {
	font-size: 7rem;
	font-family: "Oswald";
	font-weight: 900
}
#about .mainBox .prizes li .LL {
	font-size: 9rem;
	font-family: "Oswald";
	font-weight: 900
}
#about .mainBox .prizes li::before, #about .mainBox .prizes li::after {
	content: "";
	display: inline-block;
	position: absolute;
	width: 6rem;
	height: 100%;
	top: 0;
	aspect-ratio: 10/20;
	margin: 0 2rem;
	background: url(../img/bg_prize.webp) no-repeat top/auto 100%;
	left: 0
}
#about .mainBox .prizes li::after {
	transform: scaleX(-100%);
	right: 0;
	left: auto
}
#about .mainBox .lead {
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	padding-bottom: 1rem
}
#about .mainBox .swiper {
	padding-bottom: 3rem
}
#about .mainBox .swiper .swiper-slide {
	text-align: center
}
#about .mainBox .swiper .swiper-slide iframe {
	width: 90% !important;
	max-width: 414px;
	height: auto;
	aspect-ratio: 9/16
}
#faq .mainBox {
	background: linear-gradient(135deg, #73ee9b 20%, #c5ee9a 92%);
	padding-bottom: 6rem
}
#faq .mainBox .faq {
	padding: 5rem 2rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6rem
}
#faq .mainBox .faq div dt {
	padding: 2rem;
	border-radius: 1rem;
	background: #fff;
	margin-bottom: 1rem;
	margin-left: 3rem;
	position: relative
}
#faq .mainBox .faq div dt::before {
	content: "";
	display: block;
	width: 6rem;
	height: 6rem;
	top: -4rem;
	left: -3.5rem;
	position: absolute;
	background: url(../img/faq_img1.webp) no-repeat top/contain
}
#faq .mainBox .faq div dd {
	padding: 2rem;
	border-radius: 1rem;
	background: #f4efc1
}
#faq .mainBox .faq div:nth-of-type(2n) dt::before {
	background: url(../img/faq_img2.webp) no-repeat top/contain
}
:root {
	--swiper-navigation-size: 44px
}
.swiper-button-next, .swiper-button-prev {
	color: #333;
	right: var(--swiper-navigation-sides-offset, 0);
	left: auto;
	position: absolute;
	top: var(--swiper-navigation-top-offset, 40%);
	margin-top: calc(0px - var(--swiper-navigation-size)/2);
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--swiper-navigation-color, var(--swiper-theme-color))
}
.swiper-button-next::after, .swiper-button-prev::after {
	content: "next";
	color: #3f3f3f;
	background: #f9db26;
	border-radius: 50%;
	aspect-ratio: 1/1;
	width: 3rem;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	font-size: 2rem;
	font-weight: bold;
	font-family: swiper-icons;
	text-transform: none !important;
	letter-spacing: 0;
	font-variant: initial;
	line-height: 1
}
.swiper-button-prev {
	left: var(--swiper-navigation-sides-offset, 0);
	right: auto
}
.swiper-button-prev::after {
	content: "prev"
}
.slide-navigation {
	display: flex;
	width: fit-content;
	padding-top: 2rem;
	margin: 0 auto;
	gap: 2rem
}
.slide-navigation .item {
	width: 2rem;
	height: 2rem;
	background-color: #f9db26;
	cursor: pointer
}
.slide-navigation .item.is-active {
	background-color: #fff;
	cursor: default
}
.spCTABtnBox {
	display: flex
}
.ctaBox .captionBox {
	width: fit-content;
	margin: 0 auto;
	text-align: center;
	padding: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem
}
.ctaBox .captionBox .caption {
	font-size: 1.4rem;
	font-weight: bold;
	padding-bottom: 1rem
}
.ctaBox .captionBox .caption p {
	color: #674987;
	font-weight: bold;
	line-height: 1.4;
	padding-top: .2rem;
	font-size: 2rem
}
.ctaBox .captionBox .caption p span {
	text-decoration: underline wavy #e9c063
}
.ctaBox .captionBox img {
	width: 30%;
	z-index: 1
}
.ctaBox .ctaBtn {
	width: 92.1875%;
	margin: -1rem auto 0;
	position: relative;
	display: block;
	animation: anim_btn 1.9s ease-in-out 0s infinite
}
.ctaBox .ctaBtn img {
	animation: anim_btn-chara 1.9s ease-in-out .5s infinite
}
.ctaBox .ctaBtn .character {
	position: absolute;
	width: 24%;
	top: -0.5rem;
	left: -1rem;
	padding-left: 2.5rem
}
.ctaBox .ctaBtn p.mainText {
	font-size: 1.6rem;
	padding: 1.5rem 0rem 1.3rem 9.5rem;
	width: fit-content;
	line-height: 1.2
}
.ctaBox .ctaBtn p.mainText span {
	font-size: 4.1rem;
	display: block
}
.ctaBox .ctaBtn p.feefree {
	aspect-ratio: 1/1;
	width: 4rem;
	height: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fcee21;
	border-radius: 50%;
	color: #3f3f3f;
	line-height: 1.2;
	padding: 1rem;
	position: absolute;
	right: -2rem;
	top: -2.5rem;
	filter: drop-shadow(0px 1px 1px black)
}
@keyframes anim_btn {
	0% {
		left: 0
	}
	10% {
		left: .25rem
	}
	20% {
		left: -0.25rem
	}
	30% {
		left: .5rem
	}
	40% {
		left: -0.5rem
	}
	50% {
		left: .25rem
	}
	60% {
		left: -0.25rem
	}
	70% {
		left: 0
	}
}
@keyframes anim_btn-chara {
	0% {
		left: -1rem
	}
	10% {
		left: -1.25rem
	}
	20% {
		left: -0.75rem
	}
	30% {
		left: -1.5rem
	}
	40% {
		left: -0.5rem
	}
	50% {
		left: -1.25rem
	}
	60% {
		left: -0.75rem
	}
	70% {
		left: -1rem
	}
}
#fixdBtnSP, #fixdBtn {
	display: flex;
	position: fixed;
	transition: all ease .3s;
	width: 100%;
	max-width: 768px;
	bottom: 0;
	opacity: 1;
	z-index: 10;
	align-items: end
}
#fixdBtnSP.is-bnrHide, #fixdBtn.is-bnrHide {
	opacity: 0;
	pointer-events: none
}
#fixdBtnSP a, #fixdBtn a {
	box-sizing: border-box;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 6rem;
	font-size: 1.4rem;
	font-weight: bold;
	animation: anim_btn_trace 2s ease 0s infinite
}
#fixdBtnSP a:nth-of-type(2), #fixdBtn a:nth-of-type(2) {
	animation-delay: .2s
}
#fixdBtnSP .fixdBtn_campus, #fixdBtn .fixdBtn_campus {
	background: linear-gradient(45deg, #e60012 25%, #d76908 25%, #d76908 50%, #e60012 50%, #e60012 75%, #d76908 75%, #d76908);
	background-size: 4rem 4rem;
	animation: anim_btn_trace_wide 2s ease 0s infinite, anime_stripeBtn .8s infinite linear;
	color: #fff;
	position: relative
}
@keyframes anime_stripeBtn {
	0% {
		background-position-y: 0
	}
	100% {
		background-position-y: -4rem
	}
}
#fixdBtnSP .fixdBtn_campus span, #fixdBtn .fixdBtn_campus span {
	color: #3f3f3f;
	width: 3.4rem;
	height: 3.4rem;
	aspect-ratio: 1/1;
	font-size: 1.4rem;
	padding: 1rem;
	top: -4rem;
	right: .5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	background: #fcee21;
	border-radius: 50%;
	filter: drop-shadow(0px 1px 1px black);
	transform: rotate(6deg);
	line-height: 1.2
}
#fixdBtnSP .fixdBtn_campus span::after, #fixdBtn .fixdBtn_campus span::after {
	content: "";
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: #fcee21;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -0.5rem
}
#fixdBtnSP .fixdBtn_info, #fixdBtn .fixdBtn_info {
	background: #fff;
	color: #000;
	border: solid .2rem #3f3f3f
}
#fixdBtnSP {
	position: relative;
	bottom: auto
}
#fixdBtnSP a {
	animation: none;
	line-height: 1.3
}
#fixdBtnSP a.fixdBtn_campus {
	animation: anime_stripeBtn .8s infinite linear
}
#fixdBtnSP a.fixdBtn_campus span {
	top: -4.5rem;
	right: .8rem
}
@keyframes anim_btn_trace {
	0% {
		height: 6rem
	}
	10% {
		height: 6.2rem
	}
	20% {
		height: 5.8rem
	}
	30% {
		height: 6.4rem
	}
	40% {
		height: 5.6rem
	}
	50% {
		height: 6.2rem
	}
	60% {
		height: 5.8rem
	}
	70% {
		height: 6rem
	}
	100% {
		height: 6rem
	}
}
@keyframes anim_btn_trace_wide {
	0% {
		padding: 0 2rem
	}
	10% {
		padding: 0 2.1rem
	}
	20% {
		padding: 0 1.9rem
	}
	30% {
		padding: 0 2.2rem
	}
	40% {
		padding: 0 1.8rem
	}
	50% {
		padding: 0 2.1rem
	}
	60% {
		padding: 0 1.9rem
	}
	70% {
		padding: 0 2rem
	}
	100% {
		padding: 0 2rem
	}
}
.pc_content {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	z-index: 0;
	display: grid;
	grid-template-rows: auto auto auto
}
.pc_content .logoBox {
	width: calc((100% - 504px)/2);
	position: relative;
	padding: 8rem 2rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box
}
.pc_content .logoBox .logos {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .5rem 0rem;
	box-sizing: border-box;
	gap: 4%;
	width: 18rem
}
.pc_content .logoBox .logos .logo {
	width: 40%;
	display: flex
}
.pc_content .logoBox .logos .logo_batsu {
	width: 4%
}
.pc_content .logoBox .logos .logo2 {
	width: 60%
}
.pc_content .logoBox .title {
	width: 22rem
}
.pc_content nav {
	width: calc((100% - 504px)/2);
	display: flex;
	flex-direction: column;
	align-items: center
}
.pc_content nav .pageNavi {
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: baseline;
	gap: 1rem;
	padding: 2rem;
	clip-path: polygon(0 8%, 12% 0%, 92% 5%, 100% 9%, 94% 96%, 14% 100%, 2% 93%)
}
.pc_content nav .pageNavi li a {
	width: fit-content;
	color: #3f3f3f;
	padding-left: 1.5rem;
	font-size: 1.2rem;
	font-weight: 700;
	background: url(../img/ico_link.webp) no-repeat left center/auto 50%;
	display: block
}
.pc_content .slider-wrapper {
	display: flex;
	overflow: hidden
}
.pc_content .slider-wrapper .slider {
	animation: scroll-left 10s infinite linear .5s both;
	display: flex;
	padding: 0
}
.pc_content .slider-wrapper .slider .slide {
	width: 16.6666666667vw;
	display: block
}
.pc_content .slider-wrapper .slider .slide img {
	width: 100%
}
footer {
	padding-bottom: 6rem;
	background: #e60012;
	overflow: hidden
}
footer a {
	display: block;
	padding: 5rem 7rem;
	box-sizing: border-box;
	background: #fff
}
footer address {
	color: #fff;
	font-style: normal;
	font-size: 1rem;
	text-align: center;
	background: #e60012;
	padding: .5rem 0;
	border-top: #e67590 solid 1rem;
	position: relative
}
.attention {
	padding-top: 2rem;
	font-size: 1.2rem;
	font-weight: normal;
	text-align: left
}
.attention li {
	padding-left: 1em
}
.attention li::before {
	content: "※";
	display: inline-block;
	text-indent: -1em
}
.sp-menu .sp-menu__box {
	transition: all 500ms;
	position: fixed;
	height: 4rem;
	width: 4rem;
	top: .5rem;
	right: .5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	z-index: 90;
	background: #fff;
	cursor: pointer;
	border: #fff 1px solid
}
.sp-menu .sp-menu__box.on {
	border: 1px solid #fff;
	top: 1rem;
	right: 1rem;
	left: auto;
	transform: translateX(0%)
}
.sp-menu .sp-menu__box span, .sp-menu .sp-menu__box:before, .sp-menu .sp-menu__box:after {
	content: "";
	display: block;
	height: .2rem;
	width: 80%;
	border-radius: .5rem;
	background: #666
}
.sp-menu #sp-menu__check {
	display: none
}
.sp-menu #sp-menu__check:checked~.sp-menu__box {
	background: #efe48e;
	border: none
}
.sp-menu #sp-menu__check:checked~.sp-menu__box span {
	background: rgba(255, 255, 255, 0)
}
.sp-menu #sp-menu__check:checked~.sp-menu__box::before {
	position: absolute;
	transform: translateY(100%) rotate(45deg);
	margin-bottom: .5rem
}
.sp-menu #sp-menu__check:checked~.sp-menu__box::after {
	position: absolute;
	transform: translateY(100%) rotate(-45deg);
	margin-bottom: .5rem
}
.sp-menu #sp-menu__check:checked~.sp-menu__content {
	left: auto;
	right: 0
}
.sp-menu .sp-menu__content {
	width: 40%;
	height: 100%;
	position: fixed;
	top: 0;
	right: -40%;
	z-index: 80;
	background: #efe48e;
	transition: all .5s;
	padding: 0
}
.sp-menu .sp-menu__content .bn_box {
	padding: 1rem 0;
	display: flex;
	gap: 1rem;
	flex-direction: column
}
.sp-menu .sp-menu__content .bn_box .bn_sq {
	font-size: 2rem;
	font-weight: 700;
	padding: 1rem 1rem 1rem 2rem;
	background: #dcd1e1;
	display: flex;
	border-left: solid 1rem #a401ff;
	box-shadow: .5rem .5rem 0 rgba(1, 1, 1, .3);
	line-height: 1.4;
	color: #fff
}
.sp-menu .sp-menu__content .bn_box .bt_hakkutsu {
	padding: 1.6rem 3.8rem 1.6rem 6rem
}
.sp-menu .sp-menu__list {
	padding: 5rem 0 0;
	text-align: center;
	width: 80%;
	margin: 0 auto
}
.sp-menu .sp-menu__list dt {
	font-size: 3.6rem;
	font-family: "Oswald";
	font-weight: bold;
	margin-bottom: -2rem
}
.sp-menu .sp-menu__list .sp-menu__item {
	border-bottom: dotted .2rem #d3ca85;
	list-style: none;
	font-size: 1.2rem;
	display: block
}
.sp-menu .sp-menu__list .sp-menu__item:last-of-type {
	border: none
}
.sp-menu .sp-menu__list .sp-menu__item .sp-menu__link {
	display: block;
	box-sizing: border-box;
	color: #000;
	text-align: left;
	text-decoration: none;
	padding: 1rem 0 1rem 2rem;
	background: url(../img/ico_link.webp) no-repeat left center/auto 1rem
}
.charaScrBox {
	display: none
}
@media screen and (max-width: 768px) {
	.pc {
		display: none
	}
	.sp-menu .sp-menu__content {
		width: 100%;
		right: -100%
	}
	#container {
		max-width: 768px
	}
	#fixdBtn {
		max-width: 768px
	}
	#fixdBtn .fixdBtn_campus {
		animation: anim_btn_trace 2s ease 0s infinite, anime_stripeBtn .8s infinite linear
	}
	.pc_content {
		display: none
	}
	#about .mainBox .swiper .swiper-slide iframe {
		width: 82% !important
	}
}
@media screen and (min-width: 769px) {
	.sp {
		display: none
	}
	.sp-menu .sp-menu__content {
		width: 504px;
		right: -504px
	}
	body {
		background: url(../img/bg_weathering.webp) top left, linear-gradient(140deg, #5efdff 24%, #52aeff 48%, #3dbee5 94%);
		background-blend-mode: screen, overlay;
		background-attachment: fixed
	}
	header {
		justify-content: center;
		overflow: hidden
	}
	#about .mainBox::before {
		width: 504px;
		margin: 0 auto
	}
	#container {
		box-shadow: rgba(60, 40, 1, .3) 0px 0px 54px;
		max-width: 504px;
		margin: 0 auto
	}
	.pc_content {
		display: none
	}
	#fixdBtn {
		display: grid;
		bottom: 5vh;
		right: 0;
		width: auto;
		justify-items: end;
		gap: .5rem;
		transform: skewY(-7deg)
	}
	#fixdBtn a {
		width: fit-content;
		height: 4.5rem;
		padding: 0 3rem;
		animation: anim_btn_trace_wide 2s ease 0s infinite
	}
	#fixdBtn a.fixdBtn_info {
		border: none
	}
	#fixdBtn a.fixdBtn_campus span {
		left: -2.5rem;
		top: -4.5rem;
		transform: rotate(-6deg)
	}
}
@media screen and (min-width: 1240px) {
	.pc_content {
		display: grid
	}
	.sp-menu {
		display: none
	}
	#fixdBtn {
		display: grid;
		bottom: 5vh;
		right: 0;
		width: auto;
		justify-items: end;
		gap: .5rem;
		transform: skewY(-7deg)
	}
	#fixdBtn a {
		width: fit-content;
		height: 4.5rem;
		animation: anim_btn_trace_wide 2s ease 0s infinite
	}
	#fixdBtn a.fixdBtn_info {
		border: none
	}
	#fixdBtn a.fixdBtn_campus span {
		top: -4.5rem;
		transform: rotate(-6deg)
	}
	footer {
		margin-bottom: 0
	}
	.charaScrBox {
		top: 0;
		right: 0;
		width: calc(50% - 250px);
		height: 100vh;
		position: fixed;
		z-index: 1;
		display: block
	}
	.charaScrBox::after {
		content: "";
		position: absolute;
		display: block;
		z-index: 1001;
		width: 100%;
		height: 100%
	}
	.charaScrBox .charaScr {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 100vh);
		transition: transform .8s ease, opacity .8s ease;
		width: 100px;
		height: 100px;
		background-color: coral;
		z-index: 1000;
		opacity: 0
	}
	.charaScrBox .charaScr.active {
		transform: translate(-50%, calc(50vh - 50%));
		opacity: 1
	}
	.charaScrBox .charaScr.exit {
		transform: translate(-50%, -100vh);
		opacity: 0
	}
	.charaScrBox .charaScr.charaScrA {
		width: 400px;
		height: 400px;
		background: url(../img/charaA.webp)
	}
	.charaScrBox .charaScr.charaScrB {
		width: 400px;
		height: 400px;
		background: url(../img/charaB.webp)
	}
	.charaScrBox .charaScr.charaScrC {
		width: 400px;
		height: 400px;
		background: url(../img/charaC.webp)
	}
	.charaScrBox .charaScr.charaScrD {
		width: 400px;
		height: 400px;
		background: url(../img/charaD.webp)
	}
	.charaScrBox .charaScr.charaScrE {
		width: 400px;
		height: 400px;
		background: url(../img/charaE.webp)
	}
	.charaScrBox .charaScr.charaScrF {
		width: 400px;
		height: 400px;
		background: url(../img/charaF.webp)
	}
	.charaScrBox .charaScr.charaScrG {
		width: 400px;
		height: 400px;
		background: url(../img/charaB.webp)
	}
}
.sakura {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	z-index: 2
}
.sakura li {
	width: 18px;
	position: absolute;
	list-style: none;
	top: -50px;
	animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate
}
@keyframes fall {
	to {
		top: 120%
	}
}
@keyframes rotate1 {
	from {
		transform: translateX(0px) rotate(0deg)
	}
	to {
		transform: translateX(200px) rotate(-80deg) rotateX(180deg)
	}
}
@keyframes rotate2 {
	from {
		transform: translateX(200px) rotate(-45deg)
	}
	to {
		transform: translateX(0px) rotate(0deg)
	}
}
.sakura li:nth-child(1) {
	left: 0;
	animation: fall 10s linear infinite, rotate1 3s ease-in-out infinite alternate
}
.sakura li:nth-child(2) {
	left: 5vw;
	animation: fall 15s linear infinite, rotate1 2s ease-in-out infinite alternate
}
.sakura li:nth-child(3) {
	left: 15vw;
	animation: fall 9s linear infinite, rotate1 3.5s ease-in-out infinite alternate
}
.sakura li:nth-child(4) {
	left: 30vw;
	animation: fall 8s linear infinite, rotate2 4s ease-in-out infinite alternate
}
.sakura li:nth-child(5) {
	left: 40vw;
	animation: fall 10s linear infinite, rotate1 4s ease-in-out infinite alternate
}
.sakura li:nth-child(6) {
	left: 55vw;
	animation: fall 11s linear infinite, rotate2 3s ease-in-out infinite alternate
}
.sakura li:nth-child(7) {
	left: 65vw;
	animation: fall 5.5s linear infinite, rotate2 2.5s ease-in-out infinite alternate
}
.sakura li:nth-child(8) {
	left: 75vw;
	animation: fall 7s linear infinite, rotate1 3s ease-in-out infinite alternate
}
.sakura li:nth-child(9) {
	left: 85vw;
	animation: fall 12s linear infinite, rotate1 4s ease-in-out infinite alternate
}
.sakura li:nth-child(10) {
	left: 95vw;
	animation: fall 11.4s linear infinite, rotate2 3.8s ease-in-out infinite alternate
}
.sakura li:nth-child(11) {
	left: 65vw;
	animation: fall 6.8s linear infinite, rotate2 3.5s ease-in-out infinite alternate
}
.sakura li:nth-child(12) {
	left: 50vw;
	animation: fall 6s linear infinite, rotate1 2s ease-in-out infinite alternate
}
*/