@charset "UTF-8";

/* Company Management CSS .company_hayawakari-
============================================================================= */

/* Navigation */
.company_hayawakari-nav {
  
}
.company_hayawakari-nav_list {
  display:flex;
  flex-wrap: wrap;
  text-align: center;
  font-size:.14rem;
  line-height:1.4;
}
.company_hayawakari-nav-item > a {
  display:flex;
  justify-content: center;
  align-items: center;
  column-gap: .8em;
  background-color:var(--bg-color-gray-A);
  height:.56rem;
  transition-property: background-color,color;
  transition-duration: var(--hover-duration-A);
}
.company_hayawakari-nav-item > a::after {
  content: "";
  display: block;
  margin-block-start: -.08rem;
  width: 0.12rem;
  height: 0.12rem;
  border-bottom: 1px solid var(--main-color-blue);
  border-right: 1px solid var(--main-color-blue);
  transform: rotate(45deg);
  transition-property: border-color;
  transition-duration: var(--hover-duration-A);
}
.no-touchevents .company_hayawakari-nav-item > a:hover {
  background-color:var(--main-color-blue);
  color:#fff;
}
.no-touchevents .company_hayawakari-nav-item > a:hover::after {
  border-color:#fff;
}
@media (min-width:1024px) {
  .company_hayawakari-nav_list {
    gap:2px;
  }
  .company_hayawakari-nav-item {
    width:calc(100% / 5 - 2px * 4 / 5);
  }
}
@media (max-width:1023px) {
  .company_hayawakari-nav_list {
    gap:1px;
  }
  .company_hayawakari-nav-item:not(:last-child) {
    width:calc(100% / 2 - 0.5px);
  }
  .company_hayawakari-nav-item:last-child {
    width:100%;
  }
}


/* Steps */
.company_hayawakari-steps {
  display:flex;
  flex-direction: column;
  row-gap:1.12rem;
  position:relative;
}
.company_hayawakari-steps::before,
.company_hayawakari-steps-item:last-child::before {
  content:"";
  width:1px;
  height:calc(100% - var(--fs-h4));
  position:absolute;
}
.company_hayawakari-steps::before {
  background-color:var(--other-color-blue-A);
  top:calc(var(--fs-h4) * .5);
}
.company_hayawakari-steps-item:last-child::before {
  background-color:var(--bg-color-gray-A);
  bottom:0;
}
.company_hayawakari-steps-item {
  position:relative;
}
.company_hayawakari-steps-item-date {
  display:flex;
  align-items: center;
  font-weight: 700;
  font-size:var(--fs-h4);
  line-height:var(--lh-heading-A);
  color:var(--main-color-blue);
  position:relative;
}
.company_hayawakari-steps-item-date::after {
  content:"";
  display:block;
  border-radius: 50%;
  width:calc(.10rem + 1px);
  height:calc(.10rem + 1px);
  background-color:var(--sub-color-red);
  position:absolute;
  z-index:1;
}
@media (min-width:1024px) {
  .company_hayawakari-steps-item {
    display:flex;
    align-items: flex-start;
    column-gap:.40rem;
  }
  .company_hayawakari-steps::before,
  .company_hayawakari-steps-item::before {
    left:calc(1.80rem - 1px);
  }
  .company_hayawakari-steps-item-date {
    flex-shrink: 0;
    width:1.85rem;
  }
  .company_hayawakari-steps-item-date::after {
    right:0;
  }
}
@media (max-width:1023px) {
  .company_hayawakari-steps {
    row-gap:.32rem;
  }
  .company_hayawakari-steps-item {
    padding-inline-start:var(--pd-sp-20);
  }
  .company_hayawakari-steps::before,
  .company_hayawakari-steps-item::before {
    left:0;
  }
  .company_hayawakari-steps-item-date::after {
    left:calc(var(--pd-sp-20) * -1 - .05rem);
  }
}


/* Numbers */
.company_hayawakari-numbers {
  display:flex;
  gap:.20rem;
}
.company_hayawakari-numbers-item {
  padding-block-start:.60rem;
  background-color:#fff;
}
.company_hayawakari-numbers-item-contents {
  margin-block-start:.40rem;
}
.company_hayawakari-numbers-item-contents img {
  width:.84rem;
}
.company_hayawakari-numbers-item-contents-text {
  display:flex;
  justify-content: center;
  flex-wrap:wrap;
  gap:.08rem;
  font-weight:700;
  color:var(--main-color-blue);
  line-height:1;
}
.company_hayawakari-numbers-item-contents-text > span {
  font-size:.75rem;
}
.company_hayawakari-numbers-item-contents-text > small {
  margin-block:auto .6em;
  font-size:.24rem;
}
.company_hayawakari-numbers-item-contents-text > sup {
  margin-block-start:.6em;
  margin-inline-start:-.12rem;
  font-size:.18rem;
}
.company_hayawakari-numbers-item-contents-caution {
  margin-block-start:.04rem;
  font-weight:700;
  font-size:.16rem;
  line-height:1.5;
  color:var(--main-color-blue);
}
@media (min-width:1024px) {
  .company_hayawakari-numbers {
    flex-wrap:wrap;
  }
  .company_hayawakari-numbers-item {
    padding-inline:.20rem;
    width:calc(100% / 3 - .20rem * 2 / 3);
    height:3.86rem;
    aspect-ratio: 1/1;
    text-align: center;
  }
  .company_hayawakari-numbers-item-contents img {
    margin-inline:auto;
  }
  .company_hayawakari-numbers-item-contents-text {
    margin-block-start:.24rem;
  }
  .company_hayawakari-numbers-item-contents-text > span {
  }
}
@media (max-width:1023px) {
  .company_hayawakari-numbers {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .company_hayawakari-numbers-item {
    width: 48%;
    padding:.20rem;
  }
  .company_hayawakari-numbers-item:last-child {
    width: 100%;
  }
  .company_hayawakari-numbers-item-contents {
    display:flex;
    align-items: center;
    column-gap:.20rem;
    margin-block-start:.16rem;
  }
  .company_hayawakari-numbers-item-contents img {
    flex-shrink: 0;
  }
  .company_hayawakari-numbers-item-contents-text {
    gap:.04rem;
  }
  .company_hayawakari-numbers-item-contents-text > span {
    font-size:.48rem;
  }
  .company_hayawakari-numbers-item-contents-text > small {
    font-size:.18rem;
  }
  .company_hayawakari-numbers-item-contents-text > sup {
    margin-inline-start:-.02rem;
    font-size:.12rem;
  }
  .company_hayawakari-numbers-item-contents-caution {
    margin-block-start:.12rem;
    font-size:.12rem;
    text-align: center;
  }
}
@media (max-width:640px) {
  .company_hayawakari-numbers {
    flex-direction: column;
  }
  .company_hayawakari-numbers-item {
    width: 100%;
  }
}


/* =============================================================================
   バルテス早わかり／図版HTML化 追加スタイル
   company-hayawakari.css の末尾に追記して使用する。
   色はサイト共通変数を参照し、単体でも壊れないようフォールバックを併記。
   ============================================================================= */

.hw-fig {
  --hw-blue:        var(--main-color-blue, #3261dd);
  --hw-blue-mid:    #7ba0f0;
  --hw-blue-soft:   var(--other-color-blue-A, #b0c5fc);
  --hw-blue-pale:   #e9efff;
  --hw-blue-pale2:  #eef2ff;
  --hw-blue-wash:   #f5f8ff;
  --hw-green:       #14a37f;
  --hw-green-pale:  #e6f6f1;
  --hw-red:         var(--sub-color-red, #d90000);
  --hw-gray:        var(--bg-color-gray-A, #f2f4f8);
  --hw-line:        #dde3ee;
  --hw-ink:         var(--text-color-A, #222);
  --hw-ink-mute:    #6b7280;
  --hw-sen:         var(--ff-sen, 'Sen', sans-serif);
  color: var(--hw-ink);
  line-height: 1.6;
  margin: 0;
}
/* リセットは :where() で詳細度0にし、後続の個別指定が必ず勝つようにする */
.hw-fig :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.hw-fig :where(p, h4, h5) { margin: 0; }

/* -----------------------------------------------------------------------------
   1. 業績グラフ
   数値の更新は各 <li> の --v（実数）と表示テキストの2箇所のみ。
   数値を出さない期は --v の代わりに --h（高さ％）を直接指定する。
   軸上限を変えるときは --hw-chart-div（＝上限 ÷ 100）と目盛りラベルを合わせる。
----------------------------------------------------------------------------- */
.hw-chart {
  --hw-chart-h: clamp(190px, 24vw, 300px);
  --hw-chart-div: 150; /* 軸上限 15,000 ÷ 100 */
  /* スクロール連動アニメーションの基準。グラフ全体で1本だけ立て、全ての棒が共有する
     （棒ごとに view() を書くと、低い棒は自身の高さが基準になり一瞬で伸び切ってしまう） */
  view-timeline-name: --hw-chart;
  view-timeline-axis: block;
}
.hw-chart__head { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; }
.hw-chart__title {
  font-weight: 700; font-size: clamp(17px, 1.5vw, 21px);
  color: var(--hw-blue); letter-spacing: .04em; line-height: 1.4;
}
.hw-chart__unit { font-size: clamp(11px, .9vw, 13px); color: var(--hw-ink-mute); }

.hw-chart__body {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px; margin-top: 16px;
}
.hw-chart__axis {
  position: relative; height: var(--hw-chart-h); margin-top: 26px; width: 3.6em;
  font-family: var(--hw-sen); font-variant-numeric: tabular-nums;
  font-size: clamp(10px, .85vw, 12px); color: #99a0b0;
}
.hw-chart__axis li {
  position: absolute; right: 0; bottom: calc(var(--i) * 20%);
  transform: translateY(50%); white-space: nowrap;
}
.hw-chart__scroll { overflow-x: auto; overflow-y: hidden; }
.hw-chart__plot { min-width: 700px; padding: 26px 20px 46px 2px; }

.hw-chart__bars {
  position: relative; display: flex; align-items: flex-end;
  gap: clamp(3px, .55vw, 9px); height: var(--hw-chart-h);
  border-top: 1px solid var(--hw-line);
  background-image: repeating-linear-gradient(to top, var(--hw-line) 0 1px, transparent 1px 20%);
}
.hw-chart__bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; }
.hw-chart__fill {
  position: absolute; inset: auto 0 0 0;
  height: var(--h, calc(var(--v) * 1% / var(--hw-chart-div)));
  background: linear-gradient(to top, #a6bef7, var(--hw-blue-mid));
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  animation-name: hw-grow;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.16, .84, .32, 1);
  /* forwards（both ではない）。both にすると、グラフが画面外でタイムラインが
     非アクティブな間、棒が高さ0のまま描かれてしまう */
  animation-fill-mode: forwards;
  animation-timeline: --hw-chart;
  /* 始点はグラフがまだ画面外にある entry 0% に固定。終点を2%ずつ後ろへずらして
     左から右への波をつくる。未対応ブラウザでは常に満杯で表示され、動きだけが省かれる */
  animation-range: entry 0% contain calc(30% + var(--n, 0) * 2%);
}
.hw-chart__bar.is-latest .hw-chart__fill { background: linear-gradient(to top, #3f6ce0, var(--hw-blue)); }
@keyframes hw-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hw-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hw-chart__fill { animation: none; transform: none; }
  .hw-chart__val  { animation: none; opacity: 1; }
}

.hw-chart__val {
  position: absolute; left: 50%; bottom: var(--h, calc(var(--v) * 1% / var(--hw-chart-div)));
  transform: translate(-50%, -7px);
  font-family: var(--hw-sen); font-variant-numeric: tabular-nums;
  font-size: clamp(10px, .86vw, 13px); font-weight: 700; letter-spacing: .01em;
  color: var(--hw-blue); white-space: nowrap; pointer-events: none;
  animation-name: hw-appear;
  animation-duration: .5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-timeline: --hw-chart;
  animation-range: entry 0% contain calc(30% + var(--n, 0) * 2%);
}
.hw-chart__bar.is-latest > .hw-chart__val { font-size: clamp(14px, 1.35vw, 20px); }
.hw-chart__bar:hover > .hw-chart__fill { filter: brightness(1.06); }

.hw-chart__year {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 9px; font-family: var(--hw-sen); font-variant-numeric: tabular-nums;
  font-size: clamp(9px, .8vw, 12px); line-height: 1.3; color: #5c6472;
  white-space: nowrap; text-align: center;
}
.hw-chart__year small { display: block; font-size: .85em; }

.hw-chart__note {
  margin-top: 14px; font-size: clamp(11px, .9vw, 13px); line-height: 1.7;
  color: var(--hw-ink-mute);
}
@media (max-width: 1023px) {
  /* スマホでは初期表示を右端（直近期）に寄せる */
  .hw-chart__scroll { direction: rtl; }
  .hw-chart__plot { direction: ltr; min-width: 860px; }
  .hw-chart__scroll::-webkit-scrollbar { height: 5px; }
  .hw-chart__scroll::-webkit-scrollbar-thumb { background: var(--hw-blue-soft); border-radius: 3px; }
}

/* -----------------------------------------------------------------------------
   4. 強み3：教育メソッドの流れ
----------------------------------------------------------------------------- */
.hw-flow { display: grid; }
.hw-flow__tier { border-radius: 4px; padding: clamp(16px, 1.9vw, 26px); }
.hw-flow__tier--wash { background: var(--hw-blue-pale2); }
.hw-flow__tier--outline { border: 1px solid var(--hw-blue-soft); background: #fff; }
.hw-flow__tier--result {
  background: var(--hw-blue-pale); justify-self: center;
  padding: clamp(16px, 2vw, 24px) clamp(28px, 5.3vw, 64px);
  font-weight: 700; font-size: clamp(18px, 2.3vw, 28px); line-height: 1.45;
  color: var(--hw-blue);
  display: flex; gap: .8em; align-items: center; flex-wrap: wrap; justify-content: center;
}
.hw-flow__plus { color: var(--hw-ink-mute); font-weight: 400; }
.hw-flow__caption {
  margin-bottom: 18px; text-align: center; font-weight: 700; line-height: 1.45;
  font-size: clamp(18px, 2vw, 24px); color: var(--hw-blue);
}
.hw-flow__caption small {
  display: block; font-weight: 400; margin-top: 4px;
  font-size: clamp(12px, 1.15vw, 14px); color: var(--hw-ink-mute);
}
.hw-flow__pair { display: grid; gap: clamp(12px, 1.4vw, 20px); }
@media (min-width: 768px) { .hw-flow__pair { grid-template-columns: 1fr 1fr; } }
.hw-flow__box { background: #fff; border-radius: 3px; padding: 14px 16px; text-align: center; font-weight: 700; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.5; }
.hw-flow__cell { display: grid; gap: 10px; align-content: start; }
.hw-flow__cellhead { background: var(--hw-gray); border-radius: 3px; padding: clamp(14px, 1.5vw, 20px); text-align: center; line-height: 1.5; }
.hw-flow__cellhead span { display: block; font-size: clamp(12px, .95vw, 14px); }
.hw-flow__cellhead strong { display: block; font-size: clamp(16px, 1.75vw, 21px); font-weight: 700; }
.hw-flow__cellhead--big strong { font-size: clamp(18px, 2vw, 24px); }
.hw-flow__cellhead em { font-style: normal; color: var(--hw-blue); }
.hw-flow__cell p { font-size: clamp(12px, .95vw, 14px); line-height: 1.75; }
/* 段間のシェブロンは三角形1枚（画像・SVG不要）。
   中間は淡く小さく、結論へ向かう最後の1本だけ大きく不透明にして視線を加速させる */
.hw-flow__link {
  justify-self: center; margin: 2px 0;
  width: clamp(96px, 11vw, 132px); height: clamp(22px, 2.5vw, 30px);
  background: var(--hw-red); opacity: .28;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.hw-flow__link--arrow {
  margin: 2px 0 6px;
  width: clamp(140px, 16.7vw, 200px); height: clamp(32px, 3.8vw, 46px);
  opacity: 1;
}