/*--------------------------------------------------------
症例
--------------------------------------------------------*/
.p-entry__edit-buttons {
   z-index: 1;
}

.p-article__edit-button {
   background: #ef5179;
}


/*--------------------------------------------------------
画像ギャラリー
--------------------------------------------------------*/
.slider {
   margin: 0 auto 30px;
}

/* メイン画像エリア */
.slider-main {
   position: relative;
   overflow: hidden;
   aspect-ratio: 4/3;
}

.slider-main img {
   display: block;
   margin: 0 auto;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center center;
}

/* ナビゲーションボタン */
.slider-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   border: none;
   background: rgba(0, 0, 0, .25);
   width: 36px;
   height: 36px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}

.slider-nav:hover {
   background: rgba(0, 0, 0, .35);
}

.slider-nav.prev {
   left: 8px;
}

.slider-nav.prev::before {
   position: absolute;
   content: '';
   top: 12px;
   left: 14px;
   width: 9px;
   height: 9px;
   border-top: 3px solid rgba(250, 250, 250, .85);
   border-right: 3px solid rgba(250, 250, 250, .85);
   -webkit-transform: rotate(-135deg);
   transform: rotate(-135deg);
}

.slider-nav.next {
   right: 8px;
}

.slider-nav.next::before {
   position: absolute;
   content: '';
   top: 12px;
   right: 14px;
   width: 9px;
   height: 9px;
   border-top: 3px solid rgba(250, 250, 250, .85);
   border-right: 3px solid rgba(250, 250, 250, .85);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

/* サムネイルエリア */
.slider-thumbs {
   width: 100%;
   margin-top: 20px;
   padding-bottom: 15px;
   overflow-x: auto;
   white-space: nowrap;
}

.slider-thumbs::-webkit-scrollbar {
   width: 0;
   height: 5px;
}

.slider-thumbs::-webkit-scrollbar-track {
   background: #fff;
}

.slider-thumbs::-webkit-scrollbar-thumb {
   background: #fce2e9;
   border-radius: 5px;
}

.slider-thumbs::-webkit-scrollbar-thumb:hover {
   background: #fcd4df;
}

/* サムネボタン */
.thumb {
   display: inline-block;
   width: 120px;
   height: 80px;
   padding: 0;
   overflow: hidden;
   border: 2px solid transparent;
}

.thumb:not(:last-child) {
   margin-right: 10px;
}

.thumb img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.thumb.is-active {
   border-color: #ef5179;
}

@media screen and (max-width: 768px) {
   .slider {
      margin: 0 auto 20px;
   }

   .slider-thumbs {
      margin-top: 10px;
   }

   .slider-nav {
      width: 30px;
      height: 30px;
   }

   .slider-nav.prev::before {
      top: 10px;
      left: 11px;
      width: 8px;
      height: 8px;
   }

   .slider-nav.next::before {
      top: 10px;
      right: 11px;
      width: 8px;
      height: 8px;
   }

   .thumb {
      width: 100px;
      height: 65px;
   }

}


/*--------------------------------------------------------
モニター症例情報
--------------------------------------------------------*/
.p-entry__review-info {
   background: #f9f9f9;
   padding: 30px;
   margin: 0 0 50px;
   border-left: 3px solid #ef5179;
}

.p-entry__review-info__title {
   color: #ef5179;
   font-size: 20px;
   font-weight: bold;
   margin-bottom: 20px;
   padding-bottom: 15px;
   border-bottom: 2px solid #ef5179;
}

.p-entry__review-info__content {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.p-entry__review-info__item {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 12px 0;
   border-bottom: 1px solid #e0e0e0;
}

.p-entry__review-info__item:last-child {
   border-bottom: none;
}

.p-entry__review-info__label {
   font-weight: bold;
   min-width: 120px;
   font-size: 15px;
   margin-bottom: 10px;
}

.p-entry__review-info__value {
   font-size: 15px;
   flex: 1;
   line-height: 1.7;
   margin-bottom: 10px;
}

.p-entry__review-info__value a {
   color: #ef5179;
   text-decoration: none;
   font-weight: bold;
   transition: opacity .3s;
}

.p-entry__review-info__value a:hover {
   opacity: .7;
   text-decoration: underline;
}

.p-entry__review-info__value span {
   display: block;
}

@media screen and (max-width: 768px) {

   /* モニター症例情報 */
   .p-entry__review-info {
      padding: 20px;
      border-left: 2px solid #ef5179;
   }

   .p-entry__review-info__title {
      font-size: 18px;
   }

   .p-entry__review-info__item {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
   }

   .p-entry__review-info__label,
   .p-entry__review-info__value {
      font-size: 14px;
   }
}


/*--------------------------------------------------------
経過報告セクション
--------------------------------------------------------*/
.p-entry__progress-section {
   background: white;
   padding: 40px;
   border: 2px solid #e7e7e7;
}

.p-entry__progress-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30px;
   padding-bottom: 20px;
   border-bottom: 3px solid #ef5179;
}

.p-entry__progress-title {
   color: #ef5179;
   font-size: 24px;
   font-weight: bold;
   margin: 0;
}

.p-entry__progress-add-button {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 28px;
   background-color: #ef5179;
   color: white;
   text-decoration: none;
   border-radius: 50px;
   font-weight: bold;
   font-size: 16px;
   transition: all .3s;
}

.p-entry__progress-add-button:hover {
   background-color: #ef5179;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(240, 43, 154, .4);
   color: white;
}

.p-entry__progress-add-button .button-icon {
   font-size: 22px;
   font-weight: bold;
}

.p-entry__progress-add-button .button-text {
   white-space: nowrap;
}

/* 経過報告アイテム */
.p-progress-item {
   background: #f9f9f9;
   padding: 30px;
   margin-left: 15px;
   border-left: 3px solid #ef5179;
}

/* 画像の横並び表示 */
.p-progress-item__thumbnail {
   overflow-x: auto;
   white-space: nowrap;
   padding-bottom: 10px;
   margin-bottom: 20px;
}

.p-progress-item__thumbnail::-webkit-scrollbar {
   width: 0;
   height: 5px;
}

.p-progress-item__thumbnail::-webkit-scrollbar-track {
   background: #fff;
}

.p-progress-item__thumbnail::-webkit-scrollbar-thumb {
   background: #fce2e9;
   border-radius: 5px;
}

.p-progress-item__thumbnail::-webkit-scrollbar-thumb:hover {
   background: #fcd4df;
}

.p-thumbnail-item {
   display: inline-block;
   width: 100%;
   max-width: 600px;
   aspect-ratio: 4/3;
}

.p-thumbnail-item:not(:last-child) {
   margin-right: 10px;
}

.p-thumbnail-item img {
   display: block;
   margin: 0 auto;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center center;
   transition: transform .3s;
}

/* 経過日数 */
.p-progress-item__info {
   padding: 20px;
   background: white;
   border-radius: 8px;
}

.p-progress-item__info-item {
   display: flex;
   align-items: center;
   gap: 10px;
}

.p-progress-item__info-item .label {
   font-weight: bold;
   white-space: nowrap;
}

/* 空の状態 */
.p-entry__progress-empty {
   text-align: center;
   padding: 50px 20px;
   color: #999;
}

.p-entry__progress-empty p {
   font-size: 18px;
   margin-bottom: 15px;
}

.p-entry__progress-empty .empty-message-subtext {
   color: #ef5179;
   font-weight: bold;
   font-size: 16px;
}

/* 報告する */
.p-entry__report {
   margin: 15px 0;
}

@media screen and (max-width: 768px) {

   .p-entry__progress-section {
      padding: 25px 20px;
      border: 1px solid #e7e7e7;
   }

   .p-entry__progress-header {
      flex-direction: column;
      align-items: stretch;
      gap: 15px;
      padding-bottom: 0px;
      border-bottom: none;
   }

   .p-entry__progress-title {
      font-size: 18px;
      text-align: center;
   }

   .p-entry__progress-add-button {
      justify-content: center;
      width: 100%;
      font-size: 15px;
   }

   .p-progress-item {
      padding: 20px;
      margin-left: 0;
      border-left: 2px solid #ef5179;
   }

   .p-progress-item__info {
      padding: 15px;
   }

}

/* アンカーリンクでジャンプした時のハイライト効果 */
.p-progress-item:target {
   animation: highlight 2s ease-in-out;
   border-left-color: #FFD700;
}

@keyframes highlight {

   0%,
   100% {
      background-color: #f9f9f9;
   }

   50% {
      background-color: #fff3cd;
   }
}