@charset "UTF-8";
/* ===========================
1.目次＆ブレークポイント
============================== */
/*
1.目次＆ブレークポイント
2.全体
3.header
4.mv
5.upcoming-event & scheduled-date
6.free-shuttle & program
7.slider-style
8.program-intro & campus-appeal
9.weboc-area & check-movie
10.photo-gallery
11.access
12.document-request
13.more-informed
14.footer
15.floating-nav
*/
@media screen and (min-width: 35.5em) { /* 568px sm */
}
@media screen and (min-width: 48em) { /* 768px md */
}
@media screen and (min-width: 64em) { /* 1024px lg */
}
@media screen and (min-width: 80em) { /* 1280px xl */
}

/* ===========================
2.全体
============================== */
:root {
	--sans-serif: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
	--serif: '游明朝', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'Times New Roman', serif;
	--arial: Arial, sans-serif;
}
* , *::before , *::after {
	box-sizing: border-box;
}
html {
	overflow-y: scroll;
	scroll-behavior: smooth;
	height: 100%;
}
body {
	font-family: var(--sans-serif);
	position: relative;
	height: 100%;
	color: #000;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}
.serif {
	font-family: var(--serif);
}
header {
	position: fixed;
	top: 0;
	z-index: 3;
}
main {
	position: relative;
	z-index: 2;
}
footer {
	position: sticky;
	top: 100vh;
	z-index: 1;
}
img {
	display:inline-block;
	max-width:100%;
	height: auto;
}
button {
	padding: 0;
	outline: none;
	border: none;
	font: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
}
.scroll-event {
	opacity: 0;
	transition: all 1s;
	transition-delay: 0.2s;
}
.scroll-event.is-active {
	opacity: 1;
}
.scroll-event.fadeup {
	position: relative;
	top: 100px;
}
.scroll-event.fadeup.is-active {
	top: 0;
}
h2 {
	display: inline-block;
	margin: 0 auto 40px;
	padding: 0 0.5em;
	font-size: 1.5625rem;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	text-decoration: underline;
	text-decoration-thickness: 17px;
	text-decoration-color: #FFF100;
	text-underline-offset: -9px;
	text-decoration-skip-ink: none;
}
h2.scroll-event {
	top: 100px;
}
h2.scroll-event.is-active {
	top: 0;
}
.anchor-block {
	scroll-margin-top: 40px;
	padding: 30px 0 20px;
}
.inner-medium {
	max-width: 1280px;
	width: 82%;
	margin-left: auto;
	margin-right: auto;
}
.inner-narrow {
	max-width: 1024px;
	width: 82%;
	margin-left: auto;
	margin-right: auto;
}
main .hidden {
	display: none;
}
.over-md {
	display: none;
}
@media screen and (min-width: 48em) { /* 768px md */
	h2 {
		margin: 0 auto 60px;
		font-size: 3.125rem;
		text-decoration-thickness: 38px;
		text-underline-offset: -18px;
	}
	.anchor-block {
		scroll-margin-top: 60px;
		padding: 50px 0 20px;
	}
	.under-md {
		display: none;
	}
	.over-md {
		display: block;
	}
}

/* ===========================
3.header
============================== */
header {
	width: 100%;
	height: 60px;
	padding: 0 30px;
	background: rgba(255,255,255,0.95);
}
.header-logo {
	width: 169px;
	margin: 20px 0 0;
	transition: all 0.3s;
}
.header-logo:hover {
	opacity: 0.7;
}
#menu-btn-check {
	display: none;
}
.menu-btn {
	width: 100px;
	padding: 22px 0 0;
	position: fixed;
	top: 17px;
	right: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-size: 0.625rem;
	font-weight: bold;
	z-index: 900;
	cursor: pointer;
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
	content: '';
	display: block;
	height: 3px;
	width: 20px;
	border-radius: 1px;
	background-color: #0252B7;
	position: absolute;
	top: 0;
	transition: all 0.3s;
}
.menu-btn span::before {
	top: 7px;
}
.menu-btn span::after {
	top: 14px;
}
.menu-btn:hover span,
.menu-btn:hover span::before,
.menu-btn:hover span::after {
	background-color: #00B4FF;
}
.menu-btn::after {
	content: 'Menu';
}
#menu-btn-check:checked ~ .menu-btn span {
	background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
	top: 7px;
	transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
	top: 7px;
	transform: rotate(-45deg);
}
#menu-btn-check:checked ~ .menu-btn::after {
	content: 'Close';
}
#nav-area {
	width: 300px;
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	margin: 0;
	padding: 0 20px 20px;
	list-style: none;
	position: fixed;
	top: 60px;
	right: -740px;
	transition: all 0.5s;
	opacity: 0;
	background-color: rgba(255,255,255,0.95);
	z-index: 890;
}
#menu-btn-check:checked ~ #nav-area {
	right: 0;
	opacity: 1;
}
#nav-area > li {
	position: relative;
}
#nav-area > li::before {
	content: '';
	width: 100%;
	height: 50%;
	position: absolute;
	bottom: 0;
	z-index: -1;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(255, 241, 0, 1) 50%);
	background-position: 0 0;
	background-size: 200% auto;
	transition: .3s;
}
#nav-area > li:hover::before {
	background-position: -100% 0;
}
#nav-area a {
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 0 0 50px;
	font-size: 1rem;
	font-weight: bold;
	text-decoration: none;
	line-height: 1;
	color: #0252B7;
}
#nav-area > li .nav01 { background: url(../img/nav-img01.svg) left center no-repeat; background-size: 38px; }
#nav-area > li .nav02 { background: url(../img/nav-img02.svg) left center no-repeat; background-size: 38px; }
#nav-area > li .nav03 { background: url(../img/nav-img03.svg) left center no-repeat; background-size: 38px; }
#nav-area > li .nav04 { background: url(../img/nav-img04.svg) left center no-repeat; background-size: 38px; }
#nav-area > li .nav05 { background: url(../img/nav-img05.svg) left center no-repeat; background-size: 38px; }
#nav-area > li .nav06 { background: url(../img/nav-img06.svg) left center no-repeat; background-size: 38px; }
#nav-area > li .nav07 { background: url(../img/nav-img07.svg) left center no-repeat; background-size: 38px; }
#nav-area > li .nav08 { background: url(../img/nav-img08.svg) left center no-repeat; background-size: 38px; }
#nav-area > li .nav09 { background: url(../img/nav-img09.svg) left center no-repeat; background-size: 38px; }
#nav-area > li .nav10 { background: url(../img/nav-img10.svg) left center no-repeat; background-size: 38px; }
#nav-area > li .nav11 { background: url(../img/nav-img02.svg) left center no-repeat; background-size: 38px; }
@media screen and (min-width: 48em) { /* 768px md */
	header {
		height: 80px;
	}
	.header-logo {
		width: 300px;
		margin: 15px 0 0;
	}
	.menu-btn {
		padding: 40px 0 0;
		top: 10px;
		right: 40px;
		font-size: 1.25rem;
	}
	.menu-btn span,
	.menu-btn span::before,
	.menu-btn span::after {
		height: 6px;
		width: 44px;
		border-radius: 4px;
	}
	.menu-btn span::before {
		top: 15px;
	}
	.menu-btn span::after {
		top: 30px;
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
		top: 17px;
		transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
		top: 17px;
		transform: rotate(-45deg);
	}
	#nav-area {
		width: 740px;
		padding: 0 40px 40px;
		top: 80px;
	}
	#nav-area a {
		height: 70px;
		padding: 0 0 0 80px;
		font-size: 2.2rem;
	}
	#nav-area > li .nav01,
	#nav-area > li .nav02,
	#nav-area > li .nav03,
	#nav-area > li .nav04,
	#nav-area > li .nav05,
	#nav-area > li .nav06,
	#nav-area > li .nav07,
	#nav-area > li .nav08,
	#nav-area > li .nav09,
	#nav-area > li .nav10,
	#nav-area > li .nav11 { background-size: 60px; }
}

/* ===========================
4.mv
============================== */
#mv {
	margin: 60px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0;
	position: relative;
}
.mv-img {
	width: calc(100% / 3);
	position: relative;
	margin: 0;
}
.mv-img > div {
	width: 100%;
	padding: 100% 0 0;
	opacity: 0
}
@keyframes mv-fade {
	0% {
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	52% {
		opacity: 1;
	}
	64% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.panel-1 {
	background: url(../img/mv-img04a.jpg) center center no-repeat;
	background-size: cover;
}
.panel-1 > div {
	background: url(../img/mv-img04b.jpg) center center no-repeat;
	background-size: cover;
	animation: mv-fade 12s 2s ease infinite;
}
.panel-2 {
	background: url(../img/mv-img05a.jpg) center center no-repeat;
	background-size: cover;
}
.panel-2 > div {
	background: url(../img/mv-img05b.jpg) center center no-repeat;
	background-size: cover;
	animation: mv-fade 12s 2.5s ease infinite;
}
.panel-3 {
	background: url(../img/mv-img06a.jpg) center center no-repeat;
	background-size: cover;
}
.panel-3 > div {
	background: url(../img/mv-img06b.jpg) center center no-repeat;
	background-size: cover;
	animation: mv-fade 12s 3s ease infinite;
}
.panel-4 {
	background: url(../img/mv-img01a.jpg) center center no-repeat;
	background-size: cover;
}
.panel-4 > div {
	background: url(../img/mv-img01b.jpg) center center no-repeat;
	background-size: cover;
	animation: mv-fade 12s 3.5s ease infinite;
}
.panel-5 {
	background: url(../img/mv-img02a.jpg) center center no-repeat;
	background-size: cover;
}
.panel-5 > div {
	background: url(../img/mv-img02b.jpg) center center no-repeat;
	background-size: cover;
	animation: mv-fade 12s 4s ease infinite;
}
.panel-6 {
	background: url(../img/mv-img03a.jpg) center center no-repeat;
	background-size: cover;
}
.panel-6 > div {
	background: url(../img/mv-img03b.jpg) center center no-repeat;
	background-size: cover;
	animation: mv-fade 12s 4.5s ease infinite;
}
@keyframes mv-title-fade {
	0% {
		top: 70%;
		opacity: 0;
	}
	100% {
		top: 45%;
		opacity: 1;
	}
}
.mv-title {
	max-width: 734px;
	width: 66%;
	margin: 0;
	position: absolute;
	top: 70%;
	left: 50%;
	z-index: 99;
	transform: translateX(-50%) translateY(-50%);
	opacity: 0;
	pointer-events: none;
	animation: mv-title-fade 1.5s 0.5s ease forwards;
}
@keyframes schedule-fade {
	0% {
		transform: translateY(100px);
		opacity: 0;
	}
	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}
.schedule {
	width: 100%;
	margin: 0;
	padding: 0;
	transform: translateY(100px);
	opacity: 0;
	animation: schedule-fade 1.5s 1.5s ease forwards;
	background: linear-gradient(90deg, #000 0% 3%, #fff 3% 100%);
}
.schedule-ttl {
	display: none;
}
.schedule img {
	display: inline-block;
	margin: 0;
	width: 100%;
	vertical-align: bottom;
	pointer-events: none;
}
@media screen and (min-width: 48em) { /* 768px md */
	#mv {
		margin: 80px 0 0;
	}
	.mv-img > div {
		padding: 90% 0 0;
	}
	.schedule {
		width: 100%;
		position: absolute;
		bottom: -30px;
		left: 0;
		z-index: 10;
		background: linear-gradient(0deg, #FBE6EF 0% 35%, rgba(255, 255, 255, 0.8) 35% 100%);
	}
	.schedule-inner {
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: stretch;
		justify-content: space-between;
	}
	.schedule-ttl {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200px;
		font-size: 2rem;
		font-weight: bold;
		line-height: 1.2;
		text-align: center;
		color: #fff;
		background: #000;
	}
	.schedule-inner picture {
		text-align: center;
		padding: 10px 50px;
		flex: 1;
	}
	.schedule-inner picture img {
		max-width: 1000px;
		width: 100%;
	}
}
@media screen and (min-width: 64em) { /* 1024px lg */
	.mv-img > div {
		padding: 80% 0 0;
	}
}
@media screen and (min-width: 80em) { /* 1280px xl */
	.mv-title {
		max-width: 815px;
	}
}
@media screen and (min-width: 88em) { /* 1408px */
	.mv-img > div {
		padding: 390px 0 0;
	}
}

/* ===========================
5.upcoming-event & scheduled-date
============================== */
#upcoming-event {
	background: #DBEEF4;
}
#scheduled-date {
	background: #f2f2f2;
}
.event-box {
	width: 100%;
	margin: 0 0 10px;
	padding: 15px 45px 60px;
	background: #fff;
	border: #000 5px solid;
	position: relative;
}
#upcoming-event .event-box {
	margin: 30px 0 0;
}
.event-box > h3 {
	margin: 0;
	text-align: center;
}
.event-box > h3 img {
	height: 33px;
	width: auto;
	pointer-events: none;
}
.event-campus {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 5px 0 0;
	align-items: center;
}
.one-campus,
.two-campus {
	align-items: stretch;
}
.campus-box {
	width: 100%;
}
.event-img {
	margin: 0;
	pointer-events: none;
	text-align: center;
}
.event-img img {
	vertical-align: bottom;
}
#scheduled-date .event-img img {
	width: 85%;
}
.event-place {
	margin: 5px 0 0;
	padding: 0;
	font-size: 0.5625rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
.event-place-arise {
	display: inline-block;
	padding: 0 1em;
	margin: 0 0 0.2em;
	line-height: 1.8;
	color: #fff;
	background: #35B597;
	border-radius: 1em;
}
.event-place span {
	display: inline-block;
}
.event-place-portisland {
	padding: 0 1em;
	margin: 0 0 0.2em;
	line-height: 1.8;
	color: #fff;
	background: #005BAC;
	border-radius: 1em;
}
.event-time {
	margin: 0 0 10px;
	padding: 5px 0 0;
	font-size: 0.5625rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	border-top: #000 1px solid;
}
.event-tours {
	margin: 5px 0 0;
	text-align: center;
}
.event-tours a {
	display: inline-block;
	transition: all 0.3s;
	margin: 0 0 0 15px;
}
.event-tours a:hover {
	filter: drop-shadow(10px 0 5px rgba(0, 0, 0, 0.3));
	margin: 0 0 0 0;
}
.event-tours img {
	max-width: 280px;
	width: 100%;
	pointer-events: none;
}
.event-point {
	margin: 0;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
}
.event-open,
.event-soon,
.event-close {
	display: none;
	width: 100%;
	padding: 0 45px 0 ;
	position: absolute;
	bottom: 10px;
	left: 0;
}
.event-open a {
	display: inline-block;
	width: 100%;
	padding: 10px 0;
	font-size: 1.25rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 0.7;
	text-decoration: none;
	color: #fff;
	text-align: center;
	background: #FF0066;
	border-radius: 30px;
	transition: all 0.3s;
}
.event-open a:hover {
	color: #FF0066;
	background: #FFCCE0;
}
.event-open a span {
	font-size: 0.5625rem;
}
.event-soon p,
.event-close p {
	width: 100%;
	margin: 0;
	padding: 12px 0;
	font-size: 1.25rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	color: #fff;
	text-align: center;
	border-radius: 30px;
}
.event-soon p {
	background: #31859C;
}
.event-close p {
	background: #323232;
}
.event-area > .open .event-open {
	display: block;
}
.event-area > .soon .event-soon {
	display: block;
}
.event-area > .close .event-close {
	display: block;
}
.event-area > .close .event-img {
	filter: brightness(0.5) grayscale(70%);
}
.event-area > .close h3 {
	filter: grayscale(100%) brightness(0.8);
	opacity: 0.5;
}
.event-area > .close.color .event-img {
	filter: none;
}
.event-area > .close.color h3 {
	filter: none;
	opacity: 1;
}
.event-area > .hide {
	display: none;
}
.program-note {
	width: 100%;
	margin: 5px 0 0;
	padding: 10px;
	list-style: none;
	background: #fff;
	border: #31859C 2px solid;
	border-radius: 30px;
	font-size: 0.6875rem;
	line-height: 1.5;
	color: #31859C;
	text-align: center;
}
.event-note {
	width: 100%;
	margin: 5px 0 0;
	padding: 10px;
	list-style: none;
	background: #fff;
	border: #31859C 2px solid;
	border-radius: 30px;
}
.event-note li {
	padding: 0 0 0 1em;
	font-size: 0.6875rem;
	line-height: 1.5;
	text-indent: -1em;
	color: #31859C;
}
.event-contact {
	margin: 10px 0 0;
	padding: 0;
	text-indent: 0;
	text-align: center;
}
.event-note li a {
	color: #FF0066;
	text-decoration: none;
	transition: all 0.3s;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(255, 0, 102, 1) 50%);
	background-position: 0 0;
	background-size: 200% auto;
}
.event-note li a:hover {
	color: #fff;
	background-position: -100% 0;
}
.event-box.scroll-event,
.event-note.scroll-event,
.program-note.scroll-event {
	position: relative;
	top: 100px;
}
.event-box.scroll-event.is-active,
.event-note.scroll-event.is-active,
.program-note.scroll-event.is-active {
	top: 0;
}
@media screen and (min-width: 48em) { /* 768px md */
	#upcoming-event {
		padding: 150px 0 30px;
		scroll-margin-top: -30px;
	}
	.event-box {
		margin: 0 0 30px;
		padding: 20px 40px 15px;
		border: #000 10px solid;
	}
	#upcoming-event .event-box {
		margin: 50px 0 0;
	}
	.event-box > h3 {
		width: 50%;
	}
	.event-box > h3 img {
		height: 66px;
	}
	.event-campus {
		margin: 10px 0 0;
		padding: 10px 0 0;
		border-top: #000 2px solid;
	}
	.campus-box {
		width: 47%;
	}
	.event-place {
		font-size: 0.9375rem;
	}
	.one-campus .event-place {
		margin: 0;
	}
	#scheduled-date .event-place {
		font-size: 0.875rem;
	}
	.event-time {
		margin: 0;
		font-size: 0.9375rem;
		border-top: #000 2px solid;
	}
	#scheduled-date .event-time {
		font-size: 0.875rem;
	}
	.event-point {
		font-size: 1.5rem;
	}
	.event-open,
	.event-soon,
	.event-close {
		width: 50%;
		padding: 0 30px 0 ;
		bottom: auto;
		top: 15px;
		left: auto;
		right: 0;
	}
	.event-open a {
		margin: 0;
		padding: 15px 0;
		font-size: 1.6rem;
		border-radius: 30px;
	}
	.event-open a span {
		font-size: 0.9375rem;
	}
	.event-soon p,
	.event-close p {
		display: inline-block;
		margin: 0;
		padding: 20px 0;
		font-size: 1.5rem;
		border-radius: 40px;
	}
	.program-note {
		margin: 8px 0 0;
		border: #31859C 3px solid;
		border-radius: 40px;
	}
	.program-note {
		padding: 10px 20px;
		font-size: 1.3125rem;
	}
	.event-note {
		margin: 8px 0 0;
		padding: 10px 20px;
		border: #31859C 3px solid;
		border-radius: 40px;
	}
	.event-note li {
		font-size: 1.3125rem;
	}
	.event-note li.event-contact {
		font-size: 1.0625rem;
		line-height: 1.3;
	}
	.event-note li.event-contact span {
		font-weight: bold;
	}
}
@media screen and (min-width: 64em) { /* 1024px lg */
	.event-place {
		font-size: 1.125rem;
	}
	.event-time {
		font-size: 1.125rem;
	}
	.event-open a {
		font-size: 2rem;
		border-radius: 40px;
	}
	.event-open a span {
		font-size: 1rem;
	}
}

/* ===========================
6.free-shuttle & program
============================== */
#free-shuttle {
	background: #DBEEF4;
}
#free-shuttle img {
	pointer-events: none;
}
.shuttle-bus {
	max-width: 1024px;
	width: 82%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.shuttle-bus.scroll-event {
	position: relative;
	left: -50%;
	transform: translateX(-50%);
}
.shuttle-bus.scroll-event.is-active {
	left: 50%;
}
.shuttle-bus a {
	display: block;
	width: 100%;
	filter: grayscale(100%) brightness(1.2);
	transition: 0.3s;
	position: relative;
}
.shuttle-bus a:hover {
	filter: grayscale(0%) brightness(1.0);
}
.bus-img {
	width: 141px;
}
@keyframes click-shuttle {
	0% {
		opacity: 0;
	}
	0.1% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	20.1% {
		opacity: 0;
	}
	35% {
		opacity: 0;
	}
	35.1% {
		opacity: 1;
	}
	55% {
		opacity: 1;
	}
	55.1% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.click-shuttle {
	width: 20%;
	position: absolute;
	top: 47%;
	left: 75.5%;
	opacity: 0;
	animation: click-animation 1.4s 0s linear infinite;
}
#program {
	background: #DBEEF4;
	padding-bottom: 40px;
}
#program img {
	width: 260px;
	height: auto;
	vertical-align: bottom;
	pointer-events: none;
}
.program-area {
	padding: 15px 45px 5px;
	background: #fff;
	border: #000 5px solid;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-end;
}
.program-area > div {
	max-width: 430px;
	width: 100%;
	margin: 0 0 5px;
}
.program-area > div a {
	display: block;
	text-decoration: none;
	color: #000;
	position: relative;
	padding: 0 0 20px;
}
.program-area > div a::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: transparent 1px solid;
	transition: all 0.3s;
	overflow: hidden;
}
.program-area > div a:hover::after {
	border: rgba(0, 180, 255, 0.5) 20px solid;
}
.program-img {
	margin: 0;
	padding-top: 20px;
	text-align: center;
}
.program-txt {
	margin: 5px 0 0;
	padding: 5px 0 0;
	font-size: 0.5625rem;
	font-weight: bold;
	line-height: 1.78;
	text-align: center;
	border-top: #000 2px solid;
	border-bottom: #000 2px solid;
}
.program-arise {
	display: inline-block;
	padding: 0 1em;
	color: #fff;
	background: #35B597;
	border-radius: 1em;
}
.program-portisland {
	display: inline-block;
	padding: 0 1em;
	color: #fff;
	background: #005BAC;
	border-radius: 1em;
}
@media screen and (min-width: 48em) { /* 768px md */
	.shuttle-bus {
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.click-shuttle {
		width: 20%;
		top: 50%;
		left: 68%;
	}
	.program-area {
		padding: 5px 20px 0;
		border: #000 10px solid;
	}
	.program-area > div {
		width: 48%;
	}
	.program-txt {
		font-size: 1.125rem;
	}
}
@media screen and (min-width: 64em) { /* 1024px lg */
	.bus-img {
		width: 282px;
	}
}
@media screen and (min-width: 77em) { /* 1232px xl */
	.click-shuttle {
		width: 20%;
		top: 50%;
		left: 65.5%;
	}
}

/* ===========================
7.slider-style
============================== */
.slider-type1 .slick-track {
	padding-bottom: 45px !important;
	display: flex;
}
.slider-type1 .slick-slide {
	height: auto !important;
	margin: 0 10px;
}
.slider-type1 .slider-box {
	height: 100%;
	transition: all 0.3s;
	transform: translateX(0);
	transform: rotateY(0deg) scale(1);
}
/* 位置調整スタイル */
.adjustment .slick-list {
	overflow: visible;
	transform: translateX(0);
}
/*-----------矢印表示----------*/
.slider-type1 .slick-next { right: 2% !important;}
.slider-type1 .slick-prev { left: 2% !important; }
.slider-type1 .slick-next::before {
	background-color: #000;
	background-image: url(../img/slider-arrow-next.svg) !important;
	background-position: 10px center !important;
	background-repeat: no-repeat !important;
	background-size: 10px 15px !important;
	border: #fff 2px solid;
	border-radius: 50%;
	transition: all 0.3s;
}
.slider-type1 .slick-prev::before {
	background-color: #000;
	background-image: url(../img/slider-arrow-prev.svg) !important;
	background-position: 7px center !important;
	background-repeat: no-repeat !important;
	background-size: 10px 15px !important;
	border: #fff 2px solid;
	border-radius: 50%;
	transition: all 0.3s;
}
.slider-type1 .slick-next:hover::before,
.slider-type1 .slick-prev:hover::before {
	background-color: #005BAC;
}
.slider-type1 .slick-arrow {
	z-index: 2 !important;
	width: 30px !important;
	height: 30px !important;
}
.slider-type1 .slick-arrow::before {
	content: "" !important;
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1 !important;
}
/*-----------ドット表示----------*/
.slider-type1 .slick-dots {
	margin: 0;
	padding: 0;
	text-align: center;
}
.slider-type1 .slick-dots li {
	display: inline-block;
	margin: 0 5px;
	width: 20px !important;
	height: 10px !important;
	background: #7f7f7f;
	transition: all 0.3s;
}
.slider-type1 .slick-dots li.slick-active {
	background: #000;
}
.slider-type1 .slick-dots li:hover {
	opacity: 0.7;
}
.slider-type1 .slick-dots li button {
	position: relative;
	text-indent: -9999px;
}
.slider-type2 .slick-slide {
	height: auto !important;
	margin: 0 10px;
}
@media screen and (min-width: 48em) { /* 768px md */
	.slider-type1 .slick-slide:not(.slick-active) {
		perspective: 500px;
		transform-style: preserve-3d;
		transform: translateX(60px);
	}
	.slider-type1 .slick-slide:not(.slick-active) .slider-box {
		transform: rotateY(-50deg) scale(0.8);
	}
	.slider-type1 .slick-slide.slick-active + .slick-slide:not(.slick-active) {
		perspective: 500px;
		transform-style: preserve-3d;
		transform: translateX(-60px);
	}
	.slider-type1 .slick-slide.slick-active + .slick-slide:not(.slick-active) .slider-box {
		transform: rotateY(50deg) scale(0.8);
	}
	.adjustment .slick-list {
		transform: translateX(-40%);
	}
	/*-----------矢印表示----------*/
	.slider-type1 .slick-next { right: 7.6% !important;}
	.slider-type1 .slick-prev { left: 7.7% !important; }
	.slider-type1 .slick-next::before {
		background-position: 20px center !important;
		background-size: 20px 31px !important;
	}
	.slider-type1 .slick-prev::before {
		background-position: 14px center !important;
		background-size: 20px 31px !important;
	}
	.slider-type1 .slick-arrow {
		width: 60px !important;
		height: 60px !important;
	}
	/*-----------ドット表示----------*/
	.slider-type1 .slick-dots li {
		margin: 0 10px;
		height: initial !important;
		width: 60px !important;
	}
}
@media screen and (min-width: 64em) { /* 1024px lg */
	.slider-type1 .slick-slide {
		margin: 0 25px;
	}
	.slider-type1 .slick-slide:not(.slick-active) {
		transform: translateX(80px);
	}
	.slider-type1 .slick-slide:not(.slick-active) .slider-box {
		transform: rotateY(-50deg) scale(0.75);
	}
	.slider-type1 .slick-slide.slick-active + .slick-slide:not(.slick-active) {
		transform: translateX(-80px);
	}
	.slider-type1 .slick-slide.slick-active + .slick-slide:not(.slick-active) .slider-box {
		transform: rotateY(50deg) scale(0.75);
	}
}
@media screen and (min-width: 80em) { /* 1280px xl */
	.slider-type1 .slick-slide:not(.slick-active) {
		transform: translateX(100px);
	}
	.slider-type1 .slick-slide:not(.slick-active) .slider-box {
		transform: rotateY(-50deg) scale(0.68);
	}
	.slider-type1 .slick-slide.slick-active + .slick-slide:not(.slick-active) {
		transform: translateX(-100px);
	}
	.slider-type1 .slick-slide.slick-active + .slick-slide:not(.slick-active) .slider-box {
		transform: rotateY(50deg) scale(0.68);
	}
}
@media screen and (min-width: 120em) { /* 1920px md */
	.slider-type1 .slick-slide:not(.slick-active) {
		perspective: 500px;
		transform: translateX(80px);
	}
	.slider-type1 .slick-slide:not(.slick-active) .slider-box {
		transform: scale(0.8);
	}
	.slider-type1 .slick-slide.slick-active + .slick-slide:not(.slick-active) {
		perspective: 500px;
		transform: translateX(-80px);
	}
	.slider-type1 .slick-slide.slick-active + .slick-slide:not(.slick-active) .slider-box {
		transform: scale(0.8);
	}
}

/* ===========================
8.program-intro & campus-appeal
============================== */
#program-intro,
#campus-appeal {
	background: #f2f2f2;
	overflow: hidden;
	margin-top: -80px;
	padding-top: 120px;
}
.program-intro-slider,
.campus-appeal-slider {
	margin: 0;
	padding: 0;
	list-style: none;
}
.program-intro-slider .slider-box,
.campus-appeal-slider .slider-box {
	border: #000 5px solid;
}
.program-intro-slider h3 {
	min-height: 60px;
	margin: -1px;
	padding: 0 0 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.25rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
	color: #fff;
	background: #000;
}
.program-intro-slider .slider-img {
	margin: 25px 0 0;
	padding: 0 20px;
	text-align: center;
}
.program-intro-slider .slider-img img {
	display: inline-block;
	max-width: 480px;
	width: 100%;
	max-height: 270px;
	object-fit: cover;
	vertical-align: bottom;
}
.program-intro-slider .slider-txt {
	margin: 5px 0 0;
	padding: 5px 20px;
	font-size: 0.5625rem;
	line-height: 1.5;
	position: relative;
	text-align: justify;
}
.program-intro-slider .slider-txt::before {
	content: '';
	position: absolute;
	top: 0;
	left: 20px;
	width: calc(100% - 40px);
	height: 1px;
	background: #000;
}
.campus-appeal-slider .slider-img {
	margin: -1px;
}
.campus-appeal-slider .slider-img img {
	width: 100%;
	max-height: 220px;
	object-fit: cover;
	vertical-align: bottom;
}
.campus-appeal-slider .slider-list {
	margin: 0 -1px;
	min-height: 80px;
	padding: 5px;
	list-style: none;
	background: #000;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}
.campus-appeal-slider .slider-list li {
	width: 100%;
	margin: 0;
	padding-left: 1.2em;
	font-size: 0.75rem;
	font-weight: bold;
	line-height: 1.3;
	text-indent: -1.2em;
	color: #fff;
}
.campus-appeal-slider .slider-txt {
	margin: 0;
	padding: 10px 15px;
	font-size: 0.5625rem;
	line-height: 1.5;
	text-align: justify;
}
@media screen and (min-width: 48em) { /* 768px md */
	#program-intro,
	#campus-appeal {
		margin-top: -60px;
		padding-top: 180px;
	}
	.program-intro-slider .slider-box,
	.campus-appeal-slider .slider-box {
		border: #000 10px solid;
	}
	.program-intro-slider h3 {
		font-size: 1.25rem;
	}
	.program-intro-slider .slider-img {
		margin: 10px 0 0;
		padding: 0 40px;
	}
	.program-intro-slider .slider-txt {
		margin: 10px 0 0;
		padding: 10px 20px;
		font-size: 1.0625rem;
	}
	.program-intro-slider .slider-txt::before {
		left: 20px;
		width: calc(100% - 40px);
		height: 2px;
	}
	.campus-appeal-slider .slider-img img {
		max-height: 270px;
	}
	.campus-appeal-slider .slider-list {
		min-height: 90px;
	}
	.campus-appeal-slider .slider-list li {
		font-size: 1rem;
	}
	.campus-appeal-slider .slider-txt {
		padding: 10px 15px;
		font-size: 1.0625rem;
	}
}
@media screen and (min-width: 80em) { /* 1280px xl */
	.campus-appeal-slider .slider-list li {
		font-size: 1.125rem;
	}
}

/* ===========================
9.weboc-area & check-movie
============================== */
#weboc,
#check-movie {
	margin-top: 30px;
}
.weboc-area,
.check-movie-area {
	margin: 20px 0 0;
	position: relative;
}
.weboc-area > picture,
.check-movie-area > picture {
	width: 100%;
	vertical-align: bottom;
	pointer-events: none;
}
.weboc-area::after {
	content: '';
	width: 100%;
	height: calc(100% - 70px);
	position: absolute;
	top: 20px;
	left: 0;
	background: url(../img/weboc-img1.png) center center no-repeat;
	background-size: contain;
}
.weboc-area > picture img,
.check-movie-area > picture img {
	width: 100%;
	object-fit: cover;
}
.weboc-link {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}
.weboc-link a {
	display: inline-block;
	padding: 4px 30px;
	font-size: 0.5625rem;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	text-align: center;
	transition: all 0.3s;
	border: #fff 1px solid;
	border-radius: 10px;
}
.weboc-link a:hover {
	background: rgba(255, 255, 255, 0.3);
}
@keyframes star-animation {
	0% {
		transform: scale(1,1);
	}
	0.1% {
		transform: scale(1.2,1.2);
	}
	50% {
		transform: scale(1.2,1.2);
	}
	50.1% {
		transform: scale(1,1);
	}
	100% {
		transform: scale(1,1);
	}
}
.weboc-star-l {
	width: 10%;
	position: absolute;
	top: 65%;
	left: 10%;
	transform: scale(1,1);
	animation: star-animation 2s 0s linear infinite;
}
.weboc-star-r {
	width: 10%;
	position: absolute;
	top: 10%;
	right: 10%;
	transform: scale(1,1);
	animation: star-animation 3s 0.5s linear infinite;
}
#check-movie .md-btn {
	max-width: 160px;
	width: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background: #fff;
	border: #fff 1px solid;
	box-shadow: 10px 10px 16px rgba(0, 0, 0, 0.7);
	cursor: pointer;
}
#check-movie .md-btn img {
	pointer-events: none;
	vertical-align: bottom;
	transition: all 0.3s;
}
#check-movie .md-btn:hover img {
	opacity: 0.8;
}
/* モーダル */
.md-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: .7;
	z-index: 9999;
}
.md-contents {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	max-width: 1024px;
	width: 96%;
	overflow: hidden;
	transform: translateY(-50%) translateX(-50%);
	z-index: 10000;
	text-align: center;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}
.md-inner {
	display: block;
	width: 100%;
	padding: 40px 20px 20px;
	background: #fff;
}
.youtube {
	width: 100%;
	height: 100%;
	padding: 56.25% 0 0;
	position: relative;
}
.md-inner iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.md-xmark {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 25px;
	height: 22px;
	z-index: 9999;
	cursor: pointer;
}
.md-xmark span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #333;
	border-radius: 4px;
}
.md-xmark span:nth-of-type(1) {
	top: 0;
	transform: translateY(10px) rotate(-45deg);
}
.md-xmark span:nth-of-type(2) {
	bottom: 0;
	transform: translateY(-10px) rotate(45deg);
}
@media screen and (min-width: 48em) { /* 768px md */
	#weboc,
	#check-movie {
		margin-top: 60px;
	}
	.weboc-area,
	.check-movie-area {
		margin: 40px 0 0;
	}
	.weboc-area > picture img,
	.check-movie-area > picture img {
		max-height: 640px;
		object-fit: cover;
	}
	.weboc-area::after {
		height: calc(100% - 210px);
		top: 60px;
	}
	.weboc-link {
		bottom: 40px;
	}
	.weboc-link a {
		padding: 10px 90px;
		font-size: 2rem;
		border: #fff 5px solid;
		border-radius: 30px;
	}
	.weboc-star-l {
		width: 5%;
		top: 60%;
		left: 27%;
	}
	.weboc-star-r {
		width: 5%;
		top: 10%;
		right: 30%;
	}
	#check-movie .md-btn {
		max-width: 750px;
		border: #fff 2px solid;
	}
}
@media screen and (min-width: 80em) { /* 1280px xl */
	.weboc-star-l {
		top: 65%;
		left: 22%;
	}
	.weboc-star-r {
		top: 10%;
		right: 25%;
	}
}

/* ===========================
10.photo-gallery
============================== */
#photo-gallery {
	margin: -10px 0 0;
	padding: 0 0 20px;
}
.photo-gallery-slider {
	margin: 0;
	padding: 0;
	list-style: none;
}
.photo-gallery-slider li {
	padding: 0;
}
.photo-gallery-slider li img {
	width: 100%;
	vertical-align: bottom;
}

/* ===========================
11.access
============================== */
#access {
	background: #DBEEF4;
	padding-bottom: 100px;
}
.access-area {
	background: transparent;
	padding: 0;
	display: block;
}
.access-area picture {
	width: auto;
}
.access-map-1-1 {
	width: 100%;
	margin: 0 0 25px;
}
.access-map-1-2 {
	width: 100%;
	margin: 0 0 25px;
}
.access-note {
	display: none;
}
.swipe-area {
	position: relative;
	overflow-x: scroll;
}
.access-map-img img {
	max-width: none;
	width: 520px;
}
.swipe-icon1,
.swipe-icon2,
.swipe-icon3 {
	width: 100%;
	height: 100%;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
}
.swipe-icon1 img,
.swipe-icon2 img,
.swipe-icon3 img {
	max-width: 80%;
}
@media screen and (min-width: 35.5em) { /* 568px sm */
	.access-map-img img {
		max-width: 100%;
		width: auto;
		pointer-events: none;
	}
	.swipe-area {
		overflow: hidden;
	}
	.swipe-icon1,
	.swipe-icon2,
	.swipe-icon3 {
		opacity: 0;
		/* display: none; */
	}
}
@media screen and (min-width: 48em) { /* 768px md */
	#access {
		padding-bottom: 150px;
	}
	.access-area {
		background: #fff;
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.access-area picture {
		width: 100%;
	}
	.access-map-1-1 {
		width: 100%;
		margin: 0;
		text-align: center;
	}
	.access-map-1-1 .access-map-img img {
		max-width: 780px;
	}
	.access-map-1-2 {
		width: 49%;
		margin: 0;
		text-align: right;
	}
	.access-map-1-2.access-map-last {
		text-align: left;
	}
	.access-map-1-2 .access-map-img img {
		max-width: 360px;
	}
	.access-note {
		display: block;
		width: 100%;
		margin: 5px 0 0;
		font-size: 0.8125rem;
		text-align: center;
	}
}

/* ===========================
12.document-request
============================== */
#document-request {
	scroll-margin-top: 90px;
	padding: 40px 0 40px;
	background: #f2f2f2;
	border-top: #1E1E64 2px solid;
	border-bottom: #1E1E64 2px solid;
	position: relative;
}
.document-request-ttl {
	width: 82%;
	padding: 8px 0;
	font-size: 1.5625rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background: #1E1E64;
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
}
.document-request-intro {
	margin: 0;
	font-size: 0.875rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
.document-request-speech {
	margin: 10px 0 0;
	text-align: center;
}
.document-request-speech span {
	display: inline-block;
	padding: 5px 50px;
	font-size: 1.125rem;
	font-weight: bold;
	text-align: center;
	background-image: url(../img/document-request-back-l.svg), url(../img/document-request-back-r.svg);
	background-position: left center, right center;
	background-repeat: no-repeat, no-repeat;
	background-size: contain, contain;
}
.document-request-list {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
}
.document-request-list li {
	margin: 0 5px;
	pointer-events: none;
}
.document-request-link {
	margin: 20px 0 0;
	text-align: center;
}
.document-request-link a {
	display: inline-block;
	min-width: 240px;
	width: 60%;
	padding: 10px 0;
	position: relative;
	font-size: 1.25rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-align: center;
	color: #fff;
	transition: all 0.3s;
	background: #f06;
	border-radius: 20px;
}
.document-request-link a:hover {
	color: #FF0066;
	background: #FFCCE0;
}
.document-request-link a img {
	width: 68px;
	position: absolute;
	bottom: -21px;
	right: 0px;
	pointer-events: none;
}
@keyframes click-animation {
	0% {
		opacity: 0;
	}
	0.1% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	20.1% {
		opacity: 0;
	}
	35% {
		opacity: 0;
	}
	35.1% {
		opacity: 1;
	}
	55% {
		opacity: 1;
	}
	55.1% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.click-animation {
	opacity: 0;
	animation: click-animation 1.4s 0s linear infinite;
}
@media screen and (min-width: 48em) { /* 768px md */
	#document-request {
		scroll-margin-top: 140px;
		padding: 80px 0 80px;
		border-top: #1E1E64 5px solid;
		border-bottom: #1E1E64 5px solid;
	}
	.document-request-ttl {
		width: 620px;
		padding: 16px 0;
		font-size: 3.125rem;
		top: -100px;
	}
	.document-request-intro {
		font-size: 1.125rem;
	}
	.document-request-speech {
		margin: 40px 0 0;
	}
	.document-request-speech span {
		padding: 5px 70px;
		font-size: 2rem;
	}
	.document-request-list {
		max-width: 840px;
		margin: 20px auto 0;
	}
	.document-request-list li img {
		max-width: 220px;
	}
	.document-request-link {
		margin: 40px 0 0;
	}
	.document-request-link a {
		width: 480px;
		padding: 20px 0;
		font-size: 2.5rem;
		border-radius: 40px;
	}
	.document-request-link a img {
		width: 135px;
		bottom: -42px;
		right: -19px;
	}
}

/* ===========================
13.more-informed
============================== */
#more-informed {
	background: #DBEEF4;
	overflow: hidden;
	margin-top: -80px;
	padding-top: 120px;
}
.more-informed-slider {
	margin: 0;
	padding: 0;
	list-style: none;
}
.more-informed-slider .slider-box {
	border: #000 5px solid;
	background: #fff;
}
.more-informed-slider .slider-img {
	margin: -1px;
}
.more-informed-slider .slider-img img {
	width: 100%;
	vertical-align: bottom;
	max-height: 220px;
	object-fit: cover;
}
.more-informed-slider .slider-ttl {
	margin: -1px;
	min-height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.75rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	color: #fff;
	background: #000;
}
.more-informed-slider .slider-txt {
	margin: 0;
	padding: 15px 20px 30px;
	font-size: 0.5625rem;
	line-height: 1.5;
	text-align: justify;
}
.more-informed-slider .slider-link {
	margin: 0;
	text-align: right;
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.more-informed-slider .slider-link a {
	padding: 2px 20px 2px 0;
	font-size: 0.5625rem;
	font-weight: bold;
	text-decoration: none;
	color: #000;
	transition: all 0.3s;
	background: url(../img/more-informed-link.svg) right center no-repeat;
	background-size: contain;
}
.more-informed-slider .slider-link a:hover {
	color: #f00;
}
@media screen and (min-width: 48em) { /* 768px md */
	#more-informed {
		margin-top: -30px;
		padding-top: 150px;
	}
	.more-informed-slider .slider-box {
		border: #000 10px solid;
	}
	.more-informed-slider .slider-img img {
		max-height: 280px;
	}
	.more-informed-slider .slider-ttl {
		min-height: 70px;
		font-size: 1.1875rem;
	}
	.more-informed-slider .slider-txt {
		padding: 10px 15px 45px;
		font-size: 1.0625rem;
	}
	.more-informed-slider .slider-link {
		bottom: 20px;
		right: 20px;
	}
	.more-informed-slider .slider-link a {
			padding: 5px 40px 5px 0;
		font-size: 1.125rem;
	}
}
@media screen and (min-width: 120em) { /* 1920px md */
	.more-informed-slider .slider-img img {
		max-height: 360px;
	}
}

/* ===========================
14.footer
============================== */
footer {
	margin: 0;
	padding: 40px 0 120px;
}
.footer-link {
	max-width: 1024px;
	width: 94%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.footer-link > * {
	width: 100%;
}
.footer-link-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.footer-link-inner > * {
	width: 49%;
}
.footer-link a {
	display: inline-block;
	margin: 0 0 20px;
	padding: 0;
	border: #000 1px solid;
	border-radius: 1px;
	transition: all 0.3s;
}
.footer-link a:hover {
	border: #00B4FF 1px solid;
	opacity: 0.8;
}
.footer-link a img {
	width: 100%;
	margin: 0;
	vertical-align: top;
}
@media screen and (min-width: 48em) { /* 768px md */
	footer {
		padding: 150px 0 330px;
	}
	.footer-link a {
		margin: 0 0 30px;
		border: #000 2px solid;
		border-radius: 2px;
	}
	.footer-link a:hover {
		border: #00B4FF 2px solid;
	}
	.footer-link > * {
		width: 49%;
	}
	.footer-link-inner > * {
		width: 48%;
	}
}

/* ===========================
15.floating-nav
============================== */
#floating-nav {
	width: 100%;
	position: fixed;
	bottom: 0;
	right: 0;
	text-align: right;
	z-index: 9999;
	pointer-events: none;
}
#page-top {
	display: inline-block;
	width: 38px;
	height: 38px;
	background: #1E1E64;
	border-radius: 50%;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	position: relative;
	right: 20px;
	pointer-events: initial;
	transition: all 0.3s;
}
#page-top::after {
	content: '';
	width: 15px;
	height: 15px;
	position: absolute;
	top: 14px;
	left: 12px;
	margin: 0;
	border-left: #fff 3px solid;
	border-top: #fff 3px solid;
	transform: rotate(45deg);
	transition: all 0.3s;
}
#reserve {
	width: 100%;
	height: 85px;
	margin: 10px 0 0;
	padding: 20px 0 0;
	text-align: center;
	background: #1E1E64;
	position: relative;
}
#reserve a {
	display: inline-block;
	margin: 0 40px 0 0;
	padding: 20px 0 0;
	font-size: 0.875rem;
	font-weight: bold;
	line-height: 1.7;
	text-decoration: none;
	color: #fff;
	background: url(../img/reserve-img2.svg) center top no-repeat;
	background-size: 37px 13px;
	filter: brightness(0) invert(1);
	pointer-events: initial;
	transition: all 0.3s;
}
#reserve a:hover {
	filter: brightness(0.5) invert(0.5);
}
.reserve-img {
	width: 70px;
	position: absolute;
	top: 10px;
	right: 10px;
	pointer-events: none;
}
@media screen and (min-width: 48em) { /* 768px md */
	#floating-nav {
		width: auto;
		bottom: 30px;
		right: 20px;
	}
	#page-top {
		width: 76px;
		height: 76px;
		right: 0;
	}
	#page-top:hover {
		background: #00B4FF;
	}
	#page-top::after {
		width: 30px;
		height: 30px;
		top: 30px;
		left: 24px;
		border-left: #fff 8px solid;
		border-top: #fff 8px solid;
	}
	#page-top:hover::after {
		top: 25px;
	}
	#reserve {
		width: 240px;
		height: 240px;
		margin: 0;
		padding: 0;
		background: #fff;
		border: #1E1E64 8px solid;
		border-radius: 50%;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
	}
	#reserve a {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		font-size: 1.375rem;
		color: #1E1E64;
		background: #fff url(../img/reserve-img2.svg) center 20px no-repeat;
		background-size: 93px 32px;
		border-radius: 50%;
		filter: initial;
		transition: all 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#reserve a:hover {
		filter: initial;
		background-color: #9FD9F6;
	}
	.reserve-img {
		width: 135px;
		top: auto;
		bottom: -50px;
		right: -40px;
	}
}