@charset "utf-8";

@media screen and (max-width : 768px){
	#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-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;
		width: 100%;
	}
	.section h3 {
		margin: calc(-6 / 750 * 100vw) 0;
		text-align: center;
		font-weight: var(--fw-noto-bold);
		font-size: calc(36 / 750 * 100vw);
		line-height: calc(48 / 36);
	}
	.section h3+p {
		text-align: center;
		margin: calc(22 / 750 * 100vw) auto calc(-8 / 750 * 100vw);
		font-size: calc(25 / 750 * 100vw);
		line-height: calc(41 / 25);
	}

	.item_list {
		display: grid;
		grid-template-columns: calc(210 / 750 * 100vw) calc(210 / 750 * 100vw);
		gap: calc(30 / 750 * 100vw) calc(40 / 750 * 100vw);
		width: calc(460 / 750 * 100vw);
		margin: auto;
	}
	.item_list li {
		text-align: center;
		white-space: nowrap;
		letter-spacing: .025em;
		font-size: calc(20 / 750 * 100vw);
		line-height: 1;
	}
	.item_list figure {
		overflow: hidden;
		margin-bottom: calc(20 / 750 * 100vw);
		border-radius: calc(10 / 750 * 100vw);
	}
	.item_list small {
		display: flex;
		justify-content: center;
		margin: calc(6 / 750 * 100vw) 0 calc(-4 / 750 * 100vw);
		font-size: calc(16 / 750 * 100vw);
		line-height: calc(24 / 16);
	}

	.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*='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']){
		transform: none !important;
	}
	.anim_ready .scroll_fix.fixed>* {
		position: fixed;
		left: 0;
		top: 86px;
	}

	.parallax_img {
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	.parallax_img>div {
		transform: scale(1.1);
	}
	.parallax_img img {
		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_lineup
---------------------------------------- */

	#section_lineup {
		margin-top: calc(60 / 750 * 100vw);
	}

	#section_lineup .item_list {
		margin-top: calc(40 / 750 * 100vw);
	}


/* ----------------------------------------
	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: -1px;
	}

	.section_detail .section_inner {
		padding: calc(70 / 750 * 100vw) 0 calc(80 / 750 * 100vw);
	}

	.section_detail .block {
		margin-top: calc(60 / 750 * 100vw);
	}
	.section_detail .block+.block {
		margin-top: calc(80 / 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(380 / 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 {
		font-weight: var(--fw-noto-bold);
		font-size: calc(26 / 750 * 100vw);
		line-height: 1;
	}
	.section_detail h4 small {
		display: inline-block;
		margin-left: calc(6 / 750 * 100vw);
		vertical-align: bottom;
		font-size: calc(14 / 750 * 100vw);
	}
	.section_detail h4+p {
		margin: calc(22 / 750 * 100vw) -.5em calc(-8 / 750 * 100vw) 0;
		letter-spacing: .05em;
		font-size: calc(22 / 750 * 100vw);
		line-height: calc(38 / 22);
	}
	.section_detail p small {
		display: inline-block;
		margin-top: calc(15 / 750 * 100vw);
		vertical-align: top;
		font-size: calc(20 / 750 * 100vw);
		line-height: calc(30 / 20);
	}

	.section_detail .block .sub_img {
		margin-top: calc(45 / 750 * 100vw);
	}
	.section_detail .block .sub_img>ul {
		display: flex;
		justify-content: space-between;
	}
	.section_detail .block .sub_img>ul li {
		width: calc(310 / 750 * 100vw);
	}

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

	.section_detail .block .sub_img .parallax_img {
		width: calc(450 / 750 * 100vw);
		height: calc(242 / 750 * 100vw);
	}

	/* sub_img_slider */

	.section_detail .sub_img_slider,
	.section_detail .sub_img_slider_dots {
		width: calc(700 / 750 * 100vw);
	}

	.section_detail .sub_img_slider_dots {
		opacity: 0;
		margin: calc(20 / 750 * 100vw) 0 0;
		transition: .75s opacity;
	}

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

	.section_detail .rev .sub_img_slider_dots {
		margin-left: calc(50 / 750 * 100vw);
	}

	.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: calc(20 / 750 * 100vw);
		height: calc(20 / 750 * 100vw);
		padding: 0 calc(10 / 750 * 100vw);
	}
	.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: calc(60 / 750 * 100vw);
		background: var(--c-bg-charging);
	}

	#section_charging .title_en img {
		width: calc(524 / 750 * 100vw);
	}

	#section_charging h3,
	#section_charging h4 {
		color: var(--c-text-charging);
	}

	#section_charging .cable_length>p {
		display: flex;
		justify-content: center;
		margin-bottom: calc(30 / 750 * 100vw);
		color: var(--c-text-charging);
		font-size: calc(22 / 750 * 100vw);
		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 calc(30 / 750 * 100vw);
		background: var(--c-bg-charging);
	}
	#section_charging .cable_length ul {
		align-items: flex-start;
	}
	#section_charging .cable_length li {
		text-align: center;
		font-size: calc(20 / 750 * 100vw);
		line-height: 1.5;
	}

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

	#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: calc(25 / 750 * 100vw);
		white-space: nowrap;
		color: var(--c-text-charging);
		font-size: calc(22 / 750 * 100vw);
		line-height: 1;
	}

	#section_charging .block03 .sub_img {
		margin-left: calc(200 / 750 * 100vw);
	}

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

	#section_powersupply {
		background: var(--c-bg-powersupply);
	}

	#section_powersupply .title_en img {
		width: calc(500 / 750 * 100vw);
	}

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

	#section_powersupply .block02 .sub_img {
		transform: translate(0, 0);
	}

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

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

	#section_poweroutrage {
		background: var(--c-bg-poweroutrage);
	}

	#section_powersupply .title_en img {
		width: calc(528 / 750 * 100vw);
	}

	#section_poweroutrage .section_inner {
		padding-bottom: 88px;
	}

	#section_poweroutrage h3,
	#section_poweroutrage h4 {
		color: var(--c-text-poweroutrage);
	}
	#section_poweroutrage h3+figure {
		width: calc(650 / 750 * 100vw);
		height: calc(310 / 750 * 100vw);
		margin: calc(45 / 750 * 100vw) auto 0;
		border-radius: calc(10 / 750 * 100vw);
	}

	#section_poweroutrage h4 {
		text-align: center;
		font-weight: var(--fw-noto-bold);
		font-size: calc(36 / 750 * 100vw);
	}

	#section_poweroutrage .item {
		margin-top: calc(40 / 750 * 100vw);
	}

	#section_poweroutrage .item_list {
		margin-top: calc(30 / 750 * 100vw);
		font-weight: var(--fw-noto-medium);
	}

	#section_poweroutrage .appliance {
		margin-top: calc(55 / 750 * 100vw);
	}
	#section_poweroutrage .appliance ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}
	#section_poweroutrage .appliance li {
		width: calc(213 / 750 * 100vw);
		margin-top: calc(30 / 750 * 100vw);
		text-align: center;
		white-space: nowrap;
		letter-spacing: .025em;
		color: var(--c-text-poweroutrage);
		font-weight: var(--fw-noto-semibold);
		font-size: calc(18 / 750 * 100vw);
		line-height: 1;
	}
	#section_poweroutrage .appliance li figure {
		margin: 0 calc(45 / 750 * 100vw) calc(18 / 750 * 100vw);
	}
	#section_poweroutrage .appliance li small {
		display: flex;
		justify-content: center;
		margin-top: calc(15 / 750 * 100vw);
		color: var(--c-text);
		font-weight: var(--fw-noto-medium);
		font-size: calc(14 / 750 * 100vw);
	}

	#section_poweroutrage .appliance .note {
		width: calc(650 / 750 * 100vw);
		margin: calc(40 / 750 * 100vw) auto 0;
		text-align: right;
	}

	#section_poweroutrage .appliance .note small {
		margin-top: 0;
		font-size: calc(18 / 750 * 100vw);
		line-height: 1;
	}
}