@charset "utf-8";
.width_900 {
  width:80vw;
  padding-bottom: 50px;
  margin-top: -1px;
}
@media screen and (min-width:1000px) {
  .width_900 {
    width:900px;
    padding-bottom: 200px;
  }
}
.sub_header figure {
  width:100%;
  height:140px;
}
.sub_header figure img {
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 60% 50%;
}
.bg_attachment {
  background-repeat: repeat;
  background-size: 500px;
}
@media screen and (min-width:768px) {
  .sub_header figure {
    height:auto;
  }
  .sub_header figure img {
    object-position: center;
}
  .bg_attachment {
    background-size: 800px;
  }
}
.bg_attachment.orange {
  background-image: url(../images/bg_orange.png);
}
.bg_attachment.yuzu {
  background-image: url(../images/bg_yuzu.png);
}
.bg_attachment.herbal {
  background-image: url(../images/bg_herbal.png);
}


/* コンテンツ　*/
.contents {
  background: #fff;
  padding:60px 5%;
  text-align: center;
}
.sent_name_en {
  font-size: clamp(20px, 6vw, 50px);
}
.sent_name_ja {
  font-size: clamp(12px, 3vw, 18px);
  margin-bottom: 50px;
}
.orange .sent_name_en, .orange .sent_name_ja {
  color:#ea5514;
}
.yuzu .sent_name_en, .yuzu .sent_name_ja {
  color:#f6ac00;
}
.herbal .sent_name_en, .herbal .sent_name_ja {
  color:#27c2ab;
}

/* point01　*/
.point01 {
  margin-bottom:60px;
}
.image_gel {
  width:50%;
  margin: auto;
  margin-bottom: 30px;
}
.image_gel img {
  width:100%;
  object-fit: cover;
}
.txt_point01 {
  width:100%;
  text-align: center;
  margin: auto 0;
}
.ttl_point {
  font-size: clamp(18px, 3vw, 25px);
  margin-bottom: -10px;
  line-height: 1.3em;
}
.deco_wave {
  width:80%;
}
.txt_point01 .flex {
  justify-content: center;
  margin: 10px auto 0;
  width: 100%;
  min-width: 150px;
  gap: 0 5px;
}
.item_efficacy {
  width:11vw;
  min-width: 65px;
  height: 11vw;
  min-height: 65px;
  border-radius: 50%;
  border: solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin-top:-5px;
}
.item_efficacy p {
  line-height: 1.2em;
  font-size: clamp(12px, 1.8vw, 20px);
  font-weight: 300;
  margin-top: 0.1em;
  letter-spacing: 0;
}

@media screen and (min-width:768px) {
  .contents {
    padding:100px 10%;
  }
  .sent_name_ja {
    margin-bottom: 80px;
  }

  .point01 {
    margin-bottom:100px;
  }
  .image_gel {
    width:42%;
    margin-bottom: auto;
  }
  .txt_point01 {
    width: 52%;
  }
  .txt_point01 .flex {
    margin: 30px auto 0;
    gap: 0 20px;
  }
  .item_efficacy {
    max-width:125px;
    max-height:125px;
    border-radius: 50%;
    margin-top:0;
  }
}

/* point02　*/
.point02 {
  border-radius: 30px;
  padding:10%;
  margin-bottom: 50px;
}
.orange .point02 {
  background: #feefd8;
}
.ttl_point02 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.serum98 {
  width: 70%;
}
.beauty_serum {
  width: 40%;
  margin-top: -100px;
}
.ingredients {
  gap:10px;
  margin-bottom: 20px;
}
.item_ingredients {
  font-size:clamp(12px, 3vw, 20px);
  border-radius: 20px;
  background: #fff;
  padding: 0 1em;
}
.item_ingredients:last-child {
  background: none;
}
.item_ingredients p {
  letter-spacing: 0;
}
.note, .notes {
  font-size: 10px;
  letter-spacing: -0.06em;
  line-height: 1.5em;
  text-align: justify;
}
span.note {
  margin: 0 0.2em 0 -0.1em;
}
.notes {
  width:110%;
}
.notes span {
  display: inline-block;    
  transform: scale(0.9);
  transform-origin: left top; /* 左上基準で縮小 */
}

@media screen and (min-width:768px) {
  .point02 {
    border-radius: 50px;
    padding:6% 10%;
    margin-bottom: 100px;
  }
  .ttl_point02 {
    margin-bottom: 30px;
  }
  .serum98 {
    width: 55%;
  }
  .ingredients {
    gap:10px;
    justify-content: center;
    margin-bottom: 30px;
  }
  .notes {
    width:100%;
  }
  .notes span {
    transform: scale(1);
  }
}

/* point03　*/
.point03 {
  margin-bottom: 50px;
}
.ttl_point03 {
  z-index: 1;
}
.ttl_point03, .seven_roles {
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.point03 .deco_wave {
  width:90%;
}
.seventh_role {
  width:38%;
}
.mainichi {
  width:60%;
}
.point03 .ttl_point {
  font-size: clamp(18px, 4.5vw, 30px);
}
.model {
  width:50%;
  margin-left: -4vw;
  margin-top: -15%;
}
.txt_point03 {
  width:52%;
}
.roles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 50px;
}
.item_roles {
  border-bottom: solid 1px #feefd8;
  width: 100%;
  text-align: left;
}
.item_roles p {
  font-size:clamp(13px, 2.3vw, 20px);
  letter-spacing: 0;
}
.item_roles p::before {
  content:"";
  width:0.9em;
  height:0.9em;
  display: inline-block;
  background-image: url(../images/icon_check_or.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 0.5em -0.1em 0;
}
.seven_roles .notes {
  position: absolute;
  left: 0;
  bottom: 0;
}

@media screen and (min-width:768px){
  .point03 {
    margin-bottom: 100px;
  }
  .point03 .deco_wave {
    width:100%;
  }
  .seventh_role {
    width:30%;
  }
  .mainichi {
    width:70%;
  }
  .model {
    margin-top: 0;
  }
  .txt_point03 {
    width:50%;
  }
  .roles {
    gap: 10px;
    margin-bottom: 30px;
  }
  .seven_roles .notes {
    position: static;
  }
}
@media screen and (min-width:1000px){
  .model {
    margin-left: -45px;
  }
}

/* point04,05　*/
.point0405 {
  justify-content: space-between;
  margin-bottom: 50px;
  gap: 40px;
}
.point04, .point05 {
  width:100%;
}
.heading_bar {
  font-size:clamp(16px, 4vw, 21px);
  letter-spacing: 0.02em;
  color:#fff;
  line-height: 1.8em;
  border-radius: 30px;
  text-align: center;
  width:100%;
}
.orange .heading_bar {
  background: #ea5514;
}
.yuzu .heading_bar {
  background: #f6ac00;
}
.description, .point0405 .notes, .point0405 img {
  padding:0 6%;
}
.description {
  letter-spacing: 0;
  text-align: justify;
  margin: 01em auto 0.5em;
  font-size:clamp(13px, 3vw, 16px);
}
.point0405 img {
  width: 80%;
  height:auto;
  margin:10px auto;
}
.point05 .notes {
  width: 100%;
}

@media screen and (min-width:768px) {
  .point0405 {
    margin-bottom: 100px;
    gap: 0;
  }
  .point04, .point05 {
    width:48%;
  }
  .point05 .notes {
    width: 90%;
  }
}

/* link　*/
.view_bt {
  text-align: center;
}
.orange .view_bt a {
  background: linear-gradient(
  to bottom,
  #ea5514 0%,#ee7b3e 50%,#ea5514 100%
  );
}
.yuzu .view_bt a {
  background: linear-gradient(
  to bottom,
  #f6ac00 0%,#fbcc60 50%,#f6ac00 100%
  );
}
.herbal .view_bt a {
  background: linear-gradient(
  to bottom,
  #27c2ab 0%,#52cebc 50%,#27c2ab 100%
  );
}
.view_bt a {
  display: inline-block;
  color: #fff;
  padding: 0 1em 0 1.5em;
  line-height: 2.4em;
  font-size: clamp(16px, 1.5vw, 22px);
  border-radius: 30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.view_bt a::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  background-image: url(../images/arw_wh.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 0 0 0.5em;
  transition: transform 0.3s ease;
}
.view_bt a:hover::after{
	transform: translateX(0.2em);
}


/* OTHER PRODUCT　*/
.h2_ttl {
  line-height: 1.2em;
  font-size: clamp(30px, 6vw, 50px);
  margin-bottom: 1em;
}
.other_product {
  text-align: center;
  padding: 50px 0;
}
.lu_list_product {
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.lu_item_product {
  margin:0;
}
.lu_product_ttl {
  height: 80px;
}
@media screen and (min-width:768px) {
  .other_product {
    padding: 100px 0;
  }
  .lu_list_product {
    gap: 40px;
  }
  .lu_product_ttl {
    height: auto;
  }
}


/* YUZU color　*/
.yuzu .ttl_point, .yuzu p {
  color:#f6ac00;
}
.yuzu .point01 .ttl_point {
  letter-spacing: 0;
}
.yuzu .item_efficacy {
  border: solid 1px #f6ac00;
  min-width: 58px;
  min-height: 58px;
}
.yuzu .item_efficacy p {
  font-size: clamp(11px, 1.8vw, 20px);
}
.yuzu .item_efficacy:first-child p {
  letter-spacing: -0.1em;
}
.yuzu .item_roles p::before {
  background-image: url(../images/icon_check_yl.svg);
}
.yuzu .txt_point01 {
  min-width: 160px;
}
.yuzu .txt_point01 .flex {
  gap: 10px 5px;
  margin-bottom: 10px;
  width: 100%;
}
.yuzu .point01 .notes {
  padding: 0 10%;
}
@media screen and (min-width:768px) {
  .yuzu .txt_point01 .flex {
    margin-bottom: 30px;
  }
}

.yuzu .point02-A .heading_bar {
  margin-bottom: 1em;
  font-size: clamp(16px, 4vw, 28px);
}
.yuzu .point02-A{
  margin-bottom:28px;
}
.yuzu .point02-A .flex {
  flex-wrap:nowrap;
  align-items: center;
}
.konnyaku {
  width: 45%;
  margin: 0 0 0 -15px;
}
.yuzu .point02-A .description {
  width:55%;
  font-size: clamp(12px, 2vw, 20px);
  line-height: 1.5em;
  padding: 0 0 0 5%;
}
.yuzu .point02-B {
  background: #fffbdc;
  padding:13% 8%;
  border-radius: 30px;
  margin-bottom: 80px;
  position: relative;
}
.yuzu .point02-B .ttl_point {
  font-size: clamp(18px, 4vw, 35px);
  letter-spacing: 0.1em;
}
.yuzu .point02-B .flex {
  justify-content: space-around;
  margin-top: 3px;
}
.yuzu .point02-B .flex div {
  width:100%;
}
.yuzu .point02-B .description {
  text-align: justify;
  margin-bottom: 1em;
  letter-spacing: 0;
  padding: 0;
}
.beauty_serum_yl {
  width:112px;
  position: absolute;
  bottom: -70px;
  right: 10px;
}
@media screen and (min-width:768px) {
  .yuzu .point02-A, .yuzu .point02-B{
   margin-bottom:100px;
  }
  .yuzu .point02-A .flex {
    padding: 0 5%;
  }
  .konnyaku {
    width: 40%;
    margin: auto;
  }
  .yuzu .point02-A .description {
    width:50%;
  }
  .yuzu .point02-B {
   padding:5% 0;
   border-radius: 50px;
  }
  .yuzu .point02-B .flex {
    width: 470px;
    margin: 30px auto 0;
  }
  .yuzu .point02-B .flex div {
    width:50%;
  }
  .beauty_serum_yl {
    width:200px;
    position: static;
  }
}

/* HERBAL color　*/
.herbal .ttl_point, .herbal p {
  color:#27c2ab;
}
.herbal .point01 {
  flex-wrap: wrap;
}
.herbal .point01 .deco_wave {
  margin-bottom: 20px;
}
.herbal .point01 .ttl_point {
  letter-spacing: 0;
  margin-bottom: 0;
}

.point_gr {
  width: 75%;
}
.illust_pores {
  width:100%;
  margin-bottom: 30px;
}
@media screen and (min-width:768px) {
  .illust_pores {
    margin-bottom: 20px;
  }
  .herbal .point01 .notes {
    width:90%;
    margin: auto;
  }
}

.herbal .point02 {
  background: #f2f7e2;
  position: relative;
}
.herbal .point02 .ttl_point {
  font-size: clamp(18px, 4vw, 35px);
  letter-spacing: 0.1em;
}
.beauty_serum_gr {
  position: absolute;
  top:20%;
  right:-30px;
  width:30vw;
}
.herbal .point02 .flex {
  align-items: center;
}
.herbal .model {
  margin-left: -7.5vw;
  margin-top: 20px;
  width: 90%;
}
.herbal .description {
  padding:0;
  margin-top: 2em;
}

@media screen and (min-width:768px) {
  .beauty_serum_gr {
    width:25vw;
    right:10px;
  }
}
@media screen and (min-width:1000px) {
  .beauty_serum_gr {
    top:20px;
    right:-50px;
    width:200px;
  }
  .herbal .model {
    margin-left: -12.5%;
    width: 50%;
  }
  .herbal .description {
    margin-right: 1%;
    margin-top: auto;
    margin-bottom: auto;
    width:50%;
  }
}