@charset "utf-8";
/* */

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP%7CParisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&family=Noto+Sans+JP:wght@100..900&display=swap');
html {
    font-size:min(0.694vw,62.5%);/*画面幅1440px以上で基本文字サイズ10pxに固定*/
    scroll-behavior: smooth;
}

:root {
  --base-color: #f8f9fa;
  --main-color: #e2a2b1;
  --content-color: #555;
  --accent-color: #1B85FB;
}

body{
    background:var(--base-color);
    font-family: 'Noto Serif JP', serif;
    font-size: 1.4rem;/* 14px */
	color: var(--content-color);
	/*font-size:1rem;*/
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
    letter-spacing: 0.2em;
}

a {
	text-decoration: none;
	color: var(--content-color);
}

section {
	margin: 20rem 0;
}


/*===============================

共通部品

================================*/

.margin-lv2 {
  margin: 5rem 0;
}

.margin-lv3 {
  margin: 2rem 0 5rem 0;
}

.margin-lv4 {
  margin: 1.5rem 1rem 3rem;
}



.mt10 {
  margin-top: 1rem !important;
}

.mt20 {
  margin-top: 2rem !important;
}

.mt30 {
  margin-top: 3rem !important;
}

.mt40 {
  margin-top: 4rem !important;
}

.mt50 {
  margin-top: 5rem !important;
}

.mt100 {
  margin-top: 10rem !important;
}

.mt200 {
  margin-top: 20rem !important;
}


.mb2 {
  margin-bottom: 2rem;
}

.mb10 {
  margin-bottom: 1rem !important;
}

.mb20 {
  margin-bottom: 2rem !important;
}

.mb30 {
  margin-bottom: 3rem !important;
}

.mb40 {
  margin-bottom: 4rem !important;
}

.mb50 {
  margin-bottom: 5rem !important;
}


.mb100 {
  margin-bottom: 10rem !important;
}


/* 間隔をコントロール */

hr.hr-space-1rem {
  border: 1px solid transparent;
  margin:0 0 1rem;
}
hr.hr-space-2rem {
  border: 1px solid transparent;
  margin:0 0 2rem;
}
hr.hr-space-3rem {
  border: 1px solid transparent;
  margin:0 0 3rem;
}
hr.hr-space-4rem {
  border: 1px solid transparent;
  margin:0 0 4rem;
}
hr.hr-space-5rem {
  border: 1px solid transparent;
  margin:0 0 5rem;
}
hr.hr-space-6rem {
  border: 1px solid transparent;
  margin:0 0 6rem;
}
hr.hr-space-12rem {
  border: 1px solid transparent;
  margin:0 0 12rem;
}


/* nav */







#container {
	background:var(--base-color);
}

/* topabput */
.topAbout__inner {
	display: flex;
	justify-content: center;
	width: 128rem;
	margin: 0 auto;
	padding-top: 20rem;
	h2 {
		margin-bottom: 2rem;
		font-size: 2rem;
	}
	figure {
		width: 40rem;
		height: auto;
		margin-left: 20rem;
	}
}

/**/

.title__eng-pink {
	font-family: 'Parisienne', cursive;
	font-size: 4rem;
    text-align: center;
    margin: 0 0 50px 0;
    font-weight: normal;
    color: #e2a2b1;
	line-height: normal;
}

/* menu */
.card {
	list-style: none;
	width: 108rem;
	display: flex;
	justify-content: space-around;
	margin: 0 auto;
	padding: 0;
	li {
		width: 28%;
		background: #fff;
		padding-bottom: 3rem;
		filter: drop-shadow(.5rem .5rem .3rem rgba(214, 214, 214, 0.7));

	}
	h4 {
		margin: .5rem 1rem;
		font-weight: normal;
	}
}

/* バナー */
.banner__area {
	display: flex;
	justify-content: space-between;
	list-style: none;
	width: 108rem;
	margin: 0 auto 10rem auto;
	padding: 0;
	li {
		width: 48%;
	}
}

.online {
	width: 50rem;
	margin: 2rem auto;
}

/* 装飾 */
.center {
	text-align: center;
}
.shaddow {
  filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.7));
}

.shaddow-white {
  filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.932));
}

/* contactBox */
.ContactBox__inner {
	width: 128rem;
	margin: 20rem auto;
	display: flex;
	justify-content: space-around;
	align-items: center;

	h2 {
		font-size: 2rem;
		text-align: center;
		margin-bottom: 1rem;
	}
	p {
		text-align: center;
		font-size: 1.4rem;
	}

	span {
		display: block;
	}

	figure {
		width: 70%;
	}
}

.line__wap {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}

/* トップニュース */
#newsWrap {
	width: 108rem;
	margin: 2rem auto;
}

#newsList {
	list-style: none;
	padding-left: 0;
	li {
		border-bottom: 1px solid #ccc;
		padding: 3rem 0;
	}

	li:last-child {
		border-bottom: none;
	}

}

.up_ymd {
	color: #e2a2b1;
}

.title-box {
	font-size: 1.6rem;
	margin-top: 2rem;
}
/* フッター */

footer {
	border-top: 1px solid #ccc;
	margin-top: 20rem;
	padding: 10rem 0 0 0;
}

.footerInner {
	width: 108rem;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;

	h2 {
	font-family: 'Parisienne', cursive;
	font-size: 5rem;
    text-align: center;
    margin: 0 0 50px 0;
    font-weight: normal;
    color: var(--content-color);
	margin: 0;
	}
	p {
		font-size: 1.4rem;
	}

	ul {
		display: flex;
		list-style: none;
		}

	li {
		margin: 0 2rem;
	}
}

.copyright {
	text-align: center;
	padding: 2rem 0;
}

/* ---------- メニュー ---------- */

.menu {
	margin: 8rem 0;
	h3 {
		color: var(--main-color);
	}
}

.menu__img {
	background: url("../images/rose02.jpg") no-repeat center;/*背景画像の設定※オリジナルの画像に設定してください*/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
	height: 20rem;
}

.menu__item {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
	padding: 4rem 0;
}

.menu__item:last-child {
	border-bottom: none;
}

.subTitle {
	display: block;
	margin: 1.5rem 0 3rem 0;
	font-size: 1.2rem;
	color: var(--main-color);
}

/* ---------- コンタクトフォーム ---------- */

.contact__img {
	background: url("../images/cosme01.jpg") no-repeat center;/*背景画像の設定※オリジナルの画像に設定してください*/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
	height: 20rem;
}

.contact__wap {
    max-width: 700px;
    margin: 1rem auto;
}


.contact_form {
    
    dt {
        color:#e2a2b1;
        margin-bottom: 1rem;
    }
    dd {
        width: 100%;
        margin-bottom: 2rem;
        input,
        textarea {
            width: 100%;
            background-color: #fff;
            padding: 1rem 2rem;
            border-radius: 10px;
			border: none;
        }
    }

    .required {
        color: #fff;
        background-color: #e2a2b1;
        padding: .2rem .5rem;
        border-radius: 5px;
        font-size: 12px;
        font-weight: bold;
        margin-left: .5rem;
    }

    .radioBtm {
        input {
            display: inline-block;
            width: auto;
            margin-right: .5rem;
        }
        label {
            margin-right: 2rem;
        }
    }
}

 .send__btm {
	input {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10rem;
    height: 4rem;
    color: #fff;
    background-color: #e2a2b1;
    margin: 2rem auto;
    font-weight: bold;
    border-radius: 10px;
	border: none;
    }
}

/* DNAパーソナルプラン */

.dna__title {
	text-align: center;
	font-size: 3rem;
	font-family: "Noto Sans JP", sans-serif;
	padding: 5rem 0;
	color: #555;
	span {
		width: 10rem;
        margin: 0 auto 1rem auto;
        display: block;
        font-weight: normal;
        font-size: 1.4rem;
        padding-bottom: 1rem;
        border-bottom: solid 1px #e2a2b1;
	}
}

.dna__title-number {
	text-align: center;
	font-size: 3rem;
	font-family: "Noto Sans JP", sans-serif;
	padding: 5rem 0;
	color: #555;
	span {
		width: 10rem;
        margin: 0 auto;
        display: block;
		font-family: "M PLUS 1p", sans-serif;
		font-weight: 400;
        font-size:5rem;
		color: #e2a2b1;
	}
}

.dna__title-small {
	margin-bottom: 2rem;
	font-size: 2rem;
	text-align: center;
}
.dna__flexWap {
	width: 108rem;
	margin: 5rem auto;
	display: flex;
	justify-content: space-between;
	div {
		width: 50%;
	}

	figure {
		width: 48%;
		margin-left: 2%;
	}
}


.dna__flexWap-re {
	width: 108rem;
	margin: 5rem auto;
	display: flex;
	justify-content: space-between;
	flex-direction:row-reverse;
	div {
		width: 50%;
	}

	figure {
		width: 48%;
		margin-right: 2%;
	}

	h4 {
		margin-bottom: 2rem;
		font-size: 2rem;
	}

}

.dna__wap-center {
	width: 108rem;
	margin: 0 auto;
	h4 {
		margin-bottom: 2rem;
		font-size: 2rem;
	}
	ul {
		list-style: none;
		padding-left: 0;
		font-size: 2rem;
		width: 50%;
		margin: 0 auto;
		li {
			margin-bottom: 2rem;
		}
	}
}

.dna__wap-be {
	background-color: #efe8df;
	padding-bottom: 10rem;
}

.dna__card {
	list-style: none;
	width: 108rem;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 0;
	li {
		width: 28%;
		background: #fff;
		padding-bottom: 3rem;
		margin: 2rem 0;
		filter: drop-shadow(.5rem .5rem .3rem rgba(214, 214, 214, 0.7));
		figure {
			width: 80%;
			margin: 2rem auto;
		}
	}
	h4 {
		margin: .5rem 1rem;
        /* font-weight: normal; */
        font-size: 1.6rem;
        text-align: center;
    }
	}

.dna__item {
	i {
		margin-right: 1rem;
		color: #e2a2b1;
	}
}

/* 流れ */

.flow_design07 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow07 {
  padding-left: 0;
}

.flow07 > li {
  list-style-type: none;
  display: flex;
}

.flow07 > li:not(:last-child) {
  margin: 0 0 50px;
}

.flow07 > li .icon07 {
  width: 90px;
  box-sizing: border-box;
  padding: 20px 10px 10px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  background: #b0d1a6;
  border-radius: 5px 5px 0 0;
  position: relative;
  line-height: 125%;
  margin: 0;
}
.flow07 > li .icon07::after {
  content: ' ';
  width: 0;
  height: 0;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-top: 20px solid #b0d1a6;
  position: absolute;
  bottom: -20px;
  left: 0;
}

.flow07 > li dl {
  padding: 0 0 0 30px;
  width: calc(100% - 115px);
}

.flow07 > li dl dt {
  padding: 0 0 5px;
  margin: 0 0 15px;
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 4px solid #CCCCCC;
  position: relative;
}
.flow07 > li dl dt::after {
  content: '';
  width: 20%;
  height: 4px;
  position: absolute;
  bottom: -4px;
  left: 0;
  background-color: #b0d1a6;
}

.flow07 > li dl dd {
  margin: 0;
}

/* ブログ */
#up_ymd {
    color: #e2a2b1;
    margin-bottom: 2rem;
}

.backORcloseBtn {
	margin: 2rem auto;
    text-align: center;
	a {
		color: #e2a2b1;
	}
}

.detailText {
	p {
		margin-bottom: 1em;
	}
}

/* thank youページ */

.thanks__wap {
	width: 90%;
	h3 {
		text-align: center;
	}
	p {
		text-align: center;
	}
}

.top__link {
	a {
		color: #e2a2b1;
	}
}

/* --------------------- */
/* PCのスタイル(1281px以上)*/

.only-pc {
	display: block;
}
.only-mobile {
	display:none;
}
.only-pc-inline {
	display: inline;
}
.only-mobile-inline {
	display:none;
}

/* タブレットのスタイル */
@media screen and (max-width: 1280px) {

}

/* スマートフォンのスタイル */
@media screen and (max-width: 430px) {

	.only-pc {
	display: none;
	}
	.only-mobile {
	display: block;
	}

	.only-pc-inline {
		display:none;
	}
	.only-mobile-inline {
		display:inline;
	}


	html {
	font-size:min(2vw,62.5%);
	}

	body {
		font-size: 1.6rem;
	}

	section {
		margin: 2rem 0;
	}

	.topAbout__inner {
		display: block;
		justify-content: center;
		width: 100%;
		margin: 0 auto;
		padding-top: 2rem;

		p {
			margin-bottom: 2rem;
		}

		div {
			width: 90%;
			margin: 0 auto;
		}

		figure {
			width: 90%;
			height: auto;
			margin-left: 20rem;
			margin: 0 auto;
		}
	}

	.card {
		width: 90%;
		display: block;
		li {
			width: 100%;
			margin-bottom: 2rem;
		}
	}

	.title__eng-pink {
		margin: 5rem auto;
	}

	.cosmetic__inner {
		width: 90%;
		margin: 0 auto;
	}

	.banner__area {
		display: block;
		width: 90%;
		margin-bottom: 2rem;
		li {
			width: 100%;
			margin-bottom: 2rem;
		}
	}

	.online {
	width: 90%;
	}

	#newsWrap {
		width: 90%;
	}

	.ContactBox__inner {
		width: 90%;
		margin: 2rem auto;
		display: block;
			figure {
			width: 100%;
		}
	}

	footer {
		margin-top: 2rem;
		padding: 5rem 0;
		}


	.footerInner {
		width: 90%;
		display: block;
		p {
			text-align: center;
		}
		ul {
			padding-left: 0;
			justify-content: space-around;
		}
		li {
			margin: 0;
		}
	}

	.contact__wap {
		width: 90%;
	}


	.menu {
		margin: 2rem 0;
	}

	.dna__flexWap,
	.dna__flexWap-re,
	.dna__wap-center {
		display: block;
		width: 90%;
		div {
			width: 100%;
		}
		figure {
			width: 100%;
			margin: 1rem auto;
		}
		ul {
			width: 100%;
		}
		p {
			margin-bottom: 2rem;
		}
	}

	.dna__wap-center {
		li {
			margin-left: 2rem;
			text-indent: -1.6rem;
			}
		}

	.dna__wap-be {
		width: 100%;
		ul {
			width: 90%;
			li {
				width: 48%;
				margin: 1rem 0 0 0;
			}
		}
		p {
			width: 90%;
			margin: 2rem auto;
		}
	}

	.flow_design07 {
		width: 90%;
		margin: 0 auto;
	}

	.flow07 > li dl {
		padding: 0 0 0 1.5rem;
		width: calc(100% - 100px);
	}

	.dna__title,
	.dna__title-number {
		padding-bottom: 0;
	}

.thanks__wap {
	p {
		text-align: left;
	}
}




}