@charset "UTF-8";

/*----------------------------------------------------
common
----------------------------------------------------*/
.vitoas-brand-wrapper {
	max-width: 1440px;
	margin: 0 auto;
	overflow: hidden;
}

.vitoas-brand-wrapper img {
	width: 100%;
	height: auto;
}

.vitoas-brand-wrapper .pc-view {
	display: none;
}

.vitoas-brand-wrapper .sp-view {
	display: block;
}

.vitoas-brand-wrapper sup {
	font-size: 10px;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .pc-view {
		display: block;
	}

	.vitoas-brand-wrapper .sp-view {
		display: none;
	}

}

/*----------------------------------------------------
layout
----------------------------------------------------*/
.vitoas-brand-wrapper .section-inner {
	padding: 0 10.667vw;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .section-inner {
		padding: 0;
	}

}

/*----------------------------------------------------
about
----------------------------------------------------*/
.vitoas-brand-wrapper .about-vitoas {
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom left;
	padding-bottom: 140px;
	padding-bottom: 37.333vw;
	padding-top: 64px;
	padding-top: 17.067vw;
}

.vitoas-brand-wrapper .about-myperfection {
	background-image: url(../img/myperfection/about_myperfection-bg_sp.png);
}

.vitoas-brand-wrapper .about-cream {
	background-image: url(../img/cream/about-cream-bg_sp.png);
}

.vitoas-brand-wrapper .about-soap {
	background-image: url(../img/soap/about-soap-bg_sp.png);
}

.vitoas-brand-wrapper .about-container {
	display: flex;
	flex-direction: column;
}

.vitoas-brand-wrapper .about-txt-box {
	color: #e84d07;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size: 12px;
	font-weight: 600;
	margin-top: 50px;
}

.vitoas-brand-wrapper .about-txt-box > .about-caption {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	font-size: 14px;
	font-size: 3.733vw;
	margin-top: 24px;
}

.vitoas-brand-wrapper .about-txt-box > .about-heading {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: 27px;
	font-size: 7.2vw;
	font-weight: 600;
	line-height: 1.6;
	margin-top: 5.333vw;
}

.vitoas-brand-wrapper .about-txt-box > .about-txt {
	line-height: 2;
	margin-top: 20px;
	margin-bottom: 10px;
	margin-top: 5.333vw;
	margin-bottom: 2.667vw;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .about-vitoas {
		padding-top: 160px;
		padding-bottom: 360px;
	}

	.vitoas-brand-wrapper .about-myperfection {
		background-image: url(../img/myperfection/about-myperfection-bg.png);
	}

	.vitoas-brand-wrapper .about-cream {
		background-image: url(../img/cream/about-cream-bg.png);
	}

	.vitoas-brand-wrapper .about-soap {
		background-image: url(../img/soap/about-soap-bg.png);
	}

	.vitoas-brand-wrapper .about-container {
		display: flex;
		flex-direction: row;
		gap: 100px;
		/*padding-right: 40px;*/
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .about-txt-en {
		width: 494px;
	}

	.vitoas-brand-wrapper .about-txt-box {
		font-size: 20px;
		margin-top: 50px;
	}

	.vitoas-brand-wrapper .about-txt-box > .about-caption {
		font-size: 28px;
		margin-top: 65px;
	}

	.vitoas-brand-wrapper .about-txt-box > .about-heading {
		font-size: 55px;
		margin-top: 30px;
	}

	.vitoas-brand-wrapper .about-txt-box > .about-txt {
		margin-top: 35px;
		margin-bottom: 10px;
	}

	.vitoas-brand-wrapper .about-fig,
	.vitoas-brand-wrapper .about-txt-area {
		width: 50%;
	}
}


@media screen and (max-width: 768px) {
	.vitoas-brand-wrapper .about-vitoas .section-inner {
		padding-right: 15px;
	}
}

/*----------------------------------------------------
notice
----------------------------------------------------*/
.vitoas-brand-wrapper .notice {
	font-size: 10px;
	font-size: 2.667vw;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-weight: 400;
	line-height: 1.2;
}

.vitoas-brand-wrapper .notice.ctr {
	text-align: center;
}

.vitoas-brand-wrapper .notice.txt-right {
	text-align: right;
}

.vitoas-brand-wrapper .notice-col {
	display: flex;
	flex-wrap: wrap;
}

.vitoas-brand-wrapper .notice.mt10 {
	margin-top: 10px;
}

.vitoas-brand-wrapper .notice-col .notice {
	padding-right: 10px;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .notice {
		font-size: 10px;
	}
}

/*----------------------------------------------------
txt-slide
----------------------------------------------------*/
.vitoas-brand-wrapper .txt-slide-area {
	padding: 0;
}

.vitoas-brand-wrapper .txt-slide {
	font-size: 58px;
	font-family: "Cormorant Garamond", serif;
	color: rgba(196, 213, 224, 0.4);
	line-height: 1;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .txt-slide-area {}

	.vitoas-brand-wrapper .txt-slide {
		font-size: 116px;
	}
}

/*----------------------------------------------------
recommend
----------------------------------------------------*/
.vitoas-brand-wrapper .sec-recommend {
	background-image: url(../img/cream/recommend-bg_sp.png);
	background-size: cover;
	padding: 120px 40px 190px;
	padding: 32vw 10.667vw 50.667vw;
	margin-top: -8%;
	position: relative;
}

.vitoas-brand-wrapper .recommend-bottle {
	position: absolute;
	width: 120px;
	width: 64vw;
	top: -11%;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.vitoas-brand-wrapper .recommend-ttl {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-weight: 700;
	font-size: 16px;
	font-size: 4.267vw;
	line-height: 1.5;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

.vitoas-brand-wrapper .recommend-ttl > strong {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	display: block;
	font-size: 1.6em;
	font-weight: 600;
}

.vitoas-brand-wrapper .recommend-box {
	position: relative;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-weight: 700;
	font-size: 14px;
	font-size: 3.733vw;
	border: 1px solid #ffffff;
	border-radius: 25px;
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	padding: 30px 20px;
	padding: 8vw 5.333vw;
	margin: 14px 0;
}

.vitoas-brand-wrapper .recommend-box::before,
.vitoas-brand-wrapper .recommend-box::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 8px;
	height: 44px;
	width: 2.133vw;
	height: 11.733vw;
	margin: auto 0;
}

.vitoas-brand-wrapper .recommend-box::before {
	background-image: url(../img/cream/check-txt01.png);
	background-size: cover;
	left: -16px;
}

.vitoas-brand-wrapper .recommend-box::after {
	background-image: url(../img/cream/check-txt02.png);
	background-size: cover;
	right: -16px;
}

.vitoas-brand-wrapper ul.recommend-list {
	display: flex;
	flex-direction: column;
	gap: 17px;
	gap: 4.533vw;
}

.vitoas-brand-wrapper ul.recommend-list li {
	position: relative;
	padding-bottom: 17px;
	padding-bottom: 4.533vw;
	border-bottom: 1px solid #ffffff;
}

.vitoas-brand-wrapper ul.recommend-list li .recommend-txt {
	position: relative;
	color: #ffffff;
	line-height: 1.5;
	padding-left: 26px;
	padding-left: 6.933vw;
}

.vitoas-brand-wrapper ul.recommend-list li .recommend-txt::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../img/cream/check-icon.png);
	background-size: cover;
	width: 13px;
	height: 13px;
	width: 3.8vw;
	height: 3.8vw;
}

.vitoas-brand-wrapper .recommend-summary {
	color: #ffffff;
	text-align: center;
	font-size: 14px;
	font-size: 3.733vw;
	font-weight: 700;
	line-height: 1.8;
}

.vitoas-brand-wrapper .sec-recommend.sec-recommend-myperfection {
	padding-top: 160px;
	padding-top: 42.667vw;
}

.vitoas-brand-wrapper .sec-recommend.bg-s {
	background-image: url(../img/cream/recommend-bg-s_sp.png);
}

.vitoas-brand-wrapper .sec-recommend.sec-recommend-soap {
	padding-top: 24vw;
}

.vitoas-brand-wrapper .sec-recommend.sec-recommend-soap .recommend-bottle {
	top: -15%;
}

.vitoas-brand-wrapper .soap-recommend-notice {
	padding: 0 20px;
	margin-top: 20px;
	padding: 0 5.333vw;
	margin-top: 5.333vw;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .sec-recommend {
		background-image: url(../img/cream/recommend-1440-bg.png);
		background-size: cover;
		padding: 220px 40px;
		margin-top: -9%;
	}

	.vitoas-brand-wrapper .sec-recommend.bg-s {
		background-image: url(../img/cream/recommend-1440-s-bg.png);
		background-size: cover;
		padding: 220px 40px 400px;
		margin-top: -9%;
	}

	.vitoas-brand-wrapper .sec-recommend.sec-recommend-cream {
		padding-bottom: 440px;
	}
	.vitoas-brand-wrapper .sec-recommend-inner {
		max-width: 900px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .recommend-bottle {
		width: 480px;
		height: 480px;
	}

	.vitoas-brand-wrapper .recommend-ttl {
		font-size: 30px;
	}

	.vitoas-brand-wrapper .recommend-box {
		font-size: 28px;
		padding: 80px 60px;
		border-radius: 50px;
		margin: 36px 0;
	}

	.vitoas-brand-wrapper ul.recommend-list {
		gap: 30px;
	}

	.vitoas-brand-wrapper ul.recommend-list li {
		padding-bottom: 30px;
	}

	.vitoas-brand-wrapper ul.recommend-list li .recommend-txt {
		padding-left: 32px;
	}

	.vitoas-brand-wrapper ul.recommend-list li .recommend-txt::before {
		top: 8px;
		width: 26px;
		height: 26px;
	}

	.vitoas-brand-wrapper .recommend-box::before,
	.vitoas-brand-wrapper .recommend-box::after {
		width: 20px;
		height: 110px;
	}

	.vitoas-brand-wrapper .recommend-box::before {
		left: -36px;
	}

	.vitoas-brand-wrapper .recommend-box::after {
		right: -36px;
	}

	.vitoas-brand-wrapper .recommend-summary {
		font-size: 28px;
	}

	.vitoas-brand-wrapper .sec-recommend.sec-recommend-myperfection {
		padding-top: 320px;
	}

	.vitoas-brand-wrapper .sec-recommend.sec-recommend-soap {
		padding-top: 220px;
	}

	.vitoas-brand-wrapper .soap-recommend-notice {
		padding: 0;
		margin-top: 60px;
	}
}

/*@media screen and (min-width: 1400px) {
.vitoas-brand-wrapper .sec-recommend {
background-size: contain;
background-repeat: repeat-x;
}
}*/

@media screen and (max-width: 768px) {
	.vitoas-brand-wrapper .sec-recommend-cream {
		padding: 120px 40px 220px;
		padding: 32vw 10.667vw 58.667vw;
	}
}

/*----------------------------------------------------
recommend-02
----------------------------------------------------*/
.vitoas-brand-wrapper .sec-recommend-02 {
	background-image: url(../img/cream/recommend-02-bg_sp.jpg);
	background-size: cover;
	padding-bottom: 98px;
	padding-bottom: 26.133vw;
	position: relative;
}

.vitoas-brand-wrapper .recommend-02-ttl {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	font-size: 20px;
	font-size: 5.333vw;
	text-align: center;
}

.vitoas-brand-wrapper .recommend-02-ttl > strong {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	display: block;
	font-size: 1.6em;
}

.vitoas-brand-wrapper .recommend-02-ttl .notice {
	text-align: center;
}

.vitoas-brand-wrapper .recommend-02-card {
	margin-top: 50px;
	margin-top: 13.333vw;
	border: 2px solid #ffffff;
	border-radius: 25px;
	padding: 60px 0;
	padding: 16vw 0;
}

.vitoas-brand-wrapper .recommend-02-card-ttl {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	font-size: 20px;
	font-size: 5.333vw;
	text-align: center;
}

.vitoas-brand-wrapper .recommend-02-card-ttl > strong {
	font-size: 1.6em;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
}

.vitoas-brand-wrapper .recommend-02-card-fig-01 {
	margin-right: 14px;
	margin-right: 3.733vw;
}

.vitoas-brand-wrapper .recommend-02-banner {
	margin-top: 60px;
	margin-top: 16vw;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .sec-recommend-02 {
		background-image: url(../img/cream/recommend-02-bg.jpg);
		padding: 100px 80px 160px;
		padding-bottom: 160px;
	}

	.vitoas-brand-wrapper .recommend-02-ttl {
		font-size: 40px;
		line-height: 1.8;
	}

	.vitoas-brand-wrapper .recommend-02-card {
		max-width: 1100px;
		border-radius: 50px;
		padding: 70px;
		margin: 0 auto;
		margin-top: 60px;
	}

	.vitoas-brand-wrapper .recommend-02-card-fig-01 {
		margin-right: 0;
		margin-left: -150px;
	}

	.vitoas-brand-wrapper .recommend-02-card-fig-01.mr {
		margin-left: 0;
		margin-right: -150px;
	}

	.vitoas-brand-wrapper .recommend-02-banner {
		max-width: 1100px;
		margin: 0 auto;
		margin-top: 75px;
	}

	.vitoas-brand-wrapper .recommend-02-card-fig-01.oil-awa {
		margin-left: -10%;
		margin-right: -10%;
		width: 100%;
		width: calc(100% + 35.3%);
	}

	.vitoas-brand-wrapper .recommend-02-card-fig-01.w-use-fig {
		margin-right: 0;
		margin-left: -20%;
	}
}

/*----------------------------------------------------
kaori
----------------------------------------------------*/
.vitoas-brand-wrapper .kaori {
	background-image: url(../img/soap/kaori-bg_sp.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 65px 14px;
	padding: 17.333vw 3.733vw;
}

.vitoas-brand-wrapper .kaori-ttl {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size: 19px;
	font-size: 5.067vw;
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	margin-bottom: 17px;
	margin-bottom: 4.533vw;
}

.vitoas-brand-wrapper .kaori-box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 17px;
	gap: 4.533vw;
	border: 1px solid #ffffff;
	border-radius: 25px;
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	padding: 30px 20px;
	padding: 8vw 5.333vw;
}

.vitoas-brand-wrapper .kaori-txt {
	text-align: center;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 700;
	color: #ffffff;
	font-size: 27px;
	font-size: 7.2vw;
	line-height: 1.75;
}

.vitoas-brand-wrapper .kaori-txt > span {
	display: block;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size: 14px;
	font-size: 3.733vw;
}

.vitoas-brand-wrapper .kaori-fig {
	width: 65%;
	text-align: center;
	margin: 0 auto;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .kaori {
		background-image: url(../img/soap/kaori-bg.jpg);
		padding: 100px 40px;
	}

	.vitoas-brand-wrapper .kaori-ttl {
		font-size: 32px;
		margin-bottom: 25px;
	}

	.vitoas-brand-wrapper .kaori-box {
		max-width: 1100px;
		flex-direction: row;
		gap: 40px;
		align-items: center;
		padding: 30px 120px;
		border-radius: 50px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.vitoas-brand-wrapper .kaori-txt {
		font-size: 45px;
	}

	.vitoas-brand-wrapper .kaori-txt > span {
		font-size: 23px;
	}

	.vitoas-brand-wrapper .kaori-fig {
		width: 288px;
	}
}

/*----------------------------------------------------
how to
----------------------------------------------------*/
.vitoas-brand-wrapper .howto {
	background-color: #e84d07;
	padding: 74px 5px;
}

.vitoas-brand-wrapper .ttl-howto {
	font-family: "Cormorant Garamond", serif;
	color: #ffffff;
	font-size: 30px;
	font-size: 8vw;
	text-align: center;
	margin-bottom: 20px;
	margin-bottom: 5.333vw;
}

.vitoas-brand-wrapper .card-howto {
	background-color: #ffffff;
	border-radius: 18px;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size: 13px;
	font-size: 3.2vw;
	font-weight: 700;
	padding: 25px 35px;
	padding: 6.667vw 9.333vw;
	box-sizing: border-box;
}

.vitoas-brand-wrapper .howto-ttl {
	color: #e84d07;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 19px;
	font-size: 5.087vw;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 18px;
	margin-bottom: 5.087vw;
}

.vitoas-brand-wrapper .howto-txt {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-weight: 700;
	font-size: 13px;
	font-size: 3.2vw;
	line-height: 1.8;
	margin-top: 15px;
	margin-top: 4vw;
}


@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .howto {
		padding: 140px 40px;
	}

	.vitoas-brand-wrapper .howto-inner {
		max-width: 988px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .ttl-howto {
		font-size: 50px;
		margin-bottom: 40px;
	}

	.vitoas-brand-wrapper .card-howto {
		border-radius: auto;
		padding: 0;
	}

	.vitoas-brand-wrapper .howto-ttl {
		font-size: 22px;
		margin-bottom: 24px;
	}

	.vitoas-brand-wrapper .howto-txt {
		font-size: 18px;
		margin-top: 15px;
	}

	.vitoas-brand-wrapper .slider-container {
		display: flex;
		gap: 28px;
		background-color: #fff;
		border-radius: 36px;
		padding: 50px;
	}

	.vitoas-brand-wrapper .slider-arw {
		display: inline-block;
		width: 22px;
		height: 20px;
		border-top: 2px solid #e84d07;
		border-right: 2px solid #e84d07;
		transform: rotate(45deg);
		vertical-align: middle;
		margin-top: 17%;
	}
}

@media screen and (max-width: 768px) {
	.vitoas-brand-wrapper .howto {
		overflow-x: clip;
		overflow-y: visible;
	}
}

/*----------------------------------------------------
cp-banner
----------------------------------------------------*/
.vitoas-brand-wrapper .sec-cp-banner {
	padding: 47px 37px 70px;
	padding: 12.533vw 9.867vw 18.667vw;
}

.vitoas-brand-wrapper .notice.cp-banner {
	padding-top: 10px;
	padding-top: 2.667vw;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .sec-cp-banner {
		max-width: 740px;
		padding: 80px 40px 100px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .notice.cp-banner {
		padding-top: 15px;
	}
}

/*----------------------------------------------------
myperfection-uruoi
----------------------------------------------------*/
.vitoas-brand-wrapper .sec-myperfection-uruoi {
	background-color: #f8f1e9;
	text-align: center;
	padding: 80px 0 34px;
	padding: 21.333vw 0 9.067vw;
}

.vitoas-brand-wrapper .myperfection-uruoi-txt-inner {
	padding: 0 15px;
	padding: 0 4vw;
}

.vitoas-brand-wrapper .myperfection-uruoi-ttl {
	font-size: 27px;
	font-size: 7.2vw;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	color: #e84d07;
	line-height: 1.5;
	margin-bottom: 14px;
}

.vitoas-brand-wrapper .myperfection-uruoi-txt {
	font-size: 16px;
	font-size: 4.267vw;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	line-height: 1.5;
	margin-bottom: 36px;
	margin-bottom: 9.067vw;
}

.vitoas-brand-wrapper .myperfection-uruoi-notice {
	text-align: left;
	padding: 0 34px;
	margin-top: 15px;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .myperfection-uruoi-inner {
		max-width: 1140px;
		margin: 0 auto;
		padding-bottom: 30px;
	}

	.vitoas-brand-wrapper .myperfection-uruoi-txt-inner {
		padding: 0 40px;
	}

	.vitoas-brand-wrapper .myperfection-uruoi-ttl {
		font-size: 55px;
	}

	.vitoas-brand-wrapper .myperfection-uruoi-txt {
		font-size: 30px;
		margin-bottom: 48px;
	}

	.vitoas-brand-wrapper .sec-myperfection-uruoi {
		background-color: #f8f1e9;
		text-align: center;
		padding: 220px 0 150px;
	}
}

/*----------------------------------------------------
oteire
----------------------------------------------------*/
.vitoas-brand-wrapper .sec-oteire {
	position: relative;
	background-image: url(../img/myperfection/oteire-bg_sp.png);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 74px 28px;
	padding: 19.733vw 7.467vw;
	z-index: 1;
}

.vitoas-brand-wrapper .oteire-box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 17px;
	gap: 4.533vw;
	border: 1px solid #ffffff;
	border-radius: 25px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 30px 18px;
	padding: 8vw 4.8vw;
}

.vitoas-brand-wrapper .oteire-ttl {
	text-align: center;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	color: #ffffff;
	font-size: 22px;
	font-size: 5.867vw;
	line-height: 1.6;
	margin-bottom: 20px;
	margin-bottom: 5.333vw;
}

.vitoas-brand-wrapper .oteire-txt {
	text-align: center;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	color: #ffffff;
	font-size: 22px;
	font-size: 5.867vw;
	line-height: 1.75;
}

.vitoas-brand-wrapper .oteire-txt > span {
	display: block;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size: 12px;
	font-size: 3.2vw;
}

.vitoas-brand-wrapper .oteire-fig {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

.vitoas-brand-wrapper .oteire-notice {
	color: #ffffff;
	text-align: right;
	margin-top: 10px;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .sec-oteire {
		background-image: url(../img/myperfection/oteire-bg_2.png);
		background-size: cover;
		padding: 110px 40px 187px;
	}

	.vitoas-brand-wrapper .oteire-box {
		max-width: 1100px;
		flex-direction: row;
		gap: 10px;
		align-items: center;
		border-radius: 50px;
		padding: 50px 58px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .oteire-ttl {
		font-size: 32px;
		margin-bottom: 30px;
	}

	.vitoas-brand-wrapper .oteire-txt {
		font-size: 36px;
		line-height: 1.2;
	}

	.vitoas-brand-wrapper .oteire-txt > span {
		font-size: 19px;
		line-height: 1.8;
		margin-top: 10px;
	}

	.vitoas-brand-wrapper .oteire-fig {
		width: 490px;
	}

	.vitoas-brand-wrapper .oteire-notice {
		max-width: 1100px;
		margin: 0 auto;
	}
}


/*----------------------------------------------------
volume
----------------------------------------------------*/
.vitoas-brand-wrapper .sec-volume {
	position: relative;
	background-image: url(../img/myperfection/volume-bg_sp.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 60px 20px 50px 40px;
	padding: 16vw 5.333vw 19.333vw 10.667vw;
	z-index: 0;
	margin-top: -30px;
	margin-top: -8vw;
	display: flex;
	justify-content: flex-end;
}

.vitoas-brand-wrapper .volume-txt-box {
	color: #e84d07;
	text-align: center;
}

.vitoas-brand-wrapper .volume-txt {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 700;
	font-size: 12px;
	font-size: 3.2vw;
	line-height: 1.6;
	margin-bottom: 6px;
}

.vitoas-brand-wrapper .volume-ttl {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	font-size: 22px;
	font-size: 5.867vw;
	line-height: 1.2;
}

.vitoas-brand-wrapper .volume-ttl > strong {
	font-size: 1.4em;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .sec-volume {
		background-image: url(../img/myperfection/volume-bg.jpg);
		padding: 280px 40px 210px;
		margin-top: -120px;
	}

	.vitoas-brand-wrapper .volume-inner {
		max-width: 1100px;
		margin: 0 auto;
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}

	.vitoas-brand-wrapper .volume-txt {
		font-size: 24px;
		margin-bottom: 6px;
	}

	.vitoas-brand-wrapper .volume-ttl {
		font-size: 50px;
	}
}

/*----------------------------------------------------
howto waave
----------------------------------------------------*/
.vitoas-brand-wrapper .howto.wave {
	position: relative;
	z-index: 1;
}

.vitoas-brand-wrapper .howto.wave::after {
	content: " ";
	display: block;
	position: absolute;
	left: 0;
	top: -14.33vw;
	background-image: url(../img/myperfection/howto-top-bg_sp.png);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 55px;
	height: 14.333vw;
}

.vitoas-brand-wrapper .howto-toptxt {
	position: absolute;
	left: 0;
	right: 0;
	top: -8vw;
	width: 330px;
	width: 88vw;
	margin: 0 auto;
	z-index: 2;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .howto.wave::after {
		left: 0;
		top: -10vw;
		background-image: url(../img/myperfection/howto-bg-top.png);
		background-size: cover;
		width: 100%;
		height: 188px;
	}

	.vitoas-brand-wrapper .howto-toptxt {
		top: -80px;
		width: 820px;
	}
}

@media screen and (min-width: 1440px) {
	.vitoas-brand-wrapper .howto.wave::after {
		top: -150px;
	}
}

/*----------------------------------------------------
polyphenol
----------------------------------------------------*/
.vitoas-brand-wrapper .sec-polyphenol {
	background-color: #f8f1e9;
	padding: 36px 23px 60px;
	padding: 9.6vw 6.133vw 16vw;
}

.vitoas-brand-wrapper .polyphenol-card {
	position: relative;
	background-color: #e1ecef;
	padding: 20px 0;
	padding: 5.333vw 0;
	border-radius: 25px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	gap: 6.4vw;
	box-sizing: border-box;
}

.vitoas-brand-wrapper .polyphenol-card .polyphenol-icon {
	position: absolute;
	top: -4%;
	right: -4%;
	width: 133px;
	height: 137px;
	width: 35.467vw;
	height: 36.533vw;
	display: block;
}

.vitoas-brand-wrapper .polyphenol-contents {
	color: #e84d07;
	display: flex;
	flex-direction: column;
	gap: 24px;
	gap: 6.4vw;
}

.vitoas-brand-wrapper .polyphenol-ttl {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	font-size: 20px;
	font-size: 5.333vw;
	padding: 0 18px;
	line-height: 1.5;
}

.vitoas-brand-wrapper .polyphenol-ttl > strong {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	display: block;
	font-size: 1.4em;
}

.vitoas-brand-wrapper .polyphenol-txt {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-weight: 600;
	font-size: 12px;
	font-size: 3.2vw;
	line-height: 1.6;
	padding: 0 18px;
}

.vitoas-brand-wrapper .polyphenol-notice {
	padding: 0 18px;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .sec-polyphenol {
		padding: 0 40px 140px;
	}

	.vitoas-brand-wrapper .polyphenol-card {
		max-width: 1100px;
		padding: 80px 50px;
		border-radius: 50px;
		flex-direction: row;
		gap: 48px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .polyphenol-card .polyphenol-icon {
		top: -4%;
		right: -4%;
		width: 240px;
		height: 246px;
	}

	.vitoas-brand-wrapper .polyphenol-contents {
		gap: 22px;
	}

	.vitoas-brand-wrapper .polyphenol-ttl {
		font-size: 30px;
		padding: 0;
	}

	.vitoas-brand-wrapper .polyphenol-txt {
		font-size: 18px;
		padding: 0;
	}

	.vitoas-brand-wrapper .polyphenol-notice {
		padding: 0;
	}

	.vitoas-brand-wrapper .polyphenol-fig {
		position: relative;
		margin-left: -21.9%;
		margin-right: 0;
		width: 100%;
	}
}


/*----------------------------------------------------
type
----------------------------------------------------*/
.vitoas-brand-wrapper .sec-type {
	background-image: url(../img/myperfection/type-bg_sp.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	color: #ffffff;
	padding: 50px 14px 294px;
	padding: 13.333vw 3.733vw 78.4vw;
}

.vitoas-brand-wrapper .type-ttl {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	font-size: 16px;
	font-size: 4.267vw;
	line-height: 1.6;
}

.vitoas-brand-wrapper .type-ttl > strong {
	display: block;
	font-size: 1.8em;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
}

.vitoas-brand-wrapper .type-ttl .type-txt-sub {
	font-size: 20px;
	font-size: 5.333vw;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .sec-type {
		background-image: url(../img/myperfection/type-bg.jpg);
		padding: 180px 40px;
	}

	.vitoas-brand-wrapper .sec-type-inner {
		max-width: 1100px;
		display: flex;
		justify-content: flex-end;
	}

	.vitoas-brand-wrapper .type-box {
		margin-right: 0;
	}

	.vitoas-brand-wrapper .type-ttl {
		font-size: 28px;
	}

	.vitoas-brand-wrapper .type-txt-sub {
		font-size: 33px;
	}
}

/*----------------------------------------------------
matrix
----------------------------------------------------*/
.vitoas-brand-wrapper .sec-matrix {
	padding: 50px 38px;
	padding: 13.333vw 10.133vw;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .sec-matrix {
		padding: 96px 40px;
	}

	.vitoas-brand-wrapper .matrix-fig {
		max-width: 960px;
		margin: 0 auto;
	}
}


/*----------------------------------------------------
FAQ
----------------------------------------------------*/
.vitoas-brand-wrapper .mv-brand-vitoas.mv-faq {
	position: relative;
}

.vitoas-brand-wrapper .mv-brand-vitoas.mv-faq .mv-txtbox {
	position: absolute;
	top: 14%;
	right: 10%;
}

.vitoas-brand-wrapper .mv-brand-vitoas.mv-faq .mv-txtbox .mv-faq-heading {
	color: #e84d07;
	font-size: 44px;
	font-size: 11.733vw;
	font-family: "Cormorant Garamond", serif;
	font-weight: 400;
	line-height: 1.3;
}

.vitoas-brand-wrapper .mv-brand-vitoas.mv-faq .mv-txtbox .mv-faq-heading .mv-faq-heading-ja {
	display: block;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: 13px;
	font-size: 3.467vw;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .mv-brand-vitoas.mv-faq {
		background-image: url(../img/faq/mv-faq_pc.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		height: 720px;
	}

	.vitoas-brand-wrapper .mv-brand-vitoas.mv-faq .mv-faq-inner {
		max-width: 1020px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .mv-brand-vitoas.mv-faq .mv-txtbox {
		top: 128px;
		right: auto;
		position: relative;
		text-align: right;
	}

	.vitoas-brand-wrapper .mv-brand-vitoas.mv-faq .mv-txtbox .mv-faq-heading {
		font-size: 88px;
		text-align: left;
		display: inline-block;
		line-height: 1.2;
	}

	.vitoas-brand-wrapper .mv-brand-vitoas.mv-faq .mv-txtbox .mv-faq-heading .mv-faq-heading-ja {
		font-size: 25px;
	}

	.vitoas-brand-wrapper .mv-brand-vitoas.mv-faq .mv-imgbox {
		display: none;
	}
}

.vitoas-brand-wrapper .faq-section {
	padding: 50px 40px 60px;
}

.vitoas-brand-wrapper .faq-unit {
	position: relative;
}

.vitoas-brand-wrapper dl.faq-unit-item {
	position: relative;
	margin-top: 30px;
}

.vitoas-brand-wrapper dl.faq-unit-item:first-of-type {
	margin-top: 0;
}

.vitoas-brand-wrapper dt.faq-unit-summary {
	position: relative;
	background-color: #e84d07;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size: 14px;
	font-size: 3.733vw;
	color: #ffffff;
	border-radius: 80px;
	list-style: none;
	cursor: pointer;
	z-index: 1;
}

.vitoas-brand-wrapper .faq-unit-summary-inner {
	display: flex;
	align-items: center;
	gap: 0 10px;
	padding: 20px;
	box-sizing: border-box;
}

.vitoas-brand-wrapper dd.faq-unit-contents {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	gap: 0 10px;
	background-color: #f8f1e9;
	font-size: 12px;
	padding: 110px 15px 15px;
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	box-sizing: border-box;
	z-index: 0;
}

.vitoas-brand-wrapper .faq-unit-contents-txt {
	text-align: left;
	line-height: 1.8;
}

.vitoas-brand-wrapper .faq-unit-contents-txt strong {
	color: #e84d07;
}

.vitoas-brand-wrapper .faq-unit-summary-icon {
	width: 19px;
	height: 19px;
	width: 5.067vw;
	height: 5.067vw;
	border: 2px solid #ffffff;
	border-radius: 50%;
	position: relative;
}

.vitoas-brand-wrapper .faq-unit-summary-icon::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 3px;
	height: 3px;
	width: 0.8vw;
	height: 0.8vw;
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	transform: rotate(135deg);
}

.vitoas-brand-wrapper .faq-unit-summary-txt {
	text-align: left;
	line-height: 1.4;
	width: 84%;
}

.vitoas-brand-wrapper ul.faq-unit-contents-list li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 22px;
}

.vitoas-brand-wrapper ul.faq-unit-contents-list li:first-child {
	margin-top: 0;
}

.vitoas-brand-wrapper .faq-unit-contents-list-step {
	color: #e84d07;
	padding-bottom: 5px;
}

.vitoas-brand-wrapper .faq-unit-contents-txt {
	font-size: 12px;
	font-size: 3.2vw;
	line-height: 2;
}

.vitoas-brand-wrapper .faq-unit-summary-q,
.vitoas-brand-wrapper .faq-unit-contents-a {
	font-size: 19px;
	font-size: 5.067vw;
	font-family: "Cormorant Garamond", serif;
	font-weight: 600;
	color: #ffffff;
}

.vitoas-brand-wrapper .faq-unit-contents-a {
	color: #e84d07;
}

.vitoas-brand-wrapper .faq-unit-col {
	display: flex;
	flex-direction: column;
	gap: 15px;
	gap: 4vw;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .faq-section {
		max-width: 1100px;
		padding-top: 120px;
		padding-bottom: 140px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .faq-unit {
		padding: 0 40px;
		box-sizing: border-box;
	}

	.vitoas-brand-wrapper dl.faq-unit-item {
		margin-top: 50px;
	}

	.vitoas-brand-wrapper dl.faq-unit-item:first-of-type {
		margin-top: 0;
	}

	.vitoas-brand-wrapper dt.faq-unit-summary {
		font-size: 24px;
	}

	.vitoas-brand-wrapper .faq-unit-summary-inner {
		gap: 0 20px;
		padding: 25px 35px;
	}

	.vitoas-brand-wrapper .faq-unit-summary-icon {
		width: 38px;
		height: 38px;
	}

	.vitoas-brand-wrapper .faq-unit-summary-icon::before {
		width: 6px;
		height: 6px;
	}

	.vitoas-brand-wrapper .faq-unit-summary-txt {
		width: 90%;
	}

	.vitoas-brand-wrapper dd.faq-unit-contents {
		gap: 0 10px;
		background-color: #f8f1e9;
		font-size: 22px;
		padding: 110px 35px 35px;
		border-top-left-radius: 60px;
		border-top-right-radius: 60px;
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;
		margin-top: -100px;
	}

	.vitoas-brand-wrapper .faq-unit-contents-txt {
		font-size: 18px;
		line-height: 1.75;
	}

	.vitoas-brand-wrapper .faq-unit-summary-q,
	.vitoas-brand-wrapper .faq-unit-contents-a {
		font-size: 38px;
	}

	.vitoas-brand-wrapper ul.faq-unit-contents-list {
		display: flex;
		flex-direction: column;
		gap: 48px;
		margin-top: 24px;
	}

	.vitoas-brand-wrapper ul.faq-unit-contents-list li {
		display: flex;
		flex-direction: row;
		gap: 22px;
	}

	.vitoas-brand-wrapper .faq-unit-contents-list-fig {
		width: 40%;
	}

	.vitoas-brand-wrapper .faq-unit-contents-list-txt {
		width: 60%;
	}

	.vitoas-brand-wrapper .faq-unit-col {
		gap: 15px;
	}
}

/* --- Q（質問）：アイコン右寄せ & 突き抜け防止 --- */
.vitoas-brand-wrapper dl.faq-unit-item dt.faq-unit-summary {
	position: relative;
	z-index: 2;
	/* Aより上に配置 */
	cursor: pointer;
	min-height: 110px;
	/* 1行のQでも高さを確保し、Aの突き抜けを防ぐ */
	display: flex;
	align-items: center;
}

/* 内部を左右に振り分け */
.vitoas-brand-wrapper .faq-unit-summary-inner {
	display: flex;
	justify-content: space-between;
	/* テキストとアイコンを両端に */
	align-items: center;
	width: 100%;
	padding: 0 15px;
	/* オレンジ枠内の左右余白 */
}

.vitoas-brand-wrapper .faq-unit-summary-txt {
	flex: 1;
	padding-right: 10px;
}

/* 矢印アイコン：画像通りの右端配置 */
.vitoas-brand-wrapper .faq-unit-summary-icon {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

/* --- A（回答）：absoluteを解除し、innerで余白管理 --- */
.vitoas-brand-wrapper dl.faq-unit-item dd.faq-unit-contents {
	position: static !important;
	/* 絶対配置を完全に解除 */
	display: none;
	/* 初期は非表示（JSで制御） */
	z-index: 1;
	margin-top: -100px !important;
	/* 既存のデザイン重なりを維持 */
	overflow: hidden;
	/* 閉じる時のスライド（移動）を隠すために必須 */
}

/* Aの内部コンテナ：ここが「はみ出し」を防ぐ */
.vitoas-brand-wrapper .faq-unit-contents-inner {
	display: flex;
	gap: 10px;
}

.vitoas-brand-wrapper dl.faq-unit-item dt.faq-unit-summary {
	padding: 20px 0;
	padding: 5.333vw 0;
}

/* 矢印の回転 */
.vitoas-brand-wrapper dl.faq-unit-item.is-open .faq-unit-summary-icon {
	transform: rotate(180deg);
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .faq-unit-summary-inner {
		padding: 0 30px;
	}

	.vitoas-brand-wrapper dd.faq-unit-contents {
		padding: 124px 54px 35px;
	}

	.vitoas-brand-wrapper dl.faq-unit-item dt.faq-unit-summary {
		padding: 0;
	}
}

/*----------------------------------------------------
myperfection-point
----------------------------------------------------*/
.vitoas-brand-wrapper .myperfection-point {
	padding: 0 40px;
	padding: 0 10.667vw;
	margin-top: 38px;
	margin-top: 10.133vw;
}

.vitoas-brand-wrapper dl.faq-unit-item.point-item dt.faq-unit-summary {
	font-weight: bold;
	border: 1px solid #ffffff;
	min-height: 70px;
	padding: 10px 0;
	padding: 2.667vw;
}

.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents {
	margin-top: -70px !important;
}

.vitoas-brand-wrapper dl.faq-unit-item.point-item dt.faq-unit-summary .faq-unit-summary-txt {
	text-align: center;
}

.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents {
	background-color: #ffffff;
	padding: 100px 0 15px;
}

.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents .point-ttl {
	font-size: 16px;
	font-size: 4.267vw;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-weight: 700;
	color: #e84d07;
	text-align: center;
	margin-bottom: 26px;
	margin-bottom: 6.933vw;
}

.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents .point-container {
	display: flex;
	flex-direction: column;
	gap: 44px;
	gap: 14.933vw;
	padding: 0 56px;
	padding: 0 14.933vw;
}

.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents .point-number {
	font-family: "Montserrat", sans-serif;
	font-size: 17px;
	font-size: 4.533vw;
	font-weight: 600;
	text-align: center;
	color: #e84d07;
	margin-bottom: 22px;
	margin-bottom: 5.867vw;
}

.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents .point-txt {
	font-size: 13px;
	font-size: 3.467vw;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-weight: 700;
	line-height: 1.8;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .myperfection-point {
		padding: 0;
		margin-top: 86px;
	}

	.vitoas-brand-wrapper dl.faq-unit-item.point-item dt.faq-unit-summary {
		max-width: 720px;
		border: 1px solid #ffffff;
		font-size: 24px;
		min-height: 70px;
		padding: 10px 0;
		transform: translateY(-30px);
		box-sizing: border-box;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents {
		padding: 90px 35px 35px;
	}

	.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents .point-ttl {
		font-size: 24px;
		margin-bottom: 30px;
	}

	.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents .point-container {
		display: flex;
		flex-direction: row;
		max-width: 548px;
		gap: 48px;
		padding: 0 56px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents .point-card {
		width: 50%;
	}

	.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents .point-number {
		font-size: 22px;
		margin-bottom: 15px;
	}

	.vitoas-brand-wrapper dl.faq-unit-item.point-item dd.faq-unit-contents .point-txt {
		font-size: 18px;
		margin-top: 15px;
	}

}

/*----------------------------------------------------
recommend-02-myperfection
----------------------------------------------------*/
.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl-sub {
	color: #e84d07;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 700;
	font-size: 20px;
	font-size: 5.333vw;
	text-align: center;
	padding-bottom: 6px;
	border-bottom: 1px solid #e84d07;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl-sub-02 {
	display: block;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-weight: 600;
	font-size: 16px;
	font-size: 4.267vw;
	line-height: 1.6;
	text-align: center;
	padding-top: 34px;
	padding-bottom: 24px;
}

.vitoas-brand-wrapper .recommend-02-ttl > strong {
	line-height: 1.3;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-card {
	position: relative;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl {
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 700;
	font-size: 27px;
	font-size: 7.2vw;
	line-height: 1.6;
	padding-left: 40px;
	padding-left: 10.667vw;
	margin-bottom: 15px;
	margin-bottom: 4vw;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-number {
	position: absolute;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-number-01 {
	width: 67px;
	height: 85px;
	right: 10px;
	top: 14px;
	width: 17.867vw;
	height: 22.667vw;
	right: 2.667vw;
	top: 3.733vw;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-number-02 {
	width: 131px;
	height: 237px;
	left: 10px;
	top: -54px;
	width: 34.933vw;
	height: 63.2vw;
	left: 2.667vw;
	top: -10.4vw;
}

.vitoas-brand-wrapper .recommend-02-myperfection video {
	width: 100%;
	margin-top: 24px;
	margin-top: 6.4vw;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-video {
	padding-right: 90px;
	padding-right: 24vw;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-01-fig {
	padding-left: 40px;
	padding-left: 10.667vw;
	margin-top: -40px;
	margin-top: -10.667vw;
	position: relative;
	z-index: 1;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-01-fig .notice {
	margin-top: 10px;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-wow {
	padding-left: 35px;
	padding-left: 9.333vw;
	margin: 44px 0;
	margin: 11.733vw 0;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl-02 {
	padding-left: 138px;
	padding-right: 10px;
	padding-left: 36.8vw;
	padding-right: 2.667vw;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl-02-sub {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-weight: 700;
	font-size: 20px;
	font-size: 5.333vw;
	line-height: 1.6;
	display: block;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl .notice {
	display: block;
}

.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-02-fig {
	padding-left: 35px;
	margin-top: 35px;
	padding-left: 9.333vw;
	margin-top: 9.333vw;
}

.vitoas-brand-wrapper .recommend-02-myperfection-ttl-sub-wow {
	font-size: 14px;
	font-size: 3.733vw;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-weight: 700;
	background-color: #e84d07;
	color: #ffffff;
	padding: 4px 6px;
}

.vitoas-brand-wrapper .recommend-02-cream-subtxt {
	display: block;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	margin-bottom: 10px;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .recommend-02-myperfection {
		padding: 0 80px;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl-sub {
		font-size: 40px;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl-sub-02 {
		font-size: 30px;
		line-height: 1.6;
		padding-top: 42px;
		padding-bottom: 28px;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-number-01 {
		width: 142px;
		height: 181px;
		top: 20px;
		right: 20px;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-number-02 {
		width: 262px;
		height: 474px;
		left: 20px;
		top: -80px;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl-area {
		position: absolute;
		left: 54%;
		top: 22%;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl {
		font-size: 40px;
		line-height: 1.5;
		padding-left: 0;
		margin-bottom: 24px;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl-sub {
		font-size: 38px;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-video {
		padding-right: 0;
		width: 63%;
		margin-left: -15.7%;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-01-fig {
		display: flex;
		flex-direction: row-reverse;
		gap: 36px;
		align-items: flex-end;
		padding-left: 0;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-01-fig > span {
		display: block;
		width: 100%;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-wow {
		padding-left: 0;
		margin: 120px 0 120px 100px;
		margin-right: -6.3%;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl-02-sub {
		font-size: 30px;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-col {
		display: flex;
		gap: 36px;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-card {
		padding: 70px 0;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-col {
		display: flex;
		gap: 0;
		align-items: flex-end;
		justify-content: flex-end;
		padding-top: 100px;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-02-fig {
		padding: 0;
		margin-top: 0;
		width: 60%;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl {
		margin-bottom: 0;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-ttl-02 {
		padding-left: 40px;
		z-index: 1;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection .recommend-02-myperfection-01-fig .notice {
		width: 60%;
		margin-left: 40px;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection video {
		margin-top: 0;
	}

	.vitoas-brand-wrapper .recommend-02-myperfection-ttl-sub-wow {
		display: block;
		font-size: 23px;
		margin-top: 20px;
	}
}


/*----------------------------------------------------
myperfection-onestep
----------------------------------------------------*/
.vitoas-brand-wrapper .recommend-02-myperfection {
	padding-bottom: 105.133vw;
}

.vitoas-brand-wrapper .sec-myperfection-onestep {
	background-image: url(../img/myperfection/one-step-bg_sp.png);
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	margin-top: -310px;
	margin-top: -82.667vw;
}

.vitoas-brand-wrapper .myperfection-onestep-fig {
	position: absolute;
	top: 0;
	left: 0;
	width: 337px;
	height: 409px;
	top: -8vw;
	left: 0;
	width: 89.867vw;
	height: 109.067vw;
	z-index: 1;
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .recommend-02-myperfection {
		padding-bottom: 560px;
	}

	.vitoas-brand-wrapper .sec-myperfection-onestep {
		background-image: url(../img/myperfection/one-step-bg.png);
		background-size: contain;
		background-repeat: repeat-x;
		margin-top: -400px;
	}

	.vitoas-brand-wrapper .myperfection-onestep-inner {
		max-width: 1066px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .myperfection-onestep-fig {
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: auto;
		top: -100px;
	}

}

/*----------------------------------------------------
line up
----------------------------------------------------*/
.vitoas-brand-wrapper .line-up {
	background-color: #e84d07;
	padding: 74px 60px;
}

.vitoas-brand-wrapper .ttl-lineup {
	font-family: "Cormorant Garamond", serif;
	color: #ffffff;
	font-size: 30px;
	font-size: 8vw;
	text-align: center;
}

.vitoas-brand-wrapper .line-up-list {
	padding-top: 50px;
	padding-top: 13vw;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.vitoas-brand-wrapper .line-up-item {
	width: 100%;
	color: #ffffff;
}

.vitoas-brand-wrapper .line-up-fig {
	text-align: center;
}

.vitoas-brand-wrapper .line-up-fig img {
	width: 200px;
}

.vitoas-brand-wrapper .line-up-tag-area {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	gap: 2.667vw;
	margin-top: 20px;
	margin-top: 5.333vw;
}

.vitoas-brand-wrapper .line-up-tag {
	color: #e84d07;
	background-color: #fff;
	border-radius: 20px;
	font-size: 14px;
	font-size: 3.733vw;
	line-height: 1.2;
	padding: 6px 10px;
	padding: 1.6vw 2.667vw;
}

.vitoas-brand-wrapper .line-up-txt-area {
	display: flex;
	flex-direction: column;
	gap: 15px;
	font-size: 13px;
	padding-top: 20px;
	gap: 4vw;
	font-size: 3.467vw;
	padding-top: 5.333vw;
}

.vitoas-brand-wrapper .line-up-ttl {
	font-size: 18px;
	font-size: 4.8vw;
	font-weight: 700;
	line-height: 1.4;
}

.vitoas-brand-wrapper .line-up-caption-sub {
	font-weight: 700;
	border: 1px solid #fff;
	padding: 1.333vw 4vw;
}

.vitoas-brand-wrapper .line-up-caption-txt {
	font-weight: 700;
	padding-left: 10px;
	/*padding-left: 2.667vw;*/
}

.vitoas-brand-wrapper .line-up-txt-des {
	font-size: 15px;
	font-size: 4vw;
	font-weight: 700;
	line-height: 1.5;
}

.vitoas-brand-wrapper .line-up-prise-area {
	display: flex;
	align-items: end;
	gap: 10px;
	padding: 10px 0;
	gap: 2.667vw;
	padding: 2.667vw 0;
}

.vitoas-brand-wrapper .line-up-prise-sub {
	width: 40%;
	font-weight: 700;
}

.vitoas-brand-wrapper .line-up-prise-txt {
	width: 60%;
	font-weight: 700;
	line-height: 1.2;
}

.vitoas-brand-wrapper .line-up-prise-sub {
	font-size: 12px;
	font-size: 3.2vw;
	line-height: 1.2;
}

.vitoas-brand-wrapper .line-up-prise-txt {
	text-align: right;
	font-size: 14px;
	font-size: 3.733vw;
}

.vitoas-brand-wrapper .line-up-prise-txt > strong {
	font-size: 24px;
	font-size: 6.4vw;
	font-weight: 700;
}

.vitoas-brand-wrapper .line-up-btn-area {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vitoas-brand-wrapper a.line-up-btn {
	display: block;
	background-color: #ffffff;
	color: #e84d07;
	font-size: 16px;
	font-size: 4.267vw;
	text-align: center;
	padding: 13px 10px;
	padding: 3.467vw 2.667vw;
	border: 1px solid #e84d07;
	box-sizing: border-box;
}

.vitoas-brand-wrapper a.line-up-btn > span.arw {
	display: inline-block;
	width: 10px;
	height: 10px;
	width: 2.667vw;
	height: 2.667vw;
	border-top: 1px solid #e84d07;
	border-right: 1px solid #e84d07;
	transform: rotate(45deg);
	/*vertical-align: middle;*/
	margin-left: 5px;
	margin-left: 3vw;
}

.vitoas-brand-wrapper a.line-up-purchase-btn {
	background-color: #e84d07;
	color: #ffffff;
}

.vitoas-brand-wrapper a.line-up-purchase-btn > span.arw {
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}

.vitoas-brand-wrapper a.line-up-purchase-btn.line-up-purchase-bg-orange-btn {
	border: 1px solid #fff;
}

.vitoas-brand-wrapper .line-up-notice {
	color: #ffffff;
	margin-top: 20px;
	margin-top: 5.333vw;
}

@media screen and (max-width: 768px) {
	.vitoas-brand-wrapper .line-up-fig img {
		margin: 0 auto;
	}
}

@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .line-up {
		padding: 140px 40px;
	}

	.vitoas-brand-wrapper .line-up-inner {
		max-width: 1100px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .ttl-lineup {
		font-size: 50px;
	}

	.vitoas-brand-wrapper .line-up-list {
		margin-top: 50px;
		display: flex;
		flex-direction: row;
		gap: 39px;
	}

	.vitoas-brand-wrapper .line-up-item {
		width: 100%;
		font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	}

	.vitoas-brand-wrapper .line-up-fig {
		height: 200px;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.vitoas-brand-wrapper .line-up-tag-area {
		margin-top: 30px;
	}

	.vitoas-brand-wrapper .line-up-tag {
		color: #e84d07;
		font-size: 16px;
	}

	.vitoas-brand-wrapper .line-up-txt-des {
		font-size: 14px;
	}

	.vitoas-brand-wrapper .line-up-prise-area {
		gap: 5px;
	}

	.vitoas-brand-wrapper .line-up-prise-sub {
		width: 42%;
	}

	.vitoas-brand-wrapper .line-up-prise-txt {
		width: 58%;
	}

	.vitoas-brand-wrapper .line-up-notice {
		justify-content: center;
	}

	.vitoas-brand-wrapper .line-up-ttl {
		font-size: 17px;
	}

	.vitoas-brand-wrapper .line-up-tag {
		padding: 6px 10px;
	}

	.vitoas-brand-wrapper .line-up-txt-area {
		gap: 15px;
		font-size: 13px;
		padding-top: 20px;
	}

	.vitoas-brand-wrapper .line-up-list {
		padding-top: 50px;
		margin-top: 0;
	}

	.vitoas-brand-wrapper .line-up-caption-sub {
		padding: 5px 10px;
	}

	.vitoas-brand-wrapper .line-up-prise-sub {
		font-size: 12px;
	}

	.vitoas-brand-wrapper .line-up-prise-txt {
		font-size: 14px;
	}

	.vitoas-brand-wrapper .line-up-prise-txt > strong {
		font-size: 24px;
	}

	.vitoas-brand-wrapper a.line-up-btn {
		font-size: 16px;
		padding: 13px 10px;
	}

	.vitoas-brand-wrapper a.line-up-btn > span.arw {
		width: 10px;
		height: 10px;
		margin-left: 5px;
	}

	.vitoas-brand-wrapper .line-up-prise-area {
		gap: 10px;
		padding: 10px 0;
	}
}

/*----------------------------------------------------
line up orange
----------------------------------------------------*/
.vitoas-brand-wrapper .line-up.bg-w {
	background-color: #fff;
	padding: 74px 60px;
}

.vitoas-brand-wrapper .line-up.bg-w .line-up-item {
	color: #000000;
}

.vitoas-brand-wrapper .line-up.bg-w .ttl-lineup {
	color: #e84d07;
}

.vitoas-brand-wrapper .line-up.bg-w .line-up-tag {
	background-color: #f8f1e9;
}

.vitoas-brand-wrapper .line-up.bg-w .line-up-caption-sub {
	border: 1px solid #000000;
}

.vitoas-brand-wrapper .line-up.bg-w .line-up-prise-txt {
	color: #e84d07;
}

.vitoas-brand-wrapper .line-up.bg-w .line-up-notice {
	color: #000000;
}

/*----------------------------------------------------
CTA
----------------------------------------------------*/
.vitoas-brand-wrapper .cta-vitoas {
	background-color: #f8f1e9;
	padding-bottom: 50px;
	padding-bottom: 13.333vw;
}

.vitoas-brand-wrapper .cta-keizoku {
	padding-bottom: 40px;
	padding-bottom: 10.667vw;
}

.vitoas-brand-wrapper .cta-keizoku-prise {
	/*padding: 0 35px;*/
	margin-bottom: 18px;
}

.vitoas-brand-wrapper a.btn-cta {
	display: block;
	width: 70.933vw;
	position: relative;
	color: #e84d07;
	font-size: 4.267vw;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "osaka", "Osaka－等幅", "Osaka-Mono", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-weight: 700;
	border: 1px solid #e84d07;
	padding: 2.133vw 4.533vw;
	box-sizing: border-box;
	margin: 0 auto;
}

.vitoas-brand-wrapper a.btn-cta::before,
.vitoas-brand-wrapper a.btn-cta::after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

.vitoas-brand-wrapper a.btn-cta::before {
	right: 5.333vw;
	width: 5.867vw;
	height: 5.867vw;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 1px solid #e84d07;
}

.vitoas-brand-wrapper a.btn-cta::after {
	right: 8vw;
	width: 1.6vw;
	height: 1.6vw;
	border-top: 1px solid #e84d07;
	border-right: 1px solid #e84d07;
	transform: rotate(45deg);
}

.vitoas-brand-wrapper .btn-cta-keizoku-area {
	padding: 0;
	margin-top: 2.667vw;
}

.vitoas-brand-wrapper a.btn-cta-keizoku {
	background-color: #e84d07;
	color: #ffffff;
	line-height: 1.3;
	padding: 4.8vw 4.533vw;
}

.vitoas-brand-wrapper a.btn-cta-keizoku::before {
	border: 2px solid #ffffff;
}

.vitoas-brand-wrapper a.btn-cta-keizoku::after {
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
}

.vitoas-brand-wrapper .cta-card-keizoku {
	background-color: #ffffff;
	margin-top: 8vw;
}

.vitoas-brand-wrapper .cta-card-keizoku-inner {
	padding: 5.333vw 4vw 8vw;
}

.vitoas-brand-wrapper .cta-refill {
	border: 2px solid #ffffff;
	border-radius: 25px;
	padding: 12vw 10.667vw;
}

.vitoas-brand-wrapper .cta-refill .cta-refill-txt {
	color: #e84d07;
	font-size: 4.267vw;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.vitoas-brand-wrapper .cta-refill .cta-refill-txt > strong {
	font-size: 1.4em;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: 600;
}

.vitoas-brand-wrapper .cta-notice {
	margin-top: 24px;
	margin-top: 6.4vw;
}

.vitoas-brand-wrapper .btn-myperfection {
	display: flex;
	flex-direction: column;
	gap: 12px;
	gap: 3.2vw;
}

.vitoas-brand-wrapper a.btn-icon {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
}

.vitoas-brand-wrapper a.btn-icon > div.btn-icon-inner {
	display: flex;
	height: 39px;
	height: 10.4vw;
}

.vitoas-brand-wrapper a.btn-icon .btn-icon-fig {
	position: relative;
	display: flex;
	align-items: center;
	width: 49px;
	width: 13.067vw;
	height: 39px;
	height: 10.4vw;
}

.vitoas-brand-wrapper a.btn-icon .btn-icon-fig::after {
	content: "";
	position: absolute;
	right: 0;
	width: 1px;
	height: 39px;
	height: 10.4vw;
	background-color: #e84d07;
}

.vitoas-brand-wrapper a.btn-icon .btn-icon-txt {
	display: flex;
	align-items: center;
	padding-left: 28px;
	padding-left: 7.467vw;
}

.vitoas-brand-wrapper a.btn-cta-keizoku.btn-icon .btn-icon-fig {
	height: 60px;
	height: 16vw;
}

.vitoas-brand-wrapper a.btn-cta-keizoku.btn-icon > div.btn-icon-inner {
	display: flex;
	height: 60px;
	height: 16vw;
}

.vitoas-brand-wrapper a.btn-cta-keizoku.btn-icon .btn-icon-fig::after {
	height: 60px;
	height: 16vw;
	background-color: #ffffff;
}

.vitoas-brand-wrapper a.btn-cta-keizoku.btn-icon .btn-icon-txt {
	text-align: center;
	padding-left: 60px;
	padding-left: 10vw;
}

.vitoas-brand-wrapper .btn-cta-keizoku-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	gap: 3.2vw;
}

.vitoas-brand-wrapper .cta-myperfection-refill .cta-refill-fig {
	width: 80px;
	width: 21.333vw;
	margin: 0 auto;
}

.vitoas-brand-wrapper .cta-myperfection-refill .cta-refill-col {
	margin-top: 38px;
	margin-top: 10.133vw;
}

.vitoas-brand-wrapper .cta-myperfection-mini {
	position: relative;
	padding: 0 12vw 10.667vw;
	margin-top: 60px;
	margin-top: 16vw;
}

.vitoas-brand-wrapper .cta-myperfection-mini-top-txt {
	position: relative;
	width: 235px;
	width: 62.667vw;
	margin: 0 auto;
	transform: translateY(-29px);
	transform: translateY(-7.773vw);
}

.vitoas-brand-wrapper .cta-keizoku-cream-refill-prise {
	width: 68%;
	margin: 0 auto;
	margin-bottom: 14px;
}

.vitoas-brand-wrapper .cta-cream-prise,
.vitoas-brand-wrapper .cta-soap-prise {
	width: 68%;
	margin: 0 auto;
	margin-bottom: 14px;
}



@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .cta-vitoas {
		padding-bottom: 60px;
	}

	.vitoas-brand-wrapper .cta-keizoku.section-inner,
	.vitoas-brand-wrapper .cta-refill {
		max-width: 1000px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .cta-keizoku-col,
	.vitoas-brand-wrapper .cta-refill-col {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
	}

	.vitoas-brand-wrapper a.btn-cta {
		width: 360px;
		font-size: 21px;
		padding: 10px 40px;
		box-sizing: border-box;
	}

	.vitoas-brand-wrapper a.btn-cta::before {
		right: 30px;
		width: 30px;
		height: 30px;
	}

	.vitoas-brand-wrapper a.btn-cta::after {
		right: 42px;
		width: 10px;
		height: 10px;
	}

	.vitoas-brand-wrapper .cta-keizoku-prise {
		padding: 0;
		width: 488px;
		margin-bottom: 0;
	}

	.vitoas-brand-wrapper .cta-card-keizoku {
		margin-top: 60px;
	}

	.vitoas-brand-wrapper .cta-card-keizoku-inner {
		padding: 24px 160px 50px;
	}

	.vitoas-brand-wrapper a.btn-cta-keizoku {
		width: 440px;
		font-size: 27px;
		text-align: center;
		line-height: 1.4;
		padding: 10px 20px;
	}

	.vitoas-brand-wrapper .cta-refill {
		padding: 80px 100px;
		border: solid 5px #ffffff;
		border-radius: 50px;
	}

	.vitoas-brand-wrapper .cta-refill .cta-refill-txt {
		font-size: 30px;
	}

	.vitoas-brand-wrapper .cta-refill-col {
		margin-top: 30px;
	}

	.vitoas-brand-wrapper .cta-keizoku-prise-col {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.vitoas-brand-wrapper a.btn-icon {
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 0;
	}

	.vitoas-brand-wrapper a.btn-icon > div.btn-icon-inner {
		height: 52px;
	}

	.vitoas-brand-wrapper a.btn-cta::after {
		right: 42px;
		width: 10px;
		height: 10px;
	}

	.vitoas-brand-wrapper .btn-myperfection {
		gap: 16px;
	}

	.vitoas-brand-wrapper a.btn-icon > div.btn-icon-inner {
		height: 52px;
	}

	.vitoas-brand-wrapper a.btn-icon .btn-icon-fig {
		width: 60px;
		height: auto;
	}

	.vitoas-brand-wrapper a.btn-icon .btn-icon-fig::after {
		height: 52px;
	}

	.vitoas-brand-wrapper a.btn-icon .btn-icon-txt {
		padding-left: 48px;
	}

	.vitoas-brand-wrapper .cta-card-keizoku-col {
		display: flex;
		gap: 40px;
		align-items: center;
	}

	.vitoas-brand-wrapper .cta-card-keizoku-col {
		padding: 0;
		padding: 64px;
	}

	vitoas-brand-wrapper .btn-cta-keizoku-area {
		padding: 0;
		margin-top: 0;
	}

	.vitoas-brand-wrapper .btn-cta-keizoku-col {
		gap: 20px;
	}

	.vitoas-brand-wrapper a.btn-cta-keizoku.btn-icon > div.btn-icon-inner {
		height: 100px;
	}

	.vitoas-brand-wrapper a.btn-cta-keizoku.btn-icon .btn-icon-fig {
		height: 60px;
		height: auto;
	}

	.vitoas-brand-wrapper a.btn-cta-keizoku.btn-icon .btn-icon-txt {
		padding-left: 19%;
	}

	.vitoas-brand-wrapper .cta-notice {
		margin-top: 24px;
	}

	.vitoas-brand-wrapper .cta-keizoku {
		margin-bottom: 80px;
	}

	.vitoas-brand-wrapper .cta-myperfection-refill .cta-refill-fig {
		width: 170px;
		height: auto;
	}

	.vitoas-brand-wrapper .myperfection-refill-tujiyokakaku {
		width: 360px;
	}

	.vitoas-brand-wrapper .cta-myperfection-refill .cta-refill-col {
		margin-top: 38px;
		/* margin-top: 10.133vw; */
		padding: 0 80px;
	}

	.vitoas-brand-wrapper .cta-myperfection-mini-top-txt {
		max-width: 650px;
		transform: translateY(-25px);
	}

	.vitoas-brand-wrapper .cta-myperfection-mini {
		position: relative;
		padding: 0 80px 80px;
		margin-top: 120px;
	}

	.vitoas-brand-wrapper .myperfection-mini-tujiyokakaku {
		width: 360px;
	}

	.vitoas-brand-wrapper a.btn-cta-keizoku.btn-icon .btn-icon-fig::after {
		height: 100px;
	}

	.vitoas-brand-wrapper .btn-cta-keizoku-area {
		padding: 0;
		margin-top: 0;
	}

	.vitoas-brand-wrapper a.btn-cta-keizoku.btn-cta-keizoku-size-s {
		width: 400px;
	}

	.vitoas-brand-wrapper a.btn-cta-keizoku.btn-icon.btn-cta-keizoku-size-s .btn-icon-txt {
		padding-left: 15%;
	}

	.vitoas-brand-wrapper .cta-keizoku {
		padding-bottom: 80px;
	}

	.vitoas-brand-wrapper .cta-keizoku .cta-card-keizoku-cream-prise,
	.vitoas-brand-wrapper .cta-keizoku .cta-card-keizoku-soap-prise {
		width: 670px;
		margin: 0 auto;
		margin-bottom: 15px;
	}

	.vitoas-brand-wrapper .cta-keizoku .cta-card-keizoku-cream-refill-prise {
		width: 414px;
		margin: 0 auto;
		margin-bottom: 15px;
	}

	.vitoas-brand-wrapper .cta-keizoku-cream-refill-prise {
		width: 300px;
	}

	.vitoas-brand-wrapper .cta-cream-prise,
	.vitoas-brand-wrapper .cta-soap-prise {
		width: 320px;
		margin-bottom: 14px;
	}

	.vitoas-brand-wrapper .cta-keizoku-col {
		max-width: 760px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .cta-keizoku-col {
		max-width: 760px;
		margin: 0 auto;
	}

	.vitoas-brand-wrapper .cta-keizoku-myperfection-prise {
		max-width: 1000px;
	}
}

@media screen and (max-width: 768px) {
	.vitoas-brand-wrapper .cta-myperfection-refill-keizoku-prise {
		width: 80%;
	}
}

/* LINEUP */
@media screen and (min-width: 769px) {

	/* リスト全体の高さを揃える */
	.vitoas-brand-wrapper .line-up-list {
		display: flex;
		flex-direction: row;
		gap: 39px;
		justify-content: center;
		align-items: stretch;
		/* これで各アイテムの枠の高さが揃います */
	}

	/* 各アイテム */
	.vitoas-brand-wrapper .line-up-item {
		width: 333px;
		display: flex;
		flex-direction: column;
		/* 中身を縦に並べる */
	}

	/* タグエリア：1行でも2行でも高さを固定して、タイトルの開始位置を揃える */
	.vitoas-brand-wrapper .line-up-tag-area {
		min-height: 73px;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		gap: 4px;
		margin-bottom: 10px;
	}

	/* 商品名：タイトルの行数が違ってもテキストの開始位置を揃える */
	.vitoas-brand-wrapper .line-up-item-name {
		min-height: 3.5em;
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	/* テキストエリア：ここが伸びることで、下の価格とボタンを一番下に押し下げる */
	.vitoas-brand-wrapper .line-up-item-txt {
		flex-grow: 1;
		/* 余白をすべて吸収する */
		margin-bottom: 20px;
	}

	/* 価格エリア：送料と価格を横並びにし、位置を全アイテムで統一する */
	.vitoas-brand-wrapper .line-up-prise-area {
		margin-top: auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: end;
		gap: 8px;
		min-height: 40px;
	}

	/* ボタンエリア：価格のすぐ下に固定 */
	.vitoas-brand-wrapper .line-up-btn-area {
		margin-top: 15px;
		flex-shrink: 0;
	}
}

/* --- SP：スライダー用 --- */
/* --- SP：スライダー設定（768px以下） --- */
@media screen and (max-width: 768px) {

	/* スライダーを親要素のpaddingを無視して画面いっぱいに広げる */
	.vitoas-brand-wrapper .slider-wrapper {
		overflow: visible !important;
		/* はみ出しをオレンジ背景の上に見せる */
		position: relative;
		padding-bottom: 40px;
		width: 100%;
		/* 100vw から 100% に戻す */
		margin-left: 0;
		/* 左寄せ用のネガティブマージンを解除 */
	}




	.vitoas-brand-wrapper .slider-container {
		overflow: visible !important;
		padding-left: 0 !important;
		/* 左寄せ用の余白を解除 */
	}

	.vitoas-brand-wrapper .card-howto.swiper-slide {
		height: auto;
		flex-shrink: 0;
		/* カードが画面端に近すぎる場合はここで内側の余白を調整 */
		padding: 25px 20px !important;
		box-sizing: border-box;
	}

	.vitoas-brand-wrapper .slider-arw {
		display: none !important;
	}

	/* ドットの位置がずれる場合は調整 */
	.vitoas-brand-wrapper .swiper-pagination {
		bottom: 10px !important;
		left: 0;
		width: 100%;
		text-align: center !important;
		padding-left: 0;
	}

	.vitoas-brand-wrapper .swiper-pagination-bullet-active {
		background-color: #ffffff !important;
		opacity: 1;
	}

	.vitoas-brand-wrapper .swiper-pagination-bullet {
		background-color: transparent;
		border: 1px solid #ffffff;
		opacity: 1;
		margin: 0 5px !important;
	}
}

/* --- PC：元のデザインを維持（769px以上） --- */
@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .slider-wrapper.swiper {
		width: auto;
		margin-left: 0;
		overflow: visible;
	}

	.vitoas-brand-wrapper .slider-container.swiper-wrapper {
		display: flex !important;
		transform: none !important;
		width: auto !important;
		justify-content: center;
		align-items: flex-start;
		/* PC版の白い背景枠を維持 */
		background-color: #fff;
		border-radius: 36px;
		padding: 50px;
	}

	.vitoas-brand-wrapper .card-howto.swiper-slide {
		flex-shrink: 1 !important;
		width: 290px !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.vitoas-brand-wrapper .slider-arw {
		display: inline-block !important;
	}

	.vitoas-brand-wrapper .swiper-pagination {
		display: none !important;
	}
}

/* --- テキストスライダー --- */
/* 外側の親要素 */
.vitoas-brand-wrapper .txt-slide-area {
	width: 100%;
	overflow: hidden;
	display: flex;
	padding: 10px 0;
}

/* 動くテキスト */
.vitoas-brand-wrapper .txt-slide {
	white-space: nowrap;
	padding-right: 1em;
	font-weight: 500;
	line-height: 1;
	/* アニメーション：linearで一定の速度に */
	animation: loop-slide var(--duration) linear infinite;
}

/* 無限ループの設定 */
@keyframes loop-slide {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

/* --- デバイス間で速度を一定にするための秒数指定 --- */
/* PC */
@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .txt-slide-area {
		padding: 20px 0;
	}

	.vitoas-brand-wrapper .txt-slide {
		--duration: 20s;
		font-size: 80px;
	}
}

/* SP */
@media screen and (max-width: 768px) {
	.vitoas-brand-wrapper .txt-slide {
		--duration: 10s;
		font-size: 40px;
	}
}

/* myperfection */
/* ============================================================
うるおいスライダー (.uruoi-wrapper) 最終構成
============================================================ */
/* ページネーションの強制表示と色設定 */
/* 共通の display: none !important を打ち消すため !important を付与 */
.vitoas-brand-wrapper .uruoi-wrapper .swiper-pagination {
	display: block !important;
	position: relative !important;
	bottom: 0 !important;
	text-align: center !important;
	line-height: 1 !important;
}

/* ドットのスタイル：枠線と選択色 */
.vitoas-brand-wrapper .uruoi-wrapper .swiper-pagination-bullet {
	background: transparent !important;
	border: 1px solid #e84d07 !important;
	opacity: 1 !important;
	width: 10px;
	height: 10px;
	margin: 0 6px !important;
	box-sizing: border-box;
}

.vitoas-brand-wrapper .uruoi-wrapper .swiper-pagination-bullet-active {
	background: #e84d07 !important;
}

/* --- SP：768px以下の設定 --- */
@media screen and (max-width: 768px) {
	.vitoas-brand-wrapper .uruoi-wrapper {
		padding: 0 !important;
		/* 左右隙間なし */
		overflow: hidden;
		margin-bottom: 30px;
	}

	.vitoas-brand-wrapper .uruoi-slide img {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 0;
	}

	.vitoas-brand-wrapper .uruoi-wrapper .swiper-pagination {
		margin-top: 15px;
		/* 画像とドットの距離 */
	}
}

/* --- PC：769px以上の設定 --- */
@media screen and (min-width: 769px) {
	.vitoas-brand-wrapper .uruoi-wrapper {
		max-width: 1190px;
		margin: 0 auto;
		overflow: hidden;
	}

	.vitoas-brand-wrapper .uruoi-wrapper .swiper-pagination {
		margin-top: 20px;
		/* PCでの画像とドットの距離 */
	}

	.vitoas-brand-wrapper .uruoi-slide img {
		width: 100%;
		height: auto;
		display: block;
	}
}

@media screen and (min-width: 1025px) {
	.vitoas-brand-wrapper a {
		transition: 0.3s;
	}

	.vitoas-brand-wrapper a:hover {
		opacity: 0.8;
	}
}