@charset "utf-8";
/* =============================================
   池松クリニック カスタマイズ
   base.css（参考サイトオリジナル）を上書き
============================================= */

/* カラー変更: teal → blue */
:root {
  --accentcolor: #1A6CB4;
  --accentcolor-hover: #2B85D4;
  --bg-green: #0F4C81;
}

/* KV: kv.png を使用 */
.kv {
  background-image: url('../images/kv.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.kv::after {
  background: rgba(0, 0, 0, .40);
}

/* KV: 英語クリニック名 - 枠線リセット */
.kv_copy .clinic-name-en {
  font-family: "Cormorant", serif;
  font-size: clamp(12px, 2vw, 18px);
  line-height: 1.4em;
  margin: 5px 0 0;
  letter-spacing: 0.15em;
  opacity: 0.7;
  color: #FFFFFF;
  border: none;
  padding: 0;
  display: block;
  text-align: left;
  font-weight: 400;
}

/* ロゴ: SVGではなくPNG対応 */
header.fixed-header .logo {
  max-width: 360px;
}
/* KV上: ロゴを白に */
header.fixed-header .logo img.light_logo {
  filter: brightness(0) invert(1);
}
/* スクロール後: ロゴ元の色に戻す */
header.fixed-header.is-fixed .logo img.light_logo {
  filter: none;
}

/* デスクトップ: ヘッダーを透過でKVに重ねる */
@media (min-width: 1025px) {
  header.fixed-header {
    position: absolute;
    background: transparent;
  }
  header.fixed-header nav ul li a {
    color: #FFFFFF;
  }
  header.fixed-header.is-fixed {
    position: fixed;
    background: rgba(255, 255, 255, .85);
    padding: 10px 40px;
  }
  header.fixed-header.is-fixed nav ul li a {
    color: var(--fontcolor);
  }
  header.fixed-header.is-fixed .logo {
    max-width: 280px;
  }
}

/* SP: ロゴ元の色 */
@media (max-width: 1024px) {
  header.fixed-header .logo img.light_logo {
    filter: none;
  }
}

/* about背景テキスト色 */
#about::before {
  color: var(--accentcolor);
  opacity: 0.06;
}
#clinic::before {
  color: var(--accentcolor);
  opacity: 0.06;
}

/* message背景色 */
#message {
  background-color: var(--bg-green);
}
.bg_green {
  background-color: var(--bg-green);
}

/* スマホでは院長写真を文章の上に表示 */
@media screen and (max-width:768px) {
  #message .col2 .img_area {
    order: -1;
  }
}

/* ポイントのアイコン色 */
ul.list li:before {
  color: var(--accentcolor);
}

/* 診療時間テーブル */
#hours {
  position: relative;
}
#hours::before {
  content: "hours";
  text-transform: uppercase;
  color: var(--accentcolor);
  font-family: "Cormorant", serif;
  font-size: clamp(55px, 10vw, 130px);
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: 0.1em;
  opacity: 0.06;
  position: absolute;
  right: 5%;
  top: -2vw;
}
#hours h2 {
  text-align: center;
}
#hours h2::after {
  left: 50%;
  transform: translateX(-50%);
}
.time_table .circle {
  color: var(--accentcolor);
  font-weight: bold;
}
.time_table .closed_day .tag_des {
  background-color: var(--accentcolor);
  border-color: var(--accentcolor);
}
.time_table .note {
  font-size: 14px;
  text-align: left;
  margin-top: 20px;
  color: #888;
}

/* 当院の特徴: 横長画像（16:9）対応 */
.point__block li img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* フッター */
.copy {
  background-color: var(--accentcolor);
}
footer .logo {
  max-width: 350px;
}

/* ボタン */
.btn {
  background-color: var(--accentcolor);
}
.link-btn li > a[href] {
  background: var(--accentcolor);
}
.link-btn li > a:hover {
  background-color: var(--accentcolor-hover);
}

/* SP版ナビborder色 */
@media (max-width: 1024px) {
  header.fixed-header nav ul li {
    border: 1px solid var(--accentcolor);
  }
  header.fixed-header nav ul li a .sub {
    color: var(--accentcolor);
  }
}