@charset "utf-8";

header {
	font-family: var(--noto);
	font-style: normal;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 100;
	height: calc(90rem / var(--root-font-size));
	width: calc(1260rem / var(--root-font-size));
	padding: 0 calc(50% - calc(1260rem / var(--root-font-size) / 2));
	background-color: #fff;
}

header a {
	color: #000;
	text-decoration: none;
}

header picture img {
	height: calc(40rem / var(--root-font-size));
	width: calc(350rem / var(--root-font-size));
}

.header-menu-items,
.header-menu-items ul,
.header-menu-items ul .inquiry,
.header-menu-items ul .access,
.header-menu-items ul .language {
	font-size: calc(13rem / var(--root-font-size));
	display: flex;
	align-items: center;
	height: calc(24rem / var(--root-font-size));
}

.header-menu-items {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: calc(44rem / var(--root-font-size));
	width: calc(398rem / var(--root-font-size));
}

.header-menu-items > ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 0;
	width: calc(310rem / var(--root-font-size));
}

.header-menu-items > ul > li {
	list-style: none;
	height: calc(24rem / var(--root-font-size));
}

.inquiry img {
	width: calc(27rem / var(--root-font-size));
	height: auto;
	margin-right: calc(3rem / var(--root-font-size));
}

header .access img {
	width: calc(16rem / var(--root-font-size));
	height: auto;
	margin-right: calc(2rem / var(--root-font-size));
}

.language {
	justify-content: space-between;
}

.language .active {
	font-weight: var(--bold);
}

.language,
.hamburger-wrapper {
	width: calc(44rem / var(--root-font-size));
}

.inquiry,
header .access {
	position: relative;
}

.inquiry::before,
header .access::before {
	content: '';
	background: var(--cat-all);
	width: 100%;
	height: calc(2rem / var(--root-font-size));
	position: absolute;
	left: 0;
	bottom: calc(-3rem / var(--root-font-size));
	transform-origin: right top;
	transform: scaleX(0);
	transition: transform 0.3s;
	will-change: transform;
}

.inquiry:hover::before,
header .access:hover::before {
	transform-origin: left top;
	transform: scaleX(1);
}

.hamburger-wrapper {
	position: relative;
}

.hamburger-icon {
	height: auto;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.hamburger-icon span {
	display: block;
	margin: auto;
	height: calc(2rem / var(--root-font-size));
	background: var(--cat-all);
	transition: 0.3s;
	will-change: transform;
}

.hamburger-icon span:nth-child(n+2) {
	margin: calc(9rem / var(--root-font-size)) auto 0 calc(15% / 2);
}

.hamburger-icon span:nth-child(1) {
	width: 85%;
}

.hamburger-icon span:nth-child(2) {
	width: 70%;
}

.hamburger-icon span:nth-child(3) {
	width: 55%;
}

header #hamburger {
	display: none;
}

#hamburger:checked + .hamburger-icon span:nth-child(1) {
	opacity: 0;
}

#hamburger:checked + .hamburger-icon span:nth-child(2) {
	transform: translateY(calc(1rem / var(--root-font-size))) rotate(45deg);
	width: 85%;
}

#hamburger:checked + .hamburger-icon span:nth-child(3) {
	transform: translateY(calc(-10rem / var(--root-font-size))) rotate(-45deg);
	width: 85%;
}

/* ハンバーガーの中身 */

/* ハンバーガーを開くときの動作 */
#hamburger:checked ~ .hamburger-nav {
	opacity: 1;
	pointer-events: auto;
	overflow: scroll;
	scrollbar-width: none;
	overscroll-behavior: none;
	z-index: 3;
}

.hamburger-nav {
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: calc(90rem / var(--root-font-size));
	left: 0;
	width: calc(945rem / var(--root-font-size));
	height: calc(100% - calc(90rem / var(--root-font-size)));
	padding: 0 calc(50% - calc(945rem / var(--root-font-size) / 2));
	color: #fff;
	background: var(--cat-all);
	transition: opacity 0.2s;
}

.hamburger-nav li {
	list-style: none;
}

.hamburger-nav li a {
	font-family: var(--noto);
}

/* 外部リンクマーク */
.hamburger-nav .link::after {
	background-image: url('/img/common2/icon_link_G.webp');
	background-size: calc(16rem / var(--root-font-size));
	width: calc(16rem / var(--root-font-size));
	height: calc(16rem / var(--root-font-size));
	margin-bottom: calc(-2.5rem / var(--root-font-size));
	transition: none;
}

.sp-menu {
	display: none;
}

.hamburger-nav .off-campus {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: auto auto auto;
	gap: calc(40rem / var(--root-font-size));
	padding-top: calc(80rem / var(--root-font-size));
}

.hamburger-nav .off-campus .overview,
.hamburger-nav .off-campus .course-of-study,
.hamburger-nav .off-campus .graduate-school,
.hamburger-nav .off-campus .career-and-employment,
.hamburger-nav .off-campus .entrance-exam {
	display: flex;
	flex-flow: column wrap;
	gap: calc(15rem / var(--root-font-size));
	padding: calc(15rem / var(--root-font-size));
	background-color: #fff;
	border-radius: calc(15rem / var(--root-font-size));
}

.hamburger-nav .off-campus .overview a,
.hamburger-nav .off-campus .course-of-study a,
.hamburger-nav .off-campus .graduate-school a,
.hamburger-nav .off-campus .career-and-employment a,
.hamburger-nav .off-campus .entrance-exam a {
	color: var(--cat-all);
	transition: 0.3s;
}

.hamburger-nav .off-campus .overview a:hover,
.hamburger-nav .off-campus .course-of-study a:hover,
.hamburger-nav .off-campus .graduate-school a:hover,
.hamburger-nav .off-campus .career-and-employment a:hover,
.hamburger-nav .off-campus .entrance-exam a:hover {
	color: #00653680;
}

.hamburger-nav .off-campus .overview .link::after,
.hamburger-nav .off-campus .course-of-study .link::after,
.hamburger-nav .off-campus .graduate-school .link::after,
.hamburger-nav .off-campus .career-and-employment .link::after,
.hamburger-nav .off-campus .entrance-exam .link::after {
	transition: 0.3s;
}

.hamburger-nav .off-campus .overview .link:hover::after,
.hamburger-nav .off-campus .course-of-study .link:hover::after,
.hamburger-nav .off-campus .graduate-school .link:hover::after,
.hamburger-nav .off-campus .career-and-employment .link:hover::after,
.hamburger-nav .off-campus .entrance-exam .link:hover::after {
	background-image: url('/img/common2/icon_link_60_2.webp');
}

.hamburger-nav .off-campus .overview,
.hamburger-nav .off-campus .graduate-school {
	width: calc(257rem / var(--root-font-size));
}

.hamburger-nav .off-campus .overview {
	grid-row: 1;
	grid-column: 1;
}

.hamburger-nav .off-campus .overview .contents {
	gap: calc(2rem / var(--root-font-size));
}

.hamburger-nav .off-campus .course-of-study {
	grid-row: 1;
	grid-column: 2 / span 2;
	width: calc(588rem / var(--root-font-size));
	flex-wrap: nowrap;
}

.hamburger-nav .off-campus .course-of-study .contents {
	border-left: none;
}

.hamburger-nav .off-campus .course-of-study .contents .courses,
.hamburger-nav .off-campus .course-of-study .contents .introductions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(4rem / var(--root-font-size));
	border-left: var(--cat-all) calc(1rem / var(--root-font-size)) solid;
	height: 100%;
	padding-left: calc(10rem / var(--root-font-size));
	margin: 0;
}

.hamburger-nav .off-campus .graduate-school {
	grid-row: 2;
	grid-column: 1;
}

.hamburger-nav .off-campus .graduate-school .contents {
	gap: calc(3rem / var(--root-font-size));
}

.hamburger-nav .off-campus .career-and-employment {
	grid-row: 2;
	grid-column: 2;
	width: calc(193rem / var(--root-font-size));
}

.hamburger-nav .off-campus .entrance-exam {
	grid-row: 2;
	grid-column: 3;
	width: calc(325rem / var(--root-font-size));
}

.hamburger-nav .off-campus .overview,
.hamburger-nav .off-campus .course-of-study {
	height: calc(150rem / var(--root-font-size));
}

.hamburger-nav .off-campus .overview .contents,
.hamburger-nav .off-campus .course-of-study .contents {
	height: 6rem;
}

.hamburger-nav .off-campus .graduate-school,
.hamburger-nav .off-campus .career-and-employment,
.hamburger-nav .off-campus .entrance-exam {
	height: calc(178rem / var(--root-font-size));
}

.hamburger-nav .off-campus .graduate-school .contents,
.hamburger-nav .off-campus .career-and-employment .contents,
.hamburger-nav .off-campus .entrance-exam .contents {
	height: 8rem;
	gap: calc(7rem / var(--root-font-size));
}

.hamburger-nav .off-campus h4:has(.caption) {
	margin: 0;
}

.hamburger-nav .off-campus .caption {
	color: var(--cat-all);
	font-size: calc(18rem / var(--root-font-size));
	font-weight: var(--medium);
	list-style: none;
}

.hamburger-nav .off-campus .contents {
	display: flex;
	flex-flow: column wrap;
	align-items: flex-start;
	border-left: var(--cat-all) calc(1rem / var(--root-font-size)) solid;
	padding-left: calc(10rem / var(--root-font-size));
	margin: 0;
}

.hamburger-nav .off-campus .content {
	font-size: calc(14rem / var(--root-font-size));
	font-weight: var(--regular);
}

.hamburger-nav .off-campus .content span {
	display: inline-block;
}

.hamburger-nav .links {
	font-size: calc(14rem / var(--root-font-size));
	font-weight: var(--medium);
	display: flex;
	justify-content: space-between;
	margin: calc(40rem / var(--root-font-size)) 0;
}

.hamburger-nav .links a {
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25%;
	height: calc(30rem / var(--root-font-size));
	border-left: #fff calc(2rem / var(--root-font-size)) solid;
}

.hamburger-nav .links a:last-of-type {
	border-right: #fff calc(2rem / var(--root-font-size)) solid;
}

.hamburger-nav .for-campus {
	display: flex;
	gap: calc(90rem / var(--root-font-size));
	height: calc(74rem / var(--root-font-size));
	padding-bottom: calc(80rem / var(--root-font-size));
}

.hamburger-nav .for-campus li,
.hamburger-nav .for-campus li a {
	font-size: calc(14rem / var(--root-font-size));
	color: #fff;
}

.hamburger-nav .for-campus .contents {
	display: flex;
	gap: calc(20rem / var(--root-font-size));
	height: calc(74rem / var(--root-font-size));
	padding-left: 0;
	margin: 0;
}

.hamburger-nav .for-campus .contents .caption,
.hamburger-nav .for-campus .contents .for-campus-sites {
	display: flex;
	border-left: #fff calc(2rem / var(--root-font-size)) solid;
	padding-left: calc(20rem / var(--root-font-size));
	margin: 0;
}

.hamburger-nav .for-campus .caption {
	font-weight: var(--medium);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.hamburger-nav .for-campus .for-campus-sites {
	font-weight: var(--regular);
	flex-flow: column wrap;
	justify-content: space-around;
	align-items: flex-start;
	gap: 0 calc(50rem / var(--root-font-size));
	height: calc(74rem / var(--root-font-size));
}

.hamburger-nav .for-campus .link::after {
	background-image: url('/img/common2/icon_link_W.webp');
}

.hamburger-nav .buttons {
	display: none;
}

.instagram img {
	position: relative;
	bottom: calc(105rem / var(--root-font-size));
	left: calc(100% + calc(93rem / var(--root-font-size)));
	filter: invert(1);
	width: calc(24rem / var(--root-font-size));
	height: calc(24rem / var(--root-font-size));
}

/* SP */
@media screen and (width <= 991px) {
	header {
		justify-content: space-around;
		width: calc(750rem / var(--root-font-size));
		height: calc(120rem / var(--root-font-size));
		padding: 0 calc(50% - calc(750rem / var(--root-font-size) / 2));
	}

	header picture img {
		width: auto;
		height: calc(58rem / var(--root-font-size));
	}

	.header-menu-items {
		gap: 0;
		width: auto;
		height: calc(58em / var(--root-font-size));
	}

	.header-menu-items > ul {
		width: 0;
	}

	.header-menu-items ul {
		align-items: flex-start;
	}

	.header-menu-items ul .inquiry,
	.header-menu-items ul .access,
	.header-menu-items ul .language {
		display: none;
	}

	.hamburger-wrapper {
		width: calc(94rem / var(--root-font-size));
	}

	.hamburger-icon span {
		height: calc(3rem / var(--root-font-size));
	}

	.hamburger-icon span:nth-child(n+2) {
		margin: calc(20rem / var(--root-font-size)) auto 0 calc(15% / 2);
	}

	/* ハンバーガーの中身 */
	#hamburger:checked + .hamburger-icon span:nth-child(3) {
		transform: translateY(calc(-20rem / var(--root-font-size))) rotate(-45deg);
	}

	.hamburger-nav {
		top: calc(120rem / var(--root-font-size));
		height: calc(100% - calc(120rem / var(--root-font-size)));
		width: 100%;
		padding: 0;
	}

	.hamburger-nav .link::after {
		background-size: calc(26rem / var(--root-font-size));
		width: calc(26rem / var(--root-font-size));
		height: calc(26rem / var(--root-font-size));
		margin-bottom: calc(-2.5rem / var(--root-font-size));
		margin-left: calc(10rem / var(--root-font-size));
	}

	.sp-menu {
		display: flex;
		align-items: center;
		height: calc(120rem / var(--root-font-size));
		padding: 0 calc(50% - calc(650rem / var(--root-font-size) / 2));
		background-color: #fff;
	}

	.sp-menu ul {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		place-items: center center;
		width: 100%;
		height: auto;
		padding-left: 0;
	}

	.sp-menu ul > li {
		list-style: none;
		height: auto;
	}

	.sp-menu ul .sp-inquiry,
	.sp-menu ul .sp-access,
	.sp-menu ul .sp-language {
		font-size: calc(26rem / var(--root-font-size));
		display: flex;
		align-items: center;
		color: #000;
	}

	.sp-menu ul .sp-inquiry img,
	.sp-menu ul .sp-access img,
	.sp-menu ul .sp-language img {
		height: auto;
		margin-right: calc(4rem / var(--root-font-size));
	}

	.sp-menu ul .sp-inquiry img {
		width: calc(50rem / var(--root-font-size));
	}

	.sp-menu ul .sp-access img {
		width: calc(35rem / var(--root-font-size));
	}

	.sp-menu ul .sp-language {
		gap: calc(3rem / var(--root-font-size));
	}

	.sp-menu ul .sp-language .active {
		font-weight: bold;
	}

	.hamburger-nav .off-campus,
	.hamburger-nav .links,
	.hamburger-nav .for-campus,
	.hamburger-nav .buttons {
		padding-left: calc(50% - calc(650rem / var(--root-font-size) / 2));
		padding-right: calc(50% - calc(650rem / var(--root-font-size) / 2));
	}

	.hamburger-nav .off-campus {
		display: flex;
		flex-direction: column;
		padding-bottom: calc(100rem / var(--root-font-size));
	}

	.hamburger-nav .off-campus .overview,
	.hamburger-nav .off-campus .course-of-study,
	.hamburger-nav .off-campus .graduate-school,
	.hamburger-nav .off-campus .career-and-employment,
	.hamburger-nav .off-campus .entrance-exam {
		width: calc(590rem / var(--root-font-size));
		height: auto;
		padding: 0 calc(30rem / var(--root-font-size));
		gap: 0;
	}

	.hamburger-nav .off-campus .overview .contents,
	.hamburger-nav .off-campus .course-of-study .contents,
	.hamburger-nav .off-campus .graduate-school .contents,
	.hamburger-nav .off-campus .career-and-employment .contents,
	.hamburger-nav .off-campus .entrance-exam .contents {
		gap: calc(20rem / var(--root-font-size));
		height: auto;
		border-left: calc(3rem / var(--root-font-size)) var(--cat-all) solid;
		padding-left: calc(20rem / var(--root-font-size));
		margin-bottom: calc(24rem / var(--root-font-size));
	}

	.hamburger-nav .off-campus .overview .caption,
	.hamburger-nav .off-campus .course-of-study .caption {
		letter-spacing: 2rem;
	}

	.hamburger-nav .off-campus .course-of-study .contents {
		flex-wrap: nowrap;
		gap: calc(50rem / var(--root-font-size));
	}

	.hamburger-nav .off-campus .course-of-study .contents .courses,
	.hamburger-nav .off-campus .course-of-study .contents .introductions {
		gap: calc(20rem / var(--root-font-size));
		border-left: none;
		padding-left: 0;
	}

	.hamburger-nav .off-campus li:has(.caption) {
		display: flex;
		align-items: center;
		height: calc(100rem / var(--root-font-size));
	}

	.hamburger-nav .off-campus .caption {
		font-size: calc(36rem / var(--root-font-size));
		display: flex;
		justify-content: space-between;
		width: fit-content;
		height: calc(100rem / var(--root-font-size));
		align-items: center;
		cursor: pointer;
	}

	.hamburger-nav .off-campus .content {
		font-size: calc(28rem / var(--root-font-size));
	}

	.hamburger-nav .links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(30rem / var(--root-font-size)) 0;
		width: calc(650rem / var(--root-font-size));
		padding-bottom: calc(100rem / var(--root-font-size));
	}

	.hamburger-nav .links a {
		font-size: calc(28rem / var(--root-font-size));
		width: 100%;
		height: calc(60rem / var(--root-font-size));
		border-left: calc(3rem / var(--root-font-size)) #fff solid;
	}

	.hamburger-nav .links a:nth-child(2n) {
		border-right: calc(3rem / var(--root-font-size)) #fff solid;
	}

	.hamburger-nav .for-campus {
		flex-direction: column;
		gap: calc(36rem / var(--root-font-size));
		width: calc(650rem / var(--root-font-size));
		height: auto;
		padding-bottom: calc(100rem / var(--root-font-size));
	}

	.hamburger-nav .for-campus .contents {
		flex-direction: column;
		gap: calc(20rem / var(--root-font-size));
		height: auto;
	}

	.hamburger-nav .for-campus .contents .caption,
	.hamburger-nav .for-campus .contents .for-campus-sites {
		border-left: none;
	}

	.hamburger-nav .for-campus .contents .caption {
		font-size: calc(28rem / var(--root-font-size));
		flex-direction: row;
		justify-content: left;
		width: 100%;
		padding-top: calc(36rem / var(--root-font-size));
		padding-left: 0;
		margin: 0;
		border-top: calc(2rem / var(--root-font-size)) #fff solid;
	}

	.hamburger-nav .for-campus .contents .for-campus-sites {
		flex-wrap: nowrap;
		gap: calc(20rem / var(--root-font-size));
		height: auto;
		padding-left: 5rem;
	}

	.hamburger-nav .for-campus .contents .content {
		font-size: calc(24rem / var(--root-font-size));
	}

	.hamburger-nav .buttons {
		display: flex;
		flex-direction: column;
		gap: calc(40rem / var(--root-font-size));
		width: calc(650rem / var(--root-font-size));
	}

	.hamburger-nav .buttons a {
		font-size: calc(28rem / var(--root-font-size));
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(100rem / var(--root-font-size));
		background-color: #fff;
		border-radius: calc(40rem / var(--root-font-size));
	}

	.hamburger-nav .buttons .link::after {
		background-image: url('/img/common2/icon_link.webp');
	}

	.instagram {
		display: flex;
		justify-content: center;
		padding-top: calc(70rem / var(--root-font-size));
		padding-bottom: calc(100rem / var(--root-font-size));
	}

	.instagram img {
		position: unset;
		width: calc(50rem / var(--root-font-size));
		height: calc(50rem / var(--root-font-size));
	}
}