@charset "utf-8";

@media screen and (max-width : 768px){
	#contents_area {
		position: relative;
		z-index: 1;
	}
	#contents_area::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 87px;
		bottom: 0;
		z-index: 1;
		background: url(../img/bg_img.jpg) 50% 0 / calc(1280 / 750 * 100vw);
	}

	.cta,
	#footer_topic_path,
	footer {
		position: relative;
		z-index: 1;
	}

	#contents_area footer {
		padding-bottom: 50px;
		background: #fff;
	}

	footer .guaranteed {
		margin-bottom: 0;
	}
	
	.section,
	.section_inner,
	.block {
		position: relative;
		z-index: 1;
	}
	.section {
		letter-spacing: .075em;
		color: var(--c-text);
		font-weight: var(--fw-medium);
		font-family: 'Noto Sans JP', '游ゴシック Medium', YuGothic, YuGothicM, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-feature-settings: 'palt' 1;
	}
	.section img {
		display: block;
		width: 100%;
	}

	.fw-medium {
		font-weight: var(--fw-medium);
	}

	.fw-semibold {
		font-weight: var(--fw-semibold);
	}

	.fw-bold {
		font-weight: var(--fw-bold);
	}


/* ----------------------------------------
	Animation
---------------------------------------- */

	.anim_ready .scroll_anim:not([data-anim-parent*='sp']),
	.anim_ready [data-anim-children*='sp'] {
		opacity: 0;
		backface-visibility: hidden;
		transform: translate(0,20px);
	}

	.anim_ready .anim_end:not([data-anim-parent*='sp']),
	.anim_ready .anim_end [data-anim-children*='sp'] {
		opacity: 1 !important;
		transform: translate(0,0) !important;
		transition-duration: .75s;
		transition-property: opacity, transform;
	}
	
	.anim_ready .scroll_fix:not([data-anim-parent*='sp']),
	.anim_ready .parallax_img:not([data-anim-parent*='sp']) {
		transform: none !important;
	}
	.anim_ready .scroll_fix.fixed>* {
		position: fixed;
		left: 0;
		top: 87px;
	}

	.parallax_img {
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.parallax_img.visible {
		overflow: visible;
	}

	.parallax_img>div {
		transform: scale(1.1);
	}

	.parallax_img .parallax_contents {
		transition: 2s transform ease-out;
	}

	.parallax_img.visible>div,
	.parallax_img.anim_end>div {
		transform: scale(1);
		transition: 1s transform;
	}

	.anim_end[data-anim-order$='2'],
	.anim_end [data-anim-order$='2'] { transition-delay: .2s; }
	.anim_end[data-anim-order$='3'],
	.anim_end [data-anim-order$='3'] { transition-delay: .4s; }
	.anim_end[data-anim-order$='4'],
	.anim_end [data-anim-order$='4'] { transition-delay: .6s; }
	.anim_end[data-anim-order$='5'],
	.anim_end [data-anim-order$='5'] { transition-delay: .8s; }


/* ----------------------------------------
	section_detail
---------------------------------------- */

	.section_detail {
		overflow: hidden;
		padding-bottom: calc(180 / 750 * 100vw);
	}

	.section_detail .title_en {
		display: flex;
		justify-content: flex-end;
		margin-top: calc(60 / 750 * 100vw);
	}
	.section_detail .title_en img {
		width: calc(720 / 750 * 100vw);
	}

	.section_detail .section_inner {
		margin-top: calc(60 / 750 * 100vw);
	}

	.section_detail h3 {
		margin: auto;
	}
	.section_detail h3+p {
		margin: calc(52 / 750 * 100vw) auto calc(-8 / 750 * 100vw);
		padding: 0 .5em;
		text-align: center;
		font-size: calc(25 / 750 * 100vw);
		line-height: calc(41 / 25);
	}

	.section_detail .block {
		margin-top: calc(60 / 750 * 100vw);
		padding-bottom: calc(140 / 750 * 100vw);
	}
	.section_detail .block+.block {
		margin-top: calc(120 / 750 * 100vw);
	}

	.section_detail .block>figure {
		border-radius: 0 calc(50 / 750 * 100vw) calc(50 / 750 * 100vw) 0;
		width: calc(700 / 750 * 100vw);
		height: calc(340 / 750 * 100vw);
	}

	.section_detail .block.rev>figure {
		margin-left: calc(50 / 750 * 100vw);
		border-radius: calc(50 / 750 * 100vw) 0 0 calc(50 / 750 * 100vw);
	}

	.section_detail .block .contents {
		width: calc(650 / 750 * 100vw);
		margin: calc(40 / 750 * 100vw) auto 0;
	}

	.section_detail h4 img {
		width: auto;
		height: calc(30 / 750 * 100vw);
	}
	.section_detail h4+p {
		margin: calc(22 / 750 * 100vw) -.5em calc(-8 / 750 * 100vw) 0;
		letter-spacing: .05em;
		font-size: calc(24 / 750 * 100vw);
		line-height: calc(40 / 24);
	}
	.section_detail p small {
		display: inline-block;
		margin: calc(15 / 750 * 100vw) 0 calc(2 / 750 * 100vw);
		padding-left: 1em;
		vertical-align: top;
		text-indent: -1em;
		font-size: calc(20 / 750 * 100vw);
		line-height: calc(30 / 20);
	}

	#contents_area .section_detail .btn {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 50%;
		bottom: 0;
		width: calc(480 / 750 * 100vw);
		height: calc(80 / 750 * 100vw);
		border-radius: calc(40 / 750 * 100vw);
		background: var(--c-section);
		transform: translateX(-50%);
		color: #fff;
		font-size: calc(26 / 750 * 100vw);
	}
	.section_detail .btn::after {
		content: '';
		width: calc(12 / 750 * 100vw);
		height: 100%;
		margin-left: calc(30 / 750 * 100vw);
		background: url(../img/btn_arrow.svg) 50% 50% / contain no-repeat;
	}

	.section_detail .contents .parallax_img {
		display: block;
		width: calc(450 / 750 * 100vw);
		margin: calc(60 / 750 * 100vw) 0 0 calc(200 / 750 * 100vw);
	}

	.section_detail .rev .contents .parallax_img {
		margin-left: 0;
	}

	.section_detail .contents .parallax_img img {
		width: calc(450 / 750 * 100vw);
		border-radius: calc(25 / 750 * 100vw);
		transition-duration: 1s;
	}

	.section_detail .block .sub_img {
		margin-top: calc(60 / 750 * 100vw);
	}

	.section_detail .block .sub_img .img {
		overflow: hidden;
		width: calc(310 / 750 * 100vw);
		border-radius: calc(25 / 750 * 100vw);
	}

	.section_detail .movie {
		overflow: hidden;
		width: calc(640 / 750 * 100vw);
		padding-bottom: 0;
		border-radius: calc(20 / 750 * 100vw);
	}

	.section_detail .modal_mov_open a::after {
		background-image: url(../img/icon_play.svg);
	}

/* section_charging
---------------------------------------- */
	
	#section_charging {
		--c-section: var(--c-text-charging);
	}
	#section_charging h3 {
		width: calc(380.5 / 750 * 100vw);
	}

	#section_charging .cable_length>p {
		overflow: hidden;
		margin-bottom: calc(30 / 750 * 100vw);
		text-align: center;
		color: var(--c-section);
		font-size: calc(22 / 750 * 100vw);
		line-height: 1;
	}
	#section_charging .cable_length>p span {
		display: inline-block;
		position: relative;
		z-index: 1;
	}
	#section_charging .cable_length>p span::before,
	#section_charging .cable_length>p span::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 50vw;
		border-bottom: 1px solid;
	}
	#section_charging .cable_length>p span::before {
		right: 100%;
		margin-right: calc(20 / 750 * 100vw);
	}
	#section_charging .cable_length>p span::after {
		left: 100%;
		margin-left: calc(20 / 750 * 100vw);
	}
	#section_charging .cable_length ul {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	#section_charging .cable_length li {
		width: calc(310 / 750 * 100vw);
		letter-spacing: .025em;
		font-size: calc(20 / 750 * 100vw);
		line-height: 1.5;
	}

	#section_charging .cable_length .img {
		margin-bottom: calc(15 / 750 * 100vw);
	}

	#section_charging .block02>figure {
		height: calc(398 / 750 * 100vw);
	}

	#section_charging .block02 .sub_img {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-end;
	}

	#section_charging .block02 .sub_img .caption {
		margin-right: calc(25 / 750 * 100vw);
		white-space: nowrap;
		color: var(--c-section);
		font-size: calc(24 / 750 * 100vw);
		line-height: 1;
	}

	#section_charging .block03>figure {
		height: calc(378 / 750 * 100vw);
	}

/* section_evcharger
---------------------------------------- */

	#section_evcharger {
		--c-section: var(--c-text-evcharger);
	}

	#section_evcharger .title_en {
		justify-content: flex-start;
	}
	#section_evcharger .title_en img {
		width: 100%;
	}

	#section_evcharger h3 {
		width: calc(530 / 750 * 100vw);
	}

	#section_evcharger .block01>figure {
		height: calc(390 / 750 * 100vw);
	}
	#section_evcharger .block01 h4 img {
		height: calc(34 / 750 * 100vw);
	}

/* section_powersupply
---------------------------------------- */

	#section_powersupply {
		--c-section: var(--c-text-powersupply);
	}

	#section_powersupply h3 {
		width: calc(386.5 / 750 * 100vw);
	}

	#section_powersupply .block01>figure {
		height: calc(373 / 750 * 100vw);
	}
	#section_powersupply .block01 h4 img {
		height: calc(47 / 750 * 100vw);
	}

	#section_powersupply .block02>figure {
		height: calc(360 / 750 * 100vw);
	}

	#section_powersupply .block02 .caption {
		display: block;
		width: calc(450 / 750 * 100vw);
		margin-top: calc(20 / 750 * 100vw);
		font-size: calc(24 / 750 * 100vw);
		line-height: 1;
	}

	#section_powersupply .block02 .feature {
		margin: calc(35 / 750 * 100vw) 0 calc(-10 / 750 * 100vw);
		font-size: calc(24 / 750 * 100vw);
		line-height: calc(44 / 24);
	}


/* ----------------------------------------
	section_notes
---------------------------------------- */

	#section_notes {
		margin-bottom: calc(80 / 750 * 100vw);
	}

	#section_notes .section_inner {
		box-sizing: border-box;
		width: calc(690 / 750 * 100vw);
		margin: auto;
		padding: calc(26 / 750 * 100vw);
		border: 2px solid #b3b3b3;
	}
	#section_notes li {
		padding-left: 1em;
		text-indent: -1em;
		font-size: calc(24 / 750 * 100vw);
		line-height: calc(22 / 12);
	}
	#section_notes strong {
		text-decoration: underline;
	}


/* ----------------------------------------
	movie_modal
---------------------------------------- */

	#movie_modal {
		position: fixed;
		text-align: center;
		white-space: nowrap;
	}
	#movie_modal::after,
	#movie_modal_inner {
		display: inline-block;
		vertical-align: middle;
	}
	#movie_modal::after {
		content: '';
		width: 0;
		height: 100%;
	}
	#movie_modal_inner {
		position: relative;
		width: 90%;
		max-width: 800px;
	}
	#movie_modal_data {
		position: relative;
		padding-top: 56.25%;
	}
	#movie_modal_data iframe {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}