@charset 'UTF-8';

:root { --feature_pink-txt:#544a48; --feature_pink-bg:#fff6f9; --feature_pink-main-bg:#fff6f9; --feature_pink-btn-bg:#e6b3bb; --feature_pink-btn:#c26d8c; }



/*==============================
	common
==============================*/
#feature_pink { margin:1em auto; color:var(--feature_pink-txt); }

#feature_pink > section:nth-of-type(n+2) { padding:5em 0; }
#feature_pink > section.bg-color,
#feature_pink > section.bg-color h2 span { background:var(--feature_pink-bg); }
#feature_pink > section:nth-of-type(n+3) p { line-height: 1.8em; }
#feature_pink img { display:block; width:100%; }

/*title*/
#feature_pink h2 { 
	width:calc(100% - 4em);
	max-width:18em;
	margin:0 auto 1.2em;
	text-align:center;
	font-size:1.6em;
	font-weight:500;
	line-height:1em; }

#feature_pink > section:nth-of-type(n+2) h2:nth-of-type(n+2) { margin-top:4em; }
#feature_pink h2:before {	position:relative;	top:.5em;	content:'';	display:block;	width:100%;	height:1px;	margin:auto;	background:#333; }
#feature_pink h2 span {	position:relative;	padding:0 .6em;	letter-spacing:2px;	background:#fff; }

#feature_pink h3 {	width:calc(100% - 4em);	max-width:800px; margin:0 auto 1.2em; text-align: center; font-size:1.2em; line-height:1.2em; }

@media screen and (max-width:1024px) {
#feature_pink h2 { font-size:1.4em; }
#feature_pink > section:nth-of-type(n+2) h2:nth-of-type(n+2) { margin-top:3em; }
}

@media screen and (max-width:768px) {
#feature_pink > section:nth-of-type(n+2) { padding:4em 0; }
#feature_pink h2 { width:calc(100% - 2em); font-size:1.4em; }
}




@media screen and (max-width:425px) {
#feature_pink > section:nth-of-type(n+2) { padding:3em 0; }
#feature_pink h2 { font-size:1.2em; }
#feature_pink h2 span { letter-spacing:1px; }
}

@media screen and (max-width:320px) {
#feature_pink h2 { width:calc(100% - 2em); font-size:1.1em; }
#feature_pink h2 span { padding:0 .3em; letter-spacing:0; }
}



/*==============================
	main vs
==============================*/
#feature_pink #main-visual {
 position:relative;
 width:100%;
 background:var(--feature_pink-main-bg);
 padding-bottom:2em;
}

@media screen and (min-width:1025px)  {
#feature_pink #main-visual img {	
  max-width:1000px; 
 display: block;
  margin: 0 auto; }
}

#feature_pink #main-visual .u-tit { max-width:1000px; display: block; margin:2em auto; }

#feature_pink #main-visual .deco_heart-right {
            margin-top: max(-25vw);
    width: 100px;
    margin-inline: max(80vw) auto; }

#feature_pink #main-visual p b {
	font-size: 1.1em;
    margin-top: 1.8em;
    text-align: center;
    line-height: 2em;
}

#feature_pink #main-visual p {
    margin-top: 1.8em;
    text-align: center;
    line-height: 2em;
}

#feature_pink #main-visual .list-tab {
	background: var(--feature_pink-btn-bg);
    position: relative;
    z-index: 2;
	text-align: center;
	 display: block;
  margin: 0 auto;
}

@media screen and (min-width:1025px)  {
#feature_pink #main-visual .list-tab { width: 1000px; }
}

#feature_pink #main-visual .list-tab ul {
    width: 100%;
    display: table;
	border-bottom: 1px solid #fff;
}

#feature_pink #main-visual .list-tab ul::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: #fff; /* 中央縦線 */
    transform: translateX(-0.5px); /* 線の中心を中央に */
    pointer-events: none;
    z-index: 1;
}


#feature_pink #main-visual .list-tab ul li {
  width: 50%;
  display: table-cell;
  vertical-align: middle; /* ← テーブルセル用 */
  height: 100px; /* 必要に応じて調整 */
}

#feature_pink #main-visual .list-tab ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 0 10px;
  height: 100%; /* flexの高さ基準 */
  color: #fff;
  font-size: 1.1em;
  font-weight: 600;
  flex-direction: column; /* 改行されてるテキストに対応 */
}



#feature_pink #main-visual .list-tab ul li a::after {
  content: "∨";
  color: #fff;
  font-size: 0.8em; /* 必要に応じて調整 */
  display: inline-block;
  vertical-align: middle;
}


/*==============================
	contents_aroma
==============================*/
#feature_pink #contents_aroma .message { display:block; width:calc(100% - 2em); margin:auto; }

#feature_pink #contents_aroma p { text-align:left; line-height:1.8em; }
#feature_pink #contents_aroma p + p { margin-top:1.2em; }
#feature_pink #contents_aroma h2 + p { font-size:1.2em; }


#feature_pink #contents_aroma img {	display:block; width:calc(100% - 2em);	max-width:1000px;	margin:2em auto; }

@media screen and (max-width:500px) {
#feature_pink #contents_aroma .message > p { text-align:left; }

}

#feature_pink #contents_aroma p b { padding:0 1em .6em; font-weight:600; letter-spacing:1px; border-bottom:1px solid; }


@media screen and (min-width:769px) {
#feature_pink #contents_aroma .message { max-width: 1000px; }
#feature_pink #contents_aroma  .name > p  { font-size: 1.06em; }
}

/*==============================
	contents_special
==============================*/
#feature_pink #contents_special .message { display:block; width:calc(100% - 2em); margin:auto; }
#feature_pink #contents_special .supervisor { text-align:center; font-weight:600; }
#feature_pink #contents_special .supervisor p span { font-size:0.8em }
#feature_pink #contents_special p { line-height:1.8em; margin-top:1.2em; }
#feature_pink #contents_special h2 + p { font-size:1.2em; }
#feature_pink #contents_special img { display:block; width:calc(100% - 2em);	max-width:1000px;	margin:2em auto; }

#feature_pink #contents_special div.supervisor { display: flex; justify-content: center; align-items: center; margin-top: 1em; }
#feature_pink #contents_special img { display: block; width: 120px; border-radius: 50vh; margin: 1em; }
	
@media screen and (min-width:769px) {
#feature_pink #contents_special .message { max-width: 1000px; }
#feature_pink #contents_special .supervisor > p  { font-size: 1.06em; }
}


/*==============================
	contents_effect
==============================*/

#feature_pink #contents_effect .message { display:block; width:calc(100% - 2em); margin:auto; }

@media screen and (min-width:769px) {
#feature_pink #contents_effect .message { max-width: 1000px; }
#feature_pink #contents_effect  .supervisor > p  { font-size: 1.06em; }
}

#feature_pink #contents_effect ul {	display:flex; flex-wrap:wrap;	justify-content:center;	align-items:center;	}
#feature_pink #contents_effect li {
 position:relative;
 display:flex;
 flex-wrap:wrap;
 align-content:center;
 align-items:center;
 width:8em;
 height:8em;
 margin:.4em;
 text-align:center;
 background:var(--feature_pink-bg);
 border-radius:50vh;
}

#feature_pink #contents_effect li:nth-of-type(1) svg,
#feature_pink #contents_effect li:nth-of-type(4) svg { width:3.4em; }
#feature_pink #contents_effect li p {	width:100%; margin-top:1em; font-weight:500;	line-height:1.4em;	}


@media screen and (min-width:1441px) {
#feature_pink #contents_effect li { width:14em; height:14em; }
#feature_pink #contents_effect li svg { width:5.6em; }
#feature_pink #contents_effect li:nth-of-type(1) svg,
#feature_pink #contents_effect li:nth-of-type(4) svg { width:5em; }
}

@media screen and (max-width:1440px) {
#feature_pink #contents_effect li { width:12em; height:12em; }
}

@media screen and (max-width:1024px) {
#feature_pink #contents_effect ul {	max-width:40em; margin:auto;	}
#feature_pink #contents_effect li p {	margin-top:2vw;	}
}

@media screen and (max-width:768px) {
#feature_pink #contents_effect li { width:30vw; max-width:10em; height:30vw; max-height:10em; }
#feature_pink #contents_effect li svg { width:3.2em; }
#feature_pink #contents_effect li:nth-of-type(1) svg,
#feature_pink #contents_effect li:nth-of-type(4) svg { width:2.6em; }
}

@media screen and (max-width:425px) {
#feature_pink #contents_effect li { margin:.2em .3em; }
#feature_pink #contents_effect li:nth-of-type(2) svg { position:relative; top:2vw; }
#feature_pink #contents_effect li p {	line-height:1.2em;	}
}

#feature_pink #contents_effect p + p { margin-top:1.2em; }
#feature_pink #contents_effect h2 + p { font-size:1.2em; }

#feature_pink #contents_effect img { display:block;	width:calc(100% - 2em);	max-width:1000px;	margin:2em auto; }


/*==============================
	all item
==============================*/


#feature_pink #allitem ul {	display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;	width:calc(100% - 6em);	max-width:1440px; margin:auto; }
#feature_pink #allitem li { display:block; padding:0 2em 2em; background:#fff; }

#feature_pink #allitem a {
	display: block;
    width: 16vw;
    min-width: 8em;
    max-width: 10em;
    height: auto;
    margin: .6em auto 0;
    padding: .8em 0 .7em;
    text-align: center;
    font-weight: 600;
    line-height: 1em;
    color: #fff;
    background: var(--feature_pink-btn);
    border: none;
    border-bottom: .3em solid #964a66;
    border-radius: 50vh;
    cursor: pointer; } 


/*h3*/
#feature_pink #allitem h3 { position:relative; margin-bottom:1em; letter-spacing:.1em; }
#feature_pink #allitem h3:before {	content:'';	display:block;	width:8em;	height:.4em;	margin:0 auto 1em; }
#feature_pink #allitem h3 b { margin-left:.6em; }
#feature_pink #allitem h3 .old { position:absolute; bottom:-1.8em; right:0; text-align:center; font-size:12px; letter-spacing:0; }


/*p*/
#feature_pink #allitem a > p { margin-bottom:1.2em; line-height:1.8em; }
#feature_pink #allitem p.sub { text-align:center; margin: 1.8em auto ;}
#feature_pink #allitem p.sub b { padding:0 1em .6em; font-weight:600; letter-spacing:1px; border-bottom:1px solid; }
#feature_pink #allitem p.sub span { display:block; margin-top:1em; line-height:1.5em; }


/*div*/
#feature_pink #allitem li > div:not([class]) { display:flex; justify-content:center; align-items:center; margin-top:1em; }
#feature_pink #allitem li > div:not([class]) > img { width:120px; }
#feature_pink #allitem li > div:not([class]) > p { max-width:13em; margin-left:2em; }
#feature_pink #allitem li > div:not([class]) > p span { display:block; font-size:.9em; line-height:1.8em; }
#feature_pink #allitem li > div:not([class]) > p span:nth-of-type(n+2) { margin-top:.4em; }
#feature_pink #allitem li > div:not([class]) > p span:before {
	position:relative;
	top:.4em;
	content:'';
	display:inline-block;
	width:1.6em;
	height:1.6em;
	margin:-.4em .3em 0 0;
	background-position:center left;
	background-size:100%;
	background-repeat:no-repeat;
	border-radius:50%;
}
#feature_pink #allitem li > div:not([class]) > p span.aroma1:before { background-image:url(/img/aroma/grapefruit.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma2:before { background-image:url(/img/aroma/orange.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma3:before { background-image:url(/img/aroma/bergamot.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma4:before { background-image:url(/img/aroma/mandarin.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma5:before { background-image:url(/img/aroma/lime.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma6:before { background-image:url(/img/aroma/lavender.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma7:before { background-image:url(/img/aroma/rose.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma8:before { background-image:url(/img/aroma/neroli.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma9:before { background-image:url(/img/aroma/geranium.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma10:before { background-image:url(/img/aroma/rosemary.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma11:before { background-image:url(/img/aroma/cedarwood.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma12:before { background-image:url(/img/aroma/clarysage.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma13:before { background-image:url(/img/aroma/hinoki.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma14:before { background-image:url(/img/aroma/ilangilang.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma15:before { background-image:url(/img/aroma/sandalwood.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma16:before { background-image:url(/img/aroma/frankincense.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma17:before { background-image:url(/img/aroma/holeaf.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma18:before { background-image:url(/img/aroma/marjoram.webp); }
#feature_pink #allitem li > div:not([class]) > p span.aroma19:before { background-image:url(/img/aroma/ravinsara.webp); }

/*button*/
#feature_pink #allitem button {
	display:block;
	margin:1.4em auto 0;
	padding:.6em 1.2em;
	text-align:center;
	font-size:1.06em;
	line-height:1.6em;
	background:var(--stresscare-bg);
	border:1px solid;
	border-radius:.2em;
	box-shadow:0 2px 2px 0 rgba(0,0,0,.2);
	transition:.4s;
	cursor:pointer;
}
#feature_pink #allitem a:hover button { border-radius:50vh; }
#feature_pink #allitem a:active button { transform:translateY(4px); -webkit-transform:translateY(4px); border:1px solid; box-shadow:none; }


@media screen and (min-width:1441px) {
#feature_pink #allitem li { width:calc(100%/2 - 1.2em); margin-left:1.8em; }
#feature_pink #allitem li:nth-of-type(n) { margin-top:4em; }
}

@media screen and (max-width:1440px) {
#feature_pink #allitem li:nth-of-type(2) > a > div > p { max-width:14em; }
#feature_pink #allitem li:nth-of-type(3) > a > div > p { max-width:15em; }
}

@media screen and (min-width:1025px) and (max-width:1440px) {
#feature_pink #allitem ul {	max-width:1000px;	}
#feature_pink #allitem li { width:calc(100%/2 - 1em); margin-left:2em; }
#feature_pink #allitem li:nth-of-type(n+3) { margin-top:2em; }
#feature_pink #allitem li:nth-of-type(2n+1) { margin-left:0; }
}

@media screen and (max-width:1024px) {
#feature_pink #allitem ul {	width:calc(100% - 2em);	max-width:500px;	}
#feature_pink #allitem li { width:100%; }
#feature_pink #allitem li:nth-of-type(n+2) { margin-top:2em; }
}

@media screen and (max-width:425px) {
#feature_pink #allitem { font-size:.9em; }
#feature_pink #allitem .api_product_target { font-size:1.1em; }
#feature_pink #allitem ul {	max-width:340px;	}
#feature_pink #allitem li:nth-of-type(1) > a > div > p,
#feature_pink #allitem li:nth-of-type(2) > a > div > p { max-width:10em; }
#feature_pink #allitem li:nth-of-type(3) > a > div > p { max-width:8em; }
#feature_pink #allitem li > div:not([class]) > img { width:100px; }
}

@media screen and (max-width:375px) {
#feature_pink #allitem li { padding:0 1em 1.6em; }
#feature_pink #allitem li > div:not([class]) > img { width:100px; }
#feature_pink #allitem li > div:not([class]) > p { margin-left:1.6em; }
}