{% scope_css %}
/* --- 基本構造 --- */
.achieve-module {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
}
.achieve-module.is-parallax { background-attachment: fixed; }

.achieve-overlay {
  padding: 40px 20px 60px;
  box-sizing: border-box;
}

.achieve-container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* 親要素のflex-wrapを確実に有効化 */
.achieve-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; 
  margin: 0 0 35px;
  font-weight: bold;
  line-height: 1.2;
}

/* 通常テキスト：1行目として独立させる */
.h-main {
  color: var(--h-color);
  font-size: var(--h-size-pc);
  display: block; /* 確実に1行分占有 */
  width: 100%;    /* 横幅いっぱいにして次を押し出す */
}

/* 強調数値・語尾共通（袋文字・維持） */
.h-num, .h-suffix {
  font-style: italic;
  text-shadow: 
    var(--h-outline) var(--h-outline-w) var(--h-outline-w) 0,
    var(--h-outline) calc(var(--h-outline-w) * -1) var(--h-outline-w) 0,
    var(--h-outline) var(--h-outline-w) calc(var(--h-outline-w) * -1) 0,
    var(--h-outline) calc(var(--h-outline-w) * -1) calc(var(--h-outline-w) * -1) 0,
    var(--h-outline) 0 var(--h-outline-w) 0,
    var(--h-outline) 0 calc(var(--h-outline-w) * -1) 0,
    var(--h-outline) var(--h-outline-w) 0 0,
    var(--h-outline) calc(var(--h-outline-w) * -1) 0 0;
}

/* --- 強調数値：ここで改行を確定させる --- */
.h-num {
  color: var(--h-num-color);
  font-size: var(--num-size-pc);
  margin-left: 0; /* 改行されるので左マージンは不要に */
  position: relative;
  display: inline-block; /* 語尾を横に並べるため */
  padding: 0 5px;
  vertical-align: bottom;
  overflow: hidden; /* キラキラのクリッピング用 */
}

/* 数値の前にあるメインテキストを追い出すことで改行を実現 */
/* 万が一h-mainが100%にならない場合の保険として数値の前にも見えない壁を置く */
.h-num::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  flex-basis: 100%;
}

.h-suffix {
  color: var(--h-suffix-color);
  font-size: var(--suf-size-pc);
  display: inline-block;
}

.h-sup { font-size: 0.45em; vertical-align: top; margin-left: 2px; color: var(--h-color); font-weight: bold; }

/* --- キラキラエフェクト復活 --- */
.h-num::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -150%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.8) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: kira-kira 3s infinite;
}

@keyframes kira-kira {
  0% { left: -150%; }
  30% { left: 150%; }
  100% { left: 150%; }
}

/* 注釈枠（維持） */
.achieve-note-box {
  display: inline-block;
  border: var(--note-border-w) solid var(--note-border);
  background-color: var(--note-bg);
  padding: 25px 45px;
  text-align: left;
}
.note-inner { font-size: var(--note-size); line-height: 1.8; color: #333; }
.note-inner p { margin: 0; }

/* SPレイアウト（維持） */
@media (max-width: 767px) {
  .achieve-overlay { padding: 30px 15px 40px; }
  .h-main { font-size: var(--h-size-sp); display: block; width: 100%; margin-bottom: 5px; }
  
  .h-num { 
    font-size: var(--num-size-sp) !important; 
    margin-left: 0; 
  }
  
  .h-num::after { animation-duration: 4s; }
  .h-suffix { font-size: var(--suf-size-sp); }

  .achieve-note-box { 
    padding: 15px 20px; 
    width: 100%; 
    box-sizing: border-box;
    display: block;
  }
}
{% endscope_css %}