:root {
	--root-font-size: 16;
	--main_color: #e27700;
}

#front-page {
	.main_visual {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 3em;
		p {
			margin: 0 0.5em;
		}
		img {
			max-width: 800px;
			height: auto;
			@media screen and (max-width: 768px) {
				max-width: none;
				max-height: 200px;
			}
		}
	}
	.news-bg {
		background-image: url("../images/front-page/news-bg-top.png"), url("../images/front-page/news-bg-bottom.png");
		background-repeat: no-repeat, no-repeat;
		background-size: contain, 40% auto;
		background-position: top center, bottom right;
		padding-bottom: 3em;
	}
	.banners {
		display: flex;
		justify-content: center;
		ul {
			padding: 1em;
			background-color: #fff;
			margin-left: auto;
			margin-right: auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			list-style-type: none;
			gap: 1em;
			margin-top: 2em;
			max-width: 1200px;
		}
		img {
			max-width: 350px;
			height: auto;
			@media screen and (max-width: 768px) {
				width: 100%;
			}
		}
	}
	.section-title {
		position: relative;
		font-size: calc( 32 / var(--root-font-size) * 1rem );
		display: inline-block;
		background: linear-gradient(transparent 50%, #E1F0FF 50%);
		&:before {
			content: '';
			display: block;
			border-bottom: 3px solid #0074df;
			width: 52px;
			position: absolute;
			top: -1em;
			left: 0;
		}
		@media screen and (max-width: 768px) {
			font-size: calc( 20 / var(--root-font-size) * 1rem );
		}
	}
	section.news {
		.wrap {
			max-width: 1200px;
			padding: 3em 1em;
			margin-left: auto;
			margin-left: auto;
			display: flex;
			@media screen and (max-width: 768px) {
				display: block;
			}
		}
		.text {
			flex: 1;
		}
		.message {
			font-size: calc( 14 / var(--root-font-size) * 1rem );
			line-height: 1.5em;
			@media screen and (max-width: 768px) {
				br {
					display: none;
				}
			}
		}
		ul {
			flex: 3;
			list-style-type: none;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 2em;
			@media screen and (max-width: 768px) {
				gap: 1.5em;
			}
		}
		li {
			display: flex;
			align-items: center;
			gap: 2em;
			@media screen and (max-width: 768px) {
				display: grid;
				grid-template-columns: 1fr 2fr;
				gap: 0.5em 1em;
			}
		}
		p {
			margin: 0;
		}
		.date {
			flex: 1;
		}
		.category {
			flex: 1.5;
			border-radius: 9999px;
			color: #fff;
			font-size: calc( 14 / var(--root-font-size) * 1rem );
			text-align: center;
			padding: 0.3em;
			&.info {
				background-color: #69bcff;
			}
			&.examination {
				background-color: #BF82C0;
			}
			&.research {
				background-color: #639FB5;
			}
		}
		.title {
			flex: 4;
			a {
				text-decoration: none;
			}
			@media screen and (max-width: 768px) {
				grid-column: 1 / 3;
			}
		}
	}
	.more {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		a {
			text-decoration: none;
			color: var(--main_color);
			display: flex;
			align-items: center;
			gap: 1em;
			margin-right: 3em;
			&:after {
				content: '→';
				color: #fff;
				width: 3em;
				height: 3em;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: var(--main_color);
				border-radius: 50%;
				transform-origin: center;
				transition-property: all;
				transition-duration: 0.3s;
			}
			&:hover {
				&:after {
					transform: scale(1.3);
				}
			}
			@media screen and (max-width: 768px) {
				margin-right: 1em;
			}
		}
	}
	section#events {
		background-color: #fef7f0;
		background-image: url("../images/front-page/event-bg.png");
		background-repeat: no-repeat;
		background-position: top 10em center;
		background-size: 70% auto;
		padding: 5em 1em;
		.wrap {
			max-width: 1200px;
			margin-left: auto;
			margin-right: auto;
		}
		.message {
			font-size: calc( 14 / var(--root-font-size) * 1rem );
			line-height: 1.5em;
		}
		.header {
			max-width: 1000px;
			margin-left: auto;
			margin-right: auto;
		}
		.categories {
			display: flex;
			align-items: center;
			gap: 1em;
			margin-top: 3em;
			list-style-type: none;
			padding: 0;
			@media screen and (max-width: 768px) {
				margin-top: 1em;
			}
			li {
				cursor: pointer;
				text-align: center;
				width: 8em;
				background-color: #fff;
				border: 1px solid;
				border-radius: 9999px;
				padding: 0.4em;
				flex-wrap: wrap;
				border-color: var(--main_color);
				color: var(--main_color);
				&:hover {
					background-color: var(--main_color);
					color: #fff;
				}
				@media screen and (max-width: 768px) {
					width: auto;
				}
			}
			@media screen and (max-width: 768px) {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1em;
			}
		}
		.posts {
			display: none;
			grid-template-columns: repeat(4, 1fr);
			gap: 2em;
			margin-top: 2em;
			margin-bottom: 3em;
			&.selected {
				display: grid;
			}
			@media screen and (max-width: 768px) {
				grid-template-columns: repeat(2, 1fr);
				gap: 1em;
			}
			.item {
				background-image: url("../images/front-page/event-item.png");
				box-shadow: 0.2em 0.2em 0.2em 0 rgba(0,0,0,0.25);
			}
			.thumbnail {
				margin: 0;
				a {
					position: relative;
					display: block;
					padding-top: 70%;
					overflow: hidden;
				}
				img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
					transform-origin: center;
					transition-property: all;
					transition-duration: 0.3s;
					&:hover {
						transform: scale(1.1);
					}
				}
			}
			.text {
				padding: 1em;
			}
			.held {
				display: flex;
				align-items: center;
				gap: 1em;
				line-height: 1.5em;
				margin: 0;
				font-size: calc( 14 / var(--root-font-size) * 1rem );
				@media screen and (max-width: 768px) {
					flex-direction: column;
					gap: 0.5em;
					align-items: flex-start;
				}
				dt {
					background-color: #63a9e9;
					color: #fff;
					padding: 0.2em 0.4em;
				}
				dd {
					flex: 1;
					margin: 0;
					p {
						margin: 0;
						display: inline-block;
						background: repeating-linear-gradient(transparent 0, transparent 0.75em, #E1F0FF 0.75em, #E1F0FF 1.5em)
					}
				}
			}
			.category {
				padding: 0.2em;
				display: inline-block;
				width: 6em;
				color: #fff;
				text-align: center;
				font-size: calc( 13 / var(--root-font-size) * 1rem );
				border-radius: 9999px;
				margin: 1em 0;
			}
			.seminar {
				background-color: #cc528b;
			}
			.event {
				background-color: #A0C238;
			}
			.consult {
				background-color: #0074DF;
			}
			.title {
				text-decoration: none;
				margin-top: 0;
				margin-bottom: 0.5em;
				line-height: 1.5em;
			}
		}
	}
	section.purpose {
		background-image: url("../images/front-page/purpose-bg.avif");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		padding: 3em 1em;
		.wrap {
			max-width: 1200px;
			margin-left: auto;
			margin-right: auto;
		}
		.title-wrap {
			max-width: 1000px;
			margin-left: auto;
			margin-right: auto;
		}
		.section-title {
			text-shadow: 0 -0.1em 0 rgba(226, 119, 0, 0.25);
			-webkit-text-stroke: 1px #fff;
			&:before {
				border-color: var(--main_color);
			}
		}
		.contents {
			display: flex;
			gap: 2em;
			margin-top: 3em;
			section {
				background-color: rgba(255,255,255,0.7);
				border-radius: 1em;
				padding: 1em;
				padding-top: 0;
			}
			@media screen and (max-width: 768px) {
				flex-direction: column;
			}
		}
		.title {
			text-align: center;
			text-align: center;
			margin: 0;
			font-weight: normal;
			margin-top: -0.54em;
			span {
				display: inline-block;
				padding: 0.4em;
				border-radius: 0.5em;
				border: 1px solid;
			}
		}
		.owner {
			flex: 3;
			.title {
				span {
					background-color: var(--main_color);
					border-color: var(--main_color);
					color: #fff;
					padding: 0.4em 2em;
				}
			}
			ul {
				grid-template-columns: repeat(3, 1fr);
				@media screen and (max-width: 768px) {
					grid-template-columns: repeat(2, 1fr);
				}
			}
			.item-1 a {
				background-image: url("../images/front-page/owner-item-1.png");
				&:hover {
					background-image: url("../images/front-page/owner-item-1-on.png");
				}
			}
			.item-2 a {
				background-image: url("../images/front-page/owner-item-2.png");
				&:hover {
					background-image: url("../images/front-page/owner-item-2-on.png");
				}
			}
			.item-3 a {
				background-image: url("../images/front-page/owner-item-3.png");
				&:hover {
					background-image: url("../images/front-page/owner-item-3-on.png");
				}
			}
			.item-4 a {
				background-image: url("../images/front-page/owner-item-4.png");
				&:hover {
					background-image: url("../images/front-page/owner-item-4-on.png");
				}
			}
			.item-5 a {
				background-image: url("../images/front-page/owner-item-5.png");
				&:hover {
					background-image: url("../images/front-page/owner-item-5-on.png");
				}
			}
			.item-6 a {
				background-image: url("../images/front-page/owner-item-6.png");
				&:hover {
					background-image: url("../images/front-page/owner-item-6-on.png");
				}
			}
		}
		.start {
			flex: 1;
			.title {
				span {
					background-color: #fff;
					border-color: var(--main_color);
					color: var(--main_color);
					padding: 0.4em ;
				}
			}
			ul {
				grid-template-columns: repeat(1, 1fr);
				@media screen and (max-width: 768px) {
					grid-template-columns: repeat(2, 1fr);
				}
			}
			.item-1 a {
				background-image: url("../images/front-page/start-item-1.png");
				&:hover {
					background-image: url("../images/front-page/start-item-1-on.png");
				}
			}
			.item-2 a {
				background-image: url("../images/front-page/start-item-2.png");
				&:hover {
					background-image: url("../images/front-page/start-item-2-on.png");
				}
			}
		}
		ul {
			list-style-type: none;
			padding: 0;
			display: grid;
			gap: 1em;
			margin-bottom: 0;
		}
		li {
			a {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				height: 100%;
				background-color: #fff;
				border-radius: 1em;
				border: 2px solid rgba(226, 119, 0, 0.5);
				text-decoration: none;
				min-height: 6em;
				text-align: center;
				line-height: 1.5em;
				background-position: center left;
				background-repeat: no-repeat;
				background-size: auto 70%;
				font-size: calc( 14 / var(--root-font-size) * 1rem );
				&:hover {
					background-color: #e6963d;
					border-color: #fff;
					color: #fff;
					opacity: 1;
				}
			}
		}
	}
	section.join {
		background-image: url("../images/front-page/join-bg.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: top center;
		padding: 3em 1em;
		.wrap {
			max-width: 1200px;
			margin-left: auto;
			margin-right: auto;
		}
		.title-wrap {
			max-width: 1000px;
			margin-left: auto;
			margin-right: auto;
		}
		.message {
			line-height: 1.5em;
		}
		.merit {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1em;
			margin-top: 3em;
			@media screen and (max-width: 768px) {
				grid-template-columns: repeat(1, 1fr);
			}
			section {
				background-color: #fff;
				border: 1px solid var(--main_color);
				border-radius: 0.5em;
			}
		}
		.merit-title {
			display: flex;
			color: var(--main_color);
			margin-top: 1em;
			.number {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin: 0;
				text-align: center;
				font-size: calc( 13 / var(--root-font-size) * 1rem );
				.num {
					font-size: calc( 20 / var(--root-font-size) * 1rem );
				}

			}
			.title {
				display: flex;
				flex: 2.5;
				font-weight: normal;
				margin: 0;
				line-height: 1.4em;
				text-align: center;
				font-size: calc( 18 / var(--root-font-size) * 1rem );
				&:before {
					content: '';
					padding-left: 0.5em;
					border-left: 1px solid var(--main_color);
				}
				span {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.merit-wrap {
			padding: 0 1em;
		}
		.image {
			img {
				width: 100%;
				height: auto;
			}
		}
		.text {
			line-height: 1.4em;
			font-size: calc( 14 / var(--root-font-size) * 1rem );
		}
	}
	.slidemenu_bg {
		margin-top: calc(234 / 2558 * 100vw);
		position: relative;
		background-color: #daeeff;
		padding-bottom: 3em;
		&:before {
			position: absolute;
			display: block;
			width: 100%;
			height: calc(234 / 2558 * 100vw);
			bottom: 100%;
			left: 0;
			content: '';
			background-image: url("../images/front-page/slidemenu-top.png");
			background-repeat: no-repeat;
			background-size: contain;
		}
	}
	.slidemenu_wrap {
		width: 100%;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	.slidemenu {
		padding-top: 4em;
		.section_padding {
			padding-left: 2em;
			padding-right: 2em;
			box-sizing: border-box;
		}
		section {
			background-color: #fff;
			border-radius: 1em;
			padding: 3em 2em 2em;
			position: relative;
			box-sizing: border-box;
			&:before {
				position: absolute;
				top: 10%;
				width: 80%;
				height: auto;
			}
		}
		.member_introduction:before {
			content: url("../images/front-page/member_introduction.svg");
			left: 14.5%;
		}
		.challenge_shop:before {
			content: url("../images/front-page/challenge_shop.svg");
			left: 34.5%;
		}
		.wrap {
			display: flex;
			gap: 3em;
			padding: 0 2em;
			position: relative;
			z-index: 2;
			@media screen and (max-width: 768px) {
				flex-direction: column;
				gap: 0;
				padding: 0em;
			}
		}
		.section-title {
			z-index: 2;
		}
		.image {
			flex: 1.5;
			img {
				width: 100%;
				height: auto;
			}
		}
		.text {
			flex: 1;
		}
		.name {
			line-height: 1.4em;
		}
		.description {
			line-height: 1.8em;
		}
		.more_post {
			margin-left: 1em;
			margin-right: 1em;
			a {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 0.5em;
				color: #fff;
				text-decoration: none;
				background-color: var(--main_color);
				padding: 1em;
				margin-top: 2em;
				gap: 3em;
				&:after {
					content: '';
					width: 1em;
					height: 1em;
					background-image: url("../images/front-page/more.svg");
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
				}
			}
		}
		.slick-prev {
			right: 9em;
			left: auto
		}
		.slick-next {
			right: 5em;
		}
		.slick-prev, .slick-next {
			transform: none;
			font-size: calc( 16 / var(--root-font-size) * 1rem );
			top: 0;
			&:before {
				border-radius: 50%;
				width: 3em;
				height: 3em;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: sans-serif;
				font-size: calc( 16 / var(--root-font-size) * 1rem );
				opacity: 1;
				background-color: rgba(255,255,255, 0.5);
				color: var(--main_color);
			}
			&.slick-disabled:before {
				background-color: rgba(217, 217, 217, 0.5);
				color: #888;
			}
		}
		.slick-dots {
			position: static;
			width: 60%;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			margin-top: 2em;
			margin-bottom: 1em;
			li {
				flex: 1;
				width: 100%;
				height: 3px;
				margin: 0;
				button {
					width: 100%;
					background-color: #fff;
					padding: 0;
					height: 100%;
					&:before {
						display: none;
					}
				}
				&.slick-active button {
					background-color: var(--main_color);
				}
			}
		}
	}
	section.highlight {
		background-image: url("../images/front-page/highlight-bg.avif");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		overflow: hidden;
		.section-title {
			color: #fff;
			-webkit-text-stroke: 0.3px var(--main_color);
			background: none;
		}
		.wrap {
			max-width: 1000px;
			padding: 3em 1em;
			margin-left: auto;
			margin-right: auto;
		}
		.message {
			color: #fff;
		}
		.highlight-slide-wrap {
			margin-top: 3em;
			width: 100%;
			max-width: 1000px;
			height: auto;
		}
		section {
			padding: 3em;
			background-color: rgba(255, 255, 255, 0.48);
			display: flex;
			gap: 4em;
			align-items: center;
			@media screen and (max-width: 768px) {
				flex-direction: column;
				gap: 0;
				padding: 1em 2em;
			}
		}
		.image {
			flex: 1;
			box-shadow: 0.2em 0.2em 0.2em 0 rgba(0,0,0,0.25);
			img {
				width: 100%;
				height: auto;
				vertical-align: top;
			}
		}
		.text {
			flex: 1.2;
		}
		.title {
			color: var(--main_color);
			-webkit-text-stroke: 0.3px #fff;
			font-size: calc( 20.8 / var(--root-font-size) * 1rem );
		}
		.description {
			line-height: 2em;
		}
		.link {
			a {
				text-align: center;
				text-decoration: none;
				background-color: #fff;
				border-radius: 0.5em;
				display: block;
				padding: 1em;
				&:hover {
					color: #fff;
					background-color: var(--main_color);
					opacity: 1;
					span:after {
						background-image: url("../images/front-page/more.svg");
					}
				}
			}
			span {
				display: inline-block;
				position: relative;
				line-height: 1em;
				&:after {
					content: '';
					width: 1em;
					height: 1em;
					background-image: url("../images/front-page/more2.svg");
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					position: absolute;
					right: -3em;
					top: 0;
					line-height: 1em;
				}
			}
		}
		.slick-prev, .slick-next {
			font-size: calc( 16 / var(--root-font-size) * 1rem );
			width: 2.5em;
			height: 2.5em;
			&:before {
				content: '';
				font-size: calc( 16 / var(--root-font-size) * 1rem );
				width: 100%;
				height: 100%;
				background-image: url("../images/front-page/highlight-arrow.svg");
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				display: block;
			}
		}
		.slick-prev:before {
			transform: rotate(180deg);
		}
	}
	section.contact {
		padding: 3em 1em;
		background-image: url("../images/front-page/contact-bg.avif");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: bottom center;
		.wrap {
			max-width: 1000px;
			margin-left: auto;
			margin-right: auto;
			box-sizing: border-box;
		}
		.links {
			display: flex;
			gap: 2em;
			padding: 1em 2em;
			font-size: calc( 20 / var(--root-font-size) * 1rem );
			@media screen and (max-width: 768px) {
				gap: 0.5em;
				flex-direction: column;
				padding: 0;
				margin-top: 1em;
			}
			p {
				flex: 1;
				@media screen and (max-width: 768px) {
					margin: 0;
				}
			}
			a {
				text-decoration: none;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border: 1px solid var(--main_color);
				color: #fff;
				background-color: var(--main_color);
				padding: 1em 2em;
				border-radius: 0.5em;
				@media screen and (max-width: 768px) {
					width: 100%;
					box-sizing: border-box;
				}
				&:before, &:after {
					content: '';
					width: 1.5em;
					height: 1.5em;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}
				&:after {
					background-image: url("../images/front-page/more3.svg");
				}
				&:hover {
					background-color: #fff;
					color: var(--main_color);
					opacity: 1;
					&:after {
						background-image: url("../images/front-page/more.svg");
					}
				}
			}
			.admission {
				a {
					&:before {
						background-image: url("../images/front-page/admission.png");
					}
					&:hover:before {
						background-image: url("../images/front-page/admission-on.png");
					}
				}
			}
			.mail {
				a {
					&:before {
						background-image: url("../images/front-page/mail-on.png");
					}
					&:hover:before {
						background-image: url("../images/front-page/mail.png");
					}
				}
			}
		}
		.tel {
			display: flex;
			justify-content: center;
			@media screen and (max-width: 768px) {
				margin-top: 1em;
			}
			.tel_wrap {
				padding: 0 3em;
				border: 1px solid var(--main_color);
				background-color: #fff;
				border-radius: 0.5em;
				text-align: center;
				p {
					margin: 1.5em 0;
				}
			}
			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.5em;
				font-weight: normal;
				&:before {
					content: '';
					width: 1.5em;
					height: 1.5em;
					background-image: url("../images/front-page/tel.svg");
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					display: block;
				}
			}
			a {
				text-decoration: none;
			}
			.number {
				font-size: calc( 18 / var(--root-font-size) * 1rem );
			}
			.fax {
				font-size: calc( 13 / var(--root-font-size) * 1rem );
			}
		}
	}
	.banner2 {
		background-color: #daeeff;
		padding: 2em 0;
		margin: 0;
		list-style-type: none;
		img {
			max-height: 80px;
		}
		li {
			margin: 0 1em;
		}
	}
}