@charset "UTF-8";

html,
body {
  color: #666;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

img {
  max-width: 100%;
}
sup {
  font-size: 70%;
  vertical-align: top;
  position: relative;
  top: -0.1em;
}
.a-font-en {
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  font-weight: 300;
  font-style: normal;
}

section > .inner {
  max-width: 960px;
  margin: 0 auto;
}
section > .inner-wide {
  max-width: none;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fade-in {
  animation: fadeIn 0.5s forwards; /* 0.5秒かけてフェードイン */
}
.fade-out {
  animation: fadeOut 0.5s forwards; /* 0.5秒かけてフェードアウト */
}
@keyframes anime {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }

  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes glow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes glow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes glow-reverse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes glow-reverse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

/* PC*/
.pc {
  display: block;
}
.sp {
  display: none;
}
.pc_none {
  display: none !important;
}
.sp_none {
  display: inline-block !important;
}
.tr {
  text-align: right;
}
.h3 {
  text-align: center;
}


.l-main{
  background-color: #F5F5F5;
  position: relative;
  overflow: hidden;
}

.l-inner{
  position: relative;
  width: 100%;
  max-width: 1020px;
  height: inherit;
  padding: 0 40px;
  margin-inline: auto;
}

.l-inner-narrow{
  max-width: 900px;
}

.p-fv{
  position: relative;
  min-height: 1824px;
}


.p-fv__img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  
}
.p-fv img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-fv__cloud{
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
  height: 1014px;
  mix-blend-mode: lighten;
}

.p-fv__container{
  position: relative;
  z-index: 1;
  padding-top: 946px;
}

.p-fv__title{
  text-align: center;
}

.p-fv__title-main{
  font-size: 50px;
  line-height: 1.2;

 margin: 0;
  margin-bottom: 7px;
}

.p-fv__title-sub{
 font-size:  14px;
}


.p-fv__texts{
  margin-top:187px ;
  text-align: center;
}

.p-fv__text-head{
  font-size: 18px;
  color: #333333;
  font-weight: 500;
}

.p-fv__text{
  margin-top: 30px;
  font-size: 14px;
  color: #333333;

}

.p-fv__nav{
  margin-top: 110px;
  background: #fff;
  width: 100%;
  padding-block: 9px;
}

.p-fv__navList{
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-fv__navItem{
  position: relative;
  max-width: 122px;
flex: 1;
height: 60px;
text-align: center;
border-right: 1px solid #333333;
&:last-child{
  border-right: none;
}
}

.p-fv__navLink{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
font-family: "itc-avant-garde-gothic-pro", sans-serif;
transition: opacity 0.3s ease-out;
font-size:  10px;
font-weight: 500;
color: #333333;


}

.p-fv__navLink:hover{
 opacity: 0.6;
}

.p-fv__under{
  margin-top:110px ;

}

.p-fv__under-texts{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  text-align: center;
}

.p-fv__under-texts p{
  font-size: 17px;
color: #333333;
 
}

.p-fv__under-texts p span{
  font-size: 21px;

}

.p-fv__under-small{
  margin-top: 14px;
  font-size: 12px;
  text-align: center;
  color: #333333;
}

.p-fv__under-small span{
  font-size: 15px;
}

.p-fv__cloud{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 1014px;
}

.p-concept {
  padding-block: 135px;
}


.c-headline1__sub {
  font-size: 14px;
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  font-weight: 500;
  color: #333333;
}

.c-headline1__main {
  font-size: 20px;
  margin: 0;
  color: #333333;
  font-weight: 500;
}

.c-headline2__sub {
  font-size: 20px;
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  font-weight: 500;
  color: #333333;
}

.c-headline2__main {
  font-size: 13px;
  margin: 0;
  color: #333333;
}

.p-concept__wrap {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px 20px;
}

.p-concept__item {
  background: #83BCDB;
  padding: 25px 30px;
}

.p-concept__item-title {
  color: #fff;
}

.p-concept__item-text {
font-size: 13px;
margin-top: 15px;
color: #333333;
font-weight: 400;
}


.p-concept__item-text span{
  font-size: 8px;
  vertical-align: super;
}

.p-howto {
  position: relative;
  padding-block: 334px 100px;
}

.p-howto__bg {
  position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;

}

.p-howto__bg img{
  width: 100%;
  height: calc(100% + 120px);
  object-fit: cover;
}

.p-howto__container {
  position: relative;
  z-index: 1;
}



.p-howto__wrap {
  margin-top: 60px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.p-howto__item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.p-howto__item-head {
  background: #fff;
  border-radius: 100vmax;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  color: #333333;
}

.p-howto__item-body {
  font-size: 13px;
  color: #333333;
}
.p-howto__item-body p span{
  font-weight: 500;
  text-decoration: underline;
}

.p-howto__item-body p a {
  transition: opacity 0.3s ease-out;
@media(any-hover: hover) {
  &:hover {
    opacity: 0.6;
    cursor: pointer;
  }
}
}



.p-benefits {
padding-block: 109px 133px;
}
.p-benefits__content {
  border: 1px solid #83BEDB;
  padding: 23px 23px 23px 23px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 23px;
}

.p-benefits__img {
  width: 171px;
  height: auto;
  margin-left: -50px;
 
 }
 .p-benefits__img img{
   width: 100%;
   height: auto;
   object-fit: cover;
 }
.p-benefits__title {
  font-size: 16px;
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  color: #333333;
}

.p-benefits__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-benefits__item {
}

.p-benefits__head {
display: flex;
align-items: center;
column-gap: 10px;
color: #333333;
}
.p-benefits__head span.bold {
  font-weight: 500;
  font-size:  14px;
}

.p-benefits__head span.blue {
 font-size: 12px;
  color: #83BCDB;
}

.p-benefits__text {
  font-size: 12px;
  color: #333333;
  max-width: 600px;
}

.p-benefits__explain{
  font-size: 8px;
}

.mt--45{
  margin-top: -45px;
}


.mt-10{
  margin-top: 10px;
}

.mt-20{
  margin-top: 20px;
}

.mt-25{
  margin-top: 25px;
}

.mt-30{
  margin-top: 30px;
}

.mt-35{
  margin-top: 35px;
}

.mt-45{
  margin-top: 45px;
}

.mt-50{
  margin-top: 50px;
}

.animated__fadeIn{
  translate: 0 20px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, translate 0.3s ease-in-out;
}

.animated__fadeIn.js-show {
  translate: 0 0;
  opacity: 1;
}


.p-products {
}

.p-products__inner {
  max-width: 1060px;
}
.p-products__container {
  margin-top: 125px;
  display: flex;
  flex-direction: column;
  row-gap: 70px;
  
}

.p-products__item {
  display: flex;
  justify-content: flex-end;
  column-gap: 10px;
  }

.p-products__item-img {
  position: relative;
  width:  calc(calc(480 / 960) * 100%);
 
}

.p-products__img{
  position: relative;
  z-index: 1;
}
.p-products__img.--1 {
  width: 480px;
  height: auto;
}

.p-products__img.--2 {
  width: 444px;
  height: auto;
  margin-left: auto;
}

.p-products__img.--3 {
  width: 546px;
  position: relative;
}

.p-products__img.--4 {
  width: 405px;
  margin-left: 35px;
}

.p-products__img.--5 {
  width: 400px;
  margin-left: 80px;
}

.p-products__img.--6 {
  width: 400px;
  margin-left: 80px;
}

.p-products__img img{
  width: 100%;
  height: auto;
  object-fit: cover;
}
.p-products__light {
  /* -webkit-mask-image: url('../../img/usr/br/2026sunscreen/light.png');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-image: url('../../img/usr/br/2026sunscreen/light.png');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center; */
  mix-blend-mode: screen;
  position: absolute;
  height: auto;
  overflow: hidden;
  z-index: 0;
  width: 407px;
}

.p-products__light.is-light {
 animation: 1.5s ease-in-out forwards  fadeIn;
 
}

/* 光エフェクト */
.p-products__light.is-light::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,0.8) 50%,
    transparent 60%
  );
  mix-blend-mode: screen;
  animation: light_animation 1.5s ease-in-out forwards;

}


@-webkit-keyframes light_animation {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 0.9; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.p-products__light.--1 {
  top: -175px;
  left: 108px;
}

.p-products__light.--2 {
  top: -116px;
  left: -73px;
}

.p-products__light.--3 {
  top: -65px;
  left: 0px;
}

.p-products__light.--4 {
  top: -44px;
  left: 164px;
}

.p-products__light.--5 {
  top: -132px;
  left: -40px;
}

.p-products__light.--6 {
  top: -132px;
  left: -40px;
}

.p-products__light img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

.p-products__img-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 89px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-products__label {
  width: 100%;
  height: auto;
}

.p-products__label img{
  
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  }


  .p-products__explain{
    font-size:  8px;
    color: #666666;
    margin-top: 15px;
    margin-left: 70px;
  }
.p-products__body {
  width: calc(calc(454 / 960) * 100%);
  color: #333333;
  position: relative;
  z-index: 2;
}

.p-products__item-title {
  font-size:  18px;
  font-weight: 500;
}

.p-products__item-title span {
  font-size: 10px;
  vertical-align: super;
}

.p-products__item-text {
  margin-top: 15px;
  font-size: 14px;
}

.p-products__item-text span {
  font-size: 8px;
  vertical-align: super;
}

.p-products__item-point {
  display: flex;
  column-gap:5px ;
}

.p-products__item-point li {
  font-size: 10px;
background: #fff;
border-radius: 12px;
padding: 2px 5px 5px 5px;
}

.p-products__text2 {
}

.p-products__text3{
  font-size:  8px;
}

.p-products__color {
 margin-top: 15px;
}

.p-products__color-text {
  font-size: 12px;
  font-weight: 400;
}

.p-products__color-items {
  display: flex;
  align-items: center;
  gap: 15px;
}

.p-products__color-item {
  display: flex;
  align-items: center;
  column-gap: 5px;
  font-size: 12px;
}

.p-products__color-item .color {
  width: 25px;
  height: 25px;
  border-radius: 100%;
}

.p-products__color-item .color.--1 {
  background: #F9CEA7;
}

.p-products__color-item .color.--2 {
  background: #F4C38E;
}
.p-products__color-item .color.--3 {
  background: #FFE2E0;
}


.p-products__color-item .color.--4 {
  background: #FDDBBF;
}
.p-products__color-item .color.--5 {
  background: #FFFFFF;
}


.p-products__color-item .color.--6 {
  background: #FCECE0;
}


.p-products__color-item .color.--7 {
  background: #FFE1C1;
}


.p-products__color-item .color-name {
  font-size: 12px;
}

.p-products__link {
  background: #84BDDB;
  color: #fff;
  font-size: 18px;
  text-align: center;
  width: 295px;
  padding-block: 15px;
  display: block;
}



.p-products__link.light {
  background: #66DBDB;
}


.p-line-up {
  padding-top: 211px;
  padding-bottom: 100px;
}

.p-line-up__content {
  margin-top: 50px;
}

.p-line-up__img {
  width: 100%;
  height: auto;
}

.p-line-up__img img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

.p-faq{
  padding-block: 100px 200px;
}

.p-faq__content {
  padding-top: 50px;
}

.p-faq-items {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  color: #333333;

}

.p-faq-item {
  overflow: hidden;
}

.p-faq-item-question {
  display: flex;
  align-items: center;
  column-gap: 8px;
  padding-block: 10px;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #333333;
}

.p-faq-item-question::before{
  position: absolute;
top: 50%;
translate: 0 -50%;
  right: 20px;
  content: '';
  width: 20px;
  height: 2px;
  background: #333333;
}

.p-faq-item-question::after{
  position: absolute;
top: 50%;
translate: 0 -50%;
  right: 29px;
  content: '';
  width: 2px;
  height: 20px;
  background: #333333;
  transition: rotate 0.3s ease;
}

.p-faq-item-question:hover{
  cursor: pointer;
}

.p-faq-item-question-icon{
  width: 26px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-faq-item-question-icon img{
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 1;
}

.p-faq-item-question-text {
  font-size: 18px;

}

.p-faq-item.is-opened .p-faq-item-question::after {
  rotate: 90deg;
}


.p-faq-item-answer-text {
  padding-block: 20px;
  font-size:  13px;
}

.p-faq-item-answer {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 0.3s ease, opacity 0.3s ease;
}

.is-opened .p-faq-item-answer {
  opacity: 1;
}


.p-faq__explain {
  font-size: 11px;
  color: #666666;
  margin-top: 80px;

}
/* 
.block-cookie-consent{
  display: none;
} */