@charset "utf-8";

/* ----------------------------------
 リセット
---------------------------------- */
body, h1, h2, h3, h4, h5, p, ul, li, dl, dt, dd, img, figure {
	padding: 0;
  margin: 0;
	border: none;
	outline: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	list-style: none;
	box-sizing: border-box;
}
img {
	max-width: 100%;
  vertical-align: bottom;
  display: inline-block;
}

/* ----------------------------------
 バリアUVプロテクション
---------------------------------- */
#lp_main { margin: 0 0 50px;}
#lp_contents { width: 100%; max-width: 750px; margin: 0 auto;}
#lp_contents * { box-sizing: border-box;}

@media screen and (max-width: 750px) {
	#lp_contents { overflow-x: hidden;}
}

#lp_main br.bz-small { display: none;}
@media screen and (max-width: 600px) {
	#lp_main br.bz-small { display: block;}
}

/* 追従バナー
---------------------------------- */
#lp_main .floting--bnr {
  width: 93.333%;
  max-width: 700px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  z-index: 9999;
  display: none;
}
#lp_main .floting--bnr a {
	width: 100%;
	height: 64px;
	height: clamp(64px, 10.000vw, 130px);
	border-radius: 6px;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #25B5FE;
	background: linear-gradient(330deg,rgba(37, 181, 254, 1) 0%, rgba(0, 161, 214, 1) 35%, rgba(0, 100, 187, 1) 100%);
	box-shadow: 7px 7px 0 rgb(0,0,0,0.16);
}
#lp_main .floting--bnr .line01 { font-size: 14px; font-size: clamp(14px, 2.3438vw, 24px); text-align: center; color: #FFF;}
#lp_main .floting--bnr .line02 { font-size: 20px; font-size: clamp(20px, 3.5156vw, 36px); font-weight: 400; text-align: center; color: #FFF;}
#lp_main .floting--bnr .line02::before,
#lp_main .floting--bnr .line02::after {
	content: '';
  width: 0;
  height: 0;
  border-left: #FFF 9px solid;
  border-left: #FFF clamp(9px, 1.4648vw, 15px) solid;
  border-top: transparent 5px solid;
  border-top: transparent clamp(5px, 0.9766vw, 10px) solid;
  border-bottom: transparent 5px solid;
  border-bottom: transparent clamp(5px, 0.9766vw, 10px) solid;
  display: inline-block;
  transition: transform 0.25s ease;
	transform: rotate(90deg);
}
#lp_main .floting--bnr .line02::before { margin: 0 15px 0 0; margin: 0 clamp(15px, 2.9297vw, 30px) 0 0;}
#lp_main .floting--bnr .line02::after  { margin: 0 0 0 15px; margin: 0 0 0 clamp(15px, 2.9297vw, 30px);}

@media screen and (max-width: 450px) {
	#lp_main .floting--bnr .line01 { font-size: 12px;}
	#lp_main .floting--bnr .line02 { font-size: 16px;}
	#lp_main .floting--bnr .line02::before { margin: 0 7px 0 0;}
	#lp_main .floting--bnr .line02::after  { margin: 0 0 0 7px;}
}

/* オファー
---------------------------------- */
.sec-offer .offer-head { margin: 0 0 18px; margin: 0 0 clamp(18px, 1.9531vw, 20px); display: flex; justify-content: center; align-items: center;}
.sec-offer .offer-head .offer-head-pop { min-width: 80%; font-size: 24px; font-size: clamp(24px, 3.5156vw, 36px); text-align: center; position: relative;}
.sec-offer .offer-head .offer-head-pop::before,
.sec-offer .offer-head .offer-head-pop::after {
	content: '';
	width: 25%;
	background-image: url("../../img/usr/freepage/barrieruv_ad/offer_ttl_left.png");
	background-repeat: no-repeat;
	background-position: left top;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.sec-offer .offer-head .offer-head-pop::after {
	background-image: url("../../img/usr/freepage/barrieruv_ad/offer_ttl_right.png");
	background-position: right top;
	left: auto;
	right: 0;
}
.sec-offer .offer-body {
	padding: 30px 20px;
	padding: clamp(30px, 4.8828vw, 50px) clamp(20px, 2.9297vw, 30px);
	background: #00B4F0;
	background: linear-gradient(180deg,rgba(0, 180, 240, 1) 0%, rgba(0, 140, 210, 1) 50%, rgba(0, 100, 180, 1) 100%);
}
.sec-offer .offer-body-inner {
  border: #FFF 4px solid;
  border: #FFF clamp(4px, 0.6836vw, 7px) solid;
  border-radius: 14px;
  background: #FFF;
  box-shadow: 0 0 14px rgb(0, 55, 99, 0.5);
}
.sec-offer .offer-body-head {
	padding: 28px 0 18px;
	padding: clamp(28px, 3.9063vw, 40px) 0 clamp(18px, 1.9531vw, 20px);
	border-radius: 8px 8px 0 0;
	background: #E9F8FF;
	background: linear-gradient(180deg,rgba(233, 248, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.sec-offer .offer-body-head .pop {
  margin: 0 0 8px;
  margin: 0 0 clamp(8px, 0.9766vw, 10px);
  font-size: 20px;
  font-size: clamp(20px, 3.5156vw, 36px);
  text-align: center;
  letter-spacing: -0.05em;
  line-height: 1.0;
}
.sec-offer .offer-body-head .pop-title {
  margin: 0 0 18px;
  margin: 0 0 clamp(18px, 1.9531vw, 20px);
  font-size: 36px;
  font-size: clamp(36px, 5.8594vw, 68px);
  text-align: center;
  line-height: 1.0;
}
.sec-offer .offer-body-head .pop-sub {
  margin: 0 0 18px;
  margin: 0 0 clamp(18px, 1.9531vw, 20px);
  font-size: 14px;
  font-size: clamp(14px, 2.3438vw, 24px);
  text-align: center;
  line-height: 1.6;
}
.sec-offer .name-frame {
  padding: 14px;
  padding: clamp(14px, 1.4648vw, 15px);
  margin: 0 8px 18px;
  margin: 0 clamp(8px, 0.9766vw, 10px) clamp(18px, 1.9531vw, 20px);
  background: #F5F5F5;
}
.sec-offer .name-frame .name { margin: 0 0 5px; font-size: 20px; font-size: clamp(20px, 2.7344vw, 28px); text-align: center; line-height: 1.2;}
.sec-offer .name-frame .sub { font-size: 16px; font-size: clamp(16px, 1.9531vw, 20px); text-align: center;}
.sec-offer .detail-frame { margin: 0 0 20px; margin: 0 0 clamp(20px, 2.4414vw, 25px);}
.sec-offer .detail-frame .spf { margin: 0 0 5px; font-size: 16px; font-size: clamp(16px, 2.1484vw, 22px); text-align: center;}
.sec-offer .detail-frame .qty { font-size: 16px; font-size: clamp(16px, 2.1484vw, 22px); text-align: center; color: #878787;}
.sec-offer .for-order-button { padding: 0 18px 20px; padding: 0 clamp(18px, 1.9531vw, 20px) clamp(20px, 2.9297vw, 30px); line-height: 1.0;}
.sec-offer .for-order-button a {
	width: 100%;
	height: 64px;
	height: clamp(64px, 10.000vw, 130px);
	padding: 0 0 5px;
	margin: 0 auto;
	border-radius: 64px;
	border-radius: clamp(64px, 10.000vw, 130px);
	text-decoration: none;
	line-height: 1.0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #FFAE5D;
	background: linear-gradient(180deg,rgba(255, 174, 93, 1) 0%, rgba(255, 151, 79, 1) 35%, rgba(255, 112, 55, 1) 100%);
	box-shadow: 0 3px 9px rgb(0,0,0,0.29);
	position: relative;
}
.sec-offer .for-order-button a::after {
	content: '';
  width: 0;
  height: 0;
  border-left: #FFF 9px solid;
  border-left: #FFF clamp(9px, 1.4648vw, 15px) solid;
  border-top: transparent 5px solid;
  border-top: transparent clamp(5px, 0.9766vw, 10px) solid;
  border-bottom: transparent 5px solid;
  border-bottom: transparent clamp(5px, 0.9766vw, 10px) solid;
  display: inline-block;
  transition: transform 0.25s ease;
	position: absolute;
	right: 20px;
	right: clamp(20px, 3.9063vw, 40px);
	top: calc(50% - 4.5px);
	top: calc(50% - calc(clamp(9px, 1.4648vw, 15px)/2));
	transform: rotate(90deg);
}
.sec-offer .for-order-button .button-frame    { font-size: 12px; font-size: clamp(12px, 3.5156vw, 36px); font-weight: 300; color: #FFF;}
.sec-offer .for-order-button .button-frame .l { font-size: 20px; font-size: clamp(20px, 4.2969vw, 44px); font-weight: 400; text-align: center; color: #FFF;}
.sec-offer .for-order-button .button-frame .m { font-size: 16px; font-size: clamp(16px, 3.9063vw, 40px); font-weight: 300; text-align: center; color: #FFF;}

@media screen and (max-width: 600px) {
	.sec-offer .offer-head .offer-head-pop { min-width: 90%;}
}
@media screen and (max-width: 375px) {
	.sec-offer .offer-head .offer-head-pop { min-width: 100%; font-size: 22px;}
	.sec-offer .for-order-button a::after { display: none;}
}

/* 01：メインビジュアル
---------------------------------- */
#sec_head .logo { padding: 18px; padding: clamp(18px, 1.9531vw, 20px); display: flex; justify-content: center; align-items: center;}
#sec_head .logo img { width: 41%; max-width: 308px; margin: auto; vertical-align: top;}
#sec_head .mv { text-align: center;}
#sec_head .mv img { width: 100%; vertical-align: top;}
#sec_head .title-sub { padding: 18px; padding: clamp(18px, 1.9531vw, 20px); text-align: center; background: #F5F5F5;}
#sec_head .title-sub .pop { font-size: 20px; font-size: clamp(20px, 2.9297vw, 30px); text-align: center;}
#sec_head .title-sub .pop-title { font-size: 32px; font-size: clamp(32px, 5.2734vw, 54px); text-align: center;}
#sec_head .product-data { padding: 28px; padding: clamp(28px, 3.9063vw, 40px); display: flex; justify-content: space-between; align-items: center;}
#sec_head .product-data .desc-frame { width: 65%; background: #FFF;}
#sec_head .product-data .desc-frame .name { margin: 0 0 18px; margin: 0 0 clamp(18px, 1.9531vw, 20px); font-size: 16px; font-size: clamp(16px, 2.5391vw, 26px); color: #878787;}
#sec_head .product-data .desc-frame .sub { font-size: 12px; font-size: clamp(12px, 2.1484vw, 22px); color: #878787;}
#sec_head .product-data .image-frame { width: 35%; text-align: center;}
#sec_head .product-data .image-frame .image { width: 75%; margin: 0 auto;}
#sec_head .product-data .image-frame .image img { width: 100%; vertical-align: top;}
#sec_head .product-data .image-frame .memo { margin: 10px 0 0; font-size: 12px; font-size: clamp(12px, 1.5625vw, 16px); text-align: center;}

@media screen and (max-width: 375px) {
	#sec_head .product-data { padding: 20px;}
}

/* 02：こんなお悩みありませんか？
---------------------------------- */
#sec_freesample .sec-title { padding: 18px 0; padding: clamp(18px, 1.9531vw, 20px) 0; text-align: center; line-height: 1.0; background: #00B4F0;}
#sec_freesample .sec-title span { font-size: 20px; font-size: clamp(20px, 3.7109vw, 38px); font-weight: 400; text-align: center; color: #FFF;}
#sec_freesample .sec-title::before,
#sec_freesample .sec-title::after {
	content: '';
  width: 0;
  height: 0;
  border-left: #FFF clamp(9px, 1.4648vw, 15px) solid;
  border-left: #FFF 9px solid;
  border-top: transparent 5px solid;
  border-top: transparent clamp(5px, 0.9766vw, 10px) solid;
  border-bottom: transparent 5px solid;
  border-bottom: transparent clamp(5px, 0.9766vw, 10px) solid;
  display: inline-block;
  transition: transform 0.25s ease;
	transform: rotate(90deg);
}
#sec_freesample .sec-title::before { margin: 0 15px 0 0; margin: 0 clamp(15px, 2.9297vw, 30px) 0 0;}
#sec_freesample .sec-title::after  { margin: 0 0 0 15px; margin: 0 0 0 clamp(15px, 2.9297vw, 30px);}
#sec_freesample .sec-body {
	padding: 30px 20px;
	padding: clamp(30px, 4.8828vw, 50px) clamp(20px, 2.9297vw, 30px);
	background-color: #FEFFFF;
	background-image: url("../../img/usr/freepage/barrieruv_ad/sec_freesample_bg.png");
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	position: relative;
}
#sec_freesample .line01 { margin: 0 0 14px; margin: 0 0 clamp(14px, 1.4648vw, 15px); font-size: 16px; font-size: clamp(16px, 2.3438vw, 24px); text-align: center;}
#sec_freesample .line02 { margin: 0 0 30px; margin: 0 0 clamp(30px, 4.8828vw, 50px); font-size: 28px; font-size: clamp(28px, 4.4922vw, 46px); font-weight: 400; text-align: center;}
#sec_freesample .voice-list li { font-size: 12px; font-size: clamp(12px, 2.3438vw, 24px); display: flex; position: relative;}
#sec_freesample .voice-list li.voice01 { z-index: 1;}
#sec_freesample .voice-list li.voice02 { z-index: 2; justify-content: flex-end;}
#sec_freesample .voice-list li.voice03 { z-index: 3;}
#sec_freesample .voice-list li.voice04 { z-index: 2; justify-content: flex-end;}
#sec_freesample .voice-list li.voice05 { z-index: 4; padding-top: 28px; padding-top: clamp(28px, 3.9063vw, 40px);}
#sec_freesample .voice-box {
	padding: 0 20px;
	padding: 0 clamp(28px, 3.9063vw, 40px);
	font-size: 12px;
	font-size: clamp(12px, 2.3438vw, 24px);
	text-align: left;
	line-height: 2.0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	position: relative;
}
#sec_freesample .voice01 .voice-box { 
	width: 60.53vw; max-width: 454px; height: 33.33vw; max-height: 250px;
	padding-bottom: 30px; padding-bottom: clamp(30px, 8.26vw, 62px);
	background-image: url("../../img/usr/freepage/barrieruv_ad/sec_freesample_voice01.png");
}
#sec_freesample .voice02 .voice-box {
	width: 52vw; max-width: 390px; height: 29.33vw; max-height: 220px;
	background-image: url("../../img/usr/freepage/barrieruv_ad/sec_freesample_voice02.png");
	padding-bottom: 20px; padding-bottom: clamp(20px, 5.33vw, 40px);
	position: absolute; top: 0; right: -50px; right: calc(clamp(50px, 8.0000vw, 70px) * -1); transform: translate(0, -40%);
}
#sec_freesample .voice03 .voice-box {
	width: 50.66vw; max-width: 380px; height: 30vw; max-height: 225px;
	padding-bottom: 27px; padding-bottom: clamp(27px, 6.93vw, 52px);
	background-image: url("../../img/usr/freepage/barrieruv_ad/sec_freesample_voice03.png");
	position: absolute; top: 0; left: -40px; left: calc(clamp(40px, 8vw, 60px) * -1);
}
#sec_freesample .voice04 .voice-box {
	width: 50.26vw; max-width: 377px; height: 34vw; max-height: 255px;
	padding-bottom: 23px; padding-bottom: clamp(23px, 6.1vw, 46px);
	background-image: url("../../img/usr/freepage/barrieruv_ad/sec_freesample_voice04.png");
	transform: translate(0, 50%); left: -20px; left: calc(clamp(20px, 2.9297vw, 30px) * -1);
}
#sec_freesample .voice05 .voice-box {
	width: 55.6vw; max-width: 417px; height: 32vw; max-height: 240px;
	padding-bottom: 23px; padding-bottom: clamp(23px, 6.1vw, 46px);
	background-image: url("../../img/usr/freepage/barrieruv_ad/sec_freesample_voice05.png");
}
#sec_freesample .image { width: 45%; position: absolute; right: 0; bottom: 0; z-index: 5;}
#sec_freesample .image img { width: 100%; vertical-align: top;}

@media screen and (max-width: 375px) {
	#sec_freesample .line01 { font-size: 14px;}
	#sec_freesample .line02 { font-size: 22px; letter-spacing: -1px;}
	#sec_freesample .sec-title span { font-size: 18px;}
	#sec_freesample .sec-title::before { margin-right: 7px;}
	#sec_freesample .sec-title::after  { margin-left: 7px;}
	#sec_freesample .voice-list li { font-size: 11px;}
	#sec_freesample .voice-box { font-size: 11px; letter-spacing: -1px;}
	#sec_freesample .voice02 .voice-box { padding-bottom: 14px;}
	#sec_freesample .voice03 .voice-box { padding-bottom: 20px;}
	#sec_freesample .voice05 .voice-box { padding-bottom: 16px;}
}

/* 03：皮膚科医の97.7%は
---------------------------------- */
#sec_doctor {
	margin: 0 0 30px;
	margin: 0 0 clamp(30px, 4.8828vw, 50px);
	padding: 30px 20px;
	padding: clamp(30px, 4.8828vw, 50px) clamp(20px, 2.9297vw, 30px);
	background-color: #FFF;
	background-image: url("../../img/usr/freepage/barrieruv_ad/sec_doctor_bg.png");
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;	
}
#sec_doctor .sec-head { margin: 0 0 30px; margin: 0 0 clamp(30px, 4.8828vw, 50px); position: relative;}
#sec_doctor .sec-head .text-top { margin: 0 0 18px; margin: 0 0 clamp(18px, 1.9531vw, 20px); font-size: 18px; font-size: clamp(18px, 3.5156vw, 34px);}
#sec_doctor .sec-head h2 { margin: 18px -20px; margin: 0 0 clamp(18px, 1.9531vw, 20px) calc(-1 * clamp(20px, 2.9297vw, 30px)); display: flex; flex-direction: column;}
#sec_doctor .sec-head h2 span + span { margin-top: 10px;}
#sec_doctor .sec-head h2 span {
  padding: 7px 30px 7px 20px;
  padding: 7px clamp(30px, 4.8828vw, 50px) 7px clamp(20px, 2.9297vw, 30px);
  margin: 0 auto 0 0;
	font-size: 18px;
  font-size: clamp(18px, 3.5156vw, 34px);
  color: #00B4F0;
  background: #FFF;
}
#sec_doctor .sec-head .text-bottom { font-size: 18px; font-size: clamp(18px, 3.5156vw, 34px);}
#sec_doctor .sec-head .design { width: 31%; position: absolute; right: 10px; bottom: 10px;}
#sec_doctor .sec-head .design img { width: 100%; vertical-align: top;}
#sec_doctor .q-list { margin: 0 0 20px; margin: 0 0 clamp(20px, 2.9297vw, 30px);}
#sec_doctor .q-list .q-box + .q-box { margin-top: 30px; margin-top: clamp(30px, 4.8828vw, 50px);}
#sec_doctor .q-list .q-box { display: flex; justify-content: space-between; align-items: center;}
#sec_doctor .q-list .q-box .q { width: 62%; padding: 0 0 0 2.5em; font-size: 16px; font-size: clamp(16px, 2.3438vw, 24px); text-align: left; line-height: 2.0; position: relative;}
#sec_doctor .q-list .q-box .q::after {
	content: '';
	width: 2em;
	height: 2em;
	background-image: url("../../img/usr/freepage/barrieruv_ad/sec_doctor_q.png");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	display: block;
	position: absolute;
	top: -0.5em;
	left: 0;
}
#sec_doctor .q-list .q-box .image { width: 32%;}
#sec_doctor .q-list .q-box .image img { width: 100%; vertical-align: top;}
#sec_doctor .memo { font-size: 12px; font-size: clamp(12px, 1.8555vw, 19px); text-align: right; line-height: 1.4;}
#sec_doctor .arrow-frame { margin: 25px 0 0;}
#sec_doctor .arrow-frame .arrow { width: 22%; margin: 0 auto;}
#sec_doctor .arrow-frame .arrow img { width: 100%; vertical-align: top; position: relative; bottom: -15px;}
#sec_doctor .after {
  padding: 28px;
  padding: clamp(28px, 3.9063vw, 40px);
  border: #00B4F0 6px solid;
	outline: #82D2FA 4px solid;
	font-size: 14px;
  font-size: clamp(14px, 2.5391vw, 26px);
  text-align: center;
	line-height: 2.0;
  background: #FFF;
}
#sec_doctor .after span {
	padding: 10px;
	padding: 0 clamp(10px, 2.9297vw, 30px);
	margin: 0 auto;
	font-size: 14px;
  font-size: clamp(14px, 2.5391vw, 26px);
  text-align: center;
  display: inline;
  background: linear-gradient(transparent 60%, rgba(249,255,88,0.8) 60%);	
}
#sec_doctor .after strong { font-weight: 400;}

@media screen and (max-width: 600px) {
	#sec_doctor .sec-head .design { right: 0; bottom: 0;}
	#sec_doctor .memo { font-size: 10px; letter-spacing: -1px;}
	#sec_doctor .arrow-frame { margin: 0;}
	#sec_doctor .after { padding: 15px 0; border: #00B4F0 3px solid; outline: #82D2FA 2px solid;}
}
@media screen and (max-width: 375px) {
	#sec_doctor .sec-head .text-top { font-size: 16px;}
	#sec_doctor .sec-head h2 span { font-size: 16px;}
	#sec_doctor .sec-head .text-bottom { font-size: 16px;}
	#sec_doctor .q-list .q-box .q { font-size: 14px; line-height: 1.8;}
	#sec_doctor .memo { word-break: keep-all; white-space: nowrap;}
	#sec_doctor .after { font-size: 12px; letter-spacing: -0.5px;}
	#sec_doctor .after span { font-size: 12px;}
}

/* 04：角層バリア
---------------------------------- */
#sec_barrier {
	padding: 50px 20px;
	padding: clamp(50px, 8.0000vw, 70px) clamp(20px, 2.9297vw, 30px);
	background-color: #EBF8FB;
	background-image: url("../../img/usr/freepage/barrieruv_ad/sec_barrier_bg.png");
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}
#sec_barrier .sec-head { margin: 0 0 50px; margin: 0 0 clamp(50px, 8.0000vw, 70px);}
#sec_barrier .sec-head .text-top { margin: 0 0 28px; margin: 0 0 clamp(28px, 3.9063vw, 40px); font-size: 20px; font-size: clamp(20px, 2.9297vw, 30px); text-align: center;}
#sec_barrier .sec-head .text-top strong { font-size: 24px; font-size: clamp(24px, 3.9063vw, 40px); font-weight: 300;}
#sec_barrier .sec-head .text-bottom { font-size: 20px; font-size: clamp(20px, 2.9297vw, 30px); text-align: center;}
#sec_barrier .sec-head .text-bottom .liner {
	padding: 0 10px;
	padding: 0 clamp(10px, 2.9297vw, 30px);
	margin: 0 auto;
  font-size: clamp(20px, 2.9297vw, 30px);
  text-align: center;
  display: inline;
  background: linear-gradient(transparent 60%, rgba(249,255,88,0.8) 60%);
}
#sec_barrier .sec-head .text-bottom strong { font-size: 24px; font-size: clamp(24px, 3.9063vw, 40px); font-weight: 300;}
#sec_barrier .barrier-box {
	border-radius: 14px;
	padding: 28px 20px;
	padding: clamp(28px, 3.9063vw, 40px) clamp(20px, 5.8594vw, 60px);
	text-align: center;
	background: #FFF;
	box-shadow: 0 0 25px rgb(158,205,216,0.8);
}
#sec_barrier .barrier-box .text {
  margin: 0 0 18px;
  margin: 0 0 clamp(18px, 1.9531vw, 20px);
	font-size: 14px;
  font-size: clamp(14px, 2.5391vw, 26px);
  text-align: center;
  line-height: 1.8;
  position: relative;
}
#sec_barrier .barrier-box .text::before,
#sec_barrier .barrier-box .text::after {
	content: '';
	width: 14px;
	width: clamp(14px, 2.3438vw, 24px);
	height: 14px;
	height: clamp(14px, 2.3438vw, 24px);
	background-image: url("../../img/usr/freepage/barrieruv_ad/dash_top.png");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
	display: block;
	position: absolute;
}
#sec_barrier .barrier-box .text::before { top: 0; left: -10px;}
#sec_barrier .barrier-box .text::after  { background-image: url("../../img/usr/freepage/barrieruv_ad/dash_bottom.png"); right: -10px; bottom: 0;}
#sec_barrier .barrier-box .image { margin: 0 0 18px; margin: 0 0 clamp(18px, 1.9531vw, 20px);}
#sec_barrier .barrier-box .image img { width: 100%; vertical-align: top;}
#sec_barrier .barrier-box .name { display: flex; justify-content: center; align-items: center;}
#sec_barrier .barrier-box .name span {
	padding: 6px 24px;
  padding: clamp(6px, 0.9766vw, 10px) clamp(24px, 4.8828vw, 50px);
  margin: 0 auto;
  border-radius: 50px;
	font-size: 18px;
  font-size: clamp(18px, 2.7344vw, 28px);
  text-align: center;
  color: #FFF;
  background: #82D2FA;
}
#sec_barrier .arrow-frame { margin: 35px 0 0;}
#sec_barrier .arrow-frame .text { font-size: 20px; font-size: clamp(20px, 2.9297vw, 30px); text-align: center; color: #00B4F0;}
#sec_barrier .arrow-frame .arrow { width: 22%; margin: 0 auto;}
#sec_barrier .arrow-frame .arrow img { width: 100%; vertical-align: top; position: relative; bottom: -15px;}

@media screen and (max-width: 375px) {
	#sec_barrier .sec-head .text-top { font-size: 16px;}
	#sec_barrier .sec-head .text-top strong { font-size: 22px;}
	#sec_barrier .sec-head .text-bottom { font-size: 16px;}
	#sec_barrier .sec-head .text-bottom .liner { font-size: 16px;}
	#sec_barrier .sec-head .text-bottom strong { font-size: 22px;}
}

/* 05：すこやかな角層を育むことが大切
---------------------------------- */
#sec_product {
	padding: 0 20px 50px;
	padding: 0 clamp(20px, 2.9297vw, 30px) clamp(50px, 8.0000vw, 70px);
	background: #FFFFFF;
	background: linear-gradient(165deg,rgba(255, 255, 255, 1) 0%, rgba(224, 240, 248, 1) 100%);	
}
#sec_product .sec-title {
	padding: 30px 0;
	padding: clamp(30px, 4.8828vw, 50px) 0;
	margin: 0 -20px 60px;
	margin: 0 calc(-1 * clamp(20px, 2.9297vw, 30px)) 60px;
	display: flex;
	flex-direction: column;
	background: #00A4DB;
	background: linear-gradient(165deg,rgba(0, 164, 219, 1) 0%, rgba(34, 189, 244, 1) 50%, rgba(78, 196, 255, 1) 100%);
	position: relative;
}
#sec_product .sec-title::after {
	content: '';
  width: 0;
  height: 0;
  border-left: #37C0F9 40px solid;
  border-top: transparent 60px solid;
  border-bottom: transparent 60px solid;
  display: inline-block;
  transition: transform 0.25s ease;
	position: absolute;
	left: calc(50% - 17px);
	bottom: -60px;
	transform: rotate(90deg);
}
#sec_product .sec-title span + span { margin-top: 10px;}
#sec_product .sec-title .s { font-size: 18px; font-size: clamp(18px, 3.5156vw, 34px); text-align: center; color: #FFF;}
#sec_product .sec-title .l { font-size: 26px; font-size: clamp(26px, 4.2969vw, 44px); text-align: center; color: #FFF;}
#sec_product .title-sub .pop {
  margin: 0 0 8px;
  margin: 0 0 clamp(8px, 0.9766vw, 10px);
  font-size: 24px;
  font-size: clamp(24px, 3.5156vw, 36px);
  text-align: center;
  letter-spacing: -0.05em;
  line-height: 1.0;
}
#sec_product .title-sub .pop-title {
	margin: 0 0 18px;
  margin: 0 0 clamp(18px, 1.9531vw, 20px);
	font-size: 32px;
	font-size: clamp(32px, 3.9063vw, 40px);
  text-align: center;
  line-height: 1.0;
}
#sec_product .text { margin: 0 0 18px; margin: 0 0 clamp(18px, 1.9531vw, 20px); font-size: 18px; font-size: clamp(18px, 2.3438vw, 24px); text-align: center; line-height: 1.6;}
#sec_product .image { padding: 0 30px; padding: 0 clamp(30px, 4.8828vw, 50px); text-align: center;}
#sec_product .image img { width: 100%; vertical-align: top;}
#sec_product .name-frame {
  padding: 14px;
  padding: clamp(14px, 1.4648vw, 15px);
  margin: 0 8px 18px;
  margin: 0 clamp(8px, 0.9766vw, 10px) clamp(18px, 1.9531vw, 20px);
  border: #00B4F0 1px solid;
}
#sec_product .name-frame .name { margin: 0 0 5px; font-size: 16px; font-size: clamp(16px, 2.5391vw, 26px); font-weight: 400; text-align: center; line-height: 1.2; color: #00B4F0;}
#sec_product .name-frame .sub { font-size: 16px; font-size: clamp(16px, 2.5391vw, 26px); text-align: center; color: #00B4F0;}
#sec_product .spf { margin: 0 0 14px; margin: 0 0 clamp(14px, 1.4648vw, 15px); font-size: 16px; font-size: clamp(16px, 2.1484vw, 22px); text-align: center;}
#sec_product .price-frame { margin: 0 0 14px; margin: 0 0 clamp(14px, 1.4648vw, 15px); display: flex; justify-content: center; align-items: flex-end;}
#sec_product .price-frame .qty { padding: 0 0 5px; margin: 0 30px 0 0; font-size: 20px; font-size: clamp(20px, 2.5391vw, 26px);}
#sec_product .price-frame .price { font-size: 30px; font-size: clamp(30px, 4.2969vw, 44px);}
#sec_product .price-frame .price .yen { margin: 0 0 0 3px; font-size: 20px; font-size: clamp(20px, 2.5391vw, 26px);}
#sec_product .price-frame .price .tax { font-size: 16px; font-size: clamp(16px, 2.1484vw, 22px);}
#sec_product .release-date { font-size: 16px; font-size: clamp(16px, 2.1484vw, 22px); text-align: center;}

/* 06：特徴
---------------------------------- */
#sec_features { padding: 50px 20px; padding: clamp(50px, 8.0000vw, 70px) clamp(20px, 2.9297vw, 30px);}
#sec_features .features-list .feature-box + .feature-box { margin-top: 80px; margin-top: clamp(80px, 10vw, 120px);}
#sec_features .feature-box { position: relative;}
#sec_features .feature-box .number { 
	width: 90px;
	width: clamp(90px, 24vw, 185px);
	padding: 90px 0 0 0;
	padding: clamp(90px, 24vw, 185px) 0 0 0;
	border-radius: 50%;
	background: #00B4F0;
	position: absolute;
	left: -20px;
	left: calc((clamp(10px, 2.9297vw, 30px) + 20px) * -1);
	top: 0;
}
#sec_features .feature-box .number .wrap {
	font-size: 20px;
	font-size: clamp(20px, 2.7344vw, 28px);
	font-weight: 400;
	line-height: 1.0;
	color: #FFF;
  display: flex;
	flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#sec_features .feature-box .number .wrap .num { margin-top: 5px; font-size: 30px; font-size: clamp(30px, 5.4688vw, 56px); font-weight: 300; text-align: center; color: #FFF; display: block;}
#sec_features .feature-box .feature-title {
  min-height: 90px;
  min-height: clamp(90px, 24vw, 185px);
  padding: 0;
	margin: 0 0 30px 90px;
  margin: 0 0 clamp(30px, 4.8828vw, 50px) clamp(90px, 24vw, 185px);
	line-height: 1.4;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#sec_features .feature-box .feature-title span {
  padding: 0 0 20px;
	font-size: 20px;
  font-size: clamp(20px, 4.2969vw, 44px);
  text-align: left;
  position: relative;
}
#sec_features .feature-box .feature-title span::after {
	content: '';
	width: 65vw;
	max-width: 500px;
	border-bottom: #000000 1px solid;
	display: block;
	position: absolute;
	bottom: 0;
	left: -40px;
}
#sec_features .feature-box .feature-title span sup { font-size: 13px; font-size: clamp(13px, 1.9531vw, 20px)}
#sec_features .feature-box .feature-sub-ttl {
	margin: 0 0 28px -20px;
  margin: 0 0 clamp(28px, 3.9063vw, 40px) calc(-1 * clamp(20px, 2.9297vw, 30px));
  display: flex;
  flex-direction: column;
}
#sec_features .feature-box .feature-sub-ttl span + span { margin-top: 10px;}
#sec_features .feature-box .feature-sub-ttl span {
	padding: 7px 30px 7px 20px;
  padding: 7px clamp(30px, 4.8828vw, 50px) 7px clamp(20px, 2.9297vw, 30px);
  margin: 0 auto 0 0;
	font-size: 18px;
  font-size: clamp(18px, 3.5156vw, 34px);
  color: #00B4F0;
  background: #F5F5F5;
}
#sec_features .feature-box .text { margin: 0 0 20px; margin-bottom: clamp(20px, 2.9297vw, 30px); font-size: 16px; font-size: clamp(16px, 2.3438vw, 24px); text-align: left; line-height: 2.0;}
#sec_features .feature-box .image { margin: 0 7% 20px; margin: 0 7% clamp(20px, 2.9297vw, 30px); text-align: center;}
#sec_features .feature-box .image img { width: 100%; vertical-align: top;}
#sec_features .feature-box .memo { margin-top: 20px; margin-top: clamp(20px, 2.9297vw, 30px); font-size: 12px; font-size: clamp(12px, 1.8555vw, 19px); text-align: right; line-height: 1.4;}
#sec_features .sekkei-list { margin: 0 -20px; display: flex; justify-content: center; gap: 10px;}
#sec_features .sekkei-list + .sekkei-list { margin-top: 18px;}
#sec_features .sekkei-list li {
  width: calc((100% - 10px * 3)/4);
  padding: calc((100% - 10px * 3)/4) 0 0;
  border-radius: 50%;
  position: relative;
  background: #FAC8B4;
}
#sec_features .sekkei-list li .inbox {
	display: flex;
	align-items: center;
	justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#sec_features .sekkei-list li .inbox p { font-size: 11px; font-size: clamp(11px, 1.8555vw, 19px); font-weight: 400; text-align: center; color: #FFF;}
#sec_features .sekkei-list li .inbox p span { font-size: 11px; font-size: clamp(11px, 1.8555vw, 19px); font-weight: 400;}
#sec_features .sekkei-list li .inbox p .s { font-size: 0.7em;}

@media screen and (max-width: 375px) {
	#sec_features .feature-box .feature-title { padding: 0 0 0 30px;}
	#sec_features .feature-box .feature-title span { padding: 0 0 10px; font-size: 18px;}
	#sec_features .feature-box .feature-title span::after { width: 60vw; left: -20px;}
	#sec_features .feature-box .feature-sub-ttl span { padding: 7px 12px 7px 20px; font-size: 16px; letter-spacing: -1px;}
	#sec_features .feature-box .text { font-size: 14px;}
	#sec_features .feature-box .memo { font-size: 11px; letter-spacing: -1px;}
	#sec_features .sekkei-list + .sekkei-list { margin-top: 10px;}
	#sec_features .sekkei-list li { margin: 3px;}
	#sec_features .sekkei-list li .inbox p { font-size: 10px; letter-spacing: -1px;}
	#sec_features .sekkei-list li .inbox p span { font-size: 10px;}
}

/* 07：肌を知っているから、その肌と向き合える。
---------------------------------- */
#sec_tomorrow { padding: 50px 20px; padding: clamp(50px, 8.0000vw, 70px) clamp(20px, 2.9297vw, 30px); text-align: center; background: #FFF;}
#sec_tomorrow .sec-title { margin: 0 0 30px; margin: 0 0 clamp(30px, 4.8828vw, 50px); display: flex; justify-content: center; flex-direction: column;}
#sec_tomorrow .sec-title span + span { margin-top: 10px;}
#sec_tomorrow .sec-title span {
	padding: 0 10px;
	padding: 0 clamp(10px, 2.9297vw, 30px);
	margin: 0 auto;
  font-size: 22px;
  font-size: clamp(22px, 4.8828vw, 50px);
  text-align: center;
  display: inline;
  background: linear-gradient(transparent 60%, rgba(250,200,180,0.55) 60%);
}
#sec_tomorrow .image { margin: 30px; margin: clamp(30px, 4.8828vw, 50px); text-align: center;}
#sec_tomorrow .image img { width: 100%; vertical-align: top;}
#sec_tomorrow .text { font-size: 16px; font-size: clamp(16px, 2.3438vw, 24px); text-align: center; line-height: 2.0;}

@media screen and (max-width: 375px) {
	#sec_tomorrow .sec-title span { font-size: 18px;}
	#sec_tomorrow .text { font-size: 14px;}
}

/* 08：皮膚科医師 企業総合評価
---------------------------------- */
#sec_skincare01 { padding: 50px 20px; padding: clamp(50px, 8.0000vw, 70px) clamp(20px, 2.9297vw, 30px); background: #F5F5F5; position: relative;}
#sec_skincare01 .sec-title {
	padding: 18px 18px 0 28px;
  padding: clamp(18px, 1.9531vw, 20px) clamp(18px, 1.9531vw, 20px) 0 clamp(28px, 3.9063vw, 40px);
	border-top: #707070 1px solid;
	border-left: #707070 1px solid;
	margin: 0 -20px 30px 0;
  margin: 0 calc(-1 * clamp(20px, 2.9297vw, 30px)) clamp(30px, 4.8828vw, 50px) 0;
	font-size: 30px;
  font-size: clamp(30px, 5vw, 60px);
  color: #878787;
}
#sec_skincare01 .sec-title span { font-size: 22px; font-size: clamp(22px, 4.4922vw, 46px); color: #878787; display: block;}
#sec_skincare01 .text { margin: 0 0 50px; margin: 0 0 clamp(50px, 8.0000vw, 70px); font-size: 15px; font-size: clamp(15px, 2.3438vw, 24px); text-align: left; line-height: 2.0;}
#sec_skincare01 .maruho { width: 58%; margin: 0 auto 30px; margin: 0 auto clamp(30px, 4.8828vw, 50px);}
#sec_skincare01 .maruho img { width: 100%; vertical-align: top;}
#sec_skincare01 .image { margin: 0 auto 30px; margin: 0 auto clamp(30px, 4.8828vw, 50px);}
#sec_skincare01 .image img { width: 100%; vertical-align: top;}
#sec_skincare01 .image img { width: 100%; vertical-align: top;}
#sec_skincare01 .assessment { margin: 0 0 10px; margin: 0 0 clamp(10px, 1.9531vw, 20px); display: flex; flex-direction: column;}
#sec_skincare01 .assessment span + span { margin-top: 10px; display: flex; flex-direction: column;}
#sec_skincare01 .assessment .s { font-size: 22px; font-size: clamp(22px, 3.5156vw, 36px); text-align: left;}
#sec_skincare01 .assessment .l { font-size: 26px; font-size: clamp(26px, 4.4922vw, 46px); text-align: left;}
#sec_skincare01 .no01 { margin: 0 0 20px; margin: 0 0 clamp(20px, 2.9297vw, 30px); font-size: 60px; font-size: clamp(60px, 12vw, 100px); line-height: 1.0; color: #878787;}
#sec_skincare01 .no01 sup { padding: 5px 0 0; font-size: 14px; font-size: clamp(14px, 2.3438vw, 24px); vertical-align: top; color: #878787;}
#sec_skincare01 .syutten { padding: 0 0 0 1em; font-size: 13px; font-size: clamp(13px, 2.3438vw, 24px); text-align: left; text-indent: -1em; line-height: 2.0;}

@media screen and (max-width: 375px) {
	#sec_skincare01 .sec-title { padding: 15px 15px 0 20px; font-size: 26px;}
	#sec_skincare01 .sec-title span { font-size: 18px;}
	#sec_skincare01 .assessment span + span { margin-top: 2px;}
	#sec_skincare01 .assessment .s { font-size: 18px;}
	#sec_skincare01 .assessment .l { font-size: 20px;}
	#sec_skincare01 .syutten { font-size: 11px; letter-spacing: -0.5px;}
}

/* 09：きちんと洗い、きちんと保湿
---------------------------------- */
#sec_skincare02 { 
	padding: 50px 20px;
	padding: clamp(50px, 8.0000vw, 70px) clamp(20px, 2.9297vw, 30px);
	background-color: #F4FBFC;
	background-image: url("../../img/usr/freepage/barrieruv_ad/sec_skincare02_bg.png");
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}
#sec_skincare02 .sec-title { margin: 0 0 30px; margin: 0 0 clamp(30px, 4.8828vw, 50px); display: flex; justify-content: center; flex-direction: column;}
#sec_skincare02 .sec-title span + span { margin-top: 10px;}
#sec_skincare02 .sec-title span {
	padding: 0 10px;
	padding: 0 clamp(10px, 2.9297vw, 30px);
	margin: 0 auto;
	font-size: 20px;
  font-size: clamp(20px, 3.9063vw, 40px);
  text-align: center;
  display: inline;
  background: linear-gradient(transparent 78%, rgba(165,225,255,0.9) 78%);
}
#sec_skincare02 .text { margin: 0 0 30px; margin: 0 0 clamp(30px, 4.8828vw, 50px); font-size: 14px; font-size: clamp(14px, 2.3438vw, 24px); text-align: center; line-height: 2.0;}
#sec_skincare02 .image { margin: 0 20px; margin: 0 clamp(20px, 2.9297vw, 30px);}
#sec_skincare02 .image img { width: 100%; vertical-align: top;}

@media screen and (max-width: 375px) {
	#sec_skincare02 .sec-title span { padding: 0 5px; font-size: 18px; letter-spacing: -1px;}
	#sec_skincare02 .text { font-size: 13px;}
}

/* 10：日やけ止めという選択肢
---------------------------------- */
#sec_skincare03 {
	padding: 50px 20px;
	padding: clamp(50px, 8.0000vw, 70px) clamp(20px, 2.9297vw, 30px);
	margin: 0 0 30px;
	margin: 0 0 clamp(28px, 3.9063vw, 40px);
	background-color: #FFF;
	background-image: url("../../img/usr/freepage/barrieruv_ad/sec_skincare03_bg.png");
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}
#sec_skincare03 .sec-title { 
	margin: 0 0 30px;
	margin: 0 0 clamp(30px, 4.8828vw, 50px);
	font-size: 24px;
	font-size: clamp(24px, 4.6875vw, 48px);
	font-weight: 400;
	text-align: center;
	line-height: 1.4;
	color: #FFF;
}
#sec_skincare03 .frame { display: flex; justify-content: space-between; align-items: flex-start;}
#sec_skincare03 .frame .text { width: 72%; font-size: 14px; font-size: clamp(14px, 2.3438vw, 22px); text-align: left; line-height: 2.2; color: #FFF;}
#sec_skincare03 .frame .image { width: 28%; padding: 0 14px 14px; padding: 0 clamp(14px, 1.4648vw, 15px) clamp(14px, 1.4648vw, 15px);}
#sec_skincare03 .frame .image img { width: 100%; vertical-align: top;}

@media screen and (max-width: 375px) {
	#sec_skincare03 .sec-title { padding: 0 5px; font-size: 20px; letter-spacing: -1px;}
	#sec_skincare03 .frame .text { font-size: 12px; line-height: 1.8; letter-spacing: -0.5px;}
}

/* visumo
---------------------------------- */
.ecbn-selection-description.vsm-selection-description,
.ecbn-selection-title.vsm-selection-title {
	display: none;
}