body {
	background-color: #000;
}

.xMount10Years.wrapper {
	background-color: transparent;
	opacity: 0;
	transition: opacity .6s ease-out;
}

.is-loaded .xMount10Years.wrapper {
	opacity: 1;
}

.xMount10Years *, .xMount10Years *:before, .xMount10Years *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

.wrapper {
    padding-top: 72px;
}

@media screen and (max-width: 1199px) {
	.wrapper {
			padding-top: 48px;
	}
}



/******* aimation *******/

.js_parallax.s_parallaxY,
.js_parallax.s_parallaxX,
.kv_anim {
    transition: opacity .7s 0s,transform .7s 0s;
		transition-delay: var(--delay, 0);
}

.js_parallax.s_parallaxY,
.kv_anim {
    transform: translateY(10%);
    opacity: 0;
}

.is-loaded .js_parallax.s_parallaxY.s_aniShow,
.is-loaded .kv_anim {
    transform: translateY(0);
    opacity: 1;
}


/******* top kv *******/

.top-kv {
	position: relative;
	background: #000;
	padding-top: 0;
	padding-bottom: 0;
}

.top-kv::after {
	position: absolute;
	content: "";
	height: 10%;
	background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 1;
	bottom: 61%;
}

.top-kv__title {
	text-align: center;
	color: #fff;
	font-family: "Fjalla One",sans-serif;
	font-size: 2.571429vw;
	line-height: 1;
}

.top-kv__text {
	text-align: center;
	color: #fff;
	font-size: 20px;
	line-height: 2;
	letter-spacing: .05em;
	margin-top: 12px;
}

.top-kv__inner {
	margin: 0 auto;
	position: relative;
	z-index: 1;
	max-width: 2400px;
}

.top-kv__logo {
	max-width: 500px;
    width: 36.5vw;
    height: 23.7857142857143vw;
    margin: 0 auto;

    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 15%;
}

.top-kv__scroll {
	display: none;
}

.message-grid a {
	text-decoration: underline;
}

@media screen and (min-width: 2400px) {
	.top-kv::after {
		height: 20%;
		bottom: 1260px;
	}
	.top-kv__title {
		font-size: 60px;
	}
	.top-kv__logo {
		height: 326px;
		top: 467px;
	}
	.top-kv__text {
		line-height: 2.5;
		margin-top: 10px;
	}
}

@media screen and (max-width: 1199px) {
	.top-kv::after {
		bottom: 68%;
		height: 8%;
	}
	.top-kv__logo {
    width: 46.5vw;
    top: 19%;
	}
	.top-kv__text {
		font-size: 16px;
		line-height: 2.5;
		margin-top: 10px;
	}

}

@media screen and (max-width: 767px) {
	.top-kv::after {
		height: 20%;
		bottom: 29%;
	}
	.top-kv__title {
		font-size: 8vw;
	}

	.top-kv__title {
		margin-top: -20vw;
		position: relative;
		z-index: 1;
		line-height: 1.5;
	}

	.top-kv__text {
		font-size: 3.2vw;
		line-height: 2.5;
	}
	.top-kv__logo {
		width: 76.2666666666667vw;
		margin-top: 50px;
		top: 5%;
	}
}

@media screen and (min-width: 768px) {
	.top-kv__logo img {
			position: absolute;
			top: -270px;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 450px;
	}
}

@media screen and (max-width: 1199px) {
	.top-kv__logo img {
		top: -310px;
	}
}




/******* top contents *******/

.top-contents {
	margin-top: -60%;
	position: relative;
	z-index: 1;
	padding: 10px 30px;
	padding-bottom: 100px;
	background: linear-gradient(to bottom,#000,#000 30%,#444);
}

@media screen and (min-width: 2400px) {
	.top-contents {
		margin-top: -1260px;
	}
}

@media screen and (max-width: 1199px) {
	.top-contents {
		margin-top: -115%;
	}
}

@media screen and (max-width: 767px) {
	.top-contents {
		margin-top: -50%;
		z-index: 2;
	}
}

.top-contents__inner {
	margin: 0 auto;
	max-width: 1200px;
}



/******* fancybox *******/

.fancybox-caption.hide,
.fancybox-toolbar.hide {
    opacity: 0;
}
.fancybox-caption,
.fancybox-toolbar {
    position: absolute;
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    right: auto;

}
.fancybox-caption p:nth-child(1) {
    top: auto;
    font-size: 14px;

    bottom: 0;
    left:auto;
    width: 100%;
    /* padding: 0 0 1em; */
    margin-bottom: -2em;
}
.fancybox-button--close {
    right: 0;
    top: -50px;
}

@media screen and (max-width: 1000px) {
    .fancybox-caption p:nth-child(1) {
        padding-left: 1em;
    }
}

@media screen and (max-width: 767px) {
    .fancybox-caption p:nth-child(1) {
        padding-left: 0;
    }
    .fancybox-button--close {
        right: 0;
        top: -60px;
    }
}






/******* message grid *******/

.message-grid-item {
	padding-top: 80px;
}

@media screen and (min-width: 600px) {
	.message-grid {
		display: flex;
		flex-wrap: wrap;
	}
	/* .message-grid {
		grid-template-columns: 1fr 1fr;
	} */
	.message-grid-item {
		width: calc(calc(100% - 30px) / 2);
		margin-right: 30px;
	}
	.message-grid-item:nth-child(2n) {
		margin-right: 0;
	}
}

@media screen and (min-width: 1000px) {
	.message-grid-item {
		width: calc(calc(100% - 60px) / 3);
	}
	.message-grid-item:nth-child(2n) {
		margin-right: 30px;
	}
	.message-grid-item:nth-child(3n) {
		margin-right: 0;
	}
}


@media screen and (min-width: 1200px) {
	.message-grid-item {
		width: calc(calc(100% - 80px) / 3);
		margin-right: 40px;
	}
	.message-grid-item:nth-child(2n) {
		margin-right: 40px;
	}
	.message-grid-item:nth-child(3n) {
		margin-right: 0;
	}
}




/******* message block *******/

.message-block {
	color: white;
	/* word-break: break-all; */
}

.message-block__img-wrapper {
	height: 202px;
	text-align: center;
}

@media screen and (min-width: 1000px) {
	.message-block__img-wrapper {
		height: 255px;
	}
}

.message-block__img-wrapper a {
	display: inline-block;
	height: 100%;
	position: relative;
}

.message-block__img-wrapper a::after {
	position: absolute;
	content: "";
	bottom: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	background-image: url(../img/img-icon.png);
	background-repeat: no-repeat;
	background-size: 100%;
}

.message-block__img-wrapper img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

.message-block__text-wrapper {
	margin-top: -22px;
	padding: 0 23px;
}

.message-block__name {
	font-size: 24px;
	font-weight: bold;
	padding-left: 30px;
	position: relative;
}

.message-block__name::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -12px;
	width: 26px;
	height: 31px;
	background-image: url(../img/left-corner.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

.message-block__name::after {
	content: "";
	position: absolute;
	bottom: 7px;
	left: 0;
	width: 23px;
	height: 22px;
	background-image: url(../img/message-red.png);
	background-size: 100%;
	background-repeat: no-repeat
}

.message-block__title {
	font-size: 12px;
	color: #a9894a;
	font-family: serif;
	letter-spacing: 0.02em;
	padding-left: 24px;
	position: relative;
	margin-bottom: 4px;
	margin-top: 16px;
}

.message-block__title::before {
	content: "";
	position: absolute;
	width: 16px;
	height: 1px;
	left: 0;
	bottom: 8px;
	background-color: #a9894a;
}

.message-block__text {
	font-size: 14px;
	line-height: 1.7;
}

.message-block__profile-wrapper {
	position: relative;
}

.message-block__profile-wrapper::after {
	content: "";
	position: absolute;
	bottom: -12px;
	right: -12px;
	width: 26px;
	height: 34px;
	background-image: url(../img/right-corner.png);
	background-size: 100%;
	background-repeat: no-repeat;
	z-index: 0;
}

.message-block__profile {
	display: flex;
	margin-top: 10px;
	position: relative;
	z-index: 1;
}

.message-block__profile-img {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	background-color: gray;
	margin-right: 10px;
}

@media screen and (max-width: 600px) {
	.message-block__profile {
		display: block;
	}
	.message-block__profile-img {
		margin-right: 0;
		margin-bottom: 10px;
	}
}

.message-block__profile-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	object-position: top;
}

.message-block__profile-name {
	font-size: 12px;
	font-weight: bold;
}

.message-block__profile-text {
	font-size: 10px;
}

dl {
    margin-top: -4px;
}




/******* page top *******/

.footer {
	margin-top: 0;
}


#pagetop {
	top: -24px;
	margin: 0 auto -48px;
	z-index: 20;
}

@media screen and (min-width: 768px) {

	#pagetop {
			margin: 0 auto -64px;
	}
}
