@charset "UTF-8";

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

	#motion-logo-sp{
		display: none;
	}
	.motion-logo-svg{
		opacity: 0;
		transition: opacity 600ms ease;
	}
	.is_show_logo .motion-logo-svg{
		opacity: 1;
	}

	#motion-logo svg.motion-logo-svg {
		width: 800px;
		height: 55px;
	}
	#motion-logo svg.motion-logo-svg path {
		fill: #fff;
	}
	#motion-logo svg.motion-logo-svg .honda path {
		fill: #c00;
	}
	#motion-logo .text {
		position: absolute;
		width: 800px;
		height: 40px;
		left: 0;
		bottom: -15px;
	}
	#motion-logo .text li {
		position: absolute;
		font-size: 12px;
		line-height: 1.5;
		text-align: center;
		white-space: nowrap;
		color: #fff;
	}

	#motion-logo .text li:nth-child(1) {
		width: 150px;
		left: -15px;
	}
	#motion-logo .text li:nth-child(2) {
		width: 220px;
		left: 164px;
	}
	#motion-logo .text li:nth-child(3) {
		width: 230px;
		left: 390px;
	}
	#motion-logo .text li:nth-child(4) {
		width: 192px;
		left: 618px;
	}


	#motion-logo .honda,
	#motion-logo .powerof,
	#motion-logo .copy,
	#motion-logo .line,
	#motion-logo .comma{
		opacity: 1;
		transition: opacity 600ms ease;
	}
	.is_fixed_logo #motion-logo .honda,
	.is_fixed_logo #motion-logo .powerof,
	.is_fixed_logo #motion-logo .copy,
	.is_fixed_logo #motion-logo .line,
	.is_fixed_logo #motion-logo .comma{
		opacity: 0;
	}

	.motion-logo-line{
		position: absolute;
		right: -4px;
		top: calc(100% + 30px);
		width: 621px;
		opacity: 0.6;
	}
	.motion-logo-line svg{
		width: 100%;
	}
	.motion-logo-line svg path{
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        opacity: 0;
        will-change: opacity;
	}
	.motion-logo-line svg path:nth-child(5){
        stroke-dashoffset: 0;
	}


	.motion-logo-line-h{
		position: absolute;
		right: 0;
		bottom: -1.8699999999999999rem;
		height: 1px;
		width: 77.5%;
		background: #ffffff60;
		transform-origin: top left;
		transform: scale(0);
	}
	.motion-logo-line-v{
		position: absolute;
		margin-top: 1.8699999999999999rem;
		right: 50%;
		top: 100%;
		height: 180px;
		width: 1px;
		background: #ffffff60;
		transform-origin: top left;
		transform: scaleY(0);
	}
	.motion-logo-line-h.on{
		transform: scale(1);
	}
	.motion-logo-line-v.on{
		transform: scaleY(1);
	}


	#motion-logo .text li {
		opacity: 0;
		transition: all 600ms linear;
	}
	.is_complete #motion-logo .text li{
		opacity: 1;
	}
}

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

	#motion-logo{
		display: none;
	}

	#motion-logo-sp svg {
		width: 340px;
		height: 343px;
	}
	#motion-logo-sp path,
	#motion-logo-sp polygon {
		fill: #fff;
		will-change: transform;
	}
	#motion-logo-sp .honda path {
		fill: #c00;
	}
	#motion-logo-sp .arrow-base{
		opacity: 0;
	}
	#motion-logo-sp .honda,
	#motion-logo-sp .powerof,
	#motion-logo-sp .copy,
	#motion-logo-sp .line,
	#motion-logo-sp .comma,
	#motion-logo-sp .arrow{
		opacity: 1;
		transition: opacity 600ms ease;
	}

	.is_fixed_logo_sp #motion-logo-sp .honda,
	.is_fixed_logo_sp #motion-logo-sp .powerof,
	.is_fixed_logo_sp #motion-logo-sp .copy,
	.is_fixed_logo_sp #motion-logo-sp .line,
	.is_fixed_logo_sp #motion-logo-sp .comma,
	.is_fixed_logo_sp #motion-logo-sp .arrow{
		opacity: 0;
	}
	#motion-logo-sp .arrow-base{
		opacity: 0;
		transition: opacity 600ms ease;	
	}
	.is_complete-sp #motion-logo-sp .arrow-base{
		opacity: 1;
	}



	#motion-logo-sp .text {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -1px;
	}
	#motion-logo-sp .text li {
		position: absolute;
		font-size: 11px;
		line-height: 1.5;
		text-align: center;
		white-space: nowrap;
		color: #fff;
		font-family: sans-serif;
	}

	#motion-logo-sp .text li:nth-child(1) {
		top: 29px;
		left: 50%;
		transform: translateX(-50%);
	}
	#motion-logo-sp .text li:nth-child(2) {
		top: 115px;
		left: 50%;
		transform: translateX(-50%);
	}
	#motion-logo-sp .text li:nth-child(3) {
		top: 243px;
		left: 50%;
		transform: translateX(-50%);
	}
	#motion-logo-sp .text li:nth-child(4) {
		top: 321px;
		left: 50%;
		transform: translateX(-50%);
	}
	#motion-logo-sp .text li {
		opacity: 0;
		transition: all 400ms linear;
	}
	.is_complete-sp #motion-logo-sp .text li{
		opacity: 1;
	}


	.motion-logo-line-f1{
		position: absolute;
		left: 50%;
		top: 78px;
		height: 80px;
		width: 250px;
		transform: translateX(-50%);
		opacity: 1;
		border: 1px solid rgba(255,255,255,0.5);
	}
	.motion-logo-line-f1:after{
		content: "";
		position: absolute;
		margin: auto;
		bottom: -13px;
		left: 0px;
		right: 0;
		display: block;
		width: 1px;
		height: 12px;
		background: rgba(255,255,255,0.5);
	}

	.motion-logo-line-f2{
		position: absolute;
		left: 50%;
		top: 196px;
		height: 176px;
		width: 245px;
		transform: translateX(-50%);
		opacity: 1;
		border: 1px solid rgba(255,255,255,0.5);
	}
	.motion-logo-line-f2:after{
		content: "";
		position: absolute;
		margin: auto;
		top: -12px;
		left: 0px;
		right: 0;
		display: block;
		width: 1px;
		height: 12px;
		background: rgba(255,255,255,0.5);
	}


	.motion-logo-line-v{
		position: absolute;
		right: 50%;
		top: 372px;
		height: 80px;
		width: 1px;
		background: rgba(255,255,255,0.5);
		transform-origin: top left;
		transform: scaleY(0);
	}



}



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

	 #motion-logo-sp{
	 	margin: auto;
	 	width: 300px;
	 	height: 300px;
	 }
	 .motion-logo-sp-inner{
	 	width: 340px;
	 	height: 340px;
	 	transform: scale(calc(300/340));
	 	transform-origin: left top;
	 }

}