@charset "UTF-8";

/*----------------------------------------------------
   
   基本
   
----------------------------------------------------*/

/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
}

/*----------------------------------------------------
   
   main-lead
   
----------------------------------------------------*/

#main-lead .inner {
	display: flex;
	flex-flow: column;
	align-items: center;
}
#main-lead h2 {
	font-weight: bold;
	text-align: center;
	line-height: 1.8;
	font-size: 22px;
	margin-bottom: 1em;
}
#main-lead .lead-txt {
	text-align: center;
	line-height: 2.2;
	font-size: 18px;
}
#main-lead .lead-txt:last-of-type {
	margin-top: 1.5em;
}
#main-lead .lead-logo {
	display: inline-flex;
	align-items: flex-end;
	line-height: 1;
}
#main-lead .lead-txt .lead-logo img {
	max-width: 120px;
	flex-shrink: 0;
	line-height: 1;
}

/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
#main-lead .inner h2 {
	font-size: 26px;
}
#main-lead .lead-txt .lead-logo img {
	max-width: 100px;
}
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
#main-lead {
	margin-top: 0;
}
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
}


/*----------------------------------------------------
   
   main-navi
   
----------------------------------------------------*/

#main-navi {
	border-top: double 4px #d65d78;
	border-bottom: double 4px #d65d78;
	box-sizing: border-box;
}
#main-navi ul {
	display: flex;
	flex-wrap: wrap;
}
#main-navi ul li {
	display: flex;
	justify-content: center;
	flex-basis: 50%;
	box-sizing: border-box;
	border-right: solid 1px #d65d78;
	border-bottom: solid 1px #d65d78;
}
#main-navi ul li:nth-of-type(even) {
	border-right: none;
}
#main-navi ul li:last-child,
#main-navi ul li:nth-last-child(2):nth-child(odd) {
	border-bottom: none;
}
#main-navi ul li a {
	display: flex;
	padding: 1em 1em;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
}
#main-navi ul li a:after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: solid 1px #683b40;
	border-bottom: solid 1px #683b40;
	transform: rotate(45deg) translateY(-3px);
	margin-left: .5em;
}
#main-navi li a:hover:after {
	border-right: solid 1px #f35c7d;
	border-bottom: solid 1px #f35c7d;
}

/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
}


/*----------------------------------------------------
   
   introduction
   
----------------------------------------------------*/

#introduction {
}
#introduction .inner {
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(249,221,218,1) 80%);
	padding-top: 3em;
	width: 100%;
	box-sizing: border-box;
	padding: 0 3%;
}
#introduction .inner h2 {
	text-align: center;
	padding: 1em 0 0;
	line-height: 2;
	font-size: 22px;
}
#introduction .inner h2 strong {
	display: inline-block;
	background-color: #FFF;
	color: #dc7188;
	line-height: 1.5;
	padding: 0 .2em;
	margin: 0 .2em;
	font-size: 28px;
}
#introduction .inner .att {
	text-align: right;
}

/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
#introduction .inner h2 {
	font-size: 26px;
}
#introduction .inner h2 strong {
	font-size: 32px;
}
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
}


/*----------------------------------------------------
   
   recommended
   
----------------------------------------------------*/

#recommended {
	margin: 2em auto 4em;
}
#recommended .flex-content .osusume {
	padding: 2.5em 1.5em;
	box-sizing: border-box;
	border: solid 1px #d65d78;
	text-align: center;
	width: 94%;
	margin: 1.5em auto 0;
	position: relative;
}
#recommended .flex-content .osusume:after {
	content: "";
	width: 26%;
	aspect-ratio: 710/605;
	background-image: url("../img/awa01.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	position: absolute;
	right: -2.5em;
	bottom: -3em;
}
#recommended .flex-content .osusume h3 {
	display: flex;
	flex-flow: column;
	align-items: center;
}
#recommended .flex-content .osusume h3:after {
	content: "";
	width: 10px;
	aspect-ratio: 150/750;
	background-image: url("../img/dot.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	margin: 1em 0;
}

#recommended .flex-content .osusume ul {
	display: inline-block;
	text-align: left;
}
#recommended .flex-content .osusume ul li {
	font-size: 18px;
	margin: 0 0 1.5em 0;
	line-height: 2;
	display: flex;
	align-items: flex-start;
}
#recommended .flex-content .osusume ul li:before {
	content: "";
	width: 14px;
	height: 20px;
	display: block;
	box-sizing: border-box;
	border-bottom: solid 5px #efb0bd;
	border-right: solid 5px #efb0bd;
	transform: rotate(45deg) translateY(.4em);
	font-size: 18px;
	margin-right: 1em;
}
#recommended .flex-content .osusume ul li:last-of-type {
	margin: 0 ;
}


/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#recommended .flex-content .osusume ul li {
	font-size: 15px;
}
#recommended .flex-content .osusume ul li:before {
	content: "";
	width: 12px;
	height: 18px;
	display: block;
	box-sizing: border-box;
	border-bottom: solid 4px #efb0bd;
	border-right: solid 4px #efb0bd;
	transform: rotate(45deg) translateY(-.4em) translateX(.6em);
	font-size: 18px;
	margin-right: 1.5em;
}
}


/*----------------------------------------------------
   
   product
   
----------------------------------------------------*/

#product .flex-w100 {
	background-image: url("../img/bg-cosme.jpg?202601231135");
	background-repeat: repeat-y;
	background-size: 100% auto;
	background-position: left top;
	position: relative;
}
@media screen and ( min-width:600px) {
#product .pc {
	display: block;
}
#product .sp {
	display: none;
}
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#product .flex-w100 {
	padding-top: 0;
}
#product .pc {
	display: none;
}
#product .sp {
	display: block;
}
}

/*----------------------------------------------------
   タイトル
----------------------------------------------------*/
#product .sec-titlebox {
	position: relative;
	z-index: 10;
	display: flex;
	flex-flow: row-reverse;
	align-items: center;
	justify-content: center;
	/*margin-bottom: 2em;*/
	padding-bottom: 0;
}
#product .cosme-woman {
	width: 30%;
	max-width: 135px;
	flex-shrink: 0;
	margin-right: 4%;
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#product .sec-titlebox {
	margin-bottom: 1.5em;
}
}

/*----------------------------------------------------
   コスメ配置
----------------------------------------------------*/
#product .cosme-box {
	margin-bottom: 3.5em;
}
@media screen and ( min-width:600px) {
#product .cosme-box {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	position: relative;
	z-index: 10;
	margin-bottom: 3.5em;
}
#product .cosme-box .pht-box {
	width: 36%;
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
	z-index: 10;
}
#product .cosme-box .cosme-txt {
	width: 54%;
	position: relative;
	z-index: 15;
}
#product .cosme-box .package {
	width: 10%;
	display: flex;
	align-items: flex-end;
}
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#product .cosme-box {
	display: flex;
	flex-flow: wrap;
	align-items: center;
	justify-content: center;
}
#product .cosme-box .pht-box {
	display: flex;
	justify-content: center;
	width: 100%;
	position: relative;
}
#product .cosme-box .pht-box .pht {
	width: 80%;
	max-width: 300px;
}
#product .cosme-box .cosme-txt {
	position: relative;
	max-width: 75%;
	z-index: 15;
	margin-right: 4%;
}
#product .cosme-box .package {
	width: 18%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
}
/*----------------------------------------------------
   コスメ配置（セラムの蓋・PC）
----------------------------------------------------*/
#product .cosme01.pc {
	width: 35%;
	position: absolute;
	right: -6%;
	top: -70px;
	z-index: 5;
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#product .cosme-box .pht-box .cosme01.sp {
	width: 40%;
	position: absolute;
	right: 0;
	top: 0;
}
}
/*----------------------------------------------------
   コスメ配置（セラム）
----------------------------------------------------*/
@media screen and ( min-width:600px) {
#product .cosme02 .pht-box {
	left: -9%;
}
#product .cosme02 .cosme-txt {
	margin-right: 4%;
}
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#product .cosme02 .pht-box {
	justify-content: flex-start;
}
#product .cosme02 .pht-box .pht {
	width: 50%;
	margin-left: 15%;
}
#product .cosme02 .package img {
	max-width: 60px;
}
}
/*----------------------------------------------------
   コスメ配置（クリーム）
----------------------------------------------------*/
@media screen and ( min-width:600px) {
#product .cosme03 {
	justify-content: flex-end;
	align-items: flex-end;
	flex-flow: row-reverse;
	margin-bottom: 1.5em;
}
#product .cosme03 .pht-box {
	width: 45%;
	right: -6%;
}
#product .cosme03 .cosme-txt {
	margin-left: 4%;
}
#product .cosme03 .package {
	width: 15%;
}
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#product .cosme03 {
	margin-bottom: 1em;
}
}

/*----------------------------------------------------
   テキスト装飾
----------------------------------------------------*/
#product .cosme-box .cosme-txt h4 {
	color: #d65d78;
	font-size: 20px;
	margin-bottom: .5em;
	line-height: 1.5;
}
#product .cosme-box .cosme-txt p {
	line-height: 1.6;
	margin-bottom: .4em;
	font-size: 14px;
}
#product .cosme-box .cosme-txt .txt strong {
	color: #f790a7;
	font-size: 24px;
}
#product .cosme-box .cosme-txt .btn {
	width: 90%;
	margin: 1em auto 0 0;
}
.release:not(:has(span)) {
	background-color: #d65d78;
	display: inline-block;
	color: #FFF;
	padding: 0 .4em;
}
.release span {
	background-color: #d65d78;
	display: inline-block;
	color: #FFF;
	padding: 0 .4em;
}
/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#product .cosme-box .cosme-txt .btn a {
	padding: 1em;
}
.release:has(span) {
	text-align: center;
}
}


/*----------------------------------------------------
   
   mask
   
----------------------------------------------------*/

#mask {
	position: relative;
	padding: 1.5em 0 3em 0;
}
#mask .mask-box {
	display: flex;
	flex-flow: wrap;
	align-items: flex-start;
	margin: 2.5em 0 2.5em;
}
@media screen and ( min-width:600px) {
#mask .pc {
	display: block;
}
#mask .sp {
	display: none;
}
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#mask .mask-box {
	flex-flow: column;
	align-items: center;
}
#mask .mask-box.rightening {
	margin: 2.5em 0 3.5em;
}
#mask .pc {
	display: none;
}
#mask .sp {
	display: block;
}
}

/*----------------------------------------------------
   リードタイトル
----------------------------------------------------*/
h2.product-title {
	text-align: center;
	padding: 1em 0 0;
	line-height: 2;
	font-size: 22px;
	position: relative;
	z-index: 10;
	margin: 0 auto 1em;
	width: 94%;
}
#mask h2.product-title {
	width: 100%;
}
h2.product-title strong {
	display: inline-block;
	color: #dc7188;
	line-height: 1.5;
	margin: 0 .2em;
	font-size: 28px;
}
h2.product-title strong.bg-pink {
	display: inline-block;
	background-color: #d65d78;
	color: #FFF;
	line-height: 1.5;
	padding: 0 .2em;
	margin: 0 .2em;
	font-size: 28px;
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
h2.product-title {
	font-size: 20px;
	width: 94%;
	margin: 0 auto 1.5em;
}
h2.product-title strong {
	font-size: 24px;
}
}
/*----------------------------------------------------
   マスク名
----------------------------------------------------*/
#mask h3 {
	color: #FFF;
	font-size: 20px;
	width: 100%;
	text-align: center;
	padding: .5em;
	box-sizing: border-box;
	margin-bottom: 1em;
	background-color: #d65d78;
}
/*#mask .mask-box h3 {
	color: #FFF;
	font-size: 20px;
	width: 100%;
	text-align: center;
	padding: .5em;
	box-sizing: border-box;
	margin-bottom: 1em;
}*/
/*----------------------------------------------------
   マスク配置
----------------------------------------------------*/
#mask .mask-box .pht {
	width: 30%;
}
#mask .mask-box .pht dd {
	margin-top: .5em;
}
#mask .mask-box .mask-txt {
	width: 65%;
	margin-left: 5%;
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#mask .mask-box .pht {
	width: 80%;
	display: flex;
	flex-flow: column;
	align-items: center;
}
#mask .mask-box .pht dt {
	max-width: 200px;
}
#mask .mask-box .pht dd {
	max-width: 180px;
	margin: 1em 0;
}
#mask .mask-box .mask-txt {
	width: 90%;
	margin-left: 0;
}
}
/*----------------------------------------------------
   テキスト装飾
----------------------------------------------------*/
#mask .mask-box .mask-txt h4 {
	padding-bottom: .5em;
	margin-bottom: .5em;
	border-bottom: solid 1px #522024;
	font-size: 18px;
	line-height: 1.5;
	margin-top: .4em;
}
#mask .mask-box .mask-txt p {
	line-height: 1.5;
	font-weight: bold;
}
#mask .mask-box .mask-data {
	width: 100%;
	margin-right: auto;
	position: relative;
	box-sizing: border-box;
	margin-top: 1em;
}
#mask .mask-box .mask-data .category {
	text-align: left;
}
#mask .mask-box .mask-data .category li {
	display: inline-block;
	box-sizing: border-box;
	border: solid 1px #886467;
	color: #886467;
	padding: .2em .5em;
	font-size: 14px;
	margin: .2em .2em .2em 0;
}
#mask .mask-box .mask-data .type {
	font-size: 16px;
	padding-top: .5em;
	margin-top: .5em;
	border-top: solid 1px #522024;
	line-height: 1.5;
	font-weight: bold;
	color: #d65d78;
}
#mask .mask-box .mask-data .type span {
	margin-right: 1em;
}
#mask .mask-box .mask-data .type span:last-of-type {
	margin-right: 0;
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#mask .mask-box .mask-txt h4 {
	font-size: 20px;
	text-align: center;
}
#mask .mask-box .mask-data {
	width: 100%;
	padding-left: 0;
}
}
/*----------------------------------------------------
   ボタン
----------------------------------------------------*/
#mask .mask-box .btn {
	width: 94%;
	margin-top: 1.5em;
}
#mask .mask-box .btn a {
	padding: 1em;
}

/*----------------------------------------------------
   白玉
----------------------------------------------------*/
#mask .rightening h3 {
	background-color: #f9c74e;
}
#mask .rightening .btn a {
	background-color: #f9c74e;
}
#mask .rightening .btn a:hover {
	background-color: #ffc54c;
}

/*----------------------------------------------------
   保湿
----------------------------------------------------*/
#mask .moisture {
	margin-bottom: 1em;
}
#mask .moisture h3 {
	background-color: #f2a7a3;
}
#mask .moisture .btn a {
	background-color: #f2a7a3;
}
#mask .moisture .btn a:hover {
	background-color: #ff9892;
}


/*----------------------------------------------------
   
   naturelace
   
----------------------------------------------------*/

#naturelace {
	position: relative;
	background-color: #fbe8ed;
	padding: 4em 0;
}
#naturelace:before {
	content: "";
	width: calc(100% - 3.5em);
	height: calc(100% - 3.5em);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background-color: #fcf5f6;
	z-index: 5;
}
#naturelace .inner {
	position: relative;
	z-index: 10;
	margin: 0 auto;
	width: 94%;
}
#naturelace h2 {
	text-align: center;
	font-size: 22px;
	position: relative;
	z-index: 10;
	margin: 0 auto;
	line-height: 1.6;
}
#naturelace h2 span {
	line-height: 1.6;
}
#naturelace h2 strong {
	color: #dc7188;
	line-height: 1.6;
	font-size: 28px;
}
#naturelace .pht {
	margin: 1.5em auto 0;
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#naturelace h2 {
	font-size: 20px;
}
#naturelace h2 strong {
	font-size: 24px;
}
}

/*----------------------------------------------------
   
   feature
   
----------------------------------------------------*/

#feature {
	margin: 1.5em auto;
	padding: 3.5em 0;
	background-image: linear-gradient(#fcf1ef, #fcf4f2 20%, #fdfcfc 40%, #fceeef 80%, #ffffff);
	/*background-image: url("../img/bg-feature.jpg"),url("../img/bg-feature02.jpg");
	background-repeat: no-repeat,repeat-y;
	background-size: 100% auto,100% auto;
	background-position: left top;*/
}
#feature .feature-title {
	margin: 1.5em auto .5em;
	width: 90%;
}
#feature .flex-content {
	padding-bottom: 0;
}
#feature .flex-w100 {
	width: 94%;
	margin: 0 auto;
}

#feature .technology-box {
	border-radius: 30px;
	overflow: hidden;
	background-color: #FFF;
	box-shadow: 0px 0px 20px 0px rgba(229,208,209,0.7);
	margin-top: 2em;
	padding-bottom: 2em;
}

#feature .technology-box .technology-title {
	display: flex;
	flex-flow: column;
	margin-bottom: 1.5em;
}
#feature .technology-box .technology-title:after {
	content: "";
	width: 100%;
	aspect-ratio: 750/77;
	background-image: url("../img/bg-under-wave.png");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
}
#feature .technology-box .technology-title dt {
	color: #FFF;
	text-align: center;
	font-size: 24px;
	background-color: #e99eaf;
	padding: 1em 1em .2em;
}
#feature .technology-box .technology-title dd {
	color: #FFF;
	text-align: center;
	line-height: 1.8;
	background-color: #e99eaf;
	padding: 0 1em 2em;
}

#feature .technology-box .rose-title {
  width: 100%;
  /*aspect-ratio: 2/1;
  background: #fceef1;
  border-radius: 0 0 800px 800px;
  font-size: 22px;
  box-sizing: border-box;
  padding: 1.5em 3em;
  text-align: center;*/
}
/*#feature .technology-box .rose-title strong {
  font-size: 28px;
}*/

#feature .technology-box .taurine-title {
	text-align: center;
	line-height: 1.8;
	width: 94%;
	margin: 0 auto;
	color: #d65d78;
	border-bottom: dashed 2px #e99eaf;
	font-size: 22px;
}

#feature .technology-box .technology-data {
	background-color:  #fceef1;
	border-radius: 30px;
	box-shadow: 0px 0px 10px 0px rgba(214,214,214,0.6);
	margin: 4.5em auto;
	width: 94%;
	position: relative;
	box-sizing: border-box;
	padding: 0 1em 2em;
}
#feature .technology-box .technology-data:last-of-type {
	margin: 4.5em auto 0;
}
#feature .technology-box .technology-data .pht {
	background-color:  #fff;
	padding: 1em;
	border-radius: 30px;
}
#feature .technology-box .technology-data h4 {
	background-image: linear-gradient(#e3879b, #f7d0cc);
	width: 80%;
	padding: .5em;
	color: #FFF;
	font-size: 22px;
	border-radius: 200px;
	margin: 0 auto 0;
	position: relative;
	top: -1.2em;
	text-align: center;
	line-height: 1.5;
}
#feature .technology-box .technology-data h4 .att.block {
	display: block;
}
#feature .technology-box .technology-data .pickup-txt {
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	line-height: 1.6;
	margin: 1em auto;
}
#feature .technology-box .technology-data .pickup-txt:first-of-type {
	margin: 0 auto 1em;
}
#feature .technology-box .technology-data .pickup-txt strong {
	color: #dc7188;
	line-height: 1.6;
}
#feature .technology-box .technology-data .pickup-txt strong.big {
	font-size: 24px;
}

#feature .technology-box .technology-data .technology02-title {
	margin: 1em auto;
}

#feature .technology-box .result {
	margin: 1.5em auto;
	background-color: #FFF;
	padding: .4em;
	text-align: center;
	font-weight: bold;
	color: #dc7188;
	font-size: 18px;
}

#feature .rose .technology-title {
	background-color: #fceef1;
	margin-bottom: 0;
}
#feature .technology-box .rose-box {
	width: 94%;
	margin: 1.5em auto 0;
}
#feature .technology-box .component-title {
	width: 100%;
	margin: 2em auto 1.5em;
	text-align: center;
	padding: .4em;
	color: #d65d78;
	border-top: solid 1px #d65d78;
	border-bottom: solid 1px #d65d78;
	font-size: 18px;
}
#feature .technology-box .component {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(4em, auto);
	gap: .4em;
	margin-bottom: 1em;
}
#feature .technology-box .component li {
	background-color: #fbe8ed;
	padding: .5em;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#feature .technology-box .component li p {
	line-height: 1.5;
	text-align: center;
	color: #e38892;
}
#feature .technology-box .component li p .att {
	font-size: 10px;
}

#feature .free-prescription {
	margin: 3.5em auto 0;
}
#feature .free-prescription .pht {
	margin: 2.5em auto 0;
	width: 90%;
	max-width: 350px;
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#feature {
	position: relative;
	justify-content: center;
}
#feature .flex-title {
	position: absolute;
	left: 0;
	top: 3.5em;
}
#feature .flex-content {
	padding-left: 0;
	padding-right: 0;
}
#feature .technology-box .taurine-title {
	font-size: 20px;
}
#feature .technology-box .technology-data h4 {
	font-size: 20px;
}
#feature .technology-box .technology-data .pickup-txt {
	font-size: 18px;
}
#feature .technology-box .technology-data .pickup-txt strong.big {
	font-size: 22px;
}
#feature .technology-box .component li p .att {
	font-size: 8px;
}
/*#feature .technology-box .rose-title {
  padding: 1em 3em;
}*/
}


/*----------------------------------------------------
   
   howto
   
----------------------------------------------------*/

#howto {
	margin: 1.5em auto 0;
}
#howto01 {
	background-image: url("../img/bg-howto-top.jpg");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 40% auto;
	background-color: #fff8f4;
	padding: 3.5em 0 2em;
}
#howto02 {
	background-image: url("../img/bg-howto-left.jpg");
	background-repeat: no-repeat;
	background-size: 60% auto;
	background-position: left center;
	background-color: #fff7fa;
	padding: 0 0 2em 0;
	flex-flow: column;
	align-items: flex-end;
}
#howto02:before {
	content: "";
	width: 100%;
	aspect-ratio: 750/83;
	background-image: url("../img/bg-howto-line.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left top;
}
#howto02 .flex-content {
	margin: 0 auto;
}

#howto .howto-title {
	margin: 1.5em auto;
	width: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#howto .howto-title dt {
	max-width: 220px;
	flex-shrink: 0;
}
#howto02 .howto-title dt {
	max-width: 150px;
	flex-shrink: 0;
}
#howto .howto-title dd {
	max-width: 180px;
	width: 40%;
	flex-shrink: 0;
}

#howto .slide-box li {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
	height: auto;
}
#howto .slide-box li h4 {
	margin: 0 auto 1em;
	width: 90%;
	max-width: 100px;
}
#howto .slide-box li .pht {
	margin: 0 auto 1em;
	width: 80%;
	max-width: 200px;
}
#howto .slide-box li .pht.woman {
	width: 100%;
	height: 100%;
	max-width: 100%;
	display: flex;
	align-items: center;
}
#howto .slide-box li h5 {
	text-align: center;
	padding-bottom: .5em;
	margin-bottom: 1em;
	border-bottom: solid 1px #683b40;
}
#howto .slide-box li h5 strong {
	font-size: 22px;
}
#howto .slide-box li p {
	line-height: 1.8;
}

#howto02 .slide-box li:has(h4) {
	box-sizing: border-box;
	border: solid 1px #b64561;
	background-color: #FFF;
	border-radius: 300px;
	padding: 50px 1.5em;
}
#howto02 .slide-box li p {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#howto02 .howto-title dd {
	max-width: 180px;
	width: 50%;
}
}

/*----------------------------------------------------
   
   for-sale
   
----------------------------------------------------*/

#for-sale {
	background-color: #fff7fa;
}
#for-sale .inner {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 2em 0;
}
#for-sale .inner .pht {
	width: 58%;
}
#for-sale .inner dl {
	width: 40%;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}
#for-sale .inner dl dt {
	width: 90%;
	margin: 0 auto 1.5em;
}
#for-sale .inner dl dd {
	line-height: 1.8;
}


/*----------------------------------------------------
   
   questionnaire
   
----------------------------------------------------*/

#questionnaire {
	background-image: linear-gradient(rgba(210, 210, 210, 0.3) 1px, transparent 1px), linear-gradient(to right, rgba(210, 210, 210, 0.3) 1px, transparent 1px);
    background-size: 24px 24px;
    background-color: #fff;
    background-position: -14px 14px;
	display: flex;
	flex-flow: column;
}
#questionnaire:before {
	content: "";
	width: 100%;
	height: 50px;
	background-image: linear-gradient(#fff7fa 20%, transparent);
}
#questionnaire .flex-wrap {
	padding: 2.5em 0;
}
#questionnaire .slide-box {
	width: 90%;
	max-width: 400px;
}
#questionnaire .slide-box .swiper-wrapper {
}
#questionnaire .slide-box li {
	border: solid 2px #e99eaf;
	box-sizing: border-box;
	border-radius: 20px;
	padding: 2em .5em 0;
	background-color: #FFF;
	box-shadow: 6px 6px 10px 0px rgba(214,214,214,0.6);
	height: auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
}
#questionnaire .slide-box li h4 {
	font-size: 20px;
	text-align: center;
	line-height: 1.6;
}
#questionnaire .slide-box li h4 .span {
	line-height: 1.6;
}
#questionnaire .slide-box li .pht {
	width: 100%;
	margin: 1em auto;
}
#questionnaire .slide-box li .summary {
	display: flex;
	flex-flow: column;
	align-items: center;
	margin-bottom: 1.5em;
}
#questionnaire .slide-box li .summary:before {
	content: "";
	width: 42.4px;
	height: 40px;
	background: #dc7188;
	clip-path: polygon(0 47%, 26.4% 47%, 26.4% 0, 73.6% 0, 73.6% 47%, 100% 47%, 50% 100%);
}
#questionnaire .slide-box li .summary p.summary-txt {
	font-size: 20px;
	color: #dc7188;
	text-align: center;
	font-weight: bold;
	line-height: 1.6;
	margin-top: .5em;
}
#questionnaire .slide-box li .q {
	width: 35%;
	position: relative;
	top: -10px;
}
#questionnaire .slide-box li:nth-child(-n+9) .q {
	width: 26%;
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
#questionnaire .slide-box li h4,
#questionnaire .slide-box li .summary p.summary-txt  {
	font-size: 18px;
}
#questionnaire .slide-box li .summary:before {
	width: 28.3px;
	height: 26px;
	clip-path: polygon(0 45.6%, 32.3% 45.6%, 32.3% 0, 67.7% 0, 67.7% 45.6%, 100% 45.6%, 50% 100%);
}
}