@charset "utf-8";

#contents_area {
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--c-text: #4d4d4d;
	--c-text-charging: #70b2aa;
	--c-text-evcharger: #70b2c8;
	--c-text-powersupply: #faaa3c;
}

@media print, screen and (min-width : 769px){
	#contents_area {
		position: relative;
		z-index: 1;
		min-width: 980px;
	}
	#contents_area::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 121px;
		bottom: 0;
		z-index: 1;
		background: url(../img/bg_img.jpg) 50% 0 / 100%;
	}

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

	#contents_area footer {
		margin-bottom: 0;
		padding-bottom: 110px;
		background: #fff;
	}

	.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;
		max-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*='pc']),
	.anim_ready [data-anim-children*='pc'] {
		opacity: 0;
		backface-visibility: hidden;
		transform: translate(0,40px);
	}

	.anim_ready .anim_end:not([data-anim-parent*='pc']),
	.anim_ready .anim_end [data-anim-children*='pc'] {
		opacity: 1 !important;
		transform: translate(0,0) !important;
		transition-duration: .75s;
		transition-property: opacity, transform;
	}

	.anim_ready .scroll_fix:not([data-anim-parent*='pc']),
	.anim_ready .parallax_img:not([data-anim-parent*='pc']) {
		transform: none !important;
	}
	.anim_ready .scroll_fix.fixed>* {
		position: fixed;
		left: 0;
		top: 121px;
	}

	.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: 200px;
	}

	.section_detail .kv img {
		width: 100%;
	}

	.section_detail .title_en {
		position: relative;
		left: calc(50% - 160px);
		z-index: 1;
		margin-top: 90px;
	}

	.section_detail .section_inner {
		margin-top: 35px;
	}

	.section_detail h3,
	.section_detail h3+p {
		width: 980px;
		margin: auto;
	}
	.section_detail h3 {
		display: flex;
		justify-content: flex-end;
	}
	.section_detail h3+p {
		margin: 35px auto -10px;
		text-align: right;
		font-size: 22px;
		line-height: calc(42 / 22);
	}

	.section_detail .block {
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 140px;
	}
	.section_detail .block>figure {
		justify-content: flex-end;
		border-radius: 0 50px 50px 0;
		aspect-ratio: 640 / 320;
		width: 50%;
		min-height: 320px;
	}

	.section_detail .block.rev>figure {
		justify-content: flex-start;
		order: 1;
		border-radius: 50px 0 0 50px;
	}

	.section_detail .block>figure>div {
		width: max(640px, 100%);
		flex-shrink: 0;
	}
	.section_detail .block>figure img {
		width: 100%;
	}

	.section_detail .block .contents {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		width: 50%;
		padding: 45px 50px 0;
	}

	.section_detail .block.rev .contents {
		width: 400px;
		margin-left: auto;
		padding-left: 0;
	}

	.section_detail h4+p {
		margin: 27px 0 -8px;
		font-size: 14px;
		line-height: calc(30 / 14);
	}
	.section_detail p small {
		display: inline-block;
		margin: 17px 0 3px;
		padding-left: 1em;
		vertical-align: top;
		text-indent: -1em;
		font-size: 12px;
		line-height: calc(22 / 12);
	}

	#contents_area .section_detail .btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 170px;
		margin-top: 30px;
		height: 30px;
		border-radius: 15px;
		background: var(--c-section);
		color: #fff;
		font-size: 12px;
	}
	.section_detail .btn::after {
		content: '';
		width: 6px;
		height: 100%;
		margin-left: 20px;
		background: url(../img/btn_arrow.svg) 50% 50% / contain no-repeat;
	}

	.section_detail .contents .parallax_img {
		display: block;
		width: 417px;
		margin: 30px 0 0 -100px;
	}

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

	.section_detail .contents .parallax_img img {
		border-radius: 20px;
		transition-duration: 1s;
	}

	.section_detail .block .sub_img .img {
		overflow: hidden;
		width: 242px;
		border-radius: 20px;
	}

	.section_detail .movie {
		overflow: hidden;
		width: 842px;
		border-radius: 20px;
	}

	.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 .cable_length {
		width: 460px;
		margin: max(-80px, -80px + (100vw - 1800px) * 320 / 1280) 0 0 max(-580px, -540 / 390 * 100%);
	}
	#section_charging .cable_length>p {
		overflow: hidden;
		text-align: center;
		margin-bottom: 30px;
		color: var(--c-section);
		font-size: 16px;
		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: 230px;
		border-bottom: 1px solid;
	}
	#section_charging .cable_length>p span::before {
		right: 100%;
		margin-right: 10px;
	}
	#section_charging .cable_length>p span::after {
		left: 100%;
		margin-left: 10px;
	}
	#section_charging .cable_length ul {
		justify-content: space-between;
		align-items: flex-start;
	}
	#section_charging .cable_length li {
		width: 220px;
		margin-bottom: -4px;
		letter-spacing: .025em;
		font-size: 14px;
		line-height: calc(22 / 14);
	}

	#section_charging .cable_length .img {
		width: 100%;
		margin-bottom: 10px;
	}

	#section_charging .block02>figure {
		aspect-ratio: 640 / 370;
		min-height: 370px;
	}

	#section_charging .block02 .sub_img {
		position: relative;
		margin: -100px 0 0 calc(100% + 90px);
		margin: max(-100px, -100px + (100vw - 1600px) * 370 / 1280) 0 0 calc(100% + 90px);
	}

	#section_charging .block02 .sub_img .caption {
		position: absolute;
		left: 257px;
		bottom: 0;
		z-index: 1;
		margin-right: 15px;
		white-space: nowrap;
		color: var(--c-section);
		font-size: 16px;
	}

	#section_charging .block03>figure {
		aspect-ratio: 640 / 350;
		min-height: 350px;
	}

	#section_charging .block03 .sub_img {
		margin: -90px 0 0 -350px;
	}

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

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

	#section_evcharger .title_en {
		left: max(-98px, 50% - 612px);
	}

	#section_evcharger h3 {
		justify-content: flex-start;
	}
	#section_evcharger h3+p {
		text-align: left;
	}

	#section_evcharger .block01>figure {
		aspect-ratio: 640 / 360;
		min-height: 360px;
	}

	#section_evcharger .block01 .contents {
		padding: 0 20px;
	}

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

	#section_powersupply {
		--c-section: var(--c-text-powersupply);
		padding-bottom: 130px;
	}

	#section_powersupply .block01>figure {
		aspect-ratio: 640 / 350;
		min-height: 350px;
	}

	#section_powersupply .block02>figure {
		width: calc(50% + 60px);
		aspect-ratio: 700 / 370;
		min-height: 370px;
	}
	#section_powersupply .block02>figure>div {
		min-width: 700px;
	}

	#section_powersupply .block02 .contents {
		width: 365px;
		padding: 30px 30px 0 0;
	}

	#section_powersupply .block02 .caption {
		display: block;
		margin-top: 10px;
		font-size: 14px;
		line-height: 1;
	}

	#section_powersupply .block02 .feature {
		min-width: 470px;
		margin: -76px 0 -8px 445px;
		font-size: 14px;
		line-height: calc(30 / 14);
	}


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

	#section_notes {
		margin-bottom: 80px;
	}

	#section_notes .section_inner {
		box-sizing: border-box;
		width: 980px;
		margin: auto;
		padding: 19px 37px;
		border: 3px solid #b3b3b3;
	}
	#section_notes li {
		padding-left: 1em;
		text-indent: -1em;
		font-size: 14px;
		line-height: calc(30 / 14);
	}
	#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%;
	}
}

@media print, screen and (min-width : 2001px){
	#section_powersupply .block02 .feature {
		margin-left: 0;
		margin-top: 22px;
	}
}