@charset "UTF-8";
/* CSS Document */

/* =============================================
	common
============================================= */

@media screen and (max-width: 767px) {
	.pcOnly {
		display: none!important;
	}
}
@media only screen and (min-width: 768px) {
	.spOnly {
		display: none!important;
	}
}

/*========== pc ==========*/

.brand-vi {
	color: #4d4d4d!important;
	background-color: #ffffff!important;
	font-family: 'Noto Sans JP', sans-serif!important;
	font-size: 16px!important;
	line-height: 2!important;
	font-weight: 400!important;
	position: relative!important;
	padding-bottom: 200px;
	position: static!important;
}
.brand-vi ::selection {
	background-color: #007B94!important;
}
.brand-vi_inner {
	max-width: 740px!important;
	margin: 0 auto!important;
	padding: 0 20px!important;
}

/*========== sp ==========*/

@media screen and (max-width: 767px) {
	.brand-vi {
		padding-bottom: 120px;
	}
	.brand-vi_inner {
		max-width: 100%!important;
	}
	.brWrapper .brContainer {
		padding: 0!important;
	}
}

/* =============================================
	KV
============================================= */

/*========== pc ==========*/

.brand-vi_kv {
	max-height: 768px!important;
	height: 90vh!important;
	position: relative!important;
}
.brand-vi_h1 {
	position: absolute!important;
	left: 20px!important;
	width: 74%!important;
	top: 46%!important;
}
.brand-vi_kv_txt {
	font-size: 20px;
	line-height: 2.5;
	position: absolute;
	top: 58%;
	left: 20px;
}
.brand-vi_kv_btn {
	left: auto!important;
	right: 20px;
	top: 84%!important;
}
.brand-vi_kv_btn button {
	font-size: 16px!important;
	font-weight: 700!important;
	color: #4d4d4d!important;
	background-color: #ffffff!important;
	padding: 8px 48px 8px 32px!important;
	border: 1px solid #D1D1D1!important;
	border-radius: 60px!important;
	position: relative!important;
	width: auto!important;
}
.brand-vi_kv_btn button:visited {
	color: #4d4d4d!important;
}
.brand-vi_kv_btn button:hover {
	text-decoration: none!important;
	color: #4d4d4d!important;
	opacity: 0.7!important;
}
.brand-vi_kv_btn button::after {
	position: absolute!important;
	content: ""!important;
	width: 12px!important;
	height: 12px!important;
	top: 38%!important;
	right: 20px!important;
	bottom: auto!important;
	background-image: url(/content/dam/au-com/brand/img/vi/icon_01.svg)!important;
	background-repeat: no-repeat!important;
	background-position: 0 0!important;
	background-size: 12px 12px!important;
}

/*========== sp ==========*/

@media screen and (max-width: 767px) {
	.brand-vi_kv {
		min-height: 100%!important;
		height: 80vh!important;
	}
	.brand-vi_h1 {
		width: 86%!important;
		right: auto!important;
		left: 20px!important;
		top: 40%!important;
	}
	.brand-vi_kv_txt {
		font-size: 16px!important;
		top: 54%!important;
		padding-right: 20px;
	}
	.brand-vi_kv_btn {
		left: auto!important;
		right: 20px!important;
		top: 84%!important;
	}
	.brand-vi_kv_btn button {
		font-size: 14px!important;
		padding: 8px 40px 8px 24px!important;
	}
}

/* =============================================
	Contents
============================================= */

/*========== pc ==========*/

.brWrapper .brTogether,
.brWrapper .brHistory {
	padding: 0!important;
	margin: 0!important;
}
.brWrapper .brConnected {
	margin: 0!important;
	padding: 0 0 43px!important;
}
.brWrapper .brTogether::before,
.brWrapper .brTogether::after,
.brWrapper .brConnected::after {
	content: none!important;
}
.brand-vi_ttl {
	margin-top: 280px!important;
	margin-bottom: 200px!important;
	position: relative!important;
}
.brand-vi_ttl.-right .brand-vi_h2,
.brand-vi_ttl.-right p {
	text-align: right!important;
	color: #4d4d4d!important;
}
.brand-vi_h2 {
	font-size: 32px!important;
	font-weight: 700!important;
	text-align: left!important;
	margin: 0!important;
	width: auto!important;
}
.brand-vi_ttl p {
	margin-top: 20px!important;
	text-align: left!important;
	position: relative;
	z-index: 1;
}
.brand-vi_section {
	margin-top: 80px!important;
	position: relative!important;
}
.brand-vi_section p {
	margin-top: 20px!important;
	text-align: left!important;
	position: relative;
	z-index: 1;
}
.brand-vi_h3 {
	font-size: 26px!important;
	font-weight: 700!important;
	margin-bottom: 50px!important;
	text-align: center!important;
	position: relative!important;
}
.brand-vi_h3::after {
	position: absolute;
	content: "";
	background-color: #007B94;
	border-radius: 20px;
	height: 2px;
	width: 44px;
	bottom: -8px;
	left: calc(100% / 2 - 20px);
}
.brand-vi_btn {
	margin: 40px 0 0!important;
	text-align: right!important;
}
.brand-vi_btn a {
	font-size: 16px!important;
	font-weight: 700!important;
	color: #4d4d4d!important;
	background-color: #ffffff!important;
	padding: 8px 48px 8px 32px!important;
	border: 1px solid #D1D1D1!important;
	border-radius: 60px!important;
	position: relative!important;
	width: auto!important;
}
.brand-vi_btn a:visited {
	color: #4d4d4d!important;
}
.brand-vi_btn a:hover {
	text-decoration: none!important;
	color: #4d4d4d!important;
	opacity: 0.7!important;
}
.brand-vi_btn a::after {
	position: absolute!important;
	content: ""!important;
	width: 12px!important;
	height: 12px!important;
	top: 38%!important;
	bottom: auto!important;
	right: 20px!important;
	background-image: url(/content/dam/au-com/brand/img/vi/icon_02.svg)!important;
	background-repeat: no-repeat!important;
	background-position: 0 0!important;
	background-size: 12px 12px!important;
}
.brand-vi_h4 {
	font-size: 22px!important;
	font-weight: 700!important;
	text-align: center!important;
}


/*========== sp ==========*/

@media screen and (max-width: 767px) {
	.brand-vi_ttl {
		margin-top: 240px!important;
		margin-bottom: 100px!important;
	}
	.brand-vi_h2 {
		line-height: 1.5!important;
	}
	.brand-vi_h3 {
		font-size: 24px!important;
		line-height: 1.5!important;
	}
	.brand-vi_btn a {
		padding: 8px 40px 8px 24px!important;
	}
}

/* =============================================
	Background image
============================================= */

/*========== pc ==========*/

.brand-vi_bg {
	position: relative!important;
}
.brand-vi_bg01 {
	position: absolute!important;
	z-index: 0!important;
	right: 3vw!important;
	top: 20px!important;
	height: fit-content;
	max-width: 440px!important;
	width: 38vw!important;
}
.brand-vi_bg02 {
	position: absolute!important;
	z-index: 0!important;
	left: 3vw!important;
	top: 13vh!important;
	height: fit-content!important;
	max-width: 130px!important;
	min-width: 60px!important;
	width: 9vw!important;
}
.brand-vi_bg03 {
	position: absolute!important;
	z-index: 0!important;
	left: 11vw!important;
	top: 76vh!important;
	height: fit-content!important;
	width: 5vw!important;
	min-width: 60px!important;
}
.brand-vi_bg04 {
	position: absolute!important;
	z-index: 0!important;
	right: 11vw!important;
	top: -15vh!important;
	height: fit-content!important;
	width: 280px!important;
}
.brand-vi_bg05 {
	position: absolute!important;
	z-index: 0!important;
	left: 8vw!important;
	top: 0vh!important;
	height: fit-content!important;
	width: 280px!important;
}
.brand-vi_bg06 {
	position: absolute!important;
	z-index: 0!important;
	right: -4vw!important;
	top: -8vh!important;
	height: fit-content!important;
	width: 80px!important;
}
.brand-vi_bg07 {
	position: absolute!important;
	z-index: 0!important;
	right: -4vw!important;
	top: -15vh!important;
	height: fit-content!important;
	width: 280px!important;
}
.brand-vi_bg08 {
	position: absolute!important;
	z-index: 0!important;
	left: -5vw!important;
	top: -15vh!important;
	height: fit-content!important;
	width: 80px!important;
}

/*========== sp ==========*/

@media screen and (max-width: 767px) {
	.brand-vi_bg01 {
		right: -8vw!important;
		top: 4px!important;
		width: 58vw!important;
	}
	.brand-vi_bg02 {
		top: 19vh!important;
		min-width: 80px!important;
	}
	.brand-vi_bg03 {
		left: 26px!important;
	}
	.brand-vi_bg04 {
		right: -20px!important;
		top: -19vh!important;
		width: 50vw!important;
	}
	.brand-vi_bg05 {
		left: -6vw!important;
		top: 16vh!important;
		width: 38vw!important;
	}
	.brand-vi_bg06 {
		right: 1vw!important;
		top: -9vh!important;
		width: 60px!important;
	}
	.brand-vi_bg07 {
		right: -4vw!important;
		top: -24vh!important;
		width: 54vw!important;
	}
}

/* =============================================
	Carousel
============================================= */

/*========== pc ==========*/

.brWrapper #connected .slick-dots .slick-active button {
	background: #007B94!important;
}
.brWrapper #connected .slick-dots li {
	transform: none!important;
	margin: 0 12px!important;
}
.brWrapper #connected .slick-dots li button {
	background: #CCCCCC!important;
}
.brWrapper #connected .slick-dots li,
.brWrapper #connected .slick-dots li button {
	width: 10px!important;
	height: 10px!important;
	transition: none!important;
	border-radius: 20px!important;
}
.brand-vi_carousel {
	margin-top: 40px!important;
}
.brand-vi_carousel_txt {
	margin-top: 12px;
}

/* =============================================
	Modal
============================================= */

/*========== pc ==========*/

.brModal,
.brWrapper .brStatement-bg {
	top: 0!important;
	height: 100%!important;
}
.brand-vi_statement {
	background: #ffffff!important;
}
.brand-vi_statement_wrap {
	color: #4d4d4d!important;
	font-size: 24px!important;
	line-height: 2.5!important;
	letter-spacing: 0.1em!important;
	text-shadow: 1px 1px 0 #fafafa, -1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px -1px 0 #fafafa, 1px 0 0 #fafafa, -1px 0 0 #fafafa, 0 1px 0 #fafafa, 0 -1px 0 #fafafa;
}
.brWrapper .brStatement-bg.-img01.brand-vi_statement_bg01 {
	background-image: url(/content/dam/au-com/brand/img/vi/bg_08_pc.png?scl=1&fmt=png-alpha)!important;
}
.brWrapper .brStatement-bg.-img02.brand-vi_statement_bg02 {
	background-image: url(/content/dam/au-com/brand/img/vi/bg_09_pc.png?scl=1&fmt=png-alpha)!important;
}
.brWrapper .brStatement-bg.-img03.brand-vi_statement_bg03 {
	background-image: url(/content/dam/au-com/brand/img/vi/bg_10_pc.png?scl=1&fmt=png-alpha)!important;
}
.-statement .brModal-close.brand-vi_statement_close {
	background: rgba(0, 0, 0, 0.3) !important;
}
.brWrapper .brStatement_copy.brand-vi_statement_copy {
	margin-top: 80px!important;
	width: 60%!important;
}

/*========== sp ==========*/

@media screen and (max-width: 767px) {
	.brWrapper .brStatement {
		padding-top: 80px!important;
	}
	.brand-vi_statement_wrap {
		font-size: 4.26667vw!important;
	}
	.brWrapper .brStatement-bg.-img01.brand-vi_statement_bg01 {
		background-image: url(/content/dam/au-com/brand/img/vi/bg_08_sp.png?scl=1&fmt=png-alpha)!important;
	}
	.brWrapper .brStatement-bg.-img02.brand-vi_statement_bg02 {
		background-image: url(/content/dam/au-com/brand/img/vi/bg_09_sp.png?scl=1&fmt=png-alpha)!important;
	}
	.brWrapper .brStatement-bg.-img03.brand-vi_statement_bg03 {
		background-image: url(/content/dam/au-com/brand/img/vi/bg_10_sp.png?scl=1&fmt=png-alpha)!important;
	}
	.brWrapper .brStatement_copy.brand-vi_statement_copy {
		width: 100%!important;
	}
}

/* =============================================
微調整
============================================= */

@media print, screen and (min-width: 540px) and (max-width:767px) {
	.brand-vi_h1 {
		width: 68%!important;
	}
	.brand-vi_bg01 {
		width: 48vw!important;
	}
}
@media screen and (max-width: 280px) {
	.brand-vi_kv_btn {
		top: 94%!important;
	}
}
@media print, screen and (min-width: 768px) and (max-width:880px) {
	.brand-vi_bg04 {
		right: 3vW!important;
	}
	.brand-vi_bg05 {
		left: -2vw!important;
	}
}