@charset "UTF-8";


#oc #main {
	background: url(../images/opencampus/bg1_pc.webp) no-repeat top center/cover;
	border-top: none;
	border-bottom: none;
	margin-top: -145px;
	margin-bottom: 0;
	padding-top: 145px;
	padding-bottom: 0;
	position: relative;
	height: 800px;
}

#main .inner {
	width: 1100px;
	margin: 0 auto;
}

#main .inner h2 {
	position: relative;
	width: 508px;
	margin: 120px 0;
	z-index: 10;
}

#main .inner .mainimg {
	position: absolute;
	top: 145px;
	right: 0;
}

#oc .aioseo-breadcrumbs {
	color: #fff;
}

#oc .aioseo-breadcrumbs a {
	color: #fff;
}

.letterarea {
	background: url(../images/opencampus/bg2_pc.webp) no-repeat top center/cover;
	padding: 20px 0 80px;
}

.letterarea .texts {
	width: 848px;
	margin: 0 auto 60px;
}

.letterarea h3 {
	text-align: center;
	color: #fff;
	font-size: 2rem;
	line-height: 2;
}

.selectoc {
	background: url(../images/opencampus/bg3_pc.webp) no-repeat top center/cover;
	padding: 60px 0 0;
}
.selectoc .innerplate {
	width: 1100px;
	margin: 0 auto;
	background: #fff;
	padding: 40px;
	border-radius: 10px 10px 0 0;
}

.selectoc .innerplate h2 {
	text-align: center;
	font-size: 3rem;
	margin-bottom: 40px;
}

.selectoc .tabmenu {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 740px;
	margin: 0 auto 20px;
}

.selectoc .tabmenu button {
	display: block;
	font-size: 2.5rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 20px;
	width: 240px;
	box-sizing: border-box;
	font-feature-settings: "palt";
	background: linear-gradient(90deg, #00E7F6 0%, #00A6DF 100%);
}

.selectoc .tabmenu li:first-child button {
	background: linear-gradient(90deg, #F8645C 0%, #FA973C 100%);
}

.selectoc .tabmenu li:last-child button {
	background: linear-gradient(90deg, #F529E7 0%, #FF0000 100%);
}

.selectoc .tabmenu button:hover {
	opacity: .8;
}

.det h3 {
	font-size: 3rem;
	margin-bottom: 10px;
}
.det h3+p {
	font-size: 1.8rem;
	line-height: 2;
	font-weight: bold;
}
.det ol {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}
.det ol:after {
	display: block;
	content: '';
	width: 180px;
}
.det li {
	width: 180px;
	font-size: 1.6rem;
	line-height: 1.6;
}
.det li h4 span {
	font-size: 1.6rem;
	display: block;
	margin-bottom: 10px;
}
.det li h4 {
	font-size: 2.4rem;
	margin-bottom: 10px;
}
.det .tc1 {
	background: linear-gradient(90deg, #F8645C 0%, #FA973C 100%);
	padding: 30px;
	border-radius: 20px;
	width: 100%;
	color: #fff;
	box-sizing: border-box;
}

.det .tc2 {
	background: linear-gradient(90deg, #00E7F6 0%, #00A6DF 100%);
	padding: 30px;
	border-radius: 20px;
	width: 100%;
	color: #fff;
	box-sizing: border-box;
}
.det .tc3 {
	background: linear-gradient(90deg, #F529E7 0%, #FF0000 100%);
	padding: 30px;
	border-radius: 20px;
	width: 100%;
	color: #fff;
	box-sizing: border-box;
}

#oc #topoc .bg {
	top: 0;
}
#oc #topoc .oplet {
	top: 360px;
}











#eventbox {
	width: 1100px;
	margin: 80px auto 0;
}
#eventbox h3 {
	font-size: 3rem;
	color: #81CDE4;
	margin: 0 0 25px 0;
}

#eventbox ul {
	/* margin-bottom: 100px; */
}
#eventbox li {
	border-radius: 10px;
}

.event-detail {
	width: 90%;
	padding: 60px 0;
	margin: 0 auto;
	display: none;
}


.eventlistbtn {
	width: 640px;
	display: flex;
	justify-content: space-between;
	margin-top: 60px;
}

.eventlistbtn li {
	width: 240px;
	font-size: 1.8rem;
	text-align: center;
}
.eventlistbtn li a {
	display: block;
	background: #fff;
	border-radius: 30px;
	border: 1px solid #000;
	padding: 10px;
	box-sizing: border-box;
}
.eventlistbtn li .btngra2 {
	text-align: center;
	color: #fff;
	background: linear-gradient(90deg, #00ab9d, #1faedf);
	padding: 10px;
}

.eventlistbtn li .disenable {
	background: #ccc;
	border-radius: 30px;
	padding: 10px;
	box-sizing: border-box;
	color: #666;
}

.event-detail {
	display: none;
}

.eventlistbtn li .btngra span {
	background: #fff;
	border-radius: 30px;
	text-align: center;
	display: block;
	vertical-align: middle;
	padding: 10px 0;
	transition: all 0.2s ease;
} 


.kobetsu {
	text-align: center;
}



p.caution {
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	color: #f00;
}

.closeevent {
	width: 1100px;
	background: #fff;
	margin: 0 auto;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.085);
	padding: 0;
	box-sizing: border-box;
	border-radius: 10px;
	margin-bottom: 40px;
	display: flex;
}

.eventlistplate,
.everydayplate {
	width: 1100px;
	margin: 0 auto;
	padding: 0;
	margin-bottom: 40px;
}

.eboxhidden .einner,
.eventlistplate .ebox {
	width: 1100px;
	background: #fff;
	margin: 0 auto;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.085);
	padding: 0;
	box-sizing: border-box;
	border-radius: 10px;
	margin-bottom: 40px;
	display: flex;
}


.eventlistplate .ebox .clbox,
.closeevent .clbox,
.eboxhidden .einner .clbox,
.everydayplate .clbox {
	width: 510px;
	border-radius: 10px 0 0 10px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 20px 0;
}

.eventlistplate .ebox .clbox p,
.closeevent .clbox p,
.eboxhidden .einner .clbox p {
	font-family: "Marcellus", serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 4rem;
	padding: .9em .5em .5em .5em;
	background: #fff;
	display: block;
	text-align: center;
	margin: 0 auto;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	box-sizing: border-box;
}
.closeevent .clbox p {
	font-family: 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, 'Hiragino Sans','Hiragino Kaku Gothic ProN', '游ゴシック体',"segoe ui",'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic', sans-serif;
	font-size: 3.2rem;
	font-weight: bold;
	padding-top: 50px;
}

.eventlistplate .ebox.wend .clbox,
.closeevent.wend .clbox,
.eboxhidden.wend .einner .clbox {
	background: linear-gradient(90deg, #F8645C 0%, #FA973C 100%);
	color: #FC2A00;
}
.eventlistplate .ebox.wday .clbox,
.closeevent.wday .clbox,
.eboxhidden.wday .einner .clbox {
	background: linear-gradient(90deg, #0CE4F4 0%, #29A4DB 100%);
	color: #30A0DD;
}
.eventlistplate .ebox.sday .clbox,
.closeevent.sday .clbox,
.eboxhidden.sday .clbox {
	background: linear-gradient(90deg, #F529E7 0%, #f00 100%);
	color: #F231EA;
}
.eventlistplate .ebox.eday .clbox,
.closeevent.eday .clbox,
.eboxhidden.eday .clbox {
	background: linear-gradient(90deg, #29a4db 0%, #ffee00 100%);
	color: #00a00d;
}

.eventlistplate .desc,
.closeevent .desc,
.eboxhidden .einner .desc {
	width: 590px;
	padding: 20px 60px;
	box-sizing: border-box;
}
.eventlistplate .desc .title,
.closeevent .desc .title,
.eboxhidden .einner .desc .title {
	font-size: 2.4rem;
	font-weight: bold;
	padding-bottom: .5em;
}
.eventlistplate.wend .title,
.closeevent.wed .title,
.eboxhidden.wend .einner .title {
	color: #FC2A00;
}
.eventlistplate.wday .title,
.closeevent.wday .title,
.eboxhidden.wday .einner .title {
	color: #30A0DD;
}
.eventlistplate.sday .title,
.closeevent.sday .title,
.eboxhidden.sday .einner .title {
	color: #F231EA;
}
.eventlistplate.eday .title,
.closeevent.eday .title,
.eboxhidden.eday .einner .title {
	color: #00a00d;
}

.eventlistplate .desc .date,
.closeevent .desc .date,
.eboxhidden .einner .desc .date {
	font-size: 1.8rem;
	font-weight: bold;
	color: #333;
	padding-bottom: .5em;
}
.eventlistplate .desc .text,
.closeevent .desc .text,
.eboxhidden .einner .desc .text {
	font-size: 1.8rem;
	color: #333;
}

.eventlistplate .btnlink a,
.closeevent .btnlink a,
.eboxhidden .einner .btnlink a {
	width: 280px;
	font-size: 1.8rem;
	font-weight: bold;
	text-decoration: underline;
	display: block;
	background: linear-gradient(90deg, #26E0F5 0%, #30A0DD 100%);
	color: #fff;
	border-radius: 10px;
	padding: 10px;
	box-sizing: border-box;
	margin: 20px auto 0 auto;
	text-align: center;
}
.closeevent.eday .btnlink a {
	background: linear-gradient(90deg, #29a4db 0%, #ffee00 100%);
}
.eventlistplate .btnlink a:hover,
.closeevent .btnlink a:hover,
.eboxhidden .einner .btnlink a:hover {
	opacity: .8;
}

#calendardet {
	margin-top: 50px;
	display: none;
}

.eventlistplate h3,
.closeevent h3,
#calendardet h3,
.everydayplate h3 {
	font-size: 3rem;
	color: #81CDE4;
	margin: 0 0 25px 0;
}

#explate {
	padding: 40px 0 20px;
	box-sizing: border-box;
	text-align: center;
	font-size: 1.5rem;
	line-height: 2;
	font-weight: bold;
}

#explate .wend { color: #FC2A00;}
#explate .wday { color: #30A0DD;}
#explate .sday { color: #F231EA;}
#explate .eday { color: #00a00d;}

#explate span {
	display: inline-block;
	margin: 0 10px;
}






.eventlistplate .ebox dt.wend,
.closeevent .ebox dt.wend,
#calendardet .eboxhidden dt.wend { background: #FC2A00;}
.eventlistplate .ebox dt.wday,
.closeevent .ebox dt.wday,
#calendardet .eboxhidden dt.wday { background: #30A0DD;}
.eventlistplate .ebox dt.sday,
.closeevent .ebox dt.sday,
#calendardet .eboxhidden dt.sday { background: #F231EA;}
.eventlistplate .ebox dt.eday,
.closeevent .ebox dt.eday,
#calendardet .eboxhidden dt.eday { background: #00a00d;}

.eventlistplate .ebox dt.special_session:before,
.closeevent .ebox dt.special_session:bofore,
#calendardet .eboxhidden dt.special_session:before {
	color: #ff0;
	position: absolute;
	content: 'SPECIAL';
	font-size: 1.8rem;
	left: 10px;
	top: 10px;
}


.eventlistplate .ebox dd,
.closeevent .ebox dd,
#calendardet .eboxhidden dd {
	padding: 0 30px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: start;
}

.eventlistplate .ebox dd .listdat,
.closeevent .ebox dd .listdat,
#calendardet .eboxhidden dd .listdat {
	width: 430px;
}

.eventlistplate .ebox dd .listdat img,
.closeevent .ebox dd .listdat img,
#calendardet .eboxhidden dd .listdat img {
	width: 100%;
}

.eventlistplate .ebox dd .categ,
.closeevent .ebox dd .categ,
#calendardet .eboxhidden dd .categ {
	font-size: 2.4rem;
	font-weight: bold;
}

.eventlistplate .ebox dd .categ.wend,
.closeevent .ebox dd .catag.wend,
#calendardet .eboxhidden dd .categ.wend { color: #FC2A00;}
.eventlistplate .ebox dd .categ.wday,
.closeevent .ebox dd .categ.wday,
#calendardet .eboxhidden dd .categ.wday { color: #30A0DD;}
.eventlistplate .ebox dd .categ.sday,
.closeevent .ebox dd .categ.sday,
#calendardet .eboxhidden dd .categ.sday { color: #F231EA;}
.eventlistplate .ebox dd .categ.eday,
.closeevent .ebox dd .categ.eday,
#calendardet .eboxhidden dd .categ.eday { color: #00a00d;}

.eventlistplate .ebox dd .categ span,
.closeevent .ebox dd .categ span,
#calendardet .eboxhidden dd .categ span {
	color: #000;
	display: block;
	font-size: 1.8rem;
}

.eventlistplate .ebox dd .desc,
.closeevent .ebox dd .desc,
#calendardet .eboxhidden dd .desc {
	font-size: 1.8rem;
}

.eventlistplate .btnarea,
.closeevent .btnarea,
#calendardet .btnarea {
	display: flex;
	margin: 20px 0;
}

.eventlistplate .ebox dd .btnblock,
.closeevent .ebox dd .btnblock,
#calendardet .eboxhidden dd .btnblock {
	width: 540px;
	padding-top: 20px;
}

.eventlistplate .ebox dd .btnblock .catlabel,
.closeevent .ebox dd .btnblock .catlabel,
#calendardet .eboxhidden dd .btnblock .catlabel {
	font-size: 1rem;
	font-weight: bold;
}

.eventlistplate .ebox dd .btnblock .catlabel span,
.closeevent .ebox dd .btnblock .catlabel span,
#calendardet .eboxhidden dd .btnblock .catlabel span {
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 4px;
	padding: 2px 6px;
	border-radius: 20px;
}



.eventlistplate .ebox dd .btnblock .btnarea p,
.closeevent .ebox dd .btnblock .btnarea p,
#calendardet .eboxhidden dd .btnblock .btnarea p {
	width: 250px;
	font-size: 1.8rem;
	text-align: center;
	margin-right: 10px;
}
.eventlistplate .ebox dd .btnblock .btnarea p a,
.closeevent .ebox dd .btnblock .btnarea p a,
#calendardet .eboxhidden dd .btnblock .btnarea p a {
	display: block;
	background: #fff;
	border-radius: 30px;
	border: 1px solid #000;
	padding: 10px;
	box-sizing: border-box;
}
.eventlistplate .ebox dd .btnblock .btnarea p.disenable,
.closeevent .ebox dd .btnblock .btnarea p.disenable,
#calendardet .eboxhidden dd .btnblock .btnarea p.disenable {
	background: #ccc;
	border-radius: 30px;
	padding: 10px;
	box-sizing: border-box;
	color: #666;
}
.eventlistplate .ebox dd .btnblock .btnarea p a:hover,
.closeevent .ebox dd .btnblock .btnarea p a:hover,
#calendardet .eboxhidden dd .btnblock .btnarea p a:hover {
	text-decoration: none;
}
.eventlistplate .ebox dd .btnblock .btnarea p a.btngra2,
.closeevent .ebox dd .btnblock .btnarea p a.btngra2,
#calendardet .eboxhidden dd .btnblock .btnarea p a.btngra2 {
	text-align: center;
	color: #fff;
	background: linear-gradient(90deg, #00ab9d, #1faedf);
	padding: 10px;
}


.eventlistallbtn {
	text-align: center;
}
.eventlistallbtn a {
	width: 280px;
	font-size: 1.8rem;
	font-weight: bold;
	text-decoration: underline;
	display: block;
	background: linear-gradient(90deg, #26E0F5 0%, #30A0DD 100%);
	color: #fff;
	border-radius: 10px;
	padding: 10px;
	box-sizing: border-box;
	margin: 40px auto 0 auto;
}
.eventlistallbtn a:hover {
	opacity: .8;
}

.kou3-2 img {
	width: 100%;
}
.kou3-2 {
	margin-top: -100px;
	margin-bottom: 100px;
}

.toujitu {
	width: 324px;
	margin: 0 auto 60px;
}


#summer {
	margin-bottom: 100px;
}

#topoc {
	position: relative;
	margin-bottom: 100px;
}
#topoc h2 {
	font-size: 3rem;
	color: #82CAE5;
	width: calc(100% - 8rem);
	margin: 0 0 0 auto;
}

#topoc h2 span {
	font-size: 1.6rem;
	display: block;
}

#topoc .oplet {
	width: 650px;
	position: absolute;
	left: 8rem;
	top: 460px;
}

#topoc .bg {
	position: absolute;
	top: 80px;
	background: url(../images/top/opbg.webp) no-repeat;
	background-size: cover;
	width: 100%;
	height: 400px;
	z-index: -1;
}

#topoc .inner {
	width: 1100px;
	margin: 0 auto;
	padding-top: 140px;
}
#eventcal .splide__arrow {
	background: none;
	background-size: cover;
	background-repeat: no-repeat;
	top: 40px;
	transform: initial;
	width: 78px;
	height: 21px;
	border-radius: 0;
}
#eventcal .splide__arrow--prev {
	background: url(../images/top/prevmonth.svg) no-repeat;
}
#eventcal .splide__arrow--next {
	background: url(../images/top/nextmonth.svg) no-repeat;
}
#eventcal .button:before {
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
	content: "";
	height: 50px;
	left: 0;
	margin: auto;
	position: absolute;
	top: 0;
	width: 50px;
}



/*/////////////////// SP ///////////////////*/
/*/////////////////// SP ///////////////////*/
/*/////////////////// SP ///////////////////*/
/*/////////////////// SP ///////////////////*/
/*/////////////////// SP ///////////////////*/
@media screen and (max-width: 768px) {


#oc #main {
	background: url(../images/opencampus/bg1_sp.webp) no-repeat top center/cover;
	margin-top: 0;
	padding-top: 0;
	height: auto;
}

#main .inner {
	width: 86%;
	height: auto;
	padding-top: 40px;
	padding-bottom: 0;
	border-top: none;
}

#main .inner h2 {
	width: 100%;
	border-left: none;
	padding: 0 0 0 0;
	margin: 20px 0 0;
}

#main .inner .mainimg {
	position: static;
	top: auto;
	right: 0;
	margin: -10% calc(49.3% - 50vw) 0;
	width: 100vw;
}

#main .inner .mainimg img {
	width: 96%;
}

.letterarea {
	background: url(../images/opencampus/bg2_sp.webp) no-repeat top center/cover;
	padding: 20px 0 80px;
}

.letterarea .texts {
	width: 100%;
	margin: 0 auto 30px;
}

.letterarea h3 {
	color: #000;
	font-size: 1.6rem;
	line-height: 1.7;
	letter-spacing: .1em;
}

.selectoc {
	background: url(../images/opencampus/bg3_sp.webp) no-repeat top center/cover;
	padding: 30px 0 0;
}
.selectoc .innerplate {
	width: 100%;
	background: none;
	padding: 30px;
	border-radius: 0;
	box-sizing: border-box;
}

.selectoc .innerplate h2 {
	font-size: 3rem;
	margin-bottom: 40px;
	color: #fff;
}

.selectoc .tabmenu {
	width: 100%;
	margin: 0 auto 20px;
}

.selectoc .tabmenu li {
	width: 100%;
	margin-bottom: 15px;
}

.selectoc .tabmenu button {
	display: block;
	font-size: 2rem;
	width: 100%;
}

.det h3 {
	font-size: 2.4rem;
	margin-bottom: 10px;
}
.det h3+p {
	font-size: 1.6rem;
	line-height: 1.6;
}
.det li {
	width: 100%;
}



#eventbox {
	width: 86%;
	margin-top: 30px;
}

#eventbox h3 {
	margin: 0 0 20px 0;
}





.eventlistbtn {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

.eventlistbtn li {
	width: 100%;
	font-size: 1.8rem;
	text-align: center;
	padding: 30px;
}






#gcal {
	width: 90%;
	margin: 0 auto 50px;
}


p.caution {
	font-size: 1.2rem;
	margin-bottom: 20px;
}



.eventlistplate,
.closeevent,
.eboxhidden .einner,
.eventlistplate .ebox,
.everydayplate {
	width: 100%;
	display: block;
}

.everydayplate {
	margin-top: 100px;
	width: 86%;
}

.eventlistplate .clbox,
.closeevent .clbox,
.eboxhidden .einner .clbox,
.eventlistplate .ebox .clbox,
.everydayplate .clbox {
	width: 100%;
	border-radius: 10px 10px 0 0;
	display: block;
	padding: 20px 0;
}

.eventlistplate .clbox p,
.closeevent .clbox p,
.eboxhidden .einner .clbox p,
.eventlistplate .ebox .clbox p,
.closeevent .clbox p {
	font-size: 2.4rem;
	padding: 1em .5em .5em .5em;
	width: 110px;
	height: 110px;
}
.closeevent .clbox p {
	font-size: 2.0rem;
	padding-top: 35px;
}
.eventlistplate .desc,
.closeevent .desc,
.eboxhidden .einner .desc,
.eventlistplate .ebox .desc {
	width: 100%;
	padding: 20px;
}

.eventlistplate .btnlink a,
.closeevent .btnlink a,
.eboxhidden .einner .btnlink a {
	width: 100%;
}


#explate {
	width: 100%;
	padding: 10px 0;
	font-size: 1.5rem;
	margin-top: 15px;
}
#explate span {
	margin: 0 5px;
}
#calendardet, #eventlist {
	width: 86%;
	margin: 30px auto;
	padding: 35px 10px;
}
.eventlistplate .ebox dt,
.closeevent .ebox dt,
#calendardet .eboxhidden dt {
	padding: 4px 0;
	font-size: 1.8rem;
}


.eventlistplate .ebox dd,
.closeevent .ebox dd,
#calendardet .eboxhidden dd {
	padding: 0 0 10px 0;
	display: block;
}

#calendardet .eboxhidden dd .listdat,
.eventlistplate .ebox dd .listdat,
.closeevent .ebox dd .listdat {
	width: 100%;
}

.eventlistplate .ebox dd .categ,
.closeevent .ebox dd .categ,
#calendardet .eboxhidden dd .categ {
	margin-bottom: 20px;
}

.eventlistplate .ebox dd .categ span,
.closeevent .ebox dd .categ span,
#calendardet .eboxhidden dd .categ span {
	display: block;
	margin-left: 0;
	font-size: 1.8rem;
	margin-bottom: 20px;
}
.eventlistplate .ebox dd .btnblock,
.closeevent .ebox dd .btnblock,
#calendardet .eboxhidden dd .btnblock {
	width: 90%;
	margin: 20px auto;
}
.eventlistplate .ebox dd .btnblock p,
.closeevent .ebox dd .btnblock p,
#calendardet .eboxhidden dd .btnblock p {
	margin-bottom: 20px;
}


.eventlistplate .ebox dt.special_session:before,
.closeevent .ebox dt.special_session:before,
#calendardet .eboxhidden dt.special_session:before {
	font-size: 1.4rem;
	top: 7px;
}


.event-detail {
	padding: 0 0 20px 0;
}

.kou3-2 {
	margin-top: -100px;
	margin-bottom: 50px;
}


.toujitu {
	width: 80%;
	margin: 0 auto 40px;
}

#topoc {
	position: relative;
	margin-bottom: 100px;
}
#topoc h2 {
	width: 86%;
	margin: 0 auto;
}

#topoc .oplet {
	width: 320px;
	left: 30px;
	top: 70px;
}

#topoc .bg {
	top: 80px;
	background: url(../images/top/opbg_sp.webp) no-repeat;
	background-size: cover;
	width: 100%;
	height: 400px;
	z-index: -1;
}

#topoc .inner {
	width: 92%;
	padding-top: 240px;
}


}