@charset "utf-8";

.move-flag {
	position: relative;
	opacity: 0;
	top: -50px;
	transition: ease 1s opacity, ease 1s top;
}
.move-flag.on {
	top: 0;
	opacity: 1;
}
@media print {
	.move-flag {
		top: 0;
		opacity: 1;
	}
}

/* config */

@media screen and (min-width: 641px) {
	.excia-area .common-btn.type01 .cover {
		width: 340px;
		height: 48px;
	}
}
@media screen and (max-width: 640px) {
	.excia-area .common-btn.type01 .cover {
		width: 200px;
	}
}

.excia-area.timeless {
	padding-top: 100px;
}
@media screen and (max-width: 640px) {
	.excia-area.timeless {
		padding-top: 63px;
	}
}

.excia-area.concept {
	padding: 54px 0 0;
}
@media screen and (max-width: 640px) {
	.excia-area.concept {
		padding: 23px 0 0;
	}
}

/* ------------------------------------------- */
/* concept-kv */
/* ------------------------------------------- */
.excia-area.concept .concept-kv {
	margin-top: 83px;
	padding: 147px 0 0;
	background: url(../../assets/img/skincare/concept/kv_bg02.png) no-repeat center top / cover;
	height: 1029px;
}
@media screen and (max-width: 1420px) {
	.excia-area.concept .concept-kv {
		padding-top: 100px;
		height: 900px;
	}
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-kv {
		margin-top: 37px;
		padding: 69px 0 67px;
		padding: 17vw 0;
		height: auto;
		background-image: url(../../assets/img/skincare/concept/kv_bg02_sp.png);
	}
}

.excia-area.concept .concept-kv .inner {
	display: flex;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-kv .inner {
		justify-content: center;
	}
}
.excia-area.concept .concept-kv .kv-text {
	margin-left: auto;
	padding: 0 87px;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-kv .kv-text {
		margin-left: 0;
		padding: 0;
	}
}

.excia-area.concept .concept-kv .text-logomark {
	margin-bottom: 58px;
	text-align: center;
}

@media screen and (max-width: 640px) {
	.excia-area.concept .concept-kv .text-logomark {
		margin-bottom: 86px;
		margin-bottom: 23vw;
	}
	.excia-area.concept .concept-kv .text-logomark img {
		width: 138px;
	}
}
.excia-area.concept .concept-kv .text-title {
	margin-bottom: 51px;
	font-weight: normal;
	font-size: 38px;
	letter-spacing: 0.25em;
	line-height: 27px;
	text-align: center;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-kv .text-title {
		margin-bottom: 135vw;
		letter-spacing: 0.25em;
	}
	.excia-area.concept .concept-kv .text-title img {
		width: auto;
		height: 38px;
	}
}

.excia-area.concept .concept-kv .text-detail {
	margin-bottom: 58px;
	font-weight: normal;
	font-size: 18px;
	letter-spacing: 0.1em;
	line-height: 32px;
	text-align: center;
	color: #717070;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-kv .text-detail {
		font-weight: normal;
		font-size: 16px;
		letter-spacing: 0.1em;
		line-height: 1.8125;
		text-align: center;
		color: #717070;
	}
}
.excia-area.concept .concept-kv .text-detail p {
	margin-bottom: 30px;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-kv .text-detail p {
	}
}
.excia-area.concept .concept-kv .text-detail p:last-child {
	margin-bottom: 0;
}

.excia-area.concept .concept-kv .text-catch {
	font-weight: normal;
	font-size: 20px;
	letter-spacing: 0.2em;
	line-height: 27px;
	text-align: center;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-kv .text-catch {
		font-size: 18px;
	}
}

/* ------------------------------------------- */
/* concept-about */
/* ------------------------------------------- */
.excia-area.concept .concept-about {
	padding: 86px 0;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-about {
	}
}

/* about-title */
.excia-area.concept .about-title.type01 {
	margin-bottom: 44px;
	text-align: center;
}
.excia-area.concept .about-title.type01 .title-spell {
	font-family: "EB Garamond";
	font-weight: 400;
	font-style: italic;
	font-size: 57px;
	letter-spacing: 0.02em;
	line-height: 10px;
	text-align: center;
	color: #e8e8e8;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .about-title.type01 .title-spell {
		font-size: 51px;
		letter-spacing: 0.02em;
	}
}
.excia-area.concept .about-title.type01 .title-main {
	font-family: "Noto Serif JP";
	font-weight: normal;
	font-size: 28px;
	letter-spacing: 0.2em;
	line-height: 28px;
	text-align: center;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .about-title.type01 .title-main {
		font-size: 22px;
	}
}

/* about-set */
.excia-area.concept .about-set.photo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 80px;
}
.excia-area.concept .about-set.photo:last-child {
	margin-bottom: 0;
}
.excia-area.concept .about-set.photo.rev {
	flex-direction: row-reverse;
}
.excia-area.concept .about-set.photo .set-photo {
	width: 450px;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .about-set.photo .set-photo {
		margin-bottom: 24px;
		width: 100%;
		text-align: center;
	}
}
.excia-area.concept .about-set.photo .set-text {
	width: calc(100% - 450px - 51px);
}
@media screen and (max-width: 640px) {
	.excia-area.concept .about-set.photo .set-text {
		width: 100%;
	}
}
.excia-area.concept .about-set.photo .text-detail {
	font-weight: normal;
	font-size: 16px;
	letter-spacing: 0.08em;
	line-height: 31px;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .about-set.photo .text-detail {
	}
}
.excia-area.concept .about-set.photo .text-detail p {
	margin-bottom: 20px;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .about-set.photo .text-detail p {
		margin-bottom: 10px;
	}
}
.excia-area.concept .about-set.photo .text-detail p:last-child {
	margin-bottom: 0;
}
.excia-area.concept .about-set.photo .text-notes {
	margin-top: 20px;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 18px;
	color: #717070;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .about-set.photo .text-notes {
		margin-top: 15px;
		font-size: 13px;
	}
}

/* ------------------------------------------- */
/* concept-theory */
/* ------------------------------------------- */
.excia-area.concept .concept-theory {
	padding: 93px 0 103px;
	background: url(../../assets/img/skincare/concept/theory_bg01.png) no-repeat center top / cover;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-theory {
		padding: 60px 0;
		background-image: url(../../assets/img/skincare/concept/theory_bg01_sp.png);
	}
}

.excia-area.concept .concept-theory .theory-title {
	margin-bottom: 55px;
	font-family: "Noto Serif JP";
	font-weight: normal;
	font-size: 28px;
	letter-spacing: 0.2em;
	line-height: 42px;
	text-align: center;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-theory .theory-title {
		font-size: 24px;
		line-height: 36px;
	}
}
.excia-area.concept .concept-theory .theory-detail {
	font-weight: normal;
	font-size: 16px;
	letter-spacing: 0.08em;
	line-height: 32px;
	text-align: center;
	color: #000;
}
.excia-area.concept .concept-theory .theory-detail p {
	margin-bottom: 32px;
}
.excia-area.concept .concept-theory .theory-detail p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------- */
/* concept-grant */
/* ------------------------------------------- */
.excia-area.concept .concept-grant {
	padding: 78px 0 70px;
	background: #eff2f5;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-grant {
		padding: 60px 0;
	}
}

.excia-area.concept .concept-grant .grant-title.type01 {
	margin-bottom: 63px;
	text-align: center;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-grant .grant-title.type01 {
		margin-bottom: 48px;
	}
}
.excia-area.concept .concept-grant .grant-title.type01 .title-main {
	margin-bottom: 20px;
	font-weight: normal;
	font-size: 21px;
	letter-spacing: 0.2em;
	color: #767676;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-grant .grant-title.type01 .title-main {
		font-size: 18px;
	}
}
.excia-area.concept .concept-grant .grant-title.type01 .title-img {
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-grant .grant-title.type01 .title-img img {
		width: 168px;
	}
}

.excia-area.concept .concept-grant .grant-title.type02 {
	margin-bottom: 70px;
	position: relative;
	font-family: "Noto Serif JP";
	font-weight: normal;
	font-size: 28px;
	letter-spacing: 0.2em;
	line-height: 33px;
	text-align: center;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-grant .grant-title.type02 {
		margin-bottom: 50px;
		font-size: 23px;
	}
}
.excia-area.concept .concept-grant .grant-title.type02:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -21px;
	display: block;
	width: 30px;
	height: 1px;
	background: #000;
	transform: translateX(-50%);
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-grant .grant-title.type02:after {
		bottom: -16px;
	}
}

/* ------ */
/* concept-list */
/* ------ */
.excia-area.concept .concept-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 20px;
	margin-top: 60px;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-list {
		margin-top: 38px;
		margin-bottom: 0;
	}
}
.excia-area.concept .concept-list li {
	margin-bottom: 40px;
	width: calc(50% - 20px);
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-list li {
		width: 100%;
	}
}
.excia-area.concept .concept-list .list-cover {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-list .list-cover {
		/* align-items: flex-start; */
		align-items: stretch;
	}
}
.excia-area.concept .concept-list .list-photo {
	margin-bottom: auto;
	width: 139px;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-list .list-photo {
		width: 123px;
	}
}
.excia-area.concept .concept-list .list-text {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: calc(100% - 139px - 17px);
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-list .list-text {
		justify-content: center;
		width: calc(100% - 123px - 10px);
	}
}
.excia-area.concept .concept-list .text-title .title-main {
	font-weight: normal;
	font-size: 20px;
	letter-spacing: 0.08em;
	line-height: 27px;
	text-align: left;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-list .text-title .title-main {
		font-weight: normal;
		font-size: 17px;
		letter-spacing: 0.08em;
	}
}
.excia-area.concept .concept-list .text-title .title-sub {
	margin-top: 6px;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: 0.08em;
	line-height: 22px;
	text-align: left;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-list .text-title .title-sub {
	}
}
.excia-area.concept .concept-list .text-title .title-notes {
	margin-top: 6px;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 18px;
	text-align: left;
	color: #717070;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-list .text-title .title-notes {
		font-size: 13px;
	}
}

.excia-area.concept .concept-list .list-detail {
	margin-top: 20px;
	font-weight: normal;
	font-size: 16px;
	letter-spacing: 0.08em;
	line-height: 29px;
	text-align: left;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-list .list-detail {
		line-height: 25px;
	}
}
.excia-area.concept .concept-list .text-detail {
	margin-top: 13px;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: 0.08em;
	line-height: 25px;
	text-align: left;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-list .text-detail {
	}
}

/* ------ */
/* concept-notes */
/* ------ */
.excia-area.concept .concept-notes {
	margin-bottom: 70px;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: 0.08em;
	line-height: 26px;
	text-align: left;
	color: #717070;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-notes {
		margin-bottom: 45px;
		font-size: 13px;
		letter-spacing: 0.08em;
		line-height: 22px;
	}
}

/* ------ */
/* concept-title */
/* ------ */
/* type01 */
.excia-area.concept .concept-title.type01 {
	margin-top: 69px;
	font-family: "Noto Serif JP";
	font-weight: normal;
	font-size: 18px;
	letter-spacing: 0.08em;
	line-height: 27px;
	text-align: center;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-title.type01 {
		margin-top: 43px;
	}
}
.excia-area.concept .concept-title.type01 span {
	display: inline-block;
	padding: 9px 10px;
	border-top: 1px solid #707070;
	border-bottom: 1px solid #707070;
}

/* ------------------------------------------- */
/* concept-item */
/* ------------------------------------------- */
.excia-area.concept .concept-item {
	position: relative;
	padding: 72px 0 90px;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item {
		padding: 60px 0;
	}
}
.excia-area.concept .concept-item:after {
	content: "";
	width: 100%;
	height: calc(100% - 448px);
	position: absolute;
	left: 0;
	top: 448px;
	z-index: 0;
	background: no-repeat center top / cover;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item:after {
		top: 268px;
		height: calc(100% - 268px);
	}
}
.excia-area.concept .concept-item.type01:after {
	background-image: url(../../assets/img/skincare/concept/item_bg01.png);
}
.excia-area.concept .concept-item.type02:after {
	background-image: url(../../assets/img/skincare/concept/item_bg02.png);
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item.type01:after {
		background-image: url(../../assets/img/skincare/concept/item_bg01_sp.png);
	}
	.excia-area.concept .concept-item.type02:after {
		background-image: url(../../assets/img/skincare/concept/item_bg02_sp.png);
	}
}

.excia-area.concept .concept-item .inner {
	position: relative;
	z-index: 1;
}
.excia-area.concept .concept-item .item-photo {
	margin-bottom: 54px;
	text-align: center;
}
.excia-area.concept .concept-item .item-title.type01 {
	margin-bottom: 60px;
	font-weight: normal;
	font-size: 30px;
	letter-spacing: 0.1em;
	line-height: 47px;
	text-align: center;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item .item-title.type01 {
		margin-bottom: 36px;
		font-size: 20px;
		letter-spacing: 0.08em;
		line-height: 28px;
	}
}
.excia-area.concept .concept-item .item-title.type02 {
	margin-bottom: 31px;
	font-family: "Noto Serif JP";
	font-weight: normal;
	font-size: 30px;
	letter-spacing: 0.1em;
	line-height: 47px;
	text-align: center;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item .item-title.type02 {
		font-weight: normal;
		font-size: 22px;
		line-height: 34px;
	}
}

.excia-area.concept .concept-item .item-title.type03 {
	margin-bottom: 23px;
	font-weight: normal;
	font-size: 20px;
	letter-spacing: 0.08em;
	line-height: 27px;
	text-align: left;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item .item-title.type03 {
		font-size: 18px;
	}
}

.excia-area.concept .concept-item .item-title.type04 {
	position: relative;
	margin-bottom: 19px;
	padding-left: 13px;
	font-weight: normal;
	font-size: 18px;
	letter-spacing: 0.05em;
	line-height: 18px;
	text-align: left;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item .item-title.type04 {
		font-size: 15px;
	}
}
.excia-area.concept .concept-item .item-title.type04:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 2px;
	height: 18px;
	background: #000;
}

.excia-area.concept .concept-item .item-detail {
	font-weight: normal;
	font-size: 16px;
	letter-spacing: 0.08em;
	line-height: 29px;
	text-align: center;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item .item-detail {
		line-height: 27px;
	}
}

.excia-area.concept .concept-item .item-notes {
	margin-top: 28px;
	font-weight: normal;
	font-size: 13px;
	letter-spacing: 0.05em;
	line-height: 18px;
	text-align: center;
	color: #717070;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item .item-notes {
	}
}

.excia-area.concept .concept-item .item-list {
	margin-bottom: 45px;
}
.excia-area.concept .concept-item .item-list:last-child {
	margin-bottom: 80px;
}

.excia-area.concept .concept-item .item-list li {
	margin-bottom: 10px;
}
.excia-area.concept .concept-item .item-list a {
	position: relative;
	padding-left: 22px;
	font-weight: normal;
	text-decoration: underline;
	font-size: 16px;
	letter-spacing: 0.08em;
	line-height: 27px;
	text-align: left;
	color: #000;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item .item-list a {
		font-size: 14px;
	}
}
@media (hover: hover) and (pointer: fine) {
	.excia-area.concept .concept-item .item-list a:hover {
		text-decoration: none;
	}
}
.excia-area.concept .concept-item .item-list a:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 4px;
	margin-top: -1px;
	width: 4px;
	height: 4px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	box-sizing: border-box;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item .item-list a:after {
	}
}
.excia-area.concept .concept-item .item-list a:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -6px;
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #707070;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .concept-item .item-list a:before {
	}
}

.excia-area.concept .component-cover {
	margin: 60px auto 0;
	max-width: 518px;
}
@media screen and (max-width: 640px) {
	.excia-area.concept .component-cover {
		margin-top: 38px;
	}
}
