/* ================================================
   不眠LP：画像で実装されていたパーツをコーディング化
   ・追従バナー（p-chase）／不眠症薬の種類（比較表）／セット見出しのバッジ／フッター吹き出し
   ================================================ */

/* ---------- 追従バナー「24時間診療！診療予約はこちら」 ---------- */
.ichase { container-type: inline-size; text-decoration: none; }
.ichase__card {
  --u: calc(100cqw / 178);
  position: relative;
  display: block;
  width: calc(165 * var(--u));
  height: calc(124 * var(--u));
  margin: calc(14 * var(--u)) 0 calc(14 * var(--u)) calc(13 * var(--u));
  border: calc(2 * var(--u)) solid #fff;
  border-right: 0;
  border-radius: calc(8 * var(--u)) 0 0 calc(8 * var(--u));
  background: linear-gradient(120deg, #e37e73 0%, #edad45 100%);
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .22);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.ichase__tag {
  position: absolute; left: calc(9 * var(--u)); top: calc(9 * var(--u));
  width: calc(145 * var(--u)); height: calc(40 * var(--u));
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(4 * var(--u)); background: #fff;
  color: #e3735f; font-size: calc(16.5 * var(--u)); white-space: nowrap;
}
.ichase__tag b { font-family: "Inter", sans-serif; font-weight: 800; font-size: calc(31 * var(--u)); margin-right: calc(1 * var(--u)); line-height: 1; }
.ichase__main {
  position: absolute; left: calc(18 * var(--u)); top: calc(60 * var(--u));
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(6 * var(--u));
  font-size: calc(24 * var(--u)); letter-spacing: calc(.5 * var(--u)); white-space: nowrap;
  text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .12);
}
.ichase__main small { font-size: calc(17 * var(--u)); }
.ichase__play {
  position: absolute; left: calc(125 * var(--u)); top: calc(74 * var(--u));
  width: calc(22 * var(--u)); height: calc(22 * var(--u));
  border-radius: 50%; background: #fdf3ea;
}
.ichase__play::before {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-color: transparent transparent transparent #e3735f;
  border-width: calc(5 * var(--u)) 0 calc(5 * var(--u)) calc(7.5 * var(--u));
}

/* ---------- 不眠症薬の種類（比較表） ---------- */
.ikind { margin-top: min(16px, 1.5533980583vw); }
.ikind__pc { margin-left: -2px; width: calc(100% + 4px) !important; }
.ikind table { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; font-family: "Noto Sans JP", sans-serif; }
.ikind ul { margin: 0; padding: 0; list-style: none; }
.ikind li { position: relative; padding-left: 1em; text-align: left; }
.ikind li::before { content: "・"; position: absolute; left: -.05em; top: 0; }
.ikind img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ikind small { display: block; font-weight: 400; }

/* PC：行＝お薬／列＝対象・効果・デメリット */
.ikind__pc col.is-drug { width: 22.6%; }
.ikind thead td { padding: 0; background: transparent; border: 0; height: auto; }
.ikind th, .ikind td { border: 0; }
.ikind__pc thead th {
  height: min(48px, 4.66vw); padding: 0; text-align: center; vertical-align: middle;
  background: #5e7196; color: #fff; border-radius: min(4px, .39vw) min(4px, .39vw) 0 0;
  font-size: min(20px, 1.9417475728vw); font-weight: 700; letter-spacing: .1em;
}
.ikind__pc tbody th {
  padding: min(12px, 1.17vw) min(10px, .97vw);
  background: #c7d8e9; border-radius: min(4px, .39vw);
  color: #323f61; font-size: min(25px, 2.43vw); font-weight: 700; line-height: 1.3; letter-spacing: .06em; text-align: center;
}
.ikind__pc tbody th img { width: min(120px, 11.65vw); margin-bottom: min(8px, .78vw); }
.ikind__pc tbody th small { margin-top: min(4px, .39vw); color: #444; font-size: min(17px, 1.6504854369vw); letter-spacing: 0; }
.ikind__pc tbody td {
  height: min(136px, 13.2vw);
  padding: min(10px, .97vw) min(26px, 2.52vw);
  background: #fbfbfb; color: #444; vertical-align: middle;
  font-size: min(17px, 1.6504854369vw); font-weight: 500; line-height: 1.45; letter-spacing: .06em;
}
.ikind__pc li + li { margin-top: min(6px, .58vw); }
.ikind__pc .ikind__target { text-align: center; color: #323f61; font-size: min(21px, 2.0388349515vw); font-weight: 700; line-height: 1.45; }
.ikind__pc .ikind__same { height: min(150px, 14.56vw); }
.ikind__same-in { display: flex; align-items: center; justify-content: center; gap: min(24px, 2.33vw); color: #323f61; font-size: min(26px, 2.5242718447vw); font-weight: 700; letter-spacing: .06em; }
.ikind__pc .ikind__same img { width: min(124px, 12.04vw); margin: 0; }

/* SP：PCと同じく 行＝お薬（1列目）／列＝対象・効果・デメリット */
.ikind__sp { display: none; }
@media screen and (max-width: 760px) {
  .ikind { margin-top: 0; }
  .ikind table { border-spacing: 1px; }
  .ikind__pc { margin-left: -1px; width: calc(100% + 2px) !important; }
  .ikind__pc col.is-drug { width: 27%; }
  .ikind__pc col.is-target { width: 21%; }
  .ikind__pc thead th { height: 32px; border-radius: 4px 4px 0 0; font-size: 13px; letter-spacing: .04em; }
  .ikind__pc tbody th { padding: 8px 3px; border-radius: 4px; font-size: 13px; line-height: 1.25; letter-spacing: 0; }
  .ikind__pc tbody th img { width: 100%; max-width: 72px; margin-bottom: 5px; }
  .ikind__pc tbody th small { margin-top: 2px; font-size: 9.5px; line-height: 1.3; }
  .ikind__pc tbody td { height: auto; padding: 8px 4px 8px 5px; font-size: 11px; line-height: 1.45; letter-spacing: 0; }
  .ikind__pc li br { display: none; }
  .ikind__pc li + li { margin-top: 5px; }
  .ikind__pc .ikind__target { padding: 8px 2px; font-size: 12px; line-height: 1.5; }
  .ikind__pc .ikind__same { height: auto; padding: 12px 6px; }
  .ikind__same-in { gap: 10px; font-size: 15px; }
  .ikind__pc .ikind__same img { width: 64px; }
}

/* ---------- セット見出しのバッジ「御用聞きDr.」 ---------- */
.imenu-badge {
  container-type: inline-size;
  position: relative;
  display: block;
  flex-shrink: 0;
  aspect-ratio: 548 / 151;
  margin: 0;
}
.imenu-badge__in { --u: calc(100cqw / 548); position: absolute; inset: 0; }
.imenu-badge__box {
  position: absolute; left: calc(24 * var(--u)); top: calc(27 * var(--u)); right: 0; bottom: calc(1 * var(--u));
  display: flex; align-items: center; justify-content: center; padding-left: calc(60 * var(--u));
  background: #c7d8e9; border: calc(3.5 * var(--u)) solid #323f61; border-radius: calc(8 * var(--u));
  color: #323f61; font-family: "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: calc(62 * var(--u)); line-height: 1; letter-spacing: calc(2 * var(--u)); white-space: nowrap;
}
.imenu-badge__ico { position: absolute; z-index: 1; left: 0; top: 0; width: calc(97 * var(--u)); height: calc(97 * var(--u)); display: block; }

/* ---------- フッター吹き出し「24時間診療予約受付中！」 ---------- */
.ifoot-mouth {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 503 / 86;
  margin-top: 0;
  margin-bottom: min(15px, 1.46vw) !important;
  border-radius: min(9px, .87vw);
  background: #fff;
  color: #444; font-family: "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: min(16px, 1.5533980583vw); line-height: 1; letter-spacing: .06em; white-space: nowrap;
}
.ifoot-mouth::after {
  content: ""; position: absolute; left: 50%; top: calc(100% - 1px); transform: translateX(-50%);
  width: min(8px, .78vw); height: min(8px, .78vw);
  background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media screen and (max-width: 760px) {
  .ifoot-mouth { margin-bottom: 15px !important; border-radius: 10px; font-size: 17px; }
  .ifoot-mouth::after { width: 9px; height: 9px; }
}