@charset "utf-8";

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

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

	#section_kv .movie video {
		display: block;
		width: 100%;
	}

	#kv_sound {
		position: absolute;
		right: 20px;
		bottom: 10px;
		z-index: 1;
		width: 36px;
		height: 36px;
		background: url(../img/ico_audio_on.png) 50% 50% / contain no-repeat;
		cursor: pointer;
	}

	#kv_sound.on {
		background-image:url(../img/ico_audio_off.png);
	}


/* ----------------------------------------
	section_message
---------------------------------------- */

	#section_message {
		margin-top: calc(35 / 320 * 100vw);
		box-sizing: border-box;
		padding: calc(35 / 320 * 100vw) 0 calc(30 / 320 * 100vw);
		background: url(../img/message_bg_sp.jpg) 50% 0 / cover no-repeat;
		min-height: calc(690 / 320 * 100vw);
		--anim-delay: .1s;
	}

	#section_message .section_inner {
		width: calc(286 / 320 * 100vw);
	}

	#section_message .text span {
		display: inline-block;
		overflow: hidden;
		height: calc(28 / 320 * 100vw);
		clip-path: polygon(0 0, 0 0);
		vertical-align: top;
		animation: .7s forwards;
	}

	#section_message .text.anim_end span {
		animation-name: anim_text;
	}

	#section_message span.text01 {
		width: calc(151 / 320 * 100vw);
	}
	#section_message span.text02 {
		width: calc(278 / 320 * 100vw);
		animation-delay: calc(var(--anim-delay) * 1);
	}
	#section_message span.text03 {
		width: calc(127 / 320 * 100vw);
		animation-delay: calc(var(--anim-delay) * 2);
	}
	#section_message span.text04 {
		width: calc(183.5 / 320 * 100vw);
		margin-top: calc(25 / 320 * 100vw);
		animation-delay: calc(var(--anim-delay) * 3);
	}
	#section_message span.text05 {
		width: calc(295 / 320 * 100vw);
		animation-delay: calc(var(--anim-delay) * 4);
	}
	#section_message span.text06 {
		width: calc(262 / 320 * 100vw);
		animation-delay: calc(var(--anim-delay) * 5);
	}
	#section_message span.text07 {
		width: calc(253.5 / 320 * 100vw);
		animation-delay: calc(var(--anim-delay) * 6);
	}
	#section_message span.text08 {
		width: calc(159 / 320 * 100vw);
		margin-top: calc(25 / 320 * 100vw);
		animation-delay: calc(var(--anim-delay) * 7);
	}
	#section_message span.text09 {
		width: calc(189 / 320 * 100vw);
		height: auto;
		animation-delay: calc(var(--anim-delay) * 8);
	}

	#section_message .copy {
		opacity: 0;
		width: calc(289.5 / 320 * 100vw);
		margin-top: calc(35 / 320 * 100vw);
	}

	#section_message .text.anim_end .copy {
		animation-name: anim_r2l;
		animation-delay: calc(var(--anim-delay) * 12);
	}


	#section_message .movie_area {
		margin-top: calc(40 / 320 * 100vw);
	}
	#section_message .movie_area>p {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: calc(164 / 320 * 100vw);
		height: calc(18 / 320 * 100vw);
		padding: 0 calc(14 / 320 * 100vw);
		background: var(--c-bg-red);
	}
	#section_message .movie_area a::after {
		height: calc(60 / 320 * 100vw);
		margin-top: calc(-20 / 320 * 100vw);
	}


/* ----------------------------------------
	section_info
---------------------------------------- */

	#section_info {
		padding: calc(15 / 320 * 100vw) 0;
		background: #fff;	
		color: #000;
		letter-spacing: .04em;
		font-size: calc(10 / 320 * 100vw);
	}
	#section_info h2 {
		width: calc(100 / 320 * 100vw);
		margin: auto;
	}

	#info_list {
		margin: calc(10 / 320 * 100vw) calc(15 / 320 * 100vw) 0;
	}
	#info_list li>a {
		display: inline-block;
		text-decoration: underline;
		text-decoration-skip-ink: none;
		text-underline-offset: 2px;
	}
	#info_list time {
		display: block;
		margin-bottom: .5em;
	}

	#info_list .slick-list {
		padding-bottom: calc(12 / 320 * 100vw);
	}
	#info_list .slick-dots {
		display: flex;
		justify-content: center;
	}
	#info_list .slick-dots li {
		opacity: .4;
		overflow: hidden;
		width: calc(6 / 320 * 100vw);
		height: calc(6 / 320 * 100vw);
		margin: 0 calc(10 / 320 * 100vw);
		border-radius: 50%;
		background: #000;
	}
	#info_list .slick-dots button {
		opacity: 0;
	}

	#info_list li.slick-active {
		opacity: 1;
	}


/* ----------------------------------------
	section_lineup
---------------------------------------- */

	#section_lineup li {
		position: relative;
	}
	#section_lineup li p {
		display: flex;
		align-items: center;
		position: absolute;
		left: calc(17 / 320 * 100vw);
		top: calc(13 / 320 * 100vw);
		height: calc(19 / 320 * 100vw);
		padding: 0 calc(9 / 320 * 100vw);
		background: var(--c-bg-red);
		transition: .5s opacity;
	}
	#section_lineup li p+p {
		margin-top: calc(3 / 320 * 100vw);
		transform: translateY(100%);
	}

	#section_lineup li .anim_text {
		clip-path: polygon(0 0, 0 0);
	}

	#section_lineup .anim_end .anim_text {
		animation: anim_text .5s .2s forwards;
	}

	#section_lineup li:not(.prelude) p img {
		width: auto;
		height: calc(15.5 / 320 * 100vw);
	}

	#section_lineup .civic_ehev p:nth-child(2) img {
		height: calc(14 / 320 * 100vw);
	}

	#section_lineup .name {
		display: flex;
		align-items: center;
		position: absolute;
		left: calc(17 / 320 * 100vw);
		box-sizing: content-box;
		height: calc(16 / 320 * 100vw);
		bottom: calc(10 / 320 * 100vw);
		padding: 0 calc(20 / 320 * 100vw) calc(4 / 320 * 100vw) 0;
	}
	#section_lineup .name::before,
	#section_lineup .name::after {
		content: '';
		position: absolute;
	}
	#section_lineup .name::before {
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1px solid;
		clip-path: polygon(0 0, 0 0);
	}
	#section_lineup .name::after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		width: calc(16 / 320 * 100vw);
		height: calc(16 / 320 * 100vw);
		background: url(../img/icon_link.svg) 100% 50% / contain no-repeat;
	}
	#section_lineup .name img {
		width: auto;
		height: calc(12 / 320 * 100vw);
	}

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

	#section_lineup .anim_hover {
		background: 0 0 / 100% no-repeat;
	}

	#section_lineup .anim_hover .img {
		transition: .5s opacity;
	}

	#section_lineup .anim_center p,
	#section_lineup .anim_center .img {
		opacity: 0;
	}

	#section_lineup .civic_type-r {
		background-image: url(../img/lineup_civic_type-r_img_on_sp.jpg);
	}
	#section_lineup .civic_rs {
		background-image: url(../img/lineup_civic_rs_img_on_sp.jpg);
	}
	#section_lineup .civic_ehev {
		background-image: url(../img/lineup_civic_ehev_img_on_sp.jpg);
	}

	#section_lineup .prelude p {
		left: 50%;
		top: 50%;
		width: calc(236 / 320 * 100vw);
		height: auto;
		padding: 0;
		background: none;
		transform: translateX(-50%);
	}


/* ----------------------------------------
	section_wallpaper
---------------------------------------- */

	#wallpaper_list {
		width: calc(240 / 320 * 100vw);
		margin: auto;
		text-align: center;
	}

	#wallpaper_list .size>li {
		margin-top: calc(20 / 320 * 100vw);
	}
	#wallpaper_list .size a {
		display: block;
		border: 1px solid;
		letter-spacing: .04em;
		font-size: calc(10 / 320 * 100vw);
		line-height: calc(22 / 10);
	}
}