@charset "utf-8";

@media screen and (max-width : 767px){

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

	#section_kv {
		z-index: 2;
	}

	#kv_title,
	#kv_title.fixed>span {
		left: calc(16 / 320 * 100vw);
		height: calc(44 / 320 * 100vw);
	}

	#kv_title {
		position: absolute;
		bottom: calc(16 / 320 * 100vw);
	}

	#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: calc(36 / 320 * 100vw);
	}

	#gallery_text {
		box-sizing: border-box;
		width: 100%;
		padding: calc(9 / 320 * 100vw) calc(16 / 320 * 100vw);
		background: var(--c-bg-red);
		font-weight: normal;
		font-size: calc(15 / 320 * 100vw);
		line-height: calc(29 / 15);
	}
	#gallery_text p {
		transform: none !important;
	}


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

	#performance_list .slick-arrow {
		top: calc(67 / 320 * 100vw);
	}

	#performance_list .slick-slide div {
		padding: 0 calc(7.5 / 320 * 100vw);
	}

	#performance_list h3 {
		margin-top: calc(10 / 320 * 100vw);
		letter-spacing: .02em;
		font-size: calc(15 / 320 * 100vw);
		line-height: calc(19 / 15);
	}
	#performance_list p {
		margin-top: calc(8 / 320 * 100vw);
		letter-spacing: .02em;
		font-weight: normal;
		font-size: calc(14 / 320 * 100vw);
		line-height: calc(18 / 320 * 100vw);
	}

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


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

	#section_link {
		margin-top: calc(40 / 320 * 100vw);
	}
	#section_link a {
		display: block;
		position: relative;
	}

	#section_link .img {
		opacity: .6;
	}

	#section_link .name {
		position: absolute;
		left: 50%;
		top: 50%;
		box-sizing: content-box;
		height: calc(28 / 320 * 100vw);
		padding: 0 calc(36 / 320 * 100vw) calc(7 / 320 * 100vw) 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: calc(28 / 320 * 100vw);
		height: calc(28 / 320 * 100vw);
		background: url(../img/icon_link.svg) 100% 50% / contain no-repeat;
	}
	#section_link .name img {
		width: auto;
		height: calc(18 / 320 * 100vw);
	}

	#section_link .anim_end .name::before {
		animation: anim_text .5s .5s forwards;
	}


/* ----------------------------------------
	btn_pagetop
---------------------------------------- */

	#btn_pagetop {
		margin-top: calc(40 / 320 * 100vw);
	}
}