@charset "UTF-8";

/* ==========================================================
   【１】最上部：見出しグループ（画像ロゴ ＋ 日本語タイトル）
   ========================================================= */

.data-title-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-top: 60px !important;
  margin-bottom: 20px !important;
}

.data-title-group .message-img {
  width: 420px !important;
  max-width: 90% !important;
  height: auto !important;
  margin: 0 0 10px 0 !important;
  display: block !important;
}

.data-title-group .page-title {
  font-size: 1.5rem !important;
  font-weight: bold !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #333 !important;
  letter-spacing: 0.1em !important;
}

@media screen and (min-width: 701px) {
  html body .data-title-group {
    padding-top: 120px !important;
    margin-top: 0 !important;
    margin-bottom: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  html body .data-title-group .message-img {
    width: 400px !important;
    max-width: 90% !important;
    margin-bottom: 0 !important;
    position: static !important;
  }
  html body .data-title-group .page-title {
    margin-top: -15px !important;
    margin-bottom: 0 !important;
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    color: #333 !important;
    display: block !important;
  }
}

@media screen and (max-width: 700px) {
  html body .data-title-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 100px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .data-title-group .message-img {
    width: 200px !important;
    max-width: 200px !important;
    height: auto !important;
    margin: 0 auto 5px !important;
    position: static !important;
    transform: none !important;
    display: block !important;
  }
  html body .data-title-group .page-title {
    margin-top: -7px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    display: block !important;
    color: #333 !important;
  }
}



/* ==========================================================
   【２】中央：数字カード・外枠グリッドコンテナ
   ========================================================= */
.data-layout-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 60px 30px !important;
  align-items: start !important;
  max-width: 900px !important;
  margin: 20px auto 0 !important;
  padding: 0 40px !important;
}


/* ==========================================================
   【３】数字カード（data-box）の基本装飾 ＆ カラー設定
   ========================================================= */
html body .data-layout-grid .data-box {
  background: #ffffff !important; 
  border: none !important;
  border-radius: 20px !important; 
  padding: 60px 30px !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04) !important;
  transition: opacity 0.6s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease !important;
}

/* 3の倍数番目 ＆ 特大カード：紺背景 */
html body .data-layout-grid .data-box:nth-child(3n), 
html body .data-layout-grid .size-full {
  background: #1e4461 !important;
  box-shadow: 0 15px 35px rgba(30, 68, 97, 0.2) !important;
}

/* 通常時の白背景カードの文字色指定 */
html body .data-layout-grid .data-box .num { color: #1e4461 !important; }
html body .data-layout-grid .data-box .unit,
html body .data-layout-grid .data-box .data-sub { color: #333333 !important; }

/* 紺背景カードの中の文字を完全ロック */
html body .data-layout-grid .data-box:nth-child(3n) .num, 
html body .data-layout-grid .data-box:nth-child(3n) .unit, 
html body .data-layout-grid .data-box:nth-child(3n) .data-sub,
html body .data-layout-grid .data-box:nth-child(3n) p, 
html body .data-layout-grid .data-box:nth-child(3n) span,
html body .data-layout-grid .size-full .num, 
html body .data-layout-grid .size-full .unit, 
html body .data-layout-grid .size-full .data-sub,
html body .data-layout-grid .size-full p, 
html body .data-layout-grid .size-full span {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 紺背景カードの中にあるタグ */
.data-box:nth-child(3n) .data-tag, 
.data-layout-grid .size-full .data-tag {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* パソコン版（1001px以上）の階段レイアウト調整 */
@media screen and (min-width: 1001px) {
  html body .data-layout-grid .data-box:nth-child(even) {
    margin-top: 120px !important;
  }
  html body .data-layout-grid .size-full {
    grid-column: span 2 !important;
    width: 100% !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    padding: 80px 40px !important;
    border-radius: 20px !important;
  }
  html body .data-layout-grid .data-box.item-center {
    grid-column: 1 / span 2 !important;
    justify-self: center !important;
    margin-top: 40px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 420px !important;
  }
}


/* ==========================================================
   【４】SP〜タブレット環境修正（1000px以下すべてに一括適用）
   ========================================================== */
@media screen and (max-width: 1000px) {
  html body .data-layout-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 24px !important;
    width: 100% !important;
    margin-top: 55px !important;
  }

  html body .data-layout-grid .data-box {
    width: 82% !important;
    max-width: 320px !important; 
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important; 
    padding: 35px 20px !important;   
    border-radius: 20px !important;
    position: relative !important;
  }

  html body .data-layout-grid .data-box:nth-child(odd) {
    align-self: flex-start !important;
    margin-left: 5% !important;
    margin-right: auto !important;
  }

  html body .data-layout-grid .data-box:nth-child(even) {
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 5% !important;
  }

  html body .data-layout-grid .size-full,
  html body .data-layout-grid .data-box.item-center {
    width: 95% !important;
    max-width: 440px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 45px 25px !important;
  }

  html body .data-layout-grid .num-wrap {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    width: 100% !important;
    white-space: nowrap !important;
    margin: 4px 0 !important;
  }

  html body .data-layout-grid .num {
    font-size: 2.5rem !important; 
    line-height: 1.1 !important;
  }

  html body .data-layout-grid .unit {
    font-size: 1.1rem !important;
    margin-left: 4px !important;
    font-weight: 700 !important;
  }

  html body .data-layout-grid .data-tag {
    font-size: 0.85rem !important;
    padding: 5px 14px !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
  }

  html body .data-layout-grid .data-sub {
    font-size: 1.05rem !important;
    margin-top: 8px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
  }

  html body .data-layout-grid .data-date,
  html body .data-layout-grid .data-sub-text {
    font-size: 0.85rem !important;
    margin-top: 6px !important;
    transform: none !important;
    display: block !important;
  }

  html body main section#under-interview-section {
    position: relative !important;
    z-index: 1000 !important; 
    background-color: #ffffff !important;
  }
}


/* ==========================================================
   【５】ページ全体の背景設定（砂目ノイズベース）
   ========================================================= */
.data-page-bg-wrapper {
  width: 100% !important;
  position: relative !important;
  background-color: #e6f2f7 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='bgNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.015 0'/%3E%3C/filter%3E%3C/svg%3E#bgNoise") !important;
  background-repeat: repeat !important;
  background-attachment: scroll !important;
  padding-bottom: 140px !important; 
  z-index: 1 !important;
}

@media screen and (max-width: 700px) {
  .data-page-bg-wrapper {
    background-attachment: scroll !important;
    padding-bottom: 100px !important;
  }
}

html body .recruit-data, 
html body #data-section {
  background-color: transparent !important;
  background: transparent !important;
}


/* --------------------------------------------------
   ★ 背景の「可愛い角丸スクエア」の基本スタイル定義
   -------------------------------------------------- */
.data-page-bg-wrapper .bg-pop-square {
  position: absolute !important;
  pointer-events: none !important;
  z-index: -1 !important; 
  margin: 0 !important;
  padding: 0 !important;
  filter: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='chalk'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0' result='shadow'/%3E%3CfeBlend mode='multiply' in='SourceGraphic' in2='shadow'/%3E%3C/filter%3E%3C/svg%3E#chalk") !important;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.3) 90%, transparent 100%) !important;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.3) 90%, transparent 100%) !important;
  transition: transform 0.1s linear !important;
}

.bg-pop-square.color-blue       { background-color: #cbe3f0 !important; }
.bg-pop-square.color-aqua       { background-color: #d2f2ff !important; }
.bg-pop-square.color-gray       { background-color: #e2ebf0 !important; }
.bg-pop-square.color-blue-light { background-color: #dcecf6 !important; }
.bg-pop-square.color-aqua-light { background-color: #dbf7ff !important; }

@media screen and (min-width: 701px) {
  .bg-pop-square.size-xl { width: 750px !important; height: 750px !important; top: -5% !important; left: -15% !important; border-radius: 60px !important; transform: rotate(-15deg); }
  .bg-pop-square.size-l { width: 550px !important; height: 550px !important; top: 15% !important; right: -8% !important; border-radius: 45px !important; transform: rotate(22deg); }
  .bg-pop-square.size-m { width: 350px !important; height: 350px !important; top: 35% !important; left: -5% !important; border-radius: 35px !important; transform: rotate(-10deg); }
  .bg-pop-square.size-s { width: 180px !important; height: 180px !important; top: 45% !important; right: 20% !important; border-radius: 25px !important; transform: rotate(15deg); }
  .bg-pop-square.size-xs { width: 60px !important; height: 60px !important; top: 55% !important; left: 45% !important; border-radius: 12px !important; transform: rotate(-25deg); }
  .bg-pop-square.size-m2 { width: 400px !important; height: 400px !important; top: 62% !important; left: -10% !important; border-radius: 40px !important; transform: rotate(8deg); }
  .bg-pop-square.size-s2 { width: 150px !important; height: 150px !important; top: 72% !important; right: 35% !important; border-radius: 20px !important; transform: rotate(-18deg); }
  .bg-pop-square.size-l2 { width: 500px !important; height: 500px !important; bottom: 10% !important; left: -5% !important; border-radius: 50px !important; transform: rotate(30deg); }
  .bg-pop-square.size-xl2 { width: 700px !important; height: 700px !important; bottom: -5% !important; right: -12% !important; border-radius: 70px !important; transform: rotate(-12deg); }
}

@media screen and (max-width: 700px) {
  .bg-pop-square { border-radius: 20px !important; }
  .bg-pop-square.size-xl  { width: 340px; height: 340px; top: -2%; left: -20%; transform: rotate(-10deg); }
  .bg-pop-square.size-l   { width: 280px; height: 280px; top: 18%; right: -15%; transform: rotate(15deg); }
  .bg-pop-square.size-m   { width: 200px; height: 200px; top: 35%; left: -10%; transform: rotate(-8deg); }
  .bg-pop-square.size-s   { width: 120px; height: 120px; top: 48%; right: 10%; transform: rotate(20deg); }
  .bg-pop-square.size-xs  { width: 50px;  height: 50px;  top: 55%; left: 15%; transform: rotate(-15deg); }
  .bg-pop-square.size-m2  { width: 220px; height: 220px; top: 65%; left: -12%; transform: rotate(5deg); }
  .bg-pop-square.size-s2  { width: 100px; height: 100px; top: 75%; right: 15%; transform: rotate(-12deg); }
  .bg-pop-square.size-l2  { width: 260px; height: 260px; bottom: 8%; left: -5%; transform: rotate(18deg); }
  .bg-pop-square.size-xl2 { width: 320px; height: 320px; bottom: -4%; right: -10%; transform: rotate(-8deg); }
}

/* グローバル階層でも最前面化を徹底させて被りを永久シャットアウトします */
.data-layout-grid,
.data-title-group,
html body main section#under-interview-section {
  position: relative !important;
  z-index: 10 !important;
}


/* ==========================================================
   【６】文字タイポグラフィ（PC版の基準設定）
   ========================================================= */
.num {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
}

.unit {
  font-size: 1.2rem;
  font-weight: bold;
  margin-left: 5px;
}

.data-tag {
  font-size: 0.8rem;
  background: #f4f4f4;
  padding: 5px 15px;
  border-radius: 50px;
  margin-bottom: 20px;
  align-self: center;
  color: #666;
}

.data-sub {
  font-size: 0.95rem;
  margin-top: 15px;
  font-weight: bold;
}


/* ==========================================================
   【７】注釈・日付・男女比特殊カードの完全カラーロック設定
   ========================================================= */
html body .data-layout-grid .data-box .data-date, 
html body .data-layout-grid .data-box .data-sub-text {
  color: #888888 !important;
  opacity: 1 !important;
  transition: none !important;
}

.gender-ratio {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  color: inherit !important;
}
.gender-ratio .percent { font-size: 0.4em !important; margin: 0 2px !important; }
.gender-ratio .male, .gender-ratio .female { font-size: 0.35em !important; margin: 0 4px !important; }
.gender-ratio .separator { opacity: 0.3 !important; margin: 0 6px !important; }


/* ==========================================================
   【８】インタラクティブ演出：スクロール登場 ＆ 常時ゆらゆら浮遊
   ========================================================= */
html body .data-layout-grid .data-box.is-active {
  animation: cardFloating 4s ease-in-out infinite alternate !important;
}

.data-layout-grid .data-box:nth-child(1).is-active { animation-delay: 0.0s !important; }
.data-layout-grid .data-box:nth-child(2).is-active { animation-delay: -1.2s !important; }
.data-layout-grid .data-box:nth-child(3).is-active { animation-delay: -2.4s !important; }
.data-layout-grid .data-box:nth-child(4).is-active { animation-delay: -0.6s !important; }
.data-layout-grid .data-box:nth-child(5).is-active { animation-delay: -1.8s !important; }
.data-layout-grid .data-box:nth-child(6).is-active { animation-delay: -3.0s !important; }
.data-layout-grid .data-box:nth-child(7).is-active { animation-delay: -0.3s !important; }
.data-layout-grid .data-box:nth-child(8).is-active { animation-delay: -1.5s !important; }
.data-layout-grid .data-box:nth-child(9).is-active { animation-delay: -2.7s !important; }
.data-layout-grid .data-box:nth-child(10).is-active { animation-delay: -0.9s !important; }
.data-layout-grid .data-box:nth-child(11).is-active { animation-delay: -2.1s !important; }
.data-layout-grid .data-box:nth-child(12).is-active { animation-delay: -3.3s !important; }

@keyframes cardFloating {
  0% { transform: scale(1) translateY(0) rotate(0deg); }
  100% { transform: scale(1) translateY(-6px) rotate(0.6deg); }
}


/* ==========================================================================
   2. NEW COMMON SECTION TITLE STYLE (PERFECT MATCH WITH INTERVIEW PAGE)
   ========================================================================== */
.c-sectionTtl,
.top-video-section__title {
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 40px !important;
  padding-top: 80px !important; 
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  color: #2b435c !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* 共通タイトル内の英語部分 */
.c-sectionTtl__en {
  display: inline-block !important;
}

/* 日本語タイトル：英語のすぐ下に添える設定 */
.c-sectionTtl__ja {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #888888 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* スマホでの見え方（1000px以下） */
@media screen and (max-width: 1000px) {
  .c-sectionTtl,
  .top-video-section__title {
    margin-bottom: 25px !important;
    padding-top: 60px !important;
    font-size: 18px !important;
    letter-spacing: 0.18em !important;
  }
}

/* ==========================================================
   【９】最下部：次の「採用情報セクション」との最終余白調整
   ========================================================= */
#data-section + .recruit-info {
  margin-top: 100px !important;
}


/* ==========================================================
   ■ パソコン版：style.cssの上書き干渉を強制ねじ伏せ突破
   ========================================================== */
@media screen and (min-width: 769px) {
  html body .data-layout-grid .data-box:hover {
    transform: scale(1.05) !important; 
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
    z-index: 10000 !important; 
  }
  
  html body .data-layout-grid .data-box:hover .num,
  html body .data-layout-grid .data-box:hover span,
  html body .data-layout-grid .data-box:hover p {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body main section#under-interview-section {
    position: relative !important;
    z-index: 10 !important;
    background-color: #ffffff !important; 
  }

  html body main section.recruit-info,
  html body main footer.footer-recruit {
    position: relative !important;
    z-index: 10 !important;
  }
}
/* ==========================================================
   「勢い」カード専用の最優先上書きルール
   ========================================================= */
html body .data-layout-grid .data-box .card-label.data-title-space {
  margin-bottom: 12px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #333333 !important;
  letter-spacing: 0.02em !important;
}

html body .data-layout-grid .data-box .data-sub.data-sub-large {
  margin-top: 12px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #333333 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em !important;
}

/* 「11」の数字部分だけの色とフォント指定 */
html body .data-layout-grid .data-box .data-sub .text-highlight {
  color: #1e4461 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  margin-right: 4px !important;
}

/* ==========================================================
   【追加】未経験率カードの「挑戦」を強制グレー化
   ========================================================= */
html body .data-layout-grid .data-box span.data-date.data-date-gray {
  color: #888888 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================
   【追加】横幅いっぱい（size-full）のカードを白背景・紺文字に反転
   ========================================================= */
html body .data-layout-grid .data-box.size-full.size-full-white {
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04) !important;
}

html body .data-layout-grid .data-box.size-full-white .num {
  color: #1e4461 !important;
}

html body .data-layout-grid .data-box.size-full-white .unit,
html body .data-layout-grid .data-box.size-full-white .data-sub {
  color: #333333 !important;
}

html body .data-layout-grid .data-box.size-full-white .data-tag {
  background: #f4f4f4 !important;
  color: #879ba9!important;
}
html body .data-layout-grid .data-box.size-full-white span.data-date.data-date-gray {
  color: #888888 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================
   男女比
   ========================================================= */
.gender-stack-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 15px auto 10px;
  padding-left: 0;
  white-space: nowrap;
  width: 100%;
}

.gender-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 男性の色設定 */
.gender-col.male {
  color: #3b5998 !important;
}

/* 女性の色設定 */
.gender-col.female {
  color: #e06666;
}

.gender-col.male .g-top-label {
  margin-right: 70px;
}

.gender-col.female .g-top-label {
  margin-right: 70px;
}

/* ラベル自体の共通設定 */
.g-top-label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* 数字と「％」を横並びにするグループ */
.g-num-group {
  display: flex;
  align-items: baseline;
}

/* 特大数字 */
.g-num {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* 「％」の記号 */
.g-unit {
  font-size: 20px;
  font-weight: 700;
  margin-left: 2px;
  line-height: 1;
}

/* 中央のコロン「：」の幅と隙間 */
.gender-divider {
  font-size: 24px;
  font-weight: 700;
  color: #333333;
  line-height: 1;
  margin: 0 6px 8px;
}


/* ==========================================================
   【1000px以下専用】男女比カードの枠内完全収縮設定
   ========================================================= */
@media screen and (max-width: 1000px) {
  
  .gender-stack-wrap {
    justify-content: center !important; 
    padding-left: 0 !important;        
    margin: 15px auto 10px !important;  
  }

  .g-num {
    font-size: 44px !important; 
  }

  .g-unit {
    font-size: 16px !important;
  }

  /* 4. コロン「：」のサイズと位置の微調整 */
  .gender-divider {
    font-size: 20px !important;
    margin: 0 4px 6px !important;  
  }

  /* 5. ★最重要：「男性」「女性」のラベル */
  .gender-col.male .g-top-label {
    margin-right: 52px !important;
  }

  .gender-col.female .g-top-label {
    margin-right: 52px !important;
  }
  
  .g-top-label {
    font-size: 13px !important;
  }
}


/* ===================================================
   1. 基本設定（PC・1001px以上のとき）
=================================================== */
.data-box .data-sub br.sp-only {
  display: none !important;
}

.data-box .data-sub .pc-only-dot {
  display: inline !important;
}


/* ===================================================
   2. responsive設定（1000px以下のとき）
=================================================== */
@media screen and (max-width: 1000px) {
  .data-box .data-sub br.sp-only {
    display: block !important;
  }

  .data-box .data-sub .pc-only-dot {
    display: none !important;
  }
  
  .data-box .data-sub {
    line-height: 1.6 !important;
  }
}


/* ===================================================
   1. 基本設定（PC・1001px以上のとき）
=================================================== */
.data-box.is-holiday .holiday-name {
  color: #222222 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  display: inline-block !important;
}

.data-box.is-holiday .num-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 40px !important;
  width: 100% !important;
}

.data-box.is-holiday .holiday-item {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
}

/* ===================================================
   2. レスポンシブ設定（1000px以下のとき）
=================================================== */
@media screen and (max-width: 1000px) {
  .data-box.is-holiday .num-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    gap: 12px !important;
    width: 100% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  .data-box.is-holiday .holiday-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    width: 200px !important;
  }

  .data-box.is-holiday .holiday-name {
    color: #222222 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: left !important;
  }

  /* 数字＋「日」を右揃えにする領域 */
  .data-box.is-holiday .holiday-num-wrap {
    text-align: right !important;
    min-width: 80px !important; 
  }
}


/* ===================================================
   注意書き（注釈）の色と配置ライン調整
=================================================== */
.data-notes-wrap {
  width: 100%;
  max-width: 1000px !important;
  margin: 60px auto 0 !important;
  padding: 0 90px !important;     
  text-align: left !important; 
  box-sizing: border-box;
}

.data-note-item {
  font-size: 12px !important;       
  color: #888888 !important;
  line-height: 1.6 !important;     
  margin: 0 0 6px 0 !important;
  text-align: left !important;     
  font-weight: normal !important;  
}

/* スマホ・タブレット時（1000px以下） */
@media screen and (max-width: 1000px) {
  .data-notes-wrap {
    margin-top: 40px !important;  
    padding: 0 20px !important;   
  }
  .data-note-item {
    font-size: 11px !important; 
    color: #888888 !important;
  }
}


/* ==========================================================
   【確定修正版】カードなし・横棒グラフ専用スタイル
   ========================================================== */
.data-box-chart-clear {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 30px 10px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* グラフ全体の包み枠 */
.bar-chart-wrapper {
  width: 100% !important;
  max-width: 480px !important;
  margin: 20px auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* 1行分のレイアウト */
.bar-chart-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* 左側のラベル */
.bar-label {
  display: inline-block !important;
  width: 105px !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #333333 !important;
  white-space: nowrap !important;
}

/* グラフの白い土台*/
.bar-container {
  flex: 1 !important;
  height: 14px !important;
  background-color: #FFFFFF !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  margin: 0 15px !important;
  position: relative !important;
}

/* 中身のカラーバー*/
.bar-fill {
  width: 0% !important; 
  height: 100% !important;
  border-radius: 50px !important;
  display: block !important;
  transition: width 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important; 
}

.data-box-chart-clear.is-active .bar-fill {
  width: var(--target-width) !important;
}

/* バーの色指定 */
.bar-fill.color-navy  { background-color: #1e4461 !important; }
.bar-fill.color-blue  { background-color: #4da9cc !important; }
.bar-fill.color-light { background-color: #99c7de !important; }

/* 順番に伸びるディレイ（遅延）演出 */
.bar-chart-row:nth-child(1) .bar-fill { transition-delay: 0.1s !important; }
.bar-chart-row:nth-child(2) .bar-fill { transition-delay: 0.2s !important; }
.bar-chart-row:nth-child(3) .bar-fill { transition-delay: 0.3s !important; }
.bar-chart-row:nth-child(4) .bar-fill { transition-delay: 0.4s !important; }
.bar-chart-row:nth-child(5) .bar-fill { transition-delay: 0.5s !important; }
.bar-chart-row:nth-child(6) .bar-fill { transition-delay: 0.6s !important; }

/* 右側のパーセンテージ数値 */
.bar-percentage {
  display: inline-block !important;
  width: 45px !important;
  text-align: right !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1e4461 !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
}

/* 下部の［故郷］［経歴］テキスト */
.data-date-clear {
  display: block !important;
  color: #999999 !important; 
  font-size: 12px !important;
  margin-top: 12px !important;
  text-align: center !important;
  letter-spacing: 0.05em !important;
}

/* スマホ環境 */
@media screen and (max-width: 1000px) {
  .data-box-chart-clear {
    padding: 20px 0 !important;
    width: 90% !important;
    margin: 0 auto 30px !important;
  }
  .bar-chart-wrapper { gap: 14px !important; }
  .bar-label { width: 90px !important; font-size: 13px !important; }
  .bar-container { height: 12px !important; margin: 0 10px !important; background-color: #FFFFFF !important; }
  .bar-percentage { width: 38px !important; font-size: 13px !important; }
}
/* ==========================================================
   ■ グラフの復活 ＆ もう一つのグラフと綺麗に横並びにする設定
   ========================================================== */
@media screen and (min-width: 1001px) {
  html body .data-layout-grid .data-box-chart-clear {
    grid-column: span 1 !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

.bar-chart-wrapper {
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.bar-chart-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.bar-label {
  display: inline-block !important;
  width: 140px !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #333333 !important;
  white-space: nowrap !important;
}

.bar-container {
  flex: 1 !important;
  height: 12px !important;
  background-color: #FFFFFF !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  margin: 0 10px !important;
  position: relative !important;
}

.bar-fill {
  width: 0% !important; 
  height: 100% !important;
  border-radius: 50px !important;
  display: block !important;
  transition: width 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important; 
}

.data-box-chart-clear.is-active .bar-fill {
  width: var(--target-width) !important;
}

.bar-fill.color-navy  { background-color: #1e4461 !important; }
.bar-fill.color-blue  { background-color: #4da9cc !important; }
.bar-fill.color-light { background-color: #99c7de !important; }

.bar-percentage {
  display: inline-block !important;
  width: 38px !important;
  text-align: right !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1e4461 !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
}

.bar-chart-notes {
  width: 100% !important;
  max-width: 100% !important;
  font-size: 11px !important;
  color: #879ba9!important;
  line-height: 1.5 !important;
  margin-top: 10px !important;
  text-align: left !important;
  white-space: normal !important;
}

@media screen and (max-width: 1000px) {
  html body .data-layout-grid .data-box-chart-clear {
    width: 82% !important;
    max-width: 320px !important;
    margin: 0 auto 30px !important;
  }
  .bar-chart-wrapper {
    max-width: 100% !important;
    gap: 14px !important;
  }
  .bar-label {
    width: 120px !important;
    font-size: 12px !important;
  }
}

/* ===================================================
   【修正】セクションの終わり・最下部の縦幅縮小
=================================================== */
.data-page-bg-wrapper {
  padding-bottom: 40px !important;
}

#data-section {
  padding-bottom: 0 !important;
}

.data-notes-wrap {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* スマホ・タブレット時（1000px以下）の最終調整 */
@media screen and (max-width: 1000px) {
  .data-page-bg-wrapper {
    padding-bottom: 30px !important;
  }
  
  #data-section {
    padding-bottom: 0 !important;
  }
}
/* ==========================================================
   ■ 前職・出身地グラフ専用スタイル
   ========================================================== */
.data-box-chart-clear {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 30px 10px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media screen and (min-width: 1001px) {
  html body .data-layout-grid .data-box-chart-clear {
    grid-column: span 1 !important;
    max-width: 420px !important;
    margin: 0 !important;
  }
}

/* グラフ全体の包み枠 */
.single-bar-chart-container {
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 大元の白い土台溝（共通） */
.single-bar-fill-track {
  width: 100% !important;
  height: 28px !important;
  background-color: #FFFFFF !important;
  border-radius: 50px !important;
  position: relative !important;
  margin-bottom: 24px !important;
  box-shadow: none !important;
  display: flex !important;
  overflow: hidden !important;
}

/* ── 前職の構成比：ブロック形式アニメーション ── */
.chart-segment {
  display: block !important;
  height: 100% !important;
  width: 0% !important;
  flex-shrink: 0 !important;
  transition: width 1.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.data-box-chart-clear.is-active .chart-segment {
  width: var(--seg-width) !important;
}

.chart-segment.seg-navy   { background-color: #3b5998 !important; }
.chart-segment.seg-blue   { background-color: #4da9cc !important; }
.chart-segment.seg-indigo { background-color: #79bcc7 !important; }
.chart-segment.seg-teal   { background-color: #f39800 !important; }
.chart-segment.seg-light  { background-color: #e28080 !important; }
.chart-segment.seg-gray   { background-color: #879ba9!important; } /* 前職その他：濃いグレー */

/* ── 出身地：1本グラデーション形式 ── */
.hometown-bar-track::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 0% !important;
  height: 100% !important;
  
  background: linear-gradient(to right, 
    #3b5998 0%,   #3b5998 45%,  /* 関東: 45% */
    #4da9cc 45%,  #4da9cc 64%,  /* 近畿: 19% */
    #79bcc7 64%,  #79bcc7 81%,  /* 九州沖縄: 17% */
    #f39800 81%,  #f39800 95%,  /* 中国四国: 14% */
    #e28080 95%,  #e28080 100%  /* その他: 5% ★ピンク */
  ) !important;
  
  border-radius: 50px !important;
  transition: width 1.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  z-index: 2 !important;
}

.data-box-chart-clear.is-active .hometown-bar-track::before {
  width: 100% !important;
}

.single-bar-fill-track::after { display: none !important; }

/* ── 凡例（共通設定） ── */
.chart-legend-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px 15px !important;
  width: 100% !important;
  padding: 0 5px !important;
  box-sizing: border-box !important;
}

.legend-item { display: flex !important; align-items: center !important; }

.dot-icon {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

/* 丸ポチ基本カラー（前職ベース） */
.dot-icon.seg-navy   { background-color: #3b5998 !important; }
.dot-icon.seg-blue   { background-color: #4da9cc !important; }
.dot-icon.seg-indigo { background-color: #79bcc7 !important; }
.dot-icon.seg-teal   { background-color: #f39800 !important; }
.dot-icon.seg-light  { background-color: #e28080 !important; }
.dot-icon.seg-gray   { background-color: #879ba9!important; } 
.dot-icon.seg-aqua   { background-color: #79bcc7 !important; }

.data-box-chart-clear:has(.data-tag) + .data-box-chart-clear .dot-icon.seg-gray {
  background-color: #e28080 !important;
}

.legend-txt {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #333333 !important;
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
}

.legend-txt span {
  font-weight: 800 !important;
  color: #1e4461 !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
}

.bar-chart-notes {
  width: 100% !important;
  font-size: 11px !important;
  color: #879ba9!important;
  line-height: 1.5 !important;
  margin-top: 20px !important;
  text-align: left !important;
  white-space: normal !important;
}

.data-date-clear {
  display: block !important;
  color: #999999 !important; 
  font-size: 12px !important;
  margin-top: 12px !important;
  text-align: center !important;
  letter-spacing: 0.05em !important;
}

@media screen and (max-width: 1000px) {
  html body .data-layout-grid .data-box-chart-clear {
    width: 82% !important;
    max-width: 320px !important;
    margin: 0 auto 30px !important;
  }
  .single-bar-chart-container { max-width: 100% !important; }
  .single-bar-fill-track { height: 24px !important; }
  .chart-legend-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ── その他注釈エリアの余白微調整 ── */
.data-notes-wrap { padding-bottom: 0 !important; margin-bottom: 0 !important; }


/* ==========================================================
   5. INTERVIEW
   ========================================================== */
.interview {
  text-align: center;
}

.interview h2 img {
  height: 80px;
  width: auto;
  margin-bottom: 40px;
}

.interview-card-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.interview-card {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: transparent !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.card-base {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.photo-area img {
  width: 100% !important;
  height: 360px !important;
  object-fit: cover !important;
  border-radius: 20px;
  display: block;
  object-position: center 5% !important; 
}

.coming-soon .photo-area {
  width: 100%;
  height: 360px;
  background-color: #f9f9f9;
  border-radius: 20px;
}

.info-label {
  position: absolute;
  bottom: -15px;
  left: 0;
  background-color: #ffffff;
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  text-align: left;
  width: 85%;
}

.info-label .post {
  font-size: 11px;
  color: #888888;
  line-height: 1.4;
  margin-bottom: 5px;
  font-weight: bold;
}

.info-label .name {
  font-size: 18px;
  font-weight: 800;
  color: #333333;
}

.view-more-btn {
  margin-top: 10px;
  width: 200px;
  height: 44px;
  border: 1px solid #1e4461;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.view-more-btn span {
  color: #1e4461;
  font-size: 14px;
  font-weight: 800;
  transition: color 0.3s ease;
}

.interview-card:hover {
  transform: scale(1.05) translateY(-5px);
  z-index: 10;
}

.interview-card:hover .view-more-btn {
  background-color: #1e4461;
  border-color: #1e4461;
}

.interview-card:hover .view-more-btn span {
  color: #ffffff;
}

.interview-card.coming-soon {
  display: none !important;
}

.interview-card .card-base .photo-area {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
/* ==========================================================
   ■ 共通インタビュー：indexページと完全同一化（確定版）
   ========================================================== */
/* 1. フォントの種類を Noto Sans JP に完全統一 */
.under-interview-info-wrap,
.under-interview-info-wrap * {
    font-family: "Noto Sans JP", sans-serif !important;
}

/* 2. 名前部分：index側と同じ「18px」「800」に強制固定 */
.under-interview-info-wrap .under-interview-item-name {
    font-size: 18px !important; 
    font-weight: 800 !important; 
    letter-spacing: 0.02em !important;
}

/* 3. 年次部分：index側と同じ「11px」「bold」に強制固定 */
.under-interview-info-wrap .under-interview-item-year {
    font-size: 11px !important; 
    font-weight: bold !important;
}