@charset "utf-8";

body {
	min-width:unset;
}

sup {
	font-size: 75%;
	vertical-align: top;
	position: relative;
	top: -0.1em;
}

/* 個別ページスタイル
---------------------------------------------------------- */
.kv {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	text-align: center;
}
.wrap.sp {
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	overflow: hidden;
}
.wrap.pc {
	/*max-width:1920px;*/
}
.wrap.pc .inner {
	/*max-width:1920px;*/
}

/* 表示モーション */
.contentsSection {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.contentsSection.show {
	opacity: 1;
	transform: translateY(0);
}

.bg_pink {
	background-color:#ffe8f3;
}

#fixCv {
	position: fixed;
	bottom: 0px;
	left: 50%;
	width: 95%;
	max-width: 710px;
	transform: translate(-50%, 0);
	z-index: 9999;
	display: flex;
}
#fixCv a {
	display:block;
}

/* PC
---------------------------------------------------------- */
.wrap.pc .kv {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.wrap.pc .kv .kv_area {
	width: 100%;
	position: relative;
}
.wrap.pc .kv .kv_img_full { display:none; }
.wrap.pc .kv .kv_img_full img { width:100%; }
.wrap.pc .kv .kv_img {
	display: flex;
	width: max-content;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.wrap.pc .kv .kv_img img {
	display: block;
	height: auto;
	width: auto;
}
@media (min-width: 1920px) {
	.wrap.pc .kv .kv_img { display:none; }
	.wrap.pc .kv .kv_img_full { display:block; }
}
@media (max-width: 1099px) {
	.wrap.pc .kv .kv_img {
		width: unset;
	}
	.wrap.pc .kv .kv_img img.notcenter {
		display:none;
	}
}

/* kv content */
.wrap.pc .kv .inner {
	max-width: 1100px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	width: 100%;
}
.wrap.pc .kv .inner .logo {
	position: absolute;
	top: 26%;
	left: 5%;
	width: 35%;
}
.wrap.pc .kv .inner .detail {
	position: absolute;
	top: 68%;
	left: 50%;
	width: 92%;
	transform: translateX(-50%);
	max-width: 1000px;
	container-type: inline-size;
}
.wrap.pc .kv .inner .detail p {
	position: absolute;
	top: 33%;
	left: 46%;
	text-align: left;
	font-size: 1.8cqw;
	line-height: 3.6cqw;
	font-weight: 600;
}


/* 無敵の華奢みえ、小顔へ */
.about {}
.about .inner {
	max-width: 1100px;
	width: 92%;
	margin: 100px auto;
	display: grid;
	justify-content: center;
	grid-template-columns: 3fr 2fr;
	gap: 40px;
}
.about .inner .lead {
	container-type: inline-size;
	text-align: left;
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	gap: 35px;
}
.about .inner .lead .logo {
	width:auto;
	/*width: 62%;*/
	display: inline-block;
	max-width: 408px;
}
.about .inner .lead p {
	/*
	font-size: 2.4cqw;
	line-height: 5.2cqw;
	letter-spacing: 0.3cqw;
	*/
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 2px;
	font-weight: 600;
}
.about .inner .lead p span {
	font-size: 85%;
}

.about .inner .image {}
.about .inner .image img {}



/* エキス */
.extract { position: relative; }
.extract .mainimg img { width:100%; }
.extract .lead {
	position: absolute;
	top: 15%;
	left: 19%;
	width: 26.5%;
}
.extract .lead .ttl { width: 85%; }
.extract .lead p {
	font-size: 0.8vw;
	margin-top: 1.8vw;
	margin-bottom: 1.5vw;
	text-align: left;
	line-height: 1.8vw;
}
.extract .lead .weeds {}


/* ポイント */
.points {
	background-image: url(../images/pc_area4_bg.png);
	background-repeat: repeat-x;
	background-size: cover;
}
.points .inner {
	max-width: 1000px;
	width: 100%;
	padding: 90px 0 60px;
	margin: 0 auto;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.points .inner .logo {
	display: block;
	width: auto;
	/*width: 35%;*/
	max-width: 382px;
	margin: 0 auto;
}
.points .inner p.lead{
	display: inline-block;
	width: 90%;
	margin: 0 auto;
	/*
	font-size: 1.7cqw;
	line-height: 3.8cqw;
	letter-spacing: 0.2cqw;
	*/
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 1px;
	font-weight: 600;
}
.points .inner p.lead span {
	font-size: 85%;
	margin-top: 10px;
	display: inline-block;
}

.points .inner ul.point_list {
	max-width: 900px;
	margin: 0 auto;
	width: 90%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.points .inner ul.point_list li {
	border-radius: 6px;
	padding: 45px 55px 60px 55px;
	background: #fff;
	box-shadow: 0px 1px 10px 5px rgba(255,194,215,0.42);
	display: grid;
	grid-template-columns: 2fr 3fr;
}
.points .inner ul.point_list li .detail {
	text-align: left;
	padding-right: 8px;
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.points .inner ul.point_list li .detail .point_num {
	position: relative;
}
.points .inner ul.point_list li .detail .point_num > div {
	padding-right: 15px;
	background: #fff;
	display: inline-block;
	z-index: 10;
	position: relative;
}
.points .inner ul.point_list li .detail .point_num::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	width: 90%;
	border-bottom: 1px solid #f5b5d2;
}
.points .inner ul.point_list li .detail .point_ttl {}
.points .inner ul.point_list li .detail p {
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 1px;
	font-weight: 600;
}
.points .inner ul.point_list li .detail p span {
	font-size: 85%;
	margin-top: 10px;
	display: inline-block;
}
.points .inner ul.point_list li .image {
	display: flex;
	justify-content: center;
	/*align-items: center;*/
	padding-top: 15px;
	width: 90%;
	margin: auto;
}
.points .inner ul.point_list li .image img {}

.points .conclusion {
	background: #ffe8f3;
}
.points .conclusion .inner {
	padding: 0;
	position: relative;
}
.points .conclusion .inner .tri {
	max-width: 300px;
	margin: 0 auto;
	width: 30%;
}
.points .conclusion .inner ul {
	display: grid;
	grid-template-columns: 60% auto;
	justify-content: center;
	align-items: center;
	margin-top: -7cqw;
}
.points .conclusion .inner ul li {
	text-align: center;
}
.points .conclusion .inner ul li li:nth-child(1) {
	padding: 0 20px;
}
.points .conclusion .inner .logo {}
.points .conclusion .inner .hand {}



/* How to use */
.howto {}
.howto .inner {
	max-width: 1100px;
	width: 92%;
	margin:0 auto;
	padding:100px 0;
}
.howto .inner .ttl {
	max-width: 600px;
	margin: 0 auto 40px;
	width: 60%;
}
.howto .inner .ttl2 {
	max-width: 373px;
	margin: 0 auto 10px;
	width: 35%;
}
.howto .inner ul {
	display: grid;
	grid-template-columns: 1fr 35px 1fr 35px 1fr 35px 1fr;
}
.howto .inner ul li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.howto .inner ul li .image {}
.howto .inner ul li p {
	padding: 0 5px;
	text-align: left;
	line-height: 25px;
}
.howto .inner ul li.arrow {
	display: grid;
	align-items: center;
}

/* さらに */
.more {
	background: #ffe8f3;
	padding-top: 2%;
}
.more .inner {
	max-width: 1100px;
	width: 95%;
	margin:0 auto;
	padding:0 0 0px;
}
.more .inner2 {
	max-width: 1160px;
	width: 95%;
	padding:0 0 100px;
}
.more .inner .ttl {
	max-width: 801px;
	width: 73%;
	margin: -5% auto 0;
}

.more .inner .detail {
	width: 90%;
	margin: 60px auto;
	display: grid;
	grid-template-columns: 4fr 2fr;
	gap:45px;
}
.more .inner .detail .image {
	text-align: right;
}
.more .inner .detail .data {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.more .inner .detail .data .price {
	color: #eb6ca5;
	font-size: 125%;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 175%;
	text-align: left;
}
.more .inner .detail .data .desc {
	letter-spacing: 2px;
	line-height: 175%;
	text-align: left;
}

.more .inner ul {
	width: 100%;
	max-width: 1100px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: center;
	gap:30px;
	margin: 0 auto;
}
.more .inner ul li {
	background: #fff;
	border-radius: 16px;
	height: 100%;
	display: flex;
}
.more .inner ul li .card {
	padding: 40px 40px;
	display: grid;
	grid-template-columns: 2fr 3fr;
	align-items: center;
	gap: 25px;
}
.more .inner ul li .part_image {
	text-align: center;
}
.more .inner ul li p {
	letter-spacing: 1px;
	line-height: 200%;
	font-size: 115%;
	text-align: left;
}
.more .inner ul li p span {
	background: #ffe8f3;
	padding: 2px 2px;
}

.more .inner ul.top {
	max-width: 900px;
	display: block;
	margin: 0 auto 30px;
}
.more .inner ul.top li {
	grid-template-columns: 1fr 3fr;
}
.more .inner ul.top li .card {
	grid-template-columns: 2fr 5fr;
}

/* How to use */
.item {}
.item .inner {
	max-width: 1100px;
	width: 92%;
	margin:0 auto;
	padding:100px 0;
}


/* SP
---------------------------------------------------------- */
@media screen and (max-width:767px) {
/*-----------------------------------*/


/*-----------------------------------*/
}