@charset "UTF-8";
@import "/include/css/common.sp.css";

/* ---------------------------------------------------------
	CSS Document layout
--------------------------------------------------------- */

#wrapper:before {
	height: calc(125vw + 65px);
}

/* ---------------------------------------------------------
	CSS Document main
--------------------------------------------------------- */

#main {
	height: 130vw;
	margin: 0 5vw 12vw;
	position: relative;
	z-index: 0;
}

#main:after {
	content: '';
	width: 90vw;
	height: 53vw;
	background: url(../top/visual.svg) no-repeat left bottom / 100% 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 4;
}

#main .visual {
	height: calc(130vw - 15px);
}

#main .visual .slick-list {
	background: #3a3737;
}

#main .visual figure {
	overflow: hidden;
}

#main .visual figure img {
	max-width: 600%;
	height: 100vw;
	height: 130vw;
	transform: translateX(-50%);
	position: relative;
	left: 50%;
}

#main .slick-dots {
	height: 6px;
	margin-top: 9px;
	text-align: center;
	font-size: 0;
}

#main .slick-dots li {
	display: inline-block;
	vertical-align: top;
	margin: 0 4px;
}

#main .slick-dots button {
	vertical-align: top;
	width: 6px;
	height: 6px;
	outline: 0;
	margin: 0;
	padding: 0;
	border-radius: 100%;
	border: 0;
	background: rgba(176, 155, 166, 0.7);
	font-size: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

#main .slick-dots .slick-active button {
	background: #8a73ba;
}

#main h2 {
	text-align: left;
	font-weight: normal;
	line-height: 1;
	color: #fff;
	position: absolute;
	bottom: 4.5vw;
	left: 5vw;
	z-index: 5;
}

#main h2 .en {
	display: block;
	margin-bottom: 10px;
	text-shadow: 0 3px 5px rgba(0, 0, 0, 0.35);
	font-family: 'Akrobat SemiBold', 'Noto Sans JP', sans-serif;
	font-size: 9vw;
	line-height: 8.6vw;
}

#main h2 .ja {
	display: block;
	font-weight: 500;
	font-size: 3vw;
	letter-spacing: 0.05em;
}

/* ---------------------------------------------------------
	CSS Document topics
--------------------------------------------------------- */

#topics {
	margin: 0 5vw 15vw;
}

#topics h2 {
	margin-bottom: 5vw;
}

#topics .find {
	margin-bottom: 7vw;
	text-align: justify;
}

#topics figure {
	height: 62vw;
	overflow: hidden;
	margin-bottom: 10px;
	background: #f8f8f8;
}

#topics figure img {
	height: 90vw;
	transform: translateY(-50%);
	position: relative;
	top: 50%;
}

#topics dt a {
	text-decoration: none;
	color: #3a3737;
}

#topics dd .date {
	margin-right: 1em;
	letter-spacing: 0.05em;
	color: #868585;
}

#topics dd .category {
	color: #8a73ba;
}

/* ---------------------------------------------------------
	CSS Document event
--------------------------------------------------------- */

#event {
	padding: 15vw 5vw 10vw;
	background: #f8f8f8;
}

#event h2 {
	margin-bottom: 10vw;
}

#event .flex figure {
	height: 50vw;
	margin-bottom: 10px;
}

#event .flex figure img {
	width: 50vw;
	height: 50vw;
}

#event .flex .section {
	margin-bottom: 10vw;
	text-align: justify;
}

#event .about dt {
	margin-bottom: 5px;
	text-align: center;
	font-weight: 500;
	font-size: 5vw;
	letter-spacing: 0.05em;
	color: #8a73ba;
}

#event .type {
	margin-top: 20px;
	font-size: 0;
}

#event .type dt {
	display: inline-block;
	vertical-align: top;
	height: 28px;
	overflow: hidden;
	padding: 0 1em;
	background: #8a73ba;
	font-size: 3.5vw;
	letter-spacing: 0.05em;
	line-height: 26px;
	color: #fff;
}

#event .type dd {
	padding: 1.2em 1.5em;
	border-radius: 0 6px 6px 6px;
	background: #e9e6e6;
	font-size: 3.5vw;
}

/* ---------------------------------------------------------
	CSS Document slide
--------------------------------------------------------- */

#slide {
	height: 74.62632850241546vw;
	margin-bottom: 15vw;
}

/* ---------------------------------------------------------
	CSS Document link
--------------------------------------------------------- */

#recruit {
	margin: 0 5vw 5vw;
}

#recruit h2 {
	margin-bottom: 5vw;
}

#recruit p {
	margin-bottom: 7vw;
	text-align: justify;
}