@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.cdnfonts.com/css/helvetica-neue-5");
:root {
  --brown-color: #b58154;
  --brown-color2: #807164;
  --font-family: "Helvetica Neue", "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  --font-family-noto: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-family-helvetica: "Helvetica Neue", Arial, sans-serif;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q,
blockquote {
  quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

a,
button {
  display: inline-block;
}

button {
  background-color: transparent;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 14px;
  }
}

body {
  position: relative;
  font-family: var(--font-family);
  font-size: 1rem;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

*,
::after,
::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

section {
  position: relative;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
  padding: 0;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
}

blockquote,
q {
  quotes: "" "";
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

em,
i {
  font-style: normal;
}

a {
  text-decoration: none;
  color: #656565;
}

img {
  vertical-align: middle;
}

input {
  border: none;
  outline: none;
  color: #333;
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

i[class*=icon-] {
  width: 32px;
  height: 32px;
  display: inline-block;
  position: relative;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  top: 0;
  margin-right: 5px;
}

i[class*=icon-].icon-right-arrow {
  width: 9px;
  height: 10px;
  background-image: url("../images/icon-right-arrow.svg");
}

i[class*=icon-].icon-right-arrow-2 {
  width: 5px;
  height: 8px;
  background-image: url("../images/icon-right-arrow-2.png");
}

i[class*=icon-].icon-right-arrow-3 {
  width: 7px;
  height: 13px;
  background-image: url("../images/icon-right-arrow-3.png");
}

body {
  padding-top: 140px;
  font-size: 1rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: 0.8px;
  color: #4f4f4f;
}
@media screen and (max-width: 991px) {
  body {
    padding-top: 222px;
  }
}
@media screen and (max-width: 640px) {
  body {
    padding-top: 199px;
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 460px) {
  body {
    padding-top: 164px;
  }
}

.container {
  width: 1400px;
  margin: 0 auto;
}
@media screen and (max-width: 1400px) {
  .container {
    width: 1200px;
  }
}
@media screen and (max-width: 1200px) {
  .container {
    width: 991px;
  }
}
@media screen and (max-width: 991px) {
  .container {
    width: 100%;
  }
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: #fff;
  -webkit-box-shadow: 0.3px 5px 24px 0 rgba(224, 221, 216, 0.5);
          box-shadow: 0.3px 5px 24px 0 rgba(224, 221, 216, 0.5);
}
header .logo-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 60px;
  background-color: #d1c3b7;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
header .logo-bar a {
  display: inline-block;
  margin: 0 auto;
}
header .logo-bar img {
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  header .logo-bar img {
    width: 107px;
  }
}
header nav {
  width: 1200px;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  padding: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid #f3f3f3;
}
@media screen and (max-width: 1200px) {
  header nav {
    width: 990px;
  }
}
@media screen and (max-width: 991px) {
  header nav {
    width: 100%;
    height: initial;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media screen and (max-width: 640px) {
  header nav {
    width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media screen and (max-width: 460px) {
  header nav {
    width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
header nav a {
  display: inline-block;
  font-size: 1rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: center;
  color: #807164;
  margin: 0;
  padding: 0 35px;
  border-right: 1px solid #f3f3f3;
  -webkit-transition: color 0.4s linear;
  transition: color 0.4s linear;
  position: relative;
}
@media screen and (max-width: 1200px) {
  header nav a {
    padding: 14px 25px;
  }
}
@media screen and (max-width: 991px) {
  header nav a {
    width: 50%;
  }
  header nav a:nth-of-type(1), header nav a:nth-of-type(2) {
    height: 95px;
    border-bottom: 1px solid #f3f3f3;
  }
  header nav a span {
    display: block;
  }
  header nav a i {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  header nav a {
    height: 58px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1.2;
    font-size: 1.25rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 0;
  }
  header nav a:nth-of-type(1), header nav a:nth-of-type(2) {
    height: 80px;
  }
}
@media screen and (max-width: 430px) {
  header nav a {
    height: 45px;
  }
  header nav a:nth-of-type(1), header nav a:nth-of-type(2) {
    height: 68px;
  }
}
header nav a p {
  display: block;
  font-size: 1.2rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  color: #807164;
  margin-bottom: 0;
}
header nav a p.brown {
  color: #b58154;
}
header nav a p.m-line span {
  display: block;
}
@media screen and (max-width: 640px) {
  header nav a p {
    width: 100%;
    display: block;
  }
}
header nav a::after {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  background-color: #d1c3b7;
  position: absolute;
  bottom: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: width 0.2s linear;
  transition: width 0.2s linear;
}
@media screen and (max-width: 1200px) {
  header nav a::after {
    bottom: -3px;
  }
}
@media screen and (max-width: 991px) {
  header nav a::after {
    bottom: 0;
  }
}
@media screen and (max-width: 640px) {
  header nav a::after {
    height: 3px;
  }
}
header nav a:hover::after, header nav a.active::after {
  width: 100%;
}
header nav a:hover p {
  color: #905842;
}
header nav a:hover p.brown {
  color: #cf5524;
}
header nav a:last-of-type {
  border-right: 0;
}

section {
  width: 100%;
  position: relative;
}

@media screen and (max-width: 991px) {
  .dsk {
    display: none !important;
  }
}
.mob {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .mob {
    display: block !important;
  }
}
footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 60px;
  background-color: #bdbdbd;
  font-family: var(--font-family-helvetica);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: 0.4px;
  text-align: center;
  color: #f9f7f4;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@-webkit-keyframes zoomin {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes zoomin {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes arrow {
  0% {
    left: 5px;
  }
  50% {
    left: 10px;
  }
  100% {
    left: 5px;
  }
}
@keyframes arrow {
  0% {
    left: 5px;
  }
  50% {
    left: 10px;
  }
  100% {
    left: 5px;
  }
}
.mb-1 {
  margin-bottom: 1.7rem !important;
}

.mb-1-5 {
  margin-bottom: 0.7rem !important;
}

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

@media screen and (max-width: 991px) {
  .d-i {
    display: inline !important;
  }
}

.f-en {
  font-family: var(--font-family-helvetica);
}

@-webkit-keyframes pulse-scale {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}

@keyframes pulse-scale {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
#index #section-kv {
  width: 100%;
}
#index #section-kv h1 {
  display: none;
}
#index #section-kv img {
  width: 100%;
}
#index #section-1 {
  position: relative;
  background: -webkit-gradient(linear, left top, right top, from(#e7e8ec), to(#f4f4f6));
  background: linear-gradient(to right, #e7e8ec, #f4f4f6);
}
@media screen and (max-width: 991px) {
  #index #section-1 {
    background: url(../images/p1-s1-bg2-m.png) no-repeat center bottom;
    background-size: cover;
  }
}
#index #section-1 .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 1000px;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 1200px) {
  #index #section-1 .container {
    width: 740px;
  }
}
@media screen and (max-width: 991px) {
  #index #section-1 .container {
    display: block;
    width: 100%;
    height: initial;
    top: 4rem;
  }
}
#index #section-1 .bg {
  width: 100%;
}
@media screen and (max-width: 991px) {
  #index #section-1 .bg {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
}
#index #section-1 .info-wrap {
  max-width: 400px;
}
@media screen and (max-width: 991px) {
  #index #section-1 .info-wrap {
    max-width: 100%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
  }
}
#index #section-1 .info-wrap h2 {
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: 1.4px;
  font-family: var(--font-family-helvetica);
  line-height: 1.89;
  text-align: left;
  color: #1d1d1d;
  margin-bottom: 1.5rem;
}
#index #section-1 .info-wrap p {
  line-height: 1.89;
  letter-spacing: 0.9px;
  text-align: left;
  color: #1d1d1d;
}
#index .pt-info-wrap {
  width: 47%;
  margin: 0 1rem 3rem auto;
  padding-top: 4rem;
}
@media screen and (max-width: 1400px) {
  #index .pt-info-wrap {
    margin-right: 2rem;
  }
}
@media screen and (max-width: 1200px) {
  #index .pt-info-wrap {
    width: 570px;
  }
}
@media screen and (max-width: 991px) {
  #index .pt-info-wrap {
    width: 495px;
    text-align: center;
    margin: 0 auto;
  }
}
@media screen and (max-width: 640px) {
  #index .pt-info-wrap {
    width: 85%;
  }
}
#index .pt-info-wrap .slogan {
  font-size: 1.5rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.88;
  letter-spacing: 1.2px;
  color: #af9173;
}
#index .pt-info-wrap h3 {
  display: inline-block;
  font-size: 2.6rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 2.1px;
  color: #af9173;
  border: 1px solid #af9173;
  padding: 0.8rem 1.2rem 1rem;
  margin-bottom: 4rem;
}
@media screen and (max-width: 991px) {
  #index .pt-info-wrap h3 {
    text-align: center;
    margin-bottom: 670px;
  }
}
@media screen and (max-width: 640px) {
  #index .pt-info-wrap h3 {
    margin-bottom: 137vw;
  }
}
#index .pt-info-wrap .subtitle {
  margin-bottom: 1.7rem;
}
#index .pt-info-wrap .subtitle p {
  font-family: var(--font-family-helvetica);
  font-size: 2.2rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 1.8px;
  text-align: left;
  color: #504d4d;
  margin-bottom: 1rem;
}
@media screen and (max-width: 640px) {
  #index .pt-info-wrap .subtitle p {
    letter-spacing: 0.5px;
  }
}
#index .pt-info-wrap .text {
  width: 95%;
}
#index .pt-info-wrap .text p {
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.88;
  letter-spacing: 0.8px;
  text-align: justify;
  color: #504d4d;
}
@media screen and (max-width: 640px) {
  #index .pt-info-wrap .text p {
    font-size: 1.2rem;
  }
}
#index .pt-info-wrap .checklist {
  margin-top: 1.8rem;
}
#index .pt-info-wrap .checklist li {
  font-size: 1.112rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.89;
  letter-spacing: 0.9px;
  text-align: left;
  color: #504d4d;
  padding-left: 1.8rem;
  background: url(../images/icon-checked.png) no-repeat left center/21px 21px;
}
@media screen and (max-width: 991px) {
  #index .pt-info-wrap .checklist li {
    font-size: 1rem;
    background: url(../images/icon-checked.png) no-repeat left 0.5rem/1.2rem;
  }
}
@media screen and (max-width: 640px) {
  #index .pt-info-wrap .checklist li {
    font-size: 1rem;
    background: url(../images/icon-checked.png) no-repeat left 0.4rem/1.2rem;
  }
}
#index .pt-desc-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
#index .pt-desc-wrap .desc {
  margin-right: 3rem;
  text-align: right;
  padding-bottom: 0.5rem;
}
@media screen and (max-width: 991px) {
  #index .pt-desc-wrap .desc {
    margin-right: 1rem;
  }
}
#index .pt-desc-wrap .en {
  font-family: var(--font-family-helvetica);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.4px;
  color: #504d4d;
  margin-bottom: 0.6rem;
}
@media screen and (max-width: 640px) {
  #index .pt-desc-wrap .en {
    font-size: 0.95rem;
    letter-spacing: 0;
  }
}
#index .pt-desc-wrap h5 {
  font-size: 2.2rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.89px;
  color: #504d4d;
  margin-bottom: 1.2rem;
}
@media screen and (max-width: 640px) {
  #index .pt-desc-wrap h5 {
    font-size: 2.1rem;
    letter-spacing: 0;
  }
}
#index .pt-desc-wrap .note {
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.4px;
  color: #504d4d;
}
@media screen and (max-width: 640px) {
  #index .pt-desc-wrap .note {
    font-size: 1rem;
    letter-spacing: 0;
  }
}
#index .pt-desc-wrap a {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 1.38px;
  text-align: center;
  color: #fff;
  background-color: #c7b2a1;
  padding: 0.6rem 1.5rem 0.7rem 2rem;
  border-radius: 20px;
  margin-top: 1.7rem;
  -webkit-transition: background-color 0.3s linear;
  transition: background-color 0.3s linear;
}
#index .pt-desc-wrap a i {
  top: -4px;
  -webkit-animation: arrow 0.5s infinite;
          animation: arrow 0.5s infinite;
}
@media screen and (max-width: 640px) {
  #index .pt-desc-wrap a i {
    width: 6px;
    height: 7px;
    top: -2px;
  }
}
#index .pt-desc-wrap a:hover {
  background-color: #d19f77;
}
@media screen and (max-width: 991px) {
  #index .pt-desc-wrap img {
    width: 84px;
  }
}
@media screen and (max-width: 640px) {
  #index .pt-desc-wrap img {
    width: 60px;
  }
}
#index .model-pt {
  width: 95%;
  border-radius: 43px;
  background-color: rgba(255, 255, 255, 0.71);
  margin: 0 auto;
  padding: 2rem 3rem;
}
@media screen and (max-width: 991px) {
  #index .model-pt {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 640px) {
  #index .model-pt {
    width: 90%;
    padding: 2rem 2rem;
    border-radius: 25px;
  }
}
#index .model-pt h6 {
  font-size: 1.05rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.47;
  letter-spacing: 0.85px;
  text-align: left;
  color: #414141;
  margin-bottom: 0.7rem;
}
#index .model-pt p {
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.8px;
  text-align: left;
  color: #414141;
}
@media screen and (max-width: 640px) {
  #index .model-pt p {
    font-size: 1.2rem;
  }
}
#index #section-2 {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background: url(../images/p1-s2-model.png) no-repeat left bottom/1600px, -webkit-gradient(linear, left top, left bottom, from(#f4f4f6), to(#f3f3f3));
  background: url(../images/p1-s2-model.png) no-repeat left bottom/1600px, linear-gradient(to bottom, #f4f4f6, #f3f3f3);
}
@media screen and (max-width: 1400px) {
  #index #section-2 {
    background: url(../images/p1-s2-model.png) no-repeat center bottom/1600px, -webkit-gradient(linear, left top, left bottom, from(#f4f4f6), to(#f3f3f3));
    background: url(../images/p1-s2-model.png) no-repeat center bottom/1600px, linear-gradient(to bottom, #f4f4f6, #f3f3f3);
  }
}
@media screen and (max-width: 1200px) {
  #index #section-2 {
    background: url(../images/p1-s2-model.png) no-repeat calc(50% - 36px) bottom/1400px, -webkit-gradient(linear, left top, left bottom, from(#f4f4f6), to(#f3f3f3));
    background: url(../images/p1-s2-model.png) no-repeat calc(50% - 36px) bottom/1400px, linear-gradient(to bottom, #f4f4f6, #f3f3f3);
  }
}
@media screen and (max-width: 991px) {
  #index #section-2 {
    background: url(../images/p1-s2-model-m.png) no-repeat 0 350px/500px, url(../images/p1-s2-bg-m.png) no-repeat center/cover;
  }
}
@media screen and (max-width: 640px) {
  #index #section-2 {
    background: url(../images/p1-s2-model-m.png) no-repeat 0 61vw/108vw, url(../images/p1-s2-bg-m.png) no-repeat center/cover;
  }
}
#index #section-2 .title {
  text-align: center;
  margin-bottom: 4rem;
}
@media screen and (max-width: 991px) {
  #index #section-2 .title {
    margin-bottom: 2rem;
  }
}
#index #section-2 .title p {
  font-size: 1.7rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 1.5px;
  text-align: center;
  color: #af9173;
}
@media screen and (max-width: 640px) {
  #index #section-2 .title p {
    font-size: 1.6rem;
    letter-spacing: 0;
  }
}
#index #section-2 .title h2 {
  display: inline-block;
  font-size: 2rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 1.8px;
  text-align: center;
  color: #af9173;
  position: relative;
}
#index #section-2 .title h2::before, #index #section-2 .title h2::after {
  content: "";
  display: block;
  width: 57px;
  height: 1px;
  background-color: #d5c8bc;
  position: absolute;
  top: calc(50% + 1px);
}
@media screen and (max-width: 640px) {
  #index #section-2 .title h2::before, #index #section-2 .title h2::after {
    width: 30px;
  }
}
#index #section-2 .title h2:before {
  left: -70px;
}
@media screen and (max-width: 640px) {
  #index #section-2 .title h2:before {
    left: -36px;
  }
}
#index #section-2 .title h2::after {
  right: -70px;
}
@media screen and (max-width: 640px) {
  #index #section-2 .title h2::after {
    right: -32px;
  }
}
#index #section-3 {
  padding-top: 5rem;
  padding-bottom: 4rem;
  background: url(../images/p1-s3-model.png) no-repeat left bottom/1600px;
  background-color: #ececec;
}
@media screen and (max-width: 1400px) {
  #index #section-3 {
    background-position: center bottom;
  }
}
@media screen and (max-width: 1200px) {
  #index #section-3 {
    background-position: calc(50% - 60px) bottom;
    background-size: auto 100%;
  }
}
@media screen and (max-width: 991px) {
  #index #section-3 {
    padding-top: 0;
    background: url(../images/p1-s3-model-m.png) no-repeat 0 142px/458px, url(../images/p1-s3-bg-m.png) no-repeat center/cover;
  }
}
@media screen and (max-width: 640px) {
  #index #section-3 {
    background: url(../images/p1-s3-model-m.png) no-repeat 0 27vw/100vw, url(../images/p1-s3-bg-m.png) no-repeat center/cover;
  }
}
@media screen and (max-width: 991px) {
  #index #section-3 .pt-info-wrap {
    padding-top: 2rem;
  }
}
@media screen and (max-width: 640px) {
  #index #section-3 .pt-info-wrap h3 {
    margin-bottom: 145vw;
  }
}
#index #section-4 {
  padding-top: 5rem;
  padding-bottom: 4rem;
  background: url(../images/p1-s4-model.png) no-repeat left bottom/auto 100%;
  background-color: #ececec;
}
@media screen and (max-width: 1400px) {
  #index #section-4 {
    background-position: calc(50% + 90px) bottom;
  }
}
@media screen and (max-width: 1200px) {
  #index #section-4 {
    background-position: calc(50% - 21px) bottom;
  }
}
@media screen and (max-width: 991px) {
  #index #section-4 {
    padding-top: 0;
    background: url(../images/p1-s4-model-m.png) no-repeat right top/458px, url(../images/p1-s4-bg-m.png) no-repeat center/cover;
  }
}
@media screen and (max-width: 640px) {
  #index #section-4 {
    background: url(../images/p1-s4-model-m.png) no-repeat right top/100vw, url(../images/p1-s4-bg-m.png) no-repeat center/cover;
  }
}
@media screen and (max-width: 991px) {
  #index #section-4 .pt-info-wrap {
    padding-top: 520px;
    text-align: left;
  }
}
@media screen and (max-width: 640px) {
  #index #section-4 .pt-info-wrap {
    padding-top: 121vw;
  }
}
@media screen and (max-width: 991px) {
  #index #section-4 .pt-info-wrap h3 {
    margin-bottom: 3rem;
  }
}
#index #section-5 {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background: url(../images/p1-s5-pt.png) no-repeat calc(50% - 226px) center/230px, -webkit-gradient(linear, left top, left bottom, from(#eff1f2), to(#e7e9ea));
  background: url(../images/p1-s5-pt.png) no-repeat calc(50% - 226px) center/230px, linear-gradient(to bottom, #eff1f2, #e7e9ea);
}
@media screen and (max-width: 1200px) {
  #index #section-5 {
    background: url(../images/p1-s5-pt.png) no-repeat calc(50% - 282px) center/230px, -webkit-gradient(linear, left top, left bottom, from(#eff1f2), to(#e7e9ea));
    background: url(../images/p1-s5-pt.png) no-repeat calc(50% - 282px) center/230px, linear-gradient(to bottom, #eff1f2, #e7e9ea);
  }
}
@media screen and (max-width: 991px) {
  #index #section-5 {
    padding-top: 0;
    background: url(../images/p1-s5-pt-m.png) no-repeat calc(50% + 27px) 88px/501px, url(../images/p1-s5-bg-m.png) no-repeat center/cover;
  }
}
@media screen and (max-width: 640px) {
  #index #section-5 {
    background: url(../images/p1-s5-pt-m.png) no-repeat calc(50% + 27px) 73px/346px, url(../images/p1-s5-bg-m.png) no-repeat center/cover;
  }
}
@media screen and (max-width: 991px) {
  #index #section-5 .pt-info-wrap {
    padding-top: 3rem;
  }
}
@media screen and (max-width: 991px) {
  #index #section-5 .pt-info-wrap h3 {
    margin-bottom: 448px;
  }
}
@media screen and (max-width: 640px) {
  #index #section-5 .pt-info-wrap h3 {
    margin-bottom: 324px;
  }
}
#index #section-5 .pt-desc-wrap {
  margin-top: 3rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
#index #section-5 .pt-desc-wrap .desc {
  text-align: left;
}
@media screen and (max-width: 991px) {
  #index #section-5 .pt-desc-wrap .desc {
    text-align: center;
    margin: 0 auto;
  }
}
#index #section-6 {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #fff;
}
@media screen and (max-width: 640px) {
  #index #section-6 {
    padding-bottom: 4rem;
  }
}
#index #section-6 .foundation-map {
  width: 1200px;
  border: 5px solid #e7e8ea;
  position: relative;
  margin: 0 auto;
  padding: 6rem 0;
}
@media screen and (max-width: 1400px) {
  #index #section-6 .foundation-map {
    width: 90%;
  }
}
@media screen and (max-width: 640px) {
  #index #section-6 .foundation-map {
    padding: 6rem 0 3rem;
  }
}
#index #section-6 h2 {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 2rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 1.5px;
  text-align: center;
  color: #c4c4c4;
  padding: 0 1.5rem;
  position: absolute;
  top: -1.3rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: #fff;
}
#index #section-6 img {
  display: block;
  width: 78.5%;
  margin: 0 auto;
}
@media screen and (max-width: 991px) {
  #index #section-6 img {
    width: 95%;
  }
}

#base .kv-info-wrap .logo {
  display: block;
  width: 260px;
  margin: 0 auto 3.5rem;
}
@media screen and (max-width: 640px) {
  #base .kv-info-wrap .logo {
    width: 160px;
  }
}
#base .kv-info-wrap h2 {
  margin-bottom: 2.5rem;
  line-height: 1;
}
#base .kv-info-wrap h2 p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.33;
  letter-spacing: 1.8px;
  text-align: center;
  color: #535353;
}
#base .kv-info-wrap > p {
  font-size: 1.1rem;
  line-height: 1.7;
  letter-spacing: 0.5px;
  text-align: center;
  color: #535353;
}
@media screen and (max-width: 640px) {
  #base .kv-info-wrap > p {
    font-size: 1.5rem;
  }
}
#base .kv-info-wrap .desc {
  text-align: center;
  margin-top: 2.5rem;
}
#base .kv-info-wrap .desc .en {
  font-family: var(--font-family-helvetica);
  font-size: 1.2rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.49px;
  text-align: center;
  color: #818181;
}
@media screen and (max-width: 640px) {
  #base .kv-info-wrap .desc .en {
    font-size: 1.2rem;
    letter-spacing: 0;
  }
}
#base .kv-info-wrap .desc h5 {
  font-size: 2rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.89px;
  text-align: center;
  color: #535353;
  margin-bottom: 0.7rem;
}
@media screen and (max-width: 640px) {
  #base .kv-info-wrap .desc h5 {
    font-size: 2.4rem;
    letter-spacing: 0;
  }
}
#base .kv-info-wrap .desc .note {
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.76;
  letter-spacing: 0.85px;
  text-align: center;
  color: #020202;
}
@media screen and (max-width: 640px) {
  #base .kv-info-wrap .desc .note {
    font-size: 1.2rem;
    letter-spacing: 0;
  }
}
#base .point-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 991px) {
  #base .point-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#base .point-group .point-wrap {
  width: calc(50% - 3rem);
}
@media screen and (max-width: 991px) {
  #base .point-group .point-wrap {
    width: 100%;
  }
}
#base .point-wrap {
  margin-top: 6rem;
}
@media screen and (max-width: 991px) {
  #base .point-wrap {
    margin-top: 4rem;
  }
}
#base .point-wrap h2 {
  font-family: var(--font-family-helvetica);
  margin-bottom: 1.5rem;
  font-size: 2.2rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.83;
  letter-spacing: 1.8px;
  color: #585757;
}
@media screen and (max-width: 991px) {
  #base .point-wrap h2 {
    margin-bottom: 1rem;
  }
}
#base .point-wrap h2 span {
  display: inline-block;
  font-size: 3.8rem;
  letter-spacing: 3px;
  margin-left: 0.8rem;
}
#base .point-wrap h3 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.65rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.54;
  letter-spacing: 1.3px;
  text-align: left;
  color: #303030;
  border-bottom: 1px solid #303030;
  margin-bottom: 1rem;
}
@media screen and (max-width: 640px) {
  #base .point-wrap h3 {
    font-size: 1.7rem;
    letter-spacing: 0;
  }
}
#base .point-wrap .text p {
  font-size: 1rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: 0.4px;
  text-align: left;
  color: #606060;
}
@media screen and (max-width: 640px) {
  #base .point-wrap .text p {
    font-size: 1.3rem;
  }
}
#base .point-wrap .text p.ps {
  font-size: 0.8rem;
  letter-spacing: 0.35px;
}
#base .point-wrap .text p span {
  position: relative;
  border-bottom: 1px solid #606060;
}
#base .point-wrap ul li {
  font-size: 1.25rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: 0.4px;
  text-align: left;
  color: #606060;
}
#base .point-wrap ul li p {
  font-size: 1.2rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: 0.4px;
  text-align: left;
  color: #606060;
  padding-left: 1.25rem;
}
@media screen and (max-width: 991px) {
  #base .point-wrap ul li p {
    margin-left: 1.3rem;
    text-indent: -1.3rem;
  }
}
#base .point-wrap ul li p:first-child {
  padding-left: 0;
}
#base .point-wrap ul li span {
  position: relative;
}
#base .point-wrap ul li span::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #606060;
  position: absolute;
  left: 0;
  bottom: 1px;
}
#base .point-wrap ul li b {
  font-family: var(--font-family-helvetica);
  font-weight: 500;
}
#base .point-wrap h4 {
  font-size: 1.2rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.56;
  letter-spacing: 0.45px;
  text-align: left;
  color: #212121;
  margin-top: 2rem;
}
#base .point-wrap > img {
  display: block;
  margin: 0 auto;
}
#base .en-title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--font-family-helvetica);
  font-size: 1.25rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.9px;
  text-align: left;
  color: #585757;
  border: 1px solid #585757;
  padding: 0.7rem 1.2rem 0.7rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
}
#base #section-kv {
  width: 100%;
  padding-top: 42rem;
  padding-bottom: 6rem;
  background: url(../images/p2-kv-bg2.png) no-repeat center top;
  background-size: 2214px;
}
@media screen and (max-width: 1200px) {
  #base #section-kv {
    padding-top: 37rem;
    background-size: 1678px;
  }
}
@media screen and (max-width: 991px) {
  #base #section-kv {
    background: url(../images/p2-kv-bg-m.png) no-repeat center top;
    background-size: 100%;
    padding-top: 74vw;
  }
}
@media screen and (max-width: 640px) {
  #base #section-kv {
    padding-top: 75vw;
  }
}
#base #section-kv h1 {
  display: none;
}
#base #section-kv img.bg {
  width: 100%;
}
#base #section-1 {
  background-color: #f9f8f8;
  padding-top: 0.5rem;
  padding-bottom: 7rem;
}
#base #section-1 .container {
  width: 1220px;
}
@media screen and (max-width: 1400px) {
  #base #section-1 .container {
    width: 1150px;
  }
}
@media screen and (max-width: 1200px) {
  #base #section-1 .container {
    width: 930px;
  }
}
@media screen and (max-width: 991px) {
  #base #section-1 .container {
    width: 90%;
  }
}
#base #section-1 .ingredient {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  border: solid 1px #e4e4e3;
  margin: 1rem auto;
  padding: 2rem 0;
}
@media screen and (max-width: 991px) {
  #base #section-1 .ingredient {
    max-width: 670px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
#base #section-1 .ingredient .item {
  line-height: 1.63;
  text-align: center;
  color: #606060;
  margin: 0 0.9rem;
}
@media screen and (max-width: 991px) {
  #base #section-1 .ingredient .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(25% - 1.2rem);
    max-width: 120px;
    margin: 0 0.6rem 1.5rem;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media screen and (max-width: 640px) {
  #base #section-1 .ingredient .item {
    width: calc(24% - 1.2rem);
  }
}
#base #section-1 .ingredient .item img {
  display: block;
  max-width: 100%;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 640px) {
  #base #section-1 .ingredient .item {
    font-size: 1.2rem;
  }
}
#base #section-1 .ingredient p {
  line-height: 1.2;
  font-size: 1rem;
}
#base #section-1 .ingredient .ps {
  font-size: 0.85rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.35px;
  color: #606060;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}
#base #section-1 .img1 {
  margin-top: 3rem;
}
@media screen and (max-width: 1200px) {
  #base #section-1 .img1 {
    width: 100%;
    max-width: 802px;
  }
}
#base #section-1 .img3 {
  margin-top: 1rem;
}
@media screen and (max-width: 1200px) {
  #base #section-1 .img3 {
    width: 100%;
    max-width: 900px;
  }
}
@media screen and (max-width: 991px) {
  #base #section-1 .img1.dsk,
  #base #section-1 .img3.dsk {
    display: block !important;
  }
  #base #section-1 .img1.mob,
  #base #section-1 .img3.mob {
    display: none !important;
  }
}
@media screen and (max-width: 640px) {
  #base #section-1 .img1.dsk,
  #base #section-1 .img3.dsk {
    display: none !important;
  }
  #base #section-1 .img1.mob,
  #base #section-1 .img3.mob {
    display: block !important;
  }
}
#base #section-2 {
  background-color: #fff;
  padding-top: 7rem;
  padding-bottom: 6rem;
}
@media screen and (max-width: 991px) {
  #base #section-2 {
    padding-top: 5rem;
    padding-bottom: 4rem;
  }
}
#base #section-2 .info-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 991px) {
  #base #section-2 .info-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #base #section-2 .info-wrap > img {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 991px) and (max-width: 640px) {
  #base #section-2 .info-wrap > img {
    max-width: 120px;
  }
}
#base #section-2 .info-wrap > p {
  font-size: 1.1rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.65;
  letter-spacing: 0.85px;
  text-align: left;
  color: #414141;
}
#base #section-2 .info-wrap .info {
  margin-left: 6rem;
}
@media screen and (max-width: 991px) {
  #base #section-2 .info-wrap .info {
    margin-left: 0;
    width: 370px;
  }
}
@media screen and (max-width: 640px) {
  #base #section-2 .info-wrap .info {
    width: 270px;
  }
}
#base #section-2 .color {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1rem 0;
  position: relative;
  left: -0.5rem;
}
#base #section-2 .color img {
  display: block;
  margin-right: 1rem;
}
@media screen and (max-width: 640px) {
  #base #section-2 .color img {
    width: 64px;
  }
}
#base #section-3 {
  width: 100%;
  padding-top: 42rem;
  padding-bottom: 6rem;
  background: url(../images/p2-s3-bg2.png) no-repeat center top;
  background-size: 2214px;
}
@media screen and (max-width: 1200px) {
  #base #section-3 {
    padding-top: 38rem;
    background-size: 1760px;
  }
}
@media screen and (max-width: 991px) {
  #base #section-3 {
    background: url(../images/p2-s3-bg-m.png) no-repeat center top;
    background-size: 100%;
    padding-top: 77vw;
  }
}
#base #section-3 .kv-info-wrap .logo {
  width: 270px;
  margin-bottom: 20rem;
}
@media screen and (max-width: 1200px) {
  #base #section-3 .kv-info-wrap .logo {
    margin-bottom: 16rem;
  }
}
@media screen and (max-width: 991px) {
  #base #section-3 .kv-info-wrap .logo {
    width: 210px;
    margin-bottom: 32vw;
  }
}
@media screen and (max-width: 640px) {
  #base #section-3 .kv-info-wrap .logo {
    width: 160px;
  }
}
#base #section-3 .kv-info-wrap h2 p {
  color: #444;
}
#base #section-3 .kv-info-wrap > p {
  color: #1d1d1d;
}
#base #section-3 .kv-info-wrap h5 {
  color: #020202;
}
#base #section-3 h1 {
  display: none;
}
#base #section-3 img.bg {
  width: 100%;
}
#base #section-4 {
  padding-top: 2rem;
  padding-bottom: 6rem;
  background-color: #fbfbfc;
}
#base #section-4 .container {
  width: 1220px;
}
@media screen and (max-width: 1400px) {
  #base #section-4 .container {
    width: 1150px;
  }
}
@media screen and (max-width: 1200px) {
  #base #section-4 .container {
    width: 930px;
  }
}
@media screen and (max-width: 991px) {
  #base #section-4 .container {
    width: 90%;
  }
}
#base #section-4 .mix-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 2.5rem 0 0;
}
@media screen and (max-width: 991px) {
  #base #section-4 .mix-grid {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#base #section-4 .mix-grid .mix-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(100% - 450px);
  border: solid 1px #e4e4e3;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 991px) {
  #base #section-4 .mix-grid .mix-left {
    width: 100%;
  }
}
#base #section-4 .mix-grid .mix-left .item {
  padding: 2.5rem 0 2rem;
  margin: 0 0.5rem;
}
#base #section-4 .mix-grid .mix-left .item h4 {
  font-size: 1.2rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
  color: #585757;
  border-radius: 50px;
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.8rem 0;
}
#base #section-4 .mix-grid .mix-left .item h4 span {
  font-family: var(--font-family-helvetica);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.8px;
}
@media screen and (max-width: 640px) {
  #base #section-4 .mix-grid .mix-left .item h4 span {
    font-size: 0.9rem;
    letter-spacing: 0;
    position: relative;
    top: 0.2rem;
  }
}
#base #section-4 .mix-grid .mix-left .item h4 span:nth-child(2) {
  margin-right: 0.5rem;
}
#base #section-4 .mix-grid .mix-left .item p {
  font-size: 0.95rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.8px;
  text-align: center;
  color: #585757;
}
#base #section-4 .mix-grid .mix-left .item:nth-child(1) {
  width: calc(36% - 1rem);
}
@media screen and (max-width: 991px) {
  #base #section-4 .mix-grid .mix-left .item:nth-child(1) {
    width: calc(41% - 1rem);
  }
}
@media screen and (max-width: 640px) {
  #base #section-4 .mix-grid .mix-left .item:nth-child(1) {
    width: calc(48% - 1rem);
  }
}
#base #section-4 .mix-grid .mix-left .item:nth-child(1) h4 {
  background-color: #f7e6d2;
}
#base #section-4 .mix-grid .mix-left .item:nth-child(2) {
  width: calc(27% - 1rem);
}
@media screen and (max-width: 640px) {
  #base #section-4 .mix-grid .mix-left .item:nth-child(2) {
    width: calc(26% - 1rem);
  }
}
#base #section-4 .mix-grid .mix-left .item:nth-child(2) h4 {
  background-color: #e4e4e3;
}
#base #section-4 .mix-grid .mix-left .item:nth-child(3) {
  width: calc(27% - 1rem);
}
@media screen and (max-width: 640px) {
  #base #section-4 .mix-grid .mix-left .item:nth-child(3) {
    width: calc(26% - 1rem);
  }
}
#base #section-4 .mix-grid .mix-left .item:nth-child(3) h4 {
  background-color: #e1eef4;
}
#base #section-4 .mix-grid .mix-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 330px;
  height: 100%;
  padding: 2rem 0;
  background-color: #f7f3df;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 991px) {
  #base #section-4 .mix-grid .mix-right {
    width: 100%;
    padding: 1rem 0;
  }
}
#base #section-4 .mix-grid .mix-right h4 {
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 2;
  font-stretch: normal;
  font-style: normal;
  text-align: center;
  letter-spacing: 0.9px;
  color: #1d1d1d;
}
#base #section-4 .mix-grid .mix-right p {
  font-size: 0.95rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.8px;
  text-align: center;
  color: #585757;
}
@media screen and (max-width: 991px) {
  #base #section-4 .mix-grid .mix-right p {
    display: contents;
  }
}
#base #section-4 .mix-grid > img {
  display: block;
  width: 40px;
  margin: 0 40px;
}
@media screen and (max-width: 991px) {
  #base #section-4 .mix-grid > img {
    display: block;
    width: 30px;
    margin: 1.5rem auto;
  }
}
#base #section-4 .prod-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 34px;
  border: solid 9px #ebdbcf;
  background-color: #fff;
  margin-top: 5rem;
  padding: 3rem 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 991px) {
  #base #section-4 .prod-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#base #section-4 .prod-item > img {
  display: block;
}
@media screen and (max-width: 991px) {
  #base #section-4 .prod-item > img {
    width: 200px;
    margin: 0 auto 3rem;
    position: relative;
    right: -31px;
  }
}
@media screen and (max-width: 640px) {
  #base #section-4 .prod-item > img {
    width: 166px;
    right: -23px;
  }
}
#base #section-4 .prod-item .info {
  margin-left: 3rem;
}
@media screen and (max-width: 991px) {
  #base #section-4 .prod-item .info {
    width: 90%;
    max-width: 480px;
    margin-left: 0;
  }
}
#base #section-4 .prod-item .info > p {
  font-size: 1.3rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  letter-spacing: 0.85px;
  text-align: left;
  color: #585757;
}
@media screen and (max-width: 640px) {
  #base #section-4 .prod-item .info > p {
    letter-spacing: 0;
  }
}
#base #section-4 .prod-item .color {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#base #section-4 .prod-item .color > img {
  display: block;
}
@media screen and (max-width: 991px) {
  #base #section-4 .prod-item .color > img {
    width: 110px;
  }
}
@media screen and (max-width: 640px) {
  #base #section-4 .prod-item .color > img {
    width: 80px;
  }
}
#base #section-4 .prod-item .color .text {
  margin-left: 1.5rem;
}
#base #section-4 .prod-item .color .text h6 {
  font-size: 1.3rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.67;
  letter-spacing: 0.45px;
  text-align: left;
  color: #606060;
}
@media screen and (max-width: 640px) {
  #base #section-4 .prod-item .color .text h6 {
    margin-bottom: 0.5rem;
  }
}
#base #section-4 .prod-item .color .text p {
  font-size: 1.25rem;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.41;
  letter-spacing: 0.43px;
  text-align: left;
  color: #606060;
  max-width: 400px;
}
@media screen and (max-width: 640px) {
  #base #section-4 .prod-item .color .text p {
    display: table-cell;
  }
}

/* =========================================================
   2026 RMK Anniversary / set.html
   Desktop: 4-column navigation
   Mobile <= 640px: 2 x 2 navigation
   Keep this page section self-contained so future pages can be rebuilt cleanly.
   ========================================================= */

#set {
  --set-bg: #f3f3f3;
  --set-panel: #fff;
  --set-title: #aaa5be;
  --set-text: #524741;
  --set-muted: #6b6b6b;
  --set-price: #c74b27;
  --set-nav-orange: #c77b42;
  --set-nav-main: #75685e;
  --set-nav-sub: #aa9d92;
  --set-header-desktop: 140px;
  --set-header-mobile: 316px;
  background: var(--set-bg);
  padding-top: var(--set-header-desktop);
  font-size: 1rem;
}

/* ---------- set header ---------- */
#set header {
  box-shadow: 0 3px 18px rgba(100, 88, 78, 0.08);
}
#set header .logo-bar {
  height: 60px;
  background: #d1c3b7;
}
#set header .logo-bar img {
  display: block;
  width: auto;
  max-height: 32px;
}
#set header nav {
  width: min(1400px, 100%);
  height: 80px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  margin: 0 auto;
  border-bottom: 1px solid #f3f3f3;
}
#set header nav a {
  flex: 1 1 25%;
  width: 25%;
  min-width: 0;
  height: 80px;
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #f3f3f3;
  position: relative;
}
#set header nav a:last-child { border-right: 0; }
#set header nav a::after {
  bottom: 0;
  height: 3px;
}
#set header nav a.active::after,
#set header nav a:hover::after { width: 100%; }
#set header nav a p {
  width: 100%;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
}
#set header nav a p.brown {
  color: var(--set-nav-orange);
  font-size: 1.15rem;
  margin-bottom: .2rem;
}
#set header nav a p:not(.brown) {
  font-size: 1.14rem;
}
#set header nav a p:not(.brown) span:first-child {
  color: var(--set-nav-main);
  font-weight: 600;
}
#set header nav a p:not(.brown) span:last-child {
  color: var(--set-nav-sub);
  font-weight: 400;
  margin-left: .4rem;
}

/* ---------- hero ---------- */
#set #section-kv {
  width: 100%;
  height: 352px;
  background: url(../images/p3-kv-bg.png) no-repeat center center / cover;
}
#set #section-kv .mob { display: none !important; }

/* ---------- product groups ---------- */
#set #section-1 {
  background: var(--set-bg);
  padding: 3rem 0 2.5rem;
}
#set #section-1 .container {
  width: min(1300px, calc(100% - 4rem));
  max-width: none;
  margin: 0 auto;
  padding: 3rem 6rem;
  background: var(--set-panel);
  border-radius: 35px;
}
#set .section-divider {
  border: 0;
  border-top: 1px dashed #c7c4cd;
  margin: 3rem 0;
}
#set .group-row,
#set .group-row .group,
#set .prods-grid {
  width: 100%;
}
#set .group-row,
#set .prods-grid {
  display: flex;
  justify-content: center;
}
#set .group-row .group { display: block; }
#set .group-title,
#set #section-gift .gift-title {
  width: fit-content;
  display: block;
  margin: 0 auto 2.5rem;
  padding: .3rem 3rem;
  border: 0;
  border-radius: 999px;
  background: var(--set-title);
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: 1.5px;
  text-align: center;
}
#set .prods-grid {
  justify-content: space-between;
  gap: 4rem;
}
#set .prod-card {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  text-align: left;
}
#set .card3 .prods-grid {
  justify-content: center;
}
#set .card3 .prod-card {
  flex: 0 1 calc(33.333% - 2.7rem);
}
#set .prod-card .img-wrap {
  width: 100%;
  min-height: 210px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  margin-bottom: 1.25rem;
}
#set .prod-card .img-wrap > img {
  display: block;
  max-width: 100%;
  max-height: 210px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
#set .prod-card .img-wrap > a {
  position: absolute;
  top: 0;
  right: 0;
  height: 42%;
  animation: none;
  cursor: default;
}
#set .prod-card .img-wrap > a:hover { filter: none; }
#set .prod-card .img-wrap > a img {
  width: auto;
  height: 100%;
}

/* 人氣保養專區 icon：原地縮放提示 */
#set .prod-card .img-wrap > a.new1 {
  animation: rmk-icon-pulse 1.2s ease-in-out infinite;
  transform-origin: center center;
}
@keyframes rmk-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
#set .prod-card .info { min-width: 0; }
#set .prod-card h3 {
  display: inline-block;
  margin: 0 0 .8rem;
  color: var(--set-text);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.15;
  position: relative;
}
#set .prod-card h3::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--set-text);
  position: absolute;
  left: 0;
  bottom: -2px;
}
#set .prod-card .price {
  margin: 0 0 .1rem;
  color: var(--set-price);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .5px;
}
#set .prod-card .original,
#set .prod-card .desc {
  color: var(--set-muted);
  font-family: var(--font-family-noto);
  font-size: 1rem;
  line-height: 1.45;
}
#set .prod-card .original { margin-bottom: .25rem; }
#set .prod-card .img-wrap .prod-note { font-size: 1rem; }

/* ---------- gifts ---------- */
#set #section-gift {
  background: #fff;
  padding: 3rem 0 4rem;
}
#set #section-gift .container {
  width: min(1150px, calc(100% - 4rem));
  margin: 0 auto;
  padding: 0 0 2.5rem;
}
#set #section-gift .gift-title { margin-bottom: 2.5rem; }
#set #section-gift .gifts-row {
  display: flex;
  gap: 1rem;
}
#set #section-gift .gift-item {
  width: 50%;
  min-width: 0;
  padding: 2.2rem 4rem 0;
  border: 2px solid #cbdfe6;
  border-radius: 31px;
  background: #fff;
  position: relative;
}
#set #section-gift .gift-item .condition {
  margin-bottom: .4rem;
  color: #323232;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}
#set #section-gift .gift-item .condition span {
  color: #da3300;
  font-size: 1.8rem;
}
#set #section-gift .gift-item .sub {
  margin-bottom: 1rem;
  color: #323232;
  font-size: 1.125rem;
  line-height: 1.2;
}
#set #section-gift .gift-item .gift-label {
  padding: 0 0 .5rem 4rem;
  color: #1672b9;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
}
#set #section-gift .gift-item .gift-label::after {
  content: "贈";
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #1672b9;
  border-radius: 50%;
  color: #1672b9;
  font-size: 2rem;
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 0;
}
#set #section-gift .gift-item .desc {
  max-width: 34rem;
  margin: 0 0 1.5rem 4rem;
  color: var(--set-muted);
  font-size: 1rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#set #section-gift .gift-item img {
  display: block;
  width: 100%;
  max-width: 395px;
  height: auto;
  margin: 1rem auto 0;
}
#set .disclaimer {
  width: min(1150px, calc(100% - 4rem));
  margin: 0 auto;
  color: #969696;
  font-family: var(--font-family-noto);
  font-size: .9rem;
  line-height: 1.45;
  text-align: center;
}

/* ---------- tablet ---------- */
@media screen and (max-width: 991px) and (min-width: 641px) {
  #set #section-1 .container { padding: 3rem 2.5rem; }
  #set .prods-grid { gap: 2rem; }
  #set .prod-card .img-wrap { min-height: 175px; }
  #set .prod-card .img-wrap > img { max-height: 175px; }
  #set #section-gift .container { width: min(720px, calc(100% - 4rem)); }
  #set #section-gift .gifts-row { flex-direction: column; }
  #set #section-gift .gift-item { width: 100%; }
}

/* ---------- mobile: one predictable breakpoint ---------- */
@media screen and (max-width: 640px) {
  #set {
    --set-header-mobile: 248px;
    padding-top: var(--set-header-mobile);
    font-size: 1rem;
  }

  /* 80px logo + 2 compact nav rows x 84px = 248px */
  #set header .logo-bar { height: 80px; }
  #set header .logo-bar img {
    width: 145px;
    max-height: none;
  }
  #set header nav {
    width: 100%;
    height: 168px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 84px);
    align-items: stretch;
    border-bottom: 0;
  }
  #set header nav a {
    width: 100%;
    height: 84px;
    min-height: 0;
    padding: 2px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ece9e6;
    border-bottom: 1px solid #ece9e6;
  }
  #set header nav a:nth-child(even) { border-right: 0; }
  #set header nav a p {
    white-space: normal;
    line-height: 1.15;
  }
  #set header nav a p.brown {
    margin: 0 0 2px;
    font-size: 1.25rem;
  }
  #set header nav a p:not(.brown) { font-size: 1rem; }
  #set header nav a p:not(.brown) span {
    display: block;
    margin: 0;
  }
  #set header nav a p:not(.brown) span:first-child {
    font-size: 1.35rem;
    font-weight: 600;
  }
  #set header nav a p:not(.brown) span:last-child {
    margin-top: .05rem;
    font-size: 1rem;
  }

  #set #section-kv {
    height: auto;
    background: none;
  }
  #set #section-kv .mob {
    display: block !important;
    width: 100%;
    height: auto;
  }

  #set #section-1 { padding: 1.5rem 0 2rem; }
  #set #section-1 .container {
    width: calc(100% - 1rem);
    padding: 2rem .75rem 2.5rem;
    border-radius: 20px;
  }
  #set .group-title,
  #set #section-gift .gift-title {
    margin-bottom: 2rem;
    padding: .3rem 2rem;
    font-size: 1.6rem;
  }
  #set .section-divider { margin: 2.25rem 0; }
  #set .prods-grid {
    flex-direction: column;
    gap: 0;
  }
  #set .card3 .prod-card { flex-basis: auto; }

  /* Mobile product rows: normal document flow. No absolute positioning / fixed heights. */
  #set .prods-grid {
    display: block;
  }
  #set .prod-card,
  #set .card3 .prod-card {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex: none !important;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
    clear: both;
    position: relative !important;
    overflow: hidden;
    padding: 1.5rem .25rem 1.75rem;
    margin: 0;
  }
  #set .prod-card + .prod-card {
    margin-top: .5rem;
  }
  #set .prod-card .img-wrap {
    flex: 0 0 40%;
    width: 40%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    position: relative !important;
    align-self: flex-start;
    overflow: visible;
  }
  #set .prod-card .img-wrap > img {
    display: block;
    width: 100%;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 auto;
    transform: none !important;
  }
  #set .prod-card .img-wrap > a {
    top: .15rem;
    right: .1rem;
    width: auto;
    height: 35%;
    z-index: 2;
  }
  #set .prod-card .img-wrap > a img {
    width: auto;
    height: 100%;
  }
  #set .prod-card .info {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: auto !important;
    margin: 0;
    padding: .2rem 0 0;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    transform: none !important;
    align-self: flex-start;
    overflow: visible;
  }
  #set .prod-card h3,
  #set .prod-card .price,
  #set .prod-card .original,
  #set .prod-card .desc {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin-left: 0;
    margin-right: 0;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  #set .prod-card h3 {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 .55rem;
    font-size: 1.35rem;
    line-height: 1.3;
  }
  #set .prod-card .price {
    margin: 0 0 .1rem;
    font-size: 1rem;
    line-height: 1.4;
  }
  #set .prod-card .original {
    margin: 0 0 .35rem;
  }
  #set .prod-card .original,
  #set .prod-card .desc,
  #set .prod-card .img-wrap .prod-note {
    font-size: 0.99rem;
    line-height: 1.45;
    letter-spacing: 0px;
  }
  #set .prod-card .desc {
    margin: 0 0 .15rem;
  }

  #set #section-gift { padding: 2.5rem 0 3rem; }
  #set #section-gift .container {
    width: calc(100% - 2rem);
    padding-bottom: 2rem;
  }
  #set #section-gift .gifts-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  #set #section-gift .gift-item {
    width: 100%;
    padding: 1.8rem 1.5rem 0;
    border-radius: 20px;
  }
  #set #section-gift .gift-item .condition {
    font-size: 1.25rem;
    line-height: 1.35;
    white-space: normal;
  }
  #set #section-gift .gift-item .condition span { font-size: 1.45rem; }
  #set #section-gift .gift-item .sub {
    font-size: 1rem;
    left: 0;
  }
  #set #section-gift .gift-item .gift-label {
    padding-left: 3.5rem;
    font-size: 1.65rem;
    white-space: normal;
  }
  #set #section-gift .gift-item .gift-label::after {
    width: 42px;
    height: 42px;
    border-width: 3px;
    font-size: 1.45rem;
  }
  #set #section-gift .gift-item .desc,
  #set #section-gift .gift-item:first-of-type .desc,
  #set #section-gift .gift-item:last-of-type .desc {
    width: auto;
    max-width: none;
    margin: .4rem 0 1.2rem 3.5rem;
    position: static;
    color: var(--set-muted);
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  #set #section-gift .gift-item img,
  #set #section-gift .gift-item:first-of-type img,
  #set #section-gift .gift-item:last-of-type img {
    width: 100%;
    max-width: 360px;
    margin: .8rem auto 0;
  }
  #set .disclaimer {
    width: calc(100% - 2rem);
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
  }
}

/* =========================================================
   Mobile shrinking header on scroll (set.html only)
   Full header at page top; compact header after scrolling.
   ========================================================= */
@media screen and (max-width: 640px) {
  #set header .logo-bar,
  #set header .logo-bar img,
  #set header nav,
  #set header nav a {
    transition: height .28s ease, width .28s ease, padding .28s ease;
  }

  /* Scrolled state: 52px logo + 2 nav rows x 58px = 168px */
  #set.header-compact header .logo-bar {
    height: 52px;
  }
  #set.header-compact header .logo-bar img {
    width: 112px;
  }
  #set.header-compact header nav {
    height: 116px;
    grid-template-rows: repeat(2, 58px);
  }
  #set.header-compact header nav a {
    height: 58px;
    padding: 1px 8px;
  }
  #set.header-compact header nav a p.brown {
    display: none;
  }
  #set.header-compact header nav a p:not(.brown) {
    line-height: 1.08;
  }
  #set.header-compact header nav a p:not(.brown) span:first-child {
    font-size: 1.2rem;
  }
  #set.header-compact header nav a p:not(.brown) span:last-child {
    margin-top: .08rem;
    font-size: 1rem;
  }
}

/* ==============================
   LIPS PAGE / index.html
   ※ header / nav styles above are shared with set.html and intentionally unchanged.
============================== */
#lips { background:#fff; color:#313131; }
#lips .lips-inner{width:1100px;max-width:calc(100% - 120px);margin:0 auto;position:relative;z-index:2}
#lips .lips-hero{background:url(../images/lips/kv-bg.jpg) center top/cover no-repeat;text-align:center;color:#fff;padding:0 0 50px}
#lips .hero-copy{max-width:720px;position:relative}
#lips .lips-hero::before{content:"";display:block;height:clamp(760px,64.7vw,1100px)}
#lips .eyebrow{font-size:1.15rem;letter-spacing:.22em;margin-bottom:.55rem}
#lips .hero-copy h1{font-size:2.05rem;line-height:1.55;font-weight:500;letter-spacing:.05em;margin-bottom:1.3rem}
#lips .hero-copy>p{font-size:1rem;line-height:1.9;margin:.4rem 0;text-shadow:none;font-weight:300;}
#lips .product-name{margin:1.8rem 0 .8rem;display:flex;flex-direction:column;gap:.3rem}
#lips .product-name span{font-size:1.05rem;letter-spacing:.08em}
#lips .product-name strong{font-size:1.35rem;font-weight:500;letter-spacing:.08em}
#lips .product-meta{font-size:.92rem!important}
#lips .release{display:inline-block;margin-top:1rem!important;padding:.3rem 1rem;border:1px solid rgba(255,255,255,.75);font-size:.9rem!important}

#lips .lips-points{background:url(../images/lips/kv-bg2.jpg) center top/cover no-repeat;min-height:2800px;padding:130px 0 100px}
#lips .points-top{padding-right:430px}
#lips .point{margin-bottom:70px;line-height:1.85}
#lips .point h2{font-family:var(--font-family-helvetica);font-size:1.45rem;font-weight:500;letter-spacing:.08em;margin-bottom:.2rem;color:#585757}
#lips .point h2 .point-no{font-size:1.65em;line-height:.8;vertical-align:-.08em;letter-spacing:0}
#lips .point h3{font-size:1.2rem;font-weight:500;line-height:1.8;color:#222;margin-bottom:.45rem}
#lips .point p{font-size:0.9rem;line-height:1.95}
#lips .point .lead{font-weight:500;color:#111;font-size:1rem;}
#lips .shade-intro{
  width:557px;
  max-width:calc(50% - 58px);
  box-sizing:border-box;
  margin:130px 0 30px calc(45% + 30px);
  padding:0;
  text-align:left;
  font-weight:500;
  font-size:1.03rem;
  line-height:2;
}
#lips .shade h3{font-family:var(--font-family-helvetica);font-size:1.1rem;font-weight:500;color:#333;margin-bottom:.35rem}
#lips .shade h3 span{font-family:var(--font-family-noto);font-size:.75rem;margin-left:.2rem}
#lips .shade p{font-size:.78rem;line-height:1.75;letter-spacing:.03em}

#lips .serum-hero{
  min-height:720px;
  background:url(../images/lips/kv-bg3.jpg) center center/cover no-repeat;
  display:flex;
  align-items:center;
}
#lips .serum-copy{
  width:620px;
  margin:0 6.5% 0 auto;
  text-align:center;
  color:#3f3f3f;
}
#lips .serum-copy .plus{
  display:inline-block;
  margin:0 0 3rem;
  padding-bottom:.18rem;
  border-bottom:1px solid currentColor;
  font-size:1.95rem;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.02em;
  color:#242424;
}
#lips .serum-copy h2{
  margin:0 0 .65rem;
  font-size:1.65rem;
  line-height:1.45;
  font-weight:400;
  letter-spacing:.04em;
  color:#3d3d3d;
}
#lips .serum-copy>p:not(.plus):not(.product-meta):not(.release){
  margin:0;
  font-size:1.45rem;
  line-height:1.7;
  color:#3d3d3d;
}
#lips .serum-copy .product-name{
  margin:4rem 0 .65rem;
  gap:.2rem;
}
#lips .serum-copy .product-name span{
  font-size:1.18rem;
  line-height:1.4;
  letter-spacing:.06em;
  color:#8a8a8a;
}
#lips .serum-copy .product-name strong{
  font-size:1.9rem;
  line-height:1.35;
  font-weight:500;
  letter-spacing:.04em;
  color:#4b4b4b;
}
#lips .serum-copy .product-meta{
  margin:0!important;
  font-size:1.08rem!important;
  line-height:1.5;
  color:#3f3f3f;
}
#lips .serum-copy .release{
  margin-top:2.7rem!important;
  padding:.35rem 1.6rem;
  border:1px solid rgba(255,255,255,.95);
  font-size:1.35rem!important;
  line-height:1.3;
  font-weight:500;
  color:#fff;
}

#lips .serum-points{background:url(../images/lips/kv-bg4.jpg) center top/cover no-repeat;min-height:0;padding:130px 0 100px}
#lips .serum-grid{width:850px;max-width:calc(100% - 80px);margin-left:auto;margin-right:auto}
#lips .serum-grid>.point{width:100%;margin-left:0;margin-bottom:90px}
#lips .notes{display:flex;gap:30px;margin-top:20px;font-size:.8rem;line-height:1.7}
#lips .howto{display:grid;grid-template-columns:310px 1fr;gap:42px;align-items:center;background:rgb(255 255 255);border:1px solid #b8aa99;border-radius:14px;padding:30px 40px;margin:20px auto 0;width:900px;max-width:100%;box-shadow:0 2px 10px rgba(0,0,0,.05)}
#lips .howto img{width:100%;border-radius:8px}
#lips .howto h2{font-family:var(--font-family-helvetica);font-size:1.25rem;font-weight:500;letter-spacing:.08em;margin-bottom:15px}
#lips .howto p,#lips .howto small{font-size:.8rem;line-height:1.8;display:block;margin-bottom:9px}

@media screen and (max-width: 991px){
 #lips .lips-inner{max-width:calc(100% - 56px);width:auto}
 #lips .lips-hero{background-image:url(../images/lips/kv-bg_m.jpg);/*background-size:100% auto;*/background-position:center top;background-repeat:no-repeat;padding:0 0 50px}
 #lips .lips-hero .hero-copy{position:relative;left:auto;top:auto;transform:none;width:auto;margin:0 auto;max-width:82%;color:#fff}
 #lips .lips-hero::before{height:118vw}
 #lips .hero-copy h1{font-size:1.55rem}
 #lips .hero-copy>p{font-size:.92rem}
 #lips .product-name strong{font-size:1.2rem}
 #lips .lips-points{min-height:calc(100vw * 6.91);background-image:url(../images/lips/kv-bg2_m.jpg);/*background-size:100% auto;*/padding:10vw 0 12vw}
 #lips .points-top{padding-right:0;padding-top:4vw}
 #lips .point{margin-bottom:9vw}
 #lips .point h2{font-size:1.18rem}
 #lips .point h3{font-size:1rem}
 #lips .point p{font-size:.86rem}
 #lips .points-top .point{width:78%}
 #lips .points-top .point:nth-child(1){margin-left:0}
 #lips .points-top .point:nth-child(2){margin-left:0}
 #lips .points-top .point:nth-child(3){margin-left:0}
 #lips .shade-intro{width:auto;max-width:calc(100% - 34px);padding:0;margin:18vw auto 7vw;font-size:.9rem}
 #lips .shade p{font-size:.76rem}
 #lips .serum-hero{min-height:calc(100vw * 2.289);background-image:url(../images/lips/kv-bg3_m.jpg);background-size:100% auto;background-position:center top;align-items:flex-end;padding:0 0 11vw}
 #lips .serum-copy{width:auto;margin:0 auto;max-width:86%;text-align:center}
 #lips .serum-copy .plus{font-size:1.3rem;margin-bottom:1.8rem;padding-bottom:.12rem}
 #lips .serum-copy h2{font-size:1.15rem;margin-bottom:.35rem}
 #lips .serum-copy>p:not(.plus):not(.product-meta):not(.release){font-size:1rem;line-height:1.65}
 #lips .serum-copy .product-name{margin:2.7rem 0 .5rem}
 #lips .serum-copy .product-name span{font-size:.9rem}
 #lips .serum-copy .product-name strong{font-size:1.35rem}
 #lips .serum-copy .product-meta{font-size:.9rem!important}
 #lips .serum-copy .release{margin-top:1.8rem!important;font-size:1rem!important;padding:.28rem 1rem}
 #lips .serum-points{min-height:0;background-image:url(../images/lips/kv-bg4_m.jpg);background-size:100% auto;padding:9vw 0 100px}
 #lips .serum-grid{width:auto}
 #lips .serum-grid>.point,#lips .serum-grid>.point:nth-of-type(2),#lips .serum-grid>.point:nth-of-type(3){width:100%;margin-bottom:10vw}
 #lips .notes{flex-direction:column;gap:10px}
 #lips .howto{grid-template-columns:30% 1fr;width:100%;padding:20px;gap:20px}
}
@media screen and (max-width: 640px){
 #lips .lips-inner{max-width:calc(100% - 55px)}
 #lips .lips-hero .hero-copy{max-width:91%}
 #lips .eyebrow{font-size:.88rem}
 #lips .hero-copy h1{font-size:1.2rem;line-height:1.5;margin-bottom:.8rem;letter-spacing:0;}
 #lips .hero-copy>p{font-size:.95rem!important;line-height:1.7;margin:.25rem 0}
 #lips .product-name{margin:.8rem 0 .35rem;gap:.1rem}
 #lips .product-name span{font-size:.77rem}
 #lips .product-name strong{font-size:1rem}
 #lips .release{margin-top:.5rem!important;padding:.12rem .6rem;font-size:.72rem!important}
 #lips .lips-points{padding-top:7vw}
 #lips .points-top .point{width:72%;margin-bottom:7vw}
 #lips .point h2{font-size:1rem;line-height:1.3}
 #lips .point h3{font-size:.76rem;line-height:1.55;margin-bottom:.15rem}
 #lips .point p{font-size:.76rem;line-height:1.55;letter-spacing:.02em}
 #lips .shade-intro{width:auto;max-width:calc(100% - 34px);padding:0;font-size:.72rem;line-height:1.6;margin:17vw auto 5vw}
 #lips .shade h3{font-size:.9rem;margin-bottom:.1rem}
 #lips .shade h3 span{font-size:.58rem}
 #lips .shade p{font-size:.68rem;line-height:1.6}
 #lips .serum-hero{padding-bottom:10vw}
 #lips .serum-copy{max-width:90%}
 #lips .serum-copy .plus{font-size:1.12rem;margin-bottom:1.35rem}
 #lips .serum-copy h2{font-size:1.2rem;line-height:1.3}
 #lips .serum-copy>p:not(.plus):not(.product-meta):not(.release){font-size:.88rem;line-height:1.6}
 #lips .serum-copy .product-name{margin:2.2rem 0 .4rem}
 #lips .serum-copy .product-name span{font-size:.78rem}
 #lips .serum-copy .product-name strong{font-size:1.18rem}
 #lips .serum-copy .product-meta{font-size:.78rem!important}
 #lips .serum-copy .release{margin-top:1.45rem!important;font-size:.88rem!important;padding:.24rem .85rem}
 #lips .serum-points{padding:15vw 0 100px}
 #lips .serum-grid>.point,#lips .serum-grid>.point:nth-of-type(2),#lips .serum-grid>.point:nth-of-type(3){margin-bottom:10vw}
 #lips .notes{font-size:.62rem}
 #lips .howto{grid-template-columns:1fr;padding:40px 16px;border-radius:9px;gap:12px}
 #lips .howto img{width:46%;margin:0 auto}
 #lips .howto h2{font-size:.9rem;margin-bottom:7px}
 #lips .howto p,#lips .howto small{font-size:.62rem;line-height:1.55;margin-bottom:5px}
}

/* Lips shade layout adjustment */
#lips .shades-showcase{
  width:1150px;
  max-width:calc(100% - 80px);
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "prod1 list1"
    "list2 prod2";
  column-gap:36px;
  row-gap:105px;
  align-items:center;
}
#lips .shade-product--first{grid-area:prod1;}
#lips .shade-list--first{grid-area:list1;}
#lips .shade-list--second{grid-area:list2;}
#lips .shade-product--second{grid-area:prod2;}
#lips .shade-product img{display:block;width:100%;height:auto;}
#lips .shade-product--first img{max-width:560px;margin:0 auto;}
#lips .shade-product--second img{max-width:640px;margin:0 auto;}
#lips .shade-list{display:flex;flex-direction:column;gap:16px;}

@media (max-width: 767px){
  #lips .shades-showcase{
    width:auto;
    max-width:calc(100% - 34px);
    display:flex;
    flex-direction:column;
    gap:0;
  }
  #lips .shade-product--first{order:1;width:78%;margin:0 auto 7vw;}
  #lips .shade-list--first{order:2;width:100%;}
  #lips .shade-list--second{order:3;width:100%;}
  #lips .shade-product--second{order:4;width:88%;margin:6vw auto 0;}
  #lips .shade-list{gap:1vw;}
}

/* 2026-08-22 Lips detail refinements */
/* Lip POINT headings: keep underline visually separated from following copy */
#lips .serum-points .point h3{
  display: table;
  width: auto;
  max-width: 100%;
  margin: 0 0 1rem;
  padding-bottom: .16em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
#lips .lips-points .points-top .point .lead,
#lips .serum-points .point .lead{
  display: table;
  width: auto;
  max-width: 100%;
  margin: 0 0 .55rem;
  padding: 0 .08em;
  background: none;
  line-height: 1.7;
  position: relative;
  z-index: 0;
}
#lips .lips-points .points-top .point .lead::after,
#lips .serum-points .point .lead::after{
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: .2em;
  height: .8em;
  background: rgba(255,255,255,.95);
}
#lips .serum-points .point .lead::after{
  background: rgba(194,229,238,.95);
}
#lips .lips-points .points-top .point p{
  color:#606060;
}
#lips .lips-points .points-top .point .lead + p{
  margin-top:0;
}

/* Shade rows: lip photo / copy / color swatch */
#lips .shade-list .shade{
  display:grid;
  grid-template-columns: 120px minmax(0,1fr) 105px;
  gap:24px;
  align-items:center;
  min-height:148px;
}
#lips .shade-photo,
#lips .shade-swatch{
  display:flex;
  align-items:center;
  justify-content:center;
}
#lips .shade-photo img{
  width:118px;
  max-width:100%;
  height:auto;
  display:block;
}
#lips .shade-swatch img{
  width:92px;
  max-width:100%;
  height:auto;
  display:block;
}

@media (max-width: 767px){
  #lips .lips-points .points-top .point h3,
  #lips .serum-points .point h3{
    margin-bottom:.65rem;
  }
  #lips .shade-list .shade{
    grid-template-columns: 74px minmax(0,1fr) 66px;
    gap:20px;
    min-height:100px;
  }
  #lips .shade-photo img{width:74px;}
  #lips .shade-swatch img{width:62px;}
}

/* 2026-08-22 Serum POINT 2/3 layout refinements */
#lips .serum-point--2 .ingredient-wrap{
  width:76%;
  margin:32px auto 0;
}
#lips .serum-grid > .serum-point--3{
  width:100%;
  display:grid;
  grid-template-columns:34% 66%;
  gap:0;
  align-items:center;
}
#lips .serum-point--3 .serum-point3-copy{
  min-width:0;
}
#lips .serum-point--3 .serum-point3-img{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
#lips .serum-point--3 .serum-point3-img img{
  display:block;
  width:112%;
  max-width:none;
  height:auto;
}
#lips .serum-point--3 .serum-point3-copy p{
  color:#606060;
}

@media (max-width: 767px){
  #lips .serum-point--2 .ingredient-wrap{
    width:100%;
    margin-top:5vw;
  }
  #lips .serum-grid > .serum-point--3{
    display:block;
  }
  #lips .serum-point--3 .serum-point3-img{
    display:block;
    margin-top:5vw;
  }
  #lips .serum-point--3 .serum-point3-img img{
    width:100%;
    max-width:100%;
  }
}

/* 2026-08-22 desktop width / background cap refinements */
@media screen and (min-width: 992px){
  /* Desktop artwork stays at its designed scale up to 1700px.
     Wider screens extend with the sampled section colour instead of enlarging the JPG. */
  #lips .lips-hero{
    padding:0 0 50px;
    background-color:#76a5b6;
    background-size:min(100vw, 1700px) auto;
    background-position:center top;
    background-repeat:no-repeat;
  }
  #lips .lips-hero .hero-copy{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:1100px;
    margin:0 auto;
  }
  #lips .lips-points{
    background-color:#bbd8e1;
    background-size:min(100vw, 1700px) auto;
    background-position:center top;
    background-repeat:no-repeat;
  }
  #lips .serum-hero{
    background-color:#c3c5bf;
    background-size:min(100vw, 1700px) auto;
    background-position:center center;
    background-repeat:no-repeat;
  }
  #lips .serum-points{
    background-color:#e9e9e9;
    background-size:min(100vw, 1700px) auto;
    background-position:center top;
    background-repeat:no-repeat;
  }

  /* Keep all desktop content comfortably inside the 1400px design area. */
  #lips .lips-inner{
    max-width:min(1400px, calc(100% - 220px));
  }

  #lips .shades-showcase{
    width:1150px;
    max-width:calc(100% - 80px);
  }

  #lips .serum-grid{
    width:850px;
    max-width:calc(100% - 80px);
  }
}

/* POINT 2 ingredient chart */
#lips .serum-point--2 .ingredient-title{
  margin:0 0 14px;
  font-size:1.25rem;
  font-weight:700;
  color:#333;
  text-align:left;
}
#lips .serum-point--2 .ingredient-wrap picture{
  display:block;
  box-sizing:border-box;
  border:1px solid #aaa;
  padding:28px 24px;
}
#lips .serum-point--2 .ingredient-chart{
  display:block;
  width:80%;
  height:auto;
  margin:0 auto;
}
#lips .serum-point--2 .ingredient-note{
  margin:10px 0 0;
  color:#606060;
  font-size:.72rem;
  line-height:1.45;
  text-align:right;
}
#lips .serum-point--2 .ingredient-note span{white-space:nowrap}
@media (max-width:767px){
  #lips .serum-point--2 .ingredient-title{
    font-size:1.2rem;
    margin-bottom:12px;
  }
  #lips .serum-point--2 .ingredient-wrap picture{
    padding:22px 14px;
  }
  #lips .serum-point--2 .ingredient-note{
    font-size:.68rem;
    margin-top:8px;
  }
}

/* LIPS hero product information */
@media screen and (min-width: 768px){
  #lips .lips-hero .product-name{
    margin:2.8rem 0 1.15rem;
    gap:.45rem;
    line-height:1.2;
  }
  #lips .lips-hero .product-name span{
    font-size:1.25rem;
    font-weight:400;
    letter-spacing:.035em;
    color:#606060;
  }
  #lips .lips-hero .product-name strong{
    font-size:2rem;
    line-height:1.25;
    font-weight:500;
    letter-spacing:.04em;
    color:#2f2f2f;
  }
  #lips .lips-hero .product-meta{
    margin:.25rem 0 0;
    font-size:1rem!important;
    line-height:1.8;
    color:#333;
  }
  #lips .lips-hero .release{
    margin-top:1.35rem!important;
    padding:.38rem 1.55rem;
    border:1px solid rgba(255,255,255,.95);
    font-size:1.25rem!important;
    line-height:1.25;
    font-weight:500;
    letter-spacing:.03em;
    color:#fff;
  }
}

/* Keep the LIPS hero product-name treatment on mobile */
@media screen and (max-width: 767px){
  #lips .lips-hero .product-name{
    margin:2.2rem 0 1rem;
    gap:.35rem;
    line-height:1.2;
  }
  #lips .lips-hero .product-name span{
    font-size:1rem;
    font-weight:400;
    letter-spacing:.035em;
    color:#606060;
  }
  #lips .lips-hero .product-name strong{
    font-size:1.75rem;
    line-height:1.25;
    font-weight:500;
    letter-spacing:.04em;
    color:#2f2f2f;
  }
  #lips .lips-hero .product-meta{
    margin:.25rem 0 0;
    font-size:.88rem!important;
    line-height:1.75;
    color:#333;
    text-shadow:none;
  }
  #lips .lips-hero .release{
    margin-top:1.25rem!important;
    padding:.38rem 1rem;
    border:1px solid rgba(255,255,255,.95);
    font-size:1.08rem!important;
    line-height:1.25;
    font-weight:500;
    letter-spacing:.03em;
    color:#fff;
  }
}

/* 2026-08-24 LIPS mobile POINT layout refinements */
#lips .lips-mobile-br{display:none;}

/* POINT title underline follows every wrapped text line */
#lips .lips-points .points-top .point h3{
  display:block;
  width:auto;
  max-width:100%;
  margin:0 0 1rem;
  border-bottom:0;
  padding-bottom:0;
}
#lips .lips-points .points-top .point h3 > span{
  display:inline;
  border-bottom:1px solid currentColor;
  padding-bottom:.12em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

@media screen and (max-width:640px){
  /* kv-bg2_m already contains the lipstick visual: keep it above POINT 1 */
  #lips .lips-points{
    padding-top:0;
    min-height: auto;
  }
  #lips .lips-points .points-top{
    padding-top:108vw;
  }
  #lips .lips-points .points-top .point{
    width:100%;
    margin-bottom:12vw;
  }
  #lips .lips-mobile-br{display:block;}
  #lips .lips-points .points-top .point h2{
    font-size:1.34rem;
    line-height:1.25;
    margin-bottom:.7rem;
  }
  #lips .lips-points .points-top .point h3{
    font-size:.98rem;
    line-height:1.7;
    margin-bottom:.85rem;
  }
  #lips .lips-points .points-top .point .lead{
    font-size:.88rem;
    line-height:1.8;
    margin-bottom:.55rem;
  }
  #lips .lips-points .points-top .point p{
    font-size:.85rem;
    line-height:1.72;
    letter-spacing:.03em;
  }
}

/* 2026-08-25 Serum heading/image alignment cleanup */
@media screen and (min-width: 768px){
  /* Match the underline-to-title spacing used by the upper lipstick POINT headings. */
  #lips .serum-points .point h3{
    margin:0 0 1rem;
    padding-bottom:.12em;
    line-height:1.8;
  }

  /* Keep POINT 3 artwork clear of the copy: slightly smaller and aligned farther right. */
  #lips .serum-grid > .serum-point--3{
    grid-template-columns:34% 66%;
  }
  #lips .serum-point--3 .serum-point3-img{
    justify-content:flex-end;
    padding-left:28px;
    box-sizing:border-box;
  }
  #lips .serum-point--3 .serum-point3-img img{
    width:92%;
    max-width:100%;
    margin-left:auto;
  }
}

/* 2026-08-25 POINT heading underline unified
   Use text-decoration for both lipstick and serum POINT headings so the
   underline offset is identical and follows every wrapped line. */
#lips .lips-points .points-top .point h3,
#lips .serum-points .point h3{
  display:block;
  width:auto;
  max-width:100%;
  margin:0 0 1rem;
  padding-bottom:0;
  border-bottom:0;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-skip-ink:auto;
}
#lips .lips-points .points-top .point h3 > span{
  display:inline;
  border-bottom:0;
  padding-bottom:0;
  -webkit-box-decoration-break:initial;
  box-decoration-break:initial;
}

/* ===== Lips HOW TO USE typography ===== */
#lips .howto > div{
  color:#606060;
}
#lips .howto h2{
  display:inline-block;
  min-width:184px;
  margin:0 0 30px;
  padding:8px 28px 7px;
  border:1px solid #606060;
  font-family:var(--font-family-helvetica);
  font-size:1.05rem;
  line-height:1.15;
  font-weight:400;
  letter-spacing:.04em;
  text-align:center;
  color:#4f4f4f;
}
#lips .howto p,
#lips .howto .step-note{
  display:block;
  margin-left:1.7em;
  font-size:.84em;
  line-height:1.65;
}

#lips .howto small{
  color:#606060;
  font-size:.92rem;
  line-height:1.75;
  font-weight:400;
  letter-spacing:.015em;
}
#lips .howto p{
  margin:0 0 24px;
}
#lips .howto p:first-of-type{
  display:table;
  margin-bottom:25px;
  padding:0 .12em;
  font-size:1rem;
  line-height:1.35;
  background:linear-gradient(to bottom, transparent 58%, #d9eef3 58%, #d9eef3 100%);
}
#lips .howto small{
  display:block;
  margin-top:3px;
  margin-bottom:0;
  font-size:.7rem;
  line-height:1.65;
  letter-spacing: 0.3px;
}

@media screen and (max-width: 991px){
  #lips .howto h2{
    min-width:160px;
    margin-bottom:22px;
    padding:7px 22px 6px;
    font-size:.95rem;
  }
  #lips .howto p,
  #lips .howto small{
    font-size:.86rem;
    line-height:1.7;
  }
  #lips .howto p{margin-bottom:18px}
  #lips .howto p:first-of-type{font-size:.94rem;margin-bottom:20px}
  #lips .howto small{font-size:.78rem}
}

@media screen and (max-width: 640px){
  #lips .howto h2{
    min-width:145px;
    margin-bottom:18px;
    padding:6px 18px 5px;
    font-size:.88rem;
  }
  #lips .howto p,
  #lips .howto small{
    font-size:.78rem;
    line-height:1.65;
  }
  #lips .howto p{margin-bottom:16px}
  #lips .howto p:first-of-type{font-size:.86rem;margin-bottom:18px}
  #lips .howto small{font-size:.72rem;line-height:1.6}
}


/* Mobile shade section: product image -> intro copy -> shade list */
#lips .shade-intro--mobile{display:none;}

@media (max-width:767px){
  /* The desktop intro sits before the showcase; hide it on mobile and use the
     in-flow copy directly below lips_pt1.png instead. */
  #lips .lips-points > .shade-intro{display:none;}

  #lips .shades-showcase .shade-intro--mobile{
    display:block;
    order:2;
    width:100%;
    max-width:none;
    margin:0 auto 8vw;
    padding:0;
    text-align:center;
    font-weight:500;
    font-size:.9rem;
    line-height:2;
  }

  #lips .shade-product--first{
    order:1;
    width:78%;
    margin:0 auto 7vw;
  }

  #lips .shade-list--first{order:3;}

  /* Mobile does not use the second decorative product image. */
  #lips .shade-product--second{display:none;}
  #lips .shade-list--second{order:4;}
}

@media (max-width:640px){
  #lips .shades-showcase .shade-intro--mobile{
    font-size:1rem;
    line-height:1.85;
    margin-bottom:7vw;
  }
}


/* ===== 2026-08-25 mobile POINT / HOW TO final alignment ===== */
/* Highlight follows every wrapped line, both lipstick (white) and serum (blue). */
#lips .lips-points .points-top .point .lead,
#lips .serum-points .point .lead{
  display:block;
  width:auto;
  max-width:100%;
  padding:0;
  background:none;
  position:relative;
}
#lips .lips-points .points-top .point .lead::after,
#lips .serum-points .point .lead::after{
  content:none;
}
#lips .lips-points .points-top .point .lead > span,
#lips .serum-points .point .lead > span{
  display:inline;
  padding:0 .08em;
  background:linear-gradient(to bottom, transparent 56%, rgba(255,255,255,.95) 56%, rgba(255,255,255,.95) 94%, transparent 94%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
#lips .serum-points .point .lead > span{
  background:linear-gradient(to bottom, transparent 56%, rgba(194,229,238,.95) 56%, rgba(194,229,238,.95) 94%, transparent 94%);
}

@media screen and (max-width:640px){
  /* Lower serum POINT 1–3 uses the exact same mobile type scale as the upper POINT 1–3. */
  #lips .serum-points .point h2{
    font-size:1.34rem;
    line-height:1.25;
    margin-bottom:.7rem;
     margin-bottom:15px;
  }
  #lips .serum-points .point h3{
    font-size:1rem;
    line-height:1.7;
    margin-bottom:.85rem;
  }
  #lips .serum-points .point .lead{
    font-size:1rem;
    line-height:1.8;
    margin-bottom:.55rem;
  }
  #lips .serum-points .point > p:not(.lead){
    font-size:.85rem;
    line-height:1.72;
    letter-spacing:.03em;
  }

  /* HOW TO: centre the product image and heading only; body copy remains left aligned. */
  #lips .howto > img{
    display:block;
    width:46%;
    margin:0 auto;
  }
  #lips .howto h2{
    display:block;
    width:max-content;
    min-width:145px;
    max-width:100%;
    margin:0 auto 18px;
  }
}

/* Lips annotation mark: small upper-right ※ */
#lips sup.note-mark{
  display:inline-block;
  font-size:.58em;
  line-height:1;
  vertical-align:super;
  margin-left:.08em;
  font-weight:inherit;
}

/* =========================================================
   RMK 2026 POWDER / BASE PAGE
   Header intentionally reuses #set styles from index/set.
   ========================================================= */
#base-page{font-family:var(--font-family-noto);color:#504d4d;background:#f7f7f8;overflow:hidden}
#base-page *{box-sizing:border-box}
#base-page img{max-width:100%;height:auto}
#base-page .base-inner{width:min(1400px,calc(100% - 80px));margin:0 auto}
#base-page .mob-only{display:none}

/* hero: natural flow; artwork max 1700px and outside area extends by sampled colour */
#base-page .base-hero{background:#ececf5 url(../images/base/kv.jpg) center top/ min(100%,1700px) auto no-repeat;padding-bottom:70px}
#base-page .base-hero-spacer{width:min(1700px,100%);margin:auto;aspect-ratio:1700/1040}
#base-page .base-hero-copy{text-align:center;max-width:900px;margin-top: 30px;}
#base-page .base-hero-copy h1{font-size:1.8rem;line-height:1.65;font-weight:500;margin:0 0 30px;letter-spacing: 1px;}
#base-page .base-hero-copy>p{font-size:1rem;line-height:1.9;color:#555;margin-top:20px}
#base-page .base-product-name{margin:44px 0 12px;text-align:center}
#base-page .base-product-name span{display:block;color:#73737b;font-family:var(--font-family-helvetica);font-size:1.25rem;letter-spacing:.02em}
#base-page .base-product-name strong{display:block;font-size:2rem;line-height:1.35}
#base-page .base-product-meta{font-size:1.02rem!important;line-height:1.7!important;color:#504d4d!important}
#base-page .base-release{display:inline-block;padding:2px 20px;border:1px solid #777;font-weight:500!important;color:#504d4d!important}

/* common points over kv2 artwork */
#base-page .base-common-points{background:#eef1f4 url(../images/base/kv2.jpg) center top/min(100%,1700px) auto no-repeat;padding:110px 0 60px;min-height:900px}
#base-page .base-points-copy{max-width:680px;margin-left:max(40px,calc((100% - 1300px)/2));margin-right:auto}
#base-page .base-tag{display:table;margin:0 0 24px;padding:4px 12px;background:#cbb8cf;color:#fff;font-size:.85rem}
#base-page .base-point{margin-bottom:54px}
#base-page .base-point h2{font-family:var(--font-family-helvetica);font-size:1.5rem;line-height:1.2;font-weight:400;margin:0 0 14px}
#base-page .base-point-no{font-size:1.75em;vertical-align:-.06em;margin-left:.08em}
#base-page .base-point h3{display:inline;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;font-size:1.1rem;line-height:1.8;font-weight:700}
#base-page .base-point p,#base-page .base-feature p{font-size:.92rem;line-height:1.9;color:#606060;margin-top:16px}
#base-page .base-feature{max-width:720px;margin:35px 0}
#base-page .base-feature h4{font-size:1rem;line-height:1.5}.base-feature h4 strong{display:block;font-family:var(--font-family-helvetica);font-size:1.25rem}

/* four detailed powder sections */
#base-page .base-powder{position:relative;background-position:center top;background-size:min(100%,1700px) auto;background-repeat:no-repeat;background-color:#f4f4f6;min-height:920px;padding:110px 0 90px}
#base-page .base-powder--1{background-image:url(../images/base/pt_pic1.jpg)}
#base-page .base-powder--2{background-image:url(../images/base/pt_pic2.jpg)}
#base-page .base-powder--3{background-image:url(../images/base/pt_pic3.jpg)}
#base-page .base-powder--4{background-image:url(../images/base/pt_pic4.jpg)}
#base-page .powder-copy{width:min(620px,44%);margin-left:max(40px,calc((100% - 1400px)/2));margin-right:auto}
#base-page .powder-copy--right{margin-left:auto;margin-right:max(40px,calc((100% - 1400px)/2))}
#base-page .powder-title span{display:block;font-family:var(--font-family-helvetica);font-size:.78rem;color:#747474}
#base-page .powder-title strong{display:block;font-size:1.65rem;line-height:1.4;margin:3px 0 4px}
#base-page .powder-title small{display:block;font-size:.78rem;line-height:1.65;color:#606060}
#base-page .powder-title small .powder-refill-detail{display:inline-block;padding-left:1em}
#base-page .powder-lead{font-weight:700;font-size:1rem;line-height:1.8;margin:28px 0}
#base-page .powder-copy ol{padding-left:1.35em;margin:0;color:#555;font-size:.88rem;line-height:1.8;list-style:auto;}
#base-page .powder-copy li{margin-bottom:20px}.powder-copy li b{color:#222}

#base-page .base-more{padding:38px 20px;background:#f7f7f8;text-align:center}
#base-page .base-more-btn{display:inline-flex;align-items:center;gap:30px;min-width:280px;justify-content:center;padding:18px 28px;background:#fff;border:1px solid #ddd;color:#333;text-decoration:none;font-weight:700}.base-more-btn span{font-size:1.7em;font-weight:300}

/* 4-col comparison / mobile slider */
#base-page .powder-chooser{padding:75px 0;background:#f3f5f8}
#base-page .powder-chooser h2{text-align:center;font-size:1.2rem;line-height:1.6;margin-bottom:34px}
#base-page .powder-slider{overflow:hidden}
#base-page .powder-slider-track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #d9dde4;background:#fff}
#base-page .powder-card{padding:25px 18px;border-right:1px solid #e1e4e8;text-align:center}.powder-card:last-child{border-right:0}
#base-page .powder-card img{width:150px}.powder-card h3{font-size:.95rem;line-height:1.55;min-height:48px;margin:10px 0 18px}
#base-page .powder-card dl{display:grid;grid-template-columns:64px 1fr;text-align:left;margin:0;font-size:.78rem;line-height:1.55}.powder-card dt,.powder-card dd{padding:7px 4px;border-top:1px solid #eee}.powder-card dt{font-weight:700}.powder-card dd{margin:0;color:#606060}
#base-page .powder-dots{display:none}

/* bottom base makeup image */
#base-page .base-makeup{padding:75px 0 90px;background:#f7f7f8;text-align:center}
#base-page .base-makeup h2{font-size:1.3rem;line-height:1.5;margin:0 0 10px}.base-makeup h2 span{display:block;font-size:.8em;color:#a78c68}
#base-page .base-makeup>div>p{font-size:.9rem;line-height:1.75;color:#606060;margin-bottom:30px}
#base-page .base-makeup-scroll{position:relative}
#base-page .base-makeup-viewport{overflow:hidden}.base-makeup-viewport img{display:block;width:100%;max-width:1357px;margin:auto}
#base-page .base-scroll-arrow{display:none}

@media (max-width:991px){
  #base-page .base-inner{width:calc(100% - 40px)}
  #base-page .base-common-points{padding-top:80px}
  #base-page .powder-copy{width:52%}
}

@media (max-width:767px){
  #base-page .base-inner{width:calc(100% - 36px)}
  #base-page .mob-only{display:block}
  #base-page .base-hero{background-image:url(../images/base/kv_m.jpg);background-size:100% auto;padding-bottom:50px}
  #base-page .base-hero-spacer{width:100%;aspect-ratio:640/920}
  #base-page .base-hero-copy{width:calc(100% - 24px)}
  #base-page .base-hero-copy h1{font-size:1.35rem;line-height:1.7;margin-bottom:22px;letter-spacing: 0px;}
  #base-page .base-hero-copy>p{font-size:.86rem;line-height:1.85;margin-bottom:20px}
  #base-page .base-product-name{margin-top:32px}.base-product-name span{font-size:1rem!important}.base-product-name strong{font-size:1.65rem!important}
  #base-page .base-product-meta{font-size:.82rem!important}.base-release{font-size:1rem}

  #base-page .base-common-points{background-image:url(../images/base/kv2_m.jpg);background-size:100% auto;padding:62px 0 70px;min-height:0}
  #base-page .base-points-copy{width:calc(100% - 54px);margin:0 auto;}
  #base-page .base-tag{font-size:.75rem;margin-bottom:20px}
  #base-page .base-point{margin-bottom:36px}.base-point h2{font-size:1.34rem;margin-bottom:12px}.base-point h3{font-size:.98rem;line-height:1.7}.base-point p,.base-feature p{font-size:.85rem;line-height:1.75}
  #base-page .base-feature{margin:28px 0}.base-feature h4{font-size:.95rem}

  #base-page .base-powder{min-height:0;background-size:100% auto;padding:85vw 0 60px;background-color:#f4f4f6}
  #base-page .base-powder--1{background-image:url(../images/base/pt_pic1_m.jpg)}
  #base-page .base-powder--2{background-image:url(../images/base/pt_pic2_m.jpg)}
  #base-page .base-powder--3{background-image:url(../images/base/pt_pic3_m.jpg)}
  #base-page .base-powder--4{background-image:url(../images/base/pt_pic4_m.jpg)}
  #base-page .powder-copy,#base-page .powder-copy--right{width:calc(100% - 54px);margin:0 auto}
  #base-page .powder-title span{font-size:.78rem}.powder-title strong{font-size:1.35rem!important}.powder-title small{font-size:.7rem}
  #base-page .powder-lead{font-size:.9rem;line-height:1.75;margin:20px 0}.powder-copy ol{font-size:.8rem;line-height:1.75}

  #base-page .powder-chooser{padding:55px 0}.powder-chooser h2{font-size:1rem;margin-bottom:24px}
  #base-page .powder-slider{width:100%}
  #base-page .powder-slider-track{display:flex;width:100%;gap:0;border:0;background:transparent;transition:transform .5s ease}
  #base-page .powder-card{flex:0 0 100%;width:100%;border:1px solid #d9dde4!important;background:#fff;padding:24px 22px}
  #base-page .powder-card img{width:175px}.powder-card h3{font-size:1rem;min-height:0}.powder-card dl{font-size:.82rem;grid-template-columns:68px 1fr}
  #base-page .powder-dots{display:flex;justify-content:center;gap:10px;margin-top:20px}.powder-dots button{width:9px;height:9px;border:0;border-radius:50%;background:#c8c8c8;padding:0}.powder-dots button.active{background:#7b6b60}

  #base-page .base-makeup{padding:55px 0 70px}.base-makeup h2{font-size:1.1rem}.base-makeup>div>p{font-size:.82rem}
  #base-page .base-makeup-scroll{padding:0 4px}
  #base-page .base-makeup-viewport{overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}.base-makeup-viewport::-webkit-scrollbar{display:none}
  #base-page .base-makeup-viewport img{width:auto;max-width:none;height:700px;margin:0}
  #base-page .base-scroll-arrow{display:block;position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:36px;height:50px;border:0;background:rgba(255,255,255,.86);font-size:2rem;color:#666;box-shadow:0 1px 6px rgba(0,0,0,.12)}
  #base-page .base-scroll-arrow.prev{left:-4px}.base-scroll-arrow.next{right:-4px}
}

/* =========================================================
   BASE PAGE refinements v2
   comparison table + PACKAGE / TOOL labels
   ========================================================= */
#base-page .base-feature h4{
  margin:0 0 14px;
  font-weight:400;
}
#base-page .base-feature h4>span{
  display:inline-block;
  padding:2px 7px 3px;
  border:1px solid #666;
  line-height:1.2;
  font-size:.96rem;
}
#base-page .base-feature h4>strong{
  display:block;
  margin-top:4px;
  font-family:var(--font-family-helvetica);
  font-size:1.5rem;
  line-height:1.15;
  font-weight:500;
  letter-spacing:.02em;
}

#base-page .powder-chooser{
  padding:70px 0 78px;
  background:#f1f2f6;
}
#base-page .powder-chooser>.base-inner{
  width:min(1360px,calc(100% - 80px));
}
#base-page .powder-chooser h2{
  margin:0 0 38px;
  text-align:center;
  font-size:1.4rem;
  line-height:1.55;
  font-weight:700;
  color:#555;
}
#base-page .powder-table{
  display:block;
  width:100%;
  padding:10px 38px 18px;
  background:#f1f2f6;
  color:#555;
}
#base-page .powder-table-products,
#base-page .powder-table-row{
  display:grid;
  grid-template-columns:145px repeat(4,minmax(0,1fr));
}
#base-page .powder-table-products{
  align-items:end;
  margin-bottom:20px;
}
#base-page .powder-table-product{
  padding:0 10px;
  text-align:center;
  min-width:0;
}
#base-page .powder-table-product img{
  display:block;
  width:min(170px,82%);
  margin:0 auto 10px;
}
#base-page .powder-table-product p{
  margin:0;
  font-family:var(--font-family-helvetica);
  font-size:.6rem;
  line-height:1.35;
  white-space:normal;
  letter-spacing: 0px;
}
#base-page .powder-table-product p span{
  font-family:var(--font-family-noto);
  font-size:.9rem;
}
#base-page .powder-table-row{
  align-items:center;
  min-height:76px;
  border-bottom:1px solid #bfc0c5;
  font-size:.95rem;
  line-height:1.5;
}
#base-page .powder-table-row:last-child{border-bottom:0}
#base-page .powder-table-row>strong{
  padding:18px 8px 18px 0;
  font-size:1rem;
  font-weight:700;
  color:#555;
}
#base-page .powder-table-row>span{
  padding:16px 12px;
  text-align:center;
}
#base-page .powder-table-row--feature{min-height:105px}
#base-page .powder-table-row--recommend{min-height:130px}
#base-page .powder-slider{display:none}

@media (max-width:767px){
  #base-page .base-feature h4>span{
    font-size:.92rem;
    padding:2px 5px 3px;
  }
  #base-page .base-feature h4>strong{
    margin-top:3px;
    font-size:1.45rem;
  }

  #base-page .powder-chooser{
    padding:48px 0 55px;
  }
  #base-page .powder-chooser>.base-inner{
    width:100%;
  }
  #base-page .powder-chooser h2{
    width:calc(100% - 70px);
    margin:0 auto 15px;
    font-size:1.5rem;
    line-height:1.45;
    letter-spacing: 1px;
  }
  #base-page .powder-table{display:none}
  #base-page .powder-slider{
    display:block;
    overflow:hidden;
    width:100%;
  }
  #base-page .powder-slider-track{
    display:flex;
    width:100%;
    gap:0;
    border:0;
    background:transparent;
    transition:transform .5s ease;
  }
  #base-page .powder-card{
    flex:0 0 100%;
    width:100%;
    padding:0px 38px 0px;
    border:0!important;
    background:#f1f2f6;
    color:#555;
  }
  #base-page .powder-card img{
    width:min(140px,64vw);
    margin:0 auto 12px;
  }
  #base-page .powder-card h3{
    margin:0 0 15px;
    min-height:0;
    font-family:var(--font-family-helvetica);
    font-size:1rem;
    line-height:1.45;
    font-weight:400;
  }
  #base-page .powder-card h3 span{
    font-family:var(--font-family-noto);
    font-size:1.2rem;
  }
  #base-page .powder-card dl{
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    margin:0;
    font-size:1.2rem;
    line-height:1.4;
  }
  #base-page .powder-card dt,
  #base-page .powder-card dd{
    display:flex;
    align-items:center;
    min-height:50px;
    padding:15px 0;
    border-top:1px solid #aaa;
  }
  #base-page .powder-card dt:first-of-type,
  #base-page .powder-card dt:first-of-type + dd{border-top:0}
  #base-page .powder-card dt{
    justify-content:flex-start;
    font-size:1.2rem;
    font-weight:600;
  }
  #base-page .powder-card dd{
    justify-content:center;
    margin:0;
    text-align:center;
    color:#606060;
  }
  #base-page .powder-card dt:nth-of-type(4),
  #base-page .powder-card dt:nth-of-type(4)+dd{min-height:80px}
  #base-page .powder-card dt:nth-of-type(5),
  #base-page .powder-card dt:nth-of-type(5)+dd{min-height:120px}
  #base-page .powder-dots{
    display:flex;
    justify-content:center;
    gap:16px;
    margin-top:12px;
  }
  #base-page .powder-dots button{
    width:12px;
    height:12px;
    border:0;
    border-radius:50%;
    background:#d0d0d0;
    padding:0;
  }
  #base-page .powder-dots button.active{background:#000}
}

/* set.html product description mobile line break */
#set .mobile-break { display: none; }
#set .desktop-inline { display: inline; }
@media screen and (max-width: 640px) {
  #set .mobile-break { display: inline; }
  #set .desktop-inline { display: none; }
}

/* 2026-08-31: desktop KV full-bleed on large screens */
@media (min-width: 769px) {
  #lips .lips-hero {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background-size: cover;
    background-position: center top;
  }

  #base-page .base-hero {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background-size: 100% auto;
    background-position: center top;
  }
}

/* 2026-08-31: keep KV copy aligned with the scaled artwork on wide desktops */
@media screen and (min-width: 1701px) {
  /* lips KV becomes full-width above 1700px, so the copy start point must scale with it too */
  #lips .lips-hero::before {
    height: 64.7vw;
  }

  /* base KV artwork is also full-width; let the spacer grow proportionally instead of stopping at 1700px */
  #base-page .base-hero-spacer {
    width: 100%;
    max-width: none;
    aspect-ratio: 1700 / 1040;
  }
}

/* 2026-08-31 serum POINT 1/2 mobile-only title line breaks */
#lips .serum-title-break{display:none;}
@media screen and (max-width:640px){
  #lips .serum-title-break{display:block;}
}

/* =========================================================
   2026-08-31 BASE refinement / full-site font stack
   ========================================================= */
:root{
  --font-family:"Helvetica Neue","Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  --font-family-helvetica:"Helvetica Neue",Arial,sans-serif;
  --font-family-noto:"Noto Sans TC","Microsoft JhengHei",sans-serif;
}
body{font-family:var(--font-family);font-weight:400;}

/* Base page desktop artwork: full-bleed, vertically centered, content-driven height */
@media (min-width:768px){
  #base-page .base-common-points,
  #base-page .base-powder{
    min-height:0;
    margin:0;
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
  }

  #base-page .base-common-points{
    background-image:url(../images/base/kv2.jpg);
  }

  #base-page .base-powder--1{background-image:url(../images/base/pt_pic1.jpg);}
  #base-page .base-powder--2{background-image:url(../images/base/pt_pic2.jpg);}
  #base-page .base-powder--3{background-image:url(../images/base/pt_pic3.jpg);}
  #base-page .base-powder--4{background-image:url(../images/base/pt_pic4.jpg);}
}

/* Large desktop only: increase powder section vertical spacing */
@media (min-width:1600px){
  #base-page .base-powder{
    padding:180px 0 160px;
  }
}

/* Powder name colour underlays */
#base-page .base-powder .powder-title strong{
  display:table;
  width:auto;
  max-width:100%;
  padding:0 .08em;
  background-repeat:no-repeat;
  background-position:left 82%;
  background-size:100% .42em;
  font-weight: 500;
  font-size:1.8rem;
}
#base-page .base-powder--1 .powder-title strong{
  background-image:linear-gradient(rgba(235,223,215,.82),rgba(235,223,215,.82));
}
#base-page .base-powder--2 .powder-title strong{
  background-image:linear-gradient(rgba(214,234,232,.88),rgba(214,234,232,.88));
}
#base-page .base-powder--3 .powder-title strong{
  background-image:linear-gradient(rgba(229,224,240,.88),rgba(229,224,240,.88));
}
#base-page .base-powder--4 .powder-title strong{
  background-image:linear-gradient(rgba(244,222,229,.88),rgba(244,222,229,.88));
}

/* More powders banner button uses supplied artwork */
#base-page .base-more{padding:38px 20px;background:#f7f7f8;text-align:center;}
#base-page .base-more-btn{
  width:100%;
  max-width:700px;
  min-width:0;
  aspect-ratio:700/180;
  margin:0 auto;
  padding:0 0 0 8%;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:35px;
  border:0;
  background:url(../images/base/btn.jpg) center center/cover no-repeat;
  color:#111;
  text-decoration:none;
  font-family:var(--font-family-noto);
  font-size:1.75rem;
  line-height:1.2;
  font-weight:500;
  text-align:left;
}
#base-page .base-more-btn span{
  width:0;
  height:0;
  margin-left:4px;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:18px solid #111;
  font-size:0;
  line-height:0;
}

@media (max-width:767px){
  #base-page .base-more{padding:28px 14px;}
  #base-page .base-more-btn{
    max-width:750px;
    padding-left:12%;
    gap:12px;
    font-size:1.6rem;
  }
  #base-page .base-more-btn span{
    border-top-width:8px;
    border-bottom-width:8px;
    border-left-width:12px;
  }
}

/* Powder detail typography refinement */
#base-page .base-powder .powder-lead{
  font-weight:400;
  font-size:1rem;
  line-height:1.9;
  color:#606060;
  margin:28px 0 34px;
}
#base-page .base-powder .powder-copy ol{
  font-size:.9rem;
  line-height:1.9;
  color:#555;
}
#base-page .base-powder .powder-copy li b{
  display:inline-block;
  margin-bottom:8px;
  font-size:1.28rem;
  line-height:1.5;
  font-weight:700;
  color:#2f2f2f;
}

@media (max-width:767px){
  #base-page .base-powder .powder-lead{
    font-size:.9rem;
    line-height:1.8;
    margin:20px 0 26px;
  }
  #base-page .base-powder .powder-copy ol{
    font-size:.82rem;
    line-height:1.8;
  }
  #base-page .base-powder .powder-copy li{
    margin-bottom:30px;
  }
  #base-page .base-powder .powder-copy li b{
    font-size:1.12rem;
    line-height:1.5;
    margin-bottom:6px;
  }
}

/* Powder list number: match bold heading typography */
#base-page .base-powder .powder-copy ol > li::marker{
  font-size:1.28rem;
  font-weight:700;
  color:#2f2f2f;
}
@media (max-width:767px){
  #base-page .base-powder .powder-copy ol > li::marker{
    font-size:1.12rem;
    font-weight:700;
  }
}


/* =========================================================
   2026-09-01 BASE hero product names + POINT title wrapping
   ========================================================= */
#base-page .base-product-name{
  width:min(720px,100%);
  margin:42px auto 14px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:28px;
  row-gap:28px;
  text-align:center;
}
#base-page .base-product-item span{
  display:block;
  color:#55565c;
  font-family:var(--font-family-helvetica);
  font-size:1rem;
  line-height:1.35;
  font-weight:400;
  letter-spacing:0;
  white-space:nowrap;
}
#base-page .base-product-item:nth-child(2){grid-column:1;grid-row:2;}
#base-page .base-product-item:nth-child(3){grid-column:2;grid-row:1;}
#base-page .base-product-item strong{
  display:block;
  margin-top:0px;
  color:#55565c;
  font-family:var(--font-family-noto);
  font-size:1.35rem;
  line-height:1.3;
  font-weight:500;
}
#base-page .base-product-meta{
  margin-top:24px;
  text-align:center;
  color:#55565c;
  font-weight:400;
  line-height:1.55;
}
#base-page .base-product-meta > strong{
  font-size:1rem;
  font-weight:400;
}
#base-page .base-product-meta small{
  display:inline-block;
  margin-top:10px;
  font-size:.84rem;
  line-height:1.55;
  font-weight:400;
}
#base-page .base-point h3 br{display:block;}

@media (max-width:767px){
  #base-page .base-product-name{
    width:100%;
    margin:32px auto 12px;
    grid-template-columns:1fr;
    row-gap:18px;
  }
  #base-page .base-product-item{grid-column:auto!important;grid-row:auto!important;}
  #base-page .base-product-item span{
    font-size:.94rem;
    line-height:1.3;
    white-space:normal;
  }
  #base-page .base-product-item strong{
    font-size:1.28rem!important;
    line-height:1.3;
  }
  #base-page .base-product-meta{
    margin-top:24px;
    line-height:1.55;
  }
  #base-page .base-product-meta > strong{font-size:1.08rem;}
  #base-page .base-product-meta small{font-size:.78rem;line-height:1.55;}
}


/* ===== 2026-09-01 shade showcase desktop 40/60 refinement ===== */
@media (min-width:768px){
  #lips .shades-showcase{
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-areas:none;
    column-gap:28px;
  }
  #lips .shade-product--first{
    grid-area:auto;
    grid-column:1 / span 2;
    grid-row:1;
  }
  #lips .shade-list--first{
    grid-area:auto;
    grid-column:3 / span 3;
    grid-row:1;
  }
  #lips .shade-list--second{
    grid-area:auto;
    grid-column:1 / span 3;
    grid-row:2;
  }
  #lips .shade-product--second{
    grid-area:auto;
    grid-column:4 / span 2;
    grid-row:2;
  }
  #lips .shade-list .shade{
    grid-template-columns:120px minmax(0,1fr) 92px;
    gap:22px;
  }
  #lips .shade-copy-break{display:block;}
}

#lips .shade h3 .limited-badge{
  display:inline-block;
  margin-left:.45em;
  padding:.14em .38em .12em;
  border:1px solid currentColor;
  line-height:1.15;
  vertical-align:.12em;
  font-family:var(--font-family-noto);
  font-weight:400;
}

/* ===== 2026-09-01 shade showcase desktop 45/55 refinement ===== */
@media (min-width:768px){
  #lips .shades-showcase{
    grid-template-columns:repeat(20,minmax(0,1fr));
    column-gap:24px;
  }
  #lips .shade-product--first{
    grid-column:1 / span 9;
    grid-row:1;
  }
  #lips .shade-list--first{
    grid-column:10 / span 11;
    grid-row:1;
  }
  #lips .shade-list--second{
    grid-column:1 / span 11;
    grid-row:2;
  }
  #lips .shade-product--second{
    grid-column:12 / span 9;
    grid-row:2;
  }
  #lips .shade-list .shade{
    grid-template-columns:120px minmax(0,350px) 82px;
    column-gap:30px;
  }
  #lips .shade-list--first .shade{
    justify-content:start;
  }
  #lips .shade-list--second .shade{
    justify-content:end;
  }
}


/* ===== 2026-09-01 shade copy desktop width fix ===== */
@media (min-width:1200px){
  #lips .shade-list .shade{
    grid-template-columns:120px minmax(0,1fr) 82px;
    column-gap:18px;
  }
  #lips .shade-list--first .shade,
  #lips .shade-list--second .shade{
    justify-content:stretch;
  }
  #lips .shade-copy{
    min-width:0;
    max-width:none;
  }
}


/* ===== Serum POINT 1 desktop line-break / underline ===== */
#lips .serum-points .serum-care-underline{
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
@media (min-width: 768px){
  #lips .serum-points .serum-grid > .point:first-child .serum-care-underline{
    display:block;
    width:max-content;
    max-width:100%;
  }
}


/* ===== 2026-09-01 BASE MAKEUP title + mobile powder swipe ===== */
#base-page .base-makeup h2{
  margin:0 0 22px;
  line-height:1.15;
}
#base-page .base-makeup-title{
  display:block;
  font-family:var(--font-family-noto);
  font-size:1.55rem;
  line-height:1.25;
  font-weight:700;
  color:#c79a6d;
}
#base-page .base-makeup-title i{
  padding:0 .42em;
  font-style:normal;
  font-weight:400;
}
#base-page .base-makeup-en{
  display:block;
  margin-top:7px;
  font-family:var(--font-family-helvetica);
  font-size:1.05rem;
  line-height:1.2;
  font-weight:400;
  color:#8b8b8b;
}
#base-page .base-makeup>div>p{
  margin:0 0 32px;
  font-size:1.15rem;
  line-height:1.6;
  font-weight:700;
  color:#555;
}
@media (min-width:768px){
  #base-page .base-makeup>div>p .sp-only{display:none}
}
@media (max-width:767px){
  #base-page .base-makeup h2{margin-bottom:30px}
  #base-page .base-makeup-title{
    font-size:1.55rem;
    line-height:1.25;
  }
  #base-page .base-makeup-en{
    margin-top:7px;
    font-size:1rem;
  }
  #base-page .base-makeup>div>p{
    margin:0 auto 30px;
    font-size:1rem;
    line-height:1.75;
    font-weight:700;
  }
  #base-page .powder-slider{
    touch-action:pan-y;
  }
  #base-page .powder-slider-track{
    will-change:transform;
  }
}

/* base-more button hover */
#base-page .base-more-btn{
  transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
}
#base-page .base-more-btn span{
  display:inline-block;
  transition:transform .28s ease;
}
@media (hover:hover){
  #base-page .base-more-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,0,0,.12);
    filter:brightness(1.02);
  }
  #base-page .base-more-btn:hover span{
    transform:translateX(5px);
  }
}
#base-page .base-more-btn:active{
  transform:translateY(-1px);
}

/* ===== 2026-09-01 shade-list first mobile copy: remove forced desktop line breaks ===== */
@media (max-width:767px){
  #lips .shade-list--first .shade p{
    white-space:normal;
  }
  #lips .shade-list--first .shade p .shade-copy-break{
    display:none !important;
  }
}

/* Base powder title line breaks: mobile only */
.mobile-title-br{display:none;}
@media (max-width: 767px){.mobile-title-br{display:inline;}}

/* Mobile powder headings: keep ordered-list number aligned with first heading line */
@media (max-width:767px){
  #base-page .base-powder .powder-copy ol > li > b{
    display:inline;
    margin-bottom:0;
  }
}


/* ===== 2026-09-04 base.html mobile interactions ===== */
@media screen and (max-width: 640px) {
  /* powder chooser section: keep only the RMK logo bar visible */
  #set.base-powder-nav-only header nav {
    height: 0;
    min-height: 0;
    grid-template-rows: repeat(2, 0);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-bottom: 0;
  }
  #set.base-powder-nav-only header nav a {
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* base makeup horizontal image: hide unusable arrows at each edge */
  #base-page .base-scroll-arrow {
    transition: opacity .2s ease, visibility .2s ease;
  }
  #base-page .base-scroll-arrow.is-hidden,
  #base-page .base-scroll-arrow:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}


/* ===== 2026-09-04 index.html mobile text wrapping ===== */
#lips .product-meta-mobile-br{display:none;}
@media screen and (max-width: 767px){
  #lips .product-meta-mobile-br{display:block;}
  #lips .howto p.howto-step-hanging{
    padding-left:1.35em;
    text-indent:-1.35em;
  }
}

/* HOW TO step ②: keep wrapped lines aligned with the text after the number on all screen sizes */
#lips .howto p.howto-step-hanging{
  padding-left:1.35em;
  text-indent:-1.35em;
}

/* base.html powder lead: mobile-specific line breaks */
#base-page .powder-lead--mobile{display:none;}
@media (max-width:767px){
  #base-page .powder-lead--desktop{display:none;}
  #base-page .powder-lead--mobile{display:block;}
}


/* ===== 2026-09-10 lips detail refinements ===== */
/* POINT 3: image disclaimer sits directly below the image */
#lips .serum-point--3 .serum-point3-img{
  flex-direction:column;
  align-items:flex-end;
}
#lips .serum-point--3 .ingredient-note{
  width:100%;
  margin:8px 0 0;
  color:#606060;
  font-size:.72rem;
  line-height:1.45;
  text-align:center;
}

/* HOW TO notes: wrapped lines align with the copy after ※ */
#lips .howto small .howto-note-line{
  display:block;
  padding-left:1.35em;
  text-indent:-1.35em;
}

@media (max-width:767px){
  #lips .serum-point--3 .serum-point3-img{
    align-items:stretch;
  }
  #lips .serum-point--3 .ingredient-note{
    margin-top:6px;
    font-size:.68rem;
  }

  /* 06 / 07 descriptions flow continuously on mobile; ignore desktop-only forced breaks */
  #lips .shade-list--second .shade:nth-child(1) .shade-copy-break,
  #lips .shade-list--second .shade:nth-child(2) .shade-copy-break{
    display:none;
  }
}

/* ===== 2026-09-10 shade 06/07 mobile continuous flow ===== */
@media (max-width:767px){
  #lips .shade-list--second .shade:nth-child(2) .shade-copy-break,
  #lips .shade-list--second .shade:nth-child(3) .shade-copy-break{
    display:none !important;
  }
  #lips .shade-list--second .shade:nth-child(3) h3{
    white-space:nowrap;
  }
}