@charset "utf-8";

#contents_area {
	--fw-noto-medium: 500;
	--fw-noto-semibold: 600;
	--fw-noto-bold: 700;
	--c-text: #4d4d4d;
	--c-bg-charging: #c8f0d1;
	--c-text-charging: #5aa082;
	--c-bg-powersupply: #fffff0;
	--c-text-powersupply: #f7931e;
	--c-bg-poweroutrage: #c8d7e6;
	--c-text-poweroutrage: #4d7bb3;
}

@media print, screen and (min-width : 769px){
	#contents_area {
		min-width: 980px;
	}

	#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-noto-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%;
	}
	.section h3 {
		margin: -10px 0;
		text-align: center;
		font-weight: var(--fw-noto-bold);
		font-size: 36px;
		line-height: calc(56 / 36);
	}
	.section h3+p {
		text-align: center;
		margin: 27px auto -13px;
		font-size: 24px;
		line-height: calc(50 / 24);
	}

	.item_list {
		align-items: flex-start;
		margin: 0 -20px;
	}
	.item_list li {
		width: 215px;
		margin: 0 20px;
		text-align: center;
		white-space: nowrap;
		letter-spacing: .025em;
		font-size: 24px;
		line-height: 1;
	}
	.item_list figure {
		overflow: hidden;
		margin-bottom: 12px;
		border-radius: 15px;
	}
	.item_list small {
		display: flex;
		justify-content: center;
		margin: 7px 0 -5px;
		font-size: 14px;
		line-height: calc(24 / 14);
	}

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

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

	.fw-bold {
		font-size: var(--fw-noto-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: 118px;
	}

	.parallax_img {
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	.parallax_img>div {
		transform: scale(1.1);
	}

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

	.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_kv
---------------------------------------- */

	#section_kv img {
		width: 100%;
	}


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

	#section_lineup {
		margin-top: 80px;
	}

	#section_lineup .item_list {
		margin-top: 60px;
	}


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

	.section_detail {
		overflow: hidden;
		font-weight: var(--fw-noto-semibold);
	}

	.section_detail .title_en {
		position: relative;
		z-index: 1;
	}
	.section_detail .title_en img {
		position: absolute;
		left: 0;
		top: -3px;
	}

	.section_detail .section_inner {
		padding: 120px 0;
	}

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

	.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 {
		box-sizing: border-box;
		width: 50%;
		padding: 55px 30px 0;
	}

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

	.section_detail h4 {
		font-weight: var(--fw-noto-bold);
		font-size: 22px;
		line-height: 1;
	}
	.section_detail h4 small {
		display: inline-block;
		margin-left: 5px;
		vertical-align: bottom;
		font-size: 12px;
	}
	.section_detail h4+p {
		margin: 22px 0 -8px;
		font-size: 14px;
		line-height: calc(30 / 14);
	}
	.section_detail p small {
		display: inline-block;
		margin-top: 15px;
		vertical-align: top;
		font-size: 12px;
		line-height: calc(22 / 12);
	}

	.section_detail .block .sub_img {
		width: 460px;
		margin-top: 50px;
	}
	.section_detail .block .sub_img>ul {
		width: 460px;
		justify-content: space-between;
	}
	.section_detail .block .sub_img>ul li {
		width: 220px;
	}

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

	.section_detail .block .sub_img .parallax_img {
		height: 250px;
	}

	/* sub_img_slider */

	.section_detail .sub_img_slider_dots {
		opacity: 0;
		position: absolute;
		left: 0;
		top: 20px;
		width: 50%;
		margin-top: max(350px, 50% * 350 / 640);
		transition: .75s opacity;
	}

	.section_detail .anim_end+.sub_img_slider_dots {
		opacity: 1;
	}

	.section_detail .rev .sub_img_slider_dots {
		left: 50%;
	}

	.section_detail .sub_img_slider_dots .slick-list {
		display: none;
	}

	.section_detail .sub_img_slider_dots .slick-dots {
		display: flex;
		justify-content: center;
	}

	.section_detail .sub_img_slider_dots .slick-dots li {
		width: 20px;
		height: 20px;
	}
	.section_detail .sub_img_slider_dots .slick-dots button,
	.section_detail .sub_img_slider_dots .slick-dots button::before {
		width: 100%;
		height: 100%;
	}
	.section_detail .sub_img_slider_dots .slick-dots button::before {
		background-color: #f2f2f2;
		transition: .2s background-color;
	}
	.section_detail .sub_img_slider_dots .slick-dots li:hover button:before,
	.section_detail .sub_img_slider_dots .slick-dots .slick-active button:before {
		background-color: #666;
	}

/* section_charging
---------------------------------------- */
	
	#section_charging {
		margin-top: 120px;
		background: var(--c-bg-charging);
	}
	#section_charging h3,
	#section_charging h4 {
		color: var(--c-text-charging);
	}

	#section_charging .cable_length>p {
		display: flex;
		justify-content: center;
		margin-bottom: 30px;
		color: var(--c-text-charging);
		font-size: 16px;
		line-height: 1;
	}
	#section_charging .cable_length>p::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		border-bottom: 1px solid;
	}
	#section_charging .cable_length>p span {
		position: relative;
		z-index: 1;
		padding: 0 10px;
		background: var(--c-bg-charging);
	}
	#section_charging .cable_length ul {
		align-items: flex-start;
	}
	#section_charging .cable_length li {
		text-align: center;
		font-size: 12px;
		line-height: 1.5;
	}

	#section_charging .cable_length .img {
		margin-bottom: 7px;
	}

	#section_charging .block02 .sub_img ul {
		justify-content: flex-end;
	}
	#section_charging .block02 .sub_img li {
		position: relative;
	}

	#section_charging .block02 .sub_img .caption {
		position: absolute;
		right: 100%;
		bottom: 0;
		z-index: 1;
		margin-right: 10px;
		white-space: nowrap;
		color: var(--c-text-charging);
		font-size: 16px;
	}

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

	#section_powersupply {
		background: var(--c-bg-powersupply);
	}
	#section_powersupply h3,
	#section_powersupply h4 {
		color: var(--c-text-powersupply);
	}

	#section_powersupply .block01 h4 {
		position: relative;
	}
	#section_powersupply .block01 h4 small {
		position: absolute;
		bottom: -5px;
		line-height: calc(20 / 12);
	}

	#section_powersupply .block02 .contents {
		padding-left: 90px;
	}

	#section_powersupply .block02 .sub_img {
		margin-left: -90px;
		transform: translate(0, 0);
	}

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

/* section_poweroutrage
---------------------------------------- */

	#section_poweroutrage {
		background: var(--c-bg-poweroutrage);
	}
	#section_poweroutrage h3,
	#section_poweroutrage h4 {
		color: var(--c-text-poweroutrage);
	}
	#section_poweroutrage h3+figure {
		width: 980px;
		height: 450px;
		margin: 50px auto 0;
		border-radius: 15px;
	}

	#section_poweroutrage h4 {
		text-align: center;
		font-weight: var(--fw-noto-bold);
		font-size: 36px;
	}

	#section_poweroutrage .item {
		margin-top: 40px;
	}

	#section_poweroutrage .item_list {
		margin-top: 40px;
		font-weight: var(--fw-noto-medium);
	}

	#section_poweroutrage .appliance {
		width: 840px;
		margin: 65px auto 0;
	}
	#section_poweroutrage .appliance ul {
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 40px;
	}
	#section_poweroutrage .appliance li {
		width: 138px;
		text-align: center;
		white-space: nowrap;
		letter-spacing: .025em;
		color: var(--c-text-poweroutrage);
		font-weight: var(--fw-noto-semibold);
		font-size: 14px;
		line-height: 1;
	}
	#section_poweroutrage .appliance li figure {
		margin: 0 5px 15px;
	}
	#section_poweroutrage .appliance li small {
		display: flex;
		justify-content: center;
		margin-top: 5px;
		color: var(--c-text);
		font-weight: var(--fw-noto-medium);
		font-size: 12px;
	}

	#section_poweroutrage .appliance .note {
		margin-top: 30px;
		text-align: right;
	}

	#section_poweroutrage .appliance .note small {
		margin-top: 0;
		line-height: 1;
	}
}