@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@300;400;500;600;700&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-serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", 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-helvetica);
  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: #000;
  -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;
  width: 103px;
  height: auto;
  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 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: 1.3rem;
  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: .5rem; }
#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.3rem;
    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;
    padding-top: 5px;
  }
  #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;
  }
}

/* Removed obsolete RMK lips/base page styles. */

/* ===== SUQQU 2026 set page content/color overrides ===== */
#set {
  --set-bg: #ffffff;
  --set-panel: #ffffff;
  --set-title: #d9c9b3;
  --set-text: #342d2a;
  --set-muted: #77706b;
  --set-price: #b54a38;
  --set-nav-orange: #6f5548;
  --set-nav-main: #6f5548;
  --set-nav-sub: #6f5548;
  background: #fff;
}
#set #section-kv {
  height: auto;
  background: none;
}
#set #section-kv::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 30%;
  background: url(../images/set/set_banner.jpg) no-repeat center center / cover;
}
#set #section-1 { background: #fff; padding: 3rem 0 4rem; }
#set #section-1 .container {
  width: min(1050px, calc(100% - 4rem));
  padding: 0;
  border-radius: 0;
  background: #fff;
}
#set .set-main-title {
  margin: 0 auto 3rem;
  color: #211b18;
  font-family: var(--font-family-serif);
  font-size: 2.35rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .08em;
  text-align: center;
}
#set .prods-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 4.5rem;
  row-gap: 3.5rem;
}
#set .prod-card {
  padding-bottom: 2.5rem;
}
#set .prod-card .img-wrap { min-height: 205px; margin-bottom: 1rem; }
#set .prod-card .img-wrap > img { max-height: 205px; width: 100%; object-fit: contain; }
#set .prod-card h3 {
  color: #433a35;
  font-family: var(--font-family-serif);
  font-weight: 500;
}
#set .prod-card .price { color: #b54a38; }
#set #section-gift {
  background: #faf6f0;
  padding: 3.5rem 0 3rem;
}
#set #section-gift .container {
  width: min(1120px, calc(100% - 4rem));
  padding: 2rem 3rem 2.5rem;
  border: 1px solid #b9aa98;
}
#set #section-gift .gift-title {
  width: fit-content;
  margin: -3.2rem auto .4rem;
  padding: .15rem 3.5rem;
  border-radius: 0;
  background: #dacbb7;
  color: #584a3e;
  font-family: var(--font-family-serif);
  font-size: 2.15rem;
  font-weight: 500;
}
#set #section-gift .gift-note {
  margin: 0 0 1.5rem;
  color: #6f675f;
  font-size: .9rem;
  text-align: center;
}
#set #section-gift .gifts-row { gap: 2rem; align-items: flex-start; }
#set #section-gift .gift-item {
  width: 33.333%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
#set #section-gift .gift-item img {
  width: 100%;
  max-width: 325px;
  margin: 0 auto 1rem;
}
#set #section-gift .gift-item .condition {
  margin: 0;
  font-size: 1.15rem;
  text-align: center;
}
#set #section-gift .gift-item .condition span { font-size: 1.25rem; color: #b54a38; }
#set #section-gift .gift-item .gift-label {
  display: inline-block;
  margin: .5rem 0 0;
  padding: 0;
  color: #b54a38;
  font-size: 2rem;
  font-weight: 500;
}
#set #section-gift .gift-item .gift-label::after { display: none; }
#set #section-gift .gift-item .desc {
  display: inline-block;
  max-width: calc(100% - 2rem);
  margin: .5rem 0 0 .5rem;
  color: #77706b;
  vertical-align: top;
}
#set .disclaimer { margin-top: 2rem; }

@media screen and (max-width: 640px) {
  #set #section-kv::before { display: none; }
  #set #section-kv .mob { display: block !important; }
  #set #section-1 { padding: 2rem 0 2.5rem; }
  #set #section-1 .container { width: calc(100% - 1.5rem); padding: 0; }
  #set .set-main-title { margin-bottom: 1.5rem; font-size: 1.85rem; }
  #set .prods-grid { display: block; }
  #set .prod-card,
  #set .card3 .prod-card {
    padding: 1.15rem 0 1.35rem;
    border-bottom: 1px solid #eeeae6;
  }
  #set .prod-card .img-wrap { flex-basis: 44%; width: 44%; }
  #set .prod-card .info { padding-top: 0; }
  #set #section-gift { padding: 2.8rem 0 2.5rem; }
  #set #section-gift .container {
    width: calc(100% - 1.5rem);
    padding: 1.5rem .8rem 1.8rem;
  }
  #set #section-gift .gift-title {
    margin-top: -2.8rem;
    padding: .15rem 2rem;
    font-size: 1.8rem;
  }
  #set #section-gift .gifts-row { display: block; }
  #set #section-gift .gift-item {
    width: 100%;
    margin-bottom: 2rem;
    text-align: center;
  }
  #set #section-gift .gift-item img { max-width: 240px; }
  #set #section-gift .gift-item .desc { display: block; max-width: 100%; margin: .45rem auto 0; text-align: left; }
}


/* ===== SUQQU global header navigation overrides =====
   Shared by index.html / base.html / set.html
   Layout structure stays unchanged; only typography / colors are adjusted.
   =================================================== */
header nav a,
header nav a p,
header nav a p.brown,
#set header nav a,
#set header nav a p,
#set header nav a p.brown {
  font-family: var(--font-family-serif);
}

/* top line: SemiBold / SUQQU brown */
header nav a p.brown,
#set header nav a p.brown {
  color: #9a663a;
  font-weight: 600;
}

/* bottom line: Medium / black */
header nav a p:not(.brown),
header nav a p:not(.brown) span,
#set header nav a p:not(.brown),
#set header nav a p:not(.brown) span,
#set header nav a p:not(.brown) span:first-child,
#set header nav a p:not(.brown) span:last-child {
  color: #000;
  font-weight: 500;
}

/* keep the current item underline in the soft SUQQU beige tone */
header nav a::after,
#set header nav a::after {
  background-color: #d8c2ae;
}

header nav a:hover p.brown,
#set header nav a:hover p.brown {
  color: #9a663a;
}
header nav a:hover p:not(.brown),
header nav a:hover p:not(.brown) span,
#set header nav a:hover p:not(.brown),
#set header nav a:hover p:not(.brown) span {
  color: #000;
}

/* ===== SUQQU mobile scroll compact header =====
   下滑後：
   1. Logo bar 縮短
   2. 導覽列兩排高度縮短
   3. 前兩個選單只隱藏第三行：
      「極致進化」／「極潤新生」
   4. 第三、第四個選單文字不變
   ================================================= */
@media screen and (max-width: 640px) {
  #set,
  #set header .logo-bar,
  #set header .logo-bar img,
  #set header nav,
  #set header nav a {
    transition: height .22s ease, padding-top .22s ease, width .22s ease;
  }

  #set.header-compact {
    --set-header-mobile: 178px;
    padding-top: var(--set-header-mobile);
  }

  #set.header-compact header .logo-bar {
    height: 54px;
  }

  #set.header-compact header .logo-bar img {
    width: 100px;
  }

  #set.header-compact header nav {
    height: 124px;
    grid-template-rows: repeat(2, 62px);
  }

  #set.header-compact header nav a {
    height: 62px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* 前兩個選單：保留第1行 + 第2行，只隱藏第3行 */
  #set.header-compact header nav a:nth-child(-n+2) p:not(.brown) span:last-child {
    display: none;
  }

  /* 第3、4個選單保持原本兩行 */
  #set.header-compact header nav a:nth-child(n+3) p,
  #set.header-compact header nav a:nth-child(n+3) p span {
    display: block;
  }
}
/* ===== end SUQQU mobile scroll compact header ===== */


/* ===== set.html fixes 2026-09-04 ===== */
/* Product title underline follows every wrapped line instead of only the final line. */
#set .prod-card h3 {
  display: inline;
  position: static;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
#set .prod-card h3::after { display: none; }

/* iPhone SE / narrow phones: keep the 2 x 2 navigation inside the viewport. */
@media screen and (max-width: 390px) {
  #set header nav a {
    padding-left: 4px;
    padding-right: 4px;
  }
  #set header nav a p.brown {
    font-size: 1.05rem;
    line-height: 1.12;
  }
  #set header nav a p:not(.brown),
  #set header nav a p:not(.brown) span:last-child {
    font-size: .92rem;
    line-height: 1.12;
  }
  #set header nav a p:not(.brown) span:first-child {
    font-size: 1.12rem;
    line-height: 1.12;
  }
}
/* ===== end set.html fixes ===== */

/* VIP gifts mobile: keep description blocks centered consistently while text stays left aligned */
@media screen and (max-width: 640px) {
  #set #section-gift .gift-item .desc,
  #set #section-gift .gift-item:first-of-type .desc,
  #set #section-gift .gift-item:last-of-type .desc {
    display: table;
    width: auto;
    max-width: calc(100% - 2rem);
    margin: .45rem auto 0;
    text-align: left;
  }
}

/* set product variant notes: match approved JPG typography */
#set .prod-card h3 .variant-note {
  display: inline;
  margin-left: .12em;
  font-size: .56em;
  font-weight: 400;
  white-space: nowrap;
  vertical-align: baseline;
}
#set .prod-card .desc .scent-note {
  font-size: .78em;
  line-height: 1;
  vertical-align: .04em;
}
@media (max-width: 767px) {
  #set .prod-card h3 .variant-note { font-size: .58em; }
  #set .prod-card .desc .scent-note { font-size: .8em; }
}

/* Crystal massage set title: one line on desktop, variant note wraps only on mobile */
@media (min-width: 768px) {
  #set .prod-card:nth-child(3) .info h3 {
    white-space: nowrap;
  }
}
@media (max-width: 767px) {
  #set .prod-card:nth-child(3) .info h3 .variant-note {
    display: block;
    width: fit-content;
    margin-left: 0;
    margin-top: .28em;
    white-space: nowrap;
  }
}

/* ==========================================================
   SUQQU THE FOUNDATION e / index.html
   Page-specific styles. Shared header/navigation stays above.
========================================================== */
#foundation-page{
  --fd-ink:#392d28;
  --fd-muted:#6f625c;
  --fd-pale:#faeee5;
  --fd-pale2:#f8e6d8;
  --fd-brown:#8a4c28;
  --fd-deep:#7b3a17;
  overflow:hidden;
  background:#fff;
  color:var(--fd-ink);
  font-family:var(--font-family-noto);
}
#foundation-page img{display:block;max-width:100%;height:auto}
#foundation-page .foundation-section-inner{width:min(1120px,calc(100% - 64px));margin:0 auto}

.foundation-kv picture,.foundation-kv img{display:block;width:100%}
.foundation-kv img{object-fit:cover}

.foundation-intro{
  position:relative;
  background:#fbf1ea url("../images/base/kv_bg.jpg") center top/cover no-repeat;
  padding:62px 0 72px;
  text-align:center;
}
.foundation-intro-inner{
  position:relative;
  width:min(1100px,calc(100% - 60px));
  min-height:1030px;
  margin:0 auto;
}
.foundation-intro-copy{width:720px;max-width:68%;margin:0 auto}
.foundation-intro-title{
  font-family:var(--font-family-serif);
  color:#111;
  font-weight:500;
  letter-spacing:.04em;
}
.foundation-intro-title p{margin:0;font-size:2rem;line-height:1.55}
.foundation-brand-title{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:4px!important}
.foundation-brand-title img{width:120px;height:auto;filter:brightness(0)}
.foundation-brand-title span{display:inline-block}
.foundation-intro-lead{margin-top:38px;color:#332d2a;font-family:var(--font-family-noto)}
.foundation-intro-lead p{margin:0 0 28px;font-size:1.06rem;line-height:1.8;letter-spacing:.035em}
.foundation-intro-product{position:absolute;right:-40px;bottom:25px;width:350px}
.foundation-intro-product img{width:100%;margin:0 auto}
.foundation-product-block{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:650px;max-width:66%;text-align:center;color:#111;
}
.foundation-product-name{display:flex;flex-direction:column;gap:0px;margin:0}
.foundation-product-name span{font-family:var(--font-family-helvetica);font-size:1.2rem;letter-spacing:.01em;color:#9a928d;margin-top: 40px;}
.foundation-product-name strong{font-family:var(--font-family-serif);font-size:2rem;font-weight:500;letter-spacing:.03em}
.foundation-product-name strong .product-suqqu{font-family:var(--font-family-helvetica),"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1em;font-weight:inherit;letter-spacing:.01em;}

.foundation-release{display:inline-block;margin:26px 0 8px;padding:2px 17px;border:1px solid #222;font-size:1.2rem;color:#111}
.foundation-meta{margin:0;font-size:1.2rem;color:#111}
.foundation-shades{margin:10px 0 0;font-size:.9rem;line-height:1.6;letter-spacing:.01em;color:#2c2c2c}

.foundation-movie{background:linear-gradient(180deg,#faede4,#f8e8dc);padding:20px 0 60px}
.foundation-video{width:min(760px,100%);aspect-ratio:16/9;margin:0 auto;box-shadow:0 5px 18px rgba(59,30,17,.08);background:#111}
.foundation-video iframe{width:100%;height:100%;border:0;display:block}

.foundation-history{background:linear-gradient(90deg,#f8f7f5 0%,#f2e4dc 20%,#d8b29c 45%,#9a5630 70%,#6f2d0d 100%)}
.history-toggle{
  width:100%;min-height:86px;padding:18px 24px;
  display:flex;justify-content:center;align-items:center;gap:78px;
  background:transparent;color:#fff;border:0;border-top:1px solid rgba(255,255,255,.48);border-bottom:1px solid rgba(255,255,255,.48);
  font-family:var(--font-family-serif);font-size:1.78rem;letter-spacing:.1em;font-weight:300;
}
.history-chevron{font-size:2rem;line-height:1;transition:transform .35s ease}
.history-toggle[aria-expanded="true"] .history-chevron{transform:rotate(180deg)}
.history-panel{
  position:relative;
  min-height:min(56vw,790px);
  padding:42px 0 0;
  background:url("../images/base/history_pt.jpg") center top/100% auto no-repeat;
  overflow:hidden;
}
.history-copy{width:min(700px,52%);margin:0 auto;text-align:center;color:#fff}
.history-copy h2{font-family:var(--font-family-serif);font-size:1.8rem;line-height:1.4;font-weight:500;letter-spacing:.05em;margin:0 0 20px}
.history-copy h2 span{display:flex;justify-content:center;align-items:center;gap:12px;font-size:1.55rem}
.history-copy h2 span img{width:115px;height:auto;filter:none}
.history-copy p{font-family:var(--font-family-noto);font-size:.9rem;line-height:1.7;letter-spacing:.04em;color:#33251f}

.foundation-features{padding:72px 0 78px;background:#f7dfd0}
.foundation-feature-card{width:min(1080px,calc(100% - 70px));margin:0 auto;background:#fff;padding:72px 78px 78px;box-shadow:0 1px 0 rgba(93,51,31,.04)}
.foundation-point{display:block;padding:0;margin:0 0 78px;border:0}
.foundation-point:last-child{margin-bottom:0}
.point-label{display:table;margin:0 0 22px;padding:4px 10px;border:1px solid #c77952;color:#b26c48;font-family:var(--font-family-noto);font-size:.92rem;line-height:1.2;letter-spacing:.04em}
.foundation-point h2{display:inline;margin:0;color:#765b4c;font-size:1.32rem;line-height:1.55;font-weight:600;letter-spacing:.025em;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-skip-ink:auto;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.foundation-point h2::after{content:"";display:block;margin-bottom:24px}
.foundation-point .point-copy>p{margin:0;color:#5f5955;font-size:.94rem;line-height:1.9;letter-spacing:.01em;text-align:left}
.foundation-point .point-subtitle{margin:0 0 10px;color:#5e554f;font-size:1rem;line-height:1.7;font-weight:500;letter-spacing:.01em}
.foundation-point .point-copy-secondary{margin-top:38px}
.foundation-point .point-note{margin-top:34px!important;font-size:.82rem!important;line-height:1.8!important;text-align:center!important}
.foundation-point .point-visual{display:block;margin:34px auto 0}
.foundation-point .point-visual img{width:100%;height:auto;margin:0 auto}
.foundation-point-1 .point-visual-1{width:min(782px,92%)}
.foundation-point-1 .point-visual-2{width:min(609px,72%);margin-top:30px}
.foundation-point-2 .point-visual-3{width:min(640px,72%);margin-top:42px}
.foundation-point-3{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:78px;align-items:center}
.foundation-point-3 .point-photo{width:390px;max-width:100%;margin:0 auto}
.foundation-point-4 .point-copy{max-width:none}
.foundation-point-5 .point-visual-5{width:min(806px,94%);margin-top:30px}

.foundation-steps{background:#b77f5e;padding:58px 0 62px}
.foundation-steps-inner{width:min(1150px,calc(100% - 40px));margin:0 auto;background:#fff;padding:40px;color:#28211d}
.foundation-steps h2{text-align:center;font-family:var(--font-family-serif);font-size:2rem;font-weight:400;letter-spacing:.05em;color:#b17858;margin:0 0 30px}
.steps-layout{display:grid;grid-template-columns:378px minmax(0,1fr);gap:50px;align-items:start}
.steps-model{display:block}.steps-model img{display:block;width:100%;height:auto}
.steps-list{display:flex;flex-direction:column;gap:55px;padding-top:25px}
.step-item{display:grid;grid-template-columns:125px minmax(0,1fr);gap:22px;align-items:start;padding:0;border:0}
.step-product{display:block;width:121px;height:auto;margin:0 auto}
.step-copy{min-width:0;padding-top:2px}
.step-head{display:grid;grid-template-columns:100px minmax(0,1fr);gap:22px;align-items:start;margin-bottom:16px}
.step-no{display:flex;align-items:center;justify-content:center;width:100px;height:31px;margin:2px 0 0;border-radius:18px;background:#f0efec;font-family:var(--font-family-helvetica);font-size:1rem;letter-spacing:.04em;color:#3d3936;white-space:nowrap}
.step-name>span{display:block;margin-bottom:1px;font-family:var(--font-family-helvetica);font-size:.78rem;line-height:1.25;color:#88807c;letter-spacing:.01em}
.step-item h3{margin:0;font-family:var(--font-family-serif);font-size:1.3rem;line-height:1.35;font-weight:400;color:#af775e;letter-spacing:.02em}
.step-meta{margin:0 0 14px;font-size:.83rem;line-height:1.55;color:#2b2725}
.step-desc{margin:0;font-size:.84rem;line-height:1.7;color:#2b2725}
.step-cosmetics{margin-top:26px;font-size:.78rem;line-height:1.6;color:#2b2725}
.step-cosmetics p{margin:0}
#foundation-page + footer,#set>footer{background:#b9aaa0;color:#fff;text-align:center;padding:14px 20px;font-size:.7rem;letter-spacing:.05em}

@media (max-width:767px){
  #foundation-page .foundation-section-inner{width:calc(100% - 30px)}
  .foundation-intro{background-image:url("../images/base/kv_bgm.jpg");background-size:cover;padding:36px 0 50px}
  .foundation-intro-inner{width:calc(100% - 34px);min-height:0;display:flex;flex-direction:column}
  .foundation-intro-copy{width:100%;max-width:none;margin:0}
  .foundation-intro-title p{font-size:1.35rem;line-height:1.55;letter-spacing: 0px;}
  .foundation-brand-title{gap:11px;margin-top:4px!important}
  .foundation-brand-title img{width:96px}
  .foundation-intro-lead{margin-top:28px}
  .foundation-intro-lead p{margin-bottom:24px;font-size:.84rem;line-height:1.85}
  .foundation-intro-product{position:static;order:2;width:60%;margin:14px auto 30px}
  .foundation-product-block{position:static;order:3;transform:none;width:100%;max-width:none}
  .foundation-product-name span{font-size:.87rem}
  .foundation-product-name strong{font-size:1.45rem}
  .foundation-release{margin:23px 0 8px;font-size:.79rem;padding:4px 11px}
  .foundation-meta{font-size:.88rem}
  .foundation-shades{font-size:.72rem;line-height:1.55}

  .foundation-movie{padding:16px 0 35px}
  .foundation-video{width:100%}

  .foundation-history{background:#fbf8f5}
  .history-toggle{min-height:72px;padding:15px 18px;justify-content:space-between;gap:9px;background:#fffdfb;color:#6a3e27;border-top:0;border-bottom:1px solid #c9aa93;font-size:1.12rem;line-height:1.35;letter-spacing:.045em;white-space:nowrap}
  .history-toggle>span:nth-child(2){flex:1;text-align:center}
  .history-chevron{flex:0 0 auto;font-size:1.5rem;color:#b27b57;transform-origin:center;transition:transform .45s ease}
  .history-panel{min-height:320vw;padding:42px 0 0;background-image:url("../images/base/history_pt_m.jpg");background-size:100% auto;background-position:center top;overflow:hidden}
  .history-copy{width:calc(100% - 44px);margin:0 auto;text-align:center}
  .history-copy h2{margin:0 0 24px;color:#b27b57;font-size:1.22rem;line-height:1.58;font-weight:500;letter-spacing:.035em}
  .history-copy h2 span{display:block;font-size:1.16rem;line-height:1.6;letter-spacing:.055em}
  .history-copy p{margin:0;color:#1f1b19;font-size:.9rem;line-height:1.95;letter-spacing:.025em;font-weight:400}

  .foundation-features{padding:30px 0 34px;background:#f8e2d4}
  .foundation-feature-card{width:calc(100% - 28px);padding:30px 22px 34px;background:#fff}
  .foundation-point{display:block;margin:0 0 48px;padding:0;border:0}
  .foundation-point:last-child{margin-bottom:0}
  .point-label{margin:0 0 16px;padding:3px 8px;font-size:.72rem}
  .foundation-point h2{margin-bottom:17px;font-size:1.2rem;line-height:1.55}
  .foundation-point .point-copy>p{font-size:.95rem;line-height:1.8;text-align:left}
  .foundation-point .point-subtitle{margin-bottom:8px;font-size:.82rem;line-height:1.65}
  .foundation-point .point-copy-secondary{margin-top:30px}
  .foundation-point .point-note{margin-top:24px!important;font-size:.68rem!important;line-height:1.75!important;text-align:left!important}
  .foundation-point .point-visual{margin-top:22px}
  .foundation-point-1 .point-visual-1,.foundation-point-1 .point-visual-2,.foundation-point-2 .point-visual-3,.foundation-point-5 .point-visual-5{width:100%;max-width:none}
  .foundation-point-3{display:flex;flex-direction:column;gap:20px;align-items:stretch}
  .foundation-point-3 .point-photo{width:100%;max-width:none}

  .foundation-steps{padding:34px 0;background:#b77f5e}
  .foundation-steps-inner{width:calc(100% - 28px);padding:38px 24px 42px}
  .foundation-steps h2{font-size:1.45rem;line-height:1.45;margin-bottom:30px;letter-spacing:.03em}
  .steps-layout{display:flex;flex-direction:column;gap:42px}
  .steps-model{width:100%}.steps-model img{width:100%}
  .steps-list{gap:46px;padding-top:0}
  .step-item{display:flex;flex-direction:column;gap:17px;padding:0;border:0}
  .step-product{width:121px;margin:0 auto}
  .step-copy{width:100%;padding:0}
  .step-head{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:18px}
  .step-no{width:88px;height:29px;margin:0;font-size:.84rem}
  .step-name>span{font-size:.72rem;line-height:1.25;margin-bottom:2px}
  .step-item h3{font-size:1.2rem;line-height:1.35}
  .step-meta{font-size:.95rem;line-height:1.65;margin-bottom:10px}
  .step-desc{font-size:.95rem;line-height:1.75}
  .step-cosmetics{margin-top:24px;font-size:.76rem;line-height:1.7}
}

@media (max-width:375px){
  .history-toggle{font-size: 1.3rem;gap:8px;letter-spacing: 0;color: #6a3e27;font-weight: 600;}
  .foundation-feature-card{padding-left:19px;padding-right:19px}
  .foundation-steps-inner{padding-left:20px;padding-right:20px}
  .step-head{grid-template-columns:82px minmax(0,1fr);gap:12px}
  .step-no{width:82px;font-size:.8rem}
}

/* v39 foundation intro/movie grouping + closed history behavior */
.foundation-intro{padding-bottom:0}
.foundation-movie{background:transparent;padding:18px 0 54px}
.history-panel{min-height:0!important;height:0;opacity:0;padding-top:0!important;background-position:center top;overflow:hidden}
.history-panel.is-open{min-height:min(56vw,790px)!important;padding-top:42px!important}
.history-toggle[aria-expanded="false"] .history-chevron{animation:historyHint 1.25s ease-in-out infinite}
.history-toggle[aria-expanded="true"] .history-chevron{animation:none}
@keyframes historyHint{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:767px){
  .foundation-intro{padding-bottom:0}
  .foundation-intro-inner{padding-bottom:12px}
  .foundation-movie{padding:10px 0 30px}
  .history-panel{min-height:0!important;padding-top:0!important}
  .history-panel.is-open{min-height:320vw!important;padding-top:42px!important}
}

/* v40: intro/movie one visual section + compact intro/product + true collapsed history */
.foundation-intro{
  background:#fbf1ea url("../images/base/kv_bg.jpg") center top/cover no-repeat;
  padding:54px 0 48px;
}
.foundation-intro-inner{min-height:760px}
.foundation-intro-lead{margin-top:28px}
.foundation-intro-lead p{margin-bottom:20px}
.foundation-intro-product{right:-10px;bottom:0;width:330px}
.foundation-product-block{bottom:8px}
.foundation-movie{background:transparent;padding:0 0 34px;margin-top:-6px}

.foundation-history{background:transparent}
.history-toggle{background:linear-gradient(90deg, #f8f7f5 0%, #f2e4dc 20%, #ae8771 45%, #623112 70%, #653113 100%)}
.history-panel,
.history-panel.is-open{min-height:0!important;padding-top:0!important}
.history-panel{height:0!important;opacity:0;background-image:none!important;overflow:hidden}
.history-panel.is-open{height:auto!important;opacity:1;background-image:url("../images/base/history_pt.jpg")!important;padding-top:42px!important;min-height:min(60vw,580px)!important}

@media(max-width:767px){
  .foundation-intro{padding:30px 0 30px;background-image:url("../images/base/kv_bgm.jpg")}
  .foundation-intro-inner{min-height:0;padding-bottom:0}
  .foundation-intro-lead{margin-top:22px}
  .foundation-intro-lead p{margin-bottom:18px}
  .foundation-intro-product{margin:8px auto 14px}
  .foundation-product-block{margin-top:0}
  .foundation-movie{padding:4px 0 24px;margin-top:0}
  .history-toggle{background:#fffdfb}
  .history-panel.is-open{background-image:url("../images/base/history_pt_m.jpg")!important;min-height:310vw!important;padding-top:42px!important}
}


/* v42: natural intro/product flow + history toggle SUQQU logo */
.foundation-intro-inner{
  min-height:0!important;
  display:block!important;
}
.foundation-intro-copy{
  position:relative;
  z-index:2;
}
.foundation-product-row{
  width:min(980px,100%);
  margin:20px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:30px;
  align-items:end;
}
.foundation-product-block{
  position:static!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  align-self:end;
}
.foundation-intro-product{
  position:static!important;
  width:330px!important;
  margin:0!important;
  align-self:end;
}
.history-toggle-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-width:0;
}
.history-toggle-label img{
  display:block;
  width:122px;
  height:auto;
  filter:brightness(0) invert(1);
}
.history-copy h2 .history-title-line{display:flex;justify-content:center;align-items:center;gap:12px}
.history-copy h2 .history-title-line img{width:105px;height:auto;filter:none; margin-top: 5px;}
.history-copy h2 .history-title-line em{font:inherit;font-style:normal}

@media(max-width:767px){
  .foundation-intro-inner{display:block!important}
  .foundation-product-row{
    width:100%;
    margin:8px auto 0;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;
  }
  .foundation-intro-product{
    order:1;
    width:min(72%,330px)!important;
    margin:20px 14px 14px 14px !important;
  }
  .foundation-product-block{
    order:2;
    width:100%!important;
    margin:0 auto!important;
  }
  .history-toggle-label{
    flex:1;
    gap:8px;
    white-space:nowrap;
  }
  .history-toggle-label img{
    width:76px;
    filter:none;
  }
  .history-copy h2 .history-title-line{gap:8px;white-space:nowrap}
  .history-copy h2 .history-title-line img{width:82px}
}

@media(max-width:375px){
  .history-toggle-label{gap:5px}
  .history-toggle-label img{width:66px}
}

/* v43: foundation product flow, movie spacing, history arrow/logo tone */
@media (min-width:768px){
  .foundation-product-row{
    position:relative;
    width:min(980px,100%);
    margin:18px auto 0;
    display:block!important;
    min-height:300px;
  }
  .foundation-product-block{
    position:relative!important;
    z-index:2;
    width:650px!important;
    max-width:66%!important;
    margin:0 auto!important;
    text-align:center;
  }
  .foundation-intro-product{
    position:absolute!important;
    right:-100px!important;
    bottom:0!important;
    width:330px!important;
    margin:0!important;
    z-index:1;
    pointer-events:none;
  }
  .foundation-movie{
    padding-top:56px!important;
  }
}

.history-chevron{
  display:inline-block;
  transform:none!important;
}
.history-toggle[aria-expanded="false"] .history-chevron{
  transform:none!important;
}
.history-toggle[aria-expanded="true"] .history-chevron{
  transform:rotate(180deg)!important;
}

@media(max-width:767px){
  .foundation-movie{
    padding-top:34px!important;
  }
  .history-toggle-label img,
  .history-copy h2 .history-title-line img{
    filter:brightness(0) saturate(100%) invert(26%) sepia(20%) saturate(1249%) hue-rotate(338deg) brightness(90%) contrast(88%)!important;
  }
}

/* v44: desktop history panel responsive open height */
@media (min-width:768px) and (max-width:1199px){
  .history-panel.is-open{
    min-height:520px!important;
    background-size:cover!important;
    background-position:center center!important;
  }
}
@media (min-width:1200px) and (max-width:1599px){
  .history-panel.is-open{
    min-height:43vw!important;
  }
}
@media (min-width:1600px){
  .history-panel.is-open{
    min-height:44vw!important;
  }
}


/* v45: SVG history chevrons + feature label spacing */
.history-chevron{
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  transform:none!important;
  transform-origin:center;
  transition:transform .4s ease!important;
}
.history-chevron img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.history-toggle[aria-expanded="false"] .history-chevron{
  transform:none!important;
  animation:historyChevronHint 1.25s ease-in-out infinite!important;
}
.history-toggle[aria-expanded="true"] .history-chevron{
  transform:rotate(180deg)!important;
  animation:none!important;
}
@keyframes historyChevronHint{
  0%,100%{translate:0 0}
  50%{translate:0 5px}
}
.point-label{
  margin-bottom:30px!important;
}
@media(max-width:767px){
  .history-chevron{width:18px;height:18px}
  .point-label{margin-bottom:22px!important}
}
@media (prefers-reduced-motion: reduce){
  .history-toggle[aria-expanded="false"] .history-chevron{animation:none!important}
}

/* v46: history hover + feature labels + note alignment */
.history-toggle{
  transition:filter .3s ease, box-shadow .3s ease, transform .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .history-toggle:hover{
    filter:brightness(1.035);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 14px rgba(80,45,25,.12);
  }
  .history-toggle:hover .history-chevron{
    animation:historyChevronHover .7s ease-in-out infinite alternate!important;
  }
  .history-toggle[aria-expanded="true"]:hover .history-chevron{
    animation:historyChevronHoverOpen .7s ease-in-out infinite alternate!important;
  }
}
@keyframes historyChevronHover{
  from{translate:0 0}
  to{translate:0 4px}
}
@keyframes historyChevronHoverOpen{
  from{translate:0 0}
  to{translate:0 -4px}
}
.point-label{
  display:inline-block!important;
  width:auto!important;
  padding:5px 10px 4px!important;
  border:1px solid #c77952!important;
  color:#b26c48!important;
  background:transparent!important;
  font-size:1rem!important;
  line-height:1.2!important;
  letter-spacing:.02em!important;
  font-weight:500!important;
  margin:0 0 30px!important;
}
.foundation-point .point-note{
  text-align:left!important;
}
@media(max-width:767px){
  .point-label{
    padding:4px 8px 3px!important;
    font-size:.82rem!important;
    margin-bottom:22px!important;
  }
}

/* v47: history hover text scale + logo offset + feature labels on own row */
.history-toggle-label{
  transition:transform .3s ease;
  transform-origin:center;
}
.history-toggle-label img{
  margin-top:4px;
}
@media (hover:hover) and (pointer:fine){
  .history-toggle:hover .history-toggle-label{
    transform:scale(1.045);
  }
}
.foundation-point-1 .point-label,
.foundation-point-2 .point-label,
.foundation-point-3 .point-label,
.foundation-point-4 .point-label{
  display:block!important;
  width:max-content!important;
  max-width:100%;
  clear:both;
}
.foundation-point-1 .point-copy h2,
.foundation-point-2 .point-copy h2,
.foundation-point-3 .point-copy h2,
.foundation-point-4 .point-copy h2{
  display:block!important;
  width:100%;
  clear:both;
}

/* v48: desktop white history chevrons + all feature labels own row */
.foundation-point-1 .point-label,
.foundation-point-2 .point-label,
.foundation-point-3 .point-label,
.foundation-point-4 .point-label,
.foundation-point-5 .point-label{
  display:block!important;
  width:max-content!important;
  max-width:100%;
  clear:both;
}
.foundation-point-1 .point-copy h2,
.foundation-point-2 .point-copy h2,
.foundation-point-3 .point-copy h2,
.foundation-point-4 .point-copy h2,
.foundation-point-5 .point-copy h2{
  display:block!important;
  width:100%;
  clear:both;
}
@media(min-width:768px){
  .history-chevron img{
    filter:brightness(0) invert(1)!important;
  }
}

/* Foundation feature section: faster AOS entrance */
.foundation-feature-card [data-aos] {
  transition-duration: .75s !important;
}

/* v17: iPad foundation point 3 40/60 + steps stacked */
@media (min-width:768px) and (max-width:1199px){
  .foundation-point-3{
    display:grid;
    grid-template-columns:minmax(0,4fr) minmax(0,6fr);
    gap:36px;
    align-items:center;
  }
  .foundation-point-3 .point-photo{
    width:100%;
    max-width:none;
    margin:0;
  }

  .steps-layout{
    display:flex;
    flex-direction:column;
    gap:42px;
  }
  .steps-model{
    width:100%;
  }
  .steps-model img{
    width:100%;
    height:auto;
  }
  .steps-list{
    width:100%;
    padding-top:0;
  }
}


/* v48: note markers, hanging note indent, mobile line-break adjustments */
.note-mark{
  font-size:.62em;
  line-height:0;
  vertical-align:super;
  margin-left:.05em;
}
.foundation-point .point-note p{
  margin:0;
  padding-left:2.2em;
  text-indent:-2.2em;
}
.foundation-point .point-note p + p{margin-top:.2em;}
.cosmetics-lip{display:inline;}
@media(max-width:767px){
  .step-desc-break{display:none;}
  .cosmetics-lip{display:block;}
}

/* ===== v54: mobile navigation overflow fix ===== */
@media screen and (max-width: 640px) {
  #set header nav {
    overflow: hidden;
  }

  #set header nav a {
    min-width: 0;
    overflow: hidden;
    padding-left: 6px;
    padding-right: 6px;
  }

  #set header nav a p,
  #set header nav a p.brown,
  #set header nav a p:not(.brown),
  #set header nav a p span {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  #set header nav a p.brown {
    font-size: 1.08rem;
    line-height: 1.12;
    letter-spacing: 0;
  }

  #set header nav a p:not(.brown),
  #set header nav a p:not(.brown) span:last-child {
    font-size: .95rem;
    line-height: 1.12;
  }

  #set header nav a p:not(.brown) span:first-child {
    font-size: 1.14rem;
    line-height: 1.12;
  }
}

@media screen and (max-width: 390px) {
  #set header nav a {
    padding-left: 3px;
    padding-right: 3px;
  }
  #set header nav a p.brown {
    font-size: 1rem;
  }
  #set header nav a p:not(.brown) span:first-child {
    font-size: 1.08rem;
  }
  #set header nav a p:not(.brown),
  #set header nav a p:not(.brown) span:last-child {
    font-size: .9rem;
  }
}
/* ===== end v54 ===== */

/* mobile-only heading line breaks */
.mobile-br{display:none;}
@media (max-width:767px){.mobile-br{display:block;}}

/* ===== AQUFONS page — FINAL CLEAN ===== */
#aqufons-page .aqufons-kv img{display:block;width:100%;height:auto;}
#aqufons-page .aqufons-product-image{text-align:center;}
#aqufons-page .aqufons-product-name{margin:0 0 .65rem;color:#27324b;text-align:left;}
#aqufons-page .aqufons-step>img{display:block;max-width:110px;max-height:145px;margin:auto;object-fit:contain;}
#aqufons-page .step-tag{color:#8ba0ca;font-family:var(--font-family-helvetica);font-size:.9rem;line-height:1.35;text-align:center;}
#aqufons-page .aqufons-step span{color:#8293b6;font-family:var(--font-family-helvetica);font-size:.7rem;}
#aqufons-page .aqufons-step h3{margin:.2rem 0;color:#3c4b68;font-size:1rem;font-weight:500;}
#aqufons-page .aqufons-step p{margin:0 0 .6rem;color:#68758e;font-size:.78rem;line-height:1.7;}
#aqufons-page .aqufons-intro h1{margin:0 0 2rem;color:#111;font-family:var(--font-family-serif);font-size:1.75rem;font-weight:500;letter-spacing:.08em;line-height:1.65;}
#aqufons-page .aqufons-intro-copy p{margin:0 0 1.35rem;}
#aqufons-page .aqufons-intro h2{display:inline-block;margin:1.1rem 0 1.7rem;padding:.25rem .8rem;background:#eef2fa;color:#5b6f9d;font-family:var(--font-family-serif);font-size:1.35rem;font-weight:500;letter-spacing:.04em;}
#aqufons-page .aqufons-intro-products p{margin:0 0 .85rem;}
#aqufons-page .aqufons-intro-products strong{display:block;color:#111;font-size:1.25rem;font-weight:400;line-height:1.45;}
#aqufons-page .aqufons-intro-products span{display:block;color:#888;font-family:var(--font-family-helvetica);font-size:.75rem;line-height:1.5;}
@media (max-width:640px){
#aqufons-page .aqufons-intro{padding:3rem 1.2rem 4rem;}
#aqufons-page .aqufons-intro-inner{max-width:100%;}
#aqufons-page .aqufons-intro h1{margin-bottom:1.8rem;font-size:1.45rem;line-height:1.65;letter-spacing:.05em;}
#aqufons-page .aqufons-intro-copy{font-size:.9rem;line-height:2.05;}
#aqufons-page .aqufons-intro-copy p{margin-bottom:1.35rem;letter-spacing: 0;}
#aqufons-page .aqufons-intro-copy br{display:none;}
#aqufons-page .aqufons-intro h2{margin-top:1rem;font-size:1.2rem;}
#aqufons-page .aqufons-intro-products strong{font-size: 1.35rem;}
#aqufons-page .aqufons-intro-products span{font-size:.7rem;}
}
#aqufons-page .aqufons-intro h1,
#aqufons-page .aqufons-intro h2,
#aqufons-page .aqufons-intro-products strong,
#aqufons-page .aqufons-product-name strong,
#aqufons-page .aqufons-common h2,
#aqufons-page .aqufons-steps h2{font-family:var(--font-family-serif);}
#aqufons-page .aqufons-products{padding:4.5rem 0 0;background:url("../images/AQUFONS/Back-gradation.jpg") center top/cover no-repeat;}
#aqufons-page .aqufons-panel{width:min(1060px,calc(100% - 4rem));margin:auto;padding:4.8rem 5.5rem 3.7rem;background:#fff;}
#aqufons-page .aqufons-product{display:grid;grid-template-columns:minmax(0,1.55fr) 280px;gap:4.2rem;align-items:start;padding:0 0 4rem;padding-bottom:4.3rem;}
#aqufons-page .aqufons-product-2{grid-template-columns:310px minmax(0,1.45fr);padding:4.3rem 0 0;border-top:1px solid #d7dce7;gap:5rem;align-items:center;}
#aqufons-page .aqufons-product-image img{display:block;max-width:100%;max-height:none;width:100%;height:auto;margin:auto;object-fit:contain;}
#aqufons-page .aqufons-product-1 .aqufons-product-image{padding-top:.2rem;}
#aqufons-page .aqufons-product-2 .aqufons-product-image{padding:0 1rem;}
#aqufons-page .aqufons-product-name > span{display:block;margin-bottom:.3rem;color:#6479a8;font-family:var(--font-family-helvetica);font-size:.78rem;letter-spacing:.02em;line-height:1.4;}
#aqufons-page .aqufons-product-name strong{display:block;color:#111;font-family:var(--font-family-serif);font-size:1.7rem;font-weight:500;letter-spacing:.02em;line-height:1.45;}
#aqufons-page .aqufons-meta{margin:.1rem 0 1.45rem;color:#333;font-size:.82rem;}
#aqufons-page .aqufons-lead{margin:0 0 1.8rem;color:#566b9d;font-size:1.12rem;line-height:1.75;margin-bottom:1.15rem;font-family:var(--font-family-serif);}
#aqufons-page .aqufons-body{margin:0 0 1.9rem;color:#444;font-size:.82rem;line-height:1.9;}
#aqufons-page .aqufons-feature{margin:1.65rem 0 0;color:#3f4b67;}
#aqufons-page .aqufons-feature b{display:inline-block;margin-right:.6rem;padding:.1rem .5rem;background:#515a9b;color:#fff;font-size:1rem;font-weight:500;vertical-align:middle;}
#aqufons-page .aqufons-feature h3{display:inline;color:#4f6396;font-size:.9rem;font-weight:600;line-height:1.8;}
#aqufons-page .aqufons-feature p{margin:.55rem 0 0;font-size:.8rem;line-height:1.9;color:#444;}
#aqufons-page .aqufons-detail{display:block;grid-template-columns:1.45fr 1fr;gap:4rem;align-items:center;padding-top:2.5rem;border-top:1px solid #d7dce7;width:min(1060px,calc(100% - 4rem));margin:0 auto;padding:0;border:0;background:url("../images/AQUFONS/Back-gradation.jpg") center/cover no-repeat;}
#aqufons-page .aqufons-detail-inner{padding:3.3rem 5.5rem 4.2rem;}
#aqufons-page .aqufons-detail-copy{margin-left:-5.5rem;padding:0;background:none;margin:0;}
#aqufons-page .aqufons-detail-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3.8rem;align-items:center;margin:.9rem 0 1.3rem;}
#aqufons-page .aqufons-detail h4{margin:1.25rem 0 .3rem;color:#444;font-size:.82rem;font-weight:500;line-height:1.7;position:relative;padding-left:1.15rem;text-decoration:underline;text-underline-offset:.18em;}
#aqufons-page .aqufons-detail h4::before{content:"";position:absolute;left:0;top:.62em;width:.62rem;height:.62rem;border-radius:50%;background:#515a9b;}
#aqufons-page .aqufons-detail-text h4{margin-top:0;}
#aqufons-page .aqufons-detail .aqufons-feature>p{margin:.25rem 0 0;}
#aqufons-page .aqufons-membrane{margin:0;}
#aqufons-page .aqufons-membrane img{width:100%;height:auto;display:block;max-width:390px;margin:auto;}
#aqufons-page .aqufons-detail-feature2{margin-top:2.5rem;}
#aqufons-page .aqufons-common{padding:3.2rem 0 0;background:url("../images/AQUFONS/Back-gradation.jpg") center/cover no-repeat;}
#aqufons-page .aqufons-common-inner{width:min(1060px,calc(100% - 4rem));margin:auto;padding:3.7rem 5.5rem 2.2rem;background:#fff;text-align:center;}
#aqufons-page .aqufons-common h2{margin:0 0 .7rem;color:#536aa1;font-family:var(--font-family-serif);font-size:1.65rem;font-weight:500;letter-spacing:.05em;}
#aqufons-page .aqufons-common-sub{margin:0 0 1.6rem;color:#222;font-size:1rem;font-family:var(--font-family-serif);}
#aqufons-page .aqufons-common-inner>p:not(.aqufons-common-sub){font-size:.88rem;line-height:1.9;max-width:760px;margin:0 auto;color:#333;text-align:left;}
#aqufons-page .aqufons-common-points{margin:1.6rem auto 0;max-width:760px;text-align:left;margin-top:.8rem;}
#aqufons-page .aqufons-common-points p{margin:.5rem 0;font-size:.86rem;line-height:1.7;color:#333;}
#aqufons-page .aqufons-common-points span{display:inline-block;margin-right:.6rem;padding:.05rem .5rem;background:#e4e7ee;color:#333;font-size:.78rem;font-family:var(--font-family-serif);}
#aqufons-page .aqufons-steps{padding:0 0 4.5rem;background:url("../images/AQUFONS/Back-gradation.jpg") center bottom/cover no-repeat;}
#aqufons-page .aqufons-steps-inner{width:min(1060px,calc(100% - 4rem));margin:auto;padding:1rem 5.5rem 4rem;background:#fff;}
#aqufons-page .aqufons-steps h2{width:48%;margin:0 auto 2.8rem;padding:.6rem 1rem;background:#dce7f7;color:#6077ac;font-family:var(--font-family-serif);font-size:1.25rem;font-weight:500;text-align:center;}
#aqufons-page .aqufons-step-list{max-width:760px;margin:auto;}
#aqufons-page .aqufons-step{display:grid;grid-template-columns:150px 150px minmax(0,1fr);gap:1.6rem;align-items:center;min-height:175px;padding:1.5rem 2rem 1.5rem 0;border:1px solid #e4e9f2;border-radius:38px;background:#fff;position:relative;border-color:#e0e5ed;overflow:hidden;}
#aqufons-page .aqufons-step.special{grid-template-columns:150px 150px minmax(0,1fr);}
#aqufons-page .step-label{width:120px!important;max-width:none!important;max-height:none!important;margin:0!important;align-self:center;}
#aqufons-page .step-product-img{width:105px!important;max-width:105px!important;max-height:145px!important;}
#aqufons-page .step-products{display:flex;align-items:center;justify-content:center;gap:.15rem;flex-direction:column;}
#aqufons-page .step-products img{width:62px;height:92px;object-fit:contain;}
#aqufons-page .step-products em{font-size:.85rem;font-style:normal;color:#222;}
#aqufons-page .step-copy h3{margin:0;color:#111;font-family:var(--font-family-serif);font-size: 1.5rem;font-weight:500;line-height:1.4;}
#aqufons-page .step-copy h3~h3{margin-top:2.25rem;}
#aqufons-page .step-copy span{display:block;margin: 0 0 0.2rem 0;color:#888;font-family:var(--font-family-helvetica);font-size: .88rem;}
#aqufons-page .step-copy .step-meta{margin:0 0 .45rem;color:#333;font-size:.72rem;}
#aqufons-page .step-copy p{margin:0;color:#6075a5;font-size:.9rem;line-height:1.7;letter-spacing:.01em;}
#aqufons-page{background:#f3f6fc url("../images/AQUFONS/Back-gradation.jpg") center top/100% auto repeat-y;color:#27324b;font-family:var(--font-family-noto);}
#aqufons-page .aqufons-products,
#aqufons-page .aqufons-common,
#aqufons-page .aqufons-steps{background:transparent!important;}
#aqufons-page .aqufons-panel,
#aqufons-page .aqufons-common-inner,
#aqufons-page .aqufons-steps-inner{position:relative;z-index:1;}
#aqufons-page .aqufons-arrow{height:58px;color:#5268a3;font-size:0;line-height:normal;text-align:center;font-weight:700;display:flex;align-items:center;justify-content:center;}
#aqufons-page .aqufons-arrow img{display:block;width:30px;height:auto;}
#aqufons-page .aqufons-step.step1{min-height:310px;padding-top:2rem;padding-bottom:2rem;}
#aqufons-page .aqufons-step.step1 .step-products{gap:.45rem;}
#aqufons-page .aqufons-step.step1 .step-products img{width:105px;height:125px;object-fit:contain;}
#aqufons-page .aqufons-step.step1 .step-products em{margin:.05rem 0;font-size:1rem;}
#aqufons-page .aqufons-kv{background:none!important;position:relative;z-index:0;isolation:isolate;overflow:hidden;box-sizing:border-box;min-height:auto;padding-top:min(52.8vw,1320px);}
#aqufons-page .aqufons-kv>picture{display:none!important;}
#aqufons-page .aqufons-kv::before{content:"";position:absolute;z-index:-1;inset:0;background:url("../images/AQUFONS/kv.jpg") center top/100% auto no-repeat;transform-origin:center top;animation:aqufonsKvReveal 2.2s cubic-bezier(.22,.61,.36,1) both;will-change:transform,filter,opacity;}
#aqufons-page .aqufons-intro{padding:0 1.5rem 5.5rem!important;background:transparent!important;text-align:center;position:relative;z-index:1;margin-top:-7.5rem;padding-top:8rem;margin:0!important;}
#aqufons-page .aqufons-intro-inner{max-width:760px;margin:0 auto;}
@keyframes aqufonsKvReveal{0%{opacity:0;filter:blur(16px);transform:scale(1.075);}
  35%{opacity:1;filter:blur(9px);}
  100%{opacity:1;filter:blur(0);transform:scale(1);}}
#aqufons-page .aqufons-intro-inner > *{opacity:0;transform:translateY(24px);filter:blur(5px);animation:aqufonsIntroIn .9s cubic-bezier(.22,.61,.36,1) forwards;will-change:transform,filter,opacity;}
#aqufons-page .aqufons-intro-inner > h1{animation-delay:1.55s;}
#aqufons-page .aqufons-intro-copy{color:#555;font-family:var(--font-family-serif);font-size:.94rem;line-height:2;animation-delay:1.78s;}
#aqufons-page .aqufons-intro-inner > h2{animation-delay:2.02s;}
#aqufons-page .aqufons-intro-products{animation-delay:2.22s;}
#aqufons-page .aqufons-release{display:inline-block;margin:1rem 0 0;padding:.25rem .8rem;border:1px solid #333;color:#222;font-size: .98rem;letter-spacing:.04em;animation-delay:2.42s;}
@keyframes aqufonsIntroIn{to{opacity:1;transform:translateY(0);filter:blur(0);}}
#aqufons-page .aqufons-ref{display:inline-block;position:relative;top:-.05em;margin-left:.08em;font-family:inherit;font-size:.55em;line-height:1;vertical-align:super;}
#aqufons-page .aqufons-mobile-break{display:none;}
@media (prefers-reduced-motion:reduce){
#aqufons-page .aqufons-kv::before,
  #aqufons-page .aqufons-intro-inner > *{animation:none!important;opacity:1!important;filter:none!important;transform:none!important;}
}
#aqufons-page .aqufons-intro-products .aqufons-suqqu{display:inline;font-family:var(--font-family-helvetica),"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;letter-spacing:.01em;font-size:1em;line-height:inherit;color:inherit;}
#aqufons-page .aqufons-notes{margin-top:1.4rem!important;color:#666!important;font-size:.67rem!important;line-height:1.7!important;padding-left:0!important;text-indent:0!important;}
#aqufons-page .aqufons-note-line{display:block;padding-left:1.65em;text-indent:-1.65em;}
@media screen and (max-width:640px){
#aqufons-page .aqufons-step>img{max-width:70px;max-height:115px;}
#aqufons-page .step-tag{font-size:.72rem;}
#aqufons-page .aqufons-step h3{font-size:.84rem;}
#aqufons-page .aqufons-step p{font-size:.7rem;}
#aqufons-page .step-products{gap:.1rem;}
#aqufons-page .aqufons-products{padding:1rem 0 0;background:url("../images/AQUFONS/Back-gradation.jpg") center top/auto 100% no-repeat;}
#aqufons-page .aqufons-panel{width:calc(100% - 1.4rem);padding:2rem 1.25rem 1.7rem;}
#aqufons-page .aqufons-product{display:flex;flex-direction:column;gap:1.1rem;padding-bottom:2.5rem;}
#aqufons-page .aqufons-product-1 .aqufons-product-image{order:-1;padding:0 2.3rem .5rem;}
#aqufons-page .aqufons-product-2{display:flex;flex-direction:column;gap:1.1rem;padding:2.5rem 0 .5rem;}
#aqufons-page .aqufons-product-2 .aqufons-product-image{padding:0 2.8rem .5rem;}
#aqufons-page .aqufons-product-image img{max-height:none;max-width:100%;}
#aqufons-page .aqufons-product-name > span{font-size: .8rem;}
#aqufons-page .aqufons-product-name strong{font-size: 1.8rem;line-height:1.5;}
#aqufons-page .aqufons-meta{font-size: .95rem;margin-bottom:1rem;}
#aqufons-page .aqufons-lead{font-size: 1.1rem;line-height:1.75;margin-bottom:.9rem;}
#aqufons-page .aqufons-body{font-size: .9rem;line-height:1.85;margin-bottom:1.4rem;letter-spacing: 0;}
#aqufons-page .aqufons-feature{margin-top:1.35rem;}
#aqufons-page .aqufons-product-copy .aqufons-feature,
#aqufons-page .aqufons-detail-copy .aqufons-detail-feature2{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.6rem;align-items:start;}
#aqufons-page .aqufons-product-copy .aqufons-feature b,
#aqufons-page .aqufons-detail-copy .aqufons-detail-feature2 b{grid-column:1;grid-row:1;margin-right:0;}
#aqufons-page .aqufons-product-copy .aqufons-feature h3,
#aqufons-page .aqufons-detail-copy .aqufons-detail-feature2 h3{grid-column:2;grid-row:1;display:block;}
#aqufons-page .aqufons-product-copy .aqufons-feature p,
#aqufons-page .aqufons-detail-copy .aqufons-detail-feature2 p{grid-column:1/-1;}
#aqufons-page .aqufons-mobile-break{display:block;}
#aqufons-page .aqufons-heading-continuation{padding-left:.5em;}
#aqufons-page .aqufons-feature b{font-size:.95rem;line-height:1.35;padding:.16rem .62rem;vertical-align:middle;}
#aqufons-page .aqufons-feature h3{font-size:1.08rem;line-height:1.65;letter-spacing:.015em;font-weight:500;vertical-align:middle;}
#aqufons-page .aqufons-feature p{font-size:.88rem;line-height:2;letter-spacing:.01em;color:#444;}
#aqufons-page .aqufons-detail{display:block;padding-top:0;width:calc(100% - 1.4rem);margin:0 auto;background:url("../images/AQUFONS/Back-gradation.jpg") center/cover no-repeat;}
#aqufons-page .aqufons-detail-inner{padding:2.15rem 1.25rem 2.6rem;}
#aqufons-page .aqufons-detail-copy{margin:0;padding:0;background:none;}
#aqufons-page .aqufons-detail-grid{display:flex;flex-direction:column;gap:1.05rem;margin:1.15rem 0 1.9rem;}
#aqufons-page .aqufons-detail-text{width:100%;}
#aqufons-page .aqufons-detail-text p br{display:none;}
#aqufons-page .aqufons-membrane{order:2;width:100%;margin:.55rem auto .75rem;text-align:center;}
#aqufons-page .aqufons-membrane img{width:78%;max-width:330px;padding:.35rem 0;}
#aqufons-page .aqufons-detail h4{font-size:.98rem;line-height:1.7;margin:1.45rem 0 .45rem;padding-left:1.15rem;}
#aqufons-page .aqufons-detail-feature2{margin-top:2.5rem;}
#aqufons-page .aqufons-common{padding:1rem 0 0;background:url("../images/AQUFONS/Back-gradation.jpg") center/cover no-repeat;}
#aqufons-page .aqufons-common-inner{width:calc(100% - 1.4rem);padding:2.5rem 1.2rem 1.5rem;}
#aqufons-page .aqufons-common h2{font-size:1.45rem;line-height:1.45;}
#aqufons-page .aqufons-common h2 .common-bracket{display:none;}
#aqufons-page .aqufons-common h2 .common-mobile-break{display:inline;}
#aqufons-page .aqufons-common-sub{font-size:1rem;line-height:1.6;}
#aqufons-page .aqufons-common-inner>p:not(.aqufons-common-sub){width:100%;text-align:left;font-size:.84rem;line-height:1.8;margin-left:0;margin-right:0;max-width:none;}
#aqufons-page .aqufons-common-points p{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:.6rem;align-items:start;font-size:.82rem;line-height:1.65;padding-left:0;text-indent:0;}
#aqufons-page .aqufons-common-points span{width:auto;margin-right:0;text-align:center;text-indent:0;white-space:nowrap;}
#aqufons-page .aqufons-steps{padding:0 0 2.8rem;background:url("../images/AQUFONS/Back-gradation.jpg") center bottom/cover no-repeat;}
#aqufons-page .aqufons-steps-inner{width:calc(100% - 1.4rem);padding:1rem 1rem 2.8rem;}
#aqufons-page .aqufons-steps h2{width:100%;font-size: 1.45rem;margin-bottom:2rem;padding:.7rem .5rem;}
#aqufons-page .aqufons-step{grid-template-columns:88px 76px minmax(0,1fr);gap:.55rem;min-height:165px;padding:1.15rem .65rem 1.15rem 0;border-radius:28px;}
#aqufons-page .aqufons-step.special{grid-template-columns:88px 76px minmax(0,1fr);}
#aqufons-page .step-label{width:70px!important;}
#aqufons-page .step-product-img{width:64px!important;max-width:64px!important;max-height:120px!important;}
#aqufons-page .step-products img{width:48px;height:82px;}
#aqufons-page .step-products em{font-size:.78rem;}
#aqufons-page .step-copy h3{font-size: 1.02rem;line-height:1.35;}
#aqufons-page .step-copy h3~h3{margin-top:1.35rem;}
#aqufons-page .step-copy span{font-size:.56rem;line-height:1.25;}
#aqufons-page .step-copy .step-meta{font-size:.63rem;margin-bottom:.3rem;}
#aqufons-page .step-copy p{font-size:.76rem;line-height:1.62;letter-spacing:0;}
#aqufons-page{background-size:auto 100%;}
#aqufons-page .aqufons-arrow{height:58px;font-size:2.25rem;line-height:48px;}
#aqufons-page .aqufons-arrow img{width:28px;}
#aqufons-page .aqufons-step.step1{min-height:300px;padding-top:1.4rem;padding-bottom:1.4rem;}
#aqufons-page .aqufons-step.step1 .step-products img{width:64px;height:105px;}
#aqufons-page .aqufons-step.step1 .step-products em{font-size:.85rem;}
#aqufons-page .aqufons-kv::before{background-image:url("../images/AQUFONS/kv_m.jpg");}
#aqufons-page .aqufons-intro{margin-top:-4.5rem;padding-top:5.2rem;background:transparent!important;margin:0!important;padding:0 1.2rem 4.5rem!important;}
#aqufons-page .aqufons-intro h1{letter-spacing:.015em;}
#aqufons-page .aqufons-intro-copy{letter-spacing:-.015em;font-size: .86rem;}
#aqufons-page .aqufons-intro-copy br{display:block;}
#aqufons-page .aqufons-intro-products strong{letter-spacing:-.02em;}
#aqufons-page .aqufons-intro-products span:not(.aqufons-suqqu){letter-spacing:-.02em;}
#aqufons-page .aqufons-ref{font-size:.52em;}
#aqufons-page .aqufons-kv{padding-top:calc(clamp(548px,146vw,628px) - 80px);}
#aqufons-page .aqufons-intro-products .aqufons-suqqu{font-size:1em;letter-spacing:0;}
#aqufons-page .aqufons-notes{font-size:.61rem!important;padding-left:0!important;text-indent:0!important;}
#aqufons-page .aqufons-note-line,
#aqufons-page .aqufons-detail-feature2 > .aqufons-notes{padding-left:1.7em!important;text-indent:-1.7em!important;}
}
#foundation-page .foundation-product-name strong .product-suqqu,
#aqufons-page .aqufons-product-name strong .product-suqqu{display:inline;margin:0;color:inherit;font-family:var(--font-family-helvetica),"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1em;font-weight:inherit;line-height:inherit;letter-spacing:inherit;}
@media (min-width: 768px){
#aqufons-page .aqufons-detail-inner{padding:3.5rem 5.5rem 4.6rem;}
#aqufons-page .aqufons-detail-grid{grid-template-columns:1.15fr 1fr;gap:4.2rem;margin:.8rem 0 1.9rem;}
#aqufons-page .aqufons-feature b{font-size:.9rem;line-height:1.35;padding:.16rem .62rem;}
#aqufons-page .aqufons-detail-feature2{margin-top:2.9rem;}
#aqufons-page .aqufons-detail .aqufons-notes{font-size:.78rem;line-height:1.85;margin-top:.55rem;}
#aqufons-page .aqufons-common h2 .common-bracket{display:inline;}
#aqufons-page .aqufons-common h2 .common-mobile-break{display:none;}
#aqufons-page .aqufons-common-inner{padding:4.6rem 5.5rem 3.6rem;}
#aqufons-page .aqufons-common h2{margin:0 0 1rem;font-size:2rem;line-height:1.45;letter-spacing:.035em;color:#536aa1;font-weight:500;}
#aqufons-page .aqufons-common-sub{margin:0 0 2rem;font-size:1.3rem;line-height:1.7;color:#111;}
#aqufons-page .aqufons-common-inner>p:not(.aqufons-common-sub){max-width:820px;font-size:1rem;line-height:1.9;letter-spacing:.01em;color:#222;}
#aqufons-page .aqufons-common-points{max-width:820px;margin-top:.85rem;}
#aqufons-page .aqufons-common-points p{margin:.42rem 0;font-size:1rem;line-height:1.65;letter-spacing:.01em;color:#222;}
#aqufons-page .aqufons-common-points span{margin-right:.65rem;padding:.08rem .55rem;font-size:.88rem;line-height:1.35;vertical-align:.06em;}
#aqufons-page .aqufons-feature h3{font-size:1.1rem;line-height:1.65;letter-spacing:.015em;font-weight:500;color:#4f6396;}
#aqufons-page .aqufons-detail h4{font-size:1rem;line-height:1.7;margin:1.35rem 0 .35rem;}

#aqufons-page .aqufons-detail .aqufons-feature p{font-size:.8rem;line-height:2;letter-spacing:.01em;color:#444;}
#aqufons-page .aqufons-detail-text>p{line-height:2.15;}
}