@charset "UTF-8";
/* デフォルト */
/* レスポンシブ設定 */
@media screen and (min-width: 321px) {
  .ssp {
    display: none;
  }
}
@media screen and (min-width: 541px) {
  .sp {
    display: none;
  }
}
@media screen and (max-width: 540px) {
  .pc {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .tb {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .nb {
    display: none;
  }
}
.kv {
  padding: 0;
}

.main-copy {
  padding: 150px 0 115px;
  background: url(../img/maincopy_pc.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width:768px) {
  .main-copy {
    padding-top: 50px;
  }
}
@media screen and (max-width:540px) {
  .main-copy {
    padding: 50px 0 85px;
    background: url(../img/maincopy_sp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}
.main-copy h2 {
  margin-bottom: 80px;
  font-size: 45px;
  text-align: left;
}
@media screen and (max-width:768px) {
  .main-copy h2 {
    font-size: 35px;
    margin-bottom: 50px;
  }
}
@media screen and (max-width:540px) {
  .main-copy h2 {
    font-size: 27px;
    line-height: 1.5;
    margin-bottom: 45px;
  }
}
@media screen and (max-width:768px) {
  .main-copy p {
    text-shadow: 0px 0px 0px white, 0px 0px 0px white, 0px 0px 0px white, 0px 0px 10px white, 0px 0px 10px white, 0px 0px 10px white, 0px 0px 10px white, 0px 0px 5px white;
  }
}

/* スキンケア変化 */
.skin-care .skin-care-cards {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-bottom: 50px;
}
@media screen and (max-width:1024px) {
  .skin-care .skin-care-cards {
    flex-wrap: wrap;
  }
}
.skin-care .skin-care-cards .skin-care-card {
  width: 396px;
}
@media screen and (max-width:540px) {
  .skin-care .skin-care-cards .skin-care-card {
    width: 100%;
  }
}
.skin-care .skin-care-cards .skin-care-card .card-header {
  display: flex;
  align-items: end;
  gap: 9px;
}
.skin-care .skin-care-cards .skin-care-card .card-header h3 {
  color: #424242;
  flex: 1;
  text-align: left;
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
}
@media screen and (max-width:540px) {
  .skin-care .skin-care-cards .skin-care-card .card-header h3 {
    margin-bottom: 10px;
    padding-left: 20px;
  }
}
.skin-care .skin-care-cards .skin-care-card .card-header h3::before {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  background-color: #79d7f2;
  border-radius: 8px;
  filter: blur(1.5px);
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
}
@media screen and (max-width:540px) {
  .skin-care .skin-care-cards .skin-care-card .card-header h3::before {
    width: 13px;
    height: 13px;
  }
}
.skin-care .skin-care-cards .skin-care-card .before-after {
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: center;
}
.skin-care .skin-care-cards .skin-care-card .before-after .image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  position: relative;
}
@media screen and (max-width:540px) {
  .skin-care .skin-care-cards .skin-care-card .before-after .image-container {
    gap: 13px;
  }
}
.skin-care .skin-care-cards .skin-care-card .before-after .image-container img.skin-image {
  width: 186px;
}
@media screen and (max-width:540px) {
  .skin-care .skin-care-cards .skin-care-card .before-after .image-container img.skin-image {
    width: 156px;
  }
}
@media screen and (max-width:320px) {
  .skin-care .skin-care-cards .skin-care-card .before-after .image-container img.skin-image {
    width: 130px;
  }
}
.skin-care .skin-care-cards .skin-care-card .before-after .image-container p.image-label {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #424242;
  line-height: 1;
}
.skin-care .skin-care-cards .skin-care-card .before-after .image-container p.image-label.after {
  color: #16b0dc;
}
.skin-care .skin-care-cards .skin-care-card p.description {
  margin-top: 35px;
  line-height: 1.5;
  text-align: justify;
}
@media screen and (max-width:540px) {
  .skin-care .skin-care-cards .skin-care-card p.description {
    margin-top: 24px;
  }
}

/* サポート機能 */
.support {
  background-color: white;
}
.support .feature-cards {
  display: flex;
  gap: 41px;
  justify-content: center;
  margin-bottom: 65px;
}
@media screen and (max-width:768px) {
  .support .feature-cards {
    flex-wrap: wrap;
  }
}
@media screen and (max-width:540px) {
  .support .feature-cards {
    gap: 25px;
    margin-bottom: 50px;
  }
}
.support .feature-cards .feature-card {
  width: 325px;
  background-color: white;
  border-radius: 25px;
  box-shadow: 0px 0px 21px rgba(22, 176, 220, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 55px 6px;
}
@media screen and (max-width:540px) {
  .support .feature-cards .feature-card {
    width: 254px;
    padding: 40px 10px;
  }
}
.support .feature-cards .feature-card .card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
@media screen and (max-width:540px) {
  .support .feature-cards .feature-card .card-content {
    gap: 15px;
  }
}
.support .feature-cards .feature-card .card-content .icon-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}
@media screen and (max-width:540px) {
  .support .feature-cards .feature-card .card-content .icon-title {
    gap: 24px;
  }
}
.support .feature-cards .feature-card .card-content .icon-title.mb {
  gap: 35px;
}
@media screen and (max-width:540px) {
  .support .feature-cards .feature-card .card-content .icon-title.mb {
    gap: 30px;
  }
}
.support .feature-cards .feature-card .card-content .icon-title img.feature-icon {
  -o-object-fit: contain;
     object-fit: contain;
}
.support .feature-cards .feature-card .card-content .icon-title img.icon-1 {
  width: 72px;
  height: 89px;
}
.support .feature-cards .feature-card .card-content .icon-title img.icon-2 {
  width: 86px;
  height: 71px;
}
.support .feature-cards .feature-card .card-content .icon-title img.icon-3 {
  width: 78px;
  height: 70px;
}
@media screen and (max-width:540px) {
  .support .feature-cards .feature-card .card-content .icon-title h3 {
    font-size: 16px;
  }
}
.support .feature-cards .feature-card .card-content p {
  font-size: 18px;
  text-align: center;
  line-height: 1.5;
}
@media screen and (max-width:1024px) {
  .support .feature-cards .feature-card .card-content p {
    font-size: 16px;
  }
}
@media screen and (max-width:540px) {
  .support .feature-cards .feature-card .card-content p {
    font-size: 14px;
  }
}
.support a.cta-button .button-icon {
  width: 32px;
  height: 30px;
}

/* 関連イベントセクション */
.events .event-cards {
  display: flex;
  justify-content: center;
  gap: 37px;
  flex-wrap: wrap;
  margin-bottom: 65px;
}
@media screen and (max-width:1440px) {
  .events .event-cards {
    max-width: 1000px;
    margin: 0 auto 65px;
  }
}
@media screen and (max-width:540px) {
  .events .event-cards {
    gap: 25px;
    margin-bottom: 40px;
  }
}
.events .event-cards .event-card {
  width: 332px;
  height: 327px;
  background-color: white;
  border-radius: 19px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
@media screen and (max-width:768px) {
  .events .event-cards .event-card {
    width: 320px;
  }
}
@media screen and (max-width:540px) {
  .events .event-cards .event-card {
    width: 254px;
    height: auto;
  }
}
.events .event-cards .event-card img.event-image {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.events .event-cards .event-card .event-content {
  padding: 20px 28px;
}
.events .event-cards .event-card .event-content h3 {
  font-size: 20px;
  line-height: 1;
  text-align: left;
  margin-bottom: 10px;
}
@media screen and (max-width:540px) {
  .events .event-cards .event-card .event-content h3 {
    font-size: 16px;
  }
}
.events .event-cards .event-card .event-content p {
  line-height: 1.5;
}
@media screen and (max-width:540px) {
  .events .event-cards .event-card .event-content {
    padding: 20px 20px 40px;
  }
  .events .event-cards .event-card .event-content.pb {
    padding-bottom: 27px;
  }
}
.events p.section-description {
  margin-bottom: 0;
  color: #424242;
}

/* お知らせセクション */
.announcements .announcements-grid {
  display: flex;
  gap: 43px;
  margin-bottom: 60px;
  justify-content: center;
  flex-wrap: wrap;
}
@media screen and (max-width:540px) {
  .announcements .announcements-grid {
    gap: 25px;
  }
}
.announcements .announcements-grid a.announcement-card {
  background: white;
  border-radius: 13px;
  box-shadow: 4px 4px 11px rgba(0, 0, 0, 0.09);
  padding: 7px;
  padding-bottom: 50px;
  min-width: 320px;
  max-width: 400px;
}
@media screen and (max-width:540px) {
  .announcements .announcements-grid a.announcement-card {
    padding-bottom: 30px;
  }
}
@media screen and (max-width:320px) {
  .announcements .announcements-grid a.announcement-card {
    min-width: 250px;
    width: 90%;
  }
}
.announcements .announcements-grid a.announcement-card .card-border {
  width: 100%;
  height: 4px;
  background: #16b0dc;
  margin-bottom: 45px;
}
@media screen and (max-width:540px) {
  .announcements .announcements-grid a.announcement-card .card-border {
    margin-bottom: 35px;
  }
}
.announcements .announcements-grid a.announcement-card .card-content {
  padding: 0 23px;
}
@media screen and (max-width:540px) {
  .announcements .announcements-grid a.announcement-card .card-content {
    padding: 0 10px;
  }
}
.announcements .announcements-grid a.announcement-card .card-content .card-title {
  font-size: 18px;
  font-weight: bold;
  color: #16b0dc;
  margin-bottom: 21px;
  text-align: left;
}
@media screen and (max-width:540px) {
  .announcements .announcements-grid a.announcement-card .card-content .card-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
}
.announcements .announcements-grid a.announcement-card .card-content p {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 12px;
  min-height: 96px;
  color: #424242;
}
@media screen and (max-width:540px) {
  .announcements .announcements-grid a.announcement-card .card-content p {
    font-size: 14px;
  }
}
.announcements .announcements-grid a.announcement-card .card-content .badge {
  display: inline-block;
  background: white;
  border: 1px solid #16b0dc;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  color: #16b0dc;
}
.announcements a.page-button .button-icon {
  width: 24px;
  left: 50px;
}
@media screen and (max-width:540px) {
  .announcements a.page-button .button-icon {
    left: 40px;
  }
}

/* プロフィールセクション */
.profile {
  background-image: url(../img/profile-bg.png);
  background-size: cover;
  background-position: center;
}
@media screen and (max-width:768px) {
  .profile {
    padding: 70px 0;
  }
}
@media screen and (max-width:540px) {
  .profile {
    background-image: url(../img/profile-bg_sp.png);
    background-size: cover;
    background-position: center;
  }
}
.profile .profile-content {
  display: flex;
  align-items: center;
  gap: 68px;
  justify-content: center;
}
@media screen and (max-width:768px) {
  .profile .profile-content {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 40px;
    margin-bottom: 0;
  }
}
.profile .profile-content .profile-image {
  position: relative;
  width: 255px;
  height: 255px;
}
.profile .profile-content .profile-image img {
  position: relative;
  width: 254px;
  height: 254px;
  border-radius: 50%;
}
.profile .profile-content .profile-info {
  max-width: 533px;
}
.profile .profile-content .profile-info .profile-title {
  font-size: 24px;
  font-weight: 500;
  color: #16b0dc;
  margin-bottom: 20px;
  text-align: left;
}
@media screen and (max-width:540px) {
  .profile .profile-content .profile-info .profile-title {
    text-align: center;
    font-size: 20px;
  }
}
.profile .profile-content .profile-info img {
  width: 158px;
  margin: 0 auto 30px;
}
.profile .profile-content .profile-info ul.profile-points {
  margin-bottom: 31px;
  padding-left: 15px;
}
.profile .profile-content .profile-info ul.profile-points li {
  font-size: 18px;
  margin-bottom: 8px;
  list-style: none;
  position: relative;
  text-align: left;
}
@media screen and (max-width:540px) {
  .profile .profile-content .profile-info ul.profile-points li {
    font-size: 14px;
  }
}
.profile .profile-content .profile-info ul.profile-points li::before {
  position: absolute;
  content: "・";
  font-size: 18px;
  left: -20px;
}
@media screen and (max-width:540px) {
  .profile .profile-content .profile-info ul.profile-points li::before {
    font-size: 14px;
  }
}
.profile .profile-content .profile-info .social-buttons {
  display: flex;
  gap: 10px;
}
@media screen and (max-width:540px) {
  .profile .profile-content .profile-info .social-buttons {
    justify-content: flex-start;
  }
}
.profile .profile-content .profile-info .social-buttons a.social-btn {
  background: white;
  border: 1px solid #16b0dc;
  color: #16b0dc;
  padding: 10px 20px;
  padding-left: 35px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color 0.3s;
  position: relative;
}
.profile .profile-content .profile-info .social-buttons a.social-btn:hover {
  background: #f8f9fa;
}
.profile .profile-content .profile-info .social-buttons a.social-btn .sns-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

/* CTAセクション */
.cta {
  position: relative;
  background-image: url(../img/cta-bg.png);
  background-size: cover;
  background-position: center;
  text-align: center;
}
@media screen and (max-width:540px) {
  .cta {
    background-image: url(../img/cta-bg_sp.png);
    background-size: cover;
    background-position: center;
  }
}
.cta .cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 173, 222, 0.58);
  -webkit-backdrop-filter: blur(2px) brightness(110%);
          backdrop-filter: blur(2px) brightness(110%);
}
.cta .cta-content {
  position: relative;
  z-index: 1;
  max-width: 463px;
  margin: 0 auto;
}
.cta .cta-content h2.cta-title {
  font-size: 36px;
  font-weight: bold;
  color: white;
  text-shadow: 0px 0px 10px rgba(0, 49, 76, 0.46);
  margin-bottom: 52px;
  line-height: 1.6;
}
@media screen and (max-width:540px) {
  .cta .cta-content h2.cta-title {
    margin-bottom: 35px;
    font-size: 22px;
  }
}
.cta .cta-content p.cta-text {
  font-size: 18px;
  font-weight: bold;
  color: white;
  line-height: 1.6;
  margin-bottom: 60px;
}
@media screen and (max-width:540px) {
  .cta .cta-content p.cta-text {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 40px;
  }
}/*# sourceMappingURL=style.css.map */