@charset "UTF-8";
/* =========================================================
   総施術実績グラフ（共通パーツ）
   /operation/epilation/parts/hige/assets/include/achievements/graph.php 用

   - デザイン基準幅: 750px
   - 親要素の幅に追従（container query 単位 cqw）。px値はフォールバック
   - 色・フォントは --ach-* を各LPの CSS で上override して調整する
   ========================================================= */

.ach {
  --ach-bg: #3c3a39;
  --ach-bubble-bg: var(--gold, #baa170);
  --ach-bubble-fg: #000000;
  --ach-bar-color: #d2c9c4;
  --ach-axis-fg: #ffffff;
  --ach-font: "Noto Sans JP", sans-serif;

  /* アニメーション速度。調整はここだけで完結する（graph.php が読み取って遅延を算出） */
  --ach-bar-stagger: 0.05s;  /* 棒が1本ずつ伸びる間隔 */
  --ach-bar-dur: 0.3s;       /* 棒が伸びる時間 */
  --ach-val-dur: 0.24s;      /* 棒の上の数値がフェードインする時間 */
  --ach-bubble-dur: 0.36s;   /* 吹き出しがフェードインする時間 */

  position: relative;
  container-type: inline-size;
  background: var(--ach-bg);
  font-family: var(--ach-font);
  width: 100%;
  /* container query 単位は「自分自身」には効かないため、高さは比率で確保する */
  aspect-ratio: 750 / 520;
  overflow: hidden;
}

@supports not (aspect-ratio: 1) {
  .ach {
    height: 520px;
  }
}

/* ---------- 吹き出し ---------- */
.ach__bubble {
  position: absolute;
  left: 31px;
  left: 4.1333cqw;
  top: 77px;
  top: 10.2667cqw;
  width: 394px;
  width: 52.5333cqw;
  height: 188px;
  height: 25.0667cqw;
  background: var(--ach-bubble-bg);
  color: var(--ach-bubble-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  z-index: 2;
}

.ach__bubble-ttl {
  font-size: 32px;
  font-size: 4.2667cqw;
  font-weight: 700;
  line-height: 1.2;
}

.ach__bubble-num {
  line-height: 1;
  margin-top: 2px;
  margin-top: 0.2667cqw;
  font-weight: 700;
}

.ach__bubble-num em {
  font-style: normal;
  font-size: 68px;
  font-size: 9.0667cqw;
  letter-spacing: -0.01em;
}

.ach__bubble-num span {
  font-size: 38px;
  font-size: 5.0667cqw;
}

.ach__bubble-period {
  font-size: 20px;
  font-size: 2.6667cqw;
  margin-top: 8px;
  margin-top: 1.0667cqw;
  line-height: 1.2;
}

.ach__bubble-tail {
  position: absolute;
  left: 289px;
  left: 38.5333cqw;
  top: 100%;
  width: 70px;
  width: 9.3333cqw;
  height: 61px;
  height: 8.1333cqw;
  background: var(--ach-bubble-bg);
  -webkit-clip-path: polygon(0 0, 62.2% 0, 100% 100%);
          clip-path: polygon(0 0, 62.2% 0, 100% 100%);
  margin-top: -1px;
}

.ach.is-show .ach__bubble {
  /* delay は graph.php が「棒と同時に完了する」値を算出して上書きする。
     下記はJSが無効な場合の既定値（棒13本・既定速度での算出値と同じ） */
  animation: achFadeUp var(--ach-bubble-dur) ease 0.54s forwards;
}

@keyframes achFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 棒グラフ ---------- */
.ach__bars {
  position: absolute;
  left: 31px;
  left: 4.1333cqw;
  bottom: 0;
  width: 689px;
  width: 91.8667cqw;
  height: 520px;
  height: 69.3333cqw;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ach__bar {
  position: relative;
  width: 46px;
  width: 6.1333cqw;
  height: 100%;
}

.ach__bar-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  bottom: 6.6667cqw;
  height: calc(var(--h) * 1px);
  height: calc(var(--h) * 0.1333cqw);
  background: var(--ach-bar-color);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--ach-bar-dur) cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ach__bar-val {
  position: absolute;
  left: 50%;
  bottom: calc(50px + var(--h) * 1px + 6px);
  bottom: calc(6.6667cqw + var(--h) * 0.1333cqw + 0.8cqw);
  transform: translateX(-50%);
  font-size: 18px;
  font-size: 2.4cqw;
  font-weight: 500;
  color: var(--ach-axis-fg);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--ach-val-dur) ease;
}

.ach__bar-year {
  position: absolute;
  left: 50%;
  top: 478px;
  top: 63.7333cqw;
  transform: translateX(-50%);
  font-size: 18px;
  font-size: 2.4cqw;
  font-weight: 500;
  color: var(--ach-axis-fg);
  white-space: nowrap;
}

.ach.is-show .ach__bar-body {
  transform: scaleY(1);
}

.ach.is-show .ach__bar-val {
  opacity: 1;
}

/* 実績が極小の年（2014等）は棒が見えないため、下端に細い線を残す */
.ach__bar-body {
  min-height: 2px;
}