/*==================================================
　renewal_style
===================================*/

/*================== 共通button ==================*/

#renewal-page .cosme_pink {
  width: 260px;
  height: 60px;
  border: none;
  border-radius: 100vmax;
  background-color: var(--color-accent-pink);
  color: var(--color-white);
  margin-block-start: 40px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#renewal-page .cosme_pink:hover {
  background-color: var(--color-white);
  color: var(--color-accent-pink);
  border: 2px solid var(--color-accent-pink);
}

/*================== -introduction- FV ==================*/

#renewal-page #renewal-introduction {
  margin-block-end: var(--space-60);
}

#renewal-page #renewal-introduction .hero {
  background-image: url("../media/category_top.jpg");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 565px;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  top: -16px;
}

#renewal-page #renewal-introduction .hero::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 15%;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, #fff, transparent);
}

#renewal-page #renewal-introduction .hero-inline {
  text-align: center;
  position: relative;
  bottom: -440px;
}

#renewal-page #renewal-introduction .hero-word {
  min-width: 260px;
  display: inline-block;
  width: 33vw;
}

#renewal-page #renewal-introduction .hero-two-column {
  margin-block-start: var(--space-80);
}

#renewal-page #renewal-introduction .tittle-img {
  display: flex;
  position: relative;
  max-width: 500px;
  margin-inline: auto;
}

#renewal-page #renewal-introduction .tittle-img .img-left {
  width: 100%;
  object-fit: cover;
  position: relative;
  right: 8%;
  margin-right: 0vw;
}

#renewal-page #renewal-introduction .tittle-img .img-left img {
  min-width: 220px;
  max-width: 500px;
  width: 66vw;
}

#renewal-page #renewal-introduction .tittle-img .img-right {
  width: 22%;
  transform: translateY(clamp(-80px, -8vh, -40px));
  margin-right: 2vw;
}

#renewal-page #renewal-introduction .tittle-img .img-right img {
  max-height: 425px;
}

/*================== -description- ==================*/

#renewal-page #renewal-description {
  background-color: var(--color-description-bg);
  padding-block: var(--space-40);
}

#renewal-page #renewal-description .description-img {
  min-height: 200px;
  max-height: 350px;
  object-fit: cover;
}

#renewal-page #renewal-description p {
  margin-block: 20px;
}

#renewal-page #renewal-description .button-position {
  display: flex;
  justify-content: space-around;
  gap: 0 20px;
}

#renewal-page #renewal-description .description-button {
  color: var(--color-accent-gold);
  background-color: var(--color-white);
  width: 160px;
  height: 40px;
  border: 1px solid var(--color-accent-gold);
}

#renewal-page #renewal-description .description-button:hover {
  color: var(--color-white);
  background-color: var(--color-accent-gold);
}

#renewal-page #renewal-description .bs-banner {
  display: flex;
  justify-content: center;
  margin-block-start: 20px;
  margin-inline: auto;
  min-width: 260px;
  width: 50%;
}

/*================== -pickup- slider ==================*/

#renewal-page #renewal-pickup {
  margin-block-start: var(--space-80);
  margin-block-end: var(--space-100);
}

/*---------------------------
スライダーのためのcss
----------------------------*/

#renewal-page #renewal-pickup .pickup-slider {
  width: 100%;
  margin: 0;
}

#renewal-page #renewal-pickup .slick-list {
  overflow: hidden;
  padding-right: calc((100vw - 86.52vw) / 2);
}

#renewal-page #renewal-pickup .pickup-slider li img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

#renewal-page #renewal-pickup .pickup-slider li .title {
  font-size: var(--text-16);
  color: var(--color-accent-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 1px;
}

#renewal-page #renewal-pickup .pickup-slider li .category-position {
  display: flex;
  column-gap: 8px;
}

#renewal-page #renewal-pickup .pickup-slider li .category {
  border: 1px solid var(--color-black);
  text-align: center;
  line-height: 20px;
  white-space: nowrap;
  display: inline-block;
  padding: 2px;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

#renewal-page #renewal-pickup .pickup-slider .slick-slide {
  margin: 0 10px;
  box-sizing: border-box;
}

/*矢印の設定*/

#renewal-page #renewal-pickup .slick-prev,
#renewal-page #renewal-pickup .slick-next {
  position: absolute;
  bottom: -50px;
  cursor: pointer;
  outline: none;
  height: 32px;
  width: 32px;
}

#renewal-page #renewal-pickup .slick-prev {
  right: 90px;
}

#renewal-page #renewal-pickup .slick-next {
  right: 3.5%;
}

/*ドットナビゲーションの設定*/

#renewal-page #renewal-pickup .slick-dots {
  display: none;
}

#renewal-page #renewal-pickup .slick-dots button {
  display: none;
}

/*================== selection ==================*/

#renewal-page #renewal-selection ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#renewal-page #renewal-selection ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-block-end: 20px;
}

#renewal-page #renewal-selection ul li img {
  width: 100%;
}

#renewal-page #renewal-selection .product-item {
  position: relative;
}

#renewal-page #renewal-selection .product-item .category-circle {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-white);
  width: clamp(50px, 4.9vw, 70px);
  height: clamp(50px, 4.9vw, 70px);
  border-radius: 100vmax;
  border: 1px solid var(--color-accent-gold-secondary);
  margin: var(--space-5);
}

#renewal-page #renewal-selection .product-item p {
  color: var(--color-accent-gold);
  font-size: var(--text-9);
  letter-spacing: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#renewal-page #renewal-selection .product-title {
  color: var(--color-accent-gold);
  font-size: var(--text-14);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1px;
  padding: 10px 8px;
  line-height: 1.2;
}

#renewal-page #renewal-selection .product-desc {
  font-size: var(--text-13);
  letter-spacing: 1px;
  padding: 0px 8px 20px;
  line-height: 1.3;
}

#renewal-page #renewal-selection .product-price {
  font-size: var(--text-12);
  padding: 0px 10px;
}

#renewal-page .fadein {
  opacity: 0;
  bottom: -40px;
  position: relative;
  transition-duration: 2s;
}

#renewal-page .fadein.active {
  opacity: 1;
  bottom: 0;
}

@keyframes gokigen {

  0%,
  100% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }
}

/*================== ranking ==================*/

#renewal-page #renewal-ranking {
  margin-block-start: var(--space-120);
  margin-block-end: var(--space-80);
  text-align: center;
}

#renewal-page #renewal-ranking .product-tittle {
  color: var(--color-accent-gold);
  font-size: var(--text-14);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1px;
  padding-block-start: 10px;
  padding-inline: 8px;
  line-height: 1.2;
}

#renewal-page #renewal-ranking .product-price {
  font-size: var(--text-12);
  padding: 0px 10px;
}

#renewal-page #renewal-ranking .online-benner {
  width: 100%;
  max-width: 310px;
}

#renewal-page #renewal-ranking .online-benner-pc {
  display: none;
}

/*---------------------------
スライダーのためのcss
----------------------------*/
#renewal-page #renewal-ranking .ranking-slider {
  width: 100%;
  margin: 0 auto 40px;
}

#renewal-page #renewal-ranking .ranking-slider img {
  width: 100%;
  height: auto;
}

#renewal-page #renewal-ranking .ranking-slider li {
  position: relative;
  overflow: hidden;
  counter-increment: count;
}

#renewal-page #renewal-ranking .ranking-slider .ranking-icon::before {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 15px;
  content: attr(data-rank);
  top: 10px;
  left: 10px;
  z-index: 3;
  color: #fff;
  background-color: var(--rank-color, var(--color-black));
  line-height: 22px;
  text-align: center;
}

/* ランキング上位3位の色を上書き */
#renewal-page #renewal-ranking .rank--1 {
  --rank-color: #c4b664;
}

#renewal-page #renewal-ranking .rank--2 {
  --rank-color: #a7a7a7;
}

#renewal-page #renewal-ranking .rank--3 {
  --rank-color: #d8a06a;
}

#renewal-page #renewal-ranking .ranking-slider .slick-prev,
#renewal-page #renewal-ranking .ranking-slider .slick-next {
  position: absolute;
  top: 42%;
  cursor: pointer;
  outline: none;
  height: 32px;
  width: 32px;
}

#renewal-page #renewal-ranking .ranking-slider .slick-prev {
  left: 0;
  z-index: 1;
}

#renewal-page #renewal-ranking .ranking-slider .slick-next {
  right: 0;
}

/*ドットナビゲーションの設定*/

#renewal-page #renewal-ranking .slick-dots {
  display: none;
}

#renewal-page #renewal-ranking .slick-dots button {
  display: none;
}

/*================== trouble ==================*/

#renewal-page #renewal-trouble {
  position: relative;
  background: var(--color-accent-pink-bg);
  padding: clamp(4rem, 8vw, 6rem) 1rem;
  text-align: center;
  overflow: hidden;
  margin-block-end: var(--space-40);
}

#renewal-page #renewal-trouble svg {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(40px, 6vw, 70px);
  fill: var(--color-white);
}

#renewal-page #renewal-trouble .wave-top {
  top: 0;
}

#renewal-page #renewal-trouble .wave-bottom {
  bottom: 0;
}

#renewal-page #renewal-trouble ul {
  display: flex;
  justify-items: center;
  gap: 24px 10px;
  width: 260px;
  margin-inline: auto;
  flex-wrap: wrap;
}

#renewal-page #renewal-trouble ul li {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#renewal-page #renewal-trouble ul a {
  width: 65px;
  height: 65px;
  border-radius: 100vmax;
  background: var(--color-white);
  border: 1px solid var(--color-accent-pink);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-accent-pink);
}

#renewal-page #renewal-trouble ul li:last-child {
  font-size: var(--text-11);
  line-height: 1.2;
  letter-spacing: 1px;
}

#renewal-page #renewal-trouble ul a:hover {
  width: 65px;
  height: 65px;
  border-radius: 100vmax;
  color: var(--color-white);
  background: var(--color-accent-pink);
}

/*================== reason ==================*/

#renewal-page #renewal-reason {
  margin-block-start: var(--space-100);
}

#renewal-page #renewal-reason .reason-point .point,
#renewal-page #renewal-reason .reason-point .title {
  color: var(--color-accent-gold);
}

#renewal-page #renewal-reason .reason-point {
  margin-block-end: var(--space-40);
  margin-inline: calc(50% - 50vw);
}

#renewal-page #renewal-reason .reason-point .point {
  font-family: var(--font-serif);
  font-size: var(--text-11);
  margin-top: 20px;
}

#renewal-page #renewal-reason .reason-point .point span {
  font-size: var(--text-16);
}

#renewal-page #renewal-reason .reason-point .title {
  font-size: var(--text-18);
  line-height: 1.6;
  margin-bottom: 18px;
}

#renewal-page #renewal-reason .reason-point .img-left {
  width: 85vw;
  min-width: 300px;
  max-width: 623px;
}

#renewal-page #renewal-reason .slanted-bg02.reason-point>.full-bleed {
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

#renewal-page #renewal-reason .is-point03>.full-bleed {
  width: auto;
}

#renewal-page #renewal-reason .reason-point .img-right {
  width: 85vw;
  min-width: 300px;
  max-width: 623px;
  margin: 0 0 0 auto;
  display: block;
}

#renewal-page #renewal-reason .reason-point .img-center {
  width: 80vw;
  min-width: 300px;
  max-width: 623px;
  display: block;
  margin-inline: auto;
}

#renewal-page #renewal-reason .slanted-bg {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 400" preserveAspectRatio="none"><polygon points="0,40 1440,0 1440,360 0,400" fill="%23FEF9F1"/></svg>') no-repeat;
  background-size: cover;
  background-position: top left;
}

#renewal-page #renewal-reason .slanted-bg02 {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 400" preserveAspectRatio="none"><polygon points="0,0 1440,40 1440,400 0,360" fill="%23FEF9F1"/></svg>') no-repeat;
  background-size: cover;
  background-position: top left;
}

/*================== dr.Onishi ==================*/

#renewal-page #renewal-doctor {
  margin-block: var(--space-80);
}

#renewal-page #renewal-doctor .side01 {
  margin-block-end: 40px;
}

#renewal-page #renewal-doctor .photo {
  width: 200px;
  height: 260px;
  overflow: hidden;
  border-top-left-radius: 100vmax;
  border-top-right-radius: 100vmax;
  border: 1px solid var(--color-accent-gold);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
}

#renewal-page #renewal-doctor .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 15px;
}

#renewal-page #renewal-doctor .position {
  font-size: var(--text-13);
  text-align: center;
  line-height: 1.4;
}

#renewal-page #renewal-doctor .name {
  font-size: var(--text-18);
  color: var(--color-accent-gold);
  text-align: center;
  margin-bottom: 10px;
}

#renewal-page #renewal-doctor details table {
  width: 100%;
  line-height: 1.4;
  letter-spacing: 1.4px;
  margin-block-end: 20px;
}

#renewal-page #renewal-doctor details table tbody {
  width: 100%;
}

#renewal-page #renewal-doctor details table th {
  background-color: var(--color-description-bg);
  padding: 10px;
  text-align: center;
  font-weight: var(--font-weight-normal);
  display: table-cell;
  vertical-align: middle;
}

#renewal-page #renewal-doctor details table td {
  border: 1px solid var(--color-description-bg);
  padding: 10px;
  display: table-cell;
  vertical-align: middle;
}

/*---------------------------
アコーディオン開閉のcss
----------------------------*/

#renewal-page #renewal-doctor details {
  border: 1px solid;
  margin-top: 20px;
  cursor: pointer;
  padding: 0 10px;
}

#renewal-page #renewal-doctor details summary {
  position: relative;
  display: block;
  cursor: pointer;
  padding: 10px 20px;
}

#renewal-page #renewal-doctor details summary::-webkit-details-marker {
  display: none;
}

#renewal-page #renewal-doctor details summary:after {
  content: "＋";
  position: absolute;
  right: 0;
  transition: 0.3s;
  margin-right: 20px;
}

#renewal-page #renewal-doctor details[open] summary:after {
  transform: rotate(90deg);
}

#renewal-page #renewal-doctor details[open] .details-content {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    /* 透明 */
    transform: translateY(-10px);
    /* 上から表示 */
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/*================== dr.Onishi ==================*/

#renewal-page #renewal-about {
  padding-block: var(--space-40);
  margin-bottom: -30px;
  background-color: var(--color-about-bg);
}

#renewal-page #renewal-about .about-img_clinic {
  margin-block-end: var(--space-40);
}

#renewal-page #renewal-about .about-horizontal {
  display: flex;
  flex-direction: column;
}

#renewal-page #renewal-about .info {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  align-items: center;
  flex-wrap: nowrap;
  text-align: center;
  margin-block-end: 20px;
}

#renewal-page #renewal-about .info .title {
  background-color: var(--color-black);
  color: var(--color-white);
  width: 280px;
}

#renewal-page #renewal-about .info .content {
  width: 280px;
}

#renewal-page #renewal-about .info:nth-of-type(2) .content {
  font-size: var(--text-16);
}

#renewal-page #renewal-about .sns p {
  margin-block-start: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  font-size: var(--text-16);
}

#renewal-page #renewal-about .sns p::before {
  content: "＼";
  margin-right: 10px;
}

#renewal-page #renewal-about .sns p::after {
  content: "／";
  margin-left: 10px;
}

#renewal-page #renewal-about .sns ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px 40px;
  width: 80vw;
  margin-inline: auto;
  margin-block-start: 20px;
}

#renewal-page #renewal-about .sns ul li img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}