/*
LP 共通ベース（PC/SP共通で読み込み）
*/
/* 1rem = 10px
   PC：1150px以下で clamp(最小値, △vw - ○rem, 最大rem)（1015pxで元の80%）
   SP：max-device-width:767px で font-size のみ vw */
.headline-l { display: none; }
.headline-l.align-l { display: block; }

img[data-image] { opacity: 0; }

/*
共通（.lp-box）
*/
.lp-box {
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  color: #fff;
  white-space: nowrap;
  font-weight: bold;
  font-family: "Kosugi Maru", sans-serif;
  --ft-kiwi: "Kiwi Maru", sans-serif;
}

.lp-box div,
.lp-box nav,
.lp-box section { position: relative; }

.lp-box img {
  opacity: 1;
  transition: opacity 0.19s ease;
  width: 100%;
  max-width: none;
  height: auto;
  image-rendering: auto;
}

.lp-box a {
  display: block;
  transition: opacity 0.19s ease;
}

.lp-box .lp-ab { position: absolute; }

/* 透明クリック領域（画像上のボタンにかぶせる） */
.lp-box .h-op::after {
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  background: #fff;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.lp-box .h-op:hover::after { opacity: 0.4; }

/*
aspect-ratio（画像の width / height をそのまま書く）
*/
.atop  { aspect-ratio: 750 / 1840; }
.item1 { aspect-ratio: 750 / 768; }
.item2 { aspect-ratio: 750 / 769; }
.item3 { aspect-ratio: 750 / 766; }
.item4 { aspect-ratio: 750 / 767; }
.item5 { aspect-ratio: 750 / 796; }
.item6 { aspect-ratio: 750 / 852; }

/*
TOP
*/
.atop .msg {
  left: 0;
  top: 0%;
  width: 100%;
  line-height: 1.8;
  font-size: 2.8rem;
  color: #845561;
  aspect-ratio: 800 / 52;
}

.atop .msg1 { top: 65%; }
.atop .msg2 { top: 68.2%; }
.atop .msg3 { top: 71.4%; }

.atop .txt-a {
  left: 68%;
  top: 80%;
  width: calc((139 / 750) * 100%);
  aspect-ratio: 100 / 25;
  color: #825571;
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ft-kiwi);
  font-weight: 500;
  padding-bottom: 0.1em;
}

.atop .txt-b {
  left: 64%;
  top: 80.55%;
  font-size: 3.5rem;
  text-align: center;
  width: 25%;
  aspect-ratio: 100 / 22;
  text-shadow: 0 3px 1px rgba(163, 90, 114, 0.1);
}

.atop .txt2 { top: 82.55%; }

.atop .txt3 {
  left: 66%;
  top: 85.55%;
  width: calc((166 / 750) * 100%);
  aspect-ratio: 100 / 22;
}

.atop .txt4 {
  left: 65%;
  top: 88.4%;
}

/*
ITEM
*/
.item {
  margin-top: -1px;
  --c: #845561; /* 商品ごとのテキスト色（brand / color / msg 共通） */
}

.item .brand {
  left: 5%;
  top: 7%;
  width: 32%;
  aspect-ratio: 100 / 31;
  font-size: 4rem;
  font-family: var(--ft-kiwi);
  font-weight: 500;
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2行ブランド名（MILIMORE Ever Color 1DAY など） */
.item .brand-2l {
  font-size: 2.4rem;
  line-height: 1.1;
}

.item .color {
  left: 37%;
  top: 7%;
  width: 58%;
  aspect-ratio: 100 / 17;
  font-size: 3.8rem;
  font-family: var(--ft-kiwi);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.item .msg {
  left: 0;
  top: 66.5%;
  width: 100%;
  aspect-ratio: 800 / 207;
  font-size: 2.8rem;
  line-height: 1.7;
  color: var(--c);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item .link {
  left: 0%;
  top: 0%;
  width: calc(372 / 750 * 100%);
}

.item .spec {
  left: 66%;
  top: 40.5%;
  width: 30%;
  aspect-ratio: 100 / 74;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item .spec > li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 100 / 21;
  color: #fff;
  font-family: var(--ft-kiwi);
  font-weight: 500;
}

.item .spec > li span { font-size: 2.3rem; }
.item .spec > li span.jp { font-size: 2rem; }

.item .spec > li em {
  font-size: 3.5rem;
  line-height: 1;
  transform: translateY(-0.1em);
}

.item .spec > li img {
  width: 11px;
  margin: 0 8px 0 5px;
  transform: translateY(0.1em);
}

.item .spec > li small {
  font-size: 1.7rem;
  padding-left: 0.1em;
  transform: translateY(0.3em);
}

/*
個別調整
*/
/* 文字色 */
.item2 { --c: #825571; }
.item3 { --c: #845561; }
.item4 { --c: #ad5c8c; }
.item5 { --c: #ce8da2; }
.item6 { --c: #754c24; }

/* brand */
.item2 .brand {
    top: 6%;
    letter-spacing: -0.05em;
    padding-left: 0.2em;
}
.item3 .brand { top: 6%; font-size: 3.3rem; }
.item4 .brand { top: 5.5%; left: 7%; font-size: 2.5rem; }
.item5 .brand { top: 5%; font-size: 4.2rem;}
.item6 .brand { top: 2%; left: 6%; width: 34.5%; font-size: 3.1rem; }

/* color */
.item1 .color {
  font-size: 4.5rem;
  letter-spacing: -0.2em;
}
.item2 .color { top: 6.5%; font-size: 4.9rem;}
.item3 .color {
    top: 5.9%;
    font-size: 4.5rem;
    letter-spacing: -0.1em;
}

.item4 .color { top: 5.55%; font-size: 4.5rem;}
.item5 .color { top: 5.5%; font-size: 4.3rem; letter-spacing: -0.1em;}
.item6 .color { top: 2.2%; font-size: 3.95rem;}

/* msg */
.item3 .msg span { display: block; padding-right: 0.5em; }
.item4 .msg { letter-spacing: -0.01em; }
.item4 .msg .line2 { padding-left: 1em; }
.item4 .msg .line3 { padding-left: 2em; }
.item5 .msg { top: 63.9%; }
.item6 .msg { top: 57.8%; }

/* spec */
.item2 .spec { aspect-ratio: 100 / 73; }
.item3 .spec { top: 40.2%; }
.item4 .spec { aspect-ratio: 100 / 75; }
.item5 .spec {
  top: 39.09%;
}
.item6 .spec { top: 32.95%; }

/*
PC：1150px以下で縮小
*/
/* 1150px で最大値 → 1015px で最小値（元の80%）まで直線的に縮小
   最小値 = 元rem × 0.8
   △vw   = (元rem − 最小値) × 10 ÷ (1150 − 1015) × 100
   ○rem  = 最小値 − △ × 1015 ÷ 1000
   font-size: clamp(最小値, △vw + ○rem, 元rem); */
@media screen and (max-width: 1150px) {
  .atop .msg   { font-size: clamp(2.24rem, 4.15vw - 1.97rem, 2.8rem); }
  .atop .txt-a { font-size: clamp(1.92rem, 3.56vw - 1.69rem, 2.4rem); }
  .atop .txt-b { font-size: clamp(2.8rem, 5.19vw - 2.46rem, 3.5rem); }

  .item .brand    { font-size: clamp(3.2rem, 5.93vw - 2.81rem, 4rem); }
  .item .brand-2l { font-size: clamp(1.92rem, 3.56vw - 1.69rem, 2.4rem); }
  .item .color    { font-size: clamp(3.04rem, 5.63vw - 2.67rem, 3.8rem); }
  .item .msg      { font-size: clamp(2.24rem, 4.15vw - 1.97rem, 2.8rem); }

  .item .spec > li span    { font-size: clamp(1.84rem, 3.41vw - 1.62rem, 2.3rem); }
  .item .spec > li span.jp { font-size: clamp(1.6rem, 2.96vw - 1.41rem, 2rem); }
  .item .spec > li em      { font-size: clamp(2.8rem, 5.19vw - 2.46rem, 3.5rem); }
  .item .spec > li small   { font-size: clamp(1.36rem, 2.52vw - 1.2rem, 1.7rem); }

  .item3 .brand { font-size: clamp(2.64rem, 4.89vw - 2.32rem, 3.3rem); }
  .item4 .brand { font-size: clamp(2rem, 3.7vw - 1.76rem, 2.5rem); }
  .item5 .brand { font-size: clamp(3.36rem, 6.22vw - 2.96rem, 4.2rem); }
  .item6 .brand { font-size: clamp(2.48rem, 4.59vw - 2.18rem, 3.1rem); }
  .item1 .color,
  .item3 .color,
  .item4 .color { font-size: clamp(3.6rem, 6.67vw - 3.17rem, 4.5rem); }
  .item5 .color { font-size: clamp(3.5rem, 6.67vw - 3.17rem, 4.3rem); }
  .item2 .color { font-size: clamp(3.92rem, 7.26vw - 3.45rem, 4.9rem); }
  .item6 .color { font-size: clamp(3.16rem, 5.85vw - 2.78rem, 3.95rem); }
}


/*
SP（font-sizeのみ vw / 基準776px）
*/
@media screen and (max-device-width: 767px) {
  .lp-box span:hover,
  .lp-box a:hover { opacity: 1; }

  .lp-box {
    width: calc(100% + 26px);
    margin-left: -13px;
  }

  .atop .msg   { font-size: 3.61vw; }
  .atop .txt-a { font-size: 3.09vw; }
  .atop .txt-b { font-size: 4.51vw; }

  .atop .txt-b {
    text-shadow: 0 2px 0px rgba(163, 90, 114, 0.1);
  }

  .item .brand    { font-size: 5.15vw; }
  .item .brand-2l { font-size: 3.09vw; }
  .item .color    { font-size: 4.9vw; }
  .item .msg      { font-size: 3.61vw; }

  
  .item .spec > li span    { font-size: 2.96vw; }
  .item .spec > li span.jp { font-size: 2.58vw; }
  .item .spec > li em      { font-size: 4.51vw; }
  .item .spec > li small   { font-size: 2.19vw; }
  /* 776px基準 vw換算（11/776, 5/776, 8/776）。min() で元のpx値を上限に */
  .item .spec > li img {
    width: min(1.42vw, 11px);
    margin: 0 min(1.03vw, 8px) 0 min(0.64vw, 5px);
  }

  .item3 .brand { font-size: 4.25vw; }
  .item4 .brand { font-size: 3.22vw; }
  .item5 .brand { font-size: 5.41vw; }
  .item6 .brand { font-size: 3.99vw; }
  .item1 .color,
  .item3 .color,
  .item4 .color { font-size: 5.8vw; }
  .item5 .color { font-size: 5.8vw; }
  .item2 .color { font-size: 6.31vw; }
  
  .item6 .color { font-size: 5.09vw; }
}