/*

  症例写真

================================================================
*/
.under-sv.only-case {
  height: 180px;}
.p-case,
.p-case-detaile {
  margin-bottom: 80px;}
.p-case-detaile .inner {
  width: 1000px;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.under-sv.only-case {
  height: 40vw;}
.p-case,
.p-case-detaile {
  margin-top: 5vw;
  margin-bottom: 10vw;}
.p-case-detaile .inner {
  width: 100%;
  padding: 0 5vw;}
}

/*

  症例写真：一覧

================================================================
*/
/* リスト：既存リストを改修
--------------------------------------------------------------*/
.p-case .case-list .movie {
  width: 100%;}
.p-case .case-list .movie iframe {
  pointer-events: none;
  width: 100%;
  aspect-ratio: 16/9;
  border: none;}

/* ページナビゲーション
--------------------------------------------------------------*/
.p-case .search {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 50px;}
.p-case .search div + div {
  margin-left: 10px;}
.p-case .search div select {
  width: 300px;
  height: 50px;
  padding: 0 30px 0 15px;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 10px auto;
  background-image: url(../img/under/case/icon_select.png);
  background-color: #fff;
  border: 1px solid #676767;
  font-size: 14px;
  color: #676767;}
.p-case .search div input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  border-radius: 6px;
  background: linear-gradient(90deg, #EBCDAF, #ED9790);
  color: #fff;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-case .search {
  justify-content: space-between;
  margin-bottom: 5vw;
  padding: 0 5vw;}
.p-case .search div + div {
  margin-left: 0;}
.p-case .search div select {
  width: 36.5vw;
  height: 12vw;
  padding: 0 6vw 0 3vw;
  border-radius: 1vw;
  background-position: right 3vw center;
  background-size: 2vw auto;
  font-size: 3.2vw;}
.p-case .search div input {
  width: 14vw;
  height: 12vw;
  border-radius: 1vw;}
}

/*

  症例写真：詳細

================================================================
*/
/* h2：タイトル
--------------------------------------------------------------*/
.p-case-detaile h2 {
  position: relative;
  margin-bottom: 30px;
  padding: 10px 30px;
  text-align: center;
  background-color: #fff;
  border: solid #ED9790;
  border-width: 0 2px;
  font-weight: 600;
  font-size: 22px;
  color: #ED9790;
  line-height: 1.4;
  letter-spacing: .05em;}
.p-case-detaile h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 2px;
  background-color: #ED9790;}
.p-case-detaile h2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 2px;
  background-color: #ED9790;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-case-detaile h2 {
  margin-bottom: 5vw;
  padding: 2.5vw 3vw;
  font-size: 4vw;}
.p-case-detaile h2:after {
  width: 3vw;}
.p-case-detaile h2:before {
  width: 3vw;}
}

/* 症例動画
--------------------------------------------------------------*/
.p-case-detaile .slide-case-detaile .box {
  width: 900px;}
.p-case-detaile .slide-case-detaile .box + .box {
  margin-left: 20px;}
.p-case-detaile .slide-case-detaile .box iframe {
  pointer-events: none;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: none;}
.p-case-detaile .slide-case-detaile .slick-arrow {
  position: absolute;
  top: 50%;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  background-color: #fff;
  z-index: 2;
  font-size: 0;}
.p-case-detaile .slide-case-detaile .slick-prev {
  background-image: url(https://tclinic-official.com/cms/wp-content/themes/tclinic/img/common/arw-l.svg);
  left: 0;}
.p-case-detaile .slide-case-detaile .slick-next {
  background-image: url(https://tclinic-official.com/cms/wp-content/themes/tclinic/img/common/arw-r.svg);
  right: 0;}
.p-case-detaile .slide-case-detaile .box picture{
  display:block;
  aspect-ratio: 16/9;
  background:#000;
}
.p-case-detaile .slide-case-detaile .box picture img{
  object-fit: contain;
  height:100%;
  margin:0 auto;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-case-detaile .slide-case-detaile .box {
  width: 90vw;}
.p-case-detaile .slide-case-detaile .box + .box {
  margin-left: 5vw;}
.p-case-detaile .slide-case-detaile .slick-arrow {
  width: 8vw;
  height: 8vw;
  margin-top: -4vw;
  background-size: 4vw;}
.p-case-detaile .slide-case-detaile .slick-prev {
  left: -5vw;}
.p-case-detaile .slide-case-detaile .slick-next {
  right: -5vw;}
}

/* 詳細
--------------------------------------------------------------*/
.p-case-detaile .layout {
  width: 100%;
  margin-top: 40px;}
.p-case-detaile .layout table {
  width: 100%;
  line-height: 1.6;
  border-top: 1px solid rgba(198, 195, 196, .5);
  color: #676767;}
.p-case-detaile .layout table tr {
  border-bottom: 1px solid rgba(198, 195, 196, .5);}
.p-case-detaile .layout table th {
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
  padding: 10px 0;
  font-weight: 500;
  color: #C7645C;}
.p-case-detaile .layout table td {
  padding: 12px 0;
  padding-left: 20px;
  font-size: 14px;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-case-detaile .layout {
  margin-top: 5vw;}
.p-case-detaile .layout table {
  font-size: 3.4vw;}
.p-case-detaile .layout table th {
  padding: 2.5vw 0;}
.p-case-detaile .layout table td {
  padding: 2.5vw 0;
  padding-left: 5vw; 
  font-size: 3.4vw;}
.p-case-detaile .layout table td i {
  font-size: 3.7vw;}
}

/* ドクターコメント
--------------------------------------------------------------*/
.p-case-detaile .doc-come {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;}
.p-case-detaile .doc-come .box {
  position: relative;
  flex: 1;
  margin-right: 30px;
  padding: 20px 30px;
  border-radius: 6px;
  background-color: #fff;
  line-height: 1.7;
  font-size: 15px;
  color: #676767;}
.p-case-detaile .doc-come figure {
  width: 150px;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-case-detaile .doc-come {
  flex-direction: column;
  margin-top: 5vw;}
.p-case-detaile .doc-come .box {
  width: 100%;
  margin-right: 0;
  padding: 3vw 5vw;
  border-radius: 2vw;
  line-height: 1.6;
  font-size: 3.3vw;}
.p-case-detaile .doc-come .box:after {
  pointer-events: none;
  content: '';
  position: absolute;
  bottom: -2.8vw;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -2vw;
  border-style: solid;
  border-width: 3vw 2vw 0 2vw;
  border-color: #fff transparent transparent transparent;}
.p-case-detaile .doc-come figure {
  width: 30vw;
  margin-top: 5vw;}
}

/* 施術ページへのリンク＆一覧へ
--------------------------------------------------------------*/
.p-case-detaile .case-bottom {
  display: flex;
  justify-content: center;
  margin-top: 30px;}
.p-case-detaile .case-bottom a {
  font-size: 16px;}
.p-case-detaile .case-bottom a + a {
  margin-left: 20px;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.p-case-detaile .case-bottom {
  justify-content: space-between;
  margin-top: 10vw;}
.p-case-detaile .case-bottom a {
  width: 45vw;
  padding: 0;
  font-size: 3.4vw;}
.p-case-detaile .case-bottom a:after {
  display: none;}
.p-case-detaile .case-bottom a + a {
  margin-left: 3vw;}
}