@charset "utf-8";

#contents_area {
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--c-text: #4d4d4d;
	--c-blue: #53a3bd;
	--c-bg-style: #666;
	--c-bg-items: #d7e1e1;
}

@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-medium);
		font-size: 16px;
		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-regular {
		font-weight: var(--fw-regular);
	}

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

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

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

	.section h3 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.section h3::after {
		content: '';
		display: block;
		width: 100px;
		height: 3px;
		margin: 60px auto;
		background: var(--c-blue);
	}

	.section_inner {
		width: 980px;
		margin: auto;
	}

	.bg_img {
		background: url(../img/bg_texture.jpg) 50% 0 / cover no-repeat;
	}

	#contents_area .btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 312px;
		height: 40px;
		margin: auto;
		border-radius: 20px;
		background: var(--c-blue);
		color: #fff;
		font-size: 16px;
	}
	.section .btn::after {
		content: '';
		display: block;
		width: 9px;
		height: 100%;
		margin-left: 12px;
		background: url(../img/btn_arrow.svg) 50% 50% / contain no-repeat;
	}


/* ----------------------------------------
	section_kv
---------------------------------------- */

	#section_kv {
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		max-height: calc(100vh - 222px);
	}
	#section_kv>div {
		width: 100%;
		aspect-ratio: 16 / 9;
	}
	#section_kv video {
		display: block;
		width: 100%;
	}


/* ----------------------------------------
	section_movie
---------------------------------------- */

	#section_movie {
		padding-top: 80px;
	}

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


/* ----------------------------------------
	section_charging
---------------------------------------- */

	#section_charging {
		padding: 200px 0 120px;
	}

	#section_charging .bnr {
		display: block;
	}

	#section_charging .btn {
		position: absolute;
		left: 50%;
		bottom: 25px;
		transform: translateX(-50%);
	}


/* ----------------------------------------
	section_style
---------------------------------------- */

	#section_style {
		padding: 80px 0;
		background: var(--c-bg-style);
	}
	#section_style h3::after {
		display: none;
	}
	#section_style h3+p {
		display: flex;
		justify-content: center;
		margin-top: 25px;
	}
	#section_style ul {
		position: relative;
		margin-top: 35px;
		padding-top: 46px;
		height: 383px;
		background: #b3b3b3;
	}
	#section_style li {
		position: relative;
		z-index: 1;
	}

	#section_style .on {
		z-index: 2;
	}

	#section_style li a {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		transition: .3s;
	}
	#section_style li a:hover {
		opacity: 1;
	}

	#section_style .name {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		width: 326px;
		height: 46px;
		transform: translateY(-100%);
		transition: .3s background-color;
	}
	#section_style .name::after {
		content: '';
		display: block;
		width: 15px;
		height: 100%;
		margin-left: 15px;
		background: url(../img/style_btn_arrow.svg) 50% 50% / contain no-repeat;
	}

	#section_style .premium.on .name {
		background: #003567;
	}

	#section_style .sporty .name {
		left: 326px;
		border: solid #fff;
		border-width: 0 1px;
	}

	#section_style .sporty.on .name {
		background: #53a5be;
	}

	#section_style .casual .name {
		left: auto;
		right: 0;
	}

	#section_style .casual.on .name {
		background: #78a5c8;
	}

	#section_style .img {
		opacity: 0;
		transition: .3s opacity;
	}

	#section_style .on .img {
		opacity: 1;
	}


/* ----------------------------------------
	section_sustainable
---------------------------------------- */

	#section_sustainable .bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
	}
	#section_sustainable .bg::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
	}
	#section_sustainable .bg video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#section_sustainable .link {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 730px;
	}

	#section_sustainable .text {
		margin-top: 65px;
	}

	#section_sustainable .btn {
		margin: 60px 0 0;
	}


/* ----------------------------------------
	section_convenient
---------------------------------------- */

	#section_convenient {
		padding: 120px 0;
	}
	#section_convenient ul {
		display: grid;
		grid-template-columns: repeat(2, 465px);
		gap: 60px 50px;
	}
	#section_convenient li {
		display: flex;
		flex-direction: column;
		position: relative;
	}
	#section_convenient h4 {
		margin-top: 20px;
		font-weight: var(--fw-semibold);
		font-size: 20px;
		line-height: 1;
	}
	#section_convenient p {
		margin: 16px 0 -4px;
		font-weight: var(--fw-regular);
		line-height: calc(24 / 16);
	}
	#section_convenient a {
		display: flex;
		align-items: center;
		align-self: center;
		margin-top: 40px;
		color: var(--c-blue);
		font-size: 17px;
	}
	#section_convenient a::after {
		content: '';
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-left: 1em;
		background: url(../img/convenient_btn_arrow.svg) 50% 50% / contain no-repeat;
	}
	#section_convenient li small {
		position: absolute;
		right: 0;
		top: 290px;
		font-size: 14px;
		line-height: 1;
	}

	#section_convenient .note {
		margin-top: 60px;
		font-size: 14px;
		line-height: 1.5;
	}


/* ----------------------------------------
	section_items
---------------------------------------- */

	#section_items {
		padding: 80px 0 100px;
		background: var(--c-bg-items);
	}

	#section_items .item_list {
		display: grid;
		grid-template-columns: repeat(2, 475px);
		gap: 25px 30px;
	}
	#section_items .item_list>li {
		background: rgba(255,255,255,.75);
	}
	#section_items .item_list a {
		align-items: flex-start;
		position: relative;
		color: var(--c-text);
	}

	#section_items .item_list .img {
		overflow: hidden;
		position: relative;
		width: 155px;
	}
	#section_items .item_list .img img {
		transition: .3s transform ease-out;
	}
	#section_items .item_list a:hover .img img {
		transform: scale(1.05);
	}

	#section_items .item_list .box {
		padding: 10px 10px;
		width: calc(100% - 155px);
		box-sizing: border-box;
	}

	#section_items .item_list h4 {
		font-size: 18px;
		line-height: 1.7;
	}

	#section_items .item_list .link {
		position: absolute;
		right: 8px;
		bottom: 8px;
		font-weight: var(--fw-regular);
		font-size: 14px;
	}
	#section_items .item_list .link::after {
		content: "";
		display: inline-block;
		position: relative;
		top: 4px;
		width: 18px;
		height: 20px;
		margin-left: 10px;
		background: url(../img/parts_ico_red_arrow.png) 50% 50% / 100% no-repeat;
	}

	#section_items .bnr_a-collect {
		width: 700px;
		margin: 100px auto 0;
	}


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

	#section_notes {
		padding: 30px 0 80px;
	}
	#section_notes li {
		font-size: 12px;
		line-height: 1.5;
	}


/* ----------------------------------------
	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%;
	}
}