body:has(#page-eyebrow.hex-page) {
  --color-main: #f29d90;
  --color-bg: #f7c4bd;
  --color-accent: #e36076;
}
body:has(#page-eyebrow.fine-page) {
  --color-main: #88bbe0;
  --color-bg: #b8d6ec;
  --color-accent: #3788c3;
}
body:has(#page-eyebrow.mascara-page) {
  --color-main: #edde7b;
  --color-bg: #f4ebb0;
  --color-accent: #e7a100;
}
body:has(#page-eyebrow.wend-page) {
  --color-main: #8ac9b5;
  --color-bg: #b9dfd2;
  --color-accent: #009d97;
}


/* Fonts
---------------------------------------------------*/
@font-face {
	font-family: 'Arboria';
	src: url('../fonts/Arboria-Bold.otf') format('opentype');
	font-weight: bold;
}
@font-face {
	font-family: 'Arboria';
	src: url('../fonts/Arboria-Medium.otf') format('opentype');
	font-weight: normal;
}


/* body
---------------------------------------------------*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body:has(#page-eyebrow) {
  background-color: var(--color-main);
}

@media screen and (min-width: 769px) {
  .pc_br {display: block;}
  .sp_only {display: none;}
}
@media screen and (max-width: 768px) {
  .sp_br {display: block;}
  .pc_only {display: none;}
}

#Footer {
  margin-top: 0;
  padding-top: 80px;
}

sup {
  position: static;
  font-size: 50%;
  vertical-align: super;
}

/* wrap */
#wrapper {
  min-width: auto;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #wrapper {
    padding-top: 0;
  }
}

#page-eyebrow {
  width: 100%;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 auto;
}
#page-eyebrow img {
  width: 100%;
  height: auto;
}

a:hover {
  opacity: 0.7;
}

img {
  width: 100%;
}

section p {
  font-size: clamp(10px, 1.3vw, 15px);
}

.button a,
.button span {
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 12px 0 14px 0;
  line-height: 1;
  background: #fff;
  border-radius: 30px;
  font-size: clamp(8px, 1vw, 13px);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .button a,
  .button span {
    font-size: 3.5vw;
  }
}

.online_btn a {
  display: block;
  width: min(500px, 80%);
  margin: 0 auto;
  text-align: center;
  padding: 0.8em 0 0.8em 0;
  line-height: 1;
  background: #fff;
  border-radius: 60px;
  font-size: clamp(16px, 3vw, 32px);
	font-family: 'Arboria';
	font-weight: bold;
  color: var(--color-main);
  letter-spacing: 0.07em;
}
@media screen and (max-width: 768px) {
  .online_btn a {
    width: 70vw;
    font-size: 6vw;
    padding: 0.5em 0 0.5em 0;
  }
}

.bnr_footer_links {
  max-width: 100%;
  background-color: #fff;
  padding: min(80px, 6.1538461538vw) 0;
}
@media screen and (max-width: 768px) {
  .bnr_footer_links .bnr_footer_links {
    padding: 12.5vw 0;
  }
}
.bnr_footer_links ul {
  width: min(1100px, 84.6153846154vw);
}

section h1 {
  text-align: center;
	font-family: 'Arboria';
	font-weight: bold;
  font-size: clamp(20px, 3.4vw, 40px);
  letter-spacing: 0.04em;
  margin-bottom: 1.2em;
}
@media screen and (max-width: 768px) {
  section h1 {
    font-size: 6vw;
  }
}


/* eyebrow -DetailPage-
---------------------------------------------------*/
/* --- hero --- */
#hero {
  display: flex;
}
#hero .photo_area {
  width: 50%;
}
#hero .text_area {
  width: 50%;
}
#hero .icon {
  width: 17%;
  margin: 4% 4% auto auto;
}
#hero .catch {
  width: 76%;
  margin: 10% auto 3% auto;
}
#hero h1 {
  width: 90%;
  margin: 0 auto 3% auto;
}
#hero h2 {
  text-align: center;
  color: #fff;
  font-size: clamp(12px, 2vw, 28px);
}
.mascara-page #hero h2 {
  color: #555;
}
#hero span {
  display: inline-block;
  padding: 0.1em 0.8em 0.2em 0.8em;
  margin-left: 0.3em;
  color: var(--color-accent);
  background: #fff;
  border-radius: 30px;
}
#hero .tip {
  width: 37%;
  margin: 12% auto 0 auto;
}
@media screen and (max-width: 768px) {
  #hero {
    position: relative;
    margin-top: 12.5vw;
    display: block;
  }
  #hero .photo_area {
    width: 100%;
  }
  #hero .text_area {
    width: 100%;
  }
  #hero .icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22%;
    margin: 0;
  }
  #hero .catch {
    width: 84%;
  }
  #hero h1 {
    width: 98%;
  }
  .mascara-page #hero h1 {
    width: 56%;
    margin-bottom: 4%;
  }
  #hero h2 {
    font-size: 4.2vw;
  }
  #hero .tip {
    width: 54%;
    margin: 6% auto 0 auto;
  }
}

/* --- POINT --- */
#point {
  padding-bottom: min(80px, 7vw);
}
#point .inner {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: min(1200px, 86%);
  margin: min(100px, 8vw) auto min(50px, 5vw) auto;
  text-align: justify;
}
.mascara-page #point .inner {
  color: #555;
}
#point .inner > .text_area {
  flex: 1;
  padding: 0 4%;
}
#point .inner > .photo_area {
  width: 50%;
}
#point h1 {
  font-size: clamp(16px, 2.4vw, 38px);
  letter-spacing: 0.2em;
  margin-bottom: 0.6em;
}
#point h1 span {
  display: inline-block;
  padding: 0 1.4em 0 1.6em;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
.mascara-page #point h1 span {
  border-left: 1px solid #555;
  border-right: 1px solid #555;
}
#point .text_area > p {
  font-size: clamp(10px, 1.3vw, 15px);
  line-height: 2.2;
}
#point .useitem {
  position: relative;
  padding-top: 10px;
  margin: min(60px, 3vw) 0 min(90px, 6vw) 0;
}
.useitem_inner {
  position: relative;
  z-index: 1;
  border: 2px solid #fff;
  border-top-left-radius: 0;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0;
  padding: 1.2em 1em 2em 1em;
  line-height: 2;
}
.useitem_inner::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: 7%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #fff 0 50%, transparent 50%);
}
.useitem_inner::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 7%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(315deg, #fff 0 50%, transparent 50%);
}
.mascara-page .useitem_inner {
  border: 2px solid #555;
}
.mascara-page .useitem_inner::before {
  background: linear-gradient(135deg, #555 0 50%, transparent 50%);
}
.mascara-page .useitem_inner::after {
  background: linear-gradient(315deg, #555 0 50%, transparent 50%);
}
.useitem h2 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
	font-family: 'Arboria';
	font-weight: bold;
  font-size: clamp(13px, 2.1vw, 20px);
}
.useitem h2 span {
  display: block;
  padding: 0 0.5em;
  background: var(--color-main);
  letter-spacing: 0.2em;
}
.useitem p {
  text-align: center;
  margin-top: 0.8em;
  line-height: 1.4;
  font-size: clamp(8px, 1.0vw, 13px);
}
#point .advisor {
  display: flex;
}
#point .advisor .photo_area {
  width: 33%;
}
#point .advisor .text_area {
  flex: 1;
  padding: 0 0 0 4%;
}
#point .advisor h2 {
  font-size: clamp(12px, 1.8vw, 22px);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #fff;
  padding-bottom: 0.6em;
  margin-bottom: 0.4em;
}
.mascara-page #point .advisor h2 {
  border-bottom: 1px solid #555;
}
#point .advisor h2 small {
  font-size: 54%;
}
#point .advisor h2 span {
  display: inline-block;
  font-size: 68%;
  color: var(--color-main);
  padding: 0.2em 1em;
  background: #fff;
  border-radius: 20px;
  margin-bottom: 0.4em;
}
.mascara-page #point .advisor h2 span {
  color: var(--color-accent);
}
#point .advisor p {
  font-size: clamp(8px, 1.0vw, 13px);
  line-height: 1.7;
}
#point .advisor p strong {
  font-weight: bold;
  color: #f4ebb0;
}
.mascara-page #point .advisor p strong {
  color: var(--color-accent);
}
#point .advisor p strong span {
  font-size: 120%;
  background: linear-gradient(
    transparent 60%,
    color-mix(in srgb, var(--color-accent) 50%, transparent) 70%,
    color-mix(in srgb, var(--color-accent) 50%, transparent) 100%
  );
}
.mascara-page #point .advisor p strong span {
  font-size: 120%;
  background: linear-gradient(
    transparent 60%,
    color-mix(in srgb, #fff 70%, transparent) 70%,
    color-mix(in srgb, #fff 70%, transparent) 100%
  );
}
#point .swiper {
  padding-bottom: 30px;
}
#point .swiper-pagination {
  text-align: right;
}
#point .swiper-pagination-bullet {
  background: #fff;
}
@media screen and (max-width: 768px) {
  #point {
    padding-bottom: 14vw;
  }
  #point .inner {
    margin: 8vw auto 10vw auto;
  }
  #point .inner > .text_area {
    order: 2;
    padding: 0;
  }
  #point .inner > .photo_area {
    order: 1;
    width: 100%;
  }
  #point .swiper-pagination {
    text-align: center;
  }
  #point h1 {
    font-size: 6vw;
    margin-top: 1.5em;
  }
  #point .text_area > p {
    font-size: 3.4vw;
    line-height: 1.8;
  }
  #point .useitem {
    position: relative;
    padding-top: 2vw;
    margin: 7vw 0 10vw 0;
  }
  .useitem h2 {
    font-size: 4.6vw;
  }
  .useitem p {
    font-size: 3vw;
  }
  #point .advisor {
    flex-direction: column;
  }
  #point .advisor .photo_area {
    width: 46%;
    margin: 0 auto;
  }
  #point .advisor .text_area {
    padding: 0;
    margin-top: 4vw;
  }
  #point .advisor h2,
  .mascara-page #point .advisor h2 {
    font-size: 5vw;
    text-align: center;
    border-bottom: 0;
  }
  #point .advisor h2::after {
    content: '';
    display: block;
    width: 36%;
    height: 1px;
    background: #fff;
    margin: 0.8em auto 0 auto;
  }
  .mascara-page #point .advisor h2::after {
    background: #555;
  }
  #point .advisor p {
    font-size: 3.4vw;
    line-height: 2;
  }
}

/* --- COLORS（hex base） --- */
#colors {
  padding: min(70px, 6vw) 0 min(70px, 6vw) 0;
  background: #fff;
}
#colors ul {
  width: min(860px, 86%);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#colors ul li {
  width: 47%;
}
#colors h2 {
  text-align: center;
	font-family: 'Arboria';
	font-weight: bold;
  font-size: clamp(18px, 2.2vw, 26px);
}
#colors .jp {
  text-align: center;
  font-size: clamp(11px, 1.4vw, 16px);
  margin: 0.2em 0 1.2em 0;
}
#colors .item_wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
#colors .item_wrap .texture {
  width: 60%;
  margin-right: -20%;
}
#colors .item_wrap .item_img {
  width: 60%;
}
#colors p {
  text-align: center;
}
@media screen and (max-width: 768px) {
  #colors {
    padding: 14vw 0;
  }
  #colors ul {
    flex-direction: column;
  }
  #colors ul li {
    width: 100%;
  }
  #colors ul li:first-child {
    margin-bottom: 10vw;
  }
  #colors p {
    font-size: 3vw;
  }
}

/* --- COLORS（fine） --- */
.fine-page #colors .item_wrap {
  align-items: center;
}
.fine-page #colors .item_wrap .texture {
  width: 27%;
  margin-right: 0;
}
.fine-page #colors .item_wrap .item_img {
  width: 70%;
}
.fine-page #colors p {
  margin-top: -1em;
}

/* --- COLORS（mascara） --- */
.mascara-page #colors .item_wrap {
  align-items: center;
}
.mascara-page #colors .item_wrap .texture {
  width: 23%;
  margin-right: 0;
}
.mascara-page #colors .item_wrap .item_img {
  width: 77%;
}
.mascara-page #colors p {
  margin-top: -1em;
}

/* --- COLORS（wend） --- */
.wend-page #colors .item_wrap {
  margin-right: 1em;
}
.wend-page #colors .item_wrap.liquid {
  margin-bottom: 12px;
}
.wend-page #colors .item_wrap .texture {
  width: 45%;
  margin-right: -20%;
}
.wend-page #colors .item_wrap.liquid .item_img {
  width: 58%;
}
.wend-page #colors .item_wrap.concealer {
  align-items: flex-start;
  margin-top: 30px;
}
.wend-page #colors .item_wrap.concealer .texture {
  width: 56%;
}
.wend-page #colors .item_wrap.concealer .item_img {
  width: 42%;
}

/* --- FEATURES（hex base） --- */
#features {
  padding: min(70px, 6vw) 0 min(70px, 6vw) 0;
  background: var(--color-bg);
  text-align: center;
}
.features_wrap {
  width: min(920px, 90%);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px 20px;
}
.features_wrap .left_area,
.features_wrap .right_area {
  width: calc(50% - 10px);
}
#features .box {
  background: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
  padding: 24px 5px;
}
#features .box.ingredients {
  padding: 20px 5px;
}
#features .icon {
  margin-bottom: 16px;
}
#features .icon img {
  height: 50px;
  width: auto;
}
#features h2 {
  color: var(--color-main);
  font-size: clamp(15px, 2.3vw, 24px);
  line-height: 1.3;
  font-weight: bold;
}
#features .ingredients h2 {
  font-size: clamp(10px, 1.6vw, 16px);
}
#features .ingredients h2 small {
  vertical-align: top;
}
#features p {
  margin-top: 0.6em;
  line-height: 1.6;
}
#features p.note {
  font-size: clamp(8px, 1vw, 12px);
}
#features .text_box {
  font-size: clamp(8px, 1vw, 12px);
  text-align: justify;
  line-height: 1.5;
}
#features .tip_img {
  width: 36%;
  margin: 16px auto 0 auto;
}
#features .note {
  font-size: clamp(8px, 1vw, 12px);
  margin-top: 12px;
}
@media screen and (max-width: 768px) {
  #features {
    padding: 14vw 0;
  }
  .features_wrap {
    width: 86%;
    flex-direction: column;
    gap: 0;
  }
  .features_wrap .left_area,
  .features_wrap .right_area {
    width: 100%;
  }
  #features h2 {
    font-size: 4.5vw;
  }
  #features .ingredients {
    width: 100%;
    margin: 0 auto;
  }
  .hex-page #features .ingredients {
    width: 86%;
  }
  #features .ingredients h2 {
    font-size: 3.8vw;
  }
  #features p {
    font-size: 3vw;
  }
  #features .text_box {
    width: 100%;
    margin: 4vw auto 0 auto;
  }
  .hex-page #features .text_box {
    width: 86%;
  }
  #features .tip_img {
    width: 45%;
    margin: 12px auto 0 auto;
  }
}

/* --- FEATURES（fine） --- */
.fine-page #features .tip_wrap {
  width: 72%;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fine-page #features .tip_img {
  flex: 1;
  width: auto;
  margin: 0;
}
.fine-page #features .tip_wrap p {
  width: 12.5em;
  color: var(--color-main);
  text-align: center;
  font-weight: bold;
  font-size: clamp(8px, 1.0vw, 13px);
  margin: 0;
}
@media screen and (max-width: 768px) {
  .fine-page #features .tip_wrap {
    width: 88%;
    margin: 8px auto;
  }
  .fine-page #features .tip_wrap p {
    width: 12.5em;
    font-size: 3vw;
  }
}

/* --- FEATURES（mascara） --- */
.mascara-page #features h2 {
  color: var(--color-accent);
}
.mascara-page #features .text_box {
  width: min(920px, 90%);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .mascara-page #features .ingredients {
    width: 86%;
  }
  .mascara-page #features .text_box {
    width: 86%;
    margin: 4vw auto 0 auto;
  }
}

/* --- FEATURES（wend） --- */
.wend-page #features .icon {
  margin-bottom: 30px;
}


/* --- HOW TO（hex base） --- */
#howto {
  background: #fff;
  padding: min(70px, 6vw) 0 min(70px, 6vw) 0;
}
#howto .inner {
  width: min(660px, 86%);
  margin: 0 auto;
}
#howto .use_photo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 36px 0;
}
#howto .use_photo .brow_img {
  width: 62%;
}
#howto .text_with_brush {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#howto .text_with_brush p {
  flex: 1;
  text-align: justify;
  line-height: 1.6;
  font-size: clamp(8px, 1vw, 13px);
  margin: 0.6em 1em 0 0;
}
#howto .text_with_brush .brush_img {
  width: 32%;
  margin-right: -3%;
}
#howto .use_photo .onepoint {
  width: 36%;
  text-align: center;
}
#howto .use_photo .onepoint img {
  width: 92%;
}
#howto .use_photo .onepoint p {
  font-size: clamp(8px, 1vw, 13px);
  line-height: 1.4;
  margin-top: 0.8em;
}
#howto .finish {
  text-align: center;
}
#howto .finish h2 {
  color: var(--color-accent);
  text-align: center;
  font-size: clamp(12px, 2.2vw, 16px);
  font-weight: bold;
  margin-bottom: 1em;
}
#howto .finish h2 span {
  display: inline-block;
  padding: 0 1.4em 0 1.6em;
  border-left: 1px solid var(--color-accent);
  border-right: 1px solid var(--color-accent);
}
#howto .finish img {
  width: 84%;
}
@media screen and (max-width: 768px) {
  #howto {
    padding: 14vw 0;
  }
  #howto .use_photo {
    flex-direction: column;
    margin: 6vw 0;
  }
  #howto .use_photo .brow_img {
    width: 100%;
  }
  #howto .text_with_brush {
    flex-direction: column;
  }
  #howto .text_with_brush p {
    font-size: 3.4vw;
    margin: 0.6em 0 0.8em 0;
  }
  #howto .text_with_brush .brush_img {
    width: 46%;
  }
  #howto .use_photo .onepoint {
    width: 94%;
    display: flex;
    align-items: center;
    margin-top: 12px;
  }
  #howto .use_photo .onepoint img {
    width: 44%;
    margin-right: 4%;
  }
  #howto .use_photo .onepoint p {
    font-size: 3.4vw;
    text-align: left;
    line-height: 1.4;
    margin-top: 0.8em;
  }
  #howto .finish img {
    width: 100%;
  }
}

/* --- HOW TO（fine） --- */
.fine-page #howto .inner {
  width: min(850px, 92%);
}
.fine-page #howto .use_photo .brow_img {
  width: 72%;
}
.fine-page #howto .text_with_brush {
  align-items: flex-end;
}
.fine-page #howto .text_with_brush .brush_img {
  width: 23%;
}
.fine-page #howto .use_photo .onepoint {
  width: 26%;
  margin-top: -3em;
}
.fine-page #howto .use_photo .onepoint img {
  width: 100%;
}
.fine-page #howto .finish_img_wrap {
  display: grid;
  grid-template-columns: 26% 1fr;
  grid-template-areas: 
    "img1 img3"
    "img2 img3";
  align-items: start;
  gap: 20px;
}
.fine-page #howto .finish_img1 {
  grid-area: img1;
}
.fine-page #howto .finish_img2 {
  grid-area: img2;
}
.fine-page #howto .finish_img3 {
  grid-area: img3;
}
.fine-page #howto .finish img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .fine-page #howto .inner {
    width: 86%;
  }
  .fine-page #howto .use_photo .brow_img {
    width: 100%;
  }
  .fine-page #howto .text_with_brush {
    align-items: center;
  }
  .fine-page #howto .text_with_brush .brush_img {
    width: 46%;
    margin-bottom: 20px;
  }
  .fine-page #howto .use_photo .onepoint {
    width: 100%;
    margin-top: 4vw;
  }
  .fine-page #howto .use_photo .onepoint img {
    width: 45%;
  }
  .fine-page #howto .text_with_brush p {
    margin: 0 0 0.8em 0;
  }
  .fine-page #howto .finish_img_wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "img1 img2"
      "img3 img3";
    gap: 3vw;
  }
}

/* --- HOW TO（mascara） --- */
.mascara-page #howto .inner {
  width: min(880px, 92%);
}
.mascara-page #howto .use_photo .brow_img {
  position: relative;
  width: 72%;
  display: flex;
  justify-content: space-between;
}
.mascara-page #howto .use_photo .brow_img .step {
  width: 46%;
}
.mascara-page #howto .use_photo .brow_img p {
  text-align: justify;
  line-height: 1.6;
  font-size: clamp(8px, 1vw, 13px);
  margin: 0.6em 0 0 0;
}
.mascara-page #howto .use_photo .brow_img .arrow {
  position: absolute;
  top: 35%;
  left: calc(50% - 11px);
  width: 24px;
}
.mascara-page #howto .use_photo .onepoint {
  width: 26%;
  margin-top: -2em;
}
.mascara-page #howto .finish img {
  width: min(590px, 78%);
}
@media screen and (max-width: 768px) {
  .mascara-page #howto .inner {
    width: 86%;
  }
  .mascara-page #howto .use_photo .brow_img {
    position: relative;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .mascara-page #howto .use_photo .brow_img .step {
    width: 96%;
  }
  .mascara-page #howto .use_photo .brow_img p {
    font-size: 3.4vw;
    margin-bottom: 4vw;
    text-align: justify;
  }
  .mascara-page #howto .use_photo .brow_img .step p {
    display: none;
  }
  .mascara-page #howto .use_photo .brow_img .arrow {
    position: relative;
    top: auto;
    left: auto;
    width: 16px;
    margin: 8px 0;
  }
  .mascara-page #howto .use_photo .brow_img .arrow img {
    transform: rotate(90deg);
  }
  .mascara-page #howto .use_photo .onepoint {
    width: 100%;
    margin-top: 4vw;
  }
  .mascara-page #howto .finish img {
    width: 100%;
  }
}

/* --- HOW TO（wend） --- */
.wend-page #howto .inner {
  width: min(740px, 86%);
}
.wend-page #howto .use_photo {
  align-items: flex-start;
}
.wend-page #howto .use_photo .brow_img {
  width: 49%;
}
.wend-page #howto .use_photo p {
  text-align: center;
  line-height: 1.6;
  font-size: clamp(8px, 1vw, 13px);
  margin: 0.6em 0 0 0;
}
.wend-page #howto .use_photo .note {
  text-align: center;
  font-size: clamp(8px, 1vw, 13px);
  margin: 0.6em 0 0 0;
}
.wend-page #howto .other {
  width: 94%;
  margin: 0 auto 28px auto;
}
.wend-page #howto .finish img {
  width: min(590px, 84%);
}
@media screen and (max-width: 768px) {
  .wend-page #howto .use_photo .brow_img {
    width: 100%;
    margin-bottom: 7vw;
  }
  .wend-page #howto .use_photo p {
    text-align: left;
    font-size: 3vw;
  }
  .wend-page #howto .use_photo .note {
    text-align: left;
    font-size: 2.4vw;
  }
  .wend-page #howto .other {
    width: 100%;
  }
  .wend-page #howto .finish img {
    width: 100%;
  }
}

/* --- LINE UP --- */
#lineup {
  padding: min(100px, 8vw) 0 min(80px, 6vw) 0;
  text-align: center;
}
#lineup .lineup_list {
  position: relative;
}
#lineup .loop {
  position: absolute;
  z-index: 1;
  top: calc(50% - 70px);
  width: 100%;
  height: 130px;
  overflow: hidden;
  display: flex;
}
#lineup .loop img {
  max-width: auto;
  width: auto;
  max-width: max-content;
  height: 130px;
}
#lineup .loop img:first-child {
  animation: loop1 60s -30s linear infinite;
}
#lineup .loop img:last-child {
  animation: loop2 60s linear infinite;
}
@keyframes loop1 {
  0% {transform: translateX(100%);}
  to {transform: translateX(-100%);}
}
@keyframes loop2 {
  0% {transform: translateX(0);}
  to {transform: translateX(-200%);}
}
@media screen and (max-width: 640px) {
  #lineup .loop {
    height: 70px;
  }
  #lineup .loop img {
    height: 70px;
  }
}
#lineup h1 {
  width: min(146px, 20%);
  margin: 0 auto 30px auto;
}
#lineup ul {
  position: relative;
  z-index: 2;
  width: 450px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#lineup ul li {
  width: 43%;
}
#lineup ul li .color {
  font-size: clamp(8px, 1vw, 13px);
  margin-top: 1em;
  color: #333;
}
#lineup .item_info {
  margin: 2em 0 1.5em 0;
  line-height: 1.7;
  font-size: clamp(14px, 2.1vw, 20px);
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  #lineup {
    padding: 14vw 0;
  }
  #lineup .loop {
    display: none;
  }
  #lineup h1 {
    width: 30%;
    margin: 0 auto 4vw auto;
  }
  #lineup ul {
    width: 80%;
  }
  #lineup ul li {
    width: 46%;
  }
  #lineup ul li .color {
    font-size: 3vw;
  }
  #lineup .item_info {
    font-size: 3.8vw;
  }
}

/* --- SERIES --- */
#series {
  padding: min(70px, 6vw) 0 min(70px, 6vw) 0;
  background: #f4f4ef;
  text-align: center;
}
#series h1 {
  width: min(940px, 84%);
  margin: 0 auto 20px auto;
}
#series p {
  font-size: clamp(13px, 2vw, 18px);
  color: #606060;
  margin: 0 0 40px 0;
}
#series ul {
  width: min(1400px, 94%);
  margin: 0 auto 0 auto;
  display: flex;
  gap: 2.2%;
}
#series li {
  flex: 1;
}
#series .item_footer {
  padding: 20px 0;
  margin-top: -1px;
}
#series .item_footer .item_name {
  color: #fff;
  font-size: clamp(8px, 1vw, 15px);
  font-weight: bold;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
#series .item_footer .button span {
  width: 42%;
  padding: 8px 0 9px 0;
}
#series .hex .item_footer {
  background: #f29d90;
}
#series .hex .item_footer .button span {
  color: #f29d90;
}
#series .fine .item_footer {
  background: #98bade;
}
#series .fine .item_footer .button span {
  color: #98bade;
}
#series .mascara .item_footer {
  background: #e8dd80;
}
#series .mascara .item_footer .button span {
  color: #e8dd80;
}
#series .wend .item_footer {
  background: #9ec8b4;
}
#series .wend .item_footer .button span {
  color: #9ec8b4;
}
@media screen and (max-width: 768px) {
  #series {
    padding: 14vw 0;
  }
  #series p {
    font-size: 4vw;
    line-height: 1.6;
    margin: 0 0 30px 0;
  }
  #series ul {
    width: 100%;
    gap: 0;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #series li {
    flex: initial;
    width: 50%;
  }
  #series .item_footer {
    padding: 1em 0;
  }
  #series .item_footer .item_name {
    font-size: 1.9vw;
    margin-bottom: 1em;
  }
  #series .item_footer .button span {
    width: 50%;
    font-size: 2vw;
    padding: 0.4em 0 0.6em 0;
  }
}

/* --- BannerArea（眉タイプ診断） --- */
#chart_area {
  background: #f4f4ef;
  padding: 1px 0 min(80px, 14vw) 0;
}
#chart_area .inner {
  width: min(600px, 76%);
  margin: 0 auto;
  position: relative;
}
#chart_area .inner .title {
  position: absolute;
  top: 8px;
  right: 2%;
  width: 4.2%;
}
#chart {
  width: min(500px, 84%);
  margin: 0 auto;
  background: #f2a694;
  border-radius: 20px;
  padding: 24px 36px 32px 36px;
  color: #fff;
  text-align: center;
}
#chart .catch {
  grid-area: catch;
  width: 60%;
  margin: 0 auto -4% auto;
}
#chart h1 {
  grid-area: title;
  margin: 0;
}
#chart > p {
  grid-area: text;
  margin: 12px 0;
  line-height: 1.8;
  font-size: clamp(10px, 1.5vw, 13px);
  letter-spacing: -0.08em;
}
#chart .button {
  grid-area: btn;
}
#chart .button a {
  color: #e78385;
  width: 40%;
}
@media screen and (max-width: 768px) {
  #chart_area .inner {
    width: 86%;
  }
  #chart_area .inner .title {
    position: relative;
    top: auto;
    right: auto;
    width: 46%;
    margin: 0 auto 20px auto;
  }
  #chart {
    width: 100%;
    padding: 30px 10px;
  }
  #chart > p {
    align-self: center;
    font-size: 3vw;
  }
  #chart .button a {
    width: 60%;
  }
}


/* animation
---------------------------------------------------*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.delay-05s {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}
.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}
.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media print and (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}
@keyframes bounceInUp {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 80%, 0) scaleY(1.2);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  70% {
    opacity: 1;
  }
  75% {
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes rotate {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
@keyframes reveal {
  to {
    clip-path: inset(0 0 0 0);
  }
}

.fadeIn.animated {
  opacity: 0;
}
.fadeIn.did {
  animation-name: fadeIn;
  animation-duration: 0.6s;
}
.fadeInUp.animated {
  opacity: 0;
}
.fadeInUp.did {
  animation-name: fadeInUp;
  animation-duration: 0.6s;
}
.fadeInLeft.animated {
  opacity: 0;
}
.fadeInLeft.did {
  animation-name: fadeInLeft;
  animation-duration: 0.6s;
}
.bounceInUp.animated {
  opacity: 0;
}
.bounceInUp.did {
  animation: bounceInUp 0.6s ease-out forwards;
  opacity: 1;
}
.reveal.animated {
  clip-path: inset(0 100% 0 0);
}
.reveal.did {
  animation: reveal 0.6s ease-out forwards;
}

/*# sourceMappingURL=main.css.map */