@charset "UTF-8";
/* ==========================================================================
   TOPページ用「10月限定 水曜インプラント無料相談」（/lp-implant/ の ip-event と同じ見た目）
   - lp.css の ip-event 部分を変換したもの。LPを直したらこちらも合わせて直すこと
   - LPは html の font-size で 1rem=デザイン10px にしているが、TOPでは使えないため
     --ipu（=デザイン上の1px×10）に置き換え、すべて .ip-event の中に限定している
   - 表示期間は /index.html 先頭の PHP（$top_ip_event_on）で制御
   ========================================================================== */
.ip-event {
  --ipu: min(10px, calc(100vw / 136));
  color: #333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: calc(1.6 * var(--ipu));
  line-height: 1.8;
  letter-spacing: normal;
  text-align: left;
}
@media (max-width: 767px) {
  .ip-event { --ipu: calc(100vw / 39); }
}
/* PC（768px以上）はTOP用の調整デザイン（Figma 2412:783）に合わせる（2026-10-13）
   - 全体（ボタンも含む）をデザインの約72%（1u=7.19px）に縮小
   - 見える幅はデザイン上の x=88〜1833（174.47u、最大1254px）。中央寄せで、外側は白い余白 */
@media (min-width: 768px) {
  .ip-event { --ipu: min(7.19px, calc(100vw / 174.47)); max-width: calc(174.47 * var(--ipu)); margin-left: auto; margin-right: auto; padding-bottom: 56px; }
}
.ip-event *, .ip-event *::before, .ip-event *::after { box-sizing: border-box; }
.ip-event :where(h2, p) { margin: 0; padding: 0; }
.ip-event :where(img) { display: block; max-width: none; max-height: none; }
.ip-event :where(a) { color: inherit; text-decoration: none; transition: opacity .3s ease; }
.ip-event :where(a):hover { opacity: .75; }
.ip-event .ip-serif { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; }
.ip-event .ip-pc { display: block; }
.ip-event .ip-sp { display: none; }
@media (max-width: 767px) {
  .ip-event .ip-pc { display: none; }
  .ip-event .ip-sp { display: block; }
}
.ip-event br.ip-pc, .ip-event br.ip-sp { display: none; }
@media (min-width: 768px) { .ip-event br.ip-pc { display: inline; } }
@media (max-width: 767px) { .ip-event br.ip-sp { display: inline; } }
.ip-event .ip-stage { position: relative; width: calc(192 * var(--ipu)); left: 50%; margin-left: calc(-96 * var(--ipu)); }
@media (max-width: 767px) {
  .ip-event .ip-stage { width: calc(39 * var(--ipu)); margin-left: calc(-19.5 * var(--ipu)); }
}

.ip-event .ip-pc-i { display: inline; }
@media (max-width: 767px) { .ip-event .ip-pc-i { display: none; } }

.ip-event { position: relative; overflow: hidden; background: #fff; }
.ip-event .ip-stage { height: calc(86.2 * var(--ipu)); }
.ip-event .ip-stage > * { position: absolute; }
.ip-event .ip-event__bg { left: calc(73.021 * var(--ipu)); top: 0; width: calc(119.5295 * var(--ipu)); height: calc(86.2 * var(--ipu)); }
.ip-event .ip-event__fade { left: calc(73.021 * var(--ipu)); top: 0; width: calc(62.1 * var(--ipu)); height: calc(86.2 * var(--ipu)); background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.ip-event .ip-event__band { left: calc(-.6 * var(--ipu)); top: calc(15.8 * var(--ipu)); width: calc(124.6 * var(--ipu)); height: calc(59.7 * var(--ipu)); background: #e6e8ee; opacity: .72; }
.ip-event .ip-event__ribbon { left: calc(50.765 * var(--ipu)); top: calc(9.33 * var(--ipu)); width: calc(51.2 * var(--ipu)); height: calc(13.11 * var(--ipu)); color: #fff; font-weight: 500; line-height: 1; white-space: nowrap; }
.ip-event .ip-event__ribbon img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ip-event .ip-event__ribbon span { position: absolute; text-shadow: 0 calc(-.1 * var(--ipu)) 0 #93680b; }
.ip-event .ip-event__ribbon .n { left: calc(12.5 * var(--ipu)); top: calc(.3 * var(--ipu)); font-size: calc(8.2 * var(--ipu)); letter-spacing: -.02em; }
.ip-event .ip-event__ribbon .m { left: calc(20.7 * var(--ipu)); top: calc(2.5 * var(--ipu)); font-size: calc(5.3 * var(--ipu)); letter-spacing: -.02em; }
.ip-event .ip-event__ttl {
  left: 0; width: calc(152.74 * var(--ipu)); top: calc(23.3 * var(--ipu)); text-align: center;
  color: #333; font-weight: 500; font-size: calc(7.6 * var(--ipu)); line-height: 1.25; white-space: nowrap;
}
.ip-event .ip-event__ttl .c { color: #495780; }
.ip-event .ip-event__ttl .k1 { letter-spacing: -.19em; }
.ip-event .ip-event__ttl .k2 { letter-spacing: -.35em; }
.ip-event .ip-event__sub { left: 0; width: calc(152.74 * var(--ipu)); top: calc(33.5 * var(--ipu)); text-align: center; font-weight: 500; font-size: calc(3.9 * var(--ipu)); line-height: 1.25; letter-spacing: .08em; white-space: nowrap; }
.ip-event .ip-event__box {
  left: calc(33.768 * var(--ipu)); top: calc(41.291 * var(--ipu)); width: calc(85.2041 * var(--ipu)); height: calc(14.474 * var(--ipu)); background: #fff; border-radius: calc(.8 * var(--ipu)); box-shadow: 0 0 calc(.8 * var(--ipu)) rgba(0,0,0,.25);
  display: flex; align-items: center; padding-left: calc(1.6 * var(--ipu));
}
.ip-event .ip-event__date { position: relative; display: flex; align-items: flex-start; width: calc(45.3 * var(--ipu)); height: calc(8.8 * var(--ipu)); font-family: "Barlow", sans-serif; font-weight: 600; color: #495780; line-height: 1; white-space: nowrap; }
.ip-event .ip-event__date .mo { font-size: calc(5.4582 * var(--ipu)); letter-spacing: -.08em; margin-top: calc(.6 * var(--ipu)); }
.ip-event .ip-event__date .sl { position: relative; width: calc(2.4 * var(--ipu)); height: calc(7.4 * var(--ipu)); margin: calc(.7 * var(--ipu)) calc(-.2 * var(--ipu)) 0 calc(-.4 * var(--ipu)); }
.ip-event .ip-event__date .sl::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #495780; transform: rotate(17.7deg); }
.ip-event .ip-event__date .d { font-size: calc(10.9163 * var(--ipu)); letter-spacing: -.03em; margin-top: calc(-.6 * var(--ipu)); }
.ip-event .ip-event__date .d2 { letter-spacing: -.02em; }
.ip-event .ip-event__date .w {
  display: flex; align-items: center; justify-content: center; width: calc(3.2976 * var(--ipu)); height: calc(3.0702 * var(--ipu)); margin: calc(4.8 * var(--ipu)) 0 0 calc(.6 * var(--ipu));
  background: #8f8f8f; color: #fff; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: calc(1.8194 * var(--ipu));
}
.ip-event .ip-event__date .dot { font-size: calc(5.4582 * var(--ipu)); margin: calc(2 * var(--ipu)) calc(.5 * var(--ipu)) 0 calc(.9 * var(--ipu)); font-family: "Noto Sans JP", sans-serif; }
.ip-event .ip-event__time, .ip-event .ip-event__cap { display: flex; align-items: center; height: calc(8.8 * var(--ipu)); color: #333; white-space: nowrap; }
.ip-event .ip-event__time { width: calc(17.5 * var(--ipu)); padding-left: calc(1.8 * var(--ipu)); border-left: 1px solid #ddd; font-size: calc(2.4 * var(--ipu)); line-height: 1.25; letter-spacing: .08em; }
.ip-event .ip-event__time img { width: calc(3.3 * var(--ipu)); height: calc(3.3 * var(--ipu)); margin-right: calc(1.6 * var(--ipu)); }
.ip-event .ip-event__cap { padding-left: calc(2.5 * var(--ipu)); border-left: 1px solid #ddd; font-weight: 300; font-size: calc(2.8 * var(--ipu)); line-height: 1.25; letter-spacing: .08em; }
.ip-event .ip-event__cap img { width: calc(2.648 * var(--ipu)); height: calc(3.425 * var(--ipu)); margin-right: calc(1.4 * var(--ipu)); }
.ip-event .ip-event__note { left: calc(34.943 * var(--ipu)); top: calc(57.7 * var(--ipu)); width: calc(82.8552 * var(--ipu)); font-size: calc(2 * var(--ipu)); line-height: 2; letter-spacing: .08em; color: #333; }
.ip-event .ip-event__circle { position: absolute; left: calc(116.496 * var(--ipu)); top: calc(52.694 * var(--ipu)); width: calc(30.0555 * var(--ipu)); height: calc(30.0555 * var(--ipu)); }
.ip-event .ip-event__btn {
  left: calc(51.4 * var(--ipu)); top: calc(68.8 * var(--ipu)); width: calc(49.9 * var(--ipu)); height: calc(9.2 * var(--ipu)); display: flex; align-items: center; justify-content: center;
  background: #495780; border-radius: calc(.8 * var(--ipu)); filter: drop-shadow(0 calc(.8 * var(--ipu)) 0 rgba(0,0,0,.24));
  color: #fff; font-weight: 500; font-size: calc(2 * var(--ipu)); line-height: 1.25; letter-spacing: .02em; white-space: nowrap;
}
.ip-event .ip-event__btn img { position: absolute; left: calc(47.328 * var(--ipu)); top: calc(3.85 * var(--ipu)); width: calc(.8276 * var(--ipu)); height: calc(1.6552 * var(--ipu)); }

@media (max-width: 767px) {
  .ip-event { background: #fbfcfe; }
  .ip-event .ip-stage { height: calc(82.7 * var(--ipu)); }
  .ip-event .ip-event__wave { left: calc(-2.406 * var(--ipu)); top: calc(52.56 * var(--ipu)); width: calc(43.9 * var(--ipu)); height: calc(19.6257 * var(--ipu)); }
  .ip-event .ip-event__rays { left: calc(7.6745 * var(--ipu)); top: calc(-9.53 * var(--ipu)); width: calc(22.9632 * var(--ipu)); height: calc(24.3091 * var(--ipu)); transform: rotate(-134.75deg); }
  .ip-event .ip-event__ribbon { left: calc(6.48 * var(--ipu)); top: calc(3.25 * var(--ipu)); width: calc(25.19 * var(--ipu)); height: calc(6.48 * var(--ipu)); }
  .ip-event .ip-event__ribbon span { text-shadow: 0 calc(-.05 * var(--ipu)) 0 #93680b; }
  .ip-event .ip-event__ribbon .n { left: calc(5.95 * var(--ipu)); top: calc(.7 * var(--ipu)); font-size: calc(4.0545 * var(--ipu)); }
  .ip-event .ip-event__ribbon .m { left: calc(10.55 * var(--ipu)); top: calc(1.85 * var(--ipu)); font-size: calc(2.6206 * var(--ipu)); }
  .ip-event .ip-event__ttl { width: calc(39.32 * var(--ipu)); top: calc(9.85 * var(--ipu)); font-size: calc(4.2 * var(--ipu)); line-height: 1.12; }
  .ip-event .ip-event__sub { width: auto; left: calc(7.509 * var(--ipu)); top: calc(19.6 * var(--ipu)); font-size: calc(1.8 * var(--ipu)); text-align: left; }
  .ip-event .ip-event__box { left: calc(2.625 * var(--ipu)); top: calc(22.655 * var(--ipu)); width: calc(34.0681 * var(--ipu)); height: calc(12.9227 * var(--ipu)); flex-wrap: wrap; align-content: flex-start; padding: 0; }
  .ip-event .ip-event__date { width: calc(31.3 * var(--ipu)); height: calc(7.725 * var(--ipu)); margin: 0 calc(1.034 * var(--ipu)); padding-left: calc(1.6 * var(--ipu)); border-bottom: 1px solid #ddd; }
  .ip-event .ip-event__date .mo { font-size: calc(3.2 * var(--ipu)); margin-top: calc(1.5 * var(--ipu)); }
  .ip-event .ip-event__date .sl { width: calc(1 * var(--ipu)); height: calc(4.3 * var(--ipu)); margin: calc(1.6 * var(--ipu)) 0 0 0; }
  .ip-event .ip-event__date .sl::before { transform: rotate(13.6deg); }
  .ip-event .ip-event__date .d { font-size: calc(6.8 * var(--ipu)); letter-spacing: -.1em; margin-top: calc(.9 * var(--ipu)); }
  .ip-event .ip-event__date .d2 { letter-spacing: -.02em; }
  .ip-event .ip-event__date .w { width: calc(3.0074 * var(--ipu)); height: calc(2.8 * var(--ipu)); margin: calc(3.6 * var(--ipu)) 0 0 calc(.7 * var(--ipu)); }
  .ip-event .ip-event__date .dot { font-size: calc(4 * var(--ipu)); margin: calc(2 * var(--ipu)) calc(.2 * var(--ipu)) 0 calc(.3 * var(--ipu)); }
  .ip-event .ip-event__time { width: calc(17.4 * var(--ipu)); height: calc(5.1 * var(--ipu)); padding-left: calc(2.3 * var(--ipu)); border-left: 0; font-size: calc(1.6 * var(--ipu)); }
  .ip-event .ip-event__time img { width: calc(2.3135 * var(--ipu)); height: calc(2.3135 * var(--ipu)); margin-right: calc(.5 * var(--ipu)); }
  .ip-event .ip-event__cap { height: calc(2.68 * var(--ipu)); margin-top: calc(-0.4 * var(--ipu)); padding-left: calc(2.2 * var(--ipu)); font-size: calc(1.6 * var(--ipu)); }
  .ip-event .ip-event__cap img { width: calc(1.8564 * var(--ipu)); height: calc(2.4011 * var(--ipu)); margin-right: calc(1.1 * var(--ipu)); }
  .ip-event .ip-event__note { left: calc(2.716 * var(--ipu)); top: calc(36.6 * var(--ipu)); width: calc(33.8862 * var(--ipu)); font-size: calc(1.5 * var(--ipu)); letter-spacing: .02em; }
  .ip-event .ip-event__circle { left: calc(10.47 * var(--ipu)); top: calc(49.12 * var(--ipu)); width: calc(13.61 * var(--ipu)); height: calc(13.61 * var(--ipu)); }
  .ip-event .ip-event__doctor { left: calc(6.618 * var(--ipu)); top: calc(42.406 * var(--ipu)); width: calc(32.5632 * var(--ipu)); height: calc(29.7796 * var(--ipu)); overflow: hidden; }
  .ip-event .ip-event__doctor img { position: absolute; left: -7.61%; top: 0; width: 107.61%; height: 106.14%; }
  .ip-event .ip-event__foot { left: calc(-.1 * var(--ipu)); top: calc(69.3 * var(--ipu)); width: calc(39.2 * var(--ipu)); height: calc(13.4 * var(--ipu)); background: #bec7d9; }
  .ip-event .ip-event__btn {
    left: calc(4.9 * var(--ipu)); top: calc(71.8 * var(--ipu)); width: calc(29 * var(--ipu)); height: calc(6.9 * var(--ipu)); filter: drop-shadow(0 calc(.4 * var(--ipu)) 0 rgba(0,0,0,.24));
    font-size: calc(1.6 * var(--ipu)); line-height: 1.4; text-align: center; letter-spacing: .02em;
  }
  .ip-event .ip-event__btn img { left: calc(26.593 * var(--ipu)); top: calc(2.794 * var(--ipu)); }
}


/* 日付はFigma（DIN 2014）の座標に合わせて各パーツを絶対配置（2026-10-08 調整） */
.ip-event .ip-event__date { --k: .215; font-weight: 600; }
.ip-event .ip-event__date > span { position: absolute; margin: 0 !important; }
.ip-event .ip-event__date .mo { left: 0; width: calc(5.3 * var(--ipu)); text-align: right; top: calc(calc(.87 * var(--ipu)) - var(--k) * calc(5.4582 * var(--ipu))); letter-spacing: -.08em; }
.ip-event .ip-event__date .sl { left: calc(4.55 * var(--ipu)); top: calc(1.01 * var(--ipu)); width: calc(2.35 * var(--ipu)); height: calc(7.4 * var(--ipu)); }
.ip-event .ip-event__date .d { left: calc(7.4 * var(--ipu)); top: calc(calc(.9 * var(--ipu)) - var(--k) * calc(10.9163 * var(--ipu))); letter-spacing: -.03em; }
.ip-event .ip-event__date .d2 { left: calc(27.54 * var(--ipu)); top: calc(calc(.79 * var(--ipu)) - var(--k) * calc(10.9163 * var(--ipu))); letter-spacing: -.02em; }
.ip-event .ip-event__date .w { left: calc(18.15 * var(--ipu)); top: calc(5.22 * var(--ipu)); }
.ip-event .ip-event__date .w ~ .w { left: calc(39.26 * var(--ipu)); top: calc(5.17 * var(--ipu)); }
.ip-event .ip-event__date .dot { left: calc(21.24 * var(--ipu)); top: calc(calc(3.06 * var(--ipu)) - var(--k) * calc(5.4582 * var(--ipu))); }
@media (max-width: 767px) {
  .ip-event .ip-event__date { padding-left: 0; }
  .ip-event .ip-event__date .mo { width: calc(4.63 * var(--ipu)); top: calc(calc(1.76 * var(--ipu)) - var(--k) * calc(3.2 * var(--ipu))); }
  .ip-event .ip-event__date .sl { left: calc(4.63 * var(--ipu)); top: calc(1.87 * var(--ipu)); width: calc(1.04 * var(--ipu)); height: calc(4.29 * var(--ipu)); }
  .ip-event .ip-event__date .d { left: calc(5.67 * var(--ipu)); top: calc(calc(1.76 * var(--ipu)) - var(--k) * calc(6.8 * var(--ipu))); letter-spacing: 0; }
  .ip-event .ip-event__date .d2 { left: calc(18.56 * var(--ipu)); top: calc(calc(1.65 * var(--ipu)) - var(--k) * calc(6.8 * var(--ipu))); letter-spacing: -.02em; }
  .ip-event .ip-event__date .w { left: calc(11.74 * var(--ipu)); top: calc(3.66 * var(--ipu)); }
  .ip-event .ip-event__date .w ~ .w { left: calc(26.33 * var(--ipu)); top: calc(3.6 * var(--ipu)); }
  .ip-event .ip-event__date .dot { left: calc(14.75 * var(--ipu)); top: calc(calc(2.56 * var(--ipu)) - var(--k) * calc(4 * var(--ipu))); }
}