@charset "utf-8";

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

/* ----------------------------------------
	section_kv
---------------------------------------- */

	#section_kv {
		z-index: 2;
	}

	#kv_title,
	#kv_title.fixed>span {
		left: 70px;
		height: 91.5px;
	}
	#kv_title {
		position: absolute;
		bottom: 20px;
	}

	#kv_title.anim_end {
		opacity: 0;
		animation: anim-title .5s .5s forwards;
	}
	
	#kv_title img {
		width: auto;
		height: 100%;
	}

	#kv_title.fixed>span {
		position: fixed;
	}


/* ----------------------------------------
	section_gallery
---------------------------------------- */

	#section_gallery {
		margin-top: 60px;
	}

	#gallery_text,
	#gallery_text p {
		left: 70px;
	}

	#gallery_text {
		/* position: absolute;
		z-index: 2;
		top: 300px; */
		position: fixed;
		z-index: 2;
		top: 100%;
	}

	#gallery_text p {
		box-sizing: border-box;
		width: 284px;
		padding: 7px 15px;
		background: var(--c-bg-red);
		line-height: 2;
	}

	#gallery_text.fixed p {
		position: fixed;
		/* top: calc(50% + (91.5px / 2) + 20px); */
		top: 100%;
	}


/* ----------------------------------------
	section_performance
---------------------------------------- */

	#performance_list .slick-slide div {
		padding: 0 12.5%;
	}

	#performance_list .slick-arrow {
		top: 0;
		margin-top: calc(100 / 1200 * 100%);
	}

	#performance_list .slick-prev {
		left: 30.75%;
		margin-left: -30px;
	}

	#performance_list .slick-next {
		right: 30.75%;
		margin-right: -30px;
	}

	#performance_list h3 {
		margin-top: 20px;
		letter-spacing: .02em;
	}
	#performance_list p {
		margin-top: 14px;
		letter-spacing: .02em;
		font-weight: normal;
		line-height: 1.75;
	}

	#section_performance .btn {
		margin-top: 60px;
		text-align: center;
	}
	#section_performance .btn a {
		display: inline-block;
		position: relative;
		box-sizing: border-box;
		height: 40px;
		padding: 0 54px;
		border-radius: 20px;
		background: #fff;
		vertical-align: top;
		letter-spacing: .04em;
		color: #000;
		font-size: 14px;
		line-height: 40px;
	}
	#section_performance .btn a::after {
		content: '';
		position: absolute;
		right: 6px;
		top: 0;
		bottom: 0;
		z-index: 1;
		width: 28px;
		background: #000;
		transition: .2s transform;
		-webkit-mask: url(../img/icon_link.svg) 100% 50% / contain no-repeat;
		mask: url(../img/icon_link.svg) 100% 50% / contain no-repeat;
	}
	#section_performance .btn:hover::after {
		transform: translateX(5px);
	}


/* ----------------------------------------
	section_link
---------------------------------------- */

	#section_link {
		margin-top: 190px;
	}
	#section_link ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}
	#section_link li:nth-child(2n) {
		transition-delay: .2s;
	}
	#section_link a {
		display: block;
		position: relative;
	}

	#section_link .img {
		opacity: .6;
		transition: .2s opacity;
	}
	#section_link a:hover .img {
		opacity: .8;
	}

	#section_link .name {
		display: flex;
		align-items: center;
		position: absolute;
		left: 50%;
		top: 50%;
		box-sizing: content-box;
		height: 28px;
		padding: 0 38px 9px 0;
		transform: translate3d(-50%,-50%,0);
	}
	#section_link .name::before,
	#section_link .name::after {
		content: '';
		position: absolute;
	}
	#section_link .name::before {
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1px solid;
		clip-path: polygon(0 0, 0 0);
	}
	#section_link .name::after {
		right: 0;
		top: 0;
		z-index: 1;
		width: 28px;
		height: 28px;
		background: url(../img/icon_link.svg) 100% 50% / contain no-repeat;
		transition: .2s transform;
	}
	#section_link .name img {
		width: auto;
		height: 18px;
	}
	#section_link a:hover .name::after {
		transform: translateX(5px);
	}

	#section_link .anim_end .name::before {
		animation: anim_text .5s .5s forwards;
	}
	#section_link .anim_end:nth-child(2n) .name::before {
		transition-delay: .7s;
	}
}

@keyframes anim-title {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}