@import url("https://fonts.googleapis.com/css2?family=Aboreto&display=swap");

figure,
.samantha25 .coat_block * {
  margin: 0;
  padding: 0;
}

.sp_only {
  display: block;
}

.pc_only {
  display: none;
}

.samantha25 .point_area {
  position: relative;
  z-index: 0;
  margin-top: min(8vw, 60px);
}

.samantha25 .point_area::before {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% - min(20.1333333333vw, 152px));
  background: url(/img/samantha/bg_pink.png);
  position: absolute;
  top: min(20.1333333333vw, 152px);
  z-index: -1;
}

.samantha25 .point_area .flex {
  display: flex;
  flex-direction: column;
  width: min(88vw, 720px);
  margin: auto;
}

.samantha25 .point_area .title {
  order: 2;
  margin: min(8vw, 68px) 0 0;
}

.samantha25 .point_area .point_list {
  order: 1;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  flex-wrap: wrap;
  gap: min(3.7333333333vw, 28px);
}

.samantha25 .point_area .point_list li {
  width: calc((100% - min(3.7333333333vw, 28px)) / 2);
}

.samantha25 .point_area .point_title {
  font-size: min(2.9333333333vw, 22px);
  font-weight: 500;
  letter-spacing: -0.05em;
  margin-top: min(1.6vw, 15px);
  text-align: center;
}

.samantha25 .point_area .point_text {
  font-size: min(2.2666666667vw, 22px);
  line-height: 1.2941176471;
  margin-top: min(0.5333333333vw, 8px);
}

.campaign_block {
  margin: clamp(55px, calc(100/1600*100vw), 100px) 0 clamp(60px, calc(120/1600*100vw), 125px);
  padding: 40px 20px;
  background-color: #f6f6f6;
}

.campaign_contents+.campaign_contents {
  margin-top: 45px;
}

.campaign_contents p {
  margin-top: 20px;
}

.campaign_contents p:has(img) {
  margin-top: 16px;
}

.campaign_title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.campaign_title span {
  display: inline-block;
  font-size: .94em;
}

.campaign_lead {
  margin-top: 24px;
}

.campaign_caption {
  font-size: 15px;
}

.campaign_caption li {
  position: relative;
  padding-left: 1em;
  margin-top: 12px;
}

.campaign_caption li::before {
  content: "*";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  translate: 0 25%;
  line-height: 1;
  font-size: 20px;
}

.l_letter {
  font-size: 24px;
}

.s_letter {
  font-size: 14px;
}

/* メインビジュアル */
.mv01__ttl .pc {
  display: none;
}

.mv01__ttl .sp {
  display: block;
  width: 100%;
  height: auto;
}

.title_block h2 {
  font-size: clamp(24px, calc(32/1600*100vw), 40px);
  text-align: center;
  padding-inline: 20px;
}

/* もともとのCSSの調整*/
.block01__inner::after {
  content: "";
  display: block;
  clear: both;
}

.block02__img--05 {
  order: 4 !important;
}

.block02__img--06 {
  order: 5 !important;
}

.footer__logo {
  width: clamp(145px, 60%, 390px);
}

@media screen and (min-width: 769px) {
  .sp_only {
    display: none;
  }

  .pc_only {
    display: block;
  }

  @keyframes mv_animation_first {
    0% {
      opacity: 1;
    }

    30% {
      opacity: 0;
    }

    70% {
      opacity: 0;
    }

    86% {
      opacity: 1;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes mv_animation_second {
    0% {
      opacity: 0;
    }

    30% {
      opacity: 1;
    }

    70% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .mv01__ttl .sp {
    display: none;
  }

  .mv01__ttl .pc {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
  }

  .mv01__ttl .pc .pc_img01 {
    animation: mv_animation_first 12s infinite linear;
    position: relative;
    z-index: 0;
  }

  .mv01__ttl .pc .pc_img02 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    animation: mv_animation_second 16s infinite linear;
  }

  /* コンテンツエリア */
  .add2504_block {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 11.03337%;
  }

  .add2504_block .flex {
    display: flex;
    align-items: flex-end;
    gap: 30px;
  }

  .add2504_block .flex.center_latout {
    justify-content: center;
  }

  .add2504_block .flex._reverse {
    flex-direction: row-reverse;
  }

  .add2504_block .products {
    margin: 5.33333vw 0 0;
  }

  .add2504_block .flex .img_block {
    width: 50%;
    max-width: 620px;
  }

  .add2504_block .flex .txt_block {
    width: fit-content;

  }

  .add2504_block .products p {
    font-size: 18px;
    font-size: clamp(10px, .97403vw, 18px);
    line-height: 1.66667;
    margin: 0 0 30px;
  }

  .add2504_block .products ul li {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    font-size: clamp(10px, .70346vw, 13px);
    line-height: 1.53846;
  }

  ._2504change {
    margin-top: 100px;
  }

  .add2504_block02 {
    margin-top: 80px;
  }

  .block2504_block02 .block02__mv {
    flex-direction: row-reverse;
  }

  .block01.bg_2504_01 {
    padding-top: 80px;
    background: url(/img/samantha/block2504_bg01.jpg) no-repeat top center /cover;
  }

  .block01.bg_2504_02 {
    background: url(/img/samantha/block2504_bg02.jpg) no-repeat top center /cover;
  }

  /* コンテンツエリア */

  .bag_pumps_block {
    background: url(/img/samantha/bg_pink.png);
    padding: min(9vw, 90px) min(7.2vw, 72px) min(6vw, 60px);
    margin-top: 84px;
  }

  .bag_pumps_block .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 0;
  }

  .bag_pumps_block .inner::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* background-color: #fff;*/
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }

  .bag_pumps_block .title_block {
    order: 2;
    margin-top: min(3.2vw, 32px);
  }

  .bag_pumps_block .title_block h2 {
    width: min(37vw, 400px);
    margin: auto;
  }

  .bag_pumps_block .title_block .lead {
    font-size: 11px;
    text-align: center;
    margin-top: min(1.4vw, 14px);
  }

  .bag_pumps_block .feature_block:has(.feature.bag) {
    order: 1;
    padding: 0 min(5vw, 48px);
  }

  .bag_pumps_block .feature_block:has(.feature.pumps) {
    order: 3;
    padding: 0 min(5vw, 48px);
  }

  .bag_pumps_block .item_link a {
    background-color: #fff;
  }

  .coat_block {
    margin-top: 0;
    padding-block: clamp(32px, 5vw, 80px);
    background: url(/img/samantha/bg_aqua.png) no-repeat center /cover;
    position: relative;
  }

  .coat_block::before {
    content: "";
    display: block;
    width: 100%;
    height: clamp(280px, calc(280/960*100vw), 380px);
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .coat_block .title_block {
    text-align: center;
    position: relative;
  }

  .coat_block .title_block h2 {
    width: min(25vw, 280px);
    margin: auto;
  }

  .coat_block .title_block .lead {
    font-size: clamp(14px, calc(18/1858*100vw), 18px);
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    margin-top: min(2.6vw, 100px);
  }

  .coat_block .contents_block {
    margin-top: min(8.5vw, 120px);
    position: relative;
    z-index: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .coat_block .contents_block .feature.coat {
    width: 67.5%;
    margin-top: min(2.4vw, 24px);
    position: relative;
    z-index: 1;
    padding-left: min(2vw, 20px);
    padding-right: min(2.6vw, 26px);
  }

  .coat_block .contents_block .point_list {
    width: 32.5%;
    padding-right: min(7.2vw, 72px);
    position: relative;
    z-index: 1;
  }

  .coat_block .contents_block .point_list li {
    display: flex;
    align-items: flex-end;
    margin-bottom: 12px;
  }

  .coat_block .contents_block .point_list li figure {
    width: 54%;
  }

  .coat_block .contents_block .point_list li figure img {
    width: 100%;
  }

  .coat_block .contents_block .point_list li .text_box {
    width: 36.9230769231%;
    padding-left: 12px;
  }

  .coat_block .contents_block .point_title {
    font-size: clamp(15px, calc(18/1858*100vw), 18px);
    font-weight: 500;
    letter-spacing: -0.1em;
  }

  .coat_block .contents_block .point_text {
    font-size: clamp(12px, calc(14/1858*100vw), 14px);
    line-height: 1.2941176471;
    margin-top: min(0.5333333333vw, 8px);
  }

  .coat_block .styling.coat {
    width: 100%;
    margin-top: min(2vw, 20px);
    padding: 0 min(7.2vw, 72px) min(4.8vw, 48px);
    background: url(/img/samantha/bg_aqua.png);
    position: relative;
    z-index: 0;
  }

  .coat_block .styling.coat::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1000/255;
    background: url(/img/samantha/bg_aqua.png);
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-100%);
  }

  .coat_block .item_link {
    background: url(/img/samantha/bg_aqua.png);
    margin: -1px 0 0;
    padding: 0 min(7.2vw, 72px) min(4.9vw, 52px);
  }

  .campaign_block {
    padding: 80px clamp(20px, calc(60/1600*100vw), 60px);
  }

  .campaign_inner {
    margin: 60px auto 0;
  }

  .campaign_contents+.campaign_contents {
    margin-top: 80px;
  }

  .campaign_contents p {
    margin-top: 20px;
    width: fit-content;
    margin-inline: auto;
  }

  .campaign_contents p:has(img) {
    max-width: 480px;
    margin: auto;
  }

  .campaign_title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
  }

  .campaign_title span {
    display: inline-block;
    font-size: .94em;
  }

  .campaign_lead {
    margin-top: 36px;
  }

  .campaign_caption {
    width: fit-content;
    max-width: 620px;
    margin-inline: auto;
    margin-top: 40px;
  }

  .campaign_caption li {
    position: relative;
    padding-left: 1em;
    margin-top: 12px;
  }

  .campaign_caption li::before {
    content: "*";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    translate: 0 25%;
    line-height: 1;
    font-size: 20px;
  }

  .l_letter {
    font-size: 24px;
  }

  .s_letter {
    font-size: 14px;
  }

  /* もともとの調整 */
  .block02__inner::after {
    content: "";
    display: block;
    clear: both;
  }
}

@media screen and (max-width: 768px) {
  .add2504_block {
    width: 84.26667vw;
    margin: 0 auto 10.26667vw;
  }

  .add2504_block .products {
    text-align: center;
    margin: 5.33333vw 0 0;
  }

  .add2504_block .products p {
    font-size: 3.06667vmin;
    line-height: 1.73913;
    margin: 0 0 4.93333vw;

  }

  .add2504_block .products ul li {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.4vmin;
    line-height: 1.38889;
  }

  ._2504change .block01__img--02::after {
    display: none;
  }

  .block01.bg_2504_01 {
    padding-top: 40px;
    background: url(/img/samantha/block2504_bg01_sp.jpg) no-repeat top center /cover;
  }

  .block01.bg_2504_01 .block01__img--02 {
    margin-bottom: 40px;
  }

  .block01.bg_2504_02 {
    background: url(/img/samantha/block2504_bg02_sp.jpg) no-repeat top center /cover;
  }

  .block01.bg_2504_02 .block01__img--02 {
    margin-bottom: 40px;
  }

  /* コンテンツエリア */
  .bag_pumps_block {
    background: url(/img/samantha/bg_pink.png);
    padding-top: min(5.6vw, 45px);
    padding-bottom: 1px;
    margin-top: 40px;
  }

  .bag_pumps_block .inner {
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) calc(100% - min(22.6666666667vw, 170px)), rgba(255, 255, 255, 0) calc(100% - min(22.6666666667vw, 170px)), rgba(255, 255, 255, 0) 100%);
    padding-top: min(14.4vw, 108px);
    position: relative;
    z-index: 0;
  }

  .bag_pumps_block .inner::before {
    content: "";
    display: block;
    width: min(125.3333333333vw, 1000px);
    aspect-ratio: 940/800;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }

  .bag_pumps_block .title_block {
    width: min(66.6666666667vw, 500px);
    margin: auto;
  }

  .bag_pumps_block .title_block h2 {
    width: min(64vw, 480px);
    margin: auto;
  }

  .bag_pumps_block .title_block .lead {
    font-size: min(2.6666666667vw, 20px);
    text-align: center;
    margin-top: min(4.6666666667vw, 35px);
    color: #2F1E24;
    font-weight: 500;
  }

  .bag_pumps_block .feature_block {
    padding: 0 min(9.3333333333vw, 70px) min(5.3333333333vw, 40px);
  }

  .bag_pumps_block .feature_block:has(.bag) {
    margin-top: min(3.2vw, 32px);
  }

  .bag_pumps_block .item_link a {
    background-color: #fff;
  }

  .coat_block {
    margin-top: min(14.9333333333vw, 112px);
  }

  .coat_block .title_block {
    width: min(88vw, 720px);
    margin: auto;
    text-align: center;
  }

  .coat_block .title_block h2 {
    width: min(44.4vw, 360px);
    margin: auto;
  }

  .coat_block .title_block .lead {
    font-size: min(2.6666666667vw, 20px);
    text-align: center;
    margin-top: min(4.6666666667vw, 35px);
    color: #2F1E24;
    font-weight: 500;
  }

  .coat_block .contents_block {
    margin-top: clamp(32px, 6.6666666667vw, 60px);
    padding-block: clamp(24px, 6.6666666667vw, 60px);
    background: url(/img/samantha/bg_aqua.png);
    position: relative;
    z-index: 0;
  }

  .coat_block .contents_block .point_list {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: min(3.7333333333vw, 28px);
    margin-top: min(5.3333333333vw, 40px);
    padding: 0 min(7.3333333333vw, 55px);
  }

  .coat_block .contents_block .point_list li {
    width: calc((100% - min(3.7333333333vw, 28px)) / 2);
  }

  .coat_block .contents_block .point_title {
    font-size: min(2.9333333333vw, 22px);
    font-weight: 500;
    letter-spacing: -0.0125;
    margin-top: min(1.6vw, 15px);
    text-align: center;
  }

  .coat_block .contents_block .point_text {
    font-size: min(2.2666666667vw, 22px);
    line-height: 1.2941176471;
    margin-top: min(0.5333333333vw, 8px);
  }

  .coat_block .styling.coat {
    margin-top: min(5.8666666667vw, 50px);
    position: relative;
    z-index: 0;
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) calc(100% - 70.6666666667vw), rgba(255, 255, 255, 0) calc(100% - 70.6666666667vw), rgba(255, 255, 255, 0) 100%);
  }

}