@charset "UTF-8";
/* 目の下のたるみ・クマ取りLP 追加スタイル（style.css は眼瞼下垂LPと共通のまま変更しない） */

/* MV：1450px以上で写真の右に重なるグラデーションを、この写真の右端の色（上→下）に合わせる。
   style.css の固定色（眼瞼下垂の写真用の灰色）のままだと帯が浮いて見えるため */
@media(min-width: 1450px){
  .p-mv__photo-fade{
    background:
      linear-gradient(to right, rgba(250,250,253,0) 70px, #fafafd 100%),
      linear-gradient(to bottom, rgb(237,245,253) 0%, rgb(237,244,253) 10%, rgb(236,243,253) 20%, rgb(235,242,253) 30%, rgb(235,242,253) 40%, rgb(211,225,244) 50%, rgb(169,190,216) 60%, rgb(101,122,148) 70%, rgb(185,197,214) 80%, rgb(165,184,208) 90%, rgb(162,183,209) 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 70px);
    mask-image:linear-gradient(to right, transparent 0, #000 70px);
  }
}

/* お悩み：見出しの長さで写真の枠が縮まないよう固定する（左右のカードで写真の大きさをそろえる） */
.p-worry__card-photo{flex-shrink:0}
/* お悩み：長い項目（._wrap）だけ、カードからはみ出さないよう折り返す（style.css は1行固定）。
   2行になってもチェックが1行目にそろうよう上端で合わせる */
.c-check-list._worry .c-check-list__item{align-items:flex-start}
.c-check-list._worry .c-check-list__icon{margin-top:4px}
.c-check-list._worry .c-check-list__text._wrap{flex:1 1 auto;min-width:0;white-space:normal}

/* 選ばれる理由02：写真の説明（style.css にはSP用の指定しかないため、PC用を足す） */
@media(min-width: 751px){
  .p-reasons__aesthetic-text-small{margin-top:20px;font-family:var(--ff-gothic);font-size:12px;line-height:1.7;letter-spacing:.6px;color:var(--c-grey)}
}
/* 説明文が空（コメントのみ）のときは余白も出さない */
.p-reasons__aesthetic-text-small:empty{display:none}

/* 目の下のたるみ・クマとは の下：クマの種類 */
.p-about__types{display:flex;flex-direction:column;gap:20px;margin:60px auto 0;width:min(1000px,100%)}
@media(max-width: 750px){
  .c-check-list._worry .c-check-list__icon{margin-top:4px}
  .p-about__types{gap:12px;margin-top:40px;padding-left:5px}
}

/* 施術の流れ：施術時間（30〜150分）。style.css は2桁どうしを前提に絶対位置で並べているため、
   3桁でも重ならないよう、数字・〜・分を左から順に並べて中央に置く */
.p-flow__time-min{left:0;right:0;width:auto;height:auto;display:flex;justify-content:center;align-items:center}
.p-flow__time-range{display:contents}
.p-flow__time-range > span:first-child{order:1}
.p-flow__time-wave{order:2;position:static;transform:none;margin:0 10px}
.p-flow__time-range > span:last-child{order:3}
.p-flow__time-unit{order:4;position:static;transform:none;align-self:flex-end;margin:0 0 20px 6px}

@media(max-width: 750px){
  .p-flow__time-wave{margin:0 4px}
  .p-flow__time-unit{margin:0 0 9px 3px}
}

/* 治療方法・費用 */
.p-price__card{min-height:0}
.p-price__item-price._small{font-size:22px;letter-spacing:1.2px}
.p-price__fee{display:flex;flex-direction:column;gap:15px;margin:40px auto 0;width:min(1000px,100%)}
.p-price__fee .c-table._price th{width:auto}
.p-price__fee .c-table._price thead th{text-align:center}
.p-price__fee .c-table._price td{text-align:center;color:var(--c-text);background:var(--c-bg)}
.p-price__fee-note{font-family:var(--ff-gothic);font-size:14px;line-height:1.8;letter-spacing:.7px;color:var(--c-grey)}

@media(max-width: 750px){
  .p-price__item-price._small{font-size:18px;letter-spacing:.9px}
  .p-price__fee{margin-top:30px}
  .p-price__fee .c-table._price th,.p-price__fee .c-table._price td{padding:8px 6px}
  .p-price__fee-note{font-size:12px}
}

/* モーダル：治療方法の比較 */
.p-compare{display:flex;flex-direction:column;gap:40px;margin:36px auto 0;padding:0 60px;max-width:1150px}
.p-compare__block{display:flex;flex-direction:column;gap:15px}
.p-compare__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.p-compare .c-table{min-width:640px}
.p-compare .c-table th,.p-compare .c-table td{vertical-align:top;line-height:1.7}
.p-compare .c-table thead th{text-align:center;vertical-align:middle}
.p-compare .c-table tbody th{white-space:nowrap}
.p-compare .c-table td{color:var(--c-text)}
.p-compare__text{font-family:var(--ff-gothic);font-size:15px;line-height:1.8;letter-spacing:.75px;color:var(--c-text)}

@media(max-width: 750px){
  .p-compare{gap:30px;margin-top:20px;padding:0 20px}
  .p-compare .c-table th,.p-compare .c-table td{padding:8px;font-size:12px}
  .p-compare__text{font-size:13px;letter-spacing:.4px}
}